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

package/components/DialogBox/DialogBox.js

@@ -5,27 +5,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = DialogBox;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
 require("./styles.scss");
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 var _material = require("@mui/material");
 var _utils = require("../../utils");
 function DialogBox(props) {
-  var title = props.title,
-    size = props.size,
-    message = props.message,
-    children = props.children,
-    leftButton = props.leftButton,
-    rightButtons = props.rightButtons,
-    middleButtons = props.middleButtons,
-    onClose = props.onClose,
-    open = props.open,
-    scrolled = props.scrolled,
-    skrim = props.skrim;
-  var hasFooter = leftButton || rightButtons || middleButtons;
-  var _useDeviceInfo = (0, _utils.useDeviceInfo)(),
-    isMobile = _useDeviceInfo.isMobile;
+  const {
+    title,
+    size,
+    message,
+    children,
+    leftButton,
+    rightButtons,
+    middleButtons,
+    onClose,
+    open,
+    scrolled,
+    skrim
+  } = props;
+  const hasFooter = leftButton || rightButtons || middleButtons;
+  const {
+    isMobile
+  } = (0, _utils.useDeviceInfo)();
   return open ? /*#__PURE__*/_react.default.createElement("div", {
     className: "dialog-box-container".concat(skrim ? '--skrim' : '', " ").concat(open ? 'dialog-box--opened' : 'dialog-box--closed', " ").concat(isMobile ? 'mobile' : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -56,23 +58,27 @@ function DialogBox(props) {
     className: "left-button"
   }, leftButton), /*#__PURE__*/_react.default.createElement("div", {
     className: "right-buttons"
-  }, rightButtons === null || rightButtons === void 0 ? void 0 : rightButtons.map(function (rb, index) {
-    var rbWithKey = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rb), {}, {
+  }, rightButtons === null || rightButtons === void 0 ? void 0 : rightButtons.map((rb, index) => {
+    const rbWithKey = {
+      ...rb,
       key: "rb-".concat(index),
-      props: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rb.props), {}, {
+      props: {
+        ...rb.props,
         size: rb.props.size || 'medium'
-      })
-    });
+      }
+    };
     return rbWithKey;
   }))), middleButtons && /*#__PURE__*/_react.default.createElement("div", {
     className: "dialog-box--actions-container"
-  }, middleButtons === null || middleButtons === void 0 ? void 0 : middleButtons.map(function (mb, index) {
-    var mbWithKey = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mb), {}, {
+  }, middleButtons === null || middleButtons === void 0 ? void 0 : middleButtons.map((mb, index) => {
+    const mbWithKey = {
+      ...mb,
       key: "mb-".concat(index),
-      props: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mb.props), {}, {
+      props: {
+        ...mb.props,
         size: mb.props.size || 'medium'
-      })
-    });
+      }
+    };
     return mbWithKey;
   }))))) : null;
 }

package/components/Divisor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface Props {
     mt?: number;
 }

package/components/Divisor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Divisor.d.ts","sourceRoot":"","sources":["../../src/components/Divisor.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,KAAK;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AACD,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,EAAM,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAQ9D"}
+{"version":3,"file":"Divisor.d.ts","sourceRoot":"","sources":["../../src/components/Divisor.tsx"],"names":[],"mappings":";AAGA,MAAM,WAAW,KAAK;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AACD,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,EAAM,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAQ9D"}

package/components/Divisor.js

