@pareto-engineering/design-system 4.0.0-alpha.60 → 4.0.0-alpha.62

package/dist/es/a/Figure/Figure.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
 
@@ -19,20 +19,15 @@ const Figure = ({
   src,
   alt,
   caption
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-    // {...otherProps}
-  }, /*#__PURE__*/React.createElement("figure", null, /*#__PURE__*/React.createElement("img", {
-    src: src,
-    alt: alt
-  }), /*#__PURE__*/React.createElement("figcaption", null, caption || alt)));
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+  // {...otherProps}
+}, /*#__PURE__*/React.createElement("figure", null, /*#__PURE__*/React.createElement("img", {
+  src: src,
+  alt: alt
+}), /*#__PURE__*/React.createElement("figcaption", null, caption || alt)));
 Figure.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/a/HamburgerButton/HamburgerButton.js

@@ -1,9 +1,9 @@
 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 "./styles.scss";
 
 // Local Definitions
 
@@ -23,23 +23,18 @@ const HamburgerButton = ({
   ariaLabel,
   color,
   ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("button", _extends({
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`, 'hamburger', `hamburger--${hamburgerType}`, isOpen && 'is-active'].filter(e => e).join(' '),
-    style: style,
-    type: "button",
-    "aria-label": ariaLabel,
-    "aria-controls": "navigation"
-  }, otherProps), /*#__PURE__*/React.createElement("span", {
-    className: "hamburger-box"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "hamburger-inner"
-  })));
-};
+}) => /*#__PURE__*/React.createElement("button", _extends({
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, `x-${color}`, 'hamburger', `hamburger--${hamburgerType}`, isOpen && 'is-active'].filter(e => e).join(' '),
+  style: style,
+  type: "button",
+  "aria-label": ariaLabel,
+  "aria-controls": "navigation"
+}, otherProps), /*#__PURE__*/React.createElement("span", {
+  className: "hamburger-box"
+}, /*#__PURE__*/React.createElement("span", {
+  className: "hamburger-inner"
+})));
 HamburgerButton.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/a/IconList/IconList.js

@@ -1,10 +1,10 @@
 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 { Item } from "./common";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -22,20 +22,15 @@ const IconList = ({
   icon,
   iconHover,
   ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("ul", _extends({
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: {
-      ...style,
-      '--list-icon': icon && `"${icon}"`,
-      '--list-icon-hover': iconHover && `"${iconHover}"`
-    }
-  }, otherProps), children);
-};
+}) => /*#__PURE__*/React.createElement("ul", _extends({
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: {
+    ...style,
+    '--list-icon': icon && `"${icon}"`,
+    '--list-icon-hover': iconHover && `"${iconHover}"`
+  }
+}, otherProps), children);
 IconList.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/a/Label/Label.js

@@ -1,9 +1,9 @@
 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 "./styles.scss";
 
 // Local Definitions
 
@@ -23,16 +23,11 @@ const Label = ({
   isGhost,
   as: Wrapper,
   ...props
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement(Wrapper, _extends({
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`, isCompact && styleNames.modifierCompact, isGhost && styleNames.modifierGhost].filter(e => e).join(' '),
-    style: style
-  }, props), children);
-};
+}) => /*#__PURE__*/React.createElement(Wrapper, _extends({
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, `x-${color}`, isCompact && styleNames.modifierCompact, isGhost && styleNames.modifierGhost].filter(e => e).join(' '),
+  style: style
+}, props), children);
 Label.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/a/LoadingCircle/LoadingCircle.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
 
