@pareto-engineering/design-system 3.0.0-alpha.29 → 4.0.0-alpha.13

package/dist/es/c/Modal/common/ModalHeader/ModalHeader.js

@@ -12,29 +12,26 @@ const componentClassName = 'modal-header';
 /**
  * This is the component description.
  */
-const ModalHeader = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    title,
-    close,
-    color
-    // ...otherProps
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement("p", null, title), /*#__PURE__*/React.createElement(Button, {
-    color: color,
-    onClick: () => close(),
-    isCompact: true,
-    className: "close-button"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "f-icons"
-  }, "Y")));
-};
+const ModalHeader = ({
+  id,
+  className: userClassName,
+  style,
+  title,
+  close,
+  color
+  // ...otherProps
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+}, /*#__PURE__*/React.createElement("p", null, title), /*#__PURE__*/React.createElement(Button, {
+  color: color,
+  onClick: () => close(),
+  isCompact: true,
+  className: "close-button"
+}, /*#__PURE__*/React.createElement("span", {
+  className: "f-icons"
+}, "Y")));
 ModalHeader.propTypes = {
   /**
      * The HTML id for this element

package/dist/es/c/Modal/styles.scss

@@ -1,15 +1,18 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+
 @use "@pareto-engineering/bem";
+@use "sass:math";
 
 $default-background: var(--background1);
-$default-box-shadow: 0 10px 20px rgba(black, 0.2);
-$default-padding: 1em / 2;
+/* stylelint-disable-next-line color-named -- needed for rgba function */
+$default-box-shadow: 0 10px 20px rgba(black, .2);
+$default-padding: math.div(1em, 2);
 $default-margin: 2em;
 $default-max-height: 75vh;
 $default-max-width: 90%;
 $default-min-width: 20em;
 
-.#{bem.$base}.modal{
+.#{bem.$base}.modal {
   background: $default-background;
   box-shadow: $default-box-shadow;
   display: flex;
@@ -23,7 +26,7 @@ $default-min-width: 20em;
   top: 50%;
   transform: translate(-50%, -50%);
   z-index: 100;
-  
+
   .modal-body {
     padding: $default-padding;
   }
@@ -37,10 +40,10 @@ $default-min-width: 20em;
     position: sticky;
     top: 0;
     z-index: 2;
-    
+
     > p {
-      padding: $default-padding;
       margin: 0;
+      padding: $default-padding;
     }
   }
 }

