@elliemae/ds-banner 2.3.0-alpha.9 → 2.3.0-next.3

package/esm/styles.js

@@ -0,0 +1,131 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { styled } from '@elliemae/ds-system';
+import DSButton from '@elliemae/ds-button';
+import { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+const StyledBannerContainer = styled('div', {
+  name: 'DS-Banner',
+  slot: 'root'
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  height: ", ";\n  ", ";\n"])), _ref => {
+  let {
+    isOpen
+  } = _ref;
+  return isOpen ? 'auto' : '0px';
+}, _ref2 => {
+  let {
+    isAnimating,
+    isOpen,
+    height
+  } = _ref2;
+  return handleAnimation(isAnimating, isOpen, height);
+});
+const StyledInnerContainer = styled('div', {
+  name: 'DS-Banner',
+  slot: 'innerContainer'
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-right: 6px;\n  display: grid;\n  align-items: center;\n  min-height: 41px;\n  width: 100%;\n  background-color: ", ";\n  border-bottom: 5px solid ", ";\n  ", ";\n  &:focus {\n    position: relative;\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      pointer-events: none;\n      border-radius: 2px;\n      width: calc(100%);\n      border: 2px solid #1e79c2;\n      height: calc(100% + 4px);\n    }\n  }\n  grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;\n"])), _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral['000'];
+}, _ref4 => {
+  let {
+    type,
+    theme
+  } = _ref4;
+  return handleBorderColor(type, theme);
+}, _ref5 => {
+  let {
+    isAnimating,
+    isOpen
+  } = _ref5;
+  return handleAnimation(isAnimating, isOpen);
+});
+const StyledIconContainer = styled('div', {
+  name: 'DS-Banner',
+  slot: 'iconContainer'
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  margin-left: ", ";\n"])), _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.space.xxs;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.space.xs;
+});
+const StyledTitle = styled('div', {
+  name: 'DS-Banner',
+  slot: 'title'
+})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n"])), _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.neutral[700];
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.fontSizes.label[400];
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.fontWeights.semibold;
+});
+const StyledSubTitle = styled('div', {
+  name: 'DS-Banner',
+  slot: 'subtitle'
+})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin-left: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n"])), _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.space.xs;
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.fontSizes.subTitle[400];
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.fontWeights.regular;
+});
+const StyledActionLink = styled('a', {
+  name: 'DS-Banner',
+  slot: 'action'
+})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  white-space: nowrap;\n  text-decoration: none;\n  line-height: 1.1;\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n"])), _ref14 => {
+  let {
+    theme,
+    isBodyEmpty
+  } = _ref14;
+  return isBodyEmpty ? theme.space.xs : 0;
+}, _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.fontSizes.hyperlink[400];
+}, _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.fontWeights.regular;
+}, _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.colors.brand[600];
+});
+const StyledCloseButton = styled(DSButton, {
+  name: 'DS-Banner',
+  slot: 'closeButton'
+})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  &:not(focus) {\n    border: transparent;\n  }\n"])), _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.space.xxs;
+});
+
+export { StyledActionLink, StyledBannerContainer, StyledCloseButton, StyledIconContainer, StyledInnerContainer, StyledSubTitle, StyledTitle };

package/esm/utils/bannerTypes.js

@@ -0,0 +1,8 @@
+const BANNER_TYPES = {
+  INFO: 'info',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  DANGER: 'danger'
+};
+
+export { BANNER_TYPES };

package/esm/utils/icons.js

@@ -0,0 +1,28 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { SuccessFill, InfoFill, AlertsDetailFill, WarningSquare } from '@elliemae/ds-icons';
+
+const icons = {
+  success: /*#__PURE__*/_jsx(SuccessFill, {
+    fill: "#207e56",
+    width: "20px",
+    height: "20px"
+  }),
+  info: /*#__PURE__*/_jsx(InfoFill, {
+    fill: "#1e79c2",
+    width: "20px",
+    height: "20px"
+  }),
+  danger: /*#__PURE__*/_jsx(AlertsDetailFill, {
+    fill: "#c64252",
+    width: "20px",
+    height: "20px"
+  }),
+  warning: /*#__PURE__*/_jsx(WarningSquare, {
+    fill: "#d17a00",
+    width: "20px",
+    height: "20px"
+  })
+};
+
+export { icons };

