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

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')
   }, [])