@elliemae/ds-mobile 1.55.0-next.7 → 2.0.0-alpha.10

package/esm/MobileBanner/MobileBanner.js

@@ -1,110 +1,93 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useRef, useState, useEffect, useLayoutEffect } from 'react';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useRef, useState, useEffect, useLayoutEffect } from 'react';
 import CloseX from '@elliemae/ds-icons/CloseX';
 import { describe } from 'react-desc';
 import { icons } from './utils/icons.js';
 import { propTypes } from './propTypes.js';
 import { defaultProps } from './defaultProps.js';
 import { StyledBannerContainer, StyledInnerContainer, StyledIconContainer, StyledContent, StyledTitle, StyledSubTitle, StyledActionLink, StyledCloseButtonContainer, StyledCloseButton } from './styles.js';
-import '@elliemae/ds-icons/SuccessFill';
-import '@elliemae/ds-icons/InfoFill';
-import '@elliemae/ds-icons/AlertsDetailFill';
-import '@elliemae/ds-icons/WarningSquare';
-import './utils/bannerTypes.js';
-import 'styled-components';
-import '@elliemae/ds-system';
-import '@elliemae/ds-basic/Button';
-import './utils/styleHelpers.js';
-import '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
-var DSMobileBanner = function DSMobileBanner(_ref) {
-  var type = _ref.type,
-      isOpen = _ref.isOpen,
-      closeButtonOnClick = _ref.closeButtonOnClick,
-      label = _ref.label,
-      body = _ref.body,
-      actionLinkLabel = _ref.actionLinkLabel,
-      actionLinkHref = _ref.actionLinkHref,
-      actionLinkOnClick = _ref.actionLinkOnClick,
-      showCloseButton = _ref.showCloseButton,
-      containerProps = _ref.containerProps,
-      focusOnOpen = _ref.focusOnOpen;
-  var innerContainerRef = useRef(null);
-  var closeRef = useRef(null);
+var _CloseX;
 
-  var _useState = useState(isOpen),
-      _useState2 = _slicedToArray(_useState, 2),
-      current = _useState2[0],
-      setCurrent = _useState2[1];
+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; }
 
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isAnimating = _useState4[0],
-      setIsAnimating = _useState4[1];
+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; }
 