package/esm/utils/styleHelpers.js

@@ -0,0 +1,44 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { kfrm, css } from '@elliemae/ds-system';
+import { 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;
+
+  switch (type) {
+    case BANNER_TYPES.SUCCESS:
+      return colors.success[900];
+
+    case BANNER_TYPES.INFO:
+      return colors.brand[600];
+
+    case BANNER_TYPES.WARNING:
+      return colors.warning[900];
+
+    case BANNER_TYPES.DANGER:
+      return colors.danger[900];
+  }
+};
+const handleAnimation = function (isAnimating, isOpen) {
+  let height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+
+  if (isAnimating) {
+    if (isOpen) {
+      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);
+    } else {
+      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        animation: ", " 0.5s ease-in;\n      "])), height ? shrinkContainer(height) : slideOut);
+    }
+  }
+};
+
+export { handleAnimation, handleBorderColor };

package/package.json

@@ -1,46 +1,43 @@
 {
   "name": "@elliemae/ds-banner",
-  "version": "2.3.0-alpha.9",
+  "version": "2.3.0-next.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Banner",
-  "files": [
-    "dist"
-  ],
-  "module": "./dist/esm/index.js",
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/types/index.d.ts",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
     },
     "./utils/styleHelpers": {
-      "import": "./dist/esm/utils/styleHelpers.js",
-      "require": "./dist/cjs/utils/styleHelpers.js"
+      "import": "./esm/utils/styleHelpers.js",
+      "require": "./cjs/utils/styleHelpers.js"
     },
     "./utils/icons": {
-      "import": "./dist/esm/utils/icons.js",
-      "require": "./dist/cjs/utils/icons.js"
+      "import": "./esm/utils/icons.js",
+      "require": "./cjs/utils/icons.js"
     },
     "./utils/bannerTypes": {
-      "import": "./dist/esm/utils/bannerTypes.js",
-      "require": "./dist/cjs/utils/bannerTypes.js"
+      "import": "./esm/utils/bannerTypes.js",
+      "require": "./cjs/utils/bannerTypes.js"
     },
     "./styles": {
-      "import": "./dist/esm/styles.js",
-      "require": "./dist/cjs/styles.js"
+      "import": "./esm/styles.js",
+      "require": "./cjs/styles.js"
     },
     "./propTypes": {
-      "import": "./dist/esm/propTypes.js",
-      "require": "./dist/cjs/propTypes.js"
+      "import": "./esm/propTypes.js",
+      "require": "./cjs/propTypes.js"
     },
     "./DSBanner": {
-      "import": "./dist/esm/DSBanner.js",
-      "require": "./dist/cjs/DSBanner.js"
+      "import": "./esm/DSBanner.js",
+      "require": "./cjs/DSBanner.js"
     },
     "./defaultProps": {
-      "import": "./dist/esm/defaultProps.js",
-      "require": "./dist/cjs/defaultProps.js"
+      "import": "./esm/defaultProps.js",
+      "require": "./cjs/defaultProps.js"
     }
   },
   "sideEffects": [
@@ -52,18 +49,24 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "npm": ">=7",
+    "node": ">=14"
   },
   "author": "ICE MT",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
+    "prebuild": "exit 0",
+    "predev": "exit 0",
+    "build": "node ../../scripts/build/build.js"
+  },
   "dependencies": {
-    "@elliemae/ds-button": "2.3.0-alpha.9",
-    "@elliemae/ds-icons": "2.3.0-alpha.9",
-    "@elliemae/ds-system": "2.3.0-alpha.9",
-    "react-desc": "~4.1.3"
+    "@elliemae/ds-button": "2.3.0-next.3",
+    "@elliemae/ds-icons": "2.3.0-next.3",
+    "@elliemae/ds-system": "2.3.0-next.1",
+    "react-desc": "~4.1.2"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "~5.15.1",
+    "@testing-library/jest-dom": "~5.15.0",
     "@testing-library/react": "~12.1.2",
     "@testing-library/user-event": "~13.5.0",
     "styled-components": "~5.3.3"
@@ -76,12 +79,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": false
-  },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }

