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

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

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

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useRef, useLayoutEffect } from 'react';
+import { useRef, useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -26,7 +26,7 @@ const Popover = ({
   offsetYPx
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const popoverRef = useRef(null);
@@ -94,7 +94,7 @@ Popover.propTypes = {
    * The reference to the parent element
    */
   parentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
+    current: PropTypes.instanceOf(React.Element)
   })])
 };
 Popover.defaultProps = {

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

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

package/dist/es/a/SVG/SVG.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.3 */
 import * as React from 'react';
-import { useLayoutEffect, useMemo } from 'react';
+import { useInsertionEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { UseSVG } from "./common";
@@ -27,7 +27,7 @@ const SVG = ({
   animated,
   ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   });
   const useSVGProps = useMemo(() => ({

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

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

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

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect, useMemo, useCallback, useState } from 'react';
+import { useInsertionEffect, useMemo, useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { format, differenceInDays, formatDistance, formatRelative } from 'date-fns';
@@ -27,7 +27,7 @@ const Timestamp = ({
   // ...otherProps
   as: Element
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [currentDisplay, setCurrentDisplay] = useState(enabledFormats[0]);

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

@@ -7,8 +7,9 @@ import PropTypes from 'prop-types';
 // Package-level Imports
 import styleNames from '@pareto-engineering/bem/exports';
 import { LoadingCircle } from "../..";
+import "./styles.scss";
 // Component-level imports
-import("./styles.scss");
+// import('./styles.scss')
 
 // Helper Definition
 const baseClassName = styleNames.base;

package/dist/es/b/Logo/Logo.js

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useMemo, useLayoutEffect } from 'react';
+import { useMemo, useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { SVG } from "../../a";
@@ -50,7 +50,7 @@ const Logo = ({
   square
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const contentMap = square ? contentMapSquare : contentMapWithName;

package/dist/es/b/Page/Page.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.0 */
 import * as React from 'react';
-import { useLayoutEffect, useEffect } from 'react';
+import { useInsertionEffect, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -29,7 +29,7 @@ const Page = ({
   helmetProps,
   ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   useEffect(() => {

package/dist/es/b/SocialMediaButton/SocialMediaButton.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 { useApp } from "../../a";
@@ -46,7 +46,7 @@ const SocialMediaButton = ({
   ...otherProps
 }) => {
   const applicationContext = useApp();
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const content = type && defaultsMap[type];

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

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect, useCallback } from 'react';
+import { useInsertionEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useApp } from "../../a";
@@ -26,7 +26,7 @@ const ThemeSelector = ({
     userTheme,
     setPreferredTheme
   } = useApp();
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const loopThemes = useCallback(() => {

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

@@ -1,13 +1,14 @@
 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 0.3.1 */
 import * as React from 'react';
+import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 
 // Package-level Imports
 import styleNames from '@pareto-engineering/bem/exports';
 
 // Component-level imports
-import("./styles.scss");
+// import('./styles.scss')
 
 // Helper Definition
 const baseClassName = styleNames.base;
@@ -28,17 +29,22 @@ const Title = ({
   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));
+}) => {
+  useInsertionEffect(() => {
+    import("./styles.scss");
+  }, []);
+  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));
+};
 Title.propTypes = {
   /**
    * The HTML id for this element

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

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect, useReducer } from 'react';
+import { useInsertionEffect, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import styleNames from '@pareto-engineering/bem/exports';
@@ -48,7 +48,7 @@ const ContentSlides = ({
   isDebug
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const history = useHistory();
@@ -97,7 +97,7 @@ const ContentSlides = ({
       }
     });
   };
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     setCurrentStep(currentStepIndex);
   }, [currentStepIndex]);
   return /*#__PURE__*/React.createElement(ContentSlidesContext.Provider, {

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

package/dist/es/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/es/c/Shortener/Shortener.js

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect, useState } from 'react';
+import { useInsertionEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -24,7 +24,7 @@ const Shortener = ({
   separator,
   countLetters
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [displayFull, setDisplayFull] = useState(false);

package/dist/es/c/SocialMediaShareButton/SocialMediaShareButton.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 SocialMediaShareButton = ({
   type,
   color
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const isServer = typeof window === 'undefined';

package/dist/es/f/FormInput/FormInput.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 { memo, useLayoutEffect } from 'react';
+import { memo, useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices } from "../fields";
 
@@ -21,7 +21,7 @@ const FormInput = ({
   disabled,
   ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const newClassName = [className, componentClassName].filter(Boolean).join(' ');

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

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useState, useLayoutEffect, useContext } from 'react';
+import { useState, useInsertionEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from "../../../b";
 import { FormikContext } from 'formik';
@@ -19,7 +19,7 @@ const Debugger = ({
   initialIsOpen
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [isOpen, setIsOpen] = useState(initialIsOpen);

package/dist/es/f/common/Description/Description.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 { useField } from 'formik';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
@@ -22,7 +22,7 @@ const Description = ({
   color
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [field, meta] = useField(name);

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

package/dist/es/f/fields/Checkbox/Checkbox.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 { useField } from 'formik';
@@ -26,7 +26,7 @@ const Checkbox = ({
   optional
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [field] = useField({

package/dist/es/f/fields/ChoicesInput/ChoicesInput.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, memo } from 'react';
+import { useInsertionEffect, memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -32,7 +32,7 @@ const ChoicesInput = ({
   disabled
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {

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

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useState, useLayoutEffect } from 'react';
+import { useState, useInsertionEffect } from 'react';
 import { useField } from 'formik';
 import { useRelayEnvironment, fetchQuery } from 'react-relay';
 import PropTypes from 'prop-types';
@@ -33,7 +33,7 @@ const QueryCombobox = ({
   validate
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [, meta, helpers] = useField({

package/dist/es/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/es/f/fields/RatingsInput/RatingsInput.js

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useState, useLayoutEffect, memo } from 'react';
+import { useState, useInsertionEffect, memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -30,7 +30,7 @@ const RatingsInput = ({
   optional
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [hover, setHover] = useState(null);

package/dist/es/f/fields/SelectInput/SelectInput.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, memo } from 'react';
+import { useInsertionEffect, memo } from 'react';
 import { useField } from 'formik';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
@@ -32,7 +32,7 @@ const SelectInput = ({
   autoComplete
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [field] = useField({

package/dist/es/f/fields/TextInput/TextInput.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, memo } from 'react';
+import { useInsertionEffect, memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useField } from 'formik';
@@ -33,7 +33,7 @@ const TextInput = ({
   autoComplete
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [field] = useField({

package/dist/es/f/fields/TextareaInput/TextareaInput.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, memo } from 'react';
+import { useInsertionEffect, memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useField } from 'formik';
@@ -35,7 +35,7 @@ const TextareaInput = ({
   resize
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const [field] = useField({