@elliemae/ds-mobile 2.0.0-next.3 → 2.0.0-next.7

package/cjs/CategoryBox/CategoryBox.js

@@ -20,7 +20,7 @@ const Title = /*#__PURE__*/styled__default["default"].h3.withConfig({
 })(["font-size:18px;margin:0;color:", ";line-height:inherit;", " font-weight:", ";"], props => props.theme.colors.neutral['700'], dsSystem.truncate(), props => props.theme.fontWeights.semibold);
 const CategoryBox = /*#__PURE__*/styled__default["default"](dsBasic.Grid).withConfig({
   componentId: "sc-iv6vo1-1"
-})(["background:", ";border-top:", ";"], props => props.theme.colors.neutral['0'], props => props.borderTop ? `1px solid ${props.theme.colors.neutral['100']}` : 'none');
+})(["background:", ";border-top:", ";"], props => props.theme.colors.neutral['0'], props => props.borderTop ? "1px solid ".concat(props.theme.colors.neutral['100']) : 'none');
 
 const DSCategoryBox = ({
   borderTop = true,
@@ -41,7 +41,7 @@ const DSCategoryBox = ({
     pl: "xs",
     pr: actionsRight.length > 0 ? 'xxs' : 'xs'
   }, void 0, /*#__PURE__*/_jsx__default["default"](Title, {
-    as: `h${headerLevel}`
+    as: "h".concat(headerLevel)
   }, void 0, title), hasActions && /*#__PURE__*/_jsx__default["default"](dsBasic.Grid, {
     cols: lodash.times(actionsRight.length, () => 'auto'),
     justifySelf: "end"

package/cjs/CollectionBox/CollectionBox.js

@@ -52,7 +52,7 @@ const DSCollectionBox = ({
     alignItems: "center",
     cols: headerCols
   }, void 0, title && /*#__PURE__*/_jsx__default["default"](Header, {
-    as: `h${headerLevel}`
+    as: "h".concat(headerLevel)
   }, void 0, title), headerAction && /*#__PURE__*/_jsx__default["default"](ActionWrap, {
     justifySelf: "end"
   }, void 0, headerAction)), /*#__PURE__*/_jsx__default["default"](Body, {}, void 0, body), footerAction && /*#__PURE__*/_jsx__default["default"](Footer, {

package/cjs/FullPageContainer/useMobileHeight.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 
 function useMobileHeight() {

package/cjs/GlobalHeader/MobileGlobalHeader.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var Search = require('@elliemae/ds-icons/Search');
 var DSInput = require('@elliemae/ds-basic/form/Input');

package/cjs/GlobalHeader/styles.js

@@ -2,29 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
+var _templateObject, _templateObject2;
 const Container = /*#__PURE__*/styled__default["default"].header.withConfig({
   componentId: "sc-1nzpklc-0"
 })(["width:auto;height:64px;position:fixed;width:100%;background-color:", ";padding:", ";color:", ";"], props => props.theme.colors.brand[700], props => props.theme.space.xs, props => props.theme.colors.neutral['000']);
-const growLeft = dsSystem.kfrm`
-  0% {
-    width: 0;
-  }
-  100% {
-    width: 100%;
-  }
-`;
+const growLeft = dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  0% {\n    width: 0;\n  }\n  100% {\n    width: 100%;\n  }\n"])));
 const SearchWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1nzpklc-1"
-})(["background-color:", ";", " float:right;width:100%;border-radius:4px;.dsInput{input{border-radius:2px 0 0 2px;color:", ";border:calc(0.30769rem * 0.25) solid ", " !important;&:focus{border-right:none !important;}&::placeholder{color:", ";}}.em-ds-input__clearable{border:calc(0.30769rem * 0.25) solid ", " !important;}}.dsButton{border-color:", " !important;border-radius:0 2px 2px 0;border-left:none;}svg,svg:not([fill]){fill:", ";}"], props => props.theme.colors.brand[600], dsSystem.css`
-    animation: ${growLeft} 1s;
-  `, props => props.theme.colors.neutral['000'], props => props.theme.colors.brand[800], props => props.theme.colors.neutral['000'], props => props.theme.colors.brand[800], props => props.theme.colors.brand[800], props => props.theme.colors.neutral['000']);
+})(["background-color:", ";", " float:right;width:100%;border-radius:4px;.dsInput{input{border-radius:2px 0 0 2px;color:", ";border:calc(0.30769rem * 0.25) solid ", " !important;&:focus{border-right:none !important;}&::placeholder{color:", ";}}.em-ds-input__clearable{border:calc(0.30769rem * 0.25) solid ", " !important;}}.dsButton{border-color:", " !important;border-radius:0 2px 2px 0;border-left:none;}svg,svg:not([fill]){fill:", ";}"], props => props.theme.colors.brand[600], dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n    animation: ", " 1s;\n  "])), growLeft), props => props.theme.colors.neutral['000'], props => props.theme.colors.brand[800], props => props.theme.colors.neutral['000'], props => props.theme.colors.brand[800], props => props.theme.colors.brand[800], props => props.theme.colors.neutral['000']);
 const Icon = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1nzpklc-2"
 })(["margin-right:", ";"], props => props.theme.space.xs);

package/cjs/GroupBox/GroupBox.js

@@ -20,7 +20,7 @@ const Title = /*#__PURE__*/styled__default["default"].h3.withConfig({
 })(["font-size:14px;margin:0;", " color:", ";line-height:inherit;text-transform:capitalize;font-weight:", ";"], dsSystem.truncate(), props => props.theme.colors.neutral['700'], props => props.theme.fontWeights.semibold);
 const GroupBox = /*#__PURE__*/styled__default["default"](dsBasic.Grid).withConfig({
   componentId: "sc-1g87w66-1"
-})(["background:", ";border-top:", ";"], props => props.background === 'grey' ? props.theme.colors.neutral['050'] : props.theme.colors.neutral['000'], props => props.borderTop ? `1px solid ${props.theme.colors.neutral['100']}` : 'none');
+})(["background:", ";border-top:", ";"], props => props.background === 'grey' ? props.theme.colors.neutral['050'] : props.theme.colors.neutral['000'], props => props.borderTop ? "1px solid ".concat(props.theme.colors.neutral['100']) : 'none');
 
 const DSGroupBox = ({
   children,
@@ -43,7 +43,7 @@ const DSGroupBox = ({
     pl: "xs",
     pr: hasActions ? 'xxs' : 'xs'
   }, void 0, /*#__PURE__*/_jsx__default["default"](Title, {
-    as: `h${headerLevel}`
+    as: "h".concat(headerLevel)
   }, void 0, title), hasActions && /*#__PURE__*/_jsx__default["default"](dsBasic.Grid, {
     cols: lodash.times(actionsRight.length, () => 'auto'),
     justifySelf: "end"

package/cjs/InfiniteLoader/VirtualizedInfiniteLoader.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactDesc = require('react-desc');
 var RWInfiniteLoader = require('react-window-infinite-loader');

package/cjs/LoadingPage/Page.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var dsSystem = require('@elliemae/ds-system');
 var lodash = require('lodash');

package/cjs/MobileBanner/MobileBanner.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var CloseX = require('@elliemae/ds-icons/CloseX');
 var reactDesc = require('react-desc');

package/cjs/MobileBanner/utils/styleHelpers.js

@@ -2,46 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var dsSystem = require('@elliemae/ds-system');
 var bannerTypes = require('./bannerTypes.js');
 
-const slideIn = dsSystem.kfrm`
-  0% {
-    transform: translate3d(0, -100%, 0);
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-`;
-const slideOut = dsSystem.kfrm`
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  60% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
-`;
-const spanContainer = height => dsSystem.kfrm`
-  0% {
-    height: 0px;
-  }
-  100% {
-    height: ${height}px;
-  }
-`;
-const shrinkContainer = height => dsSystem.kfrm`
-  0% {
-    height: ${height}px;
-  }
-  100% {
-    height: 0px;
-  }
-`;
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+const slideIn = dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n"])));
+const slideOut = dsSystem.kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  0% {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n  60% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translate3d(0, -100%, 0);\n  }\n"])));
+const spanContainer = height => dsSystem.kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ", "px;\n  }\n"])), height);
+const shrinkContainer = height => dsSystem.kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  0% {\n    height: ", "px;\n  }\n  100% {\n    height: 0px;\n  }\n"])), height);
 const handleBorderColor = (type, {
   colors
 }) => {
@@ -62,13 +35,9 @@ const handleBorderColor = (type, {
 const handleAnimation = (isAnimating, isOpen, height = null) => {
   if (isAnimating) {
     if (isOpen) {
-      return dsSystem.css`
-        animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;
-      `;
+      return dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);
     } else {
-      return dsSystem.css`
-        animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;
-      `;
+      return dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? shrinkContainer(height) : slideOut);
     }
   }
 };

package/cjs/MobileCard/CardIcons.js

@@ -27,7 +27,7 @@ const SubIcons = ({
 /*#__PURE__*/
 // eslint-disable-next-line react/no-array-index-key
 _jsx__default["default"](Icon, {
-  className: `icon-color-${colors[i] || 'muted'}`
+  className: "icon-color-".concat(colors[i] || 'muted')
 }, i)));
 
 exports.SubIcons = SubIcons;

package/cjs/MobileCard/ExpandableRegion.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
@@ -18,9 +19,7 @@ const RegionWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
 })(["width:100%;height:100%;"]);
 const Region = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-mduzz9-1"
-})(["display:flex;", " transition:max-height ", " linear;max-height:0;", " align-items:center;", ";border-top:", ";font-weight:", ";"], props => props.hide ? 'visibility: hidden;' : '', props => props.animate ? '0.25s' : '0.20s', props => props.animate ? `
-      max-height: ${props.refHeight}px;
-    ` : '', dsSystem.truncate(), props => dsSystem.border(props.theme.colors.neutral['300']), props => props.theme.fontWeights.regular);
+})(["display:flex;", " transition:max-height ", " linear;max-height:0;", " align-items:center;", ";border-top:", ";font-weight:", ";"], props => props.hide ? 'visibility: hidden;' : '', props => props.animate ? '0.25s' : '0.20s', props => props.animate ? "\n      max-height: ".concat(props.refHeight, "px;\n    ") : '', dsSystem.truncate(), props => dsSystem.border(props.theme.colors.neutral['300']), props => props.theme.fontWeights.regular);
 const ExpandableRegion = ({
   show,
   content

package/cjs/MobileCard/Group.js

@@ -23,13 +23,13 @@ const GroupGrid = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig(
 })(["", "{border-top:none;}", ""], StyledCard.StyledCard, ({
   theme,
   withTopBorder
-}) => withTopBorder ? `border-top: ${dsSystem.border(theme.colors.neutral['100'])}` : '');
+}) => withTopBorder ? "border-top: ".concat(dsSystem.border(theme.colors.neutral['100'])) : '');
 const GroupTitle = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-17xukaf-1"
 })(["", ""], dsSystem.truncate());
 const GroupTitleGrid = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-17xukaf-2"