package/{dist/types → types}/DSBanner.d.ts

@@ -56,4 +56,4 @@ declare const DSBannerWithSchema: {
     toTypescript: () => import("react-desc").TypescriptSchema;
 };
 export default DSBanner;
-export { DSBanner, DSBannerWithSchema };
+export { DSBannerWithSchema };

package/{dist/types → types}/styles.d.ts

@@ -1,8 +1,8 @@
 import type { StyledActionLinkT, StyledBannerContainerT, StyledInnerContainerT } from './index.d';
-export declare const StyledBannerContainer: import("styled-components").StyledComponent<StyledBannerContainerT, import("@elliemae/ds-system/dist/types/styled/types").Theme, {}, never>;
-export declare const StyledInnerContainer: import("styled-components").StyledComponent<StyledInnerContainerT, import("@elliemae/ds-system/dist/types/styled/types").Theme, {}, never>;
-export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system/dist/types/styled/types").Theme, {}, never>;
-export declare const StyledTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system/dist/types/styled/types").Theme, {}, never>;
-export declare const StyledSubTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system/dist/types/styled/types").Theme, {}, never>;
-export declare const StyledActionLink: import("styled-components").StyledComponent<StyledActionLinkT, import("@elliemae/ds-system/dist/types/styled/types").Theme, {}, never>;
-export declare const StyledCloseButton: import("styled-components").StyledComponent<any, import("@elliemae/ds-system/dist/types/styled/types").Theme, any, any>;
+export declare const StyledBannerContainer: import("styled-components").StyledComponent<StyledBannerContainerT, import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
+export declare const StyledInnerContainer: import("styled-components").StyledComponent<StyledInnerContainerT, import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
+export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
+export declare const StyledTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
+export declare const StyledSubTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
+export declare const StyledActionLink: import("styled-components").StyledComponent<StyledActionLinkT, import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
+export declare const StyledCloseButton: import("styled-components").StyledComponent<any, import("@elliemae/ds-system/types/styled/types").Theme, any, any>;

package/dist/cjs/DSBanner.js

