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

package/dist/cjs/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js

@@ -23,7 +23,7 @@ query QueryLoaderHelloQuery {
   hello
 }
 */
-var node /*: ConcreteRequest*/ = function () {
+const node /*: ConcreteRequest*/ = function () {
   var v0 = [{
     "alias": null,
     "args": null,

package/dist/cjs/test/QueryLoader/common/PreloadedTestData/PreloadedTestData.js

@@ -8,20 +8,20 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactRelay = require("react-relay");
 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); }
+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; }
 /* @pareto-engineering/generator-front 1.0.12 */
 
 /**
  * This is the component description.
  */
-var PreloadedTestData = _ref => {
-  var {
+const PreloadedTestData = _ref => {
+  let {
     query,
     queryReference
     // ...otherProps
   } = _ref;
-  var data = (0, _reactRelay.usePreloadedQuery)(query, queryReference);
+  const data = (0, _reactRelay.usePreloadedQuery)(query, queryReference);
   return /*#__PURE__*/React.createElement("pre", null, JSON.stringify(data, null, 2));
 };
 PreloadedTestData.propTypes = {

package/dist/cjs/test/QueryLoader/common/PreloadedTestData/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "PreloadedTestData", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _PreloadedTestData.default;
   }
 });

package/dist/cjs/test/QueryLoader/common/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "PreloadedTestData", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _PreloadedTestData.PreloadedTestData;
   }
 });

package/dist/cjs/test/QueryLoader/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "QueryLoader", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _QueryLoader.default;
   }
 });

package/dist/cjs/test/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "QueryLoader", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _QueryLoader.QueryLoader;
   }
 });

package/dist/cjs/utils/hooks/index.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "useDynamicPosition", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _useDynamicPosition.default;
   }
 });
 Object.defineProperty(exports, "useWindowSize", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _useWindowSize.default;
   }
 });

package/dist/cjs/utils/hooks/useDynamicPosition.js

@@ -8,9 +8,9 @@ var _react = require("react");
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 var _useWindowSize = _interopRequireDefault(require("./useWindowSize"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var verticalPositions = ['top', 'bottom'];
-var horizontalPositions = ['left', 'right'];
-var findCompatiblePositions = (primary, secondaryArray) => {
+const verticalPositions = ['top', 'bottom'];
+const horizontalPositions = ['left', 'right'];
+const findCompatiblePositions = (primary, secondaryArray) => {
   if (verticalPositions.includes(primary)) {
     return secondaryArray.filter(secondary => horizontalPositions.includes(secondary));
   }
@@ -19,8 +19,8 @@ var findCompatiblePositions = (primary, secondaryArray) => {
   }
   return [];
 };
-var useDynamicPosition = _ref => {
-  var {
+const useDynamicPosition = _ref => {
+  let {
     elementRef,
     parentRef,
     preferredPrimaryOrder,
@@ -29,44 +29,44 @@ var useDynamicPosition = _ref => {
     offsetXPx,
     throttleMs = 200
   } = _ref;
-  var isClient = typeof window === 'object';
-  var {
+  const isClient = typeof window === 'object';
+  const {
     height: currentHeight,
     width: currentWidth
   } = (0, _useWindowSize.default)();
-  var [primaryPosition, setPrimaryPosition] = (0, _react.useState)(preferredPrimaryOrder[0]);
-  var compatibleSecondaryPositions = (0, _react.useMemo)(() => findCompatiblePositions(primaryPosition, preferredSecondaryOrder), [primaryPosition, preferredSecondaryOrder]);
-  var [secondaryPosition, setSecondaryPosition] = (0, _react.useState)(compatibleSecondaryPositions[0]);
-  var handle = (0, _react.useCallback)((0, _throttle.default)(() => {
-    var parentNode = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
-    var elementNode = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
-    var {
+  const [primaryPosition, setPrimaryPosition] = (0, _react.useState)(preferredPrimaryOrder[0]);
+  const compatibleSecondaryPositions = (0, _react.useMemo)(() => findCompatiblePositions(primaryPosition, preferredSecondaryOrder), [primaryPosition, preferredSecondaryOrder]);
+  const [secondaryPosition, setSecondaryPosition] = (0, _react.useState)(compatibleSecondaryPositions[0]);
+  const handle = (0, _react.useCallback)((0, _throttle.default)(() => {
+    const parentNode = parentRef?.current;
+    const elementNode = elementRef?.current;
+    const {
       top: parentTop,
       bottom: parentBottom,
       right: parentRight,
       left: parentLeft
-    } = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.getBoundingClientRect()) || {};
-    var {
+    } = parentNode?.getBoundingClientRect() || {};
+    const {
       width: elementWidth,
       height: elementHeight
-    } = (elementNode === null || elementNode === void 0 ? void 0 : elementNode.getBoundingClientRect()) || {};
-    var availablePositions = {
+    } = elementNode?.getBoundingClientRect() || {};
+    const availablePositions = {
       top: parentTop >= elementHeight,
       bottom: currentHeight - parentBottom >= elementHeight,
       right: parentRight >= elementWidth,
       left: currentWidth - parentLeft >= elementWidth
     };
-    for (var i = 0; i < preferredPrimaryOrder.length; i += 1) {
-      var position = preferredPrimaryOrder[i];
+    for (let i = 0; i < preferredPrimaryOrder.length; i += 1) {
+      const position = preferredPrimaryOrder[i];
       if (availablePositions[position]) {
         setPrimaryPosition(position);
         break;
       }
     }
-    for (var _i = 0; _i < compatibleSecondaryPositions.length; _i += 1) {
-      var _position = compatibleSecondaryPositions[_i];
-      if (availablePositions[_position]) {
-        setSecondaryPosition(_position);
+    for (let i = 0; i < compatibleSecondaryPositions.length; i += 1) {
+      const position = compatibleSecondaryPositions[i];
+      if (availablePositions[position]) {
+        setSecondaryPosition(position);
         break;
       }
     }

package/dist/cjs/utils/hooks/useWindowSize.js

@@ -7,15 +7,15 @@ exports.default = void 0;
 var _react = require("react");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var useWindowSize = function useWindowSize() {
-  var debounceMs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 700;
-  var isClient = typeof window === 'object';
-  var getSize = () => ({
+const useWindowSize = function () {
+  let debounceMs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 700;
+  const isClient = typeof window === 'object';
+  const getSize = () => ({
     width: isClient ? window.innerWidth : undefined,
     height: isClient ? window.innerHeight : undefined
   });
-  var [windowSize, setWindowSize] = (0, _react.useState)(getSize);
-  var handle = (0, _react.useCallback)((0, _debounce.default)(() => {
+  const [windowSize, setWindowSize] = (0, _react.useState)(getSize);
+  const handle = (0, _react.useCallback)((0, _debounce.default)(() => {
     setWindowSize(getSize());
   }, debounceMs));
   (0, _react.useEffect)(() => {

package/dist/cjs/utils/index.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "useDynamicPosition", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _hooks.useDynamicPosition;
   }
 });
 Object.defineProperty(exports, "useWindowSize", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _hooks.useWindowSize;
   }
 });

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", {

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(() => {