@yahoo/uds-mobile 2.5.0 → 2.6.0

package/dist/components/Banner/BannerDescription.cjs

@@ -0,0 +1,46 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_components_Text = require('../Text.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../../generated/styles");
+
+//#region src/components/Banner/BannerDescription.tsx
+/**
+* **Styled description for use inside `BannerContent`.**
+*
+* @description
+* Applies the Banner description typography tokens and truncates to 3 lines
+* via `numberOfLines={3}`. Use this subcomponent instead of the `description`
+* prop when you need rich ReactNode content.
+*
+* @platform mobile
+*
+* @example
+* ```tsx
+* <Banner variant="alert" startIcon="Error">
+*   <BannerContent>
+*     <BannerTitle>Something went wrong</BannerTitle>
+*     <BannerDescription>
+*       Please try again or contact support for help.
+*     </BannerDescription>
+*   </BannerContent>
+* </Banner>
+* ```
+*
+* @see {@link Banner} for the parent component
+* @see {@link BannerContent} for the required wrapper
+*/
+const BannerDescription = (0, react.memo)(function BannerDescription({ children }) {
+	generated_styles.bannerStyles.useVariants({});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+		numberOfLines: 3,
+		style: generated_styles.bannerStyles.description,
+		children
+	});
+});
+BannerDescription.displayName = "BannerDescription";
+
+//#endregion
+exports.BannerDescription = BannerDescription;

package/dist/components/Banner/BannerDescription.d.cts

@@ -0,0 +1,37 @@
+
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/Banner/BannerDescription.d.ts
+interface BannerDescriptionProps {
+  children: ReactNode;
+}
+/**
+ * **Styled description for use inside `BannerContent`.**
+ *
+ * @description
+ * Applies the Banner description typography tokens and truncates to 3 lines
+ * via `numberOfLines={3}`. Use this subcomponent instead of the `description`
+ * prop when you need rich ReactNode content.
+ *
+ * @platform mobile
+ *
+ * @example
+ * ```tsx
+ * <Banner variant="alert" startIcon="Error">
+ *   <BannerContent>
+ *     <BannerTitle>Something went wrong</BannerTitle>
+ *     <BannerDescription>
+ *       Please try again or contact support for help.
+ *     </BannerDescription>
+ *   </BannerContent>
+ * </Banner>
+ * ```
+ *
+ * @see {@link Banner} for the parent component
+ * @see {@link BannerContent} for the required wrapper
+ */
+declare const BannerDescription: react.NamedExoticComponent<BannerDescriptionProps>;
+//#endregion
+export { BannerDescription, type BannerDescriptionProps };
+//# sourceMappingURL=BannerDescription.d.cts.map

package/dist/components/Banner/BannerDescription.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerDescription.d.cts","names":[],"sources":["../../../src/components/Banner/BannerDescription.tsx"],"mappings":";;;;;UAMU,sBAAA;EACR,QAAA,EAAU,SAAA;AAAA;AAP2B;;;;;AAOlB;;;;;;;;;;;;;;;;;;;;AAPkB,cAmCjC,iBAAA,EAAiB,KAAA,CAAA,oBAAA,CAAA,sBAAA"}

package/dist/components/Banner/BannerDescription.d.ts

@@ -0,0 +1,37 @@
+
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/Banner/BannerDescription.d.ts
+interface BannerDescriptionProps {
+  children: ReactNode;
+}
+/**
+ * **Styled description for use inside `BannerContent`.**
+ *
+ * @description
+ * Applies the Banner description typography tokens and truncates to 3 lines
+ * via `numberOfLines={3}`. Use this subcomponent instead of the `description`
+ * prop when you need rich ReactNode content.
+ *
+ * @platform mobile
+ *
+ * @example
+ * ```tsx
+ * <Banner variant="alert" startIcon="Error">
+ *   <BannerContent>
+ *     <BannerTitle>Something went wrong</BannerTitle>
+ *     <BannerDescription>
+ *       Please try again or contact support for help.
+ *     </BannerDescription>
+ *   </BannerContent>
+ * </Banner>
+ * ```
+ *
+ * @see {@link Banner} for the parent component
+ * @see {@link BannerContent} for the required wrapper
+ */
+declare const BannerDescription: react.NamedExoticComponent<BannerDescriptionProps>;
+//#endregion
+export { BannerDescription, type BannerDescriptionProps };
+//# sourceMappingURL=BannerDescription.d.ts.map

