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

package/dist/es/a/Quote/styles.scss

@@ -1,53 +1,56 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+
 @use "@pareto-engineering/bem";
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
 
-.#{bem.$base}.quote{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+.#{bem.$base}.quote {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+
+  .blockquote {
+    margin: 0;
+    padding: 0;
+  }
+
+  .figcaption {
+    padding: 0;
+  }
 
+  @include mixins.media($from:$sm-md) {
     .blockquote {
-        margin: 0;
-        padding: 0;
+      .quotation {
+        display: inline;
+      }
+
+      &::before {
+        color: transparent;
+        content: "\201C";
+        font-size: 4em;
+        line-height: 0;
+        opacity: inherit;
+        position: static;
+        -webkit-text-stroke: 1px var(--x);
+        vertical-align: -.4em;
+      }
+
+      &::after {
+        color: transparent;
+        content: "\201D";
+        font-size: 4em;
+        line-height: 0;
+        margin-left: -.1em;
+        -webkit-text-stroke: 1px var(--x);
+        vertical-align: -.6em;
+      }
     }
 
     .figcaption {
-        padding: 0;
-    }
-
-    @include mixins.media($from:$sm-md) {
-        .blockquote {
-            .quotation {
-                display: inline;
-            }
-            &:before {
-                color: transparent;
-                content: '\201C';
-                font-size: 4em;
-                line-height: 0;
-                position: static;
-                vertical-align: -0.4em;
-                -webkit-text-stroke: 1px var(--x);
-                opacity: inherit;
-            }
-            &:after {
-                color: transparent;
-                content: '\201D';
-                font-size: 4em;
-                line-height: 0;
-                vertical-align: -0.6em;
-                margin-left: -.1em;
-                -webkit-text-stroke: 1px var(--x);
-            }
-        }
-        .figcaption {
-            margin: 0;
-        }
+      margin: 0;
     }
+  }
 }
 
 
-

package/dist/es/a/SVG/SVG.js

@@ -10,24 +10,23 @@ import { UseSVG } from "./common";
 
 const baseClassName = styleNames.base;
 const componentClassName = 'svg';
-const SVG = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    width,
-    height,
-    viewBox,
-    preserveAspectRatio,
-    useClassName,
-    sprite,
-    target,
-    targets,
-    source,
-    strokeWidth,
-    animated,
-    ...otherProps
-  } = _ref;
+const SVG = ({
+  id,
+  className: userClassName,
+  style,
+  width,
+  height,
+  viewBox,
+  preserveAspectRatio,
+  useClassName,
+  sprite,
+  target,
+  targets,
+  source,
+  strokeWidth,
+  animated,
+  ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   });

package/dist/es/a/SVG/common/UseSVG/UseSVG.js

@@ -6,28 +6,25 @@ import PropTypes from 'prop-types';
  * This component is used internally by the `SVG` component
  * to leverage the `use` tag and read svg sprites.
  */
-const UseSVG = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    sprite,
-    target,
-    source,
-    strokeWidth
-  } = _ref;
-  return /*#__PURE__*/React.createElement("use", {
-    className: [userClassName].filter(e => e).join(' '),
-    href: source || sprite + (target ? `#${target}` : ''),
-    style: strokeWidth ? {
-      ...style,
-      '--sw': Number(strokeWidth)
-    } : {
-      style
-    },
-    id: id
-  });
-};
+const UseSVG = ({
+  id,
+  className: userClassName,
+  style,
+  sprite,
+  target,
+  source,
+  strokeWidth
+}) => /*#__PURE__*/React.createElement("use", {
+  className: [userClassName].filter(e => e).join(' '),
+  href: source || sprite + (target ? `#${target}` : ''),
+  style: strokeWidth ? {
+    ...style,
+    '--sw': Number(strokeWidth)
+  } : {
+    style
+  },
+  id: id
+});
 UseSVG.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/a/SnapScroller/SnapScroller.js

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

package/dist/es/a/SnapScroller/styles.scss

