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

package/dist/es/a/SnapScroller/SnapScroller.js

@@ -1,8 +1,9 @@
 /* @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
 
@@ -20,9 +21,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/dist/es/a/Spinner/Spinner.js

@@ -1,8 +1,8 @@
 /* @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
 
@@ -18,19 +18,14 @@ const Spinner = ({
   style,
   color
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
-    style: style
-    // {...otherProps}
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "loader"
-  }));
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
+  style: style
+  // {...otherProps}
+}, /*#__PURE__*/React.createElement("div", {
+  className: "loader"
+}));
 Spinner.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/a/TextSteps/TextSteps.js

@@ -1,7 +1,7 @@
 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
 
@@ -17,22 +17,17 @@ const Steps = ({
   style,
   items,
   title
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, 'grid'].filter(e => e).join(' '),
-    style: style
-  }, title && /*#__PURE__*/React.createElement("p", {
-    className: "title h4"
-  }, title), items.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: " number h3 start-1 span-2 md-start-1 md-span-2"
-  }, /*#__PURE__*/React.createElement("p", null, i + 1)), /*#__PURE__*/React.createElement("div", {
-    className: " description"
-  }, /*#__PURE__*/React.createElement("p", null, item)))));
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, 'grid'].filter(e => e).join(' '),
+  style: style
+}, title && /*#__PURE__*/React.createElement("p", {
+  className: "title h4"
+}, title), items.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  className: " number h3 start-1 span-2 md-start-1 md-span-2"
+}, /*#__PURE__*/React.createElement("p", null, i + 1)), /*#__PURE__*/React.createElement("div", {
+  className: " description"
+}, /*#__PURE__*/React.createElement("p", null, item)))));
 Steps.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/a/Timestamp/Timestamp.js

@@ -1,9 +1,10 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect, useMemo, useCallback, useState } from 'react';
+import { 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
 
@@ -27,9 +28,6 @@ const Timestamp = ({
   // ...otherProps
   as: Element
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [currentDisplay, setCurrentDisplay] = useState(enabledFormats[0]);
   const formatMap = useMemo(() => ({
     unix: unix => Number(unix),

package/dist/es/a/Tip/Tip.js

@@ -1,8 +1,8 @@
 /* @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
 
@@ -22,19 +22,14 @@ const Tip = ({
   color,
   backgroundColor
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement(Wrapper, {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${backgroundColor}`].filter(e => e).join(' '),
-    style: style
-    // {...otherProps}
-  }, /*#__PURE__*/React.createElement("span", {
-    className: `x-${color} c-x icon`
-  }, icon), children);
-};
+}) => /*#__PURE__*/React.createElement(Wrapper, {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, `x-${backgroundColor}`].filter(e => e).join(' '),
+  style: style
+  // {...otherProps}
+}, /*#__PURE__*/React.createElement("span", {
+  className: `x-${color} c-x icon`
+}, icon), children);
 Tip.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/a/ToggleSwitch/ToggleSwitch.js

@@ -1,8 +1,8 @@
 /* @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
 
@@ -16,32 +16,27 @@ const ToggleSwitch = ({
   id,
   className: userClassName,
   style,
-  handleOnClick,
+  handleOnChange,
   checked,
   size
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("button", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: {
-      '--size': size,
-      ...style
-    },
-    onClick: handleOnClick,
-    type: "button"
-    // {...otherProps}
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    id: "switch",
-    checked: checked
-  }), /*#__PURE__*/React.createElement("label", {
-    htmlFor: "switch"
-  }));
-};
+}) => /*#__PURE__*/React.createElement("button", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: {
+    '--size': size,
+    ...style
+  },
+  type: "button"
+  // {...otherProps}
+}, /*#__PURE__*/React.createElement("input", {
+  type: "checkbox",
+  id: "switch",
+  checked: checked,
+  onChange: handleOnChange
+}), /*#__PURE__*/React.createElement("label", {
+  htmlFor: "switch"
+}));
 ToggleSwitch.propTypes = {
   /**
    * The HTML id for this element
@@ -58,7 +53,7 @@ ToggleSwitch.propTypes = {
   /**
    * The onClick handler for this element
    */
-  handleOnClick: PropTypes.func,
+  handleOnChange: PropTypes.func,
   /**
    * The checked state of this element
    */

package/dist/es/b/Button/Button.js

@@ -1,7 +1,6 @@
 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 0.2.4 */
 import * as React from 'react';
-import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 
 // Package-level Imports
@@ -29,9 +28,6 @@ const Button = ({
   arrowDirection,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const buttonText = isSimple ? /*#__PURE__*/React.createElement("span", {
     className: styleNames.modifierUnderlined
   }, children) : children;

package/dist/es/b/Button/common/Group/Group.js

@@ -1,9 +1,9 @@
 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 } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -15,16 +15,11 @@ const Group = ({
   style,
   children,
   ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, otherProps), children);
-};
+}) => /*#__PURE__*/React.createElement("div", _extends({
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+}, otherProps), children);
 Group.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/b/Card/Card.js

