jfs-components 0.0.44 → 0.0.45

package/lib/commonjs/components/ProgressBadge/ProgressBadge.js

@@ -0,0 +1,130 @@
+"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 _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * ProgressBadge component that displays an icon, text, and an internal progress bar.
+ *
+ * All visual attributes resolve from Figma tokens via `getVariableByName` using the provided `modes`.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.taskName="Live price: [price] (00:43)"] - The text displayed.
+ * @param {string} [props.iconName="ic_live"] - Icon name from the registry.
+ * @param {number} [props.value=0] - The progress value between 0 and 100.
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for design tokens.
+ * @param {Object} [props.style] - Optional container style overrides.
+ * @param {Object} [props.textStyle] - Optional text style overrides.
+ * @param {string} [props.accessibilityLabel] - Accessibility label.
+ */
+function ProgressBadge({
+  taskName = 'Live price: [price] (00:43)',
+  iconName = 'ic_live',
+  value = 0,
+  modes = {},
+  style,
+  textStyle: textStyleOverride,
+  accessibilityLabel,
+  ...rest
+}) {
+  // Resolve layout tokens
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/background', modes) || '#ffffff';
+  const progressColor = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/progress/color', modes) || '#ebebed';
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/gap', modes) ?? 12;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/padding/horizontal', modes) ?? 16;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/padding/vertical', modes) ?? 6;
+  const borderRadius = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/radius', modes) ?? 999;
+  const descriptionGap = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/description/gap', modes) ?? 8;
+
+  // Resolve typography tokens
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/fontFamily', modes) || 'JioType_Var:Medium';
+  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/fontWeight', modes) ?? 500;
+  const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/fontSize', modes) ?? 14;
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/lineHeight', modes) ?? 17;
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/foreground', modes) || '#000000';
+
+  // Resolve icon tokens
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/icon/color', modes) || '#f50030';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/icon/size', modes) ?? 18;
+  const containerStyle = {
+    backgroundColor,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius,
+    overflow: 'hidden',
+    position: 'relative',
+    flexWrap: 'wrap'
+  };
+  const descriptionContainerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: descriptionGap,
+    flex: 1,
+    paddingVertical: 0,
+    minHeight: 1,
+    minWidth: 1,
+    position: 'relative'
+  };
+  const textStyle = {
+    fontFamily,
+    fontWeight,
+    fontSize,
+    lineHeight,
+    color: textColor,
+    textAlign: 'center',
+    overflow: 'hidden',
+    flexShrink: 0
+  };
+
+  // Ensure value is between 0 and 100
+  const clampedValue = Math.max(0, Math.min(100, value));
+  const progressStyle = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    width: `${clampedValue}%`,
+    backgroundColor: progressColor
+  };
+  const defaultAccessibilityLabel = accessibilityLabel || taskName;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "text",
+    accessibilityLabel: defaultAccessibilityLabel,
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: progressStyle,
+      pointerEvents: "none"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: descriptionContainerStyle,
+      children: [iconName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: iconName,
+        size: iconSize,
+        color: iconColor,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [textStyle, textStyleOverride],
+        numberOfLines: 1,
+        ellipsizeMode: "tail",
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: taskName
+      })]
+    })]
+  });
+}
+var _default = exports.default = ProgressBadge;

package/lib/commonjs/components/ProgressBadge/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ProgressBadge.default;
+  }
+});
+var _ProgressBadge = _interopRequireWildcard(require("./ProgressBadge"));
+Object.keys(_ProgressBadge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ProgressBadge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ProgressBadge[key];
+    }
+  });
+});
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }

package/lib/commonjs/components/StatItem/StatItem.js

