@elliemae/ds-mobile 2.0.0-alpha.11 → 2.0.0-alpha.12

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

@@ -7,9 +7,11 @@ const slideIn = kfrm(_templateObject || (_templateObject = _taggedTemplateLitera
 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, {
-  colors
-}) => {
+const handleBorderColor = (type, _ref) => {
+  let {
+    colors
+  } = _ref;
+
   switch (type) {
     case MOBILE_BANNER_TYPES.SUCCESS:
       return colors.success[900];
@@ -24,7 +26,9 @@ 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(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);

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,15 +1,18 @@
 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 { 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';
 import { ExpandableRegion } from './ExpandableRegion.js';
+import { cardPropsTypes } from './props.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const TitleEllipsis = /*#__PURE__*/styled.div.withConfig({
@@ -17,7 +20,7 @@ const TitleEllipsis = /*#__PURE__*/styled.div.withConfig({
 })(["", ""], truncate());
 const Title = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-10tpzm8-1"
-})(["", " ", " font-weight:", ";font-size:", ";width:100%;", ""], padding, truncate(), props => props.theme.fontWeights.semibold, props => toMobile(props.theme.fontSizes.title[600]), color('neutral', '800'));
+})(["", " ", " font-weight:", ";font-size:", ";width:100%;", ""], padding, truncate(), props => props.theme.fontWeights.semibold, props => toMobile(props.theme.fontSizes.title[600]), color('neutral', 800));
 const Detail = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-10tpzm8-2"
 })(["", " ", " font-size:", ";font-weight:", ";"], padding, truncate(), props => toMobile(props.theme.fontSizes.title[500]), props => props.theme.fontWeights.regular);
@@ -26,7 +29,7 @@ const SubText = /*#__PURE__*/styled.span.withConfig({
 })(["margin-top:", ";", " &:nth-child(2){padding-left:", ";}"], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), truncate(), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s));
 const SubTextWrap = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-10tpzm8-4"
-})(["", " border-top:", ";margin-top:6px;margin-bottom:2px;padding-bottom:", ";font-size:", ";", " font-weight:", ";display:flex;justify-content:space-between;"], truncate(), props => border(props.theme.colors.neutral['300']), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => toMobile(props.theme.fontSizes.subTitle[400]), color('neutral', '500'), props => props.theme.fontWeights.regular);
+})(["", " border-top:", ";margin-top:6px;margin-bottom:2px;padding-bottom:", ";font-size:", ";", " font-weight:", ";display:flex;justify-content:space-between;"], truncate(), props => border(props.theme.colors.neutral['300']), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => toMobile(props.theme.fontSizes.subTitle[400]), color('neutral', 500), props => props.theme.fontWeights.regular);
 const LeftIcon = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-10tpzm8-5"
 })(["& > span{height:", ";width:", ";}& > span > svg,svg:not([fill]){height:", ";width:", ";}"], props => props.halfM, props => props.halfM, props => props.halfM, props => props.halfM);
@@ -34,28 +37,31 @@ 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
-}) => {
-  var _TitleEllipsis, _SubText;
+const MobileCard = _ref => {
+  var _TitleEllipsis, _SubText, _Grid;
 
+  let {
+    children,
+    height = 'm',
+    leftAddOn,
+    leftProp,
+    rightProp,
+    subText,
+    subIcons,
+    details,
+    theme,
+    expandable = false,
+    expandedContent,
+    value,
+    cardContent
+  } = _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
@@ -94,7 +100,7 @@ const MobileCard = ({
       }, void 0, _TitleEllipsis || (_TitleEllipsis = /*#__PURE__*/_jsx(TitleEllipsis, {}, void 0, children)), details && /*#__PURE__*/_jsx(Grid, {
         "data-testid": "card-details",
         cols: details.map(() => 'min-content'),
-        mb: !(subText || subIcons) && halfM,
+        mb: !(subText || subIcons) && halfM || 0,
         pt: op('/', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs), 2)
       }, void 0, details.map((d, i) => /*#__PURE__*/_jsx(Detail, {}, i, d, i < details.length - 1 && /*#__PURE__*/_jsx(Detail, {
         px: __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs)
@@ -113,66 +119,13 @@ const MobileCard = ({
       }), /*#__PURE__*/_jsx(ExpandableRegion, {
         show: selected,
         content: expandedContent
-      })));
+      }), cardContent && (_Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {}, void 0, cardContent)))));
     }
   });
 };
 
