@heymantle/litho 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (146) hide show
  1. package/dist/cjs/components/Autocomplete.js +23 -12
  2. package/dist/cjs/components/Button.js +44 -6
  3. package/dist/cjs/components/Card.js +1 -0
  4. package/dist/cjs/components/ColorField.js +2 -2
  5. package/dist/cjs/components/EmptyState.js +2 -2
  6. package/dist/cjs/components/Filters.js +4 -3
  7. package/dist/cjs/components/Frame.js +9 -9
  8. package/dist/cjs/components/HorizontalStack.js +9 -2
  9. package/dist/cjs/components/Icon.js +1 -0
  10. package/dist/cjs/components/List.js +3 -3
  11. package/dist/cjs/components/Pane.js +61 -17
  12. package/dist/cjs/components/Stack.js +223 -0
  13. package/dist/cjs/components/Table.js +1 -1
  14. package/dist/cjs/components/Tabs.js +41 -11
  15. package/dist/cjs/components/VerticalStack.js +8 -2
  16. package/dist/cjs/index.js +4 -0
  17. package/dist/cjs/stories/ActionList.stories.js +1 -1
  18. package/dist/cjs/stories/Autocomplete.stories.js +20 -17
  19. package/dist/cjs/stories/Box.stories.js +14 -12
  20. package/dist/cjs/stories/ButtonGroup.stories.js +5 -5
  21. package/dist/cjs/stories/Card.stories.js +8 -8
  22. package/dist/cjs/stories/Checkbox.stories.js +3 -3
  23. package/dist/cjs/stories/ChoiceList.stories.js +13 -12
  24. package/dist/cjs/stories/Collapsible.stories.js +51 -39
  25. package/dist/cjs/stories/ColorField.stories.js +23 -19
  26. package/dist/cjs/stories/ContextualSaveBar.stories.js +15 -14
  27. package/dist/cjs/stories/DatePicker.stories.js +3 -3
  28. package/dist/cjs/stories/Divider.stories.js +64 -57
  29. package/dist/cjs/stories/DropZone.stories.js +25 -20
  30. package/dist/cjs/stories/Filters.stories.js +62 -60
  31. package/dist/cjs/stories/FooterHelp.stories.js +36 -31
  32. package/dist/cjs/stories/Form.stories.js +23 -20
  33. package/dist/cjs/stories/Grid.stories.js +58 -58
  34. package/dist/cjs/stories/Icon.stories.js +31 -28
  35. package/dist/cjs/stories/Image.stories.js +36 -36
  36. package/dist/cjs/stories/InlineError.stories.js +35 -34
  37. package/dist/cjs/stories/Label.stories.js +59 -59
  38. package/dist/cjs/stories/Layout.stories.js +44 -42
  39. package/dist/cjs/stories/LayoutSection.stories.js +114 -106
  40. package/dist/cjs/stories/Link.stories.js +14 -12
  41. package/dist/cjs/stories/List.stories.js +67 -50
  42. package/dist/cjs/stories/Listbox.stories.js +26 -22
  43. package/dist/cjs/stories/Loading.stories.js +59 -50
  44. package/dist/cjs/stories/Modal.stories.js +7 -7
  45. package/dist/cjs/stories/Page.stories.js +38 -29
  46. package/dist/cjs/stories/Pane.stories.js +135 -120
  47. package/dist/cjs/stories/Popover.stories.js +12 -8
  48. package/dist/cjs/stories/PopoverManager.stories.js +91 -83
  49. package/dist/cjs/stories/ProgressBar.stories.js +61 -54
  50. package/dist/cjs/stories/RadioButtonCard.stories.js +21 -21
  51. package/dist/cjs/stories/RangeSlider.stories.js +44 -40
  52. package/dist/cjs/stories/ResourceList.stories.js +46 -37
  53. package/dist/cjs/stories/SkeletonText.stories.js +23 -22
  54. package/dist/cjs/stories/Spinner.stories.js +46 -39
  55. package/dist/cjs/stories/Stack.stories.js +1397 -0
  56. package/dist/cjs/stories/Tabs.stories.js +1 -2
  57. package/dist/cjs/stories/Tag.stories.js +44 -36
  58. package/dist/cjs/stories/Thumbnail.stories.js +42 -38
  59. package/dist/cjs/stories/TimePicker.stories.js +33 -32
  60. package/dist/cjs/stories/Tip.stories.js +21 -21
  61. package/dist/cjs/stories/TopBar.stories.js +7 -5
  62. package/dist/esm/components/Autocomplete.js +23 -12
  63. package/dist/esm/components/Button.js +44 -6
  64. package/dist/esm/components/Card.js +1 -0
  65. package/dist/esm/components/ColorField.js +2 -2
  66. package/dist/esm/components/EmptyState.js +2 -2
  67. package/dist/esm/components/Filters.js +4 -3
  68. package/dist/esm/components/Frame.js +9 -9
  69. package/dist/esm/components/HorizontalStack.js +9 -2
  70. package/dist/esm/components/Icon.js +1 -0
  71. package/dist/esm/components/List.js +3 -3
  72. package/dist/esm/components/Pane.js +62 -18
  73. package/dist/esm/components/Stack.js +213 -0
  74. package/dist/esm/components/Table.js +1 -1
  75. package/dist/esm/components/Tabs.js +41 -11
  76. package/dist/esm/components/VerticalStack.js +8 -2
  77. package/dist/esm/index.js +1 -0
  78. package/dist/esm/stories/ActionList.stories.js +1 -1
  79. package/dist/esm/stories/Autocomplete.stories.js +20 -17
  80. package/dist/esm/stories/Box.stories.js +14 -12
  81. package/dist/esm/stories/ButtonGroup.stories.js +5 -5
  82. package/dist/esm/stories/Card.stories.js +8 -8
  83. package/dist/esm/stories/Checkbox.stories.js +3 -3
  84. package/dist/esm/stories/ChoiceList.stories.js +13 -12
  85. package/dist/esm/stories/Collapsible.stories.js +51 -39
  86. package/dist/esm/stories/ColorField.stories.js +23 -19
  87. package/dist/esm/stories/ContextualSaveBar.stories.js +15 -14
  88. package/dist/esm/stories/DatePicker.stories.js +3 -3
  89. package/dist/esm/stories/Divider.stories.js +64 -57
  90. package/dist/esm/stories/DropZone.stories.js +25 -20
  91. package/dist/esm/stories/Filters.stories.js +62 -60
  92. package/dist/esm/stories/FooterHelp.stories.js +36 -31
  93. package/dist/esm/stories/Form.stories.js +23 -20
  94. package/dist/esm/stories/Grid.stories.js +58 -58
  95. package/dist/esm/stories/Icon.stories.js +31 -28
  96. package/dist/esm/stories/Image.stories.js +36 -36
  97. package/dist/esm/stories/InlineError.stories.js +27 -26
  98. package/dist/esm/stories/Label.stories.js +59 -59
  99. package/dist/esm/stories/Layout.stories.js +44 -42
  100. package/dist/esm/stories/LayoutSection.stories.js +114 -106
  101. package/dist/esm/stories/Link.stories.js +14 -12
  102. package/dist/esm/stories/List.stories.js +67 -50
  103. package/dist/esm/stories/Listbox.stories.js +12 -8
  104. package/dist/esm/stories/Loading.stories.js +59 -50
  105. package/dist/esm/stories/Modal.stories.js +7 -7
  106. package/dist/esm/stories/Page.stories.js +7 -3
  107. package/dist/esm/stories/Pane.stories.js +95 -80
  108. package/dist/esm/stories/Popover.stories.js +12 -8
  109. package/dist/esm/stories/PopoverManager.stories.js +91 -83
  110. package/dist/esm/stories/ProgressBar.stories.js +61 -54
  111. package/dist/esm/stories/RadioButtonCard.stories.js +21 -21
  112. package/dist/esm/stories/RangeSlider.stories.js +34 -30
  113. package/dist/esm/stories/ResourceList.stories.js +46 -37
  114. package/dist/esm/stories/SkeletonText.stories.js +23 -22
  115. package/dist/esm/stories/Spinner.stories.js +40 -33
  116. package/dist/esm/stories/Stack.stories.js +1338 -0
  117. package/dist/esm/stories/Tabs.stories.js +1 -2
  118. package/dist/esm/stories/Tag.stories.js +27 -19
  119. package/dist/esm/stories/Thumbnail.stories.js +42 -38
  120. package/dist/esm/stories/TimePicker.stories.js +33 -32
  121. package/dist/esm/stories/Tip.stories.js +21 -21
  122. package/dist/esm/stories/TopBar.stories.js +7 -5
  123. package/dist/types/components/Autocomplete.d.ts +34 -29
  124. package/dist/types/components/Autocomplete.d.ts.map +1 -1
  125. package/dist/types/components/Button.d.ts +10 -0
  126. package/dist/types/components/Button.d.ts.map +1 -1
  127. package/dist/types/components/Card.d.ts +2 -0
  128. package/dist/types/components/Card.d.ts.map +1 -1
  129. package/dist/types/components/EmptyState.d.ts.map +1 -1
  130. package/dist/types/components/Filters.d.ts +3 -1
  131. package/dist/types/components/Filters.d.ts.map +1 -1
  132. package/dist/types/components/Frame.d.ts +3 -3
  133. package/dist/types/components/Frame.d.ts.map +1 -1
  134. package/dist/types/components/HorizontalStack.d.ts +2 -2
  135. package/dist/types/components/HorizontalStack.d.ts.map +1 -1
  136. package/dist/types/components/Icon.d.ts.map +1 -1
  137. package/dist/types/components/Pane.d.ts.map +1 -1
  138. package/dist/types/components/Stack.d.ts +49 -0
  139. package/dist/types/components/Stack.d.ts.map +1 -0
  140. package/dist/types/components/Tabs.d.ts +2 -0
  141. package/dist/types/components/Tabs.d.ts.map +1 -1
  142. package/dist/types/components/VerticalStack.d.ts +2 -2
  143. package/dist/types/components/VerticalStack.d.ts.map +1 -1
  144. package/dist/types/index.d.ts +1 -0
  145. package/index.css +11 -0
  146. package/package.json +2 -2
