@yahoo/uds 3.125.1 → 3.126.0

package/dist/components/index.js

@@ -1,12 +1,17 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { Pressable } from "./client/Pressable.js";
+import { Icon } from "./Icon.js";
+import { Text } from "./Text.js";
+import { Banner } from "./Banner/Banner.js";
+import { BannerContent } from "./Banner/BannerContent.js";
+import { BannerDescription } from "./Banner/BannerDescription.js";
+import { BannerTitle } from "./Banner/BannerTitle.js";
 import { Box } from "./Box.js";
 import { HStack } from "./HStack.js";
-import { Text } from "./Text.js";
 import { VStack } from "./VStack.js";
 import { Divider } from "./Divider/Divider.js";
 import { FormLabel } from "./FormLabel.js";
-import { Icon } from "./Icon.js";
 import { Image } from "./Image.js";
 import { Link } from "./Link.js";
 import { Scrim } from "./Scrim.js";
@@ -26,7 +31,6 @@ import { SpringMotionConfig } from "./client/SpringMotionConfig.js";
 import { Button } from "./client/Button.js";
 import { Checkbox } from "./client/Checkbox.js";
 import { ChipButton } from "./client/Chip/ChipButton.js";
-import { Pressable } from "./client/Pressable.js";
 import { ChipDismissible } from "./client/Chip/ChipDismissible.js";
 import { ChipLink } from "./client/Chip/ChipLink.js";
 import { ChipToggle } from "./client/Chip/ChipToggle.js";
