jfs-components 0.0.72 → 0.0.73

package/lib/module/components/StatGroup/StatGroup.js

@@ -0,0 +1,123 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
+import StatItem from '../StatItem/StatItem';
+import Divider from '../Divider/Divider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_ITEMS = [{
+  label: 'Updates',
+  value: 'Daily'
+}, {
+  label: 'Data range',
+  value: '24 months'
+}, {
+  label: 'Validity',
+  value: '24 months'
+}, {
+  label: 'Stored for',
+  value: '1 month'
+}];
+
+/**
+ * StatGroup renders a card-style container holding a horizontal row of
+ * `StatItem`s separated by vertical dividers. It is typically used to surface
+ * 3–5 short metrics (e.g. validity, data range, storage) at a glance.
+ *
+ * Pass `items` for the simple data-driven case, or use the `children` slot
+ * for full control over the row contents (the component still auto-inserts
+ * vertical dividers between top-level children).
+ *
+ * @component
+ * @param {StatGroupProps} props
+ */
+function StatGroup({
+  items,
+  children,
+  modes = EMPTY_MODES,
+  style
+}) {
+  const background = getVariableByName('statGroup/background', modes) ?? '#ffffff';
+  const strokeColor = getVariableByName('statGroup/stroke/color', modes) ?? '#ebebed';
+  const strokeSize = getVariableByName('statGroup/stroke/size', modes) ?? 1;
+  const radius = getVariableByName('statGroup/radius', modes) ?? 12;
+  const paddingTop = getVariableByName('statGroup/padding/top', modes) ?? 16;
+  const paddingRight = getVariableByName('statGroup/padding/right', modes) ?? 0;
+  const paddingBottom = getVariableByName('statGroup/padding/bottom', modes) ?? 12;
+  const paddingLeft = getVariableByName('statGroup/padding/left', modes) ?? 0;
+  const containerStyle = {
+    backgroundColor: background,
+    borderColor: strokeColor,
+    borderWidth: strokeSize,
+    borderStyle: 'solid',
+    borderRadius: radius,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    overflow: 'hidden'
+  };
+  const slotChildren = renderSlotChildren({
+    items,
+    children,
+    modes
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "summary",
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'stretch',
+        width: '100%'
+      },
+      children: slotChildren
+    })
+  });
+}
+
+/**
+ * Build the row of items: render either the supplied children or the
+ * `items` array, wrap each entry so it grows equally, and inject a vertical
+ * `Divider` between siblings.
+ */
+function renderSlotChildren({
+  items,
+  children,
+  modes
+}) {
+  let nodes;
+  if (children !== undefined && children !== null) {
+    const cloned = cloneChildrenWithModes(children, modes);
+    nodes = flattenChildren(cloned);
+  } else {
+    const list = items && items.length > 0 ? items : DEFAULT_ITEMS;
+    nodes = list.map((item, index) => /*#__PURE__*/_jsx(StatItem, {
+      label: item.label,
+      value: item.value,
+      labelPosition: "Bottom",
+      modes: modes
+    }, item.key ?? `${item.label ?? 'item'}-${index}`));
+  }
+  const result = [];
+  nodes.forEach((node, index) => {
+    if (index > 0) {
+      result.push(/*#__PURE__*/_jsx(Divider, {
+        direction: "vertical",
+        modes: modes
+      }, `divider-${index}`));
+    }
+    result.push(/*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1,
+        minWidth: 0,
+        alignSelf: 'center'
+      },
+      children: node
+    }, `slot-${index}`));
+  });
+  return result;
+}
+export default StatGroup;

package/lib/module/components/StatItem/StatItem.js

@@ -4,10 +4,14 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * StatItem displays a label/value pair with the value in a large, bold style.
- * Useful for metrics, product stats, or KPI callouts.
+ * StatItem displays a label/value pair, useful for product stats, metrics
+ * or KPI callouts.
+ *
+ * Supports two layouts via the `labelPosition` variant:
+ *  - `'Top'`    — Small label above a large prominent value (default).
+ *  - `'Bottom'` — Value above a smaller label, content centered.
  *
  * @component
  * @param {StatItemProps} props
@@ -15,43 +19,69 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function StatItem({
   label = 'Purity verified by NABL',
   value = '99.99%',
+  labelPosition = 'Top',
   modes = EMPTY_MODES,
-  style
+  style,
+  labelStyle,
+  valueStyle
 }) {
-  const gap = getVariableByName('statItem/gap', modes) ?? 2;
-  const labelForeground = getVariableByName('statItem/label/foreground', modes) ?? '#1a1c1f';
+  const isBottom = labelPosition === 'Bottom';
+
+  // The Figma `Bottom` variant overrides token values locally inside the
+  // component (it is not exposed in the design-tokens JSON), so the resolved
+  // token values reflect only the `Top` variant. For the `Bottom` variant we
+  // therefore use hardcoded literals that match the Figma design, while still
+  // allowing the resolver to surface any future mode-based overrides for the
+  // `Top` variant.
+  const gap = isBottom ? 6 : getVariableByName('statItem/gap', modes) ?? 2;
+  const labelForeground = isBottom ? '#24262b' : getVariableByName('statItem/label/foreground', modes) ?? '#1a1c1f';
   const labelFontFamily = getVariableByName('statItem/label/fontFamily', modes) ?? 'JioType Var';
-  const labelFontSize = getVariableByName('statItem/label/fontSize', modes) ?? 12;
-  const labelFontWeight = getVariableByName('statItem/label/fontWeight', modes) ?? '500';
-  const labelLineHeight = getVariableByName('statItem/label/lineHeight', modes) ?? 16;
-  const valueForeground = getVariableByName('statItem/value/foreground', modes) ?? '#0d0d0f';
+  const labelFontSize = isBottom ? 10 : getVariableByName('statItem/label/fontSize', modes) ?? 12;
+  const labelFontWeightRaw = isBottom ? 400 : getVariableByName('statItem/label/fontWeight', modes) ?? 500;
+  const labelFontWeight = String(labelFontWeightRaw);
+  const labelLineHeight = isBottom ? 13 : getVariableByName('statItem/label/lineHeight', modes) ?? 16;
+  const valueForeground = isBottom ? '#141414' : getVariableByName('statItem/value/foreground', modes) ?? '#0d0d0f';
   const valueFontFamily = getVariableByName('statItem/value/fontFamily', modes) ?? 'JioType Var';
-  const valueFontSize = getVariableByName('statItem/value/fontSize', modes) ?? 26;
-  const valueFontWeight = getVariableByName('statItem/value/fontWeight', modes) ?? '900';
-  const valueLineHeight = getVariableByName('statItem/value/lineHeight', modes) ?? 26;
-  return /*#__PURE__*/_jsxs(View, {
-    style: [{
-      gap: gap
-    }, style],
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: {
-        color: labelForeground,
-        fontFamily: labelFontFamily,
-        fontSize: labelFontSize,
-        fontWeight: String(labelFontWeight),
-        lineHeight: labelLineHeight
-      },
-      children: label
-    }), /*#__PURE__*/_jsx(Text, {
-      style: {
-        color: valueForeground,
-        fontFamily: valueFontFamily,
-        fontSize: valueFontSize,
-        fontWeight: String(valueFontWeight),
-        lineHeight: valueLineHeight
-      },
-      children: value
-    })]
+  const valueFontSize = isBottom ? 12 : getVariableByName('statItem/value/fontSize', modes) ?? 26;
+  const valueFontWeightRaw = isBottom ? 500 : getVariableByName('statItem/value/fontWeight', modes) ?? 900;
+  const valueFontWeight = String(valueFontWeightRaw);
+  const valueLineHeight = isBottom ? 16 : getVariableByName('statItem/value/lineHeight', modes) ?? 26;
+  const containerStyle = {
+    gap,
+    alignItems: isBottom ? 'center' : 'flex-start',
+    justifyContent: isBottom ? 'center' : 'flex-start'
+  };
+  const labelTextStyle = {
+    color: labelForeground,
+    fontFamily: labelFontFamily,
+    fontSize: labelFontSize,
+    fontWeight: labelFontWeight,
+    lineHeight: labelLineHeight,
+    textAlign: isBottom ? 'center' : 'left'
+  };
+  const valueTextStyle = {
+    color: valueForeground,
+    fontFamily: valueFontFamily,
+    fontSize: valueFontSize,
+    fontWeight: valueFontWeight,
+    lineHeight: valueLineHeight,
+    textAlign: isBottom ? 'center' : 'left'
+  };
+  const labelNode = /*#__PURE__*/_jsx(Text, {
+    style: [labelTextStyle, labelStyle],
+    children: label
+  });
+  const valueNode = /*#__PURE__*/_jsx(Text, {
+    style: [valueTextStyle, valueStyle],
+    children: value
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    children: isBottom ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [valueNode, labelNode]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [labelNode, valueNode]
+    })
   });
 }
 export default StatItem;

