jfs-components 0.1.19 → 0.1.25

package/src/components/Link/Link.tsx

@@ -0,0 +1,159 @@
+import React, { useCallback } from 'react'
+import { Text as RNText, type TextStyle, type StyleProp, type GestureResponderEvent } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, resolveTextLayout } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+
+export type LinkProps = {
+  /**
+   * The link label. You may also pass content as JSX children
+   * (e.g. `<Link>Terms</Link>`); when both are provided, `children` wins.
+   * Mirrors the {@link Text} API so `Link` is a near-drop-in, underlined
+   * sibling of `Text`.
+   */
+  text?: string
+  /** Child nodes (string or nested `Text`/`Link`). Wins over `text`. */
+  children?: React.ReactNode
+  /**
+   * Called when the link is activated. Navigation is the consumer's job
+   * (e.g. `Linking.openURL`, a router push) — `Link` is intentionally
+   * navigation-agnostic and React Native friendly (no `href`/`target`).
+   */
+  onPress?: (event: GestureResponderEvent) => void
+  /** Disables interaction and dims the label. */
+  disabled?: boolean
+  /**
+   * Layout sizing (matches the Figma `autolayout` variant).
+   * - `Fill` (default): the label stretches to fill the parent's width, so
+   *   `textAlign="Center"` is visible and the whole line is tappable.
+   * - `Hug`: the label hugs its content width.
+   */
+  autolayout?: 'Fill' | 'Hug'
+  /** Horizontal alignment of the label (matches `Text`). */
+  textAlign?: 'Left' | 'Center'
+  /** Modes configuration for design token resolution (cascades from `TextSegment`). */
+  modes?: Modes
+  /** Style override for the label. */
+  style?: StyleProp<TextStyle>
+  /** Number of lines to limit the label to. */
+  numberOfLines?: number
+  /** Never truncate — drops the clamp/ellipsis and lets the label overflow. See {@link Text}. */
+  disableTruncation?: boolean
+  /** Force a single non-wrapping line (implies `disableTruncation`). See {@link Text}. */
+  singleLine?: boolean
+  /** Accessibility label; defaults to the resolved text content. */
+  accessibilityLabel?: string
+  /** Accessibility hint describing what activating the link does. */
+  accessibilityHint?: string
+}
+
+const TEXT_ALIGN_MAP: Record<NonNullable<LinkProps['textAlign']>, TextStyle['textAlign']> = {
+  Left: 'left',
+  Center: 'center',
+}
+
+const DISABLED_OPACITY = 0.4
+
+/**
+ * Link — an underlined, pressable text primitive.
+ *
+ * It renders a single React Native `<Text>` (not a `Pressable`), so it flows
+ * inline and can be nested inside {@link TextSegment} exactly like a `Text`
+ * run — the React Native equivalent of an `<a>` inside a `<p>`. Font family,
+ * size, weight, line-height and letter-spacing come from the dedicated `link/*`
+ * tokens, while the colour resolves from `text/foreground` (so a link sits on
+ * the same colour as the surrounding copy). The label is always underlined.
+ *
+ * @example Standalone
+ * ```tsx
+ * <Link text="Forgot PIN?" onPress={() => navigation.navigate('ResetPin')} />
+ * ```
+ *
+ * @example Inline inside TextSegment
+ * ```tsx
+ * <TextSegment>
+ *   <Text>By continuing you agree to our </Text>
+ *   <Link onPress={openTerms}>Terms</Link>
+ *   <Text>.</Text>
+ * </TextSegment>
+ * ```
+ */
+function Link({
+  text,
+  children,
+  onPress,
+  disabled = false,
+  autolayout = 'Fill',
+  textAlign = 'Left',
+  modes = EMPTY_MODES,
+  style,
+  numberOfLines,
+  disableTruncation,
+  singleLine,
+  accessibilityLabel,
+  accessibilityHint,
+}: LinkProps) {
+  // Bindings mirror the Figma `Link` node exactly: colour from `text/foreground`
+  // (so the link matches the surrounding copy), everything else from the
+  // dedicated `link/*` tokens.
+  const foreground = getVariableByName('text/foreground', modes) ?? '#000000'
+  const fontFamily = getVariableByName('link/fontFamily', modes) ?? 'JioType Var'
+  const fontSize = getVariableByName('link/fontSize', modes) ?? 12
+  const fontWeight = getVariableByName('link/fontWeight', modes) ?? 400
+  const lineHeight = getVariableByName('link/lineHeight', modes) ?? 16
+  const letterSpacing = getVariableByName('link/letterSpacing', modes) ?? -0.5
+
+  const linkStyle: TextStyle = {
+    color: foreground as string,
+    fontFamily: fontFamily as string,
+    fontSize: fontSize as number,
+    fontWeight: String(fontWeight) as TextStyle['fontWeight'],
+    lineHeight: lineHeight as number,
+    letterSpacing: letterSpacing as number,
+    textAlign: TEXT_ALIGN_MAP[textAlign],
+    textDecorationLine: 'underline',
+    alignSelf: autolayout === 'Fill' ? 'stretch' : 'flex-start',
+    ...(disabled ? { opacity: DISABLED_OPACITY } : null),
+  }
+
+  const content =
+    children !== undefined && children !== null && children !== false
+      ? children
+      : text !== undefined
+        ? text
+        : 'Link'
+
+  const handlePress = useCallback(
+    (event: GestureResponderEvent) => {
+      if (disabled) return
+      onPress?.(event)
+    },
+    [disabled, onPress]
+  )
+
+  const { style: layoutStyle, ...truncation } = resolveTextLayout({
+    disableTruncation,
+    singleLine,
+    numberOfLines,
+  })
+
+  const resolvedLabel =
+    accessibilityLabel ?? (typeof content === 'string' ? content : undefined)
+
+  return (
+    <RNText
+      accessibilityRole="link"
+      accessibilityState={{ disabled }}
+      {...(resolvedLabel !== undefined ? { accessibilityLabel: resolvedLabel } : null)}
+      {...(accessibilityHint !== undefined ? { accessibilityHint } : null)}
+      {...(onPress !== undefined ? { onPress: handlePress } : null)}
+      disabled={disabled}
+      style={[linkStyle, style, layoutStyle]}
+      {...truncation}
+    >
+      {content}
+    </RNText>
+  )
+}
+
+export default React.memo(Link)

