@spothero/ui 15.0.0-beta.3 → 15.0.0-beta.4

package/README.md

@@ -65,7 +65,7 @@ This will spin up a Storybook instance as well as open the Cypress app. The reas
 1. Create a directory in `src` with the same name as the component.
 1. Create the properly named component `.jsx` and `.scss` files for the component. Ensure that the Sass file is a partial (starts with `_`, i.e. `_Foo.scss`) so that it doesn't get compiled separately.
 1. Add the Sass partial import to `src/_index.scss`.
-1. Add the React component export to `src/index.js.bak`.
+1. Add the React component export to `src/index.js`.
 1. Document all PropTypes and public methods accordingly so that they show up in the Storybook documentation properly.
 1. Add a `/stories` directory that has any/all usage examples for the component functionality. Follow the conventions outlined in the other components to do this.
 1. Submit a pull request with your changes.
@@ -94,7 +94,7 @@ File changes should mimic the following:
 ...
 ```
 
-*fe-ui/src/index.js.bak*
+*fe-ui/src/index.js*
 ```javascript
 ...
 import Foo from './Foo/Foo';

package/backlog/Chart/Chart.js

@@ -47,7 +47,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _chartist = _interopRequireDefault(require("chartist"));
 
-var _dom = _interopRequireDefault(require("../utils/dom"));
+var _dom = _interopRequireDefault(require("@spothero/utils/dom"));
 
 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); }
 

package/backlog/DateTime/DatePicker.js

@@ -47,7 +47,7 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 
 var _calendar = _interopRequireDefault(require("@spothero/icons/calendar"));
 
-var _dom = _interopRequireDefault(require("../utils/dom"));
+var _dom = _interopRequireDefault(require("@spothero/utils/dom"));
 
 var _DatePickerCalendar = _interopRequireDefault(require("./DatePickerCalendar"));
 

package/backlog/DateTime/DatePickerCalendar.js

@@ -41,7 +41,7 @@ var _moment = _interopRequireDefault(require("moment"));
 
 var _reactDayPicker = _interopRequireWildcard(require("react-day-picker"));
 
-var _date = _interopRequireDefault(require("../utils/date"));
+var _date = _interopRequireDefault(require("@spothero/utils/date"));
 
 var _DatePickerCalendarNavigation = _interopRequireDefault(require("./DatePickerCalendarNavigation"));
 

package/backlog/DateTime/DatePickerCalendarWithRange.js

@@ -47,7 +47,7 @@ var _moment = _interopRequireDefault(require("moment"));
 
 var _reactDayPicker = _interopRequireWildcard(require("react-day-picker"));
 
-var _date = _interopRequireDefault(require("../utils/date"));
+var _date = _interopRequireDefault(require("@spothero/utils/date"));
 
 var _DatePickerCalendarNavigation = _interopRequireDefault(require("./DatePickerCalendarNavigation"));
 

package/backlog/DateTime/DateTimeRangePicker.js

@@ -43,9 +43,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _v = _interopRequireDefault(require("uuid/v4"));
 
-var _date = _interopRequireDefault(require("../utils/date"));
+var _date = _interopRequireDefault(require("@spothero/utils/date"));
 
-var _time = _interopRequireDefault(require("../utils/time"));
+var _time = _interopRequireDefault(require("@spothero/utils/time"));
 
 var _DateTimePicker = _interopRequireDefault(require("./DateTimePicker"));
 

package/backlog/DateTime/TimePicker.js

@@ -45,7 +45,7 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 
 var _clock = _interopRequireDefault(require("@spothero/icons/clock"));
 
-var _time = _interopRequireDefault(require("../utils/time"));
+var _time = _interopRequireDefault(require("@spothero/utils/time"));
 
 var _Select = _interopRequireDefault(require("../Select/Select"));
 

package/backlog/ErrorBoundary/ErrorBoundary.js

@@ -35,6 +35,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _sentry = _interopRequireDefault(require("@spothero/utils/sentry"));
+
 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; }
