@pareto-engineering/design-system 4.0.0-alpha.62 → 4.0.0-alpha.64

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 (100) hide show
  1. package/dist/cjs/f/common/Description/Description.js +6 -5
  2. package/dist/cjs/f/common/Label/Label.js +9 -22
  3. package/dist/cjs/f/common/Label/styles.scss +0 -5
  4. package/dist/cjs/f/common/index.js +1 -9
  5. package/dist/cjs/f/fields/Checkbox/Checkbox.js +16 -21
  6. package/dist/cjs/f/fields/Checkbox/styles.scss +7 -5
  7. package/dist/cjs/f/fields/ChoicesInput/ChoicesInput.js +13 -23
  8. package/dist/cjs/f/fields/ChoicesInput/styles.scss +44 -41
  9. package/dist/cjs/f/fields/EditorInput/EditorInput.js +11 -39
  10. package/dist/cjs/f/fields/EditorInput/styles.scss +92 -90
  11. package/dist/cjs/f/fields/LinkInput/LinkInput.js +14 -20
  12. package/dist/cjs/f/fields/LinkInput/styles.scss +52 -51
  13. package/dist/cjs/f/fields/QueryChoices/QueryChoices.js +2 -26
  14. package/dist/cjs/f/fields/QueryCombobox/QueryCombobox.js +4 -30
  15. package/dist/cjs/f/fields/QueryCombobox/common/Combobox/Combobox.js +7 -16
  16. package/dist/cjs/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +9 -17
  17. package/dist/cjs/f/fields/QueryCombobox/styles.scss +38 -37
  18. package/dist/cjs/f/fields/QuerySelect/QuerySelect.js +2 -10
  19. package/dist/cjs/f/fields/RatingsInput/RatingsInput.js +14 -38
  20. package/dist/cjs/f/fields/RatingsInput/styles.scss +5 -1
  21. package/dist/cjs/f/fields/SelectInput/SelectInput.js +14 -36
  22. package/dist/cjs/f/fields/SelectInput/styles.scss +5 -2
  23. package/dist/cjs/f/fields/TextInput/TextInput.js +19 -37
  24. package/dist/cjs/f/fields/TextInput/styles.scss +37 -30
  25. package/dist/cjs/f/fields/TextareaInput/TextareaInput.js +15 -37
  26. package/dist/cjs/f/fields/TextareaInput/styles.scss +30 -27
  27. package/dist/es/f/common/Description/Description.js +4 -1
  28. package/dist/es/f/common/Label/Label.js +15 -24
  29. package/dist/es/f/common/Label/styles.scss +0 -5
  30. package/dist/es/f/common/index.js +0 -1
  31. package/dist/es/f/fields/Checkbox/Checkbox.js +14 -19
  32. package/dist/es/f/fields/Checkbox/styles.scss +7 -5
  33. package/dist/es/f/fields/ChoicesInput/ChoicesInput.js +31 -39
  34. package/dist/es/f/fields/ChoicesInput/styles.scss +44 -41
  35. package/dist/es/f/fields/EditorInput/EditorInput.js +12 -35
  36. package/dist/es/f/fields/EditorInput/styles.scss +92 -90
  37. package/dist/es/f/fields/LinkInput/LinkInput.js +14 -20
  38. package/dist/es/f/fields/LinkInput/styles.scss +52 -51
  39. package/dist/es/f/fields/QueryChoices/QueryChoices.js +2 -26
  40. package/dist/es/f/fields/QueryCombobox/QueryCombobox.js +4 -26
  41. package/dist/es/f/fields/QueryCombobox/common/Combobox/Combobox.js +8 -17
  42. package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +10 -18
  43. package/dist/es/f/fields/QueryCombobox/styles.scss +38 -37
  44. package/dist/es/f/fields/QuerySelect/QuerySelect.js +2 -10
  45. package/dist/es/f/fields/RatingsInput/RatingsInput.js +15 -35
  46. package/dist/es/f/fields/RatingsInput/styles.scss +5 -1
  47. package/dist/es/f/fields/SelectInput/SelectInput.js +14 -36
  48. package/dist/es/f/fields/SelectInput/styles.scss +5 -2
  49. package/dist/es/f/fields/TextInput/TextInput.js +19 -37
  50. package/dist/es/f/fields/TextInput/styles.scss +37 -30
  51. package/dist/es/f/fields/TextareaInput/TextareaInput.js +15 -37
  52. package/dist/es/f/fields/TextareaInput/styles.scss +30 -27
  53. package/package.json +3 -3
  54. package/src/stories/f/Checkbox.stories.jsx +13 -21
  55. package/src/stories/f/ChoicesInput.stories.jsx +12 -27
  56. package/src/stories/f/EditorInput.stories.jsx +7 -14
  57. package/src/stories/f/LinkInput.stories.jsx +15 -22
  58. package/src/stories/f/QueryChoices.stories.jsx +12 -19
  59. package/src/stories/f/QueryCombobox.stories.jsx +16 -24
  60. package/src/stories/f/QuerySelect.stories.jsx +12 -19
  61. package/src/stories/f/RatingsInput.stories.jsx +7 -14
  62. package/src/stories/f/SelectInput.stories.jsx +12 -19
  63. package/src/stories/f/TextInput.stories.jsx +16 -23
  64. package/src/stories/f/TextareaInput.stories.jsx +7 -14
  65. package/src/ui/f/common/Description/Description.jsx +6 -2
  66. package/src/ui/f/common/Label/Label.jsx +27 -37
  67. package/src/ui/f/common/Label/styles.scss +0 -5
  68. package/src/ui/f/common/index.js +0 -1
  69. package/src/ui/f/fields/Checkbox/Checkbox.jsx +27 -33
  70. package/src/ui/f/fields/Checkbox/styles.scss +7 -5
  71. package/src/ui/f/fields/ChoicesInput/ChoicesInput.jsx +29 -38
  72. package/src/ui/f/fields/ChoicesInput/styles.scss +44 -41
  73. package/src/ui/f/fields/EditorInput/EditorInput.jsx +16 -41
  74. package/src/ui/f/fields/EditorInput/styles.scss +92 -90
  75. package/src/ui/f/fields/LinkInput/LinkInput.jsx +38 -45
  76. package/src/ui/f/fields/LinkInput/styles.scss +52 -51
  77. package/src/ui/f/fields/QueryChoices/QueryChoices.jsx +0 -28
  78. package/src/ui/f/fields/QueryCombobox/QueryCombobox.jsx +5 -31
  79. package/src/ui/f/fields/QueryCombobox/common/Combobox/Combobox.jsx +35 -46
  80. package/src/ui/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.jsx +63 -73
  81. package/src/ui/f/fields/QueryCombobox/styles.scss +38 -37
  82. package/src/ui/f/fields/QuerySelect/QuerySelect.jsx +0 -8
  83. package/src/ui/f/fields/RatingsInput/RatingsInput.jsx +20 -47
  84. package/src/ui/f/fields/RatingsInput/styles.scss +5 -1
  85. package/src/ui/f/fields/SelectInput/SelectInput.jsx +33 -61
  86. package/src/ui/f/fields/SelectInput/styles.scss +5 -2
  87. package/src/ui/f/fields/TextInput/TextInput.jsx +27 -50
  88. package/src/ui/f/fields/TextInput/styles.scss +37 -30
  89. package/src/ui/f/fields/TextareaInput/TextareaInput.jsx +32 -59
  90. package/src/ui/f/fields/TextareaInput/styles.scss +30 -27
  91. package/tests/__snapshots__/Storyshots.test.js.snap +5909 -0
  92. package/dist/cjs/f/common/InputWrapper/InputWrapper.js +0 -73
  93. package/dist/cjs/f/common/InputWrapper/index.js +0 -13
  94. package/dist/cjs/f/common/InputWrapper/styles.scss +0 -13
  95. package/dist/es/f/common/InputWrapper/InputWrapper.js +0 -61
  96. package/dist/es/f/common/InputWrapper/index.js +0 -2
  97. package/dist/es/f/common/InputWrapper/styles.scss +0 -13
  98. package/src/ui/f/common/InputWrapper/InputWrapper.jsx +0 -83
  99. package/src/ui/f/common/InputWrapper/index.js +0 -2
  100. package/src/ui/f/common/InputWrapper/styles.scss +0 -13