@@ -21,42 +21,37 @@ const LoadingCircle = ({
   animationDuration,
   style
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: {
-      '--height-width': heightWidth,
-      '--stroke-width': strokeWidth,
-      ...style
-    }
-    // {...otherProps}
-  }, /*#__PURE__*/React.createElement("svg", {
-    viewBox: "25 25 50 50",
-    className: "svg-circle",
-    id: id,
-    x: "0px",
-    y: "0px",
-    xmlSpace: "preserve",
-    xmlns: "http://www.w3.org/2000/svg",
-    version: "1.1",
-    preserveAspectRatio: "xMinYMin meet",
-    style: {
-      '--animation-duration': `${animationDuration}s`
-    }
-  }, /*#__PURE__*/React.createElement("circle", {
-    className: "path",
-    cx: "50",
-    cy: "50",
-    r: "20",
-    fill: "none",
-    strokeLinecap: strokeLinecap,
-    strokeMiterlimit: "10"
-  })));
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: {
+    '--height-width': heightWidth,
+    '--stroke-width': strokeWidth,
+    ...style
+  }
+  // {...otherProps}
+}, /*#__PURE__*/React.createElement("svg", {
+  viewBox: "25 25 50 50",
+  className: "svg-circle",
+  id: id,
+  x: "0px",
+  y: "0px",
+  xmlSpace: "preserve",
+  xmlns: "http://www.w3.org/2000/svg",
+  version: "1.1",
+  preserveAspectRatio: "xMinYMin meet",
+  style: {
+    '--animation-duration': `${animationDuration}s`
+  }
+}, /*#__PURE__*/React.createElement("circle", {
+  className: "path",
+  cx: "50",
+  cy: "50",
+  r: "20",
+  fill: "none",
+  strokeLinecap: strokeLinecap,
+  strokeMiterlimit: "10"
+})));
 LoadingCircle.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/a/MetaCard/MetaCard.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
 
@@ -19,16 +19,11 @@ const MetaCard = ({
   children,
   hasBackgroundBlur,
   spaced
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, hasBackgroundBlur && styleNames.modifierBlur, spaced && styleNames.modifierSpaced].filter(e => e).join(' '),
-    style: style
-  }, children);
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, hasBackgroundBlur && styleNames.modifierBlur, spaced && styleNames.modifierSpaced].filter(e => e).join(' '),
+  style: style
+}, children);
 MetaCard.propTypes = {
   /**
      * The HTML id for this element

package/dist/es/a/People/People.js

@@ -1,12 +1,12 @@
 /* @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';
 
 // Local Definitions
 
 import { Person } from "./common";
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'people';
 
@@ -21,21 +21,16 @@ const People = ({
   children,
   columnWidth
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, 'u1'].filter(e => e).join(' '),
-    style: {
-      ...style,
-      '--image-size': imageSize,
-      '--column-width': columnWidth
-    }
-    // {...otherProps}
-  }, children);
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, 'u1'].filter(e => e).join(' '),
+  style: {
+    ...style,
+    '--image-size': imageSize,
+    '--column-width': columnWidth
+  }
+  // {...otherProps}
+}, children);
 People.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/a/Popover/Popover.js

@@ -1,11 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useRef, useInsertionEffect } from 'react';
+import { useRef } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
 // Local Definitions
 import { useDynamicPosition } from "../../utils";
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'popover';
 
@@ -26,9 +27,6 @@ const Popover = ({
   offsetYPx
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const popoverRef = useRef(null);
   const {
     primaryPosition,

package/dist/es/a/ProgressBar/ProgressBar.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
 
@@ -21,22 +21,17 @@ const ProgressBar = ({
   progress,
   height
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, attached && styleNames.modifierAttached, color && `x-${color}`, userClassName].filter(e => e).join(' '),
-    style: {
-      '--progress': progress,
-      '--height': height,
-      ...style
-    },
-    "data-length": "50%"
-    // {...otherProps}
-  });
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, attached && styleNames.modifierAttached, color && `x-${color}`, userClassName].filter(e => e).join(' '),
+  style: {
+    '--progress': progress,
+    '--height': height,
+    ...style
+  },
+  "data-length": "50%"
+  // {...otherProps}
+});
 
 ProgressBar.propTypes = {
   /**

package/dist/es/a/Quote/Quote.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
 
@@ -21,24 +21,19 @@ const Quote = ({
   author,
   color
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("figure", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
-    style: style
-    // {...otherProps}
-  }, /*#__PURE__*/React.createElement("blockquote", {
-    cite: source,
-    className: "blockquote uc"
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "quotation c-x md-s0 s-1"
-  }, children)), /*#__PURE__*/React.createElement("figcaption", {
-    className: "figcaption"
-  }, /*#__PURE__*/React.createElement("cite", null, author)));
-};
+}) => /*#__PURE__*/React.createElement("figure", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
+  style: style
+  // {...otherProps}
+}, /*#__PURE__*/React.createElement("blockquote", {
+  cite: source,
+  className: "blockquote uc"
+}, /*#__PURE__*/React.createElement("p", {
+  className: "quotation c-x md-s0 s-1"
+}, children)), /*#__PURE__*/React.createElement("figcaption", {
+  className: "figcaption"
+}, /*#__PURE__*/React.createElement("cite", null, author)));
 Quote.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/a/Removable/Removable.js

