@elliemae/ds-banner 3.80.0-next.6 → 3.80.0-next.61

package/dist/cjs/styles.js

@@ -31,6 +31,7 @@ __export(styles_exports, {
   StyledActionLink: () => StyledActionLink,
   StyledBannerContainer: () => StyledBannerContainer,
   StyledBannerLayout: () => StyledBannerLayout,
+  StyledBody: () => StyledBody,
   StyledCloseButton: () => StyledCloseButton,
   StyledIconContainer: () => StyledIconContainer,
   StyledInnerContainer: () => StyledInnerContainer,
@@ -44,102 +45,130 @@ var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_typography = require("@elliemae/ds-typography");
-var import_exported_related = require("./exported-related/index.js");
+var import_constants = require("./constants/index.js");
 const StyledBannerContainer = (0, import_ds_system.styled)("div", {
-  name: import_exported_related.DSBannerName,
-  slot: import_exported_related.DSBannerSlots.CONTAINER
+  name: import_constants.DSBannerName,
+  slot: import_constants.DSBannerSlots.CONTAINER
 })`
-  min-height: 41px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  height: fit-content;
+  grid-template-rows: ${({ $isExpanded = true }) => $isExpanded ? "minmax(0, 1fr)" : "minmax(0, 0fr)"};
   overflow: hidden;
-  transition: all 0.5s ease-in;
+  transition: grid-template-rows ${import_constants.BANNER_SLIDE_DURATION_MS}ms ease-in;
   @starting-style {
-    max-height: 0px;
+    grid-template-rows: minmax(0, 0fr);
+  }
+  & > * {
+    align-self: start;
+    overflow: hidden;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
   }
   ${import_ds_system.xStyledCommonProps}
 `;
 const StyledInnerContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
-  name: import_exported_related.DSBannerName,
-  slot: import_exported_related.DSBannerSlots.INNER_CONTAINER
+  name: import_constants.DSBannerName,
+  slot: import_constants.DSBannerSlots.INNER_CONTAINER
 })`
-  padding-right: 4px;
-  padding-bottom: 6px;
   width: 100%;
   min-width: 0;
 `;
 const handleBorderColor = (type, { colors }) => {
   switch (type) {
-    case import_exported_related.BANNER_TYPES.SUCCESS:
+    case import_constants.BANNER_TYPES.SUCCESS:
       return colors.success[900];
-    case import_exported_related.BANNER_TYPES.INFO:
+    case import_constants.BANNER_TYPES.INFO:
       return colors.brand[600];
-    case import_exported_related.BANNER_TYPES.WARNING:
+    case import_constants.BANNER_TYPES.WARNING:
       return colors.warning[900];
-    case import_exported_related.BANNER_TYPES.DANGER:
+    case import_constants.BANNER_TYPES.DANGER:
       return colors.danger[900];
     default:
       return "should_not_happen";
   }
 };
 const StyledBannerLayout = (0, import_ds_system.styled)("div", {
-  name: import_exported_related.DSBannerName,
-  slot: import_exported_related.DSBannerSlots.LAYOUT
+  name: import_constants.DSBannerName,
+  slot: import_constants.DSBannerSlots.LAYOUT
 })`
   display: flex;
+  box-sizing: border-box;
+  min-height: 59px;
   width: 100%;
   align-items: flex-start;
   justify-content: space-between;
   background-color: neutral-000;
   border-bottom: 5px solid ${({ $type, theme }) => handleBorderColor($type, theme)};
+  /* the 4px to the right of the close button (Spec v2 container padding-right). It lives here and not in the inner container:
+     the close button is a sibling of the inner container, so a padding there would only add space before the button. */
+  padding-right: 4px;
   & > :first-child {
     flex: 1;
     min-width: 0;
   }
 `;
 const StyledIconContainer = (0, import_ds_system.styled)("div", {
-  name: import_exported_related.DSBannerName,
-  slot: import_exported_related.DSBannerSlots.ICON_CONTAINER
+  name: import_constants.DSBannerName,
+  slot: import_constants.DSBannerSlots.ICON_CONTAINER
 })`
   padding-top: 8px;
   margin-right: ${({ theme }) => theme.space.xxs};
   margin-left: ${({ theme }) => theme.space.xs};
   min-width: 0px;
 `;