@@ -1,138 +0,0 @@
-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 DSBanner_exports = {};
-__export(DSBanner_exports, {
-  DSBanner: () => DSBanner,
-  DSBannerWithSchema: () => DSBannerWithSchema,
-  default: () => DSBanner_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_ds_icons = require("@elliemae/ds-icons");
-var import_react_desc = require("react-desc");
-var import_icons = require("./utils/icons");
-var import_propTypes = require("./propTypes");
-var import_defaultProps = require("./defaultProps");
-var import_styles = require("./styles");
-const DSBanner = ({
-  type,
-  isOpen,
-  onClose,
-  label,
-  body,
-  actionLink,
-  showCloseButton,
-  containerProps,
-  actionRef
-}) => {
-  const innerContainerRef = (0, import_react.useRef)(null);
-  const linkRef = (0, import_react.useRef)(null);
-  const [current, setCurrent] = (0, import_react.useState)(isOpen);
-  const [isAnimating, setIsAnimating] = (0, import_react.useState)(false);
-  const [alertTabIndex, setAlertTabIndex] = (0, import_react.useState)(void 0);
-  const ownerState = { type };
-  import_react.default.useEffect(() => {
-    if (actionRef && actionRef.current) {
-      actionRef.current.focusOnWrapper = () => {
-        if (innerContainerRef.current) {
-          setAlertTabIndex(0);
-          setTimeout(() => {
-            innerContainerRef.current.focus();
-          }, 100);
-        }
-      };
-      actionRef.current.focusOnLink = () => {
-        if (linkRef.current) {
-          linkRef.current.focus();
-        }
-      };
-    }
-  }, [actionRef]);
-  (0, import_react.useLayoutEffect)(() => {
-    if (isOpen !== current || isOpen)
-      setIsAnimating(true);
-    else
-      setIsAnimating(false);
-  }, [isOpen, current]);
-  const handleBlur = (0, import_react.useCallback)(() => {
-    setAlertTabIndex(void 0);
-  }, []);
-  const handleOnKeyDown = (0, import_react.useCallback)((e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      if (linkRef.current)
-        linkRef.current.click();
-    }
-  }, []);
-  if (!isAnimating && !isOpen)
-    return null;
-  return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledBannerContainer, {
-    type,
-    isOpen,
-    isAnimating,
-    onAnimationEnd: () => setCurrent(isOpen),
-    "data-testid": "ds-banner-container",
-    ...containerProps,
-    ownerState
-  }, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledInnerContainer, {
-    type,
-    isOpen,
-    ref: innerContainerRef,
-    isAnimating,
-    "data-testid": "ds-banner",
-    role: "alert",
-    tabIndex: alertTabIndex,
-    onBlur: handleBlur
-  }, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledIconContainer, {
-    "data-testid": "ds-banner-icon"
-  }, import_icons.icons[type]), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTitle, null, label), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledSubTitle, null, /* @__PURE__ */ import_react.default.createElement("span", null, body), actionLink && /* @__PURE__ */ import_react.default.createElement(import_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__ */ import_react.default.createElement(import_styles.StyledCloseButton, {
-    "data-testid": "ds-banner-close-button",
-    buttonType: "secondary",
-    onClick: onClose,
-    "aria-label": "Close icon",
-    icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.CloseX, {
-      width: "12px",
-      height: "12px"
-    })
-  }) : /* @__PURE__ */ import_react.default.createElement("span", null)));
-};
-DSBanner.defaultProps = import_defaultProps.defaultProps;
-DSBanner.propTypes = import_propTypes.propTypes;
-const DSBannerWithSchema = (0, import_react_desc.describe)(DSBanner);
-DSBannerWithSchema.propTypes = import_propTypes.propTypes;
-var DSBanner_default = DSBanner;
-module.exports = __toCommonJS(DSBanner_exports);
-//# sourceMappingURL=DSBanner.js.map