package/lib/module/components/StrengthIndicator/StrengthIndicator.js

@@ -0,0 +1,152 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
+
+/**
+ * Confidence levels supported by the indicator. Mirrors the Figma `Confidence`
+ * mode collection exactly (`High` | `Medium` | `Low` | `None`).
+ */
+
+/**
+ * Accepted shape for the `confidence` prop. Either:
+ *   - one of the named levels (`'High' | 'Medium' | 'Low' | 'None'`), or
+ *   - a float in `[0, 1]`. Floats are bucketed to the nearest level using
+ *     midpoint thresholds (1/6, 1/2, 5/6) so anchor values land squarely:
+ *     `0` → `None`, `~0.33` → `Low`, `~0.66` → `Medium`, `1` → `High`.
+ *     Values outside `[0, 1]` are clamped.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const BAR_SIZES = ['small', 'medium', 'large'];
+
+/**
+ * Maps an overall confidence level to per-bar confidence modes. Bars are
+ * filled from the smallest (left) to the largest (right) as confidence
+ * rises, with each lit bar tinted at its own confidence level so the
+ * indicator visually communicates *which* level the value is at — not just
+ * how many bars are lit.
+ *
+ *   High   -> [High, High, High]       (3/3 lit, bright)
+ *   Medium -> [Medium, Medium, None]   (2/3 lit, mid intensity)
+ *   Low    -> [Low, None, None]        (1/3 lit, low intensity)
+ *   None   -> [None, None, None]       (0/3 lit)
+ *
+ * Each bar resolves its color through `getVariableByName` with its own
+ * per-bar `Confidence` mode, so the mapping survives any token updates in
+ * the Figma variables export.
+ */
+const CONFIDENCE_TO_BARS = {
+  High: ['High', 'High', 'High'],
+  Medium: ['Medium', 'Medium', 'None'],
+  Low: ['Low', 'None', 'None'],
+  None: ['None', 'None', 'None']
+};
+
+/**
+ * Fallback colors used when the `strengthIndicator/*` design tokens have not
+ * yet been imported into `Coin Variables-variables-full.json`. The `High`
+ * fallback matches the Figma export (`#25ab21`); the intermediate levels
+ * use progressively lighter greens, and `None` uses a neutral gray for
+ * unlit bars. Once the tokens land, `getVariableByName` returns the
+ * canonical value and these fallbacks are bypassed.
+ */
+const FALLBACK_BAR_COLOR = {
+  High: '#25ab21',
+  Medium: '#5cc257',
+  Low: '#a8dba2',
+  None: '#d9d9dd'
+};
+
+/**
+ * Bucket a float `[0, 1]` into the nearest named confidence level using
+ * midpoint thresholds between the four anchor values (`0`, `1/3`, `2/3`,
+ * `1`). Out-of-range values are clamped.
+ */
+function floatToConfidence(value) {
+  const clamped = Math.min(Math.max(value, 0), 1);
+  if (clamped > 5 / 6) return 'High';
+  if (clamped > 1 / 2) return 'Medium';
+  if (clamped > 1 / 6) return 'Low';
+  return 'None';
+}
+
+/**
+ * Normalize the union `confidence` prop into a single named level.
+ * Strings pass through; numbers are bucketed via {@link floatToConfidence}.
+ * Anything else (e.g. `null`/`undefined`) defaults to `'High'` to match
+ * Figma's default mode.
+ */
+function resolveConfidence(value) {
+  if (typeof value === 'number') return floatToConfidence(value);
+  if (value === 'High' || value === 'Medium' || value === 'Low' || value === 'None') {
+    return value;
+  }
+  return 'High';
+}
+
+/**
+ * StrengthIndicator renders three fixed-size, ascending bars that
+ * communicate a discrete confidence/strength level — typically used to
+ * signal model confidence, signal quality, or password strength.
+ *
+ * Sizes are intentionally fixed (matching the Figma spec): 3px-wide bars
+ * 6/9/12px tall with a 2px gap and 2px container padding.
+ *
+ * Pass a single `confidence` value (named enum *or* float `[0, 1]`); the
+ * component normalizes it to a level, maps that level to a per-bar
+ * confidence mode, and resolves each bar's color through design tokens
+ * (`strengthIndicator/bar/<size>/background`).
+ *
+ * @component
+ * @param {StrengthIndicatorProps} props
+ */
+function StrengthIndicator({
+  confidence = 'High',
+  modes = EMPTY_MODES,
+  style,
+  ...rest
+}) {
+  const containerGap = getVariableByName('strengthIndicator/container/gap', modes) ?? 2;
+  const containerPadding = getVariableByName('strengthIndicator/container/padding', modes) ?? 2;
+  const barWidth = getVariableByName('strengthIndicator/bar/width', modes) ?? 3;
+  const barRadius = getVariableByName('strengthIndicator/bar/radius', modes) ?? 1;
+  const barHeights = {
+    small: getVariableByName('strengthIndicator/bar/height/small', modes) ?? 6,
+    medium: getVariableByName('strengthIndicator/bar/height/medium', modes) ?? 9,
+    large: getVariableByName('strengthIndicator/bar/height/large', modes) ?? 12
+  };
+  const resolvedLevel = resolveConfidence(confidence);
+  const perBarConfidence = CONFIDENCE_TO_BARS[resolvedLevel];
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: containerGap,
+    padding: containerPadding
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "image",
+    accessibilityLabel: `Strength indicator: ${resolvedLevel} confidence`,
+    ...rest,
+    children: BAR_SIZES.map((size, index) => {
+      const barConfidence = perBarConfidence[index] ?? 'None';
+      const barModes = {
+        ...modes,
+        Confidence: barConfidence
+      };
+      const tokenColor = getVariableByName(`strengthIndicator/bar/${size}/background`, barModes);
+      const backgroundColor = tokenColor ?? FALLBACK_BAR_COLOR[barConfidence];
+      return /*#__PURE__*/_jsx(View, {
+        style: {
+          width: barWidth,
+          height: barHeights[size],
+          borderRadius: barRadius,
+          backgroundColor
+        }
+      }, size);
+    })
+  });
+}
+export default StrengthIndicator;