@@ -43,7 +45,6 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-// import SentryUtils from '@spothero/utils/sentry';
 var ErrorBoundary = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ErrorBoundary, _Component);
 
@@ -81,12 +82,13 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
         onError(error, info);
       }
 
-      if (reportToSentry) {//TODO: breaking change. pass function prop that invokes these in parent application
-        // SentryUtils.addData(info);
-        // SentryUtils.sendMessage({
-        //     message: error.message,
-        //     level: 'error',
-        // });
+      if (reportToSentry) {
+        _sentry.default.addData(info);
+
+        _sentry.default.sendMessage({
+          message: error.message,
+          level: 'error'
+        });
       }
     }
   }, {

package/backlog/Flyout/Flyout.js

@@ -43,7 +43,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _times = _interopRequireDefault(require("@spothero/icons/times"));
 
-var _dom = _interopRequireDefault(require("../utils/dom"));
+var _dom = _interopRequireDefault(require("@spothero/utils/dom"));
 
 var _Button = _interopRequireDefault(require("../v1/components/Button/Button"));
 

package/backlog/Form/Form.js

@@ -35,9 +35,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _formSerialize = _interopRequireDefault(require("form-serialize"));
 
-var _animation = _interopRequireDefault(require("../utils/animation"));
+var _animation = _interopRequireDefault(require("@spothero/utils/animation"));
 
-var _dom = _interopRequireDefault(require("../utils/dom"));
+var _dom = _interopRequireDefault(require("@spothero/utils/dom"));
 
 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); }
 

package/backlog/GooglePlacesSearchInput/GooglePlacesSearchInput.js

@@ -51,6 +51,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _search = _interopRequireDefault(require("@spothero/icons/search"));
 
+var _environment = _interopRequireDefault(require("@spothero/utils/environment"));
+
 var _AutoSuggestInput = _interopRequireDefault(require("../AutoSuggestInput/AutoSuggestInput"));
 
 var _TextInputPropTypes = _interopRequireDefault(require("../TextInput/TextInputPropTypes"));
@@ -182,7 +184,8 @@ var GooglePlacesSearchInput = /*#__PURE__*/function (_Component) {
       });
     });
     var googleMaps = props.googleMaps;
-    var isBrowser = typeof window !== 'undefined'; //EnvironmentUtils.isBrowser();
+
+    var isBrowser = _environment.default.isBrowser();
 
     _this._suggestionFetch = (0, _throttle.default)(_this._searchSuggestions, 500);
     _this._gmaps = googleMaps;

package/backlog/Notification/Notification.js

@@ -47,7 +47,7 @@ var _heroCar = _interopRequireDefault(require("@spothero/icons/hero-car"));
 
 var _times = _interopRequireDefault(require("@spothero/icons/times"));
 
-var _dom = _interopRequireDefault(require("../utils/dom"));
+var _dom = _interopRequireDefault(require("@spothero/utils/dom"));
 
 var _Button = _interopRequireDefault(require("../v1/components/Button/Button"));
 

package/backlog/Portal/Portal.js

@@ -39,7 +39,7 @@ var _reactRedux = require("react-redux");
 
 var _ssrWindow = require("ssr-window");
 
-var _dom = _interopRequireDefault(require("../utils/dom"));
+var _dom = _interopRequireDefault(require("@spothero/utils/dom"));
 
 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); }
 

package/backlog/RenderInBody/RenderInBody.js

@@ -31,7 +31,7 @@ var _reactDom = require("react-dom");
 
 var _reactRedux = require("react-redux");
 
-var _dom = _interopRequireDefault(require("../utils/dom"));
+var _dom = _interopRequireDefault(require("@spothero/utils/dom"));
 
 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); }
 

package/backlog/Select/Select.js

@@ -49,7 +49,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _chevronDown = _interopRequireDefault(require("@spothero/icons/chevron-down"));
 
-var _dom = _interopRequireDefault(require("../utils/dom"));
+var _dom = _interopRequireDefault(require("@spothero/utils/dom"));
 
 var _Loader = _interopRequireDefault(require("../v1/components/Loader/Loader"));
 

