@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/ProgressBar.stories.js CHANGED
@@ -36,11 +36,10 @@ _export(exports, {
36
36
  });
37
37
  var _jsxruntime = require("react/jsx-runtime");
38
38
  var _transformers = require("../utilities/transformers.js");
39
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
39
40
  var _ProgressBar = /*#__PURE__*/ _interop_require_default(require("../components/ProgressBar.js"));
40
41
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
41
42
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
42
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
43
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
44
43
  function _interop_require_default(obj) {
45
44
  return obj && obj.__esModule ? obj : {
46
45
  default: obj
@@ -105,11 +104,11 @@ var _default = {
105
104
  var Default = {};
106
105
  var Sizes = {
107
106
  render: function() {
108
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
109
- gap: "6",
107
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
108
+ gap: "md",
110
109
  children: [
111
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
112
- gap: "2",
110
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
111
+ gap: "sm",
113
112
  children: [
114
113
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
115
114
  variant: "bodySm",
@@ -122,8 +121,8 @@ var Sizes = {
122
121
  })
123
122
  ]
124
123
  }),
125
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
126
- gap: "2",
124
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
125
+ gap: "sm",
127
126
  children: [
128
127
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
129
128
  variant: "bodySm",
@@ -136,8 +135,8 @@ var Sizes = {
136
135
  })
137
136
  ]
138
137
  }),
139
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
140
- gap: "2",
138
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
139
+ gap: "sm",
141
140
  children: [
142
141
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
143
142
  variant: "bodySm",
@@ -163,11 +162,11 @@ var Sizes = {
163
162
  };
164
163
  var Colors = {
165
164
  render: function() {
166
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
167
- gap: "6",
165
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
166
+ gap: "md",
168
167
  children: [
169
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
170
- gap: "2",
168
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
169
+ gap: "sm",
171
170
  children: [
172
171
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
173
172
  variant: "bodySm",
@@ -180,8 +179,8 @@ var Colors = {
180
179
  })
181
180
  ]
182
181
  }),
183
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
184
- gap: "2",
182
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
183
+ gap: "sm",
185
184
  children: [
186
185
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
187
186
  variant: "bodySm",
@@ -194,8 +193,8 @@ var Colors = {
194
193
  })
195
194
  ]
196
195
  }),
197
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
198
- gap: "2",
196
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
197
+ gap: "sm",
199
198
  children: [
200
199
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
201
200
  variant: "bodySm",
@@ -208,8 +207,8 @@ var Colors = {
208
207
  })
209
208
  ]
210
209
  }),
211
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
212
- gap: "2",
210
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
211
+ gap: "sm",
213
212
  children: [
214
213
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
215
214
  variant: "bodySm",
@@ -222,8 +221,8 @@ var Colors = {
222
221
  })
223
222
  ]
224
223
  }),
225
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
226
- gap: "2",
224
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
225
+ gap: "sm",
227
226
  children: [
228
227
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
229
228
  variant: "bodySm",
@@ -249,13 +248,14 @@ var Colors = {
249
248
  };
250
249
  var WithLabels = {
251
250
  render: function() {
252
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
253
- gap: "8",
251
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
252
+ gap: "lg",
254
253
  children: [
255
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
256
- gap: "1",
254
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
255
+ gap: "xs",
257
256
  children: [
258
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
257
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
258
+ horizontal: true,
259
259
  align: "space-between",
260
260
  children: [
261
261
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -279,10 +279,11 @@ var WithLabels = {
279
279
  })
280
280
  ]
281
281
  }),
282
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
283
- gap: "1",
282
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
283
+ gap: "xs",
284
284
  children: [
285
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
285
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
286
+ horizontal: true,
286
287
  align: "space-between",
287
288
  children: [
288
289
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -306,10 +307,11 @@ var WithLabels = {
306
307
  })
307
308
  ]
308
309
  }),
