@elliemae/ds-mobile 2.4.2-rc.1 → 2.4.2-rc.13

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"](dsGrid.Grid).withConfig({
   componentId: "sc-iv6vo1-1"
-})(["background:", ";border-top:", ";"], props => props.theme.colors.neutral['0'], props => props.borderTop ? "1px solid ".concat(props.theme.colors.neutral['100']) : 'none');
+})(["background:", ";border-top:", ";"], props => props.theme.colors.neutral['0'], props => props.borderTop ? `1px solid ${props.theme.colors.neutral['100']}` : 'none');
 
 const DSCategoryBox = _ref => {
   let {
@@ -42,7 +42,7 @@ const DSCategoryBox = _ref => {
     pl: "xs",
     pr: actionsRight.length > 0 ? 'xxs' : 'xs'
   }, void 0, /*#__PURE__*/_jsx__default["default"](Title, {
-    as: "h".concat(headerLevel)
+    as: `h${headerLevel}`
   }, void 0, title), hasActions && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: lodash.times(actionsRight.length, () => 'auto'),
     justifySelf: "end"

package/cjs/CollectionBox/CollectionBox.js

@@ -53,7 +53,7 @@ const DSCollectionBox = _ref => {
     alignItems: "center",
     cols: headerCols
   }, void 0, title && /*#__PURE__*/_jsx__default["default"](Header, {
-    as: "h".concat(headerLevel)
+    as: `h${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,7 +2,6 @@
 
 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

@@ -2,14 +2,13 @@
 
 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');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var dsIcons = require('@elliemae/ds-icons');
 var dsForm = require('@elliemae/ds-form');

package/cjs/GlobalHeader/styles.js

@@ -2,23 +2,29 @@
 
 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(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  0% {\n    width: 0;\n  }\n  100% {\n    width: 100%;\n  }\n"])));
+const growLeft = dsSystem.kfrm`
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+`;
 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(_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']);
+})(["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']);
 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"](dsGrid.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 ".concat(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 ${props.theme.colors.neutral['100']}` : 'none');
 
 const DSGroupBox = _ref => {
   let {
@@ -44,7 +44,7 @@ const DSGroupBox = _ref => {
     pl: "xs",
     pr: hasActions ? 'xxs' : 'xs'
   }, void 0, /*#__PURE__*/_jsx__default["default"](Title, {
-    as: "h".concat(headerLevel)
+    as: `h${headerLevel}`
   }, void 0, title), hasActions && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: lodash.times(actionsRight.length, () => 'auto'),
     justifySelf: "end"

package/cjs/InfiniteLoader/Infiniteloader.js

@@ -53,10 +53,8 @@ const InfiniteLoader = _ref => {
     }
 
     return () => {
-      var _observer$current, _observer$current2;
-
-      (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.unobserve(target.current);
-      (_observer$current2 = observer.current) === null || _observer$current2 === void 0 ? void 0 : _observer$current2.disconnect();
+      observer.current?.unobserve(target.current);
+      observer.current?.disconnect();
     };
   }, [target, observer, fetchData]);
   return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {

package/cjs/InfiniteLoader/VirtualizedInfiniteLoader.js

@@ -3,7 +3,6 @@
 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,7 +4,6 @@ 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');
 require('core-js/modules/esnext.async-iterator.constructor.js');
 require('core-js/modules/esnext.async-iterator.to-array.js');
 require('core-js/modules/esnext.iterator.constructor.js');

package/cjs/MobileBanner/MobileBanner.js

@@ -2,14 +2,13 @@
 
 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');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var dsIcons = require('@elliemae/ds-icons');
 var reactDesc = require('react-desc');
@@ -56,9 +55,7 @@ const DSMobileBanner = _ref => {
   }, [isAnimating, isOpen]);
   React.useEffect(() => {
     if (focusOnOpen && closeRef.current && isOpen) {
-      var _closeRef$current, _closeRef$current$foc;
-
-      (_closeRef$current = closeRef.current) === null || _closeRef$current === void 0 ? void 0 : (_closeRef$current$foc = _closeRef$current.focus) === null || _closeRef$current$foc === void 0 ? void 0 : _closeRef$current$foc.call(_closeRef$current);
+      closeRef.current?.focus?.();
     }
   }, [focusOnOpen, isOpen]);
   React.useLayoutEffect(() => {
@@ -83,21 +80,21 @@ const DSMobileBanner = _ref => {
         "data-testid": "ds-mobile-banner-icon"
       }, void 0, icons.icons[type]), /*#__PURE__*/_jsx__default["default"](styles.StyledContent, {
         showCloseButton: showCloseButton
-      }, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledTitle, {}, void 0, label), /*#__PURE__*/_jsx__default["default"](styles.StyledSubTitle, {}, void 0, body, actionLinkLabel && /*#__PURE__*/_jsx__default["default"](styles.StyledActionLink, {
+      }, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledTitle, {}, void 0, label), /*#__PURE__*/_jsx__default["default"](styles.StyledSubTitle, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledSubTitleText, {}, void 0, body), actionLinkLabel && /*#__PURE__*/_jsx__default["default"](styles.StyledActionLink, {
         href: actionLinkHref,
         "data-testid": "ds-mobile-banner-link",
         onClick: actionLinkOnClick
       }, void 0, actionLinkLabel))), showCloseButton && /*#__PURE__*/_jsx__default["default"](styles.StyledCloseButtonContainer, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledCloseButton, {
         "data-testid": "ds-mobile-banner-close-button",
-        buttonType: "link",
+        buttonType: "icon",
         onClick: closeButtonOnClick,
         "aria-label": "Close Banner",
-        icon: _CloseX || (_CloseX = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseX, {
-          width: "12px",
-          height: "12px"
-        })),
-        innerRef: closeRef
-      }))]
+        innerRef: closeRef,
+        size: "s"
+      }, void 0, _CloseX || (_CloseX = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseX, {
+        width: "12px",
+        height: "12px"
+      }))))]
     })
   }));
 };

