@terraware/web-components 2.15.1-rc.0 → 2.16.1

package/components/Autocomplete/Autocomplete.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipProps } from '@mui/material';
 import { DropdownItem as Option } from '../types';
 import '../Select/styles.scss';

package/components/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA8C,YAAY,EAAE,MAAM,eAAe,CAAC;AAIzF,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,EAAE,EACF,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,aAAa,EACb,OAAO,EACP,WAAW,EACX,SAAS,EACT,YAAY,EACZ,QAAQ,GACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAsFrB"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8C,YAAY,EAAE,MAAM,eAAe,CAAC;AAIzF,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,EAAE,EACF,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,aAAa,EACb,OAAO,EACP,WAAW,EACX,SAAS,EACT,YAAY,EACZ,QAAQ,GACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAsFrB"}

package/components/Autocomplete/Autocomplete.js

@@ -12,23 +12,21 @@ var _IconTooltip = _interopRequireDefault(require("../IconTooltip"));
 require("../Select/styles.scss");
 require("./styles.scss");
 function Autocomplete(_ref) {
-  let {
-    id,
-    label,
-    options,
-    onChange,
-    selected,
-    freeSolo,
-    disabled,
-    className,
-    hideClearIcon,
-    isEqual,
-    placeholder,
-    errorText,
-    tooltipTitle,
-    required
-  } = _ref;
-  const onChangeHandler = (event, value) => {
+  var id = _ref.id,
+    label = _ref.label,
+    options = _ref.options,
+    onChange = _ref.onChange,
+    selected = _ref.selected,
+    freeSolo = _ref.freeSolo,
+    disabled = _ref.disabled,
+    className = _ref.className,
+    hideClearIcon = _ref.hideClearIcon,
+    isEqual = _ref.isEqual,
+    placeholder = _ref.placeholder,
+    errorText = _ref.errorText,
+    tooltipTitle = _ref.tooltipTitle,
+    required = _ref.required;
+  var onChangeHandler = function onChangeHandler(event, value) {
     if (event) {
       if (value) {
         onChange(value);
@@ -37,29 +35,31 @@ function Autocomplete(_ref) {
       }
     }
   };
-  const renderInput = params => /*#__PURE__*/_react.default.createElement("div", {
-    className: "auto-complete ".concat(className)
-  }, label && /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: id,
-    className: "textfield-label"
-  }, label, " ", required ? '*' : '', tooltipTitle && /*#__PURE__*/_react.default.createElement(_IconTooltip.default, {
-    placement: "top",
-    title: tooltipTitle
-  })), /*#__PURE__*/_react.default.createElement(_material.TextField, Object.assign({}, params, {
-    variant: "outlined",
-    size: "small",
-    placeholder: placeholder,
-    className: errorText ? 'auto-complete--error' : ''
-  })), 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)));
-  const optionalArgs = {};
+  var renderInput = function renderInput(params) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "auto-complete ".concat(className)
+    }, label && /*#__PURE__*/_react.default.createElement("label", {
+      htmlFor: id,
+      className: "textfield-label"
+    }, label, " ", required ? '*' : '', tooltipTitle && /*#__PURE__*/_react.default.createElement(_IconTooltip.default, {
+      placement: "top",
+      title: tooltipTitle
+    })), /*#__PURE__*/_react.default.createElement(_material.TextField, Object.assign({}, params, {
+      variant: "outlined",
+      size: "small",
+      placeholder: placeholder,
+      className: errorText ? 'auto-complete--error' : ''
+    })), 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)));
+  };
+  var optionalArgs = {};
   if (hideClearIcon) {
     optionalArgs.clearIcon = null;
   }
