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

package/dist/es/f/fields/ChoicesInput/ChoicesInput.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect, memo } from 'react';
+import { memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -9,6 +9,7 @@ import styleNames from '@pareto-engineering/bem/exports';
 
 import { Choice } from "./common";
 import { FormDescription, FormLabel, InputWrapper } from "../../common";
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'choices-input';
 
@@ -35,39 +36,34 @@ const ChoicesInput = ({
   inputSpan,
   desktopInputSpan,
   ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(FormLabel, {
-    name: name,
-    color: labelColor,
-    optional: optional,
-    columnSpan: labelSpan,
-    desktopColumnSpan: desktopLabelSpan
-    // {...otherProps}
-  }, label), /*#__PURE__*/React.createElement(InputWrapper, {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style,
-    columnSpan: inputSpan,
-    desktopColumnSpan: desktopInputSpan
-  }, /*#__PURE__*/React.createElement("div", {
-    className: ['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')
-  }, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
-    className: `x-${color}`,
-    key: choice.value,
-    name: name,
-    id: `${name}-${choice.value}`,
-    multiple: multiple,
-    validate: validate,
-    disabled: disabled
-  }, otherProps, choice)))), /*#__PURE__*/React.createElement(FormDescription, {
-    className: "s-1",
-    description: description,
-    name: name
-  })));
-};
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(FormLabel, {
+  name: name,
+  color: labelColor,
+  optional: optional,
+  columnSpan: labelSpan,
+  desktopColumnSpan: desktopLabelSpan
+  // {...otherProps}
+}, label), /*#__PURE__*/React.createElement(InputWrapper, {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style,
+  columnSpan: inputSpan,
+  desktopColumnSpan: desktopInputSpan
+}, /*#__PURE__*/React.createElement("div", {
+  className: ['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')
+}, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
+  className: `x-${color}`,
+  key: choice.value,
+  name: name,
+  id: `${name}-${choice.value}`,
+  multiple: multiple,
+  validate: validate,
+  disabled: disabled
+}, otherProps, choice)))), /*#__PURE__*/React.createElement(FormDescription, {
+  className: "s-1",
+  description: description,
+  name: name
+})));
 ChoicesInput.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/f/fields/EditorInput/EditorInput.js

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 /* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react';
-import { useInsertionEffect, memo } from 'react';
+import { memo } from 'react';
 import { useFormikContext } from 'formik';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
@@ -15,6 +15,7 @@ import { AutoLinkNode, LinkNode } from '@lexical/link';
 import { ListItemNode, ListNode } from '@lexical/list';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -47,9 +48,6 @@ const EditorInput = ({
   showDebugger
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const formik = useFormikContext();
   const setInitialValue = () => {
     const value = formik.values[name];

package/dist/es/f/fields/LinkInput/LinkInput.js

@@ -1,11 +1,12 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect, memo } from 'react';
+import { memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useField } from 'formik';
 import { FormLabel, FormDescription, InputWrapper } from "../../common";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -35,9 +36,6 @@ const LinkInput = ({
   desktopInputSpan
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [field] = useField({
     name,
     validate

package/dist/es/f/fields/QueryCombobox/QueryCombobox.js

@@ -1,9 +1,10 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useState, useInsertionEffect } from 'react';
+import { useState } from 'react';
 import { useField } from 'formik';
 import { useRelayEnvironment, fetchQuery } from 'react-relay';
 import PropTypes from 'prop-types';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -40,9 +41,6 @@ const QueryCombobox = ({
   promptCreateNewOption
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [, meta, helpers] = useField({
     name,
     validate

package/dist/es/f/fields/RatingsInput/RatingsInput.js

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useState, useInsertionEffect, memo } from 'react';
+import { useState, memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -8,6 +8,7 @@ import styleNames from '@pareto-engineering/bem/exports';
 
 import { Rating } from "./common";
 import { FormLabel, InputWrapper } from "../../common";
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'ratings-input';
 
@@ -34,9 +35,6 @@ const RatingsInput = ({
   desktopInputSpan
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [hover, setHover] = useState(null);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormLabel, {
     name: name,

package/dist/es/f/fields/SelectInput/SelectInput.js

@@ -1,12 +1,13 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect, memo } from 'react';
+import { memo } from 'react';
 import { useField } from 'formik';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { LoadingCircle } from "../../../a";
 import { FormLabel, FormDescription, InputWrapper } from "../../common";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -37,9 +38,6 @@ const SelectInput = ({
   desktopInputSpan
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [field] = useField({
     name,
     validate

package/dist/es/f/fields/TextInput/TextInput.js

@@ -1,11 +1,12 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect, memo } from 'react';
+import { memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useField } from 'formik';
 import { FormLabel, FormDescription, InputWrapper } from "../../common";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -37,9 +38,6 @@ const TextInput = ({
   symbol,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [field] = useField({
     name,
     validate

package/dist/es/f/fields/TextareaInput/TextareaInput.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect, memo } from 'react';
+import { memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useField } from 'formik';
@@ -9,6 +9,7 @@ import { useField } from 'formik';
 // Local Definitions
 
 import { FormLabel, FormDescription, InputWrapper } from "../../common";
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'text-area-input';
 
@@ -37,9 +38,6 @@ const TextareaInput = ({
   desktopInputSpan
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [field] = useField({
     name,
     validate

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.60",
+  "version": "4.0.0-alpha.61",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@lexical/react": "^0.11.3",
-    "@pareto-engineering/assets": "^4.0.0-alpha.59",
+    "@pareto-engineering/assets": "^4.0.0-alpha.61",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
     "@pareto-engineering/styles": "^4.0.0-alpha.57",
     "@pareto-engineering/utils": "^4.0.0-alpha.46",
@@ -71,5 +71,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "15846b86650f5b59e0da2d6b904e381fe3f95fdf"
+  "gitHead": "b369858a6dea3f90d666846140b2b2a666850c30"
 }

package/src/ui/a/AnimatedBlobs/AnimatedBlobs.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 AnimatedBlobs = ({
   width,
   opacity,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={{
-        ...style,
-        '--blob-color':`var(--${color})`,
-        '--height'    :height,
-        '--opacity'   :opacity,
-        '--width'     :width,
-      }}
-    >
-      <div className="shape-blob" />
-      <div className="shape-blob one" />
-      <div className="shape-blob two" />
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      ...style,
+      '--blob-color':`var(--${color})`,
+      '--height'    :height,
+      '--opacity'   :opacity,
+      '--width'     :width,
+    }}
+  >
+    <div className="shape-blob" />
+    <div className="shape-blob one" />
+    <div className="shape-blob two" />
+  </div>
+)
 
 AnimatedBlobs.propTypes = {
   /**

package/src/ui/a/AnimatedGradient/AnimatedGradient.jsx

@@ -3,7 +3,6 @@ import * as React from 'react'
 
 import {
   useEffect,
-  useInsertionEffect,
 } from 'react'
 
 import PropTypes from 'prop-types'
@@ -14,6 +13,8 @@ import { useApp } from 'ui/a'
 
 import { Gradient } from './webGIRenderer'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -27,10 +28,6 @@ const AnimatedGradient = ({
   className: userClassName,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const { userTheme } = useApp()
 
   const isClient = typeof window !== 'undefined'

package/src/ui/a/BlurOverlay/BlurOverlay.jsx

@@ -1,12 +1,12 @@
 /* @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'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'blur-overlay'
@@ -17,28 +17,22 @@ const BlurOverlay = ({
   style,
   children,
   blur,
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        blur && styleNames.modifierActive,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      { children }
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      blur && styleNames.modifierActive,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    { children }
+  </div>
+)
 
 BlurOverlay.propTypes = {
   /**

package/src/ui/a/ContentTree/ContentTree.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
 import { Tree, useContentTree } from './common'
 
@@ -26,10 +26,6 @@ const ContentTree = ({
   color,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const contentTree = useContentTree(target, selectors)
 
   return (

package/src/ui/a/Conversation/Conversation.jsx

@@ -1,14 +1,14 @@
 /* @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 { Card } from 'ui'
 
+import './styles.scss'
+
 // Local Definitions
 
 import { Message } from './common'
@@ -31,37 +31,31 @@ const Conversation = ({
   children,
   backgroundColor,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <ConversationContext.Provider
-      value={{
-        ourColor,
-        theirColor,
-      }}
+}) => (
+  <ConversationContext.Provider
+    value={{
+      ourColor,
+      theirColor,
+    }}
+  >
+    <Card
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `y-${backgroundColor}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
     >
-      <Card
-        id={id}
-        className={[
-          baseClassName,
-          componentClassName,
-          userClassName,
-          `y-${backgroundColor}`,
-        ]
-          .filter((e) => e)
-          .join(' ')}
-        style={style}
-      >
-        <Card.Section>
-          {children}
-        </Card.Section>
-      </Card>
-    </ConversationContext.Provider>
-  )
-}
+      <Card.Section>
+        {children}
+      </Card.Section>
+    </Card>
+  </ConversationContext.Provider>
+)
 
 Conversation.propTypes = {
   /**

package/src/ui/a/DotInfo/DotInfo.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,33 +26,27 @@ const DotInfo = ({
   colorFalse,
   colorEmpty,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-
-        baseClassName,
-        booleanValue === false && `x-${colorFalse}`,
-        booleanValue === true && `x-${colorTrue}`,
-        [null, undefined].includes(booleanValue) && `empty x-${colorEmpty}`,
-
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={{
-        '--height':height,
-        ...style,
-      }}
-    />
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+
+      baseClassName,
+      booleanValue === false && `x-${colorFalse}`,
+      booleanValue === true && `x-${colorTrue}`,
+      [null, undefined].includes(booleanValue) && `empty x-${colorEmpty}`,
+
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      '--height':height,
+      ...style,
+    }}
+  />
+)
 
 DotInfo.propTypes = {
   /**