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

package/cjs/MobileCard/CardIcons.js

@@ -3,31 +3,36 @@
 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');
 require('react');
 var styled = require('styled-components');
-var Grid = require('@elliemae/ds-basic/Grid');
+var dsGrid = require('@elliemae/ds-grid');
 
 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);
 
-const CardIconsWrapper = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
+const CardIconsWrapper = /*#__PURE__*/styled__default["default"](dsGrid.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__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)));
+const SubIcons = _ref => {
+  let {
+    icons = [],
+    colors = []
+  } = _ref;
+  return /*#__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;

package/cjs/MobileCard/ExpandChevron.js

@@ -5,25 +5,23 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
 var styled = require('styled-components');
-var ChevronDownIcon = require('@elliemae/ds-icons/ChevronDown');
-var ChevronRight = require('@elliemae/ds-icons/ChevronRight');
+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 styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
-var ChevronRight__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRight);
 
 const ChevronWrap = /*#__PURE__*/styled__default["default"].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__default["default"] : ChevronRight__default["default"];
+const ExpandChevron = _ref => {
+  let {
+    isExpanded,
+    onClick,
+    align
+  } = _ref;
+  const Chevron = isExpanded ? dsIcons.ChevronDown : dsIcons.ChevronRight;
   return /*#__PURE__*/_jsx__default["default"](ChevronWrap, {
     "data-testid": "ds-card-expand-chevron",
     align: align

package/cjs/MobileCard/ExpandableRegion.js

@@ -20,12 +20,13 @@ const RegionWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
 const Region = /*#__PURE__*/styled__default["default"].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    ") : '', dsSystem.truncate(), props => dsSystem.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 = React.useRef(null); // triggers transition
 
   const [animate, setAnimate] = React.useState(show); // needed to properly handle the transition. Hide after transition ends

package/cjs/MobileCard/Group.js

@@ -3,11 +3,13 @@
 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 Group = require('@elliemae/ds-shared/GroupContext/Group');
-var Grid = require('@elliemae/ds-basic/Grid');
+var dsGrid = require('@elliemae/ds-grid');
 var dsSystem = require('@elliemae/ds-system');
 var StyledCard = require('./StyledCard.js');
 
@@ -18,12 +20,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var Group__default = /*#__PURE__*/_interopDefaultLegacy(Group);
 
-const GroupGrid = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
+const GroupGrid = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-17xukaf-0"
-})(["", "{border-top:none;}", ""], StyledCard.StyledCard, ({
-  theme,
-  withTopBorder
-}) => withTopBorder ? "border-top: ".concat(dsSystem.border(theme.colors.neutral['100'])) : '');
+})(["", "{border-top:none;}", ""], StyledCard.StyledCard, _ref => {
+  let {
+    theme,
+    withTopBorder
+  } = _ref;
+  return withTopBorder ? "border-top: ".concat(dsSystem.border(theme.colors.neutral['100'])) : '';
+});
 const GroupTitle = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-17xukaf-1"
 })(["", ""], dsSystem.truncate());