package/dist/components/Banner/BannerDescription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerDescription.d.ts","names":[],"sources":["../../../src/components/Banner/BannerDescription.tsx"],"mappings":";;;;;UAMU,sBAAA;EACR,QAAA,EAAU,SAAA;AAAA;AAP2B;;;;;AAOlB;;;;;;;;;;;;;;;;;;;;AAPkB,cAmCjC,iBAAA,EAAiB,KAAA,CAAA,oBAAA,CAAA,sBAAA"}

package/dist/components/Banner/BannerDescription.js

@@ -0,0 +1,45 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { Text } from "../Text.js";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { bannerStyles } from "../../../generated/styles";
+
+//#region src/components/Banner/BannerDescription.tsx
+/**
+* **Styled description for use inside `BannerContent`.**
+*
+* @description
+* Applies the Banner description typography tokens and truncates to 3 lines
+* via `numberOfLines={3}`. Use this subcomponent instead of the `description`
+* prop when you need rich ReactNode content.
+*
+* @platform mobile
+*
+* @example
+* ```tsx
+* <Banner variant="alert" startIcon="Error">
+*   <BannerContent>
+*     <BannerTitle>Something went wrong</BannerTitle>
+*     <BannerDescription>
+*       Please try again or contact support for help.
+*     </BannerDescription>
+*   </BannerContent>
+* </Banner>
+* ```
+*
+* @see {@link Banner} for the parent component
+* @see {@link BannerContent} for the required wrapper
+*/
+const BannerDescription = memo(function BannerDescription({ children }) {
+	bannerStyles.useVariants({});
+	return /* @__PURE__ */ jsx(Text, {
+		numberOfLines: 3,
+		style: bannerStyles.description,
+		children
+	});
+});
+BannerDescription.displayName = "BannerDescription";
+
+//#endregion
+export { BannerDescription };
+//# sourceMappingURL=BannerDescription.js.map

