@elliemae/ds-banner 2.3.0-alpha.6 → 2.3.0-next.0

package/dist/esm/DSBanner.js

@@ -1,117 +0,0 @@
-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, {
-    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

@@ -1,7 +0,0 @@
-{
-  "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/dist/esm/defaultProps.js

@@ -1,16 +0,0 @@
-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

@@ -1,7 +0,0 @@
-{
-  "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

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

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

@@ -1,7 +0,0 @@
-{
-  "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

@@ -1,8 +0,0 @@
-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

@@ -1,7 +0,0 @@
-{
-  "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

@@ -1,26 +0,0 @@
-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

@@ -1,7 +0,0 @@
-{
-  "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

@@ -1,78 +0,0 @@
-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

@@ -1,7 +0,0 @@
-{
-  "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

@@ -1,11 +0,0 @@
-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

@@ -1,7 +0,0 @@
-{
-  "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

@@ -1,29 +0,0 @@
-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

@@ -1,7 +0,0 @@
-{
-  "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

@@ -1,70 +0,0 @@
-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

@@ -1,7 +0,0 @@
-{
-  "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": []
-}