@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/Label.stories.js CHANGED
@@ -48,11 +48,11 @@ _export(exports, {
48
48
  });
49
49
  var _jsxruntime = require("react/jsx-runtime");
50
50
  var _transformers = require("../utilities/transformers.js");
51
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
51
52
  var _Label = /*#__PURE__*/ _interop_require_default(require("../components/Label.js"));
52
53
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
53
54
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
54
55
  var _TextField = /*#__PURE__*/ _interop_require_default(require("../components/TextField.js"));
55
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
56
56
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
57
57
  function _define_property(obj, key, value) {
58
58
  if (key in obj) {
@@ -203,8 +203,8 @@ var Hidden = {
203
203
  hidden: true
204
204
  },
205
205
  render: function(args) {
206
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
207
- gap: "4",
206
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
207
+ gap: "md",
208
208
  children: [
209
209
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, _object_spread({}, args)),
210
210
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -236,8 +236,8 @@ var Disabled = {
236
236
  };
237
237
  var Variants = {
238
238
  render: function() {
239
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
240
- gap: "4",
239
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
240
+ gap: "md",
241
241
  children: [
242
242
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
243
243
  variant: "bodyXs",
@@ -268,8 +268,8 @@ var Variants = {
268
268
  };
269
269
  var FontWeights = {
270
270
  render: function() {
271
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
272
- gap: "4",
271
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
272
+ gap: "md",
273
273
  children: [
274
274
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
275
275
  fontWeight: "normal",
@@ -300,8 +300,8 @@ var FontWeights = {
300
300
  };
301
301
  var Colors = {
302
302
  render: function() {
303
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
304
- gap: "4",
303
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
304
+ gap: "md",
305
305
  children: [
306
306
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
307
307
  color: "subdued",
@@ -339,11 +339,11 @@ var WithFormFields = {
339
339
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
340
340
  title: "User Registration",
341
341
  padded: true,
342
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
343
- gap: "6",
342
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
343
+ gap: "md",
344
344
  children: [
345
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
346
- gap: "2",
345
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
346
+ gap: "sm",
347
347
  children: [
348
348
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
349
349
  id: "firstName",
@@ -356,8 +356,8 @@ var WithFormFields = {
356
356
  })
357
357
  ]
358
358
  }),
359
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
360
- gap: "2",
359
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
360
+ gap: "sm",
361
361
  children: [
362
362
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
363
363
  id: "lastName",
@@ -370,8 +370,8 @@ var WithFormFields = {
370
370
  })
371
371
  ]
372
372
  }),
373
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
374
- gap: "2",
373
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
374
+ gap: "sm",
375
375
  children: [
376
376
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
377
377
  id: "email",
@@ -386,8 +386,8 @@ var WithFormFields = {
386
386
  })
387
387
  ]
388
388
  }),
389
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
390
- gap: "2",
389
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
390
+ gap: "sm",
391
391
  children: [
392
392
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
393
393
  id: "phone",
@@ -400,8 +400,8 @@ var WithFormFields = {
400
400
  })
401
401
  ]
402
402
  }),
403
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
404
- gap: "2",
403
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
404
+ gap: "sm",
405
405
  children: [
406
406
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
407
407
  id: "bio",
@@ -432,18 +432,18 @@ var FormValidationStates = {
432
432
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
433
433
  title: "Form Validation Examples",
434
434
  padded: true,
435
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
436
- gap: "8",
435
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
436
+ gap: "lg",
437
437
  children: [
438
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
439
- gap: "4",
438
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
439
+ gap: "md",
440
440
  children: [
441
441
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
442
442
  variant: "headingSm",
443
443
  children: "Success State"
444
444
  }),
445
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
446
- gap: "2",
445
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
446
+ gap: "sm",
447
447
  children: [
448
448
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
449
449
  id: "validField",
@@ -459,15 +459,15 @@ var FormValidationStates = {
459
459
  })
460
460
  ]
461
461
  }),
462
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
463
- gap: "4",
462
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
463
+ gap: "md",
464
464
  children: [
465
465
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
466
466
  variant: "headingSm",
467
467
  children: "Error State"
468
468
  }),
469
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
470
- gap: "2",
469
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
470
+ gap: "sm",
471
471
  children: [
472
472
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
473
473
  id: "errorField",
@@ -484,15 +484,15 @@ var FormValidationStates = {
484
484
  })
485
485
  ]
486
486
  }),
487
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
488
- gap: "4",
487
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
488
+ gap: "md",
489
489
  children: [
490
490
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
491
491
  variant: "headingSm",
492
492
  children: "Warning State"
493
493
  }),
