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

package/cjs/MobileDropdownMenu/MobileDropdownInput.js

@@ -2,12 +2,17 @@
 
 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 _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
-var ChevronDownIcon = require('@elliemae/ds-icons/ChevronDown');
+var dsIcons = require('@elliemae/ds-icons');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -15,7 +20,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
 
 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; }
 
@@ -29,21 +33,27 @@ const MobileDropdownInputWrap = /*#__PURE__*/styled__default["default"].span.wit
 const CaretWrap = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-1rsc1yn-2"
 })(["width:32px;height:32px;position:absolute;right:0;top:0;display:flex;justify-content:center;align-items:center;"]);
-const Caret = ({
-  onClick
-}) => /*#__PURE__*/_jsx__default["default"](CaretWrap, {
-  onClick: onClick
-}, void 0, /*#__PURE__*/_jsx__default["default"](ChevronDownIcon__default["default"], {
-  color: ['brand-primary', '600']
-}));
-const DSMobileDropdownTriggerInput = ({
-  inputProps,
-  caretProps
-}) => /*#__PURE__*/_jsx__default["default"](MobileDropdownInputWrap, {
-  "data-testid": "ds-mobile-ddwn-menu"
-}, void 0, /*#__PURE__*/jsxRuntime.jsx(MobileDropdownInput, _objectSpread(_objectSpread({}, inputProps), {}, {
-  readOnly: true
-})), /*#__PURE__*/jsxRuntime.jsx(Caret, _objectSpread({}, caretProps)));
+const Caret = _ref => {
+  let {
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](CaretWrap, {
+    onClick: onClick
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
+    color: ['brand-primary', '600']
+  }));
+};
+const DSMobileDropdownTriggerInput = _ref2 => {
+  let {
+    inputProps,
+    caretProps
+  } = _ref2;
+  return /*#__PURE__*/_jsx__default["default"](MobileDropdownInputWrap, {
+    "data-testid": "ds-mobile-ddwn-menu"
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(MobileDropdownInput, _objectSpread(_objectSpread({}, inputProps), {}, {
+    readOnly: true
+  })), /*#__PURE__*/jsxRuntime.jsx(Caret, _objectSpread({}, caretProps)));
+};
 
 exports.Caret = Caret;
 exports.DSMobileDropdownTriggerInput = DSMobileDropdownTriggerInput;

package/cjs/MobileDropdownMenu/MobileDropdownMenu.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 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');
 var React = require('react');
 var reactDesc = require('react-desc');
 var MobileContextMenu = require('../MobileContextMenu/MobileContextMenu.js');
@@ -17,22 +19,23 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const DSMobileDropdownMenu = ({
-  placeholder,
-  options = [],
-  title,
-  value,
-  itemsProps = {
-    label: undefined,
-    leftProp: undefined,
-    isGroup: false,
-    isMulti: false,
-    singleSelect: false,
-    isItemSelected: () => false,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onClick: () => {}
-  }
-}) => {
+const DSMobileDropdownMenu = _ref => {
+  let {
+    placeholder,
+    options = [],
+    title,
+    value,
+    itemsProps = {
+      label: undefined,
+      leftProp: undefined,
+      isGroup: false,
+      isMulti: false,
+      singleSelect: false,
+      isItemSelected: () => false,
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onClick: () => {}
+    }
+  } = _ref;
   const [menuOpen, setMenuOpen] = React.useState(false);
   const inputRef = React.useRef(null);
   const inputProps = React__default["default"].useMemo(() => ({

package/cjs/MobileEmtpyState/MobileEmptyState.js

@@ -6,13 +6,12 @@ var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
 var styled = require('styled-components');
 var reactDesc = require('react-desc');
-var Search = require('@elliemae/ds-icons/Search');
+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 Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
 
 const Wrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1v2x6kj-0"
@@ -21,12 +20,15 @@ const Label = /*#__PURE__*/styled__default["default"].p.withConfig({
   componentId: "sc-1v2x6kj-1"
 })(["color:", ";font-size:", ";font-weight:", ";min-width:132px;"], props => props.theme.colors.neutral['600'], props => props.theme.space.xs, props => props.theme.fontWeights.semibold);
 
-const DSMobileEmptyState = ({
-  label = 'No search results found.'
-}) => /*#__PURE__*/_jsx__default["default"](Wrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](Search__default["default"], {
-  size: "xxl",
-  color: ['neutral', 400]
-}), /*#__PURE__*/_jsx__default["default"](Label, {}, void 0, label));
+const DSMobileEmptyState = _ref => {
+  let {
+    label = 'No search results found.'
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](Wrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.Search, {
+    size: "xxl",
+    color: ['neutral', 400]
+  }), /*#__PURE__*/_jsx__default["default"](Label, {}, void 0, label));
+};
 
 const props = {
   /** empty state label */

package/cjs/MobileFilterbar/Filterbar.js

@@ -7,7 +7,7 @@ require('react');
 var styled = require('styled-components');
 var reactDesc = require('react-desc');
 var dsSystem = require('@elliemae/ds-system');
-var Grid = require('@elliemae/ds-basic/Grid');
+var dsGrid = require('@elliemae/ds-grid');
 var Separator$1 = require('../MobileSeparator/Separator.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -22,15 +22,18 @@ const Separator = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-14ysw84-1"
 })(["& > *{margin:0;}"]);
 
-const DSMobileFilterbar = ({
-  children
-}) => /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
-  rows: ['auto', 'auto'],
-  "data-testid": "filter-bar-wrapper"
-}, void 0, /*#__PURE__*/_jsx__default["default"](Bar, {}, void 0, children), /*#__PURE__*/_jsx__default["default"](Separator, {}, void 0, /*#__PURE__*/_jsx__default["default"](Separator$1["default"], {
-  margin: "xxs",
-  color: ['neutral', '300']
-})));
+const DSMobileFilterbar = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    rows: ['auto', 'auto'],
+    "data-testid": "filter-bar-wrapper"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Bar, {}, void 0, children), /*#__PURE__*/_jsx__default["default"](Separator, {}, void 0, /*#__PURE__*/_jsx__default["default"](Separator$1["default"], {
+    margin: "xxs",
+    color: ['neutral', '300']
+  })));
+};
 
 const filterbarProps = {
   children: reactDesc.PropTypes.element.description('FilterBar Items').isRequired

package/cjs/MobileFilterbar/FilterbarItem.js

@@ -5,23 +5,26 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
 var reactDesc = require('react-desc');
-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);
 