package/dist/cjs/DSBanner.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/DSBanner.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useCallback, useState } from 'react';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { describe } from 'react-desc';\nimport type { BannerPropsT } from './index.d';\nimport { icons } from './utils/icons';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport {\n  StyledActionLink,\n  StyledCloseButton,\n  StyledInnerContainer,\n  StyledBannerContainer,\n  StyledIconContainer,\n  StyledSubTitle,\n  StyledTitle,\n} from './styles';\n\nconst DSBanner = ({\n  type,\n  isOpen,\n  onClose,\n  label,\n  body,\n  actionLink,\n  showCloseButton,\n  containerProps,\n  actionRef,\n}: BannerPropsT): JSX.Element => {\n  const innerContainerRef = useRef<HTMLDivElement | null>(null);\n  const linkRef = useRef<HTMLAnchorElement | null>(null);\n  const [current, setCurrent] = useState<boolean>(isOpen);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n  const [alertTabIndex, setAlertTabIndex] = useState<number | undefined>(undefined);\n\n  const ownerState = { type };\n\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusOnWrapper = () => {\n        if (innerContainerRef.current) {\n          setAlertTabIndex(0);\n          setTimeout(() => {\n            innerContainerRef.current.focus();\n          }, 100);\n        }\n      };\n      actionRef.current.focusOnLink = () => {\n        if (linkRef.current) {\n          linkRef.current.focus();\n        }\n      };\n    }\n  }, [actionRef]);\n\n  useLayoutEffect(() => {\n    if (isOpen !== current || isOpen) setIsAnimating(true);\n    else setIsAnimating(false);\n  }, [isOpen, current]);\n\n  const handleBlur = useCallback(() => {\n    setAlertTabIndex(undefined);\n  }, []);\n  const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (linkRef.current) linkRef.current.click();\n    }\n  }, []);\n\n  if (!isAnimating && !isOpen) return null;\n\n  return (\n    <StyledBannerContainer\n      type={type}\n      isOpen={isOpen}\n      isAnimating={isAnimating}\n      onAnimationEnd={() => setCurrent(isOpen)}\n      data-testid=\"ds-banner-container\"\n      {...containerProps}\n      ownerState={ownerState}\n    >\n      <StyledInnerContainer\n        type={type}\n        isOpen={isOpen}\n        ref={innerContainerRef}\n        isAnimating={isAnimating}\n        data-testid=\"ds-banner\"\n        role=\"alert\"\n        tabIndex={alertTabIndex}\n        onBlur={handleBlur}\n      >\n        <StyledIconContainer data-testid=\"ds-banner-icon\">{icons[type]}</StyledIconContainer>\n        <StyledTitle>{label}</StyledTitle>\n        <StyledSubTitle>\n          <span>{body}</span>\n          {actionLink && (\n            <StyledActionLink\n              data-testid=\"ds-banner-action-link\"\n              onClick={actionLink.onClick}\n              href={actionLink.href}\n              ref={linkRef}\n              onKeyDown={handleOnKeyDown}\n              tabIndex={0}\n              isBodyEmpty={body}\n            >\n              {actionLink.label}\n            </StyledActionLink>\n          )}\n        </StyledSubTitle>\n\n        {showCloseButton ? (\n          <StyledCloseButton\n            data-testid=\"ds-banner-close-button\"\n            buttonType=\"secondary\"\n            onClick={onClose}\n            aria-label=\"Close icon\"\n            icon={<CloseX width=\"12px\" height=\"12px\" />}\n          />\n        ) : (\n          <span />\n        )}\n      </StyledInnerContainer>\n    </StyledBannerContainer>\n  );\n};\n\nDSBanner.defaultProps = defaultProps;\nDSBanner.propTypes = propTypes;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = propTypes;\n\nexport default DSBanner;\nexport { DSBanner, DSBannerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAsE;AACtE,sBAAuB;AACvB,wBAAyB;AAEzB,mBAAsB;AACtB,uBAA0B;AAC1B,0BAA6B;AAC7B,oBAQO;AAEP,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAC+B;AAC/B,QAAM,oBAAoB,yBAA8B;AACxD,QAAM,UAAU,yBAAiC;AACjD,QAAM,CAAC,SAAS,cAAc,2BAAkB;AAChD,QAAM,CAAC,aAAa,kBAAkB,2BAAkB;AACxD,QAAM,CAAC,eAAe,oBAAoB,2BAA6B;AAEvE,QAAM,aAAa,EAAE;AAErB,uBAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,iBAAiB,MAAM;AACvC,YAAI,kBAAkB,SAAS;AAC7B,2BAAiB;AACjB,qBAAW,MAAM;AACf,8BAAkB,QAAQ;AAAA,aACzB;AAAA;AAAA;AAGP,gBAAU,QAAQ,cAAc,MAAM;AACpC,YAAI,QAAQ,SAAS;AACnB,kBAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,KAIrB,CAAC;AAEJ,oCAAgB,MAAM;AACpB,QAAI,WAAW,WAAW;AAAQ,qBAAe;AAAA;AAC5C,qBAAe;AAAA,KACnB,CAAC,QAAQ;AAEZ,QAAM,aAAa,8BAAY,MAAM;AACnC,qBAAiB;AAAA,KAChB;AACH,QAAM,kBAAkB,8BAAY,CAAC,MAA2B;AAC9D,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE;AACF,UAAI,QAAQ;AAAS,gBAAQ,QAAQ;AAAA;AAAA,KAEtC;AAEH,MAAI,CAAC,eAAe,CAAC;AAAQ,WAAO;AAEpC,SACE,mDAAC,qCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,MAAM,WAAW;AAAA,IACjC,eAAY;AAAA,OACR;AAAA,IACJ;AAAA,KAEA,mDAAC,oCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,eAAY;AAAA,IACZ,MAAK;AAAA,IACL,UAAU;AAAA,IACV,QAAQ;AAAA,KAER,mDAAC,mCAAD;AAAA,IAAqB,eAAY;AAAA,KAAkB,mBAAM,QACzD,mDAAC,2BAAD,MAAc,QACd,mDAAC,8BAAD,MACE,mDAAC,QAAD,MAAO,OACN,cACC,mDAAC,gCAAD;AAAA,IACE,eAAY;AAAA,IACZ,SAAS,WAAW;AAAA,IACpB,MAAM,WAAW;AAAA,IACjB,KAAK;AAAA,IACL,WAAW;AAAA,IACX,UAAU;AAAA,IACV,aAAa;AAAA,KAEZ,WAAW,SAKjB,kBACC,mDAAC,iCAAD;AAAA,IACE,eAAY;AAAA,IACZ,YAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAW;AAAA,IACX,MAAM,mDAAC,wBAAD;AAAA,MAAQ,OAAM;AAAA,MAAO,QAAO;AAAA;AAAA,OAGpC,mDAAC,QAAD;AAAA;AAOV,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,MAAM,qBAAqB,gCAAS;AACpC,mBAAmB,YAAY;AAE/B,IAAO,mBAAQ;",
-  "names": []
-}