494
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
495
- gap: "2",
494
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
495
+ gap: "sm",
496
496
  children: [
497
497
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
498
498
  id: "warningField",
@@ -507,15 +507,15 @@ var FormValidationStates = {
507
507
  })
508
508
  ]
509
509
  }),
510
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
511
- gap: "4",
510
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
511
+ gap: "md",
512
512
  children: [
513
513
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
514
514
  variant: "headingSm",
515
515
  children: "Disabled State"
516
516
  }),
517
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
518
- gap: "2",
517
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
518
+ gap: "sm",
519
519
  children: [
520
520
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
521
521
  id: "disabledField",
@@ -548,21 +548,21 @@ var AccessibilityExample = {
548
548
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
549
549
  title: "Accessibility Features",
550
550
  padded: true,
551
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
552
- gap: "8",
551
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
552
+ gap: "lg",
553
553
  children: [
554
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
555
- gap: "4",
554
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
555
+ gap: "md",
556
556
  children: [
557
557
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
558
558
  variant: "headingSm",
559
559
  children: "Proper Label Association"
560
560
  }),
561
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
562
- gap: "4",
561
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
562
+ gap: "md",
563
563
  children: [
564
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
565
- gap: "2",
564
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
565
+ gap: "sm",
566
566
  children: [
567
567
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
568
568
  id: "accessible-username",
@@ -584,18 +584,18 @@ var AccessibilityExample = {
584
584
  })
585
585
  ]
586
586
  }),
587
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
588
- gap: "4",
587
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
588
+ gap: "md",
589
589
  children: [
590
590
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
591
591
  variant: "headingSm",
592
592
  children: "Screen Reader Only Label"
593
593
  }),
594
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
595
- gap: "4",
594
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
595
+ gap: "md",
596
596
  children: [
597
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
598
- gap: "2",
597
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
598
+ gap: "sm",
599
599
  children: [
600
600
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
601
601
  id: "sr-only-field",
@@ -617,18 +617,18 @@ var AccessibilityExample = {
617
617
  })
618
618
  ]
619
619
  }),
620
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
621
- gap: "4",
620
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
621
+ gap: "md",
622
622
  children: [
623
623
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
624
624
  variant: "headingSm",
625
625
  children: "Label with Additional Context"
626
626
  }),
