@elliemae/ds-banner 2.3.1 → 3.0.0-alpha.3

package/dist/cjs/utils/styleHelpers.js

@@ -0,0 +1,99 @@
+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
+});
+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 }) => {
+  switch (type) {
+    case import_bannerTypes.BANNER_TYPES.SUCCESS:
+      return colors.success[900];
+    case import_bannerTypes.BANNER_TYPES.INFO:
+      return colors.brand[600];
+    case import_bannerTypes.BANNER_TYPES.WARNING:
+      return colors.warning[900];
+    case import_bannerTypes.BANNER_TYPES.DANGER:
+      return colors.danger[900];
+  }
+};
+const handleAnimation = (isAnimating, isOpen, height = null) => {
+  if (isAnimating) {
+    if (isOpen) {
+      return import_ds_system.css`
+        animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;
+      `;
+    } else {
+      return import_ds_system.css`
+        animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;
+      `;
+    }
+  }
+};
+module.exports = __toCommonJS(styleHelpers_exports);
+//# sourceMappingURL=styleHelpers.js.map

package/dist/cjs/utils/styleHelpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/styleHelpers.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { kfrm, css } from '@elliemae/ds-system';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport { BANNER_TYPES } from './bannerTypes';\n\nconst slideIn = kfrm`\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n`;\n\nconst slideOut = kfrm`\n  0% {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n  60% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translate3d(0, -100%, 0);\n  }\n`;\n\nconst spanContainer = (height: number) => kfrm`\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ${height}px;\n  }\n`;\n\nconst shrinkContainer = (height: number) => kfrm`\n  0% {\n    height: ${height}px;\n  }\n  100% {\n    height: 0px;\n  }\n`;\n\nexport const handleBorderColor = (type, { colors }): string => {\n  switch (type) {\n    case BANNER_TYPES.SUCCESS:\n      return colors.success[900];\n    case BANNER_TYPES.INFO:\n      return colors.brand[600];\n    case BANNER_TYPES.WARNING:\n      return colors.warning[900];\n    case BANNER_TYPES.DANGER:\n      return colors.danger[900];\n  }\n};\n\nexport const handleAnimation = (\n  isAnimating: boolean,\n  isOpen: boolean,\n  height: number | null = null,\n): FlattenSimpleInterpolation => {\n  if (isAnimating) {\n    if (isOpen) {\n      return css`\n        animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;\n      `;\n    } else {\n      return css`\n        animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;\n      `;\n    }\n  }\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA0B;AAE1B,yBAA6B;AAE7B,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjB,MAAM,gBAAgB,CAAC,WAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5B;AAAA;AAAA;AAId,MAAM,kBAAkB,CAAC,WAAmB;AAAA;AAAA,cAE9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAOP,MAAM,oBAAoB,CAAC,MAAM,EAAE,aAAqB;AAC7D,UAAQ;AAAA,SACD,gCAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,gCAAa;AAChB,aAAO,OAAO,MAAM;AAAA,SACjB,gCAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,gCAAa;AAChB,aAAO,OAAO,OAAO;AAAA;AAAA;AAIpB,MAAM,kBAAkB,CAC7B,aACA,QACA,SAAwB,SACO;AAC/B,MAAI,aAAa;AACf,QAAI,QAAQ;AACV,aAAO;AAAA,qBACQ,SAAS,cAAc,UAAU;AAAA;AAAA,WAE3C;AACL,aAAO;AAAA,qBACQ,SAAS,gBAAgB,UAAU;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/DSBanner.js

@@ -0,0 +1,136 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import React2, { useLayoutEffect, useRef, useCallback, useState } from "react";
+import { CloseX } from "@elliemae/ds-icons";
+import { describe } from "react-desc";
+import { icons } from "./utils/icons";
+import { propTypes } from "./propTypes";
+import { defaultProps } from "./defaultProps";
+import {
+  StyledActionLink,
+  StyledCloseButton,
+  StyledInnerContainer,
+  StyledBannerContainer,
+  StyledIconContainer,
+  StyledSubTitle,
+  StyledTitle
+} from "./styles";
+const DSBanner = ({
+  type,
+  isOpen,
+  onClose,
+  label,
+  body,
+  actionLink,
+  showCloseButton,
+  containerProps,
+  actionRef
+}) => {
+  const innerContainerRef = useRef(null);
+  const linkRef = useRef(null);
+  const [current, setCurrent] = useState(isOpen);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [alertTabIndex, setAlertTabIndex] = useState(void 0);
+  const ownerState = { type };
+  React2.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]);
+  useLayoutEffect(() => {
+    if (isOpen !== current || isOpen)
+      setIsAnimating(true);
+    else
+      setIsAnimating(false);
+  }, [isOpen, current]);
+  const handleBlur = useCallback(() => {
+    setAlertTabIndex(void 0);
+  }, []);
+  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__ */ React2.createElement(StyledBannerContainer, __spreadProps(__spreadValues({
+    type,
+    isOpen,
+    isAnimating,
+    onAnimationEnd: () => setCurrent(isOpen),
+    "data-testid": "ds-banner-container"
+  }, containerProps), {
+    ownerState
+  }), /* @__PURE__ */ React2.createElement(StyledInnerContainer, {
+    type,
+    isOpen,
+    ref: innerContainerRef,
+    isAnimating,
+    "data-testid": "ds-banner",
+    role: "alert",
+    tabIndex: alertTabIndex,
+    onBlur: handleBlur
+  }, /* @__PURE__ */ React2.createElement(StyledIconContainer, {
+    "data-testid": "ds-banner-icon"
+  }, icons[type]), /* @__PURE__ */ React2.createElement(StyledTitle, null, label), /* @__PURE__ */ React2.createElement(StyledSubTitle, null, /* @__PURE__ */ React2.createElement("span", null, body), actionLink && /* @__PURE__ */ React2.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__ */ React2.createElement(StyledCloseButton, {
+    "data-testid": "ds-banner-close-button",
+    buttonType: "secondary",
+    onClick: onClose,
+    "aria-label": "Close icon",
+    icon: /* @__PURE__ */ React2.createElement(CloseX, {
+      width: "12px",
+      height: "12px"
+    })
+  }) : /* @__PURE__ */ React2.createElement("span", null)));
+};
+DSBanner.defaultProps = defaultProps;
+DSBanner.propTypes = propTypes;
+const DSBannerWithSchema = describe(DSBanner);
+DSBannerWithSchema.propTypes = propTypes;
+var DSBanner_default = DSBanner;
+export {
+  DSBanner,
+  DSBannerWithSchema,
+  DSBanner_default as default
+};
+//# sourceMappingURL=DSBanner.js.map

