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

package/esm/MobileCard/Card.js

@@ -1,155 +1,116 @@
-import React, { useRef } from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+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-grid';
+import { Grid } from '@elliemae/ds-basic/Grid';
 import { StyledCard } from './StyledCard.js';
 import { ExpandChevron } from './ExpandChevron.js';
 import { useHeight } from './useHeight.js';
 import { ExpandableRegion } from './ExpandableRegion.js';
-import 'prop-types';
-import '@elliemae/ds-icons';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'polished';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-/* eslint-disable react/no-array-index-key */
-var TitleEllipsis = /*#__PURE__*/styled.div.withConfig({
+const TitleEllipsis = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-10tpzm8-0"
 })(["", ""], truncate());
-var Title = /*#__PURE__*/styled.div.withConfig({
+const Title = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-10tpzm8-1"
-})(["", " ", " font-weight:", ";font-size:", ";width:100%;", ""], padding, truncate(), function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return toMobile(props.theme.fontSizes.title[600]);
-}, color('neutral', '800'));
-var Detail = /*#__PURE__*/styled.span.withConfig({
+})(["", " ", " 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(), function (props) {
-  return toMobile(props.theme.fontSizes.title[500]);
-}, function (props) {
-  return props.theme.fontWeights.regular;
-});
-var SubText = /*#__PURE__*/styled.span.withConfig({
+})(["", " ", " font-size:", ";font-weight:", ";"], padding, truncate(), props => toMobile(props.theme.fontSizes.title[500]), props => props.theme.fontWeights.regular);
+const SubText = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-10tpzm8-3"
-})(["margin-top:", ";", " &:nth-child(2){padding-left:", ";}"], function (props) {
-  return __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs);
-}, truncate(), function (props) {
-  return __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s);
-});
-var SubTextWrap = /*#__PURE__*/styled.div.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(), function (props) {
-  return border(props.theme.colors.neutral['300']);
-}, function (props) {
-  return __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs);
-}, function (props) {
-  return toMobile(props.theme.fontSizes.subTitle[400]);
-}, color('neutral', '500'), function (props) {
-  return props.theme.fontWeights.regular;
-});
-var LeftIcon = /*#__PURE__*/styled(Grid).withConfig({
+})(["", " 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:", ";}"], function (props) {
-  return props.halfM;
-}, function (props) {
-  return props.halfM;
-}, function (props) {
-  return props.halfM;
-}, function (props) {
-  return props.halfM;
-});
-var CenterWrap = /*#__PURE__*/styled.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.div.withConfig({
   componentId: "sc-10tpzm8-6"
 })(["display:flex;align-items:center;", ""], 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 = useRef(null);
-  var subTextHeight = useHeight(subTextRef);
-  var isJustChildren = !(subText || subIcons || details);
-  var halfM = op('/', __UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 2);
-  return /*#__PURE__*/React.createElement(GroupItem, {
-    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.createElement(StyledCard, {
+const MobileCard = ({
+  children,
+  height = 'm',
+  leftAddOn,
+  leftProp,
+  rightProp,
+  subText,
+  subIcons,
+  details,
+  theme,
+  expandable = false,
+  expandedContent,
+  value
+}) => {
+  var _TitleEllipsis, _SubText;
+
+  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 = {}) => {
+      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(StyledCard, {
         "data-testid": "card-wrapper",
         minHeight: height === 'm' ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl) : __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl)
-      }, expandable && /*#__PURE__*/React.createElement(ExpandChevron, {
+      }, void 0, expandable && /*#__PURE__*/_jsx(ExpandChevron, {
         isExpanded: selected,
-        onClick: function onClick(e) {
+        onClick: e => {
           e.stopPropagation();
           onChange({
             target: {
-              value: value
+              value
             }
           });
         },
         align: subText || subIcons ? 'top' : 'center'
-      }), /*#__PURE__*/React.createElement(Grid, {
+      }), /*#__PURE__*/_jsx(Grid, {
         pb: (subText || subIcons) && subTextHeight,
         cols: ['auto', 'auto'],
         alignItems: "center"
-      }, leftProp && /*#__PURE__*/React.createElement(Grid, {
+      }, void 0, leftProp && /*#__PURE__*/_jsx(Grid, {
         ml: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
-      }, leftProp), leftAddOn && /*#__PURE__*/React.createElement(LeftIcon, {
+      }, void 0, leftProp), leftAddOn && /*#__PURE__*/_jsx(LeftIcon, {
         ml: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
         halfM: halfM
-      }, leftAddOn)), /*#__PURE__*/React.createElement(Grid, {
+      }, void 0, leftAddOn)), /*#__PURE__*/_jsx(Grid, {
         pl: !leftAddOn ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : __UNSAFE_SPACE_TO_DIMSUM(theme.space.xs),
         pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
         width: "100%"
-      }, /*#__PURE__*/React.createElement(CenterWrap, null, /*#__PURE__*/React.createElement(Title, {
+      }, void 0, /*#__PURE__*/_jsx(CenterWrap, {}, void 0, /*#__PURE__*/_jsx(Title, {
         pt: !isJustChildren && halfM,
         "data-testid": "card-title"
-      }, /*#__PURE__*/React.createElement(TitleEllipsis, null, children), details && /*#__PURE__*/React.createElement(Grid, {
+      }, void 0, _TitleEllipsis || (_TitleEllipsis = /*#__PURE__*/_jsx(TitleEllipsis, {}, void 0, children)), details && /*#__PURE__*/_jsx(Grid, {
         "data-testid": "card-details",
-        cols: details.map(function () {
-          return 'min-content';
-        }),
+        cols: details.map(() => 'min-content'),
         mb: !(subText || subIcons) && halfM,
         pt: op('/', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs), 2)
-      }, details.map(function (d, i) {
-        return /*#__PURE__*/React.createElement(Detail, {
-          key: i
-        }, d, i < details.length - 1 && /*#__PURE__*/React.createElement(Detail, {
-          px: __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs)
-        }, "\u2022"));
-      }))), rightProp && rightProp.map(function (prop, i) {
-        return /*#__PURE__*/React.createElement(Grid, {
-          ml: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
-          key: i
-        }, prop);
-      })), subIcons && /*#__PURE__*/React.createElement(SubTextWrap, {
-        ref: subTextRef
-      }, /*#__PURE__*/React.createElement(SubText, null, subIcons), subText && subText[1] && /*#__PURE__*/React.createElement(SubText, {
-        "data-testid": "card-subText"
-      }, subText[1])), subText && !subIcons && /*#__PURE__*/React.createElement(SubTextWrap, {
-        ref: subTextRef
-      }, subText.map(function (s, i) {
-        return /*#__PURE__*/React.createElement(SubText, {
-          "data-testid": "card-subText",
-          key: i
-        }, s);
-      })), /*#__PURE__*/React.createElement(ExpandableRegion, {
+      }, 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)
+      }, void 0, "\u2022"))))), rightProp && rightProp.map((prop, i) => /*#__PURE__*/_jsx(Grid, {
+        ml: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
+      }, i, prop))), subIcons && /*#__PURE__*/jsxs(SubTextWrap, {
+        ref: subTextRef,
+        children: [_SubText || (_SubText = /*#__PURE__*/_jsx(SubText, {}, void 0, subIcons)), subText && subText[1] && /*#__PURE__*/_jsx(SubText, {
+          "data-testid": "card-subText"
+        }, void 0, subText[1])]
+      }), subText && !subIcons && /*#__PURE__*/jsx(SubTextWrap, {
+        ref: subTextRef,
+        children: subText.map((s, i) => /*#__PURE__*/_jsx(SubText, {
+          "data-testid": "card-subText"
+        }, i, s))
+      }), /*#__PURE__*/_jsx(ExpandableRegion, {
         show: selected,
         content: expandedContent
       })));
