jfs-components 0.1.25 → 0.1.28

package/lib/typescript/src/components/AutoplayControl/AutoplayControl.d.ts

@@ -0,0 +1,15 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type AutoplayControlProps = {
+    state?: 'pause' | 'play';
+    modes?: Modes;
+    onPress?: () => void;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * AutoplayControl is a button component that toggles between play and pause states.
+ * All styling values are resolved from Figma design tokens.
+ */
+export default function AutoplayControl({ state, modes, onPress, disabled, style, }: AutoplayControlProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AutoplayControl.d.ts.map

package/lib/typescript/src/components/Carousel/Carousel.d.ts

@@ -28,12 +28,19 @@ export interface CarouselProps {
     paddingHorizontal?: number;
     /** Explicit vertical padding (px) for the outer container. Overrides `carousel/padding/vertical`. */
     paddingVertical?: number;
+    /**
+     * Carousel visual type.
+     * - `'Default'` — standard carousel with dot pagination below.
+     * - `'Numbered'` — full-bleed carousel with floating AutoplayControl and
+     *   NumberPagination overlaid at the bottom center.
+     */
+    type?: 'Default' | 'Numbered';
     /** Called when the active index changes. */
     onIndexChange?: (index: number) => void;
     /** Style overrides for the outermost container. */
     style?: StyleProp<ViewStyle>;
 }
-export declare function Carousel({ children, modes, autoPlay, autoPlayInterval, showPagination, loop, gap: gapProp, itemWidth: itemWidthProp, paddingHorizontal: paddingHorizontalProp, paddingVertical: paddingVerticalProp, onIndexChange, style, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+export declare function Carousel({ children, modes, autoPlay, autoPlayInterval, showPagination, loop, gap: gapProp, itemWidth: itemWidthProp, paddingHorizontal: paddingHorizontalProp, paddingVertical: paddingVerticalProp, type, onIndexChange, style, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Carousel {
     var Item: typeof import("./Carousel").Item;
     var Pagination: typeof import("./Carousel").Pagination;

package/lib/typescript/src/components/ContentSheet/ContentSheet.d.ts

@@ -15,6 +15,12 @@ export type ContentSheetProps = {
      * the same theme without you wiring `modes` onto each one.
      */
     modes?: Modes;
+    /**
+     * Optional title rendered in a centered, sticky header at the top of the
+     * sheet. Uses the same `drawer/title*` token family as the `Drawer` title so
+     * the two surfaces stay visually consistent.
+     */
+    title?: string;
     /**
      * Keep the sheet above the on-screen keyboard. When the keyboard opens the
      * sheet rises by exactly the keyboard height; when it closes the sheet drops
@@ -66,6 +72,6 @@ export type ContentSheetProps = {
  *  - **Token-driven** styling via `getVariableByName` + `modes`, with `modes`
  *    cascaded to all slot children.
  */
-declare function ContentSheet({ children, modes, avoidKeyboard, keyboardSpacing, safeAreaBottom, pinToBottom, style, ...rest }: ContentSheetProps): import("react/jsx-runtime").JSX.Element;
+declare function ContentSheet({ children, modes, title, avoidKeyboard, keyboardSpacing, safeAreaBottom, pinToBottom, style, ...rest }: ContentSheetProps): import("react/jsx-runtime").JSX.Element;
 export default ContentSheet;
 //# sourceMappingURL=ContentSheet.d.ts.map

package/lib/typescript/src/components/FormUpload/Additem.d.ts

@@ -0,0 +1,96 @@
+import React from 'react';
+import { type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type PickedAsset = {
+    /** URI to the selected file (image, video, or document). */
+    uri: string;
+    /** Original file name, when available. */
+    name?: string;
+    /** MIME type, when available. */
+    type?: string;
+    /** File size in bytes, when available. */
+    size?: number;
+    /** Image/video width in pixels, when available. */
+    width?: number;
+    /** Image/video height in pixels, when available. */
+    height?: number;
+};
+export type AdditemPickerResult = {
+    /** `true` when the user cancelled the picker. */
+    didCancel?: boolean;
+    /** Selected assets. Empty when cancelled. */
+    assets: PickedAsset[];
+    /** Native error message, when something went wrong. */
+    error?: string;
+};
+/**
+ * Callback that opens a platform picker and resolves with the selected assets.
+ * This is the integration point for libraries like `react-native-image-picker`,
+ * `expo-image-picker`, or `react-native-document-picker`.
+ */
+export type AdditemPicker = () => Promise<AdditemPickerResult>;
+export type AdditemState = 'empty' | 'preview';
+export type AdditemProps = {
+    /**
+     * Visual state of the item.
+     * - `'empty'` — shows the add/upload icon (default).
+     * - `'preview'` — shows `imageSource` and a remove icon overlay.
+     */
+    state?: AdditemState;
+    /**
+     * Image to preview when `state` is `'preview'`. Accepts the same shapes as
+     * the library's `Image` component (remote URI string, `{ uri }`, or `require()`).
+     */
+    imageSource?: ImageSourcePropType | string | undefined;
+    /**
+     * Called when the cell is pressed. In `'empty'` mode this is typically where
+     * the picker is launched; in `'preview'` mode it can open a preview/lightbox.
+     */
+    onPress?: () => void;
+    /**
+     * Called when the remove icon overlay is pressed in `'preview'` mode.
+     * Receives the press event so the parent can stop propagation if needed.
+     */
+    onRemove?: () => void;
+    /**
+     * Optional picker to invoke when the empty cell is pressed. When provided,
+     * `onPress` is ignored for the empty state and the cell becomes a real
+     * upload trigger that resolves with picked assets via `onAssetsPicked`.
+     */
+    picker?: AdditemPicker;
+    /**
+     * Called after a successful picker invocation with the selected assets.
+     */
+    onAssetsPicked?: (assets: PickedAsset[]) => void;
+    /**
+     * Modes for design-token resolution. Defaults to Neutral / Low / Icon Capsule
+     * Size S for the inner `IconCapsule` icons; any key supplied here overrides
+     * those defaults.
+     */
+    modes?: Modes;
+    /**
+     * Accessibility label. Defaults to a descriptive label based on state.
+     */
+    accessibilityLabel?: string;
+    /**
+     * Disables press interaction. Also dims the cell.
+     */
+    isDisabled?: boolean;
+    /** Test identifier. */
+    testID?: string;
+};
+/**
+ * `Additem` — a small, reusable upload/preview cell used inside form uploaders.
+ *
+ * In its default `'empty'` state it shows a centered add/upload icon. In
+ * `'preview'` state it renders a thumbnail with a removable overlay. The
+ * component is intentionally unopinionated about *how* files are picked: pass a
+ * `picker` callback that wraps `react-native-image-picker`,
+ * `expo-image-picker`, `react-native-document-picker`, or any custom selector,
+ * and the cell will invoke it, surface the result via `onAssetsPicked`, and
+ * handle cancellation/errors gracefully.
+ */
+declare function Additem({ state, imageSource, onPress, onRemove, picker, onAssetsPicked, modes: propModes, accessibilityLabel, isDisabled, testID, }: AdditemProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Additem>;
+export default _default;
+//# sourceMappingURL=Additem.d.ts.map

package/lib/typescript/src/components/FormUpload/FormUpload.d.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type AdditemProps, type PickedAsset } from './Additem';
+import type { Modes } from '../../design-tokens';
+export type FormUploadAttachment = PickedAsset;
+export type FormUploadProps = {
+    /** Label rendered above the upload row. */
+    label?: string;
+    /**
+     * Helper text rendered below the upload row. When `errorMessage` is provided,
+     * it replaces the support text and renders in the error status.
+     */
+    supportText?: string;
+    /**
+     * Field name. When used inside `<Form>`, this is the key used to look up
+     * server-side `validationErrors`.
+     */
+    name?: string;
+    /**
+     * Controlled list of attachments. Each item maps to an `Additem` cell:
+     * render attachments as `'preview'` cells and leave the last slot as the
+     * `'empty'` upload trigger.
+     */
+    attachments?: FormUploadAttachment[];
+    /**
+     * Maximum number of attachments allowed. When omitted, the component renders
+     * a single empty upload trigger. Once `attachments.length` reaches `maxCount`,
+     * the empty trigger is hidden.
+     */
+    maxCount?: number;
+    /**
+     * Called when the attachment list should change (add or remove). The parent
+     * is responsible for updating the `attachments` array.
+     */
+    onAttachmentsChange?: (attachments: FormUploadAttachment[]) => void;
+    /**
+     * Optional picker injected by the parent. This keeps the component free of
+     * native-library dependencies while still providing real upload behaviour on
+     * iOS/Android. The picker should wrap `react-native-image-picker`,
+     * `expo-image-picker`, `react-native-document-picker`, etc.
+     */
+    picker?: AdditemProps['picker'];
+    /**
+     * Error message shown below the row. When provided inside `<Form>`, the form
+     * context error is used automatically unless this prop is set explicitly.
+     */
+    errorMessage?: string;
+    /** Marks the field as invalid. Also set automatically by `<Form>` errors. */
+    isInvalid?: boolean;
+    /** Disables all upload interaction. */
+    isDisabled?: boolean;
+    /**
+     * Custom children/slot rendered in place of the generated `Additem` cells.
+     * Useful when the consumer wants full control over the upload row. `modes`
+     * cascade into slot children automatically.
+     */
+    children?: React.ReactNode;
+    /** Modes for design-token resolution. */
+    modes?: Modes;
+    /** Style overrides for the outermost wrapper. */
+    style?: StyleProp<ViewStyle>;
+    /** Style overrides for the upload row container. */
+    rowStyle?: StyleProp<ViewStyle>;
+    /** Accessibility label. Defaults to `label`. */
+    accessibilityLabel?: string;
+    /** Test identifier. */
+    testID?: string;
+};
+/**
+ * `FormUpload` — a form-aware upload row built from reusable `Additem` cells.
+ *
+ * The component mirrors the Figma "FormUpload" design: a label, a horizontal
+ * row of upload/preview cells, and support text. It integrates with the
+ * existing `<Form>` context so server-side validation errors automatically
+ * show below the row, and it clears those errors when attachments change.
+ *
+ * Upload behaviour is provided through the `picker` prop so the library stays
+ * free of native image-picker dependencies. Pass any picker that returns the
+ * `AdditemPickerResult` shape and the empty cell becomes a real upload trigger
+ * on both iOS and Android.
+ */
+declare function FormUpload({ label, supportText, name, attachments, maxCount, onAttachmentsChange, picker, errorMessage, isInvalid, isDisabled, children, modes: propModes, style, rowStyle, accessibilityLabel, testID, }: FormUploadProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormUpload>;
+export default _default;
+//# sourceMappingURL=FormUpload.d.ts.map

package/lib/typescript/src/components/Grid/Grid.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type GridJustifyContent = 'start' | 'stretch' | 'space-between';
+export type GridAlignItems = 'start' | 'stretch' | 'center';
+export type GridProps = {
+    /**
+     * Number of columns per row. Defaults to `1`. Children flow left-to-right,
+     * top-to-bottom into this many columns.
+     */
+    columns?: number;
+    /**
+     * Fixed row count. When set, the grid always renders `columns × rows` cells.
+     * Missing cells render as empty placeholders so the geometry stays stable.
+     * When omitted, the row count is derived from the number of children.
+     */
+    rows?: number;
+    /**
+     * Fractional column track weights — the React Native equivalent of CSS
+     * `grid-template-columns: 1fr 2fr 1fr`. Each value becomes a `flex` grow
+     * weight on the matching column. Shorter arrays repeat the last weight;
+     * omitted values default to equal `1fr` columns.
+     */
+    columnFrs?: readonly number[];
+    /**
+     * Fractional row track weights. When provided, each row container receives
+     * a matching `flexGrow` weight. Useful when the grid should fill a fixed
+     * height and rows should share space proportionally.
+     */
+    rowFrs?: readonly number[];
+    /** Override the resolved column gap token. */
+    columnGap?: number;
+    /** Override the resolved row gap token. */
+    rowGap?: number;
+    /**
+     * Shorthand gap override applied when `columnGap` / `rowGap` are not set
+     * individually. Falls back to the `Grid/gap` token.
+     */
+    gap?: number;
+    /** Uniform padding override for all sides. */
+    padding?: number;
+    paddingHorizontal?: number;
+    paddingVertical?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    /**
+     * How cells are distributed along each row.
+     * - `'stretch'` (default) — cells expand using `columnFrs`.
+     * - `'start'` — cells hug the leading edge; trailing space stays empty.
+     * - `'space-between'` — leftover space is distributed between cells
+     *   (first cell flush-left, last cell flush-right).
+     */
+    justifyContent?: GridJustifyContent;
+    /** Cross-axis alignment applied to every cell wrapper. Defaults to `'stretch'`. */
+    alignItems?: GridAlignItems;
+    /**
+     * Slot content. Each child becomes one grid cell. `modes` cascade into all
+     * slot children automatically.
+     */
+    children?: React.ReactNode;
+    /** Design token modes (e.g. `{ 'Slot gap': 'M' }`). */
+    modes?: Modes;
+    /** Style override for the outer container. */
+    style?: StyleProp<ViewStyle>;
+    /** Style override for the inner rows wrapper. */
+    contentStyle?: StyleProp<ViewStyle>;
+    /** Style applied to every cell wrapper. */
+    cellStyle?: StyleProp<ViewStyle>;
+    /** Accessibility label for the grid container. */
+    accessibilityLabel?: string;
+    testID?: string;
+};
+/**
+ * `Grid` — a token-driven layout grid for React Native.
+ *
+ * Mirrors the Figma "Grid" component: a padded container with configurable
+ * columns, rows, fractional column tracks (`columnFrs`), and gap tokens.
+ * Each slot child maps to one cell — no separate `GridItem` wrapper is needed.
+ *
+ * @component
+ */
+declare function Grid({ columns, rows, columnFrs, rowFrs, columnGap: columnGapProp, rowGap: rowGapProp, gap: gapProp, padding: paddingProp, paddingHorizontal: paddingHorizontalProp, paddingVertical: paddingVerticalProp, paddingTop: paddingTopProp, paddingBottom: paddingBottomProp, paddingLeft: paddingLeftProp, paddingRight: paddingRightProp, justifyContent, alignItems, children, modes: propModes, style, contentStyle, cellStyle, accessibilityLabel, testID, }: GridProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Grid>;
+export default _default;
+//# sourceMappingURL=Grid.d.ts.map

package/lib/typescript/src/components/NumberPagination/NumberPagination.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type NumberPaginationProps = {
+    /** The 1-based active page index. Ignored if `children` is supplied. Defaults to 1. */
+    activePage?: number;
+    /** The total number of pages. Ignored if `children` is supplied. Defaults to 1. */
+    totalPages?: number;
+    /** Callback fired when a page button is pressed. Ignored if `children` is supplied. */
+    onPageChange?: (page: number) => void;
+    /** Custom children to override the default page buttons. */
+    children?: React.ReactNode;
+    modes?: Modes;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * NumberPagination component displays a horizontal list of page numbers on a frosted glass surface.
+ * All styling is driven by Figma design tokens with support for custom children slot.
+ */
+export default function NumberPagination({ activePage, totalPages, onPageChange, children, modes, style, }: NumberPaginationProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NumberPagination.d.ts.map

package/lib/typescript/src/components/ProfileCard/ProfileCard.d.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle, type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * A single UPI handle pill rendered under the profile name.
+ */
+export interface ProfileCardUpiHandle {
+    /** Handle text, e.g. `"username@jio"` or a phone number. */
+    label: string;
+    /** Trailing registry icon (e.g. `'ic_copy'`, `'ic_confirm'`). */
+    iconName?: string;
+    /** Toggles the trailing icon. Defaults to `true`. */
+    showIcon?: boolean;
+    /** Makes the pill pressable (e.g. copy-to-clipboard). */
+    onPress?: () => void;
+}
+export interface ProfileCardProps {
+    /** User's display name shown in the header. */
+    name?: string;
+    /** Monogram initials for the avatar (used when `avatarSource` is not set). */
+    monogram?: string;
+    /** Avatar image source. When set, the avatar renders the image instead of the monogram. */
+    avatarSource?: ImageSourcePropType | string;
+    /**
+     * Registry icon for the small badge attached to the avatar's bottom-right
+     * corner. Pass `null` to hide the badge. Defaults to `'ic_qr_code'`.
+     */
+    badgeIcon?: string | null;
+    /** UPI handle pills rendered under the name. Pass `[]` to render none. */
+    upiHandles?: ProfileCardUpiHandle[];
+    /**
+     * Full override for the header row (avatar + name + handles). Takes
+     * precedence over the declarative header props. `modes` cascade into it.
+     */
+    header?: React.ReactNode;
+    /**
+     * Card body (the Figma "slot"). Rendered below the header divider; `modes`
+     * (including the profile-card context) cascade into every child, so nested
+     * `ListItem`s, `Divider`s, `Text`s and `Button`s resolve the on-dark
+     * profile-card token values automatically.
+     */
+    children?: React.ReactNode;
+    /** Toggles the divider between the header and the body. Defaults to `true`. */
+    showDivider?: boolean;
+    /** Card width. Defaults to the Figma spec (`344`). Pass `'100%'` to fill the parent. */
+    width?: number | `${number}%`;
+    /** Modes object for design-token resolution, cascaded to all children. */
+    modes?: Modes;
+    /** Style overrides for the card container. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the card. */
+    accessibilityLabel?: string;
+}
+/**
+ * ProfileCard — Figma node 6914:38498 ("Profile Card").
+ *
+ * A dark, rounded profile summary card composed from the shared primitives:
+ *
+ *  - **Header** — a {@link ListItem} whose leading slot is an {@link Attached}
+ *    monogram {@link Avatar} with a small {@link IconCapsule} badge at its
+ *    bottom-right, the user's name as the title, and a row of
+ *    {@link UpiHandle} pills in the support slot.
+ *  - **Divider** — separates the header from the body.
+ *  - **Body slot** — arbitrary children (typically `ListItem`s separated by
+ *    `Divider`s). All profile-card context modes cascade into the slot, so
+ *    nested components automatically resolve their on-dark token values.
+ *
+ * The card supports the `Profile Card Appearance` collection
+ * (`Default` | `Premium`) via the `modes` prop, which recolors the container,
+ * avatar, pills and divider in one go.
+ *
+ * @example
+ * ```tsx
+ * <ProfileCard
+ *   name="Shruti Chandarshekhar Rai"
+ *   monogram="SR"
+ *   upiHandles={[
+ *     { label: 'shrutirai-1@jio', iconName: 'ic_copy', onPress: copyHandle },
+ *     { label: '9184844184', iconName: 'ic_confirm' },
+ *   ]}
+ * >
+ *   <ListItem layout="Horizontal" title="JioFinance+" navArrow={false} />
+ * </ProfileCard>
+ * ```
+ */
+declare function ProfileCard({ name, monogram, avatarSource, badgeIcon, upiHandles, header, children, showDivider, width, modes: propModes, style, accessibilityLabel, }: ProfileCardProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ProfileCard>;
+export default _default;
+//# sourceMappingURL=ProfileCard.d.ts.map

package/lib/typescript/src/components/UpiHandle/UpiHandle.d.ts

@@ -12,6 +12,12 @@ type UpiHandleProps = {
      * inline SVG XML string, a `require()` asset, an SVG React component, or
      * an already-rendered element. See {@link UnifiedSource}. Avatars are
      * intentionally **not** tinted — the source renders as-is.
+     *
+     * The leading avatar is driven entirely by this prop: providing a `source`
+     * (or the deprecated `avatarSource`) force-sets the Figma "UPI Handle Image"
+     * collection to `True` and renders the avatar; omitting it force-sets the
+     * mode to `False` and hides it. This override wins over any `UPI Handle
+     * Image` value passed via `modes`.
      */
     source?: UnifiedSource;
     /**
@@ -41,7 +47,7 @@ type UpiHandleProps = {
  * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
  * @param {boolean} [props.showIcon=true] - Toggles the trailing icon visibility.
  * @param {string} [props.iconName='ic_scan_qr_code'] - Icon name from the actions set.
- * @param {UnifiedSource} [props.source] - Unified avatar source (URI, inline SVG XML, `require()` asset, SVG React component, or React element). Smart-detects raster vs SVG so the same prop works on iOS, Android and web.
+ * @param {UnifiedSource} [props.source] - Unified avatar source (URI, inline SVG XML, `require()` asset, SVG React component, or React element). Smart-detects raster vs SVG so the same prop works on iOS, Android and web. Providing a source force-sets `UPI Handle Image: True` (avatar shown); omitting it force-sets `False` (avatar hidden), overriding any `UPI Handle Image` value passed via `modes`.
  * @param {ImageSourcePropType|UnifiedSource} [props.avatarSource] - Deprecated alias for `source`; kept for back-compat.
  * @param {Function} [props.onClick] - Click/tap handler. Works as an alias for `onPress`.
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers

package/lib/typescript/src/components/index.d.ts

@@ -12,23 +12,23 @@ export { default as BrandChip, type BrandChipProps } from './BrandChip/BrandChip
 export { default as Button, type ButtonProps } from './Button/Button';
 export { default as Card } from './Card/Card';
 export { default as CardAdvisory, type CardAdvisoryProps } from './CardAdvisory/CardAdvisory';
-export { default as CardBankAccount, type CardBankAccountProps, type CardBankAccountItem } from './CardBankAccount/CardBankAccount';
+export { default as CardBankAccount, type CardBankAccountProps, type CardBankAccountItem, } from './CardBankAccount/CardBankAccount';
 export { default as Carousel } from './Carousel/Carousel';
 export type { CarouselProps, CarouselItemProps, PaginationProps } from './Carousel/Carousel';
-export { default as CarouselCardAccounts, type CarouselCardAccountsProps } from './CarouselCardAccounts/CarouselCardAccounts';
+export { default as CarouselCardAccounts, type CarouselCardAccountsProps, } from './CarouselCardAccounts/CarouselCardAccounts';
 export { default as Checkbox, type CheckboxProps } from './Checkbox/Checkbox';
 export { default as CheckboxItem, type CheckboxItemProps } from './CheckboxItem/CheckboxItem';
 export { default as CheckboxGroup, type CheckboxGroupProps } from './CheckboxGroup/CheckboxGroup';
 export { default as CardFeedback, type CardFeedbackProps } from './CardFeedback/CardFeedback';
-export { default as CardFinancialCondition, type CardFinancialConditionProps } from './CardFinancialCondition/CardFinancialCondition';
+export { default as CardFinancialCondition, type CardFinancialConditionProps, } from './CardFinancialCondition/CardFinancialCondition';
 export { default as CardInsight, type CardInsightProps } from './CardInsight/CardInsight';
 export { default as CcCard, type CcCardProps, type CcCardBadge, type CcCardListItem } from './CcCard/CcCard';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
 export { default as Drawer, type DrawerProps, type DrawerHandle } from './Drawer/Drawer';
 export { default as Dropdown, DropdownItem, type DropdownProps, type DropdownItemProps } from './Dropdown/Dropdown';
-export { default as DropdownInput, type DropdownInputProps, type DropdownInputHandle, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
-export { default as SuggestiveSearch, type SuggestiveSearchProps, type SuggestiveSearchOption, type SuggestiveSearchOptionValue, type SuggestiveSearchItem } from './SuggestiveSearch/SuggestiveSearch';
+export { default as DropdownInput, type DropdownInputProps, type DropdownInputHandle, type DropdownInputOption, type DropdownInputOptionValue, } from './DropdownInput/DropdownInput';
+export { default as SuggestiveSearch, type SuggestiveSearchProps, type SuggestiveSearchOption, type SuggestiveSearchOptionValue, type SuggestiveSearchItem, } from './SuggestiveSearch/SuggestiveSearch';
 export { default as CardCTA, type CardCTAProps, type CardCTAType, type CardCTATypeInput } from './CardCTA/CardCTA';
 export { default as DebitCard, type DebitCardProps } from './DebitCard/DebitCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
@@ -36,15 +36,18 @@ export { default as FullscreenModal, type FullscreenModalProps } from './Fullscr
 export { default as Form, type FormProps } from './Form/Form';
 export { useFormContext } from './Form/Form';
 export { default as FormField, type FormFieldProps, type FormFieldType } from './FormField/FormField';
+export { default as Grid, type GridProps, type GridJustifyContent, type GridAlignItems, } from './Grid/Grid';
+export { default as FormUpload, type FormUploadProps, type FormUploadAttachment } from './FormUpload/FormUpload';
+export { default as Additem, type AdditemProps, type AdditemPickerResult, type AdditemPicker, type PickedAsset, } from './FormUpload/Additem';
 export { default as ContentSheet, type ContentSheetProps } from './ContentSheet/ContentSheet';
-export { default as CircularProgressBar, type CircularProgressBarProps } from './CircularProgressBar/CircularProgressBar';
-export { default as CircularProgressBarDoted, type CircularProgressBarDotedProps } from './CircularProgressBarDoted/CircularProgressBarDoted';
+export { default as CircularProgressBar, type CircularProgressBarProps, } from './CircularProgressBar/CircularProgressBar';
+export { default as CircularProgressBarDoted, type CircularProgressBarDotedProps, } from './CircularProgressBarDoted/CircularProgressBarDoted';
 export { default as CircularRating, type CircularRatingProps } from './CircularRating/CircularRating';
 export { default as CoverageRing, type CoverageRingProps } from './CoverageRing/CoverageRing';
-export { default as CoverageBarComparison, type CoverageBarComparisonProps, type CoverageBarComparisonItem } from './CoverageBarComparison/CoverageBarComparison';
-export { default as ComparisonBar, type ComparisonBarProps, type ComparisonBarItem } from './ComparisonBar/ComparisonBar';
-export { default as AllocationComparisonChart, type AllocationComparisonChartProps, type AllocationSegment } from './AllocationComparisonChart/AllocationComparisonChart';
-export { default as MonthlyStatusGrid, CalendarGlyph, type MonthlyStatusGridProps, type MonthlyStatusGridMonth, type MonthlyStatus, type CalendarGlyphProps } from './MonthlyStatusGrid/MonthlyStatusGrid';
+export { default as CoverageBarComparison, type CoverageBarComparisonProps, type CoverageBarComparisonItem, } from './CoverageBarComparison/CoverageBarComparison';
+export { default as ComparisonBar, type ComparisonBarProps, type ComparisonBarItem, } from './ComparisonBar/ComparisonBar';
+export { default as AllocationComparisonChart, type AllocationComparisonChartProps, type AllocationSegment, } from './AllocationComparisonChart/AllocationComparisonChart';
+export { default as MonthlyStatusGrid, CalendarGlyph, type MonthlyStatusGridProps, type MonthlyStatusGridMonth, type MonthlyStatus, type CalendarGlyphProps, } from './MonthlyStatusGrid/MonthlyStatusGrid';
 export { default as Gauge, type GaugeProps } from './Gauge/Gauge';
 export { default as HeroSection, type HeroSectionProps } from './HeroSection/HeroSection';
 export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/HoldingsCard';
@@ -59,7 +62,7 @@ export { default as LinearMeter, type LinearMeterProps } from './LinearMeter/Lin
 export { default as LinearProgress, type LinearProgressProps } from './LinearProgress/LinearProgress';
 export { default as ListGroup } from './ListGroup/ListGroup';
 export { default as LottieIntroBlock, type LottieIntroBlockProps } from './LottieIntroBlock/LottieIntroBlock';
-export { default as LottiePlayer, type LottiePlayerProps, type LottieAnimationSource } from './LottiePlayer/LottiePlayer';
+export { default as LottiePlayer, type LottiePlayerProps, type LottieAnimationSource, } from './LottiePlayer/LottiePlayer';
 export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard, type MediaCardProps } from './MediaCard/MediaCard';
 export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile';
@@ -77,7 +80,7 @@ export { default as ScrollArea, type ScrollAreaProps, type ScrollDirection } fro
 export { default as Section } from './Section/Section';
 export { default as Slider, type SliderProps, type SliderHandle } from './Slider/Slider';
 export { default as Slot, type SlotProps, type SlotLayoutDirection } from './Slot/Slot';
-export { default as Stack, type StackProps, type StackLayoutDirection, } from './Stack/Stack';
+export { default as Stack, type StackProps, type StackLayoutDirection } from './Stack/Stack';
 export { default as Spinner, type SpinnerProps, type SpinnerColors } from './Spinner/Spinner';
 export { default as Stepper, type StepperProps } from './Stepper/Stepper';
 export { Step, type StepProps, type StepStatus } from './Stepper/Step';
@@ -104,7 +107,7 @@ export { default as ChipSelect, type ChipSelectProps } from './ChipSelect/ChipSe
 export { default as InputSearch, type InputSearchProps } from './InputSearch/InputSearch';
 export { default as InstitutionBadge, type InstitutionBadgeProps } from './InstitutionBadge/InstitutionBadge';
 export { default as SupportText, type SupportTextProps } from './SupportText/SupportText';
-export { default as SupportTextIcon, type SupportTextIconProps, type SupportTextStatus } from './SupportText/SupportTextIcon';
+export { default as SupportTextIcon, type SupportTextIconProps, type SupportTextStatus, } from './SupportText/SupportTextIcon';
 export { default as Radio, type RadioProps } from './Radio/Radio';
 /**
  * @deprecated Use `Radio` instead. `RadioButton` is kept as an alias for
@@ -112,31 +115,32 @@ export { default as Radio, type RadioProps } from './Radio/Radio';
  */
 export { default as RadioButton, type RadioButtonProps } from './RadioButton/RadioButton';
 export { default as RechargeCard, type RechargeCardProps } from './RechargeCard/RechargeCard';
-export { default as SavingsGoalSummary, type SavingsGoalSummaryProps, type SavingsGoalSummaryItem } from './SavingsGoalSummary/SavingsGoalSummary';
-export { default as DonutChart, type DonutChartProps, type DonutChartSegmentData, type DonutChartSegmentProps, DonutChartSegment } from './DonutChart/DonutChart';
-export { default as AreaLineChart, useChart, type AreaLineChartProps, type ChartSeries, type ChartPoint, type ChartInset, type GoalPinConfig, type ChartGridProps, type ChartXAxisProps, type ChartYAxisProps, type ChartGoalPinProps } from './AreaLineChart/AreaLineChart';
-export { default as ClusterBubble, type ClusterBubbleProps, type ClusterBubbleLabelPlacement, type ClusterBubbleLabelDirection } from './ClusterBubble/ClusterBubble';
+export { default as SavingsGoalSummary, type SavingsGoalSummaryProps, type SavingsGoalSummaryItem, } from './SavingsGoalSummary/SavingsGoalSummary';
+export { default as DonutChart, type DonutChartProps, type DonutChartSegmentData, type DonutChartSegmentProps, DonutChartSegment, } from './DonutChart/DonutChart';
+export { default as AreaLineChart, useChart, type AreaLineChartProps, type ChartSeries, type ChartPoint, type ChartInset, type GoalPinConfig, type ChartGridProps, type ChartXAxisProps, type ChartYAxisProps, type ChartGoalPinProps, } from './AreaLineChart/AreaLineChart';
+export { default as ClusterBubble, type ClusterBubbleProps, type ClusterBubbleLabelPlacement, type ClusterBubbleLabelDirection, } from './ClusterBubble/ClusterBubble';
 export { default as BubbleChart, type BubbleChartProps, type BubbleDatum } from './BubbleChart/BubbleChart';
-export { default as DonutChartSummary, type DonutChartSummaryProps, type DonutChartSummaryItem } from './DonutChartSummary/DonutChartSummary';
-export { default as RangeTrack, type RangeTrackProps, type RangeTrackTab, type RangeTrackItem } from './RangeTrack/RangeTrack';
-export { default as SegmentedTrack, type SegmentedTrackProps, type SegmentedTrackSegmentData, type SegmentedTrackSegmentProps, SegmentedTrackSegment } from './SegmentedTrack/SegmentedTrack';
+export { default as DonutChartSummary, type DonutChartSummaryProps, type DonutChartSummaryItem, } from './DonutChartSummary/DonutChartSummary';
+export { default as RangeTrack, type RangeTrackProps, type RangeTrackTab, type RangeTrackItem, } from './RangeTrack/RangeTrack';
+export { default as SegmentedTrack, type SegmentedTrackProps, type SegmentedTrackSegmentData, type SegmentedTrackSegmentProps, SegmentedTrackSegment, } from './SegmentedTrack/SegmentedTrack';
 export { default as Tabs, type TabsProps } from './Tabs/Tabs';
 export { default as TabItem, type TabItemProps } from './Tabs/TabItem';
 export { default as Toast, type ToastProps } from './Toast/Toast';
 export { default as ToastProvider, type ToastProviderProps } from './Toast/ToastProvider';
-export { useToast, addToast, closeToast, closeAll, type ToastOptions, type ToastEntry, type ToastPlacement } from './Toast/useToast';
+export { useToast, addToast, closeToast, closeAll, type ToastOptions, type ToastEntry, type ToastPlacement, } from './Toast/useToast';
 export { default as AmountInput, type AmountInputProps } from './AmountInput/AmountInput';
 export { default as PageHero, type PageHeroProps } from './PageHero/PageHero';
 export { default as PdpCcCard, type PdpCcCardProps, type PdpCcCardMetric } from './PdpCcCard/PdpCcCard';
 export { default as Popup, type PopupProps, type PopupRef } from './Popup/Popup';
 export { default as PortfolioHero, type PortfolioHeroProps } from './PortfolioHero/PortfolioHero';
-export { default as PlanComparisonCard, type PlanComparisonCardProps, type PlanComparisonColumn, type PlanComparisonRow, type PlanComparisonCellValue } from './PlanComparisonCard/PlanComparisonCard';
-export { default as CompareTable, type CompareTableProps, type CompareTableColumn, type CompareTableRow, type CompareTableCellValue, type CompareTableSection } from './CompareTable/CompareTable';
+export { default as PlanComparisonCard, type PlanComparisonCardProps, type PlanComparisonColumn, type PlanComparisonRow, type PlanComparisonCellValue, } from './PlanComparisonCard/PlanComparisonCard';
+export { default as CompareTable, type CompareTableProps, type CompareTableColumn, type CompareTableRow, type CompareTableCellValue, type CompareTableSection, } from './CompareTable/CompareTable';
 export { default as Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell, type TableProps, type TableColumn, type TableCellAlign, type TableHeaderProps, type TableHeaderCellProps, type TableBodyProps, type TableRowProps, type TableCellProps, } from './Table/Table';
 export { default as PoweredByLabel, type PoweredByLabelProps } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel, type ProductLabelProps } from './ProductLabel/ProductLabel';
-export { default as ProductMerchandisingCard, type ProductMerchandisingCardProps } from './ProductMerchandisingCard/ProductMerchandisingCard';
-export { default as ProductOverview, type ProductOverviewProps, type ProductOverviewStat } from './ProductOverview/ProductOverview';
+export { default as ProfileCard, type ProfileCardProps, type ProfileCardUpiHandle } from './ProfileCard/ProfileCard';
+export { default as ProductMerchandisingCard, type ProductMerchandisingCardProps, } from './ProductMerchandisingCard/ProductMerchandisingCard';
+export { default as ProductOverview, type ProductOverviewProps, type ProductOverviewStat, } from './ProductOverview/ProductOverview';
 export { default as ProjectionMarker, type ProjectionMarkerProps } from './ProjectionMarker/ProjectionMarker';
 export { default as ProgressBadge, type ProgressBadgeProps } from './ProgressBadge/ProgressBadge';
 export { default as SwappableAmount, type SwappableAmountProps } from './SwappableAmount/SwappableAmount';
@@ -144,11 +148,13 @@ export { default as OTP, OTPResend, useOtpResend, type OTPProps, type OTPResendP
 export { default as PaymentFeedback, type PaymentFeedbackProps } from './PaymentFeedback/PaymentFeedback';
 export { default as StatItem, type StatItemProps, type StatItemLabelPosition } from './StatItem/StatItem';
 export { default as StatGroup, type StatGroupProps, type StatGroupItem } from './StatGroup/StatGroup';
-export { default as StrengthIndicator, type StrengthIndicatorProps, type StrengthIndicatorConfidence, type StrengthIndicatorConfidenceValue } from './StrengthIndicator/StrengthIndicator';
+export { default as StrengthIndicator, type StrengthIndicatorProps, type StrengthIndicatorConfidence, type StrengthIndicatorConfidenceValue, } from './StrengthIndicator/StrengthIndicator';
 export { default as SummaryTile, type SummaryTileProps } from './SummaryTile/SummaryTile';
 export { default as TestimonialsCard, type TestimonialsCardProps } from './TestimonialsCard/TestimonialsCard';
 export { default as Text, type TextProps } from './Text/Text';
 export { default as TextSegment, type TextSegmentProps, type TextSegmentRun } from './TextSegment/TextSegment';
-export { default as SegmentedControl, type SegmentedControlProps, type SegmentedControlItem } from './SegmentedControl/SegmentedControl';
+export { default as SegmentedControl, type SegmentedControlProps, type SegmentedControlItem, } from './SegmentedControl/SegmentedControl';
 export { default as Toggle, type ToggleProps } from './Toggle/Toggle';
+export { default as AutoplayControl, type AutoplayControlProps } from './AutoplayControl/AutoplayControl';
+export { default as NumberPagination, type NumberPaginationProps } from './NumberPagination/NumberPagination';
 //# sourceMappingURL=index.d.ts.map