@elliemae/ds-banner 1.57.1 → 2.0.0-alpha.11

package/cjs/DSBanner.js

@@ -2,113 +2,103 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var React = require('react');
-var dsIcons = require('@elliemae/ds-icons');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+var react = require('react');
+var CloseX = require('@elliemae/ds-icons/CloseX');
 var reactDesc = require('react-desc');
-var utils_icons = require('./utils/icons.js');
+var icons = require('./utils/icons.js');
 var propTypes = require('./propTypes.js');
 var defaultProps = require('./defaultProps.js');
 var styles = require('./styles.js');
-require('./utils/bannerTypes.js');
-require('styled-components');
-require('@elliemae/ds-button');
-require('./utils/styleHelpers.js');
-require('@babel/runtime/helpers/taggedTemplateLiteral');
-require('@elliemae/ds-system');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var CloseX__default = /*#__PURE__*/_interopDefaultLegacy(CloseX);
 
-var DSBanner = function DSBanner(_ref) {
-  var type = _ref.type,
-      isOpen = _ref.isOpen,
-      onClose = _ref.onClose,
-      label = _ref.label,
-      body = _ref.body,
-      actionLink = _ref.actionLink,
-      showCloseButton = _ref.showCloseButton,
-      containerProps = _ref.containerProps;
-  var innerContainerRef = React.useRef(null);
-  var linkRef = React.useRef(null);
+var _CloseX;
 
-  var _useState = React.useState(isOpen),
-      _useState2 = _slicedToArray__default['default'](_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 = React.useState(false),
-      _useState4 = _slicedToArray__default['default'](_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__default["default"](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 = React.useState(0),
-      _useState6 = _slicedToArray__default['default'](_useState5, 2),
-      height = _useState6[0],
-      setHeight = _useState6[1];
-
-  React.useEffect(function () {
+const DSBanner = ({
+  type,
+  isOpen,
+  onClose,
+  label,
+  body,
+  actionLink,
+  showCloseButton,
+  containerProps
+}) => {
+  const innerContainerRef = react.useRef(null);
+  const linkRef = react.useRef(null);
+  const [current, setCurrent] = react.useState(isOpen);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [height, setHeight] = react.useState(0);
+  react.useEffect(() => {
     if (innerContainerRef.current) {
       setHeight(innerContainerRef.current.offsetHeight);
     }
   }, [isAnimating, isOpen]);
-  React.useLayoutEffect(function () {
+  react.useLayoutEffect(() => {
     if (isOpen !== current || isOpen) setIsAnimating(true);else setIsAnimating(false);
   }, [isOpen, current]);
-  var handleOnKeyDown = React.useCallback(function (e) {
+  const handleOnKeyDown = react.useCallback(e => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
       if (linkRef.current) linkRef.current.click();
     }
   }, []);
   if (!isAnimating && !isOpen) return null;
-  return /*#__PURE__*/React__default['default'].createElement(styles.StyledBannerContainer, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(styles.StyledBannerContainer, _objectSpread(_objectSpread({
     type: type,
     isOpen: isOpen,
     isAnimating: isAnimating,
-    onAnimationEnd: function onAnimationEnd() {
-      return setCurrent(isOpen);
-    },
+    onAnimationEnd: () => setCurrent(isOpen),
     height: height,
     "data-testid": "ds-banner-container"
-  }, containerProps), /*#__PURE__*/React__default['default'].createElement(styles.StyledInnerContainer, {
-    type: type,
-    isOpen: isOpen,
-    ref: innerContainerRef,
-    isAnimating: isAnimating,
-    "data-testid": "ds-banner",
-    role: "alert"
-  }, /*#__PURE__*/React__default['default'].createElement(styles.StyledIconContainer, {
-    "data-testid": "ds-banner-icon"
-  }, utils_icons.icons[type]), /*#__PURE__*/React__default['default'].createElement(styles.StyledTitle, null, label), /*#__PURE__*/React__default['default'].createElement(styles.StyledSubTitle, null, /*#__PURE__*/React__default['default'].createElement("span", null, body), actionLink && /*#__PURE__*/React__default['default'].createElement(styles.StyledActionLink, {
-    "data-testid": "ds-banner-action-link",
-    onClick: actionLink.onClick,
-    href: actionLink.href,
-    ref: linkRef,
-    onKeyDown: handleOnKeyDown,
-    tabIndex: 0,
-    isBodyEmpty: body
-  }, actionLink.label)), showCloseButton && /*#__PURE__*/React__default['default'].createElement(styles.StyledCloseButton, {
-    "data-testid": "ds-banner-close-button",
-    buttonType: "secondary",
-    onClick: onClose,
-    "aria-label": "Close icon",
-    icon: /*#__PURE__*/React__default['default'].createElement(dsIcons.CloseX, {
-      width: "12px",
-      height: "12px"
+  }, containerProps), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(styles.StyledInnerContainer, {
+      type: type,
+      isOpen: isOpen,
+      ref: innerContainerRef,
+      isAnimating: isAnimating,
+      "data-testid": "ds-banner",
+      role: "alert",
+      children: [/*#__PURE__*/_jsx__default["default"](styles.StyledIconContainer, {
+        "data-testid": "ds-banner-icon"
+      }, void 0, icons.icons[type]), /*#__PURE__*/_jsx__default["default"](styles.StyledTitle, {}, void 0, label), /*#__PURE__*/_jsx__default["default"](styles.StyledSubTitle, {}, void 0, /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, body), actionLink && /*#__PURE__*/jsxRuntime.jsx(styles.StyledActionLink, {
+        "data-testid": "ds-banner-action-link",
+        onClick: actionLink.onClick,
+        href: actionLink.href,
+        ref: linkRef,
+        onKeyDown: handleOnKeyDown,
+        tabIndex: 0,
+        isBodyEmpty: body,
+        children: actionLink.label
+      })), showCloseButton && /*#__PURE__*/_jsx__default["default"](styles.StyledCloseButton, {
+        "data-testid": "ds-banner-close-button",
+        buttonType: "secondary",
+        onClick: onClose,
+        "aria-label": "Close icon",
+        icon: _CloseX || (_CloseX = /*#__PURE__*/_jsx__default["default"](CloseX__default["default"], {
+          width: "12px",
+          height: "12px"
+        }))
+      })]
     })
-  })));
+  }));
 };
 
 DSBanner.defaultProps = defaultProps.defaultProps;
-DSBanner.propTypes = propTypes.propTypes;
-var DSBannerWithSchema = reactDesc.describe(DSBanner);
+const DSBannerWithSchema = reactDesc.describe(DSBanner);
 DSBannerWithSchema.propTypes = propTypes.propTypes;
 
 exports.DSBannerWithSchema = DSBannerWithSchema;
-exports['default'] = DSBanner;
-//# sourceMappingURL=DSBanner.js.map
+exports["default"] = DSBanner;

package/cjs/defaultProps.js

@@ -2,26 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var utils_bannerTypes = require('./utils/bannerTypes.js');
+var bannerTypes = require('./utils/bannerTypes.js');
 
-var defaultProps = {
+const defaultProps = {
   containerProps: {},
   label: '',
   body: '',
-  type: utils_bannerTypes.BANNER_TYPES.INFO,
+  type: bannerTypes.BANNER_TYPES.INFO,
   isOpen: true,
-  onClose: function onClose() {
-    return null;
-  },
+  onClose: () => null,
   showCloseButton: true,
   actionLink: {
     label: '',
-    onClick: function onClick() {
-      return null;
-    },
+    onClick: () => null,
     href: ''
   }
 };
 
 exports.defaultProps = defaultProps;
-//# sourceMappingURL=defaultProps.js.map

package/cjs/index.d.js

@@ -1,3 +1,2 @@
 'use strict';
 
-//# sourceMappingURL=index.d.js.map

package/cjs/index.js

@@ -3,25 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var DSBanner = require('./DSBanner.js');
-var utils_bannerTypes = require('./utils/bannerTypes.js');
-require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/slicedToArray');
-require('react');
-require('@elliemae/ds-icons');
-require('react-desc');
-require('./utils/icons.js');
-require('./propTypes.js');
-require('./defaultProps.js');
-require('./styles.js');
-require('styled-components');
-require('@elliemae/ds-button');
-require('./utils/styleHelpers.js');
-require('@babel/runtime/helpers/taggedTemplateLiteral');
-require('@elliemae/ds-system');
+var bannerTypes = require('./utils/bannerTypes.js');
 
 
 
 exports.DSBannerWithSchema = DSBanner.DSBannerWithSchema;
-exports.default = DSBanner['default'];
-exports.BANNER_TYPES = utils_bannerTypes.BANNER_TYPES;
-//# sourceMappingURL=index.js.map
+exports["default"] = DSBanner["default"];
+exports.BANNER_TYPES = bannerTypes.BANNER_TYPES;

package/cjs/propTypes.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var reactDesc = require('react-desc');
-var utils_bannerTypes = require('./utils/bannerTypes.js');
+var bannerTypes = require('./utils/bannerTypes.js');
 
-var propTypes = {
+const propTypes = {
   containerProps: reactDesc.PropTypes.object.description('Set of Properties attached to the main container').defaultValue({}),
   label: reactDesc.PropTypes.string.description('banner s label').defaultValue(''),
   body: reactDesc.PropTypes.string.description('banner s body content').defaultValue(''),
-  type: reactDesc.PropTypes.oneOf(Object.values(utils_bannerTypes.BANNER_TYPES)).description('banner s type').defaultValue(utils_bannerTypes.BANNER_TYPES.INFO),
+  type: reactDesc.PropTypes.oneOf(Object.values(bannerTypes.BANNER_TYPES)).description('banner s type').defaultValue(bannerTypes.BANNER_TYPES.INFO),
   onClose: reactDesc.PropTypes.func.description('function executed when the banner closes'),
   isOpen: reactDesc.PropTypes.bool.description('whether the banner is open or closed').defaultValue(true),
   showCloseButton: reactDesc.PropTypes.bool.description('whether to show close button or not').defaultValue(true),
@@ -21,4 +21,3 @@ var propTypes = {
 };
 
 exports.propTypes = propTypes;
-//# sourceMappingURL=propTypes.js.map

package/cjs/styles.js

@@ -3,97 +3,76 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('styled-components');
-var DSButton = require('@elliemae/ds-button');
-var utils_styleHelpers = require('./utils/styleHelpers.js');
-require('@babel/runtime/helpers/taggedTemplateLiteral');
-require('@elliemae/ds-system');
-require('./utils/bannerTypes.js');
+var DSButton = require('@elliemae/ds-basic/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);
 
-var StyledBannerContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledBannerContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-ffu2hq-0"
-})(["overflow:hidden;height:", ";", ";"], function (_ref) {
-  var isOpen = _ref.isOpen;
-  return isOpen ? 'auto' : '0px';
-}, function (_ref2) {
-  var isAnimating = _ref2.isAnimating,
-      isOpen = _ref2.isOpen,
-      height = _ref2.height;
-  return utils_styleHelpers.handleAnimation(isAnimating, isOpen, height);
-});
-var StyledInnerContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["overflow:hidden;height:", ";", ";"], ({
+  isOpen
+}) => isOpen ? 'auto' : '0px', ({
+  isAnimating,
+  isOpen,
+  height
+}) => styleHelpers.handleAnimation(isAnimating, isOpen, height));
+const StyledInnerContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-ffu2hq-1"
-})(["padding-right:6px;display:flex;align-items:center;min-height:41px;width:100%;background-color:", ";border-bottom:5px solid ", ";", ";"], function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.colors.neutral['000'];
-}, function (_ref4) {
-  var type = _ref4.type,
-      theme = _ref4.theme;
-  return utils_styleHelpers.handleBorderColor(type, theme);
-}, function (_ref5) {
-  var isAnimating = _ref5.isAnimating,
-      isOpen = _ref5.isOpen;
-  return utils_styleHelpers.handleAnimation(isAnimating, isOpen);
-});
-var StyledIconContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["padding-right:6px;display:flex;align-items:center;min-height:41px;width:100%;background-color:", ";border-bottom:5px solid ", ";", ";"], ({
+  theme
+}) => theme.colors.neutral['000'], ({
+  type,
+  theme
+}) => styleHelpers.handleBorderColor(type, theme), ({
+  isAnimating,
+  isOpen
+}) => styleHelpers.handleAnimation(isAnimating, isOpen));
+const StyledIconContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-ffu2hq-2"
-})(["margin-right:", ";margin-left:", ";"], function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.space.xxs;
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.space.xs;
-});
-var StyledTitle = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["margin-right:", ";margin-left:", ";"], ({
+  theme
+}) => theme.space.xxs, ({
+  theme
+}) => theme.space.xs);
+const StyledTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-ffu2hq-3"
-})(["color:", ";font-size:", ";font-weight:", ";white-space:nowrap;"], function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.colors.neutral[700];
-}, function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.fontSizes.label[400];
-}, function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.fontWeights.semibold;
-});
-var StyledSubTitle = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["color:", ";font-size:", ";font-weight:", ";white-space:nowrap;"], ({
+  theme
+}) => theme.colors.neutral[700], ({
+  theme
+}) => theme.fontSizes.label[400], ({
+  theme
+}) => theme.fontWeights.semibold);
+const StyledSubTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-ffu2hq-4"
-})(["width:100%;margin-left:", ";font-size:", ";font-weight:", ";"], function (_ref11) {
-  var theme = _ref11.theme;
-  return theme.space.xs;
-}, function (_ref12) {
-  var theme = _ref12.theme;
-  return theme.fontSizes.subTitle[400];
-}, function (_ref13) {
-  var theme = _ref13.theme;
-  return theme.fontWeights.regular;
-});
-var StyledActionLink = /*#__PURE__*/styled__default['default'].a.withConfig({
+})(["width:100%;margin-left:", ";font-size:", ";font-weight:", ";"], ({
+  theme
+}) => theme.space.xs, ({
+  theme
+}) => theme.fontSizes.subTitle[400], ({
+  theme
+}) => theme.fontWeights.regular);
+const StyledActionLink = /*#__PURE__*/styled__default["default"].a.withConfig({
   componentId: "sc-ffu2hq-5"
-})(["margin-left:", ";white-space:nowrap;text-decoration:none;line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], function (_ref14) {
-  var theme = _ref14.theme,
-      isBodyEmpty = _ref14.isBodyEmpty;
-  return isBodyEmpty ? theme.space.xs : 0;
-}, function (_ref15) {
-  var theme = _ref15.theme;
-  return theme.fontSizes.hyperlink[400];
-}, function (_ref16) {
-  var theme = _ref16.theme;
-  return theme.fontWeights.regular;
-}, function (_ref17) {
-  var theme = _ref17.theme;
-  return theme.colors.brand[600];
-});
-var StyledCloseButton = /*#__PURE__*/styled__default['default'](DSButton__default['default']).withConfig({
+})(["margin-left:", ";white-space:nowrap;text-decoration:none;line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], ({
+  theme,
+  isBodyEmpty
+}) => isBodyEmpty ? theme.space.xs : 0, ({
+  theme
+}) => theme.fontSizes.hyperlink[400], ({
+  theme
+}) => theme.fontWeights.regular, ({
+  theme
+}) => theme.colors.brand[600]);
+const StyledCloseButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
   componentId: "sc-ffu2hq-6"