package/lib/module/components/SummaryTile/SummaryTile.js

@@ -0,0 +1,145 @@
+"use strict";
+
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Button from '../Button/Button';
+import NavArrow from '../NavArrow/NavArrow';
+import StrengthIndicator from '../StrengthIndicator/StrengthIndicator';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SummaryTile composes a title (with an inline `StrengthIndicator`), a
+ * supporting description and an action slot into a compact horizontal row,
+ * commonly used at the top of dashboard cards (e.g. "Spending — know your
+ * spending and savings"). An optional trailing chevron and tile-level
+ * `onPress` handler turn the whole row into a navigational entry point.
+ *
+ * @component
+ * @param {SummaryTileProps} props
+ */
+function SummaryTile({
+  title = 'Spending',
+  description = 'Know your spending and savings',
+  confidence = 'None',
+  chevron = false,
+  children,
+  onPress,
+  modes = EMPTY_MODES,
+  style,
+  titleStyle,
+  descriptionStyle,
+  accessibilityLabel
+}) {
+  const containerGap = getVariableByName('summaryTile/gap', modes) ?? 8;
+  const containerPadding = getVariableByName('summaryTile/padding', modes) ?? 0;
+  const contentGap = getVariableByName('summaryTile/content/gap', modes) ?? 8;
+  const titleWrapGap = getVariableByName('summaryTile/titleWrap/gap', modes) ?? 4;
+  const titleColor = getVariableByName('summaryTile/title/color', modes) ?? '#0d0d0f';
+  const titleFontFamily = getVariableByName('summaryTile/title/fontFamily', modes) ?? 'JioType Var';
+  const titleFontSize = getVariableByName('summaryTile/title/fontSize', modes) ?? 16;
+  const titleFontWeight = getVariableByName('summaryTile/title/fontWeight', modes) ?? 700;
+  const titleLineHeight = getVariableByName('summaryTile/title/lineHeight', modes) ?? 18;
+  const descriptionColor = getVariableByName('summaryTile/description/color', modes) ?? '#24262b';
+  const descriptionFontFamily = getVariableByName('summaryTile/description/fontFamily', modes) ?? 'JioType Var';
+  const descriptionFontSize = getVariableByName('summaryTile/description/fontSize', modes) ?? 12;
+  const descriptionFontWeight = getVariableByName('summaryTile/description/fontWeight', modes) ?? 500;
+  const descriptionLineHeight = getVariableByName('summaryTile/description/lineHeight', modes) ?? 16;
+  const titleTextStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    fontWeight: String(titleFontWeight),
+    lineHeight: titleLineHeight
+  };
+  const descriptionTextStyle = {
+    color: descriptionColor,
+    fontFamily: descriptionFontFamily,
+    fontSize: descriptionFontSize,
+    fontWeight: String(descriptionFontWeight),
+    lineHeight: descriptionLineHeight
+  };
+  const showIndicator = confidence !== null;
+
+  // When the entire tile is pressable, the default `Button` slot is
+  // suppressed so we don't render a `<button>` inside another `<button>`
+  // (which is invalid HTML and triggers a React hydration warning on
+  // web). Consumers can still pass an explicit non-button node via
+  // `children` if they want a visible affordance alongside `onPress`.
+  const isPressable = onPress != null;
+  const actionSlot = children !== undefined ? children !== null ? /*#__PURE__*/_jsx(_Fragment, {
+    children: cloneChildrenWithModes(children, modes)
+  }) : null : isPressable ? null : /*#__PURE__*/_jsx(Button, {
+    label: "Button",
+    modes: {
+      'AppearanceBrand': 'Secondary',
+      ...modes,
+      'Button / Size': 'S'
+    }
+  });
+  const tileContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1,
+        minWidth: 0,
+        flexDirection: 'column',
+        gap: contentGap,
+        alignItems: 'flex-start'
+      },
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: titleWrapGap,
+          width: '100%'
+        },
+        children: [title ? /*#__PURE__*/_jsx(Text, {
+          style: [titleTextStyle, titleStyle],
+          numberOfLines: 1,
+          children: title
+        }) : null, showIndicator ? /*#__PURE__*/_jsx(StrengthIndicator, {
+          confidence: confidence,
+          modes: modes
+        }) : null]
+      }), description ? /*#__PURE__*/_jsx(Text, {
+        style: [descriptionTextStyle, descriptionStyle],
+        children: description
+      }) : null]
+    }), actionSlot != null ? /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      children: actionSlot
+    }) : null, chevron ? /*#__PURE__*/_jsx(NavArrow, {
+      direction: "Forward",
+      modes: modes
+    }) : null]
+  });
+  const containerLayoutStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: containerGap,
+    padding: containerPadding,
+    width: '100%'
+  };
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: onPress,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? title,
+      style: ({
+        pressed
+      }) => [containerLayoutStyle, style, pressed ? {
+        opacity: 0.7
+      } : null],
+      children: tileContent
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerLayoutStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: tileContent
+  });
+}
+export default SummaryTile;