@@ -1,4 +1,5 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable selector-max-universal -- exception */
 
 @use "@pareto-engineering/bem";
 @use "@pareto-engineering/styles/src/mixins";
@@ -10,18 +11,19 @@ $default-spacing:var(--spacing, var(--u));
   display: flex;
   -ms-overflow-style: none; /* for Internet Explorer, Edge */
   overflow-x: auto;
-  scroll-padding: calc(#{$default-spacing} *2);
+  scroll-padding: calc(#{$default-spacing} * 2);
   scroll-snap-type: x mandatory;
   scrollbar-width: none;
 
 
   > * {
-    &:first-child {
-      margin-left: $default-spacing;
-    }
     display: inline-block;
     margin-right: $default-spacing;
     scroll-snap-align: start;
+
+    &:first-child {
+      margin-left: $default-spacing;
+    }
   }
 
 

package/dist/es/a/Spinner/Spinner.js

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

package/dist/es/a/Timestamp/Timestamp.js

@@ -13,21 +13,20 @@ const componentClassName = 'timestamp';
 /**
  * This is the component description.
  */
-const Timestamp = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    time,
-    prefix,
-    enabledFormats,
-    distanceMaxDays,
-    relativeMaxDays,
-    dateFormat,
-    locale,
-    // ...otherProps
-    as: Element
-  } = _ref;
+const Timestamp = ({
+  id,
+  className: userClassName,
+  style,
+  time,
+  prefix,
+  enabledFormats,
+  distanceMaxDays,
+  relativeMaxDays,
+  dateFormat,
+  locale,
+  // ...otherProps
+  as: Element
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

package/dist/es/a/index.js

@@ -1,4 +1,3 @@
-export { AnimatedCounter } from "./AnimatedCounter";
 export { AppContext, AppContextProvider, useApp, useTheme } from "./AppContext";
 export { ContentTree } from "./ContentTree";
 export { Conversation } from "./Conversation";

package/dist/es/b/Button/Button.js

@@ -13,20 +13,19 @@ import("./styles.scss");
 // Helper Definition
 const baseClassName = styleNames.base;
 const componentClassName = 'button';
-const Button = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    children,
-    isLoading,
-    color,
-    isCompact,
-    isGhost,
-    isSimple,
-    arrowDirection,
-    ...otherProps
-  } = _ref;
+const Button = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  isLoading,
+  color,
+  isCompact,
+  isGhost,
+  isSimple,
+  arrowDirection,
+  ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

package/dist/es/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/es/b/Logo/Logo.js

@@ -38,19 +38,18 @@ const contentMapWithName = {
 /**
  * This is the component description.
  */
-const Logo = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    color,
-    height,
-    width,
-    variant,
-    strokeColor,
-    square
-    // ...otherProps
-  } = _ref;
+const Logo = ({
+  id,
+  className: userClassName,
+  style,
+  color,
+  height,
+  width,
+  variant,
+  strokeColor,
+  square
+  // ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

package/dist/es/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/es/b/Page/Page.js

@@ -19,17 +19,16 @@ const componentClassName = 'page';
  * It uses **the color provided** by `x`
  *
  */
-const Page = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    children,
-    itemType,
-    as: Wrapper,
-    helmetProps,
-    ...otherProps
-  } = _ref;
+const Page = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  itemType,
+  as: Wrapper,
+  helmetProps,
+  ...otherProps
+}) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);

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

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useApp } from "../../../../a";
 const helmetMap = [{
   variables: ['robots'],
@@ -101,19 +101,17 @@ const helmetMap = [{
     key: "og_url"
   })
 }];