@@ -157,7 +118,7 @@ var MobileCard = function MobileCard(_ref) {
   });
 };
 
-var props = {
+const props = {
   /**
    * card height
    */
@@ -210,10 +171,8 @@ var props = {
   theme: PropTypes.object.isRequired.description(''),
   value: PropTypes.number.description('')
 };
-MobileCard.propTypes = props;
-var DSMobileCardWithSchema = describe(MobileCard);
+const DSMobileCardWithSchema = describe(MobileCard);
 DSMobileCardWithSchema.propTypes = props;
 var MobileCard$1 = withTheme(MobileCard);
 
 export { DSMobileCardWithSchema, MobileCard$1 as default };
-//# sourceMappingURL=Card.js.map

package/esm/MobileCard/CardIcons.js

@@ -1,66 +1,24 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
 import styled from 'styled-components';
-import { Grid } from '@elliemae/ds-grid';
+import { Grid } from '@elliemae/ds-basic/Grid';
 
-/* eslint-disable import/no-unresolved */
-var CardIconsWrapper = /*#__PURE__*/styled(Grid).withConfig({
+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:", ";}"], 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.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.createElement(Icon, {
-        key: i,
-        className: "icon-color-".concat(colors[i] || 'muted')
-      })
-    );
-  }));
-};
-SubIcons.propTypes = {
-  /**
-   * Array of  Icons
-   */
-  icons: PropTypes.arrayOf(PropTypes.func),
-
-  /**
-   * Color Types: muted, warn, error, success
-   */
-  colors: PropTypes.arrayOf(PropTypes.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(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 };
-//# sourceMappingURL=CardIcons.js.map

package/esm/MobileCard/ExpandChevron.js

@@ -1,47 +1,26 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
 import styled from 'styled-components';
-import { ChevronDown, ChevronRight } from '@elliemae/ds-icons';
+import ChevronDownIcon from '@elliemae/ds-icons/ChevronDown';
+import ChevronRight from '@elliemae/ds-icons/ChevronRight';
 
-var ChevronWrap = /*#__PURE__*/styled.div.withConfig({
+const ChevronWrap = /*#__PURE__*/styled.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 ? ChevronDown : ChevronRight;
-  return /*#__PURE__*/React.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 : ChevronRight;
+  return /*#__PURE__*/_jsx(ChevronWrap, {
     "data-testid": "ds-card-expand-chevron",
     align: align
-  }, /*#__PURE__*/React.createElement(Chevron, {
+  }, void 0, /*#__PURE__*/_jsx(Chevron, {
     size: "s",
     color: ['brand-primary', 800],
     onClick: onClick
   }));
 };
-ExpandChevron.propTypes = {
-  /**
-   * Whether if the chevron is expanded or not
-   */
-  isExpanded: PropTypes.bool,
-
-  /**
-   * click callback
-   */
-  onClick: PropTypes.func.isRequired,
-
-  /**
-   * top or center
-   */
-  align: PropTypes.string.isRequired
-};
 
 export { ExpandChevron };
-//# sourceMappingURL=ExpandChevron.js.map

package/esm/MobileCard/ExpandableRegion.js

@@ -1,66 +1,46 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useRef, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { truncate, border } from '@elliemae/ds-system';
+import { jsx } from 'react/jsx-runtime';
 
-var RegionWrapper = /*#__PURE__*/styled.div.withConfig({
+const RegionWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-mduzz9-0"
 })(["width:100%;height:100%;"]);
-var Region = /*#__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:", ";"], function (props) {
-  return props.hide ? 'visibility: hidden;' : '';
-}, function (props) {
-  return props.animate ? '0.25s' : '0.20s';
-}, function (props) {
-  return props.animate ? "\n      max-height: ".concat(props.refHeight, "px;\n    ") : '';
-}, truncate(), function (props) {
-  return border(props.theme.colors.neutral['300']);
-}, function (props) {
-  return props.theme.fontWeights.regular;
-});
-var ExpandableRegion = function ExpandableRegion(_ref) {
+})(["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
+}) => {
   var _ref$current;
 
-  var show = _ref.show,
-      content = _ref.content;
-  var ref = useRef(null); // triggers transition
+  const ref = useRef(null); // triggers transition
 
-  var _useState = useState(show),
-      _useState2 = _slicedToArray(_useState, 2),
-      animate = _useState2[0],
-      setAnimate = _useState2[1]; // needed to properly handle the transition. Hide after transition ends
+  const [animate, setAnimate] = useState(show); // needed to properly handle the transition. Hide after transition ends
 
-
-  var _useState3 = useState(!show),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hide = _useState4[0],
-      setHide = _useState4[1];
-
-  useEffect(function () {
+  const [hide, setHide] = useState(!show);
+  useEffect(() => {
     setAnimate(show);
     if (show) setHide(false);
   }, [show]);
 
-  var hideOnAnimationEnd = function hideOnAnimationEnd() {
+  const hideOnAnimationEnd = () => {
     if (!show) setHide(true);
   };
 
-  return /*#__PURE__*/React.createElement(Region, {
+  return /*#__PURE__*/_jsx(Region, {
     hide: hide // needed to handle transition, `auto` max-height isn't supported
     ,
     refHeight: (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 9999,
     onTransitionEnd: hideOnAnimationEnd,
     animate: animate
-  }, /*#__PURE__*/React.createElement(RegionWrapper, {
-    ref: ref
-  }, content));
-};
-ExpandableRegion.propTypes = {
-  show: PropTypes.bool,
-  content: PropTypes.element
+  }, void 0, /*#__PURE__*/jsx(RegionWrapper, {
+    ref: ref,
+    children: content
+  }));
 };
 
 export { ExpandableRegion };
-//# sourceMappingURL=ExpandableRegion.js.map

package/esm/MobileCard/Group.js

@@ -1,74 +1,52 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
 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-grid';
+import { Grid } from '@elliemae/ds-basic/Grid';
 import { truncate, __UNSAFE_SPACE_TO_DIMSUM, color, border, withTheme } from '@elliemae/ds-system';
 import { StyledCard } from './StyledCard.js';
 
-/* eslint-disable react/no-array-index-key */
-var GroupGrid = /*#__PURE__*/styled(Grid).withConfig({
+const GroupGrid = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-17xukaf-0"
-})(["", "{border-top:none;}", ""], StyledCard, function (_ref) {
-  var theme = _ref.theme,
-      withTopBorder = _ref.withTopBorder;
-  return withTopBorder ? "border-top: ".concat(border(theme.colors.neutral['100'])) : '';
-});
-var GroupTitle = /*#__PURE__*/styled.span.withConfig({
+})(["", "{border-top:none;}", ""], StyledCard, ({
+  theme,
+  withTopBorder
+}) => withTopBorder ? "border-top: ".concat(border(theme.colors.neutral['100'])) : '');
+const GroupTitle = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-17xukaf-1"
 })(["", ""], truncate());
-var GroupTitleGrid = /*#__PURE__*/styled.div.withConfig({
+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:", ";}"], function (props) {
-  return props.theme.space.xs;
-}, function (props) {
-  return "calc(".concat(__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), " / 2)");
-}, color('neutral', '700'), function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return props.theme.colors.brand['200'];
-}, function (props) {
-  return border(props.theme.colors.brand['300']);
-}, function (props) {
-  return __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m);
-}, function (props) {
-  return props.theme.colors.neutral['080'];
-}, function (props) {
-  return border(props.theme.colors.neutral['080']);
-});
+})(["display:flex;justify-content:space-between;padding:0 ", ";font-size:", ";", " font-weight:", ";background-color:", ";border-top:", ";line-height:", ";@media (min-width:1024px){background-color:", ";border-top:", ";}"], props => props.theme.space.xs, props => "calc(".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']));
 
-var MobileCardGroup = function MobileCardGroup(_ref2) {
-  var children = _ref2.children,
-      theme = _ref2.theme,
-      title = _ref2.title,
-      action = _ref2.action,
-      activeValue = _ref2.activeValue,
-      _ref2$allowMultipleOp = _ref2.allowMultipleOpen,
-      allowMultipleOpen = _ref2$allowMultipleOp === void 0 ? false : _ref2$allowMultipleOp,
-      _ref2$onChange = _ref2.onChange,
-      onChange = _ref2$onChange === void 0 ? function () {
-    return null;
-  } : _ref2$onChange;
-  var rows = !title ? ['auto'] : [__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 'auto'];
-  return /*#__PURE__*/React.createElement(Group, {
+const MobileCardGroup = ({
+  children,
+  theme,
+  title,
+  action,
+  activeValue,
+  allowMultipleOpen = false,
+  onChange = () => null
+}) => {
+  const rows = !title ? ['auto'] : [__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 'auto'];
+  return /*#__PURE__*/_jsx(Group, {
     activeValue: activeValue,
     multiple: allowMultipleOpen,
     onChange: onChange
-  }, /*#__PURE__*/React.createElement(GroupGrid, {
+  }, void 0, /*#__PURE__*/_jsx(GroupGrid, {
     withTopBorder: !title,
     rows: rows
-  }, !!title && /*#__PURE__*/React.createElement(GroupTitleGrid, {
+  }, void 0, !!title && /*#__PURE__*/_jsx(GroupTitleGrid, {
     pl: "xxs"
-  }, /*#__PURE__*/React.createElement(GroupTitle, null, title), action), /*#__PURE__*/React.createElement(Grid, null, React.Children.map(children, function (child, idx) {
-    return /*#__PURE__*/React.cloneElement(child, {
-      key: idx,
-      value: idx,
-      idx: idx
-    });
-  }, null))));
+  }, void 0, /*#__PURE__*/_jsx(GroupTitle, {}, void 0, title), action), /*#__PURE__*/_jsx(Grid, {}, void 0, React.Children.map(children, (child, idx) => /*#__PURE__*/React.cloneElement(child, {
+    key: idx,
+    value: idx,
+    idx
+  }), null))));
 };
 
-var props = {
+const props = {
   theme: PropTypes.object.isRequired.description(''),
 
   /**
@@ -95,10 +73,8 @@ var props = {
   /**  */
   onChange: PropTypes.func.description('')
 };
-MobileCardGroup.propTypes = props;
-var DSMobileCardGroupWithSchema = describe(MobileCardGroup);
+const DSMobileCardGroupWithSchema = describe(MobileCardGroup);
 DSMobileCardGroupWithSchema.propTypes = props;
 var MobileGroup = withTheme(MobileCardGroup);
 
 export { DSMobileCardGroupWithSchema, MobileGroup as default };
-//# sourceMappingURL=Group.js.map

package/esm/MobileCard/StyledCard.js

@@ -1,15 +1,8 @@
 import styled from 'styled-components';
 import { border } from '@elliemae/ds-system';
 
-var StyledCard = /*#__PURE__*/styled.div.withConfig({
+const StyledCard = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-28g2t3-0"
-})(["display:flex;align-items:center;height:fit-content;min-height:", ";border:", ";border-bottom:", ";"], function (props) {
-  return props.minHeight;
-}, function (props) {
-  return border(props.theme.colors.neutral['100']);
-}, function (props) {
-  return border('.5px', props.theme.colors.neutral['500']);
-});
+})(["display:flex;align-items:center;height:fit-content;min-height:", ";border:", ";border-bottom:", ";"], props => props.minHeight, props => border(props.theme.colors.neutral['100']), props => border('.5px', props.theme.colors.neutral['500']));
 
 export { StyledCard };
-//# sourceMappingURL=StyledCard.js.map