@elliemae/ds-mobile 1.57.1-rc.0 → 2.0.0-alpha.11

package/cjs/MobileBanner/utils/styleHelpers.js

@@ -4,46 +4,40 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var dsSystem = require('@elliemae/ds-system');
-var MobileBanner_utils_bannerTypes = require('./bannerTypes.js');
+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;
-var 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"])));
-var 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"])));
-var spanContainer = function spanContainer(height) {
-  return dsSystem.kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ", "px;\n  }\n"])), height);
-};
-var shrinkContainer = function shrinkContainer(height) {
-  return dsSystem.kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n  0% {\n    height: ", "px;\n  }\n  100% {\n    height: 0px;\n  }\n"])), height);
-};
-var handleBorderColor = function handleBorderColor(type, _ref) {
-  var colors = _ref.colors;
-
+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
+}) => {
   switch (type) {
-    case MobileBanner_utils_bannerTypes.MOBILE_BANNER_TYPES.SUCCESS:
+    case bannerTypes.MOBILE_BANNER_TYPES.SUCCESS:
       return colors.success[900];
 
-    case MobileBanner_utils_bannerTypes.MOBILE_BANNER_TYPES.INFO:
+    case bannerTypes.MOBILE_BANNER_TYPES.INFO:
       return colors.brand[600];
 
-    case MobileBanner_utils_bannerTypes.MOBILE_BANNER_TYPES.WARNING:
+    case bannerTypes.MOBILE_BANNER_TYPES.WARNING:
       return colors.warning[900];
 
-    case MobileBanner_utils_bannerTypes.MOBILE_BANNER_TYPES.ERROR:
+    case bannerTypes.MOBILE_BANNER_TYPES.ERROR:
       return colors.danger[900];
   }
 };
-var handleAnimation = function handleAnimation(isAnimating, isOpen) {
-  var height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-
+const handleAnimation = (isAnimating, isOpen, height = null) => {
   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(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);
     } else {
-      return dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default['default'](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? shrinkContainer(height) : slideOut);
+      return dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? shrinkContainer(height) : slideOut);
     }
   }
 };
@@ -54,4 +48,3 @@ exports.shrinkContainer = shrinkContainer;
 exports.slideIn = slideIn;
 exports.slideOut = slideOut;
 exports.spanContainer = spanContainer;
-//# sourceMappingURL=styleHelpers.js.map

package/cjs/MobileCard/ActionAddon.js

@@ -2,54 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var PropTypes = require('prop-types');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
 var styled = require('styled-components');
-var dsIcons = require('@elliemae/ds-icons');
-var DSButton = require('@elliemae/ds-button');
+var ChevronSmallDown = require('@elliemae/ds-icons/ChevronSmallDown');
+var DSButton = require('@elliemae/ds-basic/Button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var ChevronSmallDown__default = /*#__PURE__*/_interopDefaultLegacy(ChevronSmallDown);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
-var Addon = /*#__PURE__*/styled__default['default'](DSButton__default['default']).withConfig({
+const Addon = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).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;}"], function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return props.theme.colors.brand['700'];
+})(["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__default["default"](Addon, {
+  onClick: onClick,
+  labelText: label,
+  icon: icon || /*#__PURE__*/_jsx__default["default"](ChevronSmallDown__default["default"], {
+    color: ['brand-primary', 700]
+  })
 });
-var ActionAddon = function ActionAddon(_ref) {
-  var label = _ref.label,
-      onClick = _ref.onClick,
-      icon = _ref.icon;
-  return /*#__PURE__*/React__default['default'].createElement(Addon, {
-    onClick: onClick,
-    labelText: label,
-    icon: icon || /*#__PURE__*/React__default['default'].createElement(dsIcons.ChevronSmallDown, {
-      color: ['brand-primary', 700]
-    })
-  });
-};
-ActionAddon.propTypes = {
-  /**
-   * Addon label
-   */
-  label: PropTypes__default['default'].string,
-
-  /**
-   * On click callback
-   */
-  onClick: PropTypes__default['default'].func,
-
-  /**
-   * Icon to display after the label
-   */
-  icon: PropTypes__default['default'].element
-};
 
 exports.ActionAddon = ActionAddon;
-//# sourceMappingURL=ActionAddon.js.map

package/cjs/MobileCard/Card.js

