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

package/cjs/MobileBanner/styles.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
-var DSButton = require('@elliemae/ds-basic/Button');
+var DSButton = require('@elliemae/ds-button');
 var styleHelpers = require('./utils/styleHelpers.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -12,86 +12,155 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
-const StyledInnerContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+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(", ");", ";"], ({
-  theme
-}) => theme.colors.neutral['000'], ({
-  type,
-  theme
-}) => styleHelpers.handleBorderColor(type, theme), ({
-  isOpen
-}) => isOpen ? '0' : '-100%', ({
-  isAnimating,
-  isOpen
-}) => styleHelpers.handleAnimation(isAnimating, isOpen));
-const StyledTextContent = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["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 styleHelpers.handleBorderColor(type, theme);
+}, _ref3 => {
+  let {
+    isOpen
+  } = _ref3;
+  return isOpen ? '0' : '-100%';
+}, _ref4 => {
+  let {
+    isAnimating,
+    isOpen
+  } = _ref4;
+  return styleHelpers.handleAnimation(isAnimating, isOpen);
+});
+const StyledTextContent = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-4jnp92-1"
 })(["width:100%;"]);
-const StyledTitle = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledTitle = /*#__PURE__*/styled__default["default"].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
-}) => dsSystem.toMobile(theme.fontSizes.title[700]), ({
-  theme
-}) => theme.fontWeights.semibold, ({
-  theme
-}) => theme.space.xxs, ({
-  theme
-}) => theme.colors.neutral[700], ({
-  theme
-}) => theme.colors.neutral[700]);
-const StyledSubTitle = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["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 dsSystem.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__default["default"].div.withConfig({
   componentId: "sc-4jnp92-3"
-})(["font-size:", ";font-weight:", ";"], ({
-  theme
-}) => dsSystem.toMobile(theme.fontSizes.title[600]), ({
-  theme
-}) => theme.fontWeights.regular);
-const StyledIconContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["font-size:", ";font-weight:", ";"], _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return dsSystem.toMobile(theme.fontSizes.title[600]);
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.fontWeights.regular;
+});
+const StyledIconContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-4jnp92-4"
-})(["margin-top:10px;margin-right:", ";margin-left:", ";"], ({
-  theme
-}) => theme.space.xxs, ({
-  theme
-}) => theme.space.xs);
-const StyledContent = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["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__default["default"].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');
-const StyledCloseButtonContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["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__default["default"].div.withConfig({
   componentId: "sc-4jnp92-6"
-})(["display:flex;align-items:flex-start;margin-top:14px;margin-right:4px;"]);
-const StyledCloseButton = /*#__PURE__*/styled__default['default'](DSButton__default['default']).withConfig({
+})(["display:flex;align-items:flex-start;margin-top:6px;margin-right:6px;"]);
+const StyledCloseButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
   componentId: "sc-4jnp92-7"
-})(["position:relative;&:focus{&:after{display:block;content:' ';position:absolute;top:-2px;left:0;width:calc(100% + 0px);height:calc(100% + 5px);border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], ({
-  theme
-}) => theme.colors.brand[700]);
-const StyledActionLink = /*#__PURE__*/styled__default['default'].a.withConfig({
+})(["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__default["default"].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
-}) => dsSystem.toMobile(theme.fontSizes.title[600]), ({
-  theme
-}) => theme.fontWeights.regular, ({
-  theme
-}) => theme.colors.brand[600]);
-const StyledBannerContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["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 dsSystem.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__default["default"].div.withConfig({
   componentId: "sc-4jnp92-9"
-})(["overflow:hidden;height:", ";", ";"], ({
-  isOpen
-}) => isOpen ? 'auto' : '0px', ({
-  isAnimating,
-  isOpen,
-  height
-}) => styleHelpers.handleAnimation(isAnimating, isOpen, height));
+})(["overflow:hidden;height:", ";", ";"], _ref22 => {
+  let {
+    isOpen
+  } = _ref22;
+  return isOpen ? 'auto' : '0px';
+}, _ref23 => {
+  let {
+    isAnimating,
+    isOpen,
+    height
+  } = _ref23;
+  return styleHelpers.handleAnimation(isAnimating, isOpen, height);
+});
 
 exports.StyledActionLink = StyledActionLink;
 exports.StyledBannerContainer = StyledBannerContainer;

package/cjs/MobileBanner/utils/icons.js

