@elliemae/ds-mobile 2.0.0-next.1 → 2.0.0-next.13

package/esm/LoadingPage/Page.js

@@ -1,10 +1,19 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.constructor.js';
+import 'core-js/modules/esnext.async-iterator.to-array.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.to-array.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import React, { useState, useRef, useEffect } from 'react';
 import { withTheme } from '@elliemae/ds-system';
 import { get } from 'lodash';
 import styled from 'styled-components';
-import Backdrop from '@elliemae/ds-basic/Backdrop';
+import Backdrop from '@elliemae/ds-backdrop';
 import { jsxs, Fragment } from 'react/jsx-runtime';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -12,18 +21,22 @@ 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(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 LoadingPageLoader = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-wx0z8k-0"
-})(["", ";z-index:", ";top:25%;left:15%;width:70%;height:75%;display:flex;flex-direction:column;align-items:center;"], ({
-  type
-}) => type === 'cover' ? 'position: fixed' : 'position: absolute', props => props.zIndex);
+})(["", ";z-index:", ";top:25%;left:15%;width:70%;height:75%;display:flex;flex-direction:column;align-items:center;"], _ref => {
+  let {
+    type
+  } = _ref;
+  return type === 'cover' ? 'position: fixed' : 'position: absolute';
+}, props => props.zIndex);
 
-const LoadingPage = ({
-  backdropZIndex,
-  children,
-  loader,
-  loading,
-  type = 'fill',
-  zIndex = 1
-}) => {
+const LoadingPage = _ref2 => {
+  let {
+    backdropZIndex,
+    children,
+    loader,
+    loading,
+    type = 'fill',
+    zIndex = 1
+  } = _ref2;
   const [position, setPosition] = useState(null);
   const childRef = useRef(null);
   useEffect(() => {

package/esm/MobileActionToolbar/MobileActionToolbar.js

@@ -1,7 +1,7 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { PropTypes, describe } from 'react-desc';
-import { Grid } from '@elliemae/ds-basic/Grid';
+import { Grid } from '@elliemae/ds-grid';
 import styled from 'styled-components';
 import { withTheme } from '@elliemae/ds-system';
 export { default as ToolbarItem } from './MobileActionToolbarItem.js';
@@ -10,11 +10,12 @@ const ToolStrip = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-162vd15-0"
 })(["display:flex;justify-content:space-around;align-items:center;background-color:", ";"], props => props.theme.colors.neutral['000']);
 
-const Toolbar = ({
-  withDepth = true,
-  buttons = [],
-  theme
-}) => {
+const Toolbar = _ref => {
+  let {
+    withDepth = true,
+    buttons = [],
+    theme
+  } = _ref;
   const rows = [1];
   const toolbarHeight = theme.space.m;
   const borderStyle = withDepth ? {

package/esm/MobileActionToolbar/MobileActionToolbarItem.js

@@ -1,8 +1,13 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import React from 'react';
 import { PropTypes, describe } from 'react-desc';
-import DSButton from '@elliemae/ds-basic/Button';
+import DSButton from '@elliemae/ds-button';
 import { jsx } from 'react/jsx-runtime';
 
 const _excluded = ["icon"];

package/esm/MobileBanner/MobileBanner.js

@@ -1,7 +1,13 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useState, useEffect, useLayoutEffect } from 'react';
-import CloseX from '@elliemae/ds-icons/CloseX';
+import { CloseX } from '@elliemae/ds-icons';
 import { describe } from 'react-desc';
 import { icons } from './utils/icons.js';
 import { propTypes } from './propTypes.js';
@@ -15,19 +21,20 @@ 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(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 DSMobileBanner = ({
-  type,
-  isOpen,
-  closeButtonOnClick,
-  label,
-  body,
-  actionLinkLabel,
-  actionLinkHref,
-  actionLinkOnClick,
-  showCloseButton,
-  containerProps,
-  focusOnOpen
-}) => {
+const DSMobileBanner = _ref => {
+  let {
+    type,
+    isOpen,
+    closeButtonOnClick,
+    label,
+    body,
+    actionLinkLabel,
+    actionLinkHref,
+    actionLinkOnClick,
+    showCloseButton,
+    containerProps,
+    focusOnOpen
+  } = _ref;
   const innerContainerRef = useRef(null);
   const closeRef = useRef(null);
   const [current, setCurrent] = useState(isOpen);

package/esm/MobileBanner/styles.js

@@ -1,87 +1,156 @@
 import styled from 'styled-components';
 import { toMobile } from '@elliemae/ds-system';
-import DSButton from '@elliemae/ds-basic/Button';
+import DSButton from '@elliemae/ds-button';
 import { handleBorderColor, handleAnimation } from './utils/styleHelpers.js';
 
 const StyledInnerContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-0"
-})(["display:flex;min-height:68px;width:100%;background-color:", ";border-bottom:4px solid ", ";transform:translateY(", ");", ";"], ({
-  theme
-}) => theme.colors.neutral['000'], ({
-  type,
-  theme
-}) => handleBorderColor(type, theme), ({
-  isOpen
-}) => isOpen ? '0' : '-100%', ({
-  isAnimating,
-  isOpen
-}) => handleAnimation(isAnimating, isOpen));
+})(["display:flex;min-height:68px;width:100%;background-color:", ";border-bottom:4px solid ", ";transform:translateY(", ");", ";"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral['000'];
+}, _ref2 => {
+  let {
+    type,
+    theme
+  } = _ref2;
+  return handleBorderColor(type, theme);
+}, _ref3 => {
+  let {
+    isOpen
+  } = _ref3;
+  return isOpen ? '0' : '-100%';
+}, _ref4 => {
+  let {
+    isAnimating,
+    isOpen
+  } = _ref4;
+  return handleAnimation(isAnimating, isOpen);
+});
 const StyledTextContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-1"
 })(["width:100%;"]);
 const StyledTitle = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-2"
-})(["color:", ";font-size:", ";font-weight:", ";margin-bottom:", ";@media not all and (min-resolution:0.001dpcm){@media{-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}}@media screen and (min--moz-device-pixel-ratio:0){-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}"], ({
-  theme
-}) => theme.colors.neutral[700], ({
-  theme
-}) => toMobile(theme.fontSizes.title[700]), ({
-  theme
-}) => theme.fontWeights.semibold, ({
-  theme
-}) => theme.space.xxs, ({
-  theme
-}) => theme.colors.neutral[700], ({
-  theme
-}) => theme.colors.neutral[700]);
+})(["color:", ";font-size:", ";font-weight:", ";margin-bottom:", ";@media not all and (min-resolution:0.001dpcm){@media{-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}}@media screen and (min--moz-device-pixel-ratio:0){-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}"], _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral[700];
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return toMobile(theme.fontSizes.title[700]);
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.fontWeights.semibold;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.space.xxs;
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.neutral[700];
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.neutral[700];
+});
 const StyledSubTitle = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-3"
