@pareto-engineering/design-system 3.0.0-alpha.28 → 4.0.0-alpha.3

package/dist/cjs/b/Button/styles.scss

@@ -16,11 +16,11 @@ $default-animation-time: .31s;
   border-radius: $default-border-radius;
   color: var(--on-x, var(--on-#{$default-color}));
   display: inline-flex;
-  font-family: var(--theme-default-paragraph);
+  font-family: "paragraph", sans-serif;
   font-weight: 400;
   justify-content: space-between;
   padding: $default-padding;
-  transition: all .25s;
+  transition: all .25s;//var(--theme-default-paragraph);
 
   &.arrow-right {
     &::after {

package/dist/cjs/b/Logo/styles.scss

@@ -1,9 +1,11 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
+/*
+
 @use "@pareto-engineering/bem";
 
-.#{bem.$base}.logo {
+.{bem.$base}.logo {
 
-}
+} */
 
 

package/dist/cjs/b/Page/common/PageHelmet/PageHelmet.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactHelmet = require("react-helmet");
+var _reactHelmetAsync = require("react-helmet-async");
 var _a = require("../../../../a");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -155,7 +155,7 @@ var PageHelmet = _ref => {
     }
     return a;
   }, []), [props, context]);
-  return /*#__PURE__*/React.createElement(_reactHelmet.Helmet, null, HelmetContent);
+  return /*#__PURE__*/React.createElement(_reactHelmetAsync.Helmet, null, HelmetContent);
 };
 PageHelmet.propTypes = {
   robots: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),

package/dist/cjs/b/Page/styles.scss

@@ -1,16 +1,17 @@
 /* @pareto-engineering/generator-front 1.0.0 */
+/* stylelint-disable selector-max-universal -- exception */
 
 @use "@pareto-engineering/bem";
 
 
-.#{bem.$base}.page{
-    .#{bem.$base}.section {
-        position: relative;
+.#{bem.$base}.page {
+  .#{bem.$base}.section {
+    position: relative;
 
-        > *:not(:last-child) {
-            z-index: 1;
-        }
+    > *:not(:last-child) {
+      z-index: 1;
     }
+  }
 }
 
 

package/dist/cjs/b/SocialMediaButton/styles.scss

@@ -39,7 +39,7 @@ $mobile-dimensions: 2.75em;
     &:hover {
       color: var(--x);
     }
-  
+
     &:focus {
       color: var(--soft-x);
     }

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/f/fields/ChoicesInput/styles.scss

@@ -1,4 +1,5 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable selector-max-compound-selectors -- exception */
 
 @use "@pareto-engineering/bem";
 @use "@pareto-engineering/styles/src/mixins";
@@ -9,7 +10,6 @@ $default-padding:var(--u, 1em);
 $default-transition:all .3s;
 
 .#{bem.$base}.choices-input {
-
   .choices {
     display: grid;
     gap: $default-grid-gap;
@@ -40,16 +40,16 @@ $default-transition:all .3s;
       }
 
       label {
-        border: var(--theme-border-style) var(--hard-x);
         background: var(--soft-x);
-        color: var(--on-x);
+        border: var(--theme-border-style) var(--hard-x);
         border-radius: var(--theme-border-radius);
+        color: var(--on-x);
+        cursor: pointer;
         display: block;
         height: 100%;
         padding: $default-padding;
         transition: $default-transition;
         width: 100%;
-        cursor: pointer;
       }
 
       input:checked + label {

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

@@ -10,82 +10,82 @@ $default-loading-circle-displacement: 1em;
 
 .#{bem.$base}.combobox,
 .#{bem.$base}.multiple-combobox {
-    position: relative;
+  position: relative;
 
-    .#{bem.$base}.label {
-        margin-bottom: $default-margin
-    }
+  .#{bem.$base}.label {
+    margin-bottom: $default-margin;
+  }
 
-    .#{bem.$base}.popover {
-        width: 100%;
+  .#{bem.$base}.popover {
+    width: 100%;
 