@@ -31,15 +36,16 @@ const GroupTitleGrid = /*#__PURE__*/styled__default["default"].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(dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), " / 2)"), dsSystem.color('neutral', '700'), props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['200'], props => dsSystem.border(props.theme.colors.brand['300']), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), props => props.theme.colors.neutral['080'], props => dsSystem.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'] : [dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 'auto'];
   return /*#__PURE__*/_jsx__default["default"](Group__default["default"], {
     activeValue: activeValue,
@@ -50,7 +56,7 @@ const MobileCardGroup = ({
     rows: rows
   }, void 0, !!title && /*#__PURE__*/_jsx__default["default"](GroupTitleGrid, {
     pl: "xxs"
-  }, void 0, /*#__PURE__*/_jsx__default["default"](GroupTitle, {}, void 0, title), action), /*#__PURE__*/_jsx__default["default"](Grid.Grid, {}, void 0, React__default["default"].Children.map(children, (child, idx) => /*#__PURE__*/React__default["default"].cloneElement(child, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](GroupTitle, {}, void 0, title), action), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, React__default["default"].Children.map(children, (child, idx) => /*#__PURE__*/React__default["default"].cloneElement(child, {
     key: idx,
     value: idx,
     idx

package/cjs/MobileCard/props.js

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const cardPropsTypes = {
+  /**
+   * card height
+   */
+  height: reactDesc.PropTypes.oneOf(['s', 'm']).description('card height'),
+
+  /**
+   * Defines mobile card title
+   */
+  children: reactDesc.PropTypes.string.description('Defines mobile card title').isRequired,
+
+  /**
+   * 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.description('').isRequired,
+  value: reactDesc.PropTypes.number.description(''),
+  cardContent: reactDesc.PropTypes.node.description('JSX content for the card')
+};
+
+exports.cardPropsTypes = cardPropsTypes;

package/cjs/MobileContextMenu/MobileContextMenu.js

@@ -5,12 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var lodash = require('lodash');
 var reactDesc = require('react-desc');
 var styled = require('styled-components');
-var Grid = require('@elliemae/ds-basic/Grid');
-var dsBasic = require('@elliemae/ds-basic');
+var dsGrid = require('@elliemae/ds-grid');
+var Backdrop = require('@elliemae/ds-backdrop');
 var dsSystem = require('@elliemae/ds-system');
 var Group = require('@elliemae/ds-shared/GroupContext/Group');
 var MobileContextMenuGroup = require('./MobileContextMenuGroup.js');
@@ -29,34 +36,35 @@ var _ContextMenuGroup;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const StyledContainer = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
+const StyledContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-15ys5tq-0"
 })(["background:", ";z-index:", ";width:", ";position:fixed;bottom:0;left:", ";max-height:90vh;border-top-left-radius:5px;border-top-right-radius:5px;box-shadow:0 0px 24px 0 rgba(0,0,0,0.5),0 0px 11px 0 rgba(0,0,0,0.5);"], props => props.theme.colors.neutral['000'], props => props.zIndex, props => "calc(100% - ".concat(props.theme.space.xs, ")"), props => props.theme.space.xxs);
-const StyledTitle = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
+const StyledTitle = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-15ys5tq-1"
 })(["font-size:16px;font-weight:", ";color:", ";", " & > span{height:20px;width:20px;}& > span > svg,svg:not([fill]){height:20px;width:20px;fill:", ";}"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['000'], dsSystem.truncate(), props => props.theme.colors.neutral['000']);
-const HeaderContainer = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
+const HeaderContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-15ys5tq-2"
 })(["border-top-left-radius:5px;border-top-right-radius:5px;background:", ";"], props => props.theme.colors.brand['600']);
 
 const isArr = prop => Array.isArray(prop);
 
-const DSMobileContextMenu = dsSystem.withTheme(({
-  open = false,
-  title = '',
-  multiple = false,
-  singleSelect = false,
-  onChange = lodash.noop,
-  onClickOutside = lodash.noop,
-  children,
-  theme,
-  backdropZIndex,
-  zIndex = 1,
-  dataTestid = 'mobile-context-menu',
-  buttonFooter = null,
-  onApply = lodash.noop,
-  selecteds: initSelecteds
-}) => {
+const DSMobileContextMenu = dsSystem.withTheme(_ref => {
+  let {
+    open = false,
+    title = '',
+    multiple = false,
+    singleSelect = false,
+    onChange = lodash.noop,
+    onClickOutside = lodash.noop,
+    children,
+    theme,
+    backdropZIndex,
+    zIndex = 1,
+    dataTestid = 'mobile-context-menu',
+    buttonFooter = null,
+    onApply = lodash.noop,
+    selecteds: initSelecteds
+  } = _ref;
   const [selectedItems, setSelectedItems] = React.useState([]);
   const trueSelected = React.useMemo(() => initSelecteds !== undefined ? initSelecteds : [...selectedItems], [initSelecteds, selectedItems]);
   const containerRef = React.useRef(null);
@@ -78,7 +86,7 @@ const DSMobileContextMenu = dsSystem.withTheme(({
   if (buttonFooter) rows.push('56px');
   if (!open) return null;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/_jsx__default["default"](dsBasic.DSBackdrop, {
+    children: [/*#__PURE__*/_jsx__default["default"](Backdrop.DSBackdrop, {
       type: "cover",
       zIndex: backdropZIndex,
       onClick: e => {
@@ -100,11 +108,11 @@ const DSMobileContextMenu = dsSystem.withTheme(({
         alignItems: "center",
         gutter: "xxs",
         cols: Array(isArr(title) ? title.length : 1).fill('auto')
-      }, void 0, title)), /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+      }, void 0, title)), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
         style: {
           overflow: 'hidden'
         }
-      }, void 0, /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+      }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
         style: {
           overflow: 'auto'
         }
@@ -131,7 +139,7 @@ const DSMobileContextMenu = dsSystem.withTheme(({
           onClick: !isGroup ? e => onClick(e, child.props) : null,
           selectedItems: isGroup ? trueSelected : null
         });
-      })))), buttonFooter && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+      })))), buttonFooter && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
         pl: "xs",
         pr: "xs",
         alignItems: "center"

package/cjs/MobileContextMenu/MobileContextMenuGroup.js

