@terraware/web-components 2.3.17 → 2.3.19

package/components/Icon/icons/index.js

@@ -1,166 +1,87 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _BlobbyGrayIconImage = _interopRequireDefault(require("../../svg/BlobbyGrayIconImage"));
-
 var _BlobbyGrayIconUploadToTheCloud = _interopRequireDefault(require("../../svg/BlobbyGrayIconUploadToTheCloud"));
-
 var _BlobbyIconHappy = _interopRequireDefault(require("../../svg/BlobbyIconHappy"));
-
 var _BlobbyIconLeaf = _interopRequireDefault(require("../../svg/BlobbyIconLeaf"));
-
 var _BlobbyIconLibrary = _interopRequireDefault(require("../../svg/BlobbyIconLibrary"));
-
 var _BlobbyIconNursery = _interopRequireDefault(require("../../svg/BlobbyIconNursery"));
-
 var _BlobbyIconSeedBank = _interopRequireDefault(require("../../svg/BlobbyIconSeedBank"));
-
 var _BlobbyIconSite = _interopRequireDefault(require("../../svg/BlobbyIconSite"));
-
 var _BlobbyIconWrench = _interopRequireDefault(require("../../svg/BlobbyIconWrench"));
-
 var _Bug = _interopRequireDefault(require("../../svg/Bug"));
-
 var _Calendar = _interopRequireDefault(require("../../svg/Calendar"));
-
 var _IconCancel = _interopRequireDefault(require("../../svg/IconCancel"));
-
 var _CaretDown = _interopRequireDefault(require("../../svg/CaretDown"));
-
 var _CaretLeft = _interopRequireDefault(require("../../svg/CaretLeft"));
-
 var _CaretUp = _interopRequireDefault(require("../../svg/CaretUp"));
-
 var _IconChargingBattery = _interopRequireDefault(require("../../svg/IconChargingBattery"));
-
 var _IconCheckmark = _interopRequireDefault(require("../../svg/IconCheckmark"));
-
 var _ChevronDown = _interopRequireDefault(require("../../svg/ChevronDown"));
-
 var _ChevronUp = _interopRequireDefault(require("../../svg/ChevronUp"));
-
 var _Close = _interopRequireDefault(require("../../svg/Close"));
-
 var _Critical = _interopRequireDefault(require("../../svg/Critical"));
-
 var _IconDashboard = _interopRequireDefault(require("../../svg/IconDashboard"));
-
 var _Edit = _interopRequireDefault(require("../../svg/Edit"));
-
 var _Error = _interopRequireDefault(require("../../svg/Error"));
-
 var _Filter = _interopRequireDefault(require("../../svg/Filter"));
-
 var _Folder = _interopRequireDefault(require("../../svg/Folder"));
-
 var _IconFutures = _interopRequireDefault(require("../../svg/IconFutures"));
-
 var _Help = _interopRequireDefault(require("../../svg/Help"));
-
 var _Home = _interopRequireDefault(require("../../svg/Home"));
-
 var _IconAdd = _interopRequireDefault(require("../../svg/IconAdd"));
-
 var _IconArrowRight = _interopRequireDefault(require("../../svg/IconArrowRight"));
-
 var _IconBusinessNetwork = _interopRequireDefault(require("../../svg/IconBusinessNetwork"));
-
 var _IconCoinInHand = _interopRequireDefault(require("../../svg/IconCoinInHand"));
-
 var _IconColumns = _interopRequireDefault(require("../../svg/IconColumns"));
-
 var _IconEdit = _interopRequireDefault(require("../../svg/IconEdit"));
-
 var _IconExport = _interopRequireDefault(require("../../svg/IconExport"));
-
 var _IconFile = _interopRequireDefault(require("../../svg/IconFile"));
-
 var _IconFolder = _interopRequireDefault(require("../../svg/IconFolder"));
-
 var _IconGraphReport = _interopRequireDefault(require("../../svg/IconGraphReport"));
-
 var _IconImport = _interopRequireDefault(require("../../svg/IconImport"));
-
 var _IconLocations = _interopRequireDefault(require("../../svg/IconLocations"));