-  var _useState5 = useState(0),
-      _useState6 = _slicedToArray(_useState5, 2),
-      height = _useState6[0],
-      setHeight = _useState6[1];
-
-  useEffect(function () {
+const DSMobileBanner = ({
+  type,
+  isOpen,
+  closeButtonOnClick,
+  label,
+  body,
+  actionLinkLabel,
+  actionLinkHref,
+  actionLinkOnClick,
+  showCloseButton,
+  containerProps,
+  focusOnOpen
+}) => {
+  const innerContainerRef = useRef(null);
+  const closeRef = useRef(null);
+  const [current, setCurrent] = useState(isOpen);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
     if (innerContainerRef.current) {
       setHeight(innerContainerRef.current.offsetHeight);
     }
   }, [isAnimating, isOpen]);
-  useEffect(function () {
+  useEffect(() => {
     if (focusOnOpen && closeRef.current && isOpen) {
       var _closeRef$current, _closeRef$current$foc;
 
       (_closeRef$current = closeRef.current) === null || _closeRef$current === void 0 ? void 0 : (_closeRef$current$foc = _closeRef$current.focus) === null || _closeRef$current$foc === void 0 ? void 0 : _closeRef$current$foc.call(_closeRef$current);
     }
   }, [focusOnOpen, isOpen]);
-  useLayoutEffect(function () {
+  useLayoutEffect(() => {
     if (isOpen !== current || isOpen) setIsAnimating(true);else setIsAnimating(false);
   }, [isOpen, current]);
   if (!isAnimating && !isOpen) return null;
-  return /*#__PURE__*/React.createElement(StyledBannerContainer, _extends({
+  return /*#__PURE__*/jsx(StyledBannerContainer, _objectSpread(_objectSpread({
     type: type,
     isOpen: isOpen,
     isAnimating: isAnimating,
-    onAnimationEnd: function onAnimationEnd() {
-      return setCurrent(isOpen);
-    },
+    onAnimationEnd: () => setCurrent(isOpen),
     height: height
-  }, containerProps, {
+  }, containerProps), {}, {
     "data-testid": "ds-mobile-banner-container",
-    role: "alert"
-  }), /*#__PURE__*/React.createElement(StyledInnerContainer, {
-    type: type,
-    isOpen: isOpen,
-    ref: innerContainerRef,
-    isAnimating: isAnimating
-  }, /*#__PURE__*/React.createElement(StyledIconContainer, {
-    "data-testid": "ds-mobile-banner-icon"
-  }, icons[type]), /*#__PURE__*/React.createElement(StyledContent, {
-    showCloseButton: showCloseButton
-  }, /*#__PURE__*/React.createElement(StyledTitle, null, label), /*#__PURE__*/React.createElement(StyledSubTitle, null, body, actionLinkLabel && /*#__PURE__*/React.createElement(StyledActionLink, {
-    href: actionLinkHref,
-    "data-testid": "ds-mobile-banner-link",
-    onClick: actionLinkOnClick
-  }, actionLinkLabel))), showCloseButton && /*#__PURE__*/React.createElement(StyledCloseButtonContainer, null, /*#__PURE__*/React.createElement(StyledCloseButton, {
-    "data-testid": "ds-mobile-banner-close-button",
-    buttonType: "link",
-    onClick: closeButtonOnClick,
-    "aria-label": "Close Banner",
-    icon: /*#__PURE__*/React.createElement(CloseX, {
-      width: "12px",
-      height: "12px"
-    }),
-    innerRef: closeRef
-  }))));
+    role: "alert",
+    children: /*#__PURE__*/jsxs(StyledInnerContainer, {
+      type: type,
+      isOpen: isOpen,
+      ref: innerContainerRef,
+      isAnimating: isAnimating,
+      children: [/*#__PURE__*/_jsx(StyledIconContainer, {
+        "data-testid": "ds-mobile-banner-icon"
+      }, void 0, icons[type]), /*#__PURE__*/_jsx(StyledContent, {
+        showCloseButton: showCloseButton
+      }, void 0, /*#__PURE__*/_jsx(StyledTitle, {}, void 0, label), /*#__PURE__*/_jsx(StyledSubTitle, {}, void 0, body, actionLinkLabel && /*#__PURE__*/_jsx(StyledActionLink, {
+        href: actionLinkHref,
+        "data-testid": "ds-mobile-banner-link",
+        onClick: actionLinkOnClick
+      }, void 0, actionLinkLabel))), showCloseButton && /*#__PURE__*/_jsx(StyledCloseButtonContainer, {}, void 0, /*#__PURE__*/_jsx(StyledCloseButton, {
+        "data-testid": "ds-mobile-banner-close-button",
+        buttonType: "link",
+        onClick: closeButtonOnClick,
+        "aria-label": "Close Banner",
+        icon: _CloseX || (_CloseX = /*#__PURE__*/_jsx(CloseX, {
+          width: "12px",
+          height: "12px"
+        })),
+        innerRef: closeRef
+      }))]
+    })
+  }));
 };
 
 DSMobileBanner.defaultProps = defaultProps;
-DSMobileBanner.propTypes = propTypes;
-var DSMobileBannerWithSchema = describe(DSMobileBanner);
+const DSMobileBannerWithSchema = describe(DSMobileBanner);
 DSMobileBannerWithSchema.propTypes = propTypes;
 
 export { DSMobileBanner, DSMobileBannerWithSchema };
-//# sourceMappingURL=MobileBanner.js.map

package/esm/MobileBanner/defaultProps.js

@@ -1,16 +1,12 @@
 import { MOBILE_BANNER_TYPES } from './utils/bannerTypes.js';
 
-var defaultProps = {
+const defaultProps = {
   type: MOBILE_BANNER_TYPES.SUCCESS,
   isOpen: false,
-  closeButtonOnClick: function closeButtonOnClick() {
-    return null;
-  },
+  closeButtonOnClick: () => null,
   actionLinkLabel: null,
   actionLinkHref: null,
-  actionLinkOnClick: function actionLinkOnClick() {
-    return null;
-  },
+  actionLinkOnClick: () => null,
   label: '',
   body: '',
   showCloseButton: true,
@@ -19,4 +15,3 @@ var defaultProps = {
 };
 
 export { defaultProps };
-//# sourceMappingURL=defaultProps.js.map

package/esm/MobileBanner/index.d.js

@@ -1,2 +1 @@
 
-//# sourceMappingURL=index.d.js.map

package/esm/MobileBanner/index.js

@@ -1,21 +1,2 @@
 export { DSMobileBanner, DSMobileBannerWithSchema } from './MobileBanner.js';
 export { MOBILE_BANNER_TYPES } from './utils/bannerTypes.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'react';
-import '@elliemae/ds-icons/CloseX';
-import 'react-desc';
-import './utils/icons.js';
-import '@elliemae/ds-icons/SuccessFill';
-import '@elliemae/ds-icons/InfoFill';
-import '@elliemae/ds-icons/AlertsDetailFill';
-import '@elliemae/ds-icons/WarningSquare';
-import './propTypes.js';
-import './defaultProps.js';
-import './styles.js';
-import 'styled-components';
-import '@elliemae/ds-system';
-import '@elliemae/ds-basic/Button';
-import './utils/styleHelpers.js';
-import '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-//# sourceMappingURL=index.js.map

package/esm/MobileBanner/propTypes.js

@@ -1,6 +1,6 @@
 import { PropTypes } from 'react-desc';
 
-var propTypes = {
+const propTypes = {
   type: PropTypes.oneOf(['info', 'success', 'warning', 'error']).description('Type of banner'),
   isOpen: PropTypes.bool.description('Whether the banner is open or not'),
   closeButtonOnClick: PropTypes.func.description('OnClick function used in the close button'),
@@ -15,4 +15,3 @@ var propTypes = {
 };
 
 export { propTypes };
-//# sourceMappingURL=propTypes.js.map

package/esm/MobileBanner/styles.js

@@ -2,112 +2,86 @@ import styled from 'styled-components';
 import { toMobile } from '@elliemae/ds-system';
 import DSButton from '@elliemae/ds-basic/Button';
 import { handleBorderColor, handleAnimation } from './utils/styleHelpers.js';
-import '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import './utils/bannerTypes.js';
 
-var StyledInnerContainer = /*#__PURE__*/styled.div.withConfig({
+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(", ");", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.colors.neutral['000'];
-}, function (_ref2) {
-  var type = _ref2.type,
-      theme = _ref2.theme;
-  return handleBorderColor(type, theme);
-}, function (_ref3) {
-  var isOpen = _ref3.isOpen;
-  return isOpen ? '0' : '-100%';
-}, function (_ref4) {
-  var isAnimating = _ref4.isAnimating,
-      isOpen = _ref4.isOpen;
-  return handleAnimation(isAnimating, isOpen);
-});
-var StyledTextContent = /*#__PURE__*/styled.div.withConfig({
+})(["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));
+const StyledTextContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-1"
 })(["width:100%;"]);
-var StyledTitle = /*#__PURE__*/styled.div.withConfig({
+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 ", ";}"], function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.colors.neutral[700];
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return toMobile(theme.fontSizes.title[700]);
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.fontWeights.semibold;
-}, function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.space.xxs;
-}, function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.colors.neutral[700];
-}, function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.colors.neutral[700];
-});
-var StyledSubTitle = /*#__PURE__*/styled.div.withConfig({
+})(["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]);
+const StyledSubTitle = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-3"
-})(["font-size:", ";font-weight:", ";"], function (_ref11) {
-  var theme = _ref11.theme;
-  return toMobile(theme.fontSizes.title[600]);
-}, function (_ref12) {
-  var theme = _ref12.theme;
-  return theme.fontWeights.regular;
-});
-var StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
+})(["font-size:", ";font-weight:", ";"], ({
+  theme
+}) => toMobile(theme.fontSizes.title[600]), ({
+  theme
+}) => theme.fontWeights.regular);
+const StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-4"
-})(["margin-top:10px;margin-right:", ";margin-left:", ";"], function (_ref13) {
-  var theme = _ref13.theme;
-  return theme.space.xxs;
-}, function (_ref14) {
-  var theme = _ref14.theme;
-  return theme.space.xs;
-});
-var StyledContent = /*#__PURE__*/styled.div.withConfig({
+})(["margin-top:10px;margin-right:", ";margin-left:", ";"], ({
+  theme
+}) => theme.space.xxs, ({
+  theme
+}) => theme.space.xs);
+const StyledContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-5"
-})(["width:100%;display:flex;flex-direction:column;margin:", " 0;margin-right:", ";"], function (_ref15) {
-  var theme = _ref15.theme;
-  return theme.space.xxs2;
-}, function (_ref16) {
-  var showCloseButton = _ref16.showCloseButton;
-  return !showCloseButton ? '28px' : '0';
-});
-var StyledCloseButtonContainer = /*#__PURE__*/styled.div.withConfig({
+})(["width:100%;display:flex;flex-direction:column;margin:", " 0;margin-right:", ";"], ({
+  theme
+}) => theme.space.xxs2, ({
+  showCloseButton
+}) => !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;"]);
-var StyledCloseButton = /*#__PURE__*/styled(DSButton).withConfig({
+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;}}"], function (_ref17) {
-  var theme = _ref17.theme;
-  return theme.colors.brand[700];
-});
-var StyledActionLink = /*#__PURE__*/styled.a.withConfig({
+})(["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]);
+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:", ";"], function (_ref18) {
-  var theme = _ref18.theme;
-  return theme.space.xs;
-}, function (_ref19) {
-  var theme = _ref19.theme;
-  return toMobile(theme.fontSizes.title[600]);
-}, function (_ref20) {
-  var theme = _ref20.theme;
-  return theme.fontWeights.regular;
-}, function (_ref21) {
-  var theme = _ref21.theme;
-  return theme.colors.brand[600];
-});
-var StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
+})(["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]);
+const StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-4jnp92-9"
-})(["overflow:hidden;height:", ";", ";"], function (_ref22) {
-  var isOpen = _ref22.isOpen;
-  return isOpen ? 'auto' : '0px';
-}, function (_ref23) {
-  var isAnimating = _ref23.isAnimating,
-      isOpen = _ref23.isOpen,
-      height = _ref23.height;
-  return handleAnimation(isAnimating, isOpen, height);
-});
+})(["overflow:hidden;height:", ";", ";"], ({
+  isOpen
+}) => isOpen ? 'auto' : '0px', ({
+  isAnimating,
+  isOpen,
+  height
+}) => handleAnimation(isAnimating, isOpen, height));
 
 export { StyledActionLink, StyledBannerContainer, StyledCloseButton, StyledCloseButtonContainer, StyledContent, StyledIconContainer, StyledInnerContainer, StyledSubTitle, StyledTextContent, StyledTitle };
