@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/Popover.stories.js CHANGED
@@ -34,13 +34,12 @@ _export(exports, {
34
34
  var _jsxruntime = require("react/jsx-runtime");
35
35
  var _react = require("react");
36
36
  var _transformers = require("../utilities/transformers.js");
37
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
37
38
  var _Popover = /*#__PURE__*/ _interop_require_default(require("../components/Popover.js"));
38
39
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
39
40
  var _ActionList = /*#__PURE__*/ _interop_require_default(require("../components/ActionList.js"));
40
41
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
41
42
  var _TextField = /*#__PURE__*/ _interop_require_default(require("../components/TextField.js"));
42
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
43
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
44
43
  var _polarisicons = require("@shopify/polaris-icons");
45
44
  function _array_like_to_array(arr, len) {
46
45
  if (len == null || len > arr.length) len = arr.length;
@@ -247,8 +246,9 @@ var Alignments = {
247
246
  var _useState = _sliced_to_array((0, _react.useState)(false), 2), leftActive = _useState[0], setLeftActive = _useState[1];
248
247
  var _useState1 = _sliced_to_array((0, _react.useState)(false), 2), centerActive = _useState1[0], setCenterActive = _useState1[1];
249
248
  var _useState2 = _sliced_to_array((0, _react.useState)(false), 2), rightActive = _useState2[0], setRightActive = _useState2[1];
250
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
251
- gap: "4",
249
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
250
+ horizontal: true,
251
+ gap: "md",
252
252
  children: [
253
253
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
254
254
  active: leftActive,
@@ -539,7 +539,8 @@ var CustomContent = {
539
539
  gap: "0.75rem"
540
540
  },
541
541
  children: [
542
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
542
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
543
+ horizontal: true,
543
544
  align: "space-between",
544
545
  children: [
545
546
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -551,7 +552,8 @@ var CustomContent = {
551
552
  })
552
553
  ]
553
554
  }),
554
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
555
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
556
+ horizontal: true,
555
557
  align: "space-between",
556
558
  children: [
557
559
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -563,7 +565,8 @@ var CustomContent = {
563
565
  })
564
566
  ]
565
567
  }),
566
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
568
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
569
+ horizontal: true,
567
570
  align: "space-between",
568
571
  children: [
569
572
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -575,7 +578,8 @@ var CustomContent = {
575
578
  })
576
579
  ]
577
580
  }),
578
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
581
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
582
+ horizontal: true,
579
583
  align: "space-between",