-const DSMobileFilterbarItem = ({
-  children,
-  onClick
-}) => /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
-  "data-testid": "filter-bar-item-wrapper",
-  cols: ['min-content'],
-  pr: "xxs",
-  pt: "xxs",
-  role: "button",
-  onClick: onClick
-}, void 0, children);
+const DSMobileFilterbarItem = _ref => {
+  let {
+    children,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    "data-testid": "filter-bar-item-wrapper",
+    cols: ['min-content'],
+    pr: "xxs",
+    pt: "xxs",
+    role: "button",
+    onClick: onClick
+  }, void 0, children);
+};
 
 const filterbarItemProps = {
   children: reactDesc.PropTypes.element.description('FilterBar Items').isRequired,

package/cjs/MobileFilterbar/FilterbarSort.js

@@ -6,7 +6,7 @@ var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
 var reactDesc = require('react-desc');
 var styled = require('styled-components');
-var Grid = require('@elliemae/ds-basic/Grid');
+var dsGrid = require('@elliemae/ds-grid');
 var Separator$1 = require('../MobileSeparator/Separator.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -19,19 +19,22 @@ const Separator = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-103uq0b-0"
 })(["& > *{margin-left:0;}"]);
 
-const DSMobileFilterbarSort = ({
-  children
-}) => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-  children: [children, /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
-    pb: "xxs",
-    pt: "xxs",
-    cols: ['min-content']
-  }, void 0, /*#__PURE__*/_jsx__default["default"](Separator, {}, void 0, /*#__PURE__*/_jsx__default["default"](Separator$1["default"], {
-    margin: "xxs",
-    direction: "vertical",
-    color: ['neutral', '300']
-  })))]
-});
+const DSMobileFilterbarSort = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [children, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+      pb: "xxs",
+      pt: "xxs",
+      cols: ['min-content']
+    }, void 0, /*#__PURE__*/_jsx__default["default"](Separator, {}, void 0, /*#__PURE__*/_jsx__default["default"](Separator$1["default"], {
+      margin: "xxs",
+      direction: "vertical",
+      color: ['neutral', '300']
+    })))]
+  });
+};
 
 const filterbarSortProps = {
   children: reactDesc.PropTypes.element.description('FilterBar Sort Item').isRequired

package/cjs/MobileFooter/Action.js

@@ -7,7 +7,7 @@ var React = require('react');
 var styled = require('styled-components');
 var styledSystem = require('styled-system');
 var dsSystem = require('@elliemae/ds-system');
-var Grid = require('@elliemae/ds-basic/Grid');
+var dsGrid = require('@elliemae/ds-grid');
 var reactDesc = require('react-desc');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -18,29 +18,32 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const Label = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-1op229o-0"
-})(["", " ", " padding-bottom:", ";padding-top:calc( ", " / 2 );"], styledSystem.typography, dsSystem.color('neutral', '800'), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs));
-
-const DSMobileFooterAction = ({
-  label,
-  icon,
-  onClick
-}) => /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
-  "data-testid": "ds-mobile-footer-action",
-  rows: ['auto'].concat(label ? 'min-content' : 'none'),
-  justifyContent: "center",
-  role: "button",
-  onClick: onClick
-}, void 0, /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
-  justifyContent: "center",
-  alignItems: "center"
-}, void 0, /*#__PURE__*/React__default["default"].cloneElement(icon, {
-  'data-testid': 'ds-mobile-footer-action-icon',
-  size: !label ? 'l' : 'm'
-})), label && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
-  justifyContent: "center"
-}, void 0, /*#__PURE__*/_jsx__default["default"](Label, {
-  fontSize: "11px"
-}, void 0, label)));
+})(["", " ", " padding-bottom:", ";padding-top:calc(", " / 2);"], styledSystem.typography, dsSystem.color('neutral', '800'), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs));
+
+const DSMobileFooterAction = _ref => {
+  let {
+    label,
+    icon,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    "data-testid": "ds-mobile-footer-action",
+    rows: ['auto'].concat(label ? 'min-content' : 'none'),
+    justifyContent: "center",
+    role: "button",
+    onClick: onClick
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    justifyContent: "center",
+    alignItems: "center"
+  }, void 0, /*#__PURE__*/React__default["default"].cloneElement(icon, {
+    'data-testid': 'ds-mobile-footer-action-icon',
+    size: !label ? 'l' : 'm'
+  })), label && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    justifyContent: "center"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Label, {
+    fontSize: "11px"
+  }, void 0, label)));
+};
 
 const actionProps = {
   /** Action label */

package/cjs/MobileFooter/Footer.js

@@ -3,11 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.constructor.js');
+require('core-js/modules/esnext.async-iterator.to-array.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.to-array.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
-var Grid = require('@elliemae/ds-basic/Grid');
-var DSButton = require('@elliemae/ds-basic/Button');
+var dsGrid = require('@elliemae/ds-grid');
+var DSButton = require('@elliemae/ds-button');
 var reactDesc = require('react-desc');
 var Text = require('./Text.js');
 
@@ -18,13 +24,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
-const FooterWrap = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
+const FooterWrap = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-ls5vfg-0"
 })(["background-color:", ";border-top:", ";height:", ";"], props => props.theme.colors.neutral['000'], props => dsSystem.border(props.theme.colors.neutral[100]), props => "calc(".concat(dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), " * 7)"));
 
