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

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
 
@@ -20,28 +20,23 @@ const ToggleSwitch = ({
   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
-    },
-    type: "button"
-    // {...otherProps}
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    id: "switch",
-    checked: checked,
-    onChange: handleOnChange
-  }), /*#__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

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]);

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({

package/dist/es/f/common/Debugger/Debugger.js

@@ -1,9 +1,10 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useState, useInsertionEffect, useContext } from 'react';
+import { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from "../../../b";
 import { FormikContext } from 'formik';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -19,9 +20,6 @@ const Debugger = ({
   initialIsOpen
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [isOpen, setIsOpen] = useState(initialIsOpen);
   const toggleDebugger = () => setIsOpen(!isOpen);
   const formikContext = useContext(FormikContext);

package/dist/es/f/common/Description/Description.js

@@ -1,9 +1,9 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect } from 'react';
 import { useField } from 'formik';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -22,9 +22,6 @@ const Description = ({
   color
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [, meta] = useField(name);
   const hasError = meta.touched && meta.error;
   if (hasError || description) {

package/dist/es/f/common/InputWrapper/InputWrapper.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
 
@@ -20,20 +20,15 @@ const InputWrapper = ({
   columnSpan,
   desktopColumnSpan
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: {
-      ...style,
-      '--column-span': columnSpan || 'var(--columns)',
-      '--column-span-md': desktopColumnSpan || 'var(--columns)'
-    }
-  }, children);
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: {
+    ...style,
+    '--column-span': columnSpan || 'var(--columns)',
+    '--column-span-md': desktopColumnSpan || 'var(--columns)'
+  }
+}, children);
 InputWrapper.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/f/common/Label/Label.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
 
@@ -24,22 +24,17 @@ const Label = ({
   columnSpan,
   desktopColumnSpan
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement(Wrapper, {
-    htmlFor: Wrapper === 'label' ? name : undefined,
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
-    style: {
-      ...style,
-      '--column-span': columnSpan || 'var(--columns)',
-      '--column-span-md': desktopColumnSpan || 'var(--columns)'
-    }
-    // {...otherProps}
-  }, children, optional && ' (Optional)');
-};
+}) => /*#__PURE__*/React.createElement(Wrapper, {
+  htmlFor: Wrapper === 'label' ? name : undefined,
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
+  style: {
+    ...style,
+    '--column-span': columnSpan || 'var(--columns)',
+    '--column-span-md': desktopColumnSpan || 'var(--columns)'
+  }
+  // {...otherProps}
+}, children, optional && ' (Optional)');
 Label.propTypes = {
   /**
    * The HTML id for this element