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

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 = {
   /**

package/src/ui/a/TextSteps/TextSteps.jsx

@@ -1,10 +1,9 @@
 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
 
@@ -21,38 +20,32 @@ const Steps = ({
   style,
   items,
   title,
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        'grid',
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      {title && (
-      <p className="title h4">
-        {title}
-      </p>
-      )}
-      {items.map((item, i) => (
-        <>
-          <div className=" number h3 start-1 span-2 md-start-1 md-span-2"><p>{i + 1}</p></div>
-          <div className=" description"><p>{item}</p></div>
-        </>
-      ))}
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      'grid',
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    {title && (
+    <p className="title h4">
+      {title}
+    </p>
+    )}
+    {items.map((item, i) => (
+      <>
+        <div className=" number h3 start-1 span-2 md-start-1 md-span-2"><p>{i + 1}</p></div>
+        <div className=" description"><p>{item}</p></div>
+      </>
+    ))}
+  </div>
+)
 
 Steps.propTypes = {
   /**

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

@@ -2,17 +2,19 @@
 import * as React from 'react'
 
 import {
-  useInsertionEffect, useMemo, useCallback, useState,
+  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'
 
+import styleNames from '@pareto-engineering/bem/exports'
+
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -36,10 +38,6 @@ const Timestamp = ({
   // ...otherProps
   as:Element,
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [currentDisplay, setCurrentDisplay] = useState(enabledFormats[0])
 
   const formatMap = useMemo(() => ({

package/src/ui/a/Tip/Tip.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
@@ -26,32 +26,26 @@ const Tip = ({
   color,
   backgroundColor,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <Wrapper
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `x-${backgroundColor}`,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      <span className={`x-${color} c-x icon`}>
-        {icon}
-      </span>
-      {children}
-    </Wrapper>
-  )
-}
+}) => (
+  <Wrapper
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      `x-${backgroundColor}`,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    // {...otherProps}
+  >
+    <span className={`x-${color} c-x icon`}>
+      {icon}
+    </span>
+    {children}
+  </Wrapper>
+)
 
 Tip.propTypes = {
   /**

package/src/ui/a/ToggleSwitch/ToggleSwitch.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
@@ -24,41 +24,35 @@ const ToggleSwitch = ({
   checked,
   size,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <button
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={{
-        '--size':size,
-        ...style,
-      }}
-      type="button"
-      // {...otherProps}
-    >
-      <input
-        type="checkbox"
-        id="switch"
-        checked={checked}
-        onChange={handleOnChange}
-      />
-      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-      <label htmlFor="switch" />
-    </button>
-  )
-}
+}) => (
+  <button
+    id={id}
+    className={[
+
+      baseClassName,
+
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      '--size':size,
+      ...style,
+    }}
+    type="button"
+    // {...otherProps}
+  >
+    <input
+      type="checkbox"
+      id="switch"
+      checked={checked}
+      onChange={handleOnChange}
+    />
+    {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+    <label htmlFor="switch" />
+  </button>
+)
 
 ToggleSwitch.propTypes = {
   /**

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

@@ -1,6 +1,5 @@
 /* @pareto-engineering/generator-front 0.2.4 */
 import * as React from 'react'
-import { useInsertionEffect } from 'react'
 import PropTypes from 'prop-types'
 
 // Package-level Imports
@@ -29,10 +28,6 @@ const Button = ({
   arrowDirection,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const buttonText = isSimple ? <span className={styleNames.modifierUnderlined}>{children}</span>
     : children
 

package/src/ui/b/Button/common/Group/Group.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
@@ -19,28 +19,22 @@ const Group = ({
   style,
   children,
   ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      {...otherProps}
-    >
-      {children}
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    {...otherProps}
+  >
+    {children}
+  </div>
+)
 
 Group.propTypes = {
   /**

package/src/ui/b/Card/Card.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 { ProgressBar } from 'ui'
 
 import { Group, Section } from './common'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -27,35 +27,29 @@ const Card = ({
   children,
   progress,
   progressBarColor,
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      {progress && (
-        <ProgressBar
-          attached
-          color={progressBarColor}
-          progress={progress}
-          height=".5em"
-        />
-      )}
-      {children}
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    {progress && (
+      <ProgressBar
+        attached
+        color={progressBarColor}
+        progress={progress}
+        height=".5em"
+      />
+    )}
+    {children}
+  </div>
+)
 
 Card.propTypes = {
   /**