@@ -0,0 +1,61 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * StatItem displays a label/value pair with the value in a large, bold style.
+ * Useful for metrics, product stats, or KPI callouts.
+ *
+ * @component
+ * @param {StatItemProps} props
+ */
+function StatItem({
+  label = 'Purity verified by NABL',
+  value = '99.99%',
+  modes = {},
+  style
+}) {
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('statItem/gap', modes) ?? 2;
+  const labelForeground = (0, _figmaVariablesResolver.getVariableByName)('statItem/label/foreground', modes) ?? '#1a1c1f';
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('statItem/label/fontFamily', modes) ?? 'JioType Var';
+  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('statItem/label/fontSize', modes) ?? 12;
+  const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('statItem/label/fontWeight', modes) ?? '500';
+  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('statItem/label/lineHeight', modes) ?? 16;
+  const valueForeground = (0, _figmaVariablesResolver.getVariableByName)('statItem/value/foreground', modes) ?? '#0d0d0f';
+  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('statItem/value/fontFamily', modes) ?? 'JioType Var';
+  const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('statItem/value/fontSize', modes) ?? 26;
+  const valueFontWeight = (0, _figmaVariablesResolver.getVariableByName)('statItem/value/fontWeight', modes) ?? '900';
+  const valueLineHeight = (0, _figmaVariablesResolver.getVariableByName)('statItem/value/lineHeight', modes) ?? 26;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      gap: gap
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: {
+        color: labelForeground,
+        fontFamily: labelFontFamily,
+        fontSize: labelFontSize,
+        fontWeight: String(labelFontWeight),
+        lineHeight: labelLineHeight
+      },
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: {
+        color: valueForeground,
+        fontFamily: valueFontFamily,
+        fontSize: valueFontSize,
+        fontWeight: String(valueFontWeight),
+        lineHeight: valueLineHeight
+      },
+      children: value
+    })]
+  });
+}
+var _default = exports.default = StatItem;

package/lib/commonjs/components/SwappableAmount/SwappableAmount.js

@@ -0,0 +1,71 @@
+"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 _Button = _interopRequireDefault(require("../Button/Button"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function SwappableAmount({
+  value = '49g',
+  schedule = false,
+  scheduleLabel = 'Weekly on Mondays',
+  amountLabel = '₹5100',
+  onSchedulePress,
+  onAmountPress,
+  modes = {},
+  style
+}) {
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('swappableAmount/gap', modes) ?? 24;
+  const padding = (0, _figmaVariablesResolver.getVariableByName)('swappableAmount/padding', modes) ?? 8;
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('swappableAmount/foreground', modes) ?? '#0d0d0f';
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('swappableAmount/fontSize', modes) ?? 56;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('swappableAmount/fontFamily', modes) ?? 'System';
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('swappableAmount/fontWeight', modes) ?? 900;
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('swappableAmount/lineHeight', modes) ?? 56;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: gap,
+    padding: padding
+  };
+  const valueTextStyle = {
+    color: foreground,
+    fontSize: fontSize,
+    fontFamily: fontFamily,
+    fontWeight: String(fontWeight),
+    lineHeight: lineHeight
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: [schedule && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      label: scheduleLabel,
+      icon: "ic_calendar_week",
+      onPress: onSchedulePress,
+      modes: {
+        ...modes,
+        AppearanceBrand: 'Neutral',
+        Emphasis: 'Low',
+        'Button / Size': 'S'
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: valueTextStyle,
+      children: value
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      label: amountLabel,
+      icon: "ic_data_in_out",
+      onPress: onAmountPress,
+      modes: {
+        ...modes,
+        Emphasis: 'Medium',
+        AppearanceBrand: 'Secondary'
+      }
+    })]
+  });
+}
+var _default = exports.default = SwappableAmount;

package/lib/commonjs/components/Text/Text.js

@@ -0,0 +1,38 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Text({
+  text = 'Korem ipsum ',
+  modes = {},
+  style,
+  numberOfLines
+}) {
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('text/foreground', modes) ?? '#000000';
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('text/fontFamily', modes) ?? 'JioType';
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('text/fontSize', modes) ?? 14;
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('text/fontWeight', modes) ?? '500';
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('text/lineHeight', modes) ?? 20;
+  const letterSpacing = (0, _figmaVariablesResolver.getVariableByName)('text/letterSpacing', modes) ?? -0.5;
+  const textStyle = {
+    color: foreground,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    fontWeight: String(fontWeight),
+    lineHeight: lineHeight,
+    letterSpacing: letterSpacing
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [textStyle, style],
+    numberOfLines: numberOfLines,
+    children: text
+  });
+}
+var _default = exports.default = Text;