package/backlog/SelectControlled/SelectControlled.js

@@ -47,7 +47,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _chevronDown = _interopRequireDefault(require("@spothero/icons/chevron-down"));
 
-var _dom = _interopRequireDefault(require("../utils/dom"));
+var _dom = _interopRequireDefault(require("@spothero/utils/dom"));
 
 var _Loader = _interopRequireDefault(require("../v1/components/Loader/Loader"));
 

package/backlog/Tooltip/Tooltip.js

@@ -37,7 +37,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _times = _interopRequireDefault(require("@spothero/icons/times"));
 
-var _dom = _interopRequireDefault(require("../utils/dom"));
+var _dom = _interopRequireDefault(require("@spothero/utils/dom"));
 
 var _Button = _interopRequireDefault(require("../v1/components/Button/Button"));
 

package/backlog/v1/components/Image/Image.js

@@ -43,7 +43,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _reactLazyLoad = _interopRequireDefault(require("react-lazy-load"));
 
-var _environment = _interopRequireDefault(require("../../../utils/environment"));
+var _environment = _interopRequireDefault(require("@spothero/utils/environment"));
 
 var _PulseLoader = _interopRequireDefault(require("../../../PulseLoader/PulseLoader"));
 

package/backlog/v1/components/Modal/Modal.js

@@ -41,7 +41,7 @@ var _chevronLeft = _interopRequireDefault(require("@spothero/icons/chevron-left"
 
 var _times = _interopRequireDefault(require("@spothero/icons/times"));
 
-var _dom = _interopRequireDefault(require("../../../utils/dom"));
+var _dom = _interopRequireDefault(require("@spothero/utils/dom"));
 
 var _Button = _interopRequireDefault(require("../Button/Button"));
 

package/backlog/v1/components/Modal/ModalContent.js

@@ -41,7 +41,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _ssrWindow = require("ssr-window");
 
-var _dom = _interopRequireDefault(require("../../../utils/dom"));
+var _dom = _interopRequireDefault(require("@spothero/utils/dom"));
 
 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); }
 

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@spothero/ui",
-  "version": "15.0.0-beta.3",
+  "version": "15.0.0-beta.4",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index.js",
-  "module": "v2/index.js",
   "repository": "https://github.com/spothero/fe-monorepo",
   "babel": {
     "presets": [
@@ -81,15 +80,15 @@
     "@babel/runtime-corejs3": "7.14.7",
     "@cypress/browserify-preprocessor": "3.0.1",
     "@jackfranklin/test-data-bot": "1.3.0",
-    "@spothero/babel-preset-spothero": "3.0.0",
-    "@spothero/browserslist-config": "2.0.0",
-    "@spothero/core": "5.0.0",
-    "@spothero/dex": "4.0.0",
-    "@spothero/eslint-config": "4.0.0",
-    "@spothero/icons": "4.2.0",
-    "@spothero/npm-publisher": "5.0.0",
-    "@spothero/prettier-config": "2.1.0",
-    "@spothero/stylelint-config": "4.0.0",
+    "@spothero/babel-preset-spothero": "*",
+    "@spothero/browserslist-config": "*",
+    "@spothero/core": "*",
+    "@spothero/dex": "*",
+    "@spothero/eslint-config": "*",
+    "@spothero/icons": "*",
+    "@spothero/npm-publisher": "*",
+    "@spothero/prettier-config": "*",
+    "@spothero/stylelint-config": "*",
     "@storybook/addon-actions": "6.3.13",
     "@storybook/addon-essentials": "6.3.13",
     "@storybook/addon-links": "6.3.13",
@@ -133,6 +132,7 @@
     "@chakra-ui/theme-tools": "1.3.6",
     "@emotion/react": "11.1.5",
     "@emotion/styled": "11.1.5",
+    "@spothero/utils": "*",
     "@storybook/addon-a11y": "6.3.4",
     "axe-core": "4.1.3",
     "chartist": "0.11.4",
@@ -153,5 +153,15 @@
     "ssr-window": "1.0.1",
     "transitionEnd": "1.0.2",
     "uuid": "3.3.3"
+  },
+  "peerDependencies": {
+    "classnames": "^2.2.6",
+    "lodash": "4.17.21",
+    "moment": "^2.27.0",
+    "prop-types": "^15.7.2",
+    "react": ">=16.0.0",
+    "react-dom": ">=16.0.0",
+    "react-redux": ">=7.0.0",
+    "redux": ">=4.0.0"
   }
 }