package/lib/module/components/index.js

@@ -7,13 +7,18 @@ export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
 export { default as Badge } from './Badge/Badge';
 export { default as BottomNav } from './BottomNav/BottomNav';
 export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
+export { default as BrandChip } from './BrandChip/BrandChip';
 export { default as Button } from './Button/Button';
 export { default as Card } from './Card/Card';
 export { default as CardAdvisory } from './CardAdvisory/CardAdvisory';
+export { default as CardBankAccount } from './CardBankAccount/CardBankAccount';
 export { default as Carousel } from './Carousel/Carousel';
 export { default as Checkbox } from './Checkbox/Checkbox';
+export { default as CheckboxItem } from './CheckboxItem/CheckboxItem';
+export { default as CheckboxGroup } from './CheckboxGroup/CheckboxGroup';
 export { default as CardFeedback } from './CardFeedback/CardFeedback';
 export { default as CardFinancialCondition } from './CardFinancialCondition/CardFinancialCondition';
+export { default as CardInsight } from './CardInsight/CardInsight';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
@@ -26,6 +31,9 @@ export { default as FormField } from './FormField/FormField';
 export { default as CircularProgressBar } from './CircularProgressBar/CircularProgressBar';
 export { default as CircularProgressBarDoted } from './CircularProgressBarDoted/CircularProgressBarDoted';
 export { default as CircularRating } from './CircularRating/CircularRating';
