@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/Pane.stories.js CHANGED
@@ -34,13 +34,14 @@ _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 _Pane = /*#__PURE__*/ _interop_require_default(require("../components/Pane.js"));
38
39
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
39
40
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
40
41
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
41
42
  var _TextField = /*#__PURE__*/ _interop_require_default(require("../components/TextField.js"));
42
43
  var _Page = /*#__PURE__*/ _interop_require_default(require("../components/Page.js"));
43
- var _ = require("../");
44
+ var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
44
45
  var _polarisicons = require("@shopify/polaris-icons");
45
46
  function _array_like_to_array(arr, len) {
46
47
  if (len == null || len > arr.length) len = arr.length;
@@ -307,7 +308,7 @@ var Default = {
307
308
  title: "Basic Pane Example",
308
309
  padded: true,
309
310
  children: [
310
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
311
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
311
312
  paddingBlockEnd: "4",
312
313
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
313
314
  children: "Click the button below to open a basic pane with header, content, and footer sections."
@@ -335,10 +336,10 @@ var Default = {
335
336
  })
336
337
  }),
337
338
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Content, {
338
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
339
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
339
340
  padding: "4",
340
341
  children: [
341
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
342
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
342
343
  paddingBlockEnd: "4",
343
344
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
344
345
  children: "This is the content area of the pane. You can put any content here, including forms, lists, or other components."
@@ -351,10 +352,11 @@ var Default = {
351
352
  })
352
353
  }),
353
354
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Footer, {
354
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
355
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
355
356
  padding: "4",
356
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
357
- gap: "4",
357
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
358
+ horizontal: true,
359
+ gap: "md",
358
360
  align: "end",
359
361
  children: [
360
362
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
@@ -414,7 +416,7 @@ var WithActions = {
414
416
  title: "Pane with Header Actions",
415
417
  padded: true,
416
418
  children: [
417
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
419
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
418
420
  paddingBlockEnd: "4",
419
421
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
420
422
  children: "This example shows a pane with action buttons in the header alongside the close button."
@@ -443,14 +445,14 @@ var WithActions = {
443
445
  })
444
446
  }),
445
447
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Content, {
446
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
448
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
447
449
  padding: "4",
448
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
449
- gap: "4",
450
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
451
+ gap: "md",
450
452
  children: [
451
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
453
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
452
454
  children: [
453
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
455
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
454
456
  paddingBlockEnd: "2",
455
457
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
456
458
  variant: "headingSm",
@@ -462,9 +464,9 @@ var WithActions = {
462
464
  })
463
465
  ]
464
466
  }),
465
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
467
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
466
468
  children: [
467
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
469
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
468
470
  paddingBlockEnd: "2",
469
471
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
470
472
  variant: "headingSm",
@@ -476,9 +478,9 @@ var WithActions = {
476
478
  })
477
479
  ]
478
480
  }),
479
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
481
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
480
482
  children: [
481
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
483
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
482
484
  paddingBlockEnd: "2",
483
485
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
484
486
  variant: "headingSm",
@@ -491,16 +493,16 @@ var WithActions = {
491
493
  })
492
494
  ]
493
495
  }),
494
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
496
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
495
497
  children: [
496
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
498
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
497
499
  paddingBlockEnd: "2",
498
500
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
499
501
  variant: "headingSm",
500
502
  children: "Status"
501
503
  })
502
504
  }),
503
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
505
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
504
506
  as: "span",
505
507
  padding: "1",
506
508
  borderRadius: "1",
@@ -518,10 +520,11 @@ var WithActions = {
518
520
  })
519
521
  }),
