@terraware/web-components 2.12.8-rc.0 → 2.12.9-rc.0

package/components/Navbar/SubNavbar.js

@@ -8,9 +8,7 @@ exports.default = SubNavbar;
 var _react = _interopRequireDefault(require("react"));
 require("./styles.scss");
 function SubNavbar(props) {
-  const {
-    children
-  } = props;
+  var children = props.children;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "subnavbar"
   }, children);

package/components/Note.d.ts

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

package/components/Note.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Note.d.ts","sourceRoot":"","sources":["../../src/components/Note.tsx"],"names":[],"mappings":";AAaA,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAQ7D"}
+{"version":3,"file":"Note.d.ts","sourceRoot":"","sources":["../../src/components/Note.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAQ7D"}

package/components/Note.js

@@ -8,19 +8,19 @@ exports.default = Note;
 var _material = require("@mui/material");
 var _styles = require("@mui/styles");
 var _react = _interopRequireDefault(require("react"));
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  note: {
-    borderRadius: 8,
-    backgroundColor: theme.palette.neutral[200],
-    marginBottom: theme.spacing(3),
-    padding: theme.spacing(2)
-  }
-}));
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    note: {
+      borderRadius: 8,
+      backgroundColor: theme.palette.neutral[200],
+      marginBottom: theme.spacing(3),
+      padding: theme.spacing(2)
+    }
+  };
+});
 function Note(_ref) {
-  let {
-    children
-  } = _ref;
-  const classes = useStyles();
+  var children = _ref.children;
+  var classes = useStyles();
   return /*#__PURE__*/_react.default.createElement(_material.Box, {
     className: classes.note
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {

package/components/PageForm/index.js

@@ -6,29 +6,50 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = PageForm;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
-var _useDeviceInfo = _interopRequireDefault(require("../../utils/useDeviceInfo"));
+var _useDeviceInfo2 = _interopRequireDefault(require("../../utils/useDeviceInfo"));
 var _FormBottomBar = _interopRequireDefault(require("../FormBottomBar"));
 var _BusySpinner = _interopRequireDefault(require("../BusySpinner"));
+var _excluded = ["children", "className", "hideEdit", "onSave"];
 function PageForm(props) {
-  const {
-    children,
-    className,
-    hideEdit,
-    onSave,
-    ...bottomBarProps
-  } = props;
-  const theme = (0, _material.useTheme)();
-  const {
-    isMobile
-  } = (0, _useDeviceInfo.default)();
-  const [processing, setProcessing] = (0, _react.useState)(false);
-  const handleSave = async () => {
-    setProcessing(true);
-    await onSave(); // <-- we want all onSaves to be async
-    setProcessing(false);
-  };
+  var children = props.children,
+    className = props.className,
+    hideEdit = props.hideEdit,
+    onSave = props.onSave,
+    bottomBarProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var theme = (0, _material.useTheme)();
+  var _useDeviceInfo = (0, _useDeviceInfo2.default)(),
+    isMobile = _useDeviceInfo.isMobile;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    processing = _useState2[0],
+    setProcessing = _useState2[1];
+  var handleSave = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setProcessing(true);
+            _context.next = 3;
+            return onSave();
+          case 3:
+            // <-- we want all onSaves to be async
+            setProcessing(false);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleSave() {
+      return _ref.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, processing && /*#__PURE__*/_react.default.createElement(_BusySpinner.default, {
     withSkrim: true
   }), /*#__PURE__*/_react.default.createElement(_material.Box, {

package/components/PhotoChooser/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type PhotoChooserErrorType = {
     title: string;
     text: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PhotoChooser/index.tsx"],"names":[],"mappings":";AASA,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAyBF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CA6G1E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PhotoChooser/index.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAyBF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CA6G1E"}

package/components/PhotoChooser/index.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 = PhotoChooser;
+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");
@@ -13,68 +15,77 @@ var _utils = require("../../utils");
 var _ErrorBox = _interopRequireDefault(require("../ErrorBox/ErrorBox"));
 var _Button = _interopRequireDefault(require("../Button/Button"));
 var _FileChooser = _interopRequireDefault(require("../FileChooser"));
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  removePhoto: {
-    position: 'absolute',
-    top: -10,
-    right: -10,
-    backgroundColor: theme.palette.TwClrBgDanger
-  },
-  error: {
-    width: 'auto',
-    marginBottom: theme.spacing(2),
-    '&.mobile': {
-      width: 'auto'
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    removePhoto: {
+      position: 'absolute',
+      top: -10,
+      right: -10,
+      backgroundColor: theme.palette.TwClrBgDanger
+    },
+    error: {
+      width: 'auto',
+      marginBottom: theme.spacing(2),
+      '&.mobile': {
+        width: 'auto'
+      }
+    },
+    thumbnail: {
+      margin: 'auto auto',
+      objectFit: 'contain',
+      display: 'flex',
+      maxWidth: '120px',
+      maxHeight: '120px'
     }
-  },
-  thumbnail: {
-    margin: 'auto auto',
-    objectFit: 'contain',
-    display: 'flex',
-    maxWidth: '120px',
-    maxHeight: '120px'
-  }
-}));
+  };
+});
 function PhotoChooser(props) {
-  const {
-    title,
-    description,
-    onPhotosChanged,
-    multipleSelection,
-    error,
-    selectedFile,
-    uploadText,
-    uploadMobileDescription,
-    uploadDescription,
-    photoSelectedText,
-    chooseFileText,
-    replaceFileText,
-    maxPhotos
-  } = props;
-  const {
-    isMobile
-  } = (0, _utils.useDeviceInfo)();
-  const classes = useStyles();
-  const [files, setFiles] = (0, _react.useState)([]);
-  const [filesData, setFilesData] = (0, _react.useState)([]);
-  const divRef = (0, _react.useRef)(null);
-  const theme = (0, _material.useTheme)();
-  const removeFileAtIndex = index => {
-    const filesList = [...files];
+  var title = props.title,
+    description = props.description,
+    onPhotosChanged = props.onPhotosChanged,
+    multipleSelection = props.multipleSelection,
+    error = props.error,
+    selectedFile = props.selectedFile,
+    uploadText = props.uploadText,
+    uploadMobileDescription = props.uploadMobileDescription,
+    uploadDescription = props.uploadDescription,
+    photoSelectedText = props.photoSelectedText,
+    chooseFileText = props.chooseFileText,
+    replaceFileText = props.replaceFileText,
+    maxPhotos = props.maxPhotos;
+  var _useDeviceInfo = (0, _utils.useDeviceInfo)(),
+    isMobile = _useDeviceInfo.isMobile;
+  var classes = useStyles();
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    files = _useState2[0],
+    setFiles = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    filesData = _useState4[0],
+    setFilesData = _useState4[1];
+  var divRef = (0, _react.useRef)(null);
+  var theme = (0, _material.useTheme)();
+  var removeFileAtIndex = function removeFileAtIndex(index) {
+    var filesList = (0, _toConsumableArray2.default)(files);
     filesList.splice(index, 1);
     setFiles(filesList);
   };
-  const onChoosingFiles = () => {
+  var onChoosingFiles = function onChoosingFiles() {
     var _divRef$current;
     (_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.focus();
   };
-  (0, _react.useEffect)(() => {
-    const filesDataList = files.map(file => URL.createObjectURL(file));
+  (0, _react.useEffect)(function () {
+    var filesDataList = files.map(function (file) {
+      return URL.createObjectURL(file);
+    });
     setFilesData(filesDataList);
     onPhotosChanged(files);
-    return () => {
+    return function () {
       // we need to clean this up to avoid a memory leak
-      filesDataList.forEach(fileData => URL.revokeObjectURL(fileData));
+      filesDataList.forEach(function (fileData) {
+        return URL.revokeObjectURL(fileData);
+      });
     };
   }, [files]);
   return /*#__PURE__*/_react.default.createElement(_material.Box, {
@@ -93,9 +104,11 @@ function PhotoChooser(props) {
     fontWeight: 400,
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(2)
-  }, Array.isArray(description) ? description.map((txt, i) => /*#__PURE__*/_react.default.createElement("div", {
-    key: i
-  }, txt)) : description), error && /*#__PURE__*/_react.default.createElement(_ErrorBox.default, {
+  }, Array.isArray(description) ? description.map(function (txt, i) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: i
+    }, txt);
+  }) : description), error && /*#__PURE__*/_react.default.createElement(_ErrorBox.default, {
     title: error.title,
     text: error.text,
     className: classes.error
@@ -104,7 +117,7 @@ function PhotoChooser(props) {
     flexDirection: "row",
     flexWrap: "wrap",
     marginBottom: theme.spacing(2)
-  }, filesData.map((fileData, index) => {
+  }, filesData.map(function (fileData, index) {
     var _files$index;
     return /*#__PURE__*/_react.default.createElement(_material.Box, {
       key: index,
@@ -116,7 +129,9 @@ function PhotoChooser(props) {
       border: "1px solid ".concat(theme.palette.TwClrBrdrTertiary)
     }, /*#__PURE__*/_react.default.createElement(_Button.default, {
       icon: "iconTrashCan",
-      onClick: () => removeFileAtIndex(index),
+      onClick: function onClick() {
+        return removeFileAtIndex(index);
+      },
       size: "small",
       className: classes.removePhoto
     }), /*#__PURE__*/_react.default.createElement("img", {

package/components/Pill/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './styles.scss';
 type PillProps<IdType> = {
     id: IdType;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pill/index.tsx"],"names":[],"mappings":";AAGA,OAAO,eAAe,CAAC;AAEvB,KAAK,SAAS,CAAC,MAAM,IAAI;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CA+B1E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pill/index.tsx"],"names":[],"mappings":"AAGA,OAAO,eAAe,CAAC;AAEvB,KAAK,SAAS,CAAC,MAAM,IAAI;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CA+B1E"}

package/components/Pill/index.js

@@ -10,20 +10,18 @@ var _react = _interopRequireDefault(require("react"));
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 require("./styles.scss");
 function Pill(props) {
-  const {
-    id,
-    label,
-    value,
-    onClick,
-    onRemove,
-    className
-  } = props;
+  var id = props.id,
+    label = props.label,
+    value = props.value,
+    _onClick = props.onClick,
+    onRemove = props.onRemove,
+    className = props.className;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "pill ".concat(className !== null && className !== void 0 ? className : ''),
-    onClick: ev => {
+    onClick: function onClick(ev) {
       ev.stopPropagation();
-      if (onClick) {
-        onClick(id);
+      if (_onClick) {
+        _onClick(id);
       }
     }
   }, label && /*#__PURE__*/_react.default.createElement("p", {
@@ -31,7 +29,7 @@ function Pill(props) {
   }, label, ":"), /*#__PURE__*/_react.default.createElement("p", {
     className: "value".concat(label ? '' : ' value--no-label')
   }, value), onRemove ? /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: ev => {
+    onClick: function onClick(ev) {
       ev.stopPropagation();
       onRemove(id);
     },

package/components/PillList/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './styles.scss';
 export type PillListItem<IdType> = {
     id: IdType;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PillList/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,YAAY,CAAC,MAAM,IAAI;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,MAAM,IAAI;IAClC,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAkBlF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PillList/index.tsx"],"names":[],"mappings":"AAEA,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,YAAY,CAAC,MAAM,IAAI;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,MAAM,IAAI;IAClC,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAkBlF"}

package/components/PillList/index.js

@@ -9,21 +9,21 @@ var _react = _interopRequireDefault(require("react"));
 var _Pill = _interopRequireDefault(require("../Pill"));
 require("./styles.scss");
 function PillList(props) {
-  const {
-    data,
-    onClick,
-    onRemove,
-    className
-  } = props;
+  var data = props.data,
+    onClick = props.onClick,
+    onRemove = props.onRemove,
+    className = props.className;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "pill-list"
-  }, data.map((item, index) => /*#__PURE__*/_react.default.createElement(_Pill.default, {
-    key: index,
-    id: item.id,
-    label: item.label,
-    value: item.value,
-    onClick: item.onClick || onClick,
-    onRemove: item.onRemove || onRemove,
-    className: item.className || className
-  })));
+  }, data.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_Pill.default, {
+      key: index,
+      id: item.id,
+      label: item.label,
+      value: item.value,
+      onClick: item.onClick || onClick,
+      onRemove: item.onRemove || onRemove,
+      className: item.className || className
+    });
+  }));
 }

package/components/PopoverMenu/Popover.js

@@ -5,36 +5,37 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = PopoverDropdown;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 function PopoverDropdown(props) {
-  const {
-    sections,
-    handleClick,
-    anchorElement,
-    setAnchorElement,
-    itemRenderer,
-    menuAlign
-  } = props;
-  const theme = (0, _material.useTheme)();
-  const handleClose = () => {
+  var sections = props.sections,
+    handleClick = props.handleClick,
+    anchorElement = props.anchorElement,
+    setAnchorElement = props.setAnchorElement,
+    itemRenderer = props.itemRenderer,
+    menuAlign = props.menuAlign;
+  var theme = (0, _material.useTheme)();
+  var handleClose = function handleClose() {
     setAnchorElement(null);
   };
-  const onClick = item => {
+  var _onClick = function onClick(item) {
     if (item.onClick) {
       item.onClick();
     }
     handleClick(item);
   };
-  const itemStyles = type => ({
-    color: type === 'destructive' ? theme.palette.TwClrTxtDanger : theme.palette.TwClrTxt,
-    '& .MuiMenuItem-root:hover': {
-      backgroundColor: theme.palette.TwClrBgSelectedGhostHover
-    },
-    '&.MuiMenuItem-root:active': {
-      backgroundColor: theme.palette.TwClrBgSelectedGhostActive
-    }
-  });
+  var itemStyles = function itemStyles(type) {
+    return {
+      color: type === 'destructive' ? theme.palette.TwClrTxtDanger : theme.palette.TwClrTxt,
+      '& .MuiMenuItem-root:hover': {
+        backgroundColor: theme.palette.TwClrBgSelectedGhostHover
+      },
+      '&.MuiMenuItem-root:active': {
+        backgroundColor: theme.palette.TwClrBgSelectedGhostActive
+      }
+    };
+  };
   return /*#__PURE__*/_react.default.createElement(_material.Popover, {
     id: "simple-popover",
     open: Boolean(anchorElement),
@@ -61,20 +62,22 @@ function PopoverDropdown(props) {
     sx: {
       padding: 0
     }
-  }, sections === null || sections === void 0 ? void 0 : sections.map((section, index) => {
-    let elements = [];
+  }, sections === null || sections === void 0 ? void 0 : sections.map(function (section, index) {
+    var elements = [];
     if (index > 0) {
       elements.push( /*#__PURE__*/_react.default.createElement(_material.ListItem, null, "---"));
     }
-    elements = [...elements, ...section.map((item, itemIndex) => {
+    elements = [].concat((0, _toConsumableArray2.default)(elements), (0, _toConsumableArray2.default)(section.map(function (item, itemIndex) {
       return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-        onClick: () => onClick(item),
+        onClick: function onClick() {
+          return _onClick(item);
+        },
         key: "option-".concat(itemIndex),
         sx: itemStyles(item.type),
         disableRipple: true,
         disabled: item.disabled
       }, itemRenderer ? itemRenderer(item) : item.label);
-    })];
+    })));
     return elements;
   })));
 }

package/components/PopoverMenu/index.js

@@ -1,46 +1,50 @@
 "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 = PopoverMenu;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 var _material = require("@mui/material");
 var _styles = require("@mui/styles");
 var _Popover = _interopRequireDefault(require("./Popover"));
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  iconContainer: {
-    height: '48px',
-    borderRadius: '16px',
-    padding: theme.spacing(1.5, 2)
-  },
-  icon: {
-    width: '32px',
-    height: '32px'
-  },
-  chevronDown: {
-    marginLeft: '8px',
-    fill: theme.palette.TwClrIcn
-  }
-}));
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    iconContainer: {
+      height: '48px',
+      borderRadius: '16px',
+      padding: theme.spacing(1.5, 2)
+    },
+    icon: {
+      width: '32px',
+      height: '32px'
+    },
+    chevronDown: {
+      marginLeft: '8px',
+      fill: theme.palette.TwClrIcn
+    }
+  };
+});
 function PopoverMenu(_ref) {
-  let {
-    anchor,
-    menuSections,
-    onClick
-  } = _ref;
-  const classes = useStyles();
-  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
-  const handleClick = event => {
+  var anchor = _ref.anchor,
+    menuSections = _ref.menuSections,
+    onClick = _ref.onClick;
+  var classes = useStyles();
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    anchorEl = _useState2[0],
+    setAnchorEl = _useState2[1];
+  var handleClick = function handleClick(event) {
     setAnchorEl(event.currentTarget);
   };
-  const handleClose = () => {
+  var handleClose = function handleClose() {
     setAnchorEl(null);
   };
-  const onItemClick = selectedItem => {
+  var onItemClick = function onItemClick(selectedItem) {
     if (onClick) {
       onClick(selectedItem);
     }

package/components/PopoverMultiSelect/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './styles.scss';
 import { Section } from '../PopoverMenu/Popover';
 export type PopoverMultiSelectProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PopoverMultiSelect/index.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AACvB,OAAgB,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,MAAM,uBAAuB,GAAG;IACpC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,gBAAgB,EAAE,GAAG,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,QAAQ,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CA8CtF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PopoverMultiSelect/index.tsx"],"names":[],"mappings":"AAIA,OAAO,eAAe,CAAC;AACvB,OAAgB,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,MAAM,uBAAuB,GAAG;IACpC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,gBAAgB,EAAE,GAAG,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,QAAQ,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CA8CtF"}