@yahoo/uds-mobile 1.3.0-beta.8 → 1.3.0

package/dist/components/HStack.mjs

@@ -1,4 +1,4 @@
-/*! © 2026 Yahoo, Inc. UDS Mobile v1.3.0-beta.7 */
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { Box } from "./Box.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -11,6 +11,9 @@ import { jsx } from "react/jsx-runtime";
 * A convenience component for creating horizontal layouts. It's a Box with
 * `flexDirection="row"` preset.
 *
+* @category Layout
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { HStack } from '@yahoo/uds-mobile';
@@ -25,11 +28,10 @@ import { jsx } from "react/jsx-runtime";
 * - Use for horizontal arrangements of elements
 * - Use gap prop for consistent spacing between children
 *
-* @see The {@link https://uds.build/docs/components/h-stack HStack Docs} for more info
-*
-* @related [VStack](https://uds.build/docs/components/v-stack), [Box](https://uds.build/docs/components/box)
+* @see {@link VStack} for vertical layouts
+* @see {@link Box} for custom flex layouts
 */
-const HStack = memo(function HStack$1({ gap, children, ref, ...props }) {
+const HStack = memo(function HStack({ gap, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Box, {
 		ref,
 		flexDirection: "row",

package/dist/components/HStack.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HStack.mjs","names":["HStack"],"sources":["../../src/components/HStack.tsx"],"sourcesContent":["import type { Ref } from 'react';\nimport { memo } from 'react';\nimport type { View } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport type { BoxProps } from './Box';\nimport { Box } from './Box';\n\ninterface HStackProps extends Omit<BoxProps, 'ref'> {\n  gap?: StyleProps['columnGap'];\n  ref?: Ref<View>;\n}\n\n/**\n * **📦 A horizontal stack layout component**\n *\n * @description\n * A convenience component for creating horizontal layouts. It's a Box with\n * `flexDirection=\"row\"` preset.\n *\n * @example\n * ```tsx\n * import { HStack } from '@yahoo/uds-mobile';\n *\n * <HStack gap=\"4\" alignItems=\"center\">\n *   <Text>Item 1</Text>\n *   <Text>Item 2</Text>\n * </HStack>\n * ```\n *\n * @usage\n * - Use for horizontal arrangements of elements\n * - Use gap prop for consistent spacing between children\n *\n * @see The {@link https://uds.build/docs/components/h-stack HStack Docs} for more info\n *\n * @related [VStack](https://uds.build/docs/components/v-stack), [Box](https://uds.build/docs/components/box)\n */\nconst HStack = memo(function HStack({ gap, children, ref, ...props }: HStackProps) {\n  return (\n    <Box ref={ref} flexDirection=\"row\" rowGap={gap} columnGap={gap} {...props}>\n      {children}\n    </Box>\n  );\n});\n\nHStack.displayName = 'HStack';\n\nexport { HStack, type HStackProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAM,SAAS,KAAK,SAASA,SAAO,EAAE,KAAK,UAAU,KAAK,GAAG,SAAsB;AACjF,QACE,oBAAC;EAAS;EAAK,eAAc;EAAM,QAAQ;EAAK,WAAW;EAAK,GAAI;EACjE;GACG;EAER;AAEF,OAAO,cAAc"}
+{"version":3,"file":"HStack.mjs","names":[],"sources":["../../src/components/HStack.tsx"],"sourcesContent":["import type { Ref } from 'react';\nimport { memo } from 'react';\nimport type { View } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport type { BoxProps } from './Box';\nimport { Box } from './Box';\n\ninterface HStackProps extends Omit<BoxProps, 'ref'> {\n  /** Gap between child elements */\n  gap?: StyleProps['columnGap'];\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n}\n\n/**\n * **📦 A horizontal stack layout component**\n *\n * @description\n * A convenience component for creating horizontal layouts. It's a Box with\n * `flexDirection=\"row\"` preset.\n *\n * @category Layout\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { HStack } from '@yahoo/uds-mobile';\n *\n * <HStack gap=\"4\" alignItems=\"center\">\n *   <Text>Item 1</Text>\n *   <Text>Item 2</Text>\n * </HStack>\n * ```\n *\n * @usage\n * - Use for horizontal arrangements of elements\n * - Use gap prop for consistent spacing between children\n *\n * @see {@link VStack} for vertical layouts\n * @see {@link Box} for custom flex layouts\n */\nconst HStack = memo(function HStack({ gap, children, ref, ...props }: HStackProps) {\n  return (\n    <Box ref={ref} flexDirection=\"row\" rowGap={gap} columnGap={gap} {...props}>\n      {children}\n    </Box>\n  );\n});\n\nHStack.displayName = 'HStack';\n\nexport { HStack, type HStackProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAM,SAAS,KAAK,SAAS,OAAO,EAAE,KAAK,UAAU,KAAK,GAAG,SAAsB;AACjF,QACE,oBAAC;EAAS;EAAK,eAAc;EAAM,QAAQ;EAAK,WAAW;EAAK,GAAI;EACjE;GACG;EAER;AAEF,OAAO,cAAc"}

package/dist/components/Icon.cjs

@@ -1,5 +1,6 @@
-/*! © 2026 Yahoo, Inc. UDS Mobile v1.3.0-beta.7 */
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+/*! © 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_glyphMap = require('../icons/dist/glyphMap.cjs');
 const require_svgMap = require('../icons/dist/svgMap.cjs');
 const require_tokens = require('../icons/dist/tokens.cjs');
@@ -22,7 +23,7 @@ const DEFAULT_PROPS = {
 * Uses useUnistyles() for reactive theme access - isolated here so
 * glyph-based icons don't pay the hook overhead.
 */
-const MulticolorIcon = (0, react.memo)(function MulticolorIcon$1({ name, size = DEFAULT_PROPS.size, flexShrink = DEFAULT_PROPS.flexShrink, backgroundColor, dangerouslySetSize }) {
+const MulticolorIcon = (0, react.memo)(function MulticolorIcon({ name, size = DEFAULT_PROPS.size, flexShrink = DEFAULT_PROPS.flexShrink, backgroundColor, dangerouslySetSize }) {
 	const { rt } = (0, react_native_unistyles.useUnistyles)();
 	const colorScheme = rt.themeName === "dark" ? "dark" : "light";
 	const pixelSize = require_tokens.ICON_SIZE_MAP[size];
@@ -45,7 +46,7 @@ const MulticolorIcon = (0, react.memo)(function MulticolorIcon$1({ name, size =
 		})
 	});
 });
-const OutlineOrFillIcon = (0, react.memo)(function OutlineOrFillIcon$1({ name, size = DEFAULT_PROPS.size, color = DEFAULT_PROPS.color, variant = DEFAULT_PROPS.variant, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, flexShrink = "0", spacingStart, spacingEnd, spacingTop, spacingBottom, spacingHorizontal, spacingVertical, spacing, offsetStart, offsetEnd, offsetTop, offsetBottom, offsetHorizontal, offsetVertical, offset, dangerouslySetColor, dangerouslySetSize, style, ref, ...props }) {
+const OutlineOrFillIcon = (0, react.memo)(function OutlineOrFillIcon({ name, size = DEFAULT_PROPS.size, color = DEFAULT_PROPS.color, variant = DEFAULT_PROPS.variant, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, flexShrink = "0", spacingStart, spacingEnd, spacingTop, spacingBottom, spacingHorizontal, spacingVertical, spacing, offsetStart, offsetEnd, offsetTop, offsetBottom, offsetHorizontal, offsetVertical, offset, dangerouslySetColor, dangerouslySetSize, style, ref, ...props }) {
 	const pixelSize = require_tokens.ICON_SIZE_MAP[size];
 	generated_styles.styles.useVariants({
 		color,
@@ -118,12 +119,16 @@ const OutlineOrFillIcon = (0, react.memo)(function OutlineOrFillIcon$1({ name, s
 * Renders icons from the UDS icon library. Supports multiple variants
 * (outline, fill, multicolor) and sizes.
 *
+* @category Display
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Icon } from '@yahoo/uds-mobile';
 *
 * <Icon name="ChevronRight" size="md" color="primary" />
 * <Icon name="Star" variant="fill" color="accent" />
+* <Icon name="Yahoo" variant="multicolor" />
 * ```
 *
 * @usage
@@ -131,9 +136,15 @@ const OutlineOrFillIcon = (0, react.memo)(function OutlineOrFillIcon$1({ name, s
 * - Use variant prop for outline/fill/multicolor
 * - Use size prop for icon size (xs, sm, md, lg, xl)
 *
-* @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
+* @accessibility
+* - Sets `accessibilityRole="image"` automatically
+* - Icon name is used as accessibility label
+* - For decorative icons, set `accessibilityElementsHidden`
+*
+* @see {@link IconButton} for clickable icons
+* @see {@link IconSlot} for flexible icon rendering in components
 */
-const Icon = (0, react.memo)(function Icon$1({ variant, ...props }) {
+const Icon = (0, react.memo)(function Icon({ variant, ...props }) {
 	if (variant === "multicolor") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MulticolorIcon, { ...props });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OutlineOrFillIcon, {
 		variant,

package/dist/components/Icon.d.cts

@@ -2,7 +2,7 @@
 import { GlyphName } from "../icons/dist/glyphMap.cjs";
 import { SvgGlyphName } from "../icons/dist/svgMap.cjs";
 import { IconSize, IconVariant } from "../types/dist/index.cjs";
-import * as react12 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { StyleProp, Text, TextProps, TextStyle } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -10,6 +10,7 @@ import { StyleProps } from "../../generated/styles";
 //#region src/components/Icon.d.ts
 type IconName = GlyphName | SvgGlyphName;
 interface IconProps extends Omit<TextProps, 'style'> {
+  /** Ref to the underlying Text element */
   ref?: Ref<Text>;
   /** The icon name */
   name: IconName;
@@ -66,12 +67,16 @@ interface IconProps extends Omit<TextProps, 'style'> {
  * Renders icons from the UDS icon library. Supports multiple variants
  * (outline, fill, multicolor) and sizes.
  *
+ * @category Display
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Icon } from '@yahoo/uds-mobile';
  *
  * <Icon name="ChevronRight" size="md" color="primary" />
  * <Icon name="Star" variant="fill" color="accent" />
+ * <Icon name="Yahoo" variant="multicolor" />
  * ```
  *
  * @usage
@@ -79,9 +84,15 @@ interface IconProps extends Omit<TextProps, 'style'> {
  * - Use variant prop for outline/fill/multicolor
  * - Use size prop for icon size (xs, sm, md, lg, xl)
  *
- * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
+ * @accessibility
+ * - Sets `accessibilityRole="image"` automatically
+ * - Icon name is used as accessibility label
+ * - For decorative icons, set `accessibilityElementsHidden`
+ *
+ * @see {@link IconButton} for clickable icons
+ * @see {@link IconSlot} for flexible icon rendering in components
  */
-declare const Icon: react12.NamedExoticComponent<IconProps>;
+declare const Icon: react.NamedExoticComponent<IconProps>;
 declare const iconNames: readonly ["A11Y", "Accessible", "AccountRecover", "AccountRefresh", "AccountSwitchAlt", "AccountSwitcher", "AcousticGuitar", "Add", "AddBell", "AddCalendar", "AddCheckCircle", "AddCircle", "AddContactCard", "AddDocument", "AddFace", "AddFolder", "AddPaperPlane", "AddPeople", "AddQuestion", "AddSearch", "AddSquare", "AffiliateLink", "AirQuality", "Airplane", "AirplaneLanding", "AirplaneTakeOff", "AngledSquareOnSquare", "AnyFile", "AppSwitcher", "AquariusAstrology", "Archive", "AriesAstrology", "ArrowDown", "ArrowDownCircle", "ArrowLeft", "ArrowLineDown", "ArrowLineUp", "ArrowRight", "ArrowUp", "Article", "ArtisticGymnastics", "Ascender", "AudioFile", "Authenticator", "AutoDownload", "AutoSaveOffline", "AutoSaveSync", "AutoSaveUpload", "AutoSaveUploadFail", "AutoSaved", "BabyBottle", "BackTimeTen", "Badge", "Balance", "BallInWater", "Barometer", "BaseBallBat", "Baseball", "Basketball", "BasketballHoop", "BeachUmbrella", "Bed", "Bell", "Below", "BigDownArrow", "BigLeftArrow", "BigRightArrow", "BigRightStraightArrow", "BigUpArrow", "Bike", "Bingo", "Binoculars", "BlackJack", "Bold", "Bolt", "Bookmark", "BottomLine", "BowAndArrow", "BoxCircle", "BoxFront", "BoxOnBox", "BoxingGlove", "Browser", "BubbleZone", "Building", "BulletPointContainer", "BulletPoints", "Bullseye", "BusFront", "BusinessBag", "Cake", "Calendar", "CalendarClock", "CalendarConfirm", "CalendarFile", "CalendarICSFile", "CalendarRightArrow", "Camera", "CancerAstrology", "Canoe", "CapriconAstrology", "Car", "CardsCheck", "Cash", "CelebrityStar", "CenterAlignment", "ChatAi", "Check", "CheckBookmark", "CheckBox", "CheckCircle", "CheckDocuments", "CheckEnvelope", "CheckPeople", "CheckSpeechBubble", "CheckVoteBallot", "Checklist", "ChevronDown", "ChevronLeft", "ChevronLeftPeople", "ChevronRight", "ChevronRightPeople", "ChevronUp", "Circle", "ClearText", "Clipboard", "Clock", "Clone", "ClosedCaption", "Cloud", "CloudDay", "CloudNight", "Cocktails", "Coffee", "CoffeeTakeout", "Cog", "Coin", "CollapseColumn", "Command", "Compass", "ComputerChip", "Connection", "ConnectionScreen", "ContactBook", "ContactCard", "Convert", "ConvertAlt", "ConvertLeft", "ConvertRight", "Cookies", "Coupon", "CreditCard", "CreditCardPayment", "CrescentMoon", "Cricket", "Cross", "CrossCircle", "CrossEnvelope", "CrossPeople", "CrossShield", "Crossword", "Cycling", "DOCFile", "DailyFantasy", "DaisyFlower", "Dandelion", "DataBook", "DataCloud", "DataSilo", "DataStorage", "Debug", "DeleteTab", "DeliveryPackage", "Dense", "DenyCircle", "Descender", "Desktop", "DiagonalKey", "DiagonalLeftDown", "DiagonalLeftUp", "DiagonalRightDown", "DiagonalRightUp", "Diamond", "Dice", "Dining", "Direction", "DiscoBall", "Document", "DocumentImageRectangle", "DocumentImageSquare", "DocumentRectangle", "DollarCircleArrows", "DotEnvelope", "DotTwoRings", "DoubleBigLeftArrow", "DoubleChevronLeft", "DoubleChevronRight", "DownCurveArrow", "Download", "DownloadCircle", "DownloadComplete", "DownloadInProgressCircle", "DraftDocument", "DragVertical", "Dusk", "Easel", "Eclipse", "Edit", "EmailVerification", "Emails", "Embed", "EntertainmentTv", "Envelope", "Error", "ExpandArrowLeft", "ExpandArrowRight", "ExpandColumn", "Eye", "EyeSearch", "EyeShut", "FaceID", "FallLeaf", "Family", "FastForward", "FencingEpee", "FilmReel", "FilmRoll", "FingerPointLeftArrow", "FingerPointRightArrow", "FingerPointSelect", "FingerPrint", "Fire", "FirstAidKit", "FirstQuarter", "FiveCircles", "Flag", "FlameTorch", "Fog", "FogDay", "Folder", "Font", "Football", "FootballHelmet", "ForestTree", "FourBoxes", "FourCorners", "FourCornersMagnifyingGlass", "FourCornersMusicNote", "FourLinesSpread", "FourThreeRatio", "FullMoon", "GIF", "GeminiAstrology", "GiftBox", "GolfTee", "GraduationHat", "Graph", "Gymnastics", "HalfStar", "HalfSun", "HappyFace", "HazeDay", "HazeNight", "Heading2", "Heading3", "Headline1", "HeadlineDocumentSquare", "Headphone", "HeadphonesMic", "Heart", "HeartArrow", "HeartPulse", "HeavyRain", "HeavyRainDay", "HeavyRainLightning", "HeavyRainLightningDay", "HeavyRainLightningNight", "HeavyRainNight", "Help", "Highlighter", "History", "HockeyWithPuck", "Home", "HorseHeadBridle", "HotTub", "Hurricane", "Ice", "Id", "Image", "ImageFile", "ImageGallery", "Inbox", "InboxDownArrow", "InboxUpArrow", "IndentRight", "Infinity", "Info", "InstitutionalWesternBank", "Italics", "JoyfulFace", "JudoUniform", "Keyboard", "KeylineShapes", "Kick", "KnightChessPiece", "Laptop", "LaptopWithPhone", "Laurel", "LaurelLeft", "LaurelRight", "LayoutBottom", "LayoutDefault", "LayoutFourColumn", "LayoutGrid", "LayoutPerfectGrid", "LayoutRight", "LayoutThreeColumn", "LayoutThreeRows", "LayoutTwoColumn", "LeftAlign", "LeftCurveArrow", "LeftPageArrow", "LeoAstrology", "Letter", "LetterColor", "LetterSize", "LibraAstrology", "LifeRing", "Lightbulb", "Lightning", "LightningDay", "LightningNight", "Link", "LiquidDrop", "Live", "Livestream", "Location", "LocationCircle", "LocationMap", "Lock", "LogIn", "LogOut", "Lollipop", "LoveEnvelope", "LoyaltyCard", "MagicWand", "MagnifyingGlass", "Mahjong", "MakeupBeauty", "Mannequin", "Medal", "MedicineBottle", "MedicinePill", "Megaphone", "Microphone", "Microscope", "Minus", "MinusBox", "MinusCircle", "MinusPeople", "MinusSearch", "MmaGlove", "MmaRing", "MobileNumber", "MobilePhone", "More", "MoreVertical", "NeutralFace", "NewMoon", "Newsletter", "Night", "NineSixteenRatio", "NoBell", "NoConnectionScreen", "NoEye", "NoHeart", "NoImage", "NoPeople", "NoShield", "NoSmoking", "NoSquare", "NoStar", "NoVideoCamera", "NoWifi", "NotificationBell", "Null", "NumberedList", "OnTop", "OneOneRatio", "OpenBook", "OpenEnvelope", "OrderedList", "OutdentLeft", "PDF", "PPT", "PaperPlane", "PaperPlaneDiagonal", "Paperclip", "Paragraph", "ParagraphLeftIdent", "ParagraphRightIdent", "Parking", "ParkingSquare", "PassKey", "Password", "Pause", "Payments", "Payphone", "PayphoneFace", "Pencil", "PencilLines", "People", "Person", "PersonClimbing", "PersonShield", "Pets", "Phone", "PieChart", "Pin", "PingPong", "PiscesAstrology", "PlainText", "Play", "PlayCircle", "Pool", "PowerSwitch", "Preferences", "PreferencesAlt", "Printer", "Priority", "Profile", "Progress", "ProgressWithCheck", "Pulse", "PuzzlePiece", "QrCode", "QuestionBubble", "QuoteCircle", "QuoteSquare", "RAW", "RTF", "RTFOff", "RacingFlag", "Radar", "RadioCircle", "RainDay", "RainNight", "Receipt", "Receipts", "RedoPencil", "Refresh", "Restaurant", "RetailTag", "RightAlign", "RightCurveArrow", "RightPageArrow", "RobotHead", "Running", "SadFace", "SadderFace", "SagittariusAstrology", "SailBoat", "Satellite", "ScaleDown", "ScanQrCode", "Scissors", "ScorpioAstrology", "SearchConfirm", "SearchEnvelope", "SearchWorldWithLines", "SecurityKey", "SendToSelf", "Server", "SettingsAlt", "SettingsCogPeople", "Shapes", "Share", "Shield", "ShieldCheck", "ShieldSlash", "ShockedFace", "ShoppingBag", "ShoppingBasket", "ShoppingCart", "Shuttlecock", "SixteenNineRatio", "Skateboard", "SkipTimeTen", "Skull", "Slideshow", "SmallSquareInsideBigSquare", "SmartWatch", "SmileFace", "SmileFaceLife", "Sms", "SmsVerificationCode", "Sneaker", "SneakerAlt", "Snippet", "Snow", "SnowDay", "SnowNight", "Snowflake", "Soccer", "Solitaire", "SoundLow", "SoundOff", "SoundOn", "Spa", "Sparkle", "SparkleFootballBall", "SparkleTennisBall", "SpecialCharacter", "SpeechBubble", "SpeechBubbleStar", "SportsBook", "SportsSparkle", "SprinkleDay", "SprinkleNight", "Square", "Stadium", "Star", "StarArticle", "StarMedal", "StarTrophy", "StatePrivacyControls", "StockTrends", "Stopwatch", "Store", "Strikethrough", "Sun", "Sunrise", "Sunset", "SurfboardOnSand", "Swimming", "Sync", "Tab", "Tablet", "TaurusAstrology", "TechnicalRoute", "Television", "TennisBall", "TennisRacketBall", "ThirdQuarter", "ThreeCircles", "ThreeFourRatio", "ThreeLines", "ThreeLinesSpread", "ThumbsDown", "ThumbsUp", "Thumbtack", "ThumbtackDiagonal", "TimePaperPlane", "Tornado", "Trading", "TrafficSignRightTurn", "Trampoline", "Transactions", "Trash", "Trending", "TrendingCircle", "Trophy", "TruckRight", "Tshirt", "Tsunami", "Tub", "TwoArrowsDiagonalInwards", "TwoArrowsDiagonalOutwards", "TwoCorners", "TwoHorizontalRectangles", "TwoLinesContainer", "TwoMasks", "TwoRectangles", "TwoSparkles", "TwoSquares", "TwoThirdsColumn", "Underline", "Unlock", "UnorderedList", "UpCurveArrow", "UpDownChevron", "UpDownShortArrows", "UpFolder", "Upload", "Verification", "VideoCamera", "VideoFile", "VirgoAstrology", "Virus", "Volleyball", "Walking", "Wallet", "WaningCrescent", "WaningGibbous", "Warning", "WaxingCrescent", "WaxingGibbous", "Web", "Weights", "Wifi", "Wind", "WindCloud", "WindCloudDay", "WindCloudNight", "Wine", "WorldWithLines", "Wrench", "WrestlingHeadGear", "WritingAi", "XLSFile", "YEP", "ZIP"];
 declare const multicolorIconNames: readonly ["Cloud", "CloudDay", "CloudNight", "Cold", "Dreary", "Dusk", "Eclipse", "FirstQuarter", "Fog", "FogDay", "FogNight", "FullMoon", "HalfSun", "HazeDay", "HazeNight", "HeavyRain", "HeavyRainDay", "HeavyRainLightning", "HeavyRainLightningDay", "HeavyRainLightningNight", "HeavyRainNight", "Hot", "Hurricane", "Ice", "IntermittentCloudsNight", "IntermittentCloudsSunny", "Lightning", "LightningDay", "LightningNight", "MostlyNightFlurries", "Night", "PartlyCloudyNight", "PartlyFlurries", "PartlyNightFlurries", "PartlySunny", "Rain", "RainDay", "RainNight", "Sleet", "Snow", "SnowDay", "Snowflake", "SprinkleDay", "SprinkleNight", "Sun", "Sunrise", "Sunset", "ThirdQuarter", "Tornado", "WaningCrescent", "WaningGibbous", "WaxingCrescent", "WaxingGibbous", "Wind", "WindCloud", "WindCloudDay", "WindCloudNight"];
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.cts","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;KAkCK,QAAA,GAAW,YAAY;UAElB,SAAA,SAAkB,KAAK;QACzB,IAAI;EAHP;EAEK,IAAA,EAGF,QAHY;EAAa;EACrB,IAAA,CAAA,EAIH,QAJG;EAAJ;EAEA,KAAA,CAAA,EAIE,UAJF,CAAA,OAAA,CAAA;EAEC;EAEC,OAAA,CAAA,EAEE,WAFF;EAEE,eAAA,CAAA,EAEQ,UAFR,CAAA,iBAAA,CAAA;EAEQ,YAAA,CAAA,EAEH,UAFG,CAAA,cAAA,CAAA;EAEH,oBAAA,CAAA,EACQ,UADR,CAAA,sBAAA,CAAA;EACQ,kBAAA,CAAA,EACF,UADE,CAAA,oBAAA,CAAA;EACF,uBAAA,CAAA,EACK,UADL,CAAA,yBAAA,CAAA;EACK,qBAAA,CAAA,EACF,UADE,CAAA,uBAAA,CAAA;EACF,WAAA,CAAA,EACV,UADU,CAAA,aAAA,CAAA;EACV,gBAAA,CAAA,EACK,UADL,CAAA,kBAAA,CAAA;EACK,cAAA,CAAA,EACF,UADE,CAAA,gBAAA,CAAA;EACF,cAAA,CAAA,EACA,UADA,CAAA,gBAAA,CAAA;EACA,iBAAA,CAAA,EACG,UADH,CAAA,mBAAA,CAAA;EACG,WAAA,CAAA,EACN,UADM,CAAA,aAAA,CAAA;EACN,mBAAA,CAAA,EACQ,UADR,CAAA,qBAAA,CAAA;EACQ,qBAAA,CAAA,EACE,UADF,CAAA,uBAAA,CAAA;EACE,gBAAA,CAAA,EACL,UADK,CAAA,kBAAA,CAAA;EACL,cAAA,CAAA,EACF,UADE,CAAA,gBAAA,CAAA;EACF,cAAA,CAAA,EACA,UADA,CAAA,gBAAA,CAAA;EACA,iBAAA,CAAA,EACG,UADH,CAAA,mBAAA,CAAA;EACG,UAAA,CAAA,EAEP,UAFO,CAAA,YAAA,CAAA;EAEP,YAAA,CAAA,EAEE,UAFF,CAAA,cAAA,CAAA;EAEE,UAAA,CAAA,EACF,UADE,CAAA,YAAA,CAAA;EACF,UAAA,CAAA,EACA,UADA,CAAA,YAAA,CAAA;EACA,aAAA,CAAA,EACG,UADH,CAAA,eAAA,CAAA;EACG,iBAAA,CAAA,EACI,UADJ,CAAA,mBAAA,CAAA;EACI,eAAA,CAAA,EACF,UADE,CAAA,iBAAA,CAAA;EACF,OAAA,CAAA,EACR,UADQ,CAAA,SAAA,CAAA;EACR,WAAA,CAAA,EAEI,UAFJ,CAAA,aAAA,CAAA;EAEI,SAAA,CAAA,EACF,UADE,CAAA,WAAA,CAAA;EACF,SAAA,CAAA,EACA,UADA,CAAA,WAAA,CAAA;EACA,YAAA,CAAA,EACG,UADH,CAAA,cAAA,CAAA;EACG,gBAAA,CAAA,EACI,UADJ,CAAA,kBAAA,CAAA;EACI,cAAA,CAAA,EACF,UADE,CAAA,gBAAA,CAAA;EACF,MAAA,CAAA,EACR,UADQ,CAAA,QAAA,CAAA;EACR;EAMS,mBAAA,CAAA,EAAA,MAAA;EAAV;EArDkB,kBAAA,CAAA,EAAA,MAAA;EAAI;EA0P1B,KAAA,CAAA,EArMI,SA4MR,CA5MkB,SAqMV,CAAA;AAaV;AACA;;;;;;;;;;;;;;;;;;;;;;cAdM,MAAI,OAAA,CAAA,qBAAA;cAaG;cACA"}
+{"version":3,"file":"Icon.d.cts","names":[],"sources":["../../src/components/Icon.tsx"],"mappings":";;;;;;;;;;KAkCK,QAAA,GAAW,SAAA,GAAY,YAAA;AAAA,UAElB,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAJC;EAMX,IAAA,EAAM,QAAA;EANQ;EAQd,IAAA,GAAO,QAAA;EANC;EAQR,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,WAAA;EAEV,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,UAAA,GAAa,UAAA;EAEb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,UAAA,GAAa,UAAA;EACb,aAAA,GAAgB,UAAA;EAChB,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,OAAA,GAAU,UAAA;EAEV,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,YAAA,GAAe,UAAA;EACf,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,MAAA,GAAS,UAAA;EALG;EAOZ,mBAAA;EALe;EAOf,kBAAA;EALiB;EAOjB,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+Md,IAAA,EAAI,KAAA,CAAA,oBAAA,CAAA,SAAA;AAAA,cAaG,SAAA;AAAA,cACA,mBAAA"}

package/dist/components/Icon.d.mts

@@ -2,7 +2,7 @@
 import { GlyphName } from "../icons/dist/glyphMap.mjs";
 import { SvgGlyphName } from "../icons/dist/svgMap.mjs";
 import { IconSize, IconVariant } from "../types/dist/index.mjs";
-import * as react9 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { StyleProp, Text, TextProps, TextStyle } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -10,6 +10,7 @@ import { StyleProps } from "../../generated/styles";
 //#region src/components/Icon.d.ts
 type IconName = GlyphName | SvgGlyphName;
 interface IconProps extends Omit<TextProps, 'style'> {
+  /** Ref to the underlying Text element */
   ref?: Ref<Text>;
   /** The icon name */
   name: IconName;
@@ -66,12 +67,16 @@ interface IconProps extends Omit<TextProps, 'style'> {
  * Renders icons from the UDS icon library. Supports multiple variants
  * (outline, fill, multicolor) and sizes.
  *
+ * @category Display
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Icon } from '@yahoo/uds-mobile';
  *
  * <Icon name="ChevronRight" size="md" color="primary" />
  * <Icon name="Star" variant="fill" color="accent" />
+ * <Icon name="Yahoo" variant="multicolor" />
  * ```
  *
  * @usage
@@ -79,9 +84,15 @@ interface IconProps extends Omit<TextProps, 'style'> {
  * - Use variant prop for outline/fill/multicolor
  * - Use size prop for icon size (xs, sm, md, lg, xl)
  *
- * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
+ * @accessibility
+ * - Sets `accessibilityRole="image"` automatically
+ * - Icon name is used as accessibility label
+ * - For decorative icons, set `accessibilityElementsHidden`
+ *
+ * @see {@link IconButton} for clickable icons
+ * @see {@link IconSlot} for flexible icon rendering in components
  */
-declare const Icon: react9.NamedExoticComponent<IconProps>;
+declare const Icon: react.NamedExoticComponent<IconProps>;
 declare const iconNames: readonly ["A11Y", "Accessible", "AccountRecover", "AccountRefresh", "AccountSwitchAlt", "AccountSwitcher", "AcousticGuitar", "Add", "AddBell", "AddCalendar", "AddCheckCircle", "AddCircle", "AddContactCard", "AddDocument", "AddFace", "AddFolder", "AddPaperPlane", "AddPeople", "AddQuestion", "AddSearch", "AddSquare", "AffiliateLink", "AirQuality", "Airplane", "AirplaneLanding", "AirplaneTakeOff", "AngledSquareOnSquare", "AnyFile", "AppSwitcher", "AquariusAstrology", "Archive", "AriesAstrology", "ArrowDown", "ArrowDownCircle", "ArrowLeft", "ArrowLineDown", "ArrowLineUp", "ArrowRight", "ArrowUp", "Article", "ArtisticGymnastics", "Ascender", "AudioFile", "Authenticator", "AutoDownload", "AutoSaveOffline", "AutoSaveSync", "AutoSaveUpload", "AutoSaveUploadFail", "AutoSaved", "BabyBottle", "BackTimeTen", "Badge", "Balance", "BallInWater", "Barometer", "BaseBallBat", "Baseball", "Basketball", "BasketballHoop", "BeachUmbrella", "Bed", "Bell", "Below", "BigDownArrow", "BigLeftArrow", "BigRightArrow", "BigRightStraightArrow", "BigUpArrow", "Bike", "Bingo", "Binoculars", "BlackJack", "Bold", "Bolt", "Bookmark", "BottomLine", "BowAndArrow", "BoxCircle", "BoxFront", "BoxOnBox", "BoxingGlove", "Browser", "BubbleZone", "Building", "BulletPointContainer", "BulletPoints", "Bullseye", "BusFront", "BusinessBag", "Cake", "Calendar", "CalendarClock", "CalendarConfirm", "CalendarFile", "CalendarICSFile", "CalendarRightArrow", "Camera", "CancerAstrology", "Canoe", "CapriconAstrology", "Car", "CardsCheck", "Cash", "CelebrityStar", "CenterAlignment", "ChatAi", "Check", "CheckBookmark", "CheckBox", "CheckCircle", "CheckDocuments", "CheckEnvelope", "CheckPeople", "CheckSpeechBubble", "CheckVoteBallot", "Checklist", "ChevronDown", "ChevronLeft", "ChevronLeftPeople", "ChevronRight", "ChevronRightPeople", "ChevronUp", "Circle", "ClearText", "Clipboard", "Clock", "Clone", "ClosedCaption", "Cloud", "CloudDay", "CloudNight", "Cocktails", "Coffee", "CoffeeTakeout", "Cog", "Coin", "CollapseColumn", "Command", "Compass", "ComputerChip", "Connection", "ConnectionScreen", "ContactBook", "ContactCard", "Convert", "ConvertAlt", "ConvertLeft", "ConvertRight", "Cookies", "Coupon", "CreditCard", "CreditCardPayment", "CrescentMoon", "Cricket", "Cross", "CrossCircle", "CrossEnvelope", "CrossPeople", "CrossShield", "Crossword", "Cycling", "DOCFile", "DailyFantasy", "DaisyFlower", "Dandelion", "DataBook", "DataCloud", "DataSilo", "DataStorage", "Debug", "DeleteTab", "DeliveryPackage", "Dense", "DenyCircle", "Descender", "Desktop", "DiagonalKey", "DiagonalLeftDown", "DiagonalLeftUp", "DiagonalRightDown", "DiagonalRightUp", "Diamond", "Dice", "Dining", "Direction", "DiscoBall", "Document", "DocumentImageRectangle", "DocumentImageSquare", "DocumentRectangle", "DollarCircleArrows", "DotEnvelope", "DotTwoRings", "DoubleBigLeftArrow", "DoubleChevronLeft", "DoubleChevronRight", "DownCurveArrow", "Download", "DownloadCircle", "DownloadComplete", "DownloadInProgressCircle", "DraftDocument", "DragVertical", "Dusk", "Easel", "Eclipse", "Edit", "EmailVerification", "Emails", "Embed", "EntertainmentTv", "Envelope", "Error", "ExpandArrowLeft", "ExpandArrowRight", "ExpandColumn", "Eye", "EyeSearch", "EyeShut", "FaceID", "FallLeaf", "Family", "FastForward", "FencingEpee", "FilmReel", "FilmRoll", "FingerPointLeftArrow", "FingerPointRightArrow", "FingerPointSelect", "FingerPrint", "Fire", "FirstAidKit", "FirstQuarter", "FiveCircles", "Flag", "FlameTorch", "Fog", "FogDay", "Folder", "Font", "Football", "FootballHelmet", "ForestTree", "FourBoxes", "FourCorners", "FourCornersMagnifyingGlass", "FourCornersMusicNote", "FourLinesSpread", "FourThreeRatio", "FullMoon", "GIF", "GeminiAstrology", "GiftBox", "GolfTee", "GraduationHat", "Graph", "Gymnastics", "HalfStar", "HalfSun", "HappyFace", "HazeDay", "HazeNight", "Heading2", "Heading3", "Headline1", "HeadlineDocumentSquare", "Headphone", "HeadphonesMic", "Heart", "HeartArrow", "HeartPulse", "HeavyRain", "HeavyRainDay", "HeavyRainLightning", "HeavyRainLightningDay", "HeavyRainLightningNight", "HeavyRainNight", "Help", "Highlighter", "History", "HockeyWithPuck", "Home", "HorseHeadBridle", "HotTub", "Hurricane", "Ice", "Id", "Image", "ImageFile", "ImageGallery", "Inbox", "InboxDownArrow", "InboxUpArrow", "IndentRight", "Infinity", "Info", "InstitutionalWesternBank", "Italics", "JoyfulFace", "JudoUniform", "Keyboard", "KeylineShapes", "Kick", "KnightChessPiece", "Laptop", "LaptopWithPhone", "Laurel", "LaurelLeft", "LaurelRight", "LayoutBottom", "LayoutDefault", "LayoutFourColumn", "LayoutGrid", "LayoutPerfectGrid", "LayoutRight", "LayoutThreeColumn", "LayoutThreeRows", "LayoutTwoColumn", "LeftAlign", "LeftCurveArrow", "LeftPageArrow", "LeoAstrology", "Letter", "LetterColor", "LetterSize", "LibraAstrology", "LifeRing", "Lightbulb", "Lightning", "LightningDay", "LightningNight", "Link", "LiquidDrop", "Live", "Livestream", "Location", "LocationCircle", "LocationMap", "Lock", "LogIn", "LogOut", "Lollipop", "LoveEnvelope", "LoyaltyCard", "MagicWand", "MagnifyingGlass", "Mahjong", "MakeupBeauty", "Mannequin", "Medal", "MedicineBottle", "MedicinePill", "Megaphone", "Microphone", "Microscope", "Minus", "MinusBox", "MinusCircle", "MinusPeople", "MinusSearch", "MmaGlove", "MmaRing", "MobileNumber", "MobilePhone", "More", "MoreVertical", "NeutralFace", "NewMoon", "Newsletter", "Night", "NineSixteenRatio", "NoBell", "NoConnectionScreen", "NoEye", "NoHeart", "NoImage", "NoPeople", "NoShield", "NoSmoking", "NoSquare", "NoStar", "NoVideoCamera", "NoWifi", "NotificationBell", "Null", "NumberedList", "OnTop", "OneOneRatio", "OpenBook", "OpenEnvelope", "OrderedList", "OutdentLeft", "PDF", "PPT", "PaperPlane", "PaperPlaneDiagonal", "Paperclip", "Paragraph", "ParagraphLeftIdent", "ParagraphRightIdent", "Parking", "ParkingSquare", "PassKey", "Password", "Pause", "Payments", "Payphone", "PayphoneFace", "Pencil", "PencilLines", "People", "Person", "PersonClimbing", "PersonShield", "Pets", "Phone", "PieChart", "Pin", "PingPong", "PiscesAstrology", "PlainText", "Play", "PlayCircle", "Pool", "PowerSwitch", "Preferences", "PreferencesAlt", "Printer", "Priority", "Profile", "Progress", "ProgressWithCheck", "Pulse", "PuzzlePiece", "QrCode", "QuestionBubble", "QuoteCircle", "QuoteSquare", "RAW", "RTF", "RTFOff", "RacingFlag", "Radar", "RadioCircle", "RainDay", "RainNight", "Receipt", "Receipts", "RedoPencil", "Refresh", "Restaurant", "RetailTag", "RightAlign", "RightCurveArrow", "RightPageArrow", "RobotHead", "Running", "SadFace", "SadderFace", "SagittariusAstrology", "SailBoat", "Satellite", "ScaleDown", "ScanQrCode", "Scissors", "ScorpioAstrology", "SearchConfirm", "SearchEnvelope", "SearchWorldWithLines", "SecurityKey", "SendToSelf", "Server", "SettingsAlt", "SettingsCogPeople", "Shapes", "Share", "Shield", "ShieldCheck", "ShieldSlash", "ShockedFace", "ShoppingBag", "ShoppingBasket", "ShoppingCart", "Shuttlecock", "SixteenNineRatio", "Skateboard", "SkipTimeTen", "Skull", "Slideshow", "SmallSquareInsideBigSquare", "SmartWatch", "SmileFace", "SmileFaceLife", "Sms", "SmsVerificationCode", "Sneaker", "SneakerAlt", "Snippet", "Snow", "SnowDay", "SnowNight", "Snowflake", "Soccer", "Solitaire", "SoundLow", "SoundOff", "SoundOn", "Spa", "Sparkle", "SparkleFootballBall", "SparkleTennisBall", "SpecialCharacter", "SpeechBubble", "SpeechBubbleStar", "SportsBook", "SportsSparkle", "SprinkleDay", "SprinkleNight", "Square", "Stadium", "Star", "StarArticle", "StarMedal", "StarTrophy", "StatePrivacyControls", "StockTrends", "Stopwatch", "Store", "Strikethrough", "Sun", "Sunrise", "Sunset", "SurfboardOnSand", "Swimming", "Sync", "Tab", "Tablet", "TaurusAstrology", "TechnicalRoute", "Television", "TennisBall", "TennisRacketBall", "ThirdQuarter", "ThreeCircles", "ThreeFourRatio", "ThreeLines", "ThreeLinesSpread", "ThumbsDown", "ThumbsUp", "Thumbtack", "ThumbtackDiagonal", "TimePaperPlane", "Tornado", "Trading", "TrafficSignRightTurn", "Trampoline", "Transactions", "Trash", "Trending", "TrendingCircle", "Trophy", "TruckRight", "Tshirt", "Tsunami", "Tub", "TwoArrowsDiagonalInwards", "TwoArrowsDiagonalOutwards", "TwoCorners", "TwoHorizontalRectangles", "TwoLinesContainer", "TwoMasks", "TwoRectangles", "TwoSparkles", "TwoSquares", "TwoThirdsColumn", "Underline", "Unlock", "UnorderedList", "UpCurveArrow", "UpDownChevron", "UpDownShortArrows", "UpFolder", "Upload", "Verification", "VideoCamera", "VideoFile", "VirgoAstrology", "Virus", "Volleyball", "Walking", "Wallet", "WaningCrescent", "WaningGibbous", "Warning", "WaxingCrescent", "WaxingGibbous", "Web", "Weights", "Wifi", "Wind", "WindCloud", "WindCloudDay", "WindCloudNight", "Wine", "WorldWithLines", "Wrench", "WrestlingHeadGear", "WritingAi", "XLSFile", "YEP", "ZIP"];
 declare const multicolorIconNames: readonly ["Cloud", "CloudDay", "CloudNight", "Cold", "Dreary", "Dusk", "Eclipse", "FirstQuarter", "Fog", "FogDay", "FogNight", "FullMoon", "HalfSun", "HazeDay", "HazeNight", "HeavyRain", "HeavyRainDay", "HeavyRainLightning", "HeavyRainLightningDay", "HeavyRainLightningNight", "HeavyRainNight", "Hot", "Hurricane", "Ice", "IntermittentCloudsNight", "IntermittentCloudsSunny", "Lightning", "LightningDay", "LightningNight", "MostlyNightFlurries", "Night", "PartlyCloudyNight", "PartlyFlurries", "PartlyNightFlurries", "PartlySunny", "Rain", "RainDay", "RainNight", "Sleet", "Snow", "SnowDay", "Snowflake", "SprinkleDay", "SprinkleNight", "Sun", "Sunrise", "Sunset", "ThirdQuarter", "Tornado", "WaningCrescent", "WaningGibbous", "WaxingCrescent", "WaxingGibbous", "Wind", "WindCloud", "WindCloudDay", "WindCloudNight"];
 //#endregion

package/dist/components/Icon.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.mts","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;KAkCK,QAAA,GAAW,YAAY;UAElB,SAAA,SAAkB,KAAK;QACzB,IAAI;EAHP;EAEK,IAAA,EAGF,QAHY;EAAa;EACrB,IAAA,CAAA,EAIH,QAJG;EAAJ;EAEA,KAAA,CAAA,EAIE,UAJF,CAAA,OAAA,CAAA;EAEC;EAEC,OAAA,CAAA,EAEE,WAFF;EAEE,eAAA,CAAA,EAEQ,UAFR,CAAA,iBAAA,CAAA;EAEQ,YAAA,CAAA,EAEH,UAFG,CAAA,cAAA,CAAA;EAEH,oBAAA,CAAA,EACQ,UADR,CAAA,sBAAA,CAAA;EACQ,kBAAA,CAAA,EACF,UADE,CAAA,oBAAA,CAAA;EACF,uBAAA,CAAA,EACK,UADL,CAAA,yBAAA,CAAA;EACK,qBAAA,CAAA,EACF,UADE,CAAA,uBAAA,CAAA;EACF,WAAA,CAAA,EACV,UADU,CAAA,aAAA,CAAA;EACV,gBAAA,CAAA,EACK,UADL,CAAA,kBAAA,CAAA;EACK,cAAA,CAAA,EACF,UADE,CAAA,gBAAA,CAAA;EACF,cAAA,CAAA,EACA,UADA,CAAA,gBAAA,CAAA;EACA,iBAAA,CAAA,EACG,UADH,CAAA,mBAAA,CAAA;EACG,WAAA,CAAA,EACN,UADM,CAAA,aAAA,CAAA;EACN,mBAAA,CAAA,EACQ,UADR,CAAA,qBAAA,CAAA;EACQ,qBAAA,CAAA,EACE,UADF,CAAA,uBAAA,CAAA;EACE,gBAAA,CAAA,EACL,UADK,CAAA,kBAAA,CAAA;EACL,cAAA,CAAA,EACF,UADE,CAAA,gBAAA,CAAA;EACF,cAAA,CAAA,EACA,UADA,CAAA,gBAAA,CAAA;EACA,iBAAA,CAAA,EACG,UADH,CAAA,mBAAA,CAAA;EACG,UAAA,CAAA,EAEP,UAFO,CAAA,YAAA,CAAA;EAEP,YAAA,CAAA,EAEE,UAFF,CAAA,cAAA,CAAA;EAEE,UAAA,CAAA,EACF,UADE,CAAA,YAAA,CAAA;EACF,UAAA,CAAA,EACA,UADA,CAAA,YAAA,CAAA;EACA,aAAA,CAAA,EACG,UADH,CAAA,eAAA,CAAA;EACG,iBAAA,CAAA,EACI,UADJ,CAAA,mBAAA,CAAA;EACI,eAAA,CAAA,EACF,UADE,CAAA,iBAAA,CAAA;EACF,OAAA,CAAA,EACR,UADQ,CAAA,SAAA,CAAA;EACR,WAAA,CAAA,EAEI,UAFJ,CAAA,aAAA,CAAA;EAEI,SAAA,CAAA,EACF,UADE,CAAA,WAAA,CAAA;EACF,SAAA,CAAA,EACA,UADA,CAAA,WAAA,CAAA;EACA,YAAA,CAAA,EACG,UADH,CAAA,cAAA,CAAA;EACG,gBAAA,CAAA,EACI,UADJ,CAAA,kBAAA,CAAA;EACI,cAAA,CAAA,EACF,UADE,CAAA,gBAAA,CAAA;EACF,MAAA,CAAA,EACR,UADQ,CAAA,QAAA,CAAA;EACR;EAMS,mBAAA,CAAA,EAAA,MAAA;EAAV;EArDkB,kBAAA,CAAA,EAAA,MAAA;EAAI;EA0P1B,KAAA,CAAA,EArMI,SA4MR,CA5MkB,SAqMV,CAAA;AAaV;AACA;;;;;;;;;;;;;;;;;;;;;;cAdM,MAAI,MAAA,CAAA,qBAAA;cAaG;cACA"}
+{"version":3,"file":"Icon.d.mts","names":[],"sources":["../../src/components/Icon.tsx"],"mappings":";;;;;;;;;;KAkCK,QAAA,GAAW,SAAA,GAAY,YAAA;AAAA,UAElB,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAJC;EAMX,IAAA,EAAM,QAAA;EANQ;EAQd,IAAA,GAAO,QAAA;EANC;EAQR,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,WAAA;EAEV,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,UAAA,GAAa,UAAA;EAEb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,UAAA,GAAa,UAAA;EACb,aAAA,GAAgB,UAAA;EAChB,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,OAAA,GAAU,UAAA;EAEV,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,YAAA,GAAe,UAAA;EACf,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,MAAA,GAAS,UAAA;EALG;EAOZ,mBAAA;EALe;EAOf,kBAAA;EALiB;EAOjB,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+Md,IAAA,EAAI,KAAA,CAAA,oBAAA,CAAA,SAAA;AAAA,cAaG,SAAA;AAAA,cACA,mBAAA"}

package/dist/components/Icon.mjs

@@ -1,4 +1,4 @@
-/*! © 2026 Yahoo, Inc. UDS Mobile v1.3.0-beta.7 */
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { glyphMap, glyphNames } from "../icons/dist/glyphMap.mjs";
 import { svgGlyphNames, svgMap } from "../icons/dist/svgMap.mjs";
 import { ICON_SIZE_MAP } from "../icons/dist/tokens.mjs";
@@ -21,7 +21,7 @@ const DEFAULT_PROPS = {
 * Uses useUnistyles() for reactive theme access - isolated here so
 * glyph-based icons don't pay the hook overhead.
 */
-const MulticolorIcon = memo(function MulticolorIcon$1({ name, size = DEFAULT_PROPS.size, flexShrink = DEFAULT_PROPS.flexShrink, backgroundColor, dangerouslySetSize }) {
+const MulticolorIcon = memo(function MulticolorIcon({ name, size = DEFAULT_PROPS.size, flexShrink = DEFAULT_PROPS.flexShrink, backgroundColor, dangerouslySetSize }) {
 	const { rt } = useUnistyles();
 	const colorScheme = rt.themeName === "dark" ? "dark" : "light";
 	const pixelSize = ICON_SIZE_MAP[size];
@@ -44,7 +44,7 @@ const MulticolorIcon = memo(function MulticolorIcon$1({ name, size = DEFAULT_PRO
 		})
 	});
 });
-const OutlineOrFillIcon = memo(function OutlineOrFillIcon$1({ name, size = DEFAULT_PROPS.size, color = DEFAULT_PROPS.color, variant = DEFAULT_PROPS.variant, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, flexShrink = "0", spacingStart, spacingEnd, spacingTop, spacingBottom, spacingHorizontal, spacingVertical, spacing, offsetStart, offsetEnd, offsetTop, offsetBottom, offsetHorizontal, offsetVertical, offset, dangerouslySetColor, dangerouslySetSize, style, ref, ...props }) {
+const OutlineOrFillIcon = memo(function OutlineOrFillIcon({ name, size = DEFAULT_PROPS.size, color = DEFAULT_PROPS.color, variant = DEFAULT_PROPS.variant, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, flexShrink = "0", spacingStart, spacingEnd, spacingTop, spacingBottom, spacingHorizontal, spacingVertical, spacing, offsetStart, offsetEnd, offsetTop, offsetBottom, offsetHorizontal, offsetVertical, offset, dangerouslySetColor, dangerouslySetSize, style, ref, ...props }) {
 	const pixelSize = ICON_SIZE_MAP[size];
 	styles.useVariants({
 		color,
@@ -117,12 +117,16 @@ const OutlineOrFillIcon = memo(function OutlineOrFillIcon$1({ name, size = DEFAU
 * Renders icons from the UDS icon library. Supports multiple variants
 * (outline, fill, multicolor) and sizes.
 *
+* @category Display
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Icon } from '@yahoo/uds-mobile';
 *
 * <Icon name="ChevronRight" size="md" color="primary" />
 * <Icon name="Star" variant="fill" color="accent" />
+* <Icon name="Yahoo" variant="multicolor" />
 * ```
 *
 * @usage
@@ -130,9 +134,15 @@ const OutlineOrFillIcon = memo(function OutlineOrFillIcon$1({ name, size = DEFAU
 * - Use variant prop for outline/fill/multicolor
 * - Use size prop for icon size (xs, sm, md, lg, xl)
 *
-* @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
+* @accessibility
+* - Sets `accessibilityRole="image"` automatically
+* - Icon name is used as accessibility label
+* - For decorative icons, set `accessibilityElementsHidden`
+*
+* @see {@link IconButton} for clickable icons
+* @see {@link IconSlot} for flexible icon rendering in components
 */
-const Icon = memo(function Icon$1({ variant, ...props }) {
+const Icon = memo(function Icon({ variant, ...props }) {
 	if (variant === "multicolor") return /* @__PURE__ */ jsx(MulticolorIcon, { ...props });
 	return /* @__PURE__ */ jsx(OutlineOrFillIcon, {
 		variant,

package/dist/components/Icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.mjs","names":["MulticolorIcon","OutlineOrFillIcon","Icon"],"sources":["../../src/components/Icon.tsx"],"sourcesContent":["import type { GlyphName } from '@yahoo/uds-icons/glyphMap';\nimport { glyphMap, glyphNames } from '@yahoo/uds-icons/glyphMap';\nimport type { SvgGlyphKey, SvgGlyphName } from '@yahoo/uds-icons/svgMap';\nimport { svgGlyphNames, svgMap } from '@yahoo/uds-icons/svgMap';\nimport { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { IconSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type {\n  StyleProp,\n  Text as RNText,\n  TextProps as RNTextProps,\n  TextStyle,\n  ViewProps,\n} from 'react-native';\nimport { Text, View } from 'react-native';\nimport { SvgXml } from 'react-native-svg';\n// eslint-disable-next-line uds/no-use-unistyles\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\nconst DEFAULT_PROPS = {\n  size: 'md',\n  color: 'primary',\n  variant: 'outline',\n  flexShrink: '0',\n} as const;\n\n/* -------------------------------------------------------------------------- */\n/*                                Icon Props                                   */\n/* -------------------------------------------------------------------------- */\n\ntype IconName = GlyphName | SvgGlyphName;\n\ninterface IconProps extends Omit<RNTextProps, 'style'> {\n  ref?: Ref<RNText>;\n  /** The icon name */\n  name: IconName;\n  /** Icon size */\n  size?: IconSize;\n  /** Icon color */\n  color?: StyleProps['color'];\n  /** Icon variant (outline, fill, multicolor) */\n  variant?: IconVariant;\n  // Background\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Border\n  borderRadius?: StyleProps['borderRadius'];\n  borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n  borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n  borderColor?: StyleProps['borderColor'];\n  borderStartColor?: StyleProps['borderStartColor'];\n  borderEndColor?: StyleProps['borderEndColor'];\n  borderTopColor?: StyleProps['borderTopColor'];\n  borderBottomColor?: StyleProps['borderBottomColor'];\n  borderWidth?: StyleProps['borderWidth'];\n  borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n  borderStartWidth?: StyleProps['borderStartWidth'];\n  borderEndWidth?: StyleProps['borderEndWidth'];\n  borderTopWidth?: StyleProps['borderTopWidth'];\n  borderBottomWidth?: StyleProps['borderBottomWidth'];\n  // Flex\n  flexShrink?: StyleProps['flexShrink'];\n  // Spacing\n  spacingStart?: StyleProps['spacingStart'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingTop?: StyleProps['spacingTop'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacing?: StyleProps['spacing'];\n  // Offset\n  offsetStart?: StyleProps['offsetStart'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetTop?: StyleProps['offsetTop'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offset?: StyleProps['offset'];\n  /** Icon color override */\n  dangerouslySetColor?: string;\n  /** Icon font size override */\n  dangerouslySetSize?: number;\n  /** Optional style override */\n  style?: StyleProp<TextStyle>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Multicolor Icon                                  */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Separate component for multicolor SVG icons.\n * Uses useUnistyles() for reactive theme access - isolated here so\n * glyph-based icons don't pay the hook overhead.\n */\nconst MulticolorIcon = memo(function MulticolorIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  flexShrink = DEFAULT_PROPS.flexShrink,\n  backgroundColor,\n  dangerouslySetSize,\n}: Omit<IconProps, 'variant'>) {\n  // Reactive theme subscription - only multicolor icons need this\n  const { rt } = useUnistyles();\n  const colorScheme = rt.themeName === 'dark' ? 'dark' : 'light';\n\n  const pixelSize = ICON_SIZE_MAP[size];\n  const svgKey = `${name}-${colorScheme}-${pixelSize}` as SvgGlyphKey;\n  const svgContent = svgMap[svgKey];\n\n  if (!svgContent) {\n    console.warn(`Multicolor icon \"${svgKey}\" not found`);\n    return null;\n  }\n\n  styles.useVariants({\n    flexShrink,\n    backgroundColor,\n  });\n\n  return (\n    <View style={styles.foundation as ViewProps['style']}>\n      <SvgXml\n        xml={svgContent}\n        width={dangerouslySetSize ?? pixelSize}\n        height={dangerouslySetSize ?? pixelSize}\n      />\n    </View>\n  );\n});\n\nconst OutlineOrFillIcon = memo(function OutlineOrFillIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  color = DEFAULT_PROPS.color,\n  variant = DEFAULT_PROPS.variant,\n  // Background\n  backgroundColor,\n  // Border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  borderStartColor,\n  borderEndColor,\n  borderTopColor,\n  borderBottomColor,\n  borderWidth,\n  borderVerticalWidth,\n  borderHorizontalWidth,\n  borderStartWidth,\n  borderEndWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  // Flex\n  flexShrink = '0',\n  // Spacing\n  spacingStart,\n  spacingEnd,\n  spacingTop,\n  spacingBottom,\n  spacingHorizontal,\n  spacingVertical,\n  spacing,\n  // Offset\n  offsetStart,\n  offsetEnd,\n  offsetTop,\n  offsetBottom,\n  offsetHorizontal,\n  offsetVertical,\n  offset,\n  // Dangerously set props\n  dangerouslySetColor,\n  dangerouslySetSize,\n  style,\n  ref,\n  ...props\n}: Omit<IconProps, 'variant'> & { variant?: 'outline' | 'fill' }) {\n  const pixelSize = ICON_SIZE_MAP[size];\n  // Glyph-based icons - no useUnistyles needed, styles.useVariants is reactive\n  styles.useVariants({\n    color,\n    backgroundColor,\n    // Border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // Flex\n    flexShrink,\n    // Spacing\n    spacingStart,\n    spacingEnd,\n    spacingTop,\n    spacingBottom,\n    spacingHorizontal,\n    spacingVertical,\n    spacing,\n    // Offset\n    offsetStart,\n    offsetEnd,\n    offsetTop,\n    offsetBottom,\n    offsetHorizontal,\n    offsetVertical,\n    offset,\n  });\n  const glyphName = `${name}-${variant}-${pixelSize}`;\n  const glyph = (glyphMap as Record<string, string>)[glyphName];\n  const textStyles: StyleProp<TextStyle> = useMemo(\n    () => [\n      {\n        fontFamily: 'uds-icons',\n        textAlign: 'center',\n        textAlignVertical: 'center',\n      },\n      styles.foundation,\n      dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n      dangerouslySetSize\n        ? {\n            fontSize: dangerouslySetSize,\n            lineHeight: dangerouslySetSize,\n          }\n        : undefined,\n      style,\n    ],\n    [dangerouslySetColor, dangerouslySetSize, style, styles.foundation],\n  );\n\n  return (\n    <Text\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={name}\n      style={textStyles}\n      {...props}\n    >\n      {glyph}\n    </Text>\n  );\n});\n\n/**\n * **🎨 An icon component using UDS icon fonts**\n *\n * @description\n * Renders icons from the UDS icon library. Supports multiple variants\n * (outline, fill, multicolor) and sizes.\n *\n * @example\n * ```tsx\n * import { Icon } from '@yahoo/uds-mobile';\n *\n * <Icon name=\"ChevronRight\" size=\"md\" color=\"primary\" />\n * <Icon name=\"Star\" variant=\"fill\" color=\"accent\" />\n * ```\n *\n * @usage\n * - Use name prop to specify the icon\n * - Use variant prop for outline/fill/multicolor\n * - Use size prop for icon size (xs, sm, md, lg, xl)\n *\n * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info\n */\nconst Icon = memo(function Icon({ variant, ...props }: IconProps) {\n  // Delegate to MulticolorIcon for SVG-based icons (has its own useUnistyles)\n  if (variant === 'multicolor') {\n    return <MulticolorIcon {...props} />;\n  }\n\n  return <OutlineOrFillIcon variant={variant} {...props} />;\n});\n\nIcon.displayName = 'Icon';\n\nexport { Icon };\nexport type { IconName, IconProps };\nexport const iconNames = glyphNames;\nexport const multicolorIconNames = svgGlyphNames;\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAM,gBAAgB;CACpB,MAAM;CACN,OAAO;CACP,SAAS;CACT,YAAY;CACb;;;;;;AAyED,MAAM,iBAAiB,KAAK,SAASA,iBAAe,EAClD,MACA,OAAO,cAAc,MACrB,aAAa,cAAc,YAC3B,iBACA,sBAC6B;CAE7B,MAAM,EAAE,OAAO,cAAc;CAC7B,MAAM,cAAc,GAAG,cAAc,SAAS,SAAS;CAEvD,MAAM,YAAY,cAAc;CAChC,MAAM,SAAS,GAAG,KAAK,GAAG,YAAY,GAAG;CACzC,MAAM,aAAa,OAAO;AAE1B,KAAI,CAAC,YAAY;AACf,UAAQ,KAAK,oBAAoB,OAAO,aAAa;AACrD,SAAO;;AAGT,QAAO,YAAY;EACjB;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EAAK,OAAO,OAAO;YAClB,oBAAC;GACC,KAAK;GACL,OAAO,sBAAsB;GAC7B,QAAQ,sBAAsB;IAC9B;GACG;EAET;AAEF,MAAM,oBAAoB,KAAK,SAASC,oBAAkB,EACxD,MACA,OAAO,cAAc,MACrB,QAAQ,cAAc,OACtB,UAAU,cAAc,SAExB,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,aAAa,KAEb,cACA,YACA,YACA,eACA,mBACA,iBACA,SAEA,aACA,WACA,WACA,cACA,kBACA,gBACA,QAEA,qBACA,oBACA,OACA,KACA,GAAG,SAC6D;CAChE,MAAM,YAAY,cAAc;AAEhC,QAAO,YAAY;EACjB;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAS,SADG,GAAG,KAAK,GAAG,QAAQ,GAAG;AAsBxC,QACE,oBAAC;EACM;EACL,mBAAkB;EAClB,oBAAoB;EACpB,OAzBqC,cACjC;GACJ;IACE,YAAY;IACZ,WAAW;IACX,mBAAmB;IACpB;GACD,OAAO;GACP,sBAAsB,EAAE,OAAO,qBAAqB,GAAG;GACvD,qBACI;IACE,UAAU;IACV,YAAY;IACb,GACD;GACJ;GACD,EACD;GAAC;GAAqB;GAAoB;GAAO,OAAO;GAAW,CACpE;EAQG,GAAI;YAEH;GACI;EAET;;;;;;;;;;;;;;;;;;;;;;;AAwBF,MAAM,OAAO,KAAK,SAASC,OAAK,EAAE,SAAS,GAAG,SAAoB;AAEhE,KAAI,YAAY,aACd,QAAO,oBAAC,kBAAe,GAAI,QAAS;AAGtC,QAAO,oBAAC;EAA2B;EAAS,GAAI;GAAS;EACzD;AAEF,KAAK,cAAc;AAInB,MAAa,YAAY;AACzB,MAAa,sBAAsB"}
+{"version":3,"file":"Icon.mjs","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":["import type { GlyphName } from '@yahoo/uds-icons/glyphMap';\nimport { glyphMap, glyphNames } from '@yahoo/uds-icons/glyphMap';\nimport type { SvgGlyphKey, SvgGlyphName } from '@yahoo/uds-icons/svgMap';\nimport { svgGlyphNames, svgMap } from '@yahoo/uds-icons/svgMap';\nimport { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { IconSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type {\n  StyleProp,\n  Text as RNText,\n  TextProps as RNTextProps,\n  TextStyle,\n  ViewProps,\n} from 'react-native';\nimport { Text, View } from 'react-native';\nimport { SvgXml } from 'react-native-svg';\n// eslint-disable-next-line uds/no-use-unistyles\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\nconst DEFAULT_PROPS = {\n  size: 'md',\n  color: 'primary',\n  variant: 'outline',\n  flexShrink: '0',\n} as const;\n\n/* -------------------------------------------------------------------------- */\n/*                                Icon Props                                   */\n/* -------------------------------------------------------------------------- */\n\ntype IconName = GlyphName | SvgGlyphName;\n\ninterface IconProps extends Omit<RNTextProps, 'style'> {\n  /** Ref to the underlying Text element */\n  ref?: Ref<RNText>;\n  /** The icon name */\n  name: IconName;\n  /** Icon size */\n  size?: IconSize;\n  /** Icon color */\n  color?: StyleProps['color'];\n  /** Icon variant (outline, fill, multicolor) */\n  variant?: IconVariant;\n  // Background\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Border\n  borderRadius?: StyleProps['borderRadius'];\n  borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n  borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n  borderColor?: StyleProps['borderColor'];\n  borderStartColor?: StyleProps['borderStartColor'];\n  borderEndColor?: StyleProps['borderEndColor'];\n  borderTopColor?: StyleProps['borderTopColor'];\n  borderBottomColor?: StyleProps['borderBottomColor'];\n  borderWidth?: StyleProps['borderWidth'];\n  borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n  borderStartWidth?: StyleProps['borderStartWidth'];\n  borderEndWidth?: StyleProps['borderEndWidth'];\n  borderTopWidth?: StyleProps['borderTopWidth'];\n  borderBottomWidth?: StyleProps['borderBottomWidth'];\n  // Flex\n  flexShrink?: StyleProps['flexShrink'];\n  // Spacing\n  spacingStart?: StyleProps['spacingStart'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingTop?: StyleProps['spacingTop'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacing?: StyleProps['spacing'];\n  // Offset\n  offsetStart?: StyleProps['offsetStart'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetTop?: StyleProps['offsetTop'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offset?: StyleProps['offset'];\n  /** Icon color override */\n  dangerouslySetColor?: string;\n  /** Icon font size override */\n  dangerouslySetSize?: number;\n  /** Optional style override */\n  style?: StyleProp<TextStyle>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Multicolor Icon                                  */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Separate component for multicolor SVG icons.\n * Uses useUnistyles() for reactive theme access - isolated here so\n * glyph-based icons don't pay the hook overhead.\n */\nconst MulticolorIcon = memo(function MulticolorIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  flexShrink = DEFAULT_PROPS.flexShrink,\n  backgroundColor,\n  dangerouslySetSize,\n}: Omit<IconProps, 'variant'>) {\n  // Reactive theme subscription - only multicolor icons need this\n  const { rt } = useUnistyles();\n  const colorScheme = rt.themeName === 'dark' ? 'dark' : 'light';\n\n  const pixelSize = ICON_SIZE_MAP[size];\n  const svgKey = `${name}-${colorScheme}-${pixelSize}` as SvgGlyphKey;\n  const svgContent = svgMap[svgKey];\n\n  if (!svgContent) {\n    console.warn(`Multicolor icon \"${svgKey}\" not found`);\n    return null;\n  }\n\n  styles.useVariants({\n    flexShrink,\n    backgroundColor,\n  });\n\n  return (\n    <View style={styles.foundation as ViewProps['style']}>\n      <SvgXml\n        xml={svgContent}\n        width={dangerouslySetSize ?? pixelSize}\n        height={dangerouslySetSize ?? pixelSize}\n      />\n    </View>\n  );\n});\n\nconst OutlineOrFillIcon = memo(function OutlineOrFillIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  color = DEFAULT_PROPS.color,\n  variant = DEFAULT_PROPS.variant,\n  // Background\n  backgroundColor,\n  // Border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  borderStartColor,\n  borderEndColor,\n  borderTopColor,\n  borderBottomColor,\n  borderWidth,\n  borderVerticalWidth,\n  borderHorizontalWidth,\n  borderStartWidth,\n  borderEndWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  // Flex\n  flexShrink = '0',\n  // Spacing\n  spacingStart,\n  spacingEnd,\n  spacingTop,\n  spacingBottom,\n  spacingHorizontal,\n  spacingVertical,\n  spacing,\n  // Offset\n  offsetStart,\n  offsetEnd,\n  offsetTop,\n  offsetBottom,\n  offsetHorizontal,\n  offsetVertical,\n  offset,\n  // Dangerously set props\n  dangerouslySetColor,\n  dangerouslySetSize,\n  style,\n  ref,\n  ...props\n}: Omit<IconProps, 'variant'> & { variant?: 'outline' | 'fill' }) {\n  const pixelSize = ICON_SIZE_MAP[size];\n  // Glyph-based icons - no useUnistyles needed, styles.useVariants is reactive\n  styles.useVariants({\n    color,\n    backgroundColor,\n    // Border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // Flex\n    flexShrink,\n    // Spacing\n    spacingStart,\n    spacingEnd,\n    spacingTop,\n    spacingBottom,\n    spacingHorizontal,\n    spacingVertical,\n    spacing,\n    // Offset\n    offsetStart,\n    offsetEnd,\n    offsetTop,\n    offsetBottom,\n    offsetHorizontal,\n    offsetVertical,\n    offset,\n  });\n  const glyphName = `${name}-${variant}-${pixelSize}`;\n  const glyph = (glyphMap as Record<string, string>)[glyphName];\n  const textStyles: StyleProp<TextStyle> = useMemo(\n    () => [\n      {\n        fontFamily: 'uds-icons',\n        textAlign: 'center',\n        textAlignVertical: 'center',\n      },\n      styles.foundation,\n      dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n      dangerouslySetSize\n        ? {\n            fontSize: dangerouslySetSize,\n            lineHeight: dangerouslySetSize,\n          }\n        : undefined,\n      style,\n    ],\n    [dangerouslySetColor, dangerouslySetSize, style, styles.foundation],\n  );\n\n  return (\n    <Text\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={name}\n      style={textStyles}\n      {...props}\n    >\n      {glyph}\n    </Text>\n  );\n});\n\n/**\n * **🎨 An icon component using UDS icon fonts**\n *\n * @description\n * Renders icons from the UDS icon library. Supports multiple variants\n * (outline, fill, multicolor) and sizes.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Icon } from '@yahoo/uds-mobile';\n *\n * <Icon name=\"ChevronRight\" size=\"md\" color=\"primary\" />\n * <Icon name=\"Star\" variant=\"fill\" color=\"accent\" />\n * <Icon name=\"Yahoo\" variant=\"multicolor\" />\n * ```\n *\n * @usage\n * - Use name prop to specify the icon\n * - Use variant prop for outline/fill/multicolor\n * - Use size prop for icon size (xs, sm, md, lg, xl)\n *\n * @accessibility\n * - Sets `accessibilityRole=\"image\"` automatically\n * - Icon name is used as accessibility label\n * - For decorative icons, set `accessibilityElementsHidden`\n *\n * @see {@link IconButton} for clickable icons\n * @see {@link IconSlot} for flexible icon rendering in components\n */\nconst Icon = memo(function Icon({ variant, ...props }: IconProps) {\n  // Delegate to MulticolorIcon for SVG-based icons (has its own useUnistyles)\n  if (variant === 'multicolor') {\n    return <MulticolorIcon {...props} />;\n  }\n\n  return <OutlineOrFillIcon variant={variant} {...props} />;\n});\n\nIcon.displayName = 'Icon';\n\nexport { Icon };\nexport type { IconName, IconProps };\nexport const iconNames = glyphNames;\nexport const multicolorIconNames = svgGlyphNames;\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAM,gBAAgB;CACpB,MAAM;CACN,OAAO;CACP,SAAS;CACT,YAAY;CACb;;;;;;AA0ED,MAAM,iBAAiB,KAAK,SAAS,eAAe,EAClD,MACA,OAAO,cAAc,MACrB,aAAa,cAAc,YAC3B,iBACA,sBAC6B;CAE7B,MAAM,EAAE,OAAO,cAAc;CAC7B,MAAM,cAAc,GAAG,cAAc,SAAS,SAAS;CAEvD,MAAM,YAAY,cAAc;CAChC,MAAM,SAAS,GAAG,KAAK,GAAG,YAAY,GAAG;CACzC,MAAM,aAAa,OAAO;AAE1B,KAAI,CAAC,YAAY;AACf,UAAQ,KAAK,oBAAoB,OAAO,aAAa;AACrD,SAAO;;AAGT,QAAO,YAAY;EACjB;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EAAK,OAAO,OAAO;YAClB,oBAAC;GACC,KAAK;GACL,OAAO,sBAAsB;GAC7B,QAAQ,sBAAsB;IAC9B;GACG;EAET;AAEF,MAAM,oBAAoB,KAAK,SAAS,kBAAkB,EACxD,MACA,OAAO,cAAc,MACrB,QAAQ,cAAc,OACtB,UAAU,cAAc,SAExB,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,aAAa,KAEb,cACA,YACA,YACA,eACA,mBACA,iBACA,SAEA,aACA,WACA,WACA,cACA,kBACA,gBACA,QAEA,qBACA,oBACA,OACA,KACA,GAAG,SAC6D;CAChE,MAAM,YAAY,cAAc;AAEhC,QAAO,YAAY;EACjB;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAS,SADG,GAAG,KAAK,GAAG,QAAQ,GAAG;AAsBxC,QACE,oBAAC;EACM;EACL,mBAAkB;EAClB,oBAAoB;EACpB,OAzBqC,cACjC;GACJ;IACE,YAAY;IACZ,WAAW;IACX,mBAAmB;IACpB;GACD,OAAO;GACP,sBAAsB,EAAE,OAAO,qBAAqB,GAAG;GACvD,qBACI;IACE,UAAU;IACV,YAAY;IACb,GACD;GACJ;GACD,EACD;GAAC;GAAqB;GAAoB;GAAO,OAAO;GAAW,CACpE;EAQG,GAAI;YAEH;GACI;EAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCF,MAAM,OAAO,KAAK,SAAS,KAAK,EAAE,SAAS,GAAG,SAAoB;AAEhE,KAAI,YAAY,aACd,QAAO,oBAAC,kBAAe,GAAI,QAAS;AAGtC,QAAO,oBAAC;EAA2B;EAAS,GAAI;GAAS;EACzD;AAEF,KAAK,cAAc;AAInB,MAAa,YAAY;AACzB,MAAa,sBAAsB"}

package/dist/components/IconButton.cjs

@@ -1,5 +1,6 @@
-/*! © 2026 Yahoo, Inc. UDS Mobile v1.3.0-beta.7 */
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+/*! © 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_index = require('../motion-tokens/dist/index.cjs');
 const require_motion = require('../motion.cjs');
 const require_components_Icon = require('./Icon.cjs');
@@ -23,8 +24,13 @@ function interpolateShadowAlpha(shadow, alpha) {
 /**
 * **An icon button element that can be used to trigger an action**
 *
-* Features animated scale effect on press and smooth color transitions
-* matching the web UDS IconButton behavior.
+* @description
+* An icon-only button for actions where space is limited. Features animated
+* scale effect on press and smooth color transitions matching the web UDS
+* IconButton behavior.
+*
+* @category Interactive
+* @platform mobile
 *
 * @example
 * ```tsx
@@ -34,8 +40,21 @@ function interpolateShadowAlpha(shadow, alpha) {
 * <IconButton name="Close" variant="secondary" size="sm" />
 * <IconButton name="Settings" loading />
 * ```
+*
+* @usage
+* - Use for toolbar actions
+* - Use for closing modals/dialogs
+* - Always provide accessibilityLabel for screen readers
+*
+* @accessibility
+* - Sets `accessibilityRole="button"` automatically
+* - Announces loading state to screen readers
+* - **Always** provide `accessibilityLabel` since there's no visible text
+*
+* @see {@link Button} for buttons with text labels
+* @see {@link Icon} for non-interactive icons
 */
-const IconButton = (0, react.memo)(function IconButton$1({ name, variant = "primary", size = "md", iconVariant = "outline", loading, disabled, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
+const IconButton = (0, react.memo)(function IconButton({ name, variant = "primary", size = "md", iconVariant = "outline", loading, disabled, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
 	const isDisabled = disabled || loading;
 	const shouldAnimate = !disableEffects && !isDisabled;
 	const [pressed, setPressed] = (0, react.useState)(false);

package/dist/components/IconButton.d.cts

@@ -2,33 +2,40 @@
 import { ButtonVariantFlat, IconButtonSize, IconVariant } from "../types/dist/index.cjs";
 import { IconName } from "./Icon.cjs";
 import { PressableProps as PressableProps$1 } from "./Pressable.cjs";
-import * as react17 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 
 //#region src/components/IconButton.d.ts
 interface IconButtonProps extends Omit<PressableProps$1, 'children'> {
-  /** Icon to render from the icons package. */
+  /** Icon to render from the icons package */
   name: IconName;
-  /** @default 'primary' */
+  /** The visual style variant @default 'primary' */
   variant?: ButtonVariantFlat;
-  /** @default 'md' */
+  /** The size of the button @default 'md' */
   size?: IconButtonSize;
-  /** @default 'outline' */
+  /** The icon style variant @default 'outline' */
   iconVariant?: IconVariant;
+  /** Shows a loading spinner and disables the button */
   loading?: boolean;
   /**
    * Disable motion effects (scale on press, icon animations)
    * @default false
    */
   disableEffects?: boolean;
+  /** Ref to the underlying View */
   ref?: Ref<View>;
 }
 /**
  * **An icon button element that can be used to trigger an action**
  *
- * Features animated scale effect on press and smooth color transitions
- * matching the web UDS IconButton behavior.
+ * @description
+ * An icon-only button for actions where space is limited. Features animated
+ * scale effect on press and smooth color transitions matching the web UDS
+ * IconButton behavior.
+ *
+ * @category Interactive
+ * @platform mobile
  *
  * @example
  * ```tsx
@@ -38,8 +45,21 @@ interface IconButtonProps extends Omit<PressableProps$1, 'children'> {
  * <IconButton name="Close" variant="secondary" size="sm" />
  * <IconButton name="Settings" loading />
  * ```
+ *
+ * @usage
+ * - Use for toolbar actions
+ * - Use for closing modals/dialogs
+ * - Always provide accessibilityLabel for screen readers
+ *
+ * @accessibility
+ * - Sets `accessibilityRole="button"` automatically
+ * - Announces loading state to screen readers
+ * - **Always** provide `accessibilityLabel` since there's no visible text
+ *
+ * @see {@link Button} for buttons with text labels
+ * @see {@link Icon} for non-interactive icons
  */
-declare const IconButton: react17.NamedExoticComponent<IconButtonProps>;
+declare const IconButton: react.NamedExoticComponent<IconButtonProps>;
 //#endregion
 export { IconButton, type IconButtonProps };
 //# sourceMappingURL=IconButton.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.cts","names":[],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UA6CU,eAAA,SAAwB,KAAK;;QAE/B;EAFE;EAA6B,OAAA,CAAA,EAI3B,iBAJ2B;EAE/B;EAEI,IAAA,CAAA,EAEH,cAFG;EAEH;EAEO,WAAA,CAAA,EAAA,WAAA;EAOJ,OAAA,CAAA,EAAA,OAAA;EAAJ;;;AAf8B;;QAe9B,IAAI;;;;;;;;;;;;;;;;;cAsBN,YAAU,OAAA,CAAA,qBAAA"}
+{"version":3,"file":"IconButton.d.cts","names":[],"sources":["../../src/components/IconButton.tsx"],"mappings":";;;;;;;;;UA6CU,eAAA,SAAwB,IAAA,CAAK,gBAAA;;EAErC,IAAA,EAAM,QAAA;EAFE;EAIR,OAAA,GAAU,iBAAA;;EAEV,IAAA,GAAO,cAAA;EAJD;EAMN,WAAA,GAAc,WAAA;EAFP;EAIP,OAAA;EAOU;;;;EAFV,cAAA;EAfgC;EAiBhC,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;;cAwCV,UAAA,EAAU,KAAA,CAAA,oBAAA,CAAA,eAAA"}