@elliemae/ds-mobile 2.2.0-alpha.4 → 3.0.0-next.2

package/cjs/MobileBanner/styles.js

@@ -1,128 +1,174 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var styles_exports = {};
-__export(styles_exports, {
-  StyledActionLink: () => StyledActionLink,
-  StyledBannerContainer: () => StyledBannerContainer,
-  StyledCloseButton: () => StyledCloseButton,
-  StyledCloseButtonContainer: () => StyledCloseButtonContainer,
-  StyledContent: () => StyledContent,
-  StyledIconContainer: () => StyledIconContainer,
-  StyledInnerContainer: () => StyledInnerContainer,
-  StyledSubTitle: () => StyledSubTitle,
-  StyledTextContent: () => StyledTextContent,
-  StyledTitle: () => StyledTitle
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var DSButton = require('@elliemae/ds-button');
+var styleHelpers = require('./utils/styleHelpers.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+const StyledInnerContainer = /*#__PURE__*/styled__default["default"].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 styleHelpers.handleBorderColor(type, theme);
+}, _ref3 => {
+  let {
+    isOpen
+  } = _ref3;
+  return isOpen ? '0' : '-100%';
+}, _ref4 => {
+  let {
+    isAnimating,
+    isOpen
+  } = _ref4;
+  return styleHelpers.handleAnimation(isAnimating, isOpen);
 });
-var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_system = require("@elliemae/ds-system");
-var import_ds_button = __toESM(require("@elliemae/ds-button"));
-var import_styleHelpers = require("./utils/styleHelpers");
-const StyledInnerContainer = import_styled_components.default.div`
-  display: flex;
-  min-height: 68px;
-  width: 100%;
-  background-color: ${({ theme }) => theme.colors.neutral["000"]};
-  border-bottom: 4px solid ${({ type, theme }) => (0, import_styleHelpers.handleBorderColor)(type, theme)};
-  transform: translateY(${({ isOpen }) => isOpen ? "0" : "-100%"});
-  ${({ isAnimating, isOpen }) => (0, import_styleHelpers.handleAnimation)(isAnimating, isOpen)};
-`;
-const StyledTextContent = import_styled_components.default.div`
-  width: 100%;
-`;
-const StyledTitle = import_styled_components.default.div`
-  color: ${({ theme }) => theme.colors.neutral[700]};
-  font-size: ${({ theme }) => (0, import_ds_system.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 = import_styled_components.default.div`
-  font-size: ${({ theme }) => (0, import_ds_system.toMobile)(theme.fontSizes.title[600])};
-  font-weight: ${({ theme }) => theme.fontWeights.regular};
-`;
-const StyledIconContainer = import_styled_components.default.div`
-  margin-top: 10px;
-  margin-right: ${({ theme }) => theme.space.xxs};
-  margin-left: ${({ theme }) => theme.space.xs};
-`;
-const StyledContent = import_styled_components.default.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  margin: ${({ theme }) => theme.space.xxs2} 0;
-  margin-right: ${({ showCloseButton }) => !showCloseButton ? "28px" : "0"};
-`;
-const StyledCloseButtonContainer = import_styled_components.default.div`
-  display: flex;
-  align-items: flex-start;
-  margin-top: 6px;
-  margin-right: 6px;
-`;
-const StyledCloseButton = (0, import_styled_components.default)(import_ds_button.default)`
-  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 = import_styled_components.default.a`
-  text-decoration: none;
-  float: right;
-  margin-left: ${({ theme }) => theme.space.xs};
-  line-height: 1.1;
-  font-size: ${({ theme }) => (0, import_ds_system.toMobile)(theme.fontSizes.title[600])};
-  font-weight: ${({ theme }) => theme.fontWeights.regular};
-  color: ${({ theme }) => theme.colors.brand[600]};
-`;
-const StyledBannerContainer = import_styled_components.default.div`
-  overflow: hidden;
-  height: ${({ isOpen }) => isOpen ? "auto" : "0px"};
-  ${({ isAnimating, isOpen, height }) => (0, import_styleHelpers.handleAnimation)(isAnimating, isOpen, height)};
-`;
-module.exports = __toCommonJS(styles_exports);
-//# sourceMappingURL=styles.js.map
+const StyledTextContent = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-4jnp92-1"
+})(["width:100%;"]);
+const StyledTitle = /*#__PURE__*/styled__default["default"].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 dsSystem.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__default["default"].div.withConfig({
+  componentId: "sc-4jnp92-3"
+})(["font-size:", ";font-weight:", ";"], _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return dsSystem.toMobile(theme.fontSizes.title[600]);
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.fontWeights.regular;
+});
+const StyledIconContainer = /*#__PURE__*/styled__default["default"].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__default["default"].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__default["default"].div.withConfig({
+  componentId: "sc-4jnp92-6"
+})(["display:flex;align-items:flex-start;margin-top:6px;margin-right:6px;"]);
+const StyledCloseButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).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__default["default"].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 dsSystem.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__default["default"].div.withConfig({
+  componentId: "sc-4jnp92-9"
+})(["overflow:hidden;height:", ";", ";"], _ref22 => {
+  let {
+    isOpen
+  } = _ref22;
+  return isOpen ? 'auto' : '0px';
+}, _ref23 => {
+  let {
+    isAnimating,
+    isOpen,
+    height
+  } = _ref23;
+  return styleHelpers.handleAnimation(isAnimating, isOpen, height);
+});
+
+exports.StyledActionLink = StyledActionLink;
+exports.StyledBannerContainer = StyledBannerContainer;
+exports.StyledCloseButton = StyledCloseButton;
+exports.StyledCloseButtonContainer = StyledCloseButtonContainer;
+exports.StyledContent = StyledContent;
+exports.StyledIconContainer = StyledIconContainer;
+exports.StyledInnerContainer = StyledInnerContainer;
+exports.StyledSubTitle = StyledSubTitle;
+exports.StyledTextContent = StyledTextContent;
+exports.StyledTitle = StyledTitle;

package/cjs/MobileBanner/utils/bannerTypes.js

@@ -1,40 +1,12 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var bannerTypes_exports = {};
-__export(bannerTypes_exports, {
-  MOBILE_BANNER_TYPES: () => MOBILE_BANNER_TYPES
-});
-var React = __toESM(require("react"));
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
 const MOBILE_BANNER_TYPES = {
-  INFO: "info",
-  SUCCESS: "success",
-  WARNING: "warning",
-  ERROR: "error"
+  INFO: 'info',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  ERROR: 'error'
 };
-module.exports = __toCommonJS(bannerTypes_exports);
-//# sourceMappingURL=bannerTypes.js.map
+
+exports.MOBILE_BANNER_TYPES = MOBILE_BANNER_TYPES;

package/cjs/MobileBanner/utils/icons.js

@@ -1,54 +1,32 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var icons_exports = {};
-__export(icons_exports, {
-  icons: () => icons
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_ds_icons = require("@elliemae/ds-icons");
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var dsIcons = require('@elliemae/ds-icons');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
 const icons = {
-  success: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.SuccessFill, {
+  success: /*#__PURE__*/_jsx__default["default"](dsIcons.SuccessFill, {
     fill: "#207e56"
   }),
-  info: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.InfoFill, {
+  info: /*#__PURE__*/_jsx__default["default"](dsIcons.InfoFill, {
     fill: "#1e79c2"
   }),
-  error: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.AlertsDetailFill, {
+  error: /*#__PURE__*/_jsx__default["default"](dsIcons.AlertsDetailFill, {
     width: "24px",
     height: "24px",
     fill: "#c64252"
   }),
-  warning: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.WarningSquare, {
+  warning: /*#__PURE__*/_jsx__default["default"](dsIcons.WarningSquare, {
     width: "24px",
     height: "24px",
     fill: "#d17a00"
   })
 };
-module.exports = __toCommonJS(icons_exports);
-//# sourceMappingURL=icons.js.map
+
+exports.icons = icons;

package/cjs/MobileBanner/utils/styleHelpers.js

@@ -1,103 +1,54 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var styleHelpers_exports = {};
-__export(styleHelpers_exports, {
-  handleAnimation: () => handleAnimation,
-  handleBorderColor: () => handleBorderColor,
-  shrinkContainer: () => shrinkContainer,
-  slideIn: () => slideIn,
-  slideOut: () => slideOut,
-  spanContainer: () => spanContainer
-});
-var React = __toESM(require("react"));
-var import_ds_system = require("@elliemae/ds-system");
-var import_bannerTypes = require("./bannerTypes");
-const slideIn = import_ds_system.kfrm`
-  0% {
-    transform: translate3d(0, -100%, 0);
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-`;
-const slideOut = import_ds_system.kfrm`
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  60% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
-`;
-const spanContainer = (height) => import_ds_system.kfrm`
-  0% {
-    height: 0px;
-  }
-  100% {
-    height: ${height}px;
-  }
-`;
-const shrinkContainer = (height) => import_ds_system.kfrm`
-  0% {
-    height: ${height}px;
-  }
-  100% {
-    height: 0px;
-  }
-`;
-const handleBorderColor = (type, { colors }) => {
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var dsSystem = require('@elliemae/ds-system');
+var bannerTypes = require('./bannerTypes.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+const slideIn = dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n"])));
+const slideOut = dsSystem.kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\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 => dsSystem.kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ", "px;\n  }\n"])), height);
+const shrinkContainer = height => dsSystem.kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  0% {\n    height: ", "px;\n  }\n  100% {\n    height: 0px;\n  }\n"])), height);
+const handleBorderColor = (type, _ref) => {
+  let {
+    colors
+  } = _ref;
+
   switch (type) {
-    case import_bannerTypes.MOBILE_BANNER_TYPES.SUCCESS:
+    case bannerTypes.MOBILE_BANNER_TYPES.SUCCESS:
       return colors.success[900];
-    case import_bannerTypes.MOBILE_BANNER_TYPES.INFO:
+
+    case bannerTypes.MOBILE_BANNER_TYPES.INFO:
       return colors.brand[600];
-    case import_bannerTypes.MOBILE_BANNER_TYPES.WARNING:
+
+    case bannerTypes.MOBILE_BANNER_TYPES.WARNING:
       return colors.warning[900];
-    case import_bannerTypes.MOBILE_BANNER_TYPES.ERROR:
+
+    case bannerTypes.MOBILE_BANNER_TYPES.ERROR:
       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 import_ds_system.css`
-        animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;
-      `;
+      return dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);
     } else {
-      return import_ds_system.css`
-        animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;
-      `;
+      return dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? shrinkContainer(height) : slideOut);
     }
   }
 };
-module.exports = __toCommonJS(styleHelpers_exports);
-//# sourceMappingURL=styleHelpers.js.map
+
+exports.handleAnimation = handleAnimation;
+exports.handleBorderColor = handleBorderColor;
+exports.shrinkContainer = shrinkContainer;
+exports.slideIn = slideIn;
+exports.slideOut = slideOut;
+exports.spanContainer = spanContainer;