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

package/dist/es/c/ContentSlides/ContentSlides.js

@@ -38,17 +38,16 @@ const reducer = (state, action) => {
  * Colors :
  * `y` : the background of the content
  */
-const ContentSlides = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    children,
-    steps,
-    simple,
-    isDebug
-    // ...otherProps
-  } = _ref;
+const ContentSlides = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  steps,
+  simple,
+  isDebug
+  // ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
@@ -62,8 +61,7 @@ const ContentSlides = _ref => {
     isFirstStep,
     isLastStep
   } = state;
-  const setNextStepIndex = function () {
-    let step = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+  const setNextStepIndex = (step = 1) => {
     if (!isLastStep) {
       dispatch({
         type: 'SET_STEP_INDEX',
@@ -71,8 +69,7 @@ const ContentSlides = _ref => {
       });
     }
   };
-  const setPrevStepIndex = function () {
-    let step = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+  const setPrevStepIndex = (step = 1) => {
     if (!isFirstStep) {
       dispatch({
         type: 'SET_STEP_INDEX',

package/dist/es/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js

@@ -15,18 +15,17 @@ const componentClassName = 'horizontal-menu';
 /**
  * This is the component description.
  */
-const HorizontalMenu = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    logoColor,
-    hideBackIcon,
-    stepsBackwards,
-    customPrevStep,
-    color
-    // ...otherProps
-  } = _ref;
+const HorizontalMenu = ({
+  id,
+  className: userClassName,
+  style,
+  logoColor,
+  hideBackIcon,
+  stepsBackwards,
+  customPrevStep,
+  color
+  // ...otherProps
+}) => {
   const {
     setPrevStepIndex,
     // setNextStepIndex,

package/dist/es/c/ContentSlides/common/Navigator/Navigator.js

@@ -11,21 +11,20 @@ const componentClassName = 'navigator';
 /**
  * This is the component description.
  */
-const Navigator = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    canMoveForward,
-    previousColor,
-    nextColor,
-    stepsForward,
-    stepsBackwards,
-    customPrevStep,
-    customNextStep,
-    isLoading
-    // ...otherProps
-  } = _ref;
+const Navigator = ({
+  id,
+  className: userClassName,
+  style,
+  canMoveForward,
+  previousColor,
+  nextColor,
+  stepsForward,
+  stepsBackwards,
+  customPrevStep,
+  customNextStep,
+  isLoading
+  // ...otherProps
+}) => {
   const {
     setPrevStepIndex,
     setNextStepIndex,

package/dist/es/c/ContentSlides/common/Sidebar/Sidebar.js

@@ -15,15 +15,14 @@ const componentClassName = 'sidebar';
 /**
  * This is the component description.
  */
-const Sidebar = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    header,
-    footer
-    // ...otherProps
-  } = _ref;
+const Sidebar = ({
+  id,
+  className: userClassName,
+  style,
+  header,
+  footer
+  // ...otherProps
+}) => {
   const {
     steps,
     // setPrevStepIndex,

package/dist/es/c/ContentSlides/common/Slide/Slide.js

@@ -13,15 +13,14 @@ const componentClassName = 'slide';
 /**
  * This is the component description.
  */
-const Slide = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    children,
-    index
-    // ...otherProps
-  } = _ref;
+const Slide = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  index
+  // ...otherProps
+}) => {
   const {
     currentStepIndex
   } = useContentSlides();

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

@@ -1,4 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable selector-max-compound-selectors -- Required here  */
+/* stylelint-disable max-nesting-depth -- Required here  */
 
 @use "@pareto-engineering/bem";
 @use "@pareto-engineering/styles/src/mixins";
@@ -45,7 +47,6 @@ $mobile-content-margin:6em;
       border-top: $default-border;
     }
 
-    /* stylelint-disable selector-max-compound-selectors -- Required here  */
     .#{bem.$element-content} {
       .icon-list {
         .#{bem.$element-item} {
@@ -55,7 +56,6 @@ $mobile-content-margin:6em;
         }
       }
     }
-    /* stylelint-enable selector-max-compound-selectors */
   }
 
 
@@ -167,8 +167,6 @@ $mobile-content-margin:6em;
           width: 100%;
         } */
 
-        /* stylelint-disable selector-max-compound-selectors -- Required here  */
-        /* stylelint-disable max-nesting-depth -- Required here  */
         /* stylelint-disable scss/media-feature-value-dollar-variable -- For orientation mq */
         .wrapper {
           display: flex;

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

@@ -13,17 +13,16 @@ const componentClassName = 'modal';
 /**
  * This is the component description.
  */
-const Modal = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    children,
-    title,
-    color,
-    close
-    // ...otherProps
-  } = _ref;
+const Modal = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  title,
+  color,
+  close
+  // ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

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,17 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+
 @use "@pareto-engineering/bem";
 
 $default-background: var(--background1);
-$default-box-shadow: 0 10px 20px rgba(black, 0.2);
+/* stylelint-disable-next-line color-named -- needed for rgba function */
+$default-box-shadow: 0 10px 20px rgba(black, .2);
 $default-padding: 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 +25,7 @@ $default-min-width: 20em;
   top: 50%;
   transform: translate(-50%, -50%);
   z-index: 100;
-  
+
   .modal-body {
     padding: $default-padding;
   }
@@ -37,10 +39,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

@@ -12,19 +12,18 @@ 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;
+  as: Element,
+  limit,
+  separator,
+  countLetters
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

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

@@ -12,16 +12,15 @@ const componentClassName = 'social-media-share-button';
 /**
  * This is the component description.
  */
-const SocialMediaShareButton = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    icon,
-    // children,
-    type,
-    color
-  } = _ref;
+const SocialMediaShareButton = ({
+  id,
+  className: userClassName,
+  style,
+  icon,
+  // children,
+  type,
+  color
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

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

@@ -14,14 +14,13 @@ const componentClassName = 'form-input';
 /**
  * This is the component description.
  */
-const FormInput = _ref => {
-  let {
-    className,
-    type,
-    extraTypes,
-    disabled,
-    ...otherProps
-  } = _ref;
+const FormInput = ({
+  className,
+  type,
+  extraTypes,
+  disabled,
+  ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

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

@@ -12,14 +12,13 @@ const componentClassName = 'debugger';
 /**
  * This is the component description.
  */
-const Debugger = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    initialIsOpen
-    // ...otherProps
-  } = _ref;
+const Debugger = ({
+  id,
+  className: userClassName,
+  style,
+  initialIsOpen
+  // ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

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

@@ -13,16 +13,15 @@ const componentClassName = 'description';
 /**
  * This is the component description.
  */
-const Description = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    description,
-    name,
-    color
-    // ...otherProps
-  } = _ref;
+const Description = ({
+  id,
+  className: userClassName,
+  style,
+  description,
+  name,
+  color
+  // ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

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

@@ -12,18 +12,17 @@ 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;
+const Label = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  name,
+  color,
+  optional,
+  as: Wrapper
+  // ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

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

@@ -15,18 +15,17 @@ const componentClassName = 'checkbox';
 /**
  * This is the component description.
  */
-const Checkbox = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    name,
-    label,
-    description,
-    disabled,
-    optional
-    // ...otherProps
-  } = _ref;
+const Checkbox = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  label,
+  description,
+  disabled,
+  optional
+  // ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

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

@@ -15,24 +15,23 @@ 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;
+const ChoicesInput = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  validate,
+  options,
+  multiple,
+  gridColumnsMobile,
+  gridColumnsDesktop,
+  color,
+  colorChecked,
+  label,
+  optional,
+  disabled
+  // ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

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,