520
522
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Footer, {
521
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
523
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
522
524
  padding: "4",
523
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
524
- gap: "4",
525
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
526
+ horizontal: true,
527
+ gap: "md",
525
528
  align: "space-between",
526
529
  children: [
527
530
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -529,8 +532,9 @@ var WithActions = {
529
532
  color: "subdued",
530
533
  children: "Last updated: 2 hours ago"
531
534
  }),
532
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
533
- gap: "4",
535
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
536
+ horizontal: true,
537
+ gap: "md",
534
538
  children: [
535
539
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
536
540
  onClick: function() {
@@ -612,7 +616,7 @@ var FormPane = {
612
616
  title: "Contact Form Example",
613
617
  padded: true,
614
618
  children: [
615
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
619
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
616
620
  paddingBlockEnd: "4",
617
621
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
618
622
  children: "This example shows how to use a pane for forms, providing a focused editing experience."
@@ -640,10 +644,10 @@ var FormPane = {
640
644
  })
641
645
  }),
642
646
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Content, {
643
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
647
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
644
648
  padding: "4",
645
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
646
- gap: "6",
649
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
650
+ gap: "md",
647
651
  children: [
648
652
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
649
653
  label: "Full Name",
@@ -693,10 +697,11 @@ var FormPane = {
693
697
  })
694
698
  }),
695
699
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Footer, {
696
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
700
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
697
701
  padding: "4",
698
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
699
- gap: "4",
702
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
703
+ horizontal: true,
704
+ gap: "md",
700
705
  align: "end",
701
706
  children: [
702
707
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
@@ -810,20 +815,21 @@ var DetailViewPane = {
810
815
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
811
816
  title: "Orders List",
812
817
  padded: true,
813
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.VerticalStack, {
814
- gap: "2",
818
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
819
+ gap: "sm",
815
820
  children: orders.map(function(order) {
816
- return /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
821
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
817
822
  padding: "4",
818
823
  borderWidth: "1",
819
824
  borderColor: "border",
820
825
  borderRadius: "1",
821
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
826
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
827
+ horizontal: true,
822
828
  align: "space-between",
823
829
  blockAlign: "center",
824
830
  children: [
825
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
826
- gap: "1",
831
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
832
+ gap: "xs",
827
833
  children: [
828
834
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
829
835
  variant: "headingSm",
@@ -842,11 +848,12 @@ var DetailViewPane = {
842
848
  })
843
849
  ]
844
850
  }),
845
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
846
- gap: "4",
851
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
852
+ horizontal: true,
853
+ gap: "md",
847
854
  blockAlign: "center",
848
855
  children: [
849
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
856
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
850
857
  as: "span",
851
858
  paddingInlineStart: "2",
852
859
  paddingInlineEnd: "2",
@@ -892,21 +899,21 @@ var DetailViewPane = {
892
899
  })
893
900
  }),
894
901
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Content, {
895
- children: selectedOrder && /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
902
+ children: selectedOrder && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
896
903
  padding: "4",
897
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
898
- gap: "8",
904
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
905
+ gap: "lg",
899
906
  children: [
900
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
907
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
901
908
  children: [
902
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
909
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
903
910
  paddingBlockEnd: "4",
904
911
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
905
912
  variant: "headingSm",
906
913
  children: "Order Information"
907
914
  })
908
915
  }),
909
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
916
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
910
917
  as: "div",
911
918
  display: "grid",
912
919
  style: {
@@ -914,8 +921,8 @@ var DetailViewPane = {
914
921
  gap: '1rem'
915
922
  },
916
923
  children: [
917
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
918
- gap: "1",
924
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
925
+ gap: "xs",
919
926
  children: [
920
927
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
921
928
  variant: "bodySm",
@@ -927,8 +934,8 @@ var DetailViewPane = {
927
934
  })
928
935
  ]
929
936
  }),
930
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
931
- gap: "1",
937
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
938
+ gap: "xs",
932
939
  children: [
933
940
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
934
941
  variant: "bodySm",
@@ -940,8 +947,8 @@ var DetailViewPane = {
940
947
  })
941
948
  ]
942
949
  }),
943
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
944
- gap: "1",
950
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
951
+ gap: "xs",
945
952
  children: [
946
953
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
947
954
  variant: "bodySm",
@@ -954,15 +961,15 @@ var DetailViewPane = {
954
961
  })
955
962
  ]
956
963
  }),
957
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
958
- gap: "1",
964
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
965
+ gap: "xs",
959
966
  children: [
960
967
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
961
968
  variant: "bodySm",
962
969
  color: "subdued",
963
970
  children: "Status"
964
971
  }),
965
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
972
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
966
973
  as: "span",
967
974
  paddingInlineStart: "2",
968
975
  paddingInlineEnd: "2",
@@ -982,28 +989,29 @@ var DetailViewPane = {
982
989
  })
983
990
  ]
984
991
  }),
985
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
992
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
986
993
  children: [
987
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
994
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
988
995
  paddingBlockEnd: "4",
989
996
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
990
997
  variant: "headingSm",
991
998
  children: "Items Ordered"
992
999
  })
993
1000
  }),