-
 var _IconMenu = _interopRequireDefault(require("../../svg/IconMenu"));
-
 var _IconMenuHorizontal = _interopRequireDefault(require("../../svg/IconMenuHorizontal"));
-
 var _IconMyLocation = _interopRequireDefault(require("../../svg/IconMyLocation"));
-
 var _IconNursery = _interopRequireDefault(require("../../svg/IconNursery"));
-
 var _IconRestorationSite = _interopRequireDefault(require("../../svg/IconRestorationSite"));
-
 var _IconSeedling = _interopRequireDefault(require("../../svg/IconSeedling"));
-
 var _IconSynced = _interopRequireDefault(require("../../svg/IconSynced"));
-
 var _IconTrashCan = _interopRequireDefault(require("../../svg/IconTrashCan"));
-
 var _Info = _interopRequireDefault(require("../../svg/Info"));
-
 var _Key = _interopRequireDefault(require("../../svg/Key"));
-
 var _Leaf = _interopRequireDefault(require("../../svg/Leaf"));
-
 var _Lock = _interopRequireDefault(require("../../svg/Lock"));
-
 var _MenuVertical = _interopRequireDefault(require("../../svg/MenuVertical"));
-
 var _BlobbyIconHeartMonitor = _interopRequireDefault(require("../../svg/BlobbyIconHeartMonitor"));
-
 var _IconHeartMonitor = _interopRequireDefault(require("../../svg/IconHeartMonitor"));
-
 var _IconMail = _interopRequireDefault(require("../../svg/IconMail"));
-
 var _Notification = _interopRequireDefault(require("../../svg/Notification"));
-
 var _BlobbyIconOrganization = _interopRequireDefault(require("../../svg/BlobbyIconOrganization"));
-
 var _IconOrg = _interopRequireDefault(require("../../svg/IconOrg"));
-
 var _BlobbyIconPeople = _interopRequireDefault(require("../../svg/BlobbyIconPeople"));
-
 var _IconManager = _interopRequireDefault(require("../../svg/IconManager"));
-
 var _Person = _interopRequireDefault(require("../../svg/Person"));
-
 var _Plus = _interopRequireDefault(require("../../svg/Plus"));
-
 var _RestorationSite = _interopRequireDefault(require("../../svg/RestorationSite"));
-
 var _Search = _interopRequireDefault(require("../../svg/Search"));
-
 var _IconSeedBank = _interopRequireDefault(require("../../svg/IconSeedBank"));
-
 var _Seeds = _interopRequireDefault(require("../../svg/Seeds"));
-
 var _Sparkles = _interopRequireDefault(require("../../svg/Sparkles"));
-
 var _Species = _interopRequireDefault(require("../../svg/Species"));
-
 var _Species2 = _interopRequireDefault(require("../../svg/Species2"));
-
 var _Spinner = _interopRequireDefault(require("../../svg/Spinner"));
-
 var _Success = _interopRequireDefault(require("../../svg/Success"));
-
 var _Touchscreen = _interopRequireDefault(require("../../svg/Touchscreen"));
-
 var _UploadCloud = _interopRequireDefault(require("../../svg/UploadCloud"));
-
 var _Warning = _interopRequireDefault(require("../../svg/Warning"));
-
 var _IconWifi = _interopRequireDefault(require("../../svg/IconWifi"));
-
 var icons = {
   blobbyGrayIconImage: _BlobbyGrayIconImage.default,
   blobbyGrayIconUploadToTheCloud: _BlobbyGrayIconUploadToTheCloud.default,

package/components/IconTooltip/index.js

@@ -1,24 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 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");
-
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     arrow: {
@@ -40,32 +32,25 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     }
   };
 });
