jfs-components 0.1.30 → 0.1.33

package/lib/commonjs/components/HelloJioInput/HelloJioInput.js

@@ -0,0 +1,287 @@
+"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 _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _reactUtils = require("../../utils/react-utils");
+var _GlassFill = _interopRequireDefault(require("../../utils/GlassFill/GlassFill"));
+var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const IS_WEB = _reactNative.Platform.OS === 'web';
+const STATE_COLLECTION = 'HelloJioInput State';
+
+/** Default IconButton modes matching the Figma send control. */
+const DEFAULT_SEND_BUTTON_MODES = Object.freeze({
+  AppearanceBrand: 'Primary',
+  'Button / Size': 'S'
+});
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') return value;
+  return fallback;
+};
+/**
+ * Fallback values from the Figma `HelloJioInput` component when local token
+ * JSON has not been synced yet. Mode-driven `getVariableByName` wins when
+ * tokens resolve.
+ */
+const STATE_FALLBACKS = {
+  Idle: {
+    background: '#f5f5f5',
+    borderColor: '#f5f5f5',
+    labelColor: '#545961',
+    iconColor: '#545961'
+  },
+  Active: {
+    background: '#ffffff',
+    borderColor: '#b5b5b5',
+    labelColor: '#24262b',
+    iconColor: '#24262b'
+  },
+  IdleJioPlus: {
+    background: '#f5f5f5',
+    borderColor: '#f5f5f5',
+    labelColor: '#545961',
+    iconColor: '#545961'
+  }
+};
+function resolveHelloJioInputTokens(modes, visualState) {
+  const fallback = STATE_FALLBACKS[visualState];
+  const background = (0, _figmaVariablesResolver.getVariableByName)('helloJioInput/background', modes) ?? fallback.background;
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('helloJioInput/border/color', modes) ?? fallback.borderColor;
+  const strokeWidth = toNumber((0, _figmaVariablesResolver.getVariableByName)('helloJioInput/strokeWidth', modes), 1);
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('helloJioInput/gap', modes), 8);
+  const paddingLeft = toNumber((0, _figmaVariablesResolver.getVariableByName)('helloJioInput/padding/left', modes), 12);
+  const paddingRight = toNumber((0, _figmaVariablesResolver.getVariableByName)('helloJioInput/padding/right', modes), 4);
+  const paddingTop = toNumber((0, _figmaVariablesResolver.getVariableByName)('helloJioInput/padding/top', modes), 4);
+  const paddingBottom = toNumber((0, _figmaVariablesResolver.getVariableByName)('helloJioInput/padding/bottom', modes), 4);
+  const height = toNumber((0, _figmaVariablesResolver.getVariableByName)('helloJioInput/height', modes), 36);
+  const radiusRaw = toNumber((0, _figmaVariablesResolver.getVariableByName)('helloJioInput/radius', modes), 99999);
+  const borderRadius = radiusRaw >= 9999 ? 99999 : radiusRaw;
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('helloJioInput/label/color', modes) ?? fallback.labelColor;
+  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('helloJioInput/fontSize', modes), 14);
+  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('helloJioInput/lineHeight', modes), 18);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('helloJioInput/fontFamily', modes) ?? 'JioType Var';
+  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('helloJioInput/fontWeight', modes), '400');
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('helloJioInput/icon/color', modes) ?? fallback.iconColor;
+  const iconSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('textInput/icon/size', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('helloJioInput/icon/size', modes), 18);
+  const blurMinimal = toNumber((0, _figmaVariablesResolver.getVariableByName)('blur/minimal', modes), 29);
+  const blurIntensity = Math.max(0, Math.min(100, Math.round(blurMinimal)));
+  const useGlass = visualState === 'IdleJioPlus';
+  return {
+    containerStyle: {
+      position: 'relative',
+      flexDirection: 'row',
+      alignItems: 'center',
+      // Glass keeps the container transparent so GlassFill shows through.
+      backgroundColor: useGlass ? 'transparent' : background,
+      borderColor,
+      borderWidth: strokeWidth,
+      borderStyle: 'solid',
+      borderRadius,
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      paddingBottom,
+      gap,
+      height,
+      overflow: 'hidden',
+      width: '100%'
+    },
+    inputStyle: {
+      flex: 1,
+      color: labelColor,
+      fontSize,
+      fontFamily,
+      fontWeight,
+      // iOS single-line TextInput + explicit lineHeight sits below center —
+      // same quirk TextInput works around. Omit on iOS.
+      ...(_reactNative.Platform.OS === 'ios' ? null : {
+        lineHeight
+      }),
+      padding: 0,
+      margin: 0,
+      minHeight: lineHeight,
+      outlineStyle: 'none',
+      outlineWidth: 0,
+      outlineColor: 'transparent'
+    },
+    iconColor,
+    iconSize,
+    blurIntensity,
+    useGlass
+  };
+}
+
+/**
+ * `HelloJioInput` is the pill-shaped HelloJio prompt field: leading brand
+ * icon, single-line text input, and a gold send `IconButton` on the right.
+ *
+ * Visual state is derived automatically:
+ *  - **Idle** — gray fill, gray label (default)
+ *  - **Active** — white fill + border while focused
+ *  - **IdleJioPlus** — frosted glass when `jioPlus` and unfocused
+ *
+ * @component
+ */
+const HelloJioInput = /*#__PURE__*/(0, _react.forwardRef)(function HelloJioInput({
+  placeholder = 'Ask me anything',
+  value,
+  defaultValue = '',
+  onChangeText,
+  onSubmit,
+  leadingIconName = 'ic_hellojio',
+  leading,
+  trailing,
+  sendIconName = 'ic_send_message',
+  jioPlus = false,
+  disabled = false,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  inputStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  testID,
+  onFocus,
+  onBlur,
+  returnKeyType = 'send',
+  ...rest
+}, ref) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const inputRef = (0, _react.useRef)(null);
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  const [uncontrolledValue, setUncontrolledValue] = (0, _react.useState)(defaultValue);
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? value : uncontrolledValue;
+  const visualState = isFocused ? 'Active' : jioPlus ? 'IdleJioPlus' : 'Idle';
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes,
+    [STATE_COLLECTION]: visualState
+  }), [globalModes, propModes, visualState]);
+  const sendButtonModes = (0, _react.useMemo)(() => ({
+    ...DEFAULT_SEND_BUTTON_MODES,
+    ...modes
+  }), [modes]);
+  const tokens = (0, _react.useMemo)(() => resolveHelloJioInputTokens(modes, visualState), [modes, visualState]);
+  const handleChangeText = (0, _react.useCallback)(text => {
+    if (!isControlled) setUncontrolledValue(text);
+    onChangeText?.(text);
+  }, [isControlled, onChangeText]);
+  const handleSubmit = (0, _react.useCallback)(() => {
+    if (disabled) return;
+    onSubmit?.(currentValue);
+  }, [disabled, onSubmit, currentValue]);
+  const handleFocus = (0, _react.useCallback)(e => {
+    setIsFocused(true);
+    onFocus?.(e);
+  }, [onFocus]);
+  const handleBlur = (0, _react.useCallback)(e => {
+    setIsFocused(false);
+    onBlur?.(e);
+  }, [onBlur]);
+  const leadingElement = leading ?? (leadingIconName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    name: leadingIconName,
+    size: tokens.iconSize,
+    color: tokens.iconColor
+  }) : null);
+  const processedLeading = leadingElement ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leadingElement), modes) : null;
+  const defaultTrailing = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    iconName: sendIconName,
+    modes: sendButtonModes,
+    onPress: handleSubmit,
+    disabled: disabled,
+    accessibilityLabel: "Send"
+  });
+  const trailingElement = trailing === undefined ? defaultTrailing : trailing === null ? null : trailing;
+  const processedTrailing = trailingElement ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(trailingElement), modes) : null;
+  const a11yLabel = accessibilityLabel ?? (placeholder || 'HelloJio input');
+  const hoverStyle = isHovered && !disabled && !isFocused ? {
+    opacity: 0.95
+  } : {};
+  const containerStyleArray = [tokens.containerStyle, hoverStyle, disabled ? {
+    opacity: 0.5
+  } : null, style];
+  const glassOverlay = (0, _figmaVariablesResolver.getVariableByName)('helloJioInput/background', modes) ?? STATE_FALLBACKS.IdleJioPlus.background;
+  const inner = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [tokens.useGlass ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
+      tint: "light",
+      intensity: tokens.blurIntensity,
+      overlayColor: glassOverlay,
+      androidTintWash: false
+    }) : null, processedLeading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      style: SLOT_CENTER,
+      children: processedLeading
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+      ref: (0, _reactUtils.mergeRefs)(inputRef, ref),
+      accessibilityLabel: a11yLabel,
+      accessibilityHint: accessibilityHint,
+      placeholder: isFocused ? '' : placeholder,
+      placeholderTextColor: tokens.inputStyle.color,
+      value: currentValue,
+      onChangeText: handleChangeText,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onSubmitEditing: handleSubmit,
+      returnKeyType: returnKeyType,
+      editable: !disabled,
+      style: [tokens.inputStyle, inputStyle],
+      testID: testID,
+      ...rest
+    }), processedTrailing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View
+    // Keep the send button in the a11y tree — it has its own label.
+    , {
+      style: SLOT_CENTER,
+      children: processedTrailing
+    }) : null]
+  });
+
+  // Same Android focus rule as TextInput: never wrap native TextInput in
+  // Pressable on native (steals the first tap). Web keeps Pressable for
+  // hover + click-anywhere-to-focus.
+  if (IS_WEB) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: containerStyleArray,
+      onHoverIn: () => setIsHovered(true),
+      onHoverOut: () => setIsHovered(false),
+      onPress: () => {
+        if (!disabled) inputRef.current?.focus();
+      },
+      accessible: false,
+      disabled: disabled,
+      children: inner
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: containerStyleArray,
+    children: inner
+  });
+});
+const SLOT_CENTER = {
+  justifyContent: 'center',
+  alignItems: 'center'
+};
+var _default = exports.default = /*#__PURE__*/_react.default.memo(HelloJioInput);

