jfs-components 0.0.71 → 0.0.73

package/lib/commonjs/components/StrengthIndicator/StrengthIndicator.js

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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.
+ */
+
+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 = _reactUtils.EMPTY_MODES,
+  style,
+  ...rest
+}) {
+  const containerGap = (0, _figmaVariablesResolver.getVariableByName)('strengthIndicator/container/gap', modes) ?? 2;
+  const containerPadding = (0, _figmaVariablesResolver.getVariableByName)('strengthIndicator/container/padding', modes) ?? 2;
+  const barWidth = (0, _figmaVariablesResolver.getVariableByName)('strengthIndicator/bar/width', modes) ?? 3;
+  const barRadius = (0, _figmaVariablesResolver.getVariableByName)('strengthIndicator/bar/radius', modes) ?? 1;
+  const barHeights = {
+    small: (0, _figmaVariablesResolver.getVariableByName)('strengthIndicator/bar/height/small', modes) ?? 6,
+    medium: (0, _figmaVariablesResolver.getVariableByName)('strengthIndicator/bar/height/medium', modes) ?? 9,
+    large: (0, _figmaVariablesResolver.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__*/(0, _jsxRuntime.jsx)(_reactNative.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 = (0, _figmaVariablesResolver.getVariableByName)(`strengthIndicator/bar/${size}/background`, barModes);
+      const backgroundColor = tokenColor ?? FALLBACK_BAR_COLOR[barConfidence];
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: barWidth,
+          height: barHeights[size],
+          borderRadius: barRadius,
+          backgroundColor
+        }
+      }, size);
+    })
+  });
+}
+var _default = exports.default = StrengthIndicator;

package/lib/commonjs/components/SummaryTile/SummaryTile.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _NavArrow = _interopRequireDefault(require("../NavArrow/NavArrow"));
+var _StrengthIndicator = _interopRequireDefault(require("../StrengthIndicator/StrengthIndicator"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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 = _reactUtils.EMPTY_MODES,
+  style,
+  titleStyle,
+  descriptionStyle,
+  accessibilityLabel
+}) {
+  const containerGap = (0, _figmaVariablesResolver.getVariableByName)('summaryTile/gap', modes) ?? 8;
+  const containerPadding = (0, _figmaVariablesResolver.getVariableByName)('summaryTile/padding', modes) ?? 0;
+  const contentGap = (0, _figmaVariablesResolver.getVariableByName)('summaryTile/content/gap', modes) ?? 8;
+  const titleWrapGap = (0, _figmaVariablesResolver.getVariableByName)('summaryTile/titleWrap/gap', modes) ?? 4;
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('summaryTile/title/color', modes) ?? '#0d0d0f';
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('summaryTile/title/fontFamily', modes) ?? 'JioType Var';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('summaryTile/title/fontSize', modes) ?? 16;
+  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('summaryTile/title/fontWeight', modes) ?? 700;
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('summaryTile/title/lineHeight', modes) ?? 18;
+  const descriptionColor = (0, _figmaVariablesResolver.getVariableByName)('summaryTile/description/color', modes) ?? '#24262b';
+  const descriptionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('summaryTile/description/fontFamily', modes) ?? 'JioType Var';
+  const descriptionFontSize = (0, _figmaVariablesResolver.getVariableByName)('summaryTile/description/fontSize', modes) ?? 12;
+  const descriptionFontWeight = (0, _figmaVariablesResolver.getVariableByName)('summaryTile/description/fontWeight', modes) ?? 500;
+  const descriptionLineHeight = (0, _figmaVariablesResolver.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__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _reactUtils.cloneChildrenWithModes)(children, modes)
+  }) : null : isPressable ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+    label: "Button",
+    modes: {
+      'AppearanceBrand': 'Secondary',
+      ...modes,
+      'Button / Size': 'S'
+    }
+  });
+  const tileContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flex: 1,
+        minWidth: 0,
+        flexDirection: 'column',
+        gap: contentGap,
+        alignItems: 'flex-start'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: titleWrapGap,
+          width: '100%'
+        },
+        children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [titleTextStyle, titleStyle],
+          numberOfLines: 1,
+          children: title
+        }) : null, showIndicator ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_StrengthIndicator.default, {
+          confidence: confidence,
+          modes: modes
+        }) : null]
+      }), description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [descriptionTextStyle, descriptionStyle],
+        children: description
+      }) : null]
+    }), actionSlot != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      children: actionSlot
+    }) : null, chevron ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavArrow.default, {
+      direction: "Forward",
+      modes: modes
+    }) : null]
+  });
+  const containerLayoutStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: containerGap,
+    padding: containerPadding,
+    width: '100%'
+  };
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      onPress: onPress,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? title,
+      style: ({
+        pressed
+      }) => [containerLayoutStyle, style, pressed ? {
+        opacity: 0.7
+      } : null],
+      children: tileContent
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerLayoutStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: tileContent
+  });
+}
+var _default = exports.default = SummaryTile;