-const MobileFooter = ({
-  children
-}) => {
+const MobileFooter = _ref => {
+  let {
+    children
+  } = _ref;
   const childArr = React__default["default"].Children.toArray(children);
   const isButtonType = childArr[0].type === Text.DSMobileFooterText || childArr[0].type === DSButton__default["default"];
 
@@ -36,7 +43,7 @@ const MobileFooter = ({
     return childArr.map(() => "".concat(100 / childArr.length, "%"));
   };
 
-  return /*#__PURE__*/_jsx__default["default"](FooterWrap, {}, void 0, /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  return /*#__PURE__*/_jsx__default["default"](FooterWrap, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: setCols(),
     gutter: isButtonType ? 'xs' : undefined,
     justifyContent: "center",
@@ -44,7 +51,7 @@ const MobileFooter = ({
   }, void 0, childArr.map((c, i) =>
   /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
-  _jsx__default["default"](Grid.Grid, {}, i, c))));
+  _jsx__default["default"](dsGrid.Grid, {}, i, c))));
 };
 
 const footerProps = {

package/cjs/MobileFooter/Text.js

@@ -17,9 +17,12 @@ const Text = /*#__PURE__*/styled__default["default"].p.withConfig({
   componentId: "sc-1v0cqsw-0"
 })(["margin:auto 0;", " ", " ", ""], dsSystem.truncate(), dsSystem.textStyle('body'), dsSystem.color('neutral', '800'));
 
-const DSMobileFooterText = ({
-  children
-}) => /*#__PURE__*/_jsx__default["default"](Text, {}, void 0, children);
+const DSMobileFooterText = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](Text, {}, void 0, children);
+};
 
 const props = {
   children: reactDesc.PropTypes.string.isRequired.description('Children')

package/cjs/MobileListItem/MobileListItem.js

@@ -6,7 +6,7 @@ var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
 var reactDesc = require('react-desc');
 var styled = require('styled-components');
-var Grid = require('@elliemae/ds-basic/Grid');
+var dsGrid = require('@elliemae/ds-grid');
 var dsSystem = require('@elliemae/ds-system');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -14,21 +14,22 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledContainer = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
+const StyledContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-n7r3qn-0"
 })(["background:", ";border-bottom:", ";"], props => props.theme.colors.neutral['000'], props => dsSystem.border(props.theme.colors.neutral['300']));
 const StyledTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-n7r3qn-1"
 })(["font-weight:", ";font-size:13px;color:", ";", ""], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['800'], dsSystem.truncate());
 
