@spothero/ui 14.8.5-beta.0 → 15.0.0-beta.0

package/backlog/v1/components/TextButton/TextButton.js

@@ -1,27 +1,20 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
 
-var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
 
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
 
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
-_Object$defineProperty(exports, "__esModule", {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -38,7 +31,7 @@ var _excluded = ["className", "children", "href", "iconPosition", "block", "disa
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 (0, _deprecate.default)({
   name: 'TextButton',

package/backlog/v1/components/index.js

@@ -2,69 +2,58 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-_Object$defineProperty(exports, "__esModule", {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-_Object$defineProperty(exports, "Button", {
+Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function get() {
     return _Button.default;
   }
 });
-
-_Object$defineProperty(exports, "Image", {
+Object.defineProperty(exports, "Image", {
   enumerable: true,
   get: function get() {
     return _Image.default;
   }
 });
-
-_Object$defineProperty(exports, "Loader", {
+Object.defineProperty(exports, "Loader", {
   enumerable: true,
   get: function get() {
     return _Loader.default;
   }
 });
-
-_Object$defineProperty(exports, "Modal", {
+Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function get() {
     return _Modal.Modal;
   }
 });
-
-_Object$defineProperty(exports, "ModalContent", {
+Object.defineProperty(exports, "ModalContent", {
   enumerable: true,
   get: function get() {
     return _Modal.ModalContent;
   }
 });
-
-_Object$defineProperty(exports, "ModalFooter", {
+Object.defineProperty(exports, "ModalFooter", {
   enumerable: true,
   get: function get() {
     return _Modal.ModalFooter;
   }
 });
-
-_Object$defineProperty(exports, "Panel", {
+Object.defineProperty(exports, "Panel", {
   enumerable: true,
   get: function get() {
     return _Panel.default;
   }
 });
-
-_Object$defineProperty(exports, "Table", {
+Object.defineProperty(exports, "Table", {
   enumerable: true,
   get: function get() {
     return _Table.default;
   }
 });
-
-_Object$defineProperty(exports, "TextButton", {
+Object.defineProperty(exports, "TextButton", {
   enumerable: true,
   get: function get() {
     return _TextButton.default;

package/backlog/v1/utils/deprecate.js

@@ -2,20 +2,15 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-_Object$defineProperty(exports, "__esModule", {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports.default = void 0;
 
-var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
-var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
-
 /* eslint-disable no-console */
 
 /* eslint-disable no-undef */
@@ -56,7 +51,7 @@ var deprecate = function deprecate(_ref) {
 
   console.group('DEPRECATION WARNING:');
   console.log((0, _concat.default)(_context = "This component, ".concat(name, ", is now deprecated. Please use the v2 ")).call(_context, newName ? newName : name, " instead."));
-  (0, _forEach.default)(changes).call(changes, function (change) {
+  changes.forEach(function (change) {
     return console.log(change);
   });
   console.groupEnd('DEPRECATION WARNING:');

package/dex.config.js

@@ -16,33 +16,30 @@ module.exports = {
                     name: '@spothero/ui',
                     type: 'umd',
                 },
-                globalObject: 'this'
+                globalObject: 'this',
             },
             externals: {
                 react: {
                     root: 'React',
                     commonjs2: 'react',
                     commonjs: 'react',
-                    amd: 'react'
+                    amd: 'react',
                 },
                 'react-dom': {
                     root: 'ReactDOM',
                     commonjs2: 'react-dom',
                     commonjs: 'react-dom',
-                    amd: 'react-dom'
+                    amd: 'react-dom',
                 },
-                'lodash': {
+                lodash: {
                     commonjs2: 'lodash',
                     commonjs: 'lodash',
                     amd: 'lodash',
-                    root: '_'
+                    root: '_',
                 },
                 'prop-types': 'prop-types',
-                '@chakra-ui/react': '@chakra-ui/react'
-
-            }
+                '@chakra-ui/react': '@chakra-ui/react',
+            },
         },
-
     },
-
 };

package/package.json

@@ -1,12 +1,10 @@
 {
   "name": "@spothero/ui",
-  "version": "14.8.5-beta.0",
+  "version": "15.0.0-beta.0",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index.js",
   "module": "v2/index.js",
-  "repository": "https://github.com/spothero/fe-ui",
-  "author": "SpotHero",
-  "license": "Apache-2.0",
+  "repository": "https://github.com/spothero/fe-monorepo",
   "babel": {
     "presets": [
       "@spothero/spothero"
@@ -73,11 +71,6 @@
     "release": "npm-release",
     "release:storybook": "npm run build:storybook && push-dir --dir=docs --branch=gh-pages --allow-unclean"
   },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  },
   "engines": {
     "node": ">=16.14.2",
     "npm": ">=8.5.0"
@@ -88,20 +81,19 @@
     "@babel/runtime-corejs3": "7.14.7",
     "@cypress/browserify-preprocessor": "3.0.1",
     "@jackfranklin/test-data-bot": "1.3.0",
-    "@spothero/babel-preset-spothero": "0.2.0",
-    "@spothero/browserslist-config": "1.0.0",
-    "@spothero/commitlint-config": "3.1.1",
-    "@spothero/core": "4.0.0",
-    "@spothero/dex": "3.2.1",
-    "@spothero/eslint-config": "3.0.0",
-    "@spothero/icons": "2.0.2",
-    "@spothero/npm-publisher": "4.0.0",
-    "@spothero/prettier-config": "1.0.0",
-    "@spothero/stylelint-config": "3.0.0",
-    "@storybook/addon-actions": "6.3.4",
-    "@storybook/addon-essentials": "6.3.4",
-    "@storybook/addon-links": "6.3.4",
-    "@storybook/react": "6.3.4",
+    "@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",
+    "@storybook/addon-actions": "6.3.13",
+    "@storybook/addon-essentials": "6.3.13",
+    "@storybook/addon-links": "6.3.13",
+    "@storybook/react": "6.3.13",
     "@testing-library/jest-dom": "5.11.9",
     "@testing-library/react": "11.2.5",
     "@testing-library/user-event": "12.8.1",
@@ -132,7 +124,8 @@
     "regenerator-runtime": "0.13.7",
     "start-server-and-test": "1.12.6",
     "style-loader": "1.2.1",
-    "webpack-merge": "5.1.4"
+    "webpack-merge": "5.1.4",
+    "eslint-loader": "4.0.2"
   },
   "dependencies": {
     "@chakra-ui/react": "1.8.8",
@@ -140,7 +133,7 @@
     "@chakra-ui/theme-tools": "1.3.6",
     "@emotion/react": "11.1.5",
     "@emotion/styled": "11.1.5",
-    "@spothero/utils": "9.1.0",
+    "@spothero/utils": "10.0.0",
     "@storybook/addon-a11y": "6.3.4",
     "axe-core": "4.1.3",
     "chartist": "0.11.4",
@@ -161,15 +154,5 @@
     "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 '@spothero/utils/dom';
+import {DOMUtils} from '@spothero/utils';
 
 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 '@spothero/utils/dom';
+import {DOMUtils} from '@spothero/utils';
 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 '@spothero/utils/date';
+import {DateUtils} from '@spothero/utils';
 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 '@spothero/utils/date';
+import {DateUtils} from '@spothero/utils';
 import DatePickerCalendarNavigation from './DatePickerCalendarNavigation';
 
 const DATE = new Date();

package/styles/DateTime/DateTimeRangePicker.jsx

@@ -2,8 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import uuidV4 from 'uuid/v4';
-import DateUtils from '@spothero/utils/date';
-import TimeUtils from '@spothero/utils/time';
+import {DateUtils, TimeUtils} from '@spothero/utils';
 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 '@spothero/utils/time';
+import {TimeUtils} from '@spothero/utils';
 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';
 
 export default class ErrorBoundary extends Component {
     static propTypes = {

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 '@spothero/utils/dom';
+import {DOMUtils} from '@spothero/utils';
 import Button from 'v1/components/Button/Button';
 import Portal from '../Portal/Portal';
 

package/styles/Form/Form.jsx

@@ -2,8 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import serialize from 'form-serialize';
-import AnimationUtils from '@spothero/utils/animation';
-import DOMUtils from '@spothero/utils/dom';
+import {DOMUtils, AnimationUtils} from '@spothero/utils';
 
 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';
 import AutoSuggestInput from '../AutoSuggestInput/AutoSuggestInput';
 import TextInputPropTypes from '../TextInput/TextInputPropTypes';
 

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 '@spothero/utils/dom';
+import {DOMUtils} from '@spothero/utils';
 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 '@spothero/utils/dom';
+import {DOMUtils} from '@spothero/utils';
 
 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 '@spothero/utils/dom';
+import {DOMUtils} from '@spothero/utils';
 
 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 '@spothero/utils/dom';
+import {DOMUtils} from '@spothero/utils';
 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 '@spothero/utils/dom';
+import {DOMUtils} from '@spothero/utils';
 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 '@spothero/utils/dom';
+import {DOMUtils} from '@spothero/utils';
 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 '@spothero/utils/environment';
+import {EnvironmentUtils} from '@spothero/utils';
 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 '@spothero/utils/dom';
+import {DOMUtils} from '@spothero/utils';
 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 '@spothero/utils/dom';
+import {DOMUtils} from '@spothero/utils';
 
 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 '@spothero/utils/dom';
+import {DOMUtils} from '@spothero/utils';
 
 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 '@spothero/utils/environment';
+import {EnvironmentUtils} from '@spothero/utils';
 import template from 'lodash/template';
 
 const buildCloudinarySrc = ({

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

@@ -14,6 +14,7 @@ import {
 import headerStyles from './styles/header';
 
 /**
+ * @param {boolean} isMobile - Whether or not the device is a mobile
  * @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.
@@ -24,8 +25,7 @@ import headerStyles from './styles/header';
  * @returns {React.ReactElement} - The Modal component
  */
 const Modal = forwardRef((props, ref) => {
-    const {header, footer, children, hideCloseButton} = props;
-    const isMobile = useBreakpointValue({base: true, tablet: false});
+    const {header, footer, children, hideCloseButton, isMobile} = props;
 
     return (
         <ChakraModal
@@ -52,6 +52,8 @@ const Modal = forwardRef((props, ref) => {
 export default Modal;
 
 Modal.propTypes = {
+    /** Whether or not the device is a mobile */
+    isMobile: PropTypes.bool.isRequired,
     /** Whether or not the Modal is open */
     isOpen: PropTypes.bool.isRequired,
     /** React children. Body of the Modal. */

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

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import PropTypes from 'prop-types';
-import {Box} from '@chakra-ui/react';
+import {Box, useBreakpointValue} from '@chakra-ui/react';
 import disableArgs from 'storybook/utils/disable-args';
 import {createSelectControl} from 'storybook/utils/create-control';
 
@@ -45,6 +45,8 @@ export default {
 
 export const Transactional = props => {
     const [open, setOpen] = useState(false);
+    const breakpoint = useBreakpointValue(styleProps.maxW);
+    const isMobile = breakpoint?.includes('base');
 
     return (
         <Box>
@@ -56,6 +58,7 @@ export const Transactional = props => {
 
             <Modal
                 {...props}
+                isMobile={isMobile}
                 footer={
                     <>
                         <Button
@@ -94,6 +97,8 @@ Transactional.args = {
 
 export const Passive = props => {
     const [open, setOpen] = useState(false);
+    const breakpoint = useBreakpointValue(styleProps.maxW);
+    const isMobile = breakpoint?.includes('base');
 
     return (
         <Box>
@@ -103,7 +108,7 @@ export const Passive = props => {
             </Text>
             <Button onClick={() => setOpen(true)}>Open Modal</Button>
 
-            <Modal {...props} isOpen={open} onClose={() => setOpen(false)}>
+            <Modal {...props} isMobile={isMobile} isOpen={open} onClose={() => setOpen(false)}>
                 {props.children}
             </Modal>
         </Box>
@@ -123,6 +128,8 @@ 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 handleAccordionChange = index => {
         if (accordionRefs[index]) {
@@ -167,6 +174,7 @@ export const TransactionalWithExpandingContent = props => {
                         <Button variant="primary">Submit</Button>
                     </>
                 }
+                isMobile={isMobile}
                 isOpen={open}
                 onClose={() => setOpen(false)}
             >