jfs-components 0.0.85 → 0.0.95

package/src/components/FullscreenModal/FullscreenModal.tsx

@@ -1,19 +1,12 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useRef } from 'react'
 import {
   View,
   Text,
-  ScrollView,
+  Animated,
   type StyleProp,
   type ViewStyle,
   type TextStyle,
 } from 'react-native'
-import Animated, {
-  Extrapolation,
-  interpolate,
-  useAnimatedScrollHandler,
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
@@ -37,16 +30,16 @@ import Slot from '../Slot/Slot'
 // ---------------------------------------------------------------------------
 const FULLSCREEN_MODAL_FORCED_MODES = Object.freeze({ context5: 'Fullscreen Modal' })
 
-// Reanimated-driven ScrollView so the parallax handler runs on the UI thread.
-// Module scope so the wrapped component identity is stable across renders.
-const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView)
-
-// Parallax tuning. The hero collapses by HEIGHT only as the user scrolls up —
-// its full width is preserved and the media keeps a fixed aspect ratio (it is
-// cropped, never scaled or squished, like a `cover` background). When no
-// explicit `heroMinHeight` is given, the hero collapses to this fraction of
-// its resting height.
-const HERO_MIN_HEIGHT_RATIO = 0.45
+// ---------------------------------------------------------------------------
+// Default modes
+//
+// A FullscreenModal is a "JioPlus" surface, so it defaults the `Page type`
+// collection to `'JioPlus'`. Unlike the forced modes above this IS
+// overridable — it is applied before the caller's `modes`, so passing
+// `modes={{ 'Page type': 'SubPage' }}` still wins. Frozen for stable identity
+// (keeps the token resolver's per-modes cache hot).
+// ---------------------------------------------------------------------------
+const FULLSCREEN_MODAL_DEFAULT_MODES = Object.freeze({ 'Page type': 'JioPlus' })
 
 export type FullscreenModalProps = {
   /** Small eyebrow line above the headline. */
@@ -58,23 +51,23 @@ export type FullscreenModalProps = {
   /** Secondary line below the supporting paragraph (e.g. a price / timeline). */
   priceText?: string
   /**
-   * Media rendered full-bleed behind the hero text and driven by the parallax
-   * scroll effect. Bring any renderer — most commonly a `LottiePlayer`, but an
-   * `Image`, `Video`, or `SvgXml` works too. Size it to fill the hero box
-   * (`heroHeight` tall, full modal width) and let it `cover` so that as the
-   * hero collapses in height the art is cropped, never distorted. `modes` are
-   * cascaded into it.
+   * Full-bleed background media for the whole modal. It is pinned to the top
+   * and laid out at the full modal width; size it with an aspect ratio
+   * (e.g. `<Image ratio={1080 / 4140} />`) so its height follows the width
+   * naturally. It renders as a single continuous background BEHIND both the
+   * hero text and the body content — there is no separate body box stacked on
+   * top of it. Bring any renderer — most commonly an `Image`, but a
+   * `LottiePlayer`, `Video`, or `SvgXml` works too. It never intercepts
+   * touches and the foreground content scrolls over it (no parallax).
+   * `modes` are cascaded into it.
    */
   heroMedia?: React.ReactNode
-  /** Resting height of the hero region. Defaults to 420. */
-  heroHeight?: number
   /**
-   * Collapsed height the hero shrinks to at full scroll. Defaults to
-   * `heroHeight * 0.45`. Only the height changes — the width is always full.
+   * Height reserved for the hero text region (eyebrow / headline / supporting
+   * / price), whose content is anchored to the bottom. Applies whether or not
+   * `heroMedia` is present. Defaults to 420.
    */
-  heroMinHeight?: number
-  /** Enable the scroll-driven hero collapse. Defaults to true. */
-  parallax?: boolean
+  heroHeight?: number
   /** Whether to render the floating close button (top-right). Defaults to true. */
   showClose?: boolean
   /** Press handler for the close button. */
@@ -92,15 +85,17 @@ export type FullscreenModalProps = {
   onPrimaryAction?: () => void
   /** Disclaimer text shown below the default primary action button. */
   disclaimer?: string
-  /** Solid backdrop color for the scrollable body. Defaults to a near-black. */
-  backgroundColor?: string
   /** Body content (typically `Section`s). `modes` are cascaded automatically. */
   children?: React.ReactNode
-  /** Mode configuration. `context5` is always forced to `'Fullscreen Modal'`. */
+  /**
+   * Mode configuration. `Page type` defaults to `'JioPlus'` (overridable here),
+   * and `context5` is always forced to `'Fullscreen Modal'` (non-overridable).
+   * The resolved modes cascade to the body, hero media, and the `ActionFooter`.
+   */
   modes?: Record<string, any>
   /** Style overrides for the outer container. */
   style?: StyleProp<ViewStyle>
-  /** Style overrides for the scroll body wrapper (the dark content area). */
+  /** Style overrides for the transparent body wrapper. */
   contentContainerStyle?: StyleProp<ViewStyle>
   testID?: string
 }
@@ -109,7 +104,7 @@ export type FullscreenModalProps = {
 // Hero text — the eyebrow / headline / supporting / price block. Built inline
 // (rather than reusing <PageHero>) so we can render BOTH a supporting
 // paragraph AND a price line with the exact PageHero token gaps, and overlay
-// it on the parallax media without PageHero's media/button scaffolding.
+// it on the hero media without PageHero's media/button scaffolding.
 // ---------------------------------------------------------------------------
 type HeroTextProps = {
   eyebrow?: string
@@ -181,8 +176,9 @@ function HeroText({ eyebrow, headline, supportingText, priceText, modes }: HeroT
 }
 
 /**
- * FullscreenModal — a full-screen takeover surface with a parallax media hero,
- * a scrollable body, a floating close button, and a sticky `ActionFooter`.
+ * FullscreenModal — a full-screen takeover surface with a full-bleed media
+ * hero, a scrollable body, a floating close button, and a sticky
+ * `ActionFooter`.
  *
  * The component always themes itself with `context5: 'Fullscreen Modal'`
  * (non-overridable) so every nested component (Section, ListItem, Button,
@@ -190,14 +186,21 @@ function HeroText({ eyebrow, headline, supportingText, priceText, modes }: HeroT
  * That mode is cascaded into `children`, the footer, and the hero text via
  * `cloneChildrenWithModes` / the merged `modes` object.
  *
- * ### Parallax
- * As the user scrolls up, the hero collapses by **height only** (from
- * `heroHeight` to `heroMinHeight`) — its **full width is always preserved**.
- * The `heroMedia` is pinned to the top at a fixed size and `cover`-cropped by
- * the collapsing clip, so it keeps a perfect aspect ratio the whole time
- * (never scaled or squished). Because it collapses slower than the content
- * scrolls, the media lags behind for the parallax depth cue. Disable with
- * `parallax={false}`.
+ * ### Background media
+ * The `heroMedia` is a single full-bleed background pinned to the top of the
+ * modal at the full width and its own natural aspect ratio. It lives at the
+ * ROOT — behind both the scrolling content and the (transparent) footer — so
+ * it fills the whole surface and is NEVER clipped to the content height. It
+ * also contributes ZERO scroll height: the scroll extent is driven purely by
+ * the in-flow foreground (hero text + `children`), so the number of body
+ * elements dictates how far the surface scrolls. It still scrolls in lockstep
+ * WITH the content (the background is translated by the scroll offset), so the
+ * content reads as sitting ON one continuous image that moves with it — there
+ * is no parallax and no separate solid body box.
+ *
+ * Pass a background sized to the full width at its natural ratio
+ * (e.g. `<Image imageSource={bg} ratio={1080 / 4140} />`). Use an asset at
+ * least as tall as the surface so it covers the full modal.
  *
  * @component
  * @example
@@ -207,7 +210,7 @@ function HeroText({ eyebrow, headline, supportingText, priceText, modes }: HeroT
  *   headline="Get more from your money."
  *   supportingText="JioFinance+ is your upgraded financial experience…"
  *   priceText="₹999/year · ₹0 until 2027"
- *   heroMedia={<LottiePlayer source={hero} size={{ width: 360, height: 420 }} />}
+ *   heroMedia={<Image imageSource={hero} ratio={1080 / 4140} />}
  *   primaryActionLabel="Upgrade for free"
  *   disclaimer="By upgrading, we'll check your eligibility with Experian."
  *   onPrimaryAction={() => upgrade()}
@@ -225,8 +228,6 @@ function FullscreenModal({
   priceText = '₹999/year · ₹0 until 2027',
   heroMedia,
   heroHeight = 420,
-  heroMinHeight,
-  parallax = true,
   showClose = true,
   onClose,
   closeAccessibilityLabel = 'Close',
@@ -234,7 +235,6 @@ function FullscreenModal({
   primaryActionLabel = 'Upgrade for free',
   onPrimaryAction,
   disclaimer = "By upgrading, we'll check your eligibility with Experian.",
-  backgroundColor = '#0f0d0a',
   children,
   modes: propModes = EMPTY_MODES,
   style,
@@ -243,36 +243,37 @@ function FullscreenModal({
 }: FullscreenModalProps) {
   const { modes: globalModes } = useTokens()
 
-  // context5 is appended last so it always wins, regardless of what the
-  // caller (or the global theme) passes.
+  // Merge order (low → high priority):
+  //   global theme → component defaults (Page type: JioPlus) → caller modes →
+  //   forced modes (context5). So `Page type` defaults to JioPlus but the
+  //   caller can override it, while `context5` always wins. This single `modes`
+  //   object is what cascades to the body, hero media, and the ActionFooter.
   const modes = useMemo(
-    () => ({ ...globalModes, ...propModes, ...FULLSCREEN_MODAL_FORCED_MODES }),
+    () => ({
+      ...globalModes,
+      ...FULLSCREEN_MODAL_DEFAULT_MODES,
+      ...propModes,
+      ...FULLSCREEN_MODAL_FORCED_MODES,
+    }),
     [globalModes, propModes]
   )
 
   const rootGap = Number(getVariableByName('fullScreenModal/gap', modes)) || 16
 
-  const minHeight = heroMinHeight ?? Math.round(heroHeight * HERO_MIN_HEIGHT_RATIO)
-
-  const scrollY = useSharedValue(0)
-  const onScroll = useAnimatedScrollHandler((event) => {
-    scrollY.value = event.contentOffset.y
-  })
-
-  // Collapse the hero by HEIGHT only as the user scrolls up. The clip's width
-  // never changes and the media inside is pinned full-size at the top, so the
-  // art is cropped (cover) rather than scaled or narrowed — it keeps a perfect
-  // aspect ratio the whole time. Pull-down (negative offset) is clamped, so the
-  // hero never grows past its resting height.
-  const heroAnimatedStyle = useAnimatedStyle(() => {
-    const height = interpolate(
-      scrollY.value,
-      [0, heroHeight],
-      [heroHeight, minHeight],
-      Extrapolation.CLAMP
-    )
-    return { height }
-  })
+  // Drives the background's parallax-free sync with the scroll. The hero media
+  // lives at the ROOT (so it is never clipped to the content height and sits
+  // behind the transparent footer), but we translate it up by the exact scroll
+  // offset so it moves in lockstep with the content — i.e. it scrolls WITH the
+  // body without ever contributing to the scroll height.
+  const scrollY = useRef(new Animated.Value(0)).current
+  const onScroll = useMemo(
+    () =>
+      Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+        useNativeDriver: true,
+      }),
+    [scrollY]
+  )
+  const heroTranslateY = useMemo(() => Animated.multiply(scrollY, -1), [scrollY])
 
   const processedHeroMedia = useMemo(
     () =>
@@ -286,37 +287,13 @@ function FullscreenModal({
     [children, modes]
   )
 
-  // The clip is full-width and top-pinned; its height is what animates. Width
-  // is intentionally never animated.
-  const heroClipBaseStyle = useMemo<ViewStyle>(
-    () => ({
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      overflow: 'hidden',
-    }),
-    []
-  )
-
-  // The media sits at a fixed full-size box pinned to the top of the clip, so
-  // the collapsing clip crops it from the bottom (cover) instead of resizing
-  // it. Full width, fixed height — a perfect, constant aspect ratio.
-  const heroMediaWrapStyle = useMemo<ViewStyle>(
-    () => ({
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      height: heroHeight,
-      alignItems: 'stretch',
-    }),
-    [heroHeight]
-  )
-
+  // The hero text region always reserves `heroHeight` and anchors its content
+  // to the bottom, so the eyebrow/headline block sits in the lower part of the
+  // first screenful — over the background media when present, in flow
+  // otherwise.
   const heroTextRegionStyle = useMemo<ViewStyle>(
     () => ({
-      height: heroHeight,
+      minHeight: heroHeight,
       justifyContent: 'flex-end',
       paddingHorizontal: 16,
       paddingBottom: 16,
@@ -324,26 +301,28 @@ function FullscreenModal({
     [heroHeight]
   )
 
+  // Body is intentionally transparent — the background media shows through
+  // behind it. There is no solid "body box" stacked on top of the image.
   const bodyStyle = useMemo<StyleProp<ViewStyle>>(
     () => [
       {
-        backgroundColor,
         gap: rootGap,
         paddingTop: rootGap,
         paddingBottom: 24,
       },
       contentContainerStyle,
     ],
-    [backgroundColor, rootGap, contentContainerStyle]
+    [rootGap, contentContainerStyle]
   )
 
-  const heroClip = (
-    <Animated.View
-      style={[heroClipBaseStyle, parallax ? heroAnimatedStyle : { height: heroHeight }]}
-      pointerEvents="none"
-    >
-      <View style={heroMediaWrapStyle}>{processedHeroMedia}</View>
-    </Animated.View>
+  const heroTextNode = (
+    <HeroText
+      eyebrow={eyebrow}
+      headline={headline}
+      supportingText={supportingText}
+      priceText={priceText}
+      modes={modes}
+    />
   )
 
   // Footer: a fully custom node, or the default Button + Disclaimer column.
@@ -365,10 +344,32 @@ function FullscreenModal({
   }
 
   return (
-    <View style={[rootStyle, { backgroundColor }, style]} testID={testID}>
-      {processedHeroMedia ? heroClip : null}
+    <View style={[rootStyle, style]} testID={testID}>
+      {/*
+       * Layout model:
+       *  - `processedHeroMedia` is a ROOT-LEVEL full-bleed background pinned to
+       *    the top at full modal width and rendered at its own natural aspect
+       *    ratio — it is NEVER clipped to the content height, so it extends as
+       *    far down as its own height allows and fills the surface BEHIND both
+       *    the scrolling content and the (transparent) footer. Because it lives
+       *    outside the ScrollView it contributes ZERO scroll height, yet we
+       *    translate it by the scroll offset (`heroTranslateY`) so it visually
+       *    scrolls in lockstep WITH the content (no parallax, no clip).
+       *    `pointerEvents="none"` lets touches reach the content/footer.
+       *  - The ScrollView is transparent and holds only the foreground (hero
+       *    text + body) IN FLOW, so the number of actual elements dictates how
+       *    far the surface scrolls.
+       */}
+      {processedHeroMedia ? (
+        <Animated.View
+          style={[heroBackgroundStyle, { transform: [{ translateY: heroTranslateY }] }]}
+          pointerEvents="none"
+        >
+          {processedHeroMedia}
+        </Animated.View>
+      ) : null}
 
-      <AnimatedScrollView
+      <Animated.ScrollView
         style={scrollViewStyle}
         contentContainerStyle={scrollContentStyle}
         showsVerticalScrollIndicator={false}
@@ -378,17 +379,13 @@ function FullscreenModal({
         // the keyboard is already open (default 'never' eats that tap).
         keyboardShouldPersistTaps="handled"
       >
-        <View style={heroTextRegionStyle}>
-          <HeroText
-            eyebrow={eyebrow}
-            headline={headline}
-            supportingText={supportingText}
-            priceText={priceText}
-            modes={modes}
-          />
+        <View style={foregroundFlowStyle}>
+          <View style={heroTextRegionStyle}>{heroTextNode}</View>
+          {processedChildren ? (
+            <View style={bodyStyle}>{processedChildren}</View>
+          ) : null}
         </View>
-        <View style={bodyStyle}>{processedChildren}</View>
-      </AnimatedScrollView>
+      </Animated.ScrollView>
 
       {footerContent ? (
         <ActionFooter modes={modes}>{footerContent}</ActionFooter>
@@ -413,5 +410,13 @@ const scrollViewStyle: ViewStyle = { flex: 1 }
 const scrollContentStyle: ViewStyle = { flexGrow: 1 }
 const fullWidthStyle: ViewStyle = { width: '100%' }
 const closeButtonStyle: ViewStyle = { position: 'absolute', top: 12, right: 12 }
+// Root-level full-bleed background media. Pinned to the top at full modal
+// width; the media inside keeps its own natural aspect ratio (only `top` is
+// pinned — no `bottom`/`overflow` clip), so it is NEVER cut to the content
+// height and fills the surface behind the scrolling content and the footer.
+// Living outside the ScrollView, it adds nothing to the scroll height.
+const heroBackgroundStyle: ViewStyle = { position: 'absolute', top: 0, left: 0, right: 0 }
+// The foreground always flows normally — its content drives the scroll height.
+const foregroundFlowStyle: ViewStyle = { width: '100%' }
 
 export default FullscreenModal

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,167 @@
+import React, { useMemo } from 'react'
+import {
+  View,
+  type AccessibilityProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import BaseIcon from '../../icons/Icon'
+import type { UnifiedSource } from '../../utils/MediaSource'
+
+type IconProps = AccessibilityProps & {
+  /**
+   * Built-in icon name from the registry, in the `ic_something` format
+   * (e.g. `'ic_card'`, `'ic_scan_qr_code'`). When omitted and no `source` or
+   * `children` slot is supplied, defaults to `'ic_card'` to match the Figma
+   * design's default glyph.
+   */
+  iconName?: string
+  /**
+   * Unified fallback source rendered when `iconName` is missing or not in the
+   * registry. Accepts a remote URI, an inline SVG XML string, a `require()`
+   * asset, an SVG React component, or an already-rendered element. The media
+   * is tinted with the mode-resolved icon color so it follows design tokens
+   * just like a built-in icon. See {@link UnifiedSource}.
+   */
+  source?: UnifiedSource
+  /**
+   * Icon slot. Render any node here (another `Icon`, a custom SVG component,
+   * etc.) and it takes precedence over `iconName`/`source`. `modes` cascade
+   * into the slotted children automatically.
+   */
+  children?: React.ReactNode
+  /**
+   * Override the mode-resolved icon color. When omitted the value comes from
+   * the `icon/color` design token.
+   */
+  color?: string
+  /**
+   * Override the mode-resolved icon size (in px). When omitted the value comes
+   * from the `icon/size` design token.
+   */
+  size?: number
+  modes?: Record<string, any>
+  style?: StyleProp<ViewStyle>
+}
+
+interface IconTokens {
+  containerStyle: ViewStyle
+  iconColor: string
+  iconSize: number
+}
+
+function resolveIconTokens(modes: Record<string, any>): IconTokens {
+  const iconColor = (getVariableByName('icon/color', modes) || '#ad8444') as string
+  const iconSize = (getVariableByName('icon/size', modes) || 18) as number
+  const paddingLeft = (getVariableByName('icon/padding/left', modes) || 0) as number
+  const paddingTop = (getVariableByName('icon/padding/top', modes) || 0) as number
+  const paddingRight = (getVariableByName('icon/padding/right', modes) || 0) as number
+  const paddingBottom = (getVariableByName('icon/padding/bottom', modes) || 0) as number
+
+  return {
+    containerStyle: {
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      paddingLeft,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+    },
+    iconColor,
+    iconSize,
+  }
+}
+
+/**
+ * Icon component — a design-token-driven wrapper around a single glyph.
+ *
+ * It mirrors the Figma "Icon" component: a padded, centered container whose
+ * color and size are resolved from the `icon/*` design tokens via `modes`.
+ * The glyph itself can be supplied three ways, in order of precedence:
+ *
+ *  1. `children` — a real slot for any node (custom SVG component, nested
+ *     `Icon`, etc.). `modes` cascade into the slot automatically.
+ *  2. `iconName` — a registry icon in the `ic_something` format.
+ *  3. `source` — a {@link UnifiedSource} fallback (remote URI, inline SVG XML,
+ *     `require()` asset, SVG component, or React element), tinted with the
+ *     mode-resolved icon color.
+ *
+ * `color` and `size` props let consumers override the token values per
+ * instance without touching `modes`.
+ *
+ * @example
+ * ```tsx
+ * // Built-in registry icon (default path).
+ * <Icon iconName="ic_card" modes={{ 'Color Mode': 'Light' }} />
+ *
+ * // Per-instance overrides.
+ * <Icon iconName="ic_ccv" color="#5c00b5" size={24} />
+ *
+ * // Fallback to an external source when the name isn't in the registry.
+ * <Icon source="https://cdn.example.com/glyph.svg" />
+ *
+ * // Slot: render any node as the icon.
+ * <Icon><BrandLogo /></Icon>
+ * ```
+ */
+function Icon({
+  iconName,
+  source,
+  children,
+  color,
+  size,
+  modes: propModes = EMPTY_MODES,
+  style: styleProp,
+  ...rest
+}: IconProps) {
+  const { modes: globalModes } = useTokens()
+
+  const modes = useMemo(
+    () => (globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+      ? EMPTY_MODES
+      : { ...globalModes, ...propModes }),
+    [globalModes, propModes]
+  )
+
+  const tokens = useMemo(() => resolveIconTokens(modes), [modes])
+
+  const composedStyle = useMemo<StyleProp<ViewStyle>>(
+    () => (styleProp ? [tokens.containerStyle, styleProp] : tokens.containerStyle),
+    [tokens.containerStyle, styleProp]
+  )
+
+  const hasSlot = React.Children.count(children) > 0
+
+  // Only fall back to the default glyph when nothing at all is provided so an
+  // explicit `source` (without an `iconName`) isn't shadowed by `ic_card`.
+  const resolvedName =
+    iconName ?? (source === undefined ? 'ic_card' : undefined)
+
+  const iconColor = color ?? tokens.iconColor
+  const iconSize = size ?? tokens.iconSize
+
+  return (
+    <View style={composedStyle} {...rest}>
+      {hasSlot ? (
+        cloneChildrenWithModes(children, modes)
+      ) : (
+        <BaseIcon
+          name={resolvedName}
+          {...(source !== undefined ? { source } : {})}
+          size={iconSize}
+          color={iconColor}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no"
+        />
+      )}
+    </View>
+  )
+}
+
+export default React.memo(Icon)
+export type { IconProps }

package/src/components/index.ts

@@ -38,10 +38,12 @@ export { default as CircularProgressBarDoted, type CircularProgressBarDotedProps
 export { default as CircularRating, type CircularRatingProps } from './CircularRating/CircularRating'
 export { default as CoverageRing, type CoverageRingProps } from './CoverageRing/CoverageRing'
 export { default as CoverageBarComparison, type CoverageBarComparisonProps, type CoverageBarComparisonItem } from './CoverageBarComparison/CoverageBarComparison'
+export { default as AllocationComparisonChart, type AllocationComparisonChartProps, type AllocationSegment } from './AllocationComparisonChart/AllocationComparisonChart'
 export { default as MonthlyStatusGrid, CalendarGlyph, type MonthlyStatusGridProps, type MonthlyStatusGridMonth, type MonthlyStatus, type CalendarGlyphProps } from './MonthlyStatusGrid/MonthlyStatusGrid'
 export { default as Gauge, type GaugeProps } from './Gauge/Gauge';
 export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/HoldingsCard';
 export { default as HStack, type HStackProps } from './HStack/HStack';
+export { default as Icon, type IconProps } from './Icon/Icon';
 export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
 export { default as Image, type ImageProps } from './Image/Image';