@terraware/web-components 2.13.1-rc.4 → 2.14.0

package/components/ProgressCircle/ProgressCircle.js

@@ -9,13 +9,12 @@ var _material = require("@mui/material");
 var _react = _interopRequireDefault(require("react"));
 require("./styles.scss");
 function ProgressCircle(props) {
-  const {
-    size = 'small',
-    determinate,
-    value,
-    renderPercentText,
-    hideValue
-  } = props;
+  var _props$size = props.size,
+    size = _props$size === void 0 ? 'small' : _props$size,
+    determinate = props.determinate,
+    value = props.value,
+    renderPercentText = props.renderPercentText,
+    hideValue = props.hideValue;
   return /*#__PURE__*/_react.default.createElement(_material.Box, {
     className: "circle-container"
   }, /*#__PURE__*/_react.default.createElement(_material.CircularProgress, {

package/components/RadioButton.js

@@ -9,7 +9,7 @@ var _material = require("@mui/material");
 var _react = _interopRequireDefault(require("react"));
 function RadioButton(props) {
   var _props$value;
-  const onChange = (event, checked) => {
+  var onChange = function onChange(event, checked) {
     props.onChange(checked);
   };
   return /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {

package/components/Select/Select.d.ts

@@ -1,26 +1,27 @@
-/// <reference types="react" />
 import { TooltipProps } from '@mui/material';
 import './styles.scss';
+import { SelectStyles } from './SelectT';
 export interface SelectProps {
-    onChange: (newValue: string) => void;
-    label?: string;
-    disabled?: boolean;
-    id?: string;
     className?: string;
-    helperText?: string | string[];
-    placeholder?: string;
+    disabled?: boolean;
     errorText?: string | string[];
-    warningText?: string | string[];
-    selectedValue?: string;
-    readonly?: boolean;
-    options?: string[];
+    editable?: boolean;
+    fixedMenu?: boolean;
     fullWidth?: boolean;
+    helperText?: string | string[];
     hideArrow?: boolean;
+    id?: string;
+    label?: string;
     onBlur?: () => void;
+    onChange: (newValue: string) => void;
     onFocus?: () => void;
-    fixedMenu?: boolean;
+    options?: string[];
+    placeholder?: string;
+    readonly?: boolean;
+    selectedValue?: string;
+    selectStyles?: SelectStyles;
     tooltipTitle?: TooltipProps['title'];
-    editable?: boolean;
+    warningText?: string | string[];
 }
 export default function Select(props: SelectProps): JSX.Element;
 //# sourceMappingURL=Select.d.ts.map

package/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAG7C,OAAO,eAAe,CAAC;AAGvB,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAY9D"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAG7C,OAAO,eAAe,CAAC;AACvB,OAAgB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACjC;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAY9D"}

package/components/Select/Select.js

@@ -9,11 +9,17 @@ var _react = _interopRequireDefault(require("react"));
 require("./styles.scss");
 var _SelectT = _interopRequireDefault(require("./SelectT"));
 function Select(props) {
-  const toString = option => option;
+  var toString = function toString(option) {
+    return option;
+  };
   return /*#__PURE__*/_react.default.createElement(_SelectT.default, Object.assign({}, props, {
-    isEqual: (A, B) => A === B,
+    isEqual: function isEqual(A, B) {
+      return A === B;
+    },
     renderOption: toString,
     toT: toString,
-    displayLabel: option => option || ''
+    displayLabel: function displayLabel(option) {
+      return option || '';
+    }
   }));
 }

package/components/Select/SelectT.d.ts

@@ -1,31 +1,39 @@
 import { TooltipProps } from '@mui/material';
 import React from 'react';
 import './styles.scss';
+export interface SelectStyles {
+    arrow?: Record<string, any>;
+    input?: Record<string, any>;
+    inputContainer?: Record<string, any>;
+    optionContainer?: Record<string, any>;
+    optionsContainer?: Record<string, any>;
+}
 export interface SelectTProps<T> {
-    onChange: (newValue: T) => void;
-    label?: string;
-    disabled?: boolean;
-    id?: string;
     className?: string;
-    helperText?: string | string[];
-    placeholder?: string;
+    disabled?: boolean;
+    displayLabel: (option: any) => string;
+    editable?: boolean;
     errorText?: string | string[];
-    warningText?: string | string[];
-    selectedValue?: T;
-    readonly?: boolean;
-    options?: T[];
+    fixedMenu?: boolean;
     fullWidth?: boolean;
+    helperText?: string | string[];
     hideArrow?: boolean;
+    id?: string;
+    isEqual: (A: T, B: T) => boolean;
+    label?: string;
     onBlur?: () => void;
+    onChange: (newValue: T) => void;
     onFocus?: () => void;
-    fixedMenu?: boolean;
-    isEqual: (A: T, B: T) => boolean;
+    options?: T[];
+    placeholder?: string;
+    readonly?: boolean;
     renderOption: (option: T) => React.ReactNode;
+    required?: boolean;
+    selectedValue?: T;
+    selectStyles?: SelectStyles;
     toT: (input: string) => T;
-    displayLabel: (option: any) => string;
     tooltipTitle?: TooltipProps['title'];
-    editable?: boolean;
-    required?: boolean;
+    warningText?: string | string[];
 }
 export default function SelectT<T>(props: SelectTProps<T>): JSX.Element;
 //# sourceMappingURL=SelectT.d.ts.map

package/components/Select/SelectT.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectT.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectT.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,KAAwF,MAAM,OAAO,CAAC;AAE7G,OAAO,eAAe,CAAC;AAKvB,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;IACjC,YAAY,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C,GAAG,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,CAAC;IAC1B,YAAY,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,MAAM,CAAC;IACtC,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAyPtE"}
+{"version":3,"file":"SelectT.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectT.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,KAAwF,MAAM,OAAO,CAAC;AAE7G,OAAO,eAAe,CAAC;AAMvB,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACxC;AAED,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,MAAM,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,CAAC;IAClB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,GAAG,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,CAAC;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACjC;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA4QtE"}

package/components/Select/SelectT.js

@@ -6,65 +6,78 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = SelectT;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 require("./styles.scss");
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 var _IconTooltip = _interopRequireDefault(require("../IconTooltip"));
 var _utils = require("../../utils");
+// Styles for overriding select dropdown
+
 function SelectT(props) {
-  const {
-    selectedValue,
-    onChange,
-    label,
-    disabled,
-    id,
-    className,
-    helperText,
-    placeholder,
-    errorText,
-    warningText,
-    readonly,
-    options,
-    fullWidth,
-    hideArrow,
-    onBlur,
-    onFocus,
-    fixedMenu,
-    isEqual,
-    renderOption,
-    toT,
-    displayLabel,
-    tooltipTitle,
-    editable,
-    required
-  } = props;
-  const selectClass = (0, _classnames.default)({
+  var className = props.className,
+    disabled = props.disabled,
+    displayLabel = props.displayLabel,
+    editable = props.editable,
+    errorText = props.errorText,
+    fixedMenu = props.fixedMenu,
+    fullWidth = props.fullWidth,
+    helperText = props.helperText,
+    hideArrow = props.hideArrow,
+    id = props.id,
+    isEqual = props.isEqual,
+    label = props.label,
+    onBlur = props.onBlur,
+    onChange = props.onChange,
+    onFocus = props.onFocus,
+    options = props.options,
+    placeholder = props.placeholder,
+    readonly = props.readonly,
+    renderOption = props.renderOption,
+    required = props.required,
+    selectedValue = props.selectedValue,
+    selectStyles = props.selectStyles,
+    tooltipTitle = props.tooltipTitle,
+    toT = props.toT,
+    warningText = props.warningText;
+  var selectClass = (0, _classnames.default)({
     'textfield-value': true,
     'textfield-value--disabled': disabled,
     'textfield-value--error': !!errorText,
     'textfield-value--warning': !!warningText,
     'textfield-value--readonly': readonly
   });
-  const itemClass = (0, _classnames.default)({
+  var itemClass = (0, _classnames.default)({
     '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 dropdownRef = (0, _react.useRef)(null);
-  const hasOptions = (0, _react.useMemo)(() => options !== undefined && options.length > 0, [options]);
-  const repositionMenu = (0, _react.useCallback)(checkHeight => {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    openedOptions = _useState2[0],
+    setOpenedOptions = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    fixedMenuPositioned = _useState4[0],
+    setFixedMenuPositioned = _useState4[1];
+  var _useState5 = (0, _react.useState)(-1),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    selectedIndex = _useState6[0],
+    setSelectedIndex = _useState6[1];
+  var inputRef = (0, _react.useRef)(null);
+  var dropdownRef = (0, _react.useRef)(null);
+  var hasOptions = (0, _react.useMemo)(function () {
+    return options !== undefined && options.length > 0;
+  }, [options]);
+  var repositionMenu = (0, _react.useCallback)(function (checkHeight) {
     if (openedOptions && hasOptions) {
       scrollToSelectedElement();
       if (fixedMenu && inputRef.current && dropdownRef.current) {
         dropdownRef.current.style.width = "".concat(inputRef.current.offsetWidth, "px");
-        const bbox = inputRef.current.getBoundingClientRect();
+        var bbox = inputRef.current.getBoundingClientRect();
         dropdownRef.current.style.top = "".concat(bbox.top + bbox.height, "px");
-        const dropdownBottom = dropdownRef.current.clientHeight + bbox.top + bbox.height;
-        const windowHeightThreshold = window.innerHeight - bbox.height;
+        var dropdownBottom = dropdownRef.current.clientHeight + bbox.top + bbox.height;
+        var windowHeightThreshold = window.innerHeight - bbox.height;
         if (checkHeight && dropdownBottom > windowHeightThreshold) {
           dropdownRef.current.style.maxHeight = "".concat(dropdownRef.current.clientHeight - (dropdownBottom - windowHeightThreshold), "px");
         }
@@ -74,13 +87,13 @@ function SelectT(props) {
       setFixedMenuPositioned(false);
     }
   }, [fixedMenu, openedOptions, hasOptions]);
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     repositionMenu(true);
   }, [repositionMenu]);
-  (0, _react.useEffect)(() => {
-    let newIndex = -1;
+  (0, _react.useEffect)(function () {
+    var newIndex = -1;
     if (options && selectedValue) {
-      options.find((option, index) => {
+      options.find(function (option, index) {
         if (isEqual(option, selectedValue)) {
           newIndex = index;
           return true;
@@ -92,41 +105,43 @@ function SelectT(props) {
       setSelectedIndex(newIndex);
     }
   }, [options, selectedValue, selectedIndex, isEqual]);
-  const handleScroll = (0, _react.useCallback)(() => {
+  var handleScroll = (0, _react.useCallback)(function () {
     repositionMenu(false);
   }, [repositionMenu]);
-  const handleClick = (0, _react.useCallback)(event => {
+  var handleClick = (0, _react.useCallback)(function (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)(() => {
+  var handleResize = (0, _react.useCallback)(function () {
     setOpenedOptions(false);
   }, []);
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     window.addEventListener('click', handleClick);
     window.addEventListener('resize', handleResize);
     window.addEventListener('scroll', handleScroll);
-    return () => {
+    return function () {
       window.removeEventListener('click', handleClick);
       window.removeEventListener('resize', handleResize);
       window.removeEventListener('scroll', handleScroll);
     };
   }, [handleClick, handleResize, handleScroll]);
-  const toggleOptions = () => {
-    setOpenedOptions(isOpen => !isOpen);
+  var toggleOptions = function toggleOptions() {
+    setOpenedOptions(function (isOpen) {
+      return !isOpen;
+    });
   };
-  const onOptionSelected = (option, index) => {
+  var onOptionSelected = function onOptionSelected(option, index) {
     if (onChange) {
       onChange(option);
     }
     setOpenedOptions(false);
     setSelectedIndex(index);
   };
-  const onChangeHandler = e => {
-    const textValue = e.target.value;
+  var onChangeHandler = function onChangeHandler(e) {
+    var textValue = e.target.value;
     if ((0, _utils.isWhitespaces)(textValue)) {
       return;
     }
@@ -135,13 +150,14 @@ function SelectT(props) {
     }
     setOpenedOptions(true);
   };
-  const onKeyDownHandler = e => {
+  var onKeyDownHandler = function onKeyDownHandler(e) {
     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');
+    var pressedLetter = e.key.toUpperCase();
+    var items = (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.getElementsByTagName('li');
     if (items) {
-      const arrayOfItems = Array.from(items);
-      for (const item of arrayOfItems) {
+      var arrayOfItems = Array.from(items);
+      for (var _i = 0, _arrayOfItems = arrayOfItems; _i < _arrayOfItems.length; _i++) {
+        var item = _arrayOfItems[_i];
         if (item.dataset.key === pressedLetter) {
           item.scrollIntoView({
             behavior: 'smooth',
@@ -152,15 +168,16 @@ function SelectT(props) {
       }
     }
   };
-  const scrollToSelectedElement = () => {
+  var scrollToSelectedElement = function scrollToSelectedElement() {
     var _dropdownRef$current2;
-    const items = (_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : _dropdownRef$current2.getElementsByTagName('li');
+    var items = (_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : _dropdownRef$current2.getElementsByTagName('li');
     if (items) {
-      const arrayOfItems = Array.from(items);
-      for (const item of arrayOfItems) {
+      var arrayOfItems = Array.from(items);
+      for (var _i2 = 0, _arrayOfItems2 = arrayOfItems; _i2 < _arrayOfItems2.length; _i2++) {
+        var item = _arrayOfItems2[_i2];
         if (item.dataset.selected === 'true') {
           if (dropdownRef.current) {
-            const topPos = item.offsetTop;
+            var topPos = item.offsetTop;
             dropdownRef.current.scrollTop = topPos;
             return;
           }
@@ -181,7 +198,8 @@ function SelectT(props) {
     id: id,
     className: selectClass,
     onClick: toggleOptions,
-    ref: inputRef
+    ref: inputRef,
+    style: (selectStyles || {}).inputContainer
   }, /*#__PURE__*/_react.default.createElement("input", {
     value: displayLabel(selectedValue),
     readOnly: !editable || readonly,
@@ -190,22 +208,28 @@ function SelectT(props) {
     onKeyDown: onKeyDownHandler,
     onBlur: onBlur,
     onFocus: onFocus,
-    required: required
+    required: required,
+    style: (selectStyles || {}).input
   }), !hideArrow && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: 'chevronDown',
-    className: "textfield-value--icon-right"
+    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
-  }, options.map((option, index) => {
+    ref: dropdownRef,
+    style: (selectStyles || {}).optionsContainer
+  }, options.map(function (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' : '', " ")
+      onClick: function onClick() {
+        return !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"

package/components/Separator/index.d.ts

@@ -1,6 +1,6 @@
 declare const Separator: (props: {
     height?: string;
     color?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => JSX.Element;
 export default Separator;
 //# sourceMappingURL=index.d.ts.map

package/components/Separator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/index.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,SAAS,UAAW;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,4CAW5D,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/index.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,SAAS,UAAW;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,gBAW5D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/Separator/index.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _theme = _interopRequireDefault(require("../../theme"));
-const Separator = props => {
+var Separator = function Separator(props) {
   return /*#__PURE__*/_react.default.createElement(_material.Box, {
     sx: {
       margin: _theme.default.spacing(0, 2),
@@ -18,4 +18,5 @@ const Separator = props => {
     }
   });
 };
-var _default = exports.default = Separator;
+var _default = Separator;
+exports.default = _default;

package/components/Slider/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type SliderMark = {
     label?: string;
     value: number;

package/components/Slider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":";AAGA,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAC;CAC3C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA8C9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAC;CAC3C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA8C9D"}

package/components/Slider/index.js

@@ -8,18 +8,16 @@ exports.default = Slider;
 var _material = require("@mui/material");
 var _react = _interopRequireDefault(require("react"));
 function Slider(props) {
-  const {
-    defaultValue,
-    value,
-    marks,
-    min,
-    max,
-    onChange,
-    step,
-    valueLabelDisplay
-  } = props;
-  const theme = (0, _material.useTheme)();
-  const sliderStyles = {
+  var defaultValue = props.defaultValue,
+    value = props.value,
+    marks = props.marks,
+    min = props.min,
+    max = props.max,
+    onChange = props.onChange,
+    step = props.step,
+    valueLabelDisplay = props.valueLabelDisplay;
+  var theme = (0, _material.useTheme)();
+  var sliderStyles = {
     '.MuiSlider-rail': {
       backgroundColor: theme.palette.TwClrBgBrandTertiary,
       height: theme.spacing(0.5)
@@ -40,7 +38,7 @@ function Slider(props) {
       borderRadius: '8px'
     }
   };
-  const handleChange = (event, val) => {
+  var handleChange = function handleChange(event, val) {
     if (!Array.isArray(val)) {
       onChange(val);
     }

package/components/SummaryBox.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface Props {
     id?: string;
     title: string;

package/components/SummaryBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryBox.d.ts","sourceRoot":"","sources":["../../src/components/SummaryBox.tsx"],"names":[],"mappings":";AAyCA,MAAM,WAAW,KAAK;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,CAAC;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAmB,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAyBnH"}
+{"version":3,"file":"SummaryBox.d.ts","sourceRoot":"","sources":["../../src/components/SummaryBox.tsx"],"names":[],"mappings":"AAyCA,MAAM,WAAW,KAAK;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,CAAC;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAmB,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAyBnH"}

package/components/SummaryBox.js

@@ -9,52 +9,53 @@ var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
 var _styles = require("@mui/styles");
 var _react = _interopRequireDefault(require("react"));
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  bold: {
-    fontWeight: theme.typography.fontWeightBold,
-    whiteSpace: 'pre-line'
-  },
-  summaryDefault: {
-    position: 'relative',
-    borderRadius: 8,
-    backgroundColor: theme.palette.neutral[200],
-    padding: theme.spacing(2)
-  },
-  summaryAvailable: {
-    borderRadius: 8,
-    backgroundColor: theme.palette.neutral[700],
-    padding: theme.spacing(2),
-    color: theme.palette.common.white
-  },
-  summaryZero: {
-    borderRadius: 8,
-    backgroundColor: theme.palette.state[5],
-    padding: theme.spacing(2),
-    color: theme.palette.common.white
-  },
-  full: {
-    borderRadius: 8,
-    backgroundColor: theme.palette.neutral[200],
-    padding: theme.spacing(2),
-    height: '100%',
-    boxSizing: 'border-box'
-  },
-  infoIcon: {
-    position: 'absolute',
-    right: theme.spacing(2)
-  }
-}));
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    bold: {
+      fontWeight: theme.typography.fontWeightBold,
+      whiteSpace: 'pre-line'
+    },
+    summaryDefault: {
+      position: 'relative',
+      borderRadius: 8,
+      backgroundColor: theme.palette.neutral[200],
+      padding: theme.spacing(2)
+    },
+    summaryAvailable: {
+      borderRadius: 8,
+      backgroundColor: theme.palette.neutral[700],
+      padding: theme.spacing(2),
+      color: theme.palette.common.white
+    },
+    summaryZero: {
+      borderRadius: 8,
+      backgroundColor: theme.palette.state[5],
+      padding: theme.spacing(2),
+      color: theme.palette.common.white
+    },
+    full: {
+      borderRadius: 8,
+      backgroundColor: theme.palette.neutral[200],
+      padding: theme.spacing(2),
+      height: '100%',
+      boxSizing: 'border-box'
+    },
+    infoIcon: {
+      position: 'absolute',
+      right: theme.spacing(2)
+    }
+  };
+});
 function SummaryBox(_ref) {
-  let {
-    title,
-    value,
-    variant = 'default',
-    id,
-    icon,
-    onIconClick
-  } = _ref;
-  const classes = useStyles();
-  const style = variant === 'default' ? classes.summaryDefault : variant === 'available' ? classes.summaryAvailable : variant === 'full' ? classes.full : classes.summaryZero;
+  var title = _ref.title,
+    value = _ref.value,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    id = _ref.id,
+    icon = _ref.icon,
+    onIconClick = _ref.onIconClick;
+  var classes = useStyles();
+  var style = variant === 'default' ? classes.summaryDefault : variant === 'available' ? classes.summaryAvailable : variant === 'full' ? classes.full : classes.summaryZero;
   return /*#__PURE__*/_react.default.createElement(_material.Box, {
     className: style,
     id: id