package/src/components/ListItem/ListItem.tsx

@@ -107,6 +107,17 @@ function resolveListItemTokens(modes: Modes): ListItemTokens {
   const paddingRight = getVariableByName('listItem/padding/right', resolvedModes) ?? 0
   const textWrapGap = (getVariableByName('listItem/text wrap', resolvedModes) ?? 0) as number
 
+  // Container surface — driven by the `List Item Style` collection
+  // (Default | Boxed | Minimal) plus `ListItem State`, `Selectable`,
+  // `Page type` and `Color Mode`. In the default style these all resolve to a
+  // transparent background / no border / 0 radius, so existing usages are
+  // visually unchanged; the "Boxed" style paints a filled, rounded, bordered
+  // surface.
+  const backgroundColor = getVariableByName('listItem/background/color', resolvedModes)
+  const borderColor = getVariableByName('listItem/border/color', resolvedModes)
+  const borderWidth = (getVariableByName('listItem/borderWidth', resolvedModes) ?? 0) as number
+  const borderRadius = (getVariableByName('listItem/radius', resolvedModes) ?? 0) as number
+
   const titleColor = getVariableByName('listItem/title/color', textModes)
   const titleFontSize = getVariableByName('listItem/title/fontSize', textModes)
   const titleLineHeight = getVariableByName('listItem/title/lineHeight', textModes)
@@ -129,6 +140,10 @@ function resolveListItemTokens(modes: Modes): ListItemTokens {
       paddingBottom: paddingBottom as number,
       paddingLeft: paddingLeft as number,
       paddingRight: paddingRight as number,
+      backgroundColor: backgroundColor as string,
+      borderColor: borderColor as string,
+      borderWidth,
+      borderRadius,
     },
     horizontalLayoutStyle: {
       flexDirection: 'row',
@@ -307,9 +322,16 @@ function ListItemImpl({
   const renderSupportContent = () => {
     if (processedSupportSlot) return processedSupportSlot
 
-    // Default support text:
-    //  - vertical layout: main text (line-broken on spaces)
-    //  - horizontal layout: secondary line (clamped to 2 lines)
+    // Default support text — ONE `<Text>` hard-clamped to 2 lines via
+    // `numberOfLines={2}`, the only mechanism React Native actually enforces
+    // on iOS/Android (native has no `white-space: nowrap` equivalent, so any
+    // style-based trick cannot stop a too-wide word from wrapping).
+    //
+    //  - vertical layout: line-broken on spaces so each word gets its own line
+    //    ("Split Payments" → "Split" / "Payments"). If a word is still wider
+    //    than the cell (or there are 3+ words), RN cuts it off at line 2 with
+    //    a trailing ellipsis instead of ever spilling onto a third line.
+    //  - horizontal layout: natural wrapping, same 2-line clamp.
     const displayText = layout === 'Vertical'
       ? supportText.replace(/ /g, '\n')
       : supportText
@@ -321,7 +343,7 @@ function ListItemImpl({
             ? [tokens.supportTextStyle, verticalSupportTextOverride]
             : tokens.supportTextStyle
         }
-        {...resolveTruncation(disableTruncation, layout === 'Horizontal' ? 2 : undefined)}
+        {...resolveTruncation(disableTruncation, 2, 'tail')}
       >
         {displayText}
       </Text>

package/src/components/MetricData/MetricData.tsx

@@ -0,0 +1,185 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import Icon from '../Icon/Icon'
+import type { Modes } from '../../design-tokens'
+
+const LINE_HEIGHT_RATIO = 1.2
+const ICON_SIZE = 18
+// Figma renders the value-row icon with no surrounding padding; the shared Icon
+// component pulls padding from `icon/padding/*` tokens, so we zero it here.
+const ICON_PADDING_RESET: ViewStyle = {
+  paddingLeft: 0,
+  paddingRight: 0,
+  paddingTop: 0,
+  paddingBottom: 0,
+}
+
+export type MetricDataProps = {
+  /** Top label (small, 12px). Hidden when omitted. */
+  title?: string
+  /**
+   * The prominent value (20px bold). Pass a string, or any node (e.g. a
+   * `MoneyValue`) to compose a richer value.
+   */
+  value?: string | React.ReactNode
+  /** Sub-label below the value (12px, muted). Hidden when omitted. */
+  caption?: string
+  /**
+   * Optional glyph shown to the left of the value. Pass a registry icon name
+   * (e.g. `'ic_card'`) or a custom node. Rendered at 18px, tinted to the value
+   * colour. Hidden when omitted.
+   */
+  icon?: string | React.ReactNode
+  /** Design-token modes for theming. */
+  modes?: Modes
+  /** Override the container styles. */
+  style?: StyleProp<ViewStyle>
+  /** Override the title text styles. */
+  titleStyle?: StyleProp<TextStyle>
+  /** Override the value text styles. */
+  valueStyle?: StyleProp<TextStyle>
+  /** Override the caption text styles. */
+  captionStyle?: StyleProp<TextStyle>
+  /**
+   * Accessibility label. Defaults to the resolved `title`, `value` and
+   * `caption` text joined together.
+   */
+  accessibilityLabel?: string
+}
+
+/**
+ * MetricData — a compact, centered metric block.
+ *
+ * Stacks a small `title`, a prominent `value` (with an optional leading
+ * `icon`), and a muted `caption`. Typography, colours, gaps and padding all
+ * resolve from the `metricdata/*` design tokens. `title`, `caption` and `icon`
+ * are optional; only `value` is shown by default.
+ *
+ * @example
+ * ```tsx
+ * <MetricData title="Balance" value="₹1,20,000" caption="as of today" />
+ * <MetricData title="Cards" value="12" icon="ic_card" caption="active" />
+ * ```
+ */
+function MetricData({
+  title,
+  value,
+  caption,
+  icon,
+  modes = EMPTY_MODES,
+  style,
+  titleStyle,
+  valueStyle,
+  captionStyle,
+  accessibilityLabel,
+}: MetricDataProps) {
+  const titleColor = (getVariableByName('metricdata/title/color', modes) as string | null) ?? '#000000'
+  const titleFontFamily = (getVariableByName('metricdata/title/fontfamily', modes) as string | null) ?? 'JioType Var'
+  const titleFontSize = (getVariableByName('metricdata/title/fontsize', modes) as number | null) ?? 12
+  const titleFontWeight = String(getVariableByName('metricdata/title/fontweight', modes) ?? 400) as TextStyle['fontWeight']
+
+  const valueColor = (getVariableByName('metricdata/value/color', modes) as string | null) ?? '#000000'
+  const valueFontFamily = (getVariableByName('metricdata/value/fontfamily', modes) as string | null) ?? 'JioType Var'
+  const valueFontSize = (getVariableByName('metricdata/value/fontsize', modes) as number | null) ?? 20
+  const valueFontWeight = String(getVariableByName('metricdata/value/fontweight', modes) ?? 700) as TextStyle['fontWeight']
+
+  const captionColor = (getVariableByName('metricdata/caption/color', modes) as string | null) ?? '#777777'
+  const captionFontFamily = (getVariableByName('metricdata/caption/fontfamily', modes) as string | null) ?? 'JioType Var'
+  const captionFontSize = (getVariableByName('metricdata/caption/fontsize', modes) as number | null) ?? 12
+  const captionFontWeight = String(getVariableByName('metricdata/caption/fontweight', modes) ?? 500) as TextStyle['fontWeight']
+
+  const gap = (getVariableByName('metricdata/gap', modes) as number | null) ?? 4
+  const valueWrapGap = (getVariableByName('metricdata/valueWrap/gap', modes) as number | null) ?? 4
+  const paddingHorizontal = (getVariableByName('metricdata/padding/horizontal', modes) as number | null) ?? 10
+  const paddingVertical = (getVariableByName('metricdata/padding/vertical', modes) as number | null) ?? 10
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+  }
+
+  const titleTextStyle: TextStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    fontWeight: titleFontWeight,
+    lineHeight: titleFontSize * LINE_HEIGHT_RATIO,
+    textAlign: 'center',
+  }
+
+  const valueTextStyle: TextStyle = {
+    color: valueColor,
+    fontFamily: valueFontFamily,
+    fontSize: valueFontSize,
+    fontWeight: valueFontWeight,
+    lineHeight: valueFontSize * LINE_HEIGHT_RATIO,
+    textAlign: 'center',
+  }
+
+  const captionTextStyle: TextStyle = {
+    color: captionColor,
+    fontFamily: captionFontFamily,
+    fontSize: captionFontSize,
+    fontWeight: captionFontWeight,
+    lineHeight: captionFontSize * LINE_HEIGHT_RATIO,
+    textAlign: 'center',
+  }
+
+  const iconNode =
+    icon == null ? null : typeof icon === 'string' ? (
+      <Icon
+        iconName={icon}
+        size={ICON_SIZE}
+        color={valueColor}
+        modes={modes}
+        style={ICON_PADDING_RESET}
+      />
+    ) : (
+      icon
+    )
+
+  const resolvedLabel =
+    accessibilityLabel ??
+    ([title, typeof value === 'string' ? value : undefined, caption]
+      .filter(Boolean)
+      .join(', ') || undefined)
+
+  return (
+    <View
+      style={[containerStyle, style]}
+      accessible
+      {...(resolvedLabel !== undefined ? { accessibilityLabel: resolvedLabel } : null)}
+    >
+      {title !== undefined && title !== '' ? (
+        <Text style={[titleTextStyle, titleStyle]}>{title}</Text>
+      ) : null}
+
+      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: valueWrapGap }}>
+        {iconNode}
+        {typeof value === 'string' ? (
+          <Text style={[valueTextStyle, valueStyle]}>{value}</Text>
+        ) : (
+          value
+        )}
+      </View>
+
+      {caption !== undefined && caption !== '' ? (
+        <Text style={[captionTextStyle, captionStyle]}>{caption}</Text>
+      ) : null}
+    </View>
+  )
+}
+
+export default React.memo(MetricData)

package/src/components/Rating/Rating.tsx

@@ -0,0 +1,174 @@
+import React, { useMemo } from 'react'
+import {
+  Pressable,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import Svg, { Path } from 'react-native-svg'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+
+/**
+ * Star glyph taken directly from the Figma `Rating` component. Filled and empty
+ * stars share this shape and differ only by fill color, so a single path keeps
+ * the row perfectly aligned.
+ */
+const STAR_PATH =
+  'M40.7187 15.3334C40.4728 14.6159 40.0426 13.9805 39.4688 13.4885C38.8951 12.9965 38.1985 12.689 37.4403 12.566L28.3018 11.1721L24.2038 2.35741C23.8759 1.66044 23.3432 1.06596 22.6875 0.635476C22.0318 0.225491 21.2737 0 20.4951 0C19.7165 0 18.9583 0.225491 18.3027 0.635476C17.647 1.04546 17.1142 1.63994 16.7864 2.35741L12.6884 11.1721L3.4679 12.566C2.73026 12.689 2.01311 12.9965 1.43939 13.4885C0.865675 13.9805 0.435385 14.6159 0.189505 15.3334C-0.0358854 16.0304 -0.0563753 16.7889 0.107545 17.5063C0.271465 18.2238 0.640285 18.9003 1.15254 19.4333L7.89374 26.362L6.29552 36.1811C6.17258 36.9396 6.27503 37.7186 6.56189 38.4156C6.84875 39.1125 7.34051 39.7275 7.9757 40.1785C8.65187 40.691 9.49196 40.978 10.3525 40.9985C11.0697 40.9985 11.7664 40.8345 12.4015 40.486L20.5771 35.9761L28.7526 40.486C29.3673 40.8345 30.0844 41.019 30.8016 40.9985C31.6621 40.9985 32.4817 40.732 33.1784 40.24C33.7931 39.789 34.2849 39.1945 34.5922 38.4771C34.8791 37.7801 34.9815 37.0011 34.8586 36.2426L33.2604 26.4235L40.0016 19.4948C40.4933 18.9413 40.8007 18.2443 40.9441 17.5063C41.0671 16.7684 40.9851 16.0099 40.7187 15.3334Z'
+const STAR_VIEWBOX = '0 0 41 41'
+
+// Fallbacks mirror the Figma `Rating Star / Output` + `Rating Star State` tokens.
+const DEFAULT_STAR_SIZE = 41
+const DEFAULT_GAP = 12
+const SELECTED_FALLBACK = '#5D00B5'
+const IDLE_FALLBACK = '#F6F3FF'
+
+/**
+ * `ratingStar/background` is state-driven: the same token resolves to the filled
+ * color when `Rating Star State = selected` and to the empty color when `idle`.
+ */
+const RATING_STATE_COLLECTION = 'Rating Star State'
+
+export type RatingProps = {
+  /** Number of filled stars. Rounded to the nearest whole star for display. */
+  value?: number
+  /** Total number of stars to render. */
+  max?: number
+  /**
+   * Called with the new rating (1..max) when a star is pressed. Providing this
+   * makes the control interactive; omit it (or set `readOnly`) for a display.
+   */
+  onChange?: (value: number) => void
+  /** Force a read-only display even when `onChange` is provided. */
+  readOnly?: boolean
+  /** Override the star edge length. Defaults to the `ratingStar/width` token. */
+  starSize?: number
+  /** Override the spacing between stars. Defaults to the `rating/gap` token. */
+  gap?: number
+  /** Design token modes forwarded to token lookups. */
+  modes?: Modes
+  /** Optional container style overrides. */
+  style?: StyleProp<ViewStyle>
+  /** Accessibility label for the whole rating. Defaults to "X of Y stars". */
+  accessibilityLabel?: string
+} & Omit<React.ComponentProps<typeof View>, 'style'>
+
+const toNumber = (value: unknown, fallback: number) => {
+  const n = typeof value === 'string' ? Number(value) : value
+  return typeof n === 'number' && Number.isFinite(n) ? n : fallback
+}
+
+function Star({
+  width,
+  height,
+  color,
+}: {
+  width: number
+  height: number
+  color: string
+}) {
+  return (
+    <Svg width={width} height={height} viewBox={STAR_VIEWBOX}>
+      <Path d={STAR_PATH} fill={color} />
+    </Svg>
+  )
+}
+
+function Rating({
+  value = 0,
+  max = 5,
+  onChange,
+  readOnly = false,
+  starSize,
+  gap,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  ...rest
+}: RatingProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () =>
+      globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+        ? EMPTY_MODES
+        : { ...globalModes, ...propModes },
+    [globalModes, propModes]
+  )
+
+  const { selectedColor, idleColor, starWidth, starHeight, resolvedGap } =
+    useMemo(() => {
+      const selected = getVariableByName('ratingStar/background', {
+        ...modes,
+        [RATING_STATE_COLLECTION]: 'selected',
+      }) as string | undefined
+      const idle = getVariableByName('ratingStar/background', {
+        ...modes,
+        [RATING_STATE_COLLECTION]: 'idle',
+      }) as string | undefined
+
+      return {
+        selectedColor: selected ?? SELECTED_FALLBACK,
+        idleColor: idle ?? IDLE_FALLBACK,
+        starWidth:
+          starSize ??
+          toNumber(
+            getVariableByName('ratingStar/width', modes),
+            DEFAULT_STAR_SIZE
+          ),
+        starHeight:
+          starSize ??
+          toNumber(
+            getVariableByName('ratingStar/height', modes),
+            DEFAULT_STAR_SIZE
+          ),
+        resolvedGap:
+          gap ?? toNumber(getVariableByName('rating/gap', modes), DEFAULT_GAP),
+      }
+    }, [modes, starSize, gap])
+
+  const total = Math.max(0, Math.round(max))
+  const filledCount = Math.max(0, Math.min(total, Math.round(value)))
+  const interactive = !readOnly && typeof onChange === 'function'
+  const label = accessibilityLabel ?? `${filledCount} of ${total} stars`
+
+  return (
+    <View
+      {...rest}
+      style={[
+        { flexDirection: 'row', alignItems: 'center', gap: resolvedGap },
+        style,
+      ]}
+      accessibilityRole={interactive ? 'adjustable' : 'image'}
+      accessibilityLabel={label}
+      accessibilityValue={
+        interactive ? { min: 0, max: total, now: filledCount } : undefined
+      }
+    >
+      {Array.from({ length: total }, (_, index) => {
+        const color = index < filledCount ? selectedColor : idleColor
+        const star = <Star width={starWidth} height={starHeight} color={color} />
+
+        if (!interactive) {
+          return <React.Fragment key={index}>{star}</React.Fragment>
+        }
+
+        return (
+          <Pressable
+            key={index}
+            onPress={() => onChange?.(index + 1)}
+            accessibilityRole="button"
+            accessibilityLabel={`Rate ${index + 1} of ${total} stars`}
+            hitSlop={8}
+          >
+            {star}
+          </Pressable>
+        )
+      })}
+    </View>
+  )
+}
+
+export default React.memo(Rating)

package/src/components/index.ts

@@ -36,6 +36,7 @@ export { default as FullscreenModal, type FullscreenModalProps } from './Fullscr
 export { default as Form, type FormProps } from './Form/Form';
 export { useFormContext } from './Form/Form';
 export { default as FormField, type FormFieldProps, type FormFieldType } from './FormField/FormField';
+export { default as ContentSheet, type ContentSheetProps } from './ContentSheet/ContentSheet';
 export { default as CircularProgressBar, type CircularProgressBarProps } from './CircularProgressBar/CircularProgressBar'
 export { default as CircularProgressBarDoted, type CircularProgressBarDotedProps } from './CircularProgressBarDoted/CircularProgressBarDoted'
 export { default as CircularRating, type CircularRatingProps } from './CircularRating/CircularRating'
@@ -45,6 +46,7 @@ export { default as ComparisonBar, type ComparisonBarProps, type ComparisonBarIt
 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 HeroSection, type HeroSectionProps } from './HeroSection/HeroSection';
 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';
@@ -52,6 +54,7 @@ export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
 export { default as Image, type ImageProps } from './Image/Image';
 export { default as LazyList } from './LazyList/LazyList';
+export { default as Link, type LinkProps } from './Link/Link';
 export { default as LinearMeter, type LinearMeterProps } from './LinearMeter/LinearMeter';
 export { default as LinearProgress, type LinearProgressProps } from './LinearProgress/LinearProgress';
 export { default as ListGroup } from './ListGroup/ListGroup';