@terraware/web-components 2.16.3 → 2.16.4-rc.1

package/components/Autocomplete/Autocomplete.d.ts

@@ -1,3 +1,4 @@
+/// <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,GAAG,SAAS,CAAC;AAEpD,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,CAAC;IACrB,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;AAID,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,CAyFrB"}
+{"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,GAAG,SAAS,CAAC;AAEpD,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,CAAC;IACrB,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;AAID,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,CAyFrB"}

package/components/Autocomplete/Autocomplete.js

@@ -11,25 +11,25 @@ var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 var _IconTooltip = _interopRequireDefault(require("../IconTooltip"));
 require("../Select/styles.scss");
 require("./styles.scss");
-var isEmpty = function isEmpty(value) {
-  return ['', undefined].includes(value);
-};
+const isEmpty = value => ['', undefined].includes(value);
 function Autocomplete(_ref) {
-  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) {
+  let {
+    id,
+    label,
+    options,
+    onChange,
+    selected,
+    freeSolo,
+    disabled,
+    className,
+    hideClearIcon,
+    isEqual,
+    placeholder,
+    errorText,
+    tooltipTitle,
+    required
+  } = _ref;
+  const onChangeHandler = (event, value) => {
     if (event) {
       if (value) {
         onChange(value);
@@ -38,46 +38,42 @@ function Autocomplete(_ref) {
       }
     }
   };
-  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 = {};
+  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 = {};
   if (hideClearIcon) {
     optionalArgs.clearIcon = null;
   }
   if (isEqual) {
     optionalArgs.isOptionEqualToValue = isEqual;
   } else {
-    optionalArgs.isOptionEqualToValue = function (option, value) {
-      return option === value || isEmpty(option) && isEmpty(value);
-    };
+    optionalArgs.isOptionEqualToValue = (option, value) => option === value || isEmpty(option) && isEmpty(value);
   }
   return /*#__PURE__*/_react.default.createElement(_material.Autocomplete, Object.assign({
     disabled: disabled,
     id: id,
     options: options,
-    getOptionLabel: function getOptionLabel(option) {
+    getOptionLabel: option => {
       if (typeof option === 'object') {
         var _option$label;
         return (_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : '';
@@ -85,9 +81,7 @@ function Autocomplete(_ref) {
       return option !== null && option !== void 0 ? option : '';
     },
     onChange: onChangeHandler,
-    onInputChange: function onInputChange(event, value) {
-      return freeSolo && onChangeHandler(event, value);
-    },
+    onInputChange: (event, value) => freeSolo && onChangeHandler(event, value),
     value: selected,
     freeSolo: freeSolo,
     forcePopupIcon: true,

package/components/Badge/index.d.ts

@@ -1,3 +1,4 @@
+/// <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");
-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;
+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;
   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,3 +1,4 @@
+/// <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,CAsC9F"}
+{"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,9 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _hexRgb = _interopRequireDefault(require("hex-rgb"));
 function BusySpinner(_ref) {
-  var withSkrim = _ref.withSkrim,
-    noBackground = _ref.noBackground;
-  var theme = (0, _material.useTheme)();
+  let {
+    withSkrim,
+    noBackground
+  } = _ref;
+  const theme = (0, _material.useTheme)();
   return /*#__PURE__*/_react.default.createElement(_material.Box, {
     sx: {
       position: 'fixed',

package/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { IconName } from '../Icon/icons';
 import { Size } from '../Size';
 import './styles.scss';
@@ -16,6 +16,7 @@ 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,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"}
+{"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"}

package/components/Button/Button.js

@@ -9,36 +9,35 @@ var _react = _interopRequireDefault(require("react"));
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 require("./styles.scss");
 var _styles2 = require("@mui/styles");
-var useStyles = (0, _styles2.makeStyles)(function () {
-  return {
-    svgIconFill: {
-      '& path': {
-        fill: 'currentColor'
-      }
+const useStyles = (0, _styles2.makeStyles)(() => ({
+  svgIconFill: {
+    '& path': {
+      fill: 'currentColor'
     }
-  };
-});
+  }
+}));
 function Button(props) {
-  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();
+  const {
+    onClick,
+    label,
+    type = 'productive',
+    priority = 'primary',
+    size = 'small',
+    disabled,
+    icon,
+    rightIcon,
+    processing,
+    id,
+    className,
+    style
+  } = props;
+  const 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
+    disabled: disabled,
+    style: style
   }, 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', function () {
-  var handleClick = jest.fn();
+test('calls onClick prop when clicked', () => {
+  const 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', function () {
   _react.fireEvent.click(_react.screen.getByText(/click me/i));
   expect(handleClick).toHaveBeenCalledTimes(1);
 });
-test('should not call onClick prop when button is disabled', function () {
-  var handleClick = jest.fn();
+test('should not call onClick prop when button is disabled', () => {
+  const handleClick = jest.fn();
   (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_Button.default, {
     onClick: handleClick,
     label: "Click me",

package/components/Checkbox.js

@@ -8,35 +8,34 @@ exports.CheckboxStyle = void 0;
 exports.default = Checkbox;
 var _material = require("@mui/material");
 var _react = _interopRequireDefault(require("react"));
-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
-    }
-  };
-};
+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;
 function Checkbox(props) {
   var _props$value;
-  var theme = (0, _material.useTheme)();
-  var onChange = function onChange(event, checked) {
+  const theme = (0, _material.useTheme)();
+  const onChange = (event, checked) => {
     props.onChange(checked);
   };
   return /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {

package/components/Confirm/index.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").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"));
@@ -18,24 +17,26 @@ var _Button = _interopRequireDefault(require("../Button/Button"));
  */
 
 function Confirm(_ref) {
-  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, {
+  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, {
       disabled: confirmButtonDisabled,
       icon: confirmButtonIcon,
       id: confirmButtonId || 'confirm-submit',
@@ -57,8 +58,8 @@ function Confirm(_ref) {
     }
     return buttons;
   }, [confirmButtonDisabled, confirmButtonIcon, confirmButtonId, confirmButtonPriority, confirmButtonText, confirmButtonType, closeButtonId, closeButtonText, onClose, onConfirm]);
-  var content = (0, _react.useMemo)(function () {
-    var text = function text(str, key) {
+  const content = (0, _react.useMemo)(() => {
+    const text = (str, key) => {
       return /*#__PURE__*/_react.default.createElement(_material.Typography, {
         color: theme.palette.TwClrTxt,
         fontSize: "16px",
@@ -66,20 +67,19 @@ function Confirm(_ref) {
         key: key,
         lineHeight: "24px",
         textAlign: "center",
-        sx: (0, _objectSpread2.default)({
+        sx: {
           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(function (str, i) {
-        return text(str, "".concat(str, "_").concat(i));
-      }));
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message.map((str, i) => text(str, "".concat(str, "_").concat(i))));
     } else {
       return message;
     }

package/components/DatePicker/DatePicker.js

@@ -1,13 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").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");
@@ -23,31 +21,22 @@ var _date = require("../../utils/date");
  * export type DatePickerDateType = Exclude<DateType, Date> | null;
  */
 
-var initializeDate = function initializeDate(value, timeZoneId) {
+const initializeDate = (value, timeZoneId) => {
   if (!value) {
     return null;
   }
-  var date = (0, _date.getDate)(value, timeZoneId);
+  const date = (0, _date.getDate)(value, timeZoneId);
   return date !== null && date !== void 0 && date.isValid ? date : null;
 };
 function DatePicker(props) {
   var _props$locale;
-  var _useState = (0, _react.useState)(initializeDate(props.value, props.defaultTimeZone)),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    temporalValue = _useState2[0],
-    setTemporalValue = _useState2[1];
-  var _useState3 = (0, _react.useState)(initializeDate(props.minDate, props.defaultTimeZone)),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    minDateTime = _useState4[0],
-    setMinDateTime = _useState4[1];
-  var _useState5 = (0, _react.useState)(initializeDate(props.maxDate, props.defaultTimeZone)),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    maxDateTime = _useState6[0],
-    setMaxDateTime = _useState6[1];
-  var locale = (_props$locale = props.locale) !== null && _props$locale !== void 0 ? _props$locale : 'en';
+  const [temporalValue, setTemporalValue] = (0, _react.useState)(initializeDate(props.value, props.defaultTimeZone));
+  const [minDateTime, setMinDateTime] = (0, _react.useState)(initializeDate(props.minDate, props.defaultTimeZone));
+  const [maxDateTime, setMaxDateTime] = (0, _react.useState)(initializeDate(props.maxDate, props.defaultTimeZone));
+  const locale = (_props$locale = props.locale) !== null && _props$locale !== void 0 ? _props$locale : 'en';
   _luxon2.Settings.defaultZone = (0, _date.tz)(props.defaultTimeZone);
-  _react.default.useEffect(function () {
-    setTemporalValue(function (prev) {
+  _react.default.useEffect(() => {
+    setTemporalValue(prev => {
       if (props.value !== prev && props.value) {
         return initializeDate(props.value, props.defaultTimeZone);
       } else {
@@ -55,10 +44,10 @@ function DatePicker(props) {
       }
     });
   }, [props.defaultTimeZone, props.value]);
-  _react.default.useEffect(function () {
+  _react.default.useEffect(() => {
     setMinDateTime(initializeDate(props.minDate, props.defaultTimeZone));
   }, [props.defaultTimeZone, props.minDate]);
-  _react.default.useEffect(function () {
+  _react.default.useEffect(() => {
     setMaxDateTime(initializeDate(props.maxDate, props.defaultTimeZone));
   }, [props.defaultTimeZone, props.maxDate]);
 
@@ -67,24 +56,23 @@ function DatePicker(props) {
    * with luxon since DatePicker's inputFormat as placeholder does not
    * work at least with MUI 5.x
    */
-  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)));
-  };
+  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)));
 
   // 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
@@ -102,7 +90,7 @@ function DatePicker(props) {
     inputFormat: "yyyy-MM-dd",
     minDate: minDateTime && minDateTime.isValid ? minDateTime : undefined,
     maxDate: maxDateTime && maxDateTime.isValid ? maxDateTime : undefined,
-    onChange: function onChange(newValue) {
+    onChange: newValue => {
       setTemporalValue(newValue);
       // TODO: remove onChange and make onDateChange required
       if (props.onChange) {