@elliemae/ds-banner 3.53.0-alpha.2 → 3.53.0-alpha.4

package/dist/cjs/DSBanner.js

@@ -48,19 +48,28 @@ var import_styles = require("./styles.js");
 const outOfTheBoxCols = ["auto", "fit-content(50%)", "1fr"];
 const outOfTheBoxColsSmallLayout = ["auto", "1fr"];
 const colsWithCustomBody = ["1fr", "auto"];
+const typeMap = {
+  alert: void 0,
+  polite: "polite",
+  assertive: "assertive",
+  none: "off"
+};
+const getIsLiveRegion = (type) => type === "polite" || type === "assertive";
 const LiveRegionCorrectlyImplemented = ({
   id,
   innerRef,
-  announcementType
+  announcementType,
+  ownerPropsConfig
 }) => import_react_dom.default.createPortal(
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
+    import_styles.StyledLiveRegionPortal,
     {
       id,
-      ref: innerRef,
+      innerRef,
       "aria-atomic": "true",
-      "aria-live": announcementType,
-      style: { clip: "rect(0 0 0 0)", position: "absolute" }
+      "aria-live": typeMap[announcementType],
+      "data-testid": import_exported_related.DSBannerDatatestid.LIVE_REGION_PORTAL,
+      ...ownerPropsConfig
     }
   ),
   document.body
@@ -80,6 +89,7 @@ const DSBanner = (props) => {
     containerProps,
     actionRef,
     withLiveRegionAnnouncement,
+    isPageNotice,
     ...rest
   } = propsWithDefaults;
   const { height: globalHeight, ...globalAttrs } = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest);
@@ -127,15 +137,16 @@ const DSBanner = (props) => {
     }
   }, []);
   (0, import_react.useEffect)(() => {
-    if (isOpen && withLiveRegionAnnouncement) read();
+    if (isOpen && getIsLiveRegion(withLiveRegionAnnouncement)) read();
   }, [isOpen, withLiveRegionAnnouncement, read]);
   if (!isOpen)
-    return withLiveRegionAnnouncement ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return getIsLiveRegion(withLiveRegionAnnouncement) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       LiveRegionCorrectlyImplemented,
       {
         id: `${generatedContainerId}-live-region`,
         innerRef: liveRegionRef,
-        announcementType: withLiveRegionAnnouncement
+        announcementType: withLiveRegionAnnouncement,
+        ownerPropsConfig
       }
     ) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -145,6 +156,7 @@ const DSBanner = (props) => {
       "data-testid": import_exported_related.DSBannerDatatestid.CONTAINER,
       innerRef: handleActionRefForContainer,
       tabIndex: -1,
+      role: isPageNotice ? "region" : void 0,
       ...containerProps,
       ...globalAttrs,
       ...xstyledAttrs,
@@ -157,7 +169,7 @@ const DSBanner = (props) => {
               cols: innerContainerCols,
               "data-type": type,
               "data-testid": import_exported_related.DSBannerDatatestid.INNER_CONTAINER,
-              role: !withLiveRegionAnnouncement ? "alert" : void 0,
+              role: withLiveRegionAnnouncement === "alert" ? "alert" : void 0,
               id: generatedContainerId,
               ...ownerPropsConfig,
               children: !CustomBody ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSBannerContent.DSBannerContent, { propsWithDefaults }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomBody, {})
@@ -177,12 +189,13 @@ const DSBanner = (props) => {
             }
           ) : null
         ] }),
-        withLiveRegionAnnouncement ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        getIsLiveRegion(withLiveRegionAnnouncement) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           LiveRegionCorrectlyImplemented,
           {
             id: `${generatedContainerId}-live-region`,
             innerRef: liveRegionRef,
-            announcementType: withLiveRegionAnnouncement
+            announcementType: withLiveRegionAnnouncement,
+            ownerPropsConfig
           }
         ) : null
       ]