309
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
310
- gap: "1",
310
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
311
+ gap: "xs",
311
312
  children: [
312
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
313
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
314
+ horizontal: true,
313
315
  align: "space-between",
314
316
  children: [
315
317
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -346,18 +348,19 @@ var WithLabels = {
346
348
  };
347
349
  var DifferentStates = {
348
350
  render: function() {
349
- return /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
350
- gap: "8",
351
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
352
+ gap: "lg",
351
353
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
352
354
  title: "Project Status",
353
355
  padded: true,
354
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
355
- gap: "6",
356
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
357
+ gap: "md",
356
358
  children: [
357
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
358
- gap: "2",
359
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
360
+ gap: "sm",
359
361
  children: [
360
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
362
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
363
+ horizontal: true,
361
364
  align: "space-between",
362
365
  children: [
363
366
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -375,10 +378,11 @@ var DifferentStates = {
375
378
  })
376
379
  ]
377
380
  }),
378
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
379
- gap: "2",
381
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
382
+ gap: "sm",
380
383
  children: [
381
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
384
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
385
+ horizontal: true,
382
386
  align: "space-between",
383
387
  children: [
384
388
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -395,10 +399,11 @@ var DifferentStates = {
395
399
  })
396
400
  ]
397
401
  }),
398
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
399
- gap: "2",
402
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
403
+ gap: "sm",
400
404
  children: [
401
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
405
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
406
+ horizontal: true,
402
407
  align: "space-between",
403
408
  children: [
404
409
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -416,10 +421,11 @@ var DifferentStates = {
416
421
  })
417
422
  ]
418
423
  }),
