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

package/components/IconTooltip/index.js

@@ -5,48 +5,55 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = IconTooltip;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _styles = require("@mui/styles");
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 var _utils = require("../../utils");
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  arrow: {
-    color: theme.palette.TwClrBaseGray800
-  },
-  icon: {
-    fill: theme.palette.TwClrIcnSecondary,
-    marginLeft: '4px',
-    marginRight: props => props.disableRightMargin ? '0px' : '4px',
-    verticalAlign: 'text-top'
-  },
-  tooltip: {
-    backgroundColor: theme.palette.TwClrBaseGray800,
-    color: theme.palette.TwClrBaseWhite,
-    padding: '8px',
-    '& a': {
-      color: theme.palette.TwClrBaseWhite
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    arrow: {
+      color: theme.palette.TwClrBaseGray800
+    },
+    icon: {
+      fill: theme.palette.TwClrIcnSecondary,
+      marginLeft: '4px',
+      marginRight: function marginRight(props) {
+        return props.disableRightMargin ? '0px' : '4px';
+      },
+      verticalAlign: 'text-top'
+    },
+    tooltip: {
+      backgroundColor: theme.palette.TwClrBaseGray800,
+      color: theme.palette.TwClrBaseWhite,
+      padding: '8px',
+      '& a': {
+        color: theme.palette.TwClrBaseWhite
+      }
     }
-  }
-}));
+  };
+});
 function IconTooltip(_ref) {
-  let {
-    iconName = 'info',
-    placement = 'top-start',
-    title,
-    disableRightMargin
-  } = _ref;
-  const [open, setOpen] = _react.default.useState(false);
-  const {
-    isMobile
-  } = (0, _utils.useDeviceInfo)();
-  const classes = useStyles({
-    disableRightMargin
+  var _ref$iconName = _ref.iconName,
+    iconName = _ref$iconName === void 0 ? 'info' : _ref$iconName,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'top-start' : _ref$placement,
+    title = _ref.title,
+    disableRightMargin = _ref.disableRightMargin;
+  var _React$useState = _react.default.useState(false),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    open = _React$useState2[0],
+    setOpen = _React$useState2[1];
+  var _useDeviceInfo = (0, _utils.useDeviceInfo)(),
+    isMobile = _useDeviceInfo.isMobile;
+  var classes = useStyles({
+    disableRightMargin: disableRightMargin
   });
-  const handleTooltipClose = () => {
+  var handleTooltipClose = function handleTooltipClose() {
     setOpen(false);
   };
-  const handleTooltipOpen = () => {
+  var handleTooltipOpen = function handleTooltipOpen() {
     setOpen(true);
   };
   return /*#__PURE__*/_react.default.createElement(_material.Tooltip, {

package/components/Message/Message.d.ts

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

package/components/Message/Message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Message/Message.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,CAAC;AAIvB,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,QAAQ,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;IACtD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAkDhE"}
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Message/Message.tsx"],"names":[],"mappings":"AACA,OAAO,eAAe,CAAC;AAIvB,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,QAAQ,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;IACtD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAkDhE"}

package/components/Message/Message.js

@@ -5,25 +5,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Message;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
 require("./styles.scss");
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 var _utils = require("../../utils");
 function Message(props) {
-  const {
-    type,
-    priority,
-    title,
-    body,
-    actionText,
-    actionHandler,
-    pageButtons,
-    showCloseButton,
-    onClose
-  } = props;
-  const {
-    isMobile
-  } = (0, _utils.useDeviceInfo)();
+  var type = props.type,
+    priority = props.priority,
+    title = props.title,
+    body = props.body,
+    actionText = props.actionText,
+    actionHandler = props.actionHandler,
+    pageButtons = props.pageButtons,
+    showCloseButton = props.showCloseButton,
+    onClose = props.onClose;
+  var _useDeviceInfo = (0, _utils.useDeviceInfo)(),
+    isMobile = _useDeviceInfo.isMobile;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "tw-message tw-message--".concat(type, " tw-message--").concat(priority, " ").concat(isMobile ? 'tw-message--mobile' : '')
   }, type === 'toast' && /*#__PURE__*/_react.default.createElement("div", {
@@ -44,15 +42,13 @@ function Message(props) {
     className: "tw-message--title-container"
   }, /*#__PURE__*/_react.default.createElement("h4", null, title)), typeof body === 'string' ? /*#__PURE__*/_react.default.createElement("p", null, body) : body, type === 'page' && pageButtons && pageButtons.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
     className: "tw-message--actions-container"
-  }, pageButtons === null || pageButtons === void 0 ? void 0 : pageButtons.map((pageButton, index) => {
-    const pageButtonWithKey = {
-      ...pageButton,
+  }, pageButtons === null || pageButtons === void 0 ? void 0 : pageButtons.map(function (pageButton, index) {
+    var pageButtonWithKey = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageButton), {}, {
       key: "page-button-".concat(index),
-      props: {
-        ...pageButton.props,
+      props: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageButton.props), {}, {
         size: pageButton.props.size || 'medium'
-      }
-    };
+      })
+    });
     return pageButtonWithKey;
   })) : null)), type === 'toast' && actionText ? /*#__PURE__*/_react.default.createElement("button", {
     onClick: actionHandler,

package/components/MultiSelect/MultiSelect.test.js

@@ -4,18 +4,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 var _react = require("@testing-library/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _ = _interopRequireDefault(require("."));
-test('show options when placeholder is clicked', () => {
+test('show options when placeholder is clicked', function () {
   (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
-    onAdd: () => undefined,
-    onRemove: () => undefined,
+    onAdd: function onAdd() {
+      return undefined;
+    },
+    onRemove: function onRemove() {
+      return undefined;
+    },
     options: new Map([[1, 'foo'], [2, 'bar'], [3, 'baz']]),
-    valueRenderer: v => v,
+    valueRenderer: function valueRenderer(v) {
+      return v;
+    },
     selectedOptions: [],
     placeHolder: "Select..."
   }));
 
   // we should find the placeholder text
-  const placeHolder = _react.screen.getByText('Select...');
+  var placeHolder = _react.screen.getByText('Select...');
   expect(placeHolder).toBeInTheDocument();
 
   // we should not find the options yet
@@ -31,35 +37,43 @@ test('show options when placeholder is clicked', () => {
   expect(_react.screen.queryByText('bar')).toBeInTheDocument();
   expect(_react.screen.queryByText('baz')).toBeInTheDocument();
 });
-test('clicking an option calls the onAdd handler', () => {
-  const handleAdd = jest.fn();
+test('clicking an option calls the onAdd handler', function () {
+  var handleAdd = jest.fn();
   (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
     onAdd: handleAdd,
-    onRemove: () => undefined,
+    onRemove: function onRemove() {
+      return undefined;
+    },
     options: new Map([[1, 'foo'], [2, 'bar'], [3, 'baz']]),
-    valueRenderer: v => v,
+    valueRenderer: function valueRenderer(v) {
+      return v;
+    },
     selectedOptions: [],
     placeHolder: "Select..."
   }));
 
   // click the dropdown chevron
-  const dropdown = _react.screen.getByLabelText('show-options');
+  var dropdown = _react.screen.getByLabelText('show-options');
   _react.fireEvent.click(dropdown);
 
   // click one of the options
-  const option = _react.screen.getByText('bar');
+  var option = _react.screen.getByText('bar');
   _react.fireEvent.click(option);
 
   // addHandler should have been called with id 2
   expect(handleAdd).toBeCalledWith(2);
 });
-test('clicking the pill remove button calls the onRemove handler', () => {
-  const handleRemove = jest.fn();
+test('clicking the pill remove button calls the onRemove handler', function () {
+  var handleRemove = jest.fn();
   (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
-    onAdd: () => undefined,
+    onAdd: function onAdd() {
+      return undefined;
+    },
     onRemove: handleRemove,
     options: new Map([[1, 'foo']]),
-    valueRenderer: v => v,
+    valueRenderer: function valueRenderer(v) {
+      return v;
+    },
     selectedOptions: [1]
   }));
 
@@ -67,7 +81,7 @@ test('clicking the pill remove button calls the onRemove handler', () => {
   expect(_react.screen.queryByText('foo')).toBeInTheDocument();
 
   // click the remove button
-  const removeButton = _react.screen.getByLabelText('remove');
+  var removeButton = _react.screen.getByLabelText('remove');
   _react.fireEvent.click(removeButton);
 
   // handleRemove should have been called with id 1

package/components/MultiSelect/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './styles.scss';
 import { TooltipProps } from '@mui/material';
 export type MultiSelectProps<K, V> = {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/index.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAI7C,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC,IAAI;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,CAAC,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;CACrC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA0GpF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAI7C,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC,IAAI;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,CAAC,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;CACrC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA0GpF"}

package/components/MultiSelect/index.js

@@ -1,62 +1,70 @@
 "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 = MultiSelect;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 require("./styles.scss");
 var _IconTooltip = _interopRequireDefault(require("../IconTooltip"));
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 var _PillList = _interopRequireDefault(require("../PillList"));
 function MultiSelect(props) {
-  const {
-    className,
-    disabled,
-    fullWidth,
-    helperText,
-    id,
-    label,
-    missingValuePlaceholder,
-    onAdd,
-    onRemove,
-    onPillClick,
-    options,
-    optionsVisible,
-    pillListClassName,
-    placeHolder,
-    selectedOptions,
-    tooltipTitle,
-    valueRenderer
-  } = props;
-  const [openedOptions, setOpenedOptions] = (0, _react.useState)(false);
-  const toggleOptions = () => {
-    setOpenedOptions(isOpen => !isOpen && !disabled);
+  var className = props.className,
+    disabled = props.disabled,
+    fullWidth = props.fullWidth,
+    helperText = props.helperText,
+    id = props.id,
+    label = props.label,
+    missingValuePlaceholder = props.missingValuePlaceholder,
+    onAdd = props.onAdd,
+    onRemove = props.onRemove,
+    onPillClick = props.onPillClick,
+    options = props.options,
+    optionsVisible = props.optionsVisible,
+    pillListClassName = props.pillListClassName,
+    placeHolder = props.placeHolder,
+    selectedOptions = props.selectedOptions,
+    tooltipTitle = props.tooltipTitle,
+    valueRenderer = props.valueRenderer;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    openedOptions = _useState2[0],
+    setOpenedOptions = _useState2[1];
+  var toggleOptions = function toggleOptions() {
+    setOpenedOptions(function (isOpen) {
+      return !isOpen && !disabled;
+    });
     if (props.onFocus) {
       props.onFocus();
     }
   };
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     if (optionsVisible !== undefined) {
       setOpenedOptions(optionsVisible);
     }
   }, [optionsVisible]);
-  const onBlurHandler = () => {
+  var onBlurHandler = function onBlurHandler() {
     setOpenedOptions(false);
     if (props.onBlur) {
       props.onBlur();
     }
   };
-  const unselectedOptions = Array.from(options.keys()).filter(key => !selectedOptions.includes(key));
-  const valuesPillData = selectedOptions.map(item => {
-    const value = options.get(item);
+  var unselectedOptions = Array.from(options.keys()).filter(function (key) {
+    return !selectedOptions.includes(key);
+  });
+  var valuesPillData = selectedOptions.map(function (item) {
+    var value = options.get(item);
     return {
       id: item,
       value: value ? valueRenderer(value) : missingValuePlaceholder || ''
     };
-  }).filter(data => data.value);
+  }).filter(function (data) {
+    return data.value;
+  });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "multi-select ".concat(className)
   }, label && /*#__PURE__*/_react.default.createElement("label", {
@@ -89,12 +97,14 @@ function MultiSelect(props) {
     className: "multi-select__options-container"
   }, /*#__PURE__*/_react.default.createElement("ul", {
     className: 'multi-select__options'
-  }, unselectedOptions.map((optionKey, index) => {
-    const optionValue = options.get(optionKey);
+  }, unselectedOptions.map(function (optionKey, index) {
+    var optionValue = options.get(optionKey);
     return /*#__PURE__*/_react.default.createElement("li", {
       key: index,
       className: "select-value",
-      onClick: () => onAdd(optionKey)
+      onClick: function onClick() {
+        return onAdd(optionKey);
+      }
     }, optionValue ? valueRenderer(optionValue) : missingValuePlaceholder || '');
   })))), helperText && /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: id,

package/components/Navbar/NavFooter.js

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

package/components/Navbar/NavItem.js

@@ -1,49 +1,53 @@
 "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 = NavItem;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 require("./styles.scss");
 function NavItem(props) {
-  const {
-    label,
-    icon,
-    children: childrenProps,
-    selected,
-    onClick,
-    id,
-    isFooter,
-    href
-  } = props;
-  const children = href ? null : childrenProps;
-  const hasChildrenSelected = (0, _react.useCallback)(() => {
+  var label = props.label,
+    icon = props.icon,
+    childrenProps = props.children,
+    selected = props.selected,
+    onClick = props.onClick,
+    id = props.id,
+    isFooter = props.isFooter,
+    href = props.href;
+  var children = href ? null : childrenProps;
+  var hasChildrenSelected = (0, _react.useCallback)(function () {
     if (children && children.props && children.props.children) {
-      const subChildren = children.props.children;
+      var subChildren = children.props.children;
       if (Array.isArray(subChildren)) {
-        return subChildren.some(subChild => subChild.props && subChild.props.selected);
+        return subChildren.some(function (subChild) {
+          return subChild.props && subChild.props.selected;
+        });
       }
       return subChildren.props && subChildren.props.selected;
     }
     return false;
   }, [children]);
-  _react.default.useEffect(() => {
+  _react.default.useEffect(function () {
     if (hasChildrenSelected()) {
       setOpen(true);
     }
   }, [children, hasChildrenSelected, selected]);
-  const [open, setOpen] = _react.default.useState(hasChildrenSelected());
-  const onClickHandler = () => {
+  var _React$useState = _react.default.useState(hasChildrenSelected()),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    open = _React$useState2[0],
+    setOpen = _React$useState2[1];
+  var onClickHandler = function onClickHandler() {
     setOpen(!open || hasChildrenSelected());
     if (onClick) {
       onClick(!open);
     }
   };
-  const customLabel = typeof label !== 'string';
+  var customLabel = typeof label !== 'string';
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "\n        ".concat(customLabel ? '' : 'nav-item', "\n        ").concat(selected ? 'nav-item--selected' : '', "\n        ").concat(hasChildrenSelected() ? 'nav-item--children-selected' : '', "\n        ").concat(isFooter ? 'nav-item--footer' : '', "\n        ").concat(children ? 'nav-item--has-children' : '', "\n      ")
   }, /*#__PURE__*/_react.default.createElement("button", {

package/components/Navbar/NavSection.d.ts

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

package/components/Navbar/NavSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavSection.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/NavSection.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAS5D"}
+{"version":3,"file":"NavSection.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/NavSection.tsx"],"names":[],"mappings":"AACA,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAS5D"}

package/components/Navbar/NavSection.js

@@ -8,10 +8,9 @@ exports.default = NavSection;
 var _react = _interopRequireDefault(require("react"));
 require("./styles.scss");
 function NavSection(props) {
-  const {
-    title,
-    separator = true
-  } = props;
+  var title = props.title,
+    _props$separator = props.separator,
+    separator = _props$separator === void 0 ? true : _props$separator;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "nav-section"
   }, separator && /*#__PURE__*/_react.default.createElement("div", {

package/components/Navbar/Navbar.js

@@ -10,38 +10,39 @@ var _react = _interopRequireDefault(require("react"));
 require("./styles.scss");
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 var _utils = require("../../utils");
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  icon: {
-    fill: theme.palette.TwClrIcnSecondary,
-    marginRight: '16px',
-    marginBottom: '8px'
-  },
-  closeButton: {
-    background: 'none',
-    border: 'none',
-    cursor: 'pointer'
-  },
-  navBarTop: {
-    display: 'flex',
-    justifyContent: 'start'
-  }
-}));
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    icon: {
+      fill: theme.palette.TwClrIcnSecondary,
+      marginRight: '16px',
+      marginBottom: '8px'
+    },
+    closeButton: {
+      background: 'none',
+      border: 'none',
+      cursor: 'pointer'
+    },
+    navBarTop: {
+      display: 'flex',
+      justifyContent: 'start'
+    }
+  };
+});
 function Navbar(props) {
-  const {
-    children,
-    setShowNavBar,
-    backgroundTransparent
-  } = props;
-  const {
-    isDesktop
-  } = (0, _utils.useDeviceInfo)();
-  const classes = useStyles();
+  var children = props.children,
+    setShowNavBar = props.setShowNavBar,
+    backgroundTransparent = props.backgroundTransparent;
+  var _useDeviceInfo = (0, _utils.useDeviceInfo)(),
+    isDesktop = _useDeviceInfo.isDesktop;
+  var classes = useStyles();
   return /*#__PURE__*/_react.default.createElement("div", {
     className: 'navbar' + (backgroundTransparent ? ' transparent' : '')
   }, !isDesktop && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.navBarTop
   }, /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setShowNavBar(false),
+    onClick: function onClick() {
+      return setShowNavBar(false);
+    },
     className: classes.closeButton
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "close",

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, {