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

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

@@ -14,36 +14,39 @@ $default-background: var(--background-inputs);
 $disabled-background: var(--background-inputs-30);
 
 .#{bem.$base}.text-area-input {
-  &.#{bem.$base}.input-wrapper {
-    display: flex;
-    flex-direction: column;
-
-    > .textarea {
-      background: $default-background;
-      border: $default-border;
-      border-radius: $default-input-border-radius;
-      color: var(--y);
-      outline: none;
-      padding: $default-padding;
-      width: 100%;
-
-      &::placeholder {
-        color: var(--metadata);
-      }
+  display: flex;
+  flex-direction: column;
 
-      &:disabled {
-        background-color: $disabled-background;
-      }
+  > .#{bem.$base}.form-label {
+    margin-bottom: var(--gap);
+  }
+
+
+  > .textarea {
+    background: $default-background;
+    border: $default-border;
+    border-radius: $default-input-border-radius;
+    color: var(--y);
+    outline: none;
+    padding: $default-padding;
+    width: 100%;
 
-      &:not(:disabled) {
-        &:hover,
-        &:active {
-          border: $hover-border;
-        }
+    &::placeholder {
+      color: var(--metadata);
+    }
+
+    &:disabled {
+      background-color: $disabled-background;
+    }
+
+    &:not(:disabled) {
+      &:hover,
+      &:active {
+        border: $hover-border;
+      }
 
-        &:focus {
-          border: $focus-border;
-        }
+      &:focus {
+        border: $focus-border;
       }
     }
   }

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

@@ -3,19 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  TextInput: true,
-  SelectInput: true,
-  ChoicesInput: true,
-  TextareaInput: true,
-  RatingsInput: true,
-  QueryCombobox: true,
-  QuerySelect: true,
-  Checkbox: true,
-  QueryChoices: true,
-  LinkInput: true,
-  EditorInput: true
-};
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function () {
@@ -92,16 +79,4 @@ var _QuerySelect = require("./QuerySelect");
 var _Checkbox = require("./Checkbox");
 var _QueryChoices = require("./QueryChoices");
 var _LinkInput = require("./LinkInput");
-var _EditorInput = require("./EditorInput");
-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];
-    }
-  });
-});
+var _EditorInput = require("./EditorInput");

package/dist/es/f/FormInput/FormInput.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import * as React from 'react';
 import { memo } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput as TextInputV1, TextareaInput as TextareaInputV1, ChoicesInput as ChoicesInputV1, SelectInput as SelectInputV1, QueryCombobox as QueryComboboxV1, QuerySelect as QuerySelectV1, RatingsInput as RatingsInputV1, Checkbox as CheckboxV1, QueryChoices as QueryChoicesV1, LinkInput as LinkInputV1, EditorInput as EditorInputV1, TextInputV2, TextareaInputV2, ChoicesInputV2, SelectInputV2, QueryComboboxV2, QuerySelectV2, RatingsInputV2, CheckboxV2, QueryChoicesV2, LinkInputV2, EditorInputV2 } from "../fields";
+import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput, EditorInput } from "../fields";
 import "./styles.scss";
 
 // Local Definitions
