@elliemae/ds-mobile 2.0.0-alpha.10 → 2.0.0-alpha.14

package/esm/GroupBox/GroupBox.js

@@ -4,23 +4,24 @@ import { PropTypes, describe } from 'react-desc';
 import { times } from 'lodash';
 import { truncate } from '@elliemae/ds-system';
 import styled from 'styled-components';
-import { Grid } from '@elliemae/ds-basic';
+import { Grid } from '@elliemae/ds-grid';
 
 const Title = /*#__PURE__*/styled.h3.withConfig({
   componentId: "sc-1g87w66-0"
 })(["font-size:14px;margin:0;", " color:", ";line-height:inherit;text-transform:capitalize;font-weight:", ";"], truncate(), props => props.theme.colors.neutral['700'], props => props.theme.fontWeights.semibold);
 const GroupBox = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1g87w66-1"
-})(["background:", ";border-top:", ";"], props => props.background === 'grey' ? props.theme.colors.neutral['050'] : props.theme.colors.neutral['000'], props => props.borderTop ? `1px solid ${props.theme.colors.neutral['100']}` : 'none');
+})(["background:", ";border-top:", ";"], props => props.background === 'grey' ? props.theme.colors.neutral['050'] : props.theme.colors.neutral['000'], props => props.borderTop ? "1px solid ".concat(props.theme.colors.neutral['100']) : 'none');
 