package/lib/commonjs/components/Toggle/Toggle.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Toggle (switch) component that maps directly to the Figma design using design tokens.
+ *
+ * Supports controlled and uncontrolled usage, on/off states, and disabled state.
+ * All styling is driven by design tokens with optional mode overrides.
+ *
+ * @component
+ * @param {ToggleProps} props
+ */
+function Toggle({
+  value: controlledValue,
+  defaultValue = false,
+  onValueChange,
+  disabled = false,
+  modes = {},
+  style,
+  accessibilityLabel
+}) {
+  const isControlled = controlledValue !== undefined;
+  const [internalValue, setInternalValue] = (0, _react.useState)(defaultValue);
+  const isOn = isControlled ? controlledValue : internalValue;
+  const toggleState = disabled ? isOn ? 'Disabled On' : 'Disabled Off' : isOn ? 'On' : 'Off';
+  const resolvedModes = {
+    ...modes,
+    'Toggle States': toggleState
+  };
+  const width = (0, _figmaVariablesResolver.getVariableByName)('toggle/width', resolvedModes) ?? 52;
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('toggle/radius', resolvedModes) ?? 100;
+  const paddingTrack = (0, _figmaVariablesResolver.getVariableByName)('toggle/padding/track', resolvedModes) ?? 3;
+  const background = (0, _figmaVariablesResolver.getVariableByName)('toggle/background', resolvedModes) ?? (isOn ? '#5d00b5' : '#c7c7cc');
+  const thumbSize = (0, _figmaVariablesResolver.getVariableByName)('toggle/thumb/size', resolvedModes) ?? 25;
+  const thumbRadius = (0, _figmaVariablesResolver.getVariableByName)('toggle/thumb/radius', resolvedModes) ?? 100;
+  const thumbBackground = (0, _figmaVariablesResolver.getVariableByName)('toggle/thumb/background', resolvedModes) ?? '#ffffff';
+  const thumbShadowColor = (0, _figmaVariablesResolver.getVariableByName)('toggle/thumb/shadow/color', resolvedModes) ?? 'rgba(0,0,0,0.18)';
+  const thumbShadowRadius = (0, _figmaVariablesResolver.getVariableByName)('toggle/thumb/shadow/radius', resolvedModes) ?? 4;
+  const thumbShadowOffsetX = (0, _figmaVariablesResolver.getVariableByName)('toggle/thumb/shadow/offsetX', resolvedModes) ?? 0;
+  const thumbShadowOffsetY = (0, _figmaVariablesResolver.getVariableByName)('toggle/thumb/shadow/offsetY', resolvedModes) ?? 2;
+  const trackHeight = thumbSize + paddingTrack * 2;
+  const handlePress = (0, _react.useCallback)(() => {
+    if (disabled) return;
+    const next = !isOn;
+    if (!isControlled) {
+      setInternalValue(next);
+    }
+    onValueChange?.(next);
+  }, [disabled, isOn, isControlled, onValueChange]);
+  const trackStyle = {
+    width: width,
+    height: trackHeight,
+    borderRadius: radius,
+    backgroundColor: background,
+    padding: paddingTrack,
+    justifyContent: 'center',
+    alignItems: isOn ? 'flex-end' : 'flex-start',
+    opacity: disabled ? 0.5 : 1
+  };
+  const thumbShadow = _reactNative.Platform.OS === 'web' ? {
+    boxShadow: `${thumbShadowOffsetX}px ${thumbShadowOffsetY}px ${thumbShadowRadius}px 0px ${thumbShadowColor}`
+  } : {
+    shadowColor: thumbShadowColor,
+    shadowOffset: {
+      width: thumbShadowOffsetX,
+      height: thumbShadowOffsetY
+    },
+    shadowRadius: thumbShadowRadius,
+    shadowOpacity: 1,
+    elevation: 4
+  };
+  const thumbStyle = {
+    width: thumbSize,
+    height: thumbSize,
+    borderRadius: thumbRadius,
+    backgroundColor: thumbBackground,
+    ...thumbShadow
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    style: [trackStyle, style],
+    onPress: handlePress,
+    disabled: disabled,
+    accessibilityRole: "switch",
+    accessibilityState: {
+      checked: isOn,
+      disabled
+    },
+    accessibilityLabel: accessibilityLabel,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: thumbStyle
+    })
+  });
+}
+var _default = exports.default = Toggle;

