@yahoo/uds-mobile 2.5.0 → 2.6.0

package/dist/bin/uds-mobile.mjs

@@ -69,11 +69,19 @@ async function formatWithPrettier(content, filePath, prettierConfigPath) {
 	}
 }
 /**
+* Returns the base URL for the UDS config API based on the DATABASE env var.
+*/
+function getConfigBaseUrl() {
+	if (process.env.DATABASE === "local") return "http://localhost:4001";
+	return "https://config.uds.build";
+}
+/**
 * Fetches a config from the UDS config API by ID.
 */
 async function fetchConfigById(configId) {
-	log(`Fetching config: ${configId}`, "dim");
-	const response = await fetch(`https://config.uds.build/api/config?id=${configId}`);
+	const baseUrl = getConfigBaseUrl();
+	log(`Fetching config: ${configId} from ${baseUrl}`, "dim");
+	const response = await fetch(`${baseUrl}/api/config?id=${configId}`);
 	if (!response.ok) throw new Error(`Failed to fetch config: ${response.status} ${response.statusText}`);
 	const data = await response.json();
 	if (!data.config) throw new Error(`No config found for ID: ${configId}`);

package/dist/components/Banner/Banner.cjs

@@ -0,0 +1,179 @@
+/*! © 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_IconSlot = require('../IconSlot.cjs');
+const require_components_Text = require('../Text.cjs');
+const require_components_IconButton = require('../IconButton.cjs');
+const require_components_Banner_utils = require('./utils.cjs');
+let react = require("react");
+let react_native = require("react-native");
+let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../../generated/styles");
+
+//#region src/components/Banner/Banner.tsx
+/**
+* Inject button variants on Button children that don't have an explicit
+* variant set. The last unset Button gets the banner-mapped "primary"
+* variant; any preceding unset Buttons get "secondary".
+* When stacked (3+ actions), buttons get full width.
+*/
+function bindActionVariants(actions, bannerVariant, stacked) {
+	const primaryVariant = require_components_Banner_utils.BANNER_TO_BUTTON_VARIANT[bannerVariant];
+	const unsetIndices = [];
+	actions.forEach((child, i) => {
+		if (require_components_Banner_utils.hasDisplayName(child, "Button") && (0, react.isValidElement)(child) && child.props.variant === void 0) unsetIndices.push(i);
+	});
+	return actions.map((child, i) => {
+		const extraProps = {};
+		if (unsetIndices.includes(i)) extraProps.variant = i === unsetIndices[unsetIndices.length - 1] ? primaryVariant : "secondary";
+		if (stacked && !require_components_Banner_utils.hasDisplayName(child, "Button") && (0, react.isValidElement)(child)) extraProps.style = [child.props.style, { alignSelf: "flex-start" }];
+		if (Object.keys(extraProps).length === 0) return child;
+		return (0, react.cloneElement)(child, {
+			key: child.key ?? i,
+			...extraProps
+		});
+	});
+}
+/**
+* **An inline notification banner for contextual messages with optional actions.**
+*
+* @description
+* Banner is an inline, non-floating notification component that sits in normal document flow.
+* It supports 12 color variants, an optional icon, title, description (truncated to 3 lines),
+* composable actions via children, and an optional dismiss button.
+*
+* On mobile the layout is always column: content stacks above actions.
+*
+* @category Display
+* @platform mobile
+*
+* @example
+* ```tsx
+* import { Banner, BannerContent, BannerTitle, BannerDescription } from '@yahoo/uds-mobile/Banner';
+* import { Button } from '@yahoo/uds-mobile/Button';
+* import { Link } from '@yahoo/uds-mobile/Link';
+*
+* // Simple
+* <Banner variant="info" startIcon="Info" title="Update available" />
+*
+* // With actions
+* <Banner variant="brand" startIcon="Megaphone" title="Notification"
+*   description="Description text." onDismiss={() => {}}>
+*   <Link>Learn more</Link>
+*   <Button size="sm">Primary</Button>
+* </Banner>
+*
+* // Rich content
+* <Banner variant="alert" startIcon="Error" onDismiss={() => {}}>
+*   <BannerContent>
+*     <BannerTitle>Error occurred</BannerTitle>
+*     <BannerDescription>Something went wrong.</BannerDescription>
+*   </BannerContent>
+*   <Button size="sm">Retry</Button>
+* </Banner>
+* ```
+*
+* @see {@link Badge} for status indicators
+*/
+const Banner = (0, react.memo)(function Banner({ variant = "primary", startIcon, title, description, onDismiss, dismissAccessibilityLabel = "Dismiss", children, style, ref, ...rest }) {
+	const hasTitle = !!(typeof title === "string" ? title.trim() : title);
+	const hasDescription = !!(typeof description === "string" ? description.trim() : description);
+	generated_styles.bannerStyles.useVariants({ variant });
+	const rootGap = generated_styles.bannerStyles.root.gap ?? 0;
+	const closeIconSize = generated_styles.bannerStyles.close.iconSizeToken ?? "xs";
+	const { content: bannerContent, actions: rawActions } = require_components_Banner_utils.separateChildren(children);
+	const stacked = rawActions.length >= 3;
+	const actions = bindActionVariants(rawActions, variant, stacked);
+	const hasActions = actions.length > 0;
+	const contentArea = bannerContent ?? (hasTitle || hasDescription ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+		style: internalStyles.contentArea,
+		children: [hasTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+			numberOfLines: 1,
+			style: generated_styles.bannerStyles.title,
+			children: title
+		}), hasDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+			numberOfLines: 3,
+			style: generated_styles.bannerStyles.description,
+			children: description
+		})]
+	}) : null);
+	const isSingleLine = !bannerContent && hasTitle !== hasDescription;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+		ref,
+		style: (0, react.useMemo)(() => [
+			generated_styles.bannerStyles.root,
+			internalStyles.root,
+			style
+		], [generated_styles.bannerStyles.root, style]),
+		...rest,
+		children: [
+			startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: startIcon,
+				variant: "fill",
+				style: [
+					generated_styles.bannerStyles.icon,
+					internalStyles.iconShrink,
+					isSingleLine ? internalStyles.alignCenter : internalStyles.alignStart
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+				style: [
+					internalStyles.innerWrapper,
+					{ rowGap: rootGap },
+					isSingleLine ? internalStyles.alignCenter : void 0
+				],
+				children: [contentArea, hasActions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+					style: stacked ? internalStyles.actionsStacked : internalStyles.actionsRow,
+					children: actions
+				})]
+			}),
+			onDismiss && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconButton.IconButton, {
+				name: "Cross",
+				variant: "tertiary",
+				size: closeIconSize,
+				accessibilityLabel: dismissAccessibilityLabel,
+				onPress: onDismiss,
+				style: [internalStyles.dismissButton, isSingleLine ? internalStyles.alignCenter : internalStyles.alignStart],
+				hitSlop: 12,
+				disableEffects: true
+			})
+		]
+	});
+});
+Banner.displayName = "Banner";
+const internalStyles = react_native.StyleSheet.create({
+	root: {
+		flexDirection: "row",
+		minWidth: 300,
+		boxShadow: "inset 0px -20px 20px -10px rgba(31,31,31,0.05)"
+	},
+	alignCenter: { alignSelf: "center" },
+	innerWrapper: {
+		flex: 1,
+		minWidth: 0,
+		flexDirection: "column",
+		alignItems: "flex-start"
+	},
+	contentArea: {
+		minWidth: 0,
+		rowGap: 2
+	},
+	actionsRow: {
+		flexDirection: "row",
+		alignItems: "center",
+		alignSelf: "stretch",
+		columnGap: 6
+	},
+	actionsStacked: {
+		flexDirection: "column",
+		alignItems: "stretch",
+		alignSelf: "stretch",
+		rowGap: 6
+	},
+	iconShrink: { flexShrink: 0 },
+	dismissButton: { flexShrink: 0 },
+	alignStart: { alignSelf: "flex-start" }
+});
+
+//#endregion
+exports.Banner = Banner;

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