-const DSGroupBox = ({
-  children,
-  title,
-  background = 'grey',
-  headerLevel = 3,
-  actionsRight = [],
-  borderTop
-}) => {
+const DSGroupBox = _ref => {
+  let {
+    children,
+    title,
+    background = 'grey',
+    headerLevel = 3,
+    actionsRight = [],
+    borderTop
+  } = _ref;
   const rows = ['auto'];
   const hasActions = actionsRight.length > 0;
   if (hasActions) rows.push('auto');
@@ -34,7 +35,7 @@ const DSGroupBox = ({
     pl: "xs",
     pr: hasActions ? 'xxs' : 'xs'
   }, void 0, /*#__PURE__*/_jsx(Title, {
-    as: `h${headerLevel}`
+    as: "h".concat(headerLevel)
   }, void 0, title), hasActions && /*#__PURE__*/_jsx(Grid, {
     cols: times(actionsRight.length, () => 'auto'),
     justifySelf: "end"

package/esm/InfiniteLoader/Infiniteloader.js

@@ -1,16 +1,18 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useRef, useEffect } from 'react';
 import { PropTypes, describe } from 'react-desc';
-import { Grid } from '@elliemae/ds-basic';
+import { Grid } from '@elliemae/ds-grid';
 import { Loader } from './Loader.js';
 import { jsx } from 'react/jsx-runtime';
 
-const InfiniteLoader = ({
-  isFetching,
-  fetchData,
-  children,
-  height = window.innerHeight
-}) => {
+const InfiniteLoader = _ref => {
+  let {
+    isFetching,
+    fetchData,
+    children,
+    height = window.innerHeight
+  } = _ref;
+
   const callback = entries => {
     const {
       isIntersecting

package/esm/InfiniteLoader/Loader.js

@@ -1,16 +1,19 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import DSIndeterminateProgressIndicator from '@elliemae/ds-basic/IndeterminateProgressIndicator';
+import DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';
 import { LoaderBox } from './styled.js';
 
 var _DSIndeterminateProgr;
-const Loader = ({
-  isOpen
-}) => /*#__PURE__*/_jsx(LoaderBox, {
-  className: isOpen && 'opened'
-}, void 0, _DSIndeterminateProgr || (_DSIndeterminateProgr = /*#__PURE__*/_jsx(DSIndeterminateProgressIndicator, {
-  processing: true,
-  title: "Loading"
-})));
+const Loader = _ref => {
+  let {
+    isOpen
+  } = _ref;
+  return /*#__PURE__*/_jsx(LoaderBox, {
+    className: isOpen && 'opened'
+  }, void 0, _DSIndeterminateProgr || (_DSIndeterminateProgr = /*#__PURE__*/_jsx(DSIndeterminateProgressIndicator, {
+    processing: true,
+    title: "Loading"
+  })));
+};
 
 export { Loader };

package/esm/InfiniteLoader/VirtualizedInfiniteLoader.js

@@ -1,19 +1,21 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState } from 'react';
-import { describe } from 'react-desc';
+import { PropTypes, describe } from 'react-desc';
 import RWInfiniteLoader from 'react-window-infinite-loader';
 import { VariableSizeList } from 'react-window';
 import { jsx } from 'react/jsx-runtime';
 
-const VirtualizedInfiniteLoader = ({
-  moreItemsLoading = false,
-  hasNextPage = false,
-  isItemLoaded = () => true,
-  loadMoreItems,
-  getItemSize = () => 38,
-  height,
-  item: Row
-}) => {
+const VirtualizedInfiniteLoader = _ref => {
+  let {
+    moreItemsLoading = false,
+    hasNextPage = false,
+    isItemLoaded = () => true,
+    loadMoreItems,
+    getItemSize = () => 38,
+    height,
+    item: Row
+  } = _ref;
   const [itemCount, setItemCount] = useState(10);
 
   const loadMore = (startIndex, stopIndex) => {
@@ -29,19 +31,22 @@ const VirtualizedInfiniteLoader = ({
     isItemLoaded: isItemLoaded,
     itemCount: itemCount,
     loadMoreItems: loadMore
-  }, void 0, ({
-    onItemsRendered,
-    ref
-  }) => /*#__PURE__*/jsx(VariableSizeList, {
-    className: "List",
-    height: height,
-    itemCount: itemCount,
-    itemSize: getItemSize,
-    onItemsRendered: onItemsRendered,
-    ref: ref,
-    width: "100%",
-    children: Row
-  })), moreItemsLoading && /*#__PURE__*/_jsx("div", {
+  }, void 0, _ref2 => {
+    let {
+      onItemsRendered,
+      ref
+    } = _ref2;
+    return /*#__PURE__*/jsx(VariableSizeList, {
+      className: "List",
+      height: height,
+      itemCount: itemCount,
+      itemSize: getItemSize,
+      onItemsRendered: onItemsRendered,
+      ref: ref,
+      width: "100%",
+      children: Row
+    });
+  }), moreItemsLoading && /*#__PURE__*/_jsx("div", {
     style: {
       position: 'absolute',
       bottom: 0,
@@ -51,6 +56,29 @@ const VirtualizedInfiniteLoader = ({
   }, void 0, "Loading"));
 };
 
+const listProps = {
+  /** Function responsible for tracking the loaded state of each item. */
+  isItemLoaded: PropTypes.bool.description('Function responsible for tracking the loaded state of each item.'),
+
+  /**  Callback to be invoked when more rows must be loaded. It should return a Promise that is resolved once all data has finished loading. */
+  loadMoreItems: PropTypes.func.description('Callback to be invoked when more rows must be loaded. It should return a Promise that is resolved once all data has finished loading.'),
+
+  /** callback to get row item size */
+  getItemSize: PropTypes.func.description('callback to get row item size'),
+
+  /** height for the list */
+  height: PropTypes.number.description('height for the list'),
+
+  /** flag to know if virtual list should be on loading state */
+  moreItemsLoading: PropTypes.bool.description('flag to know if virtual list s'),
+
+  /** Row item to render */
+  item: PropTypes.element.description('Row item to render'),
+
+  /** flag for virtualized list */
+  hasNextPage: PropTypes.bool.description('flag for virtualized list')
+};
 const VirtualizedInfiniteLoaderWithSchema = describe(VirtualizedInfiniteLoader);
+VirtualizedInfiniteLoaderWithSchema.propTypes = listProps;
 
 export { VirtualizedInfiniteLoader, VirtualizedInfiniteLoaderWithSchema };

package/esm/LoadingPage/Page.js

@@ -1,10 +1,19 @@
 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.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.filter.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 React, { useState, useRef, useEffect } from 'react';
 import { withTheme } from '@elliemae/ds-system';
 import { get } from 'lodash';
 import styled from 'styled-components';
-import Backdrop from '@elliemae/ds-basic/Backdrop';
+import Backdrop from '@elliemae/ds-backdrop';
 import { jsxs, Fragment } 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; }
@@ -12,18 +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 LoadingPageLoader = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-wx0z8k-0"
-})(["", ";z-index:", ";top:25%;left:15%;width:70%;height:75%;display:flex;flex-direction:column;align-items:center;"], ({
-  type
-}) => type === 'cover' ? 'position: fixed' : 'position: absolute', props => props.zIndex);
+})(["", ";z-index:", ";top:25%;left:15%;width:70%;height:75%;display:flex;flex-direction:column;align-items:center;"], _ref => {
+  let {
+    type
+  } = _ref;
+  return type === 'cover' ? 'position: fixed' : 'position: absolute';
+}, props => props.zIndex);
 
-const LoadingPage = ({
-  backdropZIndex,
-  children,
-  loader,
-  loading,
-  type = 'fill',
-  zIndex = 1
-}) => {
+const LoadingPage = _ref2 => {
+  let {
+    backdropZIndex,
+    children,
+    loader,
+    loading,
+    type = 'fill',
+    zIndex = 1
+  } = _ref2;
   const [position, setPosition] = useState(null);
   const childRef = useRef(null);
   useEffect(() => {

package/esm/MobileActionToolbar/MobileActionToolbar.js

@@ -1,7 +1,7 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { PropTypes, describe } from 'react-desc';
-import { Grid } from '@elliemae/ds-basic/Grid';
+import { Grid } from '@elliemae/ds-grid';
 import styled from 'styled-components';
 import { withTheme } from '@elliemae/ds-system';
 export { default as ToolbarItem } from './MobileActionToolbarItem.js';
@@ -10,11 +10,12 @@ const ToolStrip = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-162vd15-0"
 })(["display:flex;justify-content:space-around;align-items:center;background-color:", ";"], props => props.theme.colors.neutral['000']);
 
-const Toolbar = ({
-  withDepth = true,
-  buttons = [],
-  theme
-}) => {
+const Toolbar = _ref => {
+  let {
+    withDepth = true,
+    buttons = [],
+    theme
+  } = _ref;
   const rows = [1];
   const toolbarHeight = theme.space.m;
   const borderStyle = withDepth ? {

package/esm/MobileActionToolbar/MobileActionToolbarItem.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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import React from 'react';
 import { PropTypes, describe } from 'react-desc';
-import DSButton from '@elliemae/ds-basic/Button';
+import DSButton from '@elliemae/ds-button';
 import { jsx } from 'react/jsx-runtime';
 
 const _excluded = ["icon"];

package/esm/MobileBanner/MobileBanner.js

@@ -1,7 +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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useState, useEffect, useLayoutEffect } from 'react';
-import CloseX from '@elliemae/ds-icons/CloseX';
+import { CloseX } from '@elliemae/ds-icons';
 import { describe } from 'react-desc';
 import { icons } from './utils/icons.js';
 import { propTypes } from './propTypes.js';
@@ -15,19 +21,20 @@ 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 DSMobileBanner = ({
-  type,
-  isOpen,
-  closeButtonOnClick,
-  label,
-  body,
-  actionLinkLabel,
-  actionLinkHref,
-  actionLinkOnClick,
-  showCloseButton,
-  containerProps,
-  focusOnOpen
-}) => {
+const DSMobileBanner = _ref => {
+  let {
+    type,
+    isOpen,
+    closeButtonOnClick,
+    label,
+    body,
+    actionLinkLabel,
+    actionLinkHref,
+    actionLinkOnClick,
+    showCloseButton,
+    containerProps,
+    focusOnOpen
+  } = _ref;
   const innerContainerRef = useRef(null);
   const closeRef = useRef(null);
   const [current, setCurrent] = useState(isOpen);

package/esm/MobileBanner/styles.js

@@ -1,87 +1,156 @@
 import styled from 'styled-components';
 import { toMobile } from '@elliemae/ds-system';
-import DSButton from '@elliemae/ds-basic/Button';
+import DSButton from '@elliemae/ds-button';
 import { handleBorderColor, handleAnimation } from './utils/styleHelpers.js';
 
 const StyledInnerContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-0"
-})(["display:flex;min-height:68px;width:100%;background-color:", ";border-bottom:4px solid ", ";transform:translateY(", ");", ";"], ({
-  theme
-}) => theme.colors.neutral['000'], ({
-  type,
-  theme
-}) => handleBorderColor(type, theme), ({
-  isOpen
-}) => isOpen ? '0' : '-100%', ({
-  isAnimating,
-  isOpen
-}) => handleAnimation(isAnimating, isOpen));
+})(["display:flex;min-height:68px;width:100%;background-color:", ";border-bottom:4px solid ", ";transform:translateY(", ");", ";"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral['000'];
+}, _ref2 => {
+  let {
+    type,
+    theme
+  } = _ref2;
+  return handleBorderColor(type, theme);
+}, _ref3 => {
+  let {
+    isOpen
+  } = _ref3;
+  return isOpen ? '0' : '-100%';
+}, _ref4 => {
+  let {
+    isAnimating,
+    isOpen
+  } = _ref4;
+  return handleAnimation(isAnimating, isOpen);
+});
 const StyledTextContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-1"
 })(["width:100%;"]);
 const StyledTitle = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-2"
-})(["color:", ";font-size:", ";font-weight:", ";margin-bottom:", ";@media not all and (min-resolution:0.001dpcm){@media{-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}}@media screen and (min--moz-device-pixel-ratio:0){-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}"], ({
-  theme
-}) => theme.colors.neutral[700], ({
-  theme
-}) => toMobile(theme.fontSizes.title[700]), ({
-  theme
-}) => theme.fontWeights.semibold, ({
-  theme
-}) => theme.space.xxs, ({
-  theme
-}) => theme.colors.neutral[700], ({
-  theme
-}) => theme.colors.neutral[700]);
+})(["color:", ";font-size:", ";font-weight:", ";margin-bottom:", ";@media not all and (min-resolution:0.001dpcm){@media{-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}}@media screen and (min--moz-device-pixel-ratio:0){-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}"], _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral[700];
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return toMobile(theme.fontSizes.title[700]);
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.fontWeights.semibold;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.space.xxs;
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.neutral[700];
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.neutral[700];
+});
 const StyledSubTitle = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-3"
-})(["font-size:", ";font-weight:", ";"], ({
-  theme
-}) => toMobile(theme.fontSizes.title[600]), ({
-  theme
-}) => theme.fontWeights.regular);
+})(["font-size:", ";font-weight:", ";"], _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return toMobile(theme.fontSizes.title[600]);
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.fontWeights.regular;
+});
 const StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-4"