-
 function IconTooltip(_ref) {
   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;
-
+    iconName = _ref$iconName === void 0 ? 'info' : _ref$iconName,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'top-start' : _ref$placement,
+    title = _ref.title;
   var _React$useState = _react.default.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      open = _React$useState2[0],
-      setOpen = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    open = _React$useState2[0],
+    setOpen = _React$useState2[1];
   var _useDeviceInfo = (0, _utils.useDeviceInfo)(),
-      isMobile = _useDeviceInfo.isMobile;
-
+    isMobile = _useDeviceInfo.isMobile;
   var classes = useStyles();
-
   var handleTooltipClose = function handleTooltipClose() {
     setOpen(false);
   };
-
   var handleTooltipOpen = function handleTooltipOpen() {
     setOpen(true);
   };
-
   return /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     arrow: true,
     classes: {

package/components/Message/Message.js

@@ -1,36 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 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) {
   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;
-
+    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;
-
+    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", {

package/components/MultiSelect/MultiSelect.test.js

@@ -1,13 +1,9 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _react = require("@testing-library/react");
-
 var _react2 = _interopRequireDefault(require("react"));
-
 var _ = _interopRequireDefault(require("."));
-
 test('show options when placeholder is clicked', function () {
   (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
     onAdd: function onAdd() {
@@ -22,19 +18,21 @@ test('show options when placeholder is clicked', function () {
     },
     selectedOptions: [],
     placeHolder: "Select..."
-  })); // we should find the placeholder text
+  }));
 
+  // we should find the placeholder text
   var placeHolder = _react.screen.getByText('Select...');
+  expect(placeHolder).toBeInTheDocument();
 
-  expect(placeHolder).toBeInTheDocument(); // we should not find the options yet
-
+  // we should not find the options yet
   expect(_react.screen.queryByText('foo')).not.toBeInTheDocument();
   expect(_react.screen.queryByText('bar')).not.toBeInTheDocument();
-  expect(_react.screen.queryByText('baz')).not.toBeInTheDocument(); // click the placeholder
-
-  _react.fireEvent.click(placeHolder); // now the options should be visible
+  expect(_react.screen.queryByText('baz')).not.toBeInTheDocument();
 
+  // click the placeholder
+  _react.fireEvent.click(placeHolder);
 
+  // now the options should be visible
   expect(_react.screen.queryByText('foo')).toBeInTheDocument();
   expect(_react.screen.queryByText('bar')).toBeInTheDocument();
   expect(_react.screen.queryByText('baz')).toBeInTheDocument();
@@ -52,18 +50,17 @@ test('clicking an option calls the onAdd handler', function () {
     },
     selectedOptions: [],
     placeHolder: "Select..."
-  })); // click the dropdown chevron
+  }));
 
+  // click the dropdown chevron
   var dropdown = _react.screen.getByLabelText('show-options');
+  _react.fireEvent.click(dropdown);
 
-  _react.fireEvent.click(dropdown); // click one of the options
-
-
+  // click one of the options
   var option = _react.screen.getByText('bar');
+  _react.fireEvent.click(option);
 
-  _react.fireEvent.click(option); // addHandler should have been called with id 2
-
-
+  // addHandler should have been called with id 2
   expect(handleAdd).toBeCalledWith(2);
 });
 test('clicking the pill remove button calls the onRemove handler', function () {
@@ -78,14 +75,15 @@ test('clicking the pill remove button calls the onRemove handler', function () {
       return v;
     },
     selectedOptions: [1]
-  })); // find a pill with the 'foo' text
+  }));
 
-  expect(_react.screen.queryByText('foo')).toBeInTheDocument(); // click the remove button
+  // find a pill with the 'foo' text
+  expect(_react.screen.queryByText('foo')).toBeInTheDocument();
 
+  // click the remove button
   var removeButton = _react.screen.getByLabelText('remove');
+  _react.fireEvent.click(removeButton);
 
-  _react.fireEvent.click(removeButton); // handleRemove should have been called with id 1
-
-
+  // handleRemove should have been called with id 1
   expect(handleRemove).toBeCalledWith(1);
 });

package/components/MultiSelect/index.js

