@soyio/soyio-rn-sdk 3.1.2 → 4.0.0

package/README.md

@@ -153,7 +153,7 @@ You need to configure a custom URI scheme for your application to handle deep li
 npx uri-scheme add custom-uri-scheme
 ```
 
-Replace `custom-uri-scheme` with your desired scheme name. This scheme should match the `uriScheme` parameter you use in the `SoyioWidget` options.
+Replace `custom-uri-scheme` with your desired scheme name. This scheme should match the `uriScheme` parameter you use in the `SoyioWidget` options. It is essential for the Disclosure and Auth flows to return control to your application once they finish (especially when using the In-App Browser or Passkeys). It is not needed if you are only using the `ConsentBox`.
 
 ## Usage
 
@@ -311,11 +311,137 @@ const styles = StyleSheet.create({
 });
 ```
 
+### 3. Consent
+
+> 📖 [Integration Guide](https://docs.soyio.id/docs/integration-guide/consent/introduction)
+
+A **`consent`** is a component that renders a checkbox with a legal text, which the user can check to give their consent to a specific agreement.
+
+```jsx
+import { View, StyleSheet } from "react-native";
+import { ConsentBox } from "@soyio/soyio-rn-sdk";
+
+export default function App() {
+  const options = {
+    // uriScheme: "<your-app-scheme>", // Not required for consent
+    isSandbox: true, // Optional
+  };
+
+  const consentParams = {
+    templateId: "<consent template id>", // Starts with 'constpl_'
+    // actionToken: "<action token>", // Optional: To restore state
+    // entityId: "<entity id>", // Optional: To check existing consent
+    // context: "<context>", // Optional: Additional context
+    // optionalReconsentBehavior: "notice", // Optional
+    // mandatoryReconsentBehavior: "notice", // Optional
+  };
+
+  const handleEvent = (event) => {
+    // Check if the event is a consent change
+    if (event.eventName === 'CONSENT_CHECKBOX_CHANGE') {
+      console.log('Is Selected:', event.isSelected);
+      console.log('Action Token:', event.actionToken);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <ConsentBox
+        options={options}
+        params={consentParams}
+        onEvent={handleEvent}
+        appearance={{ theme: 'night' }}  // Optional: Customize appearance
+        showSkeleton={true}  // Optional: Show loading skeleton (default: true)
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+```
+
+### Consent Events
+
+The `onEvent` callback receives events with the following structure:
+
+```typescript
+{
+  eventName: 'CONSENT_CHECKBOX_CHANGE',
+  isSelected: boolean,
+  actionToken?: string,
+  identifier: string
+}
+```
+
+- **`isSelected`**: Boolean value indicating whether the consent checkbox is selected.
+- **`actionToken`**: Token corresponding to the current state. You can use this to restore the consent state later or validate it server-side.
+
+### ConsentBox Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `SoyioWidgetConsentOptions` | Required | Widget options (uriScheme, isSandbox, etc.) |
+| `params` | `ConsentParams` | Required | Consent parameters (templateId, etc.) |
+| `onEvent` | `(event) => void` | - | Callback for consent events |
+| `appearance` | `SoyioAppearance` | - | Appearance customization |
+| `showSkeleton` | `boolean` | `true` | Show loading skeleton while content loads |
+| `autoHeight` | `boolean` | `true` | Auto-adjust height based on content |
+
+### Consent Attribute Descriptions
+
+- **`templateId`**: (Required) Identifier of consent template. It must start with `'constpl_'`.
+- **`actionToken`**: (Optional) In case of losing the state of the consent (i.e. app restart), you can use a previously generated `actionToken` to restore the state of the consent.
+- **`entityId`**: (Optional) Identifier of the `entity` associated with a `ConsentAction`. If provided and a consent was previously granted by this entity, the UI will display a message indicating that consent has already been given.
+- **`context`**: (Optional) Additional information that will be saved with the consent. Useful when you want to track the consent from a specific context.
+- **`optionalReconsentBehavior`**: (Optional) Behavior when consent is already given on an optional category (`notice`, `askAgain`, `hide`).
+- **`mandatoryReconsentBehavior`**: (Optional) Behavior when consent is already given on a mandatory category (`notice`, `askAgain`).
+
+### 4. Customizing Appearance
+
+The `ConsentBox` (and other components) can be customized to match your application's look and feel using the `appearance` prop.
+
+#### Available Themes
+
+| Theme | Description |
+|-------|-------------|
+| `'soyio'` | Default Soyio theme |
+| `'night'` | Dark mode theme |
+| `'flat'` | Flat minimal theme |
+
+```jsx
+<ConsentBox
+  options={options}
+  params={consentParams}
+  appearance={{
+    theme: 'night',
+    variables: {
+      colorPrimary: '#6366f1',
+      colorBackground: '#0f172a',
+      borderRadius: '8px',
+    },
+  }}
+/>
+```
+
+#### TypeScript Types
+
+```typescript
+import type { SoyioAppearance, SoyioTheme } from '@soyio/soyio-rn-sdk';
+```
+
+For a full list of available customization options and examples, please refer to the [Appearance Customization Guide](https://docs.soyio.id/integration-guide/appearance).
+
 ### Event Handling
 
 The `SoyioWidget` component supports the following event handlers:
 
 - **`onSuccess`**: Called when the verification/authentication process completes successfully
+- **`onEvent`**: Called for widget events (e.g., consent checkbox changes, tooltip state updates)
+- **`onReady`**: Called when the webview finishes loading
 
 ## InAppBrowser Integration
 
@@ -407,7 +533,7 @@ The InAppBrowser functions support the following callback handlers:
 
 #### Attribute Descriptions
 
-- **`uriScheme`**: (Required) The URI scheme for your application, used for deep linking and navigation.
+- **`uriScheme`**: (Required for Disclosure and Auth) The URI scheme for your application. It is used to return control to your app after completing the flow in an In-App Browser or when using external authentication flows like Passkeys. The monolith uses this scheme to build the redirect URL (e.g., `<your-app-scheme>://success`) when the verification process finishes. Not used in the `ConsentBox`.
 - **`companyId`**: (Optional) The unique identifier for the company, must start with `'com_'`.
 - **`userReference`**: (Optional) A reference identifier provided by the company for the user engaging with the widget. This identifier is used in events (`onEvent` and `webhooks`) to inform the company which user the events are associated with.
 - **`userEmail`**: (Optional) The user's email address.
@@ -421,17 +547,68 @@ The InAppBrowser functions support the following callback handlers:
 
 This package includes TypeScript declarations.
 
-#### Developing
+### Development & Testing
 
-To develop the package, you need to use `yarn`. Install the dependencies:
+#### 1. Installation
+
+To develop the package, use `yarn` to install dependencies:
 
 ```sh
 yarn install
 ```
 
-To test locally, I recommend packaging the app. Remember to build the library first:
+#### 2. Building
+
+Build the package using:
 
 ```sh
-npm run build
-npm pack
+yarn build # Runs both ESM and CJS builds
 ```
+
+#### 3. Smoke Testing / Local Development
+
+This repo includes a React Native app under `example/app` to smoke test the SDK during development.
+
+1. Install the example app dependencies:
+   ```sh
+   cd example/app
+   yarn install
+   ```
+2. (Optional) Use the helper script:
+   ```sh
+   yarn smoke:setup
+   ```
+3. Replace the placeholder IDs in `example/app/App.tsx`.
+4. Run the platform helper scripts if you prefer:
+   ```sh
+   yarn smoke:ios
+   yarn smoke:android
+   ```
+
+**iOS**
+
+1. Install pods:
+   ```sh
+   cd example/app/ios
+   bundle install
+   bundle exec pod install
+   ```
+2. Run the app:
+   ```sh
+   cd ..
+   yarn ios
+   ```
+
+**Android**
+
+1. Ensure you have an emulator or device running.
+2. JDK 17 is required for Android builds.
+3. Run the app:
+   ```sh
+   yarn smoke:android
+   ```
+
+Notes:
+
+- The app pulls the SDK from `file:../..`, so local changes are reflected immediately.
+- Metro is configured to watch the repo root (`example/app/metro.config.js`).

package/index.ts

@@ -1,4 +1,5 @@
 export { SoyioWidget } from './src/webview';
+export { ConsentBox } from './src/consent';
 
 export {
   openDisclosure,
@@ -9,7 +10,13 @@ export type {
   SoyioWidgetOptions,
   DisclosureParams,
   AuthRequestParams,
+  ConsentParams,
+  ConsentBoxRef,
+  ConsentState,
+  ConsentCheckboxChangeEvent,
   SoyioWidgetProps,
+  SoyioAppearance,
+  SoyioTheme,
 } from './src/types';
 
 export type {

package/package/index.d.ts

@@ -1,4 +1,5 @@
 export { SoyioWidget } from './src/webview';
+export { ConsentBox } from './src/consent';
 export { openDisclosure, openAuthenticationRequest, } from './src/inapp-browser';
-export type { SoyioWidgetOptions, DisclosureParams, AuthRequestParams, SoyioWidgetProps, } from './src/types';
+export type { SoyioWidgetOptions, DisclosureParams, AuthRequestParams, ConsentParams, ConsentBoxRef, ConsentState, ConsentCheckboxChangeEvent, SoyioWidgetProps, SoyioAppearance, SoyioTheme, } from './src/types';
 export type { OpenDisclosureParams, OpenAuthRequestParams, } from './src/inapp-browser';

package/package/index.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openAuthenticationRequest = exports.openDisclosure = exports.SoyioWidget = void 0;
+exports.openAuthenticationRequest = exports.openDisclosure = exports.ConsentBox = exports.SoyioWidget = void 0;
 var webview_1 = require("./src/webview");
 Object.defineProperty(exports, "SoyioWidget", { enumerable: true, get: function () { return webview_1.SoyioWidget; } });
+var consent_1 = require("./src/consent");
+Object.defineProperty(exports, "ConsentBox", { enumerable: true, get: function () { return consent_1.ConsentBox; } });
 var inapp_browser_1 = require("./src/inapp-browser");
 Object.defineProperty(exports, "openDisclosure", { enumerable: true, get: function () { return inapp_browser_1.openDisclosure; } });
 Object.defineProperty(exports, "openAuthenticationRequest", { enumerable: true, get: function () { return inapp_browser_1.openAuthenticationRequest; } });

package/package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"/","sources":["index.ts"],"names":[],"mappings":";;;AAAA,yCAA4C;AAAnC,sGAAA,WAAW,OAAA;AAEpB,qDAG6B;AAF3B,+GAAA,cAAc,OAAA;AACd,0HAAA,yBAAyB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"/","sources":["index.ts"],"names":[],"mappings":";;;AAAA,yCAA4C;AAAnC,sGAAA,WAAW,OAAA;AACpB,yCAA2C;AAAlC,qGAAA,UAAU,OAAA;AAEnB,qDAG6B;AAF3B,+GAAA,cAAc,OAAA;AACd,0HAAA,yBAAyB,OAAA"}

package/package/src/components/ConsentSkeleton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { SoyioTheme } from '../types';
+export interface ConsentSkeletonProps {
+    theme?: SoyioTheme;
+    visible?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare const ConsentSkeleton: React.FC<ConsentSkeletonProps>;

package/package/src/components/ConsentSkeleton.jsx

@@ -0,0 +1,196 @@
+"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.ConsentSkeleton = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var ANIMATION_DURATION = 1500;
+var styles = react_native_1.StyleSheet.create({
+    container: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        minHeight: 112,
+        borderWidth: 1,
+        borderRadius: 4,
+        zIndex: 1,
+    },
+    mainContainer: {
+        padding: 16,
+        gap: 12,
+    },
+    topRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+    },
+    bottomRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: 12,
+    },
+    shimmerContainer: {
+        overflow: 'hidden',
+        borderRadius: 4,
+    },
+    shimmerBase: {
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+    },
+    shimmerHighlight: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        width: 60,
+        opacity: 0.5,
+    },
+    iconCircle: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+    },
+    titleBar: {
+        height: 16,
+        flex: 0.3,
+    },
+    expandButton: {
+        width: 48,
+        height: 20,
+        marginLeft: 'auto',
+    },
+    checkboxContainer: {
+        width: 32,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    checkbox: {
+        width: 16,
+        height: 16,
+    },
+    textContent: {
+        flex: 1,
+        gap: 8,
+    },
+    textLine1: {
+        height: 14,
+        width: '80%',
+    },
+    textLine2: {
+        height: 14,
+        width: '60%',
+    },
+});
+var ConsentSkeleton = function (_a) {
+    var theme = _a.theme, _b = _a.visible, visible = _b === void 0 ? true : _b, style = _a.style;
+    var systemColorScheme = (0, react_native_1.useColorScheme)();
+    var isDarkMode = theme === 'night' || (!theme && systemColorScheme === 'dark');
+    var shimmerAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    var fadeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    (0, react_1.useEffect)(function () {
+        var shimmerLoop = react_native_1.Animated.loop(react_native_1.Animated.timing(shimmerAnim, {
+            toValue: 1,
+            duration: ANIMATION_DURATION,
+            useNativeDriver: true,
+        }));
+        shimmerLoop.start();
+        return function () { return shimmerLoop.stop(); };
+    }, [shimmerAnim]);
+    (0, react_1.useEffect)(function () {
+        if (!visible) {
+            react_native_1.Animated.timing(fadeAnim, {
+                toValue: 0,
+                duration: 200,
+                useNativeDriver: true,
+            }).start();
+        }
+        else {
+            fadeAnim.setValue(1);
+        }
+    }, [visible, fadeAnim]);
+    var backgroundColor = isDarkMode ? '#1E293B' : '#FFFFFF';
+    var borderColor = isDarkMode ? '#334155' : '#E5E7EB';
+    var shimmerBaseColor = isDarkMode ? '#334155' : '#f0f0f0';
+    var shimmerTranslateX = shimmerAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [-100, 100],
+    });
+    var renderShimmerBox = function (boxStyle) { return (<react_native_1.View style={[styles.shimmerContainer, boxStyle]}>
+      <react_native_1.View style={[styles.shimmerBase, { backgroundColor: shimmerBaseColor }]}>
+        <react_native_1.Animated.View style={[
+            styles.shimmerHighlight,
+            {
+                transform: [{ translateX: shimmerTranslateX }],
+                backgroundColor: isDarkMode ? '#475569' : '#e0e0e0',
+            },
+        ]}/>
+      </react_native_1.View>
+    </react_native_1.View>); };
+    if (!visible) {
+        return null;
+    }
+    return (<react_native_1.Animated.View style={[
+            styles.container,
+            {
+                backgroundColor: backgroundColor,
+                borderColor: borderColor,
+                opacity: fadeAnim,
+            },
+            style,
+        ]}>
+      <react_native_1.View style={styles.mainContainer}>
+        {/* Top row: icon, title, expand button */}
+        <react_native_1.View style={styles.topRow}>
+          {renderShimmerBox(styles.iconCircle)}
+          {renderShimmerBox(styles.titleBar)}
+          {renderShimmerBox(styles.expandButton)}
+        </react_native_1.View>
+
+        {/* Bottom row: checkbox and text lines */}
+        <react_native_1.View style={styles.bottomRow}>
+          <react_native_1.View style={styles.checkboxContainer}>
+            {renderShimmerBox(styles.checkbox)}
+          </react_native_1.View>
+          <react_native_1.View style={styles.textContent}>
+            {renderShimmerBox(styles.textLine1)}
+            {renderShimmerBox(styles.textLine2)}
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.Animated.View>);
+};
+exports.ConsentSkeleton = ConsentSkeleton;
+//# sourceMappingURL=ConsentSkeleton.jsx.map