package/lib/commonjs/components/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "ActionTile", {
     return _ActionTile.default;
   }
 });
+Object.defineProperty(exports, "AmountInput", {
+  enumerable: true,
+  get: function () {
+    return _AmountInput.default;
+  }
+});
 Object.defineProperty(exports, "AppBar", {
   enumerable: true,
   get: function () {
@@ -87,6 +93,12 @@ Object.defineProperty(exports, "CardFeedback", {
     return _CardFeedback.default;
   }
 });
+Object.defineProperty(exports, "CardProviderInfo", {
+  enumerable: true,
+  get: function () {
+    return _CardProviderInfo.default;
+  }
+});
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function () {
@@ -231,12 +243,30 @@ Object.defineProperty(exports, "Numpad", {
     return _Numpad.default;
   }
 });
+Object.defineProperty(exports, "OTP", {
+  enumerable: true,
+  get: function () {
+    return _OTP.default;
+  }
+});
 Object.defineProperty(exports, "PageTitle", {
   enumerable: true,
   get: function () {
     return _PageTitle.default;
   }
 });
+Object.defineProperty(exports, "PortfolioHero", {
+  enumerable: true,
+  get: function () {
+    return _PortfolioHero.default;
+  }
+});
+Object.defineProperty(exports, "ProductLabel", {
+  enumerable: true,
+  get: function () {
+    return _ProductLabel.default;
+  }
+});
 Object.defineProperty(exports, "RadioButton", {
   enumerable: true,
   get: function () {
@@ -255,6 +285,12 @@ Object.defineProperty(exports, "Section", {
     return _Section.default;
   }
 });
+Object.defineProperty(exports, "StatItem", {
+  enumerable: true,
+  get: function () {
+    return _StatItem.default;
+  }
+});
 Object.defineProperty(exports, "StatusHero", {
   enumerable: true,
   get: function () {
@@ -291,6 +327,12 @@ Object.defineProperty(exports, "SupportTextIcon", {
     return _SupportTextIcon.default;
   }
 });
+Object.defineProperty(exports, "SwappableAmount", {
+  enumerable: true,
+  get: function () {
+    return _SwappableAmount.default;
+  }
+});
 Object.defineProperty(exports, "TabItem", {
   enumerable: true,
   get: function () {
@@ -303,6 +345,12 @@ Object.defineProperty(exports, "Tabs", {
     return _Tabs.default;
   }
 });
+Object.defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function () {
+    return _Text.default;
+  }
+});
 Object.defineProperty(exports, "TextInput", {
   enumerable: true,
   get: function () {
@@ -327,6 +375,12 @@ Object.defineProperty(exports, "ToastProvider", {
     return _ToastProvider.default;
   }
 });
+Object.defineProperty(exports, "Toggle", {
+  enumerable: true,
+  get: function () {
+    return _Toggle.default;
+  }
+});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function () {
@@ -437,6 +491,7 @@ var _Accordion = _interopRequireDefault(require("./Accordion/Accordion"));
 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 _SupportText = _interopRequireDefault(require("./SupportText/SupportText"));
@@ -447,5 +502,13 @@ var _TabItem = _interopRequireDefault(require("./Tabs/TabItem"));
 var _Toast = _interopRequireDefault(require("./Toast/Toast"));
 var _ToastProvider = _interopRequireDefault(require("./Toast/ToastProvider"));
 var _useToast = require("./Toast/useToast");
+var _AmountInput = _interopRequireDefault(require("./AmountInput/AmountInput"));
+var _PortfolioHero = _interopRequireDefault(require("./PortfolioHero/PortfolioHero"));
+var _ProductLabel = _interopRequireDefault(require("./ProductLabel/ProductLabel"));
+var _SwappableAmount = _interopRequireDefault(require("./SwappableAmount/SwappableAmount"));
+var _OTP = _interopRequireDefault(require("./OTP/OTP"));
+var _StatItem = _interopRequireDefault(require("./StatItem/StatItem"));
+var _Text = _interopRequireDefault(require("./Text/Text"));
+var _Toggle = _interopRequireDefault(require("./Toggle/Toggle"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }