jfs-components 0.0.74 → 0.0.78

package/lib/module/components/SuggestiveSearch/SuggestiveSearch.js

@@ -0,0 +1,481 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Platform, Pressable, Text, TextInput as RNTextInput, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import SupportText from '../SupportText/SupportText';
+import Dropdown, { DropdownItem } from '../Dropdown/Dropdown';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IS_WEB = Platform.OS === 'web';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/**
+ * Suggestions accept either a bare string (used as both value and label) or a
+ * full `{ value, label }` option object for richer data.
+ */
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function toNumber(value, fallback) {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+function normalizeItem(item) {
+  if (typeof item === 'string') return {
+    value: item,
+    label: item
+  };
+  return item;
+}
+const defaultFilter = (query, option) => option.label.toLowerCase().includes(query.toLowerCase());
+
+// ---------------------------------------------------------------------------
+// Token resolution
+// ---------------------------------------------------------------------------
+
+function useFormFieldTokens(modes) {
+  return useMemo(() => {
+    const labelColor = getVariableByName('formField/label/color', modes) || '#000000';
+    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes) || 'JioType Var';
+    const labelFontSize = toNumber(getVariableByName('formField/label/fontSize', modes), 14);
+    const labelLineHeight = toNumber(getVariableByName('formField/label/lineHeight', modes), 17);
+    const labelFontWeight = getVariableByName('formField/label/fontWeight', modes) || '500';
+    const gap = toNumber(getVariableByName('formField/gap', modes), 8);
+    const inputPaddingH = toNumber(getVariableByName('formField/input/padding/horizontal', modes), 12);
+    const inputGap = toNumber(getVariableByName('formField/input/gap', modes), 8);
+    const inputRadius = toNumber(getVariableByName('formField/input/radius', modes), 8);
+    const inputBorderSize = toNumber(getVariableByName('formField/input/border/size', modes), 1.5);
+    const inputBackground = getVariableByName('formField/input/background', modes) || '#ffffff';
+    const inputBorderColor = getVariableByName('formField/input/border/color', modes) || '#b5b6b7';
+    const inputFontSize = toNumber(getVariableByName('formField/input/label/fontSize', modes), 16);
+    const inputLineHeight = toNumber(getVariableByName('formField/input/label/lineHeight', modes), 45);
+    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes) || 'JioType Var';
+    const inputFontWeight = getVariableByName('formField/input/label/fontWeight', modes) || '400';
+    const inputTextColor = getVariableByName('formField/input/label/color', modes) || '#24262b';
+    return {
+      labelColor,
+      labelFontFamily,
+      labelFontSize,
+      labelLineHeight,
+      labelFontWeight,
+      gap,
+      inputPaddingH,
+      inputGap,
+      inputRadius,
+      inputBorderSize,
+      inputBackground,
+      inputBorderColor,
+      inputFontSize,
+      inputLineHeight,
+      inputFontFamily,
+      inputFontWeight,
+      inputTextColor
+    };
+  }, [modes]);
+}
+function useDropdownItemTextTokens(modes) {
+  return useMemo(() => {
+    const foreground = getVariableByName('dropdownItem/foreground', modes) || '#000000';
+    const fontFamily = getVariableByName('dropdownItem/fontFamily', modes) || 'JioType Var';
+    const fontSize = toNumber(getVariableByName('dropdownItem/fontSize', modes), 16);
+    const lineHeight = toNumber(getVariableByName('dropdownItem/lineHeight', modes), 19);
+    return {
+      foreground,
+      fontFamily,
+      fontSize,
+      lineHeight
+    };
+  }, [modes]);
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function SuggestiveSearch({
+  label,
+  placeholder = 'Search',
+  items,
+  inputValue,
+  defaultInputValue = '',
+  onInputChange,
+  value,
+  defaultValue = null,
+  onValueChange,
+  filter = defaultFilter,
+  minChars = 1,
+  maxResults,
+  highlightMatch = true,
+  emptyMessage,
+  renderItem,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  menuMaxHeight = 240,
+  menuOffset = 6,
+  isRequired = false,
+  isDisabled = false,
+  isInvalid = false,
+  isReadOnly = false,
+  supportText,
+  errorMessage,
+  modes: propModes = EMPTY_MODES,
+  style,
+  inputStyle,
+  inputTextStyle,
+  menuStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  onFocus,
+  onBlur,
+  testID
+}) {
+  // ---------------- Modes ----------------
+  const {
+    modes: globalModes
+  } = useTokens();
+  const baseModes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const interactive = !isDisabled && !isReadOnly;
+
+  // ---------------- Query state ----------------
+  const isControlledInput = inputValue !== undefined;
+  const [internalInput, setInternalInput] = useState(defaultInputValue);
+  const query = isControlledInput ? inputValue : internalInput;
+
+  // ---------------- Selected value state ----------------
+  const isControlledValue = value !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = isControlledValue ? value : internalValue;
+
+  // ---------------- Open state ----------------
+  const isControlledOpen = open !== undefined;
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const [isFocused, setIsFocused] = useState(false);
+  const setOpenState = useCallback(next => {
+    if (!isControlledOpen) setInternalOpen(next);
+    onOpenChange?.(next);
+  }, [isControlledOpen, onOpenChange]);
+
+  // ---------------- Suggestions ----------------
+  const normalizedItems = useMemo(() => (items ?? []).map(normalizeItem), [items]);
+  const suggestions = useMemo(() => {
+    const trimmed = query.trim();
+    if (trimmed.length < minChars) return [];
+    const matched = normalizedItems.filter(opt => filter(query, opt));
+    return maxResults != null ? matched.slice(0, maxResults) : matched;
+  }, [normalizedItems, query, minChars, filter, maxResults]);
+  const hasSuggestions = suggestions.length > 0;
+  const showEmpty = Boolean(emptyMessage && query.trim().length >= minChars && !hasSuggestions);
+  const hasMenuContent = hasSuggestions || showEmpty;
+
+  // Resolved open state: an explicit `open` prop wins; otherwise the dropdown
+  // tracks the internal "wants suggestions" flag (set on focus / typing,
+  // cleared on blur / select). Blur and outside-press handle dismissal, so we
+  // intentionally do NOT gate on `isFocused` here — that would suppress
+  // `defaultOpen` on mount.
+  const isOpen = interactive && (isControlledOpen ? Boolean(open) : internalOpen) && hasMenuContent;
+
+  // ---------------- Token modes (state cascade) ----------------
+  const modes = useMemo(() => ({
+    ...baseModes,
+    'FormField States': isInvalid ? 'Error' : isReadOnly || isDisabled ? 'Read Only' : isFocused ? 'Active' : baseModes['FormField States'] || 'Idle'
+  }), [baseModes, isInvalid, isReadOnly, isDisabled, isFocused]);
+  const tokens = useFormFieldTokens(modes);
+  const itemTextTokens = useDropdownItemTextTokens(modes);
+
+  // ---------------- Handlers ----------------
+  const inputRef = useRef(null);
+  const blurTimer = useRef(null);
+  const clearBlurTimer = useCallback(() => {
+    if (blurTimer.current) {
+      clearTimeout(blurTimer.current);
+      blurTimer.current = null;
+    }
+  }, []);
+  useEffect(() => () => clearBlurTimer(), [clearBlurTimer]);
+  const setQuery = useCallback(text => {
+    if (!isControlledInput) setInternalInput(text);
+    onInputChange?.(text);
+  }, [isControlledInput, onInputChange]);
+  const handleChangeText = useCallback(text => {
+    setQuery(text);
+    // Typing invalidates a prior selection unless the text still
+    // exactly matches the selected option's label.
+    if (currentValue != null) {
+      const selected = normalizedItems.find(o => o.value === currentValue);
+      if (!selected || selected.label !== text) {
+        if (!isControlledValue) setInternalValue(null);
+        onValueChange?.(null);
+      }
+    }
+    if (!isControlledOpen) setInternalOpen(true);
+  }, [setQuery, currentValue, normalizedItems, isControlledValue, onValueChange, isControlledOpen]);
+  const handleSelect = useCallback(selectedValue => {
+    clearBlurTimer();
+    const option = normalizedItems.find(o => o.value === selectedValue);
+    if (!option || option.disabled) return;
+    setQuery(option.label);
+    if (!isControlledValue) setInternalValue(option.value);
+    onValueChange?.(option.value, option);
+    setOpenState(false);
+    inputRef.current?.blur();
+  }, [clearBlurTimer, normalizedItems, setQuery, isControlledValue, onValueChange, setOpenState]);
+  const handleFocus = useCallback(e => {
+    clearBlurTimer();
+    setIsFocused(true);
+    if (!isControlledOpen) setInternalOpen(true);
+    onFocus?.(e);
+  }, [clearBlurTimer, isControlledOpen, onFocus]);
+  const handleBlur = useCallback(e => {
+    // Delay closing so a suggestion press (which blurs the input first
+    // on web) still registers before the list unmounts.
+    clearBlurTimer();
+    blurTimer.current = setTimeout(() => {
+      setIsFocused(false);
+      if (!isControlledOpen) setInternalOpen(false);
+    }, 120);
+    onBlur?.(e);
+  }, [clearBlurTimer, isControlledOpen, onBlur]);
+
+  // ---------------- Web outside-press to close ----------------
+  const rootRef = useRef(null);
+  useEffect(() => {
+    if (!IS_WEB || !isOpen) return;
+    const handler = e => {
+      const node = rootRef.current;
+      if (node?.contains && !node.contains(e.target)) {
+        clearBlurTimer();
+        setIsFocused(false);
+        if (!isControlledOpen) setInternalOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [isOpen, isControlledOpen, clearBlurTimer]);
+
+  // ---------------- Styles ----------------
+  const labelTextStyle = {
+    color: tokens.labelColor,
+    fontFamily: tokens.labelFontFamily,
+    fontSize: tokens.labelFontSize,
+    lineHeight: tokens.labelLineHeight,
+    fontWeight: tokens.labelFontWeight
+  };
+  const requiredIndicatorStyle = {
+    ...labelTextStyle,
+    color: '#d93d3d'
+  };
+  const wrapperStyle = {
+    gap: tokens.gap,
+    opacity: isDisabled ? 0.5 : 1,
+    width: '100%',
+    position: 'relative',
+    // Keep the dropdown above sibling content when it overflows the field.
+    zIndex: isOpen ? 1000 : undefined
+  };
+  const inputRowStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: tokens.inputBackground,
+    borderColor: tokens.inputBorderColor,
+    borderWidth: tokens.inputBorderSize,
+    borderStyle: 'solid',
+    borderRadius: tokens.inputRadius,
+    paddingHorizontal: tokens.inputPaddingH,
+    paddingVertical: 0,
+    gap: tokens.inputGap,
+    minHeight: tokens.inputLineHeight,
+    width: '100%'
+  };
+  const inputTextStyles = {
+    flex: 1,
+    color: tokens.inputTextColor,
+    fontFamily: tokens.inputFontFamily,
+    fontSize: tokens.inputFontSize,
+    lineHeight: tokens.inputLineHeight,
+    fontWeight: tokens.inputFontWeight,
+    padding: 0,
+    margin: 0,
+    ...(IS_WEB ? {
+      outlineStyle: 'none',
+      outlineWidth: 0,
+      outlineColor: 'transparent'
+    } : {})
+  };
+  const placeholderColor = '#888a8d';
+  const itemBaseTextStyle = {
+    flex: 1,
+    color: itemTextTokens.foreground,
+    fontFamily: itemTextTokens.fontFamily,
+    fontSize: itemTextTokens.fontSize,
+    lineHeight: itemTextTokens.lineHeight,
+    fontWeight: '400'
+  };
+
+  // ---------------- Support text ----------------
+  const supportStatus = isInvalid ? 'Error' : 'Neutral';
+  const supportLabel = isInvalid && errorMessage ? errorMessage : supportText;
+
+  // ---------------- Accessibility ----------------
+  const resolvedA11yLabel = accessibilityLabel || label || placeholder || 'Search';
+  const a11yProps = {
+    accessibilityRole: IS_WEB ? undefined : 'search',
+    accessibilityLabel: resolvedA11yLabel,
+    accessibilityState: {
+      disabled: isDisabled,
+      expanded: isOpen
+    }
+  };
+  if (accessibilityHint) a11yProps.accessibilityHint = accessibilityHint;
+
+  // ---------------- Suggestion highlight ----------------
+  const renderHighlighted = useCallback(optLabel => {
+    const trimmed = query.trim();
+    if (!highlightMatch || trimmed.length === 0) {
+      return /*#__PURE__*/_jsx(Text, {
+        style: itemBaseTextStyle,
+        children: optLabel
+      });
+    }
+    const idx = optLabel.toLowerCase().indexOf(trimmed.toLowerCase());
+    if (idx < 0) {
+      return /*#__PURE__*/_jsx(Text, {
+        style: itemBaseTextStyle,
+        children: optLabel
+      });
+    }
+    const before = optLabel.slice(0, idx);
+    const match = optLabel.slice(idx, idx + trimmed.length);
+    const after = optLabel.slice(idx + trimmed.length);
+    return /*#__PURE__*/_jsxs(Text, {
+      style: itemBaseTextStyle,
+      children: [before, /*#__PURE__*/_jsx(Text, {
+        style: {
+          fontWeight: '700'
+        },
+        children: match
+      }), after]
+    });
+  }, [query, highlightMatch, itemBaseTextStyle]);
+
+  // ---------------- Render ----------------
+  return /*#__PURE__*/_jsxs(View, {
+    ref: rootRef,
+    style: [wrapperStyle, style],
+    pointerEvents: isDisabled ? 'none' : 'auto',
+    testID: testID,
+    children: [label != null && /*#__PURE__*/_jsxs(View, {
+      style: styles.labelRow,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: labelTextStyle,
+        children: label
+      }), isRequired && /*#__PURE__*/_jsx(Text, {
+        style: requiredIndicatorStyle,
+        children: " *"
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.anchor,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        style: [inputRowStyle, inputStyle],
+        onPress: () => inputRef.current?.focus(),
+        accessible: false,
+        children: /*#__PURE__*/_jsx(RNTextInput, {
+          ref: inputRef,
+          style: [inputTextStyles, inputTextStyle],
+          value: query,
+          onChangeText: handleChangeText,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          placeholder: placeholder,
+          placeholderTextColor: placeholderColor,
+          editable: interactive,
+          autoCapitalize: "none",
+          autoComplete: "off",
+          autoCorrect: false,
+          ...a11yProps,
+          ...(IS_WEB ? {
+            accessibilityRole: 'search',
+            'aria-autocomplete': 'list',
+            'aria-expanded': isOpen
+          } : {})
+        })
+      }), isOpen && /*#__PURE__*/_jsx(View, {
+        style: [styles.popup, {
+          top: '100%',
+          marginTop: menuOffset
+        }]
+        // Keep taps from dismissing the keyboard before the
+        // item's press handler runs on native.
+        ,
+        children: /*#__PURE__*/_jsx(Dropdown, {
+          modes: modes,
+          maxHeight: menuMaxHeight,
+          style: menuStyle,
+          accessibilityLabel: `${resolvedA11yLabel} suggestions`,
+          children: hasSuggestions ? suggestions.map(opt => {
+            const isSelected = opt.value === currentValue;
+            return /*#__PURE__*/_jsx(DropdownItem, {
+              value: opt.value,
+              selected: isSelected,
+              disabled: opt.disabled ?? false,
+              onPress: handleSelect,
+              modes: modes,
+              children: renderItem ? renderItem(opt, {
+                query,
+                isSelected
+              }) : renderHighlighted(opt.label)
+            }, `sg-${opt.value}`);
+          }) : showEmpty && /*#__PURE__*/_jsx(View, {
+            style: styles.emptyRow,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [itemBaseTextStyle, {
+                color: placeholderColor
+              }],
+              children: emptyMessage
+            })
+          })
+        })
+      })]
+    }), supportLabel != null && supportLabel !== '' && /*#__PURE__*/_jsx(SupportText, {
+      label: supportLabel,
+      status: supportStatus,
+      modes: modes
+    })]
+  });
+}
+const styles = {
+  labelRow: {
+    flexDirection: 'row',
+    alignItems: 'baseline'
+  },
+  anchor: {
+    position: 'relative',
+    width: '100%',
+    zIndex: 1
+  },
+  popup: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 1000
+  },
+  emptyRow: {
+    paddingHorizontal: 12,
+    paddingVertical: 12
+  }
+};
+export default SuggestiveSearch;