@@ -4,9 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var styled = require('styled-components');
-var dsBasic = require('@elliemae/ds-basic');
+var dsGrid = require('@elliemae/ds-grid');
 var lodash = require('lodash');
 var reactDesc = require('react-desc');
 
@@ -24,32 +31,35 @@ const Title = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-atfpfh-0"
 })(["height:24px;line-height:24px;font-size:12px;border-top:1px solid ", ";background:", ";padding:0 ", ";color:", ";font-weight:", ";"], props => props.theme.colors.brand['300'], props => props.theme.colors.brand['200'], props => props.theme.space.xs, props => props.theme.colors.neutral['700'], props => props.theme.fontWeights.semibold);
 
-const DSMobileContextMenuGroup = ({
-  title,
-  isMulti,
-  singleSelect,
-  children,
-  value: groupValue,
-  selectedItems
-}) => /*#__PURE__*/_jsx__default["default"](dsBasic.Grid, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsBasic.Grid, {}, void 0, /*#__PURE__*/_jsx__default["default"](Title, {}, void 0, title)), /*#__PURE__*/_jsx__default["default"](dsBasic.Grid, {}, void 0, React__default["default"].Children.map(children, (child, index) => {
-  const {
-    onClick = lodash.noop
-  } = child.props;
-  const value = "".concat(groupValue, ":").concat(index);
-  let isSelected;
-  if (singleSelect) isSelected = selectedItems === value;else if (isMulti) isSelected = selectedItems.includes(value);
-  return /*#__PURE__*/React__default["default"].cloneElement(child, {
-    value,
-    key: 'group.'.concat(index),
-    isGroup: true,
+const DSMobileContextMenuGroup = _ref => {
+  let {
+    title,
     isMulti,
     singleSelect,
-    isSelected,
-    onClick: e => onClick(e, _objectSpread({
-      value
-    }, child.props))
-  });
-})));
+    children,
+    value: groupValue,
+    selectedItems
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, /*#__PURE__*/_jsx__default["default"](Title, {}, void 0, title)), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, React__default["default"].Children.map(children, (child, index) => {
+    const {
+      onClick = lodash.noop
+    } = child.props;
+    const value = "".concat(groupValue, ":").concat(index);
+    let isSelected;
+    if (singleSelect) isSelected = selectedItems === value;else if (isMulti) isSelected = selectedItems.includes(value);
+    return /*#__PURE__*/React__default["default"].cloneElement(child, {
+      value,
+      key: 'group.'.concat(index),
+      isGroup: true,
+      isMulti,
+      singleSelect,
+      isSelected,
+      onClick: e => onClick(e, _objectSpread({
+        value
+      }, child.props))
+    });
+  })));
+};
 
 const props = {
   /**

package/cjs/MobileContextMenu/MobileContextMenuItem.js

@@ -2,16 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('react');
 var reactDesc = require('react-desc');
-var Grid = require('@elliemae/ds-basic/Grid');
+var dsGrid = require('@elliemae/ds-grid');
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
 var GroupItem = require('@elliemae/ds-shared/GroupContext/GroupItem');
-var DSCheckbox = require('@elliemae/ds-basic/form/Checkbox');
-var DSCheckmark = require('@elliemae/ds-icons/Checkmark');
+var dsForm = require('@elliemae/ds-form');
+var dsIcons = require('@elliemae/ds-icons');
 var MobileTouchable = require('../MobileTouchable/MobileTouchable.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -21,8 +26,6 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var GroupItem__default = /*#__PURE__*/_interopDefaultLegacy(GroupItem);
-var DSCheckbox__default = /*#__PURE__*/_interopDefaultLegacy(DSCheckbox);
-var DSCheckmark__default = /*#__PURE__*/_interopDefaultLegacy(DSCheckmark);
 
 var _CheckMark;
 
@@ -32,7 +35,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const Wrap = /*#__PURE__*/styled__default["default"](props => /*#__PURE__*/jsxRuntime.jsx(MobileTouchable.DSMobileTouchable, _objectSpread({}, props))).withConfig({
   componentId: "sc-20od94-0"
 })(["border-bottom:none;"]);
-const PropWrap = /*#__PURE__*/styled__default["default"](props => /*#__PURE__*/jsxRuntime.jsx(Grid.Grid, _objectSpread({}, props))).withConfig({
+const PropWrap = /*#__PURE__*/styled__default["default"](props => /*#__PURE__*/jsxRuntime.jsx(dsGrid.Grid, _objectSpread({}, props))).withConfig({
   componentId: "sc-20od94-1"
 })(["", ""], props => {
   if (!props.isMulti) {
@@ -47,24 +50,25 @@ const Title = /*#__PURE__*/styled__default["default"].span.withConfig({
 const Label = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-20od94-3"
 })(["font-size:13px;color:", ";"], props => props.theme.colors.neutral['600']);
-const CheckMark = /*#__PURE__*/styled__default["default"](DSCheckmark__default["default"]).withConfig({
+const CheckMark = /*#__PURE__*/styled__default["default"](dsIcons.Checkmark).withConfig({
   componentId: "sc-20od94-4"
 })(["fill:", ";"], props => props.theme.colors.brand['600']);
 
-const DSMobileContextMenuItem = ({
-  label,
-  title,
-  leftProp,
-  isGroup,
-  isMulti,
-  singleSelect,
-  isSelected,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onClick = () => {},
-  value
-}) => {
-  var _Checkbox, _Grid, _Title;
-
+const DSMobileContextMenuItem = _ref => {
+  var _DSCheckbox, _Grid, _Title;
+
+  let {
+    label,
+    title,
+    leftProp,
+    isGroup,
+    isMulti,
+    singleSelect,
+    isSelected,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onClick = () => {},
+    value
+  } = _ref;
   return /*#__PURE__*/_jsx__default["default"](GroupItem__default["default"], {
     render: context => {
       const {
@@ -75,7 +79,7 @@ const DSMobileContextMenuItem = ({
       let showLeftAddon = isSelected;
       if (isMulti || !singleSelect) showLeftAddon = true;
       let leftAddon = leftProp || null;
-      if (isMulti) leftAddon = _Checkbox || (_Checkbox = /*#__PURE__*/_jsx__default["default"](DSCheckbox__default["default"], {
+      if (isMulti) leftAddon = _DSCheckbox || (_DSCheckbox = /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
         checked: isSelected,
         "data-testid": "leftAddon-checkbox"
       }));
@@ -99,15 +103,15 @@ const DSMobileContextMenuItem = ({
         alignItems: "center",
         justifyContent: "center",
         pl: "16px"
-      }, void 0, showLeftAddon && leftAddon), /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+      }, void 0, showLeftAddon && leftAddon), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
         height: "44px",
         pr: "xs",
         pl: !leftAddon && isGroup ? '24px' : 'xs'
-      }, void 0, label && (_Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+      }, void 0, label && (_Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
         alignItems: "center"
       }, void 0, /*#__PURE__*/_jsx__default["default"](Label, {
         "data-testid": "contextMenuItem-label"
-      }, void 0, label)))), /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+      }, void 0, label)))), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
         alignItems: !label ? 'center' : undefined
       }, void 0, _Title || (_Title = /*#__PURE__*/_jsx__default["default"](Title, {
         "data-testid": "contextMenuItem-title"

package/cjs/MobileDatePicker/Input.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 require('react');

package/cjs/MobileDatePicker/MobileDatePicker.js

@@ -5,28 +5,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var reactDesc = require('react-desc');
-var Icon = require('@elliemae/ds-basic/Icon');
-var DatePicker = require('@elliemae/ds-icons/DatePicker');
-var DSButton = require('@elliemae/ds-basic/Button');
-var DSInputGroup = require('@elliemae/ds-basic/form/InputGroup');
+var dsIcon = require('@elliemae/ds-icon');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
+var dsForm = require('@elliemae/ds-form');
 var Input = require('./Input.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var DatePicker__default = /*#__PURE__*/_interopDefaultLegacy(DatePicker);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
-var DSInputGroup__default = /*#__PURE__*/_interopDefaultLegacy(DSInputGroup);
 
 var _DatePicker;
 
-const DSMobileDatePicker = ({
-  disabled,
-  value,
-  tabIndex,
-  placeholder,
-  onChange
-}) => {
+const DSMobileDatePicker = _ref => {
+  let {
+    disabled,
+    value,
+    tabIndex,
+    placeholder,
+    onChange
+  } = _ref;
   const inputRef = React.useRef(null);
   React.useEffect(() => {
     /*
@@ -40,12 +39,12 @@ const DSMobileDatePicker = ({
   }, [inputRef.current]);
   const valueArr = value.split('-');
   const displayValue = value && "".concat(valueArr[1], " / ").concat(valueArr[2], " / ").concat(valueArr[0]);
-  return /*#__PURE__*/_jsx__default["default"](DSInputGroup__default["default"], {
+  return /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {
     rightAddon: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
       "aria-label": "Date Picker Button",
-      color: !disabled ? Icon.DSIconColors.PRIMARY : Icon.DSIconColors.NEUTRAL,
+      color: !disabled ? dsIcon.DSIconColors.PRIMARY : dsIcon.DSIconColors.NEUTRAL,
       disabled: disabled,
-      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default["default"](DatePicker__default["default"], {})),
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default["default"](dsIcons.DatePicker, {})),
       type: "button",
       buttonType: "secondary",
       onClick: () => {