@elliemae/ds-banner 3.17.0-next.2 → 3.17.0-next.20

package/dist/cjs/DSBanner.js

@@ -35,7 +35,7 @@ __export(DSBanner_exports, {
 module.exports = __toCommonJS(DSBanner_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_icons = require("./utils/icons.js");
@@ -44,7 +44,20 @@ var import_exported_related = require("./exported-related/index.js");
 var import_styles = require("./styles.js");
 const DSBanner = (props) => {
   const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
-  const { type, isOpen, onClose, label, body, actionLink, showCloseButton, containerProps, actionRef, ...rest } = propsWithDefaults;
+  const {
+    type,
+    isOpen,
+    onClose,
+    label,
+    body,
+    closeBtnRef,
+    CustomBody,
+    actionLink,
+    showCloseButton,
+    containerProps,
+    actionRef,
+    ...rest
+  } = propsWithDefaults;
   const { height: globalHeight, ...globalAttrs } = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest);
   const xstyledAttrs = (0, import_ds_props_helpers.useGetXstyledProps)(rest);
   const innerContainerRef = (0, import_react.useRef)(null);
@@ -85,12 +98,30 @@ const DSBanner = (props) => {
         linkRef.current.click();
     }
   }, []);
+  const handleOnKeyDownToClose = (0, import_react.useCallback)(
+    (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    },
+    [onClose]
+  );
   (0, import_react.useLayoutEffect)(() => {
     if (isOpen !== current || isOpen)
       setIsAnimating(true);
     else
       setIsAnimating(false);
   }, [isOpen, current]);
+  const innerCols = import_react.default.useMemo(() => {
+    if (!CustomBody) {
+      const finalCols = ["auto", "fit-content(50%)", "1fr"];
+      if (showCloseButton)
+        finalCols.push("auto");
+      return finalCols;
+    }
+    return ["1fr", "auto"];
+  }, [CustomBody, showCloseButton]);
   if (!isAnimating && !isOpen)
     return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -98,15 +129,19 @@ const DSBanner = (props) => {
     {
       isOpen,
       height,
+      onKeyDown: handleOnKeyDownToClose,
       isAnimating,
       onAnimationEnd: () => setCurrent(isOpen),
       "data-testid": import_exported_related.DSBannerDatatestid.CONTAINER,
       ...containerProps,
       ...globalAttrs,
       ...xstyledAttrs,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_styles.StyledInnerContainer,
         {
+          cols: innerCols,
+          justifyItems: CustomBody ? "center" : "",
+          alignItems: height === 41 ? "center" : "flex-start",
           type,
           isOpen,
           ref: innerContainerRef,
@@ -115,10 +150,10 @@ const DSBanner = (props) => {
           role: "alert",
           tabIndex: alertTabIndex,
           onBlur: handleBlur,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledIconContainer, { "data-testid": import_exported_related.DSBannerDatatestid.ICON_CONTAINER, children: import_icons.icons[type] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTitle, { children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledSubTitle, { children: [
+          children: !CustomBody ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledIconContainer, { height, "data-testid": import_exported_related.DSBannerDatatestid.ICON_CONTAINER, children: import_icons.icons[type] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTitle, { height, children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledSubTitle, { height, children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: body }),
               actionLink && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_styles.StyledActionLink,
@@ -139,12 +174,14 @@ const DSBanner = (props) => {
               {
                 "data-testid": import_exported_related.DSBannerDatatestid.CLOSE_BUTTON,
                 buttonType: "icon",
+                height,
+                innerRef: closeBtnRef,
                 onClick: onClose,
                 "aria-label": "Close icon",
                 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseX, { width: 12, height: 12 })
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {})
-          ]
+            ) : null
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomBody, {})
         }
       )
     }

package/dist/cjs/DSBanner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSBanner.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useCallback, useState, useEffect } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { icons } from './utils/icons.js';\nimport { propTypes, defaultProps } from './react-desc-prop-types.js';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport {\n  StyledActionLink,\n  StyledCloseButton,\n  StyledInnerContainer,\n  StyledBannerContainer,\n  StyledIconContainer,\n  StyledSubTitle,\n  StyledTitle,\n} from './styles.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n  const { type, isOpen, onClose, label, body, actionLink, showCloseButton, containerProps, actionRef, ...rest } =\n    propsWithDefaults;\n\n  const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);\n\n  const xstyledAttrs = useGetXstyledProps(rest);\n\n  const innerContainerRef = useRef<HTMLDivElement>(null);\n  const linkRef = useRef<HTMLAnchorElement>(null);\n  const [current, setCurrent] = useState<boolean>(isOpen);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n  const [height, setHeight] = useState(0);\n  const [alertTabIndex, setAlertTabIndex] = useState<number | undefined>(undefined);\n\n  useEffect(() => {\n    if (innerContainerRef.current) {\n      setHeight(innerContainerRef.current.offsetHeight);\n    }\n  }, [isAnimating, isOpen]);\n\n  useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusOnWrapper = () => {\n        if (innerContainerRef.current) {\n          setAlertTabIndex(0);\n          setTimeout(() => {\n            innerContainerRef.current?.focus();\n          }, 300);\n        }\n      };\n      actionRef.current.focusOnLink = () => {\n        if (linkRef.current) {\n          linkRef.current.focus();\n        }\n      };\n    }\n  }, [actionRef]);\n\n  const handleBlur = useCallback(() => {\n    setAlertTabIndex(undefined);\n  }, []);\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  useLayoutEffect(() => {\n    if (isOpen !== current || isOpen) setIsAnimating(true);\n    else setIsAnimating(false);\n  }, [isOpen, current]);\n\n  if (!isAnimating && !isOpen) return null;\n\n  return (\n    <StyledBannerContainer\n      isOpen={isOpen}\n      height={height}\n      isAnimating={isAnimating}\n      onAnimationEnd={() => setCurrent(isOpen)}\n      data-testid={DSBannerDatatestid.CONTAINER}\n      {...containerProps}\n      {...globalAttrs}\n      {...xstyledAttrs}\n    >\n      <StyledInnerContainer\n        type={type}\n        isOpen={isOpen}\n        ref={innerContainerRef}\n        isAnimating={isAnimating}\n        data-testid={DSBannerDatatestid.INNER_CONTAINER}\n        role=\"alert\"\n        tabIndex={alertTabIndex}\n        onBlur={handleBlur}\n      >\n        <StyledIconContainer data-testid={DSBannerDatatestid.ICON_CONTAINER}>{icons[type]}</StyledIconContainer>\n        <StyledTitle>{label}</StyledTitle>\n        <StyledSubTitle>\n          <span>{body}</span>\n          {actionLink && (\n            <StyledActionLink\n              data-testid={DSBannerDatatestid.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        {showCloseButton ? (\n          <StyledCloseButton\n            data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n            buttonType=\"icon\"\n            onClick={onClose}\n            aria-label=\"Close icon\"\n          >\n            <CloseX width={12} height={12} />\n          </StyledCloseButton>\n        ) : (\n          <span />\n        )}\n      </StyledInnerContainer>\n    </StyledBannerContainer>\n  );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = propTypes;\n\nexport default DSBanner;\nexport { DSBanner, DSBannerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useCallback, useState, useEffect } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { icons } from './utils/icons.js';\nimport { propTypes, defaultProps } from './react-desc-prop-types.js';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport {\n  StyledActionLink,\n  StyledCloseButton,\n  StyledInnerContainer,\n  StyledBannerContainer,\n  StyledIconContainer,\n  StyledSubTitle,\n  StyledTitle,\n} from './styles.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n  const {\n    type,\n    isOpen,\n    onClose,\n    label,\n    body,\n    closeBtnRef,\n    CustomBody,\n    actionLink,\n    showCloseButton,\n    containerProps,\n    actionRef,\n    ...rest\n  } = propsWithDefaults;\n  // eslint-disable-next-line no-unused-vars\n  const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);\n\n  const xstyledAttrs = useGetXstyledProps(rest);\n\n  const innerContainerRef = useRef<HTMLDivElement>(null);\n  const linkRef = useRef<HTMLAnchorElement>(null);\n  const [current, setCurrent] = useState<boolean>(isOpen);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n  const [height, setHeight] = useState(0);\n  const [alertTabIndex, setAlertTabIndex] = useState<number | undefined>(undefined);\n\n  useEffect(() => {\n    if (innerContainerRef.current) {\n      setHeight(innerContainerRef.current.offsetHeight);\n    }\n  }, [isAnimating, isOpen]);\n\n  useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusOnWrapper = () => {\n        if (innerContainerRef.current) {\n          setAlertTabIndex(0);\n          setTimeout(() => {\n            innerContainerRef.current?.focus();\n          }, 300);\n        }\n      };\n      actionRef.current.focusOnLink = () => {\n        if (linkRef.current) {\n          linkRef.current.focus();\n        }\n      };\n    }\n  }, [actionRef]);\n\n  const handleBlur = useCallback(() => {\n    setAlertTabIndex(undefined);\n  }, []);\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  const handleOnKeyDownToClose = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n      }\n    },\n    [onClose],\n  );\n\n  useLayoutEffect(() => {\n    if (isOpen !== current || isOpen) setIsAnimating(true);\n    else setIsAnimating(false);\n  }, [isOpen, current]);\n\n  const innerCols = React.useMemo(() => {\n    if (!CustomBody) {\n      const finalCols = ['auto', 'fit-content(50%)', '1fr'];\n      if (showCloseButton) finalCols.push('auto');\n      return finalCols;\n    }\n    return ['1fr', 'auto'];\n  }, [CustomBody, showCloseButton]);\n\n  if (!isAnimating && !isOpen) return null;\n\n  return (\n    <StyledBannerContainer\n      isOpen={isOpen}\n      height={height}\n      onKeyDown={handleOnKeyDownToClose}\n      isAnimating={isAnimating}\n      onAnimationEnd={() => setCurrent(isOpen)}\n      data-testid={DSBannerDatatestid.CONTAINER}\n      {...containerProps}\n      {...globalAttrs}\n      {...xstyledAttrs}\n    >\n      <StyledInnerContainer\n        cols={innerCols}\n        justifyItems={CustomBody ? 'center' : ''}\n        alignItems={height === 41 ? 'center' : 'flex-start'}\n        type={type}\n        isOpen={isOpen}\n        ref={innerContainerRef}\n        isAnimating={isAnimating}\n        data-testid={DSBannerDatatestid.INNER_CONTAINER}\n        role=\"alert\"\n        tabIndex={alertTabIndex}\n        onBlur={handleBlur}\n      >\n        {!CustomBody ? (\n          <>\n            <StyledIconContainer height={height} data-testid={DSBannerDatatestid.ICON_CONTAINER}>\n              {icons[type]}\n            </StyledIconContainer>\n            <StyledTitle height={height}>{label}</StyledTitle>\n            <StyledSubTitle height={height}>\n              <span>{body}</span>\n              {actionLink && (\n                <StyledActionLink\n                  data-testid={DSBannerDatatestid.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            {showCloseButton ? (\n              <StyledCloseButton\n                data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n                buttonType=\"icon\"\n                height={height}\n                innerRef={closeBtnRef}\n                onClick={onClose}\n                aria-label=\"Close icon\"\n              >\n                <CloseX width={12} height={12} />\n              </StyledCloseButton>\n            ) : null}\n          </>\n        ) : (\n          <CustomBody />\n        )}\n      </StyledInnerContainer>\n    </StyledBannerContainer>\n  );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = propTypes;\n\nexport default DSBanner;\nexport { DSBanner, DSBannerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Ib;AA1IV,mBAAiF;AACjF,8BAKO;AACP,sBAAuB;AACvB,mBAAsB;AACtB,mCAAwC;AACxC,8BAAiD;AACjD,oBAQO;AAGP,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,wBAAoB,sDAA6B,OAAO,yCAAY;AAE1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,QAAQ,cAAc,GAAG,YAAY,QAAI,gDAAuB,IAAI;AAE5E,QAAM,mBAAe,4CAAmB,IAAI;AAE5C,QAAM,wBAAoB,qBAAuB,IAAI;AACrD,QAAM,cAAU,qBAA0B,IAAI;AAC9C,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAkB,MAAM;AACtD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAkB,KAAK;AAC7D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,CAAC;AACtC,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAA6B,MAAS;AAEhF,8BAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,gBAAU,kBAAkB,QAAQ,YAAY;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,aAAa,MAAM,CAAC;AAExB,8BAAU,MAAM;AACd,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,iBAAiB,MAAM;AACvC,YAAI,kBAAkB,SAAS;AAC7B,2BAAiB,CAAC;AAClB,qBAAW,MAAM;AACf,8BAAkB,SAAS,MAAM;AAAA,UACnC,GAAG,GAAG;AAAA,QACR;AAAA,MACF;AACA,gBAAU,QAAQ,cAAc,MAAM;AACpC,YAAI,QAAQ,SAAS;AACnB,kBAAQ,QAAQ,MAAM;AAAA,QACxB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,iBAAa,0BAAY,MAAM;AACnC,qBAAiB,MAAS;AAAA,EAC5B,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,CAAC,MAA2B;AAC9D,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAe;AACjB,UAAI,QAAQ;AAAS,gBAAQ,QAAQ,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,6BAAyB;AAAA,IAC7B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,UAAE,eAAe;AACjB,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,oCAAgB,MAAM;AACpB,QAAI,WAAW,WAAW;AAAQ,qBAAe,IAAI;AAAA;AAChD,qBAAe,KAAK;AAAA,EAC3B,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,QAAM,YAAY,aAAAA,QAAM,QAAQ,MAAM;AACpC,QAAI,CAAC,YAAY;AACf,YAAM,YAAY,CAAC,QAAQ,oBAAoB,KAAK;AACpD,UAAI;AAAiB,kBAAU,KAAK,MAAM;AAC1C,aAAO;AAAA,IACT;AACA,WAAO,CAAC,OAAO,MAAM;AAAA,EACvB,GAAG,CAAC,YAAY,eAAe,CAAC;AAEhC,MAAI,CAAC,eAAe,CAAC;AAAQ,WAAO;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,gBAAgB,MAAM,WAAW,MAAM;AAAA,MACvC,eAAa,2CAAmB;AAAA,MAC/B,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,cAAc,aAAa,WAAW;AAAA,UACtC,YAAY,WAAW,KAAK,WAAW;AAAA,UACvC;AAAA,UACA;AAAA,UACA,KAAK;AAAA,UACL;AAAA,UACA,eAAa,2CAAmB;AAAA,UAChC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,QAAQ;AAAA,UAEP,WAAC,aACA,4EACE;AAAA,wDAAC,qCAAoB,QAAgB,eAAa,2CAAmB,gBAClE,6BAAM,IAAI,GACb;AAAA,YACA,4CAAC,6BAAY,QAAiB,iBAAM;AAAA,YACpC,6CAAC,gCAAe,QACd;AAAA,0DAAC,UAAM,gBAAK;AAAA,cACX,cACC;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAa,2CAAmB;AAAA,kBAChC,SAAS,WAAW;AAAA,kBACpB,MAAM,WAAW;AAAA,kBACjB,KAAK;AAAA,kBACL,WAAW;AAAA,kBACX,UAAU;AAAA,kBACV,aAAa;AAAA,kBAEZ,qBAAW;AAAA;AAAA,cACd;AAAA,eAEJ;AAAA,YACC,kBACC;AAAA,cAAC;AAAA;AAAA,gBACC,eAAa,2CAAmB;AAAA,gBAChC,YAAW;AAAA,gBACX;AAAA,gBACA,UAAU;AAAA,gBACV,SAAS;AAAA,gBACT,cAAW;AAAA,gBAEX,sDAAC,0BAAO,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,YACjC,IACE;AAAA,aACN,IAEA,4CAAC,cAAW;AAAA;AAAA,MAEhB;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAE/B,IAAO,mBAAQ;",
+  "names": ["React"]
 }

package/dist/cjs/exported-related/DSBannerDatatestid.js

@@ -34,6 +34,7 @@ module.exports = __toCommonJS(DSBannerDatatestid_exports);
 var React = __toESM(require("react"));
 const DSBannerDatatestid = {
   CONTAINER: "ds-banner-container",
+  CUSTOM_CONTAINER: "ds-banner-custom-container",
   INNER_CONTAINER: "ds-banner",
   ICON_CONTAINER: "ds-banner-icon",
   ACTION_LINK: "ds-banner-action-link",

package/dist/cjs/exported-related/DSBannerDatatestid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/exported-related/DSBannerDatatestid.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSBannerDatatestid = {\n  CONTAINER: 'ds-banner-container',\n  INNER_CONTAINER: 'ds-banner',\n  ICON_CONTAINER: 'ds-banner-icon',\n  ACTION_LINK: 'ds-banner-action-link',\n  CLOSE_BUTTON: 'ds-banner-close-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB;AAAA,EAChC,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
+  "sourcesContent": ["export const DSBannerDatatestid = {\n  CONTAINER: 'ds-banner-container',\n  CUSTOM_CONTAINER: 'ds-banner-custom-container',\n  INNER_CONTAINER: 'ds-banner',\n  ICON_CONTAINER: 'ds-banner-icon',\n  ACTION_LINK: 'ds-banner-action-link',\n  CLOSE_BUTTON: 'ds-banner-close-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB;AAAA,EAChC,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
   "names": []
 }

package/dist/cjs/exported-related/theming.js

@@ -37,6 +37,7 @@ const DSBannerName = "DSBanner";
 const DSBannerSlots = {
   CONTAINER: "root",
   INNER_CONTAINER: "inner-container",
+  CUSTOM_CONTAINER: "custom-container",
   TITLE: "title",
   SUBTITLE: "subtitle",
   ICON_CONTAINER: "icon-container",

package/dist/cjs/exported-related/theming.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/exported-related/theming.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSBannerName = 'DSBanner';\n\nexport const DSBannerSlots = {\n  CONTAINER: 'root',\n  INNER_CONTAINER: 'inner-container',\n  TITLE: 'title',\n  SUBTITLE: 'subtitle',\n  ICON_CONTAINER: 'icon-container',\n  ACTION_LINK: 'action-link',\n  CLOSE_BUTTON: 'close-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAErB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
+  "sourcesContent": ["export const DSBannerName = 'DSBanner';\n\nexport const DSBannerSlots = {\n  CONTAINER: 'root',\n  INNER_CONTAINER: 'inner-container',\n  CUSTOM_CONTAINER: 'custom-container',\n  TITLE: 'title',\n  SUBTITLE: 'subtitle',\n  ICON_CONTAINER: 'icon-container',\n  ACTION_LINK: 'action-link',\n  CLOSE_BUTTON: 'close-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAErB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -50,10 +50,12 @@ const propTypes = {
   containerProps: import_ds_props_helpers.PropTypes.object.description("Set of Properties attached to the main container.").defaultValue({}),
   label: import_ds_props_helpers.PropTypes.string.description("Banner label.").defaultValue(""),
   body: import_ds_props_helpers.PropTypes.string.description("Banner body content").defaultValue(""),
+  CustomBody: import_ds_props_helpers.PropTypes.func.description("Banner custom content").defaultValue(""),
   type: import_ds_props_helpers.PropTypes.oneOf(Object.values(import_exported_related.BANNER_TYPES)).description("Banner type.").defaultValue(import_exported_related.BANNER_TYPES.INFO),
   onClose: import_ds_props_helpers.PropTypes.func.description("Callback when the Banner closes."),
   isOpen: import_ds_props_helpers.PropTypes.bool.description("Whether the Banner is open or closed.").defaultValue(true),
   showCloseButton: import_ds_props_helpers.PropTypes.bool.description("Whether to show close button or not.").defaultValue(true),
+  closeBtnRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.object, import_ds_props_helpers.PropTypes.func]).description("Inner ref to button component."),
   actionLink: import_ds_props_helpers.PropTypes.shape({
     label: import_ds_props_helpers.PropTypes.string,
     onClick: import_ds_props_helpers.PropTypes.func,

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\n\nexport declare namespace DSBannerT {\n  export interface Props {\n    type?: DSBannerInternalsT.BannerTypesT;\n    isOpen?: boolean;\n    onClose?: () => void | null;\n    actionLink?: DSBannerInternalsT.ActionLinkT;\n    label?: string;\n    body?: string;\n    showCloseButton?: boolean;\n    containerProps?: Record<string, unknown>;\n    actionRef?: {\n      current: {\n        focusOnWrapper?: () => void;\n        focusOnLink?: () => void;\n      };\n    };\n  }\n}\n\nexport const defaultProps: DSBannerT.Props = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: BANNER_TYPES.INFO,\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container.').defaultValue({}),\n  label: PropTypes.string.description('Banner label.').defaultValue(''),\n  body: PropTypes.string.description('Banner body content').defaultValue(''),\n  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('Banner type.').defaultValue(BANNER_TYPES.INFO),\n  onClose: PropTypes.func.description('Callback 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 for the Action Link.')\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} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAuE;AACvE,8BAA6B;AAsBtB,MAAM,eAAgC;AAAA,EAC3C,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,qCAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,kCAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EACjH,OAAO,kCAAU,OAAO,YAAY,eAAe,EAAE,aAAa,EAAE;AAAA,EACpE,MAAM,kCAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,EAAE;AAAA,EACzE,MAAM,kCAAU,MAAM,OAAO,OAAO,oCAAY,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,qCAAa,IAAI;AAAA,EAC7G,SAAS,kCAAU,KAAK,YAAY,kCAAkC;AAAA,EACtE,QAAQ,kCAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,IAAI;AAAA,EAC7F,iBAAiB,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EACrG,YAAY,kCAAU,MAAM;AAAA,IAC1B,OAAO,kCAAU;AAAA,IACjB,SAAS,kCAAU;AAAA,IACnB,MAAM,kCAAU;AAAA,EAClB,CAAC,EACE,YAAY,iCAAiC,EAC7C,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,kCAAU,OAClB;AAAA,IACC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EACC,aAAa,CAAC,CAAC;AACpB;",
+  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\n\nexport declare namespace DSBannerT {\n  export interface Props {\n    type?: DSBannerInternalsT.BannerTypesT;\n    isOpen?: boolean;\n    onClose?: () => void | null;\n    actionLink?: DSBannerInternalsT.ActionLinkT;\n    label?: string;\n    body?: string;\n    CustomBody?: React.ComponentType<Record<string, unknown>>;\n    closeBtnRef?: React.MutableRefObject<HTMLButtonElement | null> | ((ref: HTMLButtonElement | null) => void);\n    showCloseButton?: boolean;\n    containerProps?: Record<string, unknown>;\n    actionRef?: {\n      current: {\n        focusOnWrapper?: () => void;\n        focusOnLink?: () => void;\n      };\n    };\n  }\n}\n\nexport const defaultProps: DSBannerT.Props = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: BANNER_TYPES.INFO,\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container.').defaultValue({}),\n  label: PropTypes.string.description('Banner label.').defaultValue(''),\n  body: PropTypes.string.description('Banner body content').defaultValue(''),\n  CustomBody: PropTypes.func.description('Banner custom content').defaultValue(''),\n  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('Banner type.').defaultValue(BANNER_TYPES.INFO),\n  onClose: PropTypes.func.description('Callback 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  closeBtnRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  actionLink: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    href: PropTypes.string,\n  })\n    .description('Properties for the Action Link.')\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} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAuE;AACvE,8BAA6B;AAwBtB,MAAM,eAAgC;AAAA,EAC3C,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,qCAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,kCAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EACjH,OAAO,kCAAU,OAAO,YAAY,eAAe,EAAE,aAAa,EAAE;AAAA,EACpE,MAAM,kCAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,EAAE;AAAA,EACzE,YAAY,kCAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,MAAM,kCAAU,MAAM,OAAO,OAAO,oCAAY,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,qCAAa,IAAI;AAAA,EAC7G,SAAS,kCAAU,KAAK,YAAY,kCAAkC;AAAA,EACtE,QAAQ,kCAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,IAAI;AAAA,EAC7F,iBAAiB,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EACrG,aAAa,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EACjH,YAAY,kCAAU,MAAM;AAAA,IAC1B,OAAO,kCAAU;AAAA,IACjB,SAAS,kCAAU;AAAA,IACnB,MAAM,kCAAU;AAAA,EAClB,CAAC,EACE,YAAY,iCAAiC,EAC7C,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,kCAAU,OAClB;AAAA,IACC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EACC,aAAa,CAAC,CAAC;AACpB;",
   "names": []
 }

package/dist/cjs/styles.js

@@ -42,6 +42,7 @@ var import_ds_system = require("@elliemae/ds-system");
 var import_ds_button = require("@elliemae/ds-button");
 var import_styleHelpers = require("./utils/styleHelpers.js");
 var import_exported_related = require("./exported-related/index.js");
+var import_ds_grid = require("@elliemae/ds-grid");
 const StyledBannerContainer = (0, import_ds_system.styled)("div", {
   name: import_exported_related.DSBannerName,
   slot: import_exported_related.DSBannerSlots.CONTAINER
@@ -51,50 +52,46 @@ const StyledBannerContainer = (0, import_ds_system.styled)("div", {
   ${({ isAnimating, isOpen, height }) => (0, import_styleHelpers.handleAnimation)(isAnimating, isOpen, height)};
   ${import_ds_system.xStyledCommonProps}
 `;
-const StyledInnerContainer = (0, import_ds_system.styled)("div", {
+const StyledInnerContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   name: import_exported_related.DSBannerName,
   slot: import_exported_related.DSBannerSlots.INNER_CONTAINER
 })`
-  padding-right: 6px;
-  display: grid;
-  align-items: center;
+  padding-right: 4px;
   min-height: 41px;
   width: 100%;
   background-color: ${({ theme }) => theme.colors.neutral["000"]};
   border-bottom: 5px solid ${({ type, theme }) => (0, import_styleHelpers.handleBorderColor)(type, theme)};
   transform: translateY(${({ isOpen }) => isOpen ? "0" : "-100%"});
   ${({ isAnimating, isOpen }) => (0, import_styleHelpers.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 = (0, import_ds_system.styled)("div", { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.ICON_CONTAINER })`
+const StyledIconContainer = (0, import_ds_system.styled)("div", {
+  name: import_exported_related.DSBannerName,
+  slot: import_exported_related.DSBannerSlots.ICON_CONTAINER
+})`
+  margin-top: ${({ height }) => height > 41 ? "6px" : "2px"};
   margin-right: ${({ theme }) => theme.space.xxs};
   margin-left: ${({ theme }) => theme.space.xs};
+  min-width: 0px;
 `;
 const StyledTitle = (0, import_ds_system.styled)("div", { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.TITLE })`
   color: ${({ theme }) => theme.colors.neutral[700]};
   font-size: ${({ theme }) => theme.fontSizes.label[400]};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  margin-top: ${({ height }) => height > 41 ? "8px" : "1px"};
+  font-size: 14px;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+  min-width: 0px;
 `;
 const StyledSubTitle = (0, import_ds_system.styled)("div", { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.SUBTITLE })`
-  width: 100%;
   margin-left: ${({ theme }) => theme.space.xs};
   font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};
   font-weight: ${({ theme }) => theme.fontWeights.regular};
+  margin-top: ${({ height }) => height > 41 ? "8px" : "1px"};
+  font-size: 14px;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+  min-width: 0px;
 `;
 const StyledActionLink = (0, import_ds_system.styled)("a", { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.ACTION_LINK })`
   margin-left: ${({ theme, isBodyEmpty }) => isBodyEmpty ? theme.space.xs : 0};
@@ -107,12 +104,17 @@ const StyledActionLink = (0, import_ds_system.styled)("a", { name: import_export
   border: 2px solid transparent;
   border-radius: 2px;
   padding: 2px 4px;
+  min-width: 0px;
   &:focus {
     outline: none;
     border: 2px solid ${({ theme }) => theme.colors.brand[700]};
   }
 `;
-const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.CLOSE_BUTTON })`
+const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, {
+  name: import_exported_related.DSBannerName,
+  slot: import_exported_related.DSBannerSlots.CLOSE_BUTTON
+})`
   margin-left: ${({ theme }) => theme.space.xxs};
+  margin-top: ${({ height }) => height > 41 ? "5px" : "2px"};
 `;
 //# sourceMappingURL=styles.js.map

package/dist/cjs/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { SizingProps, LayoutProps, SpaceProps, ColorProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\nimport { DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n  isOpen: boolean;\n  isAnimating: boolean;\n  height: number;\n}\n\ninterface StyledInnerContainerT {\n  type: DSBannerInternalsT.BannerTypesT;\n  isOpen: boolean;\n  isAnimating: boolean;\n}\n\ninterface StyledActionLinkT {\n  isBodyEmpty: string;\n}\n\nexport const StyledBannerContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n  overflow: hidden;\n  height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n  ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledInnerContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\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  transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\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: DSBannerName, slot: DSBannerSlots.ICON_CONTAINER })`\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.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: DSBannerName, slot: DSBannerSlots.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('a', { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })<StyledActionLinkT>`\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  border: 2px solid transparent;\n  border-radius: 2px;\n  padding: 2px 4px;\n  &:focus {\n    outline: none;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  }\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2, { name: DSBannerName, slot: DSBannerSlots.CLOSE_BUTTON })`\n  margin-left: ${({ theme }) => theme.space.xxs};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAE3C,uBAA2B;AAC3B,0BAAmD;AACnD,8BAA4C;AAqBrC,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,OAAO,UAAM,qCAAgB,aAAa,QAAQ,MAAM;AAAA,IAChF;AAAA;AAGG,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMqB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,6BAClC,CAAC,EAAE,MAAM,MAAM,UAAM,uCAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,OAAO,MAAO,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,OAAO,UAAM,qCAAgB,aAAa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmB7D,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,eAAe,CAAC;AAAA,kBACzF,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAGrC,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,MAAM,CAAC;AAAA,WAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,eACnC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA,iBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAG3C,MAAM,qBAAiB,yBAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,SAAS,CAAC;AAAA;AAAA,iBAE/E,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,SAAS,GAAG;AAAA,iBACzC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAG3C,MAAM,uBAAmB,yBAAO,KAAK,EAAE,MAAM,sCAAc,MAAM,sCAAc,YAAY,CAAC;AAAA,iBAClF,CAAC,EAAE,OAAO,YAAY,MAAO,cAAc,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,eAI9D,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG;AAAA,iBAC1C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMxB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAItD,MAAM,wBAAoB,yBAAO,6BAAY,EAAE,MAAM,sCAAc,MAAM,sCAAc,aAAa,CAAC;AAAA,iBAC3F,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;",
+  "sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { SizingProps, LayoutProps, SpaceProps, ColorProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\nimport { DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\nimport { Grid } from '@elliemae/ds-grid';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n  isOpen: boolean;\n  isAnimating: boolean;\n  height: number;\n}\n\ninterface StyledInnerContainerT {\n  type: DSBannerInternalsT.BannerTypesT;\n  isOpen: boolean;\n  isAnimating: boolean;\n}\n\ninterface StyledIconContainerT {\n  height: number;\n}\n\ninterface StyledTitleT {\n  height: number;\n}\n\ninterface StyledSubTitleT {\n  height: number;\n}\n\ninterface StyledActionLinkT {\n  isBodyEmpty: string;\n}\n\ninterface StyledCloseButtonT {\n  height: number;\n}\n\nexport const StyledBannerContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n  overflow: hidden;\n  height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n  ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledInnerContainer = styled(Grid, {\n  name: DSBannerName,\n  slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n  padding-right: 4px;\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  transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n`;\n\nexport const StyledIconContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.ICON_CONTAINER,\n})<StyledIconContainerT>`\n  margin-top: ${({ height }) => (height > 41 ? '6px' : '2px')};\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n  min-width: 0px;\n`;\n\nexport const StyledTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.TITLE })<StyledTitleT>`\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  margin-top: ${({ height }) => (height > 41 ? '8px' : '1px')};\n  font-size: 14px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })<StyledSubTitleT>`\n  margin-left: ${({ theme }) => theme.space.xs};\n  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  margin-top: ${({ height }) => (height > 41 ? '8px' : '1px')};\n  font-size: 14px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledActionLink = styled('a', { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })<StyledActionLinkT>`\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  border: 2px solid transparent;\n  border-radius: 2px;\n  padding: 2px 4px;\n  min-width: 0px;\n  &:focus {\n    outline: none;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n  name: DSBannerName,\n  slot: DSBannerSlots.CLOSE_BUTTON,\n})<StyledCloseButtonT>`\n  margin-left: ${({ theme }) => theme.space.xxs};\n  margin-top: ${({ height }) => (height > 41 ? '5px' : '2px')};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAE3C,uBAA2B;AAC3B,0BAAmD;AACnD,8BAA4C;AAE5C,qBAAqB;AAoCd,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,OAAO,UAAM,qCAAgB,aAAa,QAAQ,MAAM;AAAA,IAChF;AAAA;AAGG,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA,sBAIqB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,6BAClC,CAAC,EAAE,MAAM,MAAM,UAAM,uCAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,OAAO,MAAO,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,OAAO,UAAM,qCAAgB,aAAa,MAAM;AAAA;AAG7D,MAAM,0BAAsB,yBAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA,gBACe,CAAC,EAAE,OAAO,MAAO,SAAS,KAAK,QAAQ;AAAA,kBACrC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAIrC,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,MAAM,CAAC;AAAA,WAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,eACnC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA,iBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,gBAClC,CAAC,EAAE,OAAO,MAAO,SAAS,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhD,MAAM,qBAAiB,yBAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,SAAS,CAAC;AAAA,iBAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,SAAS,GAAG;AAAA,iBACzC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,gBAClC,CAAC,EAAE,OAAO,MAAO,SAAS,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhD,MAAM,uBAAmB,yBAAO,KAAK,EAAE,MAAM,sCAAc,MAAM,sCAAc,YAAY,CAAC;AAAA,iBAClF,CAAC,EAAE,OAAO,YAAY,MAAO,cAAc,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,eAI9D,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG;AAAA,iBAC1C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOxB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAGtD,MAAM,wBAAoB,yBAAO,6BAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA,iBACgB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,gBAC5B,CAAC,EAAE,OAAO,MAAO,SAAS,KAAK,QAAQ;AAAA;",
   "names": []
 }

package/dist/esm/DSBanner.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useCallback, useState, useEffect } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React2, { useLayoutEffect, useRef, useCallback, useState, useEffect } from "react";
 import {
   describe,
   useMemoMergePropsWithDefault,
@@ -22,7 +22,20 @@ import {
 } from "./styles.js";
 const DSBanner = (props) => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
-  const { type, isOpen, onClose, label, body, actionLink, showCloseButton, containerProps, actionRef, ...rest } = propsWithDefaults;
+  const {
+    type,
+    isOpen,
+    onClose,
+    label,
+    body,
+    closeBtnRef,
+    CustomBody,
+    actionLink,
+    showCloseButton,
+    containerProps,
+    actionRef,
+    ...rest
+  } = propsWithDefaults;
   const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);
   const xstyledAttrs = useGetXstyledProps(rest);
   const innerContainerRef = useRef(null);
@@ -63,12 +76,30 @@ const DSBanner = (props) => {
         linkRef.current.click();
     }
   }, []);
