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

package/dist/cjs/a/ContentTree/ContentTree.js

@@ -26,7 +26,7 @@ const ContentTree = _ref => {
     selectors
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const contentTree = (0, _common.useContentTree)(target, selectors);
@@ -60,7 +60,7 @@ ContentTree.propTypes = {
    * The reference to the parent element.
    */
   target: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.instanceOf(Element)
+    current: _propTypes.default.instanceOf(React.Element)
   })])
 };
 ContentTree.defaultProps = {

package/dist/cjs/a/Conversation/Conversation.js

@@ -30,7 +30,7 @@ const Conversation = _ref => {
     hasTriangle
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement(_Context.default.Provider, {

package/dist/cjs/a/DotInfo/DotInfo.js

@@ -30,7 +30,7 @@ const DotInfo = _ref => {
     colorEmpty
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/dist/cjs/a/Figure/Figure.js

@@ -27,7 +27,7 @@ const Figure = _ref => {
     alt,
     caption
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/dist/cjs/a/HamburgerButton/HamburgerButton.js

@@ -31,7 +31,7 @@ const HamburgerButton = _ref => {
     color,
     ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement("button", _extends({

package/dist/cjs/a/IconList/IconList.js

@@ -30,7 +30,7 @@ const IconList = _ref => {
     iconHover,
     ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement("ul", _extends({

package/dist/cjs/a/Label/Label.js

@@ -28,7 +28,7 @@ const Label = _ref => {
     isCompact,
     isGhost
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/dist/cjs/a/LoadingCircle/LoadingCircle.js

@@ -29,7 +29,7 @@ const LoadingCircle = _ref => {
     style
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/dist/cjs/a/People/People.js

@@ -27,7 +27,7 @@ const People = _ref => {
     columnWidth
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/dist/cjs/a/Popover/Popover.js

@@ -32,7 +32,7 @@ const Popover = _ref => {
     offsetYPx
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const popoverRef = (0, React.useRef)(null);
@@ -100,7 +100,7 @@ Popover.propTypes = {
    * The reference to the parent element
    */
   parentRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.instanceOf(Element)
+    current: _propTypes.default.instanceOf(React.Element)
   })])
 };
 Popover.defaultProps = {

package/dist/cjs/a/ProgressBar/ProgressBar.js

@@ -29,7 +29,7 @@ const ProgressBar = _ref => {
     height
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/dist/cjs/a/Quote/Quote.js

@@ -29,7 +29,7 @@ const Quote = _ref => {
     color
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement("figure", {

package/dist/cjs/a/SVG/SVG.js

@@ -34,7 +34,7 @@ const SVG = _ref => {
     animated,
     ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   });
   const useSVGProps = (0, React.useMemo)(() => ({

package/dist/cjs/a/SnapScroller/SnapScroller.js

@@ -27,7 +27,7 @@ const SnapScroller = _ref => {
     noScrollOnDesktop
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/dist/cjs/a/Spinner/Spinner.js

@@ -26,7 +26,7 @@ const Spinner = _ref => {
     color
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/dist/cjs/a/Timestamp/Timestamp.js

@@ -34,7 +34,7 @@ const Timestamp = _ref => {
     // ...otherProps
     as: Element
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const [currentDisplay, setCurrentDisplay] = (0, React.useState)(enabledFormats[0]);

package/dist/cjs/b/Button/Button.js

@@ -8,12 +8,13 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 var _ = require("../..");
+require("./styles.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Component-level imports
-Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+// import('./styles.scss')
 
 // Helper Definition
 const baseClassName = _exports.default.base;

package/dist/cjs/b/Logo/Logo.js

@@ -57,7 +57,7 @@ const Logo = _ref => {
     square
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const contentMap = square ? contentMapSquare : contentMapWithName;

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

@@ -34,7 +34,7 @@ const Page = _ref => {
     helmetProps,
     ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   (0, React.useEffect)(() => {

package/dist/cjs/b/SocialMediaButton/SocialMediaButton.js

@@ -53,7 +53,7 @@ const SocialMediaButton = _ref => {
     ...otherProps
   } = _ref;
   const applicationContext = (0, _a.useApp)();
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const content = type && defaultsMap[type];

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

@@ -32,7 +32,7 @@ $mobile-dimensions: 2.75em;
     background: var(--soft-x);
   }
 
-  &.#{bem.$modifier-transparent} {
+  &.#{bem.$modifier-clear} {
     background: transparent;
     color: var(--y, var(--heading));
 

package/dist/cjs/b/ThemeSelector/ThemeSelector.js

@@ -33,7 +33,7 @@ const ThemeSelector = _ref => {
     userTheme,
     setPreferredTheme
   } = (0, _a.useApp)();
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const loopThemes = (0, React.useCallback)(() => {

package/dist/cjs/b/Title/Title.js

@@ -12,7 +12,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Component-level imports
-Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+// import('./styles.scss')
 
 // Helper Definition
 const baseClassName = _exports.default.base;
@@ -35,6 +35,9 @@ const Title = _ref => {
     subtitleProps
     // ...otherProps
   } = _ref;
+  (0, React.useInsertionEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),

package/dist/cjs/c/ContentSlides/ContentSlides.js

@@ -55,7 +55,7 @@ const ContentSlides = _ref => {
     isDebug
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const history = (0, _reactRouterDom.useHistory)();
@@ -106,7 +106,7 @@ const ContentSlides = _ref => {
       }
     });
   };
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     setCurrentStep(currentStepIndex);
   }, [currentStepIndex]);
   return /*#__PURE__*/React.createElement(_Context.default.Provider, {

package/dist/cjs/c/Modal/Modal.js

@@ -30,7 +30,7 @@ const Modal = _ref => {
     close
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement("div", {

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

@@ -1,11 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
+@use "sass:math";
 
 $default-background: var(--background1);
 /* stylelint-disable-next-line color-named -- needed for rgba function */
 $default-box-shadow: 0 10px 20px rgba(black, .2);
-$default-padding: 1em / 2;
+$default-padding: math.div(1em, 2);
 $default-margin: 2em;
 $default-max-height: 75vh;
 $default-max-width: 90%;

package/dist/cjs/c/Shortener/Shortener.js

@@ -30,7 +30,7 @@ const Shortener = _ref => {
     separator,
     countLetters
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const [displayFull, setDisplayFull] = (0, React.useState)(false);

package/dist/cjs/c/SocialMediaShareButton/SocialMediaShareButton.js

@@ -28,7 +28,7 @@ const SocialMediaShareButton = _ref => {
     type,
     color
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const isServer = typeof window === 'undefined';

package/dist/cjs/f/FormInput/FormInput.js

@@ -28,7 +28,7 @@ const FormInput = _ref => {
     disabled,
     ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const newClassName = [className, componentClassName].filter(Boolean).join(' ');

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

@@ -26,7 +26,7 @@ const Debugger = _ref => {
     initialIsOpen
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const [isOpen, setIsOpen] = (0, React.useState)(initialIsOpen);

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

@@ -29,7 +29,7 @@ const Description = _ref => {
     color
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const [field, meta] = (0, _formik.useField)(name);

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

@@ -30,7 +30,7 @@ const Label = _ref => {
     as: Wrapper
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement(Wrapper, {

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

@@ -33,7 +33,7 @@ const Checkbox = _ref => {
     optional
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const [field] = (0, _formik.useField)({

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

@@ -37,7 +37,7 @@ const ChoicesInput = _ref => {
     disabled
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/dist/cjs/f/fields/QueryCombobox/QueryCombobox.js

@@ -37,7 +37,7 @@ const QueryCombobox = _ref => {
     validate
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const [, meta, helpers] = (0, _formik.useField)({

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

@@ -1,6 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
+@use "sass:math";
 
 $default-input-padding: .75em .75em .55em;
 $default-padding: 1em;
@@ -26,7 +27,7 @@ $default-loading-circle-displacement: 1em;
       padding: 0;
 
       >.item {
-        padding: $default-padding / 2;
+        padding: math.div($default-padding, 2);
 
         &.#{bem.$modifier-active} {
           background-color: var(--background2);
@@ -76,12 +77,12 @@ $default-loading-circle-displacement: 1em;
   >.selected-items {
     display: flex;
     flex-wrap: wrap;
-    gap: $default-gap / 2;
-    margin-bottom: $default-margin / 2;
+    gap: math.div($default-gap, 2);
+    margin-bottom: math.div($default-margin, 2);
 
     >.item {
       background-color: var(--main2);
-      padding: $default-padding / 4;
+      padding: math.div($default-padding, 4);
 
       .close {
         font-size: calc(var(--s-3) * 1em);

package/dist/cjs/f/fields/RatingsInput/RatingsInput.js

@@ -35,7 +35,7 @@ const RatingsInput = _ref => {
     optional
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const [hover, setHover] = (0, React.useState)(null);

package/dist/cjs/f/fields/SelectInput/SelectInput.js

@@ -39,7 +39,7 @@ const SelectInput = _ref => {
     autoComplete
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const [field] = (0, _formik.useField)({

package/dist/cjs/f/fields/TextInput/TextInput.js

@@ -40,7 +40,7 @@ const TextInput = _ref => {
     autoComplete
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const [field] = (0, _formik.useField)({

package/dist/cjs/f/fields/TextareaInput/TextareaInput.js

@@ -40,7 +40,7 @@ const TextareaInput = _ref => {
     resize
     // ...otherProps
   } = _ref;
-  (0, React.useLayoutEffect)(() => {
+  (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const [field] = (0, _formik.useField)({

package/dist/es/a/ContentTree/ContentTree.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';
 
@@ -20,7 +20,7 @@ const ContentTree = ({
   selectors
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const contentTree = useContentTree(target, selectors);
@@ -54,7 +54,7 @@ ContentTree.propTypes = {
    * The reference to the parent element.
    */
   target: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
+    current: PropTypes.instanceOf(React.Element)
   })])
 };
 ContentTree.defaultProps = {

package/dist/es/a/Conversation/Conversation.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';
 
@@ -25,7 +25,7 @@ const Conversation = ({
   hasTriangle
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement(ConversationContext.Provider, {

package/dist/es/a/DotInfo/DotInfo.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';
 
@@ -23,7 +23,7 @@ const DotInfo = ({
   colorEmpty
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/dist/es/a/Figure/Figure.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';
 
@@ -20,7 +20,7 @@ const Figure = ({
   alt,
   caption
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/dist/es/a/HamburgerButton/HamburgerButton.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';
 
@@ -24,7 +24,7 @@ const HamburgerButton = ({
   color,
   ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("button", _extends({

package/dist/es/a/IconList/IconList.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 { Item } from "./common";
@@ -23,7 +23,7 @@ const IconList = ({
   iconHover,
   ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("ul", _extends({

package/dist/es/a/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';
 
@@ -21,7 +21,7 @@ const Label = ({
   isCompact,
   isGhost
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/dist/es/a/LoadingCircle/LoadingCircle.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';
 
@@ -22,7 +22,7 @@ const LoadingCircle = ({
   style
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {