@billdog.io/react-native 1.0.0-beta.2

package/dist/components/GradientView.js

@@ -0,0 +1,126 @@
+"use strict";
+/**
+ * GradientView Component
+ * Wraps content with a gradient background using LinearGradient
+ * Falls back to solid color if LinearGradient is not available
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GradientView = void 0;
+exports.isGradientSupported = isGradientSupported;
+exports.getGradientStyleOrFallback = getGradientStyleOrFallback;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const CSSConverter_1 = require("../utils/CSSConverter");
+// Try to import LinearGradient - user must have expo-linear-gradient or react-native-linear-gradient installed
+let LinearGradient = null;
+try {
+    // Try expo-linear-gradient first (most common in Expo projects)
+    LinearGradient = require('expo-linear-gradient').LinearGradient;
+}
+catch {
+    try {
+        // Fall back to react-native-linear-gradient
+        LinearGradient = require('react-native-linear-gradient').default;
+    }
+    catch {
+        // LinearGradient not available - will use fallback
+        LinearGradient = null;
+    }
+}
+/**
+ * GradientView renders a gradient background
+ * Uses LinearGradient if available, falls back to first stop color otherwise
+ */
+const GradientView = ({ gradient, fallbackColor, style, children, borderRadius, borderWidth, borderColor, }) => {
+    // Calculate gradient colors and positions
+    const { colors, locations, start, end } = (0, react_1.useMemo)(() => {
+        var _a;
+        const colors = gradient.stops.map(stop => stop.color);
+        const locations = gradient.stops.map(stop => {
+            var _a;
+            const pos = (_a = stop.position) !== null && _a !== void 0 ? _a : 0;
+            return pos <= 1 ? pos : pos / 100;
+        });
+        // Get start/end points based on angle
+        const points = gradient.type === 'linear'
+            ? (0, CSSConverter_1.angleToGradientPoints)((_a = gradient.angle) !== null && _a !== void 0 ? _a : 180)
+            : { start: { x: 0.5, y: 0.5 }, end: { x: 1, y: 1 } }; // Radial approximation
+        return { colors, locations, ...points };
+    }, [gradient]);
+    // Container style with border properties
+    const containerStyle = {
+        borderRadius,
+        borderWidth,
+        borderColor,
+        overflow: 'hidden', // Ensure gradient respects borderRadius
+    };
+    // If LinearGradient is available, use it
+    if (LinearGradient && gradient.type === 'linear') {
+        return (<LinearGradient colors={colors} locations={locations} start={start} end={end} style={[style, containerStyle]}>
+        {children}
+      </LinearGradient>);
+    }
+    // For radial gradients or if LinearGradient isn't available, use fallback
+    const backgroundColor = fallbackColor || colors[0] || 'transparent';
+    return (<react_native_1.View style={[style, containerStyle, { backgroundColor }]}>
+      {children}
+    </react_native_1.View>);
+};
+exports.GradientView = GradientView;
+/**
+ * Check if LinearGradient is available
+ */
+function isGradientSupported() {
+    return LinearGradient !== null;
+}
+/**
+ * Get gradient background style or fallback color
+ * Use this when you need to decide between GradientView or regular View
+ */
+function getGradientStyleOrFallback(gradient, fallbackColor) {
+    var _a, _b;
+    if (!gradient || !LinearGradient) {
+        return {
+            useGradient: false,
+            backgroundColor: fallbackColor || ((_a = gradient === null || gradient === void 0 ? void 0 : gradient.stops[0]) === null || _a === void 0 ? void 0 : _a.color) || 'transparent',
+        };
+    }
+    return {
+        useGradient: true,
+        backgroundColor: fallbackColor || ((_b = gradient.stops[0]) === null || _b === void 0 ? void 0 : _b.color) || 'transparent',
+        gradient,
+    };
+}

package/dist/components/HapticFeedbackComponent.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface HapticFeedbackComponentProps {
+    component: PaywallComponent;
+    isPreviewMode?: boolean;
+}
+/**
+ * HapticFeedbackComponent — invisible behavior component.
+ *
+ * Fires a single device haptic on mount, reusing the shared `triggerHaptic`
+ * util (the same one the haptic tap-action uses). Skipped in the builder
+ * preview. The style comes from `properties.hapticStyle` (the six canonical
+ * HapticType values), falling back to `medium`. Renders nothing visible.
+ */
+export declare const HapticFeedbackComponent: React.FC<HapticFeedbackComponentProps>;
+export {};

package/dist/components/HapticFeedbackComponent.js

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HapticFeedbackComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const hapticFeedback_1 = require("../utils/hapticFeedback");
+const HAPTIC_STYLES = new Set([
+    'light', 'medium', 'heavy', 'success', 'warning', 'error',
+]);
+/**
+ * HapticFeedbackComponent — invisible behavior component.
+ *
+ * Fires a single device haptic on mount, reusing the shared `triggerHaptic`
+ * util (the same one the haptic tap-action uses). Skipped in the builder
+ * preview. The style comes from `properties.hapticStyle` (the six canonical
+ * HapticType values), falling back to `medium`. Renders nothing visible.
+ */
+const HapticFeedbackComponent = ({ component, isPreviewMode = false, }) => {
+    const hasFiredRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (isPreviewMode || hasFiredRef.current)
+            return;
+        hasFiredRef.current = true;
+        const props = component.properties || {};
+        const raw = typeof props.hapticStyle === 'string' ? props.hapticStyle : 'medium';
+        const style = (HAPTIC_STYLES.has(raw) ? raw : 'medium');
+        (0, hapticFeedback_1.triggerHaptic)(style);
+    }, [component.id, isPreviewMode]);
+    return <react_native_1.View style={{ width: 0, height: 0 }}/>;
+};
+exports.HapticFeedbackComponent = HapticFeedbackComponent;

package/dist/components/HorizontalProductsComponent.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Horizontal Products Component for React Native
+ * Pure Child Model: renders children via renderChild with horizontal FlatList layout,
+ * overlay extraction, child sanitization, and selection state propagation.
+ * Matches Android ProductsComponent.kt and iOS ProductsRenderer.swift architecture.
+ */
+import React from 'react';
+import { PaywallComponent, PaywallConfiguration } from '../types';
+export interface HorizontalProductsComponentProps {
+    component: PaywallComponent;
+    configuration: PaywallConfiguration;
+    renderChild: (child: PaywallComponent) => React.ReactNode;
+    stateManager?: any;
+    onAction?: (componentId: string, action: string) => void;
+}
+export declare const HorizontalProductsComponent: React.FC<HorizontalProductsComponentProps>;
+export default HorizontalProductsComponent;

package/dist/components/HorizontalProductsComponent.js

@@ -0,0 +1,284 @@
+"use strict";
+/**
+ * Horizontal Products Component for React Native
+ * Pure Child Model: renders children via renderChild with horizontal FlatList layout,
+ * overlay extraction, child sanitization, and selection state propagation.
+ * Matches Android ProductsComponent.kt and iOS ProductsRenderer.swift architecture.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HorizontalProductsComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const PaywallStateManager_1 = require("../PaywallStateManager");
+function getRole(child) {
+    var _a;
+    return child.role || ((_a = child.properties) === null || _a === void 0 ? void 0 : _a.role);
+}
+function extractOverlays(children) {
+    if (!(children === null || children === void 0 ? void 0 : children.length)) {
+        return { badge: null, checkmark: null, radioIndicator: null, remainingChildren: [] };
+    }
+    const badge = children.find(c => getRole(c) === 'badge') || null;
+    const checkmark = children.find(c => getRole(c) === 'checkmark') || null;
+    const radioIndicator = children.find(c => getRole(c) === 'radio-indicator') || null;
+    const remaining = children.filter(c => c !== badge && c !== checkmark && c !== radioIndicator);
+    return { badge, checkmark, radioIndicator, remainingChildren: remaining };
+}
+// ============= CHILD SANITIZATION =============
+function sanitizeProductChild(child) {
+    const sanitized = { ...child };
+    if (sanitized.appearance) {
+        const { fill, backgroundColor, cornerRadius, borderColor, borderWidth, shadow, ...rest } = sanitized.appearance;
+        sanitized.appearance = rest;
+    }
+    sanitized.selectedAppearance = undefined;
+    if (sanitized.layout) {
+        const { padding, ...restLayout } = sanitized.layout;
+        sanitized.layout = restLayout;
+    }
+    return sanitized;
+}
+// ============= SELECTION STATE PROPAGATION =============
+function applySelectionState(component, isSelected, isHybridMode) {
+    var _a;
+    if (!isHybridMode)
+        return component;
+    const role = getRole(component);
+    if (role === 'radio-indicator' && component.type === 'stack' && component.children) {
+        return {
+            ...component,
+            children: component.children.map(iconChild => {
+                const iconRole = getRole(iconChild);
+                if (iconRole === 'selected-icon')
+                    return { ...iconChild, visible: isSelected };
+                if (iconRole === 'unselected-icon')
+                    return { ...iconChild, visible: !isSelected };
+                return applySelectionState(iconChild, isSelected, isHybridMode);
+            }),
+        };
+    }
+    if (role === 'checkmark') {
+        return { ...component, visible: isSelected };
+    }
+    if ((_a = component.children) === null || _a === void 0 ? void 0 : _a.length) {
+        return {
+            ...component,
+            children: component.children.map(c => applySelectionState(c, isSelected, isHybridMode)),
+        };
+    }
+    return component;
+}
+// ============= HYBRID MODE DETECTION =============
+function hasHybridChildren(children) {
+    return children.some(child => {
+        if (getRole(child))
+            return true;
+        return hasChildWithRole(child);
+    });
+}
+function hasChildWithRole(component) {
+    if (!component.children)
+        return false;
+    for (const child of component.children) {
+        if (getRole(child))
+            return true;
+        if (hasChildWithRole(child))
+            return true;
+    }
+    return false;
+}
+// ============= HELPERS =============
+function resolveNumber(val, fallback) {
+    if (typeof val === 'number')
+        return val;
+    if (val && typeof val === 'object' && 'value' in val)
+        return val.value;
+    return fallback;
+}
+function resolveColor(appearance, key, fallback) {
+    if (!appearance)
+        return fallback;
+    const val = appearance[key];
+    if (!val)
+        return fallback;
+    if (typeof val === 'string')
+        return val;
+    if (val.resolvedColor)
+        return val.resolvedColor;
+    if (val.color)
+        return typeof val.color === 'string' ? val.color : fallback;
+    if (val.hex)
+        return val.hex;
+    return fallback;
+}
+function resolveFillColor(appearance, fallback) {
+    if (!appearance)
+        return fallback;
+    if (appearance.fill)
+        return resolveColor(appearance, 'fill', fallback);
+    if (appearance.backgroundColor)
+        return resolveColor(appearance, 'backgroundColor', fallback);
+    return fallback;
+}
+// ============= MAIN COMPONENT =============
+const HorizontalProductsComponent = ({ component, configuration, renderChild, stateManager, onAction, }) => {
+    const properties = component.properties || {};
+    const allChildren = component.children || [];
+    const flatListRef = (0, react_1.useRef)(null);
+    // Package binding
+    const bindToPackages = properties.bindToPackages !== false;
+    const packageIdentifiers = properties.packageIdentifiers || [];
+    const boundPackages = bindToPackages
+        ? (packageIdentifiers.length > 0
+            ? packageIdentifiers
+                .map(id => (configuration.packages || []).find(p => p.identifier === id || p.productId === id))
+                .filter(Boolean)
+            : configuration.packages || [])
+        : [];
+    const children = (bindToPackages && boundPackages.length > 0)
+        ? allChildren.slice(0, boundPackages.length)
+        : allChildren.filter(c => c.visible !== false);
+    const gap = resolveNumber(properties.gap, 12);
+    const defaultSelectedIndex = resolveNumber(properties.defaultSelectedIndex, 0);
+    const cardWidth = resolveNumber(properties.cardWidth, 160);
+    const cardHeight = resolveNumber(properties.cardHeight, 200);
+    const showBadge = !!properties.showBadge;
+    const badgeProductIndex = resolveNumber(properties.badgeProductIndex, 0);
+    const enableSnapScrolling = properties.enableSnapScrolling !== false;
+    const isHybridMode = hasHybridChildren(children);
+    // State
+    const stateKey = `element:${component.id}.selectedIndex`;
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(defaultSelectedIndex);
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c;
+        if (!stateManager)
+            return;
+        const existing = (_a = stateManager.getState) === null || _a === void 0 ? void 0 : _a.call(stateManager, stateKey);
+        if (existing !== undefined && existing !== null) {
+            setSelectedIndex(Number(existing));
+        }
+        else {
+            (_b = stateManager.setState) === null || _b === void 0 ? void 0 : _b.call(stateManager, stateKey, defaultSelectedIndex);
+        }
+        // Return the unsubscribe. This was dropped on the floor while nothing supplied a
+        // stateManager and every call no-opped; now that one is provided, an uncleaned
+        // subscription leaks a listener holding a stale setSelectedIndex on each remount.
+        return (_c = stateManager.subscribe) === null || _c === void 0 ? void 0 : _c.call(stateManager, stateKey, (value) => {
+            setSelectedIndex(Number(value) || 0);
+        });
+    }, [component.id, stateManager]);
+    // Publish the live selection PAYWALL-WIDE so Dynamic Values can react to it
+    // (`products.selectedIndex == 1` templates) and so `selectedProduct.*` resolves for
+    // the user's actual choice. The per-element key above is scoped to this component.
+    // With multiple products components, last write wins — same contract as Android
+    // ProductsComponent and iOS ProductsRenderer.updateSelectionState.
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = stateManager === null || stateManager === void 0 ? void 0 : stateManager.setState) === null || _a === void 0 ? void 0 : _a.call(stateManager, PaywallStateManager_1.PaywallStateManager.SELECTED_INDEX_KEY, selectedIndex);
+    }, [selectedIndex, stateManager]);
+    const handleSelect = (0, react_1.useCallback)((index) => {
+        var _a, _b;
+        setSelectedIndex(index);
+        (_a = stateManager === null || stateManager === void 0 ? void 0 : stateManager.setState) === null || _a === void 0 ? void 0 : _a.call(stateManager, stateKey, index);
+        onAction === null || onAction === void 0 ? void 0 : onAction(component.id, `select_package:${index},${(_b = children[index]) === null || _b === void 0 ? void 0 : _b.id}`);
+        react_native_1.AccessibilityInfo.announceForAccessibility(`Selected product ${index + 1}`);
+    }, [stateKey, stateManager, onAction, component.id, children]);
+    const renderProductCard = (child, index) => {
+        const isSelected = index === selectedIndex;
+        const childAppearance = child.appearance;
+        const childSelectedAppearance = child.selectedAppearance;
+        const childLayout = child.layout;
+        const cardBg = resolveFillColor(childAppearance, 'transparent');
+        const cardCornerRadius = resolveNumber(childAppearance === null || childAppearance === void 0 ? void 0 : childAppearance.cornerRadius, 12);
+        const cardBorderColor = resolveColor(childAppearance, 'borderColor', 'rgba(128,128,128,0.2)');
+        const cardBorderWidth = resolveNumber(childAppearance === null || childAppearance === void 0 ? void 0 : childAppearance.borderWidth, 0);
+        const selectedBg = resolveFillColor(childSelectedAppearance, 'rgba(59,130,246,0.1)');
+        const selectedBorderColor = resolveColor(childSelectedAppearance, 'borderColor', '#3B82F6');
+        const selectedBorderWidth = resolveNumber(childSelectedAppearance === null || childSelectedAppearance === void 0 ? void 0 : childSelectedAppearance.borderWidth, 2);
+        const bgColor = isSelected ? selectedBg : cardBg;
+        const borderColorVal = isSelected ? selectedBorderColor : cardBorderColor;
+        const borderWidthVal = isSelected ? selectedBorderWidth : cardBorderWidth;
+        // Padding from child.layout.padding
+        const padding = childLayout === null || childLayout === void 0 ? void 0 : childLayout.padding;
+        const paddingTop = resolveNumber(padding === null || padding === void 0 ? void 0 : padding.top, 14);
+        const paddingRight = resolveNumber(padding === null || padding === void 0 ? void 0 : padding.right, 16);
+        const paddingBottom = resolveNumber(padding === null || padding === void 0 ? void 0 : padding.bottom, 14);
+        const paddingLeft = resolveNumber(padding === null || padding === void 0 ? void 0 : padding.left, 16);
+        const extraction = extractOverlays(child.children);
+        const childWithRemaining = { ...child, children: extraction.remainingChildren };
+        const sanitized = sanitizeProductChild(childWithRemaining);
+        const transformed = applySelectionState(sanitized, isSelected, isHybridMode);
+        return (<react_native_1.TouchableOpacity activeOpacity={0.8} onPress={() => handleSelect(index)} accessibilityRole="radio" accessibilityState={{ selected: isSelected }} accessibilityLabel={`Product ${index + 1}, ${isSelected ? 'selected' : 'not selected'}`} style={{ marginRight: index < children.length - 1 ? gap : 0 }}>
+        <react_native_1.View style={{ width: cardWidth, height: cardHeight, position: 'relative' }}>
+          {/* Layer 1: Background */}
+          <react_native_1.View style={{
+                ...react_native_1.StyleSheet.absoluteFillObject,
+                backgroundColor: bgColor,
+                borderRadius: cardCornerRadius,
+                borderColor: borderColorVal,
+                borderWidth: borderWidthVal,
+            }}/>
+
+          {/* Layer 2: Content */}
+          <react_native_1.View style={{
+                flex: 1,
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingTop,
+                paddingRight,
+                paddingBottom,
+                paddingLeft,
+            }}>
+            {renderChild(transformed)}
+          </react_native_1.View>
+
+          {/* Layer 3: Badge overlay */}
+          {extraction.badge && showBadge && index === badgeProductIndex && (<react_native_1.View style={{ position: 'absolute', top: -10, right: 12, zIndex: 10 }}>
+              {renderChild(extraction.badge)}
+            </react_native_1.View>)}
+        </react_native_1.View>
+      </react_native_1.TouchableOpacity>);
+    };
+    return (<react_native_1.View accessibilityRole="radiogroup" accessibilityLabel="Select a product">
+      <react_native_1.FlatList ref={flatListRef} data={children} renderItem={({ item, index }) => renderProductCard(item, index)} keyExtractor={(item, index) => item.id || `product-${index}`} horizontal showsHorizontalScrollIndicator={false} snapToInterval={enableSnapScrolling ? cardWidth + gap : undefined} snapToAlignment="start" decelerationRate={enableSnapScrolling ? 'fast' : 'normal'} contentContainerStyle={{ paddingTop: 12 }} getItemLayout={(_, index) => ({
+            length: cardWidth + gap,
+            offset: (cardWidth + gap) * index,
+            index,
+        })}/>
+    </react_native_1.View>);
+};
+exports.HorizontalProductsComponent = HorizontalProductsComponent;
+exports.default = exports.HorizontalProductsComponent;

package/dist/components/MultiChoiceGridComponent.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Multi Choice Grid Component for React Native
+ * Checkbox style grid selection (multiple selection)
+ */
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface MultiChoiceGridProps {
+    component: PaywallComponent;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+}
+export declare const MultiChoiceGridComponent: React.FC<MultiChoiceGridProps>;
+export {};