package/dist/components/Banner/BannerDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerDescription.js","names":[],"sources":["../../../src/components/Banner/BannerDescription.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { memo } from 'react';\n\nimport { bannerStyles } from '../../../generated/styles';\nimport { Text } from '../Text';\n\ninterface BannerDescriptionProps {\n  children: ReactNode;\n}\n\n/**\n * **Styled description for use inside `BannerContent`.**\n *\n * @description\n * Applies the Banner description typography tokens and truncates to 3 lines\n * via `numberOfLines={3}`. Use this subcomponent instead of the `description`\n * prop when you need rich ReactNode content.\n *\n * @platform mobile\n *\n * @example\n * ```tsx\n * <Banner variant=\"alert\" startIcon=\"Error\">\n *   <BannerContent>\n *     <BannerTitle>Something went wrong</BannerTitle>\n *     <BannerDescription>\n *       Please try again or contact support for help.\n *     </BannerDescription>\n *   </BannerContent>\n * </Banner>\n * ```\n *\n * @see {@link Banner} for the parent component\n * @see {@link BannerContent} for the required wrapper\n */\nconst BannerDescription = memo(function BannerDescription({ children }: BannerDescriptionProps) {\n  bannerStyles.useVariants({});\n\n  return (\n    <Text numberOfLines={3} style={bannerStyles.description}>\n      {children}\n    </Text>\n  );\n});\n\nBannerDescription.displayName = 'BannerDescription';\n\nexport { BannerDescription, type BannerDescriptionProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAM,oBAAoB,KAAK,SAAS,kBAAkB,EAAE,YAAoC;AAC9F,cAAa,YAAY,EAAE,CAAC;AAE5B,QACE,oBAAC;EAAK,eAAe;EAAG,OAAO,aAAa;EACzC;GACI;EAET;AAEF,kBAAkB,cAAc"}

package/dist/components/Banner/BannerTitle.cjs

@@ -0,0 +1,44 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_components_Text = require('../Text.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../../generated/styles");
+
+//#region src/components/Banner/BannerTitle.tsx
+/**
+* **Styled title for use inside `BannerContent`.**
+*
+* @description
+* Applies the Banner title typography tokens. Renders a single line of text.
+* Use this subcomponent instead of the `title` prop when you need rich
+* ReactNode content (e.g. bold segments, inline icons).
+*
+* @platform mobile
+*
+* @example
+* ```tsx
+* <Banner variant="info" startIcon="Info">
+*   <BannerContent>
+*     <BannerTitle>Update available</BannerTitle>
+*     <BannerDescription>A new version is ready to install.</BannerDescription>
+*   </BannerContent>
+* </Banner>
+* ```
+*
+* @see {@link Banner} for the parent component
+* @see {@link BannerContent} for the required wrapper
+*/
+const BannerTitle = (0, react.memo)(function BannerTitle({ children }) {
+	generated_styles.bannerStyles.useVariants({});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+		numberOfLines: 1,
+		style: generated_styles.bannerStyles.title,
+		children
+	});
+});
+BannerTitle.displayName = "BannerTitle";
+
+//#endregion
+exports.BannerTitle = BannerTitle;

package/dist/components/Banner/BannerTitle.d.cts

@@ -0,0 +1,35 @@
+
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/Banner/BannerTitle.d.ts
+interface BannerTitleProps {
+  children: ReactNode;
+}
+/**
+ * **Styled title for use inside `BannerContent`.**
+ *
+ * @description
+ * Applies the Banner title typography tokens. Renders a single line of text.
+ * Use this subcomponent instead of the `title` prop when you need rich
+ * ReactNode content (e.g. bold segments, inline icons).
+ *
+ * @platform mobile
+ *
+ * @example
+ * ```tsx
+ * <Banner variant="info" startIcon="Info">
+ *   <BannerContent>
+ *     <BannerTitle>Update available</BannerTitle>
+ *     <BannerDescription>A new version is ready to install.</BannerDescription>
+ *   </BannerContent>
+ * </Banner>
+ * ```
+ *
+ * @see {@link Banner} for the parent component
+ * @see {@link BannerContent} for the required wrapper
+ */
+declare const BannerTitle: react.NamedExoticComponent<BannerTitleProps>;
+//#endregion
+export { BannerTitle, type BannerTitleProps };
+//# sourceMappingURL=BannerTitle.d.cts.map

package/dist/components/Banner/BannerTitle.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerTitle.d.cts","names":[],"sources":["../../../src/components/Banner/BannerTitle.tsx"],"mappings":";;;;;UAMU,gBAAA;EACR,QAAA,EAAU,SAAA;AAAA;AAP2B;;;;;AAOlB;;;;;;;;;;;;;;;;;;AAPkB,cAiCjC,WAAA,EAAW,KAAA,CAAA,oBAAA,CAAA,gBAAA"}

package/dist/components/Banner/BannerTitle.d.ts

