@elliemae/ds-banner 3.53.0-alpha.1 → 3.53.0-alpha.3

package/dist/esm/DSBannerContent.js

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AlertsDetailFill, InfoFill, SuccessFill, WarningSquare } from "@elliemae/ds-icons";
+import { useOwnerProps } from "@elliemae/ds-props-helpers";
+import { TYPOGRAPHY_VARIANTS } from "@elliemae/ds-typography";
+import React2, { useCallback } from "react";
+import { BANNER_BODY_ID, DSBannerDatatestid } from "./exported-related/index.js";
+import { StyledActionLink, StyledIconContainer, StyledSubTitle, StyledTitle } from "./styles.js";
+const icons = {
+  success: /* @__PURE__ */ jsx(SuccessFill, { color: ["success", "900"], width: "20px", height: "20px" }),
+  info: /* @__PURE__ */ jsx(InfoFill, { color: ["brand-primary", "600"], width: "20px", height: "20px" }),
+  danger: /* @__PURE__ */ jsx(AlertsDetailFill, { color: ["danger", "900"], width: "20px", height: "20px" }),
+  warning: /* @__PURE__ */ jsx(WarningSquare, { color: ["warning", "900"], width: "20px", height: "20px" })
+};
+const DSBannerContent = (props) => {
+  const {
+    propsWithDefaults,
+    propsWithDefaults: { type, label, body, actionLink, actionRef }
+  } = props;
+  const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });
+  const linkRef = React2.useRef(null);
+  const handleActionRefForLink = useCallback(
+    (linkNode) => {
+      if (linkNode) {
+        linkRef.current = linkNode;
+        if (actionRef && actionRef.current) {
+          actionRef.current.focusOnLink = () => {
+            linkNode?.focus?.();
+          };
+        }
+      }
+    },
+    [actionRef]
+  );
+  const handleOnKeyDown = useCallback((e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (linkRef.current) linkRef.current.click();
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(StyledIconContainer, { "data-testid": DSBannerDatatestid.ICON_CONTAINER, ...ownerPropsConfig, children: icons[type] }),
+    /* @__PURE__ */ jsx(StyledTitle, { variant: TYPOGRAPHY_VARIANTS.B1, ...ownerPropsConfig, children: label }),
+    /* @__PURE__ */ jsxs(StyledSubTitle, { id: BANNER_BODY_ID, variant: TYPOGRAPHY_VARIANTS.B1, ...ownerPropsConfig, children: [
+      body,
+      actionLink && /* @__PURE__ */ jsxs(Fragment, { children: [
+        "    ",
+        /* @__PURE__ */ jsx(
+          StyledActionLink,
+          {
+            "data-testid": DSBannerDatatestid.ACTION_LINK,
+            onClick: actionLink.onClick,
+            href: actionLink.href,
+            innerRef: handleActionRefForLink,
+            onKeyDown: handleOnKeyDown,
+            tabIndex: 0,
+            isBodyEmpty: !body,
+            title: actionLink.label,
+            ...ownerPropsConfig,
+            children: actionLink.label
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+export {
+  DSBannerContent,
+  icons
+};
+//# sourceMappingURL=DSBannerContent.js.map

package/dist/esm/DSBannerContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSBannerContent.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { AlertsDetailFill, InfoFill, SuccessFill, WarningSquare } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React, { useCallback } from 'react';\nimport { BANNER_BODY_ID, DSBannerDatatestid } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { StyledActionLink, StyledIconContainer, StyledSubTitle, StyledTitle } from './styles.js';\n\nexport const icons: Record<string, JSX.Element> = {\n  success: <SuccessFill color={['success', '900']} width=\"20px\" height=\"20px\" />,\n  info: <InfoFill color={['brand-primary', '600']} width=\"20px\" height=\"20px\" />,\n  danger: <AlertsDetailFill color={['danger', '900']} width=\"20px\" height=\"20px\" />,\n  warning: <WarningSquare color={['warning', '900']} width=\"20px\" height=\"20px\" />,\n};\n\ninterface DSBannerContentProps {\n  propsWithDefaults: DSBannerT.InternalProps;\n}\n\nexport const DSBannerContent: React.ComponentType<DSBannerContentProps> = (props) => {\n  const {\n    propsWithDefaults,\n    propsWithDefaults: { type, label, body, actionLink, actionRef },\n  } = props;\n  const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n\n  const linkRef = React.useRef<HTMLAnchorElement>(null) as React.MutableRefObject<HTMLAnchorElement>;\n\n  const handleActionRefForLink = useCallback<React.RefCallback<HTMLAnchorElement>>(\n    (linkNode) => {\n      if (linkNode) {\n        linkRef.current = linkNode;\n        if (actionRef && actionRef.current) {\n          actionRef.current.focusOnLink = () => {\n            linkNode?.focus?.();\n          };\n        }\n      }\n    },\n    [actionRef],\n  );\n\n  const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (linkRef.current) linkRef.current.click();\n    }\n  }, []);\n\n  return (\n    <>\n      <StyledIconContainer data-testid={DSBannerDatatestid.ICON_CONTAINER} {...ownerPropsConfig}>\n        {icons[type]}\n      </StyledIconContainer>\n      <StyledTitle variant={TYPOGRAPHY_VARIANTS.B1} {...ownerPropsConfig}>\n        {label}\n      </StyledTitle>\n      <StyledSubTitle id={BANNER_BODY_ID} variant={TYPOGRAPHY_VARIANTS.B1} {...ownerPropsConfig}>\n        {body}\n        {actionLink && (\n          <>\n            {/* This way of handling the space is making use of the browser default\n              white-space clamping, avoiding lots of JS code. */}\n            {'    '}\n            <StyledActionLink\n              data-testid={DSBannerDatatestid.ACTION_LINK}\n              onClick={actionLink.onClick}\n              href={actionLink.href}\n              innerRef={handleActionRefForLink}\n              onKeyDown={handleOnKeyDown}\n              tabIndex={0}\n              isBodyEmpty={!body}\n              title={actionLink.label}\n              {...ownerPropsConfig}\n            >\n              {actionLink.label}\n            </StyledActionLink>\n          </>\n        )}\n      </StyledSubTitle>\n    </>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACUZ,SAmDD,UAnDC,KAmDD,YAnDC;AATX,SAAS,kBAAkB,UAAU,aAAa,qBAAqB;AACvE,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,OAAOA,UAAS,mBAAmB;AACnC,SAAS,gBAAgB,0BAA0B;AAEnD,SAAS,kBAAkB,qBAAqB,gBAAgB,mBAAmB;AAE5E,MAAM,QAAqC;AAAA,EAChD,SAAS,oBAAC,eAAY,OAAO,CAAC,WAAW,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC5E,MAAM,oBAAC,YAAS,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC5E,QAAQ,oBAAC,oBAAiB,OAAO,CAAC,UAAU,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC/E,SAAS,oBAAC,iBAAc,OAAO,CAAC,WAAW,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAChF;AAMO,MAAM,kBAA6D,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ;AAAA,IACA,mBAAmB,EAAE,MAAM,OAAO,MAAM,YAAY,UAAU;AAAA,EAChE,IAAI;AACJ,QAAM,mBAAmB,cAAc,mBAAmB,EAAE,GAAG,MAAM,CAAC;AAEtE,QAAM,UAAUA,OAAM,OAA0B,IAAI;AAEpD,QAAM,yBAAyB;AAAA,IAC7B,CAAC,aAAa;AACZ,UAAI,UAAU;AACZ,gBAAQ,UAAU;AAClB,YAAI,aAAa,UAAU,SAAS;AAClC,oBAAU,QAAQ,cAAc,MAAM;AACpC,sBAAU,QAAQ;AAAA,UACpB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,kBAAkB,YAAY,CAAC,MAA2B;AAC9D,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAe;AACjB,UAAI,QAAQ,QAAS,SAAQ,QAAQ,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,iCACE;AAAA,wBAAC,uBAAoB,eAAa,mBAAmB,gBAAiB,GAAG,kBACtE,gBAAM,IAAI,GACb;AAAA,IACA,oBAAC,eAAY,SAAS,oBAAoB,IAAK,GAAG,kBAC/C,iBACH;AAAA,IACA,qBAAC,kBAAe,IAAI,gBAAgB,SAAS,oBAAoB,IAAK,GAAG,kBACtE;AAAA;AAAA,MACA,cACC,iCAGG;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,mBAAmB;AAAA,YAChC,SAAS,WAAW;AAAA,YACpB,MAAM,WAAW;AAAA,YACjB,UAAU;AAAA,YACV,WAAW;AAAA,YACX,UAAU;AAAA,YACV,aAAa,CAAC;AAAA,YACd,OAAO,WAAW;AAAA,YACjB,GAAG;AAAA,YAEH,qBAAW;AAAA;AAAA,QACd;AAAA,SACF;AAAA,OAEJ;AAAA,KACF;AAEJ;",
+  "names": ["React"]
+}

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

@@ -7,6 +7,7 @@ const BANNER_TYPES = {
   WARNING: "warning",
   DANGER: "danger"
 };
+const BANNER_BODY_ID = "ds-banner-body";
 const DSBannerSlots = {
   CONTAINER: "container",
   INNER_CONTAINER: "inner-container",
@@ -15,7 +16,9 @@ const DSBannerSlots = {
   SUBTITLE: "subtitle",
   ICON_CONTAINER: "icon-container",
   ACTION_LINK: "action-link",
-  CLOSE_BUTTON: "close-button"
+  CLOSE_BUTTON: "close-button",
+  LAYOUT: "layout",
+  LIVE_REGION_PORTAL: "live-region-portal"
 };
 const DSBannerDatatestid = {
   ...slotObjectToDataTestIds(DSBannerName, DSBannerSlots),
@@ -24,6 +27,7 @@ const DSBannerDatatestid = {
   ICON_CONTAINER: "ds-banner-icon"
 };
 export {
+  BANNER_BODY_ID,
   BANNER_TYPES,
   DSBannerDatatestid,
   DSBannerName,

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\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} 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;AAoBO,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;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

@@ -1,6 +1,11 @@
 import * as React from "react";
-import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
-import { BANNER_TYPES } from "./exported-related/index.js";
+import {
+  PropTypes,
+  globalAttributesPropTypes,
+  xstyledPropTypes,
+  getPropsPerSlotPropTypes
+} from "@elliemae/ds-props-helpers";
+import { BANNER_TYPES, DSBannerName, DSBannerSlots } from "./exported-related/index.js";
 const defaultProps = {
   containerProps: {},
   label: "",
@@ -8,11 +13,14 @@ const defaultProps = {
   type: BANNER_TYPES.INFO,
   isOpen: true,
   onClose: () => null,
-  showCloseButton: true
+  showCloseButton: true,
+  withLiveRegionAnnouncement: "alert",
+  isPageNotice: false
 };
 const DSBannerPropTypes = {
   ...globalAttributesPropTypes,
   ...xstyledPropTypes,
+  ...getPropsPerSlotPropTypes(DSBannerName, DSBannerSlots),
   containerProps: PropTypes.object.description("Set of Properties attached to the main container.").defaultValue({}),
   label: PropTypes.string.description("Banner label.").defaultValue(""),
   body: PropTypes.string.description("Banner body content").defaultValue(""),
@@ -33,7 +41,9 @@ const DSBannerPropTypes = {
       - focusOnLink: function to focus the banner
       - focusOnWrapper: function to focus the link
     `
-  ).defaultValue({})
+  ).defaultValue({}),
+  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 { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } 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  }\n\n  export interface OptionalProps {\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};\n\nexport const DSBannerPropTypes: DSPropTypesSchema<DSBannerT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container.').defaultValue({}),\n  label: PropTypes.string.description('Banner label.').defaultValue(''),\n  body: PropTypes.string.description('Banner body content').defaultValue(''),\n  CustomBody: PropTypes.func.description('Banner custom content').defaultValue(''),\n  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('Banner type.').defaultValue(BANNER_TYPES.INFO),\n  onClose: PropTypes.func.description('Callback when the Banner closes.'),\n  isOpen: PropTypes.bool.description('Whether the Banner is open or closed.').defaultValue(true),\n  showCloseButton: PropTypes.bool.description('Whether to show close button or not.').defaultValue(true),\n  closeBtnRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  actionLink: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    href: PropTypes.string,\n  })\n    .description('Properties for the Action Link.')\n    .defaultValue({}),\n  actionRef: PropTypes.object\n    .description(\n      `\n      Reference to use actions:\n      - focusOnLink: function to focus the banner\n      - focusOnWrapper: function to focus the link\n    `,\n    )\n    .defaultValue({}),\n};\n\nexport const DSBannerPropTypesSchema = DSBannerPropTypes as unknown as ValidationMap<DSBannerT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,oBAAoB;AAuCtB,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;AACnB;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,UAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EACjH,OAAO,UAAU,OAAO,YAAY,eAAe,EAAE,aAAa,EAAE;AAAA,EACpE,MAAM,UAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,EAAE;AAAA,EACzE,YAAY,UAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,MAAM,UAAU,MAAM,OAAO,OAAO,YAAY,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,aAAa,IAAI;AAAA,EAC7G,SAAS,UAAU,KAAK,YAAY,kCAAkC;AAAA,EACtE,QAAQ,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,IAAI;AAAA,EAC7F,iBAAiB,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EACrG,aAAa,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EACjH,YAAY,UAAU,MAAM;AAAA,IAC1B,OAAO,UAAU;AAAA,IACjB,SAAS,UAAU;AAAA,IACnB,MAAM,UAAU;AAAA,EAClB,CAAC,EACE,YAAY,iCAAiC,EAC7C,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,UAAU,OAClB;AAAA,IACC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EACC,aAAa,CAAC,CAAC;AACpB;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

@@ -2,15 +2,18 @@ import * as React from "react";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
 import { Grid } from "@elliemae/ds-grid";
 import { styled, xStyledCommonProps } from "@elliemae/ds-system";
-import { DSBannerName, DSBannerSlots } from "./exported-related/index.js";
-import { handleAnimation, handleBorderColor } from "./utils/styleHelpers.js";
+import { DSTypography } from "@elliemae/ds-typography";
+import { BANNER_TYPES, DSBannerName, DSBannerSlots } from "./exported-related/index.js";
 const StyledBannerContainer = styled("div", {
   name: DSBannerName,
   slot: DSBannerSlots.CONTAINER
 })`
-  overflow: ${({ isAnimating }) => !isAnimating ? "visible" : "hidden"};
-  height: ${({ isAnimating, height }) => !isAnimating ? "auto" : `${height}px`};
-  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};
+  min-height: 41px;
+  overflow: hidden;
+  transition: all 0.5s ease-in;
+  @starting-style {
+    max-height: 0px;
+  }
   ${xStyledCommonProps}
 `;
 const StyledInnerContainer = styled(Grid, {
@@ -18,13 +21,38 @@ const StyledInnerContainer = styled(Grid, {
   slot: DSBannerSlots.INNER_CONTAINER
 })`
   padding-right: 4px;
-  min-height: 41px;
+  padding-bottom: 6px;
+  width: 100%;
+  min-width: 0;
+`;
+const handleBorderColor = (type, { colors }) => {
+  switch (type) {
+    case BANNER_TYPES.SUCCESS:
+      return colors.success[900];
+    case BANNER_TYPES.INFO:
+      return colors.brand[600];
+    case BANNER_TYPES.WARNING:
+      return colors.warning[900];
+    case BANNER_TYPES.DANGER:
+      return colors.danger[900];
+    default:
+      return "should_not_happen";
+  }
+};
+const StyledBannerLayout = styled("div", {
+  name: DSBannerName,
+  slot: DSBannerSlots.LAYOUT
+})`
+  display: flex;
   width: 100%;
+  align-items: flex-start;
+  justify-content: space-between;
   background-color: neutral-000;
   border-bottom: 5px solid ${({ $type, theme }) => handleBorderColor($type, theme)};
-  transform: translateY(${({ isOpen }) => isOpen ? "0" : "-100%"});
-  transition: transform 0.5s ease-in-out;
-  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};
+  & > :first-child {
+    flex: 1;
+    min-width: 0;
+  }
 `;
 const StyledIconContainer = styled("div", {
   name: DSBannerName,
@@ -35,47 +63,54 @@ const StyledIconContainer = styled("div", {
   margin-left: ${({ theme }) => theme.space.xs};
   min-width: 0px;
 `;
-const StyledTitle = styled("div", { name: DSBannerName, slot: DSBannerSlots.TITLE })`
+const StyledTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.TITLE })`
   color: neutral-700;
-  font-size: ${({ theme }) => theme.fontSizes.label[400]};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
   padding-top: 9px;
-  padding-bottom: 9px;
-  font-size: 14px;
   overflow-wrap: break-word;
   white-space: pre-wrap;
   min-width: 0px;
 `;
-const StyledSubTitle = styled("div", { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`
+const StyledSubTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`
   margin-left: ${({ theme }) => theme.space.xs};
-  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};
   font-weight: ${({ theme }) => theme.fontWeights.regular};
   padding-top: 9px;
-  padding-bottom: 6px;
-  font-size: 14px;
   overflow-wrap: break-word;
   white-space: pre-wrap;
   min-width: 0px;
+  ${({ theme }) => {
+  if (["s", "xs"].includes(theme.layoutMode)) {
+    return `
+        grid-column: 1 / -1;
+      `;
+  }
+  return "";
+}}
 `;
-const StyledActionLink = styled("a", { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })`
-  margin-left: ${({ theme, isBodyEmpty }) => !isBodyEmpty ? theme.space.xs : 0};
+const StyledActionLink = styled("a", {
+  name: DSBannerName,
+  slot: DSBannerSlots.ACTION_LINK
+})`
+  display: inline-block;
   text-decoration: none;
-  font-size: 14px;
-  line-height: 14px;
+  line-height: inherit;
++ font-size: inherit;
   font-weight: ${({ theme }) => theme.fontWeights.regular};
   color: brand-600;
   min-width: 0px;
   position: relative;
   &:focus {
+    outline: none;
     &:after {
       position: absolute;
       content: '';
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
       border-radius: 2px;
       border: 2px solid brand-700;
+      box-shadow: 0 0 0 1px brand-700;
       pointer-events: none;
     }
   }
@@ -84,15 +119,23 @@ 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,
   StyledBannerContainer,
+  StyledBannerLayout,
   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 type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\nimport { DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n  isOpen: boolean;\n  isAnimating: boolean;\n  height: number;\n}\n\ninterface StyledInnerContainerT {\n  $type: DSBannerT.BannerTypesT;\n  isOpen: boolean;\n  isAnimating: boolean;\n}\n\ninterface StyledActionLinkT {\n  isBodyEmpty: boolean;\n}\n\nexport const StyledBannerContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n  overflow: ${({ isAnimating }) => (!isAnimating ? 'visible' : 'hidden')};\n  height: ${({ isAnimating, height }) => (!isAnimating ? 'auto' : `${height}px`)};\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledInnerContainer = styled(Grid, {\n  name: DSBannerName,\n  slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n  padding-right: 4px;\n  min-height: 41px;\n  width: 100%;\n  background-color: neutral-000;\n  border-bottom: 5px solid ${({ $type, theme }) => handleBorderColor($type, theme)};\n  transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n  transition: transform 0.5s ease-in-out;\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\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('div', { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n  color: neutral-700;\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  padding-top: 9px;\n  padding-bottom: 9px;\n  font-size: 14px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n  margin-left: ${({ theme }) => theme.space.xs};\n  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  padding-top: 9px;\n  padding-bottom: 6px;\n  font-size: 14px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledActionLink = styled('a', { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })<StyledActionLinkT>`\n  margin-left: ${({ theme, isBodyEmpty }) => (!isBodyEmpty ? theme.space.xs : 0)};\n  text-decoration: none;\n  font-size: 14px;\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    &:after {\n      position: absolute;\n      content: '';\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      border: 2px solid 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;AAG3C,SAAS,cAAc,qBAAqB;AAE5C,SAAS,iBAAiB,yBAAyB;AAkB5C,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,cACa,CAAC,EAAE,YAAY,MAAO,CAAC,cAAc,YAAY,QAAS;AAAA,YAC5D,CAAC,EAAE,aAAa,OAAO,MAAO,CAAC,cAAc,SAAS,GAAG,MAAM,IAAK;AAAA,IAC5E,CAAC,EAAE,aAAa,OAAO,MAAM,gBAAgB,aAAa,MAAM,CAAC;AAAA,IACjE,kBAAkB;AAAA;AAGf,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,6BAK4B,CAAC,EAAE,OAAO,MAAM,MAAM,kBAAkB,OAAO,KAAK,CAAC;AAAA,0BACxD,CAAC,EAAE,OAAO,MAAO,SAAS,MAAM,OAAQ;AAAA;AAAA,IAE9D,CAAC,EAAE,aAAa,OAAO,MAAM,gBAAgB,aAAa,MAAM,CAAC;AAAA;AAG9D,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,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,CAAC;AAAA;AAAA,eAE3E,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,iBACvC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnD,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,SAAS,CAAC;AAAA,iBAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,eAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,SAAS,GAAG,CAAC;AAAA,iBAC1C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlD,MAAM,mBAAmB,OAAO,KAAK,EAAE,MAAM,cAAc,MAAM,cAAc,YAAY,CAAC;AAAA,iBAClF,CAAC,EAAE,OAAO,YAAY,MAAO,CAAC,cAAc,MAAM,MAAM,KAAK,CAAE;AAAA;AAAA;AAAA;AAAA,iBAI/D,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBlD,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

@@ -33,7 +33,9 @@ const testCompleteDefaults = {
   type: "info",
   isOpen: true,
   onClose: () => null,
-  showCloseButton: true
+  showCloseButton: true,
+  withLiveRegionAnnouncement: "alert",
+  isPageNotice: false
 };
 const testInternalProps = {
   ...testRequiredProps,
@@ -49,19 +51,25 @@ const testExplicitDefinition = {
   label: "",
   body: "",
   type: "info",
-  isOpen: true
+  isOpen: true,
+  withLiveRegionAnnouncement: "alert",
+  isPageNotice: false
 };
 const testInferedTypeCompatibility = {
   label: "",
   body: "",
   type: "info",
-  isOpen: true
+  isOpen: true,
+  withLiveRegionAnnouncement: "alert",
+  isPageNotice: false
 };
 const testDefinitionAsConst = {
   label: "",
   body: "",
   type: "info",
-  isOpen: true
+  isOpen: true,
+  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};\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};\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} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  label: '',\n  body: '',\n  type: 'info',\n  isOpen: true,\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,SAiElB,UAjEkB,KAiElB,YAjEkB;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;AACnB;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;AACV;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AACV;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AACV;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/DSBannerContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DSBannerT } from './react-desc-prop-types.js';
+export declare const icons: Record<string, JSX.Element>;
+interface DSBannerContentProps {
+    propsWithDefaults: DSBannerT.InternalProps;
+}
+export declare const DSBannerContent: React.ComponentType<DSBannerContentProps>;
+export {};

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

@@ -5,6 +5,7 @@ export declare const BANNER_TYPES: {
     readonly WARNING: "warning";
     readonly DANGER: "danger";
 };
+export declare const BANNER_BODY_ID = "ds-banner-body";
 export declare const DSBannerSlots: {
     readonly CONTAINER: "container";
     readonly INNER_CONTAINER: "inner-container";
@@ -14,6 +15,8 @@ export declare const DSBannerSlots: {
     readonly ICON_CONTAINER: "icon-container";
     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;
@@ -24,4 +27,6 @@ export declare const DSBannerDatatestid: {
     SUBTITLE: string;
     ACTION_LINK: string;
     CLOSE_BUTTON: string;
+    LAYOUT: string;
+    LIVE_REGION_PORTAL: string;
 };

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

@@ -1,7 +1,7 @@
-/// <reference types="prop-types" />
 import type { MutableRefObject, RefCallback } from 'react';
 import type { XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';
-import { BANNER_TYPES } from './exported-related/index.js';
+import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
+import { BANNER_TYPES, DSBannerName, DSBannerSlots } from './exported-related/index.js';
 export declare namespace DSBannerT {
     interface ActionRef {
         focusOnWrapper?: () => void;
@@ -23,8 +23,10 @@ export declare namespace DSBannerT {
         isOpen: boolean;
         onClose: () => void | null;
         showCloseButton: boolean;
+        withLiveRegionAnnouncement: 'alert' | 'assertive' | 'polite' | 'none';
+        isPageNotice: boolean;
     }
-    interface OptionalProps {
+    interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSBannerName, typeof DSBannerSlots> {
         actionLink?: ActionLinkT;
         CustomBody?: React.ComponentType<Record<string, unknown>>;
         closeBtnRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;

package/dist/types/styles.d.ts

@@ -1,24 +1,22 @@
-/// <reference types="react" />
 import type { ColorProps, LayoutProps, SizingProps, SpaceProps } from '@elliemae/ds-system';
 import type { DSBannerT } from './react-desc-prop-types.js';
 interface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {
-    isOpen: boolean;
-    isAnimating: boolean;
-    height: number;
 }
+export declare const StyledBannerContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledBannerContainerT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 interface StyledInnerContainerT {
+}
+export declare const StyledInnerContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, StyledInnerContainerT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+interface StyledBannerLayoutT {
     $type: DSBannerT.BannerTypesT;
-    isOpen: boolean;
-    isAnimating: boolean;
 }
+export declare const StyledBannerLayout: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledBannerLayoutT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledTitle: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
+export declare const StyledSubTitle: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
 interface StyledActionLinkT {
     isBodyEmpty: boolean;
 }
-export declare const StyledBannerContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledBannerContainerT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledInnerContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, StyledInnerContainerT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
-export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledSubTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 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.1",
+  "version": "3.53.0-alpha.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Banner",
   "files": [
@@ -38,18 +38,19 @@
   "dependencies": {
     "@xstyled/system": "~3.7.3",
     "@xstyled/util": "~3.7.0",
-    "@elliemae/ds-button-v2": "3.53.0-alpha.1",
-    "@elliemae/ds-grid": "3.53.0-alpha.1",
-    "@elliemae/ds-typescript-helpers": "3.53.0-alpha.1",
-    "@elliemae/ds-icons": "3.53.0-alpha.1",
-    "@elliemae/ds-system": "3.53.0-alpha.1",
-    "@elliemae/ds-props-helpers": "3.53.0-alpha.1"
+    "@elliemae/ds-button-v2": "3.53.0-alpha.3",
+    "@elliemae/ds-props-helpers": "3.53.0-alpha.3",
+    "@elliemae/ds-grid": "3.53.0-alpha.3",
+    "@elliemae/ds-icons": "3.53.0-alpha.3",
+    "@elliemae/ds-system": "3.53.0-alpha.3",
+    "@elliemae/ds-typescript-helpers": "3.53.0-alpha.3"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "9.0.0-next.63",
+    "@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.1"
+    "@elliemae/ds-monorepo-devops": "3.53.0-alpha.3",
+    "@elliemae/ds-test-utils": "3.53.0-alpha.3"
   },
   "peerDependencies": {
     "lodash-es": "^4.17.21",