-const PageHelmet = _ref => {
-  let {
-    ...props
-  } = _ref;
+const PageHelmet = ({
+  ...props
+}) => {
   // const intl = useIntl()
   const context = useApp();
   const HelmetContent = useMemo(() => helmetMap.reduce( /* eslint-disable no-unused-vars -- TODO add test or ssr mode */
-  (a, _ref2) => {
-    let {
-      variables,
-      render,
-      test
-    } = _ref2;
+  (a, {
+    variables,
+    render,
+    test
+  }) => {
     /* eslint-enable no-unused-vars */
     let current;
     let content = '';

package/dist/es/b/Page/common/Section/Section.js

@@ -8,14 +8,13 @@ import styleNames from '@pareto-engineering/bem/exports';
 import usePage from "../../usePage";
 const baseClassName = styleNames.base;
 const componentClassName = 'section';
-const Section = _ref => {
-  let {
-    id: userId,
-    className: userClassName,
-    style,
-    children,
-    ...otherProps
-  } = _ref;
+const Section = ({
+  id: userId,
+  className: userClassName,
+  style,
+  children,
+  ...otherProps
+}) => {
   const {
     id: pageId
   } = usePage();

package/dist/es/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/es/b/SocialMediaButton/SocialMediaButton.js

@@ -34,18 +34,17 @@ const defaultsMap = {
  * This component takes `y` as the default color and `x` as the hover color.
  * This components needs to be wrapped within a `AppContextProvider`.
  */
-const SocialMediaButton = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    type,
-    icon,
-    link,
-    color,
-    isTransparent,
-    ...otherProps
-  } = _ref;
+const SocialMediaButton = ({
+  id,
+  className: userClassName,
+  style,
+  type,
+  icon,
+  link,
+  color,
+  isTransparent,
+  ...otherProps
+}) => {
   const applicationContext = useApp();
   useLayoutEffect(() => {
     import("./styles.scss");

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

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

package/dist/es/b/ThemeSelector/ThemeSelector.js

@@ -13,16 +13,15 @@ const componentClassName = 'theme-selector';
 /**
  * This is the component description.
  */
-const ThemeSelector = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    // children
+const ThemeSelector = ({
+  id,
+  className: userClassName,
+  style,
+  // children
 
-    themes,
-    iconMap
-  } = _ref;
+  themes,
+  iconMap
+}) => {
   const {
     userTheme,
     setPreferredTheme

package/dist/es/b/Title/Title.js

@@ -12,36 +12,33 @@ import("./styles.scss");
 // Helper Definition
 const baseClassName = styleNames.base;
 const componentClassName = 'title';
-const Title = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    // children,
-    heading,
-    headingAs: HeadingWrapper,
-    headingClassName,
-    headingStyle,
-    headingProps,
-    subtitle,
-    subtitleAs: SubtitleWrapper,
-    subtitleClassName,
-    subtitleStyle,
-    subtitleProps
-    // ...otherProps
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement(HeadingWrapper, _extends({
-    className: [headingClassName, styleNames.heading].filter(e => e).join(' '),
-    style: headingStyle
-  }, headingProps), heading), subtitle && /*#__PURE__*/React.createElement(SubtitleWrapper, _extends({
-    className: [subtitleClassName, styleNames.subtitle].filter(e => e).join(' '),
-    style: subtitleStyle
-  }, subtitleProps), subtitle));
-};
+const Title = ({
+  id,
+  className: userClassName,
+  style,
+  // children,
+  heading,
+  headingAs: HeadingWrapper,
+  headingClassName,
+  headingStyle,
+  headingProps,
+  subtitle,
+  subtitleAs: SubtitleWrapper,
+  subtitleClassName,
+  subtitleStyle,
+  subtitleProps
+  // ...otherProps
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+}, /*#__PURE__*/React.createElement(HeadingWrapper, _extends({
+  className: [headingClassName, styleNames.heading].filter(e => e).join(' '),
+  style: headingStyle
+}, headingProps), heading), subtitle && /*#__PURE__*/React.createElement(SubtitleWrapper, _extends({
+  className: [subtitleClassName, styleNames.subtitle].filter(e => e).join(' '),
+  style: subtitleStyle
+}, subtitleProps), subtitle));
 Title.propTypes = {
   /**
    * The HTML id for this element