-        >.menu {
-            list-style: none;
-            margin: 0;
-            outline: 0;
-            padding: 0;
+    >.menu {
+      list-style: none;
+      margin: 0;
+      outline: 0;
+      padding: 0;
 
-            >.item {
-                padding: $default-padding / 2;
+      >.item {
+        padding: $default-padding / 2;
 
-                &.#{bem.$modifier-active} {
-                    background-color: var(--background2);
-                }
-            }
+        &.#{bem.$modifier-active} {
+          background-color: var(--background2);
         }
+      }
     }
+  }
 
-    >.input-wrapper {
-        position: relative;
+  >.input-wrapper {
+    position: relative;
 
-        >.#{bem.$base}.loading-circle,
-        >.#{bem.$base}.button {
-            position: absolute;
-            top: $default-loading-circle-displacement;
-            right: $default-loading-circle-displacement;
-        }
+    >.#{bem.$base}.loading-circle,
+    >.#{bem.$base}.button {
+      position: absolute;
+      right: $default-loading-circle-displacement;
+      top: $default-loading-circle-displacement;
+    }
 
-        >.input {
-            background: var(--soft-y);
-            border: var(--theme-border-style) var(--hard-y);
-            color: var(--on-y);
-            padding: $default-input-padding;
-            width: 100%;
+    >.input {
+      background: var(--soft-y);
+      border: var(--theme-border-style) var(--hard-y);
+      color: var(--on-y);
+      padding: $default-input-padding;
+      width: 100%;
 
-            &::placeholder {
-                color: var(--metadata);
-            }
+      &::placeholder {
+        color: var(--metadata);
+      }
 
-            &:not(:disabled):hover {
-                border: var(--theme-border-style) var(--soft-background4);
-            }
+      &:not(:disabled):hover {
+        border: var(--theme-border-style) var(--soft-background4);
+      }
 
-            &:disabled {
-                background-color: var(--hard-y);
-            }
+      &:disabled {
+        background-color: var(--hard-y);
+      }
 
-            &:focus {
-                background: var(--soft-background4);
-            }
-        }
+      &:focus {
+        background: var(--soft-background4);
+      }
     }
+  }
 }
 
 
 .#{bem.$base}.multiple-combobox {
-    >.selected-items {
-        display: flex;
-        gap: $default-gap / 2;
-        flex-wrap: wrap;
-        margin-bottom: $default-margin / 2;
-
-        >.item {
-            background-color: var(--main2);
-            padding: $default-padding / 4;
-
-            .close {
-                font-size: calc(var(--s-3) * 1em);
-            }
-        }
+  >.selected-items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $default-gap / 2;
+    margin-bottom: $default-margin / 2;
+
+    >.item {
+      background-color: var(--main2);
+      padding: $default-padding / 4;
+
+      .close {
+        font-size: calc(var(--s-3) * 1em);
+      }
     }
-}
+  }
+}

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

@@ -1,4 +1,5 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+
 @use "@pareto-engineering/bem";
 
 $default-rating-icon-margin: .5em;
@@ -19,34 +20,32 @@ $default-transition: all .2s;
     >:not(:last-child) {
       margin-right: $default-rating-icon-margin;
     }
-  
+
     .#{bem.$base}.rating {
       display: flex;
-  
+
       input {
         opacity: 0;
         position: absolute;
         visibility: none;
         z-index: -1;
       }
-  
+
       label {
+        align-items: center;
+        cursor: pointer;
         display: flex;
         flex-direction: column;
-        align-items: center;
         padding: $default-padding;
         transition: $default-transition;
-        cursor: pointer;
       }
     }
-  
+
     .label-text {
-      margin-bottom: 0;
       align-self: flex-end;
+      margin-bottom: 0;
     }
   }
 }
 
 
-
-

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

@@ -5,7 +5,7 @@
 @use "../../../form.scss";
 
 
-$default-padding: 0.75em;
+$default-padding: .75em;
 $default-margin: 1em;
 
 .#{bem.$base}.select-input {
@@ -13,7 +13,7 @@ $default-margin: 1em;
   flex-direction: column;
 
   .#{bem.$base}.label {