package/cjs/MobileBanner/styles.js

@@ -10,11 +10,10 @@ var styleHelpers = require('./utils/styleHelpers.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
 const StyledInnerContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-4jnp92-0"
-})(["display:flex;min-height:68px;width:100%;background-color:", ";border-bottom:4px solid ", ";transform:translateY(", ");", ";"], _ref => {
+})(["display:flex;min-height:60px;width:100%;background-color:", ";border-bottom:4px solid ", ";transform:translateY(", ");", ";padding:8px 8px 8px 16px;"], _ref => {
   let {
     theme
   } = _ref;
@@ -61,7 +60,7 @@ const StyledTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
   let {
     theme
   } = _ref8;
-  return theme.space.xxs;
+  return theme.space.xxxs;
 }, _ref9 => {
   let {
     theme
@@ -75,7 +74,7 @@ const StyledTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
 });
 const StyledSubTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-4jnp92-3"
-})(["font-size:", ";font-weight:", ";"], _ref11 => {
+})(["display:flex;flex-wrap:wrap;justify-content:flex-start;font-size:", ";font-weight:", ";& > *{margin-top:4px;}"], _ref11 => {
   let {
     theme
   } = _ref11;
@@ -88,77 +87,65 @@ const StyledSubTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
 });
 const StyledIconContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-4jnp92-4"
-})(["margin-top:10px;margin-right:", ";margin-left:", ";"], _ref13 => {
+})(["margin-right:", ";"], _ref13 => {
   let {
     theme
   } = _ref13;
   return theme.space.xxs;
-}, _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.space.xs;
 });
 const StyledContent = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-4jnp92-5"
-})(["width:100%;display:flex;flex-direction:column;margin:", " 0;margin-right:", ";"], _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.space.xxs2;
-}, _ref16 => {
+})(["width:100%;display:flex;flex-direction:column;margin-right:", ";"], _ref14 => {
   let {
     showCloseButton
-  } = _ref16;
+  } = _ref14;
   return !showCloseButton ? '28px' : '0';
 });
 const StyledCloseButtonContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-4jnp92-6"