@@ -0,0 +1,59 @@
+
+import { UniversalBannerProps } from "../../types/dist/index.cjs";
+import { IconSlotType } from "../IconSlot.cjs";
+import * as react from "react";
+import { Ref } from "react";
+import { View, ViewProps } from "react-native";
+
+//#region src/components/Banner/Banner.d.ts
+interface BannerProps extends ViewProps, UniversalBannerProps<IconSlotType> {
+  /** Accessible label for the dismiss button. @default "Dismiss" */
+  dismissAccessibilityLabel?: string;
+  /** Ref to the underlying View. */
+  ref?: Ref<View>;
+}
+/**
+ * **An inline notification banner for contextual messages with optional actions.**
+ *
+ * @description
+ * Banner is an inline, non-floating notification component that sits in normal document flow.
+ * It supports 12 color variants, an optional icon, title, description (truncated to 3 lines),
+ * composable actions via children, and an optional dismiss button.
+ *
+ * On mobile the layout is always column: content stacks above actions.
+ *
+ * @category Display
+ * @platform mobile
+ *
+ * @example
+ * ```tsx
+ * import { Banner, BannerContent, BannerTitle, BannerDescription } from '@yahoo/uds-mobile/Banner';
+ * import { Button } from '@yahoo/uds-mobile/Button';
+ * import { Link } from '@yahoo/uds-mobile/Link';
+ *
+ * // Simple
+ * <Banner variant="info" startIcon="Info" title="Update available" />
+ *
+ * // With actions
+ * <Banner variant="brand" startIcon="Megaphone" title="Notification"
+ *   description="Description text." onDismiss={() => {}}>
+ *   <Link>Learn more</Link>
+ *   <Button size="sm">Primary</Button>
+ * </Banner>
+ *
+ * // Rich content
+ * <Banner variant="alert" startIcon="Error" onDismiss={() => {}}>
+ *   <BannerContent>
+ *     <BannerTitle>Error occurred</BannerTitle>
+ *     <BannerDescription>Something went wrong.</BannerDescription>
+ *   </BannerContent>
+ *   <Button size="sm">Retry</Button>
+ * </Banner>
+ * ```
+ *
+ * @see {@link Badge} for status indicators
+ */
+declare const Banner: react.NamedExoticComponent<BannerProps>;
+//#endregion
+export { Banner, type BannerProps };
+//# sourceMappingURL=Banner.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.cts","names":[],"sources":["../../../src/components/Banner/Banner.tsx"],"mappings":";;;;;;;;UAkEU,WAAA,SAAoB,SAAA,EAAW,oBAAA,CAAqB,YAAA;;EAE5D,yBAAA;EAFQ;EAIR,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;;;;;;;;cA4CV,MAAA,EAAM,KAAA,CAAA,oBAAA,CAAA,WAAA"}

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

