@doist/reactist 17.8.1 → 17.9.1

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 (77) hide show
  1. package/dist/reactist.cjs.development.js +27 -23
  2. package/dist/reactist.cjs.development.js.map +1 -1
  3. package/dist/reactist.cjs.production.min.js +1 -1
  4. package/dist/reactist.cjs.production.min.js.map +1 -1
  5. package/es/new-components/box/box.js +4 -2
  6. package/es/new-components/box/box.js.map +1 -1
  7. package/es/new-components/box/gap.module.css.js +4 -0
  8. package/es/new-components/box/gap.module.css.js.map +1 -0
  9. package/es/new-components/columns/columns.js +4 -3
  10. package/es/new-components/columns/columns.js.map +1 -1
  11. package/es/new-components/columns/columns.module.css.js +1 -1
  12. package/es/new-components/inline/inline.js +3 -3
  13. package/es/new-components/inline/inline.js.map +1 -1
  14. package/es/new-components/stack/stack.js +12 -12
  15. package/es/new-components/stack/stack.js.map +1 -1
  16. package/es/new-components/tabs/tabs.js +3 -1
  17. package/es/new-components/tabs/tabs.js.map +1 -1
  18. package/es/new-components/tabs/tabs.module.css.js +1 -1
  19. package/lib/new-components/box/box.d.ts +1 -0
  20. package/lib/new-components/box/box.js +1 -1
  21. package/lib/new-components/box/box.js.map +1 -1
  22. package/lib/new-components/box/gap.module.css.js +2 -0
  23. package/lib/new-components/box/gap.module.css.js.map +1 -0
  24. package/lib/new-components/columns/columns.js +1 -1
  25. package/lib/new-components/columns/columns.js.map +1 -1
  26. package/lib/new-components/columns/columns.module.css.js +1 -1
  27. package/lib/new-components/inline/inline.js +1 -1
  28. package/lib/new-components/inline/inline.js.map +1 -1
  29. package/lib/new-components/stack/stack.js +1 -1
  30. package/lib/new-components/stack/stack.js.map +1 -1
  31. package/lib/new-components/tabs/tabs.d.ts +6 -6
  32. package/lib/new-components/tabs/tabs.js +1 -1
  33. package/lib/new-components/tabs/tabs.js.map +1 -1
  34. package/lib/new-components/tabs/tabs.module.css.js +1 -1
  35. package/package.json +1 -1
  36. package/styles/alert.css +2 -1
  37. package/styles/avatar.css +2 -1
  38. package/styles/badge.css +1 -0
  39. package/styles/base-button.css +1 -0
  40. package/styles/base-field.css +1 -1
  41. package/styles/box.css +2 -1
  42. package/styles/checkbox-field.css +1 -0
  43. package/styles/columns.css +2 -1
  44. package/styles/columns.module.css.css +1 -1
  45. package/styles/divider.css +1 -0
  46. package/styles/gap.module.css.css +1 -0
  47. package/styles/heading.css +1 -0
  48. package/styles/hidden-visually.css +1 -0
  49. package/styles/hidden.css +1 -0
  50. package/styles/loading.css +1 -0
  51. package/styles/modal.css +2 -2
  52. package/styles/notice.css +2 -1
  53. package/styles/password-field.css +1 -1
  54. package/styles/progress-bar.css +1 -0
  55. package/styles/reactist.css +3 -4
  56. package/styles/select-field.css +1 -1
  57. package/styles/static-toast.css +1 -1
  58. package/styles/switch-field.css +1 -1
  59. package/styles/tabs.css +3 -3
  60. package/styles/tabs.module.css.css +1 -1
  61. package/styles/text-area.css +1 -1
  62. package/styles/text-field.css +1 -1
  63. package/styles/text-link.css +1 -0
  64. package/styles/text.css +1 -0
  65. package/styles/use-toasts.css +1 -1
  66. package/es/new-components/inline/inline.module.css.js +0 -4
  67. package/es/new-components/inline/inline.module.css.js.map +0 -1
  68. package/es/new-components/stack/stack.module.css.js +0 -4
  69. package/es/new-components/stack/stack.module.css.js.map +0 -1
  70. package/lib/new-components/inline/inline.module.css.js +0 -2
  71. package/lib/new-components/inline/inline.module.css.js.map +0 -1
  72. package/lib/new-components/stack/stack.module.css.js +0 -2
  73. package/lib/new-components/stack/stack.module.css.js.map +0 -1
  74. package/styles/inline.css +0 -5
  75. package/styles/inline.module.css.css +0 -1
  76. package/styles/stack.css +0 -6
  77. package/styles/stack.module.css.css +0 -1
