@pareto-engineering/design-system 4.0.0-alpha.59 → 4.0.0-alpha.61

package/src/ui/a/LoadingCircle/LoadingCircle.jsx

@@ -1,12 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -25,57 +25,51 @@ const LoadingCircle = ({
   animationDuration,
   style,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
+}) => (
+  <div
+    id={id}
+    className={[
+
+      baseClassName,
+
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      '--height-width':heightWidth,
+      '--stroke-width':strokeWidth,
+      ...style,
+    }}
+    // {...otherProps}
+  >
+    <svg
+      viewBox="25 25 50 50"
+      className="svg-circle"
       id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
+      x="0px"
+      y="0px"
+      xmlSpace="preserve"
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      preserveAspectRatio="xMinYMin meet"
       style={{
-        '--height-width':heightWidth,
-        '--stroke-width':strokeWidth,
-        ...style,
+        '--animation-duration':`${animationDuration}s`,
       }}
-      // {...otherProps}
     >
-      <svg
-        viewBox="25 25 50 50"
-        className="svg-circle"
-        id={id}
-        x="0px"
-        y="0px"
-        xmlSpace="preserve"
-        xmlns="http://www.w3.org/2000/svg"
-        version="1.1"
-        preserveAspectRatio="xMinYMin meet"
-        style={{
-          '--animation-duration':`${animationDuration}s`,
-        }}
-      >
-        <circle
-          className="path"
-          cx="50"
-          cy="50"
-          r="20"
-          fill="none"
-          strokeLinecap={strokeLinecap}
-          strokeMiterlimit="10"
-        />
-      </svg>
-    </div>
-  )
-}
+      <circle
+        className="path"
+        cx="50"
+        cy="50"
+        r="20"
+        fill="none"
+        strokeLinecap={strokeLinecap}
+        strokeMiterlimit="10"
+      />
+    </svg>
+  </div>
+)
 
 LoadingCircle.propTypes = {
   /**

package/src/ui/a/MetaCard/MetaCard.jsx

@@ -1,12 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -23,29 +23,23 @@ const MetaCard = ({
   children,
   hasBackgroundBlur,
   spaced,
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        hasBackgroundBlur && styleNames.modifierBlur,
-        spaced && styleNames.modifierSpaced,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      {children}
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      hasBackgroundBlur && styleNames.modifierBlur,
+      spaced && styleNames.modifierSpaced,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    {children}
+  </div>
+)
 
 MetaCard.propTypes = {
   /**

package/src/ui/a/People/People.jsx

@@ -1,8 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
@@ -11,6 +9,8 @@ import styleNames from '@pareto-engineering/bem/exports'
 
 import { Person } from './common'
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'people'
@@ -26,35 +26,29 @@ const People = ({
   children,
   columnWidth,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-        'u1',
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={{
-        ...style,
-        '--image-size'  :imageSize,
-        '--column-width':columnWidth,
-      }}
-      // {...otherProps}
-    >
-      {children}
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+
+      baseClassName,
+
+      componentClassName,
+      userClassName,
+      'u1',
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      ...style,
+      '--image-size'  :imageSize,
+      '--column-width':columnWidth,
+    }}
+    // {...otherProps}
+  >
+    {children}
+  </div>
+)
 
 People.propTypes = {
   /**

package/src/ui/a/Popover/Popover.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useRef, useInsertionEffect } from 'react'
+import { useRef } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -10,6 +10,8 @@ import styleNames from '@pareto-engineering/bem/exports'
 // Local Definitions
 import { useDynamicPosition } from 'ui/utils'
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'popover'
@@ -31,10 +33,6 @@ const Popover = ({
   offsetYPx,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const popoverRef = useRef(null)
   const {
     primaryPosition,

package/src/ui/a/ProgressBar/ProgressBar.jsx

@@ -1,12 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -25,35 +25,29 @@ const ProgressBar = ({
   progress,
   height,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        attached && styleNames.modifierAttached,
-        color && `x-${color}`,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={{
-        '--progress':progress,
-        '--height'  :height,
-        ...style,
-      }}
-      data-length="50%"
-      // {...otherProps}
-    />
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+
+      baseClassName,
+
+      componentClassName,
+      attached && styleNames.modifierAttached,
+      color && `x-${color}`,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      '--progress':progress,
+      '--height'  :height,
+      ...style,
+    }}
+    data-length="50%"
+    // {...otherProps}
+  />
+)
 
 ProgressBar.propTypes = {
   /**

package/src/ui/a/Quote/Quote.jsx

@@ -1,12 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -25,36 +25,30 @@ const Quote = ({
   author,
   color,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <figure
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `x-${color}`,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      <blockquote cite={source} className="blockquote uc">
-        <p className="quotation c-x md-s0 s-1">
-          {children}
-        </p>
-      </blockquote>
-      <figcaption className="figcaption">
-        <cite>{author}</cite>
-      </figcaption>
-    </figure>
-  )
-}
+}) => (
+  <figure
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      `x-${color}`,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    // {...otherProps}
+  >
+    <blockquote cite={source} className="blockquote uc">
+      <p className="quotation c-x md-s0 s-1">
+        {children}
+      </p>
+    </blockquote>
+    <figcaption className="figcaption">
+      <cite>{author}</cite>
+    </figcaption>
+  </figure>
+)
 
 Quote.propTypes = {
   /**

package/src/ui/a/Removable/Removable.jsx

@@ -1,11 +1,10 @@
 /* @pareto-engineering/generator-front 1.1.1-alpha.1 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
+import './styles.scss'
 
 // Local Definitions
 
@@ -23,33 +22,27 @@ const Removable = ({
   handleClose,
   children,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      {children}
-      <button type="button" className="close-button" onClick={handleClose || (() => null)}>
-        <span className="icon">Y</span>
-      </button>
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+
+      baseClassName,
+
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    // {...otherProps}
+  >
+    {children}
+    <button type="button" className="close-button" onClick={handleClose || (() => null)}>
+      <span className="icon">Y</span>
+    </button>
+  </div>
+)
 
 Removable.propTypes = {
   /**

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

@@ -1,12 +1,14 @@
 /* @pareto-engineering/generator-front 1.0.3 */
 import * as React from 'react'
-import { useInsertionEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
 import { UseSVG } from './common'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -34,10 +36,6 @@ const SVG = ({
   animated,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  })
-
   const useSVGProps = useMemo(() => ({
     className:useClassName,
     source,

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

@@ -1,11 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect, useState, useRef } from 'react'
+import { useState, useRef } from 'react'
 
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
+import './styles.scss'
 
 // Local Definitions
 
@@ -24,9 +25,6 @@ const SnapScroller = ({
   noScrollOnDesktop,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
   const [isDragging, setIsDragging] = useState(false)
   const [startX, setStartX] = useState(0)
   const [startScrollX, setStartScrollX] = useState(0)

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

@@ -1,12 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -22,29 +22,23 @@ const Spinner = ({
   style,
   color,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `x-${color}`,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      <div className="loader" />
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      `x-${color}`,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    // {...otherProps}
+  >
+    <div className="loader" />
+  </div>
+)
 
 Spinner.propTypes = {
   /**