-const MobileListItem = ({
-  leftAddon = null,
-  rightAddon = null,
-  title = '',
-  value = '',
-  dataTestid = 'mobile-list-item',
-  theme
-}) => {
+const MobileListItem = _ref => {
+  let {
+    leftAddon = null,
+    rightAddon = null,
+    title = '',
+    value = '',
+    dataTestid = 'mobile-list-item',
+    theme
+  } = _ref;
   const cols = [1];
   if (leftAddon) cols.unshift(dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));
   if (rightAddon) cols.push(dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));
@@ -40,12 +41,12 @@ const MobileListItem = ({
     pr: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
     gutter: "xs",
     "data-testid": "".concat(dataTestid, "--").concat(value)
-  }, void 0, leftAddon && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  }, void 0, leftAddon && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     alignItems: "center",
     justifyContent: "center"
-  }, void 0, leftAddon), /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  }, void 0, leftAddon), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     alignItems: "center"
-  }, void 0, /*#__PURE__*/_jsx__default["default"](StyledTitle, {}, void 0, title)), rightAddon && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](StyledTitle, {}, void 0, title)), rightAddon && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     alignItems: "center",
     justifyContent: "center"
   }, void 0, rightAddon));

package/cjs/MobilePageHeader/MobilePageHeader.js

@@ -7,11 +7,11 @@ require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactDesc = require('react-desc');
 var styled = require('styled-components');
-var TruncatedExpandableText = require('@elliemae/ds-basic/TruncatedExpandableText');
-var Grid = require('@elliemae/ds-basic/Grid');
+var dsTruncatedExpandableText = require('@elliemae/ds-truncated-expandable-text');
+var dsGrid = require('@elliemae/ds-grid');
 var dsSystem = require('@elliemae/ds-system');
-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');
 var Separator = require('../MobileSeparator/Separator.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -19,11 +19,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var ChevronSmallDown__default = /*#__PURE__*/_interopDefaultLegacy(ChevronSmallDown);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
 var _ChevronSmallDown;
-const StyledTitle = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
+const StyledTitle = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-1tfu1y9-0"
 })(["font-size:22px;font-weight:", ";color:", ";min-height:", ";padding-top:", ";"], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['700'], props => props.withBreadcrumb ? 'auto' : '44px', props => props.withBreadcrumb ? '0' : '6px');
 const StyledBreadCrumb = /*#__PURE__*/styled__default["default"].div.withConfig({
@@ -35,22 +34,23 @@ const Label = /*#__PURE__*/styled__default["default"].div.withConfig({
 const Value = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1tfu1y9-3"
 })(["", " color:", ";", " margin-top:", ";"], dsSystem.truncate(), props => props.theme.colors.neutral['600'], props => props.withMarginRight ? "margin-right: 4px;" : '', props => props.withBreadcrumb ? '12px' : '0');
-const Wrapper = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
+const Wrapper = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-1tfu1y9-4"
 })(["border-bottom:", ";"], props => dsSystem.border(props.theme.colors.neutral['300']));
 