@@ -0,0 +1,35 @@
+
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/Banner/BannerTitle.d.ts
+interface BannerTitleProps {
+  children: ReactNode;
+}
+/**
+ * **Styled title for use inside `BannerContent`.**
+ *
+ * @description
+ * Applies the Banner title typography tokens. Renders a single line of text.
+ * Use this subcomponent instead of the `title` prop when you need rich
+ * ReactNode content (e.g. bold segments, inline icons).
+ *
+ * @platform mobile
+ *
+ * @example
+ * ```tsx
+ * <Banner variant="info" startIcon="Info">
+ *   <BannerContent>
+ *     <BannerTitle>Update available</BannerTitle>
+ *     <BannerDescription>A new version is ready to install.</BannerDescription>
+ *   </BannerContent>
+ * </Banner>
+ * ```
+ *
+ * @see {@link Banner} for the parent component
+ * @see {@link BannerContent} for the required wrapper
+ */
+declare const BannerTitle: react.NamedExoticComponent<BannerTitleProps>;
+//#endregion
+export { BannerTitle, type BannerTitleProps };
+//# sourceMappingURL=BannerTitle.d.ts.map

package/dist/components/Banner/BannerTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerTitle.d.ts","names":[],"sources":["../../../src/components/Banner/BannerTitle.tsx"],"mappings":";;;;;UAMU,gBAAA;EACR,QAAA,EAAU,SAAA;AAAA;AAP2B;;;;;AAOlB;;;;;;;;;;;;;;;;;;AAPkB,cAiCjC,WAAA,EAAW,KAAA,CAAA,oBAAA,CAAA,gBAAA"}

package/dist/components/Banner/BannerTitle.js

@@ -0,0 +1,43 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { Text } from "../Text.js";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { bannerStyles } from "../../../generated/styles";
+
+//#region src/components/Banner/BannerTitle.tsx
+/**
+* **Styled title for use inside `BannerContent`.**
+*
+* @description
+* Applies the Banner title typography tokens. Renders a single line of text.
+* Use this subcomponent instead of the `title` prop when you need rich
+* ReactNode content (e.g. bold segments, inline icons).
+*
+* @platform mobile
+*
+* @example
+* ```tsx
+* <Banner variant="info" startIcon="Info">
+*   <BannerContent>
+*     <BannerTitle>Update available</BannerTitle>
+*     <BannerDescription>A new version is ready to install.</BannerDescription>
+*   </BannerContent>
+* </Banner>
+* ```
+*
+* @see {@link Banner} for the parent component
+* @see {@link BannerContent} for the required wrapper
+*/
+const BannerTitle = memo(function BannerTitle({ children }) {
+	bannerStyles.useVariants({});
+	return /* @__PURE__ */ jsx(Text, {
+		numberOfLines: 1,
+		style: bannerStyles.title,
+		children
+	});
+});
+BannerTitle.displayName = "BannerTitle";
+
+//#endregion
+export { BannerTitle };
+//# sourceMappingURL=BannerTitle.js.map