419
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
420
- gap: "2",
424
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
425
+ gap: "sm",
421
426
  children: [
422
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
427
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
428
+ horizontal: true,
423
429
  align: "space-between",
424
430
  children: [
425
431
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -466,12 +472,13 @@ var Animated = {
466
472
  };
467
473
  var LowProgress = {
468
474
  render: function() {
469
- return /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
470
- gap: "4",
471
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
472
- gap: "1",
475
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
476
+ gap: "md",
477
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
478
+ gap: "xs",
473
479
  children: [
474
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
480
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
481
+ horizontal: true,
475
482
  align: "space-between",
476
483
  children: [
477
484
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
package/dist/cjs/stories/RadioButtonCard.stories.js CHANGED
@@ -40,12 +40,11 @@ _export(exports, {
40
40
  var _jsxruntime = require("react/jsx-runtime");
41
41
  var _react = require("react");
42
42
  var _transformers = require("../utilities/transformers.js");
43
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
43
44
  var _RadioButtonCard = /*#__PURE__*/ _interop_require_default(require("../components/RadioButtonCard.js"));
44
45
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
45
46
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
46
47
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
47
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
48
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
49
48
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
50
49
  function _array_like_to_array(arr, len) {
51
50
  if (len == null || len > arr.length) len = arr.length;
@@ -222,8 +221,8 @@ var BasicGroup = {
222
221
  title: "Select a Plan",
223
222
  padded: true,
224
223
  children: [
225
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
226
- gap: "4",
224
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
225
+ gap: "md",
227
226
  children: options.map(function(option) {
228
227
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RadioButtonCard.default, {
229
228
  name: "plan",
@@ -290,8 +289,8 @@ var WithHelpText = {
290
289
  title: "Payment Method",
291
290
  padded: true,
292
291
  children: [
293
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
294
- gap: "4",
292
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
293
+ gap: "md",
295
294
  children: paymentMethods.map(function(method) {
296
295
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RadioButtonCard.default, {
297
296
  name: "payment",
@@ -364,8 +363,8 @@ var ErrorStates = {
364
363
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
365
364
  title: "Form with Validation",
366
365
  padded: true,
367
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
368
- gap: "4",
366
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
367
+ gap: "md",
369
368
  children: [
370
369
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
371
370
  children: "Please select an option (required):"
@@ -451,8 +450,8 @@ var DisabledStates = {
451
450
  title: "Feature Selection",
452
451
  padded: true,
453
452
  children: [
454
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
455
- gap: "4",
453
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
454
+ gap: "md",
456
455
  children: features.map(function(feature) {
457
456
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RadioButtonCard.default, {
458
457
  name: "features",
@@ -531,8 +530,8 @@ var ShippingOptions = {
531
530
  title: "Shipping Options",
532
531
  padded: true,
533
532
  children: [
534
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
535
- gap: "4",
533
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
534
+ gap: "md",
536
535
  children: shippingOptions.map(function(option) {
537
536
  return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
538
537
  position: "relative",
@@ -568,8 +567,8 @@ var ShippingOptions = {
568
567
  padding: "4",
569
568
  background: "success-subdued",
570
569
  borderRadius: "default",
571
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
572
- gap: "2",
570
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
571
+ gap: "sm",
573
572
  children: [
574
573
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
575
574
  variant: "bodySm",
@@ -643,8 +642,8 @@ var SubscriptionPlans = {
643
642
  title: "Choose Your Plan",
644
643
  padded: true,
645
644
  children: [
646
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
647
- gap: "4",
645
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
646
+ gap: "md",
648
647
  children: subscriptionPlans.map(function(plan) {
649
648
  return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
650
649
  position: "relative",
@@ -692,12 +691,13 @@ var SubscriptionPlans = {
692
691
  }),
693
692
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
694
693
  paddingBlockStart: "8",
695
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
694
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
695
+ horizontal: true,
696
696
  align: "space-between",
697
697
  blockAlign: "center",
698
698
  children: [
699
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
700
- gap: "1",
699
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
700
+ gap: "xs",
701
701
  children: [
702
702
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
703
703
  variant: "bodySm",
@@ -762,8 +762,8 @@ var CustomStyling = {
762
762
  title: "Theme Selection",
763
763
  padded: true,
764
764
  children: [
765
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
766
- gap: "4",
765
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
766
+ gap: "md",
767
767
  children: themes.map(function(theme) {
768
768
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RadioButtonCard.default, {
769
769
  name: "theme",
package/dist/cjs/stories/RangeSlider.stories.js CHANGED
@@ -43,11 +43,13 @@ _export(exports, {
43
43
  var _jsxruntime = require("react/jsx-runtime");
44
44
  var _react = require("react");
45
45
  var _transformers = require("../utilities/transformers.js");
46
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
46
47
  var _RangeSlider = /*#__PURE__*/ _interop_require_default(require("../components/RangeSlider.js"));
47
48
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
48
49
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
49
50
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
50
- var _ = require("../");
51
+ var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
52
+ var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
51
53
  function _array_like_to_array(arr, len) {
52
54
  if (len == null || len > arr.length) len = arr.length;
53
55
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -388,8 +390,8 @@ var ProductFilter = {
388
390
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
389
391
  title: "Product Filters",
390
392
  padded: true,
391
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
392
- gap: "8",
393
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
394
+ gap: "lg",
393
395
  children: [
394
396
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeSlider.default, {
395
397
  label: "Price range",
@@ -411,12 +413,12 @@ var ProductFilter = {
411
413
  suffix: " stars",
412
414
  helpText: "Filter products by customer rating"
413
415
  }),
414
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
416
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
415
417
  padding: "4",
416
418
  background: "bg-surface-neutral-subdued",
417
419
  borderRadius: "1",
418
420
  children: [
419
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
421
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
420
422
  paddingBlockEnd: "4",
421
423
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
422
424
  variant: "headingSm",
@@ -427,21 +429,23 @@ var ProductFilter = {
427
429
  ]
428
430
  })
429
431
  }),
430
- filteredProducts.length > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_.VerticalStack, {
431
- gap: "2",
432
+ filteredProducts.length > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
433
+ gap: "sm",
432
434
  children: filteredProducts.map(function(product, index) {
433
- return /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
435
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
434
436
  padding: "2",
435
437
  background: "bg-surface",
436
438
  borderRadius: "1",
437
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
439
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
440
+ horizontal: true,
438
441
  align: "space-between",
439
442
  children: [
440
443
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
441
444
  children: product.name
442
445
  }),
443
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
444
- gap: "4",
446
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
447
+ horizontal: true,
448
+ gap: "md",
445
449
  children: [
446
450
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
447
451
  children: [
@@ -502,8 +506,8 @@ var BudgetPlanner = {
502
506
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
503
507
  title: "Monthly Budget Planner",
504
508
  padded: true,
505
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
506
- gap: "8",
509
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
510
+ gap: "lg",
507
511
  children: [
508
512
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeSlider.default, {
509
513
  label: "Housing & Utilities",
@@ -545,25 +549,25 @@ var BudgetPlanner = {
545
549
  prefix: "$",
546
550
  helpText: "Movies, hobbies, gym, subscriptions"
547
551
  }),
548
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
552
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
549
553
  padding: "6",
550
554
  background: "bg-surface-success-subdued",
551
555
  borderRadius: "2",
552
556
  borderWidth: "1",
553
557
  borderColor: "border-success",
554
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
555
- gap: "4",
558
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
559
+ gap: "md",
556
560
  children: [
557
561
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
558
562
  variant: "headingMd",
559
563
  children: "Budget Summary"
560
564
  }),
561
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Grid, {
565
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
562
566
  columns: 2,
563
567
  gap: "4",
564
568
  children: [
565
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
566
- gap: "1",
569
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
570
+ gap: "xs",
567
571
  children: [
568
572
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
569
573
  variant: "headingSm",
@@ -581,8 +585,8 @@ var BudgetPlanner = {
581
585
  })
582
586
  ]
583
587
  }),
584
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
585
- gap: "1",
588
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
589
+ gap: "xs",
586
590
  children: [
587
591
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
588
592
  variant: "headingSm",
@@ -636,11 +640,11 @@ var DateTimeRange = {
636
640
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
637
641
  title: "Availability Settings",
638
642
  padded: true,
639
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
640
- gap: "8",
643
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
644
+ gap: "lg",
641
645
  children: [
642
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
643
- gap: "2",
646
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
647
+ gap: "sm",
644
648
  children: [
645
649
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeSlider.default, {
646
650
  label: "Working hours",
@@ -651,7 +655,7 @@ var DateTimeRange = {
651
655
  onChange: setHourRange,
652
656
  helpText: "Set your available working hours"
653
657
  }),
654
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
658
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
655
659
  padding: "2",
656
660
  background: "bg-surface-info-subdued",
657
661
  borderRadius: "1",
@@ -666,8 +670,8 @@ var DateTimeRange = {
666
670
  })
667
671
  ]
668
672
  }),
669
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
670
- gap: "2",
673
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
674
+ gap: "sm",
671
675
  children: [
672
676
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeSlider.default, {
673
677
  label: "Available dates this month",
@@ -678,7 +682,7 @@ var DateTimeRange = {
678
682
  onChange: setDayRange,
679
683
  helpText: "Select the date range you're available"
680
684
  }),
681
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
685
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
682
686
  padding: "2",
683
687
  background: "bg-surface-info-subdued",
684
688
  borderRadius: "1",
@@ -695,7 +699,7 @@ var DateTimeRange = {
695
699
  })
696
700
  ]
697
701
  }),
698
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
702
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
699
703
  paddingBlockStart: "4",
700
704
  borderBlockStartWidth: "1",
701
705
  borderColor: "border",
@@ -744,8 +748,8 @@ var AdvancedConfiguration = {
744
748
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
745
749
  title: "Server Configuration",
746
750
  padded: true,
747
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
748
- gap: "8",
751
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
752
+ gap: "lg",
749
753
  children: [
750
754
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeSlider.default, {
751
755
  label: "CPU Cores",
@@ -786,21 +790,21 @@ var AdvancedConfiguration = {
786
790
  suffix: " Mbps",
787
791
  helpText: "Network bandwidth limit"
788
792
  }),
789
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
793
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
790
794
  padding: "6",
791
795
  background: "bg-surface-info-subdued",
792
796
  borderRadius: "2",
793
797
  borderWidth: "1",
794
798
  borderColor: "border-info",
795
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
796
- gap: "4",
799
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
800
+ gap: "md",
797
801
  children: [
798
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Grid, {
802
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
799
803
  columns: 2,
800
804
  gap: "4",
801
805
  children: [
802
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
803
- gap: "2",
806
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
807
+ gap: "sm",
804
808
  children: [
805
809
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
806
810
  variant: "headingSm",
@@ -844,8 +848,8 @@ var AdvancedConfiguration = {
844
848
  })
845
849
  ]
846
850
  }),
847
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
848
- gap: "2",
851
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
852
+ gap: "sm",
849
853
  children: [
850
854
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
851
855
  variant: "headingSm",