@pareto-engineering/design-system 4.0.0-alpha.63 → 4.0.0-alpha.65

package/dist/cjs/f/FormInput/FormInput.js

@@ -26,89 +26,64 @@ const FormInput = _ref => {
     type,
     extraTypes,
     disabled,
-    isVersionTwo,
     ...otherProps
   } = _ref;
   const newClassName = [className, componentClassName].filter(Boolean).join(' ');
-  let TextInput = _fields.TextInput;
-  let TextareaInput = _fields.TextareaInput;
-  let ChoicesInput = _fields.ChoicesInput;
-  let SelectInput = _fields.SelectInput;
-  let QueryCombobox = _fields.QueryCombobox;
-  let QuerySelect = _fields.QuerySelect;
-  let RatingsInput = _fields.RatingsInput;
-  let Checkbox = _fields.Checkbox;
-  let QueryChoices = _fields.QueryChoices;
-  let LinkInput = _fields.LinkInput;
-  let EditorInput = _fields.EditorInput;
-  if (isVersionTwo) {
-    TextInput = _fields.TextInputV2;
-    TextareaInput = _fields.TextareaInputV2;
-    ChoicesInput = _fields.ChoicesInputV2;
-    SelectInput = _fields.SelectInputV2;
-    QueryCombobox = _fields.QueryComboboxV2;
-    QuerySelect = _fields.QuerySelectV2;
-    RatingsInput = _fields.RatingsInputV2;
-    Checkbox = _fields.CheckboxV2;
-    QueryChoices = _fields.QueryChoicesV2;
-    LinkInput = _fields.LinkInputV2;
-    EditorInput = _fields.EditorInputV2;
-  }
   if (type === 'textarea') {
-    return /*#__PURE__*/React.createElement(TextareaInput, _extends({
+    return /*#__PURE__*/React.createElement(_fields.TextareaInput, _extends({
       className: newClassName,
       disabled: disabled
     }, otherProps));
   }
   if (type === 'choices') {
-    return /*#__PURE__*/React.createElement(ChoicesInput, _extends({
+    return /*#__PURE__*/React.createElement(_fields.ChoicesInput, _extends({
       className: newClassName,
       disabled: disabled
     }, otherProps));
   }
   if (type === 'select') {
-    return /*#__PURE__*/React.createElement(SelectInput, _extends({
+    return /*#__PURE__*/React.createElement(_fields.SelectInput, _extends({
       className: newClassName,
       disabled: disabled
     }, otherProps));
   }
   if (type === 'query-combobox') {
-    return /*#__PURE__*/React.createElement(QueryCombobox, _extends({
+    return /*#__PURE__*/React.createElement(_fields.QueryCombobox, _extends({
       className: newClassName,
       disabled: disabled
     }, otherProps));
   }
   if (type === 'query-select') {
-    return /*#__PURE__*/React.createElement(QuerySelect, _extends({
+    return /*#__PURE__*/React.createElement(_fields.QuerySelect, _extends({
       className: newClassName,
       disabled: disabled
     }, otherProps));
   }
   if (type === 'query-choices') {
-    return /*#__PURE__*/React.createElement(QueryChoices, _extends({
+    return /*#__PURE__*/React.createElement(_fields.QueryChoices, _extends({
       className: newClassName,
       disabled: disabled
     }, otherProps));
   }
   if (type === 'rating') {
-    return /*#__PURE__*/React.createElement(RatingsInput, _extends({
+    return /*#__PURE__*/React.createElement(_fields.RatingsInput, _extends({
       className: newClassName
     }, otherProps));
   }
   if (type === 'checkbox') {
-    return /*#__PURE__*/React.createElement(Checkbox, _extends({
+    return /*#__PURE__*/React.createElement(_fields.Checkbox, _extends({
       className: newClassName,
       disabled: disabled
     }, otherProps));
   }
   if (type === 'link') {
-    return /*#__PURE__*/React.createElement(LinkInput, _extends({
+    return /*#__PURE__*/React.createElement(_fields.LinkInput, _extends({
       className: newClassName,
       disabled: disabled
     }, otherProps));
   }
   if (type === 'editor') {
-    return /*#__PURE__*/React.createElement(EditorInput, _extends({
+    return /*#__PURE__*/React.createElement(_fields.EditorInput, _extends({
       className: newClassName,
       disabled: disabled
     }, otherProps));
@@ -120,7 +95,7 @@ const FormInput = _ref => {
       disabled: disabled
     }, otherProps));
   }
-  return /*#__PURE__*/React.createElement(TextInput, _extends({
+  return /*#__PURE__*/React.createElement(_fields.TextInput, _extends({
     className: newClassName,
     disabled: disabled,
     type: type
@@ -144,14 +119,9 @@ FormInput.propTypes = {
   /**
    * Whether the Form input input should be disabled
    */
-  disabled: _propTypes.default.bool,
-  /**
-   * Whethe the Form input is version 2
-   */
-  isVersionTwo: _propTypes.default.bool
+  disabled: _propTypes.default.bool
 };
 FormInput.defaultProps = {
-  disabled: false,
-  isVersionTwo: false
+  disabled: false
 };
 var _default = exports.default = /*#__PURE__*/(0, _react.memo)(FormInput);

package/dist/cjs/f/common/Label/Label.js

@@ -30,21 +30,14 @@ const Label = _ref => {
     name,
     color,
     optional,
-    as: Wrapper,
-    columnSpan,
-    desktopColumnSpan
+    as: Wrapper
     // ...otherProps
   } = _ref;
   return /*#__PURE__*/React.createElement(Wrapper, {
     htmlFor: Wrapper === 'label' ? name : undefined,
     id: id,
     className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
-    style: {
-      ...style,
-      '--column-span': columnSpan || 'var(--columns)',
-      '--column-span-md': desktopColumnSpan || 'var(--columns)'
-    }
-    // {...otherProps}
+    style: style
   }, children, optional && ' (Optional)');
 };
 Label.propTypes = {
@@ -79,15 +72,7 @@ Label.propTypes = {
   /**
    * Whether the input should have an optional tag
    */
-  optional: _propTypes.default.bool,
-  /**
-  * How many columns the input should span
-  */
-  columnSpan: _propTypes.default.number,
-  /**
-   * How many columns the input should span on desktop
-   */
-  desktopColumnSpan: _propTypes.default.number
+  optional: _propTypes.default.bool
 };
 Label.defaultProps = {
   as: 'label',

package/dist/cjs/f/common/Label/styles.scss

@@ -6,9 +6,4 @@
 
 .#{bem.$base}.form-label {
   color: var(--x);
-  grid-column: span var(--column-span);
-
-  @include mixins.media($from: $sm-md) {
-    grid-column: span var(--column-span-md);
-  }
 }

package/dist/cjs/f/common/index.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   FormLabel: true,
   FormDescription: true,
-  FormDebugger: true,
-  InputWrapper: true
+  FormDebugger: true
 };
 Object.defineProperty(exports, "FormDebugger", {
   enumerable: true,
@@ -27,16 +26,9 @@ Object.defineProperty(exports, "FormLabel", {
     return _Label.Label;
   }
 });
-Object.defineProperty(exports, "InputWrapper", {
-  enumerable: true,
-  get: function () {
-    return _InputWrapper.InputWrapper;
-  }
-});
 var _Label = require("./Label");
 var _Description = require("./Description");
 var _Debugger = require("./Debugger");
-var _InputWrapper = require("./InputWrapper");
 var _utils = require("./utils");
 Object.keys(_utils).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -48,16 +40,4 @@ Object.keys(_utils).forEach(function (key) {
       return _utils[key];
     }
   });
-});
-var _V = require("./V2");
-Object.keys(_V).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _V[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _V[key];
-    }
-  });
 });

package/dist/cjs/f/fields/Checkbox/Checkbox.js

@@ -13,9 +13,7 @@ require("./styles.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 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; }
-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
-
+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
 const baseClassName = _exports.default.base;
 const componentClassName = 'checkbox';
 
@@ -32,31 +30,23 @@ const Checkbox = _ref => {
     description,
     disabled,
     optional,
-    labelColor,
-    labelSpan,
-    desktopLabelSpan,
-    inputSpan,
-    desktopInputSpan
+    labelColor
     // ...otherProps
   } = _ref;
   const [field] = (0, _formik.useField)({
     name,
     type: 'checkbox'
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(_common.FormLabel, {
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, label && /*#__PURE__*/React.createElement(_common.FormLabel, {
     name: name,
     color: labelColor,
-    optional: optional,
-    columnSpan: labelSpan,
-    desktopColumnSpan: desktopLabelSpan
+    optional: optional
     // {...otherProps}
-  }, label), /*#__PURE__*/React.createElement(_common.InputWrapper, {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style,
-    columnSpan: inputSpan,
-    desktopColumnSpan: desktopInputSpan
-  }, /*#__PURE__*/React.createElement("input", _extends({
+  }, label), /*#__PURE__*/React.createElement("input", _extends({
     id: name,
     className: "input",
     type: "checkbox",
@@ -65,7 +55,7 @@ const Checkbox = _ref => {
     className: "s-1",
     description: description,
     name: name
-  })));
+  }));
 };
 Checkbox.propTypes = {
   /**

package/dist/cjs/f/fields/Checkbox/styles.scss

@@ -5,10 +5,12 @@
 @use "@pareto-engineering/styles/src/globals" as *;
 
 .#{bem.$base}.checkbox {
-  &.#{bem.$base}.input-wrapper {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  > .#{bem.$base}.form-label {
+    margin-bottom: var(--gap);
   }
 }

package/dist/cjs/f/fields/ChoicesInput/ChoicesInput.js

@@ -37,26 +37,17 @@ const ChoicesInput = _ref => {
     disabled,
     description,
     spaceBetween,
-    labelSpan,
-    desktopLabelSpan,
-    inputSpan,
-    desktopInputSpan,
     ...otherProps
   } = _ref;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(_common2.FormLabel, {
-    name: name,
-    color: labelColor,
-    optional: optional,
-    columnSpan: labelSpan,
-    desktopColumnSpan: desktopLabelSpan
-    // {...otherProps}
-  }, label), /*#__PURE__*/React.createElement(_common2.InputWrapper, {
+  return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style,
-    columnSpan: inputSpan,
-    desktopColumnSpan: desktopInputSpan
-  }, /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, label && /*#__PURE__*/React.createElement(_common2.FormLabel, {
+    name: name,
+    color: labelColor,
+    optional: optional
+  }, label), /*#__PURE__*/React.createElement("div", {
     className: ['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')
   }, options.map(choice => /*#__PURE__*/React.createElement(_common.Choice, _extends({
     className: `x-${color}`,
@@ -70,7 +61,7 @@ const ChoicesInput = _ref => {
     className: "s-1",
     description: description,
     name: name
-  })));
+  }));
 };
 ChoicesInput.propTypes = {
   /**
@@ -108,10 +99,6 @@ ChoicesInput.propTypes = {
    * how many columns should be displayed on the mobile grid
    */
   gridColumnsMobile: _propTypes.default.number,
-  /**
-   * how many columns should be displayed on the desktop grid
-   */
-  gridColumnsDesktop: _propTypes.default.number,
   /**
    * The choice color
    */

package/dist/cjs/f/fields/ChoicesInput/styles.scss

@@ -18,59 +18,62 @@ $default-background: var(--background-inputs);
 $disabled-background: var(--background-inputs-30);
 
 .#{bem.$base}.choices-input {
-  &.#{bem.$base}.input-wrapper {
+  display: flex;
+  flex-direction: column;
+
+  > .#{bem.$base}.form-label {
+    margin-bottom: var(--gap);
+  }
+
+  > .choices {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
+    gap: $default-flex-separator;
 
-    > .choices {
+    &.space-between {
+      justify-content: space-between;
+    }
+
+    >.choice {
       display: flex;
-      flex-wrap: wrap;
-      gap: $default-flex-separator;
 
-      &.space-between {
-        justify-content: space-between;
+      input {
+        opacity: 0;
+        position: fixed;
+        visibility: none;
+        z-index: -1;
       }
 
-      >.choice {
-        display: flex;
-
-        input {
-          opacity: 0;
-          position: fixed;
-          visibility: none;
-          z-index: -1;
-        }
-
-        input:disabled + label {
-          background-color: $disabled-background;
-        }
+      input:disabled + label {
+        background-color: $disabled-background;
+      }
 
-        > label {
-          background-color: $default-background;
-          border: $default-border;
-          border-radius: $default-input-border-radius;
-          color: var(--paragraph);
-          cursor: pointer;
-          display: block;
-          height: $default-label-height;
-          max-width: 100%;
-          padding: $default-label-padding;
-          position: relative;
-          transition: $default-transition;
-          white-space: nowrap;
+      > label {
+        background-color: $default-background;
+        border: $default-border;
+        border-radius: $default-input-border-radius;
+        color: var(--paragraph);
+        cursor: pointer;
+        display: block;
+        height: $default-label-height;
+        max-width: 100%;
+        padding: $default-label-padding;
+        position: relative;
+        transition: $default-transition;
+        white-space: nowrap;
 
-          &:not(.disabled) {
-            &:hover {
-              border: $hover-border;
-            }
+        &:not(.disabled) {
+          &:hover {
+            border: $hover-border;
           }
         }
+      }
 
-        input:checked + label {
-          background: var(--x);
-          color: var(--on-x);
-        }
+      input:checked + label {
+        background: var(--x);
+        color: var(--on-x);
       }
     }
   }
 }
+

package/dist/cjs/f/fields/EditorInput/EditorInput.js

@@ -19,9 +19,9 @@ var _link = require("@lexical/link");
 var _list = require("@lexical/list");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-require("./styles.scss");
 var _common = require("../../common");
 var _common2 = require("./common");
+require("./styles.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 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; }
@@ -51,10 +51,6 @@ const EditorInput = _ref => {
     labelColor,
     description,
     disabled,
-    labelSpan,
-    desktopLabelSpan,
-    inputSpan,
-    desktopInputSpan,
     showDebugger
     // ...otherProps
   } = _ref;
@@ -115,24 +111,19 @@ const EditorInput = _ref => {
   };
   return /*#__PURE__*/React.createElement(_LexicalComposer.LexicalComposer, {
     initialConfig: initialConfig
-  }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    name: name,
-    color: labelColor,
-    optional: optional,
-    columnSpan: labelSpan,
-    desktopColumnSpan: desktopLabelSpan
-    // {...otherProps}
-  }, label), /*#__PURE__*/React.createElement(_common.InputWrapper, {
+  }, /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, `y-${color}`, disabled && 'disabled'].filter(e => e).join(' '),
     style: {
       ...style,
       '--resize': resize,
       '--rows': `${rows}em`
-    },
-    columnSpan: inputSpan,
-    desktopColumnSpan: desktopInputSpan
-  }, !disabled && /*#__PURE__*/React.createElement(_common2.Toolbar, null), /*#__PURE__*/React.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
+    }
+  }, /*#__PURE__*/React.createElement(_common.FormLabel, {
+    name: name,
+    color: labelColor,
+    optional: optional
+  }, label), !disabled && /*#__PURE__*/React.createElement(_common2.Toolbar, null), /*#__PURE__*/React.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
     contentEditable: /*#__PURE__*/React.createElement(_LexicalContentEditable.ContentEditable, {
       id: name,
       className: "content-editable"
@@ -195,22 +186,6 @@ EditorInput.propTypes = {
   * Whether the input is optional or not
   */
   optional: _propTypes.default.bool,
-  /**
-  * The number of columns the label should span
-  */
-  labelSpan: _propTypes.default.number,
-  /**
-   * The number of columns the input should span
-   */
-  inputSpan: _propTypes.default.number,
-  /**
-   * The number of columns the label should span on desktop
-   */
-  desktopLabelSpan: _propTypes.default.number,
-  /**
-   * The number of columns the input should span on desktop
-   */
-  desktopInputSpan: _propTypes.default.number,
   /**
    * The resize property of the text area
    */