@@ -1,61 +1,47 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function MultiSelect(props) {
   var className = props.className,
-      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,
-      pillListClassName = props.pillListClassName,
-      placeHolder = props.placeHolder,
-      valueRenderer = props.valueRenderer,
-      selectedOptions = props.selectedOptions,
-      tooltipTitle = props.tooltipTitle,
-      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,
+    pillListClassName = props.pillListClassName,
+    placeHolder = props.placeHolder,
+    valueRenderer = props.valueRenderer,
+    selectedOptions = props.selectedOptions,
+    tooltipTitle = props.tooltipTitle,
+    disabled = props.disabled;
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      openedOptions = _useState2[0],
-      setOpenedOptions = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    openedOptions = _useState2[0],
+    setOpenedOptions = _useState2[1];
   var toggleOptions = function toggleOptions() {
     setOpenedOptions(function (isOpen) {
       return !isOpen && !disabled;
     });
   };
-
   var closeOptions = function closeOptions() {
     setOpenedOptions(false);
   };
-
   var unselectedOptions = Array.from(options.keys()).filter(function (key) {
     return !selectedOptions.includes(key);
   });

package/components/Navbar/NavFooter.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = NavFooter;
-
 var _react = _interopRequireDefault(require("react"));
-
 require("./styles.scss");
-
 function NavFooter(props) {
   var children = props.children;
   return /*#__PURE__*/_react.default.createElement("div", {

package/components/Navbar/NavItem.js

@@ -1,69 +1,53 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function NavItem(props) {
   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;
+    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) {
       var subChildren = children.props.children;
-
       if (Array.isArray(subChildren)) {
         return subChildren.some(function (subChild) {
           return subChild.props && subChild.props.selected;
         });
       }
-
       return subChildren.props && subChildren.props.selected;
     }
-
     return false;
   }, [children]);
-
   _react.default.useEffect(function () {
     if (hasChildrenSelected()) {
       setOpen(true);
     }
   }, [children, hasChildrenSelected, selected]);
-
   var _React$useState = _react.default.useState(hasChildrenSelected()),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      open = _React$useState2[0],
-      setOpen = _React$useState2[1];
-
+    _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);
     }
   };
-
   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      ")

package/components/Navbar/NavSection.js

@@ -1,20 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = NavSection;
-
 var _react = _interopRequireDefault(require("react"));
-
 require("./styles.scss");
-
 function NavSection(props) {
   var title = props.title,
-      _props$separator = props.separator,
-      separator = _props$separator === void 0 ? true : _props$separator;
+    _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

@@ -1,29 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Navbar;
-
 var _styles = require("@mui/styles");
-
 var _react = _interopRequireDefault(require("react"));
-
 require("./styles.scss");
-
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-
 var _utils = require("../../utils");
-
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     icon: {
       fill: theme.palette.TwClrIcnSecondary,
-      width: '16px',
-      height: '16px',
-      margin: '15px 0'
+      marginRight: '16px',
+      marginBottom: '8px'
     },
     closeButton: {
       background: 'none',
@@ -31,19 +23,17 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       cursor: 'pointer'
     },
     navBarTop: {
-      display: 'flex'
+      display: 'flex',
+      justifyContent: 'end'
     }
   };
 });
-
 function Navbar(props) {
   var children = props.children,
-      setShowNavBar = props.setShowNavBar,
-      backgroundTransparent = props.backgroundTransparent;
-
+    setShowNavBar = props.setShowNavBar,
+    backgroundTransparent = props.backgroundTransparent;
   var _useDeviceInfo = (0, _utils.useDeviceInfo)(),
-      isDesktop = _useDeviceInfo.isDesktop;
-
+    isDesktop = _useDeviceInfo.isDesktop;
   var classes = useStyles();
   return /*#__PURE__*/_react.default.createElement("div", {
     className: 'navbar' + (backgroundTransparent ? ' transparent' : '')
@@ -56,6 +46,7 @@ function Navbar(props) {
     className: classes.closeButton
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "close",
+    size: "medium",
     className: classes.icon
   }))), children);
 }

package/components/Navbar/SubNavbar.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = SubNavbar;
-
 var _react = _interopRequireDefault(require("react"));
-
 require("./styles.scss");
-
 function SubNavbar(props) {
   var children = props.children;
   return /*#__PURE__*/_react.default.createElement("div", {