@yahoo/uds-mobile 2.10.0 → 2.11.0

package/dist/components/Icon.d.ts

@@ -72,7 +72,7 @@ interface IconProps extends Omit<TextProps, 'style'> {
  *
  * @example
  * ```tsx
- * import { Icon } from '@yahoo/uds-mobile';
+ * import { Icon } from '@yahoo/uds-mobile/Icon';
  *
  * <Icon name="ChevronRight" size="md" color="primary" />
  * <Icon name="Star" variant="fill" color="accent" />
@@ -93,7 +93,7 @@ interface IconProps extends Omit<TextProps, 'style'> {
  * @see {@link IconSlot} for flexible icon rendering in components
  */
 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", "Grass", "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", "Pollen", "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", "Tree", "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", "YahooScoutFinance", "YahooScoutFinanceGradient", "YahooScoutIcon", "YahooScoutIconGradient", "ZIP"];
+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", "Cvc", "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", "FoodDelivery", "Football", "FootballHelmet", "ForestTree", "FourBoxes", "FourCorners", "FourCornersMagnifyingGlass", "FourCornersMusicNote", "FourLinesSpread", "FourThreeRatio", "FullMoon", "GIF", "GeminiAstrology", "GiftBox", "GolfTee", "GraduationHat", "Graph", "Grass", "Gymnastics", "HalfStar", "HalfSun", "HappyFace", "HazeDay", "HazeNight", "Heading2", "Heading3", "Headline1", "HeadlineDocumentSquare", "Headphone", "HeadphonesMic", "Heart", "HeartArrow", "HeartPulse", "HeartSquare", "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", "NoBookmark", "NoConnectionScreen", "NoEye", "NoHeart", "NoImage", "NoPeople", "NoShield", "NoSmoking", "NoSquare", "NoStar", "NoVideoCamera", "NoWifi", "NotificationBell", "Null", "NumberedList", "OnTop", "OneOneRatio", "OpenBook", "OpenBox", "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", "Pollen", "Pool", "PowerSwitch", "Preferences", "PreferencesAlt", "Printer", "Priority", "Profile", "Progress", "ProgressWithCheck", "Pulse", "PuzzlePiece", "QrCode", "QuestionBubble", "QuoteCircle", "QuoteSquare", "RAW", "RTF", "RTFOff", "RacingFlag", "Radar", "RadioCircle", "RainDay", "RainNight", "Receipt", "ReceiptCheck", "ReceiptLong", "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", "ThreeTwoRatio", "ThumbsDown", "ThumbsUp", "Thumbtack", "ThumbtackDiagonal", "TimePaperPlane", "Tornado", "Trading", "TrafficSignRightTurn", "Trampoline", "Transactions", "Trash", "Tree", "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", "YahooScoutFinance", "YahooScoutFinanceGradient", "YahooScoutIcon", "YahooScoutIconGradient", "ZIP"];
 declare const multicolorIconNames: readonly ["Cloud", "CloudDay", "CloudNight", "Cold", "CrescentMoon", "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", "MostlyCloudyNight", "Night", "PartlyCloudyNight", "PartlyFlurries", "PartlyNightFlurries", "PartlySunny", "Rain", "RainDay", "RainNight", "Sleet", "Snow", "SnowDay", "SnowNight", "Snowflake", "SprinkleDay", "SprinkleNight", "Sun", "Sunrise", "Sunset", "ThirdQuarter", "Tornado", "WaningCrescent", "WaningGibbous", "WaxingCrescent", "WaxingGibbous", "Wind", "WindCloud", "WindCloudDay", "WindCloudNight", "YahooScoutFinance", "YahooScoutFinanceGradient", "YahooScoutIcon", "YahooScoutIconGradient"];
 //#endregion
 export { Icon, type IconName, type IconProps, iconNames, multicolorIconNames };

package/dist/components/Icon.js

@@ -124,7 +124,7 @@ const OutlineOrFillIcon = memo(function OutlineOrFillIcon({ name, size = DEFAULT
 *
 * @example
 * ```tsx
-* import { Icon } from '@yahoo/uds-mobile';
+* import { Icon } from '@yahoo/uds-mobile/Icon';
 *
 * <Icon name="ChevronRight" size="md" color="primary" />
 * <Icon name="Star" variant="fill" color="accent" />

package/dist/components/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","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        fontSize: pixelSize,\n        lineHeight: pixelSize,\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, pixelSize],\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,MAAD;EAAM,OAAO,OAAO;YAClB,oBAAC,QAAD;GACE,KAAK;GACL,OAAO,sBAAsB;GAC7B,QAAQ,sBAAsB;GAC9B,CAAA;EACG,CAAA;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,SAAoC,GAD9B,KAAK,GAAG,QAAQ,GAAG;AAwBxC,QACE,oBAAC,MAAD;EACO;EACL,mBAAkB;EAClB,oBAAoB;EACpB,OA3BqC,cACjC;GACJ;IACE,YAAY;IACZ,WAAW;IACX,mBAAmB;IACnB,UAAU;IACV,YAAY;IACb;GACD,OAAO;GACP,sBAAsB,EAAE,OAAO,qBAAqB,GAAG,KAAA;GACvD,qBACI;IACE,UAAU;IACV,YAAY;IACb,GACD,KAAA;GACJ;GACD,EACD;GAAC;GAAqB;GAAoB;GAAO,OAAO;GAAY;GAAU,CAQ3D;EACjB,GAAI;YAEH;EACI,CAAA;EAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCF,MAAM,OAAO,KAAK,SAAS,KAAK,EAAE,SAAS,GAAG,SAAoB;AAEhE,KAAI,YAAY,aACd,QAAO,oBAAC,gBAAD,EAAgB,GAAI,OAAS,CAAA;AAGtC,QAAO,oBAAC,mBAAD;EAA4B;EAAS,GAAI;EAAS,CAAA;EACzD;AAEF,KAAK,cAAc;AAInB,MAAa,YAAY;AACzB,MAAa,sBAAsB"}
+{"version":3,"file":"Icon.js","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        fontSize: pixelSize,\n        lineHeight: pixelSize,\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, pixelSize],\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/Icon';\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,MAAD;EAAM,OAAO,OAAO;YAClB,oBAAC,QAAD;GACE,KAAK;GACL,OAAO,sBAAsB;GAC7B,QAAQ,sBAAsB;GAC9B,CAAA;EACG,CAAA;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,SAAoC,GAD9B,KAAK,GAAG,QAAQ,GAAG;AAwBxC,QACE,oBAAC,MAAD;EACO;EACL,mBAAkB;EAClB,oBAAoB;EACpB,OA3BqC,cACjC;GACJ;IACE,YAAY;IACZ,WAAW;IACX,mBAAmB;IACnB,UAAU;IACV,YAAY;IACb;GACD,OAAO;GACP,sBAAsB,EAAE,OAAO,qBAAqB,GAAG,KAAA;GACvD,qBACI;IACE,UAAU;IACV,YAAY;IACb,GACD,KAAA;GACJ;GACD,EACD;GAAC;GAAqB;GAAoB;GAAO,OAAO;GAAY;GAAU,CAQ3D;EACjB,GAAI;YAEH;EACI,CAAA;EAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCF,MAAM,OAAO,KAAK,SAAS,KAAK,EAAE,SAAS,GAAG,SAAoB;AAEhE,KAAI,YAAY,aACd,QAAO,oBAAC,gBAAD,EAAgB,GAAI,OAAS,CAAA;AAGtC,QAAO,oBAAC,mBAAD;EAA4B;EAAS,GAAI;EAAS,CAAA;EACzD;AAEF,KAAK,cAAc;AAInB,MAAa,YAAY;AACzB,MAAa,sBAAsB"}

package/dist/components/IconButton.cjs