@@ -204,7 +204,9 @@ var modules_131405ac = {"marginTop-xsmall":"c7813d79","marginTop-small":"d3449da
204
204
 
205
205
  var modules_89b7671c = {"minWidth-0":"_68ab48ca","minWidth-xsmall":"_6fa2b565","minWidth-small":"dd50fabd","minWidth-medium":"e7e2c808","minWidth-large":"_6abbe25e","minWidth-xlarge":"_54f479ac","maxWidth-xsmall":"_148492bc","maxWidth-small":"bd023b96","maxWidth-medium":"e102903f","maxWidth-large":"_0e8d76d7","maxWidth-xlarge":"_47a031d0","maxWidth-full":"cd4c8183","width-0":"_5f5959e8","width-full":"_8c75067a","width-auto":"_56a651f6","width-maxContent":"_26f87bb8","width-minContent":"_07a6ab44","width-fitContent":"a87016fa","width-xsmall":"_1a972e50","width-small":"c96d8261","width-medium":"f3829d42","width-large":"_2caef228","width-xlarge":"_069e1491"};
206
206
 
207
- const _excluded = ["as", "position", "display", "flexDirection", "flexWrap", "flexGrow", "flexShrink", "alignItems", "justifyContent", "alignSelf", "overflow", "width", "height", "background", "border", "borderRadius", "minWidth", "maxWidth", "textAlign", "padding", "paddingY", "paddingX", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginY", "marginX", "marginTop", "marginRight", "marginBottom", "marginLeft", "className", "children"];
207
+ var modules_8b5c09cb = {"gap-none":"_64ed24f4","gap-xsmall":"_2580a74b","gap-small":"c68f8bf6","gap-medium":"_43e5f8e9","gap-large":"_966b120f","gap-xlarge":"f957894c","gap-xxlarge":"_8cca104b","tablet-gap-none":"_5797cee2","tablet-gap-xsmall":"_9015672f","tablet-gap-small":"_7ec86eec","tablet-gap-medium":"_714d7179","tablet-gap-large":"ae1deb59","tablet-gap-xlarge":"e1cfce55","tablet-gap-xxlarge":"_168a8ff8","desktop-gap-none":"_43e2b619","desktop-gap-xsmall":"_0ea9bf88","desktop-gap-small":"d451307a","desktop-gap-medium":"bf93cf66","desktop-gap-large":"_1430cddf","desktop-gap-xlarge":"fa00c93e","desktop-gap-xxlarge":"_6f3aee54"};
208
+
209
+ const _excluded = ["as", "position", "display", "flexDirection", "flexWrap", "flexGrow", "flexShrink", "gap", "alignItems", "justifyContent", "alignSelf", "overflow", "width", "height", "background", "border", "borderRadius", "minWidth", "maxWidth", "textAlign", "padding", "paddingY", "paddingX", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginY", "marginX", "marginTop", "marginRight", "marginBottom", "marginLeft", "className", "children"];
208
210
  const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
209
211
  var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
210
212
 
@@ -216,6 +218,7 @@ const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
216
218
  flexWrap,
217
219
  flexGrow,
218
220
  flexShrink,
221
+ gap,
219
222
  alignItems,
220
223
  justifyContent,
221
224
  alignSelf,
@@ -260,13 +263,13 @@ const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
260
263
  className: classNames(className, modules_54d944f2.box, display ? getClassNames(modules_54d944f2, 'display', display) : null, position !== 'static' ? getClassNames(modules_54d944f2, 'position', position) : null, minWidth != null ? getClassNames(modules_89b7671c, 'minWidth', String(minWidth)) : null, getClassNames(modules_89b7671c, 'maxWidth', maxWidth), getClassNames(modules_54d944f2, 'textAlign', textAlign), // padding
261
264
  getClassNames(modules_b537a8ee, 'paddingTop', resolvedPaddingTop), getClassNames(modules_b537a8ee, 'paddingRight', resolvedPaddingRight), getClassNames(modules_b537a8ee, 'paddingBottom', resolvedPaddingBottom), getClassNames(modules_b537a8ee, 'paddingLeft', resolvedPaddingLeft), // margin
262
265
  getClassNames(modules_131405ac, 'marginTop', resolvedMarginTop), getClassNames(modules_131405ac, 'marginRight', resolvedMarginRight), getClassNames(modules_131405ac, 'marginBottom', resolvedMarginBottom), getClassNames(modules_131405ac, 'marginLeft', resolvedMarginLeft), // flex props
263
- omitFlex ? null : getClassNames(modules_54d944f2, 'flexDirection', flexDirection), omitFlex ? null : getClassNames(modules_54d944f2, 'flexWrap', flexWrap), omitFlex ? null : getClassNames(modules_54d944f2, 'alignItems', alignItems), omitFlex ? null : getClassNames(modules_54d944f2, 'justifyContent', justifyContent), alignSelf != null ? getClassNames(modules_54d944f2, 'alignSelf', alignSelf) : null, flexShrink != null ? getClassNames(modules_54d944f2, 'flexShrink', String(flexShrink)) : null, flexGrow != null ? getClassNames(modules_54d944f2, 'flexGrow', String(flexGrow)) : null, // other props
266
+ omitFlex ? null : getClassNames(modules_54d944f2, 'flexDirection', flexDirection), omitFlex ? null : getClassNames(modules_54d944f2, 'flexWrap', flexWrap), omitFlex ? null : getClassNames(modules_54d944f2, 'alignItems', alignItems), omitFlex ? null : getClassNames(modules_54d944f2, 'justifyContent', justifyContent), alignSelf != null ? getClassNames(modules_54d944f2, 'alignSelf', alignSelf) : null, flexShrink != null ? getClassNames(modules_54d944f2, 'flexShrink', String(flexShrink)) : null, flexGrow != null ? getClassNames(modules_54d944f2, 'flexGrow', String(flexGrow)) : null, gap ? getClassNames(modules_8b5c09cb, 'gap', gap) : null, // other props
264
267
  getClassNames(modules_54d944f2, 'overflow', overflow), width != null ? getClassNames(modules_89b7671c, 'width', String(width)) : null, getClassNames(modules_54d944f2, 'height', height), getClassNames(modules_54d944f2, 'bg', background), borderRadius !== 'none' ? getClassNames(modules_54d944f2, 'borderRadius', borderRadius) : null, border !== 'none' ? getClassNames(modules_54d944f2, 'border', border) : null) || undefined,
265
268
  ref
266
269
  }), children);