package/dist/esm/DSBanner.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSBanner.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA,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,OAA8B;AACxD,QAAM,UAAU,OAAiC;AACjD,QAAM,CAAC,SAAS,cAAc,SAAkB;AAChD,QAAM,CAAC,aAAa,kBAAkB,SAAkB;AACxD,QAAM,CAAC,eAAe,oBAAoB,SAA6B;AAEvE,QAAM,aAAa,EAAE;AAErB,SAAM,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,kBAAgB,MAAM;AACpB,QAAI,WAAW,WAAW;AAAQ,qBAAe;AAAA;AAC5C,qBAAe;AAAA,KACnB,CAAC,QAAQ;AAEZ,QAAM,aAAa,YAAY,MAAM;AACnC,qBAAiB;AAAA,KAChB;AACH,QAAM,kBAAkB,YAAY,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,qCAAC,uBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,MAAM,WAAW;AAAA,IACjC,eAAY;AAAA,KACR,iBANN;AAAA,IAOE;AAAA,MAEA,qCAAC,sBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,eAAY;AAAA,IACZ,MAAK;AAAA,IACL,UAAU;AAAA,IACV,QAAQ;AAAA,KAER,qCAAC,qBAAD;AAAA,IAAqB,eAAY;AAAA,KAAkB,MAAM,QACzD,qCAAC,aAAD,MAAc,QACd,qCAAC,gBAAD,MACE,qCAAC,QAAD,MAAO,OACN,cACC,qCAAC,kBAAD;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,qCAAC,mBAAD;AAAA,IACE,eAAY;AAAA,IACZ,YAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAW;AAAA,IACX,MAAM,qCAAC,QAAD;AAAA,MAAQ,OAAM;AAAA,MAAO,QAAO;AAAA;AAAA,OAGpC,qCAAC,QAAD;AAAA;AAOV,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,MAAM,qBAAqB,SAAS;AACpC,mBAAmB,YAAY;AAE/B,IAAO,mBAAQ;",
+  "names": []
+}

package/dist/esm/defaultProps.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { BANNER_TYPES } from "./utils/bannerTypes";
+const defaultProps = {
+  containerProps: {},
+  label: "",
+  body: "",
+  type: BANNER_TYPES.INFO,
+  isOpen: true,
+  onClose: () => null,
+  showCloseButton: true,
+  actionLink: { label: "", onClick: () => null, href: "" }
+};
+export {
+  defaultProps
+};
+//# sourceMappingURL=defaultProps.js.map

package/dist/esm/defaultProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,eAAe;AAAA,EAC1B,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,aAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AAAA,EACjB,YAAY,EAAE,OAAO,IAAI,SAAS,MAAM,MAAM,MAAM;AAAA;",
+  "names": []
+}

package/dist/esm/index.d.js

@@ -0,0 +1,2 @@
+import * as React from "react";
+//# sourceMappingURL=index.d.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { default as default2 } from "./DSBanner";
+export * from "./DSBanner";
+export * from "./utils/bannerTypes";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default } from './DSBanner';\nexport * from './DSBanner';\nexport * from './utils/bannerTypes';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;",
+  "names": []
+}

package/dist/esm/propTypes.js

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { PropTypes } from "react-desc";
+import { BANNER_TYPES } from "./utils/bannerTypes";
+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(""),
+  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description("banner s type").defaultValue(BANNER_TYPES.INFO),
+  onClose: PropTypes.func.description("function executed when the banner closes"),
+  isOpen: PropTypes.bool.description("whether the banner is open or closed").defaultValue(true),
+  showCloseButton: PropTypes.bool.description("whether to show close button or not").defaultValue(true),
+  actionLink: PropTypes.shape({
+    label: PropTypes.string,
+    onClick: PropTypes.func,
+    href: PropTypes.string
+  }).description("Properties of the ActionLink component").defaultValue({}),
+  actionRef: PropTypes.object.description(`
+      Reference to use actions:
+      - focusOnLink: function to focus the banner
+      - focusOnWrapper: function to focus the link
+    `).defaultValue({})
+};
+export {
+  propTypes
+};
+//# sourceMappingURL=propTypes.js.map

package/dist/esm/propTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\nimport { BANNER_TYPES } from './utils/bannerTypes';\n\nexport const propTypes = {\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container').defaultValue({}),\n  label: PropTypes.string.description('banner s label').defaultValue(''),\n  body: PropTypes.string.description('banner s body content').defaultValue(''),\n  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('banner s type').defaultValue(BANNER_TYPES.INFO),\n  onClose: PropTypes.func.description('function executed when the banner closes'),\n  isOpen: PropTypes.bool.description('whether the banner is open or closed').defaultValue(true),\n  showCloseButton: PropTypes.bool.description('whether to show close button or not').defaultValue(true),\n  actionLink: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    href: PropTypes.string,\n  })\n    .description('Properties of the ActionLink component')\n    .defaultValue({}),\n  actionRef: PropTypes.object\n    .description(\n      `\n      Reference to use actions:\n      - focusOnLink: function to focus the banner\n      - focusOnWrapper: function to focus the link\n    `,\n    )\n    .defaultValue({}),\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,YAAY;AAAA,EACvB,gBAAgB,UAAU,OAAO,YAAY,oDAAoD,aAAa;AAAA,EAC9G,OAAO,UAAU,OAAO,YAAY,kBAAkB,aAAa;AAAA,EACnE,MAAM,UAAU,OAAO,YAAY,yBAAyB,aAAa;AAAA,EACzE,MAAM,UAAU,MAAM,OAAO,OAAO,eAAe,YAAY,iBAAiB,aAAa,aAAa;AAAA,EAC1G,SAAS,UAAU,KAAK,YAAY;AAAA,EACpC,QAAQ,UAAU,KAAK,YAAY,wCAAwC,aAAa;AAAA,EACxF,iBAAiB,UAAU,KAAK,YAAY,uCAAuC,aAAa;AAAA,EAChG,YAAY,UAAU,MAAM;AAAA,IAC1B,OAAO,UAAU;AAAA,IACjB,SAAS,UAAU;AAAA,IACnB,MAAM,UAAU;AAAA,KAEf,YAAY,0CACZ,aAAa;AAAA,EAChB,WAAW,UAAU,OAClB,YACC;AAAA;AAAA;AAAA;AAAA,OAMD,aAAa;AAAA;",
+  "names": []
+}

package/dist/esm/styles.js

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { styled } from "@elliemae/ds-system";
+import DSButton from "@elliemae/ds-button";
+import { handleAnimation, handleBorderColor } from "./utils/styleHelpers";
+const StyledBannerContainer = styled("div", { name: "DS-Banner", slot: "root" })`
+  overflow: hidden;
+  height: ${({ isOpen }) => isOpen ? "auto" : "0px"};
+  ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};
+`;
+const StyledInnerContainer = styled("div", {
+  name: "DS-Banner",
+  slot: "innerContainer"
+})`
+  padding-right: 6px;
+  display: grid;
+  align-items: center;
+  min-height: 41px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.colors.neutral["000"]};
+  border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};
+  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};
+  &:focus {
+    position: relative;
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      border-radius: 2px;
+      width: calc(100%);
+      border: 2px solid #1e79c2;
+      height: calc(100% + 4px);
+    }
+  }
+  grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;
+`;
+const StyledIconContainer = styled("div", { name: "DS-Banner", slot: "iconContainer" })`
+  margin-right: ${({ theme }) => theme.space.xxs};
+  margin-left: ${({ theme }) => theme.space.xs};
+`;
+const StyledTitle = styled("div", { name: "DS-Banner", slot: "title" })`
+  color: ${({ theme }) => theme.colors.neutral[700]};
+  font-size: ${({ theme }) => theme.fontSizes.label[400]};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+`;
+const StyledSubTitle = styled("div", { name: "DS-Banner", slot: "subtitle" })`
+  width: 100%;
+  margin-left: ${({ theme }) => theme.space.xs};
+  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};
+  font-weight: ${({ theme }) => theme.fontWeights.regular};
+`;
+const StyledActionLink = styled("a", { name: "DS-Banner", slot: "action" })`
+  margin-left: ${({ theme, isBodyEmpty }) => isBodyEmpty ? theme.space.xs : 0};
+  white-space: nowrap;
+  text-decoration: none;
+  line-height: 1.1;
+  font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};
+  font-weight: ${({ theme }) => theme.fontWeights.regular};
+  color: ${({ theme }) => theme.colors.brand[600]};
+`;
+const StyledCloseButton = styled(DSButton, { name: "DS-Banner", slot: "closeButton" })`
+  margin-left: ${({ theme }) => theme.space.xxs};
+  &:not(focus) {
+    border: transparent;
+  }
+`;
+export {
+  StyledActionLink,
+  StyledBannerContainer,
+  StyledCloseButton,
+  StyledIconContainer,
+  StyledInnerContainer,
+  StyledSubTitle,
+  StyledTitle
+};
+//# sourceMappingURL=styles.js.map