-})(["font-size:", ";font-weight:", ";"], ({
-  theme
-}) => toMobile(theme.fontSizes.title[600]), ({
-  theme
-}) => theme.fontWeights.regular);
+})(["font-size:", ";font-weight:", ";"], _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return toMobile(theme.fontSizes.title[600]);
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.fontWeights.regular;
+});
 const StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-4"
-})(["margin-top:10px;margin-right:", ";margin-left:", ";"], ({
-  theme
-}) => theme.space.xxs, ({
-  theme
-}) => theme.space.xs);
+})(["margin-top:10px;margin-right:", ";margin-left:", ";"], _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.space.xxs;
+}, _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.space.xs;
+});
 const StyledContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-5"
-})(["width:100%;display:flex;flex-direction:column;margin:", " 0;margin-right:", ";"], ({
-  theme
-}) => theme.space.xxs2, ({
-  showCloseButton
-}) => !showCloseButton ? '28px' : '0');
+})(["width:100%;display:flex;flex-direction:column;margin:", " 0;margin-right:", ";"], _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.space.xxs2;
+}, _ref16 => {
+  let {
+    showCloseButton
+  } = _ref16;
+  return !showCloseButton ? '28px' : '0';
+});
 const StyledCloseButtonContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-6"
 })(["display:flex;align-items:flex-start;margin-top:6px;margin-right:6px;"]);
 const StyledCloseButton = /*#__PURE__*/styled(DSButton).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;}}"], ({
-  theme
-}) => theme.colors.brand[700]);
+})(["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 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.colors.brand[700];
+});
 const StyledActionLink = /*#__PURE__*/styled.a.withConfig({
   componentId: "sc-4jnp92-8"
-})(["text-decoration:none;float:right;margin-left:", ";line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], ({
-  theme
-}) => theme.space.xs, ({
-  theme
-}) => toMobile(theme.fontSizes.title[600]), ({
-  theme
-}) => theme.fontWeights.regular, ({
-  theme
-}) => theme.colors.brand[600]);
+})(["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 => {
+  let {
+    theme
+  } = _ref19;
+  return toMobile(theme.fontSizes.title[600]);
+}, _ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.fontWeights.regular;
+}, _ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.colors.brand[600];
+});
 const StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-9"