package/lib/module/components/Text/Text.js

@@ -4,6 +4,8 @@ import React from 'react';
 import { Text as RNText } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import Skeleton from '../../skeleton/Skeleton';
+import { useSkeleton } from '../../skeleton/SkeletonGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
 const TEXT_ALIGN_MAP = {
   Left: 'left',
@@ -15,7 +17,10 @@ function Text({
   textAlign = 'Left',
   modes = EMPTY_MODES,
   style,
-  numberOfLines
+  numberOfLines,
+  loading,
+  skeletonWidth,
+  skeletonLines
 }) {
   const foreground = getVariableByName('text/foreground', modes) ?? '#000000';
   const fontFamily = getVariableByName('text/fontFamily', modes) ?? 'JioType';
@@ -23,6 +28,31 @@ function Text({
   const fontWeight = getVariableByName('text/fontWeight', modes) ?? '500';
   const lineHeight = getVariableByName('text/lineHeight', modes) ?? 20;
   const letterSpacing = getVariableByName('text/letterSpacing', modes) ?? -0.5;
+
+  // Skeleton short-circuit. The hook is always called (stable order); the
+  // surrounding group's `active` flag is the default, but an explicit
+  // `loading` prop overrides both directions.
+  const {
+    active: groupActive
+  } = useSkeleton();
+  const isLoading = loading ?? groupActive;
+  if (isLoading) {
+    const resolvedFontSize = fontSize;
+    const resolvedLineHeight = lineHeight;
+    const lines = Math.max(1, skeletonLines ?? numberOfLines ?? 1);
+    // Heuristic width based on the actual content length so the placeholder
+    // visually matches what's about to load. Capped to a reasonable lower
+    // bound so very short labels still produce a visible block.
+    const contentLength = typeof children === 'string' ? children.length : typeof text === 'string' ? text.length : 12;
+    const charWidth = resolvedFontSize * 0.55;
+    const computedWidth = Math.max(charWidth * 4, contentLength * charWidth);
+    return /*#__PURE__*/_jsx(Skeleton, {
+      kind: "text",
+      width: skeletonWidth ?? computedWidth,
+      height: resolvedLineHeight * lines,
+      modes: modes
+    });
+  }
   const textStyle = {
     color: foreground,
     fontFamily: fontFamily,

package/lib/module/components/TextInput/TextInput.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Pressable, View, TextInput as RNTextInput } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
@@ -114,6 +114,11 @@ function TextInput({
   // Track focus state to hide placeholder when focused
   const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
+  // Ref to the underlying native input so a tap anywhere inside the Pressable
+  // wrapper can programmatically focus it. Without this, on Android the
+  // wrapping Pressable becomes the touch responder on the first tap and the
+  // native input only gains focus on the *second* tap.
+  const inputRef = useRef(null);
 
   // Resolve container tokens
   const backgroundColor = getVariableByName('textInput/background', modes) || '#f5f5f5';
@@ -207,12 +212,22 @@ function TextInput({
   return /*#__PURE__*/_jsxs(Pressable, {
     style: [containerStyle, focusContainerStyle, hoverStyle, style],
     onHoverIn: () => setIsHovered(true),
-    onHoverOut: () => setIsHovered(false),
+    onHoverOut: () => setIsHovered(false)
+    // Forward taps on the wrapper (padding, leading icon gutter, etc.) to the
+    // native input. This guarantees the keyboard opens on the FIRST tap on
+    // Android instead of requiring a second tap.
+    ,
+    onPress: () => inputRef.current?.focus()
+    // The native input is the real accessible element; don't add a redundant
+    // focusable node for screen readers.
+    ,
+    accessible: false,
     children: [processedLeading && /*#__PURE__*/_jsx(View, {
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: processedLeading
     }), /*#__PURE__*/_jsx(RNTextInput, {
+      ref: inputRef,
       accessibilityLabel: undefined,
       accessibilityHint: accessibilityHint,
       placeholder: displayPlaceholder,

package/lib/module/components/Title/Title.js

@@ -35,13 +35,21 @@ function Title({
   const gap = getVariableByName('title/gap', modes) || 8;
   const labelColor = getVariableByName('title/label/color', modes) || '#0d0d0f';
   const fontSize = getVariableByName('title/fontSize', modes) || 26;
-  const lineHeight = getVariableByName('title/lineHeight', modes) || 26;
+  const rawLineHeight = getVariableByName('title/lineHeight', modes) || 26;
+  // The Figma title tokens ship with `lineHeight === fontSize` (26/26). On
+  // native (especially Android) that produces a Text box exactly `lineHeight`
+  // tall, which clips descenders like p/g/y/q/j at the bottom — particularly
+  // noticeable with `numberOfLines={1}`. Clamp to ~1.2x fontSize so descenders
+  // always fit. When a downstream token already provides adequate leading,
+  // the original value is preserved.
+  const lineHeight = Math.max(rawLineHeight, Math.ceil(fontSize * 1.2));
   const fontFamily = getVariableByName('title/fontFamily', modes) || 'System';
   const fontWeightRaw = getVariableByName('title/fontWeight', modes) || 900;
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
   const subtitleColor = getVariableByName('pageSubtitle/label/color', modes) || '#0d0d0f';
   const subtitleFontSize = getVariableByName('pageSubtitle/fontSize', modes) || 14;
-  const subtitleLineHeight = getVariableByName('pageSubtitle/lineHeight', modes) || 18;
+  const subtitleRawLineHeight = getVariableByName('pageSubtitle/lineHeight', modes) || 18;
+  const subtitleLineHeight = Math.max(subtitleRawLineHeight, Math.ceil(subtitleFontSize * 1.2));
   const subtitleFontFamily = getVariableByName('pageSubtitle/fontFamily', modes) || 'System';
   const subtitleFontWeightRaw = getVariableByName('pageSubtitle/fontWeight', modes) || 500;
   const subtitleFontWeight = typeof subtitleFontWeightRaw === 'number' ? subtitleFontWeightRaw.toString() : subtitleFontWeightRaw;

package/lib/module/components/index.js

@@ -25,9 +25,11 @@ export { default as Divider } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
 export { default as Dropdown, DropdownItem } from './Dropdown/Dropdown';
 export { default as DropdownInput } from './DropdownInput/DropdownInput';
+export { default as SuggestiveSearch } from './SuggestiveSearch/SuggestiveSearch';
 export { default as CardCTA } from './CardCTA/CardCTA';
 export { default as DebitCard } from './DebitCard/DebitCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
+export { default as FullscreenModal } from './FullscreenModal/FullscreenModal';
 export { default as Form } from './Form/Form';
 export { useFormContext } from './Form/Form';
 export { default as FormField } from './FormField/FormField';
@@ -48,9 +50,11 @@ export { default as LinearMeter } from './LinearMeter/LinearMeter';
 export { default as LinearProgress } from './LinearProgress/LinearProgress';
 export { default as ListGroup } from './ListGroup/ListGroup';
 export { default as LottieIntroBlock } from './LottieIntroBlock/LottieIntroBlock';
+export { default as LottiePlayer } from './LottiePlayer/LottiePlayer';
 export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard } from './MediaCard/MediaCard';
 export { default as MerchantProfile } from './MerchantProfile/MerchantProfile';
+export { default as MessageField } from './MessageField/MessageField';
 export { default as MetricLegendItem } from './MetricLegendItem/MetricLegendItem';
 export { default as MoneyValue } from './MoneyValue/MoneyValue';
 export { default as NoteInput } from './NoteInput/NoteInput';
@@ -74,6 +78,7 @@ export { default as UpiHandle } from './UpiHandle/UpiHandle';
 export { default as VStack } from './VStack/VStack';
 export { default as ChipGroup } from './ChipGroup/ChipGroup';
 export { default as EmptyState } from './EmptyState/EmptyState';
+export { default as ExpandableCheckbox } from './ExpandableCheckbox/ExpandableCheckbox';
 export { default as Accordion } from './Accordion/Accordion';
 export { default as AccordionCheckbox } from './AccordionCheckbox/AccordionCheckbox';
 export { default as ActionTile } from './ActionTile/ActionTile';