@@ -0,0 +1,59 @@
+
+import { UniversalBannerProps } from "../../types/dist/index.js";
+import { IconSlotType } from "../IconSlot.js";
+import * as react from "react";
+import { Ref } from "react";
+import { View, ViewProps } from "react-native";
+
+//#region src/components/Banner/Banner.d.ts
+interface BannerProps extends ViewProps, UniversalBannerProps<IconSlotType> {
+  /** Accessible label for the dismiss button. @default "Dismiss" */
+  dismissAccessibilityLabel?: string;
+  /** Ref to the underlying View. */
+  ref?: Ref<View>;
+}
+/**
+ * **An inline notification banner for contextual messages with optional actions.**
+ *
+ * @description
+ * Banner is an inline, non-floating notification component that sits in normal document flow.
+ * It supports 12 color variants, an optional icon, title, description (truncated to 3 lines),
+ * composable actions via children, and an optional dismiss button.
+ *
+ * On mobile the layout is always column: content stacks above actions.
+ *
+ * @category Display
+ * @platform mobile
+ *
+ * @example
+ * ```tsx
+ * import { Banner, BannerContent, BannerTitle, BannerDescription } from '@yahoo/uds-mobile/Banner';
+ * import { Button } from '@yahoo/uds-mobile/Button';
+ * import { Link } from '@yahoo/uds-mobile/Link';
+ *
+ * // Simple
+ * <Banner variant="info" startIcon="Info" title="Update available" />
+ *
+ * // With actions
+ * <Banner variant="brand" startIcon="Megaphone" title="Notification"
+ *   description="Description text." onDismiss={() => {}}>
+ *   <Link>Learn more</Link>
+ *   <Button size="sm">Primary</Button>
+ * </Banner>
+ *
+ * // Rich content
+ * <Banner variant="alert" startIcon="Error" onDismiss={() => {}}>
+ *   <BannerContent>
+ *     <BannerTitle>Error occurred</BannerTitle>
+ *     <BannerDescription>Something went wrong.</BannerDescription>
+ *   </BannerContent>
+ *   <Button size="sm">Retry</Button>
+ * </Banner>
+ * ```
+ *
+ * @see {@link Badge} for status indicators
+ */
+declare const Banner: react.NamedExoticComponent<BannerProps>;
+//#endregion
+export { Banner, type BannerProps };
+//# sourceMappingURL=Banner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","names":[],"sources":["../../../src/components/Banner/Banner.tsx"],"mappings":";;;;;;;;UAkEU,WAAA,SAAoB,SAAA,EAAW,oBAAA,CAAqB,YAAA;;EAE5D,yBAAA;EAFQ;EAIR,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;;;;;;;;cA4CV,MAAA,EAAM,KAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/Banner/Banner.js