580
584
  children: [
581
585
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
package/dist/cjs/stories/PopoverManager.stories.js CHANGED
@@ -28,14 +28,13 @@ _export(exports, {
28
28
  var _jsxruntime = require("react/jsx-runtime");
29
29
  var _react = require("react");
30
30
  var _transformers = require("../utilities/transformers.js");
31
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
31
32
  var _PopoverManager = /*#__PURE__*/ _interop_require_default(require("../components/PopoverManager.js"));
32
33
  var _Popover = /*#__PURE__*/ _interop_require_default(require("../components/Popover.js"));
33
34
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
34
35
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
35
36
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
36
37
  var _Page = /*#__PURE__*/ _interop_require_default(require("../components/Page.js"));
37
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
38
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
39
38
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
40
39
  function _array_like_to_array(arr, len) {
41
40
  if (len == null || len > arr.length) len = arr.length;
@@ -208,17 +207,18 @@ var BasicUsage = {
208
207
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
209
208
  title: "PopoverManager Basic Usage",
210
209
  padded: true,
211
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
212
- gap: "8",
210
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
211
+ gap: "lg",
213
212
  children: [
214
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
215
- gap: "4",
213
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
214
+ gap: "md",
216
215
  children: [
217
216
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
218
217
  children: "The PopoverManager helps coordinate multiple popovers to prevent conflicts and manage layering. Click the buttons below to see it in action."
219
218
  }),
220
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
221
- gap: "4",
219
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
220
+ horizontal: true,
221
+ gap: "md",
222
222
  children: [
223
223
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
224
224
  active: popover1Active,
@@ -230,8 +230,8 @@ var BasicUsage = {
230
230
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
231
231
  padding: "4",
232
232
  minWidth: "200px",
233
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
234
- gap: "2",
233
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
234
+ gap: "sm",
235
235
  children: [
236
236
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
237
237
  variant: "headingSm",
@@ -259,8 +259,8 @@ var BasicUsage = {
259
259
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
260
260
  padding: "4",
261
261
  minWidth: "200px",
262
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
263
- gap: "2",
262
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
263
+ gap: "sm",
264
264
  children: [
265
265
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
266
266
  variant: "headingSm",
@@ -291,15 +291,15 @@ var BasicUsage = {
291
291
  padding: "4",
292
292
  background: "subdued",
293
293
  borderRadius: "default",
294
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
295
- gap: "2",
294
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
295
+ gap: "sm",
296
296
  children: [
297
297
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
298
298
  variant: "headingSm",
299
299
  children: "PopoverManager State"
300
300
  }),
301
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
302
- gap: "1",
301
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
302
+ gap: "xs",
303
303
  children: [
304
304
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
305
305
  variant: "bodySm",
@@ -396,17 +396,18 @@ var ConflictResolution = {
396
396
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
397
397
  title: "Popover Conflict Resolution",
398
398
  padded: true,
399
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
400
- gap: "8",
399
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
400
+ gap: "lg",
401
401
  children: [
402
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
403
- gap: "4",
402
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
403
+ gap: "md",
404
404
  children: [
405
405
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
406
406
  children: "When multiple popovers might conflict (like context menus and settings panels), PopoverManager helps resolve conflicts by allowing controlled opening and closing."
407
407
  }),
408
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
409
- gap: "4",
408
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
409
+ horizontal: true,
410
+ gap: "md",
410
411
  children: [
411
412
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
412
413
  active: contextMenuActive,
@@ -418,15 +419,15 @@ var ConflictResolution = {
418
419
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
419
420
  padding: "4",
420
421
  minWidth: "150px",
421
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
422
- gap: "2",
422
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
423
+ gap: "sm",
423
424
  children: [
424
425
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
425
426
  variant: "headingSm",
426
427
  children: "Context Menu"
427
428
  }),
428
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
429
- gap: "1",
429
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
430
+ gap: "xs",
430
431
  children: [
431
432
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
432
433
  size: "slim",
@@ -473,18 +474,19 @@ var ConflictResolution = {
473
474
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
474
475
  padding: "4",
475
476
  minWidth: "200px",
476
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
477
- gap: "4",
477
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
478
+ gap: "md",
478
479
  children: [
479
480
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
480
481
  variant: "headingSm",
481
482
  children: "Settings"
482
483
  }),
483
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
484
- gap: "4",
484
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
485
+ gap: "md",
485
486
  children: [
486
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
487
- gap: "2",
487
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
488
+ horizontal: true,
489
+ gap: "sm",
488
490
  blockAlign: "center",
489
491
  children: [
490
492
  /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
@@ -497,8 +499,9 @@ var ConflictResolution = {
497
499
  })
498
500
  ]
499
501
  }),
500
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
501
- gap: "2",
502
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
503
+ horizontal: true,
504
+ gap: "sm",
502
505
  blockAlign: "center",
503
506
  children: [
504
507
  /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
@@ -510,8 +513,8 @@ var ConflictResolution = {
510
513
  })
511
514
  ]
512
515
  }),
513
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
514
- gap: "2",
516
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
517
+ gap: "sm",
515
518
  children: [
516
519
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
517
520
  variant: "bodySm",
@@ -554,15 +557,15 @@ var ConflictResolution = {
554
557
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
555
558
  padding: "4",
556
559
  minWidth: "180px",
557
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
558
- gap: "2",
560
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
561
+ gap: "sm",
559
562
  children: [
560
563
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
561
564
  variant: "headingSm",
562
565
  children: "Help & Support"
563
566
  }),
564
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
565
- gap: "1",
567
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
568
+ gap: "xs",
566
569
  children: [
567
570
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
568
571
  size: "slim",
@@ -612,15 +615,15 @@ var ConflictResolution = {
612
615
  padding: "4",
613
616
  background: "subdued",
614
617
  borderRadius: "default",
615
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
616
- gap: "2",
618
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
619
+ gap: "sm",
617
620
  children: [
618
621
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
619
622
  variant: "headingSm",
620
623
  children: "Conflict Resolution Status"
621
624
  }),
622
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
623
- gap: "1",
625
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
626
+ gap: "xs",
624
627
  children: [
625
628
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
626
629
  variant: "bodyXs",
@@ -730,7 +733,8 @@ var ApplicationIntegration = {
730
733
  background: "subdued",
731
734
  borderRadius: "lg",
732
735
  marginBlockEnd: "8",
733
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
736
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
737
+ horizontal: true,
734
738
  align: "space-between",
735
739
  blockAlign: "center",
736
740
  children: [
@@ -738,8 +742,9 @@ var ApplicationIntegration = {
738
742
  variant: "headingLg",
739
743
  children: "My Application"
740
744
  }),
741
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
742
- gap: "4",
745
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
746
+ horizontal: true,
747
+ gap: "md",
743
748
  blockAlign: "center",
744
749
  children: [
745
750
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
@@ -756,8 +761,8 @@ var ApplicationIntegration = {
756
761
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
757
762
  padding: "4",
758
763
  minWidth: "300px",
759
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
760
- gap: "4",
764
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
765
+ gap: "md",
761
766
  children: [
762
767
  /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
763
768
  type: "text",
@@ -769,8 +774,8 @@ var ApplicationIntegration = {
769
774
  borderRadius: "4px"
770
775
  }
771
776
  }),
772
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
773
- gap: "1",
777
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
778
+ gap: "xs",
774
779
  children: [
775
780
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
776
781
  variant: "bodySm",
@@ -815,15 +820,15 @@ var ApplicationIntegration = {
815
820
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
816
821
  padding: "4",
817
822
  minWidth: "280px",
818
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
819
- gap: "4",
823
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
824
+ gap: "md",
820
825
  children: [
821
826
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
822
827
  variant: "headingSm",
823
828
  children: "Notifications"
824
829
  }),
825
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
826
- gap: "2",
830
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
831
+ gap: "sm",
827
832
  children: [
828
833
  {
829
834
  title: "New order received",
@@ -848,8 +853,8 @@ var ApplicationIntegration = {
848
853
  style: {
849
854
  borderLeft: notification.unread ? "3px solid #007bff" : "3px solid transparent"
850
855
  },
851
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
852
- gap: "1",
856
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
857
+ gap: "xs",
853
858
  children: [
854
859
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
855
860
  variant: "bodySm",
@@ -866,7 +871,7 @@ var ApplicationIntegration = {
866
871
  }, index);
867
872
  })
868
873
  }),
869
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
874
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
870
875
  inlineAlign: "center",
871
876
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
872
877
  size: "slim",
@@ -891,11 +896,11 @@ var ApplicationIntegration = {
891
896
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
892
897
  padding: "4",
893
898
  minWidth: "200px",
894
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
895
- gap: "4",
899
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
900
+ gap: "md",
896
901
  children: [
897
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
898
- gap: "2",
902
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
903
+ gap: "sm",
899
904
  inlineAlign: "center",
900
905
  children: [
901
906
  /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
@@ -922,8 +927,8 @@ var ApplicationIntegration = {
922
927
  })
923
928
  ]
924
929
  }),
925
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
926
- gap: "1",
930
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
931
+ gap: "xs",
927
932
  children: [
928
933
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
929
934
  size: "slim",
@@ -976,14 +981,15 @@ var ApplicationIntegration = {
976
981
  title: "PopoverManager in Real Applications",
977
982
  padded: true,
978
983
  children: [
979
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
980
- gap: "4",
984
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
985
+ gap: "md",
981
986
  children: [
982
987
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
983
988
  children: "The header above demonstrates how PopoverManager works in a real application scenario, coordinating multiple interface elements like search, notifications, and user menus."
984
989
  }),
985
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_HorizontalStack.default, {
986
- gap: "4",
990
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
991
+ horizontal: true,
992
+ gap: "md",
987
993
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
988
994
  onClick: closeAll,
989
995
  destructive: true,
@@ -998,15 +1004,15 @@ var ApplicationIntegration = {
998
1004
  padding: "4",
999
1005
  background: "subdued",
1000
1006
  borderRadius: "default",
1001
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1002
- gap: "2",
1007
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1008
+ gap: "sm",
1003
1009
  children: [
1004
1010
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1005
1011
  variant: "headingSm",
1006
1012
  children: "Application State"
1007
1013
  }),
1008
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1009
- gap: "1",
1014
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1015
+ gap: "xs",
1010
1016
  children: [
1011
1017
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
1012
1018
  variant: "bodyXs",
@@ -1096,17 +1102,18 @@ var EventHandling = {
1096
1102
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
1097
1103
  title: "PopoverManager Event Handling",
1098
1104
  padded: true,
1099
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1100
- gap: "8",
1105
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1106
+ gap: "lg",
1101
1107
  children: [
1102
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1103
- gap: "4",
1108
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1109
+ gap: "md",
1104
1110
  children: [
1105
1111
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1106
1112
  children: "PopoverManager emits events when its state changes. This is useful for debugging and for components that need to react to popover state changes."
1107
1113
  }),
1108
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_HorizontalStack.default, {
1109
- gap: "4",
1114
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
1115
+ horizontal: true,
1116
+ gap: "md",
1110
1117
  children: [
1111
1118
  1,
1112
1119
  2,
@@ -1132,8 +1139,8 @@ var EventHandling = {
1132
1139
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
1133
1140
  padding: "4",
1134
1141
  minWidth: "150px",
1135
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1136
- gap: "2",
1142
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1143
+ gap: "sm",
1137
1144
  children: [
1138
1145
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
1139
1146
  variant: "headingSm",
@@ -1168,10 +1175,11 @@ var EventHandling = {
1168
1175
  padding: "4",
1169
1176
  background: "subdued",
1170
1177
  borderRadius: "default",
1171
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1172
- gap: "4",
1178
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1179
+ gap: "md",
1173
1180
  children: [
1174
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
1181
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1182
+ horizontal: true,
1175
1183
  align: "space-between",
1176
1184
  blockAlign: "center",
1177
1185
  children: [