-})(["margin-top:10px;margin-right:", ";margin-left:", ";"], ({
-  theme
-}) => theme.space.xxs, ({
-  theme
-}) => theme.space.xs);
+})(["margin-top:10px;margin-right:", ";margin-left:", ";"], _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.space.xxs;
+}, _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.space.xs;
+});
 const StyledContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-5"
-})(["width:100%;display:flex;flex-direction:column;margin:", " 0;margin-right:", ";"], ({
-  theme
-}) => theme.space.xxs2, ({
-  showCloseButton
-}) => !showCloseButton ? '28px' : '0');
+})(["width:100%;display:flex;flex-direction:column;margin:", " 0;margin-right:", ";"], _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.space.xxs2;
+}, _ref16 => {
+  let {
+    showCloseButton
+  } = _ref16;
+  return !showCloseButton ? '28px' : '0';
+});
 const StyledCloseButtonContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-6"
-})(["display:flex;align-items:flex-start;margin-top:14px;margin-right:4px;"]);
+})(["display:flex;align-items:flex-start;margin-top:6px;margin-right:6px;"]);
 const StyledCloseButton = /*#__PURE__*/styled(DSButton).withConfig({
   componentId: "sc-4jnp92-7"
-})(["position:relative;&:focus{&:after{display:block;content:' ';position:absolute;top:-2px;left:0;width:calc(100% + 0px);height:calc(100% + 5px);border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], ({
-  theme
-}) => theme.colors.brand[700]);
+})(["position:relative;&:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.colors.brand[700];
+});
 const StyledActionLink = /*#__PURE__*/styled.a.withConfig({
   componentId: "sc-4jnp92-8"
-})(["text-decoration:none;float:right;margin-left:", ";line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], ({
-  theme
-}) => theme.space.xs, ({
-  theme
-}) => toMobile(theme.fontSizes.title[600]), ({
-  theme
-}) => theme.fontWeights.regular, ({
-  theme
-}) => theme.colors.brand[600]);
+})(["text-decoration:none;float:right;margin-left:", ";line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.space.xs;
+}, _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return toMobile(theme.fontSizes.title[600]);
+}, _ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.fontWeights.regular;
+}, _ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.colors.brand[600];
+});
 const StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-9"