@@ -8,8 +8,9 @@ exports.default = Divisor;
 var _material = require("@mui/material");
 var _react = _interopRequireDefault(require("react"));
 function Divisor(_ref) {
-  var _ref$mt = _ref.mt,
-    mt = _ref$mt === void 0 ? 3 : _ref$mt;
+  let {
+    mt = 3
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
     mt: mt
   }), /*#__PURE__*/_react.default.createElement(_material.Divider, {

package/components/Dropdown.d.ts

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

package/components/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAgB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAKzD,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAQD,wBAAgB,UAAU,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkBlG;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAGrC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,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;IAG5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAsClE"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAgB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAKzD,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAQD,wBAAgB,UAAU,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkBlG;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAGrC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,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;IAG5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAsClE"}

package/components/Dropdown.js

@@ -6,31 +6,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DropdownV1 = DropdownV1;
 exports.default = Dropdown;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _material = require("@mui/material");
 var _SelectT = _interopRequireDefault(require("./Select/SelectT"));
 var _Autocomplete = _interopRequireDefault(require("./Autocomplete/Autocomplete"));
 var _styles = require("@mui/styles");
 var _react = _interopRequireDefault(require("react"));
-var _excluded = ["selectedValue", "onChange", "options", "autocomplete"];
-var useStyles = (0, _styles.makeStyles)(function () {
-  return {
-    formControl: {
-      width: '100%'
-    }
-  };
-});
+const useStyles = (0, _styles.makeStyles)(() => ({
+  formControl: {
+    width: '100%'
+  }
+}));
 function DropdownV1(_ref) {
-  var id = _ref.id,
-    label = _ref.label,
-    values = _ref.values,
-    onChange = _ref.onChange,
-    selected = _ref.selected,
-    disabled = _ref.disabled;
-  var onChangeH = function onChangeH(event, _child) {
+  let {
+    id,
+    label,
+    values,
+    onChange,
+    selected,
+    disabled
+  } = _ref;
+  const onChangeH = (event, _child) => {
     onChange(event.target.value);
   };
-  var classes = useStyles();
+  const classes = useStyles();
   return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
     variant: "outlined",
     className: classes.formControl,
@@ -44,9 +42,11 @@ function DropdownV1(_ref) {
     label: label,
     onChange: onChangeH,
     value: selected
-  }, values === null || values === void 0 ? void 0 : values.map(function (_ref2) {
-    var inLabel = _ref2.label,
-      value = _ref2.value;
+  }, values === null || values === void 0 ? void 0 : values.map(_ref2 => {
+    let {
+      label: inLabel,
+      value
+    } = _ref2;
     return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
       id: value,
       key: value,
@@ -67,16 +67,16 @@ function DropdownV1(_ref) {
  * />
  */
 function Dropdown(props) {
-  var selectedValue = props.selectedValue,
-    _onChange = props.onChange,
-    options = props.options,
-    autocomplete = props.autocomplete,
-    remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var selectedItem = options === null || options === void 0 ? void 0 : options.find(function (option) {
-    return option.value === selectedValue;
-  });
-  var renderOption = function renderOption(option) {
-    var styles = {
+  const {
+    selectedValue,
+    onChange,
+    options,
+    autocomplete,
+    ...remainingProps
+  } = props;
+  const selectedItem = options === null || options === void 0 ? void 0 : options.find(option => option.value === selectedValue);
+  const renderOption = option => {
+    const styles = {
       fontWeight: option.fontWeight || 'normal',
       fontStyle: option.fontStyle || 'normal'
     };
@@ -88,32 +88,20 @@ function Dropdown(props) {
     return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, Object.assign({}, remainingProps, {
       options: options !== null && options !== void 0 ? options : [],
       selected: selectedItem || '',
-      isEqual: function isEqual(A, B) {
-        return A.value === B.value;
-      },
-      onChange: function onChange(option) {
-        return _onChange(option.value);
-      }
+      isEqual: (A, B) => A.value === B.value,
+      onChange: option => onChange(option.value)
     }));
   }
   return /*#__PURE__*/_react.default.createElement(_SelectT.default, Object.assign({}, remainingProps, {
     options: options,
     selectedValue: selectedItem,
-    isEqual: function isEqual(A, B) {
-      return A.value === B.value;
-    },
+    isEqual: (A, B) => A.value === B.value,
     renderOption: renderOption,
-    toT: function toT(str) {
-      return {
-        label: str,
-        value: str
-      };
-    },
-    displayLabel: function displayLabel(option) {
-      return (option === null || option === void 0 ? void 0 : option.label) || '';
-    },
-    onChange: function onChange(option) {
-      return _onChange(option.value);
-    }
+    toT: str => ({
+      label: str,
+      value: str
+    }),
+    displayLabel: option => (option === null || option === void 0 ? void 0 : option.label) || '',
+    onChange: option => onChange(option.value)
   }));
 }

package/components/ErrorBox/ErrorBox.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './styles.scss';
 export interface Props {
     text: string;

package/components/ErrorBox/ErrorBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBox.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBox/ErrorBox.tsx"],"names":[],"mappings":"AAIA,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoB1D"}
+{"version":3,"file":"ErrorBox.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBox/ErrorBox.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoB1D"}

package/components/ErrorBox/ErrorBox.js

@@ -8,16 +8,19 @@ exports.default = ErrorBox;
 var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("../Button/Button"));
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-var _useDeviceInfo2 = _interopRequireDefault(require("../../utils/useDeviceInfo"));
+var _useDeviceInfo = _interopRequireDefault(require("../../utils/useDeviceInfo"));
 require("./styles.scss");
 function ErrorBox(props) {
-  var text = props.text,
-    onClick = props.onClick,
-    buttonText = props.buttonText,
-    title = props.title,
-    className = props.className;
-  var _useDeviceInfo = (0, _useDeviceInfo2.default)(),
-    isMobile = _useDeviceInfo.isMobile;
+  const {
+    text,
+    onClick,
+    buttonText,
+    title,
+    className
+  } = props;
+  const {
+    isMobile
+  } = (0, _useDeviceInfo.default)();
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "error-box ".concat(className, " ").concat(isMobile ? 'mobile' : '')
   }, /*#__PURE__*/_react.default.createElement("div", {

package/components/FileChooser/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconName } from '../Icon/icons';
 export type FileTemplate = {
     text: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FileChooser/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA2BzC,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAiHxE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FileChooser/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA2BzC,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAiHxE"}

package/components/FileChooser/index.js

@@ -1,98 +1,94 @@
 "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 = FileChooser;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var _styles = require("@mui/styles");
 var _utils = require("../../utils");
 var _Button = _interopRequireDefault(require("../Button/Button"));
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-var useStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    hiddenInput: {
-      display: 'none'
-    },
-    icon: {
-      height: '120px',
-      width: '120px'
-    },
-    button: {
-      marginTop: theme.spacing(3)
-    },
-    link: {
-      color: theme.palette.TwClrTxtBrand,
-      fontFamily: 'Inter',
-      fontSize: '12px',
-      fontWeight: 500,
-      lineHeight: '16px',
-      marginTop: theme.spacing(2),
-      textDecoration: 'none',
-      '&:hover': {
-        textDecoration: 'underline'
-      }
+const useStyles = (0, _styles.makeStyles)(theme => ({
+  hiddenInput: {
+    display: 'none'
+  },
+  icon: {
+    height: '120px',
+    width: '120px'
+  },
+  button: {
+    marginTop: theme.spacing(3)
+  },
+  link: {
+    color: theme.palette.TwClrTxtBrand,
+    fontFamily: 'Inter',
+    fontSize: '12px',
+    fontWeight: 500,
+    lineHeight: '16px',
+    marginTop: theme.spacing(2),
+    textDecoration: 'none',
+    '&:hover': {
+      textDecoration: 'underline'
     }
-  };
-});
+  }
+}));
 function FileChooser(props) {
-  var acceptFileType = props.acceptFileType,
-    chooseFileText = props.chooseFileText,
-    files = props.files,
-    fileSelectedText = props.fileSelectedText,
-    iconName = props.iconName,
-    maxFiles = props.maxFiles,
-    multipleSelection = props.multipleSelection,
-    onChoosingFiles = props.onChoosingFiles,
-    replaceFileText = props.replaceFileText,
-    selectedFile = props.selectedFile,
-    setFiles = props.setFiles,
-    template = props.template,
-    uploadDescription = props.uploadDescription,
-    uploadMobileDescription = props.uploadMobileDescription,
-    uploadText = props.uploadText;
-  var _useDeviceInfo = (0, _utils.useDeviceInfo)(),
-    isMobile = _useDeviceInfo.isMobile;
-  var classes = useStyles();
-  var inputRef = (0, _react.useRef)(null);
-  var theme = (0, _material.useTheme)();
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    editing = _useState2[0],
-    setEditing = _useState2[1];
-  (0, _react.useEffect)(function () {
+  const {
+    acceptFileType,
+    chooseFileText,
+    files,
+    fileSelectedText,
+    iconName,
+    maxFiles,
+    multipleSelection,
+    onChoosingFiles,
+    replaceFileText,
+    selectedFile,
+    setFiles,
+    template,
+    uploadDescription,
+    uploadMobileDescription,
+    uploadText
+  } = props;
+  const {
+    isMobile
+  } = (0, _utils.useDeviceInfo)();
+  const classes = useStyles();
+  const inputRef = (0, _react.useRef)(null);
+  const theme = (0, _material.useTheme)();
+  const [editing, setEditing] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
     setEditing(!!selectedFile);
   }, [selectedFile]);
-  var addFiles = function addFiles(fileList) {
-    var newFiles = [];
-    for (var i = 0; i < fileList.length; i++) {
-      var fileItem = fileList.item(i);
+  const addFiles = fileList => {
+    const newFiles = [];
+    for (let i = 0; i < fileList.length; i++) {
+      const fileItem = fileList.item(i);
       if (fileItem) {
         newFiles.push(fileItem);
       }
     }
     if (newFiles.length) {
-      setFiles([].concat((0, _toConsumableArray2.default)(files !== null && files !== void 0 ? files : []), newFiles).slice(0, maxFiles));
+      setFiles([...(files !== null && files !== void 0 ? files : []), ...newFiles].slice(0, maxFiles));
     }
   };
-  var dropHandler = function dropHandler(event) {
+  const dropHandler = event => {
     event.preventDefault();
     addFiles(event.dataTransfer.files);
   };
-  var enableDropping = function enableDropping(event) {
+  const enableDropping = event => {
     event.preventDefault();
   };
-  var onChooseFileHandler = function onChooseFileHandler() {
+  const onChooseFileHandler = () => {
     var _inputRef$current;
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
     onChoosingFiles === null || onChoosingFiles === void 0 ? void 0 : onChoosingFiles();
   };
-  var onFileChosen = function onFileChosen(event) {
+  const onFileChosen = event => {
     if (editing) {
       setEditing(false);
     }

package/components/FormBottomBar/index.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormBottomBar/index.tsx"],"names":[],"mappings":"AA4CA,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IACzC,UAAU,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;CACvD;AAED,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,sBAAsB,CAAC,EAAE,UAAU,EAAE,CAAC;CACvC;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,MAAM,EACN,sBAAsB,GACvB,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA8CrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormBottomBar/index.tsx"],"names":[],"mappings":";AAKA,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IACzC,UAAU,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;CACvD;AAED,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,sBAAsB,CAAC,EAAE,UAAU,EAAE,CAAC;CACvC;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,MAAM,EACN,sBAAsB,GACvB,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA4ErB"}

package/components/FormBottomBar/index.js

@@ -8,64 +8,23 @@ exports.default = FormBottomBar;
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _Button = _interopRequireDefault(require("../Button/Button"));
-var _styles = require("@mui/styles");
-var _useDeviceInfo2 = _interopRequireDefault(require("../../utils/useDeviceInfo"));
-var useStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    bottomBar: {
-      background: "linear-gradient(to right, ".concat(theme.palette.TwClrBaseGray025, "00,") + "".concat(theme.palette.TwClrBaseGray025, "80, ").concat(theme.palette.TwClrBaseGray025, "80,") + "".concat(theme.palette.TwClrBaseGray025, "00)"),
-      backdropFilter: 'blur(16px)',
-      borderTop: '1px solid',
-      borderImage: "linear-gradient(to right, ".concat(theme.palette.TwClrBaseGray300, "00,") + "".concat(theme.palette.TwClrBaseGray300, "FF, ").concat(theme.palette.TwClrBaseGray300, "FF,") + "".concat(theme.palette.TwClrBaseGray300, "FF, ").concat(theme.palette.TwClrBaseGray300, "00) 1"),
-      boxShadow: 'none',
-      justifyContent: 'space-between',
-      display: 'flex',
-      flexDirection: function flexDirection(props) {
-        return props.isMobile ? 'column-reverse' : 'row';
-      },
-      padding: function padding(props) {
-        return props.isDesktop ? '16px 24px' : "16px 24px ".concat(theme.spacing(5));
-      },
-      width: function width(props) {
-        return props.isDesktop ? 'calc(100% - 200px)' : '100%';
-      },
-      zIndex: 1000
-    },
-    button: {
-      marginTop: function marginTop(props) {
-        return props.isMobile ? theme.spacing(1) : 'auto';
-      }
-    },
-    rightButtons: {
-      marginTop: function marginTop(props) {
-        return props.isMobile ? theme.spacing(1) : 'auto';
-      },
-      marginRight: theme.spacing(1)
-    },
-    rightButtonGroup: {
-      display: 'flex',
-      flexDirection: function flexDirection(props) {
-        return props.isMobile ? 'column-reverse' : 'row';
-      }
-    }
-  };
-});
+var _useDeviceInfo = _interopRequireDefault(require("../../utils/useDeviceInfo"));
 function FormBottomBar(_ref) {
-  var cancelID = _ref.cancelID,
-    saveID = _ref.saveID,
-    onCancel = _ref.onCancel,
-    cancelButtonText = _ref.cancelButtonText,
-    saveButtonText = _ref.saveButtonText,
-    saveDisabled = _ref.saveDisabled,
-    onSave = _ref.onSave,
-    additionalRightButtons = _ref.additionalRightButtons;
-  var _useDeviceInfo = (0, _useDeviceInfo2.default)(),
-    isMobile = _useDeviceInfo.isMobile,
-    isDesktop = _useDeviceInfo.isDesktop;
-  var classes = useStyles({
-    isMobile: isMobile,
-    isDesktop: isDesktop
-  });
+  let {
+    cancelID,
+    saveID,
+    onCancel,
+    cancelButtonText,
+    saveButtonText,
+    saveDisabled,
+    onSave,
+    additionalRightButtons
+  } = _ref;
+  const {
+    isMobile,
+    isDesktop
+  } = (0, _useDeviceInfo.default)();
+  const theme = (0, _material.useTheme)();
   return /*#__PURE__*/_react.default.createElement(_material.AppBar, {
     position: "fixed",
     color: "primary",
@@ -75,7 +34,19 @@ function FormBottomBar(_ref) {
       right: 'auto',
       left: isDesktop ? 'auto' : 0
     },
-    className: classes.bottomBar
+    sx: {
+      background: "linear-gradient(to right, ".concat(theme.palette.TwClrBaseGray025, "00,") + "".concat(theme.palette.TwClrBaseGray025, "80, ").concat(theme.palette.TwClrBaseGray025, "80,") + "".concat(theme.palette.TwClrBaseGray025, "00)"),
+      backdropFilter: 'blur(16px)',
+      borderTop: '1px solid',
+      borderImage: "linear-gradient(to right, ".concat(theme.palette.TwClrBaseGray300, "00,") + "".concat(theme.palette.TwClrBaseGray300, "FF, ").concat(theme.palette.TwClrBaseGray300, "FF,") + "".concat(theme.palette.TwClrBaseGray300, "FF, ").concat(theme.palette.TwClrBaseGray300, "00) 1"),
+      boxShadow: 'none',
+      justifyContent: 'space-between',
+      display: 'flex',
+      flexDirection: isMobile ? 'column-reverse' : 'row',
+      padding: isDesktop ? '16px 24px' : "16px 24px ".concat(theme.spacing(5)),
+      width: isDesktop ? 'calc(100% - 200px)' : '100%',
+      zIndex: 1000
+    }
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: cancelID || 'cancelBottomBar',
     size: "medium",
@@ -83,27 +54,35 @@ function FormBottomBar(_ref) {
     onClick: onCancel,
     priority: "secondary",
     type: "passive",
-    className: classes.button
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.rightButtonGroup
-  }, additionalRightButtons && additionalRightButtons.map(function (btn) {
-    return /*#__PURE__*/_react.default.createElement(_Button.default, {
-      id: btn.id,
-      key: btn.id,
-      priority: btn.buttonPriority,
-      type: btn.buttonType,
-      size: "medium",
-      label: btn.text,
-      onClick: btn.onClick,
-      className: classes.rightButtons,
-      disabled: btn.disabled
-    });
-  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    style: {
+      marginTop: isMobile ? theme.spacing(1) : 'auto',
+      marginRight: theme.spacing(1)
+    }
+  }), /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      display: 'flex',
+      flexDirection: isMobile ? 'column-reverse' : 'row'
+    }
+  }, additionalRightButtons && additionalRightButtons.map(btn => /*#__PURE__*/_react.default.createElement(_Button.default, {
+    id: btn.id,
+    key: btn.id,
+    priority: btn.buttonPriority,
+    type: btn.buttonType,
+    size: "medium",
+    label: btn.text,
+    onClick: btn.onClick,
+    disabled: btn.disabled,
+    style: {
+      marginTop: isMobile ? theme.spacing(1) : 'auto'
+    }
+  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: saveID || 'saveBottomBar',
     size: "medium",
     label: saveButtonText,
     onClick: onSave,
-    className: classes.button,
-    disabled: saveDisabled
+    disabled: saveDisabled,
+    style: {
+      marginTop: isMobile ? theme.spacing(1) : 'auto'
+    }
   })));
 }