-const StyledTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.TITLE })`
-  color: neutral-700;
-  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+const isSmallLayout = ({ theme }) => ["s", "xs"].includes(theme.layoutMode);
+const StyledBody = (0, import_ds_system.styled)("div", { name: import_constants.DSBannerName, slot: import_constants.DSBannerSlots.BODY })`
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 16px;
   padding-top: 9px;
+  & > :first-child {
+    flex: ${(props) => props.$isBodyEmpty ? "0 1 auto" : "1 0 100%"};
+  }
+  & > :nth-child(2) {
+    ${(props) => isSmallLayout(props) ? "flex: 0 1 100%;" : ""}
+    ${(props) => props.$isBodyEmpty ? "display: none;" : ""}
+  }
+`;
+const StyledTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_constants.DSBannerName, slot: import_constants.DSBannerSlots.TITLE })`
+  display: block;
+  color: neutral-700;
   overflow-wrap: break-word;
   white-space: pre-wrap;
   min-width: 0px;
 `;
-const StyledSubTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.SUBTITLE })`
-  margin-left: ${({ theme }) => theme.space.xs};
+const StyledSubTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_constants.DSBannerName, slot: import_constants.DSBannerSlots.SUBTITLE })`
   font-weight: ${({ theme }) => theme.fontWeights.regular};
-  padding-top: 9px;
   overflow-wrap: break-word;
   white-space: pre-wrap;
   min-width: 0px;
-  ${({ theme }) => {
-  if (["s", "xs"].includes(theme.layoutMode)) {
-    return `
-        grid-column: 1 / -1;
-      `;
-  }
-  return "";
-}}
+  padding-bottom: 9px;
 `;
-const StyledActionLink = (0, import_ds_system.styled)("a", {
-  name: import_exported_related.DSBannerName,
-  slot: import_exported_related.DSBannerSlots.ACTION_LINK
+const StyledActionLink = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
+  name: import_constants.DSBannerName,
+  slot: import_constants.DSBannerSlots.ACTION_LINK
 })`
-  display: inline-block;
-  text-decoration: none;
-  line-height: inherit;
-+ font-size: inherit;
-  font-weight: ${({ theme }) => theme.fontWeights.regular};
-  color: brand-600;
   min-width: 0px;
   position: relative;
+  margin-bottom: 9px;
+  align-self: flex-end;
+  align-self: last baseline;
+  /* Typography and underline of the action link (PUI-19233).
+     Size comes from the link-sml-title variant (set in DSBannerContent). The rest is the Link "inline text" styling:
+     idle underline + brand-600, hover no underline + brand-800 (decided: the link is underlined at rest).
+     PENDING UX CONFIRMATION: only font-weight (400 vs the variant's weight; the spec names a variant that does not
+     exist) and line-height (the description's, the variant's 24px would make the banner taller and misalign the
+     baselines). Adjusting them once UX answers should only touch those two declarations. */
+  font-weight: ${({ theme }) => theme.fontWeights.regular};
+  line-height: 1.278;
+  text-decoration: underline;
+  color: brand-600;
+  &:hover {
+    text-decoration: none;
+    color: brand-800;
+  }
   &:focus {
     outline: none;
     &:after {
@@ -157,14 +186,15 @@ const StyledActionLink = (0, import_ds_system.styled)("a", {
   }
 `;
 const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