package/package/src/components/ConsentSkeleton.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentSkeleton.jsx","sourceRoot":"/","sources":["src/components/ConsentSkeleton.tsx"],"names":[],"mappings":"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"}

package/package/src/components/Tooltip.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface TooltipProps {
+    text: string;
+    x: number;
+    y: number;
+    visible: boolean;
+    containerWidth: number;
+}
+export declare const Tooltip: React.FC<TooltipProps>;
+export {};

package/package/src/components/Tooltip.jsx

@@ -0,0 +1,115 @@
+"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.Tooltip = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var styles = react_native_1.StyleSheet.create({
+    container: {
+        position: 'absolute',
+        backgroundColor: 'rgba(30, 30, 30, 0.9)',
+        paddingVertical: 10,
+        paddingHorizontal: 16,
+        borderRadius: 8,
+        maxWidth: 300,
+        zIndex: 99999,
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 5,
+        },
+        shadowOpacity: 0.3,
+        shadowRadius: 15,
+        elevation: 5,
+    },
+    text: {
+        color: '#f5f5f5',
+        fontSize: 14,
+        fontFamily: 'System', // Fallback to system font
+    },
+});
+var Tooltip = function (_a) {
+    var text = _a.text, x = _a.x, y = _a.y, visible = _a.visible, containerWidth = _a.containerWidth;
+    var _b = (0, react_1.useState)({ width: 0, height: 0 }), layout = _b[0], setLayout = _b[1];
+    var fadeAnim = (0, react_1.useMemo)(function () { return new react_native_1.Animated.Value(0); }, []);
+    react_1.default.useEffect(function () {
+        react_native_1.Animated.timing(fadeAnim, {
+            toValue: visible ? 1 : 0,
+            duration: 200,
+            useNativeDriver: true,
+        }).start();
+    }, [visible, fadeAnim]);
+    var handleLayout = function (event) {
+        var _a = event.nativeEvent.layout, width = _a.width, height = _a.height;
+        setLayout({ width: width, height: height });
+    };
+    var getPosition = function () {
+        if (!layout.width || !layout.height)
+            return { top: -1000, left: -1000 };
+        var margin = 10;
+        // Default to top
+        var top = y - layout.height - margin;
+        var left = x - layout.width / 2;
+        // Check bounds
+        // Avoid left edge
+        if (left < margin) {
+            left = margin;
+        }
+        // Avoid right edge
+        if (left + layout.width > containerWidth - margin) {
+            left = containerWidth - layout.width - margin;
+        }
+        // Note: vertical checks would require container height, strictly speaking.
+        // For now assuming sticking to 'top' is preferred unless we want to flip.
+        // Given the widget behavior, top is default.
+        return { top: top, left: left };
+    };
+    var _c = getPosition(), top = _c.top, left = _c.left;
+    // If not visible and not animating out, we can hide it to prevent touches?
+    // Animated opacity handles visibility visual.
+    // We use pointerEvents="none" to let touches pass through if transparent.
+    return (<react_native_1.Animated.View style={[
+            styles.container,
+            {
+                opacity: fadeAnim,
+                top: top,
+                left: left,
+            },
+        ]} onLayout={handleLayout} pointerEvents="none">
+      <react_native_1.Text style={styles.text}>{text}</react_native_1.Text>
+    </react_native_1.Animated.View>);
+};
+exports.Tooltip = Tooltip;
+//# sourceMappingURL=Tooltip.jsx.map