@@ -70,7 +70,7 @@ function Autocomplete(_ref) {
     disabled: disabled,
     id: id,
     options: options,
-    getOptionLabel: option => {
+    getOptionLabel: function getOptionLabel(option) {
       if (typeof option === 'object') {
         var _option$label;
         return (_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : '';
@@ -78,7 +78,9 @@ function Autocomplete(_ref) {
       return option !== null && option !== void 0 ? option : '';
     },
     onChange: onChangeHandler,
-    onInputChange: (event, value) => freeSolo && onChangeHandler(event, value),
+    onInputChange: function onInputChange(event, value) {
+      return freeSolo && onChangeHandler(event, value);
+    },
     value: selected,
     freeSolo: freeSolo,
     forcePopupIcon: true,

package/components/Badge/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface BadgeProps {
     backgroundColor?: string;
     borderColor?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":";AAGA,MAAM,WAAW,UAAU;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,KAAK,UAAW,UAAU,KAAG,WAqBlC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,UAAU;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,KAAK,UAAW,UAAU,KAAG,WAqBlC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/components/Badge/index.js

@@ -7,14 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
-const Badge = props => {
-  const theme = (0, _material.useTheme)();
-  const backgroundColor = props.backgroundColor || theme.palette.TwClrBgSecondary;
-  const borderColor = props.borderColor || theme.palette.TwClrBrdrSecondary;
-  const labelColor = props.labelColor || borderColor;
+var Badge = function Badge(props) {
+  var theme = (0, _material.useTheme)();
+  var backgroundColor = props.backgroundColor || theme.palette.TwClrBgSecondary;
+  var borderColor = props.borderColor || theme.palette.TwClrBrdrSecondary;
+  var labelColor = props.labelColor || borderColor;
   return /*#__PURE__*/_react.default.createElement(_material.Box, {
     sx: {
-      backgroundColor,
+      backgroundColor: backgroundColor,
       border: "1px solid ".concat(borderColor),
       borderRadius: theme.spacing(1),
       padding: theme.spacing(0.5, 1),

package/components/BusySpinner/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type BusySpinnerProps = {
     withSkrim?: boolean;
     noBackground?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BusySpinner/index.tsx"],"names":[],"mappings":";AAIA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAkC9F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BusySpinner/index.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAsC9F"}

package/components/BusySpinner/index.js

@@ -9,11 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _hexRgb = _interopRequireDefault(require("hex-rgb"));
 function BusySpinner(_ref) {
-  let {
-    withSkrim,
-    noBackground
-  } = _ref;
-  const theme = (0, _material.useTheme)();
+  var withSkrim = _ref.withSkrim,
+    noBackground = _ref.noBackground;
+  var theme = (0, _material.useTheme)();
   return /*#__PURE__*/_react.default.createElement(_material.Box, {
     sx: {
       position: 'fixed',
@@ -41,5 +39,9 @@ function BusySpinner(_ref) {
     padding: theme.spacing(5),
     flexDirection: "column",
     height: "100%"
-  }, /*#__PURE__*/_react.default.createElement(_material.CircularProgress, null)));
+  }, /*#__PURE__*/_react.default.createElement(_material.CircularProgress, {
+    sx: {
+      color: theme.palette.TwClrIcnBrand
+    }
+  })));
 }

package/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import { IconName } from '../Icon/icons';
 import { Size } from '../Size';
 import './styles.scss';
@@ -16,7 +16,6 @@ export interface Props {
     processing?: boolean;
     id?: string;
     className?: string;
-    style?: CSSProperties;
 }
 export default function Button(props: Props): JSX.Element;
 //# sourceMappingURL=Button.d.ts.map

package/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,eAAe,CAAC;AAYvB,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAC/D,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,aAAa,CAAC;AAElE,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkCxD"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,eAAe,CAAC;AAYvB,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAC/D,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,aAAa,CAAC;AAElE,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAgCxD"}

package/components/Button/Button.js

@@ -9,35 +9,36 @@ var _react = _interopRequireDefault(require("react"));
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 require("./styles.scss");
 var _styles2 = require("@mui/styles");
-const useStyles = (0, _styles2.makeStyles)(() => ({
-  svgIconFill: {
-    '& path': {
-      fill: 'currentColor'
+var useStyles = (0, _styles2.makeStyles)(function () {
+  return {
+    svgIconFill: {
+      '& path': {
+        fill: 'currentColor'
+      }
     }
-  }
-}));
+  };
+});
 function Button(props) {
-  const {
-    onClick,
-    label,
-    type = 'productive',
-    priority = 'primary',
-    size = 'small',
-    disabled,
-    icon,
-    rightIcon,
-    processing,
-    id,
-    className,
-    style
-  } = props;
-  const classes = useStyles();
+  var onClick = props.onClick,
+    label = props.label,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'productive' : _props$type,
+    _props$priority = props.priority,
+    priority = _props$priority === void 0 ? 'primary' : _props$priority,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'small' : _props$size,
+    disabled = props.disabled,
+    icon = props.icon,
+    rightIcon = props.rightIcon,
+    processing = props.processing,
+    id = props.id,
+    className = props.className;
+  var classes = useStyles();
   return /*#__PURE__*/_react.default.createElement("button", {
     id: id,
     onClick: onClick,
     className: "button ".concat(type, "-").concat(priority, " button--").concat(size, " ").concat(type, "-").concat(priority, "--").concat(size, " ").concat(icon && !processing ? 'button-with-icon' : '', " ").concat(rightIcon && !processing ? 'button-with-right-icon' : '', " ").concat(classes.svgIconFill, "\n      ").concat(!label ? 'button-no-label' : '', " ").concat(className !== null && className !== void 0 ? className : ''),
-    disabled: disabled,
-    style: style
+    disabled: disabled
   }, processing && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "spinner",
     size: size,

package/components/Button/button.test.js

@@ -4,8 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 var _react = require("@testing-library/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("./Button"));
-test('calls onClick prop when clicked', () => {
-  const handleClick = jest.fn();
+test('calls onClick prop when clicked', function () {
+  var handleClick = jest.fn();
   (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_Button.default, {
     onClick: handleClick,
     label: "Click me"
@@ -13,8 +13,8 @@ test('calls onClick prop when clicked', () => {
   _react.fireEvent.click(_react.screen.getByText(/click me/i));
   expect(handleClick).toHaveBeenCalledTimes(1);
 });
-test('should not call onClick prop when button is disabled', () => {
-  const handleClick = jest.fn();
+test('should not call onClick prop when button is disabled', function () {
+  var handleClick = jest.fn();
   (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_Button.default, {
     onClick: handleClick,
     label: "Click me",

package/components/Checkbox.js

@@ -8,34 +8,35 @@ exports.CheckboxStyle = void 0;
 exports.default = Checkbox;
 var _material = require("@mui/material");
 var _react = _interopRequireDefault(require("react"));
-const CheckboxStyle = theme => ({
-  padding: theme.spacing(0, 1, 0, 0),
-  '& .MuiSvgIcon-root': {
-    fill: theme.palette.TwClrBrdrSecondary
-  },
-  '&:hover > .MuiSvgIcon-root': {
-    fill: theme.palette.TwClrBrdrHover
-  },
-  '&.Mui-checked > .MuiSvgIcon-root': {
-    fill: theme.palette.TwClrBgSelected,
-    color: theme.palette.TwClrBgSelected
-  },
-  '&.MuiCheckbox-indeterminate > .MuiSvgIcon-root': {
-    fill: theme.palette.TwClrBgSelected,
-    color: theme.palette.TwClrBgSelected
-  },
-  '&:focus > .MuiSvgIcon-root': {
-    border: "2px solid ".concat(theme.palette.TwClrBgSelected)
-  },
-  '&.Mui-disabled': {
-    opacity: 0.5
-  }
-});
-exports.CheckboxStyle = CheckboxStyle;
+var CheckboxStyle = exports.CheckboxStyle = function CheckboxStyle(theme) {
+  return {
+    padding: theme.spacing(0, 1, 0, 0),
+    '& .MuiSvgIcon-root': {
+      fill: theme.palette.TwClrBrdrSecondary
+    },
+    '&:hover > .MuiSvgIcon-root': {
+      fill: theme.palette.TwClrBrdrHover
+    },
+    '&.Mui-checked > .MuiSvgIcon-root': {
+      fill: theme.palette.TwClrBgSelected,
+      color: theme.palette.TwClrBgSelected
+    },
+    '&.MuiCheckbox-indeterminate > .MuiSvgIcon-root': {
+      fill: theme.palette.TwClrBgSelected,
+      color: theme.palette.TwClrBgSelected
+    },
+    '&:focus > .MuiSvgIcon-root': {
+      border: "2px solid ".concat(theme.palette.TwClrBgSelected)
+    },
+    '&.Mui-disabled': {
+      opacity: 0.5
+    }
+  };
+};
 function Checkbox(props) {
   var _props$value;
-  const theme = (0, _material.useTheme)();
-  const onChange = (event, checked) => {
+  var theme = (0, _material.useTheme)();
+  var onChange = function onChange(event, checked) {
     props.onChange(checked);
   };
   return /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {

package/components/Confirm/index.js

@@ -1,11 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Confirm;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var _DialogBox = _interopRequireDefault(require("../DialogBox/DialogBox"));
@@ -17,26 +18,24 @@ var _Button = _interopRequireDefault(require("../Button/Button"));
  */
 
 function Confirm(_ref) {
-  let {
-    confirmButtonDisabled,
-    confirmButtonIcon,
-    confirmButtonId,
-    confirmButtonPriority,
-    confirmButtonText,
-    confirmButtonType,
-    closeButtonId,
-    closeButtonText,
-    message,
-    onClose,
-    onConfirm,
-    open,
-    size,
-    textStyle,
-    title
-  } = _ref;
-  const theme = (0, _material.useTheme)();
-  const middleButtons = (0, _react.useMemo)(() => {
-    const buttons = [/*#__PURE__*/_react.default.createElement(_Button.default, {
+  var confirmButtonDisabled = _ref.confirmButtonDisabled,
+    confirmButtonIcon = _ref.confirmButtonIcon,
+    confirmButtonId = _ref.confirmButtonId,
+    confirmButtonPriority = _ref.confirmButtonPriority,
+    confirmButtonText = _ref.confirmButtonText,
+    confirmButtonType = _ref.confirmButtonType,
+    closeButtonId = _ref.closeButtonId,
+    closeButtonText = _ref.closeButtonText,
+    message = _ref.message,
+    onClose = _ref.onClose,
+    onConfirm = _ref.onConfirm,
+    open = _ref.open,
+    size = _ref.size,
+    textStyle = _ref.textStyle,
+    title = _ref.title;
+  var theme = (0, _material.useTheme)();
+  var middleButtons = (0, _react.useMemo)(function () {
+    var buttons = [/*#__PURE__*/_react.default.createElement(_Button.default, {
       disabled: confirmButtonDisabled,
       icon: confirmButtonIcon,
       id: confirmButtonId || 'confirm-submit',
@@ -58,8 +57,8 @@ function Confirm(_ref) {
     }
     return buttons;
   }, [confirmButtonDisabled, confirmButtonIcon, confirmButtonId, confirmButtonPriority, confirmButtonText, confirmButtonType, closeButtonId, closeButtonText, onClose, onConfirm]);
-  const content = (0, _react.useMemo)(() => {
-    const text = (str, key) => {
+  var content = (0, _react.useMemo)(function () {
+    var text = function text(str, key) {
       return /*#__PURE__*/_react.default.createElement(_material.Typography, {
         color: theme.palette.TwClrTxt,
         fontSize: "16px",
@@ -67,19 +66,20 @@ function Confirm(_ref) {
         key: key,
         lineHeight: "24px",
         textAlign: "center",
-        sx: {
+        sx: (0, _objectSpread2.default)({
           marginBottom: theme.spacing(1),
           '&:last-child': {
             marginBottom: 0
-          },
-          ...(textStyle || {})
-        }
+          }
+        }, textStyle || {})
       }, str);
     };
     if (typeof message === 'string') {
       return text(message);
     } else if (Array.isArray(message)) {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message.map((str, i) => text(str, "".concat(str, "_").concat(i))));
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message.map(function (str, i) {
+        return text(str, "".concat(str, "_").concat(i));
+      }));
     } else {
       return message;
     }

package/components/DatePicker/DatePicker.js

@@ -1,11 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = DatePicker;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var _xDatePickers = require("@mui/x-date-pickers");
@@ -21,20 +23,23 @@ var _date = require("../../utils/date");
  * export type DatePickerDateType = Exclude<DateType, Date> | null;
  */
 
-const initializeDate = (value, timeZoneId) => {
+var initializeDate = function initializeDate(value, timeZoneId) {
   if (!value) {
     return null;
   }
-  const date = (0, _date.getDate)(value, timeZoneId);
+  var date = (0, _date.getDate)(value, timeZoneId);
   return date !== null && date !== void 0 && date.isValid ? date : null;
 };
 function DatePicker(props) {
   var _props$locale;
-  const [temporalValue, setTemporalValue] = (0, _react.useState)(initializeDate(props.value, props.defaultTimeZone));
-  const locale = (_props$locale = props.locale) !== null && _props$locale !== void 0 ? _props$locale : 'en';
+  var _useState = (0, _react.useState)(initializeDate(props.value, props.defaultTimeZone)),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    temporalValue = _useState2[0],
+    setTemporalValue = _useState2[1];
+  var locale = (_props$locale = props.locale) !== null && _props$locale !== void 0 ? _props$locale : 'en';
   _luxon.Settings.defaultZone = (0, _date.tz)(props.defaultTimeZone);
-  _react.default.useEffect(() => {
-    setTemporalValue(prev => {
+  _react.default.useEffect(function () {
+    setTemporalValue(function (prev) {
       if (props.value !== prev) {
         return initializeDate(props.value, props.defaultTimeZone);
       } else {
@@ -48,23 +53,24 @@ function DatePicker(props) {
    * with luxon since DatePicker's inputFormat as placeholder does not
    * work at least with MUI 5.x
    */
-  const renderInput = params => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.TextField, Object.assign({}, params, {
-    inputProps: {
-      ...params.inputProps,
-      placeholder: 'yyyy-mm-dd'
-    },
-    id: props.id,
-    autoFocus: props.autoFocus,
-    onKeyPress: props.onKeyPress
-  })), props.errorText && /*#__PURE__*/_react.default.createElement("div", {
-    className: "textfield-error-text-container"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: "error",
-    className: "textfield-error-text--icon"
-  }), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: props.id,
-    className: "textfield-error-text"
-  }, props.errorText)));
+  var renderInput = function renderInput(params) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.TextField, Object.assign({}, params, {
+      inputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.inputProps), {}, {
+        placeholder: 'yyyy-mm-dd'
+      }),
+      id: props.id,
+      autoFocus: props.autoFocus,
+      onKeyPress: props.onKeyPress
+    })), props.errorText && /*#__PURE__*/_react.default.createElement("div", {
+      className: "textfield-error-text-container"
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      name: "error",
+      className: "textfield-error-text--icon"
+    }), /*#__PURE__*/_react.default.createElement("label", {
+      htmlFor: props.id,
+      className: "textfield-error-text"
+    }, props.errorText)));
+  };
 
   // TODO: Localize the yyyy-mm-dd placeholder string that is shown to users when the input is
   //       empty. It appears to be generated programmatically deep in the guts of the MUI DatePicker
@@ -82,7 +88,7 @@ function DatePicker(props) {
     inputFormat: "yyyy-MM-dd",
     minDate: initializeDate(props.minDate, props.defaultTimeZone) || undefined,
     maxDate: initializeDate(props.maxDate, props.defaultTimeZone) || undefined,
-    onChange: newValue => {
+    onChange: function onChange(newValue) {
       setTemporalValue(newValue);
       // TODO: remove onChange and make onDateChange required
       if (props.onChange) {