+export { default as CoverageRing } from './CoverageRing/CoverageRing';
+export { default as CoverageBarComparison } from './CoverageBarComparison/CoverageBarComparison';
+export { default as MonthlyStatusGrid, CalendarGlyph } from './MonthlyStatusGrid/MonthlyStatusGrid';
 export { default as Gauge } from './Gauge/Gauge';
 export { default as HoldingsCard } from './HoldingsCard/HoldingsCard';
 export { default as HStack } from './HStack/HStack';
@@ -34,10 +42,12 @@ export { default as IconCapsule } from './IconCapsule/IconCapsule';
 export { default as Image } from './Image/Image';
 export { default as LazyList } from './LazyList/LazyList';
 export { default as LinearMeter } from './LinearMeter/LinearMeter';
+export { default as LinearProgress } from './LinearProgress/LinearProgress';
 export { default as ListGroup } from './ListGroup/ListGroup';
 export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard } from './MediaCard/MediaCard';
 export { default as MerchantProfile } from './MerchantProfile/MerchantProfile';
+export { default as MetricLegendItem } from './MetricLegendItem/MetricLegendItem';
 export { default as MoneyValue } from './MoneyValue/MoneyValue';
 export { default as NoteInput } from './NoteInput/NoteInput';
 export { default as Nudge } from './Nudge/Nudge';
