@yahoo/uds-mobile 2.7.0 → 2.8.0

package/dist/components/Banner/Banner.cjs

@@ -131,6 +131,7 @@ const Banner = (0, react.memo)(function Banner({ variant = "primary", startIcon,
 				name: "Cross",
 				variant: "tertiary",
 				size: closeIconSize,
+				iconColor: "primary",
 				accessibilityLabel: dismissAccessibilityLabel,
 				onPress: onDismiss,
 				style: [internalStyles.dismissButton, isSingleLine ? internalStyles.alignCenter : internalStyles.alignStart],

package/dist/components/Banner/Banner.js

@@ -129,6 +129,7 @@ const Banner = memo(function Banner({ variant = "primary", startIcon, title, des
 				name: "Cross",
 				variant: "tertiary",
 				size: closeIconSize,
+				iconColor: "primary",
 				accessibilityLabel: dismissAccessibilityLabel,
 				onPress: onDismiss,
 				style: [internalStyles.dismissButton, isSingleLine ? internalStyles.alignCenter : internalStyles.alignStart],

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

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

package/dist/components/Icon.d.cts

@@ -93,8 +93,8 @@ 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", "Gymnastics", "HalfStar", "HalfSun", "HappyFace", "HazeDay", "HazeNight", "Heading2", "Heading3", "Headline1", "HeadlineDocumentSquare", "Headphone", "HeadphonesMic", "Heart", "HeartArrow", "HeartPulse", "HeavyRain", "HeavyRainDay", "HeavyRainLightning", "HeavyRainLightningDay", "HeavyRainLightningNight", "HeavyRainNight", "Help", "Highlighter", "History", "HockeyWithPuck", "Home", "HorseHeadBridle", "HotTub", "Hurricane", "Ice", "Id", "Image", "ImageFile", "ImageGallery", "Inbox", "InboxDownArrow", "InboxUpArrow", "IndentRight", "Infinity", "Info", "InstitutionalWesternBank", "Italics", "JoyfulFace", "JudoUniform", "Keyboard", "KeylineShapes", "Kick", "KnightChessPiece", "Laptop", "LaptopWithPhone", "Laurel", "LaurelLeft", "LaurelRight", "LayoutBottom", "LayoutDefault", "LayoutFourColumn", "LayoutGrid", "LayoutPerfectGrid", "LayoutRight", "LayoutThreeColumn", "LayoutThreeRows", "LayoutTwoColumn", "LeftAlign", "LeftCurveArrow", "LeftPageArrow", "LeoAstrology", "Letter", "LetterColor", "LetterSize", "LibraAstrology", "LifeRing", "Lightbulb", "Lightning", "LightningDay", "LightningNight", "Link", "LiquidDrop", "Live", "Livestream", "Location", "LocationCircle", "LocationMap", "Lock", "LogIn", "LogOut", "Lollipop", "LoveEnvelope", "LoyaltyCard", "MagicWand", "MagnifyingGlass", "Mahjong", "MakeupBeauty", "Mannequin", "Medal", "MedicineBottle", "MedicinePill", "Megaphone", "Microphone", "Microscope", "Minus", "MinusBox", "MinusCircle", "MinusPeople", "MinusSearch", "MmaGlove", "MmaRing", "MobileNumber", "MobilePhone", "More", "MoreVertical", "NeutralFace", "NewMoon", "Newsletter", "Night", "NineSixteenRatio", "NoBell", "NoConnectionScreen", "NoEye", "NoHeart", "NoImage", "NoPeople", "NoShield", "NoSmoking", "NoSquare", "NoStar", "NoVideoCamera", "NoWifi", "NotificationBell", "Null", "NumberedList", "OnTop", "OneOneRatio", "OpenBook", "OpenEnvelope", "OrderedList", "OutdentLeft", "PDF", "PPT", "PaperPlane", "PaperPlaneDiagonal", "Paperclip", "Paragraph", "ParagraphLeftIdent", "ParagraphRightIdent", "Parking", "ParkingSquare", "PassKey", "Password", "Pause", "Payments", "Payphone", "PayphoneFace", "Pencil", "PencilLines", "People", "Person", "PersonClimbing", "PersonShield", "Pets", "Phone", "PieChart", "Pin", "PingPong", "PiscesAstrology", "PlainText", "Play", "PlayCircle", "Pool", "PowerSwitch", "Preferences", "PreferencesAlt", "Printer", "Priority", "Profile", "Progress", "ProgressWithCheck", "Pulse", "PuzzlePiece", "QrCode", "QuestionBubble", "QuoteCircle", "QuoteSquare", "RAW", "RTF", "RTFOff", "RacingFlag", "Radar", "RadioCircle", "RainDay", "RainNight", "Receipt", "Receipts", "RedoPencil", "Refresh", "Restaurant", "RetailTag", "RightAlign", "RightCurveArrow", "RightPageArrow", "RobotHead", "Running", "SadFace", "SadderFace", "SagittariusAstrology", "SailBoat", "Satellite", "ScaleDown", "ScanQrCode", "Scissors", "ScorpioAstrology", "SearchConfirm", "SearchEnvelope", "SearchWorldWithLines", "SecurityKey", "SendToSelf", "Server", "SettingsAlt", "SettingsCogPeople", "Shapes", "Share", "Shield", "ShieldCheck", "ShieldSlash", "ShockedFace", "ShoppingBag", "ShoppingBasket", "ShoppingCart", "Shuttlecock", "SixteenNineRatio", "Skateboard", "SkipTimeTen", "Skull", "Slideshow", "SmallSquareInsideBigSquare", "SmartWatch", "SmileFace", "SmileFaceLife", "Sms", "SmsVerificationCode", "Sneaker", "SneakerAlt", "Snippet", "Snow", "SnowDay", "SnowNight", "Snowflake", "Soccer", "Solitaire", "SoundLow", "SoundOff", "SoundOn", "Spa", "Sparkle", "SparkleFootballBall", "SparkleTennisBall", "SpecialCharacter", "SpeechBubble", "SpeechBubbleStar", "SportsBook", "SportsSparkle", "SprinkleDay", "SprinkleNight", "Square", "Stadium", "Star", "StarArticle", "StarMedal", "StarTrophy", "StatePrivacyControls", "StockTrends", "Stopwatch", "Store", "Strikethrough", "Sun", "Sunrise", "Sunset", "SurfboardOnSand", "Swimming", "Sync", "Tab", "Tablet", "TaurusAstrology", "TechnicalRoute", "Television", "TennisBall", "TennisRacketBall", "ThirdQuarter", "ThreeCircles", "ThreeFourRatio", "ThreeLines", "ThreeLinesSpread", "ThumbsDown", "ThumbsUp", "Thumbtack", "ThumbtackDiagonal", "TimePaperPlane", "Tornado", "Trading", "TrafficSignRightTurn", "Trampoline", "Transactions", "Trash", "Trending", "TrendingCircle", "Trophy", "TruckRight", "Tshirt", "Tsunami", "Tub", "TwoArrowsDiagonalInwards", "TwoArrowsDiagonalOutwards", "TwoCorners", "TwoHorizontalRectangles", "TwoLinesContainer", "TwoMasks", "TwoRectangles", "TwoSparkles", "TwoSquares", "TwoThirdsColumn", "Underline", "Unlock", "UnorderedList", "UpCurveArrow", "UpDownChevron", "UpDownShortArrows", "UpFolder", "Upload", "Verification", "VideoCamera", "VideoFile", "VirgoAstrology", "Virus", "Volleyball", "Walking", "Wallet", "WaningCrescent", "WaningGibbous", "Warning", "WaxingCrescent", "WaxingGibbous", "Web", "Weights", "Wifi", "Wind", "WindCloud", "WindCloudDay", "WindCloudNight", "Wine", "WorldWithLines", "Wrench", "WrestlingHeadGear", "WritingAi", "XLSFile", "YEP", "ZIP"];
-declare const multicolorIconNames: readonly ["Cloud", "CloudDay", "CloudNight", "Cold", "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"];
+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 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 };
 //# sourceMappingURL=Icon.d.cts.map

package/dist/components/Icon.d.ts

@@ -93,8 +93,8 @@ 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", "Gymnastics", "HalfStar", "HalfSun", "HappyFace", "HazeDay", "HazeNight", "Heading2", "Heading3", "Headline1", "HeadlineDocumentSquare", "Headphone", "HeadphonesMic", "Heart", "HeartArrow", "HeartPulse", "HeavyRain", "HeavyRainDay", "HeavyRainLightning", "HeavyRainLightningDay", "HeavyRainLightningNight", "HeavyRainNight", "Help", "Highlighter", "History", "HockeyWithPuck", "Home", "HorseHeadBridle", "HotTub", "Hurricane", "Ice", "Id", "Image", "ImageFile", "ImageGallery", "Inbox", "InboxDownArrow", "InboxUpArrow", "IndentRight", "Infinity", "Info", "InstitutionalWesternBank", "Italics", "JoyfulFace", "JudoUniform", "Keyboard", "KeylineShapes", "Kick", "KnightChessPiece", "Laptop", "LaptopWithPhone", "Laurel", "LaurelLeft", "LaurelRight", "LayoutBottom", "LayoutDefault", "LayoutFourColumn", "LayoutGrid", "LayoutPerfectGrid", "LayoutRight", "LayoutThreeColumn", "LayoutThreeRows", "LayoutTwoColumn", "LeftAlign", "LeftCurveArrow", "LeftPageArrow", "LeoAstrology", "Letter", "LetterColor", "LetterSize", "LibraAstrology", "LifeRing", "Lightbulb", "Lightning", "LightningDay", "LightningNight", "Link", "LiquidDrop", "Live", "Livestream", "Location", "LocationCircle", "LocationMap", "Lock", "LogIn", "LogOut", "Lollipop", "LoveEnvelope", "LoyaltyCard", "MagicWand", "MagnifyingGlass", "Mahjong", "MakeupBeauty", "Mannequin", "Medal", "MedicineBottle", "MedicinePill", "Megaphone", "Microphone", "Microscope", "Minus", "MinusBox", "MinusCircle", "MinusPeople", "MinusSearch", "MmaGlove", "MmaRing", "MobileNumber", "MobilePhone", "More", "MoreVertical", "NeutralFace", "NewMoon", "Newsletter", "Night", "NineSixteenRatio", "NoBell", "NoConnectionScreen", "NoEye", "NoHeart", "NoImage", "NoPeople", "NoShield", "NoSmoking", "NoSquare", "NoStar", "NoVideoCamera", "NoWifi", "NotificationBell", "Null", "NumberedList", "OnTop", "OneOneRatio", "OpenBook", "OpenEnvelope", "OrderedList", "OutdentLeft", "PDF", "PPT", "PaperPlane", "PaperPlaneDiagonal", "Paperclip", "Paragraph", "ParagraphLeftIdent", "ParagraphRightIdent", "Parking", "ParkingSquare", "PassKey", "Password", "Pause", "Payments", "Payphone", "PayphoneFace", "Pencil", "PencilLines", "People", "Person", "PersonClimbing", "PersonShield", "Pets", "Phone", "PieChart", "Pin", "PingPong", "PiscesAstrology", "PlainText", "Play", "PlayCircle", "Pool", "PowerSwitch", "Preferences", "PreferencesAlt", "Printer", "Priority", "Profile", "Progress", "ProgressWithCheck", "Pulse", "PuzzlePiece", "QrCode", "QuestionBubble", "QuoteCircle", "QuoteSquare", "RAW", "RTF", "RTFOff", "RacingFlag", "Radar", "RadioCircle", "RainDay", "RainNight", "Receipt", "Receipts", "RedoPencil", "Refresh", "Restaurant", "RetailTag", "RightAlign", "RightCurveArrow", "RightPageArrow", "RobotHead", "Running", "SadFace", "SadderFace", "SagittariusAstrology", "SailBoat", "Satellite", "ScaleDown", "ScanQrCode", "Scissors", "ScorpioAstrology", "SearchConfirm", "SearchEnvelope", "SearchWorldWithLines", "SecurityKey", "SendToSelf", "Server", "SettingsAlt", "SettingsCogPeople", "Shapes", "Share", "Shield", "ShieldCheck", "ShieldSlash", "ShockedFace", "ShoppingBag", "ShoppingBasket", "ShoppingCart", "Shuttlecock", "SixteenNineRatio", "Skateboard", "SkipTimeTen", "Skull", "Slideshow", "SmallSquareInsideBigSquare", "SmartWatch", "SmileFace", "SmileFaceLife", "Sms", "SmsVerificationCode", "Sneaker", "SneakerAlt", "Snippet", "Snow", "SnowDay", "SnowNight", "Snowflake", "Soccer", "Solitaire", "SoundLow", "SoundOff", "SoundOn", "Spa", "Sparkle", "SparkleFootballBall", "SparkleTennisBall", "SpecialCharacter", "SpeechBubble", "SpeechBubbleStar", "SportsBook", "SportsSparkle", "SprinkleDay", "SprinkleNight", "Square", "Stadium", "Star", "StarArticle", "StarMedal", "StarTrophy", "StatePrivacyControls", "StockTrends", "Stopwatch", "Store", "Strikethrough", "Sun", "Sunrise", "Sunset", "SurfboardOnSand", "Swimming", "Sync", "Tab", "Tablet", "TaurusAstrology", "TechnicalRoute", "Television", "TennisBall", "TennisRacketBall", "ThirdQuarter", "ThreeCircles", "ThreeFourRatio", "ThreeLines", "ThreeLinesSpread", "ThumbsDown", "ThumbsUp", "Thumbtack", "ThumbtackDiagonal", "TimePaperPlane", "Tornado", "Trading", "TrafficSignRightTurn", "Trampoline", "Transactions", "Trash", "Trending", "TrendingCircle", "Trophy", "TruckRight", "Tshirt", "Tsunami", "Tub", "TwoArrowsDiagonalInwards", "TwoArrowsDiagonalOutwards", "TwoCorners", "TwoHorizontalRectangles", "TwoLinesContainer", "TwoMasks", "TwoRectangles", "TwoSparkles", "TwoSquares", "TwoThirdsColumn", "Underline", "Unlock", "UnorderedList", "UpCurveArrow", "UpDownChevron", "UpDownShortArrows", "UpFolder", "Upload", "Verification", "VideoCamera", "VideoFile", "VirgoAstrology", "Virus", "Volleyball", "Walking", "Wallet", "WaningCrescent", "WaningGibbous", "Warning", "WaxingCrescent", "WaxingGibbous", "Web", "Weights", "Wifi", "Wind", "WindCloud", "WindCloudDay", "WindCloudNight", "Wine", "WorldWithLines", "Wrench", "WrestlingHeadGear", "WritingAi", "XLSFile", "YEP", "ZIP"];
-declare const multicolorIconNames: readonly ["Cloud", "CloudDay", "CloudNight", "Cold", "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"];
+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 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 };
 //# sourceMappingURL=Icon.d.ts.map

package/dist/components/IconButton.cjs

@@ -55,7 +55,7 @@ function interpolateShadowAlpha(shadow, alpha) {
 * @see {@link Button} for buttons with text labels
 * @see {@link Icon} for non-interactive icons
 */
-const IconButton = (0, react.memo)(function IconButton({ name, variant = "primary", size = "md", iconVariant = "outline", loading, disabled, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
+const IconButton = (0, react.memo)(function IconButton({ name, variant = "primary", size = "md", iconVariant = "outline", iconColor, loading, disabled, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
 	const isDisabled = disabled || loading;
 	const shouldAnimate = !disableEffects && !isDisabled;
 	const [pressed, setPressed] = (0, react.useState)(false);
@@ -65,6 +65,8 @@ const IconButton = (0, react.memo)(function IconButton({ name, variant = "primar
 		disabled: isDisabled,
 		pressed
 	});
+	generated_styles.styles.useVariants({ color: iconColor });
+	const resolvedIconColor = iconColor ? generated_styles.styles.foundation.color : void 0;
 	const backgroundColor = (0, react_native_unistyles_reanimated.useAnimatedVariantColor)(generated_styles.buttonStyles.root, "backgroundColor");
 	const borderColor = (0, react_native_unistyles_reanimated.useAnimatedVariantColor)(generated_styles.buttonStyles.root, "borderColor");
 	const animatedTheme = (0, react_native_unistyles_reanimated.useAnimatedTheme)();
@@ -133,11 +135,12 @@ const IconButton = (0, react.memo)(function IconButton({ name, variant = "primar
 		...props,
 		children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.ActivityIndicator, {
 			size: generated_styles.iconButtonStyles.icon.fontSize,
-			color: generated_styles.buttonStyles.icon.color
+			color: resolvedIconColor ?? generated_styles.buttonStyles.icon.color
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
 			name,
 			variant: iconVariant,
-			style: [generated_styles.iconButtonStyles.icon, generated_styles.buttonStyles.icon]
+			style: [generated_styles.iconButtonStyles.icon, generated_styles.buttonStyles.icon],
+			dangerouslySetColor: resolvedIconColor
 		})
 	});
 });

package/dist/components/IconButton.d.cts

@@ -5,6 +5,7 @@ import { PressableProps as PressableProps$1 } from "./Pressable.cjs";
 import * as react from "react";
 import { Ref } from "react";
 import { View } from "react-native";
+import { StyleProps } from "../../generated/styles";
 
 //#region src/components/IconButton.d.ts
 interface IconButtonProps extends Omit<PressableProps$1, 'children'> {
@@ -16,6 +17,8 @@ interface IconButtonProps extends Omit<PressableProps$1, 'children'> {
   size?: IconButtonSize;
   /** The icon style variant @default 'outline' */
   iconVariant?: IconVariant;
+  /** Override the icon color token without changing the button variant tokens */
+  iconColor?: StyleProps['color'];
   /** Shows a loading spinner and disables the button */
   loading?: boolean;
   /**

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.cts","names":[],"sources":["../../src/components/IconButton.tsx"],"mappings":";;;;;;;;;UAgDU,eAAA,SAAwB,IAAA,CAAK,gBAAA;;EAErC,IAAA,EAAM,QAAA;EAFE;EAIR,OAAA,GAAU,iBAAA;;EAEV,IAAA,GAAO,cAAA;EAJD;EAMN,WAAA,GAAc,WAAA;EAFP;EAIP,OAAA;EAOU;;;;EAFV,cAAA;EAfgC;EAiBhC,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;;cAwCV,UAAA,EAAU,KAAA,CAAA,oBAAA,CAAA,eAAA"}
+{"version":3,"file":"IconButton.d.cts","names":[],"sources":["../../src/components/IconButton.tsx"],"mappings":";;;;;;;;;;UAiDU,eAAA,SAAwB,IAAA,CAAK,gBAAA;;EAErC,IAAA,EAAM,QAAA;EAFE;EAIR,OAAA,GAAU,iBAAA;;EAEV,IAAA,GAAO,cAAA;EAJD;EAMN,WAAA,GAAc,WAAA;EAFP;EAIP,SAAA,GAAY,UAAA;EAAA;EAEZ,OAAA;EAOM;;;;EAFN,cAAA;EAjBqC;EAmBrC,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;cAwCV,UAAA,EAAU,KAAA,CAAA,oBAAA,CAAA,eAAA"}

package/dist/components/IconButton.d.ts

@@ -5,6 +5,7 @@ import { PressableProps as PressableProps$1 } from "./Pressable.js";
 import * as react from "react";
 import { Ref } from "react";
 import { View } from "react-native";
+import { StyleProps } from "../../generated/styles";
 
 //#region src/components/IconButton.d.ts
 interface IconButtonProps extends Omit<PressableProps$1, 'children'> {
@@ -16,6 +17,8 @@ interface IconButtonProps extends Omit<PressableProps$1, 'children'> {
   size?: IconButtonSize;
   /** The icon style variant @default 'outline' */
   iconVariant?: IconVariant;
+  /** Override the icon color token without changing the button variant tokens */
+  iconColor?: StyleProps['color'];
   /** Shows a loading spinner and disables the button */
   loading?: boolean;
   /**

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","names":[],"sources":["../../src/components/IconButton.tsx"],"mappings":";;;;;;;;;UAgDU,eAAA,SAAwB,IAAA,CAAK,gBAAA;;EAErC,IAAA,EAAM,QAAA;EAFE;EAIR,OAAA,GAAU,iBAAA;;EAEV,IAAA,GAAO,cAAA;EAJD;EAMN,WAAA,GAAc,WAAA;EAFP;EAIP,OAAA;EAOU;;;;EAFV,cAAA;EAfgC;EAiBhC,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;;cAwCV,UAAA,EAAU,KAAA,CAAA,oBAAA,CAAA,eAAA"}
+{"version":3,"file":"IconButton.d.ts","names":[],"sources":["../../src/components/IconButton.tsx"],"mappings":";;;;;;;;;;UAiDU,eAAA,SAAwB,IAAA,CAAK,gBAAA;;EAErC,IAAA,EAAM,QAAA;EAFE;EAIR,OAAA,GAAU,iBAAA;;EAEV,IAAA,GAAO,cAAA;EAJD;EAMN,WAAA,GAAc,WAAA;EAFP;EAIP,SAAA,GAAY,UAAA;EAAA;EAEZ,OAAA;EAOM;;;;EAFN,cAAA;EAjBqC;EAmBrC,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;cAwCV,UAAA,EAAU,KAAA,CAAA,oBAAA,CAAA,eAAA"}

package/dist/components/IconButton.js

@@ -53,7 +53,7 @@ function interpolateShadowAlpha(shadow, alpha) {
 * @see {@link Button} for buttons with text labels
 * @see {@link Icon} for non-interactive icons
 */
-const IconButton = memo(function IconButton({ name, variant = "primary", size = "md", iconVariant = "outline", loading, disabled, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
+const IconButton = memo(function IconButton({ name, variant = "primary", size = "md", iconVariant = "outline", iconColor, loading, disabled, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
 	const isDisabled = disabled || loading;
 	const shouldAnimate = !disableEffects && !isDisabled;
 	const [pressed, setPressed] = useState(false);
@@ -63,6 +63,8 @@ const IconButton = memo(function IconButton({ name, variant = "primary", size =
 		disabled: isDisabled,
 		pressed
 	});
+	styles.useVariants({ color: iconColor });
+	const resolvedIconColor = iconColor ? styles.foundation.color : void 0;
 	const backgroundColor = useAnimatedVariantColor(buttonStyles.root, "backgroundColor");
 	const borderColor = useAnimatedVariantColor(buttonStyles.root, "borderColor");
 	const animatedTheme = useAnimatedTheme();
@@ -131,11 +133,12 @@ const IconButton = memo(function IconButton({ name, variant = "primary", size =
 		...props,
 		children: loading ? /* @__PURE__ */ jsx(ActivityIndicator, {
 			size: iconButtonStyles.icon.fontSize,
-			color: buttonStyles.icon.color
+			color: resolvedIconColor ?? buttonStyles.icon.color
 		}) : /* @__PURE__ */ jsx(Icon, {
 			name,
 			variant: iconVariant,
-			style: [iconButtonStyles.icon, buttonStyles.icon]
+			style: [iconButtonStyles.icon, buttonStyles.icon],
+			dangerouslySetColor: resolvedIconColor
 		})
 	});
 });

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 { 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  /** 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  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\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 size={iconButtonStyles.icon.fontSize} color={buttonStyles.icon.color} />\n      ) : (\n        <Icon\n          name={name}\n          variant={iconVariant}\n          style={[iconButtonStyles.icon, buttonStyles.icon]}\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';\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/generated/styles.d.ts

@@ -1462,6 +1462,8 @@ export declare const bannerStyles: {
 
 export declare const bottomSheetStyles: {
   root: {
+    backgroundBlurColor: string;
+    backgroundBlurRadius: number;
     backgroundColor: string;
     borderColor: string;
     borderRadius: number;
@@ -1926,6 +1928,8 @@ export declare const menuContentStyles: {
     gap: number;
     paddingHorizontal: number;
     paddingVertical: number;
+    backgroundBlurColor: string;
+    backgroundBlurRadius: number;
     backgroundColor: string;
     borderColor: string;
   };

package/generated/unistyles.d.ts

@@ -600,6 +600,8 @@ interface ComponentTheme {
     lineHeight: number;
   };
   'bottomSheet/variant/default/root/rest': {
+    backgroundBlurColor: string;
+    backgroundBlurRadius: number;
     backgroundColor: string;
     borderColor: string;
     borderRadius: number;
@@ -3864,6 +3866,8 @@ interface ComponentTheme {
     paddingVertical: number;
   };
   'menuContent/variant/default/root/rest': {
+    backgroundBlurColor: string;
+    backgroundBlurRadius: number;
     backgroundColor: string;
     borderColor: string;
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yahoo/uds-mobile",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "type": "module",
   "bin": {
     "uds-mobile": "./cli/uds-mobile.js"