-})(["display:flex;align-items:flex-start;margin-top:6px;margin-right:6px;"]);
-const StyledCloseButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
+})(["display:flex;align-items:flex-start;"]);
+const StyledSubTitleText = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-4jnp92-7"
-})(["position:relative;&:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], _ref17 => {
+})(["margin-right:16px;line-height:1.1;"]);
+const StyledCloseButton = /*#__PURE__*/styled__default["default"](DSButton.DSButtonV2).withConfig({
+  componentId: "sc-4jnp92-8"
+})(["position:relative;&:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], _ref15 => {
   let {
     theme
-  } = _ref17;
+  } = _ref15;
   return theme.colors.brand[700];
 });
 const StyledActionLink = /*#__PURE__*/styled__default["default"].a.withConfig({
-  componentId: "sc-4jnp92-8"
-})(["text-decoration:none;float:right;margin-left:", ";line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], _ref18 => {
-  let {
-    theme
-  } = _ref18;
-  return theme.space.xs;
-}, _ref19 => {
+  componentId: "sc-4jnp92-9"
+})(["text-decoration:none;line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], _ref16 => {
   let {
     theme
-  } = _ref19;
+  } = _ref16;
   return dsSystem.toMobile(theme.fontSizes.title[600]);
-}, _ref20 => {
+}, _ref17 => {
   let {
     theme
-  } = _ref20;
+  } = _ref17;
   return theme.fontWeights.regular;
-}, _ref21 => {
+}, _ref18 => {
   let {
     theme
-  } = _ref21;
+  } = _ref18;
   return theme.colors.brand[600];
 });
 const StyledBannerContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-4jnp92-9"
-})(["overflow:hidden;height:", ";", ";"], _ref22 => {
+  componentId: "sc-4jnp92-10"
+})(["overflow:hidden;height:", ";", ";"], _ref19 => {
   let {
     isOpen
-  } = _ref22;
+  } = _ref19;
   return isOpen ? 'auto' : '0px';
-}, _ref23 => {
+}, _ref20 => {
   let {
     isAnimating,
     isOpen,
     height
-  } = _ref23;
+  } = _ref20;
   return styleHelpers.handleAnimation(isAnimating, isOpen, height);
 });
 
@@ -170,5 +157,6 @@ exports.StyledContent = StyledContent;
 exports.StyledIconContainer = StyledIconContainer;
 exports.StyledInnerContainer = StyledInnerContainer;
 exports.StyledSubTitle = StyledSubTitle;
+exports.StyledSubTitleText = StyledSubTitleText;
 exports.StyledTextContent = StyledTextContent;
 exports.StyledTitle = StyledTitle;

package/cjs/MobileBanner/utils/styleHelpers.js

@@ -2,19 +2,46 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var dsSystem = require('@elliemae/ds-system');
 var bannerTypes = require('./bannerTypes.js');
 