-})(["display:flex;justify-content:space-between;padding:0 ", ";font-size:", ";", " font-weight:", ";background-color:", ";border-top:", ";line-height:", ";@media (min-width:1024px){background-color:", ";border-top:", ";}"], props => props.theme.space.xs, props => `calc(${dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)} / 2)`, dsSystem.color('neutral', '700'), props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['200'], props => dsSystem.border(props.theme.colors.brand['300']), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), props => props.theme.colors.neutral['080'], props => dsSystem.border(props.theme.colors.neutral['080']));
+})(["display:flex;justify-content:space-between;padding:0 ", ";font-size:", ";", " font-weight:", ";background-color:", ";border-top:", ";line-height:", ";@media (min-width:1024px){background-color:", ";border-top:", ";}"], props => props.theme.space.xs, props => "calc(".concat(dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), " / 2)"), dsSystem.color('neutral', '700'), props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['200'], props => dsSystem.border(props.theme.colors.brand['300']), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), props => props.theme.colors.neutral['080'], props => dsSystem.border(props.theme.colors.neutral['080']));
 
 const MobileCardGroup = ({
   children,

package/cjs/MobileCard/useHeight.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var polished = require('polished');
 

package/cjs/MobileContextMenu/MobileContextMenu.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var lodash = require('lodash');
 var reactDesc = require('react-desc');
@@ -30,7 +31,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const StyledContainer = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
   componentId: "sc-15ys5tq-0"
-})(["background:", ";z-index:", ";width:", ";position:fixed;bottom:0;left:", ";max-height:90vh;border-top-left-radius:5px;border-top-right-radius:5px;box-shadow:0 0px 24px 0 rgba(0,0,0,0.5),0 0px 11px 0 rgba(0,0,0,0.5);"], props => props.theme.colors.neutral['000'], props => props.zIndex, props => `calc(100% - ${props.theme.space.xs})`, props => props.theme.space.xxs);
+})(["background:", ";z-index:", ";width:", ";position:fixed;bottom:0;left:", ";max-height:90vh;border-top-left-radius:5px;border-top-right-radius:5px;box-shadow:0 0px 24px 0 rgba(0,0,0,0.5),0 0px 11px 0 rgba(0,0,0,0.5);"], props => props.theme.colors.neutral['000'], props => props.zIndex, props => "calc(100% - ".concat(props.theme.space.xs, ")"), props => props.theme.space.xxs);
 const StyledTitle = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
   componentId: "sc-15ys5tq-1"
 })(["font-size:16px;font-weight:", ";color:", ";", " & > span{height:20px;width:20px;}& > span > svg,svg:not([fill]){height:20px;width:20px;fill:", ";}"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['000'], dsSystem.truncate(), props => props.theme.colors.neutral['000']);
@@ -123,7 +124,7 @@ const DSMobileContextMenu = dsSystem.withTheme(({
         if (singleSelect) isSelected = trueSelected === value;else if (multiple) isSelected = trueSelected.includes(value);
         return /*#__PURE__*/React__default["default"].cloneElement(child, {
           value,
-          key: `cm.${ii}`,
+          key: "cm.".concat(ii),
           isMulti: multiple,
           singleSelect,
           isSelected,
@@ -136,7 +137,7 @@ const DSMobileContextMenu = dsSystem.withTheme(({
         alignItems: "center"
       }, void 0, /*#__PURE__*/React__default["default"].cloneElement(buttonFooter, _objectSpread(_objectSpread({}, buttonFooter.props), {}, {
         containerProps: {
-          'data-testid': `${dataTestid}--btn`
+          'data-testid': "".concat(dataTestid, "--btn")
         },
         buttonType: 'primary',
         size: 'l',

package/cjs/MobileContextMenu/MobileContextMenuGroup.js

@@ -35,7 +35,7 @@ const DSMobileContextMenuGroup = ({
   const {
     onClick = lodash.noop
   } = child.props;
-  const value = `${groupValue}:${index}`;
+  const value = "".concat(groupValue, ":").concat(index);
   let isSelected;
   if (singleSelect) isSelected = selectedItems === value;else if (isMulti) isSelected = selectedItems.includes(value);
   return /*#__PURE__*/React__default["default"].cloneElement(child, {

package/cjs/MobileContextMenu/MobileContextMenuItem.js

@@ -36,17 +36,7 @@ const PropWrap = /*#__PURE__*/styled__default["default"](props => /*#__PURE__*/j
   componentId: "sc-20od94-1"
 })(["", ""], props => {
   if (!props.isMulti) {
-    return `
-      & > span {
-        height: 18px;
-        width: 18px;
-      }
-
-      & > span > svg {
-        height: 18px;
-        width: 18px;
-      }
-      `;
+    return "\n      & > span {\n        height: 18px;\n        width: 18px;\n      }\n\n      & > span > svg {\n        height: 18px;\n        width: 18px;\n      }\n      ";
   }
 
   return '';

package/cjs/MobileDatePicker/MobileDatePicker.js

@@ -39,7 +39,7 @@ const DSMobileDatePicker = ({
     }
   }, [inputRef.current]);
   const valueArr = value.split('-');
-  const displayValue = value && `${valueArr[1]} / ${valueArr[2]} / ${valueArr[0]}`;
+  const displayValue = value && "".concat(valueArr[1], " / ").concat(valueArr[2], " / ").concat(valueArr[0]);
   return /*#__PURE__*/_jsx__default["default"](DSInputGroup__default["default"], {
     rightAddon: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
       "aria-label": "Date Picker Button",

package/cjs/MobileDropdownMenu/MobileDropdownMenu.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactDesc = require('react-desc');
 var MobileContextMenu = require('../MobileContextMenu/MobileContextMenu.js');
@@ -71,7 +72,7 @@ const DSMobileDropdownMenu = ({
       isGroup: itemsProps.isGroup,
       isMulti: itemsProps.isMulti,
       singleSelect: itemsProps.singleSelect
-    }, 'ddwn'.concat(`${i}`)))) : null]
+    }, 'ddwn'.concat("".concat(i))))) : null]
   });
 };
 

package/cjs/MobileFooter/Footer.js

@@ -20,7 +20,7 @@ var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
 const FooterWrap = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
   componentId: "sc-ls5vfg-0"
-})(["background-color:", ";border-top:", ";height:", ";"], props => props.theme.colors.neutral['000'], props => dsSystem.border(props.theme.colors.neutral[100]), props => `calc(${dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)} * 7)`);
+})(["background-color:", ";border-top:", ";height:", ";"], props => props.theme.colors.neutral['000'], props => dsSystem.border(props.theme.colors.neutral[100]), props => "calc(".concat(dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), " * 7)"));
 
 const MobileFooter = ({
   children
@@ -33,7 +33,7 @@ const MobileFooter = ({
       return childArr.length === 1 ? ['90%'] : ['45%', '45%'];
     }
 
-    return childArr.map(() => `${100 / childArr.length}%`);
+    return childArr.map(() => "".concat(100 / childArr.length, "%"));
   };
 
   return /*#__PURE__*/_jsx__default["default"](FooterWrap, {}, void 0, /*#__PURE__*/_jsx__default["default"](Grid.Grid, {

package/cjs/MobileListItem/MobileListItem.js

@@ -39,7 +39,7 @@ const MobileListItem = ({
     pl: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
     pr: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
     gutter: "xs",
-    "data-testid": `${dataTestid}--${value}`
+    "data-testid": "".concat(dataTestid, "--").concat(value)
   }, void 0, leftAddon && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
     alignItems: "center",
     justifyContent: "center"

package/cjs/MobilePageHeader/MobilePageHeader.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactDesc = require('react-desc');
 var styled = require('styled-components');
@@ -33,7 +34,7 @@ const Label = /*#__PURE__*/styled__default["default"].div.withConfig({
 })(["color:", ";", ""], props => props.theme.colors.neutral['500'], dsSystem.truncate());
 const Value = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1tfu1y9-3"
-})(["", " color:", ";", " margin-top:", ";"], dsSystem.truncate(), props => props.theme.colors.neutral['600'], props => props.withMarginRight ? `margin-right: 4px;` : '', props => props.withBreadcrumb ? '12px' : '0');
+})(["", " color:", ";", " margin-top:", ";"], dsSystem.truncate(), props => props.theme.colors.neutral['600'], props => props.withMarginRight ? "margin-right: 4px;" : '', props => props.withBreadcrumb ? '12px' : '0');
 const Wrapper = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
   componentId: "sc-1tfu1y9-4"
 })(["border-bottom:", ";"], props => dsSystem.border(props.theme.colors.neutral['300']));

package/cjs/MobileSelectList/MobileSelectList.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var lodash = require('lodash');
 var Grid = require('@elliemae/ds-basic/Grid');
@@ -93,7 +94,7 @@ const MobileSelectList = ({
         overflow: 'auto'
       }
     }, void 0, /*#__PURE__*/_jsx__default["default"](styled.ListContainer, {
-      "data-testid": `${dataTestid}--list-container`
+      "data-testid": "".concat(dataTestid, "--list-container")
     }, void 0, React__default["default"].Children.map(children, child => {
       let leftAddon = null;
       let rightAddon = null;
@@ -123,7 +124,7 @@ const MobileSelectList = ({
       pr: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
     }, void 0, /*#__PURE__*/React__default["default"].cloneElement(buttonFooter, _objectSpread(_objectSpread({}, buttonFooter.props), {}, {
       containerProps: {
-        'data-testid': `${dataTestid}--btn`
+        'data-testid': "".concat(dataTestid, "--btn")
       },
       buttonType: 'primary',
       size: 'l',

package/cjs/MobileSeparator/Separator.js

@@ -23,11 +23,11 @@ const Separator = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig(
   theme,
   color,
   borderType
-}) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`, ({
+}) => "".concat(theme.colors[color[0]][color[1]], " 1px ").concat(borderType), ({
   theme,
   color,
   borderType
-}) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`);
+}) => "".concat(theme.colors[color[0]][color[1]], " 1px ").concat(borderType));
 
 const MobileSeparator = ({
   color = ['neutral', '800'],

package/cjs/MobileTimePicker/MobileTimePicker.js

@@ -43,7 +43,7 @@ const DSMobileTimePicker = ({
     if (!value || !valueArr[0] || !valueArr[1]) return '';
     const ampm = valueArr[0] >= 12 ? 'pm' : 'am';
     const h = valueArr[0] > 12 ? valueArr[0] - 12 : valueArr[0];
-    return `${h} : ${valueArr[1]} ${ampm}`;
+    return "".concat(h, " : ").concat(valueArr[1], " ").concat(ampm);
   }, [value]);
   return /*#__PURE__*/_jsx__default["default"](DSInputGroup__default["default"], {
     rightAddon: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {

package/cjs/MobileTouchable/MobileTouchable.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var lodash = require('lodash');
 var styled = require('styled-components');

package/cjs/Modal/Modal.js

@@ -55,7 +55,7 @@ const Modal = ({
       zIndex: zIndex,
       cols: ['auto']
     }, void 0, /*#__PURE__*/_jsx__default["default"](styled.ModalBox, {
-      maxHeight: `${window.innerHeight * 0.75}px`,
+      maxHeight: "".concat(window.innerHeight * 0.75, "px"),
       rows: [1, '80px'],
       style: {
         overflow: 'hidden'
@@ -90,7 +90,7 @@ const Modal = ({
       justifyContent: "center",
       alignItems: "center",
       style: {
-        borderTop: `1px solid ${theme.colors.neutral[100]}`
+        borderTop: "1px solid ".concat(theme.colors.neutral[100])
       }
     }, void 0, showSecondaryAction && /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread(_objectSpread({}, secondaryActionProps), {}, {
       labelText: secondaryActionProps.labelText || ' Cancel',

package/cjs/Modal/styled.js

@@ -2,19 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var Grid = require('@elliemae/ds-basic/Grid');
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const BodyFix = dsSystem.createGlobalStyle`
-    body{
-        ${props => props.isOpen ? 'overflow: hidden;' : ''};
-    }
-`;
+var _templateObject;
+const BodyFix = dsSystem.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    body{\n        ", ";\n    }\n"])), props => props.isOpen ? 'overflow: hidden;' : '');
 const ModalBox = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
   componentId: "sc-cke90o-0"
 })(["width:100%;background:", ";max-height:", ";box-shadow:0 2px 4px 0 rgba(0,0,0,0.5);"], props => props.theme.colors.neutral['000'], props => props.maxHeight);

package/cjs/PageForm/PageForm.js

@@ -21,7 +21,7 @@ const Body = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
   theme
 }) => theme.breakpoints.small, ({
   theme
-}) => `width: ${dsSystem.op('*', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl), 6.25)};`);
+}) => "width: ".concat(dsSystem.op('*', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl), 6.25), ";"));
 
 const PageForm = ({
   header = null,

package/cjs/PageSummary/PageSummary.js

@@ -25,7 +25,7 @@ const Body = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
   theme
 }) => theme.breakpoints.small, ({
   theme
-}) => `width: ${dsSystem.op('*', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl), 6.25)};`);
+}) => "width: ".concat(dsSystem.op('*', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl), 6.25), ";"));
 
 const PageSummary = ({
   header = null,

package/cjs/SideNav/SideNav.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var dsBasic = require('@elliemae/ds-basic');
 var Close = require('@elliemae/ds-icons/Close');
@@ -48,7 +49,7 @@ const DSSideNav = ({
     }, idx, /*#__PURE__*/_jsx__default["default"]("div", {
       className: "icon"
     }, void 0, icon), /*#__PURE__*/_jsx__default["default"]("div", {
-      className: `text ${idx === selectedMenuItemIdx ? 'active' : ''}`
+      className: "text ".concat(idx === selectedMenuItemIdx ? 'active' : '')
     }, void 0, text)))) : null
   });
 