@@ -4,16 +4,14 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var React = _interopRequireWildcard(require("react"));
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var React = _react;
8
9
  var _formik = require("formik");
9
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
10
11
  var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
11
- require("./styles.scss");
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
14
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
15
- /* @pareto-engineering/generator-front 1.0.12 */
16
-
14
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /* @pareto-engineering/generator-front 1.0.12 */
17
15
  // Local Definitions
18
16
 
19
17
  const baseClassName = _exports.default.base;
@@ -32,6 +30,9 @@ const Description = _ref => {
32
30
  color
33
31
  // ...otherProps
34
32
  } = _ref;
33
+ (0, _react.useInsertionEffect)(() => {
34
+ Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
35
+ }, []);
35
36
  const [, meta] = (0, _formik.useField)(name);
36
37
  const hasError = meta.touched && meta.error;
37
38
  if (hasError || description) {
@@ -4,15 +4,13 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var React = _interopRequireWildcard(require("react"));
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var React = _react;
8
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
10
  var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
10
- require("./styles.scss");
11
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
12
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
13
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
14
- /* @pareto-engineering/generator-front 1.0.12 */
15
-
13
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /* @pareto-engineering/generator-front 1.0.12 */
16
14
  // Local Definitions
17
15
 
18
16
  const baseClassName = _exports.default.base;
@@ -30,20 +28,17 @@ const Label = _ref => {
30
28
  name,
31
29
  color,
32
30
  optional,
33
- as: Wrapper,
34
- columnSpan,
35
- desktopColumnSpan
31
+ as: Wrapper
36
32
  // ...otherProps
37
33
  } = _ref;
34
+ (0, _react.useInsertionEffect)(() => {
35
+ Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
36
+ }, []);
38
37
  return /*#__PURE__*/React.createElement(Wrapper, {
39
38
  htmlFor: Wrapper === 'label' ? name : undefined,
40
39
  id: id,
41
40
  className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
42
- style: {
43
- ...style,
44
- '--column-span': columnSpan || 'var(--columns)',
45
- '--column-span-md': desktopColumnSpan || 'var(--columns)'
46
- }
41
+ style: style
47
42
  // {...otherProps}
48
43
  }, children, optional && ' (Optional)');
49
44
  };