@@ -20,34 +20,9 @@ const FormInput = ({
   type,
   extraTypes,
   disabled,
-  isVersionTwo,
   ...otherProps
 }) => {
   const newClassName = [className, componentClassName].filter(Boolean).join(' ');
-  let TextInput = TextInputV1;
-  let TextareaInput = TextareaInputV1;
-  let ChoicesInput = ChoicesInputV1;
-  let SelectInput = SelectInputV1;
-  let QueryCombobox = QueryComboboxV1;
-  let QuerySelect = QuerySelectV1;
-  let RatingsInput = RatingsInputV1;
-  let Checkbox = CheckboxV1;
-  let QueryChoices = QueryChoicesV1;
-  let LinkInput = LinkInputV1;
-  let EditorInput = EditorInputV1;
-  if (isVersionTwo) {
-    TextInput = TextInputV2;
-    TextareaInput = TextareaInputV2;
-    ChoicesInput = ChoicesInputV2;
-    SelectInput = SelectInputV2;
-    QueryCombobox = QueryComboboxV2;
-    QuerySelect = QuerySelectV2;
-    RatingsInput = RatingsInputV2;
-    Checkbox = CheckboxV2;
-    QueryChoices = QueryChoicesV2;
-    LinkInput = LinkInputV2;
-    EditorInput = EditorInputV2;
-  }
   if (type === 'textarea') {
     return /*#__PURE__*/React.createElement(TextareaInput, _extends({
       className: newClassName,
@@ -138,14 +113,9 @@ FormInput.propTypes = {
   /**
    * Whether the Form input input should be disabled
    */
-  disabled: PropTypes.bool,
-  /**
-   * Whethe the Form input is version 2
-   */
-  isVersionTwo: PropTypes.bool
+  disabled: PropTypes.bool
 };
 FormInput.defaultProps = {
-  disabled: false,
-  isVersionTwo: false
+  disabled: false
 };
 export default /*#__PURE__*/memo(FormInput);

package/dist/es/f/common/Description/Description.js

@@ -1,9 +1,9 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
+import { useInsertionEffect } from 'react';
 import { useField } from 'formik';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
-import "./styles.scss";
 
 // Local Definitions
 
@@ -22,6 +22,9 @@ const Description = ({
   color
   // ...otherProps
 }) => {
+  useInsertionEffect(() => {
+    import("./styles.scss");
+  }, []);
   const [, meta] = useField(name);
   const hasError = meta.touched && meta.error;
   if (hasError || description) {

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

@@ -1,8 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
+import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
-import "./styles.scss";
 
 // Local Definitions
 
@@ -20,21 +20,20 @@ const Label = ({
   name,
   color,
   optional,
-  as: Wrapper,
-  columnSpan,
-  desktopColumnSpan
+  as: Wrapper
   // ...otherProps
-}) => /*#__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}
-}, children, optional && ' (Optional)');
+}) => {
+  useInsertionEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    htmlFor: Wrapper === 'label' ? name : undefined,
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
+    style: style
+    // {...otherProps}
+  }, children, optional && ' (Optional)');
+};
 Label.propTypes = {
   /**
    * The HTML id for this element
@@ -67,15 +66,7 @@ Label.propTypes = {
   /**
    * Whether the input should have an optional tag
    */
-  optional: PropTypes.bool,
-  /**
-  * How many columns the input should span
-  */
-  columnSpan: PropTypes.number,
-  /**
-   * How many columns the input should span on desktop
-   */
-  desktopColumnSpan: PropTypes.number
+  optional: PropTypes.bool
 };
 Label.defaultProps = {
   as: 'label',

package/dist/es/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/es/f/common/index.js

@@ -1,6 +1,4 @@
 export { Label as FormLabel } from "./Label";
 export { Description as FormDescription } from "./Description";
 export { Debugger as FormDebugger } from "./Debugger";
-export { InputWrapper } from "./InputWrapper";
-export * from "./utils";
-export * from "./V2";
+export * from "./utils";

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

@@ -1,11 +1,11 @@
 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 */
 import * as React from 'react';
+import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useField } from 'formik';
-import { FormLabel, FormDescription, InputWrapper } from "../../common";
-import "./styles.scss";
+import { FormLabel, FormDescription } from "../../common";
 
 // Local Definitions
 
@@ -24,31 +24,26 @@ const Checkbox = ({
   description,
   disabled,
   optional,
-  labelColor,
-  labelSpan,
-  desktopLabelSpan,
-  inputSpan,
-  desktopInputSpan
+  labelColor
   // ...otherProps
 }) => {
+  useInsertionEffect(() => {
+    import("./styles.scss");
+  }, []);
   const [field] = useField({
     name,
     type: 'checkbox'
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(FormLabel, {
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, label && /*#__PURE__*/React.createElement(FormLabel, {
     name: name,
     color: labelColor,
-    optional: optional,
-    columnSpan: labelSpan,
-    desktopColumnSpan: desktopLabelSpan
+    optional: optional
     // {...otherProps}
-  }, label), /*#__PURE__*/React.createElement(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",
@@ -57,7 +52,7 @@ const Checkbox = ({
     className: "s-1",
     description: description,
     name: name
-  })));
+  }));
 };
 Checkbox.propTypes = {
   /**

package/dist/es/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/es/f/fields/ChoicesInput/ChoicesInput.js

@@ -1,15 +1,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); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { memo } from 'react';
+import { useInsertionEffect, memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
 // Local Definitions
 
 import { Choice } from "./common";
-import { FormDescription, FormLabel, InputWrapper } from "../../common";
-import "./styles.scss";
+import { FormDescription, FormLabel } from "../../common";
 const baseClassName = styleNames.base;
 const componentClassName = 'choices-input';
 
@@ -31,39 +30,36 @@ const ChoicesInput = ({
   disabled,
   description,
   spaceBetween,
-  labelSpan,
-  desktopLabelSpan,
-  inputSpan,
-  desktopInputSpan,
   ...otherProps
-}) => /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(FormLabel, {
-  name: name,
-  color: labelColor,
-  optional: optional,
-  columnSpan: labelSpan,
-  desktopColumnSpan: desktopLabelSpan
-  // {...otherProps}
-}, label), /*#__PURE__*/React.createElement(InputWrapper, {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-  style: style,
-  columnSpan: inputSpan,
-  desktopColumnSpan: desktopInputSpan
-}, /*#__PURE__*/React.createElement("div", {
-  className: ['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')
-}, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
-  className: `x-${color}`,
-  key: choice.value,
-  name: name,
-  id: `${name}-${choice.value}`,
-  multiple: multiple,
-  validate: validate,
-  disabled: disabled
-}, otherProps, choice)))), /*#__PURE__*/React.createElement(FormDescription, {
-  className: "s-1",
-  description: description,
-  name: name
-})));
+}) => {
+  useInsertionEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, label && /*#__PURE__*/React.createElement(FormLabel, {
+    name: name,
+    color: labelColor,
+    optional: optional
+    // {...otherProps}
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: ['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')
+  }, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
+    className: `x-${color}`,
+    key: choice.value,
+    name: name,
+    id: `${name}-${choice.value}`,
+    multiple: multiple,
+    validate: validate,
+    disabled: disabled
+  }, otherProps, choice)))), /*#__PURE__*/React.createElement(FormDescription, {
+    className: "s-1",
+    description: description,
+    name: name
+  }));
+};
 ChoicesInput.propTypes = {
   /**
    * The HTML id for this element
@@ -100,10 +96,6 @@ ChoicesInput.propTypes = {
    * how many columns should be displayed on the mobile grid
    */
   gridColumnsMobile: PropTypes.number,
-  /**
-   * how many columns should be displayed on the desktop grid
-   */
-  gridColumnsDesktop: PropTypes.number,
   /**
    * The choice color
    */

package/dist/es/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/es/f/fields/EditorInput/EditorInput.js

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 /* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react';
-import { memo } from 'react';
+import { useInsertionEffect, memo } from 'react';
 import { useFormikContext } from 'formik';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
@@ -15,11 +15,10 @@ import { AutoLinkNode, LinkNode } from '@lexical/link';
 import { ListItemNode, ListNode } from '@lexical/list';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
-import "./styles.scss";
 
 // Local Definitions
 
-import { FormLabel, FormDescription, InputWrapper } from "../../common";
+import { FormLabel, FormDescription } from "../../common";
 import { Toolbar, TreeViewPlugin } from "./common";
 const baseClassName = styleNames.base;
 const componentClassName = 'editor-input';
@@ -41,13 +40,12 @@ const EditorInput = ({
   labelColor,
   description,
   disabled,
-  labelSpan,
-  desktopLabelSpan,
-  inputSpan,
-  desktopInputSpan,
   showDebugger
   // ...otherProps
 }) => {
+  useInsertionEffect(() => {
+    import("./styles.scss");
+  }, []);
   const formik = useFormikContext();
   const setInitialValue = () => {
     const value = formik.values[name];
@@ -105,24 +103,19 @@ const EditorInput = ({
   };
   return /*#__PURE__*/React.createElement(LexicalComposer, {
     initialConfig: initialConfig
-  }, /*#__PURE__*/React.createElement(FormLabel, {
-    name: name,
-    color: labelColor,
-    optional: optional,
-    columnSpan: labelSpan,
-    desktopColumnSpan: desktopLabelSpan
-    // {...otherProps}
-  }, label), /*#__PURE__*/React.createElement(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(Toolbar, null), /*#__PURE__*/React.createElement(RichTextPlugin, {
+    }
+  }, /*#__PURE__*/React.createElement(FormLabel, {
+    name: name,
+    color: labelColor,
+    optional: optional
+  }, label), !disabled && /*#__PURE__*/React.createElement(Toolbar, null), /*#__PURE__*/React.createElement(RichTextPlugin, {
     contentEditable: /*#__PURE__*/React.createElement(ContentEditable, {
       id: name,
       className: "content-editable"
@@ -185,22 +178,6 @@ EditorInput.propTypes = {
   * Whether the input is optional or not
   */
   optional: PropTypes.bool,
-  /**
-  * The number of columns the label should span
-  */
-  labelSpan: PropTypes.number,
-  /**
-   * The number of columns the input should span
-   */
-  inputSpan: PropTypes.number,
-  /**
-   * The number of columns the label should span on desktop
-   */
-  desktopLabelSpan: PropTypes.number,
-  /**
-   * The number of columns the input should span on desktop
-   */
-  desktopInputSpan: PropTypes.number,
   /**
    * The resize property of the text area
    */