@elliemae/ds-mobile 2.2.0 → 2.3.0-alpha.3

package/esm/MobileBanner/styles.js

@@ -1,156 +1,99 @@
-import styled from 'styled-components';
-import { toMobile } from '@elliemae/ds-system';
-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(", ");", ";"], _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 ", ";}"], _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:", ";"], _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:", ";"], _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:", ";"], _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:6px;margin-right:6px;"]);
-const StyledCloseButton = /*#__PURE__*/styled(DSButton).withConfig({
-  componentId: "sc-4jnp92-7"
-})(["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:", ";"], _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:", ";", ";"], _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 };
+import * as React from "react";
+import styled from "styled-components";
+import { toMobile } from "@elliemae/ds-system";
+import DSButton from "@elliemae/ds-button";
+import { handleAnimation, handleBorderColor } from "./utils/styleHelpers";
+const StyledInnerContainer = styled.div`
+  display: flex;
+  min-height: 68px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.colors.neutral["000"]};
+  border-bottom: 4px solid ${({ type, theme }) => handleBorderColor(type, theme)};
+  transform: translateY(${({ isOpen }) => isOpen ? "0" : "-100%"});
+  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};
+`;
+const StyledTextContent = styled.div`
+  width: 100%;
+`;
+const StyledTitle = styled.div`
+  color: ${({ theme }) => theme.colors.neutral[700]};
+  font-size: ${({ theme }) => toMobile(theme.fontSizes.title[700])};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  margin-bottom: ${({ theme }) => theme.space.xxs};
+  @media not all and (min-resolution: 0.001dpcm) {
+    @media {
+      -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render
+      -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render
+    }
+  }
+  @media screen and (min--moz-device-pixel-ratio: 0) {
+    -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render
+    -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render
+  }
+`;
+const StyledSubTitle = styled.div`
+  font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};
+  font-weight: ${({ theme }) => theme.fontWeights.regular};
+`;
+const StyledIconContainer = styled.div`
+  margin-top: 10px;
+  margin-right: ${({ theme }) => theme.space.xxs};
+  margin-left: ${({ theme }) => theme.space.xs};
+`;
+const StyledContent = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: ${({ theme }) => theme.space.xxs2} 0;
+  margin-right: ${({ showCloseButton }) => !showCloseButton ? "28px" : "0"};
+`;
+const StyledCloseButtonContainer = styled.div`
+  display: flex;
+  align-items: flex-start;
+  margin-top: 6px;
+  margin-right: 6px;
+`;
+const StyledCloseButton = styled(DSButton)`
+  position: relative;
+  &:focus {
+    &:after {
+      display: block;
+      content: ' ';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 2px solid ${({ theme }) => theme.colors.brand[700]};
+      border-radius: 2px;
+      pointer-events: none;
+    }
+  }
+`;
+const StyledActionLink = styled.a`
+  text-decoration: none;
+  float: right;
+  margin-left: ${({ theme }) => theme.space.xs};
+  line-height: 1.1;
+  font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};
+  font-weight: ${({ theme }) => theme.fontWeights.regular};
+  color: ${({ theme }) => theme.colors.brand[600]};
+`;
+const StyledBannerContainer = styled.div`
+  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/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileBanner/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { toMobile } from '@elliemae/ds-system';\nimport DSButton from '@elliemae/ds-button';\nimport type { StyledBannerContainerT, StyledContentT, StyledInnerContainerT } from './index.d';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\n\nexport const StyledInnerContainer = styled.div<StyledInnerContainerT>`\n  display: flex;\n  min-height: 68px;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  border-bottom: 4px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n  transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n`;\n\nexport const StyledTextContent = styled.div`\n  width: 100%;\n`;\n\nexport const StyledTitle = styled.div`\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  font-size: ${({ theme }) => toMobile(theme.fontSizes.title[700])};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  margin-bottom: ${({ theme }) => theme.space.xxs};\n  @media not all and (min-resolution: 0.001dpcm) {\n    @media {\n      -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render\n      -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render\n    }\n  }\n  @media screen and (min--moz-device-pixel-ratio: 0) {\n    -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render\n    -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render\n  }\n`;\n\nexport const StyledSubTitle = styled.div`\n  font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n`;\n\nexport const StyledIconContainer = styled.div`\n  margin-top: 10px;\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledContent = styled.div<StyledContentT>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  margin: ${({ theme }) => theme.space.xxs2} 0;\n  margin-right: ${({ showCloseButton }) => (!showCloseButton ? '28px' : '0')};\n`;\n\nexport const StyledCloseButtonContainer = styled.div`\n  display: flex;\n  align-items: flex-start;\n  margin-top: 6px;\n  margin-right: 6px;\n`;\nexport const StyledCloseButton = styled(DSButton)`\n  position: relative;\n  &:focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledActionLink = styled.a`\n  text-decoration: none;\n  float: right;\n  margin-left: ${({ theme }) => theme.space.xs};\n  line-height: 1.1;\n  font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledBannerContainer = styled.div<StyledBannerContainerT>`\n  overflow: hidden;\n  height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n  ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAEO,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIrB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,YAAY,kBAAkB,MAAM;AAAA,0BAChD,CAAC,EAAE,aAAc,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,aAAa,gBAAgB,aAAa;AAAA;AAGvD,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAIjC,MAAM,cAAc,OAAO;AAAA,WACvB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,YAAY,SAAS,MAAM,UAAU,MAAM;AAAA,iBAC5C,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,mBAC/B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,mCAIX,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKtC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI9D,MAAM,iBAAiB,OAAO;AAAA,eACtB,CAAC,EAAE,YAAY,SAAS,MAAM,UAAU,MAAM;AAAA,iBAC5C,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,sBAAsB,OAAO;AAAA;AAAA,kBAExB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAGrC,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA,YAIxB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,kBACrB,CAAC,EAAE,sBAAuB,CAAC,kBAAkB,SAAS;AAAA;AAGjE,MAAM,6BAA6B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAM1C,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWd,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA,iBAGtB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA,eAE7B,CAAC,EAAE,YAAY,SAAS,MAAM,UAAU,MAAM;AAAA,iBAC5C,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAGtC,MAAM,wBAAwB,OAAO;AAAA;AAAA,YAEhC,CAAC,EAAE,aAAc,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,aAAa,gBAAgB,aAAa,QAAQ;AAAA;",
+  "names": []
+}

package/esm/MobileBanner/utils/bannerTypes.js

@@ -1,8 +1,11 @@
+import * as React from "react";
 const MOBILE_BANNER_TYPES = {
-  INFO: 'info',
-  SUCCESS: 'success',
-  WARNING: 'warning',
-  ERROR: 'error'
+  INFO: "info",
+  SUCCESS: "success",
+  WARNING: "warning",
+  ERROR: "error"
 };
-
-export { MOBILE_BANNER_TYPES };
+export {
+  MOBILE_BANNER_TYPES
+};
+//# sourceMappingURL=bannerTypes.js.map

package/esm/MobileBanner/utils/bannerTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/MobileBanner/utils/bannerTypes.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const MOBILE_BANNER_TYPES = {\n  INFO: 'info',\n  SUCCESS: 'success',\n  WARNING: 'warning',\n  ERROR: 'error',\n} as const;\n"],
+  "mappings": "AAAA;ACAO,MAAM,sBAAsB;AAAA,EACjC,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA;",
+  "names": []
+}

package/esm/MobileBanner/utils/icons.js

@@ -1,24 +1,25 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { SuccessFill, InfoFill, AlertsDetailFill, WarningSquare } from '@elliemae/ds-icons';
-
+import * as React from "react";
+import React2 from "react";
+import { AlertsDetailFill, SuccessFill, InfoFill, WarningSquare } from "@elliemae/ds-icons";
 const icons = {
-  success: /*#__PURE__*/_jsx(SuccessFill, {
+  success: /* @__PURE__ */ React2.createElement(SuccessFill, {
     fill: "#207e56"
   }),
-  info: /*#__PURE__*/_jsx(InfoFill, {
+  info: /* @__PURE__ */ React2.createElement(InfoFill, {
     fill: "#1e79c2"
   }),
-  error: /*#__PURE__*/_jsx(AlertsDetailFill, {
+  error: /* @__PURE__ */ React2.createElement(AlertsDetailFill, {
     width: "24px",
     height: "24px",
     fill: "#c64252"
   }),
-  warning: /*#__PURE__*/_jsx(WarningSquare, {
+  warning: /* @__PURE__ */ React2.createElement(WarningSquare, {
     width: "24px",
     height: "24px",
     fill: "#d17a00"
   })
 };
-
-export { icons };
+export {
+  icons
+};
+//# sourceMappingURL=icons.js.map

package/esm/MobileBanner/utils/icons.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/MobileBanner/utils/icons.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { AlertsDetailFill, SuccessFill, InfoFill, WarningSquare } from '@elliemae/ds-icons';\n\nexport const icons = {\n  success: <SuccessFill fill=\"#207e56\" />,\n  info: <InfoFill fill=\"#1e79c2\" />,\n  error: <AlertsDetailFill width=\"24px\" height=\"24px\" fill=\"#c64252\" />,\n  warning: <WarningSquare width=\"24px\" height=\"24px\" fill=\"#d17a00\" />,\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,QAAQ;AAAA,EACnB,SAAS,qCAAC,aAAD;AAAA,IAAa,MAAK;AAAA;AAAA,EAC3B,MAAM,qCAAC,UAAD;AAAA,IAAU,MAAK;AAAA;AAAA,EACrB,OAAO,qCAAC,kBAAD;AAAA,IAAkB,OAAM;AAAA,IAAO,QAAO;AAAA,IAAO,MAAK;AAAA;AAAA,EACzD,SAAS,qCAAC,eAAD;AAAA,IAAe,OAAM;AAAA,IAAO,QAAO;AAAA,IAAO,MAAK;AAAA;AAAA;",
+  "names": []
+}

package/esm/MobileBanner/utils/styleHelpers.js

@@ -1,41 +1,74 @@
-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;
-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;
-
+import * as React from "react";
+import { kfrm, css } from "@elliemae/ds-system";
+import { MOBILE_BANNER_TYPES } from "./bannerTypes";
+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];
-
     case MOBILE_BANNER_TYPES.INFO:
       return colors.brand[600];
-
     case MOBILE_BANNER_TYPES.WARNING:
       return colors.warning[900];
-
     case MOBILE_BANNER_TYPES.ERROR:
       return colors.danger[900];
   }
 };
-const handleAnimation = function (isAnimating, isOpen) {
-  let 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 };
+export {
+  handleAnimation,
+  handleBorderColor,
+  shrinkContainer,
+  slideIn,
+  slideOut,
+  spanContainer
+};
+//# sourceMappingURL=styleHelpers.js.map

package/esm/MobileBanner/utils/styleHelpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/MobileBanner/utils/styleHelpers.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { kfrm, css } from '@elliemae/ds-system';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport type { MobileBannerTypesT } from '../index.d';\nimport { MOBILE_BANNER_TYPES } from './bannerTypes';\n\nexport const slideIn = kfrm`\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n`;\n\nexport const slideOut = kfrm`\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`;\n\nexport const spanContainer = (height: number) => kfrm`\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ${height}px;\n  }\n`;\n\nexport const shrinkContainer = (height: number) => kfrm`\n  0% {\n    height: ${height}px;\n  }\n  100% {\n    height: 0px;\n  }\n`;\n\nexport const handleBorderColor = (type: MobileBannerTypesT, { colors }): string => {\n  switch (type) {\n    case MOBILE_BANNER_TYPES.SUCCESS:\n      return colors.success[900];\n    case MOBILE_BANNER_TYPES.INFO:\n      return colors.brand[600];\n    case MOBILE_BANNER_TYPES.WARNING:\n      return colors.warning[900];\n    case MOBILE_BANNER_TYPES.ERROR:\n      return colors.danger[900];\n  }\n};\n\nexport const handleAnimation = (\n  isAnimating: boolean,\n  isOpen: boolean,\n  height: number | null = null,\n): FlattenSimpleInterpolation => {\n  if (isAnimating) {\n    if (isOpen) {\n      return css`\n        animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;\n      `;\n    } else {\n      return css`\n        animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;\n      `;\n    }\n  }\n};\n"],
+  "mappings": "AAAA;ACAA;AAGA;AAEO,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjB,MAAM,gBAAgB,CAAC,WAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,cAKnC;AAAA;AAAA;AAIP,MAAM,kBAAkB,CAAC,WAAmB;AAAA;AAAA,cAErC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOP,MAAM,oBAAoB,CAAC,MAA0B,EAAE,aAAqB;AACjF,UAAQ;AAAA,SACD,oBAAoB;AACvB,aAAO,OAAO,QAAQ;AAAA,SACnB,oBAAoB;AACvB,aAAO,OAAO,MAAM;AAAA,SACjB,oBAAoB;AACvB,aAAO,OAAO,QAAQ;AAAA,SACnB,oBAAoB;AACvB,aAAO,OAAO,OAAO;AAAA;AAAA;AAIpB,MAAM,kBAAkB,CAC7B,aACA,QACA,SAAwB,SACO;AAC/B,MAAI,aAAa;AACf,QAAI,QAAQ;AACV,aAAO;AAAA,qBACQ,SAAS,cAAc,UAAU;AAAA;AAAA,WAE3C;AACL,aAAO;AAAA,qBACQ,SAAS,gBAAgB,UAAU;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/esm/MobileCard/ActionAddon.js

@@ -1,25 +1,38 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import styled from 'styled-components';
-import { ChevronSmallDown } from '@elliemae/ds-icons';
-import DSButton from '@elliemae/ds-button';
-
-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;}"], props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['700']);
-const ActionAddon = _ref => {
-  let {
-    label,
-    onClick,
-    icon
-  } = _ref;
-  return /*#__PURE__*/_jsx(Addon, {
-    onClick: onClick,
-    labelText: label,
-    icon: icon || /*#__PURE__*/_jsx(ChevronSmallDown, {
-      color: ['brand-primary', 700]
-    })
-  });
+import * as React from "react";
+import React2 from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { ChevronSmallDown } from "@elliemae/ds-icons";
+import Button from "@elliemae/ds-button";
+const Addon = styled(Button)`
+  background-color: transparent;
+  padding-right: 4px;
+  height: 100%;
+  border: none;
+  font-size: 12px;
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  color: ${(props) => props.theme.colors.brand["700"]};
+  cursor: pointer;
+  &:focus,
+  &::after {
+    background-color: transparent;
+    box-shadow: none !important; /* needed */
+    border: none !important; /* needed */
+  }
+`;
+const ActionAddon = ({ label, onClick, icon }) => /* @__PURE__ */ React2.createElement(Addon, {
+  onClick,
+  labelText: label,
+  icon: icon || /* @__PURE__ */ React2.createElement(ChevronSmallDown, {
+    color: ["brand-primary", 700]
+  })
+});
+ActionAddon.propTypes = {
+  label: PropTypes.string,
+  onClick: PropTypes.func,
+  icon: PropTypes.element
 };
-
-export { ActionAddon };
+export {
+  ActionAddon
+};
+//# sourceMappingURL=ActionAddon.js.map

package/esm/MobileCard/ActionAddon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileCard/ActionAddon.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport Button from '@elliemae/ds-button';\n\nconst Addon = styled(Button)`\n  background-color: transparent;\n  padding-right: 4px;\n  height: 100%;\n  border: none;\n  font-size: 12px;\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  color: ${(props) => props.theme.colors.brand['700']};\n  cursor: pointer;\n  &:focus,\n  &::after {\n    background-color: transparent;\n    box-shadow: none !important; /* needed */\n    border: none !important; /* needed */\n  }\n`;\n\nexport const ActionAddon = ({ label, onClick, icon }) => (\n  <Addon onClick={onClick} labelText={label} icon={icon || <ChevronSmallDown color={['brand-primary', 700]} />} />\n);\n\nActionAddon.propTypes = {\n  /**\n   * Addon label\n   */\n  label: PropTypes.string,\n  /**\n   * On click callback\n   */\n  onClick: PropTypes.func,\n  /**\n   * Icon to display after the label\n   */\n  icon: PropTypes.element,\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMJ,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUxC,MAAM,cAAc,CAAC,EAAE,OAAO,SAAS,WAC5C,qCAAC,OAAD;AAAA,EAAO;AAAA,EAAkB,WAAW;AAAA,EAAO,MAAM,QAAQ,qCAAC,kBAAD;AAAA,IAAkB,OAAO,CAAC,iBAAiB;AAAA;AAAA;AAGtG,YAAY,YAAY;AAAA,EAItB,OAAO,UAAU;AAAA,EAIjB,SAAS,UAAU;AAAA,EAInB,MAAM,UAAU;AAAA;",
+  "names": []
+}