-//# sourceMappingURL=styles.js.map

package/esm/MobileBanner/utils/bannerTypes.js

@@ -1,4 +1,4 @@
-var MOBILE_BANNER_TYPES = {
+const MOBILE_BANNER_TYPES = {
   INFO: 'info',
   SUCCESS: 'success',
   WARNING: 'warning',
@@ -6,4 +6,3 @@ var MOBILE_BANNER_TYPES = {
 };
 
 export { MOBILE_BANNER_TYPES };
-//# sourceMappingURL=bannerTypes.js.map

package/esm/MobileBanner/utils/icons.js

@@ -1,22 +1,23 @@
-import React from 'react';
+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';
 
-var icons = {
-  success: /*#__PURE__*/React.createElement(SuccessFill, {
+const icons = {
+  success: /*#__PURE__*/_jsx(SuccessFill, {
     fill: "#207e56"
   }),
-  info: /*#__PURE__*/React.createElement(InfoFill, {
+  info: /*#__PURE__*/_jsx(InfoFill, {
     fill: "#1e79c2"
   }),
-  error: /*#__PURE__*/React.createElement(AlertsDetailFill, {
+  error: /*#__PURE__*/_jsx(AlertsDetailFill, {
     width: "24px",
     height: "24px",
     fill: "#c64252"
   }),
-  warning: /*#__PURE__*/React.createElement(WarningSquare, {
+  warning: /*#__PURE__*/_jsx(WarningSquare, {
     width: "24px",
     height: "24px",
     fill: "#d17a00"
@@ -24,4 +25,3 @@ var icons = {
 };
 
 export { icons };
-//# sourceMappingURL=icons.js.map

package/esm/MobileBanner/utils/styleHelpers.js

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

package/esm/MobileCard/ActionAddon.js

@@ -1,44 +1,22 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
 import styled from 'styled-components';
 import ChevronSmallDown from '@elliemae/ds-icons/ChevronSmallDown';
 import DSButton from '@elliemae/ds-basic/Button';
 
-var Addon = /*#__PURE__*/styled(DSButton).withConfig({
+const Addon = /*#__PURE__*/styled(DSButton).withConfig({
   componentId: "sc-afblfw-0"
-})(["background-color:transparent;padding-right:4px;height:100%;border:none;font-size:12px;font-weight:", ";color:", ";cursor:pointer;&:focus,&::after{background-color:transparent;box-shadow:none !important;border:none !important;}"], function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return props.theme.colors.brand['700'];
+})(["background-color:transparent;padding-right:4px;height:100%;border:none;font-size:12px;font-weight:", ";color:", ";cursor:pointer;&:focus,&::after{background-color:transparent;box-shadow:none !important;border:none !important;}"], props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['700']);
+const ActionAddon = ({
+  label,
+  onClick,
+  icon
+}) => /*#__PURE__*/_jsx(Addon, {
+  onClick: onClick,
+  labelText: label,
+  icon: icon || /*#__PURE__*/_jsx(ChevronSmallDown, {
+    color: ['brand-primary', 700]
+  })
 });
-var ActionAddon = function ActionAddon(_ref) {
-  var label = _ref.label,
-      onClick = _ref.onClick,
-      icon = _ref.icon;
-  return /*#__PURE__*/React.createElement(Addon, {
-    onClick: onClick,
-    labelText: label,
-    icon: icon || /*#__PURE__*/React.createElement(ChevronSmallDown, {
-      color: ['brand-primary', 700]
-    })
-  });
-};
-ActionAddon.propTypes = {
-  /**
-   * Addon label
-   */
-  label: PropTypes.string,
-
-  /**
-   * On click callback
-   */
-  onClick: PropTypes.func,
-
-  /**
-   * Icon to display after the label
-   */
-  icon: PropTypes.element
-};
 
 export { ActionAddon };
-//# sourceMappingURL=ActionAddon.js.map