@@ -1,8 +1,8 @@
 /* @pareto-engineering/generator-front 1.1.1-alpha.1 */
 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
 
@@ -19,23 +19,18 @@ const Removable = ({
   handleClose,
   children
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-    // {...otherProps}
-  }, children, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "close-button",
-    onClick: handleClose || (() => null)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "Y")));
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+  // {...otherProps}
+}, children, /*#__PURE__*/React.createElement("button", {
+  type: "button",
+  className: "close-button",
+  onClick: handleClose || (() => null)
+}, /*#__PURE__*/React.createElement("span", {
+  className: "icon"
+}, "Y")));
 Removable.propTypes = {
   /**
    * The HTML id for this element

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

@@ -1,10 +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.3 */
 import * as React from 'react';
-import { useInsertionEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { UseSVG } from "./common";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -27,9 +28,6 @@ const SVG = ({
   animated,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  });
   const useSVGProps = useMemo(() => ({
     className: useClassName,
     source,

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

@@ -1,8 +1,9 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect, useState, useRef } from 'react';
+import { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -20,9 +21,6 @@ const SnapScroller = ({
   noScrollOnDesktop
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [isDragging, setIsDragging] = useState(false);
   const [startX, setStartX] = useState(0);
   const [startScrollX, setStartScrollX] = useState(0);

package/dist/es/a/Spinner/Spinner.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
 
@@ -18,19 +18,14 @@ const Spinner = ({
   style,
   color
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
-    style: style
-    // {...otherProps}
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "loader"
-  }));
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
+  style: style
+  // {...otherProps}
+}, /*#__PURE__*/React.createElement("div", {
+  className: "loader"
+}));
 Spinner.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/a/TextSteps/TextSteps.js

@@ -1,39 +1,34 @@
 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
 
 const baseClassName = styleNames.base;
-const componentClassName = 'steps';
+const componentClassName = 'text-steps';
 
 /**
  * This is the component description.
  */
-const Steps = ({
+const TextSteps = ({
   id,
   className: userClassName,
   style,
   items,
   title
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, 'grid'].filter(e => e).join(' '),
-    style: style
-  }, title && /*#__PURE__*/React.createElement("p", {
-    className: "title h4"
-  }, title), items.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: " number h3 start-1 span-2 md-start-1 md-span-2"
-  }, /*#__PURE__*/React.createElement("p", null, i + 1)), /*#__PURE__*/React.createElement("div", {
-    className: " description"
-  }, /*#__PURE__*/React.createElement("p", null, item)))));
-};
-Steps.propTypes = {
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, 'grid'].filter(e => e).join(' '),
+  style: style
+}, title && /*#__PURE__*/React.createElement("p", {
+  className: "title h4"
+}, title), items.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  className: " number h3 start-1 span-2 md-start-1 md-span-2"
+}, /*#__PURE__*/React.createElement("p", null, i + 1)), /*#__PURE__*/React.createElement("div", {
+  className: " description"
+}, /*#__PURE__*/React.createElement("p", null, item)))));
+TextSteps.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -58,4 +53,4 @@ Steps.propTypes = {
    */
   title: PropTypes.string
 };
-export default Steps;
+export default TextSteps;

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

@@ -6,7 +6,7 @@
 
 $default-padding: 1em;
 
-.#{bem.$base}.steps {
+.#{bem.$base}.text-steps {
   grid-column: 1 / -1;
   grid-template-columns: repeat(var(--columns), 1fr);
   padding: $default-padding 0;