-})(["overflow:hidden;height:", ";", ";"], ({
-  isOpen
-}) => isOpen ? 'auto' : '0px', ({
-  isAnimating,
-  isOpen,
-  height
-}) => handleAnimation(isAnimating, isOpen, height));
+})(["overflow:hidden;height:", ";", ";"], _ref22 => {
+  let {
+    isOpen
+  } = _ref22;
+  return isOpen ? 'auto' : '0px';
+}, _ref23 => {
+  let {
+    isAnimating,
+    isOpen,
+    height
+  } = _ref23;
+  return handleAnimation(isAnimating, isOpen, height);
+});
 
 export { StyledActionLink, StyledBannerContainer, StyledCloseButton, StyledCloseButtonContainer, StyledContent, StyledIconContainer, StyledInnerContainer, StyledSubTitle, StyledTextContent, StyledTitle };

package/esm/MobileBanner/utils/icons.js

@@ -1,9 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import SuccessFill from '@elliemae/ds-icons/SuccessFill';
-import InfoFill from '@elliemae/ds-icons/InfoFill';
-import AlertsDetailFill from '@elliemae/ds-icons/AlertsDetailFill';
-import WarningSquare from '@elliemae/ds-icons/WarningSquare';
+import { SuccessFill, InfoFill, AlertsDetailFill, WarningSquare } from '@elliemae/ds-icons';
 
 const icons = {
   success: /*#__PURE__*/_jsx(SuccessFill, {

package/esm/MobileBanner/utils/styleHelpers.js

@@ -1,46 +1,17 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { kfrm, css } from '@elliemae/ds-system';
 import { MOBILE_BANNER_TYPES } from './bannerTypes.js';
 
-const slideIn = kfrm`
-  0% {
-    transform: translate3d(0, -100%, 0);
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-`;
-const slideOut = kfrm`
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  60% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
-`;
-const spanContainer = height => kfrm`
-  0% {
-    height: 0px;
-  }
-  100% {
-    height: ${height}px;
-  }
-`;
-const shrinkContainer = height => kfrm`
-  0% {
-    height: ${height}px;
-  }
-  100% {
-    height: 0px;
-  }
-`;
-const handleBorderColor = (type, {
-  colors
-}) => {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+const slideIn = kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n"])));
+const slideOut = kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n  60% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translate3d(0, -100%, 0);\n  }\n"])));
+const spanContainer = height => kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ", "px;\n  }\n"])), height);
+const shrinkContainer = height => kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  0% {\n    height: ", "px;\n  }\n  100% {\n    height: 0px;\n  }\n"])), height);
+const handleBorderColor = (type, _ref) => {
+  let {
+    colors
+  } = _ref;
+
   switch (type) {
     case MOBILE_BANNER_TYPES.SUCCESS:
       return colors.success[900];
@@ -55,16 +26,14 @@ const handleBorderColor = (type, {
       return colors.danger[900];
   }
 };
-const handleAnimation = (isAnimating, isOpen, height = null) => {
+const handleAnimation = function (isAnimating, isOpen) {
+  let height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+
   if (isAnimating) {
     if (isOpen) {
-      return css`
-        animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;
-      `;
+      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);
     } else {
-      return css`
-        animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;
-      `;
+      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        animation: ", " 0.5s ease-in;\n      "])), height ? shrinkContainer(height) : slideOut);
     }
   }
 };