@@ -0,0 +1,178 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { IconSlot } from "../IconSlot.js";
+import { Text as Text$1 } from "../Text.js";
+import { IconButton } from "../IconButton.js";
+import { BANNER_TO_BUTTON_VARIANT, hasDisplayName, separateChildren } from "./utils.js";
+import { cloneElement, isValidElement, memo, useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { bannerStyles } from "../../../generated/styles";
+
+//#region src/components/Banner/Banner.tsx
+/**
+* Inject button variants on Button children that don't have an explicit
+* variant set. The last unset Button gets the banner-mapped "primary"
+* variant; any preceding unset Buttons get "secondary".
+* When stacked (3+ actions), buttons get full width.
+*/
+function bindActionVariants(actions, bannerVariant, stacked) {
+	const primaryVariant = BANNER_TO_BUTTON_VARIANT[bannerVariant];
+	const unsetIndices = [];
+	actions.forEach((child, i) => {
+		if (hasDisplayName(child, "Button") && isValidElement(child) && child.props.variant === void 0) unsetIndices.push(i);
+	});
+	return actions.map((child, i) => {
+		const extraProps = {};
+		if (unsetIndices.includes(i)) extraProps.variant = i === unsetIndices[unsetIndices.length - 1] ? primaryVariant : "secondary";
+		if (stacked && !hasDisplayName(child, "Button") && isValidElement(child)) extraProps.style = [child.props.style, { alignSelf: "flex-start" }];
+		if (Object.keys(extraProps).length === 0) return child;
+		return cloneElement(child, {
+			key: child.key ?? i,
+			...extraProps
+		});
+	});
+}
+/**
+* **An inline notification banner for contextual messages with optional actions.**
+*
+* @description
+* Banner is an inline, non-floating notification component that sits in normal document flow.
+* It supports 12 color variants, an optional icon, title, description (truncated to 3 lines),
+* composable actions via children, and an optional dismiss button.
+*
+* On mobile the layout is always column: content stacks above actions.
+*
+* @category Display
+* @platform mobile
+*
+* @example
+* ```tsx
+* import { Banner, BannerContent, BannerTitle, BannerDescription } from '@yahoo/uds-mobile/Banner';
+* import { Button } from '@yahoo/uds-mobile/Button';
+* import { Link } from '@yahoo/uds-mobile/Link';
+*
+* // Simple
+* <Banner variant="info" startIcon="Info" title="Update available" />
+*
+* // With actions
+* <Banner variant="brand" startIcon="Megaphone" title="Notification"
+*   description="Description text." onDismiss={() => {}}>
+*   <Link>Learn more</Link>
+*   <Button size="sm">Primary</Button>
+* </Banner>
+*
+* // Rich content
+* <Banner variant="alert" startIcon="Error" onDismiss={() => {}}>
+*   <BannerContent>
+*     <BannerTitle>Error occurred</BannerTitle>
+*     <BannerDescription>Something went wrong.</BannerDescription>
+*   </BannerContent>
+*   <Button size="sm">Retry</Button>
+* </Banner>
+* ```
+*
+* @see {@link Badge} for status indicators
+*/
+const Banner = memo(function Banner({ variant = "primary", startIcon, title, description, onDismiss, dismissAccessibilityLabel = "Dismiss", children, style, ref, ...rest }) {
+	const hasTitle = !!(typeof title === "string" ? title.trim() : title);
+	const hasDescription = !!(typeof description === "string" ? description.trim() : description);
+	bannerStyles.useVariants({ variant });
+	const rootGap = bannerStyles.root.gap ?? 0;
+	const closeIconSize = bannerStyles.close.iconSizeToken ?? "xs";
+	const { content: bannerContent, actions: rawActions } = separateChildren(children);
+	const stacked = rawActions.length >= 3;
+	const actions = bindActionVariants(rawActions, variant, stacked);
+	const hasActions = actions.length > 0;
+	const contentArea = bannerContent ?? (hasTitle || hasDescription ? /* @__PURE__ */ jsxs(View, {
+		style: internalStyles.contentArea,
+		children: [hasTitle && /* @__PURE__ */ jsx(Text$1, {
+			numberOfLines: 1,
+			style: bannerStyles.title,
+			children: title
+		}), hasDescription && /* @__PURE__ */ jsx(Text$1, {
+			numberOfLines: 3,
+			style: bannerStyles.description,
+			children: description
+		})]
+	}) : null);
+	const isSingleLine = !bannerContent && hasTitle !== hasDescription;
+	return /* @__PURE__ */ jsxs(View, {
+		ref,
+		style: useMemo(() => [
+			bannerStyles.root,
+			internalStyles.root,
+			style
+		], [bannerStyles.root, style]),
+		...rest,
+		children: [
+			startIcon && /* @__PURE__ */ jsx(IconSlot, {
+				icon: startIcon,
+				variant: "fill",
+				style: [
+					bannerStyles.icon,
+					internalStyles.iconShrink,
+					isSingleLine ? internalStyles.alignCenter : internalStyles.alignStart
+				]
+			}),
+			/* @__PURE__ */ jsxs(View, {
+				style: [
+					internalStyles.innerWrapper,
+					{ rowGap: rootGap },
+					isSingleLine ? internalStyles.alignCenter : void 0
+				],
+				children: [contentArea, hasActions && /* @__PURE__ */ jsx(View, {
+					style: stacked ? internalStyles.actionsStacked : internalStyles.actionsRow,
+					children: actions
+				})]
+			}),
+			onDismiss && /* @__PURE__ */ jsx(IconButton, {
+				name: "Cross",
+				variant: "tertiary",
+				size: closeIconSize,
+				accessibilityLabel: dismissAccessibilityLabel,
+				onPress: onDismiss,
+				style: [internalStyles.dismissButton, isSingleLine ? internalStyles.alignCenter : internalStyles.alignStart],
+				hitSlop: 12,
+				disableEffects: true
+			})
+		]
+	});
+});
+Banner.displayName = "Banner";
+const internalStyles = StyleSheet.create({
+	root: {
+		flexDirection: "row",
+		minWidth: 300,
+		boxShadow: "inset 0px -20px 20px -10px rgba(31,31,31,0.05)"
+	},
+	alignCenter: { alignSelf: "center" },
+	innerWrapper: {
+		flex: 1,
+		minWidth: 0,
+		flexDirection: "column",
+		alignItems: "flex-start"
+	},
+	contentArea: {
+		minWidth: 0,
+		rowGap: 2
+	},
+	actionsRow: {
+		flexDirection: "row",
+		alignItems: "center",
+		alignSelf: "stretch",
+		columnGap: 6
+	},
+	actionsStacked: {
+		flexDirection: "column",
+		alignItems: "stretch",
+		alignSelf: "stretch",
+		rowGap: 6
+	},
+	iconShrink: { flexShrink: 0 },
+	dismissButton: { flexShrink: 0 },
+	alignStart: { alignSelf: "flex-start" }
+});
+
+//#endregion
+export { Banner };
+//# sourceMappingURL=Banner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","names":["RNView","Text"],"sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import type { BannerVariant, UniversalBannerProps } from '@yahoo/uds-types';\nimport type { ReactNode, Ref } from 'react';\nimport { cloneElement, isValidElement, memo, useMemo } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport { StyleSheet, View as RNView } from 'react-native';\n\nimport { bannerStyles } from '../../../generated/styles';\nimport { IconButton } from '../IconButton';\nimport type { IconSlotType } from '../IconSlot';\nimport { IconSlot } from '../IconSlot';\nimport { Text } from '../Text';\nimport { BANNER_TO_BUTTON_VARIANT, hasDisplayName, separateChildren } from './utils';\n\n/**\n * Inject button variants on Button children that don't have an explicit\n * variant set. The last unset Button gets the banner-mapped \"primary\"\n * variant; any preceding unset Buttons get \"secondary\".\n * When stacked (3+ actions), buttons get full width.\n */\nfunction bindActionVariants(\n  actions: ReactNode[],\n  bannerVariant: BannerVariant,\n  stacked: boolean,\n): ReactNode[] {\n  const primaryVariant = BANNER_TO_BUTTON_VARIANT[bannerVariant];\n\n  const unsetIndices: number[] = [];\n  actions.forEach((child, i) => {\n    if (\n      hasDisplayName(child, 'Button') &&\n      isValidElement<{ variant?: string }>(child) &&\n      child.props.variant === undefined\n    ) {\n      unsetIndices.push(i);\n    }\n  });\n\n  return actions.map((child, i) => {\n    const extraProps: Record<string, unknown> = {};\n\n    // Auto-bind variant on Buttons without explicit variant\n    if (unsetIndices.includes(i)) {\n      const isLast = i === unsetIndices[unsetIndices.length - 1];\n      extraProps.variant = isLast ? primaryVariant : 'secondary';\n    }\n\n    // When stacked, non-Button children (e.g. Link) should not stretch full width\n    if (stacked && !hasDisplayName(child, 'Button') && isValidElement<ViewProps>(child)) {\n      extraProps.style = [child.props.style, { alignSelf: 'flex-start' as const }];\n    }\n\n    if (Object.keys(extraProps).length === 0) {\n      return child;\n    }\n\n    return cloneElement(child as React.ReactElement, {\n      key: (child as React.ReactElement).key ?? i,\n      ...extraProps,\n    });\n  });\n}\n\n// ---------------------------------------------------------------------------\n// Banner\n// ---------------------------------------------------------------------------\n\ninterface BannerProps extends ViewProps, UniversalBannerProps<IconSlotType> {\n  /** Accessible label for the dismiss button. @default \"Dismiss\" */\n  dismissAccessibilityLabel?: string;\n  /** Ref to the underlying View. */\n  ref?: Ref<View>;\n}\n\n/**\n * **An inline notification banner for contextual messages with optional actions.**\n *\n * @description\n * Banner is an inline, non-floating notification component that sits in normal document flow.\n * It supports 12 color variants, an optional icon, title, description (truncated to 3 lines),\n * composable actions via children, and an optional dismiss button.\n *\n * On mobile the layout is always column: content stacks above actions.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Banner, BannerContent, BannerTitle, BannerDescription } from '@yahoo/uds-mobile/Banner';\n * import { Button } from '@yahoo/uds-mobile/Button';\n * import { Link } from '@yahoo/uds-mobile/Link';\n *\n * // Simple\n * <Banner variant=\"info\" startIcon=\"Info\" title=\"Update available\" />\n *\n * // With actions\n * <Banner variant=\"brand\" startIcon=\"Megaphone\" title=\"Notification\"\n *   description=\"Description text.\" onDismiss={() => {}}>\n *   <Link>Learn more</Link>\n *   <Button size=\"sm\">Primary</Button>\n * </Banner>\n *\n * // Rich content\n * <Banner variant=\"alert\" startIcon=\"Error\" onDismiss={() => {}}>\n *   <BannerContent>\n *     <BannerTitle>Error occurred</BannerTitle>\n *     <BannerDescription>Something went wrong.</BannerDescription>\n *   </BannerContent>\n *   <Button size=\"sm\">Retry</Button>\n * </Banner>\n * ```\n *\n * @see {@link Badge} for status indicators\n */\nconst Banner = memo(function Banner({\n  variant = 'primary',\n  startIcon,\n  title,\n  description,\n  onDismiss,\n  dismissAccessibilityLabel = 'Dismiss',\n  children,\n  style,\n  ref,\n  ...rest\n}: BannerProps) {\n  const hasTitle = !!(typeof title === 'string' ? title.trim() : title);\n  const hasDescription = !!(typeof description === 'string' ? description.trim() : description);\n\n  bannerStyles.useVariants({ variant });\n\n  const rootGap = bannerStyles.root.gap ?? 0;\n  const closeIconSize = bannerStyles.close.iconSizeToken ?? 'xs';\n\n  // Separate BannerContent from action children, bind button variants\n  const { content: bannerContent, actions: rawActions } = separateChildren(children);\n  const stacked = rawActions.length >= 3;\n  const actions = bindActionVariants(rawActions, variant, stacked);\n  const hasActions = actions.length > 0;\n\n  // Build the content area: either explicit BannerContent or auto-generated from props\n  const contentArea =\n    bannerContent ??\n    (hasTitle || hasDescription ? (\n      <RNView style={internalStyles.contentArea}>\n        {hasTitle && (\n          <Text numberOfLines={1} style={bannerStyles.title}>\n            {title}\n          </Text>\n        )}\n        {hasDescription && (\n          <Text numberOfLines={3} style={bannerStyles.description}>\n            {description}\n          </Text>\n        )}\n      </RNView>\n    ) : null);\n\n  // Center icon/dismiss when content is single-line (title-only or description-only).\n  // BannerContent is excluded — we can't inspect its children to know the line count.\n  const isSingleLine = !bannerContent && hasTitle !== hasDescription;\n\n  const rootStyles = useMemo(\n    () => [bannerStyles.root, internalStyles.root, style],\n    [bannerStyles.root, style],\n  );\n\n  return (\n    <RNView ref={ref} style={rootStyles} {...rest}>\n      {startIcon && (\n        <IconSlot\n          icon={startIcon}\n          variant=\"fill\"\n          style={[\n            bannerStyles.icon,\n            internalStyles.iconShrink,\n            isSingleLine ? internalStyles.alignCenter : internalStyles.alignStart,\n          ]}\n        />\n      )}\n\n      <RNView\n        style={[\n          internalStyles.innerWrapper,\n          { rowGap: rootGap },\n          isSingleLine ? internalStyles.alignCenter : undefined,\n        ]}\n      >\n        {contentArea}\n\n        {hasActions && (\n          <RNView style={stacked ? internalStyles.actionsStacked : internalStyles.actionsRow}>\n            {actions}\n          </RNView>\n        )}\n      </RNView>\n\n      {onDismiss && (\n        <IconButton\n          name=\"Cross\"\n          variant=\"tertiary\"\n          size={closeIconSize}\n          accessibilityLabel={dismissAccessibilityLabel}\n          onPress={onDismiss}\n          style={[\n            internalStyles.dismissButton,\n            isSingleLine ? internalStyles.alignCenter : internalStyles.alignStart,\n          ]}\n          hitSlop={12}\n          disableEffects\n        />\n      )}\n    </RNView>\n  );\n});\n\nBanner.displayName = 'Banner';\n\nconst internalStyles = StyleSheet.create({\n  root: {\n    flexDirection: 'row',\n    minWidth: 300,\n    boxShadow: 'inset 0px -20px 20px -10px rgba(31,31,31,0.05)',\n  },\n  alignCenter: {\n    alignSelf: 'center',\n  },\n  innerWrapper: {\n    flex: 1,\n    minWidth: 0,\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n  },\n  contentArea: {\n    minWidth: 0,\n    rowGap: 2,\n  },\n  actionsRow: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    alignSelf: 'stretch',\n    columnGap: 6,\n  },\n  actionsStacked: {\n    flexDirection: 'column',\n    alignItems: 'stretch',\n    alignSelf: 'stretch',\n    rowGap: 6,\n  },\n  iconShrink: {\n    flexShrink: 0,\n  },\n  dismissButton: {\n    flexShrink: 0,\n  },\n  alignStart: {\n    alignSelf: 'flex-start',\n  },\n});\n\nexport { Banner, type BannerProps };\n"],"mappings":"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"}

package/dist/components/Banner/BannerContent.cjs

@@ -0,0 +1,26 @@
+/*! © 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");
+let react_native = require("react-native");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Banner/BannerContent.tsx
+/**
+* Container for rich banner content using BannerTitle and BannerDescription.
+* When used as a child of Banner, replaces the auto-generated title/description area.
+*/
+const BannerContent = (0, react.memo)(function BannerContent({ children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		style: {
+			flex: 1,
+			minWidth: 0,
+			rowGap: 2
+		},
+		children
+	});
+});
+BannerContent.displayName = "BannerContent";
+
+//#endregion
+exports.BannerContent = BannerContent;

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

