@elliemae/ds-banner 3.80.0-next.31 → 3.80.0-next.36

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// eslint-disable-next-line no-restricted-exports\nexport { DSBanner, DSBannerWithSchema } from './DSBanner.js';\nexport { DSBannerName, BANNER_TYPES, DSBannerSlots, DSBannerDatatestid } from './exported-related/index.js';\nexport type { DSBannerT } from './react-desc-prop-types.js';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// eslint-disable-next-line no-restricted-exports\nexport { DSBanner, DSBannerWithSchema } from './DSBanner.js';\nexport { DSBannerName, BANNER_TYPES, DSBannerSlots, DSBannerDatatestid } from './constants/index.js';\nexport type { DSBannerT } from './react-desc-prop-types.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,UAAU,0BAA0B;AAC7C,SAAS,cAAc,cAAc,eAAe,0BAA0B;",
   "names": []
 }

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

@@ -5,7 +5,7 @@ import {
   xstyledPropTypes,
   getPropsPerSlotPropTypes
 } from "@elliemae/ds-props-helpers";
-import { BANNER_TYPES, DSBannerName, DSBannerSlots } from "./exported-related/index.js";
+import { BANNER_TYPES, DSBannerName, DSBannerSlots } from "./constants/index.js";
 const defaultProps = {
   containerProps: {},
   label: "",
@@ -42,8 +42,13 @@ const DSBannerPropTypes = {
       - focusOnWrapper: function to focus the link
     `
   ).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)
+  withLiveRegionAnnouncement: PropTypes.oneOf(["alert", "assertive", "polite", "none"]).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. The region is named by default from the label prop; a name passed via aria-label/aria-labelledby (containerProps or dsBannerContainer) takes precedence."
+  ).defaultValue(false),
+  bannerId: PropTypes.string.description(
+    `Base id of the banner. Every id the banner renders derives from it: the inner container uses it as is, the title uses "<bannerId>-title", the body uses "<bannerId>-body" and the live region uses "<bannerId>-live-region". When omitted, a unique base is generated per instance ("ds-banner-<random>"). Must start with a letter. Pass your own to reference the banner parts from aria-describedby / aria-labelledby.`
+  )
 };
 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: 'alert' | 'assertive' | 'polite' | 'none';\n    isPageNotice: boolean;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSBannerName,\n    typeof DSBannerSlots\n  > {\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 type SlotFunctionArguments = {\n    dsBannerContainer: () => object;\n    dsBannerInnerContainer: () => object;\n    dsBannerCustomContainer: () => object;\n    dsBannerBody: () => object;\n    dsBannerTitle: () => object;\n    dsBannerSubtitle: () => object;\n    dsBannerIconContainer: () => object;\n    dsBannerActionLink: () => object;\n    dsBannerCloseButton: () => object;\n    dsBannerLayout: () => object;\n    dsBannerLiveRegionPortal: () => object;\n  };\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;AA0DnD,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;",
+  "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 './constants/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 extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSBannerName,\n    typeof DSBannerSlots\n  > {\n    actionLink?: ActionLinkT;\n    CustomBody?: React.ComponentType<Record<string, unknown>>;\n    closeBtnRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n    actionRef?: MutableRefObject<ActionRef>;\n    bannerId?: string;\n  }\n  export type SlotFunctionArguments = {\n    dsBannerContainer: () => object;\n    dsBannerInnerContainer: () => object;\n    dsBannerCustomContainer: () => object;\n    dsBannerBody: () => object;\n    dsBannerTitle: () => object;\n    dsBannerSubtitle: () => object;\n    dsBannerIconContainer: () => object;\n    dsBannerActionLink: () => object;\n    dsBannerCloseButton: () => object;\n    dsBannerLayout: () => object;\n    dsBannerLiveRegionPortal: () => object;\n  };\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', 'none'])\n    .description('Whether to announce the banner content in a live region when it opens.')\n    .defaultValue('alert'),\n  isPageNotice: PropTypes.bool\n    .description(\n      'Whether to add role region to the banner. The region is named by default from the label prop; a name passed via aria-label/aria-labelledby (containerProps or dsBannerContainer) takes precedence.',\n    )\n    .defaultValue(false),\n  bannerId: PropTypes.string.description(\n    `Base id of the banner. Every id the banner renders derives from it: the inner container uses it as is, the title uses \"<bannerId>-title\", the body uses \"<bannerId>-body\" and the live region uses \"<bannerId>-live-region\". When omitted, a unique base is generated per instance (\"ds-banner-<random>\"). Must start with a letter. Pass your own to reference the banner parts from aria-describedby / aria-labelledby.`,\n  ),\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;AA2DnD,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,UAAU,MAAM,CAAC,EACjF,YAAY,wEAAwE,EACpF,aAAa,OAAO;AAAA,EACvB,cAAc,UAAU,KACrB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,OAAO;AAAA,IACzB;AAAA,EACF;AACF;AAEO,MAAM,0BAA0B;",
   "names": []
 }

package/dist/esm/styles.js

@@ -3,7 +3,7 @@ import { DSButtonV2 } from "@elliemae/ds-button-v2";
 import { Grid } from "@elliemae/ds-grid";
 import { styled, xStyledCommonProps } from "@elliemae/ds-system";
 import { DSTypography } from "@elliemae/ds-typography";
-import { BANNER_TYPES, DSBannerName, DSBannerSlots } from "./exported-related/index.js";
+import { BANNER_TYPES, DSBannerName, DSBannerSlots } from "./constants/index.js";
 const StyledBannerContainer = styled("div", {
   name: DSBannerName,
   slot: DSBannerSlots.CONTAINER
@@ -93,7 +93,7 @@ const StyledActionLink = styled("a", {
   display: inline-block;
   text-decoration: none;
   line-height: inherit;
-+ font-size: inherit;
+  font-size: inherit;
   font-weight: ${({ theme }) => theme.fontWeights.regular};
   color: brand-600;
   min-width: 0px;

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 { 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: 59px;\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  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 StyledBody = styled('div', { name: DSBannerName, slot: DSBannerSlots.BODY })`\n  padding-top: 9px;\n  padding-bottom: 9px;\n`;\n\nexport const StyledTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n  color: neutral-700;\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  font-weight: ${({ theme }) => theme.fontWeights.regular};\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"],
+  "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 { BANNER_TYPES, DSBannerName, DSBannerSlots } from './constants/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: 59px;\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  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 StyledBody = styled('div', { name: DSBannerName, slot: DSBannerSlots.BODY })`\n  padding-top: 9px;\n  padding-bottom: 9px;\n`;\n\nexport const StyledTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n  color: neutral-700;\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  font-weight: ${({ theme }) => theme.fontWeights.regular};\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;AAC7B,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;AAMD,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,aAAa,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,KAAK,CAAC;AAAA;AAAA;AAAA;AAKjF,MAAM,cAAc,OAAO,cAAc,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1F,MAAM,iBAAiB,OAAO,cAAc,EAAE,MAAM,cAAc,MAAM,cAAc,SAAS,CAAC;AAAA,iBACtF,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA,IAIrD,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/slot-props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/slot-props.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSBannerName, DSBannerSlots } from '../exported-related/index.js';\nimport type { DSBannerT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObj: Partial<DSBannerT.Props> = {\n  dsBannerContainer: { 'aria-label': 'just a typescript test' },\n  dsBannerInnerContainer: { 'aria-label': 'just a typescript test' },\n  dsBannerCustomContainer: { 'aria-label': 'just a typescript test' },\n  dsBannerBody: { 'aria-label': 'just a typescript test' },\n  dsBannerTitle: { 'aria-label': 'just a typescript test' },\n  dsBannerSubtitle: { 'aria-label': 'just a typescript test' },\n  dsBannerIconContainer: { 'aria-label': 'just a typescript test' },\n  dsBannerActionLink: { 'aria-label': 'just a typescript test' },\n  dsBannerCloseButton: { 'aria-label': 'just a typescript test' },\n  dsBannerLayout: { 'aria-label': 'just a typescript test' },\n  dsBannerLiveRegionPortal: { 'aria-label': 'just a typescript test' },\n};\n\nconst SlotPropsAsFunctions: DSBannerT.SlotFunctionArguments = {\n  dsBannerContainer: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerInnerContainer: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerCustomContainer: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerBody: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerTitle: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerSubtitle: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerIconContainer: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerActionLink: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerCloseButton: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerLayout: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerLiveRegionPortal: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// Exhaustiveness check \u2014 fails compilation if a slot is missing from SlotFunctionArguments\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSBannerName, typeof DSBannerSlots>\n> = SlotPropsAsFunctions;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSBannerName, DSBannerSlots } from '../constants/index.js';\nimport type { DSBannerT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObj: Partial<DSBannerT.Props> = {\n  dsBannerContainer: { 'aria-label': 'just a typescript test' },\n  dsBannerInnerContainer: { 'aria-label': 'just a typescript test' },\n  dsBannerCustomContainer: { 'aria-label': 'just a typescript test' },\n  dsBannerBody: { 'aria-label': 'just a typescript test' },\n  dsBannerTitle: { 'aria-label': 'just a typescript test' },\n  dsBannerSubtitle: { 'aria-label': 'just a typescript test' },\n  dsBannerIconContainer: { 'aria-label': 'just a typescript test' },\n  dsBannerActionLink: { 'aria-label': 'just a typescript test' },\n  dsBannerCloseButton: { 'aria-label': 'just a typescript test' },\n  dsBannerLayout: { 'aria-label': 'just a typescript test' },\n  dsBannerLiveRegionPortal: { 'aria-label': 'just a typescript test' },\n};\n\nconst SlotPropsAsFunctions: DSBannerT.SlotFunctionArguments = {\n  dsBannerContainer: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerInnerContainer: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerCustomContainer: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerBody: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerTitle: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerSubtitle: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerIconContainer: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerActionLink: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerCloseButton: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerLayout: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBannerLiveRegionPortal: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// Exhaustiveness check \u2014 fails compilation if a slot is missing from SlotFunctionArguments\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSBannerName, typeof DSBannerSlots>\n> = SlotPropsAsFunctions;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACMvB,MAAM,iBAA2C;AAAA,EAC/C,mBAAmB,EAAE,cAAc,yBAAyB;AAAA,EAC5D,wBAAwB,EAAE,cAAc,yBAAyB;AAAA,EACjE,yBAAyB,EAAE,cAAc,yBAAyB;AAAA,EAClE,cAAc,EAAE,cAAc,yBAAyB;AAAA,EACvD,eAAe,EAAE,cAAc,yBAAyB;AAAA,EACxD,kBAAkB,EAAE,cAAc,yBAAyB;AAAA,EAC3D,uBAAuB,EAAE,cAAc,yBAAyB;AAAA,EAChE,oBAAoB,EAAE,cAAc,yBAAyB;AAAA,EAC7D,qBAAqB,EAAE,cAAc,yBAAyB;AAAA,EAC9D,gBAAgB,EAAE,cAAc,yBAAyB;AAAA,EACzD,0BAA0B,EAAE,cAAc,yBAAyB;AACrE;AAEA,MAAM,uBAAwD;AAAA,EAC5D,mBAAmB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACnE,wBAAwB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACxE,yBAAyB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACzE,cAAc,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC9D,eAAe,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC/D,kBAAkB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAClE,uBAAuB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACvE,oBAAoB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACpE,qBAAqB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACrE,gBAAgB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAChE,0BAA0B,OAAO,EAAE,cAAc,yBAAyB;AAC5E;AAGA,MAAM,6CAEF;",
   "names": []
 }

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

@@ -11,7 +11,8 @@ const testOptionalProps = {
   },
   CustomBody: () => /* @__PURE__ */ jsx("div", { children: "test" }),
   closeBtnRef: () => null,
-  actionRef: { current: {} }
+  actionRef: { current: {} },
+  bannerId: "my-banner"
 };
 const testPartialDefaults = {
   label: "hello"

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: '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;",
+  "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  bannerId: 'my-banner',\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,SA0ElB,UA1EkB,KA0ElB,YA1EkB;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;AAAA,EACzB,UAAU;AACZ;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/esm/usePageNotice.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { useMemo } from "react";
+import { uid } from "uid";
+const hasName = (attrs) => !!attrs && ("aria-label" in attrs || "aria-labelledby" in attrs);
+const usePageNotice = (propsWithDefaults, originalProps, globalAttrs) => {
+  const { isPageNotice, label, CustomBody, containerProps, bannerId } = propsWithDefaults;
+  const { dsBannerContainer } = propsWithDefaults;
+  const baseId = useMemo(() => bannerId ?? `ds-banner-${uid(5)}`, [bannerId]);
+  const titleId = `${baseId}-title`;
+  const bodyId = `${baseId}-body`;
+  const slotProps = typeof dsBannerContainer === "function" ? dsBannerContainer({ ...originalProps }) : dsBannerContainer;
+  const hasConsumerName = hasName(slotProps) || [containerProps, globalAttrs].some(hasName);
+  const hasCustomBody = !!CustomBody;
+  const pageNoticeNameProps = useMemo(() => {
+    if (!isPageNotice || hasConsumerName || !label) return {};
+    return hasCustomBody ? { "aria-label": label } : { "aria-labelledby": titleId };
+  }, [isPageNotice, hasConsumerName, label, hasCustomBody, titleId]);
+  return { baseId, contentIds: { titleId, bodyId }, pageNoticeNameProps };
+};
+export {
+  usePageNotice
+};
+//# sourceMappingURL=usePageNotice.js.map

package/dist/esm/usePageNotice.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/usePageNotice.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\ntype AnyAttrs = Record<string, unknown> | null | undefined;\n\nconst hasName = (attrs: AnyAttrs) => !!attrs && ('aria-label' in attrs || 'aria-labelledby' in attrs);\n\n// An element with role=\"region\" must have an accessible name, otherwise it is not exposed as a landmark.\n// The name defaults to the label prop, and any name provided by the consumer (containerProps,\n// global attributes or the dsBannerContainer slot) takes precedence.\nexport const usePageNotice = (\n  propsWithDefaults: DSBannerT.InternalProps,\n  originalProps: DSBannerT.Props,\n  globalAttrs: AnyAttrs,\n) => {\n  const { isPageNotice, label, CustomBody, containerProps, bannerId } = propsWithDefaults;\n  const { dsBannerContainer } = propsWithDefaults as { dsBannerContainer?: unknown };\n  // every id the banner renders derives from this single base, always starting with a letter (valid HTML id)\n  const baseId = useMemo(() => bannerId ?? `ds-banner-${uid(5)}`, [bannerId]);\n  const titleId = `${baseId}-title`;\n  const bodyId = `${baseId}-body`;\n\n  const slotProps = (\n    typeof dsBannerContainer === 'function'\n      ? (dsBannerContainer as (args: object) => AnyAttrs)({ ...originalProps })\n      : dsBannerContainer\n  ) as AnyAttrs;\n  const hasConsumerName = hasName(slotProps) || [containerProps, globalAttrs].some(hasName);\n  const hasCustomBody = !!CustomBody;\n\n  const pageNoticeNameProps = useMemo<Record<string, string>>(() => {\n    if (!isPageNotice || hasConsumerName || !label) return {} as Record<string, string>;\n    return hasCustomBody ? { 'aria-label': label } : { 'aria-labelledby': titleId };\n  }, [isPageNotice, hasConsumerName, label, hasCustomBody, titleId]);\n\n  return { baseId, contentIds: { titleId, bodyId }, pageNoticeNameProps };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AACxB,SAAS,WAAW;AAKpB,MAAM,UAAU,CAAC,UAAoB,CAAC,CAAC,UAAU,gBAAgB,SAAS,qBAAqB;AAKxF,MAAM,gBAAgB,CAC3B,mBACA,eACA,gBACG;AACH,QAAM,EAAE,cAAc,OAAO,YAAY,gBAAgB,SAAS,IAAI;AACtE,QAAM,EAAE,kBAAkB,IAAI;AAE9B,QAAM,SAAS,QAAQ,MAAM,YAAY,aAAa,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC1E,QAAM,UAAU,GAAG,MAAM;AACzB,QAAM,SAAS,GAAG,MAAM;AAExB,QAAM,YACJ,OAAO,sBAAsB,aACxB,kBAAiD,EAAE,GAAG,cAAc,CAAC,IACtE;AAEN,QAAM,kBAAkB,QAAQ,SAAS,KAAK,CAAC,gBAAgB,WAAW,EAAE,KAAK,OAAO;AACxF,QAAM,gBAAgB,CAAC,CAAC;AAExB,QAAM,sBAAsB,QAAgC,MAAM;AAChE,QAAI,CAAC,gBAAgB,mBAAmB,CAAC,MAAO,QAAO,CAAC;AACxD,WAAO,gBAAgB,EAAE,cAAc,MAAM,IAAI,EAAE,mBAAmB,QAAQ;AAAA,EAChF,GAAG,CAAC,cAAc,iBAAiB,OAAO,eAAe,OAAO,CAAC;AAEjE,SAAO,EAAE,QAAQ,YAAY,EAAE,SAAS,OAAO,GAAG,oBAAoB;AACxE;",
+  "names": []
+}

package/dist/types/DSBannerContent.d.ts

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

package/dist/types/LiveRegionCorrectlyImplemented.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const LiveRegionCorrectlyImplemented: ({ id, innerRef, announcementType, ownerPropsConfig, globalAttrs: { lang, dir }, }: {
+    id: string;
+    innerRef: React.Ref<HTMLDivElement>;
+    announcementType: "alert" | "polite" | "assertive" | "none";
+    ownerPropsConfig: Record<string, unknown>;
+    globalAttrs: {
+        lang?: string;
+        dir?: string;
+    };
+}) => React.ReactPortal;

package/dist/types/{exported-related → constants}/index.d.ts

@@ -5,6 +5,12 @@ export declare const BANNER_TYPES: {
     readonly WARNING: "warning";
     readonly DANGER: "danger";
 };
+/**
+ * @deprecated legacy export, no longer rendered or used by the component (PUI-19089).
+ * The body used to render with this fixed id, which duplicated across banners. The body id is now
+ * `<bannerId>-body`, where `bannerId` is generated per instance or provided through the `bannerId` prop.
+ * Kept only so imports of the old constant keep resolving.
+ */
 export declare const BANNER_BODY_ID = "ds-banner-body";
 export declare const DSBannerSlots: {
     readonly CONTAINER: "container";

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export { DSBanner, DSBannerWithSchema } from './DSBanner.js';
-export { DSBannerName, BANNER_TYPES, DSBannerSlots, DSBannerDatatestid } from './exported-related/index.js';
+export { DSBannerName, BANNER_TYPES, DSBannerSlots, DSBannerDatatestid } from './constants/index.js';
 export type { DSBannerT } from './react-desc-prop-types.js';

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

@@ -1,7 +1,7 @@
 import type { MutableRefObject, RefCallback } from 'react';
 import type { XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';
 import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
-import { BANNER_TYPES, DSBannerName, DSBannerSlots } from './exported-related/index.js';
+import { BANNER_TYPES, DSBannerName, DSBannerSlots } from './constants/index.js';
 export declare namespace DSBannerT {
     interface ActionRef {
         focusOnWrapper?: () => void;
@@ -31,6 +31,7 @@ export declare namespace DSBannerT {
         CustomBody?: React.ComponentType<Record<string, unknown>>;
         closeBtnRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;
         actionRef?: MutableRefObject<ActionRef>;
+        bannerId?: string;
     }
     type SlotFunctionArguments = {
         dsBannerContainer: () => object;

package/dist/types/usePageNotice.d.ts

@@ -0,0 +1,11 @@
+import type { DSBannerT } from './react-desc-prop-types.js';
+type AnyAttrs = Record<string, unknown> | null | undefined;
+export declare const usePageNotice: (propsWithDefaults: DSBannerT.InternalProps, originalProps: DSBannerT.Props, globalAttrs: AnyAttrs) => {
+    baseId: string;
+    contentIds: {
+        titleId: string;
+        bodyId: string;
+    };
+    pageNoticeNameProps: Record<string, string>;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-banner",
-  "version": "3.80.0-next.31",
+  "version": "3.80.0-next.36",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Banner",
   "files": [
@@ -36,18 +36,18 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button-v2": "3.80.0-next.31",
-    "@elliemae/ds-grid": "3.80.0-next.31",
-    "@elliemae/ds-icons": "3.80.0-next.31",
-    "@elliemae/ds-props-helpers": "3.80.0-next.31",
-    "@elliemae/ds-system": "3.80.0-next.31",
-    "@elliemae/ds-typescript-helpers": "3.80.0-next.31",
-    "@elliemae/ds-typography": "3.80.0-next.31",
+    "@elliemae/ds-button-v2": "3.80.0-next.36",
+    "@elliemae/ds-grid": "3.80.0-next.36",
+    "@elliemae/ds-icons": "3.80.0-next.36",
+    "@elliemae/ds-props-helpers": "3.80.0-next.36",
+    "@elliemae/ds-system": "3.80.0-next.36",
+    "@elliemae/ds-typescript-helpers": "3.80.0-next.36",
+    "@elliemae/ds-typography": "3.80.0-next.36",
     "uid": "^2.0.2"
   },
   "devDependencies": {
-    "@elliemae/ds-monorepo-devops": "3.80.0-next.31",
-    "@elliemae/ds-test-utils": "3.80.0-next.31",
+    "@elliemae/ds-monorepo-devops": "3.80.0-next.36",
+    "@elliemae/ds-test-utils": "3.80.0-next.36",
     "jest": "^30.0.0",
     "styled-components": "~5.3.11"
   },

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

@@ -1,7 +0,0 @@
-{
-  "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  // reserved slot: declared but never rendered. It is part of the public surface (DSBannerDatatestid, dsBannerCustomContainer slot prop)\n  // and pinned by DSBanner.data-testid.test.js, so removing it is a breaking change. See KNOWN_INTENTIONAL_DEVIATIONS.md\n  CUSTOM_CONTAINER: 'custom-container',\n  BODY: 'body',\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;AAAA;AAAA,EAGjB,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,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/esm/exported-related/index.js.map

@@ -1,7 +0,0 @@
-{
-  "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  // reserved slot: declared but never rendered. It is part of the public surface (DSBannerDatatestid, dsBannerCustomContainer slot prop)\n  // and pinned by DSBanner.data-testid.test.js, so removing it is a breaking change. See KNOWN_INTENTIONAL_DEVIATIONS.md\n  CUSTOM_CONTAINER: 'custom-container',\n  BODY: 'body',\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;AAAA;AAAA,EAGjB,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,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": []
-}