-const props = {
-  /**
-   * card height
-   */
-  height: PropTypes.oneOf(['s', 'm']).description('card height'),
-
-  /**
-   * Defines mobile card title
-   */
-  children: PropTypes.string.isRequired.description('Defines mobile card title'),
-
-  /**
-   * Wheter if the card is expandable or not
-   */
-  expandable: PropTypes.bool.description('Wheter if the card is expandable or not'),
-
-  /**
-   * content to display in expand card section
-   */
-  expandedContent: PropTypes.element.description('content to display in expand card section'),
-
-  /**
-   * Icon to the left of the card. Size is adjusted automatically.
-   */
-  leftAddOn: PropTypes.element.description('Icon to the left of the card. Size is adjusted automatically.'),
-
-  /**
-   * Pass an element to render left. For example a Button with an icon
-   */
-  leftProp: PropTypes.element.description('Pass an element to render left. For example a Button with an icon'),
-
-  /**
-   * Pass an array of 1 or 2 elements to render right. For example a Button with an icon
-   */
-  rightProp: PropTypes.arrayOf(PropTypes.element).description('Pass an array of 1 or 2 elements to render right. For example a Button with an icon'),
-
-  /**
-   * Pass an array of 1 or 2 strings
-   */
-  subText: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1 or 2 strings'),
-
-  /**
-   * SubIcons component
-   */
-  subIcons: PropTypes.element.description('SubIcons component'),
-
-  /**
-   * Pass an array of 1, 2 or 3 strings
-   */
-  details: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1, 2 or 3 strings'),
-  theme: PropTypes.object.isRequired.description(''),
-  value: PropTypes.number.description('')
-};
 const DSMobileCardWithSchema = describe(MobileCard);
-DSMobileCardWithSchema.propTypes = props;
+DSMobileCardWithSchema.propTypes = cardPropsTypes;
 var MobileCard$1 = withTheme(MobileCard);
 
 export { DSMobileCardWithSchema, MobileCard$1 as default };

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-".concat(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

package/esm/MobileCard/ExpandableRegion.js

@@ -11,12 +11,13 @@ const RegionWrapper = /*#__PURE__*/styled.div.withConfig({
 const Region = /*#__PURE__*/styled.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    ") : '', truncate(), props => border(props.theme.colors.neutral['300']), props => props.theme.fontWeights.regular);
-const ExpandableRegion = ({
-  show,
-  content
-}) => {
+const ExpandableRegion = _ref => {
   var _ref$current;
 
+  let {
+    show,
+    content
+  } = _ref;
   const ref = useRef(null); // triggers transition
 
   const [animate, setAnimate] = useState(show); // needed to properly handle the transition. Hide after transition ends

package/esm/MobileCard/Group.js

@@ -1,18 +1,23 @@
 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 from 'react';
 import { PropTypes, describe } from 'react-desc';
 import styled from 'styled-components';
 import Group from '@elliemae/ds-shared/GroupContext/Group';
-import { Grid } from '@elliemae/ds-basic/Grid';
+import { Grid } from '@elliemae/ds-grid';
 import { truncate, __UNSAFE_SPACE_TO_DIMSUM, color, border, withTheme } from '@elliemae/ds-system';
 import { StyledCard } from './StyledCard.js';
 
 const GroupGrid = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-17xukaf-0"
-})(["", "{border-top:none;}", ""], StyledCard, ({
-  theme,
-  withTopBorder
-}) => withTopBorder ? "border-top: ".concat(border(theme.colors.neutral['100'])) : '');
+})(["", "{border-top:none;}", ""], StyledCard, _ref => {
+  let {
+    theme,
+    withTopBorder
+  } = _ref;
+  return withTopBorder ? "border-top: ".concat(border(theme.colors.neutral['100'])) : '';
+});
 const GroupTitle = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-17xukaf-1"
 })(["", ""], truncate());
@@ -20,15 +25,16 @@ const GroupTitleGrid = /*#__PURE__*/styled.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(__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), " / 2)"), color('neutral', '700'), props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['200'], props => border(props.theme.colors.brand['300']), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), props => props.theme.colors.neutral['080'], props => border(props.theme.colors.neutral['080']));
 
-const MobileCardGroup = ({
-  children,
-  theme,
-  title,
-  action,
-  activeValue,
-  allowMultipleOpen = false,
-  onChange = () => null
-}) => {
+const MobileCardGroup = _ref2 => {
+  let {
+    children,
+    theme,
+    title,
+    action,
+    activeValue,
+    allowMultipleOpen = false,
+    onChange = () => null
+  } = _ref2;
   const rows = !title ? ['auto'] : [__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 'auto'];
   return /*#__PURE__*/_jsx(Group, {
     activeValue: activeValue,