@@ -0,0 +1,16 @@
+
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/Banner/BannerContent.d.ts
+interface BannerContentProps {
+  children: ReactNode;
+}
+/**
+ * Container for rich banner content using BannerTitle and BannerDescription.
+ * When used as a child of Banner, replaces the auto-generated title/description area.
+ */
+declare const BannerContent: react.NamedExoticComponent<BannerContentProps>;
+//#endregion
+export { BannerContent, type BannerContentProps };
+//# sourceMappingURL=BannerContent.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerContent.d.cts","names":[],"sources":["../../../src/components/Banner/BannerContent.tsx"],"mappings":";;;;;UAIU,kBAAA;EACR,QAAA,EAAU,SAAA;AAAA;AAL2B;;;;AAAA,cAYjC,aAAA,EAAa,KAAA,CAAA,oBAAA,CAAA,kBAAA"}

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

@@ -0,0 +1,16 @@
+
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/Banner/BannerContent.d.ts
+interface BannerContentProps {
+  children: ReactNode;
+}
+/**
+ * Container for rich banner content using BannerTitle and BannerDescription.
+ * When used as a child of Banner, replaces the auto-generated title/description area.
+ */
+declare const BannerContent: react.NamedExoticComponent<BannerContentProps>;
+//#endregion
+export { BannerContent, type BannerContentProps };
+//# sourceMappingURL=BannerContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerContent.d.ts","names":[],"sources":["../../../src/components/Banner/BannerContent.tsx"],"mappings":";;;;;UAIU,kBAAA;EACR,QAAA,EAAU,SAAA;AAAA;AAL2B;;;;AAAA,cAYjC,aAAA,EAAa,KAAA,CAAA,oBAAA,CAAA,kBAAA"}