package/lib/commonjs/components/ValueBackMetric/ValueBackMetric.js

@@ -0,0 +1,219 @@
+"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 _Icon = _interopRequireDefault(require("../Icon/Icon"));
+var _Link = _interopRequireDefault(require("../Link/Link"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TITLE_LINE_HEIGHT_RATIO = 1.2;
+const VALUE_LINE_HEIGHT_RATIO = 1.2;
+const CAPTION_LINE_HEIGHT_RATIO = 1.5;
+
+// The Figma node binds the header-icon size and the per-part font sizes/weights
+// to `valueBackMetric/*` variables, but those tokens are NOT in the committed
+// variables snapshot (`npm run tokens -- find valueBackMetric` → no matches).
+// They also intentionally differ from the `metricdata/*` typography defaults
+// (e.g. `metricdata/value` resolves to 20px/700, whereas this component's value
+// is 16px/500). So the sizes/weights below are encoded as literal constants
+// matching the Figma design exactly. Colours, gaps and padding DO exist as real
+// `metricdata/*` tokens (and match the design), so those resolve through
+// `getVariableByName` and stay themeable.
+const TITLE_FONT_SIZE = 12;
+const TITLE_FONT_WEIGHT = '500';
+const VALUE_FONT_SIZE = 16;
+const VALUE_FONT_WEIGHT = '500';
+const CAPTION_FONT_SIZE = 12;
+const CAPTION_FONT_WEIGHT = '400';
+const FONT_FAMILY = 'JioType Var';
+const CARD_BACKGROUND = '#ffffff';
+const CARD_MIN_HEIGHT = 82;
+const ICON_SIZE = 18;
+// Figma renders the header glyph flush (all `icon/padding/*` tokens are 0); the
+// shared Icon pulls padding from those tokens, so mirror MetricData and zero it
+// explicitly to keep the icon flush against the title.
+const ICON_PADDING_RESET = {
+  paddingLeft: 0,
+  paddingRight: 0,
+  paddingTop: 0,
+  paddingBottom: 0
+};
+/**
+ * ValueBackMetric — a compact, left-aligned "value back" card.
+ *
+ * Stacks a branded header row (icon + `title`, e.g. "JioPoints"), a prominent
+ * `value`, a muted `caption`, and an optional bottom `linkLabel` (e.g. "Earn").
+ * `value`, `caption` and `linkLabel` each render only when provided; the header
+ * (icon + title) always shows.
+ *
+ * Colours, gaps and padding resolve from the `metricdata/*` tokens; the header
+ * glyph from the `icon/*` tokens (default 18px gold); the link entirely from
+ * the `link/*` + `text/foreground` tokens via the shared {@link Link}, with
+ * `Text Appearance: Secondary` and `Text Sizes: Small` seeded so it renders
+ * purple at 12px like the design (caller `modes` win). The per-part font
+ * sizes/weights come from the Figma `valueBackMetric/*` variables, which are
+ * not yet in the committed token snapshot, so they are encoded as constants
+ * matching the design.
+ *
+ * @example
+ * ```tsx
+ * <ValueBackMetric
+ *   title="JioPoints"
+ *   value="Value"
+ *   caption="Earn 10 point with UPI"
+ *   linkLabel="Earn"
+ *   onPress={() => navigation.navigate('ValueBack')}
+ *   onLinkPress={() => navigation.navigate('EarnPoints')}
+ * />
+ * ```
+ */
+function ValueBackMetric({
+  icon = 'ic_rupee_coin',
+  title = 'JioPoints',
+  value,
+  caption,
+  linkLabel,
+  onLinkPress,
+  onPress,
+  disabled,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  titleStyle,
+  valueStyle,
+  captionStyle,
+  accessibilityLabel
+}) {
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('metricdata/title/color', modes) ?? '#000000';
+  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('metricdata/value/color', modes) ?? '#000000';
+  const captionColor = (0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/color', modes) ?? '#777777';
+  // The design's link is purple (`text/foreground` under `Text Appearance:
+  // Secondary`) at 12px (`link/fontSize` under `Text Sizes: Small`), while the
+  // header icon keeps the default gold `icon/color`. Seed only the link's
+  // modes; caller-supplied modes win.
+  const linkModes = _react.default.useMemo(() => ({
+    'Text Appearance': 'Secondary',
+    'Text Sizes': 'Small',
+    ...modes
+  }), [modes]);
+
+  // The header glyph is token-driven: `icon/color` (gold by default, retinted
+  // via `AppearanceBrand`) and `icon/size` (18px). Passing them explicitly — as
+  // MetricData does — makes the glyph deterministic instead of relying on the
+  // shared Icon's internal token lookups.
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('icon/color', modes) ?? '#ad8444';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('icon/size', modes) ?? ICON_SIZE;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('metricdata/gap', modes) ?? 4;
+  const valueWrapGap = (0, _figmaVariablesResolver.getVariableByName)('metricdata/valueWrap/gap', modes) ?? 4;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('metricdata/padding/horizontal', modes) ?? 10;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('metricdata/padding/vertical', modes) ?? 10;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    minHeight: CARD_MIN_HEIGHT,
+    backgroundColor: CARD_BACKGROUND
+  };
+  const titleTextStyle = {
+    color: titleColor,
+    fontFamily: FONT_FAMILY,
+    fontSize: TITLE_FONT_SIZE,
+    fontWeight: TITLE_FONT_WEIGHT,
+    lineHeight: TITLE_FONT_SIZE * TITLE_LINE_HEIGHT_RATIO
+  };
+  const valueTextStyle = {
+    color: valueColor,
+    fontFamily: FONT_FAMILY,
+    fontSize: VALUE_FONT_SIZE,
+    fontWeight: VALUE_FONT_WEIGHT,
+    lineHeight: VALUE_FONT_SIZE * VALUE_LINE_HEIGHT_RATIO
+  };
+  const captionTextStyle = {
+    color: captionColor,
+    fontFamily: FONT_FAMILY,
+    fontSize: CAPTION_FONT_SIZE,
+    fontWeight: CAPTION_FONT_WEIGHT,
+    lineHeight: CAPTION_FONT_SIZE * CAPTION_LINE_HEIGHT_RATIO
+  };
+
+  // Mirrors the Figma swap slot, whose preferred instances are `Icon` and
+  // `Image`. A registry name renders the token-driven `Icon` (18px, gold,
+  // flush — all from the `icon/*` tokens); a custom node (`<Icon/>`,
+  // `<Image/>`, anything) renders as-is with `modes` cascaded into it, so an
+  // Icon instance follows the icon tokens while an Image keeps its own sizing.
+  const iconNode = icon == null ? null : typeof icon === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    iconName: icon,
+    size: iconSize,
+    color: iconColor,
+    modes: modes,
+    style: ICON_PADDING_RESET
+  }) : (0, _reactUtils.cloneChildrenWithModes)(icon, modes);
+  const hasValue = value !== undefined && value !== null && value !== '';
+  const hasCaption = caption !== undefined && caption !== '';
+  const resolvedLabel = accessibilityLabel ?? ([title, typeof value === 'string' ? value : undefined, caption, linkLabel].filter(Boolean).join(', ') || undefined);
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: valueWrapGap
+      },
+      children: [iconNode, title !== undefined && title !== '' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [titleTextStyle, titleStyle],
+        children: title
+      }) : null]
+    }), hasValue || hasCaption ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: 4
+      },
+      children: [hasValue ? typeof value === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [valueTextStyle, valueStyle],
+        children: value
+      }) : value : null, hasCaption ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [captionTextStyle, captionStyle],
+        children: caption
+      }) : null]
+    }) : null, linkLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+      text: linkLabel,
+      autolayout: "Hug",
+      modes: linkModes,
+      ...(onLinkPress ? {
+        onPress: onLinkPress
+      } : null)
+    }) : null]
+  });
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      ...(resolvedLabel !== undefined ? {
+        accessibilityLabel: resolvedLabel
+      } : null),
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessible: true,
+    ...(resolvedLabel !== undefined ? {
+      accessibilityLabel: resolvedLabel
+    } : null),
+    children: content
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(ValueBackMetric);