627
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
628
- gap: "4",
627
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
628
+ gap: "md",
629
629
  children: [
630
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
631
- gap: "2",
630
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
631
+ gap: "sm",
632
632
  children: [
633
633
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
634
634
  id: "context-field",
package/dist/cjs/stories/Layout.stories.js CHANGED
@@ -33,6 +33,7 @@ _export(exports, {
33
33
  });
34
34
  var _jsxruntime = require("react/jsx-runtime");
35
35
  var _transformers = require("../utilities/transformers.js");
36
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
36
37
  var _Layout = /*#__PURE__*/ _interop_require_default(require("../components/Layout.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"));
@@ -40,8 +41,6 @@ var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Butt
40
41
  var _TextField = /*#__PURE__*/ _interop_require_default(require("../components/TextField.js"));
41
42
  var _Checkbox = /*#__PURE__*/ _interop_require_default(require("../components/Checkbox.js"));
42
43
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.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 _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
46
45
  function _interop_require_default(obj) {
47
46
  return obj && obj.__esModule ? obj : {
@@ -151,8 +150,8 @@ var AnnotatedSections = {
151
150
  description: "Manage your account information and preferences",
152
151
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
153
152
  padded: true,
154
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
155
- gap: "4",
153
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
154
+ gap: "md",
156
155
  children: [
157
156
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
158
157
  label: "Full Name",
@@ -181,8 +180,8 @@ var AnnotatedSections = {
181
180
  description: "Choose how you want to receive notifications",
182
181
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
183
182
  padded: true,
184
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
185
- gap: "4",
183
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
184
+ gap: "md",
186
185
  children: [
187
186
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
188
187
  label: "Email notifications"
@@ -209,8 +208,8 @@ var AnnotatedSections = {
209
208
  description: "Manage your account security and privacy",
210
209
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
211
210
  padded: true,
212
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
213
- gap: "4",
211
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
212
+ gap: "md",
214
213
  children: [
215
214
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
216
215
  children: "Change Password"
@@ -261,8 +260,8 @@ var MixedSections = {
261
260
  description: "Your personal details and contact information",
262
261
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
263
262
  padded: true,
264
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
265
- gap: "4",
263
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
264
+ gap: "md",
266
265
  children: [
267
266
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
268
267
  label: "Name",
@@ -294,8 +293,8 @@ var MixedSections = {
294
293
  description: "Manage your subscription and payment methods",
295
294
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
296
295
  padded: true,
297
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
298
- gap: "4",
296
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
297
+ gap: "md",
299
298
  children: [
300
299
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
301
300
  children: "Current Plan: Professional ($29/month)"
@@ -303,8 +302,9 @@ var MixedSections = {
303
302
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
304
303
  children: "Next Billing Date: March 15, 2024"
305
304
  }),
306
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
307
- gap: "4",
305
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
306
+ horizontal: true,
307
+ gap: "md",
308
308
  children: [
309
309
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
310
310
  children: "Upgrade Plan"
@@ -341,8 +341,8 @@ var SettingsPage = {
341
341
  description: "Basic settings for your account and application preferences",
342
342
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
343
343
  padded: true,
344
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
345
- gap: "6",
344
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
345
+ gap: "md",
346
346
  children: [
347
347
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
348
348
  label: "Application Name",
@@ -356,8 +356,8 @@ var SettingsPage = {
356
356
  label: "Time Zone",
357
357
  value: "UTC-8 (Pacific Time)"
358
358
  }),
359
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
360
- gap: "2",
359
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
360
+ gap: "sm",
361
361
  children: [
362
362
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
363
363
  label: "Enable dark mode"
@@ -379,11 +379,11 @@ var SettingsPage = {
379
379
  description: "Control who can see your information and how your data is used",
380
380
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
381
381
  padded: true,
382
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
383
- gap: "6",
382
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
383
+ gap: "md",
384
384
  children: [
385
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
386
- gap: "2",
385
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
386
+ gap: "sm",
387
387
  children: [
388
388
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
389
389
  label: "Make profile public"
@@ -396,8 +396,9 @@ var SettingsPage = {
396
396
  })
397
397
  ]
398
398
  }),
399
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
400
- gap: "4",
399
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
400
+ horizontal: true,
401
+ gap: "md",
401
402
  children: [
402
403
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
403
404
  children: "Change Password"
@@ -416,8 +417,8 @@ var SettingsPage = {
416
417
  description: "Choose what notifications you want to receive and how",
417
418
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
418
419
  padded: true,
419
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
420
- gap: "6",
420
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
421
+ gap: "md",
421
422
  children: [
422
423
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
423
424
  children: [
@@ -428,8 +429,8 @@ var SettingsPage = {
428
429
  children: "Email Notifications"
429
430
  })
430
431
  }),
431
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
432
- gap: "2",
432
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
433
+ gap: "sm",
433
434
  children: [
434
435
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
435
436
  label: "Account updates"
@@ -456,8 +457,8 @@ var SettingsPage = {
456
457
  children: "Push Notifications"
457
458
  })
458
459
  }),
459
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
460
- gap: "2",
460
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
461
+ gap: "sm",
461
462
  children: [
462
463
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
463
464
  label: "New messages"
@@ -481,15 +482,15 @@ var SettingsPage = {
481
482
  description: "Irreversible and destructive actions",
482
483
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
483
484
  padded: true,
484
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
485
- gap: "4",
485
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
486
+ gap: "md",
486
487
  children: [
487
488
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
488
489
  color: "subdued",
489
490
  children: "These actions cannot be undone. Please proceed with caution."
490
491
  }),
491
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
492
- gap: "2",
492
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
493
+ gap: "sm",
493
494
  children: [
494
495
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
495
496
  destructive: true,
@@ -541,8 +542,8 @@ var ProductManagement = {
541
542
  description: "Essential details about your product",
542
543
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
543
544
  padded: true,
544
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
545
- gap: "4",
545
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
546
+ gap: "md",
546
547
  children: [
547
548
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
548
549
  label: "Product Name",
@@ -603,8 +604,8 @@ var ProductManagement = {
603
604
  description: "Configure shipping options and delivery settings",
604
605
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
605
606
  padded: true,
606
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
607
- gap: "4",
607
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
608
+ gap: "md",
608
609
  children: [
609
610
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
610
611
  columns: {
@@ -632,8 +633,8 @@ var ProductManagement = {
632
633
  })
633
634
  ]
634
635
  }),
635
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
636
- gap: "2",
636
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
637
+ gap: "sm",
637
638
  children: [
638
639
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
639
640
  label: "This is a physical product"
@@ -653,8 +654,9 @@ var ProductManagement = {
653
654
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.Section, {
654
655
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
655
656
  padded: true,
656
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
657
- gap: "4",
657
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
658
+ horizontal: true,
659
+ gap: "md",
658
660
  align: "end",
659
661
  children: [
660
662
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {