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

package/esm/MobileFilterbar/FilterbarSort.js

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

package/esm/MobileFooter/Action.js

@@ -3,34 +3,37 @@ import React from 'react';
 import styled from 'styled-components';
 import { typography } from 'styled-system';
 import { color, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
-import { Grid } from '@elliemae/ds-basic/Grid';
+import { Grid } from '@elliemae/ds-grid';
 import { PropTypes, describe } from 'react-desc';
 
 const Label = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-1op229o-0"
-})(["", " ", " padding-bottom:", ";padding-top:calc( ", " / 2 );"], typography, color('neutral', '800'), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs));
+})(["", " ", " padding-bottom:", ";padding-top:calc(", " / 2);"], typography, color('neutral', '800'), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs));
 
-const DSMobileFooterAction = ({
-  label,
-  icon,
-  onClick
-}) => /*#__PURE__*/_jsx(Grid, {
-  "data-testid": "ds-mobile-footer-action",
-  rows: ['auto'].concat(label ? 'min-content' : 'none'),
-  justifyContent: "center",
-  role: "button",
-  onClick: onClick
-}, void 0, /*#__PURE__*/_jsx(Grid, {
-  justifyContent: "center",
-  alignItems: "center"
-}, void 0, /*#__PURE__*/React.cloneElement(icon, {
-  'data-testid': 'ds-mobile-footer-action-icon',
-  size: !label ? 'l' : 'm'
-})), label && /*#__PURE__*/_jsx(Grid, {
-  justifyContent: "center"
-}, void 0, /*#__PURE__*/_jsx(Label, {
-  fontSize: "11px"
-}, void 0, label)));
+const DSMobileFooterAction = _ref => {
+  let {
+    label,
+    icon,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_jsx(Grid, {
+    "data-testid": "ds-mobile-footer-action",
+    rows: ['auto'].concat(label ? 'min-content' : 'none'),
+    justifyContent: "center",
+    role: "button",
+    onClick: onClick
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
+    justifyContent: "center",
+    alignItems: "center"
+  }, void 0, /*#__PURE__*/React.cloneElement(icon, {
+    'data-testid': 'ds-mobile-footer-action-icon',
+    size: !label ? 'l' : 'm'
+  })), label && /*#__PURE__*/_jsx(Grid, {
+    justifyContent: "center"
+  }, void 0, /*#__PURE__*/_jsx(Label, {
+    fontSize: "11px"
+  }, void 0, label)));
+};
 
 const actionProps = {
   /** Action label */

package/esm/MobileFooter/Footer.js

@@ -1,19 +1,26 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.constructor.js';
+import 'core-js/modules/esnext.async-iterator.to-array.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.to-array.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import React from 'react';
 import styled from 'styled-components';
 import { border, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
-import { Grid } from '@elliemae/ds-basic/Grid';
-import DSButton from '@elliemae/ds-basic/Button';
+import { Grid } from '@elliemae/ds-grid';
+import DSButton from '@elliemae/ds-button';
 import { PropTypes, describe } from 'react-desc';
 import { DSMobileFooterText } from './Text.js';
 
 const FooterWrap = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-ls5vfg-0"
-})(["background-color:", ";border-top:", ";height:", ";"], props => props.theme.colors.neutral['000'], props => border(props.theme.colors.neutral[100]), props => `calc(${__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)} * 7)`);
+})(["background-color:", ";border-top:", ";height:", ";"], props => props.theme.colors.neutral['000'], props => border(props.theme.colors.neutral[100]), props => "calc(".concat(__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), " * 7)"));
 