@@ -2,164 +2,125 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var reactDesc = require('react-desc');
 var styled = require('styled-components');
 var styledSystem = require('styled-system');
 var dsSystem = require('@elliemae/ds-system');
 var GroupItem = require('@elliemae/ds-shared/GroupContext/GroupItem');
-var dsGrid = require('@elliemae/ds-grid');
-var MobileCard_StyledCard = require('./StyledCard.js');
-var MobileCard_ExpandChevron = require('./ExpandChevron.js');
-var MobileCard_useHeight = require('./useHeight.js');
-var MobileCard_ExpandableRegion = require('./ExpandableRegion.js');
-require('prop-types');
-require('@elliemae/ds-icons');
-require('@babel/runtime/helpers/slicedToArray');
-require('polished');
+var Grid = require('@elliemae/ds-basic/Grid');
+var StyledCard = require('./StyledCard.js');
+var ExpandChevron = require('./ExpandChevron.js');
+var useHeight = require('./useHeight.js');
+var ExpandableRegion = require('./ExpandableRegion.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var GroupItem__default = /*#__PURE__*/_interopDefaultLegacy(GroupItem);
 
-/* eslint-disable react/no-array-index-key */
-var TitleEllipsis = /*#__PURE__*/styled__default['default'].div.withConfig({
+const TitleEllipsis = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-10tpzm8-0"
 })(["", ""], dsSystem.truncate());
-var Title = /*#__PURE__*/styled__default['default'].div.withConfig({
+const Title = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-10tpzm8-1"
-})(["", " ", " font-weight:", ";font-size:", ";width:100%;", ""], styledSystem.padding, dsSystem.truncate(), function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return dsSystem.toMobile(props.theme.fontSizes.title[600]);
-}, dsSystem.color('neutral', '800'));
-var Detail = /*#__PURE__*/styled__default['default'].span.withConfig({
+})(["", " ", " font-weight:", ";font-size:", ";width:100%;", ""], styledSystem.padding, dsSystem.truncate(), props => props.theme.fontWeights.semibold, props => dsSystem.toMobile(props.theme.fontSizes.title[600]), dsSystem.color('neutral', '800'));
+const Detail = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-10tpzm8-2"
-})(["", " ", " font-size:", ";font-weight:", ";"], styledSystem.padding, dsSystem.truncate(), function (props) {
-  return dsSystem.toMobile(props.theme.fontSizes.title[500]);
-}, function (props) {
-  return props.theme.fontWeights.regular;
-});
-var SubText = /*#__PURE__*/styled__default['default'].span.withConfig({
+})(["", " ", " font-size:", ";font-weight:", ";"], styledSystem.padding, dsSystem.truncate(), props => dsSystem.toMobile(props.theme.fontSizes.title[500]), props => props.theme.fontWeights.regular);
+const SubText = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-10tpzm8-3"
-})(["margin-top:", ";", " &:nth-child(2){padding-left:", ";}"], function (props) {
-  return dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs);
-}, dsSystem.truncate(), function (props) {
-  return dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s);
-});
-var SubTextWrap = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["margin-top:", ";", " &:nth-child(2){padding-left:", ";}"], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), dsSystem.truncate(), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s));
+const SubTextWrap = /*#__PURE__*/styled__default["default"].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;"], dsSystem.truncate(), function (props) {
-  return dsSystem.border(props.theme.colors.neutral['300']);
-}, function (props) {
-  return dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs);
-}, function (props) {
-  return dsSystem.toMobile(props.theme.fontSizes.subTitle[400]);
-}, dsSystem.color('neutral', '500'), function (props) {
-  return props.theme.fontWeights.regular;
-});
-var LeftIcon = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
+})(["", " border-top:", ";margin-top:6px;margin-bottom:2px;padding-bottom:", ";font-size:", ";", " font-weight:", ";display:flex;justify-content:space-between;"], dsSystem.truncate(), props => dsSystem.border(props.theme.colors.neutral['300']), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => dsSystem.toMobile(props.theme.fontSizes.subTitle[400]), dsSystem.color('neutral', '500'), props => props.theme.fontWeights.regular);
+const LeftIcon = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
   componentId: "sc-10tpzm8-5"