package/dist/es/c/Shortener/Shortener.js

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect, useState } from 'react';
+import { useInsertionEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -12,20 +12,19 @@ const componentClassName = 'shortener';
 /**
  * This is the component description.
  */
-const Shortener = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    children,
-    // ...otherProps
+const Shortener = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  // ...otherProps
 
-    as: Element,
-    limit,
-    separator,
-    countLetters
-  } = _ref;
-  useLayoutEffect(() => {
+  as: Element,
+  limit,
+  separator,
+  countLetters
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [displayFull, setDisplayFull] = useState(false);

package/dist/es/c/SocialMediaShareButton/SocialMediaShareButton.js

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect } from 'react';
+import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -12,17 +12,16 @@ const componentClassName = 'social-media-share-button';
 /**
  * This is the component description.
  */
-const SocialMediaShareButton = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    icon,
-    // children,
-    type,
-    color
-  } = _ref;
-  useLayoutEffect(() => {
+const SocialMediaShareButton = ({
+  id,
+  className: userClassName,
+  style,
+  icon,
+  // children,
+  type,
+  color
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const isServer = typeof window === 'undefined';

package/dist/es/c/SocialMediaShareButton/styles.scss

@@ -7,8 +7,7 @@
 $default-dimensions: 2em;
 $mobile-dimensions: 2.75em;
 
-.#{bem.$base}.social-media-share-button{
-
+.#{bem.$base}.social-media-share-button {
   > button {
     appearance: none;
     background: transparent;
@@ -31,7 +30,8 @@ $mobile-dimensions: 2.75em;
       color: var(--on-x);
     }
 
-    &:focus, &:active {
+    &:focus,
+    &:active {
       background: var(--soft-x);
       color: var(--on-x);
     }

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

@@ -1,7 +1,7 @@
 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, useLayoutEffect } from 'react';
+import { memo, useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices } from "../fields";
 
@@ -14,15 +14,14 @@ const componentClassName = 'form-input';
 /**
  * This is the component description.
  */
-const FormInput = _ref => {
-  let {
-    className,
-    type,
-    extraTypes,
-    disabled,
-    ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const FormInput = ({
+  className,
+  type,
+  extraTypes,
+  disabled,
+  ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const newClassName = [className, componentClassName].filter(Boolean).join(' ');

package/dist/es/f/FormInput/styles.scss

@@ -5,7 +5,7 @@
 $default-margin: 1em;
 
 .#{bem.$base}.form-input {
-    &+& {
-        margin-top: $default-margin;
-    }
-}
+  & + & {
+    margin-top: $default-margin;
+  }
+}

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

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useState, useLayoutEffect, useContext } from 'react';
+import { useState, useInsertionEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from "../../../b";
 import { FormikContext } from 'formik';
@@ -12,15 +12,14 @@ const componentClassName = 'debugger';
 /**
  * This is the component description.
  */
-const Debugger = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    initialIsOpen
-    // ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const Debugger = ({
+  id,
+  className: userClassName,
+  style,
+  initialIsOpen
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [isOpen, setIsOpen] = useState(initialIsOpen);

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

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect } from 'react';
+import { useInsertionEffect } from 'react';
 import { useField } from 'formik';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
@@ -13,17 +13,16 @@ const componentClassName = 'description';
 /**
  * This is the component description.
  */
-const Description = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    description,
-    name,
-    color
-    // ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const Description = ({
+  id,
+  className: userClassName,
+  style,
+  description,
+  name,
+  color
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [field, meta] = useField(name);

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

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect } from 'react';
+import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -12,19 +12,18 @@ const componentClassName = 'form-label';
 /**
  * This is the component description.
  */
-const Label = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    children,
-    name,
-    color,
-    optional,
-    as: Wrapper
-    // ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const Label = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  name,
+  color,
+  optional,
+  as: Wrapper
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement(Wrapper, {

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

@@ -4,5 +4,5 @@
 @use "../../../form.scss";
 
 .#{bem.$base}.form-label {
- color: var(--hard-x);
+  color: var(--hard-x);
 }

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

@@ -1,7 +1,7 @@
 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 { useLayoutEffect } from 'react';
+import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useField } from 'formik';
@@ -15,19 +15,18 @@ const componentClassName = 'checkbox';
 /**
  * This is the component description.
  */
-const Checkbox = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    name,
-    label,
-    description,
-    disabled,
-    optional
-    // ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const Checkbox = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  label,
+  description,
+  disabled,
+  optional
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [field] = useField({

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

@@ -1,14 +1,15 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+
 @use "@pareto-engineering/bem";
 
 $default-margin: 1em;
 
 .#{bem.$base}.checkbox {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-
-    .#{bem.$base}.label {
-        margin-bottom: $default-margin
-    }
-}
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+
+  .#{bem.$base}.label {
+    margin-bottom: $default-margin;
+  }
+}

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

@@ -1,44 +1,43 @@
 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 { useLayoutEffect, 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 { FormLabel } from "../../common";
+import { FormDescription, FormLabel } from "../../common";
 const baseClassName = styleNames.base;
 const componentClassName = 'choices-input';
 
 /**
  * This is the component description.
  */
-const ChoicesInput = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    name,
-    validate,
-    options,
-    multiple,
-    gridColumnsMobile,
-    gridColumnsDesktop,
-    color,
-    colorChecked,
-    label,
-    optional,
-    disabled
-    // ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const ChoicesInput = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  validate,
+  options,
+  multiple,
+  gridColumnsMobile,
+  gridColumnsDesktop,
+  color,
+  label,
+  optional,
+  disabled,
+  description
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, multiple && 'multiple', color && `x-${color}`, colorChecked && `y-${colorChecked}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, multiple && 'multiple', color && `x-${color}`].filter(e => e).join(' '),
     style: {
       '--grid-columns-desktop': gridColumnsDesktop,
       '--grid-columns-mobile': gridColumnsMobile,
@@ -51,13 +50,18 @@ const ChoicesInput = _ref => {
   }, label), /*#__PURE__*/React.createElement("div", {
     className: "choices"
   }, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
+    labelClassName: "with-faded-border",
     key: choice.value,
     name: name,
     id: `${name}-${choice.value}`,
     multiple: multiple,
     validate: validate,
     disabled: disabled
-  }, choice)))));
+  }, choice)))), /*#__PURE__*/React.createElement(FormDescription, {
+    className: "v50 mt-v s-1",
+    description: description,
+    name: name
+  }));
 };
 ChoicesInput.propTypes = {
   /**
@@ -118,13 +122,16 @@ ChoicesInput.propTypes = {
   /**
   * Whether the input is optional or not
   */
-  optional: PropTypes.bool
+  optional: PropTypes.bool,
+  /**
+   * The select input description
+   */
+  description: PropTypes.string
 };
 ChoicesInput.defaultProps = {
   gridColumnsMobile: 2,
   gridColumnsDesktop: 3,
-  color: 'background2',
-  colorChecked: 'main2',
+  color: 'main',
   disabled: false
 };
 export default /*#__PURE__*/memo(ChoicesInput);

package/dist/es/f/fields/ChoicesInput/common/Choice/Choice.js

@@ -12,20 +12,19 @@ const componentClassName = 'choice';
 /**
  * This is the component description.
  */
-const Choice = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    name,
-    label,
-    labelClassName,
-    labelStyle,
-    value,
-    multiple,
-    validate,
-    disabled
-  } = _ref;
+const Choice = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  label,
+  labelClassName,
+  labelStyle,
+  value,
+  multiple,
+  validate,
+  disabled
+}) => {
   const type = multiple ? 'checkbox' : 'radio';
   const [field] = useField({
     name,

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

@@ -1,25 +1,22 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable selector-max-compound-selectors -- exception */
 
 @use "@pareto-engineering/bem";
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
-$default-grid-gap:var(--u, 1em);
-$default-padding:var(--u, 1em);
-$default-transition:all .3s;
+$default-flex-separator:calc(1em / 2) calc(.75em / 2);
+$default-transition:var(--theme-default-transition);
+$default-label-padding: .3em 1em calc(2em - .3em);
+$default-label-height: .5em;
 
 .#{bem.$base}.choices-input {
+  >.choices {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $default-flex-separator;
 
-  .choices {
-    display: grid;
-    gap: $default-grid-gap;
-    grid-template-columns: repeat(var(--grid-columns-mobile), 1fr);
-
-    @include mixins.media($from:$sm-md) {
-      grid-template-columns: repeat(var(--grid-columns-desktop), 1fr);
-    }
-
-    .choice {
+    >.choice {
       display: flex;
 
       input {
@@ -33,35 +30,26 @@ $default-transition:all .3s;
         background-color: var(--hard-x);
       }
 
-      input:not(:disabled) + label {
-        &:hover {
-          border-color: var(--soft-y);
-        }
-      }
-
       label {
-        border: var(--theme-border-style) var(--hard-x);
-        background: var(--soft-x);
-        color: var(--on-x);
-        border-radius: var(--theme-border-radius);
+        background-color: var(--background-inputs);
+        border-radius: var(--theme-default-border-radius);
+        cursor: pointer;
         display: block;
-        height: 100%;
-        padding: $default-padding;
+        height: $default-label-height;
+        max-width: 100%;
+        padding: $default-label-padding;
+        position: relative;
         transition: $default-transition;
-        width: 100%;
-        cursor: pointer;
-      }
-
-      input:checked + label {
-        background: var(--y);
-        color: var(--on-y);
 
         &:hover {
-          border-color: var(--y);
+          box-shadow: var(--theme-default-input-box-shadow);
         }
       }
+
+      input:checked + label {
+        background: var(--x);
+        color: var(--on-x);
+      }
     }
   }
 }
-
-