@@ -4,30 +4,25 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
-var SuccessFill = require('@elliemae/ds-icons/SuccessFill');
-var InfoFill = require('@elliemae/ds-icons/InfoFill');
-var AlertsDetailFill = require('@elliemae/ds-icons/AlertsDetailFill');
+var dsIcons = require('@elliemae/ds-icons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var SuccessFill__default = /*#__PURE__*/_interopDefaultLegacy(SuccessFill);
-var InfoFill__default = /*#__PURE__*/_interopDefaultLegacy(InfoFill);
-var AlertsDetailFill__default = /*#__PURE__*/_interopDefaultLegacy(AlertsDetailFill);
 
 const icons = {
-  success: /*#__PURE__*/_jsx__default['default'](SuccessFill__default['default'], {
+  success: /*#__PURE__*/_jsx__default["default"](dsIcons.SuccessFill, {
     fill: "#207e56"
   }),
-  info: /*#__PURE__*/_jsx__default['default'](InfoFill__default['default'], {
+  info: /*#__PURE__*/_jsx__default["default"](dsIcons.InfoFill, {
     fill: "#1e79c2"
   }),
-  error: /*#__PURE__*/_jsx__default['default'](AlertsDetailFill__default['default'], {
+  error: /*#__PURE__*/_jsx__default["default"](dsIcons.AlertsDetailFill, {
     width: "24px",
     height: "24px",
     fill: "#c64252"
   }),
-  warning: /*#__PURE__*/_jsx__default['default'](AlertsDetailFill__default['default'], {
+  warning: /*#__PURE__*/_jsx__default["default"](dsIcons.WarningSquare, {
     width: "24px",
     height: "24px",
     fill: "#d17a00"

package/cjs/MobileBanner/utils/styleHelpers.js

@@ -2,49 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var dsSystem = require('@elliemae/ds-system');
 var bannerTypes = require('./bannerTypes.js');
 
-const slideIn = dsSystem.kfrm`
-  0% {
-    transform: translate3d(0, -100%, 0);
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-`;
-const slideOut = dsSystem.kfrm`
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  60% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
-`;
-const spanContainer = height => dsSystem.kfrm`
-  0% {
-    height: 0px;
-  }
-  100% {
-    height: ${height}px;
-  }
-`;
-const shrinkContainer = height => dsSystem.kfrm`
-  0% {
-    height: ${height}px;
-  }
-  100% {
-    height: 0px;
-  }
-`;
-const handleBorderColor = (type, {
-  colors
-}) => {
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+const slideIn = dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n"])));
+const slideOut = dsSystem.kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  0% {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n  60% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translate3d(0, -100%, 0);\n  }\n"])));
+const spanContainer = height => dsSystem.kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ", "px;\n  }\n"])), height);
+const shrinkContainer = height => dsSystem.kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  0% {\n    height: ", "px;\n  }\n  100% {\n    height: 0px;\n  }\n"])), height);
+const handleBorderColor = (type, _ref) => {
+  let {
+    colors
+  } = _ref;
+
   switch (type) {
     case bannerTypes.MOBILE_BANNER_TYPES.SUCCESS:
       return colors.success[900];
@@ -59,16 +34,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 dsSystem.css`
-        animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;
-      `;
+      return dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);
     } else {
-      return dsSystem.css`
-        animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;
-      `;
+      return dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? shrinkContainer(height) : slideOut);
     }
   }
 };

package/cjs/MobileCard/ActionAddon.js

@@ -5,29 +5,31 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
 var styled = require('styled-components');
-var ChevronSmallDown = require('@elliemae/ds-icons/ChevronSmallDown');
-var DSButton = require('@elliemae/ds-basic/Button');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var ChevronSmallDown__default = /*#__PURE__*/_interopDefaultLegacy(ChevronSmallDown);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
-const 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;}"], 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]
-  })
-});
+const ActionAddon = _ref => {
+  let {
+    label,
+    onClick,
+    icon
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](Addon, {
+    onClick: onClick,
+    labelText: label,
+    icon: icon || /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {
+      color: ['brand-primary', 700]
+    })
+  });
+};
 
 exports.ActionAddon = ActionAddon;

package/cjs/MobileCard/Card.js

@@ -3,17 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 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 Grid = require('@elliemae/ds-basic/Grid');
+var dsGrid = require('@elliemae/ds-grid');
 var StyledCard = require('./StyledCard.js');
 var ExpandChevron = require('./ExpandChevron.js');
 var useHeight = require('./useHeight.js');
 var ExpandableRegion = require('./ExpandableRegion.js');
+var props = require('./props.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -22,59 +25,62 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var GroupItem__default = /*#__PURE__*/_interopDefaultLegacy(GroupItem);
 
-const TitleEllipsis = /*#__PURE__*/styled__default['default'].div.withConfig({
+const TitleEllipsis = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-10tpzm8-0"
 })(["", ""], dsSystem.truncate());
-const 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(), 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({
+})(["", " ", " 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(), props => dsSystem.toMobile(props.theme.fontSizes.title[500]), props => props.theme.fontWeights.regular);
-const SubText = /*#__PURE__*/styled__default['default'].span.withConfig({
+const SubText = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-10tpzm8-3"
 })(["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({
+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(), 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({
+})(["", " 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"](dsGrid.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);
-const CenterWrap = /*#__PURE__*/styled__default['default'].div.withConfig({
+const CenterWrap = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-10tpzm8-6"
 })(["display:flex;align-items:center;", ""], dsSystem.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 = 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 = {}) => {
+  return /*#__PURE__*/_jsx__default["default"](GroupItem__default["default"], {
+    render: function () {
+      let context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       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, {
+      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)
-      }, void 0, expandable && /*#__PURE__*/_jsx__default['default'](ExpandChevron.ExpandChevron, {
+      }, void 0, expandable && /*#__PURE__*/_jsx__default["default"](ExpandChevron.ExpandChevron, {
         isExpanded: selected,
         onClick: e => {
           e.stopPropagation();
@@ -85,105 +91,52 @@ const MobileCard = ({
           });
         },
         align: subText || subIcons ? 'top' : 'center'
-      }), /*#__PURE__*/_jsx__default['default'](Grid.Grid, {
+      }), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
         pb: (subText || subIcons) && subTextHeight,
         cols: ['auto', 'auto'],
         alignItems: "center"
-      }, void 0, leftProp && /*#__PURE__*/_jsx__default['default'](Grid.Grid, {
+      }, void 0, leftProp && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
         ml: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
-      }, void 0, leftProp), leftAddOn && /*#__PURE__*/_jsx__default['default'](LeftIcon, {
+      }, void 0, leftProp), leftAddOn && /*#__PURE__*/_jsx__default["default"](LeftIcon, {
         ml: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
         halfM: halfM
-      }, void 0, leftAddOn)), /*#__PURE__*/_jsx__default['default'](Grid.Grid, {
+      }, void 0, leftAddOn)), /*#__PURE__*/_jsx__default["default"](dsGrid.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%"
-      }, void 0, /*#__PURE__*/_jsx__default['default'](CenterWrap, {}, void 0, /*#__PURE__*/_jsx__default['default'](Title, {
+      }, void 0, /*#__PURE__*/_jsx__default["default"](CenterWrap, {}, void 0, /*#__PURE__*/_jsx__default["default"](Title, {
         pt: !isJustChildren && halfM,
         "data-testid": "card-title"
-      }, void 0, _TitleEllipsis || (_TitleEllipsis = /*#__PURE__*/_jsx__default['default'](TitleEllipsis, {}, void 0, children)), details && /*#__PURE__*/_jsx__default['default'](Grid.Grid, {
+      }, void 0, _TitleEllipsis || (_TitleEllipsis = /*#__PURE__*/_jsx__default["default"](TitleEllipsis, {}, void 0, children)), details && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
         "data-testid": "card-details",
         cols: details.map(() => 'min-content'),
-        mb: !(subText || subIcons) && halfM,
+        mb: !(subText || subIcons) && halfM || 0,
         pt: dsSystem.op('/', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs), 2)
-      }, void 0, details.map((d, i) => /*#__PURE__*/_jsx__default['default'](Detail, {}, i, d, i < details.length - 1 && /*#__PURE__*/_jsx__default['default'](Detail, {
+      }, 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, {
+      }, void 0, "\u2022"))))), rightProp && rightProp.map((prop, i) => /*#__PURE__*/_jsx__default["default"](dsGrid.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, {
+        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, {
+        children: subText.map((s, i) => /*#__PURE__*/_jsx__default["default"](SubText, {
           "data-testid": "card-subText"
         }, i, s))
-      }), /*#__PURE__*/_jsx__default['default'](ExpandableRegion.ExpandableRegion, {
+      }), /*#__PURE__*/_jsx__default["default"](ExpandableRegion.ExpandableRegion, {
         show: selected,
         content: expandedContent
-      })));
+      }), cardContent && (_Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, cardContent)))));
     }
   });
 };
 