package/dist/components/Banner/BannerContent.js

@@ -0,0 +1,25 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { memo } from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Banner/BannerContent.tsx
+/**
+* Container for rich banner content using BannerTitle and BannerDescription.
+* When used as a child of Banner, replaces the auto-generated title/description area.
+*/
+const BannerContent = memo(function BannerContent({ children }) {
+	return /* @__PURE__ */ jsx(View, {
+		style: {
+			flex: 1,
+			minWidth: 0,
+			rowGap: 2
+		},
+		children
+	});
+});
+BannerContent.displayName = "BannerContent";
+
+//#endregion
+export { BannerContent };
+//# sourceMappingURL=BannerContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerContent.js","names":[],"sources":["../../../src/components/Banner/BannerContent.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { memo } from 'react';\nimport { View } from 'react-native';\n\ninterface BannerContentProps {\n  children: ReactNode;\n}\n\n/**\n * Container for rich banner content using BannerTitle and BannerDescription.\n * When used as a child of Banner, replaces the auto-generated title/description area.\n */\nconst BannerContent = memo(function BannerContent({ children }: BannerContentProps) {\n  return <View style={{ flex: 1, minWidth: 0, rowGap: 2 }}>{children}</View>;\n});\n\nBannerContent.displayName = 'BannerContent';\n\nexport { BannerContent, type BannerContentProps };\n"],"mappings":";;;;;;;;;;AAYA,MAAM,gBAAgB,KAAK,SAAS,cAAc,EAAE,YAAgC;AAClF,QAAO,oBAAC;EAAK,OAAO;GAAE,MAAM;GAAG,UAAU;GAAG,QAAQ;GAAG;EAAG;GAAgB;EAC1E;AAEF,cAAc,cAAc"}