package/dist/components/Banner/BannerTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerTitle.js","names":[],"sources":["../../../src/components/Banner/BannerTitle.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { memo } from 'react';\n\nimport { bannerStyles } from '../../../generated/styles';\nimport { Text } from '../Text';\n\ninterface BannerTitleProps {\n  children: ReactNode;\n}\n\n/**\n * **Styled title for use inside `BannerContent`.**\n *\n * @description\n * Applies the Banner title typography tokens. Renders a single line of text.\n * Use this subcomponent instead of the `title` prop when you need rich\n * ReactNode content (e.g. bold segments, inline icons).\n *\n * @platform mobile\n *\n * @example\n * ```tsx\n * <Banner variant=\"info\" startIcon=\"Info\">\n *   <BannerContent>\n *     <BannerTitle>Update available</BannerTitle>\n *     <BannerDescription>A new version is ready to install.</BannerDescription>\n *   </BannerContent>\n * </Banner>\n * ```\n *\n * @see {@link Banner} for the parent component\n * @see {@link BannerContent} for the required wrapper\n */\nconst BannerTitle = memo(function BannerTitle({ children }: BannerTitleProps) {\n  bannerStyles.useVariants({});\n\n  return (\n    <Text numberOfLines={1} style={bannerStyles.title}>\n      {children}\n    </Text>\n  );\n});\n\nBannerTitle.displayName = 'BannerTitle';\n\nexport { BannerTitle, type BannerTitleProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,cAAc,KAAK,SAAS,YAAY,EAAE,YAA8B;AAC5E,cAAa,YAAY,EAAE,CAAC;AAE5B,QACE,oBAAC;EAAK,eAAe;EAAG,OAAO,aAAa;EACzC;GACI;EAET;AAEF,YAAY,cAAc"}

package/dist/components/Banner/index.cjs

@@ -0,0 +1,11 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_components_Banner_Banner = require('./Banner.cjs');
+const require_components_Banner_BannerContent = require('./BannerContent.cjs');
+const require_components_Banner_BannerDescription = require('./BannerDescription.cjs');
+const require_components_Banner_BannerTitle = require('./BannerTitle.cjs');
+
+exports.Banner = require_components_Banner_Banner.Banner;
+exports.BannerContent = require_components_Banner_BannerContent.BannerContent;
+exports.BannerDescription = require_components_Banner_BannerDescription.BannerDescription;
+exports.BannerTitle = require_components_Banner_BannerTitle.BannerTitle;

package/dist/components/Banner/index.d.cts

@@ -0,0 +1,6 @@
+
+import { Banner, BannerProps } from "./Banner.cjs";
+import { BannerContent, BannerContentProps } from "./BannerContent.cjs";
+import { BannerDescription, BannerDescriptionProps } from "./BannerDescription.cjs";
+import { BannerTitle, BannerTitleProps } from "./BannerTitle.cjs";
+export { Banner, BannerContent, type BannerContentProps, BannerDescription, type BannerDescriptionProps, type BannerProps, BannerTitle, type BannerTitleProps };

package/dist/components/Banner/index.d.ts

@@ -0,0 +1,6 @@
+
+import { Banner, BannerProps } from "./Banner.js";
+import { BannerContent, BannerContentProps } from "./BannerContent.js";
+import { BannerDescription, BannerDescriptionProps } from "./BannerDescription.js";
+import { BannerTitle, BannerTitleProps } from "./BannerTitle.js";
+export { Banner, BannerContent, type BannerContentProps, BannerDescription, type BannerDescriptionProps, type BannerProps, BannerTitle, type BannerTitleProps };

package/dist/components/Banner/index.js

@@ -0,0 +1,7 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { Banner } from "./Banner.js";
+import { BannerContent } from "./BannerContent.js";
+import { BannerDescription } from "./BannerDescription.js";
+import { BannerTitle } from "./BannerTitle.js";
+
+export { Banner, BannerContent, BannerDescription, BannerTitle };

package/dist/components/Banner/utils.cjs

@@ -0,0 +1,56 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+
+//#region src/components/Banner/utils.ts
+/**
+* Maps banner variants to button variants following the Figma spec.
+* Secondary banner variants map to secondary button variants.
+*/
+const BANNER_TO_BUTTON_VARIANT = {
+	primary: "brand",
+	secondary: "brand",
+	brand: "brand",
+	"brand-secondary": "brand-secondary",
+	alert: "alert",
+	"alert-secondary": "alert-secondary",
+	warning: "warning",
+	"warning-secondary": "warning-secondary",
+	success: "positive",
+	"success-secondary": "positive-secondary",
+	info: "info",
+	"info-secondary": "info-secondary"
+};
+/**
+* Checks whether a React element has a specific displayName.
+* Handles both regular function components and forwardRef components
+* (which have typeof type === 'object').
+*/
+function hasDisplayName(child, name) {
+	if (!(0, react.isValidElement)(child)) return false;
+	const type = child.type;
+	return (typeof type === "function" || typeof type === "object" && type !== null) && "displayName" in type && type.displayName === name;
+}
+/**
+* Separates Banner children into content (BannerContent) and action elements.
+* Skips falsy children so conditional patterns like {show && <Button />} work.
+*/
+function separateChildren(children) {
+	let content = null;
+	const actions = [];
+	react.Children.forEach(children, (child) => {
+		if (child == null || child === false || child === true || child === "") return;
+		if (hasDisplayName(child, "BannerContent")) content = child;
+		else actions.push(child);
+	});
+	return {
+		content,
+		actions
+	};
+}
+
+//#endregion
+exports.BANNER_TO_BUTTON_VARIANT = BANNER_TO_BUTTON_VARIANT;
+exports.hasDisplayName = hasDisplayName;
+exports.separateChildren = separateChildren;

package/dist/components/Banner/utils.d.cts

@@ -0,0 +1,27 @@
+
+import { BannerVariant, ButtonVariantFlat } from "../../types/dist/index.cjs";
+import { ReactNode } from "react";
+
+//#region src/components/Banner/utils.d.ts
+/**
+ * Maps banner variants to button variants following the Figma spec.
+ * Secondary banner variants map to secondary button variants.
+ */
+declare const BANNER_TO_BUTTON_VARIANT: Record<BannerVariant, ButtonVariantFlat>;
+/**
+ * Checks whether a React element has a specific displayName.
+ * Handles both regular function components and forwardRef components
+ * (which have typeof type === 'object').
+ */
+declare function hasDisplayName(child: ReactNode, name: string): boolean;
+/**
+ * Separates Banner children into content (BannerContent) and action elements.
+ * Skips falsy children so conditional patterns like {show && <Button />} work.
+ */
+declare function separateChildren(children: ReactNode): {
+  content: ReactNode | null;
+  actions: ReactNode[];
+};
+//#endregion
+export { BANNER_TO_BUTTON_VARIANT, hasDisplayName, separateChildren };
+//# sourceMappingURL=utils.d.cts.map

package/dist/components/Banner/utils.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.cts","names":[],"sources":["../../../src/components/Banner/utils.ts"],"mappings":";;;;;;;AAQA;;cAAa,wBAAA,EAA0B,MAAA,CAAO,aAAA,EAAe,iBAAA;;;;;;iBAoB7C,cAAA,CAAe,KAAA,EAAO,SAAA,EAAW,IAAA;;;;;iBAgBjC,gBAAA,CAAiB,QAAA,EAAU,SAAA;EACzC,OAAA,EAAS,SAAA;EACT,OAAA,EAAS,SAAA;AAAA"}

package/dist/components/Banner/utils.d.ts

@@ -0,0 +1,27 @@
+
+import { BannerVariant, ButtonVariantFlat } from "../../types/dist/index.js";
+import { ReactNode } from "react";
+
+//#region src/components/Banner/utils.d.ts
+/**
+ * Maps banner variants to button variants following the Figma spec.
+ * Secondary banner variants map to secondary button variants.
+ */
+declare const BANNER_TO_BUTTON_VARIANT: Record<BannerVariant, ButtonVariantFlat>;
+/**
+ * Checks whether a React element has a specific displayName.
+ * Handles both regular function components and forwardRef components
+ * (which have typeof type === 'object').
+ */
+declare function hasDisplayName(child: ReactNode, name: string): boolean;
+/**
+ * Separates Banner children into content (BannerContent) and action elements.
+ * Skips falsy children so conditional patterns like {show && <Button />} work.
+ */
+declare function separateChildren(children: ReactNode): {
+  content: ReactNode | null;
+  actions: ReactNode[];
+};
+//#endregion
+export { BANNER_TO_BUTTON_VARIANT, hasDisplayName, separateChildren };
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/Banner/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","names":[],"sources":["../../../src/components/Banner/utils.ts"],"mappings":";;;;;;;AAQA;;cAAa,wBAAA,EAA0B,MAAA,CAAO,aAAA,EAAe,iBAAA;;;;;;iBAoB7C,cAAA,CAAe,KAAA,EAAO,SAAA,EAAW,IAAA;;;;;iBAgBjC,gBAAA,CAAiB,QAAA,EAAU,SAAA;EACzC,OAAA,EAAS,SAAA;EACT,OAAA,EAAS,SAAA;AAAA"}

package/dist/components/Banner/utils.js

@@ -0,0 +1,53 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { Children, isValidElement } from "react";
+
+//#region src/components/Banner/utils.ts
+/**
+* Maps banner variants to button variants following the Figma spec.
+* Secondary banner variants map to secondary button variants.
+*/
+const BANNER_TO_BUTTON_VARIANT = {
+	primary: "brand",
+	secondary: "brand",
+	brand: "brand",
+	"brand-secondary": "brand-secondary",
+	alert: "alert",
+	"alert-secondary": "alert-secondary",
+	warning: "warning",
+	"warning-secondary": "warning-secondary",
+	success: "positive",
+	"success-secondary": "positive-secondary",
+	info: "info",
+	"info-secondary": "info-secondary"
+};
+/**
+* Checks whether a React element has a specific displayName.
+* Handles both regular function components and forwardRef components
+* (which have typeof type === 'object').
+*/
+function hasDisplayName(child, name) {
+	if (!isValidElement(child)) return false;
+	const type = child.type;
+	return (typeof type === "function" || typeof type === "object" && type !== null) && "displayName" in type && type.displayName === name;
+}
+/**
+* Separates Banner children into content (BannerContent) and action elements.
+* Skips falsy children so conditional patterns like {show && <Button />} work.
+*/
+function separateChildren(children) {
+	let content = null;
+	const actions = [];
+	Children.forEach(children, (child) => {
+		if (child == null || child === false || child === true || child === "") return;
+		if (hasDisplayName(child, "BannerContent")) content = child;
+		else actions.push(child);
+	});
+	return {
+		content,
+		actions
+	};
+}
+
+//#endregion
+export { BANNER_TO_BUTTON_VARIANT, hasDisplayName, separateChildren };
+//# sourceMappingURL=utils.js.map

package/dist/components/Banner/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/Banner/utils.ts"],"sourcesContent":["import type { BannerVariant, ButtonVariantFlat } from '@yahoo/uds-types';\nimport type { ReactNode } from 'react';\nimport { Children, isValidElement } from 'react';\n\n/**\n * Maps banner variants to button variants following the Figma spec.\n * Secondary banner variants map to secondary button variants.\n */\nexport const BANNER_TO_BUTTON_VARIANT: Record<BannerVariant, ButtonVariantFlat> = {\n  primary: 'brand',\n  secondary: 'brand',\n  brand: 'brand',\n  'brand-secondary': 'brand-secondary',\n  alert: 'alert',\n  'alert-secondary': 'alert-secondary',\n  warning: 'warning',\n  'warning-secondary': 'warning-secondary',\n  success: 'positive',\n  'success-secondary': 'positive-secondary',\n  info: 'info',\n  'info-secondary': 'info-secondary',\n};\n\n/**\n * Checks whether a React element has a specific displayName.\n * Handles both regular function components and forwardRef components\n * (which have typeof type === 'object').\n */\nexport function hasDisplayName(child: ReactNode, name: string): boolean {\n  if (!isValidElement(child)) {\n    return false;\n  }\n  const type = child.type;\n  return (\n    (typeof type === 'function' || (typeof type === 'object' && type !== null)) &&\n    'displayName' in type &&\n    type.displayName === name\n  );\n}\n\n/**\n * Separates Banner children into content (BannerContent) and action elements.\n * Skips falsy children so conditional patterns like {show && <Button />} work.\n */\nexport function separateChildren(children: ReactNode): {\n  content: ReactNode | null;\n  actions: ReactNode[];\n} {\n  let content: ReactNode | null = null;\n  const actions: ReactNode[] = [];\n\n  Children.forEach(children, (child) => {\n    if (child == null || child === false || child === true || child === '') {\n      return;\n    }\n    if (hasDisplayName(child, 'BannerContent')) {\n      content = child;\n    } else {\n      actions.push(child);\n    }\n  });\n\n  return { content, actions };\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,2BAAqE;CAChF,SAAS;CACT,WAAW;CACX,OAAO;CACP,mBAAmB;CACnB,OAAO;CACP,mBAAmB;CACnB,SAAS;CACT,qBAAqB;CACrB,SAAS;CACT,qBAAqB;CACrB,MAAM;CACN,kBAAkB;CACnB;;;;;;AAOD,SAAgB,eAAe,OAAkB,MAAuB;AACtE,KAAI,CAAC,eAAe,MAAM,CACxB,QAAO;CAET,MAAM,OAAO,MAAM;AACnB,SACG,OAAO,SAAS,cAAe,OAAO,SAAS,YAAY,SAAS,SACrE,iBAAiB,QACjB,KAAK,gBAAgB;;;;;;AAQzB,SAAgB,iBAAiB,UAG/B;CACA,IAAI,UAA4B;CAChC,MAAM,UAAuB,EAAE;AAE/B,UAAS,QAAQ,WAAW,UAAU;AACpC,MAAI,SAAS,QAAQ,UAAU,SAAS,UAAU,QAAQ,UAAU,GAClE;AAEF,MAAI,eAAe,OAAO,gBAAgB,CACxC,WAAU;MAEV,SAAQ,KAAK,MAAM;GAErB;AAEF,QAAO;EAAE;EAAS;EAAS"}

package/dist/types/dist/index.d.cts

@@ -293,6 +293,24 @@ type ChipVariant = 'primary' | 'secondary' | 'brand' | 'brand-secondary';
 type ChipSize = 'sm' | 'md';
 type BadgeVariant = 'primary' | 'secondary' | 'brand' | 'brand-secondary' | 'alert' | 'alert-secondary' | 'positive' | 'positive-secondary' | 'warning' | 'warning-secondary' | 'info' | 'info-secondary';
 type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
+type BannerVariant = 'primary' | 'secondary' | 'brand' | 'brand-secondary' | 'alert' | 'alert-secondary' | 'warning' | 'warning-secondary' | 'success' | 'success-secondary' | 'info' | 'info-secondary';
+type BannerSize = 'default';
+interface UniversalBannerProps<IconSlotType = UniversalIconSlot> {
+  /** The visual style variant of the banner. @default 'primary' */
+  variant?: BannerVariant;
+  /** The size of the banner. @default 'default' */
+  size?: BannerSize;
+  /** Icon displayed at the start of the banner. */
+  startIcon?: IconSlotType;
+  /** Banner title. Ignored when BannerContent is used. */
+  title?: ReactNode;
+  /** Banner description. Truncated to 3 lines. Ignored when BannerContent is used. */
+  description?: ReactNode;
+  /** Dismiss button handler. The dismiss button is only rendered when this is provided. */
+  onDismiss?: () => void;
+  /** Actions (Button, Link) or BannerContent + actions. */
+  children?: ReactNode;
+}
 //#endregion
-export { type BadgeSize, type BadgeVariant, type ButtonSize, type ButtonVariantFlat, type ChipSize, type ChipVariant, type ElevationLevel, type IconButtonSize, type IconSize, type IconVariant, type MotionConfig, type MotionVariantValues, type UniversalCheckboxProps, type UniversalImageProps, type UniversalInputProps, type UniversalLinkProps, type UniversalRadioProps, type UniversalSwitchProps };
+export { type BadgeSize, type BadgeVariant, type BannerVariant, type ButtonSize, type ButtonVariantFlat, type ChipSize, type ChipVariant, type ElevationLevel, type IconButtonSize, type IconSize, type IconVariant, type MotionConfig, type MotionVariantValues, type UniversalBannerProps, type UniversalCheckboxProps, type UniversalImageProps, type UniversalInputProps, type UniversalLinkProps, type UniversalRadioProps, type UniversalSwitchProps };
 //# sourceMappingURL=index.d.cts.map