-    margin-bottom: $default-margin
+    margin-bottom: $default-margin;
   }
 
   .select-wrapper {
@@ -27,19 +27,19 @@ $default-margin: 1em;
     }
 
     >.input {
-      width: 100%;
-      border: var(--theme-border-style) var(--hard-y);
       background: var(--soft-y);
+      border: var(--theme-border-style) var(--hard-y);
       color: var(--on-y);
       padding: $default-padding;
+      width: 100%;
 
       &:not(:disabled):hover {
         border: var(--theme-border-style) var(--soft-background4);
       }
 
       &:disabled {
-        background-color: var(--hard-y);
         appearance: none;
+        background-color: var(--hard-y);
       }
 
       &:focus {
@@ -47,4 +47,4 @@ $default-margin: 1em;
       }
     }
   }
-}
+}

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

@@ -3,23 +3,23 @@
 @use "@pareto-engineering/bem";
 @use "../../../form.scss";
 
-$default-padding: 0.75em 0.75em 0.55em;
+$default-padding: .75em .75em .55em;
 
 .#{bem.$base}.text-input {
   display: flex;
   flex-direction: column;
 
   .input {
-    border: var(--theme-border-style) var(--hard-y);
     background: var(--soft-y);
+    border: var(--theme-border-style) var(--hard-y);
     color: var(--on-y);
     padding: $default-padding;
 
-    &::placeholder{
+    &::placeholder {
       color: var(--metadata);
     }
 
-    &:not(:disabled):hover{
+    &:not(:disabled):hover {
       border: var(--theme-border-style) var(--soft-background4);
     }
 

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

@@ -1,27 +1,28 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+
 @use "@pareto-engineering/bem";
 
 $default-padding: .5em;
 
-.#{bem.$base}.text-area-input{
+.#{bem.$base}.text-area-input {
   display: flex;
   flex-direction: column;
 
   .textarea {
-    border: var(--theme-border-style) var(--hard-y);
     background: var(--soft-y);
+    border: var(--theme-border-style) var(--hard-y);
     color: var(--on-y);
     padding: $default-padding;
 
-    &::placeholder{
+    &::placeholder {
       color: var(--metadata);
     }
 
-    &:not(:disabled):hover{
+    &:not(:disabled):hover {
       border: var(--theme-border-style) var(--soft-background4);
     }
 
-     &:disabled {
+    &:disabled {
       background-color: var(--hard-y);
     }
 
@@ -29,4 +30,4 @@ $default-padding: .5em;
       background: var(--soft-background4);
     }
   }
-}
+}

package/dist/es/a/AppContext/ContextProvider.js

@@ -22,14 +22,13 @@ const reducer = (state, action) => {
       return state;
   }
 };
-const AppContextProvider = _ref => {
-  let {
-    children,
-    initialTheme,
-    config,
-    initialState
-    // ...otherProps
-  } = _ref;
+const AppContextProvider = ({
+  children,
+  initialTheme,
+  config,
+  initialState
+  // ...otherProps
+}) => {
   const theme = useTheme(initialTheme);
   const [state, dispatch] = useReducer(reducer, initialState);
   return /*#__PURE__*/React.createElement(Context.Provider, {

package/dist/es/a/AppContext/useTheme.js

@@ -1,6 +1,5 @@
 import { useCallback, useState, useEffect } from 'react';
-export default (function (initialTheme) {
-  let storageKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'theme';
+export default ((initialTheme, storageKey = 'theme') => {
   const isClient = typeof window === 'object';
   const [preferredTheme, setPreferredTheme] = useState(initialTheme);
   const [userTheme, setUserTheme] = useState();

package/dist/es/a/ContentTree/ContentTree.js

@@ -12,15 +12,14 @@ const componentClassName = 'content-tree';
 /**
  * This is the component description.
  */
-const ContentTree = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    target,
-    selectors
-    // ...otherProps
-  } = _ref;
+const ContentTree = ({
+  id,
+  className: userClassName,
+  style,
+  target,
+  selectors
+  // ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

package/dist/es/a/ContentTree/common/Tree/Tree.js

@@ -13,15 +13,14 @@ const componentClassName = 'tree';
 /**
  * This is the component description.
  */
-const Tree = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    tree,
-    displayDepth
-    // ...otherProps
-  } = _ref;
+const Tree = ({
+  id,
+  className: userClassName,
+  style,
+  tree,
+  displayDepth
+  // ...otherProps
+}) => {
   // The nodeIds to be used to get the first visible node
   const [nodeIds, setNodeIds] = useState([]);