@terraware/web-components 4.2.12 → 4.2.14-rc.0

package/components/PopoverMenu/index.js

@@ -1,26 +1,18 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = PopoverMenu;
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-var _Popover = _interopRequireDefault(require("./Popover"));
-function PopoverMenu(_ref) {
-  let {
-    anchor,
-    container,
-    menuSections,
-    onClick,
-    showChevron = true,
-    selectedValue
-  } = _ref;
-  const theme = (0, _material.useTheme)();
-  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+import React, { useState } from 'react';
+import { IconButton, useTheme } from '@mui/material';
+import Icon from '../Icon/Icon';
+import Popover from './Popover';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function PopoverMenu({
+  anchor,
+  container,
+  menuSections,
+  onClick,
+  showChevron = true,
+  selectedValue
+}) {
+  const theme = useTheme();
+  const [anchorEl, setAnchorEl] = useState(null);
   const handleClick = event => {
     setAnchorEl(event.currentTarget);
   };
@@ -33,27 +25,30 @@ function PopoverMenu(_ref) {
     }
     handleClose();
   };
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: handleClick,
-    size: "small",
-    sx: {
-      height: '48px',
-      borderRadius: '16px',
-      padding: theme.spacing(1.5, 2)
-    }
-  }, anchor, showChevron && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: "chevronDown",
-    size: "medium",
-    style: {
-      marginLeft: '8px',
-      fill: theme.palette.TwClrIcn
-    }
-  })), /*#__PURE__*/_react.default.createElement(_Popover.default, {
-    sections: menuSections,
-    handleClick: onItemClick,
-    anchorElement: anchorEl,
-    setAnchorElement: setAnchorEl,
-    selectedValue: selectedValue,
-    container: container
-  }));
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs(IconButton, {
+      onClick: handleClick,
+      size: "small",
+      sx: {
+        height: '48px',
+        borderRadius: '16px',
+        padding: theme.spacing(1.5, 2)
+      },
+      children: [anchor, showChevron && /*#__PURE__*/_jsx(Icon, {
+        name: "chevronDown",
+        size: "medium",
+        style: {
+          marginLeft: '8px',
+          fill: theme.palette.TwClrIcn
+        }
+      })]
+    }), /*#__PURE__*/_jsx(Popover, {
+      sections: menuSections,
+      handleClick: onItemClick,
+      anchorElement: anchorEl,
+      setAnchorElement: setAnchorEl,
+      selectedValue: selectedValue,
+      container: container
+    })]
+  });
 }

package/components/PopoverMultiSelect/index.js