994
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.VerticalStack, {
995
- gap: "2",
1001
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
1002
+ gap: "sm",
996
1003
  children: selectedOrder.items.map(function(item, index) {
997
- return /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
1004
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
998
1005
  padding: "3",
999
1006
  borderWidth: "1",
1000
1007
  borderColor: "border",
1001
1008
  borderRadius: "1",
1002
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
1009
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1010
+ horizontal: true,
1003
1011
  align: "space-between",
1004
1012
  children: [
1005
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
1006
- gap: "1",
1013
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1014
+ gap: "xs",
1007
1015
  children: [
1008
1016
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1009
1017
  children: item.name
@@ -1029,20 +1037,20 @@ var DetailViewPane = {
1029
1037
  })
1030
1038
  ]
1031
1039
  }),
1032
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
1040
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
1033
1041
  children: [
1034
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
1042
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
1035
1043
  paddingBlockEnd: "4",
1036
1044
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1037
1045
  variant: "headingSm",
1038
1046
  children: "Shipping Information"
1039
1047
  })
1040
1048
  }),
1041
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
1042
- gap: "2",
1049
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1050
+ gap: "sm",
1043
1051
  children: [
1044
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
1045
- gap: "1",
1052
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1053
+ gap: "xs",
1046
1054
  children: [
1047
1055
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1048
1056
  variant: "bodySm",
@@ -1054,8 +1062,8 @@ var DetailViewPane = {
1054
1062
  })
1055
1063
  ]
1056
1064
  }),
1057
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
1058
- gap: "1",
1065
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1066
+ gap: "xs",
1059
1067
  children: [
1060
1068
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1061
1069
  variant: "bodySm",
@@ -1067,8 +1075,8 @@ var DetailViewPane = {
1067
1075
  })
1068
1076
  ]
1069
1077
  }),
1070
- selectedOrder.shipping.tracking && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
1071
- gap: "1",
1078
+ selectedOrder.shipping.tracking && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1079
+ gap: "xs",
1072
1080
  children: [
1073
1081
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1074
1082
  variant: "bodySm",
@@ -1089,10 +1097,11 @@ var DetailViewPane = {
1089
1097
  })
1090
1098
  }),
1091
1099
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Footer, {
1092
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
1100
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
1093
1101
  padding: "4",
1094
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
1095
- gap: "4",
1102
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1103
+ horizontal: true,
1104
+ gap: "md",
1096
1105
  align: "end",
1097
1106
  children: [
1098
1107
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
@@ -1135,8 +1144,8 @@ var StackedPanes = {
1135
1144
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
1136
1145
  title: "Multiple Panes Example",
1137
1146
  padded: true,
1138
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
1139
- gap: "4",
1147
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1148
+ gap: "md",
1140
1149
  children: [
1141
1150
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1142
1151
  children: "This example demonstrates how panes can be stacked when multiple levels of detail are needed."
@@ -1164,28 +1173,29 @@ var StackedPanes = {
1164
1173
  })
1165
1174
  }),
1166
1175
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Content, {
1167
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
1176
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
1168
1177
  padding: "4",
1169
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
1170
- gap: "4",
1178
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1179
+ gap: "md",
1171
1180
  children: [
1172
1181
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1173
1182
  children: "Select a category to view its details in a nested pane."
1174
1183
  }),
1175
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.VerticalStack, {
1176
- gap: "2",
1184
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
1185
+ gap: "sm",
1177
1186
  children: [
1178
1187
  'Electronics',
1179
1188
  'Clothing',
1180
1189
  'Books',
1181
1190
  'Home & Garden'
1182
1191
  ].map(function(category) {
1183
- return /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
1192
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
1184
1193
  padding: "4",
1185
1194
  borderWidth: "1",
1186
1195
  borderColor: "border",
1187
1196
  borderRadius: "1",
1188
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
1197
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1198
+ horizontal: true,
1189
1199
  align: "space-between",
1190
1200
  blockAlign: "center",
1191
1201
  children: [
@@ -1209,10 +1219,11 @@ var StackedPanes = {
1209
1219
  })
1210
1220
  }),
1211
1221
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Footer, {
1212
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
1222
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
1213
1223
  padding: "4",
1214
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.HorizontalStack, {
1215
- gap: "4",
1224
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
1225
+ horizontal: true,
1226
+ gap: "md",
1216
1227
  align: "end",
1217
1228
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
1218
1229
  onClick: function() {
@@ -1238,19 +1249,19 @@ var StackedPanes = {
1238
1249
  })
1239
1250
  }),
1240
1251
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Content, {
1241
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
1252
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
1242
1253
  padding: "4",
1243
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
1244
- gap: "4",
1254
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1255
+ gap: "md",
1245
1256
  children: [
1246
1257
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1247
1258
  children: "This is a nested pane showing detailed information about the selected category."
1248
1259
  }),
1249
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
1250
- gap: "4",
1260
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1261
+ gap: "md",
1251
1262
  children: [
1252
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
1253
- gap: "2",
1263
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1264
+ gap: "sm",
1254
1265
  children: [
1255
1266
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1256
1267
  variant: "headingSm",
@@ -1261,8 +1272,8 @@ var StackedPanes = {
1261
1272
  })
1262
1273
  ]
1263
1274
  }),