267
270
  });
268
271
 
269
- var modules_67f2d07a = {"space-xsmall":"_6f59c771","column":"_91e05f0f","space-small":"_5a55af26","space-medium":"fa261310","space-large":"_6ebd4e46","space-xlarge":"_55ce4aea","space-xxlarge":"_04c9c3ac","tablet-space-xsmall":"ab76d8cd","tablet-space-small":"_14629bfb","tablet-space-medium":"_5b4e39ea","tablet-space-large":"ba270182","tablet-space-xlarge":"b96e7ec7","tablet-space-xxlarge":"d276612c","desktop-space-xsmall":"d7a73106","desktop-space-small":"_8f5e0e9e","desktop-space-medium":"_3a168411","desktop-space-large":"_0abcc12e","desktop-space-xlarge":"e0bafc60","desktop-space-xxlarge":"d2df9afd","columnWidth-auto":"b18d0b47","columnWidth-1-2":"_102a6b27","columnWidth-1-3":"_829872fe","columnWidth-2-3":"cf5aef9a","columnWidth-1-4":"_931bf714","columnWidth-3-4":"b0303130","columnWidth-1-5":"f6589a6f","columnWidth-2-5":"_2823aed9","columnWidth-3-5":"d00ba3bb","columnWidth-4-5":"_338f2d7c","tablet-tablet-space-xsmall":"_06582234"};
272
+ var modules_67f2d07a = {"container":"eae3d34f","container-xsmall":"_9b4012c9","container-small":"e35e0320","container-medium":"_0703e67f","container-large":"_1cf15621","container-xlarge":"_1c7dff67","container-xxlarge":"_25bee9b6","columnWidth-content":"_4bb9987d","columnWidth-auto":"_9dd31975","columnWidth-1-2":"_38d11c0e","columnWidth-1-3":"_7ac225c6","columnWidth-2-3":"_9c340680","columnWidth-1-4":"_81cb99d2","columnWidth-3-4":"_10fd355f","columnWidth-1-5":"_3ee66520","columnWidth-2-5":"df1201a5","columnWidth-3-5":"f772e0b2","columnWidth-4-5":"_880cbbb1"};
270
273
 