package/cjs/SwipeToRefresh/ProgressIndicator.js

@@ -35,16 +35,16 @@ const ProgressIndicator = ({
     r: "54",
     fill: "none",
     strokeWidth: "12",
-    stroke: `${theme.colors.neutral[100]}`
+    stroke: "".concat(theme.colors.neutral[100])
   }), /*#__PURE__*/_jsx__default["default"]("circle", {
     cx: "60",
     cy: "60",
     r: "54",
     strokeWidth: "12",
     fill: "none",
-    strokeDasharray: `${cir}px`,
-    strokeDashoffset: `${dashoffset}px`,
-    stroke: `${theme.colors.brand[600]}`,
+    strokeDasharray: "".concat(cir, "px"),
+    strokeDashoffset: "".concat(dashoffset, "px"),
+    stroke: "".concat(theme.colors.brand[600]),
     strokeLinecap: "round"
   })));
 };

package/cjs/SwipeToRefresh/SwipeToRefresh.js

@@ -37,14 +37,14 @@ const SwipeToRefresh = ({
     onTouchMove: swipe.touchMove,
     ref: swipe.ref,
     children: [/*#__PURE__*/_jsx__default["default"](styled.LoaderBox, {
-      height: loading ? theme.space.m : `${swipe.height}px`,
+      height: loading ? theme.space.m : "".concat(swipe.height, "px"),
       alignItems: "flex-start",
       "data-testid": "loader-box"
     }, void 0, /*#__PURE__*/_jsx__default["default"](styled.PositionLoader, {
       height: theme.space.m,
       justifyContent: "center",
       alignItems: "center",
-      mt: swipe.height > 40 || loading ? 0 : `${swipe.height - 40}px`
+      mt: swipe.height > 40 || loading ? 0 : "".concat(swipe.height - 40, "px")
     }, void 0, loading ? _DSCircularProgressIn || (_DSCircularProgressIn = /*#__PURE__*/_jsx__default["default"](CircularProgressIndicator.DSCircularProgressIndicator, {})) : /*#__PURE__*/_jsx__default["default"](ProgressIndicator.ProgressIndicator, {
       progress: progress
     }))), /*#__PURE__*/jsxRuntime.jsx("div", {

package/cjs/SwipeToRefresh/useSwipe.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 
 const useSwipe = ({

package/esm/CategoryBox/CategoryBox.js

@@ -11,7 +11,7 @@ const Title = /*#__PURE__*/styled.h3.withConfig({
 })(["font-size:18px;margin:0;color:", ";line-height:inherit;", " font-weight:", ";"], props => props.theme.colors.neutral['700'], truncate(), props => props.theme.fontWeights.semibold);
 const CategoryBox = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-iv6vo1-1"
-})(["background:", ";border-top:", ";"], props => props.theme.colors.neutral['0'], props => props.borderTop ? `1px solid ${props.theme.colors.neutral['100']}` : 'none');
+})(["background:", ";border-top:", ";"], props => props.theme.colors.neutral['0'], props => props.borderTop ? "1px solid ".concat(props.theme.colors.neutral['100']) : 'none');
 
 const DSCategoryBox = ({
   borderTop = true,
@@ -32,7 +32,7 @@ const DSCategoryBox = ({
     pl: "xs",
     pr: actionsRight.length > 0 ? 'xxs' : 'xs'
   }, void 0, /*#__PURE__*/_jsx(Title, {
-    as: `h${headerLevel}`
+    as: "h".concat(headerLevel)
   }, void 0, title), hasActions && /*#__PURE__*/_jsx(Grid, {
     cols: times(actionsRight.length, () => 'auto'),
     justifySelf: "end"