-})(["& > span{height:", ";width:", ";}& > span > svg,svg:not([fill]){height:", ";width:", ";}"], function (props) {
-  return props.halfM;
-}, function (props) {
-  return props.halfM;
-}, function (props) {
-  return props.halfM;
-}, function (props) {
-  return props.halfM;
-});
-var CenterWrap = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["& > span{height:", ";width:", ";}& > span > svg,svg:not([fill]){height:", ";width:", ";}"], props => props.halfM, props => props.halfM, props => props.halfM, props => props.halfM);
+const CenterWrap = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-10tpzm8-6"
 })(["display:flex;align-items:center;", ""], dsSystem.truncate());
 
-var MobileCard = function MobileCard(_ref) {
-  var children = _ref.children,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? 'm' : _ref$height,
-      leftAddOn = _ref.leftAddOn,
-      leftProp = _ref.leftProp,
-      rightProp = _ref.rightProp,
-      subText = _ref.subText,
-      subIcons = _ref.subIcons,
-      details = _ref.details,
-      theme = _ref.theme,
-      _ref$expandable = _ref.expandable,
-      expandable = _ref$expandable === void 0 ? false : _ref$expandable,
-      expandedContent = _ref.expandedContent,
-      value = _ref.value;
-  var subTextRef = React.useRef(null);
-  var subTextHeight = MobileCard_useHeight.useHeight(subTextRef);
-  var isJustChildren = !(subText || subIcons || details);
-  var halfM = dsSystem.op('/', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 2);
-  return /*#__PURE__*/React__default['default'].createElement(GroupItem__default['default'], {
-    render: function render() {
-      var context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var activeValue = context.activeValue,
-          onChange = context.onChange;
-      var selected = activeValue !== undefined && (activeValue === value || (activeValue === null || activeValue === void 0 ? void 0 : activeValue.length) && (activeValue === null || activeValue === void 0 ? void 0 : activeValue.includes(value)));
-      return /*#__PURE__*/React__default['default'].createElement(MobileCard_StyledCard.StyledCard, {
+const MobileCard = ({
+  children,
+  height = 'm',
+  leftAddOn,
+  leftProp,
+  rightProp,
+  subText,
+  subIcons,
+  details,
+  theme,
+  expandable = false,
+  expandedContent,
+  value
+}) => {
+  var _TitleEllipsis, _SubText;
+
+  const subTextRef = React.useRef(null);
+  const subTextHeight = useHeight.useHeight(subTextRef);
+  const isJustChildren = !(subText || subIcons || details);
+  const halfM = dsSystem.op('/', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 2);
+  return /*#__PURE__*/_jsx__default["default"](GroupItem__default["default"], {
+    render: (context = {}) => {
+      const {
+        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)));
+      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)
-      }, expandable && /*#__PURE__*/React__default['default'].createElement(MobileCard_ExpandChevron.ExpandChevron, {
+      }, void 0, expandable && /*#__PURE__*/_jsx__default["default"](ExpandChevron.ExpandChevron, {
         isExpanded: selected,
-        onClick: function onClick(e) {
+        onClick: e => {
           e.stopPropagation();
           onChange({
             target: {
-              value: value
+              value
             }
           });
         },
         align: subText || subIcons ? 'top' : 'center'
-      }), /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, {
+      }), /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
         pb: (subText || subIcons) && subTextHeight,
         cols: ['auto', 'auto'],
         alignItems: "center"
-      }, leftProp && /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, {
+      }, void 0, leftProp && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
         ml: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
-      }, leftProp), leftAddOn && /*#__PURE__*/React__default['default'].createElement(LeftIcon, {
+      }, void 0, leftProp), leftAddOn && /*#__PURE__*/_jsx__default["default"](LeftIcon, {
         ml: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
         halfM: halfM
-      }, leftAddOn)), /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, {
+      }, void 0, leftAddOn)), /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
         pl: !leftAddOn ? dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xs),
         pr: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
         width: "100%"