package/lib/commonjs/components/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "Accordion", {
     return _Accordion.default;
   }
 });
+Object.defineProperty(exports, "AccordionCheckbox", {
+  enumerable: true,
+  get: function () {
+    return _AccordionCheckbox.default;
+  }
+});
 Object.defineProperty(exports, "ActionFooter", {
   enumerable: true,
   get: function () {
@@ -69,6 +75,12 @@ Object.defineProperty(exports, "BottomNavItem", {
     return _BottomNavItem.default;
   }
 });
+Object.defineProperty(exports, "BrandChip", {
+  enumerable: true,
+  get: function () {
+    return _BrandChip.default;
+  }
+});
 Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function () {
@@ -81,6 +93,12 @@ Object.defineProperty(exports, "ButtonGroup", {
     return _ButtonGroup.default;
   }
 });
+Object.defineProperty(exports, "CalendarGlyph", {
+  enumerable: true,
+  get: function () {
+    return _MonthlyStatusGrid.CalendarGlyph;
+  }
+});
 Object.defineProperty(exports, "Card", {
   enumerable: true,
   get: function () {
@@ -93,6 +111,12 @@ Object.defineProperty(exports, "CardAdvisory", {
     return _CardAdvisory.default;
   }
 });
+Object.defineProperty(exports, "CardBankAccount", {
+  enumerable: true,
+  get: function () {
+    return _CardBankAccount.default;
+  }
+});
 Object.defineProperty(exports, "CardCTA", {
   enumerable: true,
   get: function () {
@@ -105,6 +129,18 @@ Object.defineProperty(exports, "CardFeedback", {
     return _CardFeedback.default;
   }
 });
+Object.defineProperty(exports, "CardFinancialCondition", {
+  enumerable: true,
+  get: function () {
+    return _CardFinancialCondition.default;
+  }
+});
+Object.defineProperty(exports, "CardInsight", {
+  enumerable: true,
+  get: function () {
+    return _CardInsight.default;
+  }
+});
 Object.defineProperty(exports, "CardProviderInfo", {
   enumerable: true,
   get: function () {
@@ -123,6 +159,18 @@ Object.defineProperty(exports, "Checkbox", {
     return _Checkbox.default;
   }
 });
+Object.defineProperty(exports, "CheckboxGroup", {
+  enumerable: true,
+  get: function () {
+    return _CheckboxGroup.default;
+  }
+});
+Object.defineProperty(exports, "CheckboxItem", {
+  enumerable: true,
+  get: function () {
+    return _CheckboxItem.default;
+  }
+});
 Object.defineProperty(exports, "ChipGroup", {
   enumerable: true,
   get: function () {
@@ -153,6 +201,18 @@ Object.defineProperty(exports, "CircularRating", {
     return _CircularRating.default;
   }
 });
+Object.defineProperty(exports, "CoverageBarComparison", {
+  enumerable: true,
+  get: function () {
+    return _CoverageBarComparison.default;
+  }
+});
+Object.defineProperty(exports, "CoverageRing", {
+  enumerable: true,
+  get: function () {
+    return _CoverageRing.default;
+  }
+});
 Object.defineProperty(exports, "DebitCard", {
   enumerable: true,
   get: function () {
@@ -171,6 +231,24 @@ Object.defineProperty(exports, "Divider", {
     return _Divider.default;
   }
 });
+Object.defineProperty(exports, "DonutChart", {
+  enumerable: true,
+  get: function () {
+    return _DonutChart.default;
+  }
+});
+Object.defineProperty(exports, "DonutChartSegment", {
+  enumerable: true,
+  get: function () {
+    return _DonutChart.DonutChartSegment;
+  }
+});
+Object.defineProperty(exports, "DonutChartSummary", {
+  enumerable: true,
+  get: function () {
+    return _DonutChartSummary.default;
+  }
+});
 Object.defineProperty(exports, "Drawer", {
   enumerable: true,
   get: function () {
@@ -243,6 +321,12 @@ Object.defineProperty(exports, "InputSearch", {
     return _InputSearch.default;
   }
 });
+Object.defineProperty(exports, "InstitutionBadge", {
+  enumerable: true,
+  get: function () {
+    return _InstitutionBadge.default;
+  }
+});
 Object.defineProperty(exports, "LazyList", {
   enumerable: true,
   get: function () {
@@ -255,6 +339,12 @@ Object.defineProperty(exports, "LinearMeter", {
     return _LinearMeter.default;
   }
 });
+Object.defineProperty(exports, "LinearProgress", {
+  enumerable: true,
+  get: function () {
+    return _LinearProgress.default;
+  }
+});
 Object.defineProperty(exports, "ListGroup", {
   enumerable: true,
   get: function () {
@@ -279,12 +369,24 @@ Object.defineProperty(exports, "MerchantProfile", {
     return _MerchantProfile.default;
   }
 });
+Object.defineProperty(exports, "MetricLegendItem", {
+  enumerable: true,
+  get: function () {
+    return _MetricLegendItem.default;
+  }
+});
 Object.defineProperty(exports, "MoneyValue", {
   enumerable: true,
   get: function () {
     return _MoneyValue.default;
   }
 });
+Object.defineProperty(exports, "MonthlyStatusGrid", {
+  enumerable: true,
+  get: function () {
+    return _MonthlyStatusGrid.default;
+  }
+});
 Object.defineProperty(exports, "NavArrow", {
   enumerable: true,
   get: function () {
@@ -315,6 +417,12 @@ Object.defineProperty(exports, "OTP", {
     return _OTP.default;
   }
 });
+Object.defineProperty(exports, "OTPResend", {
+  enumerable: true,
+  get: function () {
+    return _OTP.OTPResend;
+  }
+});
 Object.defineProperty(exports, "PaymentFeedback", {
   enumerable: true,
   get: function () {
@@ -339,24 +447,48 @@ Object.defineProperty(exports, "ProductLabel", {
     return _ProductLabel.default;
   }
 });
+Object.defineProperty(exports, "ProductOverview", {
+  enumerable: true,
+  get: function () {
+    return _ProductOverview.default;
+  }
+});
 Object.defineProperty(exports, "ProgressBadge", {
   enumerable: true,
   get: function () {
     return _ProgressBadge.default;
   }
 });
+Object.defineProperty(exports, "Radio", {
+  enumerable: true,
+  get: function () {
+    return _Radio.default;
+  }
+});
 Object.defineProperty(exports, "RadioButton", {
   enumerable: true,
   get: function () {
     return _RadioButton.default;
   }
 });
+Object.defineProperty(exports, "RangeTrack", {
+  enumerable: true,
+  get: function () {
+    return _RangeTrack.default;
+  }
+});
 Object.defineProperty(exports, "RechargeCard", {
   enumerable: true,
   get: function () {
     return _RechargeCard.default;
   }
 });
+Object.defineProperty(exports, "SavingsGoalSummary", {
+  enumerable: true,
+  get: function () {
+    return _SavingsGoalSummary.default;
+  }
+});
 Object.defineProperty(exports, "Screen", {
   enumerable: true,
   get: function () {
@@ -375,6 +507,24 @@ Object.defineProperty(exports, "SegmentedControl", {
     return _SegmentedControl.default;
   }
 });
+Object.defineProperty(exports, "SegmentedTrack", {
+  enumerable: true,
+  get: function () {
+    return _SegmentedTrack.default;
+  }
+});
+Object.defineProperty(exports, "SegmentedTrackSegment", {
+  enumerable: true,
+  get: function () {
+    return _SegmentedTrack.SegmentedTrackSegment;
+  }
+});
+Object.defineProperty(exports, "StatGroup", {
+  enumerable: true,
+  get: function () {
+    return _StatGroup.default;
+  }
+});
 Object.defineProperty(exports, "StatItem", {
   enumerable: true,
   get: function () {
@@ -405,6 +555,18 @@ Object.defineProperty(exports, "Stepper", {
     return _Stepper.default;
   }
 });
+Object.defineProperty(exports, "StrengthIndicator", {
+  enumerable: true,
+  get: function () {
+    return _StrengthIndicator.default;
+  }
+});
+Object.defineProperty(exports, "SummaryTile", {
+  enumerable: true,
+  get: function () {
+    return _SummaryTile.default;
+  }
+});
 Object.defineProperty(exports, "SupportText", {
   enumerable: true,
   get: function () {
@@ -537,6 +699,12 @@ Object.defineProperty(exports, "useFormContext", {
     return _Form.useFormContext;
   }
 });
+Object.defineProperty(exports, "useOtpResend", {
+  enumerable: true,
+  get: function () {
+    return _OTP.useOtpResend;
+  }
+});
 Object.defineProperty(exports, "useToast", {
   enumerable: true,
   get: function () {
@@ -550,12 +718,18 @@ var _AvatarGroup = _interopRequireDefault(require("./AvatarGroup/AvatarGroup"));
 var _Badge = _interopRequireDefault(require("./Badge/Badge"));
 var _BottomNav = _interopRequireDefault(require("./BottomNav/BottomNav"));
 var _BottomNavItem = _interopRequireDefault(require("./BottomNavItem/BottomNavItem"));
+var _BrandChip = _interopRequireDefault(require("./BrandChip/BrandChip"));
 var _Button = _interopRequireDefault(require("./Button/Button"));
 var _Card = _interopRequireDefault(require("./Card/Card"));
 var _CardAdvisory = _interopRequireDefault(require("./CardAdvisory/CardAdvisory"));
+var _CardBankAccount = _interopRequireDefault(require("./CardBankAccount/CardBankAccount"));
 var _Carousel = _interopRequireDefault(require("./Carousel/Carousel"));
 var _Checkbox = _interopRequireDefault(require("./Checkbox/Checkbox"));
+var _CheckboxItem = _interopRequireDefault(require("./CheckboxItem/CheckboxItem"));
+var _CheckboxGroup = _interopRequireDefault(require("./CheckboxGroup/CheckboxGroup"));
 var _CardFeedback = _interopRequireDefault(require("./CardFeedback/CardFeedback"));
+var _CardFinancialCondition = _interopRequireDefault(require("./CardFinancialCondition/CardFinancialCondition"));
+var _CardInsight = _interopRequireDefault(require("./CardInsight/CardInsight"));
 var _Disclaimer = _interopRequireDefault(require("./Disclaimer/Disclaimer"));
 var _Divider = _interopRequireDefault(require("./Divider/Divider"));
 var _Drawer = _interopRequireDefault(require("./Drawer/Drawer"));
@@ -567,6 +741,9 @@ var _FormField = _interopRequireDefault(require("./FormField/FormField"));
 var _CircularProgressBar = _interopRequireDefault(require("./CircularProgressBar/CircularProgressBar"));
 var _CircularProgressBarDoted = _interopRequireDefault(require("./CircularProgressBarDoted/CircularProgressBarDoted"));
 var _CircularRating = _interopRequireDefault(require("./CircularRating/CircularRating"));
+var _CoverageRing = _interopRequireDefault(require("./CoverageRing/CoverageRing"));
+var _CoverageBarComparison = _interopRequireDefault(require("./CoverageBarComparison/CoverageBarComparison"));
+var _MonthlyStatusGrid = _interopRequireWildcard(require("./MonthlyStatusGrid/MonthlyStatusGrid"));
 var _Gauge = _interopRequireDefault(require("./Gauge/Gauge"));
 var _HoldingsCard = _interopRequireDefault(require("./HoldingsCard/HoldingsCard"));
 var _HStack = _interopRequireDefault(require("./HStack/HStack"));
@@ -575,10 +752,12 @@ var _IconCapsule = _interopRequireDefault(require("./IconCapsule/IconCapsule"));
 var _Image = _interopRequireDefault(require("./Image/Image"));
 var _LazyList = _interopRequireDefault(require("./LazyList/LazyList"));
 var _LinearMeter = _interopRequireDefault(require("./LinearMeter/LinearMeter"));
+var _LinearProgress = _interopRequireDefault(require("./LinearProgress/LinearProgress"));
 var _ListGroup = _interopRequireDefault(require("./ListGroup/ListGroup"));
 var _ListItem = _interopRequireDefault(require("./ListItem/ListItem"));
 var _MediaCard = _interopRequireDefault(require("./MediaCard/MediaCard"));
 var _MerchantProfile = _interopRequireDefault(require("./MerchantProfile/MerchantProfile"));
+var _MetricLegendItem = _interopRequireDefault(require("./MetricLegendItem/MetricLegendItem"));
 var _MoneyValue = _interopRequireDefault(require("./MoneyValue/MoneyValue"));
 var _NoteInput = _interopRequireDefault(require("./NoteInput/NoteInput"));
 var _Nudge = _interopRequireDefault(require("./Nudge/Nudge"));
@@ -602,16 +781,24 @@ var _VStack = _interopRequireDefault(require("./VStack/VStack"));
 var _ChipGroup = _interopRequireDefault(require("./ChipGroup/ChipGroup"));
 var _EmptyState = _interopRequireDefault(require("./EmptyState/EmptyState"));
 var _Accordion = _interopRequireDefault(require("./Accordion/Accordion"));
+var _AccordionCheckbox = _interopRequireDefault(require("./AccordionCheckbox/AccordionCheckbox"));
 var _ActionTile = _interopRequireDefault(require("./ActionTile/ActionTile"));
 var _Balance = _interopRequireDefault(require("./Balance/Balance"));
 var _ButtonGroup = _interopRequireDefault(require("./ButtonGroup/ButtonGroup"));
 var _CardProviderInfo = _interopRequireDefault(require("./CardProviderInfo/CardProviderInfo"));
 var _ChipSelect = _interopRequireDefault(require("./ChipSelect/ChipSelect"));
 var _InputSearch = _interopRequireDefault(require("./InputSearch/InputSearch"));
+var _InstitutionBadge = _interopRequireDefault(require("./InstitutionBadge/InstitutionBadge"));
 var _SupportText = _interopRequireDefault(require("./SupportText/SupportText"));
 var _SupportTextIcon = _interopRequireDefault(require("./SupportText/SupportTextIcon"));
+var _Radio = _interopRequireDefault(require("./Radio/Radio"));
 var _RadioButton = _interopRequireDefault(require("./RadioButton/RadioButton"));
 var _RechargeCard = _interopRequireDefault(require("./RechargeCard/RechargeCard"));
+var _SavingsGoalSummary = _interopRequireDefault(require("./SavingsGoalSummary/SavingsGoalSummary"));
+var _DonutChart = _interopRequireWildcard(require("./DonutChart/DonutChart"));
+var _DonutChartSummary = _interopRequireDefault(require("./DonutChartSummary/DonutChartSummary"));
+var _RangeTrack = _interopRequireDefault(require("./RangeTrack/RangeTrack"));
+var _SegmentedTrack = _interopRequireWildcard(require("./SegmentedTrack/SegmentedTrack"));
 var _Tabs = _interopRequireDefault(require("./Tabs/Tabs"));
 var _TabItem = _interopRequireDefault(require("./Tabs/TabItem"));
 var _Toast = _interopRequireDefault(require("./Toast/Toast"));
@@ -621,11 +808,15 @@ var _AmountInput = _interopRequireDefault(require("./AmountInput/AmountInput"));
 var _Popup = _interopRequireDefault(require("./Popup/Popup"));
 var _PortfolioHero = _interopRequireDefault(require("./PortfolioHero/PortfolioHero"));
 var _ProductLabel = _interopRequireDefault(require("./ProductLabel/ProductLabel"));
+var _ProductOverview = _interopRequireDefault(require("./ProductOverview/ProductOverview"));
 var _ProgressBadge = _interopRequireDefault(require("./ProgressBadge/ProgressBadge"));
 var _SwappableAmount = _interopRequireDefault(require("./SwappableAmount/SwappableAmount"));
-var _OTP = _interopRequireDefault(require("./OTP/OTP"));
+var _OTP = _interopRequireWildcard(require("./OTP/OTP"));
 var _PaymentFeedback = _interopRequireDefault(require("./PaymentFeedback/PaymentFeedback"));
 var _StatItem = _interopRequireDefault(require("./StatItem/StatItem"));
+var _StatGroup = _interopRequireDefault(require("./StatGroup/StatGroup"));
+var _StrengthIndicator = _interopRequireDefault(require("./StrengthIndicator/StrengthIndicator"));
+var _SummaryTile = _interopRequireDefault(require("./SummaryTile/SummaryTile"));
 var _Text = _interopRequireDefault(require("./Text/Text"));
 var _SegmentedControl = _interopRequireDefault(require("./SegmentedControl/SegmentedControl"));
 var _Toggle = _interopRequireDefault(require("./Toggle/Toggle"));