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

package/esm/DSBanner.js

@@ -1,103 +1,93 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';
-import { CloseX } from '@elliemae/ds-icons';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useState, useEffect, useLayoutEffect, useCallback } 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, StyledTitle, StyledSubTitle, StyledActionLink, StyledCloseButton } from './styles.js';
-import './utils/bannerTypes.js';
-import 'styled-components';
-import '@elliemae/ds-button';
-import './utils/styleHelpers.js';
-import '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import '@elliemae/ds-system';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
-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 = useRef(null);
-  var linkRef = 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 DSBanner = ({
+  type,
+  isOpen,
+  onClose,
+  label,
+  body,
+  actionLink,
+  showCloseButton,
+  containerProps
+}) => {
+  const innerContainerRef = useRef(null);
+  const linkRef = 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]);
-  useLayoutEffect(function () {
+  useLayoutEffect(() => {
     if (isOpen !== current || isOpen) setIsAnimating(true);else setIsAnimating(false);
   }, [isOpen, current]);
-  var handleOnKeyDown = useCallback(function (e) {
+  const handleOnKeyDown = useCallback(e => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
       if (linkRef.current) linkRef.current.click();
     }
   }, []);
   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,
     "data-testid": "ds-banner-container"
-  }, containerProps), /*#__PURE__*/React.createElement(StyledInnerContainer, {
-    type: type,
-    isOpen: isOpen,
-    ref: innerContainerRef,
-    isAnimating: isAnimating,
-    "data-testid": "ds-banner",
-    role: "alert"
-  }, /*#__PURE__*/React.createElement(StyledIconContainer, {
-    "data-testid": "ds-banner-icon"
-  }, icons[type]), /*#__PURE__*/React.createElement(StyledTitle, null, label), /*#__PURE__*/React.createElement(StyledSubTitle, null, /*#__PURE__*/React.createElement("span", null, body), actionLink && /*#__PURE__*/React.createElement(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.createElement(StyledCloseButton, {
-    "data-testid": "ds-banner-close-button",
-    buttonType: "secondary",
-    onClick: onClose,
-    "aria-label": "Close icon",
-    icon: /*#__PURE__*/React.createElement(CloseX, {
-      width: "12px",
-      height: "12px"
+  }, containerProps), {}, {
+    children: /*#__PURE__*/jsxs(StyledInnerContainer, {
+      type: type,
+      isOpen: isOpen,
+      ref: innerContainerRef,
+      isAnimating: isAnimating,
+      "data-testid": "ds-banner",
+      role: "alert",
+      children: [/*#__PURE__*/_jsx(StyledIconContainer, {
+        "data-testid": "ds-banner-icon"
+      }, void 0, icons[type]), /*#__PURE__*/_jsx(StyledTitle, {}, void 0, label), /*#__PURE__*/_jsx(StyledSubTitle, {}, void 0, /*#__PURE__*/_jsx("span", {}, void 0, body), actionLink && /*#__PURE__*/jsx(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(StyledCloseButton, {
+        "data-testid": "ds-banner-close-button",
+        buttonType: "secondary",
+        onClick: onClose,
+        "aria-label": "Close icon",
+        icon: _CloseX || (_CloseX = /*#__PURE__*/_jsx(CloseX, {
+          width: "12px",
+          height: "12px"
+        }))
+      })]
     })
-  })));
+  }));
 };
 
 DSBanner.defaultProps = defaultProps;
-DSBanner.propTypes = propTypes;
-var DSBannerWithSchema = describe(DSBanner);
+const DSBannerWithSchema = describe(DSBanner);
 DSBannerWithSchema.propTypes = propTypes;
 
 export { DSBannerWithSchema, DSBanner as default };
-//# sourceMappingURL=DSBanner.js.map

package/esm/defaultProps.js

@@ -1,23 +1,18 @@
 import { BANNER_TYPES } from './utils/bannerTypes.js';
 
-var defaultProps = {
+const defaultProps = {
   containerProps: {},
   label: '',
   body: '',
   type: BANNER_TYPES.INFO,
   isOpen: true,
-  onClose: function onClose() {
-    return null;
-  },
+  onClose: () => null,
   showCloseButton: true,
   actionLink: {
     label: '',
-    onClick: function onClick() {
-      return null;
-    },
+    onClick: () => null,
     href: ''
   }
 };
 
 export { defaultProps };
-//# sourceMappingURL=defaultProps.js.map

package/esm/index.d.js

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

package/esm/index.js

@@ -1,17 +1,2 @@
 export { DSBannerWithSchema, default } from './DSBanner.js';
 export { BANNER_TYPES } from './utils/bannerTypes.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'react';
-import '@elliemae/ds-icons';
-import 'react-desc';
-import './utils/icons.js';
-import './propTypes.js';
-import './defaultProps.js';
-import './styles.js';
-import 'styled-components';
-import '@elliemae/ds-button';
-import './utils/styleHelpers.js';
-import '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import '@elliemae/ds-system';
-//# sourceMappingURL=index.js.map

package/esm/propTypes.js

@@ -1,7 +1,7 @@
 import { PropTypes } from 'react-desc';
 import { BANNER_TYPES } from './utils/bannerTypes.js';
 
-var propTypes = {
+const propTypes = {
   containerProps: PropTypes.object.description('Set of Properties attached to the main container').defaultValue({}),
   label: PropTypes.string.description('banner s label').defaultValue(''),
   body: PropTypes.string.description('banner s body content').defaultValue(''),
@@ -17,4 +17,3 @@ var propTypes = {
 };
 
 export { propTypes };
-//# sourceMappingURL=propTypes.js.map

package/esm/styles.js

@@ -1,90 +1,68 @@
 import styled from 'styled-components';
-import DSButton from '@elliemae/ds-button';
+import DSButton from '@elliemae/ds-basic/Button';
 import { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';
-import '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import '@elliemae/ds-system';
-import './utils/bannerTypes.js';
 
-var StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
+const StyledBannerContainer = /*#__PURE__*/styled.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 handleAnimation(isAnimating, isOpen, height);
-});
-var StyledInnerContainer = /*#__PURE__*/styled.div.withConfig({
+})(["overflow:hidden;height:", ";", ";"], ({
+  isOpen
+}) => isOpen ? 'auto' : '0px', ({
+  isAnimating,
+  isOpen,
+  height
+}) => handleAnimation(isAnimating, isOpen, height));
+const StyledInnerContainer = /*#__PURE__*/styled.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 handleBorderColor(type, theme);
-}, function (_ref5) {
-  var isAnimating = _ref5.isAnimating,
-      isOpen = _ref5.isOpen;
-  return handleAnimation(isAnimating, isOpen);
-});
-var StyledIconContainer = /*#__PURE__*/styled.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
+}) => handleBorderColor(type, theme), ({
+  isAnimating,
+  isOpen
+}) => handleAnimation(isAnimating, isOpen));
+const StyledIconContainer = /*#__PURE__*/styled.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.div.withConfig({
+})(["margin-right:", ";margin-left:", ";"], ({
+  theme
+}) => theme.space.xxs, ({
+  theme
+}) => theme.space.xs);
+const StyledTitle = /*#__PURE__*/styled.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.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.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.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.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(DSButton).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(DSButton).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);
 
 export { StyledActionLink, StyledBannerContainer, StyledCloseButton, StyledIconContainer, StyledInnerContainer, StyledSubTitle, StyledTitle };
-//# sourceMappingURL=styles.js.map

package/esm/utils/bannerTypes.js

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

package/esm/utils/icons.js

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

package/esm/utils/styleHelpers.js

@@ -3,20 +3,16 @@ import { kfrm, css } from '@elliemae/ds-system';
 import { 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"])));
+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"])));
 
-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);
-};
+const spanContainer = height => kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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 => kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  0% {\n    height: ", "px;\n  }\n  100% {\n    height: 0px;\n  }\n"])), height);
 
+const handleBorderColor = (type, {
+  colors
+}) => {
   switch (type) {
     case BANNER_TYPES.SUCCESS:
       return colors.success[900];
@@ -31,9 +27,7 @@ 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);
@@ -44,4 +38,3 @@ var handleAnimation = function handleAnimation(isAnimating, isOpen) {
 };
 
 export { handleAnimation, handleBorderColor };
-//# sourceMappingURL=styleHelpers.js.map

package/package.json

@@ -1,14 +1,58 @@
 {
   "name": "@elliemae/ds-banner",
-  "version": "1.57.1",
+  "version": "2.0.0-alpha.11",
   "license": "MIT",
-  "description": "Ellie Mae - Dim Sum - Banner",
-  "module": "esm/index.js",
-  "main": "cjs/index.js",
+  "description": "ICE MT - Dimsum - Banner",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
+    },
+    "./utils/styleHelpers": {
+      "import": "./esm/utils/styleHelpers.js",
+      "require": "./cjs/utils/styleHelpers.js"
+    },
+    "./utils/icons": {
+      "import": "./esm/utils/icons.js",
+      "require": "./cjs/utils/icons.js"
+    },
+    "./utils/bannerTypes": {
+      "import": "./esm/utils/bannerTypes.js",
+      "require": "./cjs/utils/bannerTypes.js"
+    },
+    "./styles": {
+      "import": "./esm/styles.js",
+      "require": "./cjs/styles.js"
+    },
+    "./propTypes": {
+      "import": "./esm/propTypes.js",
+      "require": "./cjs/propTypes.js"
+    },
+    "./DSBanner": {
+      "import": "./esm/DSBanner.js",
+      "require": "./cjs/DSBanner.js"
+    },
+    "./defaultProps": {
+      "import": "./esm/defaultProps.js",
+      "require": "./cjs/defaultProps.js"
+    }
+  },
   "sideEffects": [
     "*.css",
     "*.scss"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "engines": {
+    "npm": ">=7",
+    "node": ">=14"
+  },
+  "author": "ICE MT",
   "scripts": {
     "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
     "prebuild": "exit 0",
@@ -16,22 +60,21 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-basic": "1.57.1",
-    "@elliemae/ds-icons": "1.57.1",
-    "@elliemae/ds-system": "1.57.1",
-    "react-desc": "^4.1.2"
+    "@elliemae/ds-basic": "2.0.0-alpha.11",
+    "@elliemae/ds-classnames": "2.0.0-alpha.11"
   },
   "devDependencies": {
-    "styled-components": "~5.3.0"
+    "styled-components": "~5.3.1"
   },
   "peerDependencies": {
-    "lodash": "^4.17.20",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "styled-components": "^5.3.0"
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.1"
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }

package/types/DSBanner.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import type { BannerPropsT } from './index.d';
+declare const DSBanner: {
+    ({ type, isOpen, onClose, label, body, actionLink, showCloseButton, containerProps, }: BannerPropsT): JSX.Element;
+    defaultProps: {
+        containerProps: {};
+        label: string;
+        body: string;
+        type: "info";
+        isOpen: boolean;
+        onClose: () => null;
+        showCloseButton: boolean;
+        actionLink: {
+            label: string;
+            onClick: () => null;
+            href: string;
+        };
+    };
+    propTypes: {
+        containerProps: any;
+        label: any;
+        body: any;
+        type: any;
+        onClose: any;
+        isOpen: any;
+        showCloseButton: any;
+        actionLink: any;
+    };
+};
+declare const DSBannerWithSchema: any;
+export default DSBanner;
+export { DSBannerWithSchema };

package/types/defaultProps.d.ts

@@ -0,0 +1,14 @@
+export declare const defaultProps: {
+    containerProps: {};
+    label: string;
+    body: string;
+    type: "info";
+    isOpen: boolean;
+    onClose: () => null;
+    showCloseButton: boolean;
+    actionLink: {
+        label: string;
+        onClick: () => null;
+        href: string;
+    };
+};

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './DSBanner';
+export * from './DSBanner';
+export * from './utils/bannerTypes';

package/types/propTypes.d.ts

@@ -0,0 +1,10 @@
+export declare const propTypes: {
+    containerProps: any;
+    label: any;
+    body: any;
+    type: any;
+    onClose: any;
+    isOpen: any;
+    showCloseButton: any;
+    actionLink: any;
+};

package/types/styles.d.ts

@@ -0,0 +1,8 @@
+import type { StyledActionLinkT, StyledBannerContainerT, StyledInnerContainerT } from './index.d';
+export declare const StyledBannerContainer: import("styled-components").StyledComponent<"div", any, StyledBannerContainerT, never>;
+export declare const StyledInnerContainer: import("styled-components").StyledComponent<"div", any, StyledInnerContainerT, never>;
+export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSubTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledActionLink: import("styled-components").StyledComponent<"a", any, StyledActionLinkT, never>;
+export declare const StyledCloseButton: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;

package/types/tests/DSBanner.events.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/tests/DSBanner.test.d.ts

@@ -0,0 +1 @@
+export {};