271
274
  const _excluded$1 = ["width", "children", "exceptionallySetClassName"],
272
275
  _excluded2 = ["space", "align", "alignY", "collapseBelow", "children", "exceptionallySetClassName"];
@@ -279,11 +282,11 @@ const Column = /*#__PURE__*/polymorphicComponent(function Column(_ref, ref) {
279
282
  props = _objectWithoutProperties(_ref, _excluded$1);
280
283
 
281
284
  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
282
- className: [exceptionallySetClassName, modules_67f2d07a.column, width !== 'content' ? getClassNames(modules_67f2d07a, 'columnWidth', width.replace('/', '-')) : null],
285
+ className: [exceptionallySetClassName, getClassNames(modules_67f2d07a, 'columnWidth', width.replace('/', '-'))],
283
286
  minWidth: 0,
284
- width: width !== 'content' ? 'full' : undefined,
285
287
  height: "full",
286
288
  flexShrink: width === 'content' ? 0 : undefined,
289
+ flexGrow: width === 'auto' ? 1 : 0,
287
290
  ref: ref
288
291
  }), children);
289
292
  });
@@ -299,8 +302,9 @@ const Columns = /*#__PURE__*/polymorphicComponent(function Columns(_ref2, ref) {
299
302
  props = _objectWithoutProperties(_ref2, _excluded2);
300
303
 
301
304
  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
302
- className: [exceptionallySetClassName, getClassNames(modules_67f2d07a, 'space', space)],
305
+ className: [exceptionallySetClassName, modules_67f2d07a.container, getClassNames(modules_67f2d07a, 'container', space)],
303
306
  display: "flex",
307
+ gap: space,
304
308
  flexDirection: collapseBelow === 'desktop' ? {
305
309
  mobile: 'column',
306
310
  tablet: 'column',
@@ -331,8 +335,6 @@ function Divider(_ref) {
331
335
  }, props));
332
336
  }
333
337
 
334
- var modules_da5d5c21 = {"space-xsmall":"_6b1279e0","space-small":"_0d82c42d","space-medium":"_556714e1","space-large":"e90b43fb","space-xlarge":"a9c34345","space-xxlarge":"aa102efe","tablet-space-xsmall":"_34d16157","tablet-space-small":"c7e0e54f","tablet-space-medium":"_7f2a4e4b","tablet-space-large":"ae256487","tablet-space-xlarge":"e88be0f7","tablet-space-xxlarge":"dc7bcb18","desktop-space-xsmall":"_853f3012","desktop-space-small":"_3bfaf758","desktop-space-medium":"_36462a93","desktop-space-large":"e73081b7","desktop-space-xlarge":"e22ec9dd","desktop-space-xxlarge":"_4a20bd12"};
335
-
336
338
  const _excluded$3 = ["as", "space", "align", "alignY", "children", "exceptionallySetClassName"];
337
339
  const Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
338
340
  let {
@@ -349,36 +351,36 @@ const Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
349
351
  as: as,
350
352
  display: "flex",
351
353
  flexWrap: "wrap",
352
- className: [exceptionallySetClassName, getClassNames(modules_da5d5c21, 'space', space)],
354
+ gap: space,
355
+ className: exceptionallySetClassName,
353
356
  ref: ref,
354
357
  alignItems: mapResponsiveProp(alignY, alignY => alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center'),
355
358
  justifyContent: mapResponsiveProp(align, align => align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center')
356
359
  }), children);
357
360
  });
358
361
 