-      }, /*#__PURE__*/React__default['default'].createElement(CenterWrap, null, /*#__PURE__*/React__default['default'].createElement(Title, {
+      }, void 0, /*#__PURE__*/_jsx__default["default"](CenterWrap, {}, void 0, /*#__PURE__*/_jsx__default["default"](Title, {
         pt: !isJustChildren && halfM,
         "data-testid": "card-title"
-      }, /*#__PURE__*/React__default['default'].createElement(TitleEllipsis, null, children), details && /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, {
+      }, void 0, _TitleEllipsis || (_TitleEllipsis = /*#__PURE__*/_jsx__default["default"](TitleEllipsis, {}, void 0, children)), details && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
         "data-testid": "card-details",
-        cols: details.map(function () {
-          return 'min-content';
-        }),
+        cols: details.map(() => 'min-content'),
         mb: !(subText || subIcons) && halfM,
         pt: dsSystem.op('/', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs), 2)
-      }, details.map(function (d, i) {
-        return /*#__PURE__*/React__default['default'].createElement(Detail, {
-          key: i
-        }, d, i < details.length - 1 && /*#__PURE__*/React__default['default'].createElement(Detail, {
-          px: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs)
-        }, "\u2022"));
-      }))), rightProp && rightProp.map(function (prop, i) {
-        return /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, {
-          ml: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
-          key: i
-        }, prop);
-      })), subIcons && /*#__PURE__*/React__default['default'].createElement(SubTextWrap, {
-        ref: subTextRef
-      }, /*#__PURE__*/React__default['default'].createElement(SubText, null, subIcons), subText && subText[1] && /*#__PURE__*/React__default['default'].createElement(SubText, {
-        "data-testid": "card-subText"
-      }, subText[1])), subText && !subIcons && /*#__PURE__*/React__default['default'].createElement(SubTextWrap, {
-        ref: subTextRef
-      }, subText.map(function (s, i) {
-        return /*#__PURE__*/React__default['default'].createElement(SubText, {
-          "data-testid": "card-subText",
-          key: i
-        }, s);
-      })), /*#__PURE__*/React__default['default'].createElement(MobileCard_ExpandableRegion.ExpandableRegion, {
+      }, void 0, details.map((d, i) => /*#__PURE__*/_jsx__default["default"](Detail, {}, i, d, i < details.length - 1 && /*#__PURE__*/_jsx__default["default"](Detail, {
+        px: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs)
+      }, void 0, "\u2022"))))), rightProp && rightProp.map((prop, i) => /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+        ml: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
+      }, i, prop))), subIcons && /*#__PURE__*/jsxRuntime.jsxs(SubTextWrap, {
+        ref: subTextRef,
+        children: [_SubText || (_SubText = /*#__PURE__*/_jsx__default["default"](SubText, {}, void 0, subIcons)), subText && subText[1] && /*#__PURE__*/_jsx__default["default"](SubText, {
+          "data-testid": "card-subText"
+        }, void 0, subText[1])]
+      }), subText && !subIcons && /*#__PURE__*/jsxRuntime.jsx(SubTextWrap, {
+        ref: subTextRef,
+        children: subText.map((s, i) => /*#__PURE__*/_jsx__default["default"](SubText, {
+          "data-testid": "card-subText"
+        }, i, s))
+      }), /*#__PURE__*/_jsx__default["default"](ExpandableRegion.ExpandableRegion, {
         show: selected,
         content: expandedContent
       })));
@@ -167,7 +128,7 @@ var MobileCard = function MobileCard(_ref) {
   });
 };
 