package/dist/esm/stories/PopoverManager.stories.js CHANGED
@@ -111,14 +111,13 @@ function _unsupported_iterable_to_array(o, minLen) {
111
111
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
112
112
  import { useState, useEffect } from "react";
113
113
  import { transformStorySource } from "../utilities/transformers.js";
114
+ import Stack from "../components/Stack.js";
114
115
  import PopoverManager from "../components/PopoverManager.js";
115
116
  import Popover from "../components/Popover.js";
116
117
  import Text from "../components/Text.js";
117
118
  import Card from "../components/Card.js";
118
119
  import Button from "../components/Button.js";
119
120
  import Page from "../components/Page.js";
120
- import VerticalStack from "../components/VerticalStack.js";
121
- import HorizontalStack from "../components/HorizontalStack.js";
122
121
  import Box from "../components/Box.js";
123
122
  export default {
124
123
  title: "Litho/PopoverManager",
@@ -176,17 +175,18 @@ export var BasicUsage = {
176
175
  return /*#__PURE__*/ _jsx(Card, {
177
176
  title: "PopoverManager Basic Usage",
178
177
  padded: true,
179
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
180
- gap: "8",
178
+ children: /*#__PURE__*/ _jsxs(Stack, {
179
+ gap: "lg",
181
180
  children: [
182
- /*#__PURE__*/ _jsxs(VerticalStack, {
183
- gap: "4",
181
+ /*#__PURE__*/ _jsxs(Stack, {
182
+ gap: "md",
184
183
  children: [
185
184
  /*#__PURE__*/ _jsx(Text, {
186
185
  children: "The PopoverManager helps coordinate multiple popovers to prevent conflicts and manage layering. Click the buttons below to see it in action."
187
186
  }),
188
- /*#__PURE__*/ _jsxs(HorizontalStack, {
189
- gap: "4",
187
+ /*#__PURE__*/ _jsxs(Stack, {
188
+ horizontal: true,
189
+ gap: "md",
190
190
  children: [
191
191
  /*#__PURE__*/ _jsx(Popover, {
192
192
  active: popover1Active,
@@ -198,8 +198,8 @@ export var BasicUsage = {
198
198
  children: /*#__PURE__*/ _jsx(Box, {
199
199
  padding: "4",
200
200
  minWidth: "200px",
201
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
202
- gap: "2",
201
+ children: /*#__PURE__*/ _jsxs(Stack, {
202
+ gap: "sm",
203
203
  children: [
204
204
  /*#__PURE__*/ _jsx(Text, {
205
205
  variant: "headingSm",
@@ -227,8 +227,8 @@ export var BasicUsage = {
227
227
  children: /*#__PURE__*/ _jsx(Box, {
228
228
  padding: "4",
229
229
  minWidth: "200px",
230
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
231
- gap: "2",
230
+ children: /*#__PURE__*/ _jsxs(Stack, {
231
+ gap: "sm",
232
232
  children: [
233
233
  /*#__PURE__*/ _jsx(Text, {
234
234
  variant: "headingSm",
@@ -259,15 +259,15 @@ export var BasicUsage = {
259
259
  padding: "4",
260
260
  background: "subdued",
261
261
  borderRadius: "default",
262
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
263
- gap: "2",
262
+ children: /*#__PURE__*/ _jsxs(Stack, {
263
+ gap: "sm",
264
264
  children: [
265
265
  /*#__PURE__*/ _jsx(Text, {
266
266
  variant: "headingSm",
267
267
  children: "PopoverManager State"
268
268
  }),
269
- /*#__PURE__*/ _jsxs(VerticalStack, {
270
- gap: "1",
269
+ /*#__PURE__*/ _jsxs(Stack, {
270
+ gap: "xs",
271
271
  children: [
272
272
  /*#__PURE__*/ _jsxs(Text, {
273
273
  variant: "bodySm",
@@ -364,17 +364,18 @@ export var ConflictResolution = {
364
364
  return /*#__PURE__*/ _jsx(Card, {
365
365
  title: "Popover Conflict Resolution",
366
366
  padded: true,
367
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
368
- gap: "8",
367
+ children: /*#__PURE__*/ _jsxs(Stack, {
368
+ gap: "lg",
369
369
  children: [
370
- /*#__PURE__*/ _jsxs(VerticalStack, {
371
- gap: "4",
370
+ /*#__PURE__*/ _jsxs(Stack, {
371
+ gap: "md",
372
372
  children: [
373
373
  /*#__PURE__*/ _jsx(Text, {
374
374
  children: "When multiple popovers might conflict (like context menus and settings panels), PopoverManager helps resolve conflicts by allowing controlled opening and closing."
375
375
  }),
376
- /*#__PURE__*/ _jsxs(HorizontalStack, {
377
- gap: "4",
376
+ /*#__PURE__*/ _jsxs(Stack, {
377
+ horizontal: true,
378
+ gap: "md",
378
379
  children: [
379
380
  /*#__PURE__*/ _jsx(Popover, {
380
381
  active: contextMenuActive,
@@ -386,15 +387,15 @@ export var ConflictResolution = {
386
387
  children: /*#__PURE__*/ _jsx(Box, {
387
388
  padding: "4",
388
389
  minWidth: "150px",
389
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
390
- gap: "2",
390
+ children: /*#__PURE__*/ _jsxs(Stack, {
391
+ gap: "sm",
391
392
  children: [
392
393
  /*#__PURE__*/ _jsx(Text, {
393
394
  variant: "headingSm",
394
395
  children: "Context Menu"
395
396
  }),
396
- /*#__PURE__*/ _jsxs(VerticalStack, {
397
- gap: "1",
397
+ /*#__PURE__*/ _jsxs(Stack, {
398
+ gap: "xs",
398
399
  children: [
399
400
  /*#__PURE__*/ _jsx(Button, {
400
401
  size: "slim",
@@ -441,18 +442,19 @@ export var ConflictResolution = {
441
442
  children: /*#__PURE__*/ _jsx(Box, {
442
443
  padding: "4",
443
444
  minWidth: "200px",
444
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
445
- gap: "4",
445
+ children: /*#__PURE__*/ _jsxs(Stack, {
446
+ gap: "md",
446
447
  children: [
447
448
  /*#__PURE__*/ _jsx(Text, {
448
449
  variant: "headingSm",
449
450
  children: "Settings"
450
451
  }),
451
- /*#__PURE__*/ _jsxs(VerticalStack, {
452
- gap: "4",
452
+ /*#__PURE__*/ _jsxs(Stack, {
453
+ gap: "md",
453
454
  children: [
454
- /*#__PURE__*/ _jsxs(HorizontalStack, {
455
- gap: "2",
455
+ /*#__PURE__*/ _jsxs(Stack, {
456
+ horizontal: true,
457
+ gap: "sm",
456
458
  blockAlign: "center",
457
459
  children: [
458
460
  /*#__PURE__*/ _jsx("input", {
@@ -465,8 +467,9 @@ export var ConflictResolution = {
465
467
  })
466
468
  ]
467
469
  }),
468
- /*#__PURE__*/ _jsxs(HorizontalStack, {
469
- gap: "2",
470
+ /*#__PURE__*/ _jsxs(Stack, {
471
+ horizontal: true,
472
+ gap: "sm",
470
473
  blockAlign: "center",
471
474
  children: [
472
475
  /*#__PURE__*/ _jsx("input", {
@@ -478,8 +481,8 @@ export var ConflictResolution = {
478
481
  })
479
482
  ]
480
483
  }),
481
- /*#__PURE__*/ _jsxs(VerticalStack, {
482
- gap: "2",
484
+ /*#__PURE__*/ _jsxs(Stack, {
485
+ gap: "sm",
483
486
  children: [
484
487
  /*#__PURE__*/ _jsx(Text, {
485
488
  variant: "bodySm",
@@ -522,15 +525,15 @@ export var ConflictResolution = {
522
525
  children: /*#__PURE__*/ _jsx(Box, {
523
526
  padding: "4",
524
527
  minWidth: "180px",
525
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
526
- gap: "2",
528
+ children: /*#__PURE__*/ _jsxs(Stack, {
529
+ gap: "sm",
527
530
  children: [
528
531
  /*#__PURE__*/ _jsx(Text, {
529
532
  variant: "headingSm",
530
533
  children: "Help & Support"
531
534
  }),
532
- /*#__PURE__*/ _jsxs(VerticalStack, {
533
- gap: "1",
535
+ /*#__PURE__*/ _jsxs(Stack, {
536
+ gap: "xs",
534
537
  children: [
535
538
  /*#__PURE__*/ _jsx(Button, {
536
539
  size: "slim",
@@ -580,15 +583,15 @@ export var ConflictResolution = {
580
583
  padding: "4",
581
584
  background: "subdued",
582
585
  borderRadius: "default",
583
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
584
- gap: "2",
586
+ children: /*#__PURE__*/ _jsxs(Stack, {
587
+ gap: "sm",
585
588
  children: [
586
589
  /*#__PURE__*/ _jsx(Text, {
587
590
  variant: "headingSm",
588
591
  children: "Conflict Resolution Status"
589
592
  }),
590
- /*#__PURE__*/ _jsxs(VerticalStack, {
591
- gap: "1",
593
+ /*#__PURE__*/ _jsxs(Stack, {
594
+ gap: "xs",
592
595
  children: [
593
596
  /*#__PURE__*/ _jsxs(Text, {
594
597
  variant: "bodyXs",
@@ -698,7 +701,8 @@ export var ApplicationIntegration = {
698
701
  background: "subdued",
699
702
  borderRadius: "lg",
700
703
  marginBlockEnd: "8",
701
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
704
+ children: /*#__PURE__*/ _jsxs(Stack, {
705
+ horizontal: true,
702
706
  align: "space-between",
703
707
  blockAlign: "center",
704
708
  children: [
@@ -706,8 +710,9 @@ export var ApplicationIntegration = {
706
710
  variant: "headingLg",
707
711
  children: "My Application"
708
712
  }),
709
- /*#__PURE__*/ _jsxs(HorizontalStack, {
710
- gap: "4",
713
+ /*#__PURE__*/ _jsxs(Stack, {
714
+ horizontal: true,
715
+ gap: "md",
711
716
  blockAlign: "center",
712
717
  children: [
713
718
  /*#__PURE__*/ _jsx(Popover, {
@@ -724,8 +729,8 @@ export var ApplicationIntegration = {
724
729
  children: /*#__PURE__*/ _jsx(Box, {
725
730
  padding: "4",
726
731
  minWidth: "300px",
727
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
728
- gap: "4",
732
+ children: /*#__PURE__*/ _jsxs(Stack, {
733
+ gap: "md",
729
734
  children: [
730
735
  /*#__PURE__*/ _jsx("input", {
731
736
  type: "text",
@@ -737,8 +742,8 @@ export var ApplicationIntegration = {
737
742
  borderRadius: "4px"
738
743
  }
739
744
  }),
740
- /*#__PURE__*/ _jsxs(VerticalStack, {
741
- gap: "1",
745
+ /*#__PURE__*/ _jsxs(Stack, {
746
+ gap: "xs",
742
747
  children: [
743
748
  /*#__PURE__*/ _jsx(Text, {
744
749
  variant: "bodySm",
@@ -783,15 +788,15 @@ export var ApplicationIntegration = {
783
788
  children: /*#__PURE__*/ _jsx(Box, {
784
789
  padding: "4",
785
790
  minWidth: "280px",
786
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
787
- gap: "4",
791
+ children: /*#__PURE__*/ _jsxs(Stack, {
792
+ gap: "md",
788
793
  children: [
789
794
  /*#__PURE__*/ _jsx(Text, {
790
795
  variant: "headingSm",
791
796
  children: "Notifications"
792
797
  }),
793
- /*#__PURE__*/ _jsx(VerticalStack, {
794
- gap: "2",
798
+ /*#__PURE__*/ _jsx(Stack, {
799
+ gap: "sm",
795
800
  children: [
796
801
  {
797
802
  title: "New order received",
@@ -816,8 +821,8 @@ export var ApplicationIntegration = {
816
821
  style: {
817
822
  borderLeft: notification.unread ? "3px solid #007bff" : "3px solid transparent"
818
823
  },
819
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
820
- gap: "1",
824
+ children: /*#__PURE__*/ _jsxs(Stack, {
825
+ gap: "xs",
821
826
  children: [
822
827
  /*#__PURE__*/ _jsx(Text, {
823
828
  variant: "bodySm",
@@ -834,7 +839,7 @@ export var ApplicationIntegration = {
834
839
  }, index);
835
840
  })
836
841
  }),
837
- /*#__PURE__*/ _jsx(VerticalStack, {
842
+ /*#__PURE__*/ _jsx(Stack, {
838
843
  inlineAlign: "center",
839
844
  children: /*#__PURE__*/ _jsx(Button, {
840
845
  size: "slim",
@@ -859,11 +864,11 @@ export var ApplicationIntegration = {
859
864
  children: /*#__PURE__*/ _jsx(Box, {
860
865
  padding: "4",
861
866
  minWidth: "200px",
862
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
863
- gap: "4",
867
+ children: /*#__PURE__*/ _jsxs(Stack, {
868
+ gap: "md",
864
869
  children: [
865
- /*#__PURE__*/ _jsxs(VerticalStack, {
866
- gap: "2",
870
+ /*#__PURE__*/ _jsxs(Stack, {
871
+ gap: "sm",
867
872
  inlineAlign: "center",
868
873
  children: [
869
874
  /*#__PURE__*/ _jsx("div", {
@@ -890,8 +895,8 @@ export var ApplicationIntegration = {
890
895
  })
891
896
  ]
892
897
  }),
893
- /*#__PURE__*/ _jsxs(VerticalStack, {
894
- gap: "1",
898
+ /*#__PURE__*/ _jsxs(Stack, {
899
+ gap: "xs",
895
900
  children: [
896
901
  /*#__PURE__*/ _jsx(Button, {
897
902
  size: "slim",
@@ -944,14 +949,15 @@ export var ApplicationIntegration = {
944
949
  title: "PopoverManager in Real Applications",
945
950
  padded: true,
946
951
  children: [
947
- /*#__PURE__*/ _jsxs(VerticalStack, {
948
- gap: "4",
952
+ /*#__PURE__*/ _jsxs(Stack, {
953
+ gap: "md",
949
954
  children: [
950
955
  /*#__PURE__*/ _jsx(Text, {
951
956
  children: "The header above demonstrates how PopoverManager works in a real application scenario, coordinating multiple interface elements like search, notifications, and user menus."
952
957
  }),
953
- /*#__PURE__*/ _jsx(HorizontalStack, {
954
- gap: "4",
958
+ /*#__PURE__*/ _jsx(Stack, {
959
+ horizontal: true,
960
+ gap: "md",
955
961
  children: /*#__PURE__*/ _jsx(Button, {
956
962
  onClick: closeAll,
957
963
  destructive: true,
@@ -966,15 +972,15 @@ export var ApplicationIntegration = {
966
972
  padding: "4",
967
973
  background: "subdued",
968
974
  borderRadius: "default",
969
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
970
- gap: "2",
975
+ children: /*#__PURE__*/ _jsxs(Stack, {
976
+ gap: "sm",
971
977
  children: [
972
978
  /*#__PURE__*/ _jsx(Text, {
973
979
  variant: "headingSm",
974
980
  children: "Application State"
975
981
  }),
976
- /*#__PURE__*/ _jsxs(VerticalStack, {
977
- gap: "1",
982
+ /*#__PURE__*/ _jsxs(Stack, {
983
+ gap: "xs",
978
984
  children: [
979
985
  /*#__PURE__*/ _jsxs(Text, {
980
986
  variant: "bodyXs",
@@ -1064,17 +1070,18 @@ export var EventHandling = {
1064
1070
  return /*#__PURE__*/ _jsx(Card, {
1065
1071
  title: "PopoverManager Event Handling",
1066
1072
  padded: true,
1067
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
1068
- gap: "8",
1073
+ children: /*#__PURE__*/ _jsxs(Stack, {
1074
+ gap: "lg",
1069
1075
  children: [
1070
- /*#__PURE__*/ _jsxs(VerticalStack, {
1071
- gap: "4",
1076
+ /*#__PURE__*/ _jsxs(Stack, {
1077
+ gap: "md",
1072
1078
  children: [
1073
1079
  /*#__PURE__*/ _jsx(Text, {
1074
1080
  children: "PopoverManager emits events when its state changes. This is useful for debugging and for components that need to react to popover state changes."
1075
1081
  }),
1076
- /*#__PURE__*/ _jsx(HorizontalStack, {
1077
- gap: "4",
1082
+ /*#__PURE__*/ _jsx(Stack, {
1083
+ horizontal: true,
1084
+ gap: "md",
1078
1085
  children: [
1079
1086
  1,
1080
1087
  2,
@@ -1100,8 +1107,8 @@ export var EventHandling = {
1100
1107
  children: /*#__PURE__*/ _jsx(Box, {
1101
1108
  padding: "4",
1102
1109
  minWidth: "150px",
1103
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
1104
- gap: "2",
1110
+ children: /*#__PURE__*/ _jsxs(Stack, {
1111
+ gap: "sm",
1105
1112
  children: [
1106
1113
  /*#__PURE__*/ _jsxs(Text, {
1107
1114
  variant: "headingSm",
@@ -1136,10 +1143,11 @@ export var EventHandling = {
1136
1143
  padding: "4",
1137
1144
  background: "subdued",
1138
1145
  borderRadius: "default",
1139
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
1140
- gap: "4",
1146
+ children: /*#__PURE__*/ _jsxs(Stack, {
1147
+ gap: "md",
1141
1148
  children: [
1142
- /*#__PURE__*/ _jsxs(HorizontalStack, {
1149
+ /*#__PURE__*/ _jsxs(Stack, {
1150
+ horizontal: true,
1143
1151
  align: "space-between",
1144
1152
  blockAlign: "center",
1145
1153
  children: [