jfs-components 0.1.2 → 0.1.12

package/src/components/TextInput/TextInput.tsx

@@ -1,8 +1,8 @@
-import React, { useRef, useState } from 'react'
+import React, { forwardRef, useRef, useState } from 'react'
 import { Platform, Pressable, View, TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextInputProps as RNTextInputProps, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, mergeRefs } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 /**
@@ -112,7 +112,7 @@ type TextInputProps = {
   accessibilityHint?: string;
 } & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
 
-function TextInput({
+const TextInputBase = forwardRef<RNTextInput, TextInputProps>(function TextInput({
   placeholder = '',
   value = '',
   onChangeText,
@@ -127,7 +127,7 @@ function TextInput({
   accessibilityLabel,
   accessibilityHint,
   ...rest
-}: TextInputProps) {
+}: TextInputProps, ref: React.Ref<RNTextInput>) {
   // Track focus state to hide placeholder when focused
   const [isFocused, setIsFocused] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
@@ -182,7 +182,13 @@ function TextInput({
     flex: 1,
     color: textColor,
     fontSize,
-    lineHeight,
+    // iOS-only quirk: a single-line RNTextInput with an explicit `lineHeight`
+    // larger than `fontSize` puts all the extra space ABOVE the glyphs, so the
+    // text/placeholder sits below center (iOS native font-metrics bug — see
+    // facebook/react-native#39145 / #28012). The container centers via
+    // `alignItems: 'center'` + `minHeight`, so omit lineHeight on iOS
+    // (UITextField centers natively) and keep it on Android/Web where it's fine.
+    ...(Platform.OS === 'ios' ? null : { lineHeight }),
     fontFamily,
     fontWeight,
     padding: 0,
@@ -251,7 +257,7 @@ function TextInput({
         </View>
       )}
       <RNTextInput
-        ref={inputRef}
+        ref={mergeRefs(inputRef, ref)}
         accessibilityLabel={undefined}
         accessibilityHint={accessibilityHint}
         placeholder={displayPlaceholder}
@@ -290,7 +296,7 @@ function TextInput({
   }
 
   return <View style={containerStyleArray}>{inner}</View>
-}
+})
 
 /**
  * TextInput.Search component that mirrors the Figma "textInput.search" component.
@@ -325,7 +331,7 @@ type TextInputSearchProps = {
   onBlur?: (e: any) => void;
 } & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
 
-function TextInputSearch({
+const TextInputSearch = forwardRef<RNTextInput, TextInputSearchProps>(function TextInputSearch({
   placeholder = 'Search',
   value = '',
   onChangeText,
@@ -338,7 +344,7 @@ function TextInputSearch({
   onFocus,
   onBlur,
   ...rest
-}: TextInputSearchProps) {
+}: TextInputSearchProps, ref: React.Ref<RNTextInput>) {
   // Resolve icon tokens for default search icon
   const iconColor = getVariableByName('textInput/icon/color', modes) || '#24262b'
   const iconSize = getVariableByName('textInput/icon/size', modes) || 18
@@ -379,10 +385,14 @@ function TextInputSearch({
     textInputProps.accessibilityHint = accessibilityHint
   }
 
-  return <TextInput {...(textInputProps as TextInputProps)} />
-}
+  return <TextInput ref={ref} {...(textInputProps as TextInputProps)} />
+})
 
-// Attach Search as a property of TextInput using namespace pattern
+// Attach Search as a property of TextInput using namespace pattern. The base
+// component is created via forwardRef, so we compose the static onto a typed
+// alias to keep `TextInput.Search` strongly typed.
+type TextInputComponent = typeof TextInputBase & { Search: typeof TextInputSearch }
+const TextInput = TextInputBase as TextInputComponent
 TextInput.Search = TextInputSearch
 
 export default TextInput

package/src/components/TextSegment/TextSegment.tsx

@@ -0,0 +1,173 @@
+import React, { useMemo } from 'react'
+import { Text as RNText, type TextStyle, type StyleProp } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+
+/**
+ * A single coloured run inside a {@link TextSegment}. Each run can carry its own
+ * `modes`, so individual fragments of the same paragraph can resolve different
+ * design tokens (most commonly a different `text/foreground` colour) while still
+ * flowing — and wrapping — inline as one continuous line of text.
+ */
+export type TextSegmentRun = {
+  /** The text for this run. Include trailing/leading spaces yourself when you want spacing between runs (inline text has no gap concept). */
+  text: string
+  /**
+   * Per-run mode overrides. Merged on top of the parent `TextSegment` modes, so
+   * a run only needs to specify what differs (e.g. `{ 'Text Appearance': 'Primary' }`
+   * to recolour just that fragment). Everything else is inherited.
+   */
+  modes?: Modes
+  /** Optional per-run style override applied last, on top of the token-resolved style. */
+  style?: StyleProp<TextStyle>
+}
+
+export type TextSegmentProps = {
+  /**
+   * Declarative, data-driven way to compose a multi-colour string. Each entry
+   * becomes an inline run. This is the simplest API when the segments are known
+   * up front:
+   *
+   * ```tsx
+   * <TextSegment segments={[
+   *   { text: 'Upsell message ' },
+   *   { text: 'JioFinance+', modes: { 'Text Appearance': 'Primary' } },
+   * ]} />
+   * ```
+   *
+   * When both `segments` and `children` are provided, `children` win.
+   */
+  segments?: TextSegmentRun[]
+  /**
+   * Compositional alternative to {@link TextSegmentProps.segments}. Pass library
+   * `Text` elements (or plain strings) as children and they are rendered nested
+   * inside the same paragraph so they wrap together. The parent `modes` cascade
+   * down to every child via `cloneChildrenWithModes`, and each child may still
+   * override with its own `modes`:
+   *
+   * ```tsx
+   * <TextSegment>
+   *   <Text>Upsell message </Text>
+   *   <Text modes={{ 'Text Appearance': 'Primary' }}>JioFinance+</Text>
+   * </TextSegment>
+   * ```
+   */
+  children?: React.ReactNode
+  /** Horizontal alignment of the whole paragraph. */
+  textAlign?: 'Left' | 'Center'
+  /** Clamp the paragraph to this many lines (truncates with an ellipsis). Applies to the whole composed line, not per-run. */
+  numberOfLines?: number
+  /**
+   * When `true`, disables truncation entirely: the trailing ellipsis (`…`) is
+   * never shown and the `numberOfLines` clamp is ignored, so the paragraph
+   * wraps to as many lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
+  /** Mode configuration used for the base style and cascaded to every run/child. */
+  modes?: Modes
+  /** Style override applied to the outer paragraph (e.g. width constraints to force wrapping). */
+  style?: StyleProp<TextStyle>
+}
+
+const TEXT_ALIGN_MAP: Record<NonNullable<TextSegmentProps['textAlign']>, TextStyle['textAlign']> = {
+  Left: 'left',
+  Center: 'center',
+}
+
+/**
+ * Resolves the `text/*` design tokens for a given modes object into an RN
+ * `TextStyle`. Shared by the outer paragraph and every inline run so a run that
+ * only overrides colour still inherits the family/size/weight/spacing.
+ */
+function resolveTextStyle(modes: Modes): TextStyle {
+  return {
+    color: (getVariableByName('text/foreground', modes) ?? '#000000') as string,
+    fontFamily: (getVariableByName('text/fontFamily', modes) ?? 'JioType') as string,
+    fontSize: (getVariableByName('text/fontSize', modes) ?? 14) as number,
+    fontWeight: String(getVariableByName('text/fontWeight', modes) ?? '500') as TextStyle['fontWeight'],
+    lineHeight: (getVariableByName('text/lineHeight', modes) ?? 20) as number,
+    letterSpacing: (getVariableByName('text/letterSpacing', modes) ?? -0.5) as number,
+  }
+}
+
+/**
+ * TextSegment — composes several differently-styled text runs into a single
+ * paragraph that wraps as one continuous line.
+ *
+ * On the web you would reach for `<span>`s inside a `<p>`; the React Native
+ * equivalent is nesting `<Text>` inside a parent `<Text>`. That nesting is the
+ * whole trick: sibling `<View>`s would lay out as flex blocks and break onto
+ * rigid rows, but nested `<Text>` nodes flow inline and wrap naturally at word
+ * boundaries — exactly like a real paragraph — while each nested run keeps its
+ * own colour/weight resolved from its own `modes`.
+ *
+ * Two equivalent ways to author content:
+ *  - **`segments` prop** — declarative array of `{ text, modes }` runs.
+ *  - **`children`** — pass library `Text` elements (or strings); the parent
+ *    `modes` cascade down and each child may override its own.
+ *
+ * @example Data-driven
+ * ```tsx
+ * <TextSegment
+ *   segments={[
+ *     { text: 'Upsell message ' },
+ *     { text: 'JioFinance+', modes: { 'Text Appearance': 'Primary' } },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Compositional
+ * ```tsx
+ * <TextSegment numberOfLines={2}>
+ *   <Text>Pay with </Text>
+ *   <Text modes={{ 'Text Appearance': 'Primary' }}>JioFinance+</Text>
+ *   <Text> and earn rewards on every transaction.</Text>
+ * </TextSegment>
+ * ```
+ */
+function TextSegment({
+  segments,
+  children,
+  textAlign = 'Left',
+  numberOfLines,
+  disableTruncation,
+  modes = EMPTY_MODES,
+  style,
+}: TextSegmentProps) {
+  const baseStyle = useMemo<TextStyle>(
+    () => ({ ...resolveTextStyle(modes), textAlign: TEXT_ALIGN_MAP[textAlign] }),
+    [modes, textAlign]
+  )
+
+  // children win over `segments` so the compositional API can always override.
+  const hasChildren = children !== undefined && children !== null && children !== false
+
+  const renderedSegments = useMemo(() => {
+    if (hasChildren || !segments?.length) return null
+    return segments.map((run, index) => {
+      // Parent modes first, then the run's own modes override them — mirrors the
+      // merge order used by `cloneChildrenWithModes` for the children API.
+      const runModes = run.modes ? { ...modes, ...run.modes } : modes
+      const runStyle = run.modes ? resolveTextStyle(runModes) : undefined
+      return (
+        <RNText key={index} style={[runStyle, run.style]}>
+          {run.text}
+        </RNText>
+      )
+    })
+  }, [segments, hasChildren, modes])
+
+  // The cascade: every child (and its descendants) receives the parent modes so
+  // nested library `Text` runs resolve their tokens against the same baseline,
+  // while still honouring any per-child `modes` override.
+  const content = hasChildren ? cloneChildrenWithModes(children, modes) : renderedSegments
+
+  return (
+    <RNText style={[baseStyle, style]} {...resolveTruncation(disableTruncation, numberOfLines)}>
+      {content}
+    </RNText>
+  )
+}
+
+export default React.memo(TextSegment)