359
- var modules_3af3b7ac = {"space-xsmall":"_7b475ead","space-small":"_5641699f","space-medium":"_1a1c63e4","space-large":"_560f80a0","space-xlarge":"_84ffebbc","space-xxlarge":"b60a65cb","tablet-space-xsmall":"d808f5c3","tablet-space-small":"a51c76b3","tablet-space-medium":"_7185a7aa","tablet-space-large":"af82e610","tablet-space-xlarge":"_88b4ff46","tablet-space-xxlarge":"_9de15321","desktop-space-xsmall":"_6fb32d20","desktop-space-small":"_07ee315a","desktop-space-medium":"a270d7ec","desktop-space-large":"ea6ebb29","desktop-space-xlarge":"_35b36178","desktop-space-xxlarge":"_56c7dc23"};
360
-
361
- const _excluded$4 = ["as", "space", "align", "dividers", "children", "exceptionallySetClassName"];
362
+ const _excluded$4 = ["as", "space", "align", "dividers", "width", "children", "exceptionallySetClassName"];
362
363
  const Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
363
364
  let {
364
365
  as,
365
366
  space,
366
- align = 'start',
367
+ align,
367
368
  dividers = 'none',
369
+ width = 'full',
368
370
  children,
369
371
  exceptionallySetClassName
370
372
  } = _ref,
371
373
  props = _objectWithoutProperties(_ref, _excluded$4);
372
374
 
373
- const alignProps = align === 'start' ? undefined : {
374
- width: 'full',
375
- flexDirection: 'column',
376
- display: 'flex',
377
- alignItems: mapResponsiveProp(align, align => align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center')
378
- };
379
- return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2(_objectSpread2({}, props), alignProps), {}, {
375
+ const alignItems = align === undefined ? undefined : mapResponsiveProp(align, align => align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center');
376
+ return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
377
+ display: "flex",
378
+ flexDirection: "column",
379
+ width: width,
380
+ alignItems: alignItems,
381
+ gap: space,
380
382
  as: as,
381
- className: [exceptionallySetClassName, getClassNames(modules_3af3b7ac, 'space', space)],
383
+ className: exceptionallySetClassName,
382
384
  ref: ref
383
385
  }), dividers !== 'none' ? React.Children.map(flattenChildren(children), (child, index) => index > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
384
386
  weight: dividers
@@ -2372,7 +2374,7 @@ function usePrevious(value) {
2372
2374
  return ref.current;
2373
2375
  }
2374
2376
 
2375
- var modules_40c67f5b = {"tab":"a1064a3b","track":"_06f1b8a1","tab-neutral":"dabbec7d","tab-themed":"e6f5ae4e","track-neutral":"_43913ce5","track-themed":"_39bdfdde","track-xsmall":"_1c148f4e","track-small":"_2a370df5","track-medium":"_77430437","track-large":"_33db5352","track-xlarge":"_60bf9564","track-xxlarge":"_29a35080"};
2377
+ var modules_40c67f5b = {"tab":"e96bf360","track":"_430e252d","tab-neutral":"f631ccbe","tab-themed":"_6ba96acc","track-neutral":"ef4cd8d3","track-themed":"_344b3b10"};
2376
2378
 
2377
2379
  const _excluded$r = ["as", "children", "id", "exceptionallySetClassName"],
2378
2380
  _excluded2$2 = ["children", "space"],
@@ -2417,6 +2419,7 @@ function Tabs({
2417
2419
  * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
2418
2420
  */
2419
2421
 
2422
+
2420
2423
  const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
2421
2424
  let {
2422
2425
  as,
@@ -2475,7 +2478,7 @@ function TabList(_ref2) {
2475
2478
  position: "relative",
2476
2479
  width: "maxContent"
2477
2480
  }, props), /*#__PURE__*/React.createElement(Box, {
2478
- className: classNames(modules_40c67f5b.track, modules_40c67f5b["track-" + space], modules_40c67f5b["track-" + variant])
2481
+ className: [modules_40c67f5b.track, modules_40c67f5b["track-" + variant]]
2479
2482
  }), /*#__PURE__*/React.createElement(Inline, {
2480
2483
  space: space
2481
2484
  }, children)))
@@ -2485,6 +2488,7 @@ function TabList(_ref2) {
2485
2488
  * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
2486
2489
  */
2487
2490
 
2491
+
2488
2492
  const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref3, ref) {
2489
2493
  let {
2490
2494
  children,