-const props = {
-  /**
-   * card height
-   */
-  height: reactDesc.PropTypes.oneOf(['s', 'm']).description('card height'),
-
-  /**
-   * Defines mobile card title
-   */
-  children: reactDesc.PropTypes.string.isRequired.description('Defines mobile card title'),
-
-  /**
-   * Wheter if the card is expandable or not
-   */
-  expandable: reactDesc.PropTypes.bool.description('Wheter if the card is expandable or not'),
-
-  /**
-   * content to display in expand card section
-   */
-  expandedContent: reactDesc.PropTypes.element.description('content to display in expand card section'),
-
-  /**
-   * Icon to the left of the card. Size is adjusted automatically.
-   */
-  leftAddOn: reactDesc.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: reactDesc.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: reactDesc.PropTypes.arrayOf(reactDesc.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: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('Pass an array of 1 or 2 strings'),
-
-  /**
-   * SubIcons component
-   */
-  subIcons: reactDesc.PropTypes.element.description('SubIcons component'),
-
-  /**
-   * Pass an array of 1, 2 or 3 strings
-   */
-  details: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('Pass an array of 1, 2 or 3 strings'),
-  theme: reactDesc.PropTypes.object.isRequired.description(''),
-  value: reactDesc.PropTypes.number.description('')
-};
 const DSMobileCardWithSchema = reactDesc.describe(MobileCard);
-DSMobileCardWithSchema.propTypes = props;
+DSMobileCardWithSchema.propTypes = props.cardPropsTypes;
 var MobileCard$1 = dsSystem.withTheme(MobileCard);
 
 exports.DSMobileCardWithSchema = DSMobileCardWithSchema;
-exports['default'] = MobileCard$1;
+exports["default"] = MobileCard$1;