-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 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;
+  }
+`;
 const handleBorderColor = (type, _ref) => {
   let {
     colors
@@ -39,9 +66,13 @@ const handleAnimation = function (isAnimating, isOpen) {
 
   if (isAnimating) {
     if (isOpen) {
-      return dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);
+      return dsSystem.css`
+        animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;
+      `;
     } else {
-      return dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? shrinkContainer(height) : slideOut);
+      return dsSystem.css`
+        animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;
+      `;
     }
   }
 };

package/cjs/MobileCard/Card.js

@@ -76,7 +76,7 @@ const MobileCard = _ref => {
         activeValue,
         onChange
       } = context;
-      const selected = activeValue !== undefined && (activeValue === value || (activeValue === null || activeValue === void 0 ? void 0 : activeValue.length) && (activeValue === null || activeValue === void 0 ? void 0 : activeValue.includes(value)));
+      const selected = activeValue !== undefined && (activeValue === value || activeValue?.length && activeValue?.includes(value));
       return /*#__PURE__*/_jsx__default["default"](StyledCard.StyledCard, {
         "data-testid": "card-wrapper",
         minHeight: height === 'm' ? dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl) : dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xl)

package/cjs/MobileCard/CardIcons.js

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

package/cjs/MobileCard/ExpandableRegion.js

@@ -3,7 +3,6 @@
 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');
@@ -19,10 +18,10 @@ 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 ? "\n      max-height: ".concat(props.refHeight, "px;\n    ") : '', 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 ? `
+      max-height: ${props.refHeight}px;
+    ` : '', dsSystem.truncate(), props => dsSystem.border(props.theme.colors.neutral['300']), props => props.theme.fontWeights.regular);
 const ExpandableRegion = _ref => {
-  var _ref$current;
-
   let {
     show,
     content
@@ -44,7 +43,7 @@ const ExpandableRegion = _ref => {
   return /*#__PURE__*/_jsx__default["default"](Region, {
     hide: hide // needed to handle transition, `auto` max-height isn't supported
     ,
-    refHeight: (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 9999,
+    refHeight: ref?.current?.scrollHeight || 9999,
     onTransitionEnd: hideOnAnimationEnd,
     animate: animate
   }, void 0, /*#__PURE__*/jsxRuntime.jsx(RegionWrapper, {

package/cjs/MobileCard/Group.js

@@ -27,14 +27,14 @@ const GroupGrid = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfi
     theme,
     withTopBorder
   } = _ref;
-  return withTopBorder ? "border-top: ".concat(dsSystem.border(theme.colors.neutral['100'])) : '';
+  return withTopBorder ? `border-top: ${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(".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']));
+})(["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']));
 
 const MobileCardGroup = _ref2 => {
   let {

package/cjs/MobileCard/useHeight.js

@@ -2,7 +2,6 @@
 
 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,7 +4,6 @@ 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');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
@@ -38,7 +37,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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["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; }
 const StyledContainer = /*#__PURE__*/styled__default["default"](dsGrid.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% - ".concat(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% - ${props.theme.space.xs})`, props => props.theme.space.xxs);
 const StyledTitle = /*#__PURE__*/styled__default["default"](dsGrid.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']);
@@ -121,9 +120,7 @@ const DSMobileContextMenu = dsSystem.withTheme(_ref => {
         multiple: multiple,
         onChange: handleChange
       }, void 0, React__default["default"].Children.map(children, (child, ii) => {
-        var _child$type;
-
-        const isGroup = child.type === (_ContextMenuGroup || (_ContextMenuGroup = /*#__PURE__*/_jsx__default["default"](MobileContextMenuGroup.DSMobileContextMenuGroup, {}))).type || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === MobileContextMenuGroup.DSMobileContextMenuGroup.componentType || child.type === MobileContextMenuGroup.DSMobileContextMenuGroup.type;
+        const isGroup = child.type === (_ContextMenuGroup || (_ContextMenuGroup = /*#__PURE__*/_jsx__default["default"](MobileContextMenuGroup.DSMobileContextMenuGroup, {}))).type || child.type?.name === MobileContextMenuGroup.DSMobileContextMenuGroup.componentType || child.type === MobileContextMenuGroup.DSMobileContextMenuGroup.type;
         const {
           onClick = lodash.noop
         } = child.props;
@@ -132,7 +129,7 @@ const DSMobileContextMenu = dsSystem.withTheme(_ref => {
         if (singleSelect) isSelected = trueSelected === value;else if (multiple) isSelected = trueSelected.includes(value);
         return /*#__PURE__*/React__default["default"].cloneElement(child, {
           value,
-          key: "cm.".concat(ii),
+          key: `cm.${ii}`,
           isMulti: multiple,
           singleSelect,
           isSelected,
@@ -145,7 +142,7 @@ const DSMobileContextMenu = dsSystem.withTheme(_ref => {
         alignItems: "center"
       }, void 0, /*#__PURE__*/React__default["default"].cloneElement(buttonFooter, _objectSpread(_objectSpread({}, buttonFooter.props), {}, {
         containerProps: {
-          'data-testid': "".concat(dataTestid, "--btn")
+          'data-testid': `${dataTestid}--btn`
         },
         buttonType: 'primary',
         size: 'l',

package/cjs/MobileContextMenu/MobileContextMenuGroup.js

@@ -44,7 +44,7 @@ const DSMobileContextMenuGroup = _ref => {
     const {
       onClick = lodash.noop
     } = child.props;
-    const value = "".concat(groupValue, ":").concat(index);
+    const value = `${groupValue}:${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

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

package/cjs/MobileDatePicker/MobileDatePicker.js

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

package/cjs/MobileDropdownMenu/MobileDropdownMenu.js

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

package/cjs/MobileFooter/Footer.js

@@ -26,7 +26,7 @@ var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
 const FooterWrap = /*#__PURE__*/styled__default["default"](dsGrid.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(".concat(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(${dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)} * 7)`);
 
 const MobileFooter = _ref => {
   let {
@@ -40,7 +40,7 @@ const MobileFooter = _ref => {
       return childArr.length === 1 ? ['90%'] : ['45%', '45%'];
     }
 
-    return childArr.map(() => "".concat(100 / childArr.length, "%"));
+    return childArr.map(() => `${100 / childArr.length}%`);
   };
 
   return /*#__PURE__*/_jsx__default["default"](FooterWrap, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {