@elliemae/ds-banner 2.2.0 → 2.3.0-alpha.3

package/esm/DSBanner.js

@@ -1,47 +1,37 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-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 React, { useRef, useState, useLayoutEffect, useCallback } from 'react';
-import { CloseX } from '@elliemae/ds-icons';
-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 { jsx, jsxs } from 'react/jsx-runtime';
-
-var _CloseX, _span;
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-const DSBanner = _ref => {
-  let {
-    type,
-    isOpen,
-    onClose,
-    label,
-    body,
-    actionLink,
-    showCloseButton,
-    containerProps,
-    actionRef
-  } = _ref;
+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(undefined);
-  const ownerState = {
-    type
-  };
-  React.useEffect(() => {
+  const [alertTabIndex, setAlertTabIndex] = useState(void 0);
+  const ownerState = { type };
+  React2.useEffect(() => {
     if (actionRef && actionRef.current) {
       actionRef.current.focusOnWrapper = () => {
         if (innerContainerRef.current) {
@@ -51,7 +41,6 @@ const DSBanner = _ref => {
           }, 100);
         }
       };
-
       actionRef.current.focusOnLink = () => {
         if (linkRef.current) {
           linkRef.current.focus();
@@ -60,62 +49,69 @@ const DSBanner = _ref => {
     }
   }, [actionRef]);
   useLayoutEffect(() => {
-    if (isOpen !== current || isOpen) setIsAnimating(true);else setIsAnimating(false);
+    if (isOpen !== current || isOpen)
+      setIsAnimating(true);
+    else
+      setIsAnimating(false);
   }, [isOpen, current]);
   const handleBlur = useCallback(() => {
-    setAlertTabIndex(undefined);
+    setAlertTabIndex(void 0);
   }, []);
-  const handleOnKeyDown = useCallback(e => {
-    if (e.key === 'Enter' || e.key === ' ') {
+  const handleOnKeyDown = useCallback((e) => {
+    if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
-      if (linkRef.current) linkRef.current.click();
+      if (linkRef.current)
+        linkRef.current.click();
     }
   }, []);
-  if (!isAnimating && !isOpen) return null;
-  return /*#__PURE__*/jsx(StyledBannerContainer, _objectSpread(_objectSpread({
-    type: type,
-    isOpen: isOpen,
-    isAnimating: isAnimating,
+  if (!isAnimating && !isOpen)
+    return null;
+  return /* @__PURE__ */ React2.createElement(StyledBannerContainer, {
+    type,
+    isOpen,
+    isAnimating,
     onAnimationEnd: () => setCurrent(isOpen),
-    "data-testid": "ds-banner-container"
-  }, containerProps), {}, {
-    ownerState: ownerState,
-    children: /*#__PURE__*/jsxs(StyledInnerContainer, {
-      type: type,
-      isOpen: isOpen,
-      ref: innerContainerRef,
-      isAnimating: isAnimating,
-      "data-testid": "ds-banner",
-      role: "alert",
-      tabIndex: alertTabIndex,
-      onBlur: handleBlur,
-      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"
-        }))
-      }) : _span || (_span = /*#__PURE__*/_jsx("span", {}))]
+    "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;
-
-export { DSBannerWithSchema, DSBanner as default };
+var DSBanner_default = DSBanner;
+export {
+  DSBanner,
+  DSBannerWithSchema,
+  DSBanner_default as default
+};
+//# sourceMappingURL=DSBanner.js.map

package/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,OACR;AAAA,IACJ;AAAA,KAEA,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/esm/defaultProps.js

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

package/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/esm/index.d.js

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

package/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/esm/index.js

@@ -1,2 +1,8 @@
-export { DSBannerWithSchema, default } from './DSBanner.js';
-export { BANNER_TYPES } from './utils/bannerTypes.js';
+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/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/esm/propTypes.js

@@ -1,20 +1,26 @@
-import { PropTypes } from 'react-desc';
-import { BANNER_TYPES } from './utils/bannerTypes.js';
-
+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),
+  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("\n      Reference to use actions:\n      - focusOnLink: function to focus the banner\n      - focusOnWrapper: function to focus the link\n    ").defaultValue({})
+  }).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 };
+export {
+  propTypes
+};
+//# sourceMappingURL=propTypes.js.map

package/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/esm/styles.js

@@ -1,131 +1,78 @@
-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 };
+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/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/esm/utils/bannerTypes.js

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

package/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": []
+}