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

package/src/ui/a/SVG/SVG.jsx

@@ -1,6 +1,6 @@
 /* @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'
@@ -34,7 +34,7 @@ const SVG = ({
   animated,
   ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   })
 

package/src/ui/a/SnapScroller/SnapScroller.jsx

@@ -1,7 +1,7 @@
 /* @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'
 
@@ -24,7 +24,7 @@ const SnapScroller = ({
   noScrollOnDesktop,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/a/Spinner/Spinner.jsx

@@ -1,7 +1,7 @@
 /* @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'
 
@@ -23,7 +23,7 @@ const Spinner = ({
   color,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/a/Timestamp/Timestamp.jsx

@@ -2,7 +2,7 @@
 import * as React from 'react'
 
 import {
-  useLayoutEffect, useMemo, useCallback, useState,
+  useInsertionEffect, useMemo, useCallback, useState,
 } from 'react'
 
 import PropTypes from 'prop-types'
@@ -36,7 +36,7 @@ const Timestamp = ({
   // ...otherProps
   as:Element,
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/b/Button/Button.jsx

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

package/src/ui/b/Logo/Logo.jsx

@@ -1,7 +1,7 @@
 /* @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'
 
@@ -64,7 +64,7 @@ const Logo = ({
   square,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/b/Page/Page.jsx

@@ -1,6 +1,6 @@
 /* @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')
   }, [])
 

package/src/ui/b/SocialMediaButton/SocialMediaButton.jsx

@@ -1,7 +1,7 @@
 /* @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'
 
@@ -52,7 +52,7 @@ const SocialMediaButton = ({
 }) => {
   const applicationContext = useApp()
 
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/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/src/ui/b/ThemeSelector/ThemeSelector.jsx

@@ -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'
 
@@ -29,7 +29,7 @@ const ThemeSelector = ({
     setPreferredTheme,
   } = useApp()
 
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/b/Title/Title.jsx

@@ -1,12 +1,13 @@
 /* @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,31 +29,36 @@ const Title = ({
   subtitleStyle,
   subtitleProps,
   // ...otherProps
-}) => (
-  <div
-    id={id}
-    className={[
-      baseClassName,
-      componentClassName,
-      userClassName,
-    ]
-      .filter((e) => e)
-      .join(' ')}
-    style={style}
-  >
-    <HeadingWrapper
+}) => {
+  useInsertionEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
       className={[
-        headingClassName,
-        styleNames.heading,
+        baseClassName,
+        componentClassName,
+        userClassName,
       ]
         .filter((e) => e)
         .join(' ')}
-      style={headingStyle}
-      {...headingProps}
+      style={style}
     >
-      { heading }
-    </HeadingWrapper>
-    { subtitle
+      <HeadingWrapper
+        className={[
+          headingClassName,
+          styleNames.heading,
+        ]
+          .filter((e) => e)
+          .join(' ')}
+        style={headingStyle}
+        {...headingProps}
+      >
+        { heading }
+      </HeadingWrapper>
+      { subtitle
     && (
     <SubtitleWrapper
       className={[
@@ -67,8 +73,9 @@ const Title = ({
       { subtitle }
     </SubtitleWrapper>
     )}
-  </div>
-)
+    </div>
+  )
+}
 
 Title.propTypes = {
   /**

package/src/ui/c/ContentSlides/ContentSlides.jsx

@@ -1,7 +1,7 @@
 /* @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'
 
@@ -64,7 +64,7 @@ const ContentSlides = ({
   isDebug,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 
@@ -123,7 +123,7 @@ const ContentSlides = ({
     })
   }
 
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     setCurrentStep(currentStepIndex)
   },
   [currentStepIndex])

package/src/ui/c/Modal/Modal.jsx

@@ -1,7 +1,7 @@
 /* @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'
 
@@ -28,7 +28,7 @@ const Modal = ({
   close,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/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/src/ui/c/Shortener/Shortener.jsx

@@ -1,7 +1,7 @@
 /* @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'
 
@@ -31,7 +31,7 @@ const Shortener = ({
 
   countLetters,
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/c/SocialMediaShareButton/SocialMediaShareButton.jsx

@@ -1,7 +1,7 @@
 /* @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'
 
@@ -25,7 +25,7 @@ const SocialMediaShareButton = ({
   type,
   color,
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/f/FormInput/FormInput.jsx

@@ -1,7 +1,7 @@
 /* @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'
 
@@ -33,7 +33,7 @@ const FormInput = ({
   disabled,
   ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/f/common/Debugger/Debugger.jsx

@@ -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'
 
@@ -21,7 +21,7 @@ const Debugger = ({
   initialIsOpen,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/f/common/Description/Description.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useLayoutEffect } from 'react'
+import { useInsertionEffect } from 'react'
 
 import { useField } from 'formik'
 
@@ -27,7 +27,7 @@ const Description = ({
   color,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/f/common/Label/Label.jsx

@@ -1,7 +1,7 @@
 /* @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'
 
@@ -27,7 +27,7 @@ const Label = ({
   as:Wrapper,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/f/fields/Checkbox/Checkbox.jsx

@@ -1,7 +1,7 @@
 /* @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'
 
@@ -31,7 +31,7 @@ const Checkbox = ({
   optional,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/f/fields/ChoicesInput/ChoicesInput.jsx

@@ -1,7 +1,7 @@
 /* @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'
 
@@ -37,7 +37,7 @@ const ChoicesInput = ({
   disabled,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/f/fields/QueryCombobox/QueryCombobox.jsx

@@ -1,7 +1,7 @@
 /* @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'
 
@@ -37,7 +37,7 @@ const QueryCombobox = ({
   validate,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/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/src/ui/f/fields/RatingsInput/RatingsInput.jsx

@@ -1,7 +1,7 @@
 /* @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'
 
@@ -35,7 +35,7 @@ const RatingsInput = ({
   optional,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/f/fields/SelectInput/SelectInput.jsx

@@ -1,7 +1,7 @@
 /* @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'
 
@@ -38,7 +38,7 @@ const SelectInput = ({
   autoComplete,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/f/fields/TextInput/TextInput.jsx

@@ -1,7 +1,7 @@
 /* @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'
 
@@ -38,7 +38,7 @@ const TextInput = ({
   autoComplete,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/f/fields/TextareaInput/TextareaInput.jsx

@@ -1,7 +1,7 @@
 /* @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'
 
@@ -40,7 +40,7 @@ const TextareaInput = ({
   resize,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])