-var props = {
+const props = {
   /**
    * card height
    */
@@ -220,11 +181,9 @@ var props = {
   theme: reactDesc.PropTypes.object.isRequired.description(''),
   value: reactDesc.PropTypes.number.description('')
 };
-MobileCard.propTypes = props;
-var DSMobileCardWithSchema = reactDesc.describe(MobileCard);
+const DSMobileCardWithSchema = reactDesc.describe(MobileCard);
 DSMobileCardWithSchema.propTypes = props;
 var MobileCard$1 = dsSystem.withTheme(MobileCard);
 
 exports.DSMobileCardWithSchema = DSMobileCardWithSchema;
-exports['default'] = MobileCard$1;
-//# sourceMappingURL=Card.js.map
+exports["default"] = MobileCard$1;

package/cjs/MobileCard/CardIcons.js

@@ -2,75 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var PropTypes = require('prop-types');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
 var styled = require('styled-components');
-var dsGrid = require('@elliemae/ds-grid');
+var Grid = require('@elliemae/ds-basic/Grid');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-/* eslint-disable import/no-unresolved */
-var CardIconsWrapper = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
+const CardIconsWrapper = /*#__PURE__*/styled__default["default"](Grid.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:", ";}"], function (props) {
-  return props.theme.colors.neutral['600'];
-}, function (props) {
-  return props.theme.colors.neutral['600'];
-}, function (props) {
-  return props.theme.colors.warning['600'];
-}, function (props) {
-  return props.theme.colors.warning['600'];
-}, function (props) {
-  return props.theme.colors.danger['900'];
-}, function (props) {
-  return props.theme.colors.danger['900'];
-}, function (props) {
-  return props.theme.colors.success['900'];
-}, function (props) {
-  return props.theme.colors.success['900'];
-}, function (props) {
-  return props.theme.colors.brand[600];
-}, function (props) {
-  return props.theme.colors.brand[600];
-});
-var SubIcons = function SubIcons(_ref) {
-  var _ref$icons = _ref.icons,
-      icons = _ref$icons === void 0 ? [] : _ref$icons,
-      _ref$colors = _ref.colors,
-      colors = _ref$colors === void 0 ? [] : _ref$colors;
-  return /*#__PURE__*/React__default['default'].createElement(CardIconsWrapper, {
-    cols: icons.map(function () {
-      return '12px';
-    }),
-    gutter: "6px",
-    height: "14px",
-    "data-testid": "card-subIcons"
-  }, icons.map(function (Icon, i) {
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-array-index-key
-      React__default['default'].createElement(Icon, {
-        key: i,
-        className: "icon-color-".concat(colors[i] || 'muted')
-      })
-    );
-  }));
-};
-SubIcons.propTypes = {
-  /**
-   * Array of  Icons
-   */
-  icons: PropTypes__default['default'].arrayOf(PropTypes__default['default'].func),
-
-  /**
-   * Color Types: muted, warn, error, success
-   */
-  colors: PropTypes__default['default'].arrayOf(PropTypes__default['default'].oneOf(['muted', 'warn', 'error', 'success', 'primary']))
-};
+})(["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__default["default"](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__default["default"](Icon, {
+  className: "icon-color-".concat(colors[i] || 'muted')
+}, i)));
 
 exports.SubIcons = SubIcons;
-//# sourceMappingURL=CardIcons.js.map

package/cjs/MobileCard/ExpandChevron.js

@@ -2,56 +2,36 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var PropTypes = require('prop-types');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
 var styled = require('styled-components');
-var dsIcons = require('@elliemae/ds-icons');
+var ChevronDownIcon = require('@elliemae/ds-icons/ChevronDown');
+var ChevronRight = require('@elliemae/ds-icons/ChevronRight');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
+var ChevronRight__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRight);
 
-var ChevronWrap = /*#__PURE__*/styled__default['default'].div.withConfig({
+const ChevronWrap = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1l0ask2-0"
-})(["margin-top:", ";align-self:", ";margin-left:", ";"], function (props) {
-  return props.align === 'top' ? '18px' : '0';
-}, function (props) {
-  return props.align === 'top' ? 'flex-start' : 'center';
-}, function (props) {
-  return props.theme.space.xs;
-});
-var ExpandChevron = function ExpandChevron(_ref) {
-  var isExpanded = _ref.isExpanded,
-      onClick = _ref.onClick,
-      align = _ref.align;
-  var Chevron = isExpanded ? dsIcons.ChevronDown : dsIcons.ChevronRight;
-  return /*#__PURE__*/React__default['default'].createElement(ChevronWrap, {
+})(["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__default["default"] : ChevronRight__default["default"];
+  return /*#__PURE__*/_jsx__default["default"](ChevronWrap, {
     "data-testid": "ds-card-expand-chevron",
     align: align
-  }, /*#__PURE__*/React__default['default'].createElement(Chevron, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Chevron, {
     size: "s",
     color: ['brand-primary', 800],
     onClick: onClick
   }));
 };
-ExpandChevron.propTypes = {
-  /**
-   * Whether if the chevron is expanded or not
-   */
-  isExpanded: PropTypes__default['default'].bool,
-
-  /**
-   * click callback
-   */
-  onClick: PropTypes__default['default'].func.isRequired,
-
-  /**
-   * top or center
-   */
-  align: PropTypes__default['default'].string.isRequired
-};
 
 exports.ExpandChevron = ExpandChevron;
-//# sourceMappingURL=ExpandChevron.js.map