@@ -34,7 +34,7 @@ function interpolateShadowAlpha(shadow, alpha) {
 *
 * @example
 * ```tsx
-* import { IconButton } from '@yahoo/uds-mobile';
+* import { IconButton } from '@yahoo/uds-mobile/IconButton';
 *
 * <IconButton name="Add" onPress={() => console.log('pressed')} />
 * <IconButton name="Close" variant="secondary" size="sm" />

package/dist/components/IconButton.d.cts

@@ -42,7 +42,7 @@ interface IconButtonProps extends Omit<PressableProps$1, 'children'> {
  *
  * @example
  * ```tsx
- * import { IconButton } from '@yahoo/uds-mobile';
+ * import { IconButton } from '@yahoo/uds-mobile/IconButton';
  *
  * <IconButton name="Add" onPress={() => console.log('pressed')} />
  * <IconButton name="Close" variant="secondary" size="sm" />

package/dist/components/IconButton.d.ts

@@ -42,7 +42,7 @@ interface IconButtonProps extends Omit<PressableProps$1, 'children'> {
  *
  * @example
  * ```tsx
- * import { IconButton } from '@yahoo/uds-mobile';
+ * import { IconButton } from '@yahoo/uds-mobile/IconButton';
  *
  * <IconButton name="Add" onPress={() => console.log('pressed')} />
  * <IconButton name="Close" variant="secondary" size="sm" />

package/dist/components/IconButton.js

@@ -32,7 +32,7 @@ function interpolateShadowAlpha(shadow, alpha) {
 *
 * @example
 * ```tsx
-* import { IconButton } from '@yahoo/uds-mobile';
+* import { IconButton } from '@yahoo/uds-mobile/IconButton';
 *
 * <IconButton name="Add" onPress={() => console.log('pressed')} />
 * <IconButton name="Close" variant="secondary" size="sm" />

package/dist/components/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":["foundationStyles"],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonVariantFlat, IconButtonSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator } from 'react-native';\nimport {\n  Easing,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme, useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { buttonStyles, iconButtonStyles, styles as foundationStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport type { IconName } from './Icon';\nimport { Icon } from './Icon';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\n\n/* -------------------------------------------------------------------------- */\n/*                              Animation Helpers                              */\n/* -------------------------------------------------------------------------- */\n\nfunction interpolateShadowAlpha(shadow: string | undefined, alpha: number): string {\n  'worklet';\n  if (!shadow) {\n    return '';\n  }\n  if (alpha >= 1) {\n    return shadow;\n  }\n  if (alpha <= 0) {\n    return '';\n  }\n\n  return shadow.replace(/rgba\\(([^,]+),\\s*([^,]+),\\s*([^,]+),\\s*([^)]+)\\)/g, (_, r, g, b, a) => {\n    const newAlpha = parseFloat(a) * alpha;\n    return `rgba(${r}, ${g}, ${b}, ${newAlpha.toFixed(3)})`;\n  });\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            IconButton Props                                 */\n/* -------------------------------------------------------------------------- */\n\ninterface IconButtonProps extends Omit<PressableProps, 'children'> {\n  /** Icon to render from the icons package */\n  name: IconName;\n  /** The visual style variant @default 'primary' */\n  variant?: ButtonVariantFlat;\n  /** The size of the button @default 'md' */\n  size?: IconButtonSize;\n  /** The icon style variant @default 'outline' */\n  iconVariant?: IconVariant;\n  /** Override the icon color token without changing the button variant tokens */\n  iconColor?: StyleProps['color'];\n  /** Shows a loading spinner and disables the button */\n  loading?: boolean;\n  /**\n   * Disable motion effects (scale on press, icon animations)\n   * @default false\n   */\n  disableEffects?: boolean;\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            IconButton Component                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **An icon button element that can be used to trigger an action**\n *\n * @description\n * An icon-only button for actions where space is limited. Features animated\n * scale effect on press and smooth color transitions matching the web UDS\n * IconButton behavior.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { IconButton } from '@yahoo/uds-mobile';\n *\n * <IconButton name=\"Add\" onPress={() => console.log('pressed')} />\n * <IconButton name=\"Close\" variant=\"secondary\" size=\"sm\" />\n * <IconButton name=\"Settings\" loading />\n * ```\n *\n * @usage\n * - Use for toolbar actions\n * - Use for closing modals/dialogs\n * - Always provide accessibilityLabel for screen readers\n *\n * @accessibility\n * - Sets `accessibilityRole=\"button\"` automatically\n * - Announces loading state to screen readers\n * - **Always** provide `accessibilityLabel` since there's no visible text\n *\n * @see {@link Button} for buttons with text labels\n * @see {@link Icon} for non-interactive icons\n */\nconst IconButton = memo(function IconButton({\n  name,\n  variant = 'primary',\n  size = 'md',\n  iconVariant = 'outline',\n  iconColor,\n  loading,\n  disabled,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  disableEffects = false,\n  onPressIn,\n  onPressOut,\n  ref,\n  ...props\n}: IconButtonProps) {\n  const isDisabled = disabled || loading;\n  const shouldAnimate = !disableEffects && !isDisabled;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [pressed, setPressed] = useState(false);\n\n  // Apply layer-based styles with compound variant support\n  iconButtonStyles.useVariants({ size });\n  buttonStyles.useVariants({ variant, disabled: isDisabled, pressed });\n  foundationStyles.useVariants({ color: iconColor });\n\n  const resolvedIconColor = iconColor\n    ? (foundationStyles.foundation.color as string | undefined)\n    : undefined;\n\n  // Animate colors using Unistyles' useAnimatedVariantColor\n  const backgroundColor = useAnimatedVariantColor(buttonStyles.root, 'backgroundColor');\n  const borderColor = useAnimatedVariantColor(buttonStyles.root, 'borderColor');\n\n  // Get animated theme for boxShadow\n  const animatedTheme = useAnimatedTheme();\n\n  /* ------------------------------- Animation -------------------------------- */\n  const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n  const handlePressIn = useCallback<NonNullable<PressableProps['onPressIn']>>(\n    (event) => {\n      setPressed(true);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.down, BUTTON_SPRING_CONFIG);\n      }\n      onPressIn?.(event);\n    },\n    [shouldAnimate, scale, onPressIn],\n  );\n\n  const handlePressOut = useCallback<NonNullable<PressableProps['onPressOut']>>(\n    (event) => {\n      setPressed(false);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG);\n      }\n      onPressOut?.(event);\n    },\n    [shouldAnimate, scale, onPressOut],\n  );\n\n  const a11yState = useMemo(() => ({ disabled: isDisabled, busy: loading }), [isDisabled, loading]);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Animate pressed state for shadow\n  const pressProgress = useDerivedValue(\n    () => withTiming(pressed ? 1 : 0, { duration: 220, easing: Easing.bezier(0, 0, 0.2, 1) }),\n    [pressed],\n  );\n\n  // Animate using Unistyles' variant color system + boxShadow from theme\n  const animatedRootStyle = useAnimatedStyle(() => {\n    // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n    const components = animatedTheme.value.components as unknown as Record<\n      string,\n      Record<string, unknown>\n    >;\n    const shadowPressed = components[`button/variant/${variant}/root/pressed`]?.boxShadow as\n      | string\n      | undefined;\n\n    return {\n      transform: [{ scale: scale.value }],\n      backgroundColor: withTiming(backgroundColor.value, {\n        duration: 220,\n        easing: Easing.bezier(0, 0, 0.2, 1),\n      }),\n      borderColor: withTiming(borderColor.value, {\n        duration: 220,\n        easing: Easing.bezier(0, 0, 0.2, 1),\n      }),\n      // Only animate shadow if the theme defines one for this variant\n      ...(shadowPressed && {\n        boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\n      }),\n    };\n  });\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <AnimatedPressable\n      ref={ref}\n      disabled={isDisabled}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      overflow=\"hidden\"\n      accessibilityLabel={loading ? `${accessibilityLabel ?? ''}, loading` : accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n      accessibilityRole=\"button\"\n      accessibilityState={a11yState}\n      style={[\n        iconButtonStyles.root,\n        buttonStyles.root,\n        foundationStyles.foundation,\n        animatedRootStyle,\n        typeof style === 'function' ? style({ pressed }) : style,\n      ]}\n      {...props}\n    >\n      {loading ? (\n        <ActivityIndicator\n          size={iconButtonStyles.icon.fontSize}\n          color={resolvedIconColor ?? buttonStyles.icon.color}\n        />\n      ) : (\n        <Icon\n          name={name}\n          variant={iconVariant}\n          style={[iconButtonStyles.icon, buttonStyles.icon]}\n          dangerouslySetColor={resolvedIconColor}\n        />\n      )}\n    </AnimatedPressable>\n  );\n});\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton, type IconButtonProps };\n"],"mappings":"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"}
+{"version":3,"file":"IconButton.js","names":["foundationStyles"],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonVariantFlat, IconButtonSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator } from 'react-native';\nimport {\n  Easing,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme, useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { buttonStyles, iconButtonStyles, styles as foundationStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport type { IconName } from './Icon';\nimport { Icon } from './Icon';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\n\n/* -------------------------------------------------------------------------- */\n/*                              Animation Helpers                              */\n/* -------------------------------------------------------------------------- */\n\nfunction interpolateShadowAlpha(shadow: string | undefined, alpha: number): string {\n  'worklet';\n  if (!shadow) {\n    return '';\n  }\n  if (alpha >= 1) {\n    return shadow;\n  }\n  if (alpha <= 0) {\n    return '';\n  }\n\n  return shadow.replace(/rgba\\(([^,]+),\\s*([^,]+),\\s*([^,]+),\\s*([^)]+)\\)/g, (_, r, g, b, a) => {\n    const newAlpha = parseFloat(a) * alpha;\n    return `rgba(${r}, ${g}, ${b}, ${newAlpha.toFixed(3)})`;\n  });\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            IconButton Props                                 */\n/* -------------------------------------------------------------------------- */\n\ninterface IconButtonProps extends Omit<PressableProps, 'children'> {\n  /** Icon to render from the icons package */\n  name: IconName;\n  /** The visual style variant @default 'primary' */\n  variant?: ButtonVariantFlat;\n  /** The size of the button @default 'md' */\n  size?: IconButtonSize;\n  /** The icon style variant @default 'outline' */\n  iconVariant?: IconVariant;\n  /** Override the icon color token without changing the button variant tokens */\n  iconColor?: StyleProps['color'];\n  /** Shows a loading spinner and disables the button */\n  loading?: boolean;\n  /**\n   * Disable motion effects (scale on press, icon animations)\n   * @default false\n   */\n  disableEffects?: boolean;\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            IconButton Component                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **An icon button element that can be used to trigger an action**\n *\n * @description\n * An icon-only button for actions where space is limited. Features animated\n * scale effect on press and smooth color transitions matching the web UDS\n * IconButton behavior.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { IconButton } from '@yahoo/uds-mobile/IconButton';\n *\n * <IconButton name=\"Add\" onPress={() => console.log('pressed')} />\n * <IconButton name=\"Close\" variant=\"secondary\" size=\"sm\" />\n * <IconButton name=\"Settings\" loading />\n * ```\n *\n * @usage\n * - Use for toolbar actions\n * - Use for closing modals/dialogs\n * - Always provide accessibilityLabel for screen readers\n *\n * @accessibility\n * - Sets `accessibilityRole=\"button\"` automatically\n * - Announces loading state to screen readers\n * - **Always** provide `accessibilityLabel` since there's no visible text\n *\n * @see {@link Button} for buttons with text labels\n * @see {@link Icon} for non-interactive icons\n */\nconst IconButton = memo(function IconButton({\n  name,\n  variant = 'primary',\n  size = 'md',\n  iconVariant = 'outline',\n  iconColor,\n  loading,\n  disabled,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  disableEffects = false,\n  onPressIn,\n  onPressOut,\n  ref,\n  ...props\n}: IconButtonProps) {\n  const isDisabled = disabled || loading;\n  const shouldAnimate = !disableEffects && !isDisabled;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [pressed, setPressed] = useState(false);\n\n  // Apply layer-based styles with compound variant support\n  iconButtonStyles.useVariants({ size });\n  buttonStyles.useVariants({ variant, disabled: isDisabled, pressed });\n  foundationStyles.useVariants({ color: iconColor });\n\n  const resolvedIconColor = iconColor\n    ? (foundationStyles.foundation.color as string | undefined)\n    : undefined;\n\n  // Animate colors using Unistyles' useAnimatedVariantColor\n  const backgroundColor = useAnimatedVariantColor(buttonStyles.root, 'backgroundColor');\n  const borderColor = useAnimatedVariantColor(buttonStyles.root, 'borderColor');\n\n  // Get animated theme for boxShadow\n  const animatedTheme = useAnimatedTheme();\n\n  /* ------------------------------- Animation -------------------------------- */\n  const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n  const handlePressIn = useCallback<NonNullable<PressableProps['onPressIn']>>(\n    (event) => {\n      setPressed(true);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.down, BUTTON_SPRING_CONFIG);\n      }\n      onPressIn?.(event);\n    },\n    [shouldAnimate, scale, onPressIn],\n  );\n\n  const handlePressOut = useCallback<NonNullable<PressableProps['onPressOut']>>(\n    (event) => {\n      setPressed(false);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG);\n      }\n      onPressOut?.(event);\n    },\n    [shouldAnimate, scale, onPressOut],\n  );\n\n  const a11yState = useMemo(() => ({ disabled: isDisabled, busy: loading }), [isDisabled, loading]);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Animate pressed state for shadow\n  const pressProgress = useDerivedValue(\n    () => withTiming(pressed ? 1 : 0, { duration: 220, easing: Easing.bezier(0, 0, 0.2, 1) }),\n    [pressed],\n  );\n\n  // Animate using Unistyles' variant color system + boxShadow from theme\n  const animatedRootStyle = useAnimatedStyle(() => {\n    // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n    const components = animatedTheme.value.components as unknown as Record<\n      string,\n      Record<string, unknown>\n    >;\n    const shadowPressed = components[`button/variant/${variant}/root/pressed`]?.boxShadow as\n      | string\n      | undefined;\n\n    return {\n      transform: [{ scale: scale.value }],\n      backgroundColor: withTiming(backgroundColor.value, {\n        duration: 220,\n        easing: Easing.bezier(0, 0, 0.2, 1),\n      }),\n      borderColor: withTiming(borderColor.value, {\n        duration: 220,\n        easing: Easing.bezier(0, 0, 0.2, 1),\n      }),\n      // Only animate shadow if the theme defines one for this variant\n      ...(shadowPressed && {\n        boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\n      }),\n    };\n  });\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <AnimatedPressable\n      ref={ref}\n      disabled={isDisabled}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      overflow=\"hidden\"\n      accessibilityLabel={loading ? `${accessibilityLabel ?? ''}, loading` : accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n      accessibilityRole=\"button\"\n      accessibilityState={a11yState}\n      style={[\n        iconButtonStyles.root,\n        buttonStyles.root,\n        foundationStyles.foundation,\n        animatedRootStyle,\n        typeof style === 'function' ? style({ pressed }) : style,\n      ]}\n      {...props}\n    >\n      {loading ? (\n        <ActivityIndicator\n          size={iconButtonStyles.icon.fontSize}\n          color={resolvedIconColor ?? buttonStyles.icon.color}\n        />\n      ) : (\n        <Icon\n          name={name}\n          variant={iconVariant}\n          style={[iconButtonStyles.icon, buttonStyles.icon]}\n          dangerouslySetColor={resolvedIconColor}\n        />\n      )}\n    </AnimatedPressable>\n  );\n});\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton, type IconButtonProps };\n"],"mappings":"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"}

package/dist/components/IconSlot.cjs

@@ -19,7 +19,7 @@ let lodash_es = require("lodash-es");
 *
 * @example
 * ```tsx
-* import { IconSlot } from '@yahoo/uds-mobile';
+* import { IconSlot } from '@yahoo/uds-mobile/IconSlot';
 *
 * // Using icon name (preferred - stable reference, no useMemo needed)
 * <IconSlot icon="Info" size="md" variant="fill" />

package/dist/components/IconSlot.d.cts

@@ -25,7 +25,7 @@ interface IconSlotProps extends IconPropsWithoutName {
  *
  * @example
  * ```tsx
- * import { IconSlot } from '@yahoo/uds-mobile';
+ * import { IconSlot } from '@yahoo/uds-mobile/IconSlot';
  *
  * // Using icon name (preferred - stable reference, no useMemo needed)
  * <IconSlot icon="Info" size="md" variant="fill" />

package/dist/components/IconSlot.d.ts

@@ -25,7 +25,7 @@ interface IconSlotProps extends IconPropsWithoutName {
  *
  * @example
  * ```tsx
- * import { IconSlot } from '@yahoo/uds-mobile';
+ * import { IconSlot } from '@yahoo/uds-mobile/IconSlot';
  *
  * // Using icon name (preferred - stable reference, no useMemo needed)
  * <IconSlot icon="Info" size="md" variant="fill" />

package/dist/components/IconSlot.js

@@ -17,7 +17,7 @@ import { isFunction } from "lodash-es";
 *
 * @example
 * ```tsx
-* import { IconSlot } from '@yahoo/uds-mobile';
+* import { IconSlot } from '@yahoo/uds-mobile/IconSlot';
 *
 * // Using icon name (preferred - stable reference, no useMemo needed)
 * <IconSlot icon="Info" size="md" variant="fill" />

package/dist/components/IconSlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconSlot.js","names":[],"sources":["../../src/components/IconSlot.tsx"],"sourcesContent":["import { isFunction } from 'lodash-es';\nimport type { ReactElement, Ref } from 'react';\nimport { cloneElement, isValidElement, memo } from 'react';\nimport type { Text as RNText } from 'react-native';\n\nimport type { IconName, IconProps } from './Icon';\nimport { Icon } from './Icon';\ntype IconPropsWithoutName = Omit<IconProps, 'name'>;\n\ntype IconSlotType =\n  | IconName\n  | ReactElement<IconProps>\n  | ((iconProps: IconPropsWithoutName) => ReactElement<IconProps>);\n\ninterface IconSlotProps extends IconPropsWithoutName {\n  ref?: Ref<RNText>;\n  /** The icon to render. Can be a UDS icon, an Icon component, ReactNode, or a function that returns a ReactNode. */\n  icon?: IconSlotType;\n  /** Props to spread onto the icon. */\n}\n\n/**\n * **🔌 A helper container to render icons flexibly**\n *\n * @description\n * Useful in components that use icons and have a startIcon and endIcon. It allows\n * consumers to pass in a standard UDS icon name, an Icon component, or a render function\n * for custom rendering.\n *\n * @category Utility\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { IconSlot } from '@yahoo/uds-mobile';\n *\n * // Using icon name (preferred - stable reference, no useMemo needed)\n * <IconSlot icon=\"Info\" size=\"md\" variant=\"fill\" />\n *\n * // Using Icon component\n * <IconSlot icon={<Icon name=\"Info\" variant=\"fill\" />} />\n *\n * // Using render function\n * <IconSlot icon={(props) => <Icon name=\"Info\" {...props} variant=\"fill\" />} />\n * ```\n *\n * @usage\n * - Pass icon name for simple usage\n * - Pass Icon component for custom props\n * - Pass function for dynamic rendering\n *\n * @see {@link Icon} for direct icon rendering\n */\nconst IconSlot = memo(function IconSlot({ icon, ref, ...props }: IconSlotProps) {\n  if (!icon) {\n    return null;\n  }\n\n  if (typeof icon === 'string') {\n    return <Icon ref={ref} name={icon} {...props} />;\n  }\n\n  if (isFunction(icon)) {\n    const iconEl = icon(props);\n    return isValidElement(iconEl) ? cloneElement(iconEl, { ...props } as Partial<IconProps>) : null;\n  }\n\n  return isValidElement(icon)\n    ? cloneElement(icon, {\n        ...props,\n        ...icon.props, // user's props on <Icon>\n      } as Partial<IconProps>)\n    : null;\n});\n\nIconSlot.displayName = 'IconSlot';\n\nexport { IconSlot, type IconSlotProps, type IconSlotType };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,MAAM,WAAW,KAAK,SAAS,SAAS,EAAE,MAAM,KAAK,GAAG,SAAwB;AAC9E,KAAI,CAAC,KACH,QAAO;AAGT,KAAI,OAAO,SAAS,SAClB,QAAO,oBAAC,MAAD;EAAW;EAAK,MAAM;EAAM,GAAI;EAAS,CAAA;AAGlD,KAAI,WAAW,KAAK,EAAE;EACpB,MAAM,SAAS,KAAK,MAAM;AAC1B,SAAO,eAAe,OAAO,GAAG,aAAa,QAAQ,EAAE,GAAG,OAAO,CAAuB,GAAG;;AAG7F,QAAO,eAAe,KAAK,GACvB,aAAa,MAAM;EACjB,GAAG;EACH,GAAG,KAAK;EACT,CAAuB,GACxB;EACJ;AAEF,SAAS,cAAc"}
+{"version":3,"file":"IconSlot.js","names":[],"sources":["../../src/components/IconSlot.tsx"],"sourcesContent":["import { isFunction } from 'lodash-es';\nimport type { ReactElement, Ref } from 'react';\nimport { cloneElement, isValidElement, memo } from 'react';\nimport type { Text as RNText } from 'react-native';\n\nimport type { IconName, IconProps } from './Icon';\nimport { Icon } from './Icon';\ntype IconPropsWithoutName = Omit<IconProps, 'name'>;\n\ntype IconSlotType =\n  | IconName\n  | ReactElement<IconProps>\n  | ((iconProps: IconPropsWithoutName) => ReactElement<IconProps>);\n\ninterface IconSlotProps extends IconPropsWithoutName {\n  ref?: Ref<RNText>;\n  /** The icon to render. Can be a UDS icon, an Icon component, ReactNode, or a function that returns a ReactNode. */\n  icon?: IconSlotType;\n  /** Props to spread onto the icon. */\n}\n\n/**\n * **🔌 A helper container to render icons flexibly**\n *\n * @description\n * Useful in components that use icons and have a startIcon and endIcon. It allows\n * consumers to pass in a standard UDS icon name, an Icon component, or a render function\n * for custom rendering.\n *\n * @category Utility\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { IconSlot } from '@yahoo/uds-mobile/IconSlot';\n *\n * // Using icon name (preferred - stable reference, no useMemo needed)\n * <IconSlot icon=\"Info\" size=\"md\" variant=\"fill\" />\n *\n * // Using Icon component\n * <IconSlot icon={<Icon name=\"Info\" variant=\"fill\" />} />\n *\n * // Using render function\n * <IconSlot icon={(props) => <Icon name=\"Info\" {...props} variant=\"fill\" />} />\n * ```\n *\n * @usage\n * - Pass icon name for simple usage\n * - Pass Icon component for custom props\n * - Pass function for dynamic rendering\n *\n * @see {@link Icon} for direct icon rendering\n */\nconst IconSlot = memo(function IconSlot({ icon, ref, ...props }: IconSlotProps) {\n  if (!icon) {\n    return null;\n  }\n\n  if (typeof icon === 'string') {\n    return <Icon ref={ref} name={icon} {...props} />;\n  }\n\n  if (isFunction(icon)) {\n    const iconEl = icon(props);\n    return isValidElement(iconEl) ? cloneElement(iconEl, { ...props } as Partial<IconProps>) : null;\n  }\n\n  return isValidElement(icon)\n    ? cloneElement(icon, {\n        ...props,\n        ...icon.props, // user's props on <Icon>\n      } as Partial<IconProps>)\n    : null;\n});\n\nIconSlot.displayName = 'IconSlot';\n\nexport { IconSlot, type IconSlotProps, type IconSlotType };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,MAAM,WAAW,KAAK,SAAS,SAAS,EAAE,MAAM,KAAK,GAAG,SAAwB;AAC9E,KAAI,CAAC,KACH,QAAO;AAGT,KAAI,OAAO,SAAS,SAClB,QAAO,oBAAC,MAAD;EAAW;EAAK,MAAM;EAAM,GAAI;EAAS,CAAA;AAGlD,KAAI,WAAW,KAAK,EAAE;EACpB,MAAM,SAAS,KAAK,MAAM;AAC1B,SAAO,eAAe,OAAO,GAAG,aAAa,QAAQ,EAAE,GAAG,OAAO,CAAuB,GAAG;;AAG7F,QAAO,eAAe,KAAK,GACvB,aAAa,MAAM;EACjB,GAAG;EACH,GAAG,KAAK;EACT,CAAuB,GACxB;EACJ;AAEF,SAAS,cAAc"}

package/dist/components/Image.cjs

@@ -24,7 +24,7 @@ const CONTENT_FIT_TO_RESIZE_MODE = {
 *
 * @example
 * ```tsx
-* import { Image } from '@yahoo/uds-mobile';
+* import { Image } from '@yahoo/uds-mobile/Image';
 *
 * <Image src="https://example.com/image.png" width={200} height={150} />
 * <Image src={require('./local-image.png')} contentFit="cover" borderRadius="md" />

package/dist/components/Image.d.cts

@@ -77,7 +77,7 @@ interface ImageProps extends Omit<ImageProps$1, 'source' | 'src' | 'width' | 'he
  *
  * @example
  * ```tsx
- * import { Image } from '@yahoo/uds-mobile';
+ * import { Image } from '@yahoo/uds-mobile/Image';
  *
  * <Image src="https://example.com/image.png" width={200} height={150} />
  * <Image src={require('./local-image.png')} contentFit="cover" borderRadius="md" />

package/dist/components/Image.d.ts

@@ -77,7 +77,7 @@ interface ImageProps extends Omit<ImageProps$1, 'source' | 'src' | 'width' | 'he
  *
  * @example
  * ```tsx
- * import { Image } from '@yahoo/uds-mobile';
+ * import { Image } from '@yahoo/uds-mobile/Image';
  *
  * <Image src="https://example.com/image.png" width={200} height={150} />
  * <Image src={require('./local-image.png')} contentFit="cover" borderRadius="md" />

package/dist/components/Image.js

@@ -22,7 +22,7 @@ const CONTENT_FIT_TO_RESIZE_MODE = {
 *
 * @example
 * ```tsx
-* import { Image } from '@yahoo/uds-mobile';
+* import { Image } from '@yahoo/uds-mobile/Image';
 *
 * <Image src="https://example.com/image.png" width={200} height={150} />
 * <Image src={require('./local-image.png')} contentFit="cover" borderRadius="md" />

package/dist/components/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":["RNImage"],"sources":["../../src/components/Image.tsx"],"sourcesContent":["import type { UniversalImageProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ImageProps as RNImageProps, ImageStyle } from 'react-native';\nimport { Image as RNImage } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\ntype ContentFit = NonNullable<UniversalImageProps['contentFit']>;\n\nconst CONTENT_FIT_TO_RESIZE_MODE: Record<ContentFit, ImageStyle['resizeMode']> = {\n  cover: 'cover',\n  contain: 'contain',\n  fill: 'stretch',\n  none: 'center',\n  'scale-down': 'contain',\n};\n\ninterface ImageProps extends Omit<\n  RNImageProps,\n  'source' | 'src' | 'width' | 'height' | 'borderRadius'\n> {\n  /** Ref to the underlying Image element */\n  ref?: Ref<RNImage>;\n  /** Image source URL or require() */\n  src: UniversalImageProps['src'];\n  /** Alt text for accessibility */\n  alt?: string;\n  /** Image width */\n  width?: number;\n  /** Image height */\n  height?: number;\n  /** How to fit the image within its container */\n  contentFit?: ContentFit;\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  alignContent?: StyleProps['alignContent'];\n  alignItems?: StyleProps['alignItems'];\n  alignSelf?: StyleProps['alignSelf'];\n  flex?: StyleProps['flex'];\n  flexDirection?: StyleProps['flexDirection'];\n  flexGrow?: StyleProps['flexGrow'];\n  flexShrink?: StyleProps['flexShrink'];\n  flexWrap?: StyleProps['flexWrap'];\n  justifyContent?: StyleProps['justifyContent'];\n  // Layout\n  display?: StyleProps['display'];\n  overflow?: StyleProps['overflow'];\n  // Spacing\n  spacing?: StyleProps['spacing'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingStart?: StyleProps['spacingStart'];\n  spacingTop?: StyleProps['spacingTop'];\n  offset?: StyleProps['offset'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetStart?: StyleProps['offsetStart'];\n  offsetTop?: StyleProps['offsetTop'];\n  columnGap?: StyleProps['columnGap'];\n  rowGap?: StyleProps['rowGap'];\n}\n\n/**\n * **A component for displaying images**\n *\n * @description\n * Wrapper for the React Native Image component with UDS styling props.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Image } from '@yahoo/uds-mobile';\n *\n * <Image src=\"https://example.com/image.png\" width={200} height={150} />\n * <Image src={require('./local-image.png')} contentFit=\"cover\" borderRadius=\"md\" />\n * ```\n *\n * @usage\n * - Use for displaying remote or local images\n * - Use contentFit to control how the image fills its container\n * - All Box styling props are supported\n *\n * @accessibility\n * - Always provide `alt` prop for screen reader description\n * - Alt text should describe the image content meaningfully\n *\n * @see {@link Avatar} for user profile images\n */\nconst Image = memo(function Image({\n  src,\n  alt,\n  width,\n  height,\n  contentFit = 'cover',\n  style,\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  alignContent,\n  alignItems,\n  alignSelf,\n  flex,\n  flexDirection,\n  flexGrow,\n  flexShrink,\n  flexWrap,\n  justifyContent,\n  // layout\n  display,\n  overflow,\n  // spacing\n  spacing,\n  spacingHorizontal,\n  spacingVertical,\n  spacingBottom,\n  spacingEnd,\n  spacingStart,\n  spacingTop,\n  offset,\n  offsetVertical,\n  offsetHorizontal,\n  offsetBottom,\n  offsetEnd,\n  offsetStart,\n  offsetTop,\n  columnGap,\n  rowGap,\n  ref,\n  ...props\n}: ImageProps) {\n  // Apply styles using useVariants\n  styles.useVariants({\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    alignContent,\n    alignItems,\n    alignSelf,\n    flex,\n    flexDirection,\n    flexGrow,\n    flexShrink,\n    flexWrap,\n    justifyContent,\n    // layout\n    display,\n    overflow,\n    // spacing\n    spacing,\n    spacingHorizontal,\n    spacingVertical,\n    spacingBottom,\n    spacingEnd,\n    spacingStart,\n    spacingTop,\n    offset,\n    offsetVertical,\n    offsetHorizontal,\n    offsetBottom,\n    offsetEnd,\n    offsetStart,\n    offsetTop,\n    columnGap,\n    rowGap,\n  });\n\n  const source = useMemo(() => (typeof src === 'string' ? { uri: src } : src), [src]);\n\n  // styles.foundation must be in deps - it returns a new reference when variants change\n  const imageStyles = useMemo(\n    () => [styles.foundation as ImageStyle, { width, height }, style],\n    [styles.foundation, width, height, style],\n  );\n\n  return (\n    <RNImage\n      ref={ref}\n      source={source}\n      accessibilityLabel={alt}\n      resizeMode={CONTENT_FIT_TO_RESIZE_MODE[contentFit]}\n      style={imageStyles}\n      {...props}\n    />\n  );\n});\n\nImage.displayName = 'Image';\n\nexport { Image, type ImageProps };\n"],"mappings":";;;;;;AAWA,MAAM,6BAA2E;CAC/E,OAAO;CACP,SAAS;CACT,MAAM;CACN,MAAM;CACN,cAAc;CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGD,MAAM,QAAQ,KAAK,SAAS,MAAM,EAChC,KACA,KACA,OACA,QACA,aAAa,SACb,OAEA,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,cACA,YACA,WACA,MACA,eACA,UACA,YACA,UACA,gBAEA,SACA,UAEA,SACA,mBACA,iBACA,eACA,YACA,cACA,YACA,QACA,gBACA,kBACA,cACA,WACA,aACA,WACA,WACA,QACA,KACA,GAAG,SACU;AAEb,QAAO,YAAY;EACjB;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,SAAS,cAAe,OAAO,QAAQ,WAAW,EAAE,KAAK,KAAK,GAAG,KAAM,CAAC,IAAI,CAAC;CAGnF,MAAM,cAAc,cACZ;EAAC,OAAO;EAA0B;GAAE;GAAO;GAAQ;EAAE;EAAM,EACjE;EAAC,OAAO;EAAY;EAAO;EAAQ;EAAM,CAC1C;AAED,QACE,oBAACA,SAAD;EACO;EACG;EACR,oBAAoB;EACpB,YAAY,2BAA2B;EACvC,OAAO;EACP,GAAI;EACJ,CAAA;EAEJ;AAEF,MAAM,cAAc"}
+{"version":3,"file":"Image.js","names":["RNImage"],"sources":["../../src/components/Image.tsx"],"sourcesContent":["import type { UniversalImageProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ImageProps as RNImageProps, ImageStyle } from 'react-native';\nimport { Image as RNImage } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\ntype ContentFit = NonNullable<UniversalImageProps['contentFit']>;\n\nconst CONTENT_FIT_TO_RESIZE_MODE: Record<ContentFit, ImageStyle['resizeMode']> = {\n  cover: 'cover',\n  contain: 'contain',\n  fill: 'stretch',\n  none: 'center',\n  'scale-down': 'contain',\n};\n\ninterface ImageProps extends Omit<\n  RNImageProps,\n  'source' | 'src' | 'width' | 'height' | 'borderRadius'\n> {\n  /** Ref to the underlying Image element */\n  ref?: Ref<RNImage>;\n  /** Image source URL or require() */\n  src: UniversalImageProps['src'];\n  /** Alt text for accessibility */\n  alt?: string;\n  /** Image width */\n  width?: number;\n  /** Image height */\n  height?: number;\n  /** How to fit the image within its container */\n  contentFit?: ContentFit;\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  alignContent?: StyleProps['alignContent'];\n  alignItems?: StyleProps['alignItems'];\n  alignSelf?: StyleProps['alignSelf'];\n  flex?: StyleProps['flex'];\n  flexDirection?: StyleProps['flexDirection'];\n  flexGrow?: StyleProps['flexGrow'];\n  flexShrink?: StyleProps['flexShrink'];\n  flexWrap?: StyleProps['flexWrap'];\n  justifyContent?: StyleProps['justifyContent'];\n  // Layout\n  display?: StyleProps['display'];\n  overflow?: StyleProps['overflow'];\n  // Spacing\n  spacing?: StyleProps['spacing'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingStart?: StyleProps['spacingStart'];\n  spacingTop?: StyleProps['spacingTop'];\n  offset?: StyleProps['offset'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetStart?: StyleProps['offsetStart'];\n  offsetTop?: StyleProps['offsetTop'];\n  columnGap?: StyleProps['columnGap'];\n  rowGap?: StyleProps['rowGap'];\n}\n\n/**\n * **A component for displaying images**\n *\n * @description\n * Wrapper for the React Native Image component with UDS styling props.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Image } from '@yahoo/uds-mobile/Image';\n *\n * <Image src=\"https://example.com/image.png\" width={200} height={150} />\n * <Image src={require('./local-image.png')} contentFit=\"cover\" borderRadius=\"md\" />\n * ```\n *\n * @usage\n * - Use for displaying remote or local images\n * - Use contentFit to control how the image fills its container\n * - All Box styling props are supported\n *\n * @accessibility\n * - Always provide `alt` prop for screen reader description\n * - Alt text should describe the image content meaningfully\n *\n * @see {@link Avatar} for user profile images\n */\nconst Image = memo(function Image({\n  src,\n  alt,\n  width,\n  height,\n  contentFit = 'cover',\n  style,\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  alignContent,\n  alignItems,\n  alignSelf,\n  flex,\n  flexDirection,\n  flexGrow,\n  flexShrink,\n  flexWrap,\n  justifyContent,\n  // layout\n  display,\n  overflow,\n  // spacing\n  spacing,\n  spacingHorizontal,\n  spacingVertical,\n  spacingBottom,\n  spacingEnd,\n  spacingStart,\n  spacingTop,\n  offset,\n  offsetVertical,\n  offsetHorizontal,\n  offsetBottom,\n  offsetEnd,\n  offsetStart,\n  offsetTop,\n  columnGap,\n  rowGap,\n  ref,\n  ...props\n}: ImageProps) {\n  // Apply styles using useVariants\n  styles.useVariants({\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    alignContent,\n    alignItems,\n    alignSelf,\n    flex,\n    flexDirection,\n    flexGrow,\n    flexShrink,\n    flexWrap,\n    justifyContent,\n    // layout\n    display,\n    overflow,\n    // spacing\n    spacing,\n    spacingHorizontal,\n    spacingVertical,\n    spacingBottom,\n    spacingEnd,\n    spacingStart,\n    spacingTop,\n    offset,\n    offsetVertical,\n    offsetHorizontal,\n    offsetBottom,\n    offsetEnd,\n    offsetStart,\n    offsetTop,\n    columnGap,\n    rowGap,\n  });\n\n  const source = useMemo(() => (typeof src === 'string' ? { uri: src } : src), [src]);\n\n  // styles.foundation must be in deps - it returns a new reference when variants change\n  const imageStyles = useMemo(\n    () => [styles.foundation as ImageStyle, { width, height }, style],\n    [styles.foundation, width, height, style],\n  );\n\n  return (\n    <RNImage\n      ref={ref}\n      source={source}\n      accessibilityLabel={alt}\n      resizeMode={CONTENT_FIT_TO_RESIZE_MODE[contentFit]}\n      style={imageStyles}\n      {...props}\n    />\n  );\n});\n\nImage.displayName = 'Image';\n\nexport { Image, type ImageProps };\n"],"mappings":";;;;;;AAWA,MAAM,6BAA2E;CAC/E,OAAO;CACP,SAAS;CACT,MAAM;CACN,MAAM;CACN,cAAc;CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGD,MAAM,QAAQ,KAAK,SAAS,MAAM,EAChC,KACA,KACA,OACA,QACA,aAAa,SACb,OAEA,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,cACA,YACA,WACA,MACA,eACA,UACA,YACA,UACA,gBAEA,SACA,UAEA,SACA,mBACA,iBACA,eACA,YACA,cACA,YACA,QACA,gBACA,kBACA,cACA,WACA,aACA,WACA,WACA,QACA,KACA,GAAG,SACU;AAEb,QAAO,YAAY;EACjB;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,SAAS,cAAe,OAAO,QAAQ,WAAW,EAAE,KAAK,KAAK,GAAG,KAAM,CAAC,IAAI,CAAC;CAGnF,MAAM,cAAc,cACZ;EAAC,OAAO;EAA0B;GAAE;GAAO;GAAQ;EAAE;EAAM,EACjE;EAAC,OAAO;EAAY;EAAO;EAAQ;EAAM,CAC1C;AAED,QACE,oBAACA,SAAD;EACO;EACG;EACR,oBAAoB;EACpB,YAAY,2BAA2B;EACvC,OAAO;EACP,GAAI;EACJ,CAAA;EAEJ;AAEF,MAAM,cAAc"}

package/dist/components/Input.cjs

@@ -24,7 +24,7 @@ let lodash_es = require("lodash-es");
 *
 * @example
 * ```tsx
-* import { Input } from '@yahoo/uds-mobile';
+* import { Input } from '@yahoo/uds-mobile/Input';
 *
 * <Input label="Name" placeholder="Enter your name" required />
 * <Input label="Email" startIcon="Mail" helpText="We'll never share your email" />

package/dist/components/Input.d.cts

@@ -24,7 +24,7 @@ interface InputProps extends Omit<UniversalInputProps<IconSlotType>, 'width'>, O
  *
  * @example
  * ```tsx
- * import { Input } from '@yahoo/uds-mobile';
+ * import { Input } from '@yahoo/uds-mobile/Input';
  *
  * <Input label="Name" placeholder="Enter your name" required />
  * <Input label="Email" startIcon="Mail" helpText="We'll never share your email" />

package/dist/components/Input.d.ts

@@ -24,7 +24,7 @@ interface InputProps extends Omit<UniversalInputProps<IconSlotType>, 'width'>, O
  *
  * @example
  * ```tsx
- * import { Input } from '@yahoo/uds-mobile';
+ * import { Input } from '@yahoo/uds-mobile/Input';
  *
  * <Input label="Name" placeholder="Enter your name" required />
  * <Input label="Email" startIcon="Mail" helpText="We'll never share your email" />

package/dist/components/Input.js

@@ -22,7 +22,7 @@ import { isFunction } from "lodash-es";
 *
 * @example
 * ```tsx
-* import { Input } from '@yahoo/uds-mobile';
+* import { Input } from '@yahoo/uds-mobile/Input';
 *
 * <Input label="Name" placeholder="Enter your name" required />
 * <Input label="Email" startIcon="Mail" helpText="We'll never share your email" />

package/dist/components/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["Text"],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import type { UniversalInputProps } from '@yahoo/uds-types';\nimport { isFunction } from 'lodash-es';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { TextInputProps } from 'react-native';\nimport { TextInput, View } from 'react-native';\n\nimport { inputStyles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\nimport { VStack } from './VStack';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\ninterface InputProps\n  extends\n    Omit<UniversalInputProps<IconSlotType>, 'width'>,\n    Omit<TextInputProps, 'style' | 'editable'>,\n    Pick<SizeProps, 'width'> {\n  /** Ref to the underlying TextInput element */\n  ref?: Ref<TextInput>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Input Component                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **📦 An input that allows users to enter text and collect data.**\n *\n * @description\n * An input field is a component that takes text typed into it. It can also serve\n * as a way to display a selection and trigger a dropdown menu. Inputs are interactive\n * elements that users can click, tap, or otherwise engage with to collect data.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Input } from '@yahoo/uds-mobile';\n *\n * <Input label=\"Name\" placeholder=\"Enter your name\" required />\n * <Input label=\"Email\" startIcon=\"Mail\" helpText=\"We'll never share your email\" />\n * <Input label=\"Password\" secureTextEntry hasError helpText=\"Password is required\" />\n * ```\n *\n * @usage\n * - Forms: For collecting data like names, emails, passwords, etc.\n * - Search Bars: Allowing users to enter search queries\n * - Filters/Settings: When users need to specify preferences\n * - Feedback/Comments: Letting users leave reviews or comments\n *\n * @accessibility\n * - Label is automatically associated with the input\n * - Help text is announced as accessibility hint\n * - Error state is communicated to screen readers\n * - Disabled state prevents interaction\n *\n * @see {@link Checkbox} for boolean selections\n * @see {@link Radio} for single-select options\n */\nconst Input = memo(function Input({\n  // Input props\n  label,\n  size = 'md',\n  startIcon,\n  endIcon,\n  helpText,\n  helperTextIcon,\n  hasError,\n  disabled,\n  readOnly,\n  required,\n  // Size props\n  width = '100%',\n  // TextInput props\n  defaultValue,\n  value: controlledValue,\n  onChangeText,\n  onFocus,\n  onBlur,\n  placeholder,\n  placeholderTextColor,\n  ref,\n  ...textInputProps\n}: InputProps) {\n  const generatedId = useId();\n  const uid = `uds-input-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [internalValue, setInternalValue] = useState(defaultValue ?? '');\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Support both controlled and uncontrolled modes\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : internalValue;\n  const valueState = value ? 'filled' : 'empty';\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handleChangeText = useCallback(\n    (text: string) => {\n      if (!isControlled) {\n        setInternalValue(text);\n      }\n      onChangeText?.(text);\n    },\n    [isControlled, onChangeText],\n  );\n\n  const handleFocus = useCallback<NonNullable<TextInputProps['onFocus']>>(\n    (e) => {\n      setIsFocused(true);\n      onFocus?.(e);\n    },\n    [onFocus],\n  );\n\n  const handleBlur = useCallback<NonNullable<TextInputProps['onBlur']>>(\n    (e) => {\n      setIsFocused(false);\n      onBlur?.(e);\n    },\n    [onBlur],\n  );\n\n  /* --------------------------------- Styles --------------------------------- */\n  inputStyles.useVariants({\n    size,\n    value: valueState,\n    disabled,\n    pressed: isFocused,\n    readonly: readOnly,\n    invalid: hasError,\n  });\n\n  // Get placeholder color from theme styles\n  const computedPlaceholderColor = placeholderTextColor ?? inputStyles.inputPlaceholder.color;\n\n  const rootStyle = useMemo(() => [{ width, opacity: disabled ? 0.5 : 1 }], [width, disabled]);\n\n  const inputWrapperStyle = useMemo(\n    () => [\n      inputStyles.inputWrapper,\n      { flexDirection: 'row' as const, alignItems: 'center' as const },\n    ],\n    [inputStyles.inputWrapper],\n  );\n\n  // Android-specific fixes: TextInput on Android has rendering issues with text visibility\n  // - includeFontPadding: false removes Android's extra font padding that can clip text\n  // - textAlignVertical: 'center' ensures text is vertically centered in the input\n  // - paddingVertical: 0 removes default padding that interferes with flex layout\n  const textInputStyle = useMemo(\n    () => [\n      inputStyles.input,\n      {\n        flex: 1,\n        includeFontPadding: false,\n        textAlignVertical: 'center' as const,\n        paddingVertical: 0,\n      },\n    ],\n    [inputStyles.input],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n    const content = isFunction(label) ? label() : label;\n    return (\n      <HStack columnGap=\"1\" alignItems=\"flex-end\" spacingBottom=\"2\">\n        <Text style={inputStyles.label}>{content}</Text>\n        {required && <Text style={inputStyles.labelRequired}>*</Text>}\n      </HStack>\n    );\n  }, [label, required, inputStyles.label, inputStyles.labelRequired]);\n\n  const startIconContent = useMemo(() => {\n    if (!startIcon) {\n      return null;\n    }\n    return <IconSlot icon={startIcon} variant=\"outline\" style={inputStyles.startIcon} />;\n  }, [startIcon, inputStyles.startIcon]);\n\n  const endIconContent = useMemo(() => {\n    if (!endIcon) {\n      return null;\n    }\n    return <IconSlot icon={endIcon} variant=\"outline\" style={inputStyles.endIcon} />;\n  }, [endIcon, inputStyles.endIcon]);\n\n  const helpTextContent = useMemo(() => {\n    if (!helpText) {\n      return null;\n    }\n    const content = isFunction(helpText) ? helpText() : helpText;\n    return (\n      <HStack columnGap=\"1\" alignItems=\"center\" spacingTop=\"2\">\n        {helperTextIcon && <IconSlot icon={helperTextIcon} style={inputStyles.helperIcon} />}\n        <Text style={inputStyles.helperText}>{content}</Text>\n      </HStack>\n    );\n  }, [helpText, helperTextIcon, inputStyles.helperIcon, inputStyles.helperText]);\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <VStack style={rootStyle}>\n      {labelContent}\n\n      <View\n        style={inputWrapperStyle}\n        accessible\n        accessibilityRole=\"none\"\n        accessibilityLabel={typeof label === 'string' ? label : undefined}\n      >\n        {startIconContent}\n\n        <TextInput\n          ref={ref}\n          nativeID={uid}\n          value={value}\n          onChangeText={handleChangeText}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={placeholder}\n          placeholderTextColor={computedPlaceholderColor}\n          editable={!disabled && !readOnly}\n          style={textInputStyle}\n          accessibilityLabel={typeof label === 'string' ? label : undefined}\n          accessibilityHint={typeof helpText === 'string' ? helpText : undefined}\n          accessibilityState={{ disabled }}\n          {...textInputProps}\n        />\n\n        {endIconContent}\n      </View>\n\n      {helpTextContent}\n    </VStack>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport { Input, type InputProps };\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":["Text"],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import type { UniversalInputProps } from '@yahoo/uds-types';\nimport { isFunction } from 'lodash-es';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { TextInputProps } from 'react-native';\nimport { TextInput, View } from 'react-native';\n\nimport { inputStyles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\nimport { VStack } from './VStack';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\ninterface InputProps\n  extends\n    Omit<UniversalInputProps<IconSlotType>, 'width'>,\n    Omit<TextInputProps, 'style' | 'editable'>,\n    Pick<SizeProps, 'width'> {\n  /** Ref to the underlying TextInput element */\n  ref?: Ref<TextInput>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Input Component                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **📦 An input that allows users to enter text and collect data.**\n *\n * @description\n * An input field is a component that takes text typed into it. It can also serve\n * as a way to display a selection and trigger a dropdown menu. Inputs are interactive\n * elements that users can click, tap, or otherwise engage with to collect data.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Input } from '@yahoo/uds-mobile/Input';\n *\n * <Input label=\"Name\" placeholder=\"Enter your name\" required />\n * <Input label=\"Email\" startIcon=\"Mail\" helpText=\"We'll never share your email\" />\n * <Input label=\"Password\" secureTextEntry hasError helpText=\"Password is required\" />\n * ```\n *\n * @usage\n * - Forms: For collecting data like names, emails, passwords, etc.\n * - Search Bars: Allowing users to enter search queries\n * - Filters/Settings: When users need to specify preferences\n * - Feedback/Comments: Letting users leave reviews or comments\n *\n * @accessibility\n * - Label is automatically associated with the input\n * - Help text is announced as accessibility hint\n * - Error state is communicated to screen readers\n * - Disabled state prevents interaction\n *\n * @see {@link Checkbox} for boolean selections\n * @see {@link Radio} for single-select options\n */\nconst Input = memo(function Input({\n  // Input props\n  label,\n  size = 'md',\n  startIcon,\n  endIcon,\n  helpText,\n  helperTextIcon,\n  hasError,\n  disabled,\n  readOnly,\n  required,\n  // Size props\n  width = '100%',\n  // TextInput props\n  defaultValue,\n  value: controlledValue,\n  onChangeText,\n  onFocus,\n  onBlur,\n  placeholder,\n  placeholderTextColor,\n  ref,\n  ...textInputProps\n}: InputProps) {\n  const generatedId = useId();\n  const uid = `uds-input-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [internalValue, setInternalValue] = useState(defaultValue ?? '');\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Support both controlled and uncontrolled modes\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : internalValue;\n  const valueState = value ? 'filled' : 'empty';\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handleChangeText = useCallback(\n    (text: string) => {\n      if (!isControlled) {\n        setInternalValue(text);\n      }\n      onChangeText?.(text);\n    },\n    [isControlled, onChangeText],\n  );\n\n  const handleFocus = useCallback<NonNullable<TextInputProps['onFocus']>>(\n    (e) => {\n      setIsFocused(true);\n      onFocus?.(e);\n    },\n    [onFocus],\n  );\n\n  const handleBlur = useCallback<NonNullable<TextInputProps['onBlur']>>(\n    (e) => {\n      setIsFocused(false);\n      onBlur?.(e);\n    },\n    [onBlur],\n  );\n\n  /* --------------------------------- Styles --------------------------------- */\n  inputStyles.useVariants({\n    size,\n    value: valueState,\n    disabled,\n    pressed: isFocused,\n    readonly: readOnly,\n    invalid: hasError,\n  });\n\n  // Get placeholder color from theme styles\n  const computedPlaceholderColor = placeholderTextColor ?? inputStyles.inputPlaceholder.color;\n\n  const rootStyle = useMemo(() => [{ width, opacity: disabled ? 0.5 : 1 }], [width, disabled]);\n\n  const inputWrapperStyle = useMemo(\n    () => [\n      inputStyles.inputWrapper,\n      { flexDirection: 'row' as const, alignItems: 'center' as const },\n    ],\n    [inputStyles.inputWrapper],\n  );\n\n  // Android-specific fixes: TextInput on Android has rendering issues with text visibility\n  // - includeFontPadding: false removes Android's extra font padding that can clip text\n  // - textAlignVertical: 'center' ensures text is vertically centered in the input\n  // - paddingVertical: 0 removes default padding that interferes with flex layout\n  const textInputStyle = useMemo(\n    () => [\n      inputStyles.input,\n      {\n        flex: 1,\n        includeFontPadding: false,\n        textAlignVertical: 'center' as const,\n        paddingVertical: 0,\n      },\n    ],\n    [inputStyles.input],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n    const content = isFunction(label) ? label() : label;\n    return (\n      <HStack columnGap=\"1\" alignItems=\"flex-end\" spacingBottom=\"2\">\n        <Text style={inputStyles.label}>{content}</Text>\n        {required && <Text style={inputStyles.labelRequired}>*</Text>}\n      </HStack>\n    );\n  }, [label, required, inputStyles.label, inputStyles.labelRequired]);\n\n  const startIconContent = useMemo(() => {\n    if (!startIcon) {\n      return null;\n    }\n    return <IconSlot icon={startIcon} variant=\"outline\" style={inputStyles.startIcon} />;\n  }, [startIcon, inputStyles.startIcon]);\n\n  const endIconContent = useMemo(() => {\n    if (!endIcon) {\n      return null;\n    }\n    return <IconSlot icon={endIcon} variant=\"outline\" style={inputStyles.endIcon} />;\n  }, [endIcon, inputStyles.endIcon]);\n\n  const helpTextContent = useMemo(() => {\n    if (!helpText) {\n      return null;\n    }\n    const content = isFunction(helpText) ? helpText() : helpText;\n    return (\n      <HStack columnGap=\"1\" alignItems=\"center\" spacingTop=\"2\">\n        {helperTextIcon && <IconSlot icon={helperTextIcon} style={inputStyles.helperIcon} />}\n        <Text style={inputStyles.helperText}>{content}</Text>\n      </HStack>\n    );\n  }, [helpText, helperTextIcon, inputStyles.helperIcon, inputStyles.helperText]);\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <VStack style={rootStyle}>\n      {labelContent}\n\n      <View\n        style={inputWrapperStyle}\n        accessible\n        accessibilityRole=\"none\"\n        accessibilityLabel={typeof label === 'string' ? label : undefined}\n      >\n        {startIconContent}\n\n        <TextInput\n          ref={ref}\n          nativeID={uid}\n          value={value}\n          onChangeText={handleChangeText}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={placeholder}\n          placeholderTextColor={computedPlaceholderColor}\n          editable={!disabled && !readOnly}\n          style={textInputStyle}\n          accessibilityLabel={typeof label === 'string' ? label : undefined}\n          accessibilityHint={typeof helpText === 'string' ? helpText : undefined}\n          accessibilityState={{ disabled }}\n          {...textInputProps}\n        />\n\n        {endIconContent}\n      </View>\n\n      {helpTextContent}\n    </VStack>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport { Input, type InputProps };\n"],"mappings":"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"}

package/dist/components/Link.cjs

@@ -24,7 +24,7 @@ const noUnderline = { textDecorationLine: "none" };
 *
 * @example
 * ```tsx
-* import { Link } from '@yahoo/uds-mobile';
+* import { Link } from '@yahoo/uds-mobile/Link';
 *
 * // Standalone link
 * <Link onPress={() => navigate('/profile')}>Go to Profile</Link>

package/dist/components/Link.d.cts

@@ -29,7 +29,7 @@ interface LinkProps extends UniversalLinkProps<IconSlotType> {
  *
  * @example
  * ```tsx
- * import { Link } from '@yahoo/uds-mobile';
+ * import { Link } from '@yahoo/uds-mobile/Link';
  *
  * // Standalone link
  * <Link onPress={() => navigate('/profile')}>Go to Profile</Link>

package/dist/components/Link.d.ts

@@ -29,7 +29,7 @@ interface LinkProps extends UniversalLinkProps<IconSlotType> {
  *
  * @example
  * ```tsx
- * import { Link } from '@yahoo/uds-mobile';
+ * import { Link } from '@yahoo/uds-mobile/Link';
  *
  * // Standalone link
  * <Link onPress={() => navigate('/profile')}>Go to Profile</Link>

package/dist/components/Link.js

@@ -21,7 +21,7 @@ const noUnderline = { textDecorationLine: "none" };
 *
 * @example
 * ```tsx
-* import { Link } from '@yahoo/uds-mobile';
+* import { Link } from '@yahoo/uds-mobile/Link';
 *
 * // Standalone link
 * <Link onPress={() => navigate('/profile')}>Go to Profile</Link>

package/dist/components/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":["RNText"],"sources":["../../src/components/Link.tsx"],"sourcesContent":["import type { UniversalLinkProps } from '@yahoo/uds-types';\nimport type { ReactNode, Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { GestureResponderEvent, TextStyle } from 'react-native';\nimport { Text as RNText } from 'react-native';\nimport Animated, {\n  Easing,\n  interpolateColor,\n  useAnimatedStyle,\n  useDerivedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme } from 'react-native-unistyles/reanimated';\n\nimport { linkStyles } from '../../generated/styles';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport type { TextProps } from './Text';\n\nconst AnimatedText = Animated.Text;\n\n// Prevent icons from inheriting underline from parent/theme (matches web behavior)\nconst noUnderline: TextStyle = { textDecorationLine: 'none' };\n\ninterface LinkProps extends UniversalLinkProps<IconSlotType> {\n  /** Style override for the link text */\n  style?: TextStyle;\n  /** Callback fired when the link is pressed */\n  onPress?: TextProps['onPress'];\n  /** Ref to the underlying Text element */\n  ref?: Ref<RNText>;\n  /** Link content, typically text */\n  children?: ReactNode;\n}\n\n/**\n * **🔗 A navigation link component**\n *\n * @description\n * A styled link component for navigation. Rendered as Text so it can be\n * nested inline within other Text. Supports optional start/end icons.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Link } from '@yahoo/uds-mobile';\n *\n * // Standalone link\n * <Link onPress={() => navigate('/profile')}>Go to Profile</Link>\n *\n * // Inline within text\n * <Text>Read our <Link>Terms of Service</Link> and <Link>Privacy Policy</Link>.</Text>\n *\n * // With icons\n * <Link startIcon=\"AffiliateLink\">External link</Link>\n * <Link endIcon=\"ChevronRight\">Navigate forward</Link>\n * ```\n *\n * @usage\n * - Use for navigation actions\n * - Can be nested within Text for inline links\n * - Use alwaysUnderline for links that need to be visually distinct\n *\n * @accessibility\n * - Link text is the accessible name\n * - Shows underline on press for visual feedback\n * - Use descriptive link text (avoid \"click here\")\n *\n * @see {@link Button} for primary actions\n * @see {@link Text} for non-interactive text\n */\nconst Link = memo(function Link({\n  children,\n  variant = 'primary',\n  textVariant,\n  alwaysUnderline = false,\n  startIcon,\n  endIcon,\n  onPress,\n  style,\n  ref,\n  ...rest\n}: LinkProps) {\n  const [pressed, setPressed] = useState(false);\n\n  const handlePressIn = useCallback(() => {\n    setPressed(true);\n  }, []);\n\n  const handlePressOut = useCallback(() => {\n    setPressed(false);\n  }, []);\n\n  // Must have onPress for touch events to register (RN requirement)\n  // Even without a user-provided handler, we need a function to make text touchable\n  const handlePress = useCallback(\n    (event: GestureResponderEvent) => {\n      onPress?.(event);\n    },\n    [onPress],\n  );\n\n  linkStyles.useVariants({\n    textStyle: textVariant,\n    variant,\n    pressed,\n  });\n\n  // Get theme as SharedValue for worklet access (zero re-renders)\n  const animatedTheme = useAnimatedTheme();\n\n  // Derive underline visibility from pressed state\n  // useDerivedValue handles the animation automatically when deps change\n  const underlineProgress = useDerivedValue(() => {\n    const targetValue = pressed || alwaysUnderline ? 1 : 0;\n    return withTiming(targetValue, {\n      duration: 150,\n      easing: Easing.bezier(0, 0, 0.2, 1),\n    });\n  }, [pressed, alwaysUnderline]);\n\n  // Combined animated style for color and underline\n  const animatedTextStyle = useAnimatedStyle(() => {\n    // Access text color from theme using variant path\n    const components = animatedTheme.value.components;\n    const state = pressed ? 'pressed' : 'rest';\n    const textVariantPath = `link/variant/${variant}/rootText/${state}` as const;\n    const textColor = components[textVariantPath]?.color;\n\n    if (!textColor) {\n      return {};\n    }\n\n    const color = withTiming(textColor, {\n      duration: 150,\n      easing: Easing.bezier(0, 0, 0.2, 1),\n    });\n\n    // Interpolate underline opacity: 0 = transparent, 1 = text color\n    const underlineColor = interpolateColor(\n      underlineProgress.value,\n      [0, 1],\n      ['transparent', textColor],\n    );\n\n    return {\n      color,\n      textDecorationColor: underlineColor,\n    };\n  });\n\n  const textStyles = useMemo(() => {\n    return [linkStyles.root, linkStyles.text, animatedTextStyle, style];\n  }, [linkStyles.text, animatedTextStyle, style, linkStyles.root]);\n\n  const startIconStyles = useMemo(() => {\n    return [linkStyles.icon, linkStyles.iconStart, noUnderline];\n  }, [linkStyles.icon, linkStyles.iconStart, noUnderline]);\n\n  const endIconStyles = useMemo(() => {\n    return [linkStyles.icon, linkStyles.iconEnd, noUnderline];\n  }, [linkStyles.icon, linkStyles.iconEnd, noUnderline]);\n\n  return (\n    <AnimatedText\n      ref={ref}\n      onPress={handlePress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      suppressHighlighting\n      style={textStyles}\n      {...rest}\n    >\n      {startIcon && (\n        <>\n          <IconSlot icon={startIcon} variant=\"outline\" style={startIconStyles} />\n          {/* TODO: need to add hairline space character to icon font so we can have space between icon and text https://hybridheroes.de/blog/2022-11-17-text-with-inline-icons-in-react-native/ */}\n          <RNText style={noUnderline}>{' \\u200A'}</RNText>\n        </>\n      )}\n      {children}\n      {endIcon && (\n        <>\n          {/* TODO: need to add hairline space character to icon font so we can have space between icon and text https://hybridheroes.de/blog/2022-11-17-text-with-inline-icons-in-react-native/ */}\n          <RNText style={noUnderline}>{' \\u200A'}</RNText>\n          <IconSlot icon={endIcon} variant=\"outline\" style={endIconStyles} />\n        </>\n      )}\n    </AnimatedText>\n  );\n});\n\nLink.displayName = 'Link';\n\nexport { Link, type LinkProps };\n"],"mappings":";;;;;;;;;AAmBA,MAAM,eAAe,SAAS;AAG9B,MAAM,cAAyB,EAAE,oBAAoB,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmD7D,MAAM,OAAO,KAAK,SAAS,KAAK,EAC9B,UACA,UAAU,WACV,aACA,kBAAkB,OAClB,WACA,SACA,SACA,OACA,KACA,GAAG,QACS;CACZ,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAE7C,MAAM,gBAAgB,kBAAkB;AACtC,aAAW,KAAK;IACf,EAAE,CAAC;CAEN,MAAM,iBAAiB,kBAAkB;AACvC,aAAW,MAAM;IAChB,EAAE,CAAC;CAIN,MAAM,cAAc,aACjB,UAAiC;AAChC,YAAU,MAAM;IAElB,CAAC,QAAQ,CACV;AAED,YAAW,YAAY;EACrB,WAAW;EACX;EACA;EACD,CAAC;CAGF,MAAM,gBAAgB,kBAAkB;CAIxC,MAAM,oBAAoB,sBAAsB;AAE9C,SAAO,WADa,WAAW,kBAAkB,IAAI,GACtB;GAC7B,UAAU;GACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;GACpC,CAAC;IACD,CAAC,SAAS,gBAAgB,CAAC;CAG9B,MAAM,oBAAoB,uBAAuB;EAK/C,MAAM,YAHa,cAAc,MAAM,WAGV,gBADW,QAAQ,YADlC,UAAU,YAAY,WAEW;AAE/C,MAAI,CAAC,UACH,QAAO,EAAE;AAeX,SAAO;GACL,OAbY,WAAW,WAAW;IAClC,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAUM;GACL,qBARqB,iBACrB,kBAAkB,OAClB,CAAC,GAAG,EAAE,EACN,CAAC,eAAe,UAAU,CAKS;GACpC;GACD;CAEF,MAAM,aAAa,cAAc;AAC/B,SAAO;GAAC,WAAW;GAAM,WAAW;GAAM;GAAmB;GAAM;IAClE;EAAC,WAAW;EAAM;EAAmB;EAAO,WAAW;EAAK,CAAC;CAEhE,MAAM,kBAAkB,cAAc;AACpC,SAAO;GAAC,WAAW;GAAM,WAAW;GAAW;GAAY;IAC1D;EAAC,WAAW;EAAM,WAAW;EAAW;EAAY,CAAC;CAExD,MAAM,gBAAgB,cAAc;AAClC,SAAO;GAAC,WAAW;GAAM,WAAW;GAAS;GAAY;IACxD;EAAC,WAAW;EAAM,WAAW;EAAS;EAAY,CAAC;AAEtD,QACE,qBAAC,cAAD;EACO;EACL,SAAS;EACT,WAAW;EACX,YAAY;EACZ,sBAAA;EACA,OAAO;EACP,GAAI;YAPN;GASG,aACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,UAAD;IAAU,MAAM;IAAW,SAAQ;IAAU,OAAO;IAAmB,CAAA,EAEvE,oBAACA,MAAD;IAAQ,OAAO;cAAc;IAAmB,CAAA,CAC/C,EAAA,CAAA;GAEJ;GACA,WACC,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAACA,MAAD;IAAQ,OAAO;cAAc;IAAmB,CAAA,EAChD,oBAAC,UAAD;IAAU,MAAM;IAAS,SAAQ;IAAU,OAAO;IAAiB,CAAA,CAClE,EAAA,CAAA;GAEQ;;EAEjB;AAEF,KAAK,cAAc"}
+{"version":3,"file":"Link.js","names":["RNText"],"sources":["../../src/components/Link.tsx"],"sourcesContent":["import type { UniversalLinkProps } from '@yahoo/uds-types';\nimport type { ReactNode, Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { GestureResponderEvent, TextStyle } from 'react-native';\nimport { Text as RNText } from 'react-native';\nimport Animated, {\n  Easing,\n  interpolateColor,\n  useAnimatedStyle,\n  useDerivedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme } from 'react-native-unistyles/reanimated';\n\nimport { linkStyles } from '../../generated/styles';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport type { TextProps } from './Text';\n\nconst AnimatedText = Animated.Text;\n\n// Prevent icons from inheriting underline from parent/theme (matches web behavior)\nconst noUnderline: TextStyle = { textDecorationLine: 'none' };\n\ninterface LinkProps extends UniversalLinkProps<IconSlotType> {\n  /** Style override for the link text */\n  style?: TextStyle;\n  /** Callback fired when the link is pressed */\n  onPress?: TextProps['onPress'];\n  /** Ref to the underlying Text element */\n  ref?: Ref<RNText>;\n  /** Link content, typically text */\n  children?: ReactNode;\n}\n\n/**\n * **🔗 A navigation link component**\n *\n * @description\n * A styled link component for navigation. Rendered as Text so it can be\n * nested inline within other Text. Supports optional start/end icons.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Link } from '@yahoo/uds-mobile/Link';\n *\n * // Standalone link\n * <Link onPress={() => navigate('/profile')}>Go to Profile</Link>\n *\n * // Inline within text\n * <Text>Read our <Link>Terms of Service</Link> and <Link>Privacy Policy</Link>.</Text>\n *\n * // With icons\n * <Link startIcon=\"AffiliateLink\">External link</Link>\n * <Link endIcon=\"ChevronRight\">Navigate forward</Link>\n * ```\n *\n * @usage\n * - Use for navigation actions\n * - Can be nested within Text for inline links\n * - Use alwaysUnderline for links that need to be visually distinct\n *\n * @accessibility\n * - Link text is the accessible name\n * - Shows underline on press for visual feedback\n * - Use descriptive link text (avoid \"click here\")\n *\n * @see {@link Button} for primary actions\n * @see {@link Text} for non-interactive text\n */\nconst Link = memo(function Link({\n  children,\n  variant = 'primary',\n  textVariant,\n  alwaysUnderline = false,\n  startIcon,\n  endIcon,\n  onPress,\n  style,\n  ref,\n  ...rest\n}: LinkProps) {\n  const [pressed, setPressed] = useState(false);\n\n  const handlePressIn = useCallback(() => {\n    setPressed(true);\n  }, []);\n\n  const handlePressOut = useCallback(() => {\n    setPressed(false);\n  }, []);\n\n  // Must have onPress for touch events to register (RN requirement)\n  // Even without a user-provided handler, we need a function to make text touchable\n  const handlePress = useCallback(\n    (event: GestureResponderEvent) => {\n      onPress?.(event);\n    },\n    [onPress],\n  );\n\n  linkStyles.useVariants({\n    textStyle: textVariant,\n    variant,\n    pressed,\n  });\n\n  // Get theme as SharedValue for worklet access (zero re-renders)\n  const animatedTheme = useAnimatedTheme();\n\n  // Derive underline visibility from pressed state\n  // useDerivedValue handles the animation automatically when deps change\n  const underlineProgress = useDerivedValue(() => {\n    const targetValue = pressed || alwaysUnderline ? 1 : 0;\n    return withTiming(targetValue, {\n      duration: 150,\n      easing: Easing.bezier(0, 0, 0.2, 1),\n    });\n  }, [pressed, alwaysUnderline]);\n\n  // Combined animated style for color and underline\n  const animatedTextStyle = useAnimatedStyle(() => {\n    // Access text color from theme using variant path\n    const components = animatedTheme.value.components;\n    const state = pressed ? 'pressed' : 'rest';\n    const textVariantPath = `link/variant/${variant}/rootText/${state}` as const;\n    const textColor = components[textVariantPath]?.color;\n\n    if (!textColor) {\n      return {};\n    }\n\n    const color = withTiming(textColor, {\n      duration: 150,\n      easing: Easing.bezier(0, 0, 0.2, 1),\n    });\n\n    // Interpolate underline opacity: 0 = transparent, 1 = text color\n    const underlineColor = interpolateColor(\n      underlineProgress.value,\n      [0, 1],\n      ['transparent', textColor],\n    );\n\n    return {\n      color,\n      textDecorationColor: underlineColor,\n    };\n  });\n\n  const textStyles = useMemo(() => {\n    return [linkStyles.root, linkStyles.text, animatedTextStyle, style];\n  }, [linkStyles.text, animatedTextStyle, style, linkStyles.root]);\n\n  const startIconStyles = useMemo(() => {\n    return [linkStyles.icon, linkStyles.iconStart, noUnderline];\n  }, [linkStyles.icon, linkStyles.iconStart, noUnderline]);\n\n  const endIconStyles = useMemo(() => {\n    return [linkStyles.icon, linkStyles.iconEnd, noUnderline];\n  }, [linkStyles.icon, linkStyles.iconEnd, noUnderline]);\n\n  return (\n    <AnimatedText\n      ref={ref}\n      onPress={handlePress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      suppressHighlighting\n      style={textStyles}\n      {...rest}\n    >\n      {startIcon && (\n        <>\n          <IconSlot icon={startIcon} variant=\"outline\" style={startIconStyles} />\n          {/* TODO: need to add hairline space character to icon font so we can have space between icon and text https://hybridheroes.de/blog/2022-11-17-text-with-inline-icons-in-react-native/ */}\n          <RNText style={noUnderline}>{' \\u200A'}</RNText>\n        </>\n      )}\n      {children}\n      {endIcon && (\n        <>\n          {/* TODO: need to add hairline space character to icon font so we can have space between icon and text https://hybridheroes.de/blog/2022-11-17-text-with-inline-icons-in-react-native/ */}\n          <RNText style={noUnderline}>{' \\u200A'}</RNText>\n          <IconSlot icon={endIcon} variant=\"outline\" style={endIconStyles} />\n        </>\n      )}\n    </AnimatedText>\n  );\n});\n\nLink.displayName = 'Link';\n\nexport { Link, type LinkProps };\n"],"mappings":";;;;;;;;;AAmBA,MAAM,eAAe,SAAS;AAG9B,MAAM,cAAyB,EAAE,oBAAoB,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmD7D,MAAM,OAAO,KAAK,SAAS,KAAK,EAC9B,UACA,UAAU,WACV,aACA,kBAAkB,OAClB,WACA,SACA,SACA,OACA,KACA,GAAG,QACS;CACZ,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAE7C,MAAM,gBAAgB,kBAAkB;AACtC,aAAW,KAAK;IACf,EAAE,CAAC;CAEN,MAAM,iBAAiB,kBAAkB;AACvC,aAAW,MAAM;IAChB,EAAE,CAAC;CAIN,MAAM,cAAc,aACjB,UAAiC;AAChC,YAAU,MAAM;IAElB,CAAC,QAAQ,CACV;AAED,YAAW,YAAY;EACrB,WAAW;EACX;EACA;EACD,CAAC;CAGF,MAAM,gBAAgB,kBAAkB;CAIxC,MAAM,oBAAoB,sBAAsB;AAE9C,SAAO,WADa,WAAW,kBAAkB,IAAI,GACtB;GAC7B,UAAU;GACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;GACpC,CAAC;IACD,CAAC,SAAS,gBAAgB,CAAC;CAG9B,MAAM,oBAAoB,uBAAuB;EAK/C,MAAM,YAHa,cAAc,MAAM,WAGV,gBADW,QAAQ,YADlC,UAAU,YAAY,WAEW;AAE/C,MAAI,CAAC,UACH,QAAO,EAAE;AAeX,SAAO;GACL,OAbY,WAAW,WAAW;IAClC,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAUM;GACL,qBARqB,iBACrB,kBAAkB,OAClB,CAAC,GAAG,EAAE,EACN,CAAC,eAAe,UAAU,CAKS;GACpC;GACD;CAEF,MAAM,aAAa,cAAc;AAC/B,SAAO;GAAC,WAAW;GAAM,WAAW;GAAM;GAAmB;GAAM;IAClE;EAAC,WAAW;EAAM;EAAmB;EAAO,WAAW;EAAK,CAAC;CAEhE,MAAM,kBAAkB,cAAc;AACpC,SAAO;GAAC,WAAW;GAAM,WAAW;GAAW;GAAY;IAC1D;EAAC,WAAW;EAAM,WAAW;EAAW;EAAY,CAAC;CAExD,MAAM,gBAAgB,cAAc;AAClC,SAAO;GAAC,WAAW;GAAM,WAAW;GAAS;GAAY;IACxD;EAAC,WAAW;EAAM,WAAW;EAAS;EAAY,CAAC;AAEtD,QACE,qBAAC,cAAD;EACO;EACL,SAAS;EACT,WAAW;EACX,YAAY;EACZ,sBAAA;EACA,OAAO;EACP,GAAI;YAPN;GASG,aACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,UAAD;IAAU,MAAM;IAAW,SAAQ;IAAU,OAAO;IAAmB,CAAA,EAEvE,oBAACA,MAAD;IAAQ,OAAO;cAAc;IAAmB,CAAA,CAC/C,EAAA,CAAA;GAEJ;GACA,WACC,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAACA,MAAD;IAAQ,OAAO;cAAc;IAAmB,CAAA,EAChD,oBAAC,UAAD;IAAU,MAAM;IAAS,SAAQ;IAAU,OAAO;IAAiB,CAAA,CAClE,EAAA,CAAA;GAEQ;;EAEjB;AAEF,KAAK,cAAc"}

package/dist/components/Pressable.cjs

@@ -21,7 +21,7 @@ react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
 *
 * @example
 * ```tsx
-* import { Pressable } from '@yahoo/uds-mobile';
+* import { Pressable } from '@yahoo/uds-mobile/Pressable';
 *
 * <Pressable
 *   backgroundColor="primary"