@@ -61,6 +71,7 @@ export { default as VStack } from './VStack/VStack';
 export { default as ChipGroup } from './ChipGroup/ChipGroup';
 export { default as EmptyState } from './EmptyState/EmptyState';
 export { default as Accordion } from './Accordion/Accordion';
+export { default as AccordionCheckbox } from './AccordionCheckbox/AccordionCheckbox';
 export { default as ActionTile } from './ActionTile/ActionTile';
 export { default as Balance } from './Balance/Balance';
 export { default as ButtonGroup } from './ButtonGroup/ButtonGroup';
@@ -77,6 +88,11 @@ export { default as Radio } from './Radio/Radio';
  */
 export { default as RadioButton } from './RadioButton/RadioButton';
 export { default as RechargeCard } from './RechargeCard/RechargeCard';
+export { default as SavingsGoalSummary } from './SavingsGoalSummary/SavingsGoalSummary';
+export { default as DonutChart, DonutChartSegment } from './DonutChart/DonutChart';
+export { default as DonutChartSummary } from './DonutChartSummary/DonutChartSummary';
+export { default as RangeTrack } from './RangeTrack/RangeTrack';
+export { default as SegmentedTrack, SegmentedTrackSegment } from './SegmentedTrack/SegmentedTrack';
 export { default as Tabs } from './Tabs/Tabs';
 export { default as TabItem } from './Tabs/TabItem';
 export { default as Toast } from './Toast/Toast';
@@ -86,11 +102,15 @@ export { default as AmountInput } from './AmountInput/AmountInput';
 export { default as Popup } from './Popup/Popup';
 export { default as PortfolioHero } from './PortfolioHero/PortfolioHero';
 export { default as ProductLabel } from './ProductLabel/ProductLabel';
+export { default as ProductOverview } from './ProductOverview/ProductOverview';
 export { default as ProgressBadge } from './ProgressBadge/ProgressBadge';
 export { default as SwappableAmount } from './SwappableAmount/SwappableAmount';
-export { default as OTP } from './OTP/OTP';
+export { default as OTP, OTPResend, useOtpResend } from './OTP/OTP';
 export { default as PaymentFeedback } from './PaymentFeedback/PaymentFeedback';
 export { default as StatItem } from './StatItem/StatItem';
+export { default as StatGroup } from './StatGroup/StatGroup';
+export { default as StrengthIndicator } from './StrengthIndicator/StrengthIndicator';
+export { default as SummaryTile } from './SummaryTile/SummaryTile';
 export { default as Text } from './Text/Text';
 export { default as SegmentedControl } from './SegmentedControl/SegmentedControl';
 export { default as Toggle } from './Toggle/Toggle';