package/dist/cjs/DSBanner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSBanner.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { CloseX } from '@elliemae/ds-icons';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport ReactDOM from 'react-dom';\nimport { uid } from 'uid';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSBannerContent } from './DSBannerContent.js';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { defaultProps, DSBannerPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledBannerContainer, StyledBannerLayout, StyledCloseButton, StyledInnerContainer } from './styles.js';\n\nconst outOfTheBoxCols = ['auto', 'fit-content(50%)', '1fr'];\nconst outOfTheBoxColsSmallLayout = ['auto', '1fr'];\nconst colsWithCustomBody = ['1fr', 'auto'];\n\nconst LiveRegionCorrectlyImplemented = ({\n  id,\n  innerRef,\n  announcementType,\n}: {\n  id: string;\n  innerRef: React.Ref<HTMLDivElement>;\n  announcementType: 'polite' | 'assertive';\n}) =>\n  ReactDOM.createPortal(\n    <div\n      id={id}\n      ref={innerRef}\n      aria-atomic=\"true\"\n      aria-live={announcementType}\n      style={{ clip: 'rect(0 0 0 0)', position: 'absolute' }}\n    />,\n    document.body,\n  );\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBannerT.InternalProps>(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    withLiveRegionAnnouncement,\n    ...rest\n  } = propsWithDefaults;\n  // eslint-disable-next-line no-unused-vars\n  const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);\n  const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n  const xstyledAttrs = useGetXstyledProps(rest);\n\n  const layoutMode = useGetLayoutMode();\n  const isSmall = layoutMode === 's' || layoutMode === 'xs';\n  const innerContainerCols = useMemo(() => {\n    if (CustomBody) return colsWithCustomBody;\n    return isSmall ? outOfTheBoxColsSmallLayout : outOfTheBoxCols;\n  }, [CustomBody, isSmall]);\n\n  const handleActionRefForContainer = useCallback<React.RefCallback<HTMLDivElement>>(\n    (containerNode) => {\n      if (containerNode && actionRef && actionRef.current) {\n        actionRef.current.focusOnWrapper = () => {\n          if (containerNode) {\n            setTimeout(() => {\n              containerNode?.focus();\n            }, 300);\n          }\n        };\n      }\n    },\n    [actionRef],\n  );\n\n  const generatedContainerId = useMemo(() => `ds-banner-${uid(5)}`, []);\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  const liveRegionRef = React.useRef<HTMLDivElement>(null);\n  const isOpenRef = React.useRef(isOpen);\n  isOpenRef.current = isOpen;\n  const textToAnnounceRef = React.useRef(`${label} ${body}`);\n  textToAnnounceRef.current = `${label} ${body}`;\n  const read = React.useCallback(() => {\n    if (liveRegionRef.current) {\n      if (isOpenRef.current) liveRegionRef.current.textContent = textToAnnounceRef.current;\n      else liveRegionRef.current.textContent = '';\n    }\n  }, []);\n\n  useEffect(() => {\n    if (isOpen && withLiveRegionAnnouncement) read();\n  }, [isOpen, withLiveRegionAnnouncement, read]);\n\n  // this used to \"try\" to animate the banner closing\n  //   in reality the closing animation has never actually worked (the banner just disappears, due to using \"&&\" instead of \"||\" in the logic)\n  //   given that it has never worked, and the complexity it adds to the code, we are officially removing the closing animation for now\n  //   if there is a future need for it, we can re-visit adding it back in.\n  if (!isOpen)\n    return withLiveRegionAnnouncement ? (\n      <LiveRegionCorrectlyImplemented\n        id={`${generatedContainerId}-live-region`}\n        innerRef={liveRegionRef}\n        announcementType={withLiveRegionAnnouncement}\n      />\n    ) : null;\n\n  return (\n    <StyledBannerContainer\n      onKeyDown={handleOnKeyDownToClose}\n      data-testid={DSBannerDatatestid.CONTAINER}\n      innerRef={handleActionRefForContainer}\n      tabIndex={-1}\n      {...containerProps}\n      {...globalAttrs}\n      {...xstyledAttrs}\n      {...ownerPropsConfig}\n    >\n      <StyledBannerLayout {...ownerPropsConfig} $type={type}>\n        <StyledInnerContainer\n          cols={innerContainerCols}\n          data-type={type}\n          data-testid={DSBannerDatatestid.INNER_CONTAINER}\n          role={!withLiveRegionAnnouncement ? 'alert' : undefined}\n          id={generatedContainerId}\n          {...ownerPropsConfig}\n        >\n          {!CustomBody ? <DSBannerContent propsWithDefaults={propsWithDefaults} /> : <CustomBody />}\n        </StyledInnerContainer>\n        {!CustomBody && showCloseButton ? (\n          <StyledCloseButton\n            data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n            buttonType=\"icon\"\n            innerRef={closeBtnRef}\n            onClick={onClose}\n            aria-label=\"Visually dismiss the banner\"\n            aria-describedby={generatedContainerId}\n            {...ownerPropsConfig}\n          >\n            <CloseX width={12} height={12} />\n          </StyledCloseButton>\n        ) : null}\n      </StyledBannerLayout>\n      {withLiveRegionAnnouncement ? (\n        <LiveRegionCorrectlyImplemented\n          id={`${generatedContainerId}-live-region`}\n          innerRef={liveRegionRef}\n          announcementType={withLiveRegionAnnouncement}\n        />\n      ) : null}\n    </StyledBannerContainer>\n  );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = DSBannerPropTypesSchema;\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;ADgCnB;AAhCJ,sBAAuB;AACvB,8BAMO;AACP,mBAAuD;AACvD,uBAAqB;AACrB,iBAAoB;AACpB,uBAAiC;AACjC,6BAAgC;AAChC,8BAAiD;AAEjD,mCAAsD;AACtD,oBAAmG;AAEnG,MAAM,kBAAkB,CAAC,QAAQ,oBAAoB,KAAK;AAC1D,MAAM,6BAA6B,CAAC,QAAQ,KAAK;AACjD,MAAM,qBAAqB,CAAC,OAAO,MAAM;AAEzC,MAAM,iCAAiC,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,MAKE,iBAAAA,QAAS;AAAA,EACP;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,eAAY;AAAA,MACZ,aAAW;AAAA,MACX,OAAO,EAAE,MAAM,iBAAiB,UAAU,WAAW;AAAA;AAAA,EACvD;AAAA,EACA,SAAS;AACX;AAEF,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,wBAAoB,sDAAsD,OAAO,yCAAY;AAEnG,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;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,QAAQ,cAAc,GAAG,YAAY,QAAI,gDAAuB,IAAI;AAC5E,QAAM,uBAAmB,uCAAc,mBAAmB,EAAE,GAAG,MAAM,CAAC;AACtE,QAAM,mBAAe,4CAAmB,IAAI;AAE5C,QAAM,iBAAa,mCAAiB;AACpC,QAAM,UAAU,eAAe,OAAO,eAAe;AACrD,QAAM,yBAAqB,sBAAQ,MAAM;AACvC,QAAI,WAAY,QAAO;AACvB,WAAO,UAAU,6BAA6B;AAAA,EAChD,GAAG,CAAC,YAAY,OAAO,CAAC;AAExB,QAAM,kCAA8B;AAAA,IAClC,CAAC,kBAAkB;AACjB,UAAI,iBAAiB,aAAa,UAAU,SAAS;AACnD,kBAAU,QAAQ,iBAAiB,MAAM;AACvC,cAAI,eAAe;AACjB,uBAAW,MAAM;AACf,6BAAe,MAAM;AAAA,YACvB,GAAG,GAAG;AAAA,UACR;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,2BAAuB,sBAAQ,MAAM,iBAAa,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAEpE,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,QAAM,gBAAgB,aAAAC,QAAM,OAAuB,IAAI;AACvD,QAAM,YAAY,aAAAA,QAAM,OAAO,MAAM;AACrC,YAAU,UAAU;AACpB,QAAM,oBAAoB,aAAAA,QAAM,OAAO,GAAG,KAAK,IAAI,IAAI,EAAE;AACzD,oBAAkB,UAAU,GAAG,KAAK,IAAI,IAAI;AAC5C,QAAM,OAAO,aAAAA,QAAM,YAAY,MAAM;AACnC,QAAI,cAAc,SAAS;AACzB,UAAI,UAAU,QAAS,eAAc,QAAQ,cAAc,kBAAkB;AAAA,UACxE,eAAc,QAAQ,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,UAAU,2BAA4B,MAAK;AAAA,EACjD,GAAG,CAAC,QAAQ,4BAA4B,IAAI,CAAC;AAM7C,MAAI,CAAC;AACH,WAAO,6BACL;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,GAAG,oBAAoB;AAAA,QAC3B,UAAU;AAAA,QACV,kBAAkB;AAAA;AAAA,IACpB,IACE;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,eAAa,2CAAmB;AAAA,MAChC,UAAU;AAAA,MACV,UAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,qDAAC,oCAAoB,GAAG,kBAAkB,OAAO,MAC/C;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,aAAW;AAAA,cACX,eAAa,2CAAmB;AAAA,cAChC,MAAM,CAAC,6BAA6B,UAAU;AAAA,cAC9C,IAAI;AAAA,cACH,GAAG;AAAA,cAEH,WAAC,aAAa,4CAAC,0CAAgB,mBAAsC,IAAK,4CAAC,cAAW;AAAA;AAAA,UACzF;AAAA,UACC,CAAC,cAAc,kBACd;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,2CAAmB;AAAA,cAChC,YAAW;AAAA,cACX,UAAU;AAAA,cACV,SAAS;AAAA,cACT,cAAW;AAAA,cACX,oBAAkB;AAAA,cACjB,GAAG;AAAA,cAEJ,sDAAC,0BAAO,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,UACjC,IACE;AAAA,WACN;AAAA,QACC,6BACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,GAAG,oBAAoB;AAAA,YAC3B,UAAU;AAAA,YACV,kBAAkB;AAAA;AAAA,QACpB,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAE/B,IAAO,mBAAQ;",
+  "sourcesContent": ["import { CloseX } from '@elliemae/ds-icons';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport ReactDOM from 'react-dom';\nimport { uid } from 'uid';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSBannerContent } from './DSBannerContent.js';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { defaultProps, DSBannerPropTypesSchema } from './react-desc-prop-types.js';\nimport {\n  StyledLiveRegionPortal,\n  StyledBannerContainer,\n  StyledBannerLayout,\n  StyledCloseButton,\n  StyledInnerContainer,\n} from './styles.js';\n\nconst outOfTheBoxCols = ['auto', 'fit-content(50%)', '1fr'];\nconst outOfTheBoxColsSmallLayout = ['auto', '1fr'];\nconst colsWithCustomBody = ['1fr', 'auto'];\nconst typeMap = {\n  alert: undefined,\n  polite: 'polite',\n  assertive: 'assertive',\n  none: 'off',\n} as const;\n\nconst getIsLiveRegion = (type: string) => type === 'polite' || type === 'assertive';\n\nconst LiveRegionCorrectlyImplemented = ({\n  id,\n  innerRef,\n  announcementType,\n  ownerPropsConfig,\n}: {\n  id: string;\n  innerRef: React.Ref<HTMLDivElement>;\n  announcementType: 'alert' | 'polite' | 'assertive' | 'none';\n  ownerPropsConfig: Record<string, unknown>;\n}) =>\n  ReactDOM.createPortal(\n    <StyledLiveRegionPortal\n      id={id}\n      innerRef={innerRef}\n      aria-atomic=\"true\"\n      // off is never going to be printed because this portal is not printed when announcement is none\n      // the off is just a quick hack to circumvent typescript typechecks in the static building\n      aria-live={typeMap[announcementType]}\n      data-testid={DSBannerDatatestid.LIVE_REGION_PORTAL}\n      {...ownerPropsConfig}\n    />,\n    document.body,\n  );\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBannerT.InternalProps>(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    withLiveRegionAnnouncement,\n    isPageNotice,\n    ...rest\n  } = propsWithDefaults;\n  // eslint-disable-next-line no-unused-vars\n  const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);\n  const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n  const xstyledAttrs = useGetXstyledProps(rest);\n\n  const layoutMode = useGetLayoutMode();\n  const isSmall = layoutMode === 's' || layoutMode === 'xs';\n  const innerContainerCols = useMemo(() => {\n    if (CustomBody) return colsWithCustomBody;\n    return isSmall ? outOfTheBoxColsSmallLayout : outOfTheBoxCols;\n  }, [CustomBody, isSmall]);\n\n  const handleActionRefForContainer = useCallback<React.RefCallback<HTMLDivElement>>(\n    (containerNode) => {\n      if (containerNode && actionRef && actionRef.current) {\n        actionRef.current.focusOnWrapper = () => {\n          if (containerNode) {\n            setTimeout(() => {\n              containerNode?.focus();\n            }, 300);\n          }\n        };\n      }\n    },\n    [actionRef],\n  );\n\n  const generatedContainerId = useMemo(() => `ds-banner-${uid(5)}`, []);\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  const liveRegionRef = React.useRef<HTMLDivElement>(null);\n  const isOpenRef = React.useRef(isOpen);\n  isOpenRef.current = isOpen;\n  const textToAnnounceRef = React.useRef(`${label} ${body}`);\n  textToAnnounceRef.current = `${label} ${body}`;\n  const read = React.useCallback(() => {\n    if (liveRegionRef.current) {\n      if (isOpenRef.current) liveRegionRef.current.textContent = textToAnnounceRef.current;\n      else liveRegionRef.current.textContent = '';\n    }\n  }, []);\n\n  useEffect(() => {\n    if (isOpen && getIsLiveRegion(withLiveRegionAnnouncement)) read();\n  }, [isOpen, withLiveRegionAnnouncement, read]);\n\n  // this used to \"try\" to animate the banner closing\n  //   in reality the closing animation has never actually worked (the banner just disappears, due to using \"&&\" instead of \"||\" in the logic)\n  //   given that it has never worked, and the complexity it adds to the code, we are officially removing the closing animation for now\n  //   if there is a future need for it, we can re-visit adding it back in.\n  if (!isOpen)\n    return getIsLiveRegion(withLiveRegionAnnouncement) ? (\n      <LiveRegionCorrectlyImplemented\n        id={`${generatedContainerId}-live-region`}\n        innerRef={liveRegionRef}\n        announcementType={withLiveRegionAnnouncement}\n        ownerPropsConfig={ownerPropsConfig}\n      />\n    ) : null;\n\n  return (\n    <StyledBannerContainer\n      onKeyDown={handleOnKeyDownToClose}\n      data-testid={DSBannerDatatestid.CONTAINER}\n      innerRef={handleActionRefForContainer}\n      tabIndex={-1}\n      role={isPageNotice ? 'region' : undefined}\n      {...containerProps}\n      {...globalAttrs}\n      {...xstyledAttrs}\n      {...ownerPropsConfig}\n    >\n      <StyledBannerLayout {...ownerPropsConfig} $type={type}>\n        <StyledInnerContainer\n          cols={innerContainerCols}\n          data-type={type}\n          data-testid={DSBannerDatatestid.INNER_CONTAINER}\n          role={withLiveRegionAnnouncement === 'alert' ? 'alert' : undefined}\n          id={generatedContainerId}\n          {...ownerPropsConfig}\n        >\n          {!CustomBody ? <DSBannerContent propsWithDefaults={propsWithDefaults} /> : <CustomBody />}\n        </StyledInnerContainer>\n        {!CustomBody && showCloseButton ? (\n          <StyledCloseButton\n            data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n            buttonType=\"icon\"\n            innerRef={closeBtnRef}\n            onClick={onClose}\n            aria-label=\"Visually dismiss the banner\"\n            aria-describedby={generatedContainerId}\n            {...ownerPropsConfig}\n          >\n            <CloseX width={12} height={12} />\n          </StyledCloseButton>\n        ) : null}\n      </StyledBannerLayout>\n      {getIsLiveRegion(withLiveRegionAnnouncement) ? (\n        <LiveRegionCorrectlyImplemented\n          id={`${generatedContainerId}-live-region`}\n          innerRef={liveRegionRef}\n          announcementType={withLiveRegionAnnouncement}\n          ownerPropsConfig={ownerPropsConfig}\n        />\n      ) : null}\n    </StyledBannerContainer>\n  );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = DSBannerPropTypesSchema;\n\nexport default DSBanner;\nexport { DSBanner, DSBannerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["ReactDOM", "React"]
 }

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

@@ -54,7 +54,8 @@ const DSBannerSlots = {
   ICON_CONTAINER: "icon-container",
   ACTION_LINK: "action-link",
   CLOSE_BUTTON: "close-button",
-  LAYOUT: "layout"
+  LAYOUT: "layout",
+  LIVE_REGION_PORTAL: "live-region-portal"
 };
 const DSBannerDatatestid = {
   ...(0, import_ds_system.slotObjectToDataTestIds)(DSBannerName, DSBannerSlots),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/exported-related/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSBannerName = 'DSBanner';\nexport const BANNER_TYPES = {\n  INFO: 'info',\n  SUCCESS: 'success',\n  WARNING: 'warning',\n  DANGER: 'danger',\n} as const;\n\nexport const BANNER_BODY_ID = 'ds-banner-body';\n\n// previously this was the exported data-testid object\n// the one marked as // ok are the one that works with the slots convention and works with the slotObjectToDataTestIds function\n//   the rest are not compatible and needs manual handling\n// export const DSBannerDatatestid = {\n//   CONTAINER: 'ds-banner-container', // ok\n//   CUSTOM_CONTAINER: 'ds-banner-custom-container', // ok\n//   ACTION_LINK: 'ds-banner-action-link', // ok\n//   CLOSE_BUTTON: 'ds-banner-close-button', // ok\n//   // From here down are not compatible with the slotObjectToDataTestIds function.\n//   INNER_CONTAINER: 'ds-banner',\n//   ICON_CONTAINER: 'ds-banner-icon',\n//   // from here they were not present but they had an asigned Slot.\n//   // TITLE\n//   // SUBTITLE\n// };\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\n\nexport const DSBannerSlots = {\n  CONTAINER: 'container',\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  LAYOUT: 'layout',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DSBannerDatatestid = {\n  ...(slotObjectToDataTestIds(DSBannerName, DSBannerSlots) as Record<keyof typeof DSBannerSlots, string>),\n  // handling the rest of the data-testids that are not compatible with the slotObjectToDataTestIds function manually to avoid breaking changes\n  INNER_CONTAINER: 'ds-banner',\n  ICON_CONTAINER: 'ds-banner-icon',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,eAAe;AACrB,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAEO,MAAM,iBAAiB;AAoBvB,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;AAAA,EACd,QAAQ;AACV;AAGO,MAAM,qBAAqB;AAAA,EAChC,OAAI,0CAAwB,cAAc,aAAa;AAAA;AAAA,EAEvD,iBAAiB;AAAA,EACjB,gBAAgB;AAClB;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSBannerName = 'DSBanner';\nexport const BANNER_TYPES = {\n  INFO: 'info',\n  SUCCESS: 'success',\n  WARNING: 'warning',\n  DANGER: 'danger',\n} as const;\n\nexport const BANNER_BODY_ID = 'ds-banner-body';\n\n// previously this was the exported data-testid object\n// the one marked as // ok are the one that works with the slots convention and works with the slotObjectToDataTestIds function\n//   the rest are not compatible and needs manual handling\n// export const DSBannerDatatestid = {\n//   CONTAINER: 'ds-banner-container', // ok\n//   CUSTOM_CONTAINER: 'ds-banner-custom-container', // ok\n//   ACTION_LINK: 'ds-banner-action-link', // ok\n//   CLOSE_BUTTON: 'ds-banner-close-button', // ok\n//   // From here down are not compatible with the slotObjectToDataTestIds function.\n//   INNER_CONTAINER: 'ds-banner',\n//   ICON_CONTAINER: 'ds-banner-icon',\n//   // from here they were not present but they had an asigned Slot.\n//   // TITLE\n//   // SUBTITLE\n// };\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\n\nexport const DSBannerSlots = {\n  CONTAINER: 'container',\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  LAYOUT: 'layout',\n  LIVE_REGION_PORTAL: 'live-region-portal',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DSBannerDatatestid = {\n  ...(slotObjectToDataTestIds(DSBannerName, DSBannerSlots) as Record<keyof typeof DSBannerSlots, string>),\n  // handling the rest of the data-testids that are not compatible with the slotObjectToDataTestIds function manually to avoid breaking changes\n  INNER_CONTAINER: 'ds-banner',\n  ICON_CONTAINER: 'ds-banner-icon',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,eAAe;AACrB,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAEO,MAAM,iBAAiB;AAoBvB,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;AAAA,EACd,QAAQ;AAAA,EACR,oBAAoB;AACtB;AAGO,MAAM,qBAAqB;AAAA,EAChC,OAAI,0CAAwB,cAAc,aAAa;AAAA;AAAA,EAEvD,iBAAiB;AAAA,EACjB,gBAAgB;AAClB;",
   "names": []
 }

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

@@ -44,7 +44,8 @@ const defaultProps = {
   isOpen: true,
   onClose: () => null,
   showCloseButton: true,
-  withLiveRegionAnnouncement: void 0
+  withLiveRegionAnnouncement: "alert",
+  isPageNotice: false
 };
 const DSBannerPropTypes = {
   ...import_ds_props_helpers.globalAttributesPropTypes,
@@ -71,7 +72,8 @@ const DSBannerPropTypes = {
       - focusOnWrapper: function to focus the link
     `
   ).defaultValue({}),
-  withLiveRegionAnnouncement: import_ds_props_helpers.PropTypes.oneOf(["assertive", "polite"]).description("Whether to announce the banner content in a live region when it opens.").defaultValue(void 0)
+  withLiveRegionAnnouncement: import_ds_props_helpers.PropTypes.oneOf(["alert", "assertive", "polite"]).description("Whether to announce the banner content in a live region when it opens.").defaultValue("alert"),
+  isPageNotice: import_ds_props_helpers.PropTypes.bool.description("Whether to add role region to the banner.").defaultValue(false)
 };
 const DSBannerPropTypesSchema = DSBannerPropTypes;
 //# sourceMappingURL=react-desc-prop-types.js.map

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 { MutableRefObject, RefCallback } from 'react';\nimport type { XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { BANNER_TYPES, DSBannerName, DSBannerSlots } from './exported-related/index.js';\n\nexport declare namespace DSBannerT {\n  export interface ActionRef {\n    focusOnWrapper?: () => void;\n    focusOnLink?: () => void;\n  }\n\n  export interface ActionLinkT {\n    label: string;\n    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | null;\n    href?: string;\n  }\n\n  export type BannerTypesT = (typeof BANNER_TYPES)[keyof typeof BANNER_TYPES];\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    label: string;\n    body: string;\n    type: BannerTypesT;\n    isOpen: boolean;\n    onClose: () => void | null;\n    showCloseButton: boolean;\n    withLiveRegionAnnouncement: 'assertive' | 'polite' | undefined;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSBannerName, typeof DSBannerSlots> {\n    actionLink?: ActionLinkT;\n    CustomBody?: React.ComponentType<Record<string, unknown>>;\n    closeBtnRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n    actionRef?: MutableRefObject<ActionRef>;\n  }\n  export interface Props extends Partial<DefaultProps>, OptionalProps, XstyledProps, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, XstyledProps, RequiredProps {}\n}\n\nexport const defaultProps: DSBannerT.DefaultProps = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: BANNER_TYPES.INFO,\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n  withLiveRegionAnnouncement: undefined,\n};\n\nexport const DSBannerPropTypes: DSPropTypesSchema<DSBannerT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...getPropsPerSlotPropTypes(DSBannerName, DSBannerSlots),\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  withLiveRegionAnnouncement: PropTypes.oneOf(['assertive', 'polite'])\n    .description('Whether to announce the banner content in a live region when it opens.')\n    .defaultValue(undefined),\n};\n\nexport const DSBannerPropTypesSchema = DSBannerPropTypes as unknown as ValidationMap<DSBannerT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAEP,8BAA0D;AAyCnD,MAAM,eAAuC;AAAA,EAClD,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,qCAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AAAA,EACjB,4BAA4B;AAC9B;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAG,kDAAyB,sCAAc,qCAAa;AAAA,EACvD,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;AAAA,EAClB,4BAA4B,kCAAU,MAAM,CAAC,aAAa,QAAQ,CAAC,EAChE,YAAY,wEAAwE,EACpF,aAAa,MAAS;AAC3B;AAEO,MAAM,0BAA0B;",
+  "sourcesContent": ["import type { MutableRefObject, RefCallback } from 'react';\nimport type { XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { BANNER_TYPES, DSBannerName, DSBannerSlots } from './exported-related/index.js';\n\nexport declare namespace DSBannerT {\n  export interface ActionRef {\n    focusOnWrapper?: () => void;\n    focusOnLink?: () => void;\n  }\n\n  export interface ActionLinkT {\n    label: string;\n    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | null;\n    href?: string;\n  }\n\n  export type BannerTypesT = (typeof BANNER_TYPES)[keyof typeof BANNER_TYPES];\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    label: string;\n    body: string;\n    type: BannerTypesT;\n    isOpen: boolean;\n    onClose: () => void | null;\n    showCloseButton: boolean;\n    withLiveRegionAnnouncement: 'alert' | 'assertive' | 'polite' | 'none';\n    isPageNotice: boolean;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSBannerName, typeof DSBannerSlots> {\n    actionLink?: ActionLinkT;\n    CustomBody?: React.ComponentType<Record<string, unknown>>;\n    closeBtnRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n    actionRef?: MutableRefObject<ActionRef>;\n  }\n  export interface Props extends Partial<DefaultProps>, OptionalProps, XstyledProps, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, XstyledProps, RequiredProps {}\n}\n\nexport const defaultProps: DSBannerT.DefaultProps = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: BANNER_TYPES.INFO,\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n  withLiveRegionAnnouncement: 'alert',\n  isPageNotice: false,\n};\n\nexport const DSBannerPropTypes: DSPropTypesSchema<DSBannerT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...getPropsPerSlotPropTypes(DSBannerName, DSBannerSlots),\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  withLiveRegionAnnouncement: PropTypes.oneOf(['alert', 'assertive', 'polite'])\n    .description('Whether to announce the banner content in a live region when it opens.')\n    .defaultValue('alert'),\n  isPageNotice: PropTypes.bool.description('Whether to add role region to the banner.').defaultValue(false),\n};\n\nexport const DSBannerPropTypesSchema = DSBannerPropTypes as unknown as ValidationMap<DSBannerT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAEP,8BAA0D;AA0CnD,MAAM,eAAuC;AAAA,EAClD,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,qCAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AAAA,EACjB,4BAA4B;AAAA,EAC5B,cAAc;AAChB;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAG,kDAAyB,sCAAc,qCAAa;AAAA,EACvD,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;AAAA,EAClB,4BAA4B,kCAAU,MAAM,CAAC,SAAS,aAAa,QAAQ,CAAC,EACzE,YAAY,wEAAwE,EACpF,aAAa,OAAO;AAAA,EACvB,cAAc,kCAAU,KAAK,YAAY,2CAA2C,EAAE,aAAa,KAAK;AAC1G;AAEO,MAAM,0BAA0B;",
   "names": []
 }

package/dist/cjs/styles.js

@@ -34,6 +34,7 @@ __export(styles_exports, {
   StyledCloseButton: () => StyledCloseButton,
   StyledIconContainer: () => StyledIconContainer,
   StyledInnerContainer: () => StyledInnerContainer,
+  StyledLiveRegionPortal: () => StyledLiveRegionPortal,
   StyledSubTitle: () => StyledSubTitle,
   StyledTitle: () => StyledTitle
 });
@@ -48,15 +49,12 @@ const StyledBannerContainer = (0, import_ds_system.styled)("div", {
   name: import_exported_related.DSBannerName,
   slot: import_exported_related.DSBannerSlots.CONTAINER
 })`
-  max-height: 100vh;
+  min-height: 41px;
   overflow: hidden;
-
   transition: all 0.5s ease-in;
-
   @starting-style {
     max-height: 0px;
   }
-
   ${import_ds_system.xStyledCommonProps}
 `;
 const StyledInnerContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
@@ -64,9 +62,9 @@ const StyledInnerContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   slot: import_exported_related.DSBannerSlots.INNER_CONTAINER
 })`
   padding-right: 4px;
+  padding-bottom: 6px;
   width: 100%;
   min-width: 0;
-  min-height: 41px;
 `;
 const handleBorderColor = (type, { colors }) => {
   switch (type) {
@@ -96,9 +94,6 @@ const StyledBannerLayout = (0, import_ds_system.styled)("div", {
     flex: 1;
     min-width: 0;
   }
-  & > :last-child {
-    flex-shrink: 0;
-  }
 `;
 const StyledIconContainer = (0, import_ds_system.styled)("div", {
   name: import_exported_related.DSBannerName,
@@ -113,7 +108,6 @@ const StyledTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypograp
   color: neutral-700;
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
   padding-top: 9px;
-  padding-bottom: 9px;
   overflow-wrap: break-word;
   white-space: pre-wrap;
   min-width: 0px;
@@ -122,7 +116,6 @@ const StyledSubTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypog
   margin-left: ${({ theme }) => theme.space.xs};
   font-weight: ${({ theme }) => theme.fontWeights.regular};
   padding-top: 9px;
-  padding-bottom: 6px;
   overflow-wrap: break-word;
   white-space: pre-wrap;
   min-width: 0px;
@@ -141,7 +134,8 @@ const StyledActionLink = (0, import_ds_system.styled)("a", {
 })`
   display: inline-block;
   text-decoration: none;
-  line-height: 14px;
+  line-height: inherit;
++ font-size: inherit;
   font-weight: ${({ theme }) => theme.fontWeights.regular};
   color: brand-600;
   min-width: 0px;
@@ -166,7 +160,13 @@ const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button_v2.DSBut
   name: import_exported_related.DSBannerName,
   slot: import_exported_related.DSBannerSlots.CLOSE_BUTTON
 })`
-  margin-left: ${({ theme }) => theme.space.xxs};
-  margin-top: 4px;
+  margin: 5px;
+`;
+const StyledLiveRegionPortal = (0, import_ds_system.styled)("div", {
+  name: import_exported_related.DSBannerName,
+  slot: import_exported_related.DSBannerSlots.LIVE_REGION_PORTAL
+})`
+  clip: rect(0 0 0 0);
+  position: absolute;
 `;
 //# 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 { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { ColorProps, LayoutProps, SizingProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\nimport { BANNER_TYPES, DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {}\nexport const StyledBannerContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n  max-height: 100vh;\n  overflow: hidden;\n\n  transition: all 0.5s ease-in;\n\n  @starting-style {\n    max-height: 0px;\n  }\n\n  ${xStyledCommonProps}\n`;\n\ninterface StyledInnerContainerT {}\nexport const StyledInnerContainer = styled(Grid, {\n  name: DSBannerName,\n  slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n  padding-right: 4px;\n  width: 100%;\n  min-width: 0;\n  min-height: 41px;\n`;\n\nconst handleBorderColor = (\n  type: DSBannerT.BannerTypesT,\n  { colors }: { colors: Record<string, Record<string, string>> },\n): string => {\n  switch (type) {\n    case BANNER_TYPES.SUCCESS:\n      return colors.success[900];\n    case BANNER_TYPES.INFO:\n      return colors.brand[600];\n    case BANNER_TYPES.WARNING:\n      return colors.warning[900];\n    case BANNER_TYPES.DANGER:\n      return colors.danger[900];\n    default:\n      return 'should_not_happen';\n  }\n};\ninterface StyledBannerLayoutT {\n  $type: DSBannerT.BannerTypesT;\n}\nexport const StyledBannerLayout = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.LAYOUT,\n})<StyledBannerLayoutT>`\n  display: flex;\n  width: 100%;\n  align-items: flex-start;\n  justify-content: space-between;\n  background-color: neutral-000;\n  border-bottom: 5px solid ${({ $type, theme }) => handleBorderColor($type, theme)};\n  & > :first-child {\n    flex: 1;\n    min-width: 0;\n  }\n  & > :last-child {\n    flex-shrink: 0;\n  }\n`;\n\nexport const StyledIconContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.ICON_CONTAINER,\n})`\n  padding-top: 8px;\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n  min-width: 0px;\n`;\n\nexport const StyledTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n  color: neutral-700;\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  padding-top: 9px;\n  padding-bottom: 9px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n  margin-left: ${({ theme }) => theme.space.xs};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  padding-top: 9px;\n  padding-bottom: 6px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n  ${({ theme }) => {\n    if (['s', 'xs'].includes(theme.layoutMode!)) {\n      return `\n        grid-column: 1 / -1;\n      `;\n    }\n    return '';\n  }}\n`;\n\ninterface StyledActionLinkT {\n  isBodyEmpty: boolean;\n}\nexport const StyledActionLink = styled('a', {\n  name: DSBannerName,\n  slot: DSBannerSlots.ACTION_LINK,\n})<StyledActionLinkT>`\n  display: inline-block;\n  text-decoration: none;\n  line-height: 14px;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: brand-600;\n  min-width: 0px;\n  position: relative;\n  &:focus {\n    outline: none;\n    &:after {\n      position: absolute;\n      content: '';\n      top: -2px;\n      left: -2px;\n      right: -2px;\n      bottom: -2px;\n      border-radius: 2px;\n      border: 2px solid brand-700;\n      box-shadow: 0 0 0 1px brand-700;\n      pointer-events: none;\n    }\n  }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n  name: DSBannerName,\n  slot: DSBannerSlots.CLOSE_BUTTON,\n})`\n  margin-left: ${({ theme }) => theme.space.xxs};\n  margin-top: 4px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAC3B,qBAAqB;AAErB,uBAA2C;AAC3C,2BAA6B;AAG7B,8BAA0D;AAInD,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUG,mCAAkB;AAAA;AAIf,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOD,MAAM,oBAAoB,CACxB,MACA,EAAE,OAAO,MACE;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK,qCAAa;AAChB,aAAO,OAAO,QAAQ,GAAG;AAAA,IAC3B,KAAK,qCAAa;AAChB,aAAO,OAAO,MAAM,GAAG;AAAA,IACzB,KAAK,qCAAa;AAChB,aAAO,OAAO,QAAQ,GAAG;AAAA,IAC3B,KAAK,qCAAa;AAChB,aAAO,OAAO,OAAO,GAAG;AAAA,IAC1B;AACE,aAAO;AAAA,EACX;AACF;AAIO,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAM4B,CAAC,EAAE,OAAO,MAAM,MAAM,kBAAkB,OAAO,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU3E,MAAM,0BAAsB,yBAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA,kBAEiB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA,iBAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAIvC,MAAM,kBAAc,yBAAO,mCAAc,EAAE,MAAM,sCAAc,MAAM,sCAAc,MAAM,CAAC;AAAA;AAAA,iBAEhF,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnD,MAAM,qBAAiB,yBAAO,mCAAc,EAAE,MAAM,sCAAc,MAAM,sCAAc,SAAS,CAAC;AAAA,iBACtF,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,iBAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrD,CAAC,EAAE,MAAM,MAAM;AACf,MAAI,CAAC,KAAK,IAAI,EAAE,SAAS,MAAM,UAAW,GAAG;AAC3C,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,SAAO;AACT,CAAC;AAAA;AAMI,MAAM,uBAAmB,yBAAO,KAAK;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA,iBAIgB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBlD,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA,iBACgB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;",
+  "sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { ColorProps, LayoutProps, SizingProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\nimport { BANNER_TYPES, DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {}\nexport const StyledBannerContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n  min-height: 41px;\n  overflow: hidden;\n  transition: all 0.5s ease-in;\n  @starting-style {\n    max-height: 0px;\n  }\n  ${xStyledCommonProps}\n`;\n\ninterface StyledInnerContainerT {}\nexport const StyledInnerContainer = styled(Grid, {\n  name: DSBannerName,\n  slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n  padding-right: 4px;\n  padding-bottom: 6px;\n  width: 100%;\n  min-width: 0;\n`;\n\nconst handleBorderColor = (\n  type: DSBannerT.BannerTypesT,\n  { colors }: { colors: Record<string, Record<string, string>> },\n): string => {\n  switch (type) {\n    case BANNER_TYPES.SUCCESS:\n      return colors.success[900];\n    case BANNER_TYPES.INFO:\n      return colors.brand[600];\n    case BANNER_TYPES.WARNING:\n      return colors.warning[900];\n    case BANNER_TYPES.DANGER:\n      return colors.danger[900];\n    default:\n      return 'should_not_happen';\n  }\n};\ninterface StyledBannerLayoutT {\n  $type: DSBannerT.BannerTypesT;\n}\nexport const StyledBannerLayout = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.LAYOUT,\n})<StyledBannerLayoutT>`\n  display: flex;\n  width: 100%;\n  align-items: flex-start;\n  justify-content: space-between;\n  background-color: neutral-000;\n  border-bottom: 5px solid ${({ $type, theme }) => handleBorderColor($type, theme)};\n  & > :first-child {\n    flex: 1;\n    min-width: 0;\n  }\n`;\n\nexport const StyledIconContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.ICON_CONTAINER,\n})`\n  padding-top: 8px;\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n  min-width: 0px;\n`;\n\nexport const StyledTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n  color: neutral-700;\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  padding-top: 9px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n  margin-left: ${({ theme }) => theme.space.xs};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  padding-top: 9px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n  ${({ theme }) => {\n    if (['s', 'xs'].includes(theme.layoutMode!)) {\n      return `\n        grid-column: 1 / -1;\n      `;\n    }\n    return '';\n  }}\n`;\n\ninterface StyledActionLinkT {\n  isBodyEmpty: boolean;\n}\nexport const StyledActionLink = styled('a', {\n  name: DSBannerName,\n  slot: DSBannerSlots.ACTION_LINK,\n})<StyledActionLinkT>`\n  display: inline-block;\n  text-decoration: none;\n  line-height: inherit;\n+ font-size: inherit;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: brand-600;\n  min-width: 0px;\n  position: relative;\n  &:focus {\n    outline: none;\n    &:after {\n      position: absolute;\n      content: '';\n      top: -2px;\n      left: -2px;\n      right: -2px;\n      bottom: -2px;\n      border-radius: 2px;\n      border: 2px solid brand-700;\n      box-shadow: 0 0 0 1px brand-700;\n      pointer-events: none;\n    }\n  }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n  name: DSBannerName,\n  slot: DSBannerSlots.CLOSE_BUTTON,\n})`\n  margin: 5px;\n`;\n\nexport const StyledLiveRegionPortal = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.LIVE_REGION_PORTAL,\n})`\n  clip: rect(0 0 0 0);\n  position: absolute;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAC3B,qBAAqB;AAErB,uBAA2C;AAC3C,2BAA6B;AAG7B,8BAA0D;AAInD,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOG,mCAAkB;AAAA;AAIf,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOD,MAAM,oBAAoB,CACxB,MACA,EAAE,OAAO,MACE;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK,qCAAa;AAChB,aAAO,OAAO,QAAQ,GAAG;AAAA,IAC3B,KAAK,qCAAa;AAChB,aAAO,OAAO,MAAM,GAAG;AAAA,IACzB,KAAK,qCAAa;AAChB,aAAO,OAAO,QAAQ,GAAG;AAAA,IAC3B,KAAK,qCAAa;AAChB,aAAO,OAAO,OAAO,GAAG;AAAA,IAC1B;AACE,aAAO;AAAA,EACX;AACF;AAIO,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAM4B,CAAC,EAAE,OAAO,MAAM,MAAM,kBAAkB,OAAO,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3E,MAAM,0BAAsB,yBAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA,kBAEiB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA,iBAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAIvC,MAAM,kBAAc,yBAAO,mCAAc,EAAE,MAAM,sCAAc,MAAM,sCAAc,MAAM,CAAC;AAAA;AAAA,iBAEhF,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnD,MAAM,qBAAiB,yBAAO,mCAAc,EAAE,MAAM,sCAAc,MAAM,sCAAc,SAAS,CAAC;AAAA,iBACtF,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,iBAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrD,CAAC,EAAE,MAAM,MAAM;AACf,MAAI,CAAC,KAAK,IAAI,EAAE,SAAS,MAAM,UAAW,GAAG;AAC3C,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,SAAO;AACT,CAAC;AAAA;AAMI,MAAM,uBAAmB,yBAAO,KAAK;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKgB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBlD,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAIM,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/typescript-testing/typescript-banner-valid.js

@@ -57,7 +57,8 @@ const testCompleteDefaults = {
   isOpen: true,
   onClose: () => null,
   showCloseButton: true,
-  withLiveRegionAnnouncement: void 0
+  withLiveRegionAnnouncement: "alert",
+  isPageNotice: false
 };
 const testInternalProps = {
   ...testRequiredProps,
@@ -74,21 +75,24 @@ const testExplicitDefinition = {
   body: "",
   type: "info",
   isOpen: true,
-  withLiveRegionAnnouncement: void 0
+  withLiveRegionAnnouncement: "alert",
+  isPageNotice: false
 };
 const testInferedTypeCompatibility = {
   label: "",
   body: "",
   type: "info",
   isOpen: true,
-  withLiveRegionAnnouncement: void 0
+  withLiveRegionAnnouncement: "alert",
+  isPageNotice: false
 };
 const testDefinitionAsConst = {
   label: "",
   body: "",
   type: "info",
   isOpen: true,
-  withLiveRegionAnnouncement: void 0
+  withLiveRegionAnnouncement: "alert",
+  isPageNotice: false
 };
 const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSBanner, { ...testExplicitDefinition }),

package/dist/cjs/typescript-testing/typescript-banner-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-banner-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSBanner } from '../index.js';\nimport type { DSBannerT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSBannerT.Props;\ntype ComponentPropsInternals = DSBannerT.InternalProps;\ntype ComponentPropsDefaultProps = DSBannerT.DefaultProps;\ntype ComponentPropsOptionalProps = DSBannerT.OptionalProps;\ntype ComponentPropsRequiredProps = DSBannerT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  actionLink: {\n    label: 'test',\n    onClick: () => {},\n    href: 'test',\n  },\n  CustomBody: () => <div>test</div>,\n  closeBtnRef: () => null,\n  actionRef: { current: {} },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  label: 'hello',\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: 'info',\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n  withLiveRegionAnnouncement: undefined,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  label: '',\n  body: '',\n  type: 'info',\n  isOpen: true,\n  withLiveRegionAnnouncement: undefined,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  label: '',\n  body: '',\n  type: 'info',\n  isOpen: true,\n  withLiveRegionAnnouncement: undefined,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  label: '',\n  body: '',\n  type: 'info',\n  isOpen: true,\n  withLiveRegionAnnouncement: undefined,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSBanner {...testExplicitDefinition} />\n    <DSBanner {...testInferedTypeCompatibility} />\n    <DSBanner {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSBanner label=\"hello\" body=\"body\" type=\"danger\" isOpen />\n  </>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACkBH;AAjBpB,eAAyB;AAUzB,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD;AAAA,EACrD,YAAY;AAAA,IACV,OAAO;AAAA,IACP,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,MAAM;AAAA,EACR;AAAA,EACA,YAAY,MAAM,4CAAC,SAAI,kBAAI;AAAA,EAC3B,aAAa,MAAM;AAAA,EACnB,WAAW,EAAE,SAAS,CAAC,EAAE;AAC3B;AAIA,MAAM,sBAA2D;AAAA,EAC/D,OAAO;AACT;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AAAA,EACjB,4BAA4B;AAC9B;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,4BAA4B;AAC9B;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,4BAA4B;AAC9B;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,4BAA4B;AAC9B;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,qBAAU,GAAG,wBAAwB;AAAA,EACtC,4CAAC,qBAAU,GAAG,8BAA8B;AAAA,EAC5C,4CAAC,qBAAU,GAAG,uBAAuB;AAAA,EAErC,4CAAC,qBAAS,OAAM,SAAQ,MAAK,QAAO,MAAK,UAAS,QAAM,MAAC;AAAA,GAC3D;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSBanner } from '../index.js';\nimport type { DSBannerT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSBannerT.Props;\ntype ComponentPropsInternals = DSBannerT.InternalProps;\ntype ComponentPropsDefaultProps = DSBannerT.DefaultProps;\ntype ComponentPropsOptionalProps = DSBannerT.OptionalProps;\ntype ComponentPropsRequiredProps = DSBannerT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  actionLink: {\n    label: 'test',\n    onClick: () => {},\n    href: 'test',\n  },\n  CustomBody: () => <div>test</div>,\n  closeBtnRef: () => null,\n  actionRef: { current: {} },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  label: 'hello',\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: 'info',\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n  withLiveRegionAnnouncement: 'alert',\n  isPageNotice: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  label: '',\n  body: '',\n  type: 'info',\n  isOpen: true,\n  withLiveRegionAnnouncement: 'alert',\n  isPageNotice: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  label: '',\n  body: '',\n  type: 'info',\n  isOpen: true,\n  withLiveRegionAnnouncement: 'alert',\n  isPageNotice: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  label: '',\n  body: '',\n  type: 'info',\n  isOpen: true,\n  withLiveRegionAnnouncement: 'alert',\n  isPageNotice: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSBanner {...testExplicitDefinition} />\n    <DSBanner {...testInferedTypeCompatibility} />\n    <DSBanner {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSBanner label=\"hello\" body=\"body\" type=\"danger\" isOpen />\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACkBH;AAjBpB,eAAyB;AAUzB,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD;AAAA,EACrD,YAAY;AAAA,IACV,OAAO;AAAA,IACP,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,MAAM;AAAA,EACR;AAAA,EACA,YAAY,MAAM,4CAAC,SAAI,kBAAI;AAAA,EAC3B,aAAa,MAAM;AAAA,EACnB,WAAW,EAAE,SAAS,CAAC,EAAE;AAC3B;AAIA,MAAM,sBAA2D;AAAA,EAC/D,OAAO;AACT;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AAAA,EACjB,4BAA4B;AAAA,EAC5B,cAAc;AAChB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,4BAA4B;AAAA,EAC5B,cAAc;AAChB;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,4BAA4B;AAAA,EAC5B,cAAc;AAChB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,4BAA4B;AAAA,EAC5B,cAAc;AAChB;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,qBAAU,GAAG,wBAAwB;AAAA,EACtC,4CAAC,qBAAU,GAAG,8BAA8B;AAAA,EAC5C,4CAAC,qBAAU,GAAG,uBAAuB;AAAA,EAErC,4CAAC,qBAAS,OAAM,SAAQ,MAAK,QAAO,MAAK,UAAS,QAAM,MAAC;AAAA,GAC3D;",
   "names": []
 }

package/dist/esm/DSBanner.js

@@ -15,23 +15,38 @@ import { useGetLayoutMode } from "@elliemae/ds-system";
 import { DSBannerContent } from "./DSBannerContent.js";
 import { DSBannerDatatestid, DSBannerName } from "./exported-related/index.js";
 import { defaultProps, DSBannerPropTypesSchema } from "./react-desc-prop-types.js";
-import { StyledBannerContainer, StyledBannerLayout, StyledCloseButton, StyledInnerContainer } from "./styles.js";
+import {
+  StyledLiveRegionPortal,
+  StyledBannerContainer,
+  StyledBannerLayout,
+  StyledCloseButton,
+  StyledInnerContainer
+} from "./styles.js";
 const outOfTheBoxCols = ["auto", "fit-content(50%)", "1fr"];
 const outOfTheBoxColsSmallLayout = ["auto", "1fr"];
 const colsWithCustomBody = ["1fr", "auto"];
+const typeMap = {
+  alert: void 0,
+  polite: "polite",
+  assertive: "assertive",
+  none: "off"
+};
+const getIsLiveRegion = (type) => type === "polite" || type === "assertive";
 const LiveRegionCorrectlyImplemented = ({
   id,
   innerRef,
-  announcementType
+  announcementType,
+  ownerPropsConfig
 }) => ReactDOM.createPortal(
   /* @__PURE__ */ jsx(
-    "div",
+    StyledLiveRegionPortal,
     {
       id,
-      ref: innerRef,
+      innerRef,
       "aria-atomic": "true",
-      "aria-live": announcementType,
-      style: { clip: "rect(0 0 0 0)", position: "absolute" }
+      "aria-live": typeMap[announcementType],
+      "data-testid": DSBannerDatatestid.LIVE_REGION_PORTAL,
+      ...ownerPropsConfig
     }
   ),
   document.body
@@ -51,6 +66,7 @@ const DSBanner = (props) => {
     containerProps,
     actionRef,
     withLiveRegionAnnouncement,
+    isPageNotice,
     ...rest
   } = propsWithDefaults;
   const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);
@@ -98,15 +114,16 @@ const DSBanner = (props) => {
     }
   }, []);
   useEffect(() => {
-    if (isOpen && withLiveRegionAnnouncement) read();
+    if (isOpen && getIsLiveRegion(withLiveRegionAnnouncement)) read();
   }, [isOpen, withLiveRegionAnnouncement, read]);
   if (!isOpen)
-    return withLiveRegionAnnouncement ? /* @__PURE__ */ jsx(
+    return getIsLiveRegion(withLiveRegionAnnouncement) ? /* @__PURE__ */ jsx(
       LiveRegionCorrectlyImplemented,
       {
         id: `${generatedContainerId}-live-region`,
         innerRef: liveRegionRef,
-        announcementType: withLiveRegionAnnouncement
+        announcementType: withLiveRegionAnnouncement,
+        ownerPropsConfig
       }
     ) : null;
   return /* @__PURE__ */ jsxs(
@@ -116,6 +133,7 @@ const DSBanner = (props) => {
       "data-testid": DSBannerDatatestid.CONTAINER,
       innerRef: handleActionRefForContainer,
       tabIndex: -1,
+      role: isPageNotice ? "region" : void 0,
       ...containerProps,
       ...globalAttrs,
       ...xstyledAttrs,
@@ -128,7 +146,7 @@ const DSBanner = (props) => {
               cols: innerContainerCols,
               "data-type": type,
               "data-testid": DSBannerDatatestid.INNER_CONTAINER,
-              role: !withLiveRegionAnnouncement ? "alert" : void 0,
+              role: withLiveRegionAnnouncement === "alert" ? "alert" : void 0,
               id: generatedContainerId,
               ...ownerPropsConfig,
               children: !CustomBody ? /* @__PURE__ */ jsx(DSBannerContent, { propsWithDefaults }) : /* @__PURE__ */ jsx(CustomBody, {})
@@ -148,12 +166,13 @@ const DSBanner = (props) => {
             }
           ) : null
         ] }),
-        withLiveRegionAnnouncement ? /* @__PURE__ */ jsx(
+        getIsLiveRegion(withLiveRegionAnnouncement) ? /* @__PURE__ */ jsx(
           LiveRegionCorrectlyImplemented,
           {
             id: `${generatedContainerId}-live-region`,
             innerRef: liveRegionRef,
-            announcementType: withLiveRegionAnnouncement
+            announcementType: withLiveRegionAnnouncement,
+            ownerPropsConfig
           }
         ) : null
       ]

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", "import { CloseX } from '@elliemae/ds-icons';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport ReactDOM from 'react-dom';\nimport { uid } from 'uid';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSBannerContent } from './DSBannerContent.js';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { defaultProps, DSBannerPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledBannerContainer, StyledBannerLayout, StyledCloseButton, StyledInnerContainer } from './styles.js';\n\nconst outOfTheBoxCols = ['auto', 'fit-content(50%)', '1fr'];\nconst outOfTheBoxColsSmallLayout = ['auto', '1fr'];\nconst colsWithCustomBody = ['1fr', 'auto'];\n\nconst LiveRegionCorrectlyImplemented = ({\n  id,\n  innerRef,\n  announcementType,\n}: {\n  id: string;\n  innerRef: React.Ref<HTMLDivElement>;\n  announcementType: 'polite' | 'assertive';\n}) =>\n  ReactDOM.createPortal(\n    <div\n      id={id}\n      ref={innerRef}\n      aria-atomic=\"true\"\n      aria-live={announcementType}\n      style={{ clip: 'rect(0 0 0 0)', position: 'absolute' }}\n    />,\n    document.body,\n  );\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBannerT.InternalProps>(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    withLiveRegionAnnouncement,\n    ...rest\n  } = propsWithDefaults;\n  // eslint-disable-next-line no-unused-vars\n  const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);\n  const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n  const xstyledAttrs = useGetXstyledProps(rest);\n\n  const layoutMode = useGetLayoutMode();\n  const isSmall = layoutMode === 's' || layoutMode === 'xs';\n  const innerContainerCols = useMemo(() => {\n    if (CustomBody) return colsWithCustomBody;\n    return isSmall ? outOfTheBoxColsSmallLayout : outOfTheBoxCols;\n  }, [CustomBody, isSmall]);\n\n  const handleActionRefForContainer = useCallback<React.RefCallback<HTMLDivElement>>(\n    (containerNode) => {\n      if (containerNode && actionRef && actionRef.current) {\n        actionRef.current.focusOnWrapper = () => {\n          if (containerNode) {\n            setTimeout(() => {\n              containerNode?.focus();\n            }, 300);\n          }\n        };\n      }\n    },\n    [actionRef],\n  );\n\n  const generatedContainerId = useMemo(() => `ds-banner-${uid(5)}`, []);\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  const liveRegionRef = React.useRef<HTMLDivElement>(null);\n  const isOpenRef = React.useRef(isOpen);\n  isOpenRef.current = isOpen;\n  const textToAnnounceRef = React.useRef(`${label} ${body}`);\n  textToAnnounceRef.current = `${label} ${body}`;\n  const read = React.useCallback(() => {\n    if (liveRegionRef.current) {\n      if (isOpenRef.current) liveRegionRef.current.textContent = textToAnnounceRef.current;\n      else liveRegionRef.current.textContent = '';\n    }\n  }, []);\n\n  useEffect(() => {\n    if (isOpen && withLiveRegionAnnouncement) read();\n  }, [isOpen, withLiveRegionAnnouncement, read]);\n\n  // this used to \"try\" to animate the banner closing\n  //   in reality the closing animation has never actually worked (the banner just disappears, due to using \"&&\" instead of \"||\" in the logic)\n  //   given that it has never worked, and the complexity it adds to the code, we are officially removing the closing animation for now\n  //   if there is a future need for it, we can re-visit adding it back in.\n  if (!isOpen)\n    return withLiveRegionAnnouncement ? (\n      <LiveRegionCorrectlyImplemented\n        id={`${generatedContainerId}-live-region`}\n        innerRef={liveRegionRef}\n        announcementType={withLiveRegionAnnouncement}\n      />\n    ) : null;\n\n  return (\n    <StyledBannerContainer\n      onKeyDown={handleOnKeyDownToClose}\n      data-testid={DSBannerDatatestid.CONTAINER}\n      innerRef={handleActionRefForContainer}\n      tabIndex={-1}\n      {...containerProps}\n      {...globalAttrs}\n      {...xstyledAttrs}\n      {...ownerPropsConfig}\n    >\n      <StyledBannerLayout {...ownerPropsConfig} $type={type}>\n        <StyledInnerContainer\n          cols={innerContainerCols}\n          data-type={type}\n          data-testid={DSBannerDatatestid.INNER_CONTAINER}\n          role={!withLiveRegionAnnouncement ? 'alert' : undefined}\n          id={generatedContainerId}\n          {...ownerPropsConfig}\n        >\n          {!CustomBody ? <DSBannerContent propsWithDefaults={propsWithDefaults} /> : <CustomBody />}\n        </StyledInnerContainer>\n        {!CustomBody && showCloseButton ? (\n          <StyledCloseButton\n            data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n            buttonType=\"icon\"\n            innerRef={closeBtnRef}\n            onClick={onClose}\n            aria-label=\"Visually dismiss the banner\"\n            aria-describedby={generatedContainerId}\n            {...ownerPropsConfig}\n          >\n            <CloseX width={12} height={12} />\n          </StyledCloseButton>\n        ) : null}\n      </StyledBannerLayout>\n      {withLiveRegionAnnouncement ? (\n        <LiveRegionCorrectlyImplemented\n          id={`${generatedContainerId}-live-region`}\n          innerRef={liveRegionRef}\n          announcementType={withLiveRegionAnnouncement}\n        />\n      ) : null}\n    </StyledBannerContainer>\n  );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = DSBannerPropTypesSchema;\n\nexport default DSBanner;\nexport { DSBanner, DSBannerWithSchema };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { CloseX } from '@elliemae/ds-icons';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport ReactDOM from 'react-dom';\nimport { uid } from 'uid';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSBannerContent } from './DSBannerContent.js';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { defaultProps, DSBannerPropTypesSchema } from './react-desc-prop-types.js';\nimport {\n  StyledLiveRegionPortal,\n  StyledBannerContainer,\n  StyledBannerLayout,\n  StyledCloseButton,\n  StyledInnerContainer,\n} from './styles.js';\n\nconst outOfTheBoxCols = ['auto', 'fit-content(50%)', '1fr'];\nconst outOfTheBoxColsSmallLayout = ['auto', '1fr'];\nconst colsWithCustomBody = ['1fr', 'auto'];\nconst typeMap = {\n  alert: undefined,\n  polite: 'polite',\n  assertive: 'assertive',\n  none: 'off',\n} as const;\n\nconst getIsLiveRegion = (type: string) => type === 'polite' || type === 'assertive';\n\nconst LiveRegionCorrectlyImplemented = ({\n  id,\n  innerRef,\n  announcementType,\n  ownerPropsConfig,\n}: {\n  id: string;\n  innerRef: React.Ref<HTMLDivElement>;\n  announcementType: 'alert' | 'polite' | 'assertive' | 'none';\n  ownerPropsConfig: Record<string, unknown>;\n}) =>\n  ReactDOM.createPortal(\n    <StyledLiveRegionPortal\n      id={id}\n      innerRef={innerRef}\n      aria-atomic=\"true\"\n      // off is never going to be printed because this portal is not printed when announcement is none\n      // the off is just a quick hack to circumvent typescript typechecks in the static building\n      aria-live={typeMap[announcementType]}\n      data-testid={DSBannerDatatestid.LIVE_REGION_PORTAL}\n      {...ownerPropsConfig}\n    />,\n    document.body,\n  );\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBannerT.InternalProps>(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    withLiveRegionAnnouncement,\n    isPageNotice,\n    ...rest\n  } = propsWithDefaults;\n  // eslint-disable-next-line no-unused-vars\n  const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);\n  const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n  const xstyledAttrs = useGetXstyledProps(rest);\n\n  const layoutMode = useGetLayoutMode();\n  const isSmall = layoutMode === 's' || layoutMode === 'xs';\n  const innerContainerCols = useMemo(() => {\n    if (CustomBody) return colsWithCustomBody;\n    return isSmall ? outOfTheBoxColsSmallLayout : outOfTheBoxCols;\n  }, [CustomBody, isSmall]);\n\n  const handleActionRefForContainer = useCallback<React.RefCallback<HTMLDivElement>>(\n    (containerNode) => {\n      if (containerNode && actionRef && actionRef.current) {\n        actionRef.current.focusOnWrapper = () => {\n          if (containerNode) {\n            setTimeout(() => {\n              containerNode?.focus();\n            }, 300);\n          }\n        };\n      }\n    },\n    [actionRef],\n  );\n\n  const generatedContainerId = useMemo(() => `ds-banner-${uid(5)}`, []);\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  const liveRegionRef = React.useRef<HTMLDivElement>(null);\n  const isOpenRef = React.useRef(isOpen);\n  isOpenRef.current = isOpen;\n  const textToAnnounceRef = React.useRef(`${label} ${body}`);\n  textToAnnounceRef.current = `${label} ${body}`;\n  const read = React.useCallback(() => {\n    if (liveRegionRef.current) {\n      if (isOpenRef.current) liveRegionRef.current.textContent = textToAnnounceRef.current;\n      else liveRegionRef.current.textContent = '';\n    }\n  }, []);\n\n  useEffect(() => {\n    if (isOpen && getIsLiveRegion(withLiveRegionAnnouncement)) read();\n  }, [isOpen, withLiveRegionAnnouncement, read]);\n\n  // this used to \"try\" to animate the banner closing\n  //   in reality the closing animation has never actually worked (the banner just disappears, due to using \"&&\" instead of \"||\" in the logic)\n  //   given that it has never worked, and the complexity it adds to the code, we are officially removing the closing animation for now\n  //   if there is a future need for it, we can re-visit adding it back in.\n  if (!isOpen)\n    return getIsLiveRegion(withLiveRegionAnnouncement) ? (\n      <LiveRegionCorrectlyImplemented\n        id={`${generatedContainerId}-live-region`}\n        innerRef={liveRegionRef}\n        announcementType={withLiveRegionAnnouncement}\n        ownerPropsConfig={ownerPropsConfig}\n      />\n    ) : null;\n\n  return (\n    <StyledBannerContainer\n      onKeyDown={handleOnKeyDownToClose}\n      data-testid={DSBannerDatatestid.CONTAINER}\n      innerRef={handleActionRefForContainer}\n      tabIndex={-1}\n      role={isPageNotice ? 'region' : undefined}\n      {...containerProps}\n      {...globalAttrs}\n      {...xstyledAttrs}\n      {...ownerPropsConfig}\n    >\n      <StyledBannerLayout {...ownerPropsConfig} $type={type}>\n        <StyledInnerContainer\n          cols={innerContainerCols}\n          data-type={type}\n          data-testid={DSBannerDatatestid.INNER_CONTAINER}\n          role={withLiveRegionAnnouncement === 'alert' ? 'alert' : undefined}\n          id={generatedContainerId}\n          {...ownerPropsConfig}\n        >\n          {!CustomBody ? <DSBannerContent propsWithDefaults={propsWithDefaults} /> : <CustomBody />}\n        </StyledInnerContainer>\n        {!CustomBody && showCloseButton ? (\n          <StyledCloseButton\n            data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n            buttonType=\"icon\"\n            innerRef={closeBtnRef}\n            onClick={onClose}\n            aria-label=\"Visually dismiss the banner\"\n            aria-describedby={generatedContainerId}\n            {...ownerPropsConfig}\n          >\n            <CloseX width={12} height={12} />\n          </StyledCloseButton>\n        ) : null}\n      </StyledBannerLayout>\n      {getIsLiveRegion(withLiveRegionAnnouncement) ? (\n        <LiveRegionCorrectlyImplemented\n          id={`${generatedContainerId}-live-region`}\n          innerRef={liveRegionRef}\n          announcementType={withLiveRegionAnnouncement}\n          ownerPropsConfig={ownerPropsConfig}\n        />\n      ) : null}\n    </StyledBannerContainer>\n  );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = DSBannerPropTypesSchema;\n\nexport default DSBanner;\nexport { DSBanner, DSBannerWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgDnB,cAiHE,YAjHF;AAhDJ,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,UAAS,aAAa,WAAW,eAAe;AACvD,OAAO,cAAc;AACrB,SAAS,WAAW;AACpB,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB,oBAAoB;AAEjD,SAAS,cAAc,+BAA+B;AACtD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,kBAAkB,CAAC,QAAQ,oBAAoB,KAAK;AAC1D,MAAM,6BAA6B,CAAC,QAAQ,KAAK;AACjD,MAAM,qBAAqB,CAAC,OAAO,MAAM;AACzC,MAAM,UAAU;AAAA,EACd,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,MAAM;AACR;AAEA,MAAM,kBAAkB,CAAC,SAAiB,SAAS,YAAY,SAAS;AAExE,MAAM,iCAAiC,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAME,SAAS;AAAA,EACP;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MAGZ,aAAW,QAAQ,gBAAgB;AAAA,MACnC,eAAa,mBAAmB;AAAA,MAC/B,GAAG;AAAA;AAAA,EACN;AAAA,EACA,SAAS;AACX;AAEF,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,oBAAoB,6BAAsD,OAAO,YAAY;AAEnG,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;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,QAAQ,cAAc,GAAG,YAAY,IAAI,uBAAuB,IAAI;AAC5E,QAAM,mBAAmB,cAAc,mBAAmB,EAAE,GAAG,MAAM,CAAC;AACtE,QAAM,eAAe,mBAAmB,IAAI;AAE5C,QAAM,aAAa,iBAAiB;AACpC,QAAM,UAAU,eAAe,OAAO,eAAe;AACrD,QAAM,qBAAqB,QAAQ,MAAM;AACvC,QAAI,WAAY,QAAO;AACvB,WAAO,UAAU,6BAA6B;AAAA,EAChD,GAAG,CAAC,YAAY,OAAO,CAAC;AAExB,QAAM,8BAA8B;AAAA,IAClC,CAAC,kBAAkB;AACjB,UAAI,iBAAiB,aAAa,UAAU,SAAS;AACnD,kBAAU,QAAQ,iBAAiB,MAAM;AACvC,cAAI,eAAe;AACjB,uBAAW,MAAM;AACf,6BAAe,MAAM;AAAA,YACvB,GAAG,GAAG;AAAA,UACR;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,uBAAuB,QAAQ,MAAM,aAAa,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAEpE,QAAM,yBAAyB;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,QAAM,gBAAgBA,OAAM,OAAuB,IAAI;AACvD,QAAM,YAAYA,OAAM,OAAO,MAAM;AACrC,YAAU,UAAU;AACpB,QAAM,oBAAoBA,OAAM,OAAO,GAAG,KAAK,IAAI,IAAI,EAAE;AACzD,oBAAkB,UAAU,GAAG,KAAK,IAAI,IAAI;AAC5C,QAAM,OAAOA,OAAM,YAAY,MAAM;AACnC,QAAI,cAAc,SAAS;AACzB,UAAI,UAAU,QAAS,eAAc,QAAQ,cAAc,kBAAkB;AAAA,UACxE,eAAc,QAAQ,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,UAAU,gBAAgB,0BAA0B,EAAG,MAAK;AAAA,EAClE,GAAG,CAAC,QAAQ,4BAA4B,IAAI,CAAC;AAM7C,MAAI,CAAC;AACH,WAAO,gBAAgB,0BAA0B,IAC/C;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,GAAG,oBAAoB;AAAA,QAC3B,UAAU;AAAA,QACV,kBAAkB;AAAA,QAClB;AAAA;AAAA,IACF,IACE;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,eAAa,mBAAmB;AAAA,MAChC,UAAU;AAAA,MACV,UAAU;AAAA,MACV,MAAM,eAAe,WAAW;AAAA,MAC/B,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,6BAAC,sBAAoB,GAAG,kBAAkB,OAAO,MAC/C;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,aAAW;AAAA,cACX,eAAa,mBAAmB;AAAA,cAChC,MAAM,+BAA+B,UAAU,UAAU;AAAA,cACzD,IAAI;AAAA,cACH,GAAG;AAAA,cAEH,WAAC,aAAa,oBAAC,mBAAgB,mBAAsC,IAAK,oBAAC,cAAW;AAAA;AAAA,UACzF;AAAA,UACC,CAAC,cAAc,kBACd;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,mBAAmB;AAAA,cAChC,YAAW;AAAA,cACX,UAAU;AAAA,cACV,SAAS;AAAA,cACT,cAAW;AAAA,cACX,oBAAkB;AAAA,cACjB,GAAG;AAAA,cAEJ,8BAAC,UAAO,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,UACjC,IACE;AAAA,WACN;AAAA,QACC,gBAAgB,0BAA0B,IACzC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,GAAG,oBAAoB;AAAA,YAC3B,UAAU;AAAA,YACV,kBAAkB;AAAA,YAClB;AAAA;AAAA,QACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAE/B,IAAO,mBAAQ;",
   "names": ["React"]
 }

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

@@ -17,7 +17,8 @@ const DSBannerSlots = {
   ICON_CONTAINER: "icon-container",
   ACTION_LINK: "action-link",
   CLOSE_BUTTON: "close-button",
-  LAYOUT: "layout"
+  LAYOUT: "layout",
+  LIVE_REGION_PORTAL: "live-region-portal"
 };
 const DSBannerDatatestid = {
   ...slotObjectToDataTestIds(DSBannerName, DSBannerSlots),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSBannerName = 'DSBanner';\nexport const BANNER_TYPES = {\n  INFO: 'info',\n  SUCCESS: 'success',\n  WARNING: 'warning',\n  DANGER: 'danger',\n} as const;\n\nexport const BANNER_BODY_ID = 'ds-banner-body';\n\n// previously this was the exported data-testid object\n// the one marked as // ok are the one that works with the slots convention and works with the slotObjectToDataTestIds function\n//   the rest are not compatible and needs manual handling\n// export const DSBannerDatatestid = {\n//   CONTAINER: 'ds-banner-container', // ok\n//   CUSTOM_CONTAINER: 'ds-banner-custom-container', // ok\n//   ACTION_LINK: 'ds-banner-action-link', // ok\n//   CLOSE_BUTTON: 'ds-banner-close-button', // ok\n//   // From here down are not compatible with the slotObjectToDataTestIds function.\n//   INNER_CONTAINER: 'ds-banner',\n//   ICON_CONTAINER: 'ds-banner-icon',\n//   // from here they were not present but they had an asigned Slot.\n//   // TITLE\n//   // SUBTITLE\n// };\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\n\nexport const DSBannerSlots = {\n  CONTAINER: 'container',\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  LAYOUT: 'layout',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DSBannerDatatestid = {\n  ...(slotObjectToDataTestIds(DSBannerName, DSBannerSlots) as Record<keyof typeof DSBannerSlots, string>),\n  // handling the rest of the data-testids that are not compatible with the slotObjectToDataTestIds function manually to avoid breaking changes\n  INNER_CONTAINER: 'ds-banner',\n  ICON_CONTAINER: 'ds-banner-icon',\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,eAAe;AACrB,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAEO,MAAM,iBAAiB;AAoBvB,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;AAAA,EACd,QAAQ;AACV;AAGO,MAAM,qBAAqB;AAAA,EAChC,GAAI,wBAAwB,cAAc,aAAa;AAAA;AAAA,EAEvD,iBAAiB;AAAA,EACjB,gBAAgB;AAClB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSBannerName = 'DSBanner';\nexport const BANNER_TYPES = {\n  INFO: 'info',\n  SUCCESS: 'success',\n  WARNING: 'warning',\n  DANGER: 'danger',\n} as const;\n\nexport const BANNER_BODY_ID = 'ds-banner-body';\n\n// previously this was the exported data-testid object\n// the one marked as // ok are the one that works with the slots convention and works with the slotObjectToDataTestIds function\n//   the rest are not compatible and needs manual handling\n// export const DSBannerDatatestid = {\n//   CONTAINER: 'ds-banner-container', // ok\n//   CUSTOM_CONTAINER: 'ds-banner-custom-container', // ok\n//   ACTION_LINK: 'ds-banner-action-link', // ok\n//   CLOSE_BUTTON: 'ds-banner-close-button', // ok\n//   // From here down are not compatible with the slotObjectToDataTestIds function.\n//   INNER_CONTAINER: 'ds-banner',\n//   ICON_CONTAINER: 'ds-banner-icon',\n//   // from here they were not present but they had an asigned Slot.\n//   // TITLE\n//   // SUBTITLE\n// };\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\n\nexport const DSBannerSlots = {\n  CONTAINER: 'container',\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  LAYOUT: 'layout',\n  LIVE_REGION_PORTAL: 'live-region-portal',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DSBannerDatatestid = {\n  ...(slotObjectToDataTestIds(DSBannerName, DSBannerSlots) as Record<keyof typeof DSBannerSlots, string>),\n  // handling the rest of the data-testids that are not compatible with the slotObjectToDataTestIds function manually to avoid breaking changes\n  INNER_CONTAINER: 'ds-banner',\n  ICON_CONTAINER: 'ds-banner-icon',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,eAAe;AACrB,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAEO,MAAM,iBAAiB;AAoBvB,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;AAAA,EACd,QAAQ;AAAA,EACR,oBAAoB;AACtB;AAGO,MAAM,qBAAqB;AAAA,EAChC,GAAI,wBAAwB,cAAc,aAAa;AAAA;AAAA,EAEvD,iBAAiB;AAAA,EACjB,gBAAgB;AAClB;",
   "names": []
 }

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

@@ -14,7 +14,8 @@ const defaultProps = {
   isOpen: true,
   onClose: () => null,
   showCloseButton: true,
-  withLiveRegionAnnouncement: void 0
+  withLiveRegionAnnouncement: "alert",
+  isPageNotice: false
 };
 const DSBannerPropTypes = {
   ...globalAttributesPropTypes,
@@ -41,7 +42,8 @@ const DSBannerPropTypes = {
       - focusOnWrapper: function to focus the link
     `
   ).defaultValue({}),
-  withLiveRegionAnnouncement: PropTypes.oneOf(["assertive", "polite"]).description("Whether to announce the banner content in a live region when it opens.").defaultValue(void 0)
+  withLiveRegionAnnouncement: PropTypes.oneOf(["alert", "assertive", "polite"]).description("Whether to announce the banner content in a live region when it opens.").defaultValue("alert"),
+  isPageNotice: PropTypes.bool.description("Whether to add role region to the banner.").defaultValue(false)
 };
 const DSBannerPropTypesSchema = DSBannerPropTypes;
 export {

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 { MutableRefObject, RefCallback } from 'react';\nimport type { XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { BANNER_TYPES, DSBannerName, DSBannerSlots } from './exported-related/index.js';\n\nexport declare namespace DSBannerT {\n  export interface ActionRef {\n    focusOnWrapper?: () => void;\n    focusOnLink?: () => void;\n  }\n\n  export interface ActionLinkT {\n    label: string;\n    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | null;\n    href?: string;\n  }\n\n  export type BannerTypesT = (typeof BANNER_TYPES)[keyof typeof BANNER_TYPES];\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    label: string;\n    body: string;\n    type: BannerTypesT;\n    isOpen: boolean;\n    onClose: () => void | null;\n    showCloseButton: boolean;\n    withLiveRegionAnnouncement: 'assertive' | 'polite' | undefined;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSBannerName, typeof DSBannerSlots> {\n    actionLink?: ActionLinkT;\n    CustomBody?: React.ComponentType<Record<string, unknown>>;\n    closeBtnRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n    actionRef?: MutableRefObject<ActionRef>;\n  }\n  export interface Props extends Partial<DefaultProps>, OptionalProps, XstyledProps, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, XstyledProps, RequiredProps {}\n}\n\nexport const defaultProps: DSBannerT.DefaultProps = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: BANNER_TYPES.INFO,\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n  withLiveRegionAnnouncement: undefined,\n};\n\nexport const DSBannerPropTypes: DSPropTypesSchema<DSBannerT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...getPropsPerSlotPropTypes(DSBannerName, DSBannerSlots),\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  withLiveRegionAnnouncement: PropTypes.oneOf(['assertive', 'polite'])\n    .description('Whether to announce the banner content in a live region when it opens.')\n    .defaultValue(undefined),\n};\n\nexport const DSBannerPropTypesSchema = DSBannerPropTypes as unknown as ValidationMap<DSBannerT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,cAAc,qBAAqB;AAyCnD,MAAM,eAAuC;AAAA,EAClD,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,aAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AAAA,EACjB,4BAA4B;AAC9B;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG,yBAAyB,cAAc,aAAa;AAAA,EACvD,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;AAAA,EAClB,4BAA4B,UAAU,MAAM,CAAC,aAAa,QAAQ,CAAC,EAChE,YAAY,wEAAwE,EACpF,aAAa,MAAS;AAC3B;AAEO,MAAM,0BAA0B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { MutableRefObject, RefCallback } from 'react';\nimport type { XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { BANNER_TYPES, DSBannerName, DSBannerSlots } from './exported-related/index.js';\n\nexport declare namespace DSBannerT {\n  export interface ActionRef {\n    focusOnWrapper?: () => void;\n    focusOnLink?: () => void;\n  }\n\n  export interface ActionLinkT {\n    label: string;\n    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | null;\n    href?: string;\n  }\n\n  export type BannerTypesT = (typeof BANNER_TYPES)[keyof typeof BANNER_TYPES];\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    label: string;\n    body: string;\n    type: BannerTypesT;\n    isOpen: boolean;\n    onClose: () => void | null;\n    showCloseButton: boolean;\n    withLiveRegionAnnouncement: 'alert' | 'assertive' | 'polite' | 'none';\n    isPageNotice: boolean;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSBannerName, typeof DSBannerSlots> {\n    actionLink?: ActionLinkT;\n    CustomBody?: React.ComponentType<Record<string, unknown>>;\n    closeBtnRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n    actionRef?: MutableRefObject<ActionRef>;\n  }\n  export interface Props extends Partial<DefaultProps>, OptionalProps, XstyledProps, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, XstyledProps, RequiredProps {}\n}\n\nexport const defaultProps: DSBannerT.DefaultProps = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: BANNER_TYPES.INFO,\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n  withLiveRegionAnnouncement: 'alert',\n  isPageNotice: false,\n};\n\nexport const DSBannerPropTypes: DSPropTypesSchema<DSBannerT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...getPropsPerSlotPropTypes(DSBannerName, DSBannerSlots),\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  withLiveRegionAnnouncement: PropTypes.oneOf(['alert', 'assertive', 'polite'])\n    .description('Whether to announce the banner content in a live region when it opens.')\n    .defaultValue('alert'),\n  isPageNotice: PropTypes.bool.description('Whether to add role region to the banner.').defaultValue(false),\n};\n\nexport const DSBannerPropTypesSchema = DSBannerPropTypes as unknown as ValidationMap<DSBannerT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,cAAc,qBAAqB;AA0CnD,MAAM,eAAuC;AAAA,EAClD,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,aAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AAAA,EACjB,4BAA4B;AAAA,EAC5B,cAAc;AAChB;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG,yBAAyB,cAAc,aAAa;AAAA,EACvD,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;AAAA,EAClB,4BAA4B,UAAU,MAAM,CAAC,SAAS,aAAa,QAAQ,CAAC,EACzE,YAAY,wEAAwE,EACpF,aAAa,OAAO;AAAA,EACvB,cAAc,UAAU,KAAK,YAAY,2CAA2C,EAAE,aAAa,KAAK;AAC1G;AAEO,MAAM,0BAA0B;",
   "names": []
 }

package/dist/esm/styles.js

@@ -8,15 +8,12 @@ const StyledBannerContainer = styled("div", {
   name: DSBannerName,
   slot: DSBannerSlots.CONTAINER
 })`
-  max-height: 100vh;
+  min-height: 41px;
   overflow: hidden;
-
   transition: all 0.5s ease-in;
-
   @starting-style {
     max-height: 0px;
   }
-
   ${xStyledCommonProps}
 `;
 const StyledInnerContainer = styled(Grid, {
@@ -24,9 +21,9 @@ const StyledInnerContainer = styled(Grid, {
   slot: DSBannerSlots.INNER_CONTAINER
 })`
   padding-right: 4px;
+  padding-bottom: 6px;
   width: 100%;
   min-width: 0;
-  min-height: 41px;
 `;
 const handleBorderColor = (type, { colors }) => {
   switch (type) {
@@ -56,9 +53,6 @@ const StyledBannerLayout = styled("div", {
     flex: 1;
     min-width: 0;
   }
-  & > :last-child {
-    flex-shrink: 0;
-  }
 `;
 const StyledIconContainer = styled("div", {
   name: DSBannerName,
@@ -73,7 +67,6 @@ const StyledTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlo
   color: neutral-700;
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
   padding-top: 9px;
-  padding-bottom: 9px;
   overflow-wrap: break-word;
   white-space: pre-wrap;
   min-width: 0px;
@@ -82,7 +75,6 @@ const StyledSubTitle = styled(DSTypography, { name: DSBannerName, slot: DSBanner
   margin-left: ${({ theme }) => theme.space.xs};
   font-weight: ${({ theme }) => theme.fontWeights.regular};
   padding-top: 9px;
-  padding-bottom: 6px;
   overflow-wrap: break-word;
   white-space: pre-wrap;
   min-width: 0px;
@@ -101,7 +93,8 @@ const StyledActionLink = styled("a", {
 })`
   display: inline-block;
   text-decoration: none;
-  line-height: 14px;
+  line-height: inherit;
++ font-size: inherit;
   font-weight: ${({ theme }) => theme.fontWeights.regular};
   color: brand-600;
   min-width: 0px;
@@ -126,8 +119,14 @@ const StyledCloseButton = styled(DSButtonV2, {
   name: DSBannerName,
   slot: DSBannerSlots.CLOSE_BUTTON
 })`
-  margin-left: ${({ theme }) => theme.space.xxs};
-  margin-top: 4px;
+  margin: 5px;
+`;
+const StyledLiveRegionPortal = styled("div", {
+  name: DSBannerName,
+  slot: DSBannerSlots.LIVE_REGION_PORTAL
+})`
+  clip: rect(0 0 0 0);
+  position: absolute;
 `;
 export {
   StyledActionLink,
@@ -136,6 +135,7 @@ export {
   StyledCloseButton,
   StyledIconContainer,
   StyledInnerContainer,
+  StyledLiveRegionPortal,
   StyledSubTitle,
   StyledTitle
 };

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 { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { ColorProps, LayoutProps, SizingProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\nimport { BANNER_TYPES, DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {}\nexport const StyledBannerContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n  max-height: 100vh;\n  overflow: hidden;\n\n  transition: all 0.5s ease-in;\n\n  @starting-style {\n    max-height: 0px;\n  }\n\n  ${xStyledCommonProps}\n`;\n\ninterface StyledInnerContainerT {}\nexport const StyledInnerContainer = styled(Grid, {\n  name: DSBannerName,\n  slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n  padding-right: 4px;\n  width: 100%;\n  min-width: 0;\n  min-height: 41px;\n`;\n\nconst handleBorderColor = (\n  type: DSBannerT.BannerTypesT,\n  { colors }: { colors: Record<string, Record<string, string>> },\n): string => {\n  switch (type) {\n    case BANNER_TYPES.SUCCESS:\n      return colors.success[900];\n    case BANNER_TYPES.INFO:\n      return colors.brand[600];\n    case BANNER_TYPES.WARNING:\n      return colors.warning[900];\n    case BANNER_TYPES.DANGER:\n      return colors.danger[900];\n    default:\n      return 'should_not_happen';\n  }\n};\ninterface StyledBannerLayoutT {\n  $type: DSBannerT.BannerTypesT;\n}\nexport const StyledBannerLayout = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.LAYOUT,\n})<StyledBannerLayoutT>`\n  display: flex;\n  width: 100%;\n  align-items: flex-start;\n  justify-content: space-between;\n  background-color: neutral-000;\n  border-bottom: 5px solid ${({ $type, theme }) => handleBorderColor($type, theme)};\n  & > :first-child {\n    flex: 1;\n    min-width: 0;\n  }\n  & > :last-child {\n    flex-shrink: 0;\n  }\n`;\n\nexport const StyledIconContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.ICON_CONTAINER,\n})`\n  padding-top: 8px;\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n  min-width: 0px;\n`;\n\nexport const StyledTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n  color: neutral-700;\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  padding-top: 9px;\n  padding-bottom: 9px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n  margin-left: ${({ theme }) => theme.space.xs};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  padding-top: 9px;\n  padding-bottom: 6px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n  ${({ theme }) => {\n    if (['s', 'xs'].includes(theme.layoutMode!)) {\n      return `\n        grid-column: 1 / -1;\n      `;\n    }\n    return '';\n  }}\n`;\n\ninterface StyledActionLinkT {\n  isBodyEmpty: boolean;\n}\nexport const StyledActionLink = styled('a', {\n  name: DSBannerName,\n  slot: DSBannerSlots.ACTION_LINK,\n})<StyledActionLinkT>`\n  display: inline-block;\n  text-decoration: none;\n  line-height: 14px;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: brand-600;\n  min-width: 0px;\n  position: relative;\n  &:focus {\n    outline: none;\n    &:after {\n      position: absolute;\n      content: '';\n      top: -2px;\n      left: -2px;\n      right: -2px;\n      bottom: -2px;\n      border-radius: 2px;\n      border: 2px solid brand-700;\n      box-shadow: 0 0 0 1px brand-700;\n      pointer-events: none;\n    }\n  }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n  name: DSBannerName,\n  slot: DSBannerSlots.CLOSE_BUTTON,\n})`\n  margin-left: ${({ theme }) => theme.space.xxs};\n  margin-top: 4px;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAErB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,oBAAoB;AAG7B,SAAS,cAAc,cAAc,qBAAqB;AAInD,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUG,kBAAkB;AAAA;AAIf,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOD,MAAM,oBAAoB,CACxB,MACA,EAAE,OAAO,MACE;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK,aAAa;AAChB,aAAO,OAAO,QAAQ,GAAG;AAAA,IAC3B,KAAK,aAAa;AAChB,aAAO,OAAO,MAAM,GAAG;AAAA,IACzB,KAAK,aAAa;AAChB,aAAO,OAAO,QAAQ,GAAG;AAAA,IAC3B,KAAK,aAAa;AAChB,aAAO,OAAO,OAAO,GAAG;AAAA,IAC1B;AACE,aAAO;AAAA,EACX;AACF;AAIO,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAM4B,CAAC,EAAE,OAAO,MAAM,MAAM,kBAAkB,OAAO,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU3E,MAAM,sBAAsB,OAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA,kBAEiB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA,iBAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAIvC,MAAM,cAAc,OAAO,cAAc,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,CAAC;AAAA;AAAA,iBAEhF,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnD,MAAM,iBAAiB,OAAO,cAAc,EAAE,MAAM,cAAc,MAAM,cAAc,SAAS,CAAC;AAAA,iBACtF,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,iBAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrD,CAAC,EAAE,MAAM,MAAM;AACf,MAAI,CAAC,KAAK,IAAI,EAAE,SAAS,MAAM,UAAW,GAAG;AAC3C,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,SAAO;AACT,CAAC;AAAA;AAMI,MAAM,mBAAmB,OAAO,KAAK;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA,iBAIgB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBlD,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,iBACgB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { ColorProps, LayoutProps, SizingProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\nimport { BANNER_TYPES, DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {}\nexport const StyledBannerContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n  min-height: 41px;\n  overflow: hidden;\n  transition: all 0.5s ease-in;\n  @starting-style {\n    max-height: 0px;\n  }\n  ${xStyledCommonProps}\n`;\n\ninterface StyledInnerContainerT {}\nexport const StyledInnerContainer = styled(Grid, {\n  name: DSBannerName,\n  slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n  padding-right: 4px;\n  padding-bottom: 6px;\n  width: 100%;\n  min-width: 0;\n`;\n\nconst handleBorderColor = (\n  type: DSBannerT.BannerTypesT,\n  { colors }: { colors: Record<string, Record<string, string>> },\n): string => {\n  switch (type) {\n    case BANNER_TYPES.SUCCESS:\n      return colors.success[900];\n    case BANNER_TYPES.INFO:\n      return colors.brand[600];\n    case BANNER_TYPES.WARNING:\n      return colors.warning[900];\n    case BANNER_TYPES.DANGER:\n      return colors.danger[900];\n    default:\n      return 'should_not_happen';\n  }\n};\ninterface StyledBannerLayoutT {\n  $type: DSBannerT.BannerTypesT;\n}\nexport const StyledBannerLayout = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.LAYOUT,\n})<StyledBannerLayoutT>`\n  display: flex;\n  width: 100%;\n  align-items: flex-start;\n  justify-content: space-between;\n  background-color: neutral-000;\n  border-bottom: 5px solid ${({ $type, theme }) => handleBorderColor($type, theme)};\n  & > :first-child {\n    flex: 1;\n    min-width: 0;\n  }\n`;\n\nexport const StyledIconContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.ICON_CONTAINER,\n})`\n  padding-top: 8px;\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n  min-width: 0px;\n`;\n\nexport const StyledTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n  color: neutral-700;\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  padding-top: 9px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n  margin-left: ${({ theme }) => theme.space.xs};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  padding-top: 9px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n  ${({ theme }) => {\n    if (['s', 'xs'].includes(theme.layoutMode!)) {\n      return `\n        grid-column: 1 / -1;\n      `;\n    }\n    return '';\n  }}\n`;\n\ninterface StyledActionLinkT {\n  isBodyEmpty: boolean;\n}\nexport const StyledActionLink = styled('a', {\n  name: DSBannerName,\n  slot: DSBannerSlots.ACTION_LINK,\n})<StyledActionLinkT>`\n  display: inline-block;\n  text-decoration: none;\n  line-height: inherit;\n+ font-size: inherit;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: brand-600;\n  min-width: 0px;\n  position: relative;\n  &:focus {\n    outline: none;\n    &:after {\n      position: absolute;\n      content: '';\n      top: -2px;\n      left: -2px;\n      right: -2px;\n      bottom: -2px;\n      border-radius: 2px;\n      border: 2px solid brand-700;\n      box-shadow: 0 0 0 1px brand-700;\n      pointer-events: none;\n    }\n  }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n  name: DSBannerName,\n  slot: DSBannerSlots.CLOSE_BUTTON,\n})`\n  margin: 5px;\n`;\n\nexport const StyledLiveRegionPortal = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.LIVE_REGION_PORTAL,\n})`\n  clip: rect(0 0 0 0);\n  position: absolute;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAErB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,oBAAoB;AAG7B,SAAS,cAAc,cAAc,qBAAqB;AAInD,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOG,kBAAkB;AAAA;AAIf,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOD,MAAM,oBAAoB,CACxB,MACA,EAAE,OAAO,MACE;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK,aAAa;AAChB,aAAO,OAAO,QAAQ,GAAG;AAAA,IAC3B,KAAK,aAAa;AAChB,aAAO,OAAO,MAAM,GAAG;AAAA,IACzB,KAAK,aAAa;AAChB,aAAO,OAAO,QAAQ,GAAG;AAAA,IAC3B,KAAK,aAAa;AAChB,aAAO,OAAO,OAAO,GAAG;AAAA,IAC1B;AACE,aAAO;AAAA,EACX;AACF;AAIO,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAM4B,CAAC,EAAE,OAAO,MAAM,MAAM,kBAAkB,OAAO,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3E,MAAM,sBAAsB,OAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA,kBAEiB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA,iBAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAIvC,MAAM,cAAc,OAAO,cAAc,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,CAAC;AAAA;AAAA,iBAEhF,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnD,MAAM,iBAAiB,OAAO,cAAc,EAAE,MAAM,cAAc,MAAM,cAAc,SAAS,CAAC;AAAA,iBACtF,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,iBAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrD,CAAC,EAAE,MAAM,MAAM;AACf,MAAI,CAAC,KAAK,IAAI,EAAE,SAAS,MAAM,UAAW,GAAG;AAC3C,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,SAAO;AACT,CAAC;AAAA;AAMI,MAAM,mBAAmB,OAAO,KAAK;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKgB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBlD,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAIM,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/typescript-testing/typescript-banner-valid.js

@@ -34,7 +34,8 @@ const testCompleteDefaults = {
   isOpen: true,
   onClose: () => null,
   showCloseButton: true,
-  withLiveRegionAnnouncement: void 0
+  withLiveRegionAnnouncement: "alert",
+  isPageNotice: false
 };
 const testInternalProps = {
   ...testRequiredProps,
@@ -51,21 +52,24 @@ const testExplicitDefinition = {
   body: "",
   type: "info",
   isOpen: true,
-  withLiveRegionAnnouncement: void 0
+  withLiveRegionAnnouncement: "alert",
+  isPageNotice: false
 };
 const testInferedTypeCompatibility = {
   label: "",
   body: "",
   type: "info",
   isOpen: true,
-  withLiveRegionAnnouncement: void 0
+  withLiveRegionAnnouncement: "alert",
+  isPageNotice: false
 };
 const testDefinitionAsConst = {
   label: "",
   body: "",
   type: "info",
   isOpen: true,
-  withLiveRegionAnnouncement: void 0
+  withLiveRegionAnnouncement: "alert",
+  isPageNotice: false
 };
 const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(DSBanner, { ...testExplicitDefinition }),

package/dist/esm/typescript-testing/typescript-banner-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-banner-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSBanner } from '../index.js';\nimport type { DSBannerT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSBannerT.Props;\ntype ComponentPropsInternals = DSBannerT.InternalProps;\ntype ComponentPropsDefaultProps = DSBannerT.DefaultProps;\ntype ComponentPropsOptionalProps = DSBannerT.OptionalProps;\ntype ComponentPropsRequiredProps = DSBannerT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  actionLink: {\n    label: 'test',\n    onClick: () => {},\n    href: 'test',\n  },\n  CustomBody: () => <div>test</div>,\n  closeBtnRef: () => null,\n  actionRef: { current: {} },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  label: 'hello',\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: 'info',\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n  withLiveRegionAnnouncement: undefined,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  label: '',\n  body: '',\n  type: 'info',\n  isOpen: true,\n  withLiveRegionAnnouncement: undefined,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  label: '',\n  body: '',\n  type: 'info',\n  isOpen: true,\n  withLiveRegionAnnouncement: undefined,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  label: '',\n  body: '',\n  type: 'info',\n  isOpen: true,\n  withLiveRegionAnnouncement: undefined,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSBanner {...testExplicitDefinition} />\n    <DSBanner {...testInferedTypeCompatibility} />\n    <DSBanner {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSBanner label=\"hello\" body=\"body\" type=\"danger\" isOpen />\n  </>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkBH,SAqElB,UArEkB,KAqElB,YArEkB;AAjBpB,SAAS,gBAAgB;AAUzB,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD;AAAA,EACrD,YAAY;AAAA,IACV,OAAO;AAAA,IACP,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,MAAM;AAAA,EACR;AAAA,EACA,YAAY,MAAM,oBAAC,SAAI,kBAAI;AAAA,EAC3B,aAAa,MAAM;AAAA,EACnB,WAAW,EAAE,SAAS,CAAC,EAAE;AAC3B;AAIA,MAAM,sBAA2D;AAAA,EAC/D,OAAO;AACT;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AAAA,EACjB,4BAA4B;AAC9B;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,4BAA4B;AAC9B;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,4BAA4B;AAC9B;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,4BAA4B;AAC9B;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,YAAU,GAAG,wBAAwB;AAAA,EACtC,oBAAC,YAAU,GAAG,8BAA8B;AAAA,EAC5C,oBAAC,YAAU,GAAG,uBAAuB;AAAA,EAErC,oBAAC,YAAS,OAAM,SAAQ,MAAK,QAAO,MAAK,UAAS,QAAM,MAAC;AAAA,GAC3D;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSBanner } from '../index.js';\nimport type { DSBannerT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSBannerT.Props;\ntype ComponentPropsInternals = DSBannerT.InternalProps;\ntype ComponentPropsDefaultProps = DSBannerT.DefaultProps;\ntype ComponentPropsOptionalProps = DSBannerT.OptionalProps;\ntype ComponentPropsRequiredProps = DSBannerT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  actionLink: {\n    label: 'test',\n    onClick: () => {},\n    href: 'test',\n  },\n  CustomBody: () => <div>test</div>,\n  closeBtnRef: () => null,\n  actionRef: { current: {} },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  label: 'hello',\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: 'info',\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n  withLiveRegionAnnouncement: 'alert',\n  isPageNotice: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  label: '',\n  body: '',\n  type: 'info',\n  isOpen: true,\n  withLiveRegionAnnouncement: 'alert',\n  isPageNotice: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  label: '',\n  body: '',\n  type: 'info',\n  isOpen: true,\n  withLiveRegionAnnouncement: 'alert',\n  isPageNotice: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  label: '',\n  body: '',\n  type: 'info',\n  isOpen: true,\n  withLiveRegionAnnouncement: 'alert',\n  isPageNotice: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSBanner {...testExplicitDefinition} />\n    <DSBanner {...testInferedTypeCompatibility} />\n    <DSBanner {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSBanner label=\"hello\" body=\"body\" type=\"danger\" isOpen />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkBH,SAyElB,UAzEkB,KAyElB,YAzEkB;AAjBpB,SAAS,gBAAgB;AAUzB,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD;AAAA,EACrD,YAAY;AAAA,IACV,OAAO;AAAA,IACP,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,MAAM;AAAA,EACR;AAAA,EACA,YAAY,MAAM,oBAAC,SAAI,kBAAI;AAAA,EAC3B,aAAa,MAAM;AAAA,EACnB,WAAW,EAAE,SAAS,CAAC,EAAE;AAC3B;AAIA,MAAM,sBAA2D;AAAA,EAC/D,OAAO;AACT;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AAAA,EACjB,4BAA4B;AAAA,EAC5B,cAAc;AAChB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,4BAA4B;AAAA,EAC5B,cAAc;AAChB;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,4BAA4B;AAAA,EAC5B,cAAc;AAChB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,4BAA4B;AAAA,EAC5B,cAAc;AAChB;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,YAAU,GAAG,wBAAwB;AAAA,EACtC,oBAAC,YAAU,GAAG,8BAA8B;AAAA,EAC5C,oBAAC,YAAU,GAAG,uBAAuB;AAAA,EAErC,oBAAC,YAAS,OAAM,SAAQ,MAAK,QAAO,MAAK,UAAS,QAAM,MAAC;AAAA,GAC3D;",
   "names": []
 }

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

@@ -16,6 +16,7 @@ export declare const DSBannerSlots: {
     readonly ACTION_LINK: "action-link";
     readonly CLOSE_BUTTON: "close-button";
     readonly LAYOUT: "layout";
+    readonly LIVE_REGION_PORTAL: "live-region-portal";
 };
 export declare const DSBannerDatatestid: {
     INNER_CONTAINER: string;
@@ -27,4 +28,5 @@ export declare const DSBannerDatatestid: {
     ACTION_LINK: string;
     CLOSE_BUTTON: string;
     LAYOUT: string;
+    LIVE_REGION_PORTAL: string;
 };

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

@@ -23,7 +23,8 @@ export declare namespace DSBannerT {
         isOpen: boolean;
         onClose: () => void | null;
         showCloseButton: boolean;
-        withLiveRegionAnnouncement: 'assertive' | 'polite' | undefined;
+        withLiveRegionAnnouncement: 'alert' | 'assertive' | 'polite' | 'none';
+        isPageNotice: boolean;
     }
     interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSBannerName, typeof DSBannerSlots> {
         actionLink?: ActionLinkT;

package/dist/types/styles.d.ts

@@ -18,4 +18,5 @@ interface StyledActionLinkT {
 }
 export declare const StyledActionLink: import("styled-components").StyledComponent<"a", import("@elliemae/ds-system").Theme, StyledActionLinkT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"a">, never>;
 export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
+export declare const StyledLiveRegionPortal: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-banner",
-  "version": "3.53.0-alpha.2",
+  "version": "3.53.0-alpha.4",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Banner",
   "files": [
@@ -38,19 +38,19 @@
   "dependencies": {
     "@xstyled/system": "~3.7.3",
     "@xstyled/util": "~3.7.0",
-    "@elliemae/ds-grid": "3.53.0-alpha.2",
-    "@elliemae/ds-button-v2": "3.53.0-alpha.2",
-    "@elliemae/ds-icons": "3.53.0-alpha.2",
-    "@elliemae/ds-props-helpers": "3.53.0-alpha.2",
-    "@elliemae/ds-system": "3.53.0-alpha.2",
-    "@elliemae/ds-typescript-helpers": "3.53.0-alpha.2"
+    "@elliemae/ds-button-v2": "3.53.0-alpha.4",
+    "@elliemae/ds-grid": "3.53.0-alpha.4",
+    "@elliemae/ds-props-helpers": "3.53.0-alpha.4",
+    "@elliemae/ds-icons": "3.53.0-alpha.4",
+    "@elliemae/ds-system": "3.53.0-alpha.4",
+    "@elliemae/ds-typescript-helpers": "3.53.0-alpha.4"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.65",
     "jest": "~29.7.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.53.0-alpha.2",
-    "@elliemae/ds-test-utils": "3.53.0-alpha.2"
+    "@elliemae/ds-test-utils": "3.53.0-alpha.4",
+    "@elliemae/ds-monorepo-devops": "3.53.0-alpha.4"
   },
   "peerDependencies": {
     "lodash-es": "^4.17.21",