@@ -61,6 +65,10 @@ var components_exports = /* @__PURE__ */ __exportAll({
 	AvatarImage: () => AvatarImage,
 	AvatarText: () => AvatarText,
 	Badge: () => Badge,
+	Banner: () => Banner,
+	BannerContent: () => BannerContent,
+	BannerDescription: () => BannerDescription,
+	BannerTitle: () => BannerTitle,
 	BottomSheet: () => BottomSheet,
 	BottomSheetContent: () => BottomSheetContent,
 	BottomSheetDismiss: () => BottomSheetDismiss,
@@ -114,4 +122,4 @@ var components_exports = /* @__PURE__ */ __exportAll({
 });
 
 //#endregion
-export { Avatar, AvatarIcon, AvatarImage, AvatarText, Badge, BottomSheet, BottomSheetContent, BottomSheetDismiss, BottomSheetHeader, BottomSheetProvider, BottomSheetTrigger, Box, Button, Checkbox, Chip, ChipButton, ChipDismissible, ChipLink, ChipToggle, Divider, FormLabel, HStack, Icon, IconButton, Image, Input, InputHelpText, Link, Menu_index_exports as Menu, Popover, PopoverContent, PopoverTrigger, Pressable, Radio, RadioGroupProvider, Scrim, SpringMotionConfig, Switch, Text, Toast, ToastContainer, ToastPortal, Tooltip, TooltipContent, TooltipTrigger, UDSBreakpointsConfigProvider, UDSConfigProvider, UDSPopoverConfigProvider, UDSToastConfigProvider, UDSTooltipConfigProvider, VStack, components_exports, createToast, useBottomSheetStore, useBreakpointsConfig, useToastConfig };
+export { Avatar, AvatarIcon, AvatarImage, AvatarText, Badge, Banner, BannerContent, BannerDescription, BannerTitle, BottomSheet, BottomSheetContent, BottomSheetDismiss, BottomSheetHeader, BottomSheetProvider, BottomSheetTrigger, Box, Button, Checkbox, Chip, ChipButton, ChipDismissible, ChipLink, ChipToggle, Divider, FormLabel, HStack, Icon, IconButton, Image, Input, InputHelpText, Link, Menu_index_exports as Menu, Popover, PopoverContent, PopoverTrigger, Pressable, Radio, RadioGroupProvider, Scrim, SpringMotionConfig, Switch, Text, Toast, ToastContainer, ToastPortal, Tooltip, TooltipContent, TooltipTrigger, UDSBreakpointsConfigProvider, UDSConfigProvider, UDSPopoverConfigProvider, UDSToastConfigProvider, UDSTooltipConfigProvider, VStack, components_exports, createToast, useBottomSheetStore, useBreakpointsConfig, useToastConfig };

package/dist/config/dist/index.cjs

@@ -2,7 +2,7 @@
 
 //#region ../config/dist/index.js
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
-const LATEST_MIGRATION_VERSION = "v0.88.0";
+const LATEST_MIGRATION_VERSION = "v0.89.0";
 /**
 * NOTE: If you're building a feature with a migration,
 * this type will likely throw.  You can regenerate yosConfig
@@ -85,12 +85,12 @@ const defaultTokensConfig = {
 					valueType: "alias"
 				} }
 			},
-			"size/lg/icon": { iconSize: { rest: {
+			"size/2xl/icon": { iconSize: { rest: {
 				type: "iconSizes",
 				value: "lg",
 				valueType: "alias"
 			} } },
-			"size/lg/root": {
+			"size/2xl/root": {
 				borderWidth: { rest: {
 					type: "borderWidths",
 					value: "thin",
@@ -98,26 +98,26 @@ const defaultTokensConfig = {
 				} },
 				height: { rest: {
 					type: "spacingAliases",
-					value: "12",
+					value: "20",
 					valueType: "alias"
 				} },
 				textVariant: { rest: {
 					type: "textVariants",
-					value: "title4",
+					value: "title3",
 					valueType: "alias"
 				} },
 				width: { rest: {
 					type: "spacingAliases",
-					value: "12",
+					value: "20",
 					valueType: "alias"
 				} }
 			},
-			"size/md/icon": { iconSize: { rest: {
+			"size/2xs/icon": { iconSize: { rest: {
 				type: "iconSizes",
-				value: "md",
+				value: "xs",
 				valueType: "alias"
 			} } },
-			"size/md/root": {
+			"size/2xs/root": {
 				borderWidth: { rest: {
 					type: "borderWidths",
 					value: "thin",
@@ -125,26 +125,26 @@ const defaultTokensConfig = {
 				} },
 				height: { rest: {
 					type: "spacingAliases",
-					value: "10",
+					value: "5",
 					valueType: "alias"
 				} },
 				textVariant: { rest: {
 					type: "textVariants",
-					value: "headline1",
+					value: "legal1",
 					valueType: "alias"
 				} },
 				width: { rest: {
 					type: "spacingAliases",
-					value: "10",
+					value: "5",
 					valueType: "alias"
 				} }
 			},
-			"size/sm/icon": { iconSize: { rest: {
+			"size/3xl/icon": { iconSize: { rest: {
 				type: "iconSizes",
-				value: "sm",
+				value: "lg",
 				valueType: "alias"
 			} } },
-			"size/sm/root": {
+			"size/3xl/root": {
 				borderWidth: { rest: {
 					type: "borderWidths",
 					value: "thin",
@@ -152,26 +152,26 @@ const defaultTokensConfig = {
 				} },
 				height: { rest: {
 					type: "spacingAliases",
-					value: "7",
+					value: "24",
 					valueType: "alias"
 				} },
 				textVariant: { rest: {
 					type: "textVariants",
-					value: "caption1",
+					value: "title3",
 					valueType: "alias"
 				} },
 				width: { rest: {
 					type: "spacingAliases",
-					value: "7",
+					value: "24",
 					valueType: "alias"
 				} }
 			},
-			"size/xl/icon": { iconSize: { rest: {
+			"size/lg/icon": { iconSize: { rest: {
 				type: "iconSizes",
 				value: "lg",
 				valueType: "alias"
 			} } },
-			"size/xl/root": {
+			"size/lg/root": {
 				borderWidth: { rest: {
 					type: "borderWidths",
 					value: "thin",
@@ -179,26 +179,26 @@ const defaultTokensConfig = {
 				} },
 				height: { rest: {
 					type: "spacingAliases",
-					value: "16",
+					value: "12",
 					valueType: "alias"
 				} },
 				textVariant: { rest: {
 					type: "textVariants",
-					value: "title3",
+					value: "title4",
 					valueType: "alias"
 				} },
 				width: { rest: {
 					type: "spacingAliases",
-					value: "16",
+					value: "12",
 					valueType: "alias"
 				} }
 			},
-			"size/xs/icon": { iconSize: { rest: {
+			"size/md/icon": { iconSize: { rest: {
 				type: "iconSizes",
-				value: "sm",
+				value: "md",
 				valueType: "alias"
 			} } },
-			"size/xs/root": {
+			"size/md/root": {
 				borderWidth: { rest: {
 					type: "borderWidths",
 					value: "thin",
@@ -206,26 +206,26 @@ const defaultTokensConfig = {
 				} },
 				height: { rest: {
 					type: "spacingAliases",
-					value: "6",
+					value: "10",
 					valueType: "alias"
 				} },
 				textVariant: { rest: {
 					type: "textVariants",
-					value: "caption2",
+					value: "headline1",
 					valueType: "alias"
 				} },
 				width: { rest: {
 					type: "spacingAliases",
-					value: "6",
+					value: "10",
 					valueType: "alias"
 				} }
 			},
-			"size/2xs/icon": { iconSize: { rest: {
+			"size/sm/icon": { iconSize: { rest: {
 				type: "iconSizes",
-				value: "xs",
+				value: "sm",
 				valueType: "alias"
 			} } },
-			"size/2xs/root": {
+			"size/sm/root": {
 				borderWidth: { rest: {
 					type: "borderWidths",
 					value: "thin",
@@ -233,26 +233,26 @@ const defaultTokensConfig = {
 				} },
 				height: { rest: {
 					type: "spacingAliases",
-					value: "5",
+					value: "7",
 					valueType: "alias"
 				} },
 				textVariant: { rest: {
 					type: "textVariants",
-					value: "legal1",
+					value: "caption1",
 					valueType: "alias"
 				} },
 				width: { rest: {
 					type: "spacingAliases",
-					value: "5",
+					value: "7",
 					valueType: "alias"
 				} }
 			},
-			"size/2xl/icon": { iconSize: { rest: {
+			"size/xl/icon": { iconSize: { rest: {
 				type: "iconSizes",
 				value: "lg",
 				valueType: "alias"
 			} } },
-			"size/2xl/root": {
+			"size/xl/root": {
 				borderWidth: { rest: {
 					type: "borderWidths",
 					value: "thin",
@@ -260,7 +260,7 @@ const defaultTokensConfig = {
 				} },
 				height: { rest: {
 					type: "spacingAliases",
-					value: "20",
+					value: "16",
 					valueType: "alias"
 				} },
 				textVariant: { rest: {
@@ -270,16 +270,16 @@ const defaultTokensConfig = {
 				} },
 				width: { rest: {
 					type: "spacingAliases",
-					value: "20",
+					value: "16",
 					valueType: "alias"
 				} }
 			},
-			"size/3xl/icon": { iconSize: { rest: {
+			"size/xs/icon": { iconSize: { rest: {
 				type: "iconSizes",
-				value: "lg",
+				value: "sm",
 				valueType: "alias"
 			} } },
-			"size/3xl/root": {
+			"size/xs/root": {
 				borderWidth: { rest: {
 					type: "borderWidths",
 					value: "thin",
@@ -287,17 +287,17 @@ const defaultTokensConfig = {
 				} },
 				height: { rest: {
 					type: "spacingAliases",
-					value: "24",
+					value: "6",
 					valueType: "alias"
 				} },
 				textVariant: { rest: {
 					type: "textVariants",
-					value: "title3",
+					value: "caption2",
 					valueType: "alias"
 				} },
 				width: { rest: {
 					type: "spacingAliases",
-					value: "24",
+					value: "6",
 					valueType: "alias"
 				} }
 			},
@@ -967,6 +967,320 @@ const defaultTokensConfig = {
 			}
 		}
 	},
+	banner: {
+		defaults: {
+			size: "default",
+			variant: "primary"
+		},
+		variables: {
+			"size/default/close": { size: { rest: {
+				type: "iconSizes",
+				value: "sm",
+				valueType: "alias"
+			} } },
+			"size/default/description": { textVariant: { rest: {
+				type: "textVariants",
+				value: "ui3",
+				valueType: "alias"
+			} } },
+			"size/default/icon": { size: { rest: {
+				type: "iconSizes",
+				value: "md",
+				valueType: "alias"
+			} } },
+			"size/default/root": {
+				borderRadius: { rest: {
+					type: "borderRadii",
+					value: "lg",
+					valueType: "alias"
+				} },
+				gap: { rest: {
+					type: "spacingAliases",
+					value: "2",
+					valueType: "alias"
+				} },
+				spacingHorizontal: { rest: {
+					type: "spacingAliases",
+					value: "3",
+					valueType: "alias"
+				} },
+				spacingVertical: { rest: {
+					type: "spacingAliases",
+					value: "3",
+					valueType: "alias"
+				} }
+			},
+			"size/default/title": { textVariant: { rest: {
+				type: "textVariants",
+				value: "ui3/emphasized",
+				valueType: "alias"
+			} } },
+			"variant/alert-secondary/icon": { color: { rest: {
+				type: "foregroundPaletteColors",
+				value: "alert-secondary",
+				valueType: "alias"
+			} } },
+			"variant/alert-secondary/root": {
+				backgroundColor: { rest: {
+					type: "backgroundPaletteColors",
+					value: "primary",
+					valueType: "alias"
+				} },
+				borderColor: { rest: {
+					type: "linePaletteColors",
+					value: "alert-secondary",
+					valueType: "alias"
+				} },
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} }
+			},
+			"variant/alert/icon": { color: { rest: {
+				type: "foregroundPaletteColors",
+				value: "alert",
+				valueType: "alias"
+			} } },
+			"variant/alert/root": {
+				backgroundColor: { rest: {
+					type: "backgroundPaletteColors",
+					value: "alert-secondary",
+					valueType: "alias"
+				} },
+				borderColor: { rest: {
+					type: "linePaletteColors",
+					value: "muted",
+					valueType: "alias"
+				} },
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} }
+			},
+			"variant/brand-secondary/icon": { color: { rest: {
+				type: "foregroundPaletteColors",
+				value: "secondary",
+				valueType: "alias"
+			} } },
+			"variant/brand-secondary/root": {
+				backgroundColor: { rest: {
+					type: "backgroundPaletteColors",
+					value: "primary",
+					valueType: "alias"
+				} },
+				borderColor: { rest: {
+					type: "linePaletteColors",
+					value: "brand",
+					valueType: "alias"
+				} },
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} }
+			},
+			"variant/brand/icon": { color: { rest: {
+				type: "foregroundPaletteColors",
+				value: "secondary",
+				valueType: "alias"
+			} } },
+			"variant/brand/root": {
+				backgroundColor: { rest: {
+					type: "backgroundPaletteColors",
+					value: "brand-secondary",
+					valueType: "alias"
+				} },
+				borderColor: { rest: {
+					type: "linePaletteColors",
+					value: "muted",
+					valueType: "alias"
+				} },
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} }
+			},
+			"variant/info-secondary/icon": { color: { rest: {
+				type: "foregroundPaletteColors",
+				value: "info",
+				valueType: "alias"
+			} } },
+			"variant/info-secondary/root": {
+				backgroundColor: { rest: {
+					type: "backgroundPaletteColors",
+					value: "primary",
+					valueType: "alias"
+				} },
+				borderColor: { rest: {
+					type: "linePaletteColors",
+					value: "info-secondary",
+					valueType: "alias"
+				} },
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} }
+			},
+			"variant/info/icon": { color: { rest: {
+				type: "foregroundPaletteColors",
+				value: "info",
+				valueType: "alias"
+			} } },
+			"variant/info/root": {
+				backgroundColor: { rest: {
+					type: "backgroundPaletteColors",
+					value: "info-secondary",
+					valueType: "alias"
+				} },
+				borderColor: { rest: {
+					type: "linePaletteColors",
+					value: "muted",
+					valueType: "alias"
+				} },
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} }
+			},
+			"variant/primary/icon": { color: { rest: {
+				type: "foregroundPaletteColors",
+				value: "secondary",
+				valueType: "alias"
+			} } },
+			"variant/primary/root": {
+				backgroundColor: { rest: {
+					type: "backgroundPaletteColors",
+					value: "accent",
+					valueType: "alias"
+				} },
+				borderColor: { rest: {
+					type: "linePaletteColors",
+					value: "muted",
+					valueType: "alias"
+				} },
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} }
+			},
+			"variant/secondary/icon": { color: { rest: {
+				type: "foregroundPaletteColors",
+				value: "secondary",
+				valueType: "alias"
+			} } },
+			"variant/secondary/root": {
+				backgroundColor: { rest: {
+					type: "backgroundPaletteColors",
+					value: "primary",
+					valueType: "alias"
+				} },
+				borderColor: { rest: {
+					type: "linePaletteColors",
+					value: "accent",
+					valueType: "alias"
+				} },
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} }
+			},
+			"variant/success-secondary/icon": { color: { rest: {
+				type: "foregroundPaletteColors",
+				value: "positive-secondary",
+				valueType: "alias"
+			} } },
+			"variant/success-secondary/root": {
+				backgroundColor: { rest: {
+					type: "backgroundPaletteColors",
+					value: "primary",
+					valueType: "alias"
+				} },
+				borderColor: { rest: {
+					type: "linePaletteColors",
+					value: "positive-secondary",
+					valueType: "alias"
+				} },
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} }
+			},
+			"variant/success/icon": { color: { rest: {
+				type: "foregroundPaletteColors",
+				value: "positive",
+				valueType: "alias"
+			} } },
+			"variant/success/root": {
+				backgroundColor: { rest: {
+					type: "backgroundPaletteColors",
+					value: "positive-secondary",
+					valueType: "alias"
+				} },
+				borderColor: { rest: {
+					type: "linePaletteColors",
+					value: "muted",
+					valueType: "alias"
+				} },
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} }
+			},
+			"variant/warning-secondary/icon": { color: { rest: {
+				type: "foregroundPaletteColors",
+				value: "warning-secondary",
+				valueType: "alias"
+			} } },
+			"variant/warning-secondary/root": {
+				backgroundColor: { rest: {
+					type: "backgroundPaletteColors",
+					value: "primary",
+					valueType: "alias"
+				} },
+				borderColor: { rest: {
+					type: "linePaletteColors",
+					value: "warning-secondary",
+					valueType: "alias"
+				} },
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} }
+			},
+			"variant/warning/icon": { color: { rest: {
+				type: "foregroundPaletteColors",
+				value: "warning",
+				valueType: "alias"
+			} } },
+			"variant/warning/root": {
+				backgroundColor: { rest: {
+					type: "backgroundPaletteColors",
+					value: "warning-secondary",
+					valueType: "alias"
+				} },
+				borderColor: { rest: {
+					type: "linePaletteColors",
+					value: "muted",
+					valueType: "alias"
+				} },
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} }
+			}
+		}
+	},
 	bottomSheet: {
 		defaults: { variant: "default" },
 		variables: {
@@ -17510,6 +17824,9 @@ const defaultTokensConfig = {
 	scaleMode: {
 		large: {
 			avatarSizes: {
+				"2xl": 72,
+				"2xs": 20,
+				"3xl": 80,
 				lg: 52,
 				md: 40,
 				sm: 28,
@@ -17540,6 +17857,9 @@ const defaultTokensConfig = {
 		},
 		medium: {
 			avatarSizes: {
+				"2xl": 72,
+				"2xs": 20,
+				"3xl": 80,
 				lg: 52,
 				md: 40,
 				sm: 28,
@@ -17570,6 +17890,9 @@ const defaultTokensConfig = {
 		},
 		small: {
 			avatarSizes: {
+				"2xl": 72,
+				"2xs": 20,
+				"3xl": 80,
 				lg: 52,
 				md: 40,
 				sm: 28,
@@ -17600,6 +17923,9 @@ const defaultTokensConfig = {
 		},
 		xLarge: {
 			avatarSizes: {
+				"2xl": 72,
+				"2xs": 20,
+				"3xl": 80,
 				lg: 52,
 				md: 40,
 				sm: 28,
@@ -17630,6 +17956,9 @@ const defaultTokensConfig = {
 		},
 		xSmall: {
 			avatarSizes: {
+				"2xl": 72,
+				"2xs": 20,
+				"3xl": 80,
 				lg: 52,
 				md: 40,
 				sm: 28,
@@ -17660,6 +17989,9 @@ const defaultTokensConfig = {
 		},
 		xxLarge: {
 			avatarSizes: {
+				"2xl": 72,
+				"2xs": 20,
+				"3xl": 80,
 				lg: 52,
 				md: 40,
 				sm: 28,
@@ -17690,6 +18022,9 @@ const defaultTokensConfig = {
 		},
 		xxxLarge: {
 			avatarSizes: {
+				"2xl": 72,
+				"2xs": 20,
+				"3xl": 80,
 				lg: 52,
 				md: 40,
 				sm: 28,
@@ -27135,7 +27470,7 @@ const defaultTokensConfig = {
 			}
 		}
 	},
-	version: "v0.88.0",
+	version: "v0.89.0",
 	version: LATEST_MIGRATION_VERSION
 };