1264
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
1265
- gap: "2",
1275
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1276
+ gap: "sm",
1266
1277
  children: [
1267
1278
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1268
1279
  variant: "headingSm",
@@ -1273,8 +1284,8 @@ var StackedPanes = {
1273
1284
  })
1274
1285
  ]
1275
1286
  }),
1276
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
1277
- gap: "2",
1287
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1288
+ gap: "sm",
1278
1289
  children: [
1279
1290
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1280
1291
  variant: "headingSm",
@@ -1285,15 +1296,15 @@ var StackedPanes = {
1285
1296
  })
1286
1297
  ]
1287
1298
  }),
1288
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
1289
- gap: "2",
1299
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1300
+ gap: "sm",
1290
1301
  children: [
1291
1302
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1292
1303
  variant: "headingSm",
1293
1304
  children: "Popular Items"
1294
1305
  }),
1295
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
1296
- gap: "1",
1306
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1307
+ gap: "xs",
1297
1308
  children: [
1298
1309
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1299
1310
  children: "• Smartphones"
@@ -1318,10 +1329,11 @@ var StackedPanes = {
1318
1329
  })
1319
1330
  }),
1320
1331
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Footer, {
1321
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
1332
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
1322
1333
  padding: "4",
1323
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
1324
- gap: "4",
1334
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1335
+ horizontal: true,
1336
+ gap: "md",
1325
1337
  align: "end",
1326
1338
  children: [
1327
1339
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
@@ -1363,8 +1375,8 @@ var CustomLayout = {
1363
1375
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
1364
1376
  title: "Pane Customization",
1365
1377
  padded: true,
1366
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
1367
- gap: "4",
1378
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1379
+ gap: "md",
1368
1380
  children: [
1369
1381
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1370
1382
  children: "This example shows a pane with custom header layout (no borders) and footer styling."
@@ -1389,11 +1401,12 @@ var CustomLayout = {
1389
1401
  bottomBorder: false,
1390
1402
  showCloseButton: false,
1391
1403
  children: [
1392
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
1393
- gap: "2",
1404
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1405
+ horizontal: true,
1406
+ gap: "sm",
1394
1407
  blockAlign: "center",
1395
1408
  children: [
1396
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
1409
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
1397
1410
  as: "div",
1398
1411
  style: {
1399
1412
  width: '8px',
@@ -1416,7 +1429,7 @@ var CustomLayout = {
1416
1429
  ]
1417
1430
  }),
1418
1431
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Content, {
1419
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
1432
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
1420
1433
  padding: "4",
1421
1434
  style: {
1422
1435
  display: 'flex',
@@ -1425,8 +1438,8 @@ var CustomLayout = {
1425
1438
  height: '100%'
1426
1439
  },
1427
1440
  children: [
1428
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
1429
- gap: "4",
1441
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1442
+ gap: "md",
1430
1443
  style: {
1431
1444
  flex: 1
1432
1445
  },
@@ -1473,8 +1486,9 @@ var CustomLayout = {
1473
1486
  })
1474
1487
  ]
1475
1488
  }),
1476
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
1477
- gap: "2",
1489
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1490
+ horizontal: true,
1491
+ gap: "sm",
1478
1492
  children: [
1479
1493
  /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
1480
1494
  type: "text",
@@ -1498,10 +1512,11 @@ var CustomLayout = {
1498
1512
  }),
1499
1513
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Footer, {
1500
1514
  topBorder: false,
1501
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
1515
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
1502
1516
  padding: "4",
1503
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
1504
- gap: "4",
1517
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1518
+ horizontal: true,
1519
+ gap: "md",
1505
1520
  align: "space-between",
1506
1521
  blockAlign: "center",
1507
1522
  children: [