-const MobileFooter = ({
-  children
-}) => {
+const MobileFooter = _ref => {
+  let {
+    children
+  } = _ref;
   const childArr = React.Children.toArray(children);
   const isButtonType = childArr[0].type === DSMobileFooterText || childArr[0].type === DSButton;
 
@@ -22,7 +29,7 @@ const MobileFooter = ({
       return childArr.length === 1 ? ['90%'] : ['45%', '45%'];
     }
 
-    return childArr.map(() => `${100 / childArr.length}%`);
+    return childArr.map(() => "".concat(100 / childArr.length, "%"));
   };
 
   return /*#__PURE__*/_jsx(FooterWrap, {}, void 0, /*#__PURE__*/_jsx(Grid, {

package/esm/MobileFooter/Text.js

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

package/esm/MobileListItem/MobileListItem.js

@@ -2,7 +2,7 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { PropTypes, describe } from 'react-desc';
 import styled from 'styled-components';
-import { Grid } from '@elliemae/ds-basic/Grid';
+import { Grid } from '@elliemae/ds-grid';
 import { truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM, border } from '@elliemae/ds-system';
 
 const StyledContainer = /*#__PURE__*/styled(Grid).withConfig({
@@ -12,14 +12,15 @@ const StyledTitle = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-n7r3qn-1"
 })(["font-weight:", ";font-size:13px;color:", ";", ""], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['800'], 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(__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));
   if (rightAddon) cols.push(__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));
@@ -30,7 +31,7 @@ const MobileListItem = ({
     pl: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
     pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
     gutter: "xs",
-    "data-testid": `${dataTestid}--${value}`
+    "data-testid": "".concat(dataTestid, "--").concat(value)
   }, void 0, leftAddon && /*#__PURE__*/_jsx(Grid, {
     alignItems: "center",
     justifyContent: "center"

package/esm/MobilePageHeader/MobilePageHeader.js

@@ -1,12 +1,13 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { useMemo, useState, useCallback } from 'react';
 import { PropTypes, describe } from 'react-desc';
 import styled from 'styled-components';
-import { TruncatedExpandableText } from '@elliemae/ds-basic/TruncatedExpandableText';
-import { Grid } from '@elliemae/ds-basic/Grid';
+import { TruncatedExpandableText } from '@elliemae/ds-truncated-expandable-text';
+import { Grid } from '@elliemae/ds-grid';
 import { truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM, border } from '@elliemae/ds-system';
-import ChevronSmallDown from '@elliemae/ds-icons/ChevronSmallDown';
-import DSButton from '@elliemae/ds-basic/Button';
+import { ChevronSmallDown } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
 import MobileSeparator from '../MobileSeparator/Separator.js';
 
 var _ChevronSmallDown;
@@ -21,23 +22,24 @@ const Label = /*#__PURE__*/styled.div.withConfig({
 })(["color:", ";", ""], props => props.theme.colors.neutral['500'], truncate());
 const Value = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1tfu1y9-3"
-})(["", " color:", ";", " margin-top:", ";"], truncate(), props => props.theme.colors.neutral['600'], props => props.withMarginRight ? `margin-right: 4px;` : '', props => props.withBreadcrumb ? '12px' : '0');
+})(["", " color:", ";", " margin-top:", ";"], truncate(), props => props.theme.colors.neutral['600'], props => props.withMarginRight ? "margin-right: 4px;" : '', props => props.withBreadcrumb ? '12px' : '0');
 const Wrapper = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1tfu1y9-4"
 })(["border-bottom:", ";"], props => 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 = useMemo(() => {
     let count = 0;

package/esm/MobileSelectList/MobileSelectList.js

@@ -1,9 +1,17 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import React, { useState, useEffect } from 'react';
 import { noop } from 'lodash';
-import { Grid } from '@elliemae/ds-basic/Grid';
-import DSTextBox from '@elliemae/ds-basic/form/TextBox';
+import { Grid } from '@elliemae/ds-grid';
+import { DSTextBox } from '@elliemae/ds-form';
 import { withTheme, op, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
 import { DSMobileTouchable } from '../MobileTouchable/MobileTouchable.js';
 import { StyledContainer, HeaderContainer, ListContainer, Footer, checked, checkbox, selectedMark } from './styled.js';
@@ -13,21 +21,22 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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(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 MobileSelectList = ({
-  open = false,
-  header = null,
-  multiple = false,
-  onChange = noop,
-  children,
-  theme,
-  zIndex = 1,
-  useSearch,
-  onSearch = noop,
-  dataTestid = 'mobile-select-list',
-  buttonFooter = null,
-  onApply = noop,
-  selecteds: initSelecteds = []
-}) => {
+const MobileSelectList = _ref => {
+  let {
+    open = false,
+    header = null,
+    multiple = false,
+    onChange = noop,
+    children,
+    theme,
+    zIndex = 1,
+    useSearch,
+    onSearch = noop,
+    dataTestid = 'mobile-select-list',
+    buttonFooter = null,
+    onApply = noop,
+    selecteds: initSelecteds = []
+  } = _ref;
   const rows = ['auto', 1];
   const [selecteds, setSelected] = useState(initSelecteds);
   const [filter, setFilter] = useState('');
@@ -82,7 +91,7 @@ const MobileSelectList = ({
         overflow: 'auto'
       }
     }, void 0, /*#__PURE__*/_jsx(ListContainer, {
-      "data-testid": `${dataTestid}--list-container`
+      "data-testid": "".concat(dataTestid, "--list-container")
     }, void 0, React.Children.map(children, child => {
       let leftAddon = null;
       let rightAddon = null;
@@ -112,7 +121,7 @@ const MobileSelectList = ({
       pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
     }, void 0, /*#__PURE__*/React.cloneElement(buttonFooter, _objectSpread(_objectSpread({}, buttonFooter.props), {}, {
       containerProps: {
-        'data-testid': `${dataTestid}--btn`
+        'data-testid': "".concat(dataTestid, "--btn")
       },
       buttonType: 'primary',
       size: 'l',

package/esm/MobileSelectList/styled.js

@@ -2,9 +2,9 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { noop } from 'lodash';
 import styled from 'styled-components';
-import { Grid } from '@elliemae/ds-basic/Grid';
-import DSCheckbox from '@elliemae/ds-basic/form/Checkbox';
-import DSCheckmark from '@elliemae/ds-icons/Checkmark';
+import { Grid } from '@elliemae/ds-grid';
+import { DSCheckbox } from '@elliemae/ds-form';
+import { Checkmark } from '@elliemae/ds-icons';
 import { border } from '@elliemae/ds-system';
 import { DSMobileTouchable } from '../MobileTouchable/MobileTouchable.js';
 import { DSMobileListItem } from '../MobileListItem/MobileListItem.js';
@@ -35,7 +35,7 @@ const checked = /*#__PURE__*/_jsx(DSCheckbox, {
     pointerEvents: 'none'
   }
 });
-const selectedMark = /*#__PURE__*/_jsx(DSCheckmark, {
+const selectedMark = /*#__PURE__*/_jsx(Checkmark, {
   color: ['brand-primary', 600]
 });
 

package/esm/MobileSeparator/Separator.js

@@ -1,8 +1,13 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
 import { PropTypes, describe } from 'react-desc';
 import styled from 'styled-components';
-import { Grid } from '@elliemae/ds-basic/Grid';
+import { Grid } from '@elliemae/ds-grid';
 import { jsx } from 'react/jsx-runtime';
 
 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; }
@@ -10,22 +15,29 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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(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 Separator = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-lje3kq-0"
-})(["border-top:", ";border-left:", ";"], ({
-  theme,
-  color,
-  borderType
-}) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`, ({
-  theme,
-  color,
-  borderType
-}) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`);
+})(["border-top:", ";border-left:", ";"], _ref => {
+  let {
+    theme,
+    color,
+    borderType
+  } = _ref;
+  return "".concat(theme.colors[color[0]][color[1]], " 1px ").concat(borderType);
+}, _ref2 => {
+  let {
+    theme,
+    color,
+    borderType
+  } = _ref2;
+  return "".concat(theme.colors[color[0]][color[1]], " 1px ").concat(borderType);
+});
 
-const MobileSeparator = ({
-  color = ['neutral', '800'],
-  direction = 'horizontal',
-  type = 'solid',
-  margin = 'xs'
-}) => {
+const MobileSeparator = _ref3 => {
+  let {
+    color = ['neutral', '800'],
+    direction = 'horizontal',
+    type = 'solid',
+    margin = 'xs'
+  } = _ref3;
   const orientation = direction === 'vertical' ? 'height' : 'width';
   const xORy = direction === 'vertical' ? 'mx' : 'my';
   const styles = {

package/esm/MobileTimePicker/Input.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import 'react';

package/esm/MobileTimePicker/MobileTimePicker.js

@@ -1,21 +1,22 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useRef, useEffect, useMemo } from 'react';
 import { PropTypes, describe } from 'react-desc';
-import { DSIconColors } from '@elliemae/ds-basic/Icon';
-import RecentDocuments from '@elliemae/ds-icons/RecentDocuments';
-import DSButton from '@elliemae/ds-basic/Button';
-import DSInputGroup from '@elliemae/ds-basic/form/InputGroup';
+import { DSIconColors } from '@elliemae/ds-icon';
+import { RecentDocuments } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import { DSInputGroup } from '@elliemae/ds-form';
 import { Input } from './Input.js';
 
 var _RecentDocuments;
 
-const DSMobileTimePicker = ({
-  disabled,
-  value,
-  tabIndex,
-  placeholder,
-  onChange
-}) => {
+const DSMobileTimePicker = _ref => {
+  let {
+    disabled,
+    value,
+    tabIndex,
+    placeholder,
+    onChange
+  } = _ref;
   const inputRef = useRef(null);
   const valueArr = value.split(':');
   useEffect(() => {
@@ -32,7 +33,7 @@ const DSMobileTimePicker = ({
     if (!value || !valueArr[0] || !valueArr[1]) return '';
     const ampm = valueArr[0] >= 12 ? 'pm' : 'am';
     const h = valueArr[0] > 12 ? valueArr[0] - 12 : valueArr[0];
-    return `${h} : ${valueArr[1]} ${ampm}`;
+    return "".concat(h, " : ").concat(valueArr[1], " ").concat(ampm);
   }, [value]);
   return /*#__PURE__*/_jsx(DSInputGroup, {
     rightAddon: /*#__PURE__*/_jsx(DSButton, {

package/esm/MobileTimePicker/MobileTimePicker.stories.js

@@ -1,6 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import { Grid } from '@elliemae/ds-basic/Grid';
+import { Grid } from '@elliemae/ds-grid';
 import { addDefaultMobileView, PATH_MOBILE_TIME_PICKER, useMobileTimePicker } from '@elliemae/ds-devutils';
 import { DSMobileTimePicker } from './MobileTimePicker.js';
 

package/esm/MobileTouchable/MobileTouchable.js

@@ -1,9 +1,15 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useState, useCallback } from 'react';
 import { noop } from 'lodash';
 import styled from 'styled-components';
-import { Grid } from '@elliemae/ds-basic/Grid';
+import { Grid } from '@elliemae/ds-grid';
 import { withTheme } from '@elliemae/ds-system';
 import { jsx } from 'react/jsx-runtime';
 

package/esm/Modal/Modal.js

@@ -1,11 +1,16 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { PropTypes, describe } from 'react-desc';
 import { noop } from 'lodash';
-import { Grid } from '@elliemae/ds-basic/Grid';
-import WarningTriangle from '@elliemae/ds-icons/WarningTriangle';
-import DSButton from '@elliemae/ds-basic/Button';
+import { Grid } from '@elliemae/ds-grid';
+import { WarningTriangle } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
 import { useTheme } from '@elliemae/ds-system';
 import { BodyFix, BackShadow, ModalPosition, ModalBox, ModalIcon, ModalTitle, ModalDescription } from './styled.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -16,22 +21,23 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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(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 Modal = ({
-  zIndex = 1,
-  title = '',
-  description = '',
-  onClose = noop,
-  showSecondaryAction = true,
-  secondaryActionProps = {
-    onClick: noop,
-    labelText: 'Cancel'
-  },
-  primaryActionProps = {
-    onClick: noop,
-    labelText: 'Accept'
-  },
-  isOpen = false
-}) => {
+const Modal = _ref => {
+  let {
+    zIndex = 1,
+    title = '',
+    description = '',
+    onClose = noop,
+    showSecondaryAction = true,
+    secondaryActionProps = {
+      onClick: noop,
+      labelText: 'Cancel'
+    },
+    primaryActionProps = {
+      onClick: noop,
+      labelText: 'Accept'
+    },
+    isOpen = false
+  } = _ref;
   const theme = useTheme();
   if (!isOpen) return null;
   return /*#__PURE__*/jsxs(Fragment, {
@@ -44,7 +50,7 @@ const Modal = ({
       zIndex: zIndex,
       cols: ['auto']
     }, void 0, /*#__PURE__*/_jsx(ModalBox, {
-      maxHeight: `${window.innerHeight * 0.75}px`,
+      maxHeight: "".concat(window.innerHeight * 0.75, "px"),
       rows: [1, '80px'],
       style: {
         overflow: 'hidden'
@@ -79,7 +85,7 @@ const Modal = ({
       justifyContent: "center",
       alignItems: "center",
       style: {
-        borderTop: `1px solid ${theme.colors.neutral[100]}`
+        borderTop: "1px solid ".concat(theme.colors.neutral[100])
       }
     }, void 0, showSecondaryAction && /*#__PURE__*/jsx(DSButton, _objectSpread(_objectSpread({}, secondaryActionProps), {}, {
       labelText: secondaryActionProps.labelText || ' Cancel',

package/esm/Modal/styled.js

@@ -1,12 +1,10 @@
-import { Grid } from '@elliemae/ds-basic/Grid';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { Grid } from '@elliemae/ds-grid';
 import styled from 'styled-components';
 import { createGlobalStyle } from '@elliemae/ds-system';
 
-const BodyFix = createGlobalStyle`
-    body{
-        ${props => props.isOpen ? 'overflow: hidden;' : ''};
-    }
-`;
+var _templateObject;
+const BodyFix = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    body{\n        ", ";\n    }\n"])), props => props.isOpen ? 'overflow: hidden;' : '');
 const ModalBox = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-cke90o-0"
 })(["width:100%;background:", ";max-height:", ";box-shadow:0 2px 4px 0 rgba(0,0,0,0.5);"], props => props.theme.colors.neutral['000'], props => props.maxHeight);