@@ -1,17 +1,10 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = PopoverMultiSelect;
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-var _Popover = _interopRequireDefault(require("../PopoverMenu/Popover"));
-require("./styles.scss");
-function PopoverMultiSelect(props) {
+import React, { useState } from 'react';
+import { ListItemText } from '@mui/material';
+import Icon from '../Icon/Icon';
+import Popover from '../PopoverMenu/Popover';
+import './styles.scss';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export default function PopoverMultiSelect(props) {
   const {
     anchorElement,
     initialSelection,
@@ -20,7 +13,7 @@ function PopoverMultiSelect(props) {
     sections,
     setAnchorElement
   } = props;
-  const [selection, setSelection] = (0, _react.useState)(initialSelection);
+  const [selection, setSelection] = useState(initialSelection);
   const addToSelection = value => {
     const newSelection = [...selection];
     newSelection.push(value);
@@ -34,11 +27,11 @@ function PopoverMultiSelect(props) {
     onChange(newSelection);
   };
   const iconSpacer = () => {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/_jsx("div", {
       className: "popover-multi-select__checkmark-spacer"
     });
   };
-  return /*#__PURE__*/_react.default.createElement(_Popover.default, {
+  return /*#__PURE__*/_jsx(Popover, {
     sections: sections,
     handleClick: item => {
       const itemIndex = selection.findIndex(s => s === item.value);
@@ -52,10 +45,14 @@ function PopoverMultiSelect(props) {
     setAnchorElement: setAnchorElement,
     itemRenderer: item => {
       const selected = selection.find(s => s === item.value);
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, selected ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        name: "checkmark",
-        className: "popover-multi-select__checkmark-selection"
-      }) : iconSpacer(), /*#__PURE__*/_react.default.createElement(_material.ListItemText, null, item.label));
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [selected ? /*#__PURE__*/_jsx(Icon, {
+          name: "checkmark",
+          className: "popover-multi-select__checkmark-selection"
+        }) : iconSpacer(), /*#__PURE__*/_jsx(ListItemText, {
+          children: item.label
+        })]
+      });
     },
     menuAlign: menuAlign
   });

package/components/ProgressCircle/ProgressCircle.js

@@ -1,14 +1,8 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = ProgressCircle;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-require("./styles.scss");
-function ProgressCircle(props) {
+import React from 'react';
+import { Box, CircularProgress } from '@mui/material';
+import './styles.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ProgressCircle(props) {
   const {
     size = 'small',
     determinate,
@@ -16,19 +10,22 @@ function ProgressCircle(props) {
     renderPercentText,
     hideValue
   } = props;
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
-    className: "circle-container"
-  }, /*#__PURE__*/_react.default.createElement(_material.CircularProgress, {
-    variant: "determinate",
-    value: 100,
-    className: "circle-track circle-track--".concat(size)
-  }), /*#__PURE__*/_react.default.createElement(_material.Box, {
-    className: "label-container"
-  }, value && !hideValue && /*#__PURE__*/_react.default.createElement("p", {
-    className: "progress-circle-label--".concat(size)
-  }, renderPercentText(Math.round(value)))), /*#__PURE__*/_react.default.createElement(_material.CircularProgress, {
-    value: value,
-    variant: determinate ? 'determinate' : 'indeterminate',
-    className: "circle-fill circle-track--".concat(size)
-  }));
+  return /*#__PURE__*/_jsxs(Box, {
+    className: "circle-container",
+    children: [/*#__PURE__*/_jsx(CircularProgress, {
+      variant: "determinate",
+      value: 100,
+      className: `circle-track circle-track--${size}`
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "label-container",
+      children: value && !hideValue && /*#__PURE__*/_jsx("p", {
+        className: `progress-circle-label--${size}`,
+        children: renderPercentText(Math.round(value))
+      })
+    }), /*#__PURE__*/_jsx(CircularProgress, {
+      value: value,
+      variant: determinate ? 'determinate' : 'indeterminate',
+      className: `circle-fill circle-track--${size}`
+    })]
+  });
 }

package/components/RadioButton.js

@@ -1,25 +1,18 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = RadioButton;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-function RadioButton(props) {
-  var _props$value;
+import React from 'react';
+import { FormControlLabel, Radio } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function RadioButton(props) {
   const onChange = (event, checked) => {
     props.onChange(checked);
   };
-  return /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {
+  return /*#__PURE__*/_jsx(FormControlLabel, {
     id: props.id,
     onChange: onChange,
     label: props.label,
-    control: /*#__PURE__*/_react.default.createElement(_material.Radio, {
+    control: /*#__PURE__*/_jsx(Radio, {
       id: 'radio-' + props.id,
       color: "primary",
-      checked: (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : false
+      checked: props.value ?? false
     })
   });
 }

package/components/Select/Select.js

@@ -1,19 +1,14 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Select;
-var _react = _interopRequireDefault(require("react"));
-var _SelectT = _interopRequireDefault(require("./SelectT"));
-require("./styles.scss");
-function Select(props) {
+import React from 'react';
+import SelectT from './SelectT';
+import './styles.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Select(props) {
   const toString = option => option;
-  return /*#__PURE__*/_react.default.createElement(_SelectT.default, Object.assign({}, props, {
+  return /*#__PURE__*/_jsx(SelectT, {
+    ...props,
     isEqual: (A, B) => A === B,
     renderOption: toString,
     toT: toString,
     displayLabel: option => option || ''
-  }));
+  });
 }

package/components/Select/SelectT.js

@@ -1,21 +1,14 @@
-"use strict";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Box } from '@mui/material';
+import classNames from 'classnames';
+import { isWhitespaces } from '../../utils';
+import Icon from '../Icon/Icon';
+import IconTooltip from '../IconTooltip';
+import './styles.scss';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = SelectT;
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _utils = require("../../utils");
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-var _IconTooltip = _interopRequireDefault(require("../IconTooltip"));
-require("./styles.scss");
 // Styles for overriding select dropdown
-
-function SelectT(props) {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export default function SelectT(props) {
   const {
     className,
     disabled,
@@ -44,35 +37,35 @@ function SelectT(props) {
     toT,
     warningText
   } = props;
-  const selectClass = (0, _classnames.default)({
+  const selectClass = classNames({
     'textfield-value': true,
     'textfield-value--disabled': disabled,
     'textfield-value--error': !!errorText,
     'textfield-value--warning': !!warningText,
     'textfield-value--readonly': readonly
   });
-  const itemClass = (0, _classnames.default)({
+  const itemClass = classNames({
     'select-value': true,
     'select-value--disabled': disabled
   });
-  const [openedOptions, setOpenedOptions] = (0, _react.useState)(false);
-  const [fixedMenuPositioned, setFixedMenuPositioned] = (0, _react.useState)(false);
-  const [selectedIndex, setSelectedIndex] = (0, _react.useState)(-1);
-  const inputRef = (0, _react.useRef)(null);
-  const textFieldRef = (0, _react.useRef)(null);
-  const dropdownRef = (0, _react.useRef)(null);
-  const hasOptions = (0, _react.useMemo)(() => options !== undefined && options.length > 0, [options]);
-  const repositionMenu = (0, _react.useCallback)(checkHeight => {
+  const [openedOptions, setOpenedOptions] = useState(false);
+  const [fixedMenuPositioned, setFixedMenuPositioned] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const inputRef = useRef(null);
+  const textFieldRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const hasOptions = useMemo(() => options !== undefined && options.length > 0, [options]);
+  const repositionMenu = useCallback(checkHeight => {
     if (openedOptions && hasOptions) {
       scrollToSelectedElement();
       if (fixedMenu && inputRef.current && dropdownRef.current) {
-        dropdownRef.current.style.width = "".concat(inputRef.current.offsetWidth, "px");
+        dropdownRef.current.style.width = `${inputRef.current.offsetWidth}px`;
         const bbox = inputRef.current.getBoundingClientRect();
-        dropdownRef.current.style.top = "".concat(bbox.top + bbox.height, "px");
+        dropdownRef.current.style.top = `${bbox.top + bbox.height}px`;
         const dropdownBottom = dropdownRef.current.clientHeight + bbox.top + bbox.height;
         const windowHeightThreshold = window.innerHeight - bbox.height;
         if (checkHeight && dropdownBottom > windowHeightThreshold) {
-          dropdownRef.current.style.maxHeight = "".concat(dropdownRef.current.clientHeight - (dropdownBottom - windowHeightThreshold), "px");
+          dropdownRef.current.style.maxHeight = `${dropdownRef.current.clientHeight - (dropdownBottom - windowHeightThreshold)}px`;
         }
         setFixedMenuPositioned(true);
       }
@@ -80,10 +73,10 @@ function SelectT(props) {
       setFixedMenuPositioned(false);
     }
   }, [fixedMenu, openedOptions, hasOptions]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     repositionMenu(true);
   }, [repositionMenu]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     let newIndex = -1;
     if (options && selectedValue) {
       options.find((option, index) => {
@@ -98,20 +91,20 @@ function SelectT(props) {
       setSelectedIndex(newIndex);
     }
   }, [options, selectedValue, selectedIndex, isEqual]);
-  const handleScroll = (0, _react.useCallback)(() => {
+  const handleScroll = useCallback(() => {
     repositionMenu(false);
   }, [repositionMenu]);
-  const handleClick = (0, _react.useCallback)(event => {
+  const handleClick = useCallback(event => {
     // Don't respond to user clicks inside the input box because those are
     // already handled by toggleOptions()
     if (dropdownRef.current && !dropdownRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
       setOpenedOptions(false);
     }
   }, []);
-  const handleResize = (0, _react.useCallback)(() => {
+  const handleResize = useCallback(() => {
     setOpenedOptions(false);
   }, []);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     window.addEventListener('click', handleClick);
     window.addEventListener('resize', handleResize);
     window.addEventListener('scroll', handleScroll);
@@ -123,8 +116,7 @@ function SelectT(props) {
   }, [handleClick, handleResize, handleScroll]);
   const toggleOptions = () => {
     if (!openedOptions) {
-      var _textFieldRef$current;
-      (_textFieldRef$current = textFieldRef.current) === null || _textFieldRef$current === void 0 ? void 0 : _textFieldRef$current.focus();
+      textFieldRef.current?.focus();
     }
     setOpenedOptions(isOpen => !isOpen);
   };
@@ -137,7 +129,7 @@ function SelectT(props) {
   };
   const onChangeHandler = e => {
     const textValue = e.target.value;
-    if ((0, _utils.isWhitespaces)(textValue)) {
+    if (isWhitespaces(textValue)) {
       return;
     }
     if (onChange) {
@@ -149,9 +141,8 @@ function SelectT(props) {
     if (e.key === 'Tab') {
       toggleOptions();
     } else {
-      var _dropdownRef$current;
       const pressedLetter = e.key.toUpperCase();
-      const items = (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.getElementsByTagName('li');
+      const items = dropdownRef.current?.getElementsByTagName('li');
       if (items) {
         const arrayOfItems = Array.from(items);
         for (const item of arrayOfItems) {
@@ -166,8 +157,7 @@ function SelectT(props) {
     }
   };
   const scrollToSelectedElement = () => {
-    var _dropdownRef$current2;
-    const items = (_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : _dropdownRef$current2.getElementsByTagName('li');
+    const items = dropdownRef.current?.getElementsByTagName('li');
     if (items) {
       const arrayOfItems = Array.from(items);
       for (const item of arrayOfItems) {
@@ -181,70 +171,82 @@ function SelectT(props) {
       }
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
-    className: "select ".concat(className),
-    sx: sx
-  }, label && /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: id,
-    className: "textfield-label"
-  }, label, " ", required ? '*' : '', " ", tooltipTitle && /*#__PURE__*/_react.default.createElement(_IconTooltip.default, {
-    title: tooltipTitle
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "textfield-container ".concat(fullWidth ? 'textfield-container--fullWidth' : '')
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    id: id,
-    className: selectClass,
-    onClick: toggleOptions,
-    ref: inputRef,
-    style: (selectStyles || {}).inputContainer
-  }, /*#__PURE__*/_react.default.createElement("input", {
-    ref: textFieldRef,
-    value: displayLabel(selectedValue),
-    readOnly: !editable || readonly,
-    placeholder: placeholder,
-    onChange: onChangeHandler,
-    onKeyDown: onKeyDownHandler,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    required: required,
-    style: (selectStyles || {}).input
-  }), !hideArrow && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: 'chevronDown',
-    className: "textfield-value--icon-right",
-    style: (selectStyles || {}).arrow
-  })), options && options.length > 0 && openedOptions && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fixedMenu && /*#__PURE__*/_react.default.createElement("div", {
-    className: "scroll-block"
-  }), /*#__PURE__*/_react.default.createElement("ul", {
-    className: 'options-container' + (fixedMenu ? ' fixed-menu' : '') + (fixedMenuPositioned ? ' positioned' : ''),
-    ref: dropdownRef,
-    style: (selectStyles || {}).optionsContainer
-  }, options.map((option, index) => {
-    return /*#__PURE__*/_react.default.createElement("li", {
-      "data-key": displayLabel(option).charAt(0).toUpperCase(),
-      "data-selected": selectedIndex === index,
-      key: index,
-      onClick: () => !readonly ? onOptionSelected(option, index) : undefined,
-      className: "".concat(itemClass, " ").concat(selectedIndex === index ? 'select-value--selected' : '', " "),
-      style: (selectStyles || {}).optionContainer
-    }, renderOption(option));
-  })))), errorText && /*#__PURE__*/_react.default.createElement("div", {
-    className: "textfield-label-container"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: "error",
-    className: "textfield-error-text--icon"
-  }), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: id,
-    className: "textfield-error-text"
-  }, errorText)), warningText && /*#__PURE__*/_react.default.createElement("div", {
-    className: "textfield-label-container"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: "warning",
-    className: "textfield-warning-text--icon"
-  }), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: id,
-    className: "textfield-warning-text"
-  }, warningText)), helperText && /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: id,
-    className: "textfield-help-text"
-  }, helperText));
+  return /*#__PURE__*/_jsxs(Box, {
+    className: `select ${className}`,
+    sx: sx,
+    children: [label && /*#__PURE__*/_jsxs("label", {
+      htmlFor: id,
+      className: "textfield-label",
+      children: [label, " ", required ? '*' : '', " ", tooltipTitle && /*#__PURE__*/_jsx(IconTooltip, {
+        title: tooltipTitle
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `textfield-container ${fullWidth ? 'textfield-container--fullWidth' : ''}`,
+      children: [/*#__PURE__*/_jsxs("div", {
+        id: id,
+        className: selectClass,
+        onClick: toggleOptions,
+        ref: inputRef,
+        style: (selectStyles || {}).inputContainer,
+        children: [/*#__PURE__*/_jsx("input", {
+          ref: textFieldRef,
+          value: displayLabel(selectedValue),
+          readOnly: !editable || readonly,
+          placeholder: placeholder,
+          onChange: onChangeHandler,
+          onKeyDown: onKeyDownHandler,
+          onBlur: onBlur,
+          onFocus: onFocus,
+          required: required,
+          style: (selectStyles || {}).input
+        }), !hideArrow && /*#__PURE__*/_jsx(Icon, {
+          name: 'chevronDown',
+          className: "textfield-value--icon-right",
+          style: (selectStyles || {}).arrow
+        })]
+      }), options && options.length > 0 && openedOptions && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [fixedMenu && /*#__PURE__*/_jsx("div", {
+          className: "scroll-block"
+        }), /*#__PURE__*/_jsx("ul", {
+          className: 'options-container' + (fixedMenu ? ' fixed-menu' : '') + (fixedMenuPositioned ? ' positioned' : ''),
+          ref: dropdownRef,
+          style: (selectStyles || {}).optionsContainer,
+          children: options.map((option, index) => {
+            return /*#__PURE__*/_jsx("li", {
+              "data-key": displayLabel(option).charAt(0).toUpperCase(),
+              "data-selected": selectedIndex === index,
+              onClick: () => !readonly ? onOptionSelected(option, index) : undefined,
+              className: `${itemClass} ${selectedIndex === index ? 'select-value--selected' : ''} `,
+              style: (selectStyles || {}).optionContainer,
+              children: renderOption(option)
+            }, index);
+          })
+        })]
+      })]
+    }), errorText && /*#__PURE__*/_jsxs("div", {
+      className: "textfield-label-container",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        name: "error",
+        className: "textfield-error-text--icon"
+      }), /*#__PURE__*/_jsx("label", {
+        htmlFor: id,
+        className: "textfield-error-text",
+        children: errorText
+      })]
+    }), warningText && /*#__PURE__*/_jsxs("div", {
+      className: "textfield-label-container",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        name: "warning",
+        className: "textfield-warning-text--icon"
+      }), /*#__PURE__*/_jsx("label", {
+        htmlFor: id,
+        className: "textfield-warning-text",
+        children: warningText
+      })]
+    }), helperText && /*#__PURE__*/_jsx("label", {
+      htmlFor: id,
+      className: "textfield-help-text",
+      children: helperText
+    })]
+  });
 }

package/components/Separator/index.js

@@ -1,21 +1,15 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-var _theme = _interopRequireDefault(require("../../theme"));
+import React from 'react';
+import { Box } from '@mui/material';
+import theme from '../../theme';
+import { jsx as _jsx } from "react/jsx-runtime";
 const Separator = props => {
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+  return /*#__PURE__*/_jsx(Box, {
     sx: {
-      margin: _theme.default.spacing(0, 2),
+      margin: theme.spacing(0, 2),
       width: '1px',
       height: props.height || '32px',
-      backgroundColor: props.color || _theme.default.palette.TwClrBrdrTertiary
+      backgroundColor: props.color || theme.palette.TwClrBrdrTertiary
     }
   });
 };
-var _default = exports.default = Separator;
+export default Separator;

package/components/Size.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};