-const MobilePageHeader = ({
-  pageTitle = null,
-  contextMenu = null,
-  firstAction = null,
-  secondAction = null,
-  backArrow = null,
-  breadCrumb = null,
-  onOpenContextMenu = () => null,
-  value,
-  label,
-  theme
-}) => {
+const MobilePageHeader = _ref => {
+  let {
+    pageTitle = null,
+    contextMenu = null,
+    firstAction = null,
+    secondAction = null,
+    backArrow = null,
+    breadCrumb = null,
+    onOpenContextMenu = () => null,
+    value,
+    label,
+    theme
+  } = _ref;
   const hasValue = value === 0 || value;
   const countActions = React.useMemo(() => {
     let count = 0;
@@ -63,10 +63,10 @@ const MobilePageHeader = ({
     setOpen(!open);
   }, [open]);
 
-  const separator = /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  const separator = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     height: "32px",
     alignItems: "center"
-  }, void 0, /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     height: "24px"
   }, void 0, /*#__PURE__*/_jsx__default["default"](Separator["default"], {
     direction: "vertical",
@@ -86,40 +86,40 @@ const MobilePageHeader = ({
     alignItems: "flex-start",
     width: "100%",
     "data-testid": "page-header-wrapper"
-  }, void 0, /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     alignItems: "flex-start",
     justifyContent: "flex-start",
     cols: cols2
-  }, void 0, /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: backArrow ? ['auto', 1] : [1],
     alignItems: "flex-start",
     pr: countActions === 0 && !hasValue && !label ? dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : 0
-  }, void 0, backArrow && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  }, void 0, backArrow && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     height: breadCrumb ? '56px' : '44px',
     alignItems: "center"
-  }, void 0, backArrow), /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  }, void 0, backArrow), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     flexGrow: 0,
     pt: !breadCrumb ? 0 : theme.space.xxs
-  }, void 0, /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: ['auto', 'auto'],
     alignItems: "flex-start"
-  }, void 0, /*#__PURE__*/_jsx__default["default"](Grid.Grid, {}, void 0, breadCrumb && /*#__PURE__*/_jsx__default["default"](StyledBreadCrumb, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, breadCrumb && /*#__PURE__*/_jsx__default["default"](StyledBreadCrumb, {
     "data-testid": "page-header-breadcrum"
   }, void 0, breadCrumb), /*#__PURE__*/_jsx__default["default"](StyledTitle, {
     maxWidth: "100%",
     alignItems: "flex-start",
     withBreadcrumb: !!breadCrumb,
     "data-testid": "page-header-title"
-  }, void 0, /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     pt: breadCrumb ? 0 : theme.space.xxxs
-  }, void 0, /*#__PURE__*/_jsx__default["default"](TruncatedExpandableText.TruncatedExpandableText, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedExpandableText.TruncatedExpandableText, {
     value: pageTitle
-  })))), contextMenu && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  })))), contextMenu && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     alignItems: "center",
     mt: breadCrumb ? '20px' : '8px'
   }, void 0, /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
     buttonType: "text",
-    icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](ChevronSmallDown__default["default"], {})),
+    icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})),
     size: "s",
     onClick: () => {
       handleContext();
@@ -134,24 +134,24 @@ const MobilePageHeader = ({
       if (contextMenu.props.onChange) contextMenu.props.onChange(event, item);
       handleContext();
     }
-  }))))), hasValue && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  }))))), hasValue && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     height: breadCrumb ? '56px' : '44px',
     alignItems: "center",
     cols: ['auto', 'auto']
   }, void 0, separator, /*#__PURE__*/_jsx__default["default"](Value, {
     withMarginRight: !!label,
     "data-testid": "page-header-value"
-  }, void 0, value)), label && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  }, void 0, value)), label && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     height: breadCrumb ? '56px' : '44px',
     alignItems: "center"
   }, void 0, /*#__PURE__*/_jsx__default["default"](Label, {
     withBreadcrumb: !!breadCrumb,
     "data-testid": "page-header-label"
-  }, void 0, label))), countActions > 0 && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  }, void 0, label))), countActions > 0 && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     height: breadCrumb ? '56px' : '44px',
     alignItems: "center",
     cols: countActions === 1 ? ['auto'] : ['auto', 'auto', 'auto']
-  }, void 0, firstAction && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {}, void 0, firstAction), countActions === 2 && separator, secondAction && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {}, void 0, secondAction)));
+  }, void 0, firstAction && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, firstAction), countActions === 2 && separator, secondAction && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, secondAction)));
 };
 
 const pageHeaderProps = {