package/src/components/ThreadHero/ThreadHero.tsx

@@ -1,7 +1,7 @@
 import React, { isValidElement, cloneElement, type ReactNode } from 'react'
 import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 export type ThreadHeroProps = {
@@ -17,6 +17,12 @@ export type ThreadHeroProps = {
     modes?: Modes
     /** Optional container style */
     style?: ViewStyle
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 /**
@@ -29,6 +35,7 @@ export default function ThreadHero({
     renderAvatar,
     modes = EMPTY_MODES,
     style,
+    disableTruncation,
 }: ThreadHeroProps) {
     // Container Gaps
     const containerGap = Number(getVariableByName('threadHero/gap', modes)) || 8
@@ -111,13 +118,13 @@ export default function ThreadHero({
                 {avatarContent}
                 {title ? <Text style={titleStyle}>{title}</Text> : null}
                 {subtitle ? (
-                    <Text style={subtitleStyle} numberOfLines={1} ellipsizeMode="tail">
+                    <Text style={subtitleStyle} {...resolveTruncation(disableTruncation, 1, 'tail')}>
                         {subtitle}
                     </Text>
                 ) : null}
             </View>
             {caption ? (
-                <Text style={captionStyle} numberOfLines={1} ellipsizeMode="tail">
+                <Text style={captionStyle} {...resolveTruncation(disableTruncation, 1, 'tail')}>
                     {caption}
                 </Text>
             ) : null}

package/src/components/Title/Title.tsx

@@ -2,7 +2,7 @@ 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 { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 export type TitleProps = {
@@ -17,6 +17,12 @@ export type TitleProps = {
   /** Optional style overrides for the subtitle text. */
   subtitleStyle?: StyleProp<TextStyle>;
   numberOfLines?: number;
+  /**
+   * When `true`, disables truncation for both the title and subtitle: the
+   * trailing ellipsis (`…`) is never shown and the `numberOfLines` clamp is
+   * ignored, so the text wraps fully even when horizontal space is tight.
+   */
+  disableTruncation?: boolean;
   accessibilityLabel?: string;
   accessibilityHint?: string;
 } & React.ComponentProps<typeof View>;
@@ -35,6 +41,7 @@ function Title({
   textStyle,
   subtitleStyle,
   numberOfLines,
+  disableTruncation,
   accessibilityLabel,
   accessibilityHint,
   ...rest
@@ -128,7 +135,7 @@ function Title({
     >
       <Text
         style={[titleTextStyle, textStyle]}
-        numberOfLines={numberOfLines !== undefined ? numberOfLines : 1}
+        {...resolveTruncation(disableTruncation, numberOfLines !== undefined ? numberOfLines : 1)}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"
       >

package/src/components/Toast/Toast.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, type StyleProp, type ViewStyle } from 'react-native'
 import Animated, { FadeIn, FadeOut, SlideInDown, SlideInUp } from 'react-native-reanimated'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { closeToast, type ToastPlacement } from './useToast'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 export interface ToastProps {
@@ -14,6 +14,12 @@ export interface ToastProps {
   modes?: Modes | undefined
   placement?: ToastPlacement | undefined
   style?: StyleProp<ViewStyle> | undefined
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
 }
 
 const ANIMATION_DURATION = 250
@@ -26,6 +32,7 @@ function Toast({
   modes = EMPTY_MODES,
   placement = 'bottom',
   style,
+  disableTruncation,
 }: ToastProps) {
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
@@ -88,7 +95,7 @@ function Toast({
       accessibilityRole="alert"
       accessibilityLiveRegion="assertive"
     >
-      <Text style={textStyle} numberOfLines={2}>
+      <Text style={textStyle} {...resolveTruncation(disableTruncation, 2)}>
         {title}
       </Text>
     </Animated.View>

package/src/components/TransactionBubble/TransactionBubble.tsx

@@ -4,7 +4,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import MoneyValue from '../MoneyValue/MoneyValue'
 import TransactionStatus from '../TransactionStatus/TransactionStatus'
 import NavArrow from '../NavArrow/NavArrow'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 import type { Modes } from '../../design-tokens'
 
@@ -23,6 +23,12 @@ export type TransactionBubbleProps = {
   accessibilityLabel?: string
   accessibilityHint?: string
   webAccessibilityProps?: WebAccessibilityProps
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
 } & Omit<PressableProps, 'style' | 'children' | 'onPress'>
 
 /**
@@ -56,6 +62,7 @@ function TransactionBubble({
   accessibilityLabel,
   accessibilityHint,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }: TransactionBubbleProps) {
   const resolvedModes = {
@@ -122,7 +129,7 @@ function TransactionBubble({
   const mainContent = (
     <View style={{ gap: bubbleGap }}>
       <View style={{ gap: moneyValueWrapGap }}>
-        <Text style={descriptionStyle} numberOfLines={1}>{description}</Text>
+        <Text style={descriptionStyle} {...resolveTruncation(disableTruncation, 1)}>{description}</Text>
         <MoneyValue value={value} currency={currency} modes={resolvedModes} />
       </View>
       {processedChildren}

package/src/components/TransactionStatus/TransactionStatus.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
 import { Svg, Path } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 // --- Internal Icon Component ---
@@ -48,6 +48,12 @@ export type TransactionStatusProps = {
     modes?: Modes
     /** Optional container style */
     style?: ViewStyle
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 /**
@@ -58,6 +64,7 @@ export default function TransactionStatus({
     date = '20 Mar 2025',
     modes = EMPTY_MODES,
     style,
+    disableTruncation,
 }: TransactionStatusProps) {
     const gap = Number(getVariableByName('transactionBubble/statusWrap/gap', modes)) || 4
     // Using 'transactionStatus' tokens for text
@@ -88,7 +95,7 @@ export default function TransactionStatus({
     return (
         <View style={containerStyle}>
             <StatusIcon width={iconSize} height={iconSize} color={iconColor} modes={modes} />
-            <Text style={textStyle} numberOfLines={1}>
+            <Text style={textStyle} {...resolveTruncation(disableTruncation, 1)}>
                 {status} · {date}
             </Text>
         </View>

package/src/components/UpiHandle/UpiHandle.tsx

@@ -13,7 +13,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import MediaSource, { type UnifiedSource } from '../../utils/MediaSource'
 import Icon from '../../icons/Icon'
 import type { Modes } from '../../design-tokens'
@@ -52,6 +52,12 @@ type UpiHandleProps = {
   onPress?: () => void;
   onClick?: () => void;
   disabled?: boolean;
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
 
 interface UpiHandleTokens {
@@ -152,6 +158,7 @@ function UpiHandle({
   onPress,
   onClick,
   disabled,
+  disableTruncation,
   // accessibilityLabel is accepted on the type for API back-compat; the
   // wrapper renders `accessibilityLabel={undefined}` because the inner Text
   // already carries the label.
@@ -240,8 +247,7 @@ function UpiHandle({
       </View>
       <Text
         style={tokens.labelStyle}
-        numberOfLines={1}
-        ellipsizeMode="tail"
+        {...resolveTruncation(disableTruncation, 1, 'tail')}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"
       >

package/src/components/index.ts

@@ -4,7 +4,8 @@ export { default as Attached, type AttachedProps, type AttachedPosition } from '
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
-export { default as Badge } from './Badge/Badge';
+export { default as Badge, type BadgeProps, type BadgeType } from './Badge/Badge';
+export { default as BenefitCard, type BenefitCardProps, type BenefitCardItem } from './BenefitCard/BenefitCard';
 export { default as BottomNav } from './BottomNav/BottomNav';
 export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
 export { default as BrandChip, type BrandChipProps } from './BrandChip/BrandChip';
@@ -20,13 +21,14 @@ export { default as CheckboxGroup, type CheckboxGroupProps } from './CheckboxGro
 export { default as CardFeedback, type CardFeedbackProps } from './CardFeedback/CardFeedback';
 export { default as CardFinancialCondition, type CardFinancialConditionProps } from './CardFinancialCondition/CardFinancialCondition';
 export { default as CardInsight, type CardInsightProps } from './CardInsight/CardInsight';
+export { default as CcCard, type CcCardProps, type CcCardBadge, type CcCardListItem } from './CcCard/CcCard';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
 export { default as Drawer, type DrawerProps, type DrawerHandle } from './Drawer/Drawer';
 export { default as Dropdown, DropdownItem, type DropdownProps, type DropdownItemProps } from './Dropdown/Dropdown';
-export { default as DropdownInput, type DropdownInputProps, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
+export { default as DropdownInput, type DropdownInputProps, type DropdownInputHandle, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
 export { default as SuggestiveSearch, type SuggestiveSearchProps, type SuggestiveSearchOption, type SuggestiveSearchOptionValue, type SuggestiveSearchItem } from './SuggestiveSearch/SuggestiveSearch';
-export { default as CardCTA, type CardCTAProps, type CardCTAType } from './CardCTA/CardCTA'
+export { default as CardCTA, type CardCTAProps, type CardCTAType, type CardCTATypeInput } from './CardCTA/CardCTA'
 export { default as DebitCard, type DebitCardProps } from './DebitCard/DebitCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
 export { default as FullscreenModal, type FullscreenModalProps } from './FullscreenModal/FullscreenModal';
@@ -38,6 +40,7 @@ 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 ComparisonBar, type ComparisonBarProps, type ComparisonBarItem } from './ComparisonBar/ComparisonBar'
 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';
@@ -67,7 +70,13 @@ export { default as Overlay, type OverlayProps } from './Overlay/Overlay';
 export { default as Title, type TitleProps } from './Title/Title';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
 export { default as Section } from './Section/Section';
+export { default as Slider, type SliderProps, type SliderHandle } from './Slider/Slider';
 export { default as Slot, type SlotProps, type SlotLayoutDirection } from './Slot/Slot';
+export {
+    default as Stack,
+    type StackProps,
+    type StackLayoutDirection,
+} from './Stack/Stack';
 export { default as Spinner, type SpinnerProps, type SpinnerColors } from './Spinner/Spinner';
 export { default as Stepper, type StepperProps } from './Stepper/Stepper';
 export { Step, type StepProps, type StepStatus } from './Stepper/Step';
@@ -126,12 +135,32 @@ export { default as ToastProvider, type ToastProviderProps } from './Toast/Toast
 export { useToast, addToast, closeToast, closeAll, type ToastOptions, type ToastEntry, type ToastPlacement } from './Toast/useToast';
 export { default as AmountInput, type AmountInputProps } from './AmountInput/AmountInput';
 export { default as PageHero, type PageHeroProps } from './PageHero/PageHero';
+export { default as PdpCcCard, type PdpCcCardProps, type PdpCcCardMetric } from './PdpCcCard/PdpCcCard';
 export { default as Popup, type PopupProps, type PopupRef } from './Popup/Popup';
 export { default as PortfolioHero, type PortfolioHeroProps } from './PortfolioHero/PortfolioHero';
 export { default as PlanComparisonCard, type PlanComparisonCardProps, type PlanComparisonColumn, type PlanComparisonRow, type PlanComparisonCellValue } from './PlanComparisonCard/PlanComparisonCard';
+export { default as CompareTable, type CompareTableProps, type CompareTableColumn, type CompareTableRow, type CompareTableCellValue, type CompareTableSection } from './CompareTable/CompareTable';
+export {
+    default as Table,
+    TableHeader,
+    TableHeaderCell,
+    TableBody,
+    TableRow,
+    TableCell,
+    type TableProps,
+    type TableColumn,
+    type TableCellAlign,
+    type TableHeaderProps,
+    type TableHeaderCellProps,
+    type TableBodyProps,
+    type TableRowProps,
+    type TableCellProps,
+} from './Table/Table';
 export { default as PoweredByLabel, type PoweredByLabelProps } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel, type ProductLabelProps } from './ProductLabel/ProductLabel';
+export { default as ProductMerchandisingCard, type ProductMerchandisingCardProps } from './ProductMerchandisingCard/ProductMerchandisingCard';
 export { default as ProductOverview, type ProductOverviewProps, type ProductOverviewStat } from './ProductOverview/ProductOverview';
+export { default as ProjectionMarker, type ProjectionMarkerProps } from './ProjectionMarker/ProjectionMarker';
 export { default as ProgressBadge, type ProgressBadgeProps } from './ProgressBadge/ProgressBadge';
 export { default as SwappableAmount, type SwappableAmountProps } from './SwappableAmount/SwappableAmount';
 export {
@@ -152,5 +181,6 @@ export { default as StrengthIndicator, type StrengthIndicatorProps, type Strengt
 export { default as SummaryTile, type SummaryTileProps } from './SummaryTile/SummaryTile';
 export { default as TestimonialsCard, type TestimonialsCardProps } from './TestimonialsCard/TestimonialsCard';
 export { default as Text, type TextProps } from './Text/Text';
+export { default as TextSegment, type TextSegmentProps, type TextSegmentRun } from './TextSegment/TextSegment';
 export { default as SegmentedControl, type SegmentedControlProps, type SegmentedControlItem } from './SegmentedControl/SegmentedControl';
 export { default as Toggle, type ToggleProps } from './Toggle/Toggle';