+  const handleOnKeyDownToClose = useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    },
+    [onClose]
+  );
   useLayoutEffect(() => {
     if (isOpen !== current || isOpen)
       setIsAnimating(true);
     else
       setIsAnimating(false);
   }, [isOpen, current]);
+  const innerCols = React2.useMemo(() => {
+    if (!CustomBody) {
+      const finalCols = ["auto", "fit-content(50%)", "1fr"];
+      if (showCloseButton)
+        finalCols.push("auto");
+      return finalCols;
+    }
+    return ["1fr", "auto"];
+  }, [CustomBody, showCloseButton]);
   if (!isAnimating && !isOpen)
     return null;
   return /* @__PURE__ */ jsx(
@@ -76,15 +107,19 @@ const DSBanner = (props) => {
     {
       isOpen,
       height,
+      onKeyDown: handleOnKeyDownToClose,
       isAnimating,
       onAnimationEnd: () => setCurrent(isOpen),
       "data-testid": DSBannerDatatestid.CONTAINER,
       ...containerProps,
       ...globalAttrs,
       ...xstyledAttrs,
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(
         StyledInnerContainer,
         {
+          cols: innerCols,
+          justifyItems: CustomBody ? "center" : "",
+          alignItems: height === 41 ? "center" : "flex-start",
           type,
           isOpen,
           ref: innerContainerRef,
@@ -93,10 +128,10 @@ const DSBanner = (props) => {
           role: "alert",
           tabIndex: alertTabIndex,
           onBlur: handleBlur,
-          children: [
-            /* @__PURE__ */ jsx(StyledIconContainer, { "data-testid": DSBannerDatatestid.ICON_CONTAINER, children: icons[type] }),
-            /* @__PURE__ */ jsx(StyledTitle, { children: label }),
-            /* @__PURE__ */ jsxs(StyledSubTitle, { children: [
+          children: !CustomBody ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(StyledIconContainer, { height, "data-testid": DSBannerDatatestid.ICON_CONTAINER, children: icons[type] }),
+            /* @__PURE__ */ jsx(StyledTitle, { height, children: label }),
+            /* @__PURE__ */ jsxs(StyledSubTitle, { height, children: [
               /* @__PURE__ */ jsx("span", { children: body }),
               actionLink && /* @__PURE__ */ jsx(
                 StyledActionLink,
@@ -117,12 +152,14 @@ const DSBanner = (props) => {
               {
                 "data-testid": DSBannerDatatestid.CLOSE_BUTTON,
                 buttonType: "icon",
+                height,
+                innerRef: closeBtnRef,
                 onClick: onClose,
                 "aria-label": "Close icon",
                 children: /* @__PURE__ */ jsx(CloseX, { width: 12, height: 12 })
               }
-            ) : /* @__PURE__ */ jsx("span", {})
-          ]
+            ) : null
+          ] }) : /* @__PURE__ */ jsx(CustomBody, {})
         }
       )
     }

package/dist/esm/DSBanner.js.map

@@ -1,7 +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, useEffect } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { icons } from './utils/icons.js';\nimport { propTypes, defaultProps } from './react-desc-prop-types.js';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport {\n  StyledActionLink,\n  StyledCloseButton,\n  StyledInnerContainer,\n  StyledBannerContainer,\n  StyledIconContainer,\n  StyledSubTitle,\n  StyledTitle,\n} from './styles.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n  const { type, isOpen, onClose, label, body, actionLink, showCloseButton, containerProps, actionRef, ...rest } =\n    propsWithDefaults;\n\n  const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);\n\n  const xstyledAttrs = useGetXstyledProps(rest);\n\n  const innerContainerRef = useRef<HTMLDivElement>(null);\n  const linkRef = useRef<HTMLAnchorElement>(null);\n  const [current, setCurrent] = useState<boolean>(isOpen);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n  const [height, setHeight] = useState(0);\n  const [alertTabIndex, setAlertTabIndex] = useState<number | undefined>(undefined);\n\n  useEffect(() => {\n    if (innerContainerRef.current) {\n      setHeight(innerContainerRef.current.offsetHeight);\n    }\n  }, [isAnimating, isOpen]);\n\n  useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusOnWrapper = () => {\n        if (innerContainerRef.current) {\n          setAlertTabIndex(0);\n          setTimeout(() => {\n            innerContainerRef.current?.focus();\n          }, 300);\n        }\n      };\n      actionRef.current.focusOnLink = () => {\n        if (linkRef.current) {\n          linkRef.current.focus();\n        }\n      };\n    }\n  }, [actionRef]);\n\n  const handleBlur = useCallback(() => {\n    setAlertTabIndex(undefined);\n  }, []);\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  useLayoutEffect(() => {\n    if (isOpen !== current || isOpen) setIsAnimating(true);\n    else setIsAnimating(false);\n  }, [isOpen, current]);\n\n  if (!isAnimating && !isOpen) return null;\n\n  return (\n    <StyledBannerContainer\n      isOpen={isOpen}\n      height={height}\n      isAnimating={isAnimating}\n      onAnimationEnd={() => setCurrent(isOpen)}\n      data-testid={DSBannerDatatestid.CONTAINER}\n      {...containerProps}\n      {...globalAttrs}\n      {...xstyledAttrs}\n    >\n      <StyledInnerContainer\n        type={type}\n        isOpen={isOpen}\n        ref={innerContainerRef}\n        isAnimating={isAnimating}\n        data-testid={DSBannerDatatestid.INNER_CONTAINER}\n        role=\"alert\"\n        tabIndex={alertTabIndex}\n        onBlur={handleBlur}\n      >\n        <StyledIconContainer data-testid={DSBannerDatatestid.ICON_CONTAINER}>{icons[type]}</StyledIconContainer>\n        <StyledTitle>{label}</StyledTitle>\n        <StyledSubTitle>\n          <span>{body}</span>\n          {actionLink && (\n            <StyledActionLink\n              data-testid={DSBannerDatatestid.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        {showCloseButton ? (\n          <StyledCloseButton\n            data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n            buttonType=\"icon\"\n            onClick={onClose}\n            aria-label=\"Close icon\"\n          >\n            <CloseX width={12} height={12} />\n          </StyledCloseButton>\n        ) : (\n          <span />\n        )}\n      </StyledInnerContainer>\n    </StyledBannerContainer>\n  );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = propTypes;\n\nexport default DSBanner;\nexport { DSBanner, DSBannerWithSchema };\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useCallback, useState, useEffect } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { icons } from './utils/icons.js';\nimport { propTypes, defaultProps } from './react-desc-prop-types.js';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport {\n  StyledActionLink,\n  StyledCloseButton,\n  StyledInnerContainer,\n  StyledBannerContainer,\n  StyledIconContainer,\n  StyledSubTitle,\n  StyledTitle,\n} from './styles.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n  const {\n    type,\n    isOpen,\n    onClose,\n    label,\n    body,\n    closeBtnRef,\n    CustomBody,\n    actionLink,\n    showCloseButton,\n    containerProps,\n    actionRef,\n    ...rest\n  } = propsWithDefaults;\n  // eslint-disable-next-line no-unused-vars\n  const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);\n\n  const xstyledAttrs = useGetXstyledProps(rest);\n\n  const innerContainerRef = useRef<HTMLDivElement>(null);\n  const linkRef = useRef<HTMLAnchorElement>(null);\n  const [current, setCurrent] = useState<boolean>(isOpen);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n  const [height, setHeight] = useState(0);\n  const [alertTabIndex, setAlertTabIndex] = useState<number | undefined>(undefined);\n\n  useEffect(() => {\n    if (innerContainerRef.current) {\n      setHeight(innerContainerRef.current.offsetHeight);\n    }\n  }, [isAnimating, isOpen]);\n\n  useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusOnWrapper = () => {\n        if (innerContainerRef.current) {\n          setAlertTabIndex(0);\n          setTimeout(() => {\n            innerContainerRef.current?.focus();\n          }, 300);\n        }\n      };\n      actionRef.current.focusOnLink = () => {\n        if (linkRef.current) {\n          linkRef.current.focus();\n        }\n      };\n    }\n  }, [actionRef]);\n\n  const handleBlur = useCallback(() => {\n    setAlertTabIndex(undefined);\n  }, []);\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  const handleOnKeyDownToClose = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n      }\n    },\n    [onClose],\n  );\n\n  useLayoutEffect(() => {\n    if (isOpen !== current || isOpen) setIsAnimating(true);\n    else setIsAnimating(false);\n  }, [isOpen, current]);\n\n  const innerCols = React.useMemo(() => {\n    if (!CustomBody) {\n      const finalCols = ['auto', 'fit-content(50%)', '1fr'];\n      if (showCloseButton) finalCols.push('auto');\n      return finalCols;\n    }\n    return ['1fr', 'auto'];\n  }, [CustomBody, showCloseButton]);\n\n  if (!isAnimating && !isOpen) return null;\n\n  return (\n    <StyledBannerContainer\n      isOpen={isOpen}\n      height={height}\n      onKeyDown={handleOnKeyDownToClose}\n      isAnimating={isAnimating}\n      onAnimationEnd={() => setCurrent(isOpen)}\n      data-testid={DSBannerDatatestid.CONTAINER}\n      {...containerProps}\n      {...globalAttrs}\n      {...xstyledAttrs}\n    >\n      <StyledInnerContainer\n        cols={innerCols}\n        justifyItems={CustomBody ? 'center' : ''}\n        alignItems={height === 41 ? 'center' : 'flex-start'}\n        type={type}\n        isOpen={isOpen}\n        ref={innerContainerRef}\n        isAnimating={isAnimating}\n        data-testid={DSBannerDatatestid.INNER_CONTAINER}\n        role=\"alert\"\n        tabIndex={alertTabIndex}\n        onBlur={handleBlur}\n      >\n        {!CustomBody ? (\n          <>\n            <StyledIconContainer height={height} data-testid={DSBannerDatatestid.ICON_CONTAINER}>\n              {icons[type]}\n            </StyledIconContainer>\n            <StyledTitle height={height}>{label}</StyledTitle>\n            <StyledSubTitle height={height}>\n              <span>{body}</span>\n              {actionLink && (\n                <StyledActionLink\n                  data-testid={DSBannerDatatestid.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            {showCloseButton ? (\n              <StyledCloseButton\n                data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n                buttonType=\"icon\"\n                height={height}\n                innerRef={closeBtnRef}\n                onClick={onClose}\n                aria-label=\"Close icon\"\n              >\n                <CloseX width={12} height={12} />\n              </StyledCloseButton>\n            ) : null}\n          </>\n        ) : (\n          <CustomBody />\n        )}\n      </StyledInnerContainer>\n    </StyledBannerContainer>\n  );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = propTypes;\n\nexport default DSBanner;\nexport { DSBanner, DSBannerWithSchema };\n"],
+  "mappings": "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",
+  "names": ["React"]
 }

package/dist/esm/exported-related/DSBannerDatatestid.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 const DSBannerDatatestid = {
   CONTAINER: "ds-banner-container",
+  CUSTOM_CONTAINER: "ds-banner-custom-container",
   INNER_CONTAINER: "ds-banner",
   ICON_CONTAINER: "ds-banner-icon",
   ACTION_LINK: "ds-banner-action-link",

package/dist/esm/exported-related/DSBannerDatatestid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/DSBannerDatatestid.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSBannerDatatestid = {\n  CONTAINER: 'ds-banner-container',\n  INNER_CONTAINER: 'ds-banner',\n  ICON_CONTAINER: 'ds-banner-icon',\n  ACTION_LINK: 'ds-banner-action-link',\n  CLOSE_BUTTON: 'ds-banner-close-button',\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,qBAAqB;AAAA,EAChC,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSBannerDatatestid = {\n  CONTAINER: 'ds-banner-container',\n  CUSTOM_CONTAINER: 'ds-banner-custom-container',\n  INNER_CONTAINER: 'ds-banner',\n  ICON_CONTAINER: 'ds-banner-icon',\n  ACTION_LINK: 'ds-banner-action-link',\n  CLOSE_BUTTON: 'ds-banner-close-button',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,qBAAqB;AAAA,EAChC,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
   "names": []
 }

package/dist/esm/exported-related/theming.js

@@ -3,6 +3,7 @@ const DSBannerName = "DSBanner";
 const DSBannerSlots = {
   CONTAINER: "root",
   INNER_CONTAINER: "inner-container",
+  CUSTOM_CONTAINER: "custom-container",
   TITLE: "title",
   SUBTITLE: "subtitle",
   ICON_CONTAINER: "icon-container",

package/dist/esm/exported-related/theming.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSBannerName = 'DSBanner';\n\nexport const DSBannerSlots = {\n  CONTAINER: 'root',\n  INNER_CONTAINER: 'inner-container',\n  TITLE: 'title',\n  SUBTITLE: 'subtitle',\n  ICON_CONTAINER: 'icon-container',\n  ACTION_LINK: 'action-link',\n  CLOSE_BUTTON: 'close-button',\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AAErB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSBannerName = 'DSBanner';\n\nexport const DSBannerSlots = {\n  CONTAINER: 'root',\n  INNER_CONTAINER: 'inner-container',\n  CUSTOM_CONTAINER: 'custom-container',\n  TITLE: 'title',\n  SUBTITLE: 'subtitle',\n  ICON_CONTAINER: 'icon-container',\n  ACTION_LINK: 'action-link',\n  CLOSE_BUTTON: 'close-button',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AAErB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js

@@ -16,10 +16,12 @@ const propTypes = {
   containerProps: PropTypes.object.description("Set of Properties attached to the main container.").defaultValue({}),
   label: PropTypes.string.description("Banner label.").defaultValue(""),
   body: PropTypes.string.description("Banner body content").defaultValue(""),
+  CustomBody: PropTypes.func.description("Banner custom content").defaultValue(""),
   type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description("Banner type.").defaultValue(BANNER_TYPES.INFO),
   onClose: PropTypes.func.description("Callback 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),
+  closeBtnRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description("Inner ref to button component."),
   actionLink: PropTypes.shape({
     label: PropTypes.string,
     onClick: PropTypes.func,

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\n\nexport declare namespace DSBannerT {\n  export interface Props {\n    type?: DSBannerInternalsT.BannerTypesT;\n    isOpen?: boolean;\n    onClose?: () => void | null;\n    actionLink?: DSBannerInternalsT.ActionLinkT;\n    label?: string;\n    body?: string;\n    showCloseButton?: boolean;\n    containerProps?: Record<string, unknown>;\n    actionRef?: {\n      current: {\n        focusOnWrapper?: () => void;\n        focusOnLink?: () => void;\n      };\n    };\n  }\n}\n\nexport const defaultProps: DSBannerT.Props = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: BANNER_TYPES.INFO,\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container.').defaultValue({}),\n  label: PropTypes.string.description('Banner label.').defaultValue(''),\n  body: PropTypes.string.description('Banner body content').defaultValue(''),\n  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('Banner type.').defaultValue(BANNER_TYPES.INFO),\n  onClose: PropTypes.func.description('Callback 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 for the Action Link.')\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} as WeakValidationMap<unknown>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,oBAAoB;AAsBtB,MAAM,eAAgC;AAAA,EAC3C,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,aAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,UAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EACjH,OAAO,UAAU,OAAO,YAAY,eAAe,EAAE,aAAa,EAAE;AAAA,EACpE,MAAM,UAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,EAAE;AAAA,EACzE,MAAM,UAAU,MAAM,OAAO,OAAO,YAAY,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,aAAa,IAAI;AAAA,EAC7G,SAAS,UAAU,KAAK,YAAY,kCAAkC;AAAA,EACtE,QAAQ,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,IAAI;AAAA,EAC7F,iBAAiB,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EACrG,YAAY,UAAU,MAAM;AAAA,IAC1B,OAAO,UAAU;AAAA,IACjB,SAAS,UAAU;AAAA,IACnB,MAAM,UAAU;AAAA,EAClB,CAAC,EACE,YAAY,iCAAiC,EAC7C,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,UAAU,OAClB;AAAA,IACC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EACC,aAAa,CAAC,CAAC;AACpB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\n\nexport declare namespace DSBannerT {\n  export interface Props {\n    type?: DSBannerInternalsT.BannerTypesT;\n    isOpen?: boolean;\n    onClose?: () => void | null;\n    actionLink?: DSBannerInternalsT.ActionLinkT;\n    label?: string;\n    body?: string;\n    CustomBody?: React.ComponentType<Record<string, unknown>>;\n    closeBtnRef?: React.MutableRefObject<HTMLButtonElement | null> | ((ref: HTMLButtonElement | null) => void);\n    showCloseButton?: boolean;\n    containerProps?: Record<string, unknown>;\n    actionRef?: {\n      current: {\n        focusOnWrapper?: () => void;\n        focusOnLink?: () => void;\n      };\n    };\n  }\n}\n\nexport const defaultProps: DSBannerT.Props = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: BANNER_TYPES.INFO,\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container.').defaultValue({}),\n  label: PropTypes.string.description('Banner label.').defaultValue(''),\n  body: PropTypes.string.description('Banner body content').defaultValue(''),\n  CustomBody: PropTypes.func.description('Banner custom content').defaultValue(''),\n  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('Banner type.').defaultValue(BANNER_TYPES.INFO),\n  onClose: PropTypes.func.description('Callback 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  closeBtnRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  actionLink: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    href: PropTypes.string,\n  })\n    .description('Properties for the Action Link.')\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} as WeakValidationMap<unknown>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,oBAAoB;AAwBtB,MAAM,eAAgC;AAAA,EAC3C,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,aAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,UAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EACjH,OAAO,UAAU,OAAO,YAAY,eAAe,EAAE,aAAa,EAAE;AAAA,EACpE,MAAM,UAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,EAAE;AAAA,EACzE,YAAY,UAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,MAAM,UAAU,MAAM,OAAO,OAAO,YAAY,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,aAAa,IAAI;AAAA,EAC7G,SAAS,UAAU,KAAK,YAAY,kCAAkC;AAAA,EACtE,QAAQ,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,IAAI;AAAA,EAC7F,iBAAiB,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EACrG,aAAa,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EACjH,YAAY,UAAU,MAAM;AAAA,IAC1B,OAAO,UAAU;AAAA,IACjB,SAAS,UAAU;AAAA,IACnB,MAAM,UAAU;AAAA,EAClB,CAAC,EACE,YAAY,iCAAiC,EAC7C,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,UAAU,OAClB;AAAA,IACC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EACC,aAAa,CAAC,CAAC;AACpB;",
   "names": []
 }

package/dist/esm/styles.js

@@ -3,6 +3,7 @@ import { styled, xStyledCommonProps } from "@elliemae/ds-system";
 import { DSButtonV2 } from "@elliemae/ds-button";
 import { handleAnimation, handleBorderColor } from "./utils/styleHelpers.js";
 import { DSBannerName, DSBannerSlots } from "./exported-related/index.js";
+import { Grid } from "@elliemae/ds-grid";
 const StyledBannerContainer = styled("div", {
   name: DSBannerName,
   slot: DSBannerSlots.CONTAINER
@@ -12,50 +13,46 @@ const StyledBannerContainer = styled("div", {
   ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};
   ${xStyledCommonProps}
 `;
-const StyledInnerContainer = styled("div", {
+const StyledInnerContainer = styled(Grid, {
   name: DSBannerName,
   slot: DSBannerSlots.INNER_CONTAINER
 })`
-  padding-right: 6px;
-  display: grid;
-  align-items: center;
+  padding-right: 4px;
   min-height: 41px;
   width: 100%;
   background-color: ${({ theme }) => theme.colors.neutral["000"]};
   border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};
   transform: translateY(${({ isOpen }) => isOpen ? "0" : "-100%"});
   ${({ 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: DSBannerName, slot: DSBannerSlots.ICON_CONTAINER })`
+const StyledIconContainer = styled("div", {
+  name: DSBannerName,
+  slot: DSBannerSlots.ICON_CONTAINER
+})`
+  margin-top: ${({ height }) => height > 41 ? "6px" : "2px"};
   margin-right: ${({ theme }) => theme.space.xxs};
   margin-left: ${({ theme }) => theme.space.xs};
+  min-width: 0px;
 `;
 const StyledTitle = styled("div", { name: DSBannerName, slot: DSBannerSlots.TITLE })`
   color: ${({ theme }) => theme.colors.neutral[700]};
   font-size: ${({ theme }) => theme.fontSizes.label[400]};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  margin-top: ${({ height }) => height > 41 ? "8px" : "1px"};
+  font-size: 14px;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+  min-width: 0px;
 `;
 const StyledSubTitle = styled("div", { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`
-  width: 100%;
   margin-left: ${({ theme }) => theme.space.xs};
   font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};
   font-weight: ${({ theme }) => theme.fontWeights.regular};
+  margin-top: ${({ height }) => height > 41 ? "8px" : "1px"};
+  font-size: 14px;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+  min-width: 0px;
 `;
 const StyledActionLink = styled("a", { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })`
   margin-left: ${({ theme, isBodyEmpty }) => isBodyEmpty ? theme.space.xs : 0};
@@ -68,13 +65,18 @@ const StyledActionLink = styled("a", { name: DSBannerName, slot: DSBannerSlots.A
   border: 2px solid transparent;
   border-radius: 2px;
   padding: 2px 4px;
+  min-width: 0px;
   &:focus {
     outline: none;
     border: 2px solid ${({ theme }) => theme.colors.brand[700]};
   }
 `;
-const StyledCloseButton = styled(DSButtonV2, { name: DSBannerName, slot: DSBannerSlots.CLOSE_BUTTON })`
+const StyledCloseButton = styled(DSButtonV2, {
+  name: DSBannerName,
+  slot: DSBannerSlots.CLOSE_BUTTON
+})`
   margin-left: ${({ theme }) => theme.space.xxs};
+  margin-top: ${({ height }) => height > 41 ? "5px" : "2px"};
 `;
 export {
   StyledActionLink,

package/dist/esm/styles.js.map

@@ -1,7 +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, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { SizingProps, LayoutProps, SpaceProps, ColorProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\nimport { DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n  isOpen: boolean;\n  isAnimating: boolean;\n  height: number;\n}\n\ninterface StyledInnerContainerT {\n  type: DSBannerInternalsT.BannerTypesT;\n  isOpen: boolean;\n  isAnimating: boolean;\n}\n\ninterface StyledActionLinkT {\n  isBodyEmpty: string;\n}\n\nexport const StyledBannerContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n  overflow: hidden;\n  height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n  ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledInnerContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\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  transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\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: DSBannerName, slot: DSBannerSlots.ICON_CONTAINER })`\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.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: DSBannerName, slot: DSBannerSlots.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('a', { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })<StyledActionLinkT>`\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  border: 2px solid transparent;\n  border-radius: 2px;\n  padding: 2px 4px;\n  &:focus {\n    outline: none;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  }\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2, { name: DSBannerName, slot: DSBannerSlots.CLOSE_BUTTON })`\n  margin-left: ${({ theme }) => theme.space.xxs};\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAE3C,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB,yBAAyB;AACnD,SAAS,cAAc,qBAAqB;AAqBrC,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,OAAO,MAAM,gBAAgB,aAAa,QAAQ,MAAM;AAAA,IAChF;AAAA;AAGG,MAAM,uBAAuB,OAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMqB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,6BAClC,CAAC,EAAE,MAAM,MAAM,MAAM,kBAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,OAAO,MAAO,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,OAAO,MAAM,gBAAgB,aAAa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmB7D,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,eAAe,CAAC;AAAA,kBACzF,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAGrC,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,CAAC;AAAA,WAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,eACnC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA,iBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAG3C,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,SAAS,CAAC;AAAA;AAAA,iBAE/E,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,SAAS,GAAG;AAAA,iBACzC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAG3C,MAAM,mBAAmB,OAAO,KAAK,EAAE,MAAM,cAAc,MAAM,cAAc,YAAY,CAAC;AAAA,iBAClF,CAAC,EAAE,OAAO,YAAY,MAAO,cAAc,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,eAI9D,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG;AAAA,iBAC1C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMxB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAItD,MAAM,oBAAoB,OAAO,YAAY,EAAE,MAAM,cAAc,MAAM,cAAc,aAAa,CAAC;AAAA,iBAC3F,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { SizingProps, LayoutProps, SpaceProps, ColorProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\nimport { DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\nimport { Grid } from '@elliemae/ds-grid';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n  isOpen: boolean;\n  isAnimating: boolean;\n  height: number;\n}\n\ninterface StyledInnerContainerT {\n  type: DSBannerInternalsT.BannerTypesT;\n  isOpen: boolean;\n  isAnimating: boolean;\n}\n\ninterface StyledIconContainerT {\n  height: number;\n}\n\ninterface StyledTitleT {\n  height: number;\n}\n\ninterface StyledSubTitleT {\n  height: number;\n}\n\ninterface StyledActionLinkT {\n  isBodyEmpty: string;\n}\n\ninterface StyledCloseButtonT {\n  height: number;\n}\n\nexport const StyledBannerContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n  overflow: hidden;\n  height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n  ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledInnerContainer = styled(Grid, {\n  name: DSBannerName,\n  slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n  padding-right: 4px;\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  transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n`;\n\nexport const StyledIconContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.ICON_CONTAINER,\n})<StyledIconContainerT>`\n  margin-top: ${({ height }) => (height > 41 ? '6px' : '2px')};\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n  min-width: 0px;\n`;\n\nexport const StyledTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.TITLE })<StyledTitleT>`\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  margin-top: ${({ height }) => (height > 41 ? '8px' : '1px')};\n  font-size: 14px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })<StyledSubTitleT>`\n  margin-left: ${({ theme }) => theme.space.xs};\n  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  margin-top: ${({ height }) => (height > 41 ? '8px' : '1px')};\n  font-size: 14px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledActionLink = styled('a', { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })<StyledActionLinkT>`\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  border: 2px solid transparent;\n  border-radius: 2px;\n  padding: 2px 4px;\n  min-width: 0px;\n  &:focus {\n    outline: none;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n  name: DSBannerName,\n  slot: DSBannerSlots.CLOSE_BUTTON,\n})<StyledCloseButtonT>`\n  margin-left: ${({ theme }) => theme.space.xxs};\n  margin-top: ${({ height }) => (height > 41 ? '5px' : '2px')};\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAE3C,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB,yBAAyB;AACnD,SAAS,cAAc,qBAAqB;AAE5C,SAAS,YAAY;AAoCd,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,OAAO,MAAM,gBAAgB,aAAa,QAAQ,MAAM;AAAA,IAChF;AAAA;AAGG,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA,sBAIqB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,6BAClC,CAAC,EAAE,MAAM,MAAM,MAAM,kBAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,OAAO,MAAO,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,OAAO,MAAM,gBAAgB,aAAa,MAAM;AAAA;AAG7D,MAAM,sBAAsB,OAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,gBACe,CAAC,EAAE,OAAO,MAAO,SAAS,KAAK,QAAQ;AAAA,kBACrC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAIrC,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,CAAC;AAAA,WAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,eACnC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA,iBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,gBAClC,CAAC,EAAE,OAAO,MAAO,SAAS,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhD,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,SAAS,CAAC;AAAA,iBAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,SAAS,GAAG;AAAA,iBACzC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,gBAClC,CAAC,EAAE,OAAO,MAAO,SAAS,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhD,MAAM,mBAAmB,OAAO,KAAK,EAAE,MAAM,cAAc,MAAM,cAAc,YAAY,CAAC;AAAA,iBAClF,CAAC,EAAE,OAAO,YAAY,MAAO,cAAc,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,eAI9D,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG;AAAA,iBAC1C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOxB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAGtD,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,iBACgB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,gBAC5B,CAAC,EAAE,OAAO,MAAO,SAAS,KAAK,QAAQ;AAAA;",
   "names": []
 }

package/dist/types/exported-related/DSBannerDatatestid.d.ts

@@ -1,5 +1,6 @@
 export declare const DSBannerDatatestid: {
     CONTAINER: string;
+    CUSTOM_CONTAINER: string;
     INNER_CONTAINER: string;
     ICON_CONTAINER: string;
     ACTION_LINK: string;

package/dist/types/exported-related/theming.d.ts

@@ -2,6 +2,7 @@ export declare const DSBannerName = "DSBanner";
 export declare const DSBannerSlots: {
     CONTAINER: string;
     INNER_CONTAINER: string;
+    CUSTOM_CONTAINER: string;
     TITLE: string;
     SUBTITLE: string;
     ICON_CONTAINER: string;

package/dist/types/react-desc-prop-types.d.ts

@@ -8,6 +8,8 @@ export declare namespace DSBannerT {
         actionLink?: DSBannerInternalsT.ActionLinkT;
         label?: string;
         body?: string;
+        CustomBody?: React.ComponentType<Record<string, unknown>>;
+        closeBtnRef?: React.MutableRefObject<HTMLButtonElement | null> | ((ref: HTMLButtonElement | null) => void);
         showCloseButton?: boolean;
         containerProps?: Record<string, unknown>;
         actionRef?: {

package/dist/types/styles.d.ts

@@ -11,14 +11,26 @@ interface StyledInnerContainerT {
     isOpen: boolean;
     isAnimating: boolean;
 }
+interface StyledIconContainerT {
+    height: number;
+}
+interface StyledTitleT {
+    height: number;
+}
+interface StyledSubTitleT {
+    height: number;
+}
 interface StyledActionLinkT {
     isBodyEmpty: string;
 }
+interface StyledCloseButtonT {
+    height: number;
+}
 export declare const StyledBannerContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledBannerContainerT, never>;
-export declare const StyledInnerContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledInnerContainerT, never>;
-export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object, never>;
-export declare const StyledTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object, never>;
-export declare const StyledSubTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object, never>;
+export declare const StyledInnerContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, StyledInnerContainerT, never>;
+export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledIconContainerT, never>;
+export declare const StyledTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledTitleT, never>;
+export declare const StyledSubTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledSubTitleT, never>;
 export declare const StyledActionLink: import("styled-components").StyledComponent<"a", import("@elliemae/ds-system").Theme, StyledActionLinkT, never>;
-export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button").DSButtonT.Props>, import("@elliemae/ds-system").Theme, object, never>;
+export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button").DSButtonT.Props>, import("@elliemae/ds-system").Theme, StyledCloseButtonT, never>;
 export {};

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

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

package/dist/types/utils/icons.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const icons: Record<string, JSX.Element>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-banner",
-  "version": "3.17.0-next.2",
+  "version": "3.17.0-next.20",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Banner",
   "files": [
@@ -63,16 +63,19 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button": "3.17.0-next.2",
-    "@elliemae/ds-props-helpers": "3.17.0-next.2",
-    "@elliemae/ds-utilities": "3.17.0-next.2",
-    "@elliemae/ds-system": "3.17.0-next.2",
-    "@elliemae/ds-icons": "3.17.0-next.2"
+    "@xstyled/system": "~3.7.3",
+    "@xstyled/util": "3.7.0",
+    "@elliemae/ds-button": "3.17.0-next.20",
+    "@elliemae/ds-props-helpers": "3.17.0-next.20",
+    "@elliemae/ds-grid": "3.17.0-next.20",
+    "@elliemae/ds-system": "3.17.0-next.20",
+    "@elliemae/ds-icons": "3.17.0-next.20"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "~5.16.5",
     "@testing-library/react": "~12.1.3",
     "@testing-library/user-event": "~13.5.0",
+    "jest-axe": "^7.0.1",
     "styled-components": "~5.3.9"
   },
   "peerDependencies": {