@@ -1,10 +1,10 @@
 /* @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 { ProgressBar } from "../..";
 import { Group, Section } from "./common";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -21,21 +21,16 @@ const Card = ({
   children,
   progress,
   progressBarColor
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, progress && /*#__PURE__*/React.createElement(ProgressBar, {
-    attached: true,
-    color: progressBarColor,
-    progress: progress,
-    height: ".5em"
-  }), children);
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+}, progress && /*#__PURE__*/React.createElement(ProgressBar, {
+  attached: true,
+  color: progressBarColor,
+  progress: progress,
+  height: ".5em"
+}), children);
 Card.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/b/Card/common/Group/Group.js

@@ -1,10 +1,10 @@
 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 } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { SnapScroller } from "../../../..";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -19,9 +19,6 @@ const Group = ({
   desktopType,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const Wrapper = type === 'snap-scroller' ? SnapScroller : 'div';
   const wrapperProps = type === 'snap-scroller' && desktopType !== 'snap-scroller' ? {
     noScrollOnDesktop: true

package/dist/es/b/Logo/Logo.js

@@ -1,9 +1,10 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useMemo, useInsertionEffect } from 'react';
+import { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { SVG } from "../../a";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -50,9 +51,6 @@ const Logo = ({
   square
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const contentMap = square ? contentMapSquare : contentMapWithName;
   const svgConfig = useMemo(() => contentMap[variant], [variant]);
   return /*#__PURE__*/React.createElement(SVG, {

package/dist/es/b/Page/Page.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.0 */
 import * as React from 'react';
-import { useInsertionEffect, useEffect } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useApp } from "../../a";
@@ -9,8 +9,7 @@ import { useApp } from "../../a";
 // Imports from the component folder
 import { PageHelmet, Section } from "./common";
 import Context from "./Context";
-
-// import('./styles.scss')
+import "./styles.scss";
 
 // Local Definitions
 const baseClassName = styleNames.base;
@@ -31,9 +30,6 @@ const Page = ({
   Background,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const {
     userTheme
   } = useApp();

package/dist/es/b/SocialMediaButton/SocialMediaButton.js

@@ -1,10 +1,10 @@
 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 } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useApp } from "../../a";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -50,9 +50,6 @@ const SocialMediaButton = ({
   ...otherProps
 }) => {
   const applicationContext = useApp();
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const content = type && defaultsMap[type];
   const href = link || applicationContext?.SOCIAL?.[content?.link];
   return /*#__PURE__*/React.createElement("a", {

package/dist/es/b/ThemeSelector/ThemeSelector.js

@@ -1,9 +1,10 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect, useCallback } from 'react';
+import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useApp, ToggleSwitch } from "../../a";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -23,9 +24,6 @@ const ThemeSelector = ({
     userTheme,
     setPreferredTheme
   } = useApp();
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const loopThemes = useCallback(() => {
     const current = themes.indexOf(userTheme);
     setPreferredTheme(themes[(current + 1) % themes.length]);
@@ -38,7 +36,7 @@ const ThemeSelector = ({
     className: "c-x x-paragraph"
   }, userTheme && userTheme[0].toUpperCase() + userTheme.slice(1), ' ', "Theme"), /*#__PURE__*/React.createElement(ToggleSwitch, {
     checked: userTheme === 'dark',
-    handleOnClick: loopThemes
+    handleOnChange: loopThemes
   }));
 };
 ThemeSelector.propTypes = {

package/dist/es/b/Title/Title.js

@@ -1,15 +1,11 @@
 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 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')
-
 // Helper Definition
 const baseClassName = styleNames.base;
 const componentClassName = 'title';
@@ -29,22 +25,17 @@ const Title = ({
   subtitleStyle,
   subtitleProps
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement(HeadingWrapper, _extends({
-    className: [headingClassName, styleNames.heading].filter(e => e).join(' '),
-    style: headingStyle
-  }, headingProps), heading), subtitle && /*#__PURE__*/React.createElement(SubtitleWrapper, _extends({
-    className: [subtitleClassName, styleNames.subtitle].filter(e => e).join(' '),
-    style: subtitleStyle
-  }, subtitleProps), subtitle));
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+}, /*#__PURE__*/React.createElement(HeadingWrapper, _extends({
+  className: [headingClassName, styleNames.heading].filter(e => e).join(' '),
+  style: headingStyle
+}, headingProps), heading), subtitle && /*#__PURE__*/React.createElement(SubtitleWrapper, _extends({
+  className: [subtitleClassName, styleNames.subtitle].filter(e => e).join(' '),
+  style: subtitleStyle
+}, subtitleProps), subtitle));
 Title.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/c/ContentSlides/ContentSlides.js

@@ -6,6 +6,7 @@ import { useHistory } from 'react-router-dom';
 import styleNames from '@pareto-engineering/bem/exports';
 import ContentSlidesContext from "./Context";
 import { Slide, HorizontalMenu, Sidebar, Navigator } from "./common";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -48,9 +49,6 @@ const ContentSlides = ({
   isDebug
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const history = useHistory();
   const [state, dispatch] = useReducer(reducer, {
     currentStepIndex: 0

package/dist/es/c/Modal/Modal.js

@@ -1,9 +1,9 @@
 /* @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 { ModalHeader } from "./common";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -22,23 +22,18 @@ const Modal = ({
   color,
   close
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-    // {...otherProps}
-  }, /*#__PURE__*/React.createElement(ModalHeader, {
-    title: title,
-    close: close,
-    color: color
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "modal-body"
-  }, children));
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+  // {...otherProps}
+}, /*#__PURE__*/React.createElement(ModalHeader, {
+  title: title,
+  close: close,
+  color: color
+}), /*#__PURE__*/React.createElement("div", {
+  className: "modal-body"
+}, children));
 Modal.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/c/Shortener/Shortener.js

@@ -1,11 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect, useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
 // Local Definitions
 import { Button } from "../../b";
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'shortener';
 
@@ -24,9 +25,6 @@ const Shortener = ({
   separator,
   countLetters
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [displayFull, setDisplayFull] = useState(false);
   const text = children || '';
   const excerpt = countLetters ? text.slice(0, limit) : text.split(separator).slice(0, limit).join(separator);

package/dist/es/c/SocialMediaShareButton/SocialMediaShareButton.js

@@ -1,8 +1,8 @@
 /* @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
 
@@ -21,9 +21,6 @@ const SocialMediaShareButton = ({
   type,
   color
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const isServer = typeof window === 'undefined';
   const link = isServer ? '' : window.location.href;
 

package/dist/es/f/FormInput/FormInput.js

@@ -1,9 +1,10 @@
 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 { memo, useInsertionEffect } from 'react';
+import { memo } from 'react';
 import PropTypes from 'prop-types';
 import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput, EditorInput } from "../fields";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -21,9 +22,6 @@ const FormInput = ({
   disabled,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const newClassName = [className, componentClassName].filter(Boolean).join(' ');
   if (type === 'textarea') {
     return /*#__PURE__*/React.createElement(TextareaInput, _extends({