package/styles/Chart/Chart.jsx

@@ -4,7 +4,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Chartist from 'chartist';
-import DOMUtils from '../utils/dom';
+import DOMUtils from '@spothero/utils/dom';
 
 export default class Chart extends Component {
     static propTypes = {

package/styles/DateTime/DatePicker.jsx

@@ -6,7 +6,7 @@ import {document} from 'ssr-window';
 import TetherComponent from 'react-tether';
 import omit from 'lodash/omit';
 import IconCalendar from '@spothero/icons/calendar';
-import DOMUtils from '../utils/dom';
+import DOMUtils from '@spothero/utils/dom';
 import DatePickerCalendar from './DatePickerCalendar';
 import TextInput from '../TextInput/TextInput';
 import Portal from '../Portal/Portal';

package/styles/DateTime/DatePickerCalendar.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import moment from 'moment';
 import DayPicker, {DateUtils as DayPickerDateUtils} from 'react-day-picker';
-import DateUtils from '../utils/date';
+import DateUtils from '@spothero/utils/date';
 import DatePickerCalendarNavigation from './DatePickerCalendarNavigation';
 
 const DATE = new Date();

package/styles/DateTime/DatePickerCalendarWithRange.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import moment from 'moment';
 import DayPicker, {DateUtils as DayPickerDateUtils} from 'react-day-picker';
-import DateUtils from '../utils/date';
+import DateUtils from '@spothero/utils/date';
 import DatePickerCalendarNavigation from './DatePickerCalendarNavigation';
 
 const DATE = new Date();

package/styles/DateTime/DateTimeRangePicker.jsx

@@ -2,8 +2,8 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import uuidV4 from 'uuid/v4';
-import DateUtils from '../utils/date';
-import TimeUtils from '../utils/time';
+import DateUtils from '@spothero/utils/date';
+import TimeUtils from '@spothero/utils/time';
 import DateTimePicker from './DateTimePicker';
 
 const TOOLTIP_TYPES = ['date', 'time', 'none'];

package/styles/DateTime/TimePicker.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import moment from 'moment';
 import omit from 'lodash/omit';
 import IconClock from '@spothero/icons/clock';
-import TimeUtils from '../utils/time';
+import TimeUtils from '@spothero/utils/time';
 import Select from '../Select/Select';
 
 export default class TimePicker extends Component {

package/styles/ErrorBoundary/ErrorBoundary.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import React, {Component} from 'react';
-// import SentryUtils from '@spothero/utils/sentry';
+import SentryUtils from '@spothero/utils/sentry';
 
 export default class ErrorBoundary extends Component {
     static propTypes = {
@@ -40,12 +40,11 @@ export default class ErrorBoundary extends Component {
         }
 
         if (reportToSentry) {
-            //TODO: breaking change. pass function prop that invokes these in parent application
-            // SentryUtils.addData(info);
-            // SentryUtils.sendMessage({
-            //     message: error.message,
-            //     level: 'error',
-            // });
+            SentryUtils.addData(info);
+            SentryUtils.sendMessage({
+                message: error.message,
+                level: 'error',
+            });
         }
     }
 

package/styles/Flyout/Flyout.jsx

@@ -3,7 +3,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import IconTimes from '@spothero/icons/times';
-import DOMUtils from '../utils/dom';
+import DOMUtils from '@spothero/utils/dom';
 import Button from 'v1/components/Button/Button';
 import Portal from '../Portal/Portal';
 

package/styles/Form/Form.jsx

@@ -2,8 +2,8 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import serialize from 'form-serialize';
-import AnimationUtils from '../utils/animation';
-import DOMUtils from '../utils/dom';
+import AnimationUtils from '@spothero/utils/animation';
+import DOMUtils from '@spothero/utils/dom';
 
 export default class Form extends Component {
     static propTypes = {

package/styles/GooglePlacesSearchInput/GooglePlacesSearchInput.jsx

@@ -3,7 +3,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import IconSearch from '@spothero/icons/search';
-// import EnvironmentUtils from '@spothero/utils/environment';
+import EnvironmentUtils from '@spothero/utils/environment';
 import AutoSuggestInput from '../AutoSuggestInput/AutoSuggestInput';
 import TextInputPropTypes from '../TextInput/TextInputPropTypes';
 
@@ -50,7 +50,7 @@ export default class GooglePlacesSearchInput extends Component {
         super(props);
 
         const {googleMaps} = props;
-        const isBrowser = typeof window !== 'undefined'; //EnvironmentUtils.isBrowser();
+        const isBrowser = EnvironmentUtils.isBrowser();
 
         this._suggestionFetch = throttle(this._searchSuggestions, 500);
         this._gmaps = googleMaps;

package/styles/Notification/Notification.jsx

@@ -8,7 +8,7 @@ import IconExclamationCircle from '@spothero/icons/exclamation-circle';
 import IconExclamationTriangle from '@spothero/icons/exclamation-triangle';
 import IconHeroCar from '@spothero/icons/hero-car';
 import IconTimes from '@spothero/icons/times';
-import DOMUtils from '../utils/dom';
+import DOMUtils from '@spothero/utils/dom';
 import Button from 'v1/components/Button/Button';
 import NotificationPropTypes from './NotificationPropTypes';
 

package/styles/Portal/Portal.jsx

@@ -5,7 +5,7 @@ import {createPortal} from 'react-dom';
 import PropTypes from 'prop-types';
 import {Provider} from 'react-redux';
 import {document} from 'ssr-window';
-import DOMUtils from '../utils/dom';
+import DOMUtils from '@spothero/utils/dom';
 
 export default class Portal extends PureComponent {
     static propTypes = {

package/styles/RenderInBody/RenderInBody.jsx

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {unmountComponentAtNode, render as renderDOM} from 'react-dom';
 import {Provider} from 'react-redux';
-import DOMUtils from '../utils/dom';
+import DOMUtils from '@spothero/utils/dom';
 
 export default class RenderInBody extends Component {
     static propTypes = {

package/styles/Select/Select.jsx

@@ -3,7 +3,7 @@ import React, {Component, cloneElement} from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import IconChevronDown from '@spothero/icons/chevron-down';
-import DOMUtils from '../utils/dom';
+import DOMUtils from '@spothero/utils/dom';
 import Loader from 'v1/components/Loader/Loader';
 import omit from 'lodash/omit';
 // import {

package/styles/SelectControlled/SelectControlled.jsx

@@ -3,7 +3,7 @@ import React, {Component, cloneElement} from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import IconChevronDown from '@spothero/icons/chevron-down';
-import DOMUtils from '../utils/dom';
+import DOMUtils from '@spothero/utils/dom';
 import Loader from 'v1/components/Loader/Loader';
 // import {
 //     SelectItemPropTypes,

package/styles/Tooltip/Tooltip.jsx

@@ -3,7 +3,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import IconTimes from '@spothero/icons/times';
-import DOMUtils from '../utils/dom';
+import DOMUtils from '@spothero/utils/dom';
 import Button from 'v1/components/Button/Button';
 import Portal from '../Portal/Portal';
 

package/styles/v1/components/Image/Image.jsx

@@ -4,7 +4,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import LazyLoad from 'react-lazy-load';
-import EnvironmentUtils from '../../../utils/environment';
+import EnvironmentUtils from '@spothero/utils/environment';
 import PulseLoader from '../../../PulseLoader/PulseLoader';
 
 export default class Image extends Component {

package/styles/v1/components/Modal/Modal.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import IconChevronLeft from '@spothero/icons/chevron-left';
 import IconTimes from '@spothero/icons/times';
-import DOMUtils from '../../../utils/dom';
+import DOMUtils from '@spothero/utils/dom';
 import Button from 'v1/components/Button/Button';
 import Portal from '../../../Portal/Portal';
 

package/styles/v1/components/Modal/ModalContent.jsx

@@ -5,7 +5,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {document, window} from 'ssr-window';
-import DOMUtils from '../../../utils/dom';
+import DOMUtils from '@spothero/utils/dom';
 
 export default class ModalContent extends Component {
     static propTypes = {

package/styles/v1/components/Modal/stories/Content.stories.js

@@ -3,7 +3,7 @@ import Button from 'v1/components/Button/Button';
 import Modal from '../Modal';
 import ModalContent from '../ModalContent';
 import ErrorBoundary from '../../../../ErrorBoundary/ErrorBoundary';
-import DOMUtils from '../../../../utils/dom';
+import DOMUtils from '@spothero/utils/dom';
 
 export default {
     component: Modal,

package/styles/v2/components/Image/Image.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Image as ChakraImage, Img as ChakraImg} from '@chakra-ui/react';
-import EnvironmentUtils from '../../../utils/environment';
+import EnvironmentUtils from '@spothero/utils/environment';
 import template from 'lodash/template';
 
 const buildCloudinarySrc = ({

package/styles/v2/components/Modal/Modal.jsx

@@ -14,7 +14,7 @@ import {
 import headerStyles from './styles/header';
 
 /**
- * @param {boolean} isMobile - Whether or not the device is a mobile
+ * @param {boolean} isMobile - Whether or not the Modal is opened in a mobile viewport
  * @param {boolean} isOpen - Whether or not the Modal is open
  * @param {React.ReactNode} children - The header text of the modal
  * @param {()=>void} [onClose] - Callback invoked to close the Modal. Not required, but strongly suggested.
@@ -52,7 +52,7 @@ const Modal = forwardRef((props, ref) => {
 export default Modal;
 
 Modal.propTypes = {
-    /** Whether or not the device is a mobile */
+    /** Whether or not the Modal is opened in a mobile viewport */
     isMobile: PropTypes.bool.isRequired,
     /** Whether or not the Modal is open */
     isOpen: PropTypes.bool.isRequired,

package/styles/v2/components/Modal/Modal.stories.js

@@ -45,8 +45,7 @@ export default {
 
 export const Transactional = props => {
     const [open, setOpen] = useState(false);
-    const breakpoint = useBreakpointValue(styleProps.maxW);
-    const isMobile = breakpoint?.includes('base');
+    const isMobile = useBreakpointValue({base: true, tablet: false});
 
     return (
         <Box>
@@ -58,7 +57,6 @@ export const Transactional = props => {
 
             <Modal
                 {...props}
-                isMobile={isMobile}
                 footer={
                     <>
                         <Button
@@ -76,6 +74,7 @@ export const Transactional = props => {
                         </Button>
                     </>
                 }
+                isMobile={isMobile}
                 isOpen={open}
                 onClose={() => setOpen(false)}
             >
@@ -97,8 +96,7 @@ Transactional.args = {
 
 export const Passive = props => {
     const [open, setOpen] = useState(false);
-    const breakpoint = useBreakpointValue(styleProps.maxW);
-    const isMobile = breakpoint?.includes('base');
+    const isMobile = useBreakpointValue({base: true, tablet: false});
 
     return (
         <Box>
@@ -128,8 +126,7 @@ Passive.args = {
 export const TransactionalWithExpandingContent = props => {
     const [open, setOpen] = useState(false);
     const accordionRefs = [React.createRef(), React.createRef()];
-    const breakpoint = useBreakpointValue(styleProps.maxW);
-    const isMobile = breakpoint?.includes('base');
+    const isMobile = useBreakpointValue({base: true, tablet: false});
 
     const handleAccordionChange = index => {
         if (accordionRefs[index]) {