-  name: import_exported_related.DSBannerName,
-  slot: import_exported_related.DSBannerSlots.CLOSE_BUTTON
+  name: import_constants.DSBannerName,
+  slot: import_constants.DSBannerSlots.CLOSE_BUTTON
 })`
-  margin: 5px;
+  margin-top: 4px;
+  margin-left: 8px;
 `;
 const StyledLiveRegionPortal = (0, import_ds_system.styled)("div", {
-  name: import_exported_related.DSBannerName,
-  slot: import_exported_related.DSBannerSlots.LIVE_REGION_PORTAL
+  name: import_constants.DSBannerName,
+  slot: import_constants.DSBannerSlots.LIVE_REGION_PORTAL
 })`
   clip: rect(0 0 0 0);
   position: absolute;

package/dist/cjs/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { ColorProps, LayoutProps, SizingProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { BANNER_TYPES, DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {}\nexport const StyledBannerContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n  min-height: 41px;\n  overflow: hidden;\n  transition: all 0.5s ease-in;\n  @starting-style {\n    max-height: 0px;\n  }\n  ${xStyledCommonProps}\n`;\n\ninterface StyledInnerContainerT {}\nexport const StyledInnerContainer = styled(Grid, {\n  name: DSBannerName,\n  slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n  padding-right: 4px;\n  padding-bottom: 6px;\n  width: 100%;\n  min-width: 0;\n`;\n\nconst handleBorderColor = (\n  type: DSBannerT.BannerTypesT,\n  { colors }: { colors: Record<string, Record<string, string>> },\n): string => {\n  switch (type) {\n    case BANNER_TYPES.SUCCESS:\n      return colors.success[900];\n    case BANNER_TYPES.INFO:\n      return colors.brand[600];\n    case BANNER_TYPES.WARNING:\n      return colors.warning[900];\n    case BANNER_TYPES.DANGER:\n      return colors.danger[900];\n    default:\n      return 'should_not_happen';\n  }\n};\ninterface StyledBannerLayoutT {\n  $type: DSBannerT.BannerTypesT;\n}\nexport const StyledBannerLayout = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.LAYOUT,\n})<StyledBannerLayoutT>`\n  display: flex;\n  width: 100%;\n  align-items: flex-start;\n  justify-content: space-between;\n  background-color: neutral-000;\n  border-bottom: 5px solid ${({ $type, theme }) => handleBorderColor($type, theme)};\n  & > :first-child {\n    flex: 1;\n    min-width: 0;\n  }\n`;\n\nexport const StyledIconContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.ICON_CONTAINER,\n})`\n  padding-top: 8px;\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n  min-width: 0px;\n`;\n\nexport const StyledTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n  color: neutral-700;\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  padding-top: 9px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n  margin-left: ${({ theme }) => theme.space.xs};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  padding-top: 9px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n  ${({ theme }) => {\n    if (['s', 'xs'].includes(theme.layoutMode!)) {\n      return `\n        grid-column: 1 / -1;\n      `;\n    }\n    return '';\n  }}\n`;\n\ninterface StyledActionLinkT {\n  isBodyEmpty: boolean;\n}\nexport const StyledActionLink = styled('a', {\n  name: DSBannerName,\n  slot: DSBannerSlots.ACTION_LINK,\n})<StyledActionLinkT>`\n  display: inline-block;\n  text-decoration: none;\n  line-height: inherit;\n+ font-size: inherit;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: brand-600;\n  min-width: 0px;\n  position: relative;\n  &:focus {\n    outline: none;\n    &:after {\n      position: absolute;\n      content: '';\n      top: -2px;\n      left: -2px;\n      right: -2px;\n      bottom: -2px;\n      border-radius: 2px;\n      border: 2px solid brand-700;\n      box-shadow: 0 0 0 1px brand-700;\n      pointer-events: none;\n    }\n  }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n  name: DSBannerName,\n  slot: DSBannerSlots.CLOSE_BUTTON,\n})`\n  margin: 5px;\n`;\n\nexport const StyledLiveRegionPortal = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.LIVE_REGION_PORTAL,\n})`\n  clip: rect(0 0 0 0);\n  position: absolute;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAC3B,qBAAqB;AAErB,uBAA2C;AAC3C,2BAA6B;AAC7B,8BAA0D;AAInD,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOG,mCAAkB;AAAA;AAIf,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOD,MAAM,oBAAoB,CACxB,MACA,EAAE,OAAO,MACE;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK,qCAAa;AAChB,aAAO,OAAO,QAAQ,GAAG;AAAA,IAC3B,KAAK,qCAAa;AAChB,aAAO,OAAO,MAAM,GAAG;AAAA,IACzB,KAAK,qCAAa;AAChB,aAAO,OAAO,QAAQ,GAAG;AAAA,IAC3B,KAAK,qCAAa;AAChB,aAAO,OAAO,OAAO,GAAG;AAAA,IAC1B;AACE,aAAO;AAAA,EACX;AACF;AAIO,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAM4B,CAAC,EAAE,OAAO,MAAM,MAAM,kBAAkB,OAAO,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3E,MAAM,0BAAsB,yBAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA,kBAEiB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA,iBAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAIvC,MAAM,kBAAc,yBAAO,mCAAc,EAAE,MAAM,sCAAc,MAAM,sCAAc,MAAM,CAAC;AAAA;AAAA,iBAEhF,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnD,MAAM,qBAAiB,yBAAO,mCAAc,EAAE,MAAM,sCAAc,MAAM,sCAAc,SAAS,CAAC;AAAA,iBACtF,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,iBAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrD,CAAC,EAAE,MAAM,MAAM;AACf,MAAI,CAAC,KAAK,IAAI,EAAE,SAAS,MAAM,UAAW,GAAG;AAC3C,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,SAAO;AACT,CAAC;AAAA;AAMI,MAAM,uBAAmB,yBAAO,KAAK;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKgB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBlD,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAIM,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { ColorProps, LayoutProps, SizingProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { BANNER_SLIDE_DURATION_MS, 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 {\n  $isExpanded?: boolean;\n}\n// The slide animates the height of an intrinsically sized (auto height) element, which css can not interpolate with\n//   \"height\" or \"max-height\" (auto/none are not interpolable, and min-height would clamp the collapsed state anyway).\n//   Instead the single child (the layout, the live region lives in a portal) is the item of a one track grid whose row goes\n//   from 0fr to 1fr: the row is always sized from the content so it follows wrapping, small layouts and text resize.\n//   The tracks are minmax(0, Xfr) and not plain Xfr because the item has a border (the type color line): a plain 0fr track\n//   can not be smaller than the item's border box, so it would collapse to 5px instead of 0.\n// The open slide is css only (@starting-style, the container mounts expanded), the close slide needs the container to\n//   still be mounted when $isExpanded turns false, which is handled by useBannerExitAnimation.\n// The 59px minimum height is NOT set here but on the layout (the element that draws the bottom bar): the bar must be the bottom\n//   edge of the banner, a min-height on the container would leave an empty box below it when the content is shorter (PUI-19295).\n//   Being only on the item, the collapsing row (minmax(0, 0fr)) still clips it, so the slide needs no min-height transition.\nexport const StyledBannerContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  height: fit-content;\n  grid-template-rows: ${({ $isExpanded = true }) => ($isExpanded ? 'minmax(0, 1fr)' : 'minmax(0, 0fr)')};\n  overflow: hidden;\n  transition: grid-template-rows ${BANNER_SLIDE_DURATION_MS}ms ease-in;\n  @starting-style {\n    grid-template-rows: minmax(0, 0fr);\n  }\n  & > * {\n    align-self: start;\n    overflow: hidden;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n  ${xStyledCommonProps}\n`;\n\ninterface StyledInnerContainerT {}\nexport const StyledInnerContainer = styled(Grid, {\n  name: DSBannerName,\n  slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\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  box-sizing: border-box;\n  min-height: 59px;\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  /* the 4px to the right of the close button (Spec v2 container padding-right). It lives here and not in the inner container:\n     the close button is a sibling of the inner container, so a padding there would only add space before the button. */\n  padding-right: 4px;\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\nconst isSmallLayout = ({ theme }: { theme: { layoutMode?: string } }) => ['s', 'xs'].includes(theme.layoutMode!);\n\ninterface StyledBodyT {\n  $isBodyEmpty: boolean;\n}\n// title, description and action link are the 3 children (in this order). The title is always on its own row. The\n// description and the action link share the next row while the link fits after the text (16px gap), otherwise the link\n// wraps to its own row below, aligned to the title (a gap, unlike a margin, is not applied at the start of a row).\n// A wrapping flex row, and not a grid, is what makes the link follow the text: a grid track can not move to a new row.\n// Small layouts: the description takes the whole row so the link is always below it.\nexport const StyledBody = styled('div', { name: DSBannerName, slot: DSBannerSlots.BODY })<StyledBodyT>`\n  display: flex;\n  flex-wrap: wrap;\n  column-gap: 16px;\n  padding-top: 9px;\n  & > :first-child {\n    flex: ${(props) => (props.$isBodyEmpty ? '0 1 auto' : '1 0 100%')};\n  }\n  & > :nth-child(2) {\n    ${(props) => (isSmallLayout(props) ? 'flex: 0 1 100%;' : '')}\n    ${(props) => (props.$isBodyEmpty ? 'display: none;' : '')}\n  }\n`;\n\nexport const StyledTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n  display: block;\n  color: neutral-700;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\n// the description carries the bottom spacing of the content area (Spec v2)\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  padding-bottom: 9px;\n`;\n\n// its own flex item of StyledBody (never inline in the description), nested in DSTypography (link-sml-title variant).\n// It stays on the last line of the text when its whole label fits there, otherwise it moves to its own row. It only\n// breaks into several lines if the label alone is wider than the body.\nexport const StyledActionLink = styled(DSTypography, {\n  name: DSBannerName,\n  slot: DSBannerSlots.ACTION_LINK,\n})`\n  min-width: 0px;\n  position: relative;\n  margin-bottom: 9px;\n  align-self: flex-end;\n  align-self: last baseline;\n  /* Typography and underline of the action link (PUI-19233).\n     Size comes from the link-sml-title variant (set in DSBannerContent). The rest is the Link \"inline text\" styling:\n     idle underline + brand-600, hover no underline + brand-800 (decided: the link is underlined at rest).\n     PENDING UX CONFIRMATION: only font-weight (400 vs the variant's weight; the spec names a variant that does not\n     exist) and line-height (the description's, the variant's 24px would make the banner taller and misalign the\n     baselines). Adjusting them once UX answers should only touch those two declarations. */\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  line-height: 1.278;\n  text-decoration: underline;\n  color: brand-600;\n  &:hover {\n    text-decoration: none;\n    color: brand-800;\n  }\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-top: 4px;\n  margin-left: 8px;\n`;\n\nexport const StyledLiveRegionPortal = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.LIVE_REGION_PORTAL,\n})`\n  clip: rect(0 0 0 0);\n  position: absolute;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAC3B,qBAAqB;AAErB,uBAA2C;AAC3C,2BAA6B;AAC7B,uBAAoF;AAiB7E,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA,wBAIuB,CAAC,EAAE,cAAc,KAAK,MAAO,cAAc,mBAAmB,gBAAiB;AAAA;AAAA,mCAEpE,yCAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWvD,mCAAkB;AAAA;AAIf,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAKD,MAAM,oBAAoB,CACxB,MACA,EAAE,OAAO,MACE;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK,8BAAa;AAChB,aAAO,OAAO,QAAQ,GAAG;AAAA,IAC3B,KAAK,8BAAa;AAChB,aAAO,OAAO,MAAM,GAAG;AAAA,IACzB,KAAK,8BAAa;AAChB,aAAO,OAAO,QAAQ,GAAG;AAAA,IAC3B,KAAK,8BAAa;AAChB,aAAO,OAAO,OAAO,GAAG;AAAA,IAC1B;AACE,aAAO;AAAA,EACX;AACF;AAIO,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAQ4B,CAAC,EAAE,OAAO,MAAM,MAAM,kBAAkB,OAAO,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU3E,MAAM,0BAAsB,yBAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA,kBAEiB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA,iBAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAI9C,MAAM,gBAAgB,CAAC,EAAE,MAAM,MAA0C,CAAC,KAAK,IAAI,EAAE,SAAS,MAAM,UAAW;AAUxG,MAAM,iBAAa,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM5E,CAAC,UAAW,MAAM,eAAe,aAAa,UAAW;AAAA;AAAA;AAAA,MAG/D,CAAC,UAAW,cAAc,KAAK,IAAI,oBAAoB,EAAG;AAAA,MAC1D,CAAC,UAAW,MAAM,eAAe,mBAAmB,EAAG;AAAA;AAAA;AAItD,MAAM,kBAAc,yBAAO,mCAAc,EAAE,MAAM,+BAAc,MAAM,+BAAc,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1F,MAAM,qBAAiB,yBAAO,mCAAc,EAAE,MAAM,+BAAc,MAAM,+BAAc,SAAS,CAAC;AAAA,iBACtF,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAUlD,MAAM,uBAAmB,yBAAO,mCAAc;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAYgB,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;AAAA;AAAA;AAAA;AAAA;AAwBlD,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/typescript-testing/slot-props.js

@@ -0,0 +1,52 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var React = __toESM(require("react"));
+const SlotPropsAsObj = {
+  dsBannerContainer: { "aria-label": "just a typescript test" },
+  dsBannerInnerContainer: { "aria-label": "just a typescript test" },
+  dsBannerCustomContainer: { "aria-label": "just a typescript test" },
+  dsBannerBody: { "aria-label": "just a typescript test" },
+  dsBannerTitle: { "aria-label": "just a typescript test" },
+  dsBannerSubtitle: { "aria-label": "just a typescript test" },
+  dsBannerIconContainer: { "aria-label": "just a typescript test" },
+  dsBannerActionLink: { "aria-label": "just a typescript test" },
+  dsBannerCloseButton: { "aria-label": "just a typescript test" },
+  dsBannerLayout: { "aria-label": "just a typescript test" },
+  dsBannerLiveRegionPortal: { "aria-label": "just a typescript test" }
+};
+const SlotPropsAsFunctions = {
+  dsBannerContainer: () => ({ "aria-label": "just a typescript test" }),
+  dsBannerInnerContainer: () => ({ "aria-label": "just a typescript test" }),
+  dsBannerCustomContainer: () => ({ "aria-label": "just a typescript test" }),
+  dsBannerBody: () => ({ "aria-label": "just a typescript test" }),
+  dsBannerTitle: () => ({ "aria-label": "just a typescript test" }),
+  dsBannerSubtitle: () => ({ "aria-label": "just a typescript test" }),
+  dsBannerIconContainer: () => ({ "aria-label": "just a typescript test" }),
+  dsBannerActionLink: () => ({ "aria-label": "just a typescript test" }),
+  dsBannerCloseButton: () => ({ "aria-label": "just a typescript test" }),
+  dsBannerLayout: () => ({ "aria-label": "just a typescript test" }),
+  dsBannerLiveRegionPortal: () => ({ "aria-label": "just a typescript test" })
+};
+const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
+//# sourceMappingURL=slot-props.js.map

package/dist/cjs/typescript-testing/slot-props.js.map

@@ -0,0 +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 '../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,YAAuB;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/cjs/typescript-testing/typescript-banner-valid.js

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

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

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

package/dist/cjs/useBannerContainer.js

@@ -0,0 +1,55 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useBannerContainer_exports = {};
+__export(useBannerContainer_exports, {
+  useBannerContainer: () => useBannerContainer
+});
+module.exports = __toCommonJS(useBannerContainer_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_useBannerExitAnimation = require("./useBannerExitAnimation.js");
+const useBannerContainer = (isOpen, actionRef) => {
+  const exitAnimation = (0, import_useBannerExitAnimation.useBannerExitAnimation)(isOpen);
+  const handleActionRefForContainer = (0, import_react.useCallback)(
+    (containerNode) => {
+      if (containerNode && actionRef && actionRef.current) {
+        actionRef.current.focusOnWrapper = () => {
+          if (containerNode) {
+            setTimeout(() => {
+              containerNode?.focus();
+            }, 300);
+          }
+        };
+      }
+    },
+    [actionRef]
+  );
+  return { handleActionRefForContainer, ...exitAnimation };
+};
+//# sourceMappingURL=useBannerContainer.js.map

package/dist/cjs/useBannerContainer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useBannerContainer.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type React from 'react';\nimport { useCallback } from 'react';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { useBannerExitAnimation } from './useBannerExitAnimation.js';\n\n// everything the container needs from its lifecycle: the actionRef.focusOnWrapper hookup and the exit animation\nexport const useBannerContainer = (isOpen: boolean, actionRef: DSBannerT.InternalProps['actionRef']) => {\n  const exitAnimation = useBannerExitAnimation(isOpen);\n\n  const handleActionRefForContainer = useCallback<React.RefCallback<HTMLDivElement>>(\n    (containerNode) => {\n      if (containerNode && actionRef && actionRef.current) {\n        actionRef.current.focusOnWrapper = () => {\n          if (containerNode) {\n            setTimeout(() => {\n              containerNode?.focus();\n            }, 300);\n          }\n        };\n      }\n    },\n    [actionRef],\n  );\n\n  return { handleActionRefForContainer, ...exitAnimation };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA4B;AAE5B,oCAAuC;AAGhC,MAAM,qBAAqB,CAAC,QAAiB,cAAoD;AACtG,QAAM,oBAAgB,sDAAuB,MAAM;AAEnD,QAAM,kCAA8B;AAAA,IAClC,CAAC,kBAAkB;AACjB,UAAI,iBAAiB,aAAa,UAAU,SAAS;AACnD,kBAAU,QAAQ,iBAAiB,MAAM;AACvC,cAAI,eAAe;AACjB,uBAAW,MAAM;AACf,6BAAe,MAAM;AAAA,YACvB,GAAG,GAAG;AAAA,UACR;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,SAAO,EAAE,6BAA6B,GAAG,cAAc;AACzD;",
+  "names": []
+}

package/dist/cjs/useBannerExitAnimation.js

@@ -0,0 +1,66 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useBannerExitAnimation_exports = {};
+__export(useBannerExitAnimation_exports, {
+  useBannerExitAnimation: () => useBannerExitAnimation
+});
+module.exports = __toCommonJS(useBannerExitAnimation_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_constants = require("./constants/index.js");
+const EXIT_FALLBACK_MS = import_constants.BANNER_SLIDE_DURATION_MS + 100;
+const SLIDE_PROPERTY = "grid-template-rows";
+const prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const useBannerExitAnimation = (isOpen) => {
+  const [wasOpen, setWasOpen] = (0, import_react.useState)(isOpen);
+  const [isExiting, setIsExiting] = (0, import_react.useState)(false);
+  if (wasOpen !== isOpen) {
+    setWasOpen(isOpen);
+    setIsExiting(wasOpen && !isOpen && !prefersReducedMotion());
+  }
+  (0, import_react.useEffect)(() => {
+    if (!isExiting) return void 0;
+    const timeoutId = setTimeout(() => setIsExiting(false), EXIT_FALLBACK_MS);
+    return () => clearTimeout(timeoutId);
+  }, [isExiting]);
+  const handleTransitionEnd = (0, import_react.useCallback)((e) => {
+    if (e.target === e.currentTarget && e.propertyName === SLIDE_PROPERTY) setIsExiting(false);
+  }, []);
+  const containerExitProps = (0, import_react.useMemo)(
+    () => isExiting ? { inert: "", "aria-hidden": true, onTransitionEnd: handleTransitionEnd } : {},
+    [isExiting, handleTransitionEnd]
+  );
+  return {
+    isContainerRendered: isOpen || isExiting,
+    containerExitProps,
+    // the live region does not wait for the slide: it remounts (empty) in the same commit that closes the banner
+    liveRegionKey: isOpen ? "open" : "closing"
+  };
+};
+//# sourceMappingURL=useBannerExitAnimation.js.map

package/dist/cjs/useBannerExitAnimation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useBannerExitAnimation.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type React from 'react';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { BANNER_SLIDE_DURATION_MS } from './constants/index.js';\n\n// the css transition is the source of truth for the exit, the timer is the safety net for the cases in which\n//   \"transitionend\" never fires (jsdom, display none ancestor, consumer overriding the transition, interrupted transitions)\nconst EXIT_FALLBACK_MS = BANNER_SLIDE_DURATION_MS + 100;\nconst SLIDE_PROPERTY = 'grid-template-rows';\n\nconst prefersReducedMotion = () =>\n  typeof window !== 'undefined' &&\n  typeof window.matchMedia === 'function' &&\n  window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\ntype ExitProps = React.HTMLAttributes<HTMLDivElement> & { inert?: string };\n\n/**\n * Keeps the banner container mounted while it slides up after `isOpen` turns false.\n * Opening needs no state: the container mounts expanded and the css `@starting-style` slides it down.\n * With `prefers-reduced-motion: reduce` there is no exit phase, the banner is removed right away like it always was.\n */\nexport const useBannerExitAnimation = (isOpen: boolean) => {\n  const [wasOpen, setWasOpen] = useState(isOpen);\n  const [isExiting, setIsExiting] = useState(false);\n\n  // derived during render (not in an effect): the container must still be there in the very commit that closes it,\n  //   otherwise there is no frame in which the transition can run. Re-opening mid exit cancels the exit.\n  if (wasOpen !== isOpen) {\n    setWasOpen(isOpen);\n    setIsExiting(wasOpen && !isOpen && !prefersReducedMotion());\n  }\n\n  // synchronizes with an external system (the timers of the browser) while exiting\n  //   the cleanup runs on re-open, on unmount and when the exit finishes, so the timer can not fire after any of them\n  useEffect(() => {\n    if (!isExiting) return undefined;\n    const timeoutId = setTimeout(() => setIsExiting(false), EXIT_FALLBACK_MS);\n    return () => clearTimeout(timeoutId);\n  }, [isExiting]);\n\n  const handleTransitionEnd = useCallback((e: React.TransitionEvent<HTMLDivElement>) => {\n    if (e.target === e.currentTarget && e.propertyName === SLIDE_PROPERTY) setIsExiting(false);\n  }, []);\n\n  // while sliding up the banner is already closed for everyone: no focus, no pointer, out of the a11y tree\n  const containerExitProps = useMemo<ExitProps>(\n    () => (isExiting ? { inert: '', 'aria-hidden': true, onTransitionEnd: handleTransitionEnd } : {}),\n    [isExiting, handleTransitionEnd],\n  );\n\n  return {\n    isContainerRendered: isOpen || isExiting,\n    containerExitProps,\n    // the live region does not wait for the slide: it remounts (empty) in the same commit that closes the banner\n    liveRegionKey: isOpen ? 'open' : 'closing',\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA0D;AAC1D,uBAAyC;AAIzC,MAAM,mBAAmB,4CAA2B;AACpD,MAAM,iBAAiB;AAEvB,MAAM,uBAAuB,MAC3B,OAAO,WAAW,eAClB,OAAO,OAAO,eAAe,cAC7B,OAAO,WAAW,kCAAkC,EAAE;AASjD,MAAM,yBAAyB,CAAC,WAAoB;AACzD,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,MAAM;AAC7C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAIhD,MAAI,YAAY,QAAQ;AACtB,eAAW,MAAM;AACjB,iBAAa,WAAW,CAAC,UAAU,CAAC,qBAAqB,CAAC;AAAA,EAC5D;AAIA,8BAAU,MAAM;AACd,QAAI,CAAC,UAAW,QAAO;AACvB,UAAM,YAAY,WAAW,MAAM,aAAa,KAAK,GAAG,gBAAgB;AACxE,WAAO,MAAM,aAAa,SAAS;AAAA,EACrC,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,0BAAsB,0BAAY,CAAC,MAA6C;AACpF,QAAI,EAAE,WAAW,EAAE,iBAAiB,EAAE,iBAAiB,eAAgB,cAAa,KAAK;AAAA,EAC3F,GAAG,CAAC,CAAC;AAGL,QAAM,yBAAqB;AAAA,IACzB,MAAO,YAAY,EAAE,OAAO,IAAI,eAAe,MAAM,iBAAiB,oBAAoB,IAAI,CAAC;AAAA,IAC/F,CAAC,WAAW,mBAAmB;AAAA,EACjC;AAEA,SAAO;AAAA,IACL,qBAAqB,UAAU;AAAA,IAC/B;AAAA;AAAA,IAEA,eAAe,SAAS,SAAS;AAAA,EACnC;AACF;",
+  "names": []
+}

package/dist/cjs/usePageNotice.js

@@ -0,0 +1,53 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var usePageNotice_exports = {};
+__export(usePageNotice_exports, {
+  usePageNotice: () => usePageNotice
+});
+module.exports = __toCommonJS(usePageNotice_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_uid = require("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 = (0, import_react.useMemo)(() => bannerId ?? `ds-banner-${(0, import_uid.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 = (0, import_react.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 };
+};
+//# sourceMappingURL=usePageNotice.js.map

package/dist/cjs/usePageNotice.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/usePageNotice.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AACxB,iBAAoB;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,aAAS,sBAAQ,MAAM,YAAY,iBAAa,gBAAI,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,0BAAsB,sBAAgC,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": []
+}