package/lib/commonjs/components/index.js

@@ -207,6 +207,12 @@ Object.defineProperty(exports, "CarouselCardAccounts", {
     return _CarouselCardAccounts.default;
   }
 });
+Object.defineProperty(exports, "CategoryCard", {
+  enumerable: true,
+  get: function () {
+    return _CategoryCard.default;
+  }
+});
 Object.defineProperty(exports, "CcCard", {
   enumerable: true,
   get: function () {
@@ -285,6 +291,12 @@ Object.defineProperty(exports, "ContentSheet", {
     return _ContentSheet.default;
   }
 });
+Object.defineProperty(exports, "CounterBadge", {
+  enumerable: true,
+  get: function () {
+    return _CounterBadge.default;
+  }
+});
 Object.defineProperty(exports, "CoverageBarComparison", {
   enumerable: true,
   get: function () {
@@ -369,6 +381,12 @@ Object.defineProperty(exports, "ExpandableCheckbox", {
     return _ExpandableCheckbox.default;
   }
 });
+Object.defineProperty(exports, "FavoriteToggle", {
+  enumerable: true,
+  get: function () {
+    return _FavoriteToggle.default;
+  }
+});
 Object.defineProperty(exports, "FilterBar", {
   enumerable: true,
   get: function () {
@@ -417,6 +435,12 @@ Object.defineProperty(exports, "HStack", {
     return _HStack.default;
   }
 });
+Object.defineProperty(exports, "HelloJioInput", {
+  enumerable: true,
+  get: function () {
+    return _HelloJioInput.default;
+  }
+});
 Object.defineProperty(exports, "HeroSection", {
   enumerable: true,
   get: function () {
@@ -987,6 +1011,12 @@ Object.defineProperty(exports, "VStack", {
     return _VStack.default;
   }
 });
+Object.defineProperty(exports, "ValueBackMetric", {
+  enumerable: true,
+  get: function () {
+    return _ValueBackMetric.default;
+  }
+});
 Object.defineProperty(exports, "addToast", {
   enumerable: true,
   get: function () {
@@ -1053,6 +1083,7 @@ var _CardFeedback = _interopRequireDefault(require("./CardFeedback/CardFeedback"
 var _CardFinancialCondition = _interopRequireDefault(require("./CardFinancialCondition/CardFinancialCondition"));
 var _CardInsight = _interopRequireDefault(require("./CardInsight/CardInsight"));
 var _CcCard = _interopRequireDefault(require("./CcCard/CcCard"));
+var _CategoryCard = _interopRequireDefault(require("./CategoryCard/CategoryCard"));
 var _Disclaimer = _interopRequireDefault(require("./Disclaimer/Disclaimer"));
 var _Divider = _interopRequireDefault(require("./Divider/Divider"));
 var _Drawer = _interopRequireDefault(require("./Drawer/Drawer"));
@@ -1079,6 +1110,7 @@ var _AllocationComparisonChart = _interopRequireDefault(require("./AllocationCom
 var _MonthlyStatusGrid = _interopRequireWildcard(require("./MonthlyStatusGrid/MonthlyStatusGrid"));
 var _Gauge = _interopRequireDefault(require("./Gauge/Gauge"));
 var _HeroSection = _interopRequireDefault(require("./HeroSection/HeroSection"));
+var _HelloJioInput = _interopRequireDefault(require("./HelloJioInput/HelloJioInput"));
 var _HoldingsCard = _interopRequireDefault(require("./HoldingsCard/HoldingsCard"));
 var _HStack = _interopRequireDefault(require("./HStack/HStack"));
 var _Icon = _interopRequireDefault(require("./Icon/Icon"));
@@ -1182,5 +1214,8 @@ var _SegmentedControl = _interopRequireDefault(require("./SegmentedControl/Segme
 var _Toggle = _interopRequireDefault(require("./Toggle/Toggle"));
 var _AutoplayControl = _interopRequireDefault(require("./AutoplayControl/AutoplayControl"));
 var _NumberPagination = _interopRequireDefault(require("./NumberPagination/NumberPagination"));
+var _CounterBadge = _interopRequireDefault(require("./CounterBadge/CounterBadge"));
+var _FavoriteToggle = _interopRequireDefault(require("./FavoriteToggle/FavoriteToggle"));
+var _ValueBackMetric = _interopRequireDefault(require("./ValueBackMetric/ValueBackMetric"));
 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 }; }