@elliemae/ds-banner 3.52.0-rc.9 → 3.52.0

package/dist/cjs/DSBanner.js

@@ -63,7 +63,7 @@ const DSBanner = (props) => {
   const xstyledAttrs = (0, import_ds_props_helpers.useGetXstyledProps)(rest);
   const innerContainerRef = (0, import_react.useRef)(null);
   const linkRef = (0, import_react.useRef)(null);
-  const [current, setCurrent] = (0, import_react.useState)(isOpen);
+  let { current } = (0, import_react.useRef)(false);
   const [isAnimating, setIsAnimating] = (0, import_react.useState)(false);
   const [height, setHeight] = (0, import_react.useState)(0);
   const [alertTabIndex, setAlertTabIndex] = (0, import_react.useState)(void 0);
@@ -128,7 +128,7 @@ const DSBanner = (props) => {
       onKeyDown: handleOnKeyDownToClose,
       isAnimating,
       onAnimationEnd: () => {
-        setCurrent(isOpen);
+        current = isOpen;
         setIsAnimating(false);
       },
       "data-testid": import_exported_related.DSBannerDatatestid.CONTAINER,
@@ -140,7 +140,8 @@ const DSBanner = (props) => {
         import_styles.StyledInnerContainer,
         {
           cols: innerCols,
-          type,
+          $type: type,
+          "data-type": type,
           isOpen,
           innerRef: innerContainerRef,
           isAnimating,
@@ -190,6 +191,6 @@ const DSBanner = (props) => {
 };
 DSBanner.displayName = import_exported_related.DSBannerName;
 const DSBannerWithSchema = (0, import_ds_props_helpers.describe)(DSBanner);
-DSBannerWithSchema.propTypes = import_react_desc_prop_types.propTypes;
+DSBannerWithSchema.propTypes = import_react_desc_prop_types.DSBannerPropTypesSchema;
 var DSBanner_default = DSBanner;
 //# sourceMappingURL=DSBanner.js.map

package/dist/cjs/DSBanner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSBanner.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { CloseX } from '@elliemae/ds-icons';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { defaultProps, propTypes } from './react-desc-prop-types.js';\nimport {\n  StyledActionLink,\n  StyledBannerContainer,\n  StyledCloseButton,\n  StyledIconContainer,\n  StyledInnerContainer,\n  StyledSubTitle,\n  StyledTitle,\n} from './styles.js';\nimport { icons } from './utils/icons.js';\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBannerT.InternalProps>(props, defaultProps);\n\n  const {\n    type,\n    isOpen,\n    onClose,\n    label,\n    body,\n    closeBtnRef,\n    CustomBody,\n    actionLink,\n    showCloseButton,\n    containerProps,\n    actionRef,\n    ...rest\n  } = propsWithDefaults;\n  // eslint-disable-next-line no-unused-vars\n  const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);\n  const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n\n  const xstyledAttrs = useGetXstyledProps(rest);\n\n  const innerContainerRef = useRef<HTMLDivElement>(null);\n  const linkRef = useRef<HTMLAnchorElement>(null);\n  const [current, setCurrent] = useState<boolean>(isOpen);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n  const [height, setHeight] = useState<number>(0);\n  const [alertTabIndex, setAlertTabIndex] = useState<TypescriptHelpersT.WCAGTabIndex | undefined>(undefined);\n\n  useEffect(() => {\n    if (innerContainerRef.current) {\n      setHeight(innerContainerRef.current.offsetHeight);\n    }\n  }, [isAnimating, isOpen]);\n\n  useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusOnWrapper = () => {\n        if (innerContainerRef.current) {\n          setAlertTabIndex(0);\n          setTimeout(() => {\n            innerContainerRef.current?.focus();\n          }, 300);\n        }\n      };\n      actionRef.current.focusOnLink = () => {\n        if (linkRef.current) {\n          linkRef.current.focus();\n        }\n      };\n    }\n  }, [actionRef]);\n\n  const handleBlur = useCallback(() => {\n    setAlertTabIndex(undefined);\n  }, []);\n\n  const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (linkRef.current) linkRef.current.click();\n    }\n  }, []);\n\n  const handleOnKeyDownToClose = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n      }\n    },\n    [onClose],\n  );\n\n  useLayoutEffect(() => {\n    if (isOpen !== current || isOpen) setIsAnimating(true);\n    else setIsAnimating(false);\n  }, [isOpen, current]);\n\n  const innerCols = React.useMemo(() => {\n    if (!CustomBody) {\n      const finalCols = ['auto', 'fit-content(50%)', '1fr'];\n      if (showCloseButton) finalCols.push('auto');\n      return finalCols;\n    }\n    return ['1fr', 'auto'];\n  }, [CustomBody, showCloseButton]);\n\n  if (!isAnimating && !isOpen) return null;\n\n  return (\n    <StyledBannerContainer\n      isOpen={isOpen}\n      height={height}\n      onKeyDown={handleOnKeyDownToClose}\n      isAnimating={isAnimating}\n      onAnimationEnd={() => {\n        setCurrent(isOpen);\n        setIsAnimating(false);\n      }}\n      data-testid={DSBannerDatatestid.CONTAINER}\n      {...containerProps}\n      {...globalAttrs}\n      {...xstyledAttrs}\n      {...ownerPropsConfig}\n    >\n      <StyledInnerContainer\n        cols={innerCols}\n        type={type}\n        isOpen={isOpen}\n        innerRef={innerContainerRef}\n        isAnimating={isAnimating}\n        data-testid={DSBannerDatatestid.INNER_CONTAINER}\n        role=\"alert\"\n        tabIndex={alertTabIndex}\n        onBlur={handleBlur}\n        {...ownerPropsConfig}\n      >\n        {!CustomBody ? (\n          <>\n            <StyledIconContainer data-testid={DSBannerDatatestid.ICON_CONTAINER} {...ownerPropsConfig}>\n              {icons[type]}\n            </StyledIconContainer>\n            <StyledTitle {...ownerPropsConfig}>{label}</StyledTitle>\n            <StyledSubTitle {...ownerPropsConfig}>\n              <span>{body}</span>\n              {actionLink && (\n                <StyledActionLink\n                  data-testid={DSBannerDatatestid.ACTION_LINK}\n                  onClick={actionLink.onClick}\n                  href={actionLink.href}\n                  innerRef={linkRef}\n                  onKeyDown={handleOnKeyDown}\n                  tabIndex={0}\n                  isBodyEmpty={!body}\n                  title={actionLink.label}\n                  {...ownerPropsConfig}\n                >\n                  {actionLink.label}\n                </StyledActionLink>\n              )}\n            </StyledSubTitle>\n            {showCloseButton ? (\n              <StyledCloseButton\n                data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n                buttonType=\"icon\"\n                innerRef={closeBtnRef}\n                onClick={onClose}\n                aria-label=\"Close icon\"\n                {...ownerPropsConfig}\n              >\n                <CloseX width={12} height={12} />\n              </StyledCloseButton>\n            ) : null}\n          </>\n        ) : (\n          <CustomBody />\n        )}\n      </StyledInnerContainer>\n    </StyledBannerContainer>\n  );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = propTypes;\n\nexport default DSBanner;\nexport { DSBanner, DSBannerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { CloseX } from '@elliemae/ds-icons';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { defaultProps, DSBannerPropTypesSchema } from './react-desc-prop-types.js';\nimport {\n  StyledActionLink,\n  StyledBannerContainer,\n  StyledCloseButton,\n  StyledIconContainer,\n  StyledInnerContainer,\n  StyledSubTitle,\n  StyledTitle,\n} from './styles.js';\nimport { icons } from './utils/icons.js';\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBannerT.InternalProps>(props, defaultProps);\n\n  const {\n    type,\n    isOpen,\n    onClose,\n    label,\n    body,\n    closeBtnRef,\n    CustomBody,\n    actionLink,\n    showCloseButton,\n    containerProps,\n    actionRef,\n    ...rest\n  } = propsWithDefaults;\n  // eslint-disable-next-line no-unused-vars\n  const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);\n  const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n\n  const xstyledAttrs = useGetXstyledProps(rest);\n\n  const innerContainerRef = useRef<HTMLDivElement>(null);\n  const linkRef = useRef<HTMLAnchorElement>(null);\n  let { current } = useRef<boolean>(false);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n  const [height, setHeight] = useState<number>(0);\n  const [alertTabIndex, setAlertTabIndex] = useState<TypescriptHelpersT.WCAGTabIndex | undefined>(undefined);\n\n  useEffect(() => {\n    if (innerContainerRef.current) {\n      setHeight(innerContainerRef.current.offsetHeight);\n    }\n  }, [isAnimating, isOpen]);\n\n  useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusOnWrapper = () => {\n        if (innerContainerRef.current) {\n          setAlertTabIndex(0);\n          setTimeout(() => {\n            innerContainerRef.current?.focus();\n          }, 300);\n        }\n      };\n      actionRef.current.focusOnLink = () => {\n        if (linkRef.current) {\n          linkRef.current.focus();\n        }\n      };\n    }\n  }, [actionRef]);\n\n  const handleBlur = useCallback(() => {\n    setAlertTabIndex(undefined);\n  }, []);\n\n  const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (linkRef.current) linkRef.current.click();\n    }\n  }, []);\n\n  const handleOnKeyDownToClose = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n      }\n    },\n    [onClose],\n  );\n\n  useLayoutEffect(() => {\n    if (isOpen !== current || isOpen) setIsAnimating(true);\n    else setIsAnimating(false);\n  }, [isOpen, current]);\n\n  const innerCols = React.useMemo(() => {\n    if (!CustomBody) {\n      const finalCols = ['auto', 'fit-content(50%)', '1fr'];\n      if (showCloseButton) finalCols.push('auto');\n      return finalCols;\n    }\n    return ['1fr', 'auto'];\n  }, [CustomBody, showCloseButton]);\n\n  if (!isAnimating && !isOpen) return null;\n\n  return (\n    <StyledBannerContainer\n      isOpen={isOpen}\n      height={height}\n      onKeyDown={handleOnKeyDownToClose}\n      isAnimating={isAnimating}\n      onAnimationEnd={() => {\n        current = isOpen;\n        setIsAnimating(false);\n      }}\n      data-testid={DSBannerDatatestid.CONTAINER}\n      {...containerProps}\n      {...globalAttrs}\n      {...xstyledAttrs}\n      {...ownerPropsConfig}\n    >\n      <StyledInnerContainer\n        cols={innerCols}\n        $type={type}\n        data-type={type}\n        isOpen={isOpen}\n        innerRef={innerContainerRef}\n        isAnimating={isAnimating}\n        data-testid={DSBannerDatatestid.INNER_CONTAINER}\n        role=\"alert\"\n        tabIndex={alertTabIndex}\n        onBlur={handleBlur}\n        {...ownerPropsConfig}\n      >\n        {!CustomBody ? (\n          <>\n            <StyledIconContainer data-testid={DSBannerDatatestid.ICON_CONTAINER} {...ownerPropsConfig}>\n              {icons[type]}\n            </StyledIconContainer>\n            <StyledTitle {...ownerPropsConfig}>{label}</StyledTitle>\n            <StyledSubTitle {...ownerPropsConfig}>\n              <span>{body}</span>\n              {actionLink && (\n                <StyledActionLink\n                  data-testid={DSBannerDatatestid.ACTION_LINK}\n                  onClick={actionLink.onClick}\n                  href={actionLink.href}\n                  innerRef={linkRef}\n                  onKeyDown={handleOnKeyDown}\n                  tabIndex={0}\n                  isBodyEmpty={!body}\n                  title={actionLink.label}\n                  {...ownerPropsConfig}\n                >\n                  {actionLink.label}\n                </StyledActionLink>\n              )}\n            </StyledSubTitle>\n            {showCloseButton ? (\n              <StyledCloseButton\n                data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n                buttonType=\"icon\"\n                innerRef={closeBtnRef}\n                onClick={onClose}\n                aria-label=\"Close icon\"\n                {...ownerPropsConfig}\n              >\n                <CloseX width={12} height={12} />\n              </StyledCloseButton>\n            ) : null}\n          </>\n        ) : (\n          <CustomBody />\n        )}\n      </StyledInnerContainer>\n    </StyledBannerContainer>\n  );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = DSBannerPropTypesSchema;\n\nexport default DSBanner;\nexport { DSBanner, DSBannerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkJb;AAjJV,sBAAuB;AACvB,8BAMO;AAEP,mBAAiF;AACjF,8BAAiD;AAEjD,mCAAsD;AACtD,oBAQO;AACP,mBAAsB;AAEtB,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,wBAAoB,sDAAsD,OAAO,yCAAY;AAEnG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,QAAQ,cAAc,GAAG,YAAY,QAAI,gDAAuB,IAAI;AAC5E,QAAM,uBAAmB,uCAAc,mBAAmB,EAAE,GAAG,MAAM,CAAC;AAEtE,QAAM,mBAAe,4CAAmB,IAAI;AAE5C,QAAM,wBAAoB,qBAAuB,IAAI;AACrD,QAAM,cAAU,qBAA0B,IAAI;AAC9C,MAAI,EAAE,QAAQ,QAAI,qBAAgB,KAAK;AACvC,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAkB,KAAK;AAC7D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAiB,CAAC;AAC9C,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAsD,MAAS;AAEzG,8BAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,gBAAU,kBAAkB,QAAQ,YAAY;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,aAAa,MAAM,CAAC;AAExB,8BAAU,MAAM;AACd,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,iBAAiB,MAAM;AACvC,YAAI,kBAAkB,SAAS;AAC7B,2BAAiB,CAAC;AAClB,qBAAW,MAAM;AACf,8BAAkB,SAAS,MAAM;AAAA,UACnC,GAAG,GAAG;AAAA,QACR;AAAA,MACF;AACA,gBAAU,QAAQ,cAAc,MAAM;AACpC,YAAI,QAAQ,SAAS;AACnB,kBAAQ,QAAQ,MAAM;AAAA,QACxB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,iBAAa,0BAAY,MAAM;AACnC,qBAAiB,MAAS;AAAA,EAC5B,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,CAAC,MAA2B;AAC9D,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAe;AACjB,UAAI,QAAQ,QAAS,SAAQ,QAAQ,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,6BAAyB;AAAA,IAC7B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,UAAE,eAAe;AACjB,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,oCAAgB,MAAM;AACpB,QAAI,WAAW,WAAW,OAAQ,gBAAe,IAAI;AAAA,QAChD,gBAAe,KAAK;AAAA,EAC3B,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,QAAM,YAAY,aAAAA,QAAM,QAAQ,MAAM;AACpC,QAAI,CAAC,YAAY;AACf,YAAM,YAAY,CAAC,QAAQ,oBAAoB,KAAK;AACpD,UAAI,gBAAiB,WAAU,KAAK,MAAM;AAC1C,aAAO;AAAA,IACT;AACA,WAAO,CAAC,OAAO,MAAM;AAAA,EACvB,GAAG,CAAC,YAAY,eAAe,CAAC;AAEhC,MAAI,CAAC,eAAe,CAAC,OAAQ,QAAO;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,gBAAgB,MAAM;AACpB,kBAAU;AACV,uBAAe,KAAK;AAAA,MACtB;AAAA,MACA,eAAa,2CAAmB;AAAA,MAC/B,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,OAAO;AAAA,UACP,aAAW;AAAA,UACX;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA,eAAa,2CAAmB;AAAA,UAChC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,QAAQ;AAAA,UACP,GAAG;AAAA,UAEH,WAAC,aACA,4EACE;AAAA,wDAAC,qCAAoB,eAAa,2CAAmB,gBAAiB,GAAG,kBACtE,6BAAM,IAAI,GACb;AAAA,YACA,4CAAC,6BAAa,GAAG,kBAAmB,iBAAM;AAAA,YAC1C,6CAAC,gCAAgB,GAAG,kBAClB;AAAA,0DAAC,UAAM,gBAAK;AAAA,cACX,cACC;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAa,2CAAmB;AAAA,kBAChC,SAAS,WAAW;AAAA,kBACpB,MAAM,WAAW;AAAA,kBACjB,UAAU;AAAA,kBACV,WAAW;AAAA,kBACX,UAAU;AAAA,kBACV,aAAa,CAAC;AAAA,kBACd,OAAO,WAAW;AAAA,kBACjB,GAAG;AAAA,kBAEH,qBAAW;AAAA;AAAA,cACd;AAAA,eAEJ;AAAA,YACC,kBACC;AAAA,cAAC;AAAA;AAAA,gBACC,eAAa,2CAAmB;AAAA,gBAChC,YAAW;AAAA,gBACX,UAAU;AAAA,gBACV,SAAS;AAAA,gBACT,cAAW;AAAA,gBACV,GAAG;AAAA,gBAEJ,sDAAC,0BAAO,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,YACjC,IACE;AAAA,aACN,IAEA,4CAAC,cAAW;AAAA;AAAA,MAEhB;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAE/B,IAAO,mBAAQ;",
   "names": ["React"]
 }

package/dist/cjs/index.js

@@ -5,6 +5,10 @@ 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))
@@ -13,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 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-
@@ -24,8 +27,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
+__export(index_exports, {
+  BANNER_TYPES: () => import_exported_related.BANNER_TYPES,
+  DSBanner: () => import_DSBanner.DSBanner,
+  DSBannerDatatestid: () => import_exported_related.DSBannerDatatestid,
+  DSBannerName: () => import_exported_related.DSBannerName,
+  DSBannerSlots: () => import_exported_related.DSBannerSlots,
+  DSBannerWithSchema: () => import_DSBanner.DSBannerWithSchema
+});
 module.exports = __toCommonJS(index_exports);
 var React = __toESM(require("react"));
-__reExport(index_exports, require("./DSBanner.js"), module.exports);
-__reExport(index_exports, require("./exported-related/index.js"), module.exports);
+var import_DSBanner = require("./DSBanner.js");
+var import_exported_related = require("./exported-related/index.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["// eslint-disable-next-line no-restricted-exports\nexport * from './DSBanner.js';\nexport * from './exported-related/index.js';\nexport type { DSBannerT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAc,0BADd;AAEA,0BAAc,wCAFd;",
+  "sourcesContent": ["// 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,sBAA6C;AAC7C,8BAA8E;",
   "names": []
 }

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

@@ -28,8 +28,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var react_desc_prop_types_exports = {};
 __export(react_desc_prop_types_exports, {
-  defaultProps: () => defaultProps,
-  propTypes: () => propTypes
+  DSBannerPropTypes: () => DSBannerPropTypes,
+  DSBannerPropTypesSchema: () => DSBannerPropTypesSchema,
+  defaultProps: () => defaultProps
 });
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
@@ -44,7 +45,7 @@ const defaultProps = {
   onClose: () => null,
   showCloseButton: true
 };
-const propTypes = {
+const DSBannerPropTypes = {
   ...import_ds_props_helpers.globalAttributesPropTypes,
   ...import_ds_props_helpers.xstyledPropTypes,
   containerProps: import_ds_props_helpers.PropTypes.object.description("Set of Properties attached to the main container.").defaultValue({}),
@@ -69,4 +70,5 @@ const propTypes = {
     `
   ).defaultValue({})
 };
+const DSBannerPropTypesSchema = DSBannerPropTypes;
 //# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { MutableRefObject, RefCallback, WeakValidationMap } from 'react';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from './exported-related/index.js';\n\nexport declare namespace DSBannerT {\n  export interface ActionRef {\n    focusOnWrapper?: () => void;\n    focusOnLink?: () => void;\n  }\n\n  export interface ActionLinkT {\n    label: string;\n    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | null;\n    href?: string;\n  }\n\n  export type BannerTypesT = (typeof BANNER_TYPES)[keyof typeof BANNER_TYPES];\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    label: string;\n    body: string;\n    type: BannerTypesT;\n    isOpen: boolean;\n    onClose: () => void | null;\n    showCloseButton: boolean;\n  }\n\n  export interface OptionalProps {\n    actionLink?: ActionLinkT;\n    CustomBody?: React.ComponentType<Record<string, unknown>>;\n    closeBtnRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n    actionRef?: MutableRefObject<ActionRef>;\n  }\n  export interface Props extends Partial<DefaultProps>, OptionalProps, XstyledProps, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, XstyledProps, RequiredProps {}\n}\n\nexport const defaultProps: DSBannerT.DefaultProps = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: BANNER_TYPES.INFO,\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container.').defaultValue({}),\n  label: PropTypes.string.description('Banner label.').defaultValue(''),\n  body: PropTypes.string.description('Banner body content').defaultValue(''),\n  CustomBody: PropTypes.func.description('Banner custom content').defaultValue(''),\n  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('Banner type.').defaultValue(BANNER_TYPES.INFO),\n  onClose: PropTypes.func.description('Callback when the Banner closes.'),\n  isOpen: PropTypes.bool.description('Whether the Banner is open or closed.').defaultValue(true),\n  showCloseButton: PropTypes.bool.description('Whether to show close button or not.').defaultValue(true),\n  closeBtnRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  actionLink: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    href: PropTypes.string,\n  })\n    .description('Properties for the Action Link.')\n    .defaultValue({}),\n  actionRef: PropTypes.object\n    .description(\n      `\n      Reference to use actions:\n      - focusOnLink: function to focus the banner\n      - focusOnWrapper: function to focus the link\n    `,\n    )\n    .defaultValue({}),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AACvE,8BAA6B;AAuCtB,MAAM,eAAuC;AAAA,EAClD,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,qCAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,kCAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EACjH,OAAO,kCAAU,OAAO,YAAY,eAAe,EAAE,aAAa,EAAE;AAAA,EACpE,MAAM,kCAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,EAAE;AAAA,EACzE,YAAY,kCAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,MAAM,kCAAU,MAAM,OAAO,OAAO,oCAAY,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,qCAAa,IAAI;AAAA,EAC7G,SAAS,kCAAU,KAAK,YAAY,kCAAkC;AAAA,EACtE,QAAQ,kCAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,IAAI;AAAA,EAC7F,iBAAiB,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EACrG,aAAa,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EACjH,YAAY,kCAAU,MAAM;AAAA,IAC1B,OAAO,kCAAU;AAAA,IACjB,SAAS,kCAAU;AAAA,IACnB,MAAM,kCAAU;AAAA,EAClB,CAAC,EACE,YAAY,iCAAiC,EAC7C,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,kCAAU,OAClB;AAAA,IACC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EACC,aAAa,CAAC,CAAC;AACpB;",
+  "sourcesContent": ["import type { MutableRefObject, RefCallback } from 'react';\nimport type { XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from './exported-related/index.js';\n\nexport declare namespace DSBannerT {\n  export interface ActionRef {\n    focusOnWrapper?: () => void;\n    focusOnLink?: () => void;\n  }\n\n  export interface ActionLinkT {\n    label: string;\n    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | null;\n    href?: string;\n  }\n\n  export type BannerTypesT = (typeof BANNER_TYPES)[keyof typeof BANNER_TYPES];\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    label: string;\n    body: string;\n    type: BannerTypesT;\n    isOpen: boolean;\n    onClose: () => void | null;\n    showCloseButton: boolean;\n  }\n\n  export interface OptionalProps {\n    actionLink?: ActionLinkT;\n    CustomBody?: React.ComponentType<Record<string, unknown>>;\n    closeBtnRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n    actionRef?: MutableRefObject<ActionRef>;\n  }\n  export interface Props extends Partial<DefaultProps>, OptionalProps, XstyledProps, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, XstyledProps, RequiredProps {}\n}\n\nexport const defaultProps: DSBannerT.DefaultProps = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: BANNER_TYPES.INFO,\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n};\n\nexport const DSBannerPropTypes: DSPropTypesSchema<DSBannerT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container.').defaultValue({}),\n  label: PropTypes.string.description('Banner label.').defaultValue(''),\n  body: PropTypes.string.description('Banner body content').defaultValue(''),\n  CustomBody: PropTypes.func.description('Banner custom content').defaultValue(''),\n  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('Banner type.').defaultValue(BANNER_TYPES.INFO),\n  onClose: PropTypes.func.description('Callback when the Banner closes.'),\n  isOpen: PropTypes.bool.description('Whether the Banner is open or closed.').defaultValue(true),\n  showCloseButton: PropTypes.bool.description('Whether to show close button or not.').defaultValue(true),\n  closeBtnRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  actionLink: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    href: PropTypes.string,\n  })\n    .description('Properties for the Action Link.')\n    .defaultValue({}),\n  actionRef: PropTypes.object\n    .description(\n      `\n      Reference to use actions:\n      - focusOnLink: function to focus the banner\n      - focusOnWrapper: function to focus the link\n    `,\n    )\n    .defaultValue({}),\n};\n\nexport const DSBannerPropTypesSchema = DSBannerPropTypes as unknown as ValidationMap<DSBannerT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AACvE,8BAA6B;AAuCtB,MAAM,eAAuC;AAAA,EAClD,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,qCAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AACnB;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,kCAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EACjH,OAAO,kCAAU,OAAO,YAAY,eAAe,EAAE,aAAa,EAAE;AAAA,EACpE,MAAM,kCAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,EAAE;AAAA,EACzE,YAAY,kCAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,MAAM,kCAAU,MAAM,OAAO,OAAO,oCAAY,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,qCAAa,IAAI;AAAA,EAC7G,SAAS,kCAAU,KAAK,YAAY,kCAAkC;AAAA,EACtE,QAAQ,kCAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,IAAI;AAAA,EAC7F,iBAAiB,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EACrG,aAAa,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EACjH,YAAY,kCAAU,MAAM;AAAA,IAC1B,OAAO,kCAAU;AAAA,IACjB,SAAS,kCAAU;AAAA,IACnB,MAAM,kCAAU;AAAA,EAClB,CAAC,EACE,YAAY,iCAAiC,EAC7C,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,kCAAU,OAClB;AAAA,IACC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EACC,aAAa,CAAC,CAAC;AACpB;AAEO,MAAM,0BAA0B;",
   "names": []
 }

package/dist/cjs/styles.js

@@ -60,8 +60,9 @@ const StyledInnerContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   min-height: 41px;
   width: 100%;
   background-color: neutral-000;
-  border-bottom: 5px solid ${({ type, theme }) => (0, import_styleHelpers.handleBorderColor)(type, theme)};
+  border-bottom: 5px solid ${({ $type, theme }) => (0, import_styleHelpers.handleBorderColor)($type, theme)};
   transform: translateY(${({ isOpen }) => isOpen ? "0" : "-100%"});
+  transition: transform 0.5s ease-in-out;
   ${({ isAnimating, isOpen }) => (0, import_styleHelpers.handleAnimation)(isAnimating, isOpen)};
 `;
 const StyledIconContainer = (0, import_ds_system.styled)("div", {

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 type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\nimport { DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n  isOpen: boolean;\n  isAnimating: boolean;\n  height: number;\n}\n\ninterface StyledInnerContainerT {\n  type: DSBannerT.BannerTypesT;\n  isOpen: boolean;\n  isAnimating: boolean;\n}\n\ninterface StyledActionLinkT {\n  isBodyEmpty: boolean;\n}\n\nexport const StyledBannerContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n  overflow: ${({ isAnimating }) => (!isAnimating ? 'visible' : 'hidden')};\n  height: ${({ isAnimating, height }) => (!isAnimating ? 'auto' : `${height}px`)};\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledInnerContainer = styled(Grid, {\n  name: DSBannerName,\n  slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n  padding-right: 4px;\n  min-height: 41px;\n  width: 100%;\n  background-color: neutral-000;\n  border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n  transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n`;\n\nexport const StyledIconContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.ICON_CONTAINER,\n})`\n  padding-top: 8px;\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n  min-width: 0px;\n`;\n\nexport const StyledTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n  color: neutral-700;\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  padding-top: 9px;\n  padding-bottom: 9px;\n  font-size: 14px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n  margin-left: ${({ theme }) => theme.space.xs};\n  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  padding-top: 9px;\n  padding-bottom: 6px;\n  font-size: 14px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledActionLink = styled('a', { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })<StyledActionLinkT>`\n  margin-left: ${({ theme, isBodyEmpty }) => (!isBodyEmpty ? theme.space.xs : 0)};\n  text-decoration: none;\n  font-size: 14px;\n  line-height: 14px;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: brand-600;\n  min-width: 0px;\n  position: relative;\n  &:focus {\n    &:after {\n      position: absolute;\n      content: '';\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      border: 2px solid brand-700;\n      pointer-events: none;\n    }\n  }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n  name: DSBannerName,\n  slot: DSBannerSlots.CLOSE_BUTTON,\n})`\n  margin-left: ${({ theme }) => theme.space.xxs};\n  margin-top: 4px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAC3B,qBAAqB;AAErB,uBAA2C;AAG3C,8BAA4C;AAE5C,0BAAmD;AAkB5C,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA,cACa,CAAC,EAAE,YAAY,MAAO,CAAC,cAAc,YAAY,QAAS;AAAA,YAC5D,CAAC,EAAE,aAAa,OAAO,MAAO,CAAC,cAAc,SAAS,GAAG,MAAM,IAAK;AAAA,IAC5E,CAAC,EAAE,aAAa,OAAO,UAAM,qCAAgB,aAAa,MAAM,CAAC;AAAA,IACjE,mCAAkB;AAAA;AAGf,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,6BAK4B,CAAC,EAAE,MAAM,MAAM,UAAM,uCAAkB,MAAM,KAAK,CAAC;AAAA,0BACtD,CAAC,EAAE,OAAO,MAAO,SAAS,MAAM,OAAQ;AAAA,IAC9D,CAAC,EAAE,aAAa,OAAO,UAAM,qCAAgB,aAAa,MAAM,CAAC;AAAA;AAG9D,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,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,MAAM,CAAC;AAAA;AAAA,eAE3E,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,iBACvC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnD,MAAM,qBAAiB,yBAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,SAAS,CAAC;AAAA,iBAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,eAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,SAAS,GAAG,CAAC;AAAA,iBAC1C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlD,MAAM,uBAAmB,yBAAO,KAAK,EAAE,MAAM,sCAAc,MAAM,sCAAc,YAAY,CAAC;AAAA,iBAClF,CAAC,EAAE,OAAO,YAAY,MAAO,CAAC,cAAc,MAAM,MAAM,KAAK,CAAE;AAAA;AAAA;AAAA;AAAA,iBAI/D,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBlD,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA,iBACgB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;",
+  "sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { ColorProps, LayoutProps, SizingProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\nimport { DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n  isOpen: boolean;\n  isAnimating: boolean;\n  height: number;\n}\n\ninterface StyledInnerContainerT {\n  $type: DSBannerT.BannerTypesT;\n  isOpen: boolean;\n  isAnimating: boolean;\n}\n\ninterface StyledActionLinkT {\n  isBodyEmpty: boolean;\n}\n\nexport const StyledBannerContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n  overflow: ${({ isAnimating }) => (!isAnimating ? 'visible' : 'hidden')};\n  height: ${({ isAnimating, height }) => (!isAnimating ? 'auto' : `${height}px`)};\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledInnerContainer = styled(Grid, {\n  name: DSBannerName,\n  slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n  padding-right: 4px;\n  min-height: 41px;\n  width: 100%;\n  background-color: neutral-000;\n  border-bottom: 5px solid ${({ $type, theme }) => handleBorderColor($type, theme)};\n  transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n  transition: transform 0.5s ease-in-out;\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n`;\n\nexport const StyledIconContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.ICON_CONTAINER,\n})`\n  padding-top: 8px;\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n  min-width: 0px;\n`;\n\nexport const StyledTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n  color: neutral-700;\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  padding-top: 9px;\n  padding-bottom: 9px;\n  font-size: 14px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n  margin-left: ${({ theme }) => theme.space.xs};\n  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  padding-top: 9px;\n  padding-bottom: 6px;\n  font-size: 14px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledActionLink = styled('a', { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })<StyledActionLinkT>`\n  margin-left: ${({ theme, isBodyEmpty }) => (!isBodyEmpty ? theme.space.xs : 0)};\n  text-decoration: none;\n  font-size: 14px;\n  line-height: 14px;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: brand-600;\n  min-width: 0px;\n  position: relative;\n  &:focus {\n    &:after {\n      position: absolute;\n      content: '';\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      border: 2px solid brand-700;\n      pointer-events: none;\n    }\n  }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n  name: DSBannerName,\n  slot: DSBannerSlots.CLOSE_BUTTON,\n})`\n  margin-left: ${({ theme }) => theme.space.xxs};\n  margin-top: 4px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAC3B,qBAAqB;AAErB,uBAA2C;AAG3C,8BAA4C;AAE5C,0BAAmD;AAkB5C,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA,cACa,CAAC,EAAE,YAAY,MAAO,CAAC,cAAc,YAAY,QAAS;AAAA,YAC5D,CAAC,EAAE,aAAa,OAAO,MAAO,CAAC,cAAc,SAAS,GAAG,MAAM,IAAK;AAAA,IAC5E,CAAC,EAAE,aAAa,OAAO,UAAM,qCAAgB,aAAa,MAAM,CAAC;AAAA,IACjE,mCAAkB;AAAA;AAGf,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,6BAK4B,CAAC,EAAE,OAAO,MAAM,UAAM,uCAAkB,OAAO,KAAK,CAAC;AAAA,0BACxD,CAAC,EAAE,OAAO,MAAO,SAAS,MAAM,OAAQ;AAAA;AAAA,IAE9D,CAAC,EAAE,aAAa,OAAO,UAAM,qCAAgB,aAAa,MAAM,CAAC;AAAA;AAG9D,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,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,MAAM,CAAC;AAAA;AAAA,eAE3E,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,iBACvC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnD,MAAM,qBAAiB,yBAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,SAAS,CAAC;AAAA,iBAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,eAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,SAAS,GAAG,CAAC;AAAA,iBAC1C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlD,MAAM,uBAAmB,yBAAO,KAAK,EAAE,MAAM,sCAAc,MAAM,sCAAc,YAAY,CAAC;AAAA,iBAClF,CAAC,EAAE,OAAO,YAAY,MAAO,CAAC,cAAc,MAAM,MAAM,KAAK,CAAE;AAAA;AAAA;AAAA;AAAA,iBAI/D,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBlD,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA,iBACgB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/DSBanner.js

@@ -10,7 +10,7 @@ import {
 } from "@elliemae/ds-props-helpers";
 import React2, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { DSBannerDatatestid, DSBannerName } from "./exported-related/index.js";
-import { defaultProps, propTypes } from "./react-desc-prop-types.js";
+import { defaultProps, DSBannerPropTypesSchema } from "./react-desc-prop-types.js";
 import {
   StyledActionLink,
   StyledBannerContainer,
@@ -42,7 +42,7 @@ const DSBanner = (props) => {
   const xstyledAttrs = useGetXstyledProps(rest);
   const innerContainerRef = useRef(null);
   const linkRef = useRef(null);
-  const [current, setCurrent] = useState(isOpen);
+  let { current } = useRef(false);
   const [isAnimating, setIsAnimating] = useState(false);
   const [height, setHeight] = useState(0);
   const [alertTabIndex, setAlertTabIndex] = useState(void 0);
@@ -107,7 +107,7 @@ const DSBanner = (props) => {
       onKeyDown: handleOnKeyDownToClose,
       isAnimating,
       onAnimationEnd: () => {
-        setCurrent(isOpen);
+        current = isOpen;
         setIsAnimating(false);
       },
       "data-testid": DSBannerDatatestid.CONTAINER,
@@ -119,7 +119,8 @@ const DSBanner = (props) => {
         StyledInnerContainer,
         {
           cols: innerCols,
-          type,
+          $type: type,
+          "data-type": type,
           isOpen,
           innerRef: innerContainerRef,
           isAnimating,
@@ -169,7 +170,7 @@ const DSBanner = (props) => {
 };
 DSBanner.displayName = DSBannerName;
 const DSBannerWithSchema = describe(DSBanner);
-DSBannerWithSchema.propTypes = propTypes;
+DSBannerWithSchema.propTypes = DSBannerPropTypesSchema;
 var DSBanner_default = DSBanner;
 export {
   DSBanner,

package/dist/esm/DSBanner.js.map

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

package/dist/esm/index.js

@@ -1,4 +1,12 @@
 import * as React from "react";
-export * from "./DSBanner.js";
-export * from "./exported-related/index.js";
+import { DSBanner, DSBannerWithSchema } from "./DSBanner.js";
+import { DSBannerName, BANNER_TYPES, DSBannerSlots, DSBannerDatatestid } from "./exported-related/index.js";
+export {
+  BANNER_TYPES,
+  DSBanner,
+  DSBannerDatatestid,
+  DSBannerName,
+  DSBannerSlots,
+  DSBannerWithSchema
+};
 //# sourceMappingURL=index.js.map

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 * from './DSBanner.js';\nexport * from './exported-related/index.js';\nexport type { DSBannerT } from './react-desc-prop-types.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,cAAc;AACd,cAAc;",
+  "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,UAAU,0BAA0B;AAC7C,SAAS,cAAc,cAAc,eAAe,0BAA0B;",
   "names": []
 }

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

@@ -10,7 +10,7 @@ const defaultProps = {
   onClose: () => null,
   showCloseButton: true
 };
-const propTypes = {
+const DSBannerPropTypes = {
   ...globalAttributesPropTypes,
   ...xstyledPropTypes,
   containerProps: PropTypes.object.description("Set of Properties attached to the main container.").defaultValue({}),
@@ -35,8 +35,10 @@ const propTypes = {
     `
   ).defaultValue({})
 };
+const DSBannerPropTypesSchema = DSBannerPropTypes;
 export {
-  defaultProps,
-  propTypes
+  DSBannerPropTypes,
+  DSBannerPropTypesSchema,
+  defaultProps
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

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, WeakValidationMap } from 'react';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from './exported-related/index.js';\n\nexport declare namespace DSBannerT {\n  export interface ActionRef {\n    focusOnWrapper?: () => void;\n    focusOnLink?: () => void;\n  }\n\n  export interface ActionLinkT {\n    label: string;\n    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | null;\n    href?: string;\n  }\n\n  export type BannerTypesT = (typeof BANNER_TYPES)[keyof typeof BANNER_TYPES];\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    label: string;\n    body: string;\n    type: BannerTypesT;\n    isOpen: boolean;\n    onClose: () => void | null;\n    showCloseButton: boolean;\n  }\n\n  export interface OptionalProps {\n    actionLink?: ActionLinkT;\n    CustomBody?: React.ComponentType<Record<string, unknown>>;\n    closeBtnRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n    actionRef?: MutableRefObject<ActionRef>;\n  }\n  export interface Props extends Partial<DefaultProps>, OptionalProps, XstyledProps, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, XstyledProps, RequiredProps {}\n}\n\nexport const defaultProps: DSBannerT.DefaultProps = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: BANNER_TYPES.INFO,\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container.').defaultValue({}),\n  label: PropTypes.string.description('Banner label.').defaultValue(''),\n  body: PropTypes.string.description('Banner body content').defaultValue(''),\n  CustomBody: PropTypes.func.description('Banner custom content').defaultValue(''),\n  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('Banner type.').defaultValue(BANNER_TYPES.INFO),\n  onClose: PropTypes.func.description('Callback when the Banner closes.'),\n  isOpen: PropTypes.bool.description('Whether the Banner is open or closed.').defaultValue(true),\n  showCloseButton: PropTypes.bool.description('Whether to show close button or not.').defaultValue(true),\n  closeBtnRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  actionLink: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    href: PropTypes.string,\n  })\n    .description('Properties for the Action Link.')\n    .defaultValue({}),\n  actionRef: PropTypes.object\n    .description(\n      `\n      Reference to use actions:\n      - focusOnLink: function to focus the banner\n      - focusOnWrapper: function to focus the link\n    `,\n    )\n    .defaultValue({}),\n} as WeakValidationMap<unknown>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,oBAAoB;AAuCtB,MAAM,eAAuC;AAAA,EAClD,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,aAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,UAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EACjH,OAAO,UAAU,OAAO,YAAY,eAAe,EAAE,aAAa,EAAE;AAAA,EACpE,MAAM,UAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,EAAE;AAAA,EACzE,YAAY,UAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,MAAM,UAAU,MAAM,OAAO,OAAO,YAAY,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,aAAa,IAAI;AAAA,EAC7G,SAAS,UAAU,KAAK,YAAY,kCAAkC;AAAA,EACtE,QAAQ,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,IAAI;AAAA,EAC7F,iBAAiB,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EACrG,aAAa,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EACjH,YAAY,UAAU,MAAM;AAAA,IAC1B,OAAO,UAAU;AAAA,IACjB,SAAS,UAAU;AAAA,IACnB,MAAM,UAAU;AAAA,EAClB,CAAC,EACE,YAAY,iCAAiC,EAC7C,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,UAAU,OAClB;AAAA,IACC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EACC,aAAa,CAAC,CAAC;AACpB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { MutableRefObject, RefCallback } from 'react';\nimport type { XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from './exported-related/index.js';\n\nexport declare namespace DSBannerT {\n  export interface ActionRef {\n    focusOnWrapper?: () => void;\n    focusOnLink?: () => void;\n  }\n\n  export interface ActionLinkT {\n    label: string;\n    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | null;\n    href?: string;\n  }\n\n  export type BannerTypesT = (typeof BANNER_TYPES)[keyof typeof BANNER_TYPES];\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    label: string;\n    body: string;\n    type: BannerTypesT;\n    isOpen: boolean;\n    onClose: () => void | null;\n    showCloseButton: boolean;\n  }\n\n  export interface OptionalProps {\n    actionLink?: ActionLinkT;\n    CustomBody?: React.ComponentType<Record<string, unknown>>;\n    closeBtnRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n    actionRef?: MutableRefObject<ActionRef>;\n  }\n  export interface Props extends Partial<DefaultProps>, OptionalProps, XstyledProps, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, XstyledProps, RequiredProps {}\n}\n\nexport const defaultProps: DSBannerT.DefaultProps = {\n  containerProps: {},\n  label: '',\n  body: '',\n  type: BANNER_TYPES.INFO,\n  isOpen: true,\n  onClose: () => null,\n  showCloseButton: true,\n};\n\nexport const DSBannerPropTypes: DSPropTypesSchema<DSBannerT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container.').defaultValue({}),\n  label: PropTypes.string.description('Banner label.').defaultValue(''),\n  body: PropTypes.string.description('Banner body content').defaultValue(''),\n  CustomBody: PropTypes.func.description('Banner custom content').defaultValue(''),\n  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('Banner type.').defaultValue(BANNER_TYPES.INFO),\n  onClose: PropTypes.func.description('Callback when the Banner closes.'),\n  isOpen: PropTypes.bool.description('Whether the Banner is open or closed.').defaultValue(true),\n  showCloseButton: PropTypes.bool.description('Whether to show close button or not.').defaultValue(true),\n  closeBtnRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  actionLink: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    href: PropTypes.string,\n  })\n    .description('Properties for the Action Link.')\n    .defaultValue({}),\n  actionRef: PropTypes.object\n    .description(\n      `\n      Reference to use actions:\n      - focusOnLink: function to focus the banner\n      - focusOnWrapper: function to focus the link\n    `,\n    )\n    .defaultValue({}),\n};\n\nexport const DSBannerPropTypesSchema = DSBannerPropTypes as unknown as ValidationMap<DSBannerT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,oBAAoB;AAuCtB,MAAM,eAAuC;AAAA,EAClD,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,aAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AACnB;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,UAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EACjH,OAAO,UAAU,OAAO,YAAY,eAAe,EAAE,aAAa,EAAE;AAAA,EACpE,MAAM,UAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,EAAE;AAAA,EACzE,YAAY,UAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,MAAM,UAAU,MAAM,OAAO,OAAO,YAAY,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,aAAa,IAAI;AAAA,EAC7G,SAAS,UAAU,KAAK,YAAY,kCAAkC;AAAA,EACtE,QAAQ,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,IAAI;AAAA,EAC7F,iBAAiB,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EACrG,aAAa,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EACjH,YAAY,UAAU,MAAM;AAAA,IAC1B,OAAO,UAAU;AAAA,IACjB,SAAS,UAAU;AAAA,IACnB,MAAM,UAAU;AAAA,EAClB,CAAC,EACE,YAAY,iCAAiC,EAC7C,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,UAAU,OAClB;AAAA,IACC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EACC,aAAa,CAAC,CAAC;AACpB;AAEO,MAAM,0BAA0B;",
   "names": []
 }

package/dist/esm/styles.js

@@ -21,8 +21,9 @@ const StyledInnerContainer = styled(Grid, {
   min-height: 41px;
   width: 100%;
   background-color: neutral-000;
-  border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};
+  border-bottom: 5px solid ${({ $type, theme }) => handleBorderColor($type, theme)};
   transform: translateY(${({ isOpen }) => isOpen ? "0" : "-100%"});
+  transition: transform 0.5s ease-in-out;
   ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};
 `;
 const StyledIconContainer = styled("div", {

package/dist/esm/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { ColorProps, LayoutProps, SizingProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\nimport { DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n  isOpen: boolean;\n  isAnimating: boolean;\n  height: number;\n}\n\ninterface StyledInnerContainerT {\n  type: DSBannerT.BannerTypesT;\n  isOpen: boolean;\n  isAnimating: boolean;\n}\n\ninterface StyledActionLinkT {\n  isBodyEmpty: boolean;\n}\n\nexport const StyledBannerContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n  overflow: ${({ isAnimating }) => (!isAnimating ? 'visible' : 'hidden')};\n  height: ${({ isAnimating, height }) => (!isAnimating ? 'auto' : `${height}px`)};\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledInnerContainer = styled(Grid, {\n  name: DSBannerName,\n  slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n  padding-right: 4px;\n  min-height: 41px;\n  width: 100%;\n  background-color: neutral-000;\n  border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n  transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n`;\n\nexport const StyledIconContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.ICON_CONTAINER,\n})`\n  padding-top: 8px;\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n  min-width: 0px;\n`;\n\nexport const StyledTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n  color: neutral-700;\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  padding-top: 9px;\n  padding-bottom: 9px;\n  font-size: 14px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n  margin-left: ${({ theme }) => theme.space.xs};\n  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  padding-top: 9px;\n  padding-bottom: 6px;\n  font-size: 14px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledActionLink = styled('a', { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })<StyledActionLinkT>`\n  margin-left: ${({ theme, isBodyEmpty }) => (!isBodyEmpty ? theme.space.xs : 0)};\n  text-decoration: none;\n  font-size: 14px;\n  line-height: 14px;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: brand-600;\n  min-width: 0px;\n  position: relative;\n  &:focus {\n    &:after {\n      position: absolute;\n      content: '';\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      border: 2px solid brand-700;\n      pointer-events: none;\n    }\n  }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n  name: DSBannerName,\n  slot: DSBannerSlots.CLOSE_BUTTON,\n})`\n  margin-left: ${({ theme }) => theme.space.xxs};\n  margin-top: 4px;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAErB,SAAS,QAAQ,0BAA0B;AAG3C,SAAS,cAAc,qBAAqB;AAE5C,SAAS,iBAAiB,yBAAyB;AAkB5C,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,cACa,CAAC,EAAE,YAAY,MAAO,CAAC,cAAc,YAAY,QAAS;AAAA,YAC5D,CAAC,EAAE,aAAa,OAAO,MAAO,CAAC,cAAc,SAAS,GAAG,MAAM,IAAK;AAAA,IAC5E,CAAC,EAAE,aAAa,OAAO,MAAM,gBAAgB,aAAa,MAAM,CAAC;AAAA,IACjE,kBAAkB;AAAA;AAGf,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,6BAK4B,CAAC,EAAE,MAAM,MAAM,MAAM,kBAAkB,MAAM,KAAK,CAAC;AAAA,0BACtD,CAAC,EAAE,OAAO,MAAO,SAAS,MAAM,OAAQ;AAAA,IAC9D,CAAC,EAAE,aAAa,OAAO,MAAM,gBAAgB,aAAa,MAAM,CAAC;AAAA;AAG9D,MAAM,sBAAsB,OAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA,kBAEiB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA,iBAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAIvC,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,CAAC;AAAA;AAAA,eAE3E,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,iBACvC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnD,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,SAAS,CAAC;AAAA,iBAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,eAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,SAAS,GAAG,CAAC;AAAA,iBAC1C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlD,MAAM,mBAAmB,OAAO,KAAK,EAAE,MAAM,cAAc,MAAM,cAAc,YAAY,CAAC;AAAA,iBAClF,CAAC,EAAE,OAAO,YAAY,MAAO,CAAC,cAAc,MAAM,MAAM,KAAK,CAAE;AAAA;AAAA;AAAA;AAAA,iBAI/D,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBlD,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,iBACgB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { ColorProps, LayoutProps, SizingProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\nimport { DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n  isOpen: boolean;\n  isAnimating: boolean;\n  height: number;\n}\n\ninterface StyledInnerContainerT {\n  $type: DSBannerT.BannerTypesT;\n  isOpen: boolean;\n  isAnimating: boolean;\n}\n\ninterface StyledActionLinkT {\n  isBodyEmpty: boolean;\n}\n\nexport const StyledBannerContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n  overflow: ${({ isAnimating }) => (!isAnimating ? 'visible' : 'hidden')};\n  height: ${({ isAnimating, height }) => (!isAnimating ? 'auto' : `${height}px`)};\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledInnerContainer = styled(Grid, {\n  name: DSBannerName,\n  slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n  padding-right: 4px;\n  min-height: 41px;\n  width: 100%;\n  background-color: neutral-000;\n  border-bottom: 5px solid ${({ $type, theme }) => handleBorderColor($type, theme)};\n  transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n  transition: transform 0.5s ease-in-out;\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n`;\n\nexport const StyledIconContainer = styled('div', {\n  name: DSBannerName,\n  slot: DSBannerSlots.ICON_CONTAINER,\n})`\n  padding-top: 8px;\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n  min-width: 0px;\n`;\n\nexport const StyledTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n  color: neutral-700;\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  padding-top: 9px;\n  padding-bottom: 9px;\n  font-size: 14px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n  margin-left: ${({ theme }) => theme.space.xs};\n  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  padding-top: 9px;\n  padding-bottom: 6px;\n  font-size: 14px;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  min-width: 0px;\n`;\n\nexport const StyledActionLink = styled('a', { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })<StyledActionLinkT>`\n  margin-left: ${({ theme, isBodyEmpty }) => (!isBodyEmpty ? theme.space.xs : 0)};\n  text-decoration: none;\n  font-size: 14px;\n  line-height: 14px;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: brand-600;\n  min-width: 0px;\n  position: relative;\n  &:focus {\n    &:after {\n      position: absolute;\n      content: '';\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      border: 2px solid brand-700;\n      pointer-events: none;\n    }\n  }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n  name: DSBannerName,\n  slot: DSBannerSlots.CLOSE_BUTTON,\n})`\n  margin-left: ${({ theme }) => theme.space.xxs};\n  margin-top: 4px;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAErB,SAAS,QAAQ,0BAA0B;AAG3C,SAAS,cAAc,qBAAqB;AAE5C,SAAS,iBAAiB,yBAAyB;AAkB5C,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,cACa,CAAC,EAAE,YAAY,MAAO,CAAC,cAAc,YAAY,QAAS;AAAA,YAC5D,CAAC,EAAE,aAAa,OAAO,MAAO,CAAC,cAAc,SAAS,GAAG,MAAM,IAAK;AAAA,IAC5E,CAAC,EAAE,aAAa,OAAO,MAAM,gBAAgB,aAAa,MAAM,CAAC;AAAA,IACjE,kBAAkB;AAAA;AAGf,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,6BAK4B,CAAC,EAAE,OAAO,MAAM,MAAM,kBAAkB,OAAO,KAAK,CAAC;AAAA,0BACxD,CAAC,EAAE,OAAO,MAAO,SAAS,MAAM,OAAQ;AAAA;AAAA,IAE9D,CAAC,EAAE,aAAa,OAAO,MAAM,gBAAgB,aAAa,MAAM,CAAC;AAAA;AAG9D,MAAM,sBAAsB,OAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA,kBAEiB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA,iBAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAIvC,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,CAAC;AAAA;AAAA,eAE3E,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,iBACvC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnD,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,SAAS,CAAC;AAAA,iBAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,eAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,SAAS,GAAG,CAAC;AAAA,iBAC1C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlD,MAAM,mBAAmB,OAAO,KAAK,EAAE,MAAM,cAAc,MAAM,cAAc,YAAY,CAAC;AAAA,iBAClF,CAAC,EAAE,OAAO,YAAY,MAAO,CAAC,cAAc,MAAM,MAAM,KAAK,CAAE;AAAA;AAAA;AAAA;AAAA,iBAI/D,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBlD,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,iBACgB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;",
   "names": []
 }

package/dist/types/index.d.ts

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

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

@@ -1,5 +1,6 @@
-import type { MutableRefObject, RefCallback, WeakValidationMap } from 'react';
-import type { XstyledProps } from '@elliemae/ds-props-helpers';
+/// <reference types="prop-types" />
+import type { MutableRefObject, RefCallback } from 'react';
+import type { XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';
 import { BANNER_TYPES } from './exported-related/index.js';
 export declare namespace DSBannerT {
     interface ActionRef {
@@ -35,4 +36,5 @@ export declare namespace DSBannerT {
     }
 }
 export declare const defaultProps: DSBannerT.DefaultProps;
-export declare const propTypes: WeakValidationMap<unknown>;
+export declare const DSBannerPropTypes: DSPropTypesSchema<DSBannerT.Props>;
+export declare const DSBannerPropTypesSchema: ValidationMap<DSBannerT.Props>;

package/dist/types/styles.d.ts

@@ -7,7 +7,7 @@ interface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, C
     height: number;
 }
 interface StyledInnerContainerT {
-    type: DSBannerT.BannerTypesT;
+    $type: DSBannerT.BannerTypesT;
     isOpen: boolean;
     isAnimating: boolean;
 }

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

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

package/dist/types/tests/DSBanner.data-testid.test.d.ts

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-banner",
-  "version": "3.52.0-rc.9",
+  "version": "3.52.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Banner",
   "files": [
@@ -38,21 +38,21 @@
   "dependencies": {
     "@xstyled/system": "~3.7.3",
     "@xstyled/util": "~3.7.0",
-    "@elliemae/ds-grid": "3.52.0-rc.9",
-    "@elliemae/ds-props-helpers": "3.52.0-rc.9",
-    "@elliemae/ds-button-v2": "3.52.0-rc.9",
-    "@elliemae/ds-icons": "3.52.0-rc.9",
-    "@elliemae/ds-typescript-helpers": "3.52.0-rc.9",
-    "@elliemae/ds-system": "3.52.0-rc.9"
+    "@elliemae/ds-button-v2": "3.52.0",
+    "@elliemae/ds-icons": "3.52.0",
+    "@elliemae/ds-grid": "3.52.0",
+    "@elliemae/ds-system": "3.52.0",
+    "@elliemae/ds-props-helpers": "3.52.0",
+    "@elliemae/ds-typescript-helpers": "3.52.0"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "9.0.0-next.55",
+    "@elliemae/pui-cli": "9.0.0-next.63",
     "jest": "~29.7.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.52.0-rc.9"
+    "@elliemae/ds-monorepo-devops": "3.52.0"
   },
   "peerDependencies": {
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "styled-components": "~5.3.9"