package/dist/esm/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport DSButton from '@elliemae/ds-button';\nimport type { StyledActionLinkT, StyledBannerContainerT, StyledInnerContainerT } from './index.d';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\n\nexport const StyledBannerContainer = styled<StyledBannerContainerT>('div', { name: 'DS-Banner', slot: 'root' })`\n  overflow: hidden;\n  height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n  ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n\nexport const StyledInnerContainer = styled<StyledInnerContainerT>('div', {\n  name: 'DS-Banner',\n  slot: 'innerContainer',\n})`\n  padding-right: 6px;\n  display: grid;\n  align-items: center;\n  min-height: 41px;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\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`;\n\nexport const StyledIconContainer = styled('div', { name: 'DS-Banner', slot: 'iconContainer' })`\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled('div', { name: 'DS-Banner', slot: 'title' })`\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledSubTitle = styled('div', { name: 'DS-Banner', slot: 'subtitle' })`\n  width: 100%;\n  margin-left: ${({ theme }) => theme.space.xs};\n  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n`;\n\nexport const StyledActionLink = styled<StyledActionLinkT>('a', { name: 'DS-Banner', slot: 'action' })`\n  margin-left: ${({ theme, isBodyEmpty }) => (isBodyEmpty ? theme.space.xs : 0)};\n  white-space: nowrap;\n  text-decoration: none;\n  line-height: 1.1;\n  font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledCloseButton = styled(DSButton, { name: 'DS-Banner', slot: 'closeButton' })`\n  margin-left: ${({ theme }) => theme.space.xxs};\n  &:not(focus) {\n    border: transparent;\n  }\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEA;AAEO,MAAM,wBAAwB,OAA+B,OAAO,EAAE,MAAM,aAAa,MAAM;AAAA;AAAA,YAE1F,CAAC,EAAE,aAAc,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,aAAa,gBAAgB,aAAa,QAAQ;AAAA;AAGvE,MAAM,uBAAuB,OAA8B,OAAO;AAAA,EACvE,MAAM;AAAA,EACN,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOc,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,YAAY,kBAAkB,MAAM;AAAA,IACtE,CAAC,EAAE,aAAa,aAAa,gBAAgB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBvD,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,aAAa,MAAM;AAAA,kBAC1D,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAGrC,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,aAAa,MAAM;AAAA,WACzD,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA,iBACnC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,aAAa,MAAM;AAAA;AAAA,iBAEtD,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,YAAY,MAAM,UAAU,SAAS;AAAA,iBACtC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,mBAAmB,OAA0B,KAAK,EAAE,MAAM,aAAa,MAAM;AAAA,iBACzE,CAAC,EAAE,OAAO,kBAAmB,cAAc,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,eAI9D,CAAC,EAAE,YAAY,MAAM,UAAU,UAAU;AAAA,iBACvC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAGtC,MAAM,oBAAoB,OAAO,UAAU,EAAE,MAAM,aAAa,MAAM;AAAA,iBAC5D,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/utils/bannerTypes.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+const BANNER_TYPES = {
+  INFO: "info",
+  SUCCESS: "success",
+  WARNING: "warning",
+  DANGER: "danger"
+};
+export {
+  BANNER_TYPES
+};
+//# sourceMappingURL=bannerTypes.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/bannerTypes.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const BANNER_TYPES = {\n  INFO: 'info',\n  SUCCESS: 'success',\n  WARNING: 'warning',\n  DANGER: 'danger',\n} as const;\n"],
+  "mappings": "AAAA;ACAO,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA;",
+  "names": []
+}

package/dist/esm/utils/icons.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+import React2 from "react";
+import { AlertsDetailFill, InfoFill, SuccessFill, WarningSquare } from "@elliemae/ds-icons";
+const icons = {
+  success: /* @__PURE__ */ React2.createElement(SuccessFill, {
+    fill: "#207e56",
+    width: "20px",
+    height: "20px"
+  }),
+  info: /* @__PURE__ */ React2.createElement(InfoFill, {
+    fill: "#1e79c2",
+    width: "20px",
+    height: "20px"
+  }),
+  danger: /* @__PURE__ */ React2.createElement(AlertsDetailFill, {
+    fill: "#c64252",
+    width: "20px",
+    height: "20px"
+  }),
+  warning: /* @__PURE__ */ React2.createElement(WarningSquare, {
+    fill: "#d17a00",
+    width: "20px",
+    height: "20px"
+  })
+};
+export {
+  icons
+};
+//# sourceMappingURL=icons.js.map

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

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

package/dist/esm/utils/styleHelpers.js

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { kfrm, css } from "@elliemae/ds-system";
+import { BANNER_TYPES } from "./bannerTypes";
+const slideIn = kfrm`
+  0% {
+    transform: translate3d(0, -100%, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+const slideOut = kfrm`
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  60% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+`;
+const spanContainer = (height) => kfrm`
+  0% {
+    height: 0px;
+  }
+  100% {
+    height: ${height}px;
+  }
+`;
+const shrinkContainer = (height) => kfrm`
+  0% {
+    height: ${height}px;
+  }
+  100% {
+    height: 0px;
+  }
+`;
+const handleBorderColor = (type, { colors }) => {
+  switch (type) {
+    case 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 = (isAnimating, isOpen, height = null) => {
+  if (isAnimating) {
+    if (isOpen) {
+      return css`
+        animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;
+      `;
+    } else {
+      return css`
+        animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;
+      `;
+    }
+  }
+};
+export {
+  handleAnimation,
+  handleBorderColor
+};
+//# sourceMappingURL=styleHelpers.js.map

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

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