@@ -79,15 +74,7 @@ Label.propTypes = {
79
74
  /**
80
75
  * Whether the input should have an optional tag
81
76
  */
82
- optional: _propTypes.default.bool,
83
- /**
84
- * How many columns the input should span
85
- */
86
- columnSpan: _propTypes.default.number,
87
- /**
88
- * How many columns the input should span on desktop
89
- */
90
- desktopColumnSpan: _propTypes.default.number
77
+ optional: _propTypes.default.bool
91
78
  };
92
79
  Label.defaultProps = {
93
80
  as: 'label',
@@ -6,9 +6,4 @@
6
6
 
7
7
  .#{bem.$base}.form-label {
8
8
  color: var(--x);
9
- grid-column: span var(--column-span);
10
-
11
- @include mixins.media($from: $sm-md) {
12
- grid-column: span var(--column-span-md);
13
- }
14
9
  }
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  var _exportNames = {
7
7
  FormLabel: true,
8
8
  FormDescription: true,
9
- FormDebugger: true,
10
- InputWrapper: true
9
+ FormDebugger: true
11
10
  };
12
11
  Object.defineProperty(exports, "FormDebugger", {
13
12
  enumerable: true,
@@ -27,16 +26,9 @@ Object.defineProperty(exports, "FormLabel", {
27
26
  return _Label.Label;
28
27
  }
29
28
  });
30
- Object.defineProperty(exports, "InputWrapper", {
31
- enumerable: true,
32
- get: function () {
33
- return _InputWrapper.InputWrapper;
34
- }
35
- });
36
29
  var _Label = require("./Label");
37
30
  var _Description = require("./Description");
38
31
  var _Debugger = require("./Debugger");
39
- var _InputWrapper = require("./InputWrapper");
40
32
  var _utils = require("./utils");
41
33
  Object.keys(_utils).forEach(function (key) {
42
34
  if (key === "default" || key === "__esModule") return;
@@ -4,16 +4,16 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var React = _interopRequireWildcard(require("react"));
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var React = _react;
8
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
10
  var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
10
11
  var _formik = require("formik");
11
12
  var _common = require("../../common");
12
- require("./styles.scss");
13
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
14
15
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
15
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
16
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* @pareto-engineering/generator-front 1.0.12 */
16
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /* @pareto-engineering/generator-front 1.0.12 */
17
17
  // Local Definitions
18
18
 
19
19
  const baseClassName = _exports.default.base;
@@ -32,31 +32,26 @@ const Checkbox = _ref => {
32
32
  description,
33
33
  disabled,
34
34
  optional,
35
- labelColor,
36
- labelSpan,
37
- desktopLabelSpan,
38
- inputSpan,
39
- desktopInputSpan
35
+ labelColor
40
36
  // ...otherProps
41
37
  } = _ref;
38
+ (0, _react.useInsertionEffect)(() => {
39
+ Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
40
+ }, []);
42
41
  const [field] = (0, _formik.useField)({
43
42
  name,
44
43
  type: 'checkbox'
45
44
  });
46
- return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(_common.FormLabel, {
45
+ return /*#__PURE__*/React.createElement("div", {
46
+ id: id,
47
+ className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
48
+ style: style
49
+ }, label && /*#__PURE__*/React.createElement(_common.FormLabel, {
47
50
  name: name,
48
51
  color: labelColor,
49
- optional: optional,
50
- columnSpan: labelSpan,
51
- desktopColumnSpan: desktopLabelSpan
52
+ optional: optional
52
53
  // {...otherProps}
53
- }, label), /*#__PURE__*/React.createElement(_common.InputWrapper, {
54
- id: id,
55
- className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
56
- style: style,
57
- columnSpan: inputSpan,
58
- desktopColumnSpan: desktopInputSpan
59
- }, /*#__PURE__*/React.createElement("input", _extends({
54
+ }, label), /*#__PURE__*/React.createElement("input", _extends({
60
55
  id: name,
61
56
  className: "input",
62
57
  type: "checkbox",
@@ -65,7 +60,7 @@ const Checkbox = _ref => {
65
60
  className: "s-1",
66
61
  description: description,
67
62
  name: name
68
- })));
63
+ }));
69
64
  };
70
65
  Checkbox.propTypes = {
71
66
  /**
@@ -5,10 +5,12 @@
5
5
  @use "@pareto-engineering/styles/src/globals" as *;
6
6
 
7
7
  .#{bem.$base}.checkbox {
8
- &.#{bem.$base}.input-wrapper {
9
- align-items: flex-start;
10
- display: flex;
11
- flex-direction: column;
12
- justify-content: center;
8
+ align-items: flex-start;
9
+ display: flex;
10
+ flex-direction: column;
11
+ justify-content: center;
12
+
13
+ > .#{bem.$base}.form-label {
14
+ margin-bottom: var(--gap);
13
15
  }
14
16
  }
@@ -10,11 +10,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
10
10
  var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
11
11
  var _common = require("./common");
12
12
  var _common2 = require("../../common");
13
- require("./styles.scss");
14
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
15
15
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
16
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
17
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* @pareto-engineering/generator-front 1.0.12 */ // Local Definitions
16
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /* @pareto-engineering/generator-front 1.0.12 */ // Local Definitions
18
17
  const baseClassName = _exports.default.base;
19
18
  const componentClassName = 'choices-input';
20
19
 
@@ -37,26 +36,21 @@ const ChoicesInput = _ref => {
37
36
  disabled,
38
37
  description,
39
38
  spaceBetween,
40
- labelSpan,
41
- desktopLabelSpan,
42
- inputSpan,
43
- desktopInputSpan,
44
39
  ...otherProps
45
40
  } = _ref;
46
- return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(_common2.FormLabel, {
41
+ (0, _react.useInsertionEffect)(() => {
42
+ Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
43
+ }, []);
44
+ return /*#__PURE__*/React.createElement("div", {
45
+ id: id,
46
+ className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
47
+ style: style
48
+ }, label && /*#__PURE__*/React.createElement(_common2.FormLabel, {
47
49
  name: name,
48
50
  color: labelColor,
49
- optional: optional,
50
- columnSpan: labelSpan,
51
- desktopColumnSpan: desktopLabelSpan
51
+ optional: optional
52
52
  // {...otherProps}
53
- }, label), /*#__PURE__*/React.createElement(_common2.InputWrapper, {
54
- id: id,
55
- className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
56
- style: style,
57
- columnSpan: inputSpan,
58
- desktopColumnSpan: desktopInputSpan
59
- }, /*#__PURE__*/React.createElement("div", {
53
+ }, label), /*#__PURE__*/React.createElement("div", {
60
54
  className: ['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')
61
55
  }, options.map(choice => /*#__PURE__*/React.createElement(_common.Choice, _extends({
62
56
  className: `x-${color}`,
@@ -70,7 +64,7 @@ const ChoicesInput = _ref => {
70
64
  className: "s-1",
71
65
  description: description,
72
66
  name: name
73
- })));
67
+ }));
74
68
  };
75
69
  ChoicesInput.propTypes = {
76
70
  /**
@@ -108,10 +102,6 @@ ChoicesInput.propTypes = {
108
102
  * how many columns should be displayed on the mobile grid
109
103
  */
110
104
  gridColumnsMobile: _propTypes.default.number,
111
- /**
112
- * how many columns should be displayed on the desktop grid
113
- */
114
- gridColumnsDesktop: _propTypes.default.number,
115
105
  /**
116
106
  * The choice color
117
107
  */
@@ -18,59 +18,62 @@ $default-background: var(--background-inputs);
18
18
  $disabled-background: var(--background-inputs-30);
19
19
 
20
20
  .#{bem.$base}.choices-input {
21
- &.#{bem.$base}.input-wrapper {
21
+ display: flex;
22
+ flex-direction: column;
23
+
24
+ > .#{bem.$base}.form-label {
25
+ margin-bottom: var(--gap);
26
+ }
27
+
28
+ > .choices {
22
29
  display: flex;
23
- flex-direction: column;
30
+ flex-wrap: wrap;
31
+ gap: $default-flex-separator;
24
32
 
25
- > .choices {
33
+ &.space-between {
34
+ justify-content: space-between;
35
+ }
36
+
37
+ >.choice {
26
38
  display: flex;
27
- flex-wrap: wrap;
28
- gap: $default-flex-separator;
29
39
 
30
- &.space-between {
31
- justify-content: space-between;
40
+ input {
41
+ opacity: 0;
42
+ position: fixed;
43
+ visibility: none;
44
+ z-index: -1;
32
45
  }
33
46
 
34
- >.choice {
35
- display: flex;
36
-
37
- input {
38
- opacity: 0;
39
- position: fixed;
40
- visibility: none;
41
- z-index: -1;
42
- }
43
-
44
- input:disabled + label {
45
- background-color: $disabled-background;
46
- }
47
+ input:disabled + label {
48
+ background-color: $disabled-background;
49
+ }
47
50
 
48
- > label {
49
- background-color: $default-background;
50
- border: $default-border;
51
- border-radius: $default-input-border-radius;
52
- color: var(--paragraph);
53
- cursor: pointer;
54
- display: block;
55
- height: $default-label-height;
56
- max-width: 100%;
57
- padding: $default-label-padding;
58
- position: relative;
59
- transition: $default-transition;
60
- white-space: nowrap;
51
+ > label {
52
+ background-color: $default-background;
53
+ border: $default-border;
54
+ border-radius: $default-input-border-radius;
55
+ color: var(--paragraph);
56
+ cursor: pointer;
57
+ display: block;
58
+ height: $default-label-height;
59
+ max-width: 100%;
60
+ padding: $default-label-padding;
61
+ position: relative;
62
+ transition: $default-transition;
63
+ white-space: nowrap;
61
64
 
62
- &:not(.disabled) {
63
- &:hover {
64
- border: $hover-border;
65
- }
65
+ &:not(.disabled) {
66
+ &:hover {
67
+ border: $hover-border;
66
68
  }
67
69
  }
70
+ }
68
71
 
69
- input:checked + label {
70
- background: var(--x);
71
- color: var(--on-x);
72
- }
72
+ input:checked + label {
73
+ background: var(--x);
74
+ color: var(--on-x);
73
75
  }
74
76
  }
75
77
  }
76
78
  }
79
+
@@ -19,17 +19,11 @@ var _link = require("@lexical/link");
19
19
  var _list = require("@lexical/list");
20
20
  var _propTypes = _interopRequireDefault(require("prop-types"));
21
21
  var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
22
- require("./styles.scss");
23
22
  var _common = require("../../common");
24
23
  var _common2 = require("./common");
25
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26
25
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
27
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
28
- /* @pareto-engineering/generator-front 1.0.12 */
29
- /* eslint-disable import/no-extraneous-dependencies -- required here */
30
-
31
- // Local Definitions
32
-
26
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /* @pareto-engineering/generator-front 1.0.12 */ /* eslint-disable import/no-extraneous-dependencies -- required here */ // Local Definitions
33
27
  const baseClassName = _exports.default.base;
34
28
  const componentClassName = 'editor-input';
35
29
 
@@ -51,13 +45,12 @@ const EditorInput = _ref => {
51
45
  labelColor,
52
46
  description,
53
47
  disabled,
54
- labelSpan,
55
- desktopLabelSpan,
56
- inputSpan,
57
- desktopInputSpan,
58
48
  showDebugger
59
49
  // ...otherProps
60
50
  } = _ref;
51
+ (0, _react.useInsertionEffect)(() => {
52
+ Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
53
+ }, []);
61
54
  const formik = (0, _formik.useFormikContext)();
62
55
  const setInitialValue = () => {
63
56
  const value = formik.values[name];
@@ -115,24 +108,19 @@ const EditorInput = _ref => {
115
108
  };
116
109
  return /*#__PURE__*/React.createElement(_LexicalComposer.LexicalComposer, {
117
110
  initialConfig: initialConfig
118
- }, /*#__PURE__*/React.createElement(_common.FormLabel, {
119
- name: name,
120
- color: labelColor,
121
- optional: optional,
122
- columnSpan: labelSpan,
123
- desktopColumnSpan: desktopLabelSpan
124
- // {...otherProps}
125
- }, label), /*#__PURE__*/React.createElement(_common.InputWrapper, {
111
+ }, /*#__PURE__*/React.createElement("div", {
126
112
  id: id,
127
113
  className: [baseClassName, componentClassName, userClassName, `y-${color}`, disabled && 'disabled'].filter(e => e).join(' '),
128
114
  style: {
129
115
  ...style,
130
116
  '--resize': resize,
131
117
  '--rows': `${rows}em`
132
- },
133
- columnSpan: inputSpan,
134
- desktopColumnSpan: desktopInputSpan
135
- }, !disabled && /*#__PURE__*/React.createElement(_common2.Toolbar, null), /*#__PURE__*/React.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
118
+ }
119
+ }, /*#__PURE__*/React.createElement(_common.FormLabel, {
120
+ name: name,
121
+ color: labelColor,
122
+ optional: optional
123
+ }, label), !disabled && /*#__PURE__*/React.createElement(_common2.Toolbar, null), /*#__PURE__*/React.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
136
124
  contentEditable: /*#__PURE__*/React.createElement(_LexicalContentEditable.ContentEditable, {
137
125
  id: name,
138
126
  className: "content-editable"
@@ -195,22 +183,6 @@ EditorInput.propTypes = {
195
183
  * Whether the input is optional or not
196
184
  */
197
185
  optional: _propTypes.default.bool,
198
- /**
199
- * The number of columns the label should span
200
- */
201
- labelSpan: _propTypes.default.number,
202
- /**
203
- * The number of columns the input should span
204
- */
205
- inputSpan: _propTypes.default.number,
206
- /**
207
- * The number of columns the label should span on desktop
208
- */
209
- desktopLabelSpan: _propTypes.default.number,
210
- /**
211
- * The number of columns the input should span on desktop
212
- */
213
- desktopInputSpan: _propTypes.default.number,
214
186
  /**
215
187
  * The resize property of the text area
216
188
  */