-})(["margin-left:", ";&:not(focus){border:transparent;}"], function (_ref18) {
-  var theme = _ref18.theme;
-  return theme.space.s;
-});
+})(["margin-left:", ";&:not(focus){border:transparent;}"], ({
+  theme
+}) => theme.space.s);
 
 exports.StyledActionLink = StyledActionLink;
 exports.StyledBannerContainer = StyledBannerContainer;
@@ -102,4 +81,3 @@ exports.StyledIconContainer = StyledIconContainer;
 exports.StyledInnerContainer = StyledInnerContainer;
 exports.StyledSubTitle = StyledSubTitle;
 exports.StyledTitle = StyledTitle;
-//# sourceMappingURL=styles.js.map

package/cjs/utils/bannerTypes.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var BANNER_TYPES = {
+const BANNER_TYPES = {
   INFO: 'info',
   SUCCESS: 'success',
   WARNING: 'warning',
@@ -10,4 +10,3 @@ var BANNER_TYPES = {
 };
 
 exports.BANNER_TYPES = BANNER_TYPES;
-//# sourceMappingURL=bannerTypes.js.map

package/cjs/utils/icons.js

@@ -2,30 +2,38 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var dsIcons = require('@elliemae/ds-icons');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var SuccessFill = require('@elliemae/ds-icons/SuccessFill');
+var InfoFill = require('@elliemae/ds-icons/InfoFill');
+var AlertsDetailFill = require('@elliemae/ds-icons/AlertsDetailFill');
+var WarningSquare = require('@elliemae/ds-icons/WarningSquare');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var SuccessFill__default = /*#__PURE__*/_interopDefaultLegacy(SuccessFill);
+var InfoFill__default = /*#__PURE__*/_interopDefaultLegacy(InfoFill);
+var AlertsDetailFill__default = /*#__PURE__*/_interopDefaultLegacy(AlertsDetailFill);
+var WarningSquare__default = /*#__PURE__*/_interopDefaultLegacy(WarningSquare);
 
-var icons = {
-  success: /*#__PURE__*/React__default['default'].createElement(dsIcons.SuccessFill, {
+const icons = {
+  success: /*#__PURE__*/_jsx__default["default"](SuccessFill__default["default"], {
     fill: "#207e56",
     width: "20px",
     height: "20px"
   }),
-  info: /*#__PURE__*/React__default['default'].createElement(dsIcons.InfoFill, {
+  info: /*#__PURE__*/_jsx__default["default"](InfoFill__default["default"], {
     fill: "#1e79c2",
     width: "20px",
     height: "20px"
   }),
-  danger: /*#__PURE__*/React__default['default'].createElement(dsIcons.AlertsDetailFill, {
+  danger: /*#__PURE__*/_jsx__default["default"](AlertsDetailFill__default["default"], {
     fill: "#c64252",
     width: "20px",
     height: "20px"
   }),
-  warning: /*#__PURE__*/React__default['default'].createElement(dsIcons.WarningSquare, {
+  warning: /*#__PURE__*/_jsx__default["default"](WarningSquare__default["default"], {
     fill: "#d17a00",
     width: "20px",
     height: "20px"
@@ -33,4 +41,3 @@ var icons = {
 };
 
 exports.icons = icons;
-//# sourceMappingURL=icons.js.map

package/cjs/utils/styleHelpers.js

@@ -4,53 +4,46 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var dsSystem = require('@elliemae/ds-system');
-var utils_bannerTypes = require('./bannerTypes.js');
+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;
-var 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"])));
-var 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 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"])));
 
-var spanContainer = function spanContainer(height) {
-  return dsSystem.kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ", "px;\n  }\n"])), height);
-};
-
-var shrinkContainer = function shrinkContainer(height) {
-  return dsSystem.kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n  0% {\n    height: ", "px;\n  }\n  100% {\n    height: 0px;\n  }\n"])), height);
-};
+const spanContainer = height => dsSystem.kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ", "px;\n  }\n"])), height);
 
-var handleBorderColor = function handleBorderColor(type, _ref) {
-  var colors = _ref.colors;
+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, {
+  colors
+}) => {
   switch (type) {
-    case utils_bannerTypes.BANNER_TYPES.SUCCESS:
+    case bannerTypes.BANNER_TYPES.SUCCESS:
       return colors.success[900];
 
-    case utils_bannerTypes.BANNER_TYPES.INFO:
+    case bannerTypes.BANNER_TYPES.INFO:
       return colors.brand[600];
 
-    case utils_bannerTypes.BANNER_TYPES.WARNING:
+    case bannerTypes.BANNER_TYPES.WARNING:
       return colors.warning[900];
 
-    case utils_bannerTypes.BANNER_TYPES.DANGER:
+    case bannerTypes.BANNER_TYPES.DANGER:
       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 dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);
+      return dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);
     } else {
-      return dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default['default'](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? shrinkContainer(height) : slideOut);
+      return dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? shrinkContainer(height) : slideOut);
     }
   }
 };
 
 exports.handleAnimation = handleAnimation;
 exports.handleBorderColor = handleBorderColor;
-//# sourceMappingURL=styleHelpers.js.map