package/package/src/components/Tooltip.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.jsx","sourceRoot":"/","sources":["src/components/Tooltip.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+export { ConsentSkeleton } from './ConsentSkeleton';
+export type { ConsentSkeletonProps } from './ConsentSkeleton';
+export { Tooltip } from './Tooltip';

package/package/src/components/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = exports.ConsentSkeleton = void 0;
+var ConsentSkeleton_1 = require("./ConsentSkeleton");
+Object.defineProperty(exports, "ConsentSkeleton", { enumerable: true, get: function () { return ConsentSkeleton_1.ConsentSkeleton; } });
+var Tooltip_1 = require("./Tooltip");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
+//# sourceMappingURL=index.js.map

package/package/src/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"/","sources":["src/components/index.ts"],"names":[],"mappings":";;;AAAA,qDAAoD;AAA3C,kHAAA,eAAe,OAAA;AAExB,qCAAoC;AAA3B,kGAAA,OAAO,OAAA"}

package/package/src/consent.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { ViewProps } from 'react-native';
+import type { ConsentBoxRef, ConsentCheckboxChangeEvent, ConsentParams, SoyioAppearance, SoyioWidgetConsentOptions } from './types';
+export type ConsentBoxProps = ViewProps & {
+    options: SoyioWidgetConsentOptions;
+    params: ConsentParams;
+    onEvent?: (event: ConsentCheckboxChangeEvent) => void;
+    autoHeight?: boolean;
+    showSkeleton?: boolean;
+    appearance?: SoyioAppearance;
+};
+export declare const ConsentBox: React.ForwardRefExoticComponent<ViewProps & {
+    options: SoyioWidgetConsentOptions;
+    params: ConsentParams;
+    onEvent?: (event: ConsentCheckboxChangeEvent) => void;
+    autoHeight?: boolean;
+    showSkeleton?: boolean;
+    appearance?: SoyioAppearance;
+} & React.RefAttributes<ConsentBoxRef>>;