package/dist/cjs/defaultProps.js

@@ -1,45 +0,0 @@
-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 defaultProps_exports = {};
-__export(defaultProps_exports, {
-  defaultProps: () => defaultProps
-});
-var React = __toESM(require("react"));
-var import_bannerTypes = require("./utils/bannerTypes");
-const defaultProps = {
-  containerProps: {},
-  label: "",
-  body: "",
-  type: import_bannerTypes.BANNER_TYPES.INFO,
-  isOpen: true,
-  onClose: () => null,
-  showCloseButton: true,
-  actionLink: { label: "", onClick: () => null, href: "" }
-};
-module.exports = __toCommonJS(defaultProps_exports);
-//# sourceMappingURL=defaultProps.js.map

package/dist/cjs/defaultProps.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/defaultProps.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { BANNER_TYPES } from './utils/bannerTypes';\n\nexport const defaultProps = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: BANNER_TYPES.INFO,\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n  actionLink: { label: '', onClick: () => null, href: '' },\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAA6B;AAEtB,MAAM,eAAe;AAAA,EAC1B,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,gCAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AAAA,EACjB,YAAY,EAAE,OAAO,IAAI,SAAS,MAAM,MAAM,MAAM;AAAA;",
-  "names": []
-}

package/dist/cjs/index.d.js

@@ -1,27 +0,0 @@
-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 __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 index_d_exports = {};
-var React = __toESM(require("react"));
-module.exports = __toCommonJS(index_d_exports);
-//# sourceMappingURL=index.d.js.map

package/dist/cjs/index.d.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/index.d.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { BANNER_TYPES } from './utils/bannerTypes';\n\ntype BannerTypesT = typeof BANNER_TYPES[keyof typeof BANNER_TYPES];\n\ninterface ActionLinkT {\n  label: string;\n  onClick: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | null;\n  href: string;\n}\n\nexport interface BannerPropsT {\n  type: BannerTypesT;\n  isOpen: boolean;\n  onClose: () => void | null;\n  actionLink: ActionLinkT;\n  label: string;\n  body: string;\n  showCloseButton?: boolean;\n  containerProps: Record<string, unknown>;\n  actionRef?: any;\n}\n\nexport interface StyledBannerContainerT {\n  type: BannerTypesT;\n  isOpen: boolean;\n  isAnimating: boolean;\n  height: number;\n}\n\nexport interface StyledInnerContainerT {\n  type: BannerTypesT;\n  isOpen: boolean;\n  isAnimating: boolean;\n  ref: React.MutableRefObject<HTMLDivElement>;\n}\n\nexport interface StyledActionLinkT {\n  isBodyEmpty: string;\n  ref: React.MutableRefObject<HTMLAnchorElement>;\n}\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;",
-  "names": []
-}