-})(["overflow:hidden;height:", ";", ";"], ({
-  isOpen
-}) => isOpen ? 'auto' : '0px', ({
-  isAnimating,
-  isOpen,
-  height
-}) => handleAnimation(isAnimating, isOpen, height));
+})(["overflow:hidden;height:", ";", ";"], _ref22 => {
+  let {
+    isOpen
+  } = _ref22;
+  return isOpen ? 'auto' : '0px';
+}, _ref23 => {
+  let {
+    isAnimating,
+    isOpen,
+    height
+  } = _ref23;
+  return handleAnimation(isAnimating, isOpen, height);
+});
 
 export { StyledActionLink, StyledBannerContainer, StyledCloseButton, StyledCloseButtonContainer, StyledContent, StyledIconContainer, StyledInnerContainer, StyledSubTitle, StyledTextContent, StyledTitle };

package/esm/MobileBanner/utils/icons.js

@@ -1,9 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import SuccessFill from '@elliemae/ds-icons/SuccessFill';
-import InfoFill from '@elliemae/ds-icons/InfoFill';
-import AlertsDetailFill from '@elliemae/ds-icons/AlertsDetailFill';
-import WarningSquare from '@elliemae/ds-icons/WarningSquare';
+import { SuccessFill, InfoFill, AlertsDetailFill, WarningSquare } from '@elliemae/ds-icons';
 
 const icons = {
   success: /*#__PURE__*/_jsx(SuccessFill, {

package/esm/MobileBanner/utils/styleHelpers.js

@@ -1,46 +1,17 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { kfrm, css } from '@elliemae/ds-system';
 import { MOBILE_BANNER_TYPES } from './bannerTypes.js';
 
-const slideIn = kfrm`
-  0% {
-    transform: translate3d(0, -100%, 0);
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-`;
-const slideOut = kfrm`
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  60% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
-`;
-const spanContainer = height => kfrm`
-  0% {
-    height: 0px;
-  }
-  100% {
-    height: ${height}px;
-  }
-`;
-const shrinkContainer = height => kfrm`
-  0% {
-    height: ${height}px;
-  }
-  100% {
-    height: 0px;
-  }
-`;
-const handleBorderColor = (type, {
-  colors
-}) => {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+const slideIn = kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n"])));
+const slideOut = kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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 => kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ", "px;\n  }\n"])), height);
+const shrinkContainer = height => kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  0% {\n    height: ", "px;\n  }\n  100% {\n    height: 0px;\n  }\n"])), height);
+const handleBorderColor = (type, _ref) => {
+  let {
+    colors
+  } = _ref;
+
   switch (type) {
     case MOBILE_BANNER_TYPES.SUCCESS:
       return colors.success[900];
@@ -55,16 +26,14 @@ const handleBorderColor = (type, {
       return colors.danger[900];
   }
 };
-const handleAnimation = (isAnimating, isOpen, height = null) => {
+const handleAnimation = function (isAnimating, isOpen) {
+  let height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+
   if (isAnimating) {
     if (isOpen) {
-      return css`
-        animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;
-      `;
+      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);
     } else {
-      return css`
-        animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;
-      `;
+      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        animation: ", " 0.5s ease-in;\n      "])), height ? shrinkContainer(height) : slideOut);
     }
   }
 };

package/esm/MobileCard/ActionAddon.js

@@ -1,22 +1,25 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import styled from 'styled-components';
-import ChevronSmallDown from '@elliemae/ds-icons/ChevronSmallDown';
-import DSButton from '@elliemae/ds-basic/Button';
+import { ChevronSmallDown } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
 
 const Addon = /*#__PURE__*/styled(DSButton).withConfig({
   componentId: "sc-afblfw-0"
 })(["background-color:transparent;padding-right:4px;height:100%;border:none;font-size:12px;font-weight:", ";color:", ";cursor:pointer;&:focus,&::after{background-color:transparent;box-shadow:none !important;border:none !important;}"], props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['700']);
-const ActionAddon = ({
-  label,
-  onClick,
-  icon
-}) => /*#__PURE__*/_jsx(Addon, {
-  onClick: onClick,
-  labelText: label,
-  icon: icon || /*#__PURE__*/_jsx(ChevronSmallDown, {
-    color: ['brand-primary', 700]
-  })
-});
+const ActionAddon = _ref => {
+  let {
+    label,
+    onClick,
+    icon
+  } = _ref;
+  return /*#__PURE__*/_jsx(Addon, {
+    onClick: onClick,
+    labelText: label,
+    icon: icon || /*#__PURE__*/_jsx(ChevronSmallDown, {
+      color: ['brand-primary', 700]
+    })
+  });
+};
 
 export { ActionAddon };

package/esm/MobileCard/Card.js

@@ -1,11 +1,13 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import { useRef } from 'react';
 import { PropTypes, describe } from 'react-desc';
 import styled from 'styled-components';
 import { padding } from 'styled-system';
 import { truncate, toMobile, color, __UNSAFE_SPACE_TO_DIMSUM, border, withTheme, op } from '@elliemae/ds-system';
 import GroupItem from '@elliemae/ds-shared/GroupContext/GroupItem';
-import { Grid } from '@elliemae/ds-basic/Grid';
+import { Grid } from '@elliemae/ds-grid';
 import { StyledCard } from './StyledCard.js';
 import { ExpandChevron } from './ExpandChevron.js';
 import { useHeight } from './useHeight.js';
@@ -34,28 +36,30 @@ const CenterWrap = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-10tpzm8-6"
 })(["display:flex;align-items:center;", ""], truncate());
 
-const MobileCard = ({
-  children,
-  height = 'm',
-  leftAddOn,
-  leftProp,
-  rightProp,
-  subText,
-  subIcons,
-  details,
-  theme,
-  expandable = false,
-  expandedContent,
-  value
-}) => {
+const MobileCard = _ref => {
   var _TitleEllipsis, _SubText;
 
+  let {
+    children,
+    height = 'm',
+    leftAddOn,
+    leftProp,
+    rightProp,
+    subText,
+    subIcons,
+    details,
+    theme,
+    expandable = false,
+    expandedContent,
+    value
+  } = _ref;
   const subTextRef = useRef(null);
   const subTextHeight = useHeight(subTextRef);
   const isJustChildren = !(subText || subIcons || details);
   const halfM = op('/', __UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 2);
   return /*#__PURE__*/_jsx(GroupItem, {
-    render: (context = {}) => {
+    render: function () {
+      let context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       const {
         activeValue,
         onChange

package/esm/MobileCard/CardIcons.js

@@ -1,24 +1,29 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import 'react';
 import styled from 'styled-components';
-import { Grid } from '@elliemae/ds-basic/Grid';
+import { Grid } from '@elliemae/ds-grid';
 
 const CardIconsWrapper = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1vqygz1-0"
 })(["align-items:center;span,svg{width:12px !important;height:12px !important;}span.icon-color-muted svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-warn svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-error svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-success svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-primary svg,svg:not([fill]){fill:", ";}span.icon-color-primary svg,svg:not([fill]){fill:", ";}"], props => props.theme.colors.neutral['600'], props => props.theme.colors.neutral['600'], props => props.theme.colors.warning['600'], props => props.theme.colors.warning['600'], props => props.theme.colors.danger['900'], props => props.theme.colors.danger['900'], props => props.theme.colors.success['900'], props => props.theme.colors.success['900'], props => props.theme.colors.brand[600], props => props.theme.colors.brand[600]);
-const SubIcons = ({
-  icons = [],
-  colors = []
-}) => /*#__PURE__*/_jsx(CardIconsWrapper, {
-  cols: icons.map(() => '12px'),
-  gutter: "6px",
-  height: "14px",
-  "data-testid": "card-subIcons"
-}, void 0, icons.map((Icon, i) =>
-/*#__PURE__*/
-// eslint-disable-next-line react/no-array-index-key
-_jsx(Icon, {
-  className: `icon-color-${colors[i] || 'muted'}`
-}, i)));
+const SubIcons = _ref => {
+  let {
+    icons = [],
+    colors = []
+  } = _ref;
+  return /*#__PURE__*/_jsx(CardIconsWrapper, {
+    cols: icons.map(() => '12px'),
+    gutter: "6px",
+    height: "14px",
+    "data-testid": "card-subIcons"
+  }, void 0, icons.map((Icon, i) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _jsx(Icon, {
+    className: "icon-color-".concat(colors[i] || 'muted')
+  }, i)));
+};
 
 export { SubIcons };

package/esm/MobileCard/ExpandChevron.js

@@ -1,18 +1,18 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import styled from 'styled-components';
-import ChevronDownIcon from '@elliemae/ds-icons/ChevronDown';
-import ChevronRight from '@elliemae/ds-icons/ChevronRight';
+import { ChevronDown, ChevronRight } from '@elliemae/ds-icons';
 
 const ChevronWrap = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1l0ask2-0"
 })(["margin-top:", ";align-self:", ";margin-left:", ";"], props => props.align === 'top' ? '18px' : '0', props => props.align === 'top' ? 'flex-start' : 'center', props => props.theme.space.xs);
-const ExpandChevron = ({
-  isExpanded,
-  onClick,
-  align
-}) => {
-  const Chevron = isExpanded ? ChevronDownIcon : ChevronRight;
+const ExpandChevron = _ref => {
+  let {
+    isExpanded,
+    onClick,
+    align
+  } = _ref;
+  const Chevron = isExpanded ? ChevronDown : ChevronRight;
   return /*#__PURE__*/_jsx(ChevronWrap, {
     "data-testid": "ds-card-expand-chevron",
     align: align