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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.4",
+  "version": "4.0.0-alpha.5",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -47,12 +47,12 @@
     "jest-environment-jsdom": "^29.5.0",
     "sass-loader": "^13.2.0",
     "storybook": "^7.0.0-rc.3",
-    "style-loader": "^3.3.1"
+    "style-loader": "^3.3.2"
   },
   "dependencies": {
     "@pareto-engineering/assets": "^4.0.0-alpha.3",
-    "@pareto-engineering/bem": "^4.0.0-alpha.3",
-    "@pareto-engineering/styles": "^4.0.0-alpha.3",
+    "@pareto-engineering/bem": "^4.0.0-alpha.5",
+    "@pareto-engineering/styles": "^4.0.0-alpha.5",
     "date-fns": "^2.29.3",
     "downshift": "^6.1.12",
     "formik": "^2.2.9",
@@ -67,5 +67,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "df54c3dc5048159fe8a037a3dc8feb2d91a07417"
+  "gitHead": "dd704a71588b078c1c13bc1aa54b26474df3d311"
 }

package/src/ui/a/ContentTree/ContentTree.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 ContentTree = ({
   selectors,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 
@@ -77,7 +77,7 @@ ContentTree.propTypes = {
    */
   target:PropTypes.oneOfType([
     PropTypes.func,
-    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+    PropTypes.shape({ current: PropTypes.instanceOf(React.Element) }),
   ]),
 }
 

package/src/ui/a/Conversation/Conversation.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 Conversation = ({
   hasTriangle,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/a/DotInfo/DotInfo.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 DotInfo = ({
   colorEmpty,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/a/Figure/Figure.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 Figure = ({
   alt,
   caption,
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/a/HamburgerButton/HamburgerButton.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 HamburgerButton = ({
   color,
   ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/a/IconList/IconList.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 IconList = ({
   iconHover,
   ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/a/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'
 
@@ -25,7 +25,7 @@ const Label = ({
   isCompact,
   isGhost,
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/a/LoadingCircle/LoadingCircle.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'
 
@@ -26,7 +26,7 @@ const LoadingCircle = ({
   style,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/a/People/People.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 People = ({
   columnWidth,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

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, useLayoutEffect } from 'react'
+import { useRef, useInsertionEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -31,7 +31,7 @@ const Popover = ({
   offsetYPx,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 
@@ -141,7 +141,7 @@ Popover.propTypes = {
    */
   parentRef:PropTypes.oneOfType([
     PropTypes.func,
-    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+    PropTypes.shape({ current: PropTypes.instanceOf(React.Element) }),
   ]),
 }
 

package/src/ui/a/ProgressBar/ProgressBar.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'
 
@@ -26,7 +26,7 @@ const ProgressBar = ({
   height,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

package/src/ui/a/Quote/Quote.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'
 
@@ -26,7 +26,7 @@ const Quote = ({
   color,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

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