skyflow-js 2.6.0 → 2.7.0

package/README.md

@@ -1458,7 +1458,7 @@ Properties your provided when you created the element remain the same until you
 ### End to end example
 ```javascript
 // Create a collect container. 
-const collectContainer = skyflow.container(Skyflow.ContainerType.COLLECT);
+const collectContainer = skyflowClient.container(Skyflow.ContainerType.COLLECT);
 
 const stylesOptions = {
   inputStyles: {
@@ -1540,853 +1540,2375 @@ cardNumberElement.update({
 
 ---
 
-# Securely collecting data client-side using Composable Elements
-
-Composable Elements combine multiple Skyflow Elements in a single iframe, letting you create multiple Skyflow Elements in a single row. The following steps create a composable element and securely collect data through it.
-
-### Step 1: Create a composable container
-
-Create a container for the composable element using the `container(Skyflow.ContainerType)` method of the Skyflow client:
-
-``` javascript
- const collectContainer = skyflow.container(Skyflow.ContainerType.COMPOSABLE,containerOptions);
-```
-The container requires an options object that contains the following keys:
 
-1. `layout`: An array that indicates the number of rows in the container and the number of elements in each row. The index value of the array defines the number of rows, and each value in the array represents the number of elements in that row, in order.
-  
-    For example: `[2,1]` means the container has two rows, with two elements in the first row and one element in the second row.
+## Using Skyflow File Element to upload a file
 
-    `Note`: The sum of values in the layout array should be equal to the number of elements created
+You can upload binary files to a vault using the Skyflow File Element. Use the following steps to securely upload a file.
+### Step 1: Create a container
 
-2. `styles`: CSS styles to apply to the composable container.
-3. `errorTextStyles`: CSS styles to apply if an error is encountered.
+Create a container for the form elements using the container(Skyflow.ContainerType) method of the Skyflow client:
 
 ```javascript
-const options = {
-    layout: [2, 1],                           // Required
-    styles: {                                 // Optional
-        base: {
-            border: '1px solid #DFE3EB',
-            padding: '8px',
-            borderRadius: '4px',
-            margin: '12px 2px',
-        },
-    },
-    errorTextStyles: {                       // Optional
-        base: {
-            color: 'red',
-            fontFamily: '"Roboto", sans-serif'
-        },
-        global: {
-            '@import': 'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
-        }        
-    },
-};
+const container = skyflowClient.container(Skyflow.ContainerType.COLLECT)
 ```
 
-### Step 2: Create Composable Elements
-Composable Elements use the following schema:
+### Step 2: Create a File Element
+
+Skyflow Collect Elements are defined as follows: 
 
 ```javascript
-const composableElement = {
-  table: 'string',             // Required. The table this data belongs to.
-  column: 'string',            // Required. The column this data belongs to.
-  type: Skyflow.ElementType,   // Skyflow.ElementType enum.
-  inputStyles: {},             // Optional. Styles applied to the form element.
-  labelStyles: {},             // Optional. Styles for the label of the collect element.
-  errorTextStyles: {},         // Optional. Styles for the errorText of the collect element.
-  label: 'string',             // Optional. Label for the form element.
-  placeholder: 'string',       // Optional. Placeholder for the form element.
-  altText: 'string',           // (DEPRECATED) Initial value for the collect element.
-  validations: [],             // Optional. Array of validation rules.
+const collectElement =  {
+  type: Skyflow.ElementType.FILE_INPUT,   // Skyflow.ElementType enum.
+  table: 'string',             // The table this data belongs to.
+  column: 'string',            // The column into which this data should be inserted.
+  skyflowID: 'string',         // The skyflow_id of the record.
+  inputStyles: {},             // Optional, styles that should be applied to the form element.
+  labelStyles: {},             // Optional, styles that will be applied to the label of the collect element.
+  errorTextStyles:{},          // Optional, styles that will be applied to the errorText of the collect element.
 }
 ```
-The `table` and `column` fields indicate which table and column in the vault the Element correspond to.
-
-Note: Use dot-delimited strings to specify columns nested inside JSON fields (for example, `address.street.line1`).
+The `table` and `column` fields indicate which table and column the Element corresponds to. 
 
-All elements can be styled with  [JSS](https://cssinjs.org/?v=v10.7.1) syntax.
+`skyflowID` indicates the record that stores the file.
 
-The `inputStyles` field accepts an object of CSS properties to apply to the form element in the following states:
+**Notes**: 
+- `skyflowID` is required while creating File element
+- Use period-delimited strings to specify columns nested inside JSON fields (e.g. `address.street.line1`).
 
-* `base`: all variants inherit from these styles
-* `complete`: applied when the Element has valid input
-* `empty`: applied when the Element has no input
-* `focus`: applied when the Element has focus
-* `invalid`: applied when the Element has invalid input
-* `cardIcon`: applied to the card type icon in CARD_NUMBER Element
-* `copyIcon`: applied to copy icon in Elements when enableCopy option is true
-* `global`: used for global styles like font-family.
+### Step 3: Mount elements to the DOM
 
-An example of an `inputStyles` object:
+To specify where to render Elements on your page, create placeholder `<div>` elements with unique `id` tags. For instance, the form below has an empty div with a unique id as a placeholder for a Skyflow Element. 
 
-```javascript
-inputStyles: {
-  base: {
-    border: '1px solid #eae8ee',
-    padding: '10px 16px',
-    borderRadius: '4px',
-    color: '#1d1d1d',
-    fontFamily: '"Roboto", sans-serif'
-  },
-  complete: {
-    color: '#4caf50',
-  },
-  empty: {},
-  focus: {},
-  invalid: {
-    color: '#f44336',
-  },
-  cardIcon: {
-    position: 'absolute',
-    left: '8px',
-    bottom: 'calc(50% - 12px)',
-  },
-  copyIcon: {
-    position: 'absolute',
-    right: '8px',
-  },
-  global: {   
-    '@import': 'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
-  }
-}
+```html
+<form>
+  <div id="file"/>
+  <br/>
+  <button type="submit">Submit</button>
+</form>
 ```
-The states that are available for `labelStyles` are `base`, `focus`, `global`.
-* requiredAsterisk: styles applied for the Asterisk symbol in the label.
 
-An example `labelStyles` object:
+Now, when the `mount(domElement)` method of the Element is called, the Element is inserted in the specified div. For instance, the call below inserts the Element into the div with the id "#file".  
 
 ```javascript
-labelStyles: {
-  base: {
-    fontSize: '12px',
-    fontWeight: 'bold',
-    fontFamily: '"Roboto", sans-serif'
-  },
-  focus: {
-    color: '#1d1d1d'
-  },
-  global: {
-    '@import' :'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
-  }
-}
+element.mount('#file');
 ```
-
-The JS SDK supports the following composable elements:
-
-- `CARDHOLDER_NAME`
-- `CARD_NUMBER`
-- `EXPIRATION_DATE`
-- `EXPIRATION_MONTH`
-- `EXPIRATION_YEAR`
-- `CVV`
-- `INPUT_FIELD`
-- `PIN`
-
-`Note`: Only when the entered value in the below composable elements is valid, the focus shifts automatically. The element types are:
-- `CARD_NUMBER`
-- `EXPIRATION_DATE`
-- `EXPIRATION_MONTH`
-- `EXPIRATION_YEAR`
-
-The `INPUT_FIELD` type is a custom UI element without any built-in validations. For information on validations, see [validations](#validations).
-
-Along with the Composable Element definition, you can define additional options for the element:
+Use the `unmount` method to reset a Collect Element to its initial state.
 
 ```javascript
-const options = {
-    required: false,  		// Optional, indicates whether the field is marked as required. Defaults to 'false'
-    enableCardIcon: true, 	// Optional, indicates whether card icon should be enabled (only applicable for CARD_NUMBER ElementType)
-    format: String, 		// Optional, format for the element (only applicable currently for EXPIRATION_DATE ElementType),
-    enableCopy: false 		// Optional, enables the copy icon in collect and reveal elements to copy text to clipboard. Defaults to 'false')
-}
+element.unmount();
 ```
+### Step 4: Collect data from elements
 
-- `required`: Whether or not the field is marked as required. Defaults to `false`.
-- `enableCardIcon`: Whether or not the icon is visible for the CARD_NUMBER element. Defaults to `true`.
-- `format`: Format pattern for the element. Only applicable to EXPIRATION_DATE and EXPIRATION_YEAR element types.
-- `enableCopy`: Whether or not the copy icon is visible in collect and reveal elements. Defaults to `false`.
+When you're ready to upload the file, call the  `uploadFiles()` method on the container object.
 
-The accepted `EXPIRATION_DATE` values are
+```javascript
+container.uploadFiles();
+```
+### File upload limitations:
 
-- `MM/YY` (default)
-- `MM/YYYY`
-- `YY/MM`
-- `YYYY/MM`
+- Only non-executable file are allowed to be uploaded.
+- Files must have a maximum size of 32 MB
+- File columns can't enable tokenization, redaction, or arrays.
+- Re-uploading a file overwrites previously uploaded data.
+- Partial uploads or resuming a previous upload isn't supported.
 
+### End-to-end file upload
 
-The accepted `EXPIRATION_YEAR` values are
+```javascript
+// Step 1.
+const container = skyflowClient.container(Skyflow.ContainerType.COLLECT);
 
-- `YY` (default)
-- `YYYY`
+// Step 2.
+const element = container.create({
+  table: 'pii_fields',
+  column: 'file',
+  skyflowID: '431eaa6c-5c15-4513-aa15-29f50babe882',
+  inputstyles: {
+    base: {
+      color: '#1d1d1d',
+    },
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: 'bold',
+    },
+  },
+  errorTextStyles: {
+    base: {
+      color: '#f44336',
+    },
+  },
+  type: Skyflow.ElementType.FILE_INPUT,
+});
 
+// Step 3.
+element.mount('#file'); // Assumes there is a div with id='#file' in the webpage.
 
-Once you define the Element object and options, add it to the container using the `create(element, options)` method:
+// Step 4.
+container.uploadFiles();
+```
 
+**Sample Response :**
 ```javascript
-const composableElement = {
-  table: 'string',             // Required, the table this data belongs to.
-  column: 'string',            // Required, the column into which this data should be inserted.
-  type: Skyflow.ElementType,   // Skyflow.ElementType enum.
-  inputStyles: {},             // Optional, styles that should be applied to the form element.
-  labelStyles: {},             // Optional, styles that will be applied to the label of the collect element.
-  errorTextStyles: {},         // Optional, styles that will be applied to the errorText of the collect element.
-  label: 'string',             // Optional, label for the form element.
-  placeholder: 'string',       // Optional, placeholder for the form element.
-  altText: 'string',           // (DEPRECATED) string that acts as an initial value for the collect element.
-  validations: [],             // Optional, array of validation rules.
+{
+    fileUploadResponse: [
+        {
+            "skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882"
+        }
+    ]
 }
+```
+### File upload with options:
 
+Along with fileElementInput, you can define other options in the Options object as described below: 
+```js
 const options = {
-  required: false,      // Optional, indicates whether the field is marked as required. Defaults to 'false'.
-  enableCardIcon: true, // Optional, indicates whether card icon should be enabled (only applicable for CARD_NUMBER ElementType).
-  format: String,       // Optional, format for the element (only applicable currently for EXPIRATION_DATE ElementType).
-  enableCopy: false,    // Optional, enables the copy icon in collect and reveal elements to copy text to clipboard. Defaults to 'false').
-};
-
-const element = container.create(composableElement, options);
+ allowedFileType: String[],  // Optional, indicates the allowed file types for upload
+}
 ```
+`allowedFileType`: An array of string value that indicates the allowedFileTypes to be uploaded.
 
-### Step 3: Mount Container to the DOM
-
-
-To specify where the Elements are rendered on your page, create a placeholder `<div>` element with unique `id` attribute. Use this empty `<div>` placeholder to mount the composable container.
+#### File upload with options example
 
 ```javascript
-<form>
-  <div id="composableContainer"/>
-  <br/>
-  <div id="button-id"/>
-  <button type="submit">Submit</button>
-</form>
-```
-Use the composable container's `mount(domElement)` method to insert the container's Elements into the specified `<div>`. For instance, the following call inserts Elements into the `<div>` with the `id "#composableContainer"`.
-
-```javacript
-container.mount('#composableContainer');
-```
+// Create collect Container.
+const collectContainer = skyflowClient.container(Skyflow.ContainerType.COLLECT);
 
-### Step 4: Collect data from elements
+// Create collect elements.
+const cardNumberElement = collectContainer.create({
+  table: 'newTable',
+  column: 'card_number',
+  inputstyles: {
+    base: {
+      color: '#1d1d1d',
+    },
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: 'bold',
+    },
+  },
+  errorTextStyles: {
+    base: {
+      color: '#f44336',
+    },
+  },
+  placeholder: 'card number',
+  label: 'Card Number',
+  type: Skyflow.ElementType.CARD_NUMBER,
+});
+const options = { 
+    allowedFileType: [".pdf",".png"];
+};
+const fileElement = collectContainer.create({
+  table: 'newTable',
+  column: 'file',
+  skyflowID: '431eaa6c-5c15-4513-aa15-29f50babe882',
+  inputstyles: {
+    base: {
+      color: '#1d1d1d',
+    },
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: 'bold',
+    },
+  },
+  errorTextStyles: {
+    base: {
+      color: '#f44336',
+    },
+  },
+  type: Skyflow.ElementType.FILE_INPUT,
+},
+  options
+);
 
+// Mount the elements.
+cardNumberElement.mount('#collectCardNumber');
+fileElement.mount('#collectFile');
 
-When the form is ready to be submitted, call the container's `collect(options?)` method. The options parameter takes an object of optional parameters as follows:
-- `tokens`: Whether or not tokens for the collected data are returned. Defaults to 'true'
-- `additionalFields`: Non-PCI elements data to insert into the vault, specified in the records object format.
-- `upsert`: To support upsert operations,  the table containing the data and a column marked as unique in that table.
+// Collect and upload methods.
+collectContainer.collect({});
+collectContainer.uploadFiles();
 
+```
+**Sample Response for collect():**
 ```javascript
-const options = {
-  tokens: true,                             // Optional, indicates whether tokens for the collected data should be returned. Defaults to 'true'.
-  additionalFields: {
-    records: [
-      {
-        table: 'string',                   // Table into which record should be inserted.
-        fields: {
-          column1: 'value',                // Column names should match vault column names.
-          // ...additional fields here.
-        },
-      },
-      // ...additional records here.
-    ],
-  },                                      // Optional
-  upsert: [                               // Upsert operations support in the vault                                    
+{
+  "records": [
     {
-      table: 'string',                    // Table name
-      column: 'value',                    // Unique column in the table
-    },
-  ],                                      // Optional
-};
+      "table": "newTable",
+      "fields": {
+        "card_number": "f3907186-e7e2-466f-91e5-48e12c2bcbc1",
+      }
+    }
+  ]
+}
 ```
-
-### End to end example of collecting data with Composable Elements
+**Sample Response for file uploadFiles() :**
+```javascript
+{
+    "fileUploadResponse": [
+        {
+            "skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882"
+        }
+    ]
+}
+```
+#### File upload with additional elements
 
 ```javascript
-// Step 1
-const containerOptions = {
-  layout: [2, 1],
-  styles: {
+// Create collect Container.
+const collectContainer = skyflowClient.container(Skyflow.ContainerType.COLLECT);
+
+// Create collect elements.
+const cardNumberElement = collectContainer.create({
+  table: 'newTable',
+  column: 'card_number',
+  inputstyles: {
     base: {
-      border: '1px solid #eae8ee',
-      padding: '10px 16px',
-      borderRadius: '4px',
-      margin: '12px 2px',
+      color: '#1d1d1d',
+    },
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: 'bold',
     },
   },
   errorTextStyles: {
     base: {
-      color: 'red',
+      color: '#f44336',
     },
   },
-};
-
-const composableContainer = skyflow.container(
-  Skyflow.ContainerType.COMPOSABLE,
-  containerOptions
-);
-
-// Step 2
+  placeholder: 'card number',
+  label: 'Card Number',
+  type: Skyflow.ElementType.CARD_NUMBER,
+});
 
-const collectStylesOptions = {
-  inputStyles: {
+const fileElement = collectContainer.create({
+  table: 'newTable',
+  column: 'file',
+  skyflowID: '431eaa6c-5c15-4513-aa15-29f50babe882',
+  inputstyles: {
     base: {
-      fontFamily: 'Inter',
-      fontStyle: 'normal',
-      fontWeight: 400,
-      fontSize: '14px',
-      lineHeight: '21px',
-      width: '294px',
+      color: '#1d1d1d',
+    },
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: 'bold',
     },
   },
-  labelStyles: {},
   errorTextStyles: {
-    base: {},
+    base: {
+      color: '#f44336',
+    },
   },
-};
-
-const cardHolderNameElement = composableContainer.create({
-  table: 'pii_fields',
-  column: 'first_name',
-  ...collectStylesOptions,
-  placeholder: 'Cardholder Name',
-  type: Skyflow.ElementType.CARDHOLDER_NAME,
-});
-
-const cardNumberElement = composableContainer.create({
-  table: 'pii_fields',
-  column: 'card_number',
-  ...collectStylesOptions,
-  placeholder: 'Card Number',
-  type: Skyflow.ElementType.CARD_NUMBER,
+  type: Skyflow.ElementType.FILE_INPUT,
 });
 
-const cvvElement = composableContainer.create({
-  table: 'pii_fields',
-  column: 'cvv',
-  ...collectStylesOptions,
-  placeholder: 'CVV',
-  type: Skyflow.ElementType.CVV,
-});
+// Mount the elements.
+cardNumberElement.mount('#collectCardNumber');
+fileElement.mount('#collectFile');
 
-// Step 3
-composableContainer.mount('#composableContainer'); // Assumes there is a div with id='#composableContainer' in the webpage.
+// Collect and upload methods.
+collectContainer.collect({});
+collectContainer.uploadFiles();
 
-// Step 4
-composableContainer.collect({
-  tokens: true,
-});
 ```
-### Sample Response:
-
+**Sample Response for collect():**
 ```javascript
 {
-    "records": [
+  "records": [
+    {
+      "table": "newTable",
+      "fields": {
+        "card_number": "f3907186-e7e2-466f-91e5-48e12c2bcbc1",
+      }
+    }
+  ]
+}
+```
+**Sample Response for file uploadFiles() :**
+```javascript
+{
+    "fileUploadResponse": [
         {
-            "table": "pii_fields",
-            "fields": {
-                "skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882",
-                "first_name": "63b5eeee-3624-493f-825e-137a9336f882",
-                "card_number": "f3907186-e7e2-466f-91e5-48e12c2bcbc1",
-                "cvv": "7baf5bda-aa22-4587-a5c5-412f6f783a19",
-            }
+            "skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882"
         }
     ]
 }
 ```
-For information on validations, see [validations](#validations).
 
-### Set an event listener on Composable Elements:
+Note: File name should contain only alphanumeric characters and !-_.*()
 
-You can communicate with Skyflow Elements by listening to element events:
 
-```javascript
-element.on(Skyflow.EventName,handler:function)
-```
+# Securely collecting data client-side using Composable Elements
+- [**Using Skyflow Composable Elements to collect data**](#using-skyflow-composable-elements-to-collect-data)
+- [**Event listener on Composable Element**](#set-an-event-listener-on-composable-elements)
+- [**Event listener on Composable Container**](#set-an-event-listener-on-a-composable-container)
+- [**Update Composable Elements**](#update-composable-elements)
+- [**Using Skyflow File Element to upload a file**](#using-skyflow-composable-file-element-to-upload-a-file)
+- [**Using Skyflow File Element to upload multiple files**](#using-skyflow-composable-file-element-to-upload-multiple-files)
 
 
-The SDK supports four events:
+## Using Skyflow Composable Elements to collect data
+Composable Elements combine multiple Skyflow Elements in a single iframe, letting you create multiple Skyflow Elements in a single row. The following steps create a composable element and securely collect data through it.
 
-- `CHANGE`: Triggered when the Element's value changes.
-- `READY`: Triggered when the Element is fully rendered.
-- `FOCUS`: Triggered when the Element gains focus.
-- `BLUR`: Triggered when the Element loses focus.
+### Step 1: Create a composable container
 
-The handler `function(state) => void` is a callback function you provide that's called when the event is fired with a state object that uses the following schema:
+Create a container for the composable element using the `container(Skyflow.ContainerType)` method of the Skyflow client:
+
+``` javascript
+ const collectContainer = skyflowClient.container(Skyflow.ContainerType.COMPOSABLE,containerOptions);
+```
+Pass an options object that contains the following keys:
+
+1. `layout`: An array that indicates the number of rows in the container and the number of elements in each row. The index value of the array defines the number of rows, and each value in the array represents the number of elements in that row, in order.
+  
+    For example: `[2,1]` means the container has two rows, with two elements in the first row and one element in the second row.
+
+    `Note`: The sum of values in the layout array should be equal to the number of elements created
+
+2. `styles`: CSS styles to apply to the composable container.
+3. `errorTextStyles`: CSS styles to apply if an error is encountered.
 
 ```javascript
-state : {
-  elementType: Skyflow.ElementType
-  isEmpty: boolean 
-  isFocused: boolean
-  isValid: boolean
-  value: string
-}
+const options = {
+    layout: [2, 1],                           // Required
+    styles: {                                 // Optional
+        base: {
+            border: '1px solid #DFE3EB',
+            padding: '8px',
+            borderRadius: '4px',
+            margin: '12px 2px',
+        },
+    },
+    errorTextStyles: {                       // Optional
+        base: {
+            color: 'red',
+            fontFamily: '"Roboto", sans-serif'
+        },
+        global: {
+            '@import': 'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
+        }        
+    },
+};
 ```
-`Note`: Events only include element values when in the state object when env is DEV. By default, value is an empty string.
 
-### Example Usage of Event Listener on Composable Elements
+### Step 2: Create Composable Elements
+Composable Elements use the following schema:
 
 ```javascript
-const containerOptions = {
-  layout: [1],
-  styles: {
-    base: {
-      border: '1px solid #eae8ee',
-      padding: '10px 16px',
-      borderRadius: '4px',
-      margin: '12px 2px',
-    }
-  },
-  errorTextStyles: {
-    base: {
-      color: 'red'
-    }
-  }
+const composableElement = {
+  table: 'string',             // Required. The table this data belongs to.
+  column: 'string',            // Required. The column this data belongs to.
+  type: Skyflow.ElementType,   // Skyflow.ElementType enum.
+  inputStyles: {},             // Optional. Styles applied to the form element.
+  labelStyles: {},             // Optional. Styles for the label of the collect element.
+  errorTextStyles: {},         // Optional. Styles for the errorText of the collect element.
+  label: 'string',             // Optional. Label for the form element.
+  placeholder: 'string',       // Optional. Placeholder for the form element.
+  altText: 'string',           // (DEPRECATED) Initial value for the collect element.
+  validations: [],             // Optional. Array of validation rules.
 }
+```
+The `table` and `column` fields indicate which table and column in the vault the Element correspond to.
 
-const composableContainer = skyflow.container(Skyflow.ContainerType.COMPOSABLE, containerOptions);
+Note: Use dot-delimited strings to specify columns nested inside JSON fields (for example, `address.street.line1`).
 
-const cvv = composableContainer.create({
-  table: 'pii_fields',
-  column: 'primary_card.cvv',
-  type: Skyflow.ElementType.CVV,
-});
+All elements can be styled with  [JSS](https://cssinjs.org/?v=v10.7.1) syntax.
 
-composableContainer.mount('#cvvContainer');
+The `inputStyles` field accepts an object of CSS properties to apply to the form element in the following states:
 
-// Subscribing to CHANGE event, which gets triggered when element changes.
-cvv.on(Skyflow.EventName.CHANGE, state => {
-// Your implementation when Change event occurs.
-console.log(state);
-});
-```
+* `base`: all variants inherit from these styles
+* `complete`: applied when the Element has valid input
+* `empty`: applied when the Element has no input
+* `focus`: applied when the Element has focus
+* `invalid`: applied when the Element has invalid input
+* `cardIcon`: applied to the card type icon in CARD_NUMBER Element
+* `copyIcon`: applied to copy icon in Elements when enableCopy option is true
+* `global`: used for global styles like font-family.
 
-Sample Element state object when env is `DEV`
+An example of an `inputStyles` object:
 
 ```javascript
-{
-    elementType: 'CVV'
-    isEmpty: false
-    isFocused: true
-    isValid: false
-    value: '411'
+inputStyles: {
+  base: {
+    border: '1px solid #eae8ee',
+    padding: '10px 16px',
+    borderRadius: '4px',
+    color: '#1d1d1d',
+    fontFamily: '"Roboto", sans-serif'
+  },
+  complete: {
+    color: '#4caf50',
+  },
+  empty: {},
+  focus: {},
+  invalid: {
+    color: '#f44336',
+  },
+  cardIcon: {
+    position: 'absolute',
+    left: '8px',
+    bottom: 'calc(50% - 12px)',
+  },
+  copyIcon: {
+    position: 'absolute',
+    right: '8px',
+  },
+  global: {   
+    '@import': 'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
+  }
 }
 ```
+The states that are available for `labelStyles` are `base`, `focus`, `global`.
+* requiredAsterisk: styles applied for the Asterisk symbol in the label.
 
-Sample Element state object when env is `PROD`
+An example `labelStyles` object:
 
 ```javascript
-{
-    elementType: 'CVV'
-    isEmpty: false
-    isFocused: true
-    isValid: false
-    value: ''
+labelStyles: {
+  base: {
+    fontSize: '12px',
+    fontWeight: 'bold',
+    fontFamily: '"Roboto", sans-serif'
+  },
+  focus: {
+    color: '#1d1d1d'
+  },
+  global: {
+    '@import' :'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
+  }
 }
 ```
 
-### Update composable elements 
-You can update composable element properties with the `update` interface.
-
+The JS SDK supports the following composable elements:
 
-The `update` interface takes the below object:
-```javascript
-const updateElement = {
-  table: 'string',       // Optional. The table this data belongs to.
-  column: 'string',      // Optional. The column this data belongs to.
-  inputStyles: {},       // Optional. Styles applied to the form element.
-  labelStyles: {},       // Optional. Styles for the label of the element.
-  errorTextStyles: {},   // Optional. Styles for the errorText of element.
-  label: 'string',       // Optional. Label for the form element.
-  placeholder: 'string', // Optional. Placeholder for the form element.
-  validations: [],       // Optional. Array of validation rules.
-};
-```
+- `CARDHOLDER_NAME`
+- `CARD_NUMBER`
+- `EXPIRATION_DATE`
+- `EXPIRATION_MONTH`
+- `EXPIRATION_YEAR`
+- `CVV`
+- `INPUT_FIELD`
+- `PIN`
 
-Only include the properties that you want to update for the specified composable element. 
+`Note`: Only when the entered value in the below composable elements is valid, the focus shifts automatically. The element types are:
+- `CARD_NUMBER`
+- `EXPIRATION_DATE`
+- `EXPIRATION_MONTH`
+- `EXPIRATION_YEAR`
 
-Properties your provided when you created the element remain the same until you explicitly update them.
+The `INPUT_FIELD` type is a custom UI element without any built-in validations. For information on validations, see [validations](#validations).
 
-`Note`: You can't update the `type` property of an element.
+Along with the Composable Element definition, you can define additional options for the element:
 
-### End to end example
 ```javascript
-const containerOptions = { layout: [2, 1] };
+const options = {
+    required: false,  		// Optional, indicates whether the field is marked as required. Defaults to 'false'
+    enableCardIcon: true, 	// Optional, indicates whether card icon should be enabled (only applicable for CARD_NUMBER ElementType)
+    format: String, 		// Optional, format for the element (only applicable currently for EXPIRATION_DATE ElementType),
+    enableCopy: false 		// Optional, enables the copy icon in collect and reveal elements to copy text to clipboard. Defaults to 'false')
+}
+```
 
-// Create a composable container. 
-const composableContainer = skyflow.container(
-  Skyflow.ContainerType.COMPOSABLE,
-  containerOptions
-);
+- `required`: Whether or not the field is marked as required. Defaults to `false`.
+- `enableCardIcon`: Whether or not the icon is visible for the CARD_NUMBER element. Defaults to `true`.
+- `format`: Format pattern for the element. Only applicable to EXPIRATION_DATE and EXPIRATION_YEAR element types.
+- `enableCopy`: Whether or not the copy icon is visible in collect and reveal elements. Defaults to `false`.
 
-const stylesOptions = {
-  inputStyles: {
-    base: {
-      fontFamily: 'Inter',
-      fontStyle: 'normal',
-      fontWeight: 400,
-      fontSize: '14px',
-      lineHeight: '21px',
-      width: '294px',
-    },
-  },
-  labelStyles: {},
-  errorTextStyles: {
-    base: {},
-  },
-};
+The accepted `EXPIRATION_DATE` values are
 
-// Create composable elements.
-const cardHolderNameElement = composableContainer.create({
-  table: 'pii_fields',
-  column: 'first_name',
-  ...stylesOptions,
-  placeholder: 'Cardholder Name',
-  type: Skyflow.ElementType.CARDHOLDER_NAME,
-});
+- `MM/YY` (default)
+- `MM/YYYY`
+- `YY/MM`
+- `YYYY/MM`
 
 
-const cardNumberElement = composableContainer.create({
-  table: 'pii_fields',
-  column: 'card_number',
-  ...stylesOptions,
-  placeholder: 'Card Number',
-  type: Skyflow.ElementType.CARD_NUMBER,
-});
+The accepted `EXPIRATION_YEAR` values are
 
-const cvvElement = composableContainer.create({
-  table: 'pii_fields',
-  column: 'cvv',
-  ...stylesOptions,
-  placeholder: 'CVV',
-  type: Skyflow.ElementType.CVV,
-});
+- `YY` (default)
+- `YYYY`
 
-// Mount the composable container.
-composableContainer.mount('#compostableContainer'); // Assumes there is a div with id='#composableContainer' in the webpage.
-
-// ...
-
-// Update validations property on cvvElement.
-cvvElement.update({
-  validations: [{
-    type: Skyflow.ValidationRuleType.LENGTH_MATCH_RULE,
-    params: {
-      max: 3,
-      error: 'cvv must be 3 digits',
-    },
-  }]
-})
 
-// Update label, placeholder properties on cardHolderNameElement.
-cardHolderNameElement.update({
-  label: 'CARDHOLDER NAME',
-  placeholder: 'Eg: John'
-});
+Once you define the Element object and options, add it to the container using the `create(element, options)` method:
 
-// Update table, column, inputStyles properties on cardNumberElement.
-cardNumberElement.update({
-  table:'cards',
-  column:'card_number',
-  inputStyles:{
-    base:{
-      color:'blue'
-    }
-  }
-});
+```javascript
+const composableElement = {
+  table: 'string',             // Required, the table this data belongs to.
+  column: 'string',            // Required, the column into which this data should be inserted.
+  type: Skyflow.ElementType,   // Skyflow.ElementType enum.
+  inputStyles: {},             // Optional, styles that should be applied to the form element.
+  labelStyles: {},             // Optional, styles that will be applied to the label of the collect element.
+  errorTextStyles: {},         // Optional, styles that will be applied to the errorText of the collect element.
+  label: 'string',             // Optional, label for the form element.
+  placeholder: 'string',       // Optional, placeholder for the form element.
+  altText: 'string',           // (DEPRECATED) string that acts as an initial value for the collect element.
+  validations: [],             // Optional, array of validation rules.
+}
 
+const options = {
+  required: false,      // Optional, indicates whether the field is marked as required. Defaults to 'false'.
+  enableCardIcon: true, // Optional, indicates whether card icon should be enabled (only applicable for CARD_NUMBER ElementType).
+  format: String,       // Optional, format for the element (only applicable currently for EXPIRATION_DATE ElementType).
+  enableCopy: false,    // Optional, enables the copy icon in collect and reveal elements to copy text to clipboard. Defaults to 'false').
+};
 
+const element = container.create(composableElement, options);
 ```
-### Set an event listener on a composable container
-Currently, the SDK supports one event:
-- `SUBMIT`: Triggered when the `Enter` key is pressed in any container element.
 
-The handler `function(void) => void` is a callback function you provide that's called when the `SUBMIT' event fires.
+### Step 3: Mount Container to the DOM
+To specify where the Elements are rendered on your page, create a placeholder `<div>` element with unique `id` attribute. Use this empty `<div>` placeholder to mount the composable container.
 
-### Example
 ```javascript
-const containerOptions = { layout: [1] }
+<form>
+  <div id="composableContainer"/>
+  <br/>
+  <div id="button-id"/>
+  <button type="submit">Submit</button>
+</form>
+```
+Use the composable container's `mount(domElement)` method to insert the container's Elements into the specified `<div>`. For instance, the following call inserts Elements into the `<div>` with the `id "#composableContainer"`.
 
-// Creating a composable container.
-const composableContainer = skyflow.container(Skyflow.ContainerType.COMPOSABLE, containerOptions);
+```javacript
+container.mount('#composableContainer');
+```
 
-// Creating the element.
-const cvv = composableContainer.create({
-  table: 'pii_fields',
-  column: 'primary_card.cvv',
-  type: Skyflow.ElementType.CVV,
-});
+### Step 4: Collect data from elements
 
-// Mounting the container.
-composableContainer.mount('#cvvContainer');
 
-// Subscribing to the `SUBMIT` event, which gets triggered when the user hits `enter` key in any container element input.
-composableContainer.on(Skyflow.EventName.SUBMIT, ()=> {
-  // Your implementation when the SUBMIT(enter) event occurs.
-  console.log('Submit Event Listener is being Triggered.');
-});
+When the form is ready to be submitted, call the container's `collect(options?)` method. The options parameter takes an object of optional parameters as follows:
+- `tokens`: Whether or not tokens for the collected data are returned. Defaults to 'true'
+- `additionalFields`: Non-PCI elements data to insert into the vault, specified in the records object format.
+- `upsert`: To support upsert operations,  the table containing the data and a column marked as unique in that table.
+
+```javascript
+const options = {
+  tokens: true,                             // Optional, indicates whether tokens for the collected data should be returned. Defaults to 'true'.
+  additionalFields: {
+    records: [
+      {
+        table: 'string',                   // Table into which record should be inserted.
+        fields: {
+          column1: 'value',                // Column names should match vault column names.
+          // ...additional fields here.
+        },
+      },
+      // ...additional records here.
+    ],
+  },                                      // Optional
+  upsert: [                               // Upsert operations support in the vault                                    
+    {
+      table: 'string',                    // Table name
+      column: 'value',                    // Unique column in the table
+    },
+  ],                                      // Optional
+};
 ```
 
----
-# Securely revealing data client-side
--  [**Retrieving data from the vault**](#retrieving-data-from-the-vault)
--  [**Using Skyflow Elements to reveal data**](#using-skyflow-elements-to-reveal-data)
--  [**UI Error for Reveal Elements**](#ui-error-for-reveal-elements)
--  [**Set token for Reveal Elements**](#set-token-for-reveal-elements)
--  [**Set and clear altText for Reveal Elements**](#set-and-clear-alttext-for-reveal-elements)
--  [**Render a file with a File Element**](#render-a-file-with-a-file-element)
--  [**Update Reveal Elements**](#update-reveal-elements)
+### End to end example of collecting data with Composable Elements
 
-## Retrieving data from the vault
+```javascript
+// Step 1
+const containerOptions = {
+  layout: [2, 1],
+  styles: {
+    base: {
+      border: '1px solid #eae8ee',
+      padding: '10px 16px',
+      borderRadius: '4px',
+      margin: '12px 2px',
+    },
+  },
+  errorTextStyles: {
+    base: {
+      color: 'red',
+    },
+  },
+};
 
-For non-PCI use-cases, retrieving data from the vault and revealing it in the browser can be done either using the SkyflowID's, unique column values or tokens as described below
+const composableContainer = skyflowClient.container(
+  Skyflow.ContainerType.COMPOSABLE,
+  containerOptions
+);
 
-- ### Using Skyflow tokens
-    In order to retrieve data from your vault using tokens that you have previously generated for that data, you can use the `detokenize(records)` method. The records parameter takes a JSON object that contains `records` to be fetched as shown below.
+// Step 2
 
-```javascript
-const records = {
-  records: [
-    {
-      token: 'string', // Token for the record to be fetched.
-      redaction: RedactionType // Optional. Redaction to be applied for retrieved data.
+const collectStylesOptions = {
+  inputStyles: {
+    base: {
+      fontFamily: 'Inter',
+      fontStyle: 'normal',
+      fontWeight: 400,
+      fontSize: '14px',
+      lineHeight: '21px',
+      width: '294px',
     },
-  ],
+  },
+  labelStyles: {},
+  errorTextStyles: {
+    base: {},
+  },
 };
 
-Note: If you do not provide a redaction type, RedactionType.PLAIN_TEXT is the default.
+const cardHolderNameElement = composableContainer.create({
+  table: 'pii_fields',
+  column: 'first_name',
+  ...collectStylesOptions,
+  placeholder: 'Cardholder Name',
+  type: Skyflow.ElementType.CARDHOLDER_NAME,
+});
 
-skyflow.detokenize(records);
-```
-An [example](https://github.com/skyflowapi/skyflow-js/blob/main/samples/using-script-tag/pure-js.html) of a detokenize call: 
+const cardNumberElement = composableContainer.create({
+  table: 'pii_fields',
+  column: 'card_number',
+  ...collectStylesOptions,
+  placeholder: 'Card Number',
+  type: Skyflow.ElementType.CARD_NUMBER,
+});
 
-```javascript
-skyflow.detokenize({
-  records: [
-    {
-      token: '131e70dc-6f76-4319-bdd3-96281e051051',
-    },
-    {
-     token: '1r434532-6f76-4319-bdd3-96281e051051',
-     redaction: Skyflow.RedactionType.MASKED
-    }
-  ],
+const cvvElement = composableContainer.create({
+  table: 'pii_fields',
+  column: 'cvv',
+  ...collectStylesOptions,
+  placeholder: 'CVV',
+  type: Skyflow.ElementType.CVV,
+});
+
+// Step 3
+composableContainer.mount('#composableContainer'); // Assumes there is a div with id='#composableContainer' in the webpage.
+
+// Step 4
+composableContainer.collect({
+  tokens: true,
 });
 ```
+### Sample Response:
 
-The sample response:
 ```javascript
 {
-  "records": [
-    {
-      "token": "131e70dc-6f76-4319-bdd3-96281e051051",
-      "value": "1990-01-01",
-      "valueType": "STRING"
-    },
-    {
-     "token": "1r434532-6f76-4319-bdd3-96281e051051",
-     "value": "xxxxxxer",
-     "valueType": "STRING"
-   }
-  ]
+    "records": [
+        {
+            "table": "pii_fields",
+            "fields": {
+                "skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882",
+                "first_name": "63b5eeee-3624-493f-825e-137a9336f882",
+                "card_number": "f3907186-e7e2-466f-91e5-48e12c2bcbc1",
+                "cvv": "7baf5bda-aa22-4587-a5c5-412f6f783a19",
+            }
+        }
+    ]
 }
 ```
+For information on validations, see [validations](#validations).
 
-- ### Using Skyflow ID's or Unique Column Values
-    You can retrieve data from the vault with the `get(records, options)` method using either Skyflow IDs or unique column values.
+### Set an event listener on Composable Elements:
 
-    The records parameter accepts a JSON object that contains an array of either Skyflow IDs or unique column names and values.
+You can communicate with Skyflow Elements by listening to element events:
 
-    The options is an optional `IGetOptions` object that retrieves the tokens for SkyflowIDs.
- 
-    Notes:
+```javascript
+element.on(Skyflow.EventName,handler:function)
+```
 
-    - You can use either Skyflow IDs or unique values to retrieve records. You can't use both at the same time.
-    - `options` parameter is applicable only for retrieving tokens using Skyflow ID.
-    - You can't pass options along with the redaction type.
-    - `tokens` defaults to false.
-    
-    Skyflow.RedactionTypes accepts four values:
-    - `PLAIN_TEXT`
-    - `MASKED`
-    - `REDACTED`
-    - `DEFAULT`
 
-    You must apply a redaction type to retrieve data.
+The SDK supports four events:
 
-#### Schema (Skyflow IDs)
+- `CHANGE`: Triggered when the Element's value changes.
+- `READY`: Triggered when the Element is fully rendered.
+- `FOCUS`: Triggered when the Element gains focus.
+- `BLUR`: Triggered when the Element loses focus.
+
+The handler `function(state) => void` is a callback function you provide that's called when the event is fired with a state object that uses the following schema:
 
 ```javascript
-data = {
- records: [
-   {
-     ids: ["SKYFLOW_ID_1", "SKYFLOW_ID_2"],      // List of skyflow_ids for the records to fetch.
-     table: "NAME_OF_SKYFLOW_TABLE",             // Name of table holding the records in the vault.
-     redaction: Skyflow.RedactionType,           // Redaction type to apply to retrieved data.
-   },
- ],
-};
+state : {
+  elementType: Skyflow.ElementType
+  isEmpty: boolean 
+  isFocused: boolean
+  isValid: boolean
+  value: string
+}
 ```
-#### Schema (Unique column values)
+`Note`: Events only include element values when in the state object when env is DEV. By default, value is an empty string.
+
+### Example Usage of Event Listener on Composable Elements
 
 ```javascript
-data = {
- records: [
-   {
-     table: "NAME_OF_SKYFLOW_TABLE",        // Name of table holding the records in the vault.
-     columnName: "UNIQUE_COLUMN_NAME",      // Unique column name in the vault.
-     columnValues: [                        // List of given unique column values. 
-       "<COLUMN_VALUE_2>",
-       "<COLUMN_VALUE_3>",
-     ],                                     // Required when specifying a unique column
-     redaction: Skyflow.RedactionType,      // Redaction type applies to retrieved data.
+const containerOptions = {
+  layout: [1],
+  styles: {
+    base: {
+      border: '1px solid #eae8ee',
+      padding: '10px 16px',
+      borderRadius: '4px',
+      margin: '12px 2px',
+    }
+  },
+  errorTextStyles: {
+    base: {
+      color: 'red'
+    }
+  }
+}
 
-   },
- ],
-};
-```
-[Example usage (Skyflow IDs)](https://github.com/skyflowapi/skyflow-js/blob/main/samples/using-script-tag/get-pure-js.html)
+const composableContainer = skyflowClient.container(Skyflow.ContainerType.COMPOSABLE, containerOptions);
 
-```javascript
-skyflow.get({
- records: [
-   {
-     ids: ["f8d8a622-b557-4c6b-a12c-c5ebe0b0bfd9"],
-     table: "cards",
-     redaction: Skyflow.RedactionType.PLAIN_TEXT,
-   },
-   {
-     ids: ["da26de53-95d5-4bdb-99db-8d8c66a35ff9"],
-     table: "contacts",
-     redaction: Skyflow.RedactionType.PLAIN_TEXT,
-   },
- ],
+const cvv = composableContainer.create({
+  table: 'pii_fields',
+  column: 'primary_card.cvv',
+  type: Skyflow.ElementType.CVV,
+});
+
+composableContainer.mount('#cvvContainer');
+
+// Subscribing to CHANGE event, which gets triggered when element changes.
+cvv.on(Skyflow.EventName.CHANGE, state => {
+// Your implementation when Change event occurs.
+console.log(state);
 });
 ```
-Example response
+
+Sample Element state object when env is `DEV`
 
 ```javascript
 {
-   "records": [
-       {
-           "fields": {
-              "card_number": "4111111111111111",
-              "cvv": "127",
-              "expiry_date": "11/2035",
-              "fullname": "myname",
-              "id": "f8d8a622-b557-4c6b-a12c-c5ebe0b0bfd9"
-           },
-           "table": "cards"
-       }
-   ],
-   "errors": [
-       {
-           "error": {
-              "code": "404",
-              "description": "No Records Found"
-           },
-           "ids": ["da26de53-95d5-4bdb-99db-8d8c66a35ff9"]
-       }
-   ]
+    elementType: 'CVV'
+    isEmpty: false
+    isFocused: true
+    isValid: false
+    value: '411'
 }
 ```
-[Example usage (Unique column values)](https://github.com/skyflowapi/skyflow-js/blob/main/samples/using-script-tag/get-pure-js.html)
 
-```javascript
-skyflow.get({
- records: [
-   {
-   table: "cards",
-   redaction: RedactionType.PLAIN_TEXT,
-   columnName: "card_id",
-   columnValues: ["123", "456"],
-  }
- ],
-});
-```
-Sample response: 
+Sample Element state object when env is `PROD`
+
 ```javascript
 {
-   "records": [
-       {
-           "fields": {
-               "card_id": "123",
-               "expiry_date": "11/35",
-               "fullname": "myname",
-               "id": "f8d2-b557-4c6b-a12c-c5ebfd9"
-           },
-           "table": "cards"
-       },
-       {
-           "fields": {
-               "card_id": "456",
-               "expiry_date": "10/23",
-               "fullname": "sam",
-               "id": "da53-95d5-4bdb-99db-8d8c5ff9"
-           },
-           "table": "cards"
-       }
-   ]
+    elementType: 'CVV'
+    isEmpty: false
+    isFocused: true
+    isValid: false
+    value: ''
 }
 ```
 
-[Example usage (Fetch tokens using Skyflow IDs)](https://github.com/skyflowapi/skyflow-js/blob/main/samples/using-script-tag/get-pure-js.html)
-```javascript
-skyflow.get({
- records: [
-   {
-     ids: [
-      "f8d8a622-b557-4c6b-a12c-c5ebe0b0bfd9",
-      "da26de53-95d5-4bdb-99db-8d8c66a35ff9"
-    ],
-     table: "cards",
-   },
- ],
-}, { tokens: true });
-```
-Sample response: 
+### Update composable elements 
+You can update composable element properties with the `update` interface.
+
+
+The `update` interface takes the below object:
 ```javascript
-{
-  "records": [
-    {
-      "fields": {
-        "card_id": "f689e421-4cf8-4438-8dbd-cc8e7654b7d9",
-        "expiry_date": "d9ef1cb8-5c22-48b0-b769-64ac20ccee01",
-        "fullname": "37480f82-d237-4efc-a06a-ebe57121be06",
-        "id": "f8d2-b557-4c6b-a12c-c5ebfd9"
-      },
-      "table": "cards"
-    },
-    {
-      "fields": {
-        "card_id": "d794b64c-e283-4fb8-8eef-9f6710730b69",
-        "expiry_date": "ff848fc3-a093-4ed4-9414-877b74a33111",
-        "fullname": "dfb6c247-3ee6-4fd2-8d1e-19d8e11c25ce",
-        "id": "da53-95d5-4bdb-99db-8d8c5ff9"
-      },
-      "table": "cards"
-    }
-  ]
-}
+const updateElement = {
+  table: 'string',       // Optional. The table this data belongs to.
+  column: 'string',      // Optional. The column this data belongs to.
+  inputStyles: {},       // Optional. Styles applied to the form element.
+  labelStyles: {},       // Optional. Styles for the label of the element.
+  errorTextStyles: {},   // Optional. Styles for the errorText of element.
+  label: 'string',       // Optional. Label for the form element.
+  placeholder: 'string', // Optional. Placeholder for the form element.
+  validations: [],       // Optional. Array of validation rules.
+};
 ```
 
-## Using Skyflow Elements to reveal data
+Only include the properties that you want to update for the specified composable element. 
 
-Skyflow Elements can be used to securely reveal data in a browser without exposing your front end to the sensitive data. This is great for use cases like card issuance where you may want to reveal the card number to a user without increasing your PCI compliance scope. 
+Properties your provided when you created the element remain the same until you explicitly update them.
 
-### Step 1: Create a container
-To start, create a container using the `container(Skyflow.ContainerType)` method of the Skyflow client as shown below.
+`Note`: You can't update the `type` property of an element.
 
+### End to end example
 ```javascript
-const container = skyflowClient.container(Skyflow.ContainerType.REVEAL)
+const containerOptions = { layout: [2, 1] };
+
+// Create a composable container. 
+const composableContainer = skyflowClient.container(
+  Skyflow.ContainerType.COMPOSABLE,
+  containerOptions
+);
+
+const stylesOptions = {
+  inputStyles: {
+    base: {
+      fontFamily: 'Inter',
+      fontStyle: 'normal',
+      fontWeight: 400,
+      fontSize: '14px',
+      lineHeight: '21px',
+      width: '294px',
+    },
+  },
+  labelStyles: {},
+  errorTextStyles: {
+    base: {},
+  },
+};
+
+// Create composable elements.
+const cardHolderNameElement = composableContainer.create({
+  table: 'pii_fields',
+  column: 'first_name',
+  ...stylesOptions,
+  placeholder: 'Cardholder Name',
+  type: Skyflow.ElementType.CARDHOLDER_NAME,
+});
+
+
+const cardNumberElement = composableContainer.create({
+  table: 'pii_fields',
+  column: 'card_number',
+  ...stylesOptions,
+  placeholder: 'Card Number',
+  type: Skyflow.ElementType.CARD_NUMBER,
+});
+
+const cvvElement = composableContainer.create({
+  table: 'pii_fields',
+  column: 'cvv',
+  ...stylesOptions,
+  placeholder: 'CVV',
+  type: Skyflow.ElementType.CVV,
+});
+
+// Mount the composable container.
+composableContainer.mount('#compostableContainer'); // Assumes there is a div with id='#composableContainer' in the webpage.
+
+// ...
+
+// Update validations property on cvvElement.
+cvvElement.update({
+  validations: [{
+    type: Skyflow.ValidationRuleType.LENGTH_MATCH_RULE,
+    params: {
+      max: 3,
+      error: 'cvv must be 3 digits',
+    },
+  }]
+})
+
+// Update label, placeholder properties on cardHolderNameElement.
+cardHolderNameElement.update({
+  label: 'CARDHOLDER NAME',
+  placeholder: 'Eg: John'
+});
+
+// Update table, column, inputStyles properties on cardNumberElement.
+cardNumberElement.update({
+  table:'cards',
+  column:'card_number',
+  inputStyles:{
+    base:{
+      color:'blue'
+    }
+  }
+});
+
+
+```
+### Set an event listener on a composable container
+Currently, the SDK supports one event:
+- `SUBMIT`: Triggered when the `Enter` key is pressed in any container element.
+
+The handler `function(void) => void` is a callback function you provide that's called when the `SUBMIT' event fires.
+
+### Example
+```javascript
+const containerOptions = { layout: [1] }
+
+// Creating a composable container.
+const composableContainer = skyflowClient.container(Skyflow.ContainerType.COMPOSABLE, containerOptions);
+
+// Creating the element.
+const cvv = composableContainer.create({
+  table: 'pii_fields',
+  column: 'primary_card.cvv',
+  type: Skyflow.ElementType.CVV,
+});
+
+// Mounting the container.
+composableContainer.mount('#cvvContainer');
+
+// Subscribing to the `SUBMIT` event, which gets triggered when the user hits `enter` key in any container element input.
+composableContainer.on(Skyflow.EventName.SUBMIT, ()=> {
+  // Your implementation when the SUBMIT(enter) event occurs.
+  console.log('Submit Event Listener is being Triggered.');
+});
+```
+
+## Using Skyflow Composable File Element to upload a file
+You can upload binary files to a vault using the Skyflow File Element. Use the following steps to securely upload a file.
+### Step 1: Create a container
+
+Create a container for the form elements using the container(Skyflow.ContainerType) method of the Skyflow client:
+
+```javascript
+const containerOptions = { layout: [1] }
+
+// Creating a composable container.
+const composableContainer = skyflowClient.container(Skyflow.ContainerType.COMPOSABLE, containerOptions);
+```
+
+### Step 2: Create a File Element
+
+Skyflow Collect Elements are defined as follows: 
+
+```javascript
+const collectElement =  {
+  type: Skyflow.ElementType.FILE_INPUT,   // Skyflow.ElementType enum.
+  table: 'string',             // The table this data belongs to.
+  column: 'string',            // The column into which this data should be inserted.
+  skyflowID: 'string',         // The skyflow_id of the record.
+  inputStyles: {},             // Optional, styles that should be applied to the form element.
+  labelStyles: {},             // Optional, styles that will be applied to the label of the collect element.
+  errorTextStyles:{},          // Optional, styles that will be applied to the errorText of the collect element.
+}
+```
+The `table` and `column` fields indicate which table and column the Element corresponds to. 
+
+`skyflowID` indicates the record that stores the file.
+
+**Notes**: 
+- `skyflowID` is required while creating File element
+- Use period-delimited strings to specify columns nested inside JSON fields (e.g. `address.street.line1`).
+
+### Step 3: Mount Container to the DOM
+Mount Elements for file upload to the DOM the same way as Elements used for collecting data. Refer to Step 3 of the [section above](#step-3-mount-container-to-the-dom).
+
+### Step 4: Collect data from elements
+
+When you're ready to upload the file, call the  `uploadFiles()` method on the container object.
+
+```javascript
+composableContainer.uploadFiles();
+```
+### File upload limitations:
+
+- Only non-executable file are allowed to be uploaded.
+- Files must have a maximum size of 32 MB
+- File columns can't enable tokenization, redaction, or arrays.
+- Re-uploading a file overwrites previously uploaded data.
+- Partial uploads or resuming a previous upload isn't supported.
+
+### End-to-end file upload
+
+```javascript
+// Step 1.
+const containerOptions = { layout: [1] }
+
+// Creating a composable container.
+const container = skyflowClient.container(Skyflow.ContainerType.COMPOSABLE, containerOptions);
+
+// Step 2.
+const element = container.create({
+  table: 'pii_fields',
+  column: 'file',
+  skyflowID: '431eaa6c-5c15-4513-aa15-29f50babe882',
+  inputstyles: {
+    base: {
+      color: '#1d1d1d',
+    },
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: 'bold',
+    },
+  },
+  errorTextStyles: {
+    base: {
+      color: '#f44336',
+    },
+  },
+  type: Skyflow.ElementType.FILE_INPUT,
+});
+
+// Step 3.
+container.mount('#file'); // Assumes there is a div with id='#file' in the webpage.
+
+// Step 4.
+container.uploadFiles();
+```
+
+**Sample Response :**
+```javascript
+{
+    fileUploadResponse: [
+        {
+            "skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882"
+        }
+    ]
+}
+```
+### File upload with options:
+
+Along with fileElementInput, you can define other options in the Options object as described below: 
+```js
+const options = {
+ allowedFileType: String[],  // Optional, indicates the allowed file types for upload
+}
+```
+`allowedFileType`: An array of string value that indicates the allowedFileTypes to be uploaded.
+
+#### File upload with options example
+
+```javascript
+// Create collect Container.
+const containerOptions = { layout: [1] }
+
+// Creating a composable container.
+const collectContainer = skyflowClient.container(Skyflow.ContainerType.COMPOSABLE, containerOptions);
+
+// Create collect elements.
+const cardNumberElement = collectContainer.create({
+  table: 'newTable',
+  column: 'card_number',
+  inputstyles: {
+    base: {
+      color: '#1d1d1d',
+    },
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: 'bold',
+    },
+  },
+  errorTextStyles: {
+    base: {
+      color: '#f44336',
+    },
+  },
+  placeholder: 'card number',
+  label: 'Card Number',
+  type: Skyflow.ElementType.CARD_NUMBER,
+});
+const options = { 
+    allowedFileType: [".pdf",".png"];
+};
+const fileElement = collectContainer.create({
+  table: 'newTable',
+  column: 'file',
+  skyflowID: '431eaa6c-5c15-4513-aa15-29f50babe882',
+  inputstyles: {
+    base: {
+      color: '#1d1d1d',
+    },
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: 'bold',
+    },
+  },
+  errorTextStyles: {
+    base: {
+      color: '#f44336',
+    },
+  },
+  type: Skyflow.ElementType.FILE_INPUT,
+},
+  options
+);
+
+// Mount the elements.
+collectContainer.mount('#collectContainer');
+
+// Collect and upload methods.
+collectContainer.collect({});
+collectContainer.uploadFiles();
+
+```
+**Sample Response for collect():**
+```javascript
+{
+  "records": [
+    {
+      "table": "newTable",
+      "fields": {
+        "card_number": "f3907186-e7e2-466f-91e5-48e12c2bcbc1",
+      }
+    }
+  ]
+}
+```
+**Sample Response for file uploadFiles() :**
+```javascript
+{
+    "fileUploadResponse": [
+        {
+            "skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882"
+        }
+    ]
+}
+```
+#### File upload with additional elements
+
+```javascript
+// Create collect Container.
+const containerOptions = { layout: [1,1] }
+
+// Creating a composable container.
+const collectContainer = skyflowClient.container(Skyflow.ContainerType.COMPOSABLE, containerOptions);
+
+// Create collect elements.
+const cardNumberElement = collectContainer.create({
+  table: 'newTable',
+  column: 'card_number',
+  inputstyles: {
+    base: {
+      color: '#1d1d1d',
+    },
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: 'bold',
+    },
+  },
+  errorTextStyles: {
+    base: {
+      color: '#f44336',
+    },
+  },
+  placeholder: 'card number',
+  label: 'Card Number',
+  type: Skyflow.ElementType.CARD_NUMBER,
+});
+
+const fileElement = collectContainer.create({
+  table: 'newTable',
+  column: 'file',
+  skyflowID: '431eaa6c-5c15-4513-aa15-29f50babe882',
+  inputstyles: {
+    base: {
+      color: '#1d1d1d',
+    },
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: 'bold',
+    },
+  },
+  errorTextStyles: {
+    base: {
+      color: '#f44336',
+    },
+  },
+  type: Skyflow.ElementType.FILE_INPUT,
+});
+
+// Mount the elements.
+cardNumberElement.mount('#collectCardNumber');
+fileElement.mount('#collectFile');
+
+// Collect and upload methods.
+collectContainer.collect({});
+collectContainer.uploadFiles();
+
+```
+**Sample Response for collect():**
+```javascript
+{
+  "records": [
+    {
+      "table": "newTable",
+      "fields": {
+        "card_number": "f3907186-e7e2-466f-91e5-48e12c2bcbc1",
+      }
+    }
+  ]
+}
+```
+**Sample Response for file uploadFiles() :**
+```javascript
+{
+    "fileUploadResponse": [
+        {
+            "skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882"
+        }
+    ]
+}
+```
+
+Note: File name should contain only alphanumeric characters and !-_.*()
+
+
+## Using Skyflow Composable File Element to upload multiple files
+You can upload binary files to a vault using the Skyflow File Element. Use the following steps to securely upload a file.
+### Step 1: Create a container
+
+Create a container for the form elements using the container(Skyflow.ContainerType) method of the Skyflow client:
+
+```javascript
+const containerOptions = { layout: [1] }
+
+// Creating a composable container.
+const composableContainer = skyflowClient.container(Skyflow.ContainerType.COMPOSABLE, containerOptions);
+```
+
+### Step 2: Create a File Element
+
+Skyflow Collect Elements are defined as follows: 
+
+```javascript
+const collectElement =  {
+  type: Skyflow.ElementType.MULTI_FILE_INPUT,   // Skyflow.ElementType enum.
+  table: 'string',             // The table this data belongs to.
+  column: 'string',            // The column into which this data should be inserted.
+  inputStyles: {},             // Optional, styles that should be applied to the form element.
+  labelStyles: {},             // Optional, styles that will be applied to the label of the collect element.
+  errorTextStyles:{},          // Optional, styles that will be applied to the errorText of the collect element.
+}
+```
+The `table` and `column` fields indicate which table and column the Element corresponds to. 
+
+**Notes**:  
+- Use period-delimited strings to specify columns nested inside JSON fields (e.g. `address.street.line1`).
+
+### Step 3: Mount container to the DOM
+Elements used for rendering files are mounted to the DOM the same way as Elements used for collecting data. Refer to Step 3 of the [section above](#step-3-mount-elements-to-the-dom-1).
+
+### Step 4: Collect data from elements
+
+When you're ready to upload the file, call the  `uploadMultipleFiles()` method on the element.
+
+```javascript
+const metaData = {card_number: '123'} // Optional: used to generate Skyflow IDs, and upload files to those IDs
+
+element.uploadMultipleFiles();
+```
+Note: 
+- If `MetaData` is provided, that will be used to generate Skyflow IDs, and upload files to those IDs
+- If `MetaData` is not provided, the files will be uploaded as a new record.
+
+### File upload limitations:
+
+- Only non-executable file are allowed to be uploaded.
+- Files must have a maximum size of 32 MB
+- File columns can't enable tokenization, redaction, or arrays.
+- Re-uploading a file overwrites previously uploaded data.
+- Partial uploads or resuming a previous upload isn't supported.
+
+### End-to-end file upload
+
+```javascript
+// Step 1.
+const containerOptions = { layout: [1] }
+
+// Creating a composable container.
+const container = skyflowClient.container(Skyflow.ContainerType.COMPOSABLE, containerOptions);
+
+// Step 2.
+const element = container.create({
+  table: 'pii_fields',
+  column: 'file',
+  skyflowID: '431eaa6c-5c15-4513-aa15-29f50babe882',
+  inputstyles: {
+    base: {
+      color: '#1d1d1d',
+    },
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: 'bold',
+    },
+  },
+  errorTextStyles: {
+    base: {
+      color: '#f44336',
+    },
+  },
+  type: Skyflow.ElementType.MULTI_FILE_INPUT,
+});
+
+// Step 3.
+container.mount('#file'); // Assumes there is a div with id='#file' in the webpage.
+
+// Step 4.
+element.uploadMultipleFiles();
+```
+
+**Sample Response :**
+```javascript
+{
+    fileUploadResponse: [
+        {
+            "skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882"
+        }
+    ]
+}
+```
+### File upload with options:
+
+Along with fileElementInput, you can define other options in the Options object as described below: 
+```js
+const options = {
+ allowedFileType: String[],  // Optional, indicates the allowed file types for upload
+}
+```
+`allowedFileType`: An array of string value that indicates the allowedFileTypes to be uploaded.
+
+#### File upload with options example
+
+```javascript
+// Create collect Container.
+const containerOptions = { layout: [1] }
+
+// Creating a composable container.
+const collectContainer = skyflowClient.container(Skyflow.ContainerType.COMPOSABLE, containerOptions);
+
+// Create collect elements.
+const cardNumberElement = collectContainer.create({
+  table: 'newTable',
+  column: 'card_number',
+  inputstyles: {
+    base: {
+      color: '#1d1d1d',
+    },
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: 'bold',
+    },
+  },
+  errorTextStyles: {
+    base: {
+      color: '#f44336',
+    },
+  },
+  placeholder: 'card number',
+  label: 'Card Number',
+  type: Skyflow.ElementType.CARD_NUMBER,
+});
+const options = { 
+    allowedFileType: [".pdf",".png"];
+};
+const fileElement = collectContainer.create({
+  table: 'newTable',
+  column: 'file',
+  skyflowID: '431eaa6c-5c15-4513-aa15-29f50babe882',
+  inputstyles: {
+    base: {
+      color: '#1d1d1d',
+    },
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: 'bold',
+    },
+  },
+  errorTextStyles: {
+    base: {
+      color: '#f44336',
+    },
+  },
+  type: Skyflow.ElementType.MULTI_FILE_INPUT,
+},
+  options
+);
+
+// Mount the elements.
+collectContainer.mount('#collectContainer');
+
+// Collect and upload methods.
+collectContainer.collect({});
+fileElement.uploadMultipleFiles();
+
+```
+**Sample Response for collect():**
+```javascript
+{
+  "records": [
+    {
+      "table": "newTable",
+      "fields": {
+        "card_number": "f3907186-e7e2-466f-91e5-48e12c2bcbc1",
+      }
+    }
+  ]
+}
+```
+**Sample Response for file uploadFiles() :**
+```javascript
+{
+    "fileUploadResponse": [
+        {
+            "skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882"
+        }
+    ]
+}
+```
+#### File upload with additional elements
+
+```javascript
+// Create collect Container.
+const containerOptions = { layout: [1,1] }
+
+// Creating a composable container.
+const collectContainer = skyflowClient.container(Skyflow.ContainerType.COMPOSABLE, containerOptions);
+
+// Create collect elements.
+const cardNumberElement = collectContainer.create({
+  table: 'newTable',
+  column: 'card_number',
+  inputstyles: {
+    base: {
+      color: '#1d1d1d',
+    },
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: 'bold',
+    },
+  },
+  errorTextStyles: {
+    base: {
+      color: '#f44336',
+    },
+  },
+  placeholder: 'card number',
+  label: 'Card Number',
+  type: Skyflow.ElementType.CARD_NUMBER,
+});
+
+const fileElement = collectContainer.create({
+  table: 'newTable',
+  column: 'file',
+  skyflowID: '431eaa6c-5c15-4513-aa15-29f50babe882',
+  inputstyles: {
+    base: {
+      color: '#1d1d1d',
+    },
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+      fontWeight: 'bold',
+    },
+  },
+  errorTextStyles: {
+    base: {
+      color: '#f44336',
+    },
+  },
+  type: Skyflow.ElementType.MULTI_FILE_INPUT,
+});
+
+// Mount the elements.
+collectContainer.mount('#collectContainer');
+
+// Collect and upload methods.
+collectContainer.collect({});
+fileElement.uploadMultipleFiles();
+
+```
+**Sample Response for collect():**
+```javascript
+{
+  "records": [
+    {
+      "table": "newTable",
+      "fields": {
+        "card_number": "f3907186-e7e2-466f-91e5-48e12c2bcbc1",
+      }
+    }
+  ]
+}
+```
+**Sample Response for file uploadFiles() :**
+```javascript
+{
+    "fileUploadResponse": [
+        {
+            "skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882"
+        },
+        {
+            "skyflow_id": "546eaa6c-5c15-4513-aa15-29f50babe809"
+        }
+    ]
+}
+```
+Note: File name should contain only alphanumeric characters and !-_.*()
+
+---
+
+
+# Securely revealing data client-side
+-  [**Retrieving data from the vault**](#retrieving-data-from-the-vault)
+-  [**Using Skyflow Elements to reveal data**](#using-skyflow-elements-to-reveal-data)
+-  [**UI Error for Reveal Elements**](#ui-error-for-reveal-elements)
+-  [**Set token for Reveal Elements**](#set-token-for-reveal-elements)
+-  [**Set and clear altText for Reveal Elements**](#set-and-clear-alttext-for-reveal-elements)
+-  [**Render a file with a File Element**](#render-a-file-with-a-file-element)
+-  [**Update Reveal Elements**](#update-reveal-elements)
+-  [**Using Composable Reveal Elements to reveal data**](#using-composable-reveal-elements-to-reveal-data)
+-  [**Update Composable Reveal Elements**](#update-reveal-composable-elements)
+-  [**Render a file with a composable file element**](#render-a-file-with-a-composable-file-element)
+
+
+## Retrieving data from the vault
+
+For non-PCI use-cases, retrieving data from the vault and revealing it in the browser can be done either using the SkyflowID's, unique column values or tokens as described below
+
+- ### Using Skyflow tokens
+    In order to retrieve data from your vault using tokens that you have previously generated for that data, you can use the `detokenize(records)` method. The records parameter takes a JSON object that contains `records` to be fetched as shown below.
+
+```javascript
+const records = {
+  records: [
+    {
+      token: 'string', // Token for the record to be fetched.
+      redaction: RedactionType // Optional. Redaction to be applied for retrieved data.
+    },
+  ],
+};
+
+Note: If you do not provide a redaction type, RedactionType.PLAIN_TEXT is the default.
+
+skyflow.detokenize(records);
+```
+An [example](https://github.com/skyflowapi/skyflow-js/blob/main/samples/using-script-tag/pure-js.html) of a detokenize call: 
+
+```javascript
+skyflow.detokenize({
+  records: [
+    {
+      token: '131e70dc-6f76-4319-bdd3-96281e051051',
+    },
+    {
+     token: '1r434532-6f76-4319-bdd3-96281e051051',
+     redaction: Skyflow.RedactionType.MASKED
+    }
+  ],
+});
+```
+
+The sample response:
+```javascript
+{
+  "records": [
+    {
+      "token": "131e70dc-6f76-4319-bdd3-96281e051051",
+      "value": "1990-01-01",
+      "valueType": "STRING"
+    },
+    {
+     "token": "1r434532-6f76-4319-bdd3-96281e051051",
+     "value": "xxxxxxer",
+     "valueType": "STRING"
+   }
+  ]
+}
+```
+
+- ### Using Skyflow ID's or Unique Column Values
+    You can retrieve data from the vault with the `get(records, options)` method using either Skyflow IDs or unique column values.
+
+    The records parameter accepts a JSON object that contains an array of either Skyflow IDs or unique column names and values.
+
+    The options is an optional `IGetOptions` object that retrieves the tokens for SkyflowIDs.
+ 
+    Notes:
+
+    - You can use either Skyflow IDs or unique values to retrieve records. You can't use both at the same time.
+    - `options` parameter is applicable only for retrieving tokens using Skyflow ID.
+    - You can't pass options along with the redaction type.
+    - `tokens` defaults to false.
+    
+    Skyflow.RedactionTypes accepts four values:
+    - `PLAIN_TEXT`
+    - `MASKED`
+    - `REDACTED`
+    - `DEFAULT`
+
+    You must apply a redaction type to retrieve data.
+
+#### Schema (Skyflow IDs)
+
+```javascript
+data = {
+ records: [
+   {
+     ids: ["SKYFLOW_ID_1", "SKYFLOW_ID_2"],      // List of skyflow_ids for the records to fetch.
+     table: "NAME_OF_SKYFLOW_TABLE",             // Name of table holding the records in the vault.
+     redaction: Skyflow.RedactionType,           // Redaction type to apply to retrieved data.
+   },
+ ],
+};
+```
+#### Schema (Unique column values)
+
+```javascript
+data = {
+ records: [
+   {
+     table: "NAME_OF_SKYFLOW_TABLE",        // Name of table holding the records in the vault.
+     columnName: "UNIQUE_COLUMN_NAME",      // Unique column name in the vault.
+     columnValues: [                        // List of given unique column values. 
+       "<COLUMN_VALUE_2>",
+       "<COLUMN_VALUE_3>",
+     ],                                     // Required when specifying a unique column
+     redaction: Skyflow.RedactionType,      // Redaction type applies to retrieved data.
+
+   },
+ ],
+};
+```
+[Example usage (Skyflow IDs)](https://github.com/skyflowapi/skyflow-js/blob/main/samples/using-script-tag/get-pure-js.html)
+
+```javascript
+skyflow.get({
+ records: [
+   {
+     ids: ["f8d8a622-b557-4c6b-a12c-c5ebe0b0bfd9"],
+     table: "cards",
+     redaction: Skyflow.RedactionType.PLAIN_TEXT,
+   },
+   {
+     ids: ["da26de53-95d5-4bdb-99db-8d8c66a35ff9"],
+     table: "contacts",
+     redaction: Skyflow.RedactionType.PLAIN_TEXT,
+   },
+ ],
+});
+```
+Example response
+
+```javascript
+{
+   "records": [
+       {
+           "fields": {
+              "card_number": "4111111111111111",
+              "cvv": "127",
+              "expiry_date": "11/2035",
+              "fullname": "myname",
+              "id": "f8d8a622-b557-4c6b-a12c-c5ebe0b0bfd9"
+           },
+           "table": "cards"
+       }
+   ],
+   "errors": [
+       {
+           "error": {
+              "code": "404",
+              "description": "No Records Found"
+           },
+           "ids": ["da26de53-95d5-4bdb-99db-8d8c66a35ff9"]
+       }
+   ]
+}
+```
+[Example usage (Unique column values)](https://github.com/skyflowapi/skyflow-js/blob/main/samples/using-script-tag/get-pure-js.html)
+
+```javascript
+skyflow.get({
+ records: [
+   {
+   table: "cards",
+   redaction: RedactionType.PLAIN_TEXT,
+   columnName: "card_id",
+   columnValues: ["123", "456"],
+  }
+ ],
+});
+```
+Sample response: 
+```javascript
+{
+   "records": [
+       {
+           "fields": {
+               "card_id": "123",
+               "expiry_date": "11/35",
+               "fullname": "myname",
+               "id": "f8d2-b557-4c6b-a12c-c5ebfd9"
+           },
+           "table": "cards"
+       },
+       {
+           "fields": {
+               "card_id": "456",
+               "expiry_date": "10/23",
+               "fullname": "sam",
+               "id": "da53-95d5-4bdb-99db-8d8c5ff9"
+           },
+           "table": "cards"
+       }
+   ]
+}
+```
+
+[Example usage (Fetch tokens using Skyflow IDs)](https://github.com/skyflowapi/skyflow-js/blob/main/samples/using-script-tag/get-pure-js.html)
+```javascript
+skyflow.get({
+ records: [
+   {
+     ids: [
+      "f8d8a622-b557-4c6b-a12c-c5ebe0b0bfd9",
+      "da26de53-95d5-4bdb-99db-8d8c66a35ff9"
+    ],
+     table: "cards",
+   },
+ ],
+}, { tokens: true });
+```
+Sample response: 
+```javascript
+{
+  "records": [
+    {
+      "fields": {
+        "card_id": "f689e421-4cf8-4438-8dbd-cc8e7654b7d9",
+        "expiry_date": "d9ef1cb8-5c22-48b0-b769-64ac20ccee01",
+        "fullname": "37480f82-d237-4efc-a06a-ebe57121be06",
+        "id": "f8d2-b557-4c6b-a12c-c5ebfd9"
+      },
+      "table": "cards"
+    },
+    {
+      "fields": {
+        "card_id": "d794b64c-e283-4fb8-8eef-9f6710730b69",
+        "expiry_date": "ff848fc3-a093-4ed4-9414-877b74a33111",
+        "fullname": "dfb6c247-3ee6-4fd2-8d1e-19d8e11c25ce",
+        "id": "da53-95d5-4bdb-99db-8d8c5ff9"
+      },
+      "table": "cards"
+    }
+  ]
+}
+```
+
+## Using Skyflow Elements to reveal data
+
+Skyflow Elements can be used to securely reveal data in a browser without exposing your front end to the sensitive data. This is great for use cases like card issuance where you may want to reveal the card number to a user without increasing your PCI compliance scope. 
+
+### Step 1: Create a container
+To start, create a container using the `container(Skyflow.ContainerType)` method of the Skyflow client as shown below.
+
+```javascript
+const container = skyflowClient.container(Skyflow.ContainerType.REVEAL)
+```
+
+### Step 2: Create a reveal Element
+
+Then define a Skyflow Element to reveal data as shown below. 
+
+```javascript
+const revealElement = {
+  token: 'string',     // Required, token of the data being revealed.
+  inputStyles: {},     // Optional, styles to be applied to the element.
+  labelStyles: {},     // Optional, styles to be applied to the label of the reveal element.
+  errorTextStyles: {}, // Optional, styles that will be applied to the errorText of the reveal element.
+  label: 'string',     // Optional, label for the form element.
+  altText: 'string',   // Optional, string that is shown before reveal, will show token if altText is not provided.
+  redaction: RedactionType, //Optional, Redaction Type to be applied to data, RedactionType.PLAIN_TEXT will be applied if not provided.
+};
+```
+
+Note: If you don't provide a redaction type, RedactionType.PLAIN_TEXT will apply by default.
+
+The `inputStyles`, `labelStyles` and  `errorTextStyles` parameters accepts a styles object as described in the [previous section](#step-2-create-a-collect-element) for collecting data. But for reveal element, `inputStyles` accepts only `base` variant, `copyIcon` and `global` style objects. 
+
+An example of a inputStyles object:
+
+```javascript
+inputStyles: {
+  base: {
+    color: '#1d1d1d',
+  },
+  copyIcon: {
+    position: 'absolute',
+    right: '8px',
+    top: 'calc(50% - 10px)',
+  },
+  global: {
+    '@import' :'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
+  }
+},
+```
+
+An example of a labelStyles object:
+
+```javascript
+labelStyles: {
+  base: {
+    fontSize: '12px',
+    fontWeight: 'bold',
+  },
+  global: {
+    '@import' :'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
+  }
+},
+```
+
+An example of a errorTextStyles object:
+
+```javascript
+errorTextStyles: {
+  base: {
+    color: '#f44336',
+  },
+  global: {
+    '@import' :'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
+  }
+},
+```
+
+Along with RevealElementInput, you can define other options in the RevealElementOptions object as described below: 
+```js
+const options = {
+  enableCopy: false,    // Optional, enables the copy icon to reveal elements to copy text to clipboard. Defaults to 'false').
+ format: String,        // Optional, format for the element 
+ translation: {}        // Optional, indicates the allowed data type value for format. 
+}
+```
+
+`format`: A string value that indicates how the reveal element should display the value, including placeholder characters that map to keys `translation` If `translation` isn't specified to any character in the `format` value is considered as a string literal.
+
+`translation`: An object of key value pairs, where the key is a character that appears in `format` and the value is a simple regex pattern of acceptable inputs for that character. Each key can only appear once. Defaults to `{ ‘X’: ‘[0-9]’ }`.
+
+**Reveal Element Options examples:**
+Example 1
+```js
+const revealElementInput = {
+ token: '<token>' 
+};
+
+const options = {
+  format: '(XXX) XXX-XXXX',
+  translation: { 'X': '[0-9]'} 
+};
+
+const revealElement = revealContainer.create(revealElementInput,options);
+```
+
+Value from vault: "1234121234"
+Revealed Value displayed in element: "(123) 412-1234"
+
+Example 2:
+```js
+const revealElementInput = {
+ token: '<token>' 
+};
+
+const options = {
+  format: 'XXXX-XXXXXX-XXXXX',
+  translation: { 'X': '[0-9]' } 
+};
+
+const revealElement = revealContainer.create(revealElementInput,options);
+```
+
+Value from vault: "374200000000004"
+Revealed Value displayed in element: "3742-000000-00004"
+
+Once you've defined a Skyflow Element, you can use the `create(element)` method of the container to create the Element as shown below: 
+
+```javascript
+const element = container.create(revealElement)
+```
+
+### Step 3: Mount Elements to the DOM
+
+Elements used for revealing data are mounted to the DOM the same way as Elements used for collecting data. Refer to Step 3 of the [section above](#step-3-mount-elements-to-the-dom).
+
+
+### Step 4: Reveal data
+When the sensitive data is ready to be retrieved and revealed, call the `reveal()` method on the container as shown below: 
+
+```javascript
+container
+  .reveal()
+  .then(data => {
+    // Handle success.
+  })
+  .catch(err => {
+    // Handle error.
+  });
+```
+
+
+### End to end example of all steps
+
+**[Sample Code:](https://github.com/skyflowapi/skyflow-js/blob/main/samples/using-script-tag/skyflow-elements.html)**
+```javascript
+// Step 1.
+const container = skyflowClient.container(Skyflow.ContainerType.REVEAL);
+
+// Step 2.
+const cardNumberElement = container.create({
+  token: 'b63ec4e0-bbad-4e43-96e6-6bd50f483f75',
+  inputStyles: {
+    base: {
+      color: '#1d1d1d',
+    },
+  },
+  labelStyles: {
+    base: {
+      fontSize: '12px',
+    },
+  },
+  errorTextStyles: {
+    base: {
+      color: '#f44336',
+    },
+  },
+  label: 'card_number',
+  altText: 'XXXX XXXX XXXX XXXX',
+  redaction: Skyflow.RedactionType.MASKED
+});
+
+const cvvElement = container.create({
+  token: '89024714-6a26-4256-b9d4-55ad69aa4047',
+  inputStyles: {
+    base: {
+      color: '#1d1d1d',
+    },
+  },
+  label: 'cvv',
+  altText: 'XXX',
+});
+
+const expiryDate= container.create({
+ token: 'a4b24714-6a26-4256-b9d4-55ad69aa4047',
+ inputStyles: {
+   base: {
+     color: '#1d1d1d',
+   },
+ },
+ label: 'expiryDate',
+ altText: 'MM/YYYY',
+});
+// Step 3.
+cardNumberElement.mount('#cardNumber'); // Assumes there is a placeholder div with id='cardNumber' on the page
+cvvElement.mount('#cvv');               // Assumes there is a placeholder div with id='cvv' on the page
+expiryDate.mount('#expiryDate');        // Assumes there is a placeholder div with id='expiryDate' on the page
+
+// Step 4.
+container
+  .reveal()
+  .then(data => {
+    // Handle success.
+  })
+  .catch(err => {
+    // Handle error.
+  });
+```
+
+The response below shows that some tokens assigned to the reveal elements get revealed successfully, while others fail and remain unrevealed.
+
+### Sample Response
+
+```
+{
+  "success": [
+     {
+     "token": "b63ec4e0-bbad-4e43-96e6-6bd50f483f75",
+     "value": "xxxxxxxxx4163"
+     "valueType": "STRING"
+   },
+   {
+     "token": "a4b24714-6a26-4256-b9d4-55ad69aa4047",
+     "value": "12/2098"
+     "valueType": "STRING"
+   }
+  ],
+ "errors": [
+    {
+       "token": "89024714-6a26-4256-b9d4-55ad69aa4047",
+       "error": {
+         "code": 404,
+         "description": "Tokens not found for 89024714-6a26-4256-b9d4-55ad69aa4047"
+       } 
+   }   
+  ]
+}
+```
+
+### UI Error for Reveal Elements
+Helps to display custom error messages on the Skyflow Elements through the methods `setError` and `resetError` on the elements.
+
+`setError(error: string)` method is used to set the error text for the element, when this method is triggered, all the current errors present on the element will be overridden with the custom error message passed. This error will be displayed on the element until `resetError()` is triggered on the same element.
+
+`resetError()` method is used to clear the custom error message that is set using `setError`.
+
+##### Sample code snippet for setError and resetError
+
+```javascript
+const container = skyflowClient.container(Skyflow.ContainerType.REVEAL);
+
+const cardNumber = container.create({
+  token: '89024714-6a26-4256-b9d4-55ad69aa4047',
+});
+
+// Set custom error.
+cardNumber.setError('custom error');
+
+// Reset custom error.
+cardNumber.resetError();
+```
+
+### Override default error messages
+
+You can override the default error messages with custom ones by using `setErrorOverride`. This is especially useful to override default error messages in non-English languages.
+
+```javascript
+const container = skyflowClient.container(Skyflow.ContainerType.REVEAL);
+
+const cardNumber = container.create({
+  token: '89024714-6a26-4256-b9d4-55ad69aa4047',
+});
+
+const revealButton = document.getElementById('revealPCIData');
+
+if (revealButton) {
+  revealButton.addEventListener('click', () => {
+    revealContainer.reveal().then((res) => {
+      //handle reveal response
+    }).catch((err) => {
+      cardNumber.setErrorOverride("custom error")
+    });
+  });
+}
+```
+
+### Set token for Reveal Elements
+
+The `setToken(value: string)` method can be used to set the token of the Reveal Element. If no altText is set, the set token will be displayed on the UI as well. If altText is set, then there will be no change in the UI but the token of the element will be internally updated.
+
+##### Sample code snippet for setToken
+```javascript
+const container = skyflowClient.container(Skyflow.ContainerType.REVEAL);
+
+const cardNumber = container.create({
+  altText: 'Card Number',
+});
+
+// Set token.
+cardNumber.setToken('89024714-6a26-4256-b9d4-55ad69aa4047');
+```
+### Set and Clear altText for Reveal Elements
+The `setAltText(value: string)` method can be used to set the altText of the Reveal Element. This will cause the altText to be displayed in the UI regardless of whether the token or value is currently being displayed.
+
+`clearAltText()` method can be used to clear the altText, this will cause the element to display the token or actual value of the element. If the element has no token, the element will be empty.
+##### Sample code snippet for setAltText and clearAltText
+
+```javascript
+const container = skyflowClient.container(Skyflow.ContainerType.REVEAL);
+
+const cardNumber = container.create({
+  token: '89024714-6a26-4256-b9d4-55ad69aa4047',
+});
+
+// Set altText.
+cardNumber.setAltText('Card Number');
+
+// Clear altText.
+cardNumber.clearAltText();
+
+```
+
+## Render a file with a File Element
+
+You can render files using the Skyflow File Element. Use the following steps to securely render a file.
+
+### Step 1: Create a container
+Create a container for the form elements using the container(Skyflow.ContainerType) method of the Skyflow client:
+
+```javascript
+const container = skyflowClient.container(Skyflow.ContainerType.REVEAL)
+```
+
+### Step 2: Create a File Element
+Define a Skyflow Element to render the file as shown below.
+
+```javascript
+const fileElement = {  
+  inputStyles: {},     // Optional, styles to be applied to the element.
+  errorTextStyles: {}, // Optional, styles that will be applied to the errorText of the render element.
+  altText: 'string',   // Optional, string that is shown before file render call
+  skyflowID: 'string', // Required, skyflow id of the file to render
+  column: 'string',    // Required, column name of the file to render
+  table: 'string',     // Required, table name of the file to render
+};
+```
+The inputStyles and errorTextStyles parameters accept a styles object as described in the [previous section](https://github.com/skyflowapi/skyflow-js#step-2-create-a-collect-element) for collecting data. But for render file elements, inputStyles accepts only base variant, global style objects.
+
+An example of a inputStyles object:
+
+```javascript
+inputStyles: {
+  base: {
+      height: '400px',
+      width: '300px',
+  },
+  global: {
+    '@import' :'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
+  }
+}
+```
+An example of a errorTextStyles object:
+```javascript
+errorTextStyles: {
+  base: {
+    color: '#f44336',
+  },
+  global: {
+    '@import' :'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
+  }
+}
+```
+
+### Step 3: Mount Elements to the DOM
+Elements used for rendering files are mounted to the DOM the same way as Elements used for collecting data. Refer to Step 3 of the [section above](https://github.com/skyflowapi/skyflow-js#step-3-mount-elements-to-the-dom).
+
+### Step 4: Render File
+After you create and mount the element, call the `renderFile()` method on the element as shown below:
+```javascript
+fileElement
+  .renderFile()
+  .then(data => {
+    // Handle success.
+  })
+  .catch(err => {
+    // Handle error.
+  });
+```
+
+### End to end example of file render
+```javascript
+// Step 1.
+const container = skyflowClient.container(Skyflow.ContainerType.REVEAL);
+
+// REPLACE with your custom implementation to fetch skyflow_id from backend service.
+// Sample implementation
+fetch("<BACKEND_URL>")
+  .then((response) => {
+
+    // on successful fetch skyflow_id
+    const skyflowID = response.skyflow_id;
+
+    // Step 2.
+    const fileElement = container.create({
+      skyflowID: "b63ec4e0-bbad-4e43-96e6-6bd50f483f75",
+      column: "file",
+      table: "table",
+      inputStyles: {
+        base: {
+          height: "400px",
+          width: "300px",
+        },
+      },
+      errorTextStyles: {
+        base: {
+          color: "#f44336",
+        },
+      },
+      altText: "This is an altText",
+    });
+    // Step 3.
+    fileElement.mount("#renderFile"); // Assumes there is a placeholder div with id=renderFile on the page
+
+    const renderButton = document.getElementById("renderFiles"); // button to call render file
+
+    if (renderButton) {
+      renderButton.addEventListener("click", () => {
+    
+    // Step 4.
+        fileElement
+          .renderFile()
+          .then((data) => {
+            // Handle success.
+          })
+          .catch((err) => {
+            // Handle error.
+          });
+      });
+    }
+  })
+  .catch((err) => {
+    // failed to fetch skyflow_id
+    console.log(err);
+  });
+
+```
+
+### Sample Success Response
+```json
+{
+  "success": [
+     {
+     "skyflow_id": "b63ec4e0-bbad-4e43-96e6-6bd50f483f75",
+     "column": "file"
+   },
+  ]
+}
+```
+
+## Update Reveal Elements
+
+You can update reveal element properties with the `update` interface.
+
+The `update` interface takes the below object:
+```javascript
+const updateElement = {
+  token: 'string',          // Optional, token of the data being revealed.
+  inputStyles: {},          // Optional, styles to be applied to the element.
+  labelStyles: {},          // Optional, styles to be applied to the label of the reveal element.
+  errorTextStyles: {},      // Optional, styles that will be applied to the errorText of the reveal element.
+  label: 'string',          // Optional, label for the form element.
+  altText: 'string',        // Optional, string that is shown before reveal, will show token if altText is not provided.
+  redaction: RedactionType, // Optional, Redaction Type to be applied to data.
+  skyflowID: 'string',      // Optional, Skyflow ID of the file to render.
+  table: 'string',          // Optional, table name of the file to render.
+  column: 'string'          // Optional, column name of the file to render. 
+};
+```
+
+Only include the properties that you want to update for the specified reveal element. 
+
+Properties your provided when you created the element remain the same until you explicitly update them.
+
+### End to end example
+```javascript
+// Create a reveal container. 
+const revealContainer = skyflowClient.container(Skyflow.ContainerType.REVEAL);
+
+const stylesOptions = {
+  inputStyles: {
+    base: {
+      fontFamily: 'Inter',
+      fontStyle: 'normal',
+      fontWeight: 400,
+      fontSize: '14px',
+      lineHeight: '21px',
+      width: '294px',
+    },
+  },
+  labelStyles: {},
+  errorTextStyles: {
+    base: {
+      color: '#f44336'
+    },
+  },
+};
+
+// Create reveal elements
+const cardHolderNameRevealElement = revealContainer.create({
+  token: 'ed5fdd1f-5009-435c-a06b-3417ce76d2c8',
+  altText: 'first name',
+  ...stylesOptions,
+  label: 'Card Holder Name',
+});
+
+const cardNumberRevealElement = revealContainer.create({
+  token: '8ee84061-7107-4faf-bb25-e044f3d191fe',
+  altText: 'xxxx',
+  ...stylesOptions,
+  label: 'Card Number',
+  redaction: 'RedactionType.CARD_NUMBER'
+});
+
+// Mount the reveal elements.
+cardHolderNameRevealElement.mount('#cardHolderNameRevealElement'); // Assumes there is a div with id='#cardHolderNameRevealElement' in the webpage.
+cardNumberRevealElement.mount('#cardNumberRevealElement'); // Assumes there is a div with id='#cardNumberRevealElement' in the webpage.
+
+// ...
+
+// Update label, labelStyles properties on cardHolderNameRevealElement.
+cardHolderNameRevealElement.update({
+  label: 'CARDHOLDER NAME',
+  labelStyles: {
+    base: {
+      color: '#aa11aa'
+    }
+  }
+});
+
+// Update inputStyles, errorTextStyles properties on cardNumberRevealElement.
+cardNumberRevealElement.update({
+  inputStyles: {
+    base: {
+      color: '#fff',
+      backgroundColor: '#000',
+      borderColor: '#f00',
+      borderWidth: '5px'
+    }
+  },
+  errorTextStyles: {
+    base: {
+      backgroundColor: '#000',
+    }
+  }
+});
+```
+
+---
+
+
+# Using Composable Reveal Elements to reveal data
+
+Composable Reveal Elements combine multiple Skyflow Elements in a single iframe, letting you create multiple Skyflow Elements in a single row. The following steps create a composable reveal element and securely collect data through it.
+
+### Step 1: Create a composable reveal container
+
+Create a container for the composable reveal element using the `container(Skyflow.ContainerType)` method of the Skyflow client:
+
+``` javascript
+ const revealComposableContainer = skyflowClient.container(Skyflow.ContainerType.COMPOSE_REVEAL, containerOptions);
+```
+Pass an options object that contains the following keys:
+
+1. `layout`: An array that indicates the number of rows in the container and the number of elements in each row. The index value of the array defines the number of rows, and each value in the array represents the number of elements in that row, in order.
+  
+    For example: `[2,1]` means the container has two rows, with two elements in the first row and one element in the second row.
+
+    `Note`: The sum of values in the layout array should be equal to the number of elements created
+
+2. `styles`: CSS styles to apply to the reveal composable container.
+3. `errorTextStyles`: CSS styles to apply if an error is encountered.
+
+```javascript
+const containerOptions = {
+    layout: [2, 1],                           // Required
+    styles: {                                 // Optional
+        base: {
+            border: '1px solid #DFE3EB',
+            padding: '8px',
+            borderRadius: '4px',
+            margin: '12px 2px',
+        },
+    },
+    errorTextStyles: {                       // Optional
+        base: {
+            color: 'red',
+            fontFamily: '"Roboto", sans-serif'
+        },
+        global: {
+            '@import': 'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
+        }        
+    },
+};
 ```
 
-### Step 2: Create a reveal Element
-
-Then define a Skyflow Element to reveal data as shown below. 
+### Step 2: Create Composable Reveal Elements
+Composable Reveal Elements use the following schema:
 
 ```javascript
-const revealElement = {
+const revealComposableElement = {
   token: 'string',     // Required, token of the data being revealed.
   inputStyles: {},     // Optional, styles to be applied to the element.
   labelStyles: {},     // Optional, styles to be applied to the label of the reveal element.
@@ -2396,7 +3918,6 @@ const revealElement = {
   redaction: RedactionType, //Optional, Redaction Type to be applied to data, RedactionType.PLAIN_TEXT will be applied if not provided.
 };
 ```
-
 Note: If you don't provide a redaction type, RedactionType.PLAIN_TEXT will apply by default.
 
 The `inputStyles`, `labelStyles` and  `errorTextStyles` parameters accepts a styles object as described in the [previous section](#step-2-create-a-collect-element) for collecting data. But for reveal element, `inputStyles` accepts only `base` variant, `copyIcon` and `global` style objects. 
@@ -2455,334 +3976,90 @@ const options = {
 }
 ```
 
-`format`: A string value that indicates how the reveal element should display the value, including placeholder characters that map to keys `translation` If `translation` isn't specified to any character in the `format` value is considered as a string literal.
-
-`translation`: An object of key value pairs, where the key is a character that appears in `format` and the value is a simple regex pattern of acceptable inputs for that character. Each key can only appear once. Defaults to `{ ‘X’: ‘[0-9]’ }`.
-
-**Reveal Element Options examples:**
-Example 1
-```js
-const revealElementInput = {
- token: '<token>' 
-};
-
-const options = {
-  format: '(XXX) XXX-XXXX',
-  translation: { 'X': '[0-9]'} 
-};
-
-const revealElement = revealContainer.create(revealElementInput,options);
-```
-
-Value from vault: "1234121234"
-Revealed Value displayed in element: "(123) 412-1234"
-
-Example 2:
-```js
-const revealElementInput = {
- token: '<token>' 
-};
-
-const options = {
-  format: 'XXXX-XXXXXX-XXXXX',
-  translation: { 'X': '[0-9]' } 
-};
-
-const revealElement = revealContainer.create(revealElementInput,options);
-```
-
-Value from vault: "374200000000004"
-Revealed Value displayed in element: "3742-000000-00004"
-
-Once you've defined a Skyflow Element, you can use the `create(element)` method of the container to create the Element as shown below: 
-
-```javascript
-const element = container.create(revealElement)
-```
-
-### Step 3: Mount Elements to the DOM
-
-Elements used for revealing data are mounted to the DOM the same way as Elements used for collecting data. Refer to Step 3 of the [section above](#step-3-mount-elements-to-the-dom).
-
-
-### Step 4: Reveal data
-When the sensitive data is ready to be retrieved and revealed, call the `reveal()` method on the container as shown below: 
-
-```javascript
-container
-  .reveal()
-  .then(data => {
-    // Handle success.
-  })
-  .catch(err => {
-    // Handle error.
-  });
-```
-
-
-### End to end example of all steps
-
-**[Sample Code:](https://github.com/skyflowapi/skyflow-js/blob/main/samples/using-script-tag/skyflow-elements.html)**
-```javascript
-// Step 1.
-const container = skyflowClient.container(Skyflow.ContainerType.REVEAL);
-
-// Step 2.
-const cardNumberElement = container.create({
-  token: 'b63ec4e0-bbad-4e43-96e6-6bd50f483f75',
-  inputStyles: {
-    base: {
-      color: '#1d1d1d',
-    },
-  },
-  labelStyles: {
-    base: {
-      fontSize: '12px',
-    },
-  },
-  errorTextStyles: {
-    base: {
-      color: '#f44336',
-    },
-  },
-  label: 'card_number',
-  altText: 'XXXX XXXX XXXX XXXX',
-  redaction: Skyflow.RedactionType.MASKED
-});
-
-const cvvElement = container.create({
-  token: '89024714-6a26-4256-b9d4-55ad69aa4047',
-  inputStyles: {
-    base: {
-      color: '#1d1d1d',
-    },
-  },
-  label: 'cvv',
-  altText: 'XXX',
-});
-
-const expiryDate= container.create({
- token: 'a4b24714-6a26-4256-b9d4-55ad69aa4047',
- inputStyles: {
-   base: {
-     color: '#1d1d1d',
-   },
- },
- label: 'expiryDate',
- altText: 'MM/YYYY',
-});
-// Step 3.
-cardNumberElement.mount('#cardNumber'); // Assumes there is a placeholder div with id='cardNumber' on the page
-cvvElement.mount('#cvv');               // Assumes there is a placeholder div with id='cvv' on the page
-expiryDate.mount('#expiryDate');        // Assumes there is a placeholder div with id='expiryDate' on the page
-
-// Step 4.
-container
-  .reveal()
-  .then(data => {
-    // Handle success.
-  })
-  .catch(err => {
-    // Handle error.
-  });
-```
-
-The response below shows that some tokens assigned to the reveal elements get revealed successfully, while others fail and remain unrevealed.
-
-### Sample Response
-
-```
-{
-  "success": [
-     {
-     "token": "b63ec4e0-bbad-4e43-96e6-6bd50f483f75",
-     "value": "xxxxxxxxx4163"
-     "valueType": "STRING"
-   },
-   {
-     "token": "a4b24714-6a26-4256-b9d4-55ad69aa4047",
-     "value": "12/2098"
-     "valueType": "STRING"
-   }
-  ],
- "errors": [
-    {
-       "token": "89024714-6a26-4256-b9d4-55ad69aa4047",
-       "error": {
-         "code": 404,
-         "description": "Tokens not found for 89024714-6a26-4256-b9d4-55ad69aa4047"
-       } 
-   }   
-  ]
-}
-```
-
-### UI Error for Reveal Elements
-Helps to display custom error messages on the Skyflow Elements through the methods `setError` and `resetError` on the elements.
-
-`setError(error: string)` method is used to set the error text for the element, when this method is triggered, all the current errors present on the element will be overridden with the custom error message passed. This error will be displayed on the element until `resetError()` is triggered on the same element.
-
-`resetError()` method is used to clear the custom error message that is set using `setError`.
-
-##### Sample code snippet for setError and resetError
-
-```javascript
-const container = skyflowClient.container(Skyflow.ContainerType.REVEAL);
-
-const cardNumber = container.create({
-  token: '89024714-6a26-4256-b9d4-55ad69aa4047',
-});
-
-// Set custom error.
-cardNumber.setError('custom error');
-
-// Reset custom error.
-cardNumber.resetError();
-```
-
-### Override default error messages
-
-You can override the default error messages with custom ones by using `setErrorOverride`. This is especially useful to override default error messages in non-English languages.
-
-```javascript
-const container = skyflowClient.container(Skyflow.ContainerType.REVEAL);
-
-const cardNumber = container.create({
-  token: '89024714-6a26-4256-b9d4-55ad69aa4047',
-});
-
-const revealButton = document.getElementById('revealPCIData');
-
-if (revealButton) {
-  revealButton.addEventListener('click', () => {
-    revealContainer.reveal().then((res) => {
-      //handle reveal response
-    }).catch((err) => {
-      cardNumber.setErrorOverride("custom error")
-    });
-  });
-}
-```
-
-### Set token for Reveal Elements
-
-The `setToken(value: string)` method can be used to set the token of the Reveal Element. If no altText is set, the set token will be displayed on the UI as well. If altText is set, then there will be no change in the UI but the token of the element will be internally updated.
-
-##### Sample code snippet for setToken
-```javascript
-const container = skyflowClient.container(Skyflow.ContainerType.REVEAL);
-
-const cardNumber = container.create({
-  altText: 'Card Number',
-});
-
-// Set token.
-cardNumber.setToken('89024714-6a26-4256-b9d4-55ad69aa4047');
-```
-### Set and Clear altText for Reveal Elements
-The `setAltText(value: string)` method can be used to set the altText of the Reveal Element. This will cause the altText to be displayed in the UI regardless of whether the token or value is currently being displayed.
-
-`clearAltText()` method can be used to clear the altText, this will cause the element to display the token or actual value of the element. If the element has no token, the element will be empty.
-##### Sample code snippet for setAltText and clearAltText
-
-```javascript
-const container = skyflowClient.container(Skyflow.ContainerType.REVEAL);
-
-const cardNumber = container.create({
-  token: '89024714-6a26-4256-b9d4-55ad69aa4047',
-});
+`format`: A string value that indicates how the reveal element should display the value, including placeholder characters that map to keys `translation` If `translation` isn't specified to any character in the `format` value is considered as a string literal.
 
-// Set altText.
-cardNumber.setAltText('Card Number');
+`translation`: An object of key value pairs, where the key is a character that appears in `format` and the value is a simple regex pattern of acceptable inputs for that character. Each key can only appear once. Defaults to `{ ‘X’: ‘[0-9]’ }`.
 
-// Clear altText.
-cardNumber.clearAltText();
+**Reveal Element Options examples:**
+Example 1
+```js
+const revealElementInput = {
+ token: '<token>' 
+};
+
+const options = {
+  format: '(XXX) XXX-XXXX',
+  translation: { 'X': '[0-9]'} 
+};
 
+const revealElement = revealComposableContainer.create(revealElementInput,options);
 ```
 
-## Using Skyflow File Element to upload a file
+Value from vault: "1234121234"
+Revealed Value displayed in element: "(123) 412-1234"
 
-You can upload binary files to a vault using the Skyflow File Element. Use the following steps to securely upload a file.
-### Step 1: Create a container
+Example 2:
+```js
+const revealElementInput = {
+ token: '<token>' 
+};
 
-Create a container for the form elements using the container(Skyflow.ContainerType) method of the Skyflow client:
+const options = {
+  format: 'XXXX-XXXXXX-XXXXX',
+  translation: { 'X': '[0-9]' } 
+};
 
-```javascript
-const container = skyflowClient.container(Skyflow.ContainerType.COLLECT)
+const revealElement = revealComposableContainer.create(revealElementInput,options);
 ```
 
-### Step 2: Create a File Element
+Value from vault: "374200000000004"
+Revealed Value displayed in element: "3742-000000-00004"
 
-Skyflow Collect Elements are defined as follows: 
+Once you've defined a Skyflow Element, you can use the `create(element)` method of the container to create the Element as shown below: 
 
 ```javascript
-const collectElement =  {
-  type: Skyflow.ElementType.FILE_INPUT,   // Skyflow.ElementType enum.
-  table: 'string',             // The table this data belongs to.
-  column: 'string',            // The column into which this data should be inserted.
-  skyflowID: 'string',         // The skyflow_id of the record.
-  inputStyles: {},             // Optional, styles that should be applied to the form element.
-  labelStyles: {},             // Optional, styles that will be applied to the label of the collect element.
-  errorTextStyles:{},          // Optional, styles that will be applied to the errorText of the collect element.
-}
+const element = revealComposableContainer.create(revealElement)
 ```
-The `table` and `column` fields indicate which table and column the Element corresponds to. 
-
-`skyflowID` indicates the record that stores the file.
-
-**Notes**: 
-- `skyflowID` is required while creating File element
-- Use period-delimited strings to specify columns nested inside JSON fields (e.g. `address.street.line1`).
-
- ## Step 3: Mount elements to the DOM
 
-To specify where to render Elements on your page, create placeholder `<div>` elements with unique `id` tags. For instance, the form below has an empty div with a unique id as a placeholder for a Skyflow Element. 
+### Step 3: Mount Container to the DOM
+To specify where the Elements are rendered on your page, create a placeholder `<div>` element with unique `id` attribute. Use this empty `<div>` placeholder to mount the composable reveal container.
 
-```html
+```javascript
 <form>
-  <div id="file"/>
+  <div id="composableRevealContainer"/>
   <br/>
+  <div id="button-id"/>
   <button type="submit">Submit</button>
 </form>
 ```
+Use the composable container's `mount(domElement)` method to insert the container's Elements into the specified `<div>`. For instance, the following call inserts Elements into the `<div>` with the `id "#composableContainer"`.
 
-Now, when the `mount(domElement)` method of the Element is called, the Element is inserted in the specified div. For instance, the call below inserts the Element into the div with the id "#file".  
-
-```javascript
-element.mount('#file');
-```
-Use the `unmount` method to reset a Collect Element to its initial state.
-
-```javascript
-element.unmount();
+```javacript
+revealComposableContainer.mount('#composableRevealContainer');
 ```
-## Step 4: Collect data from elements
 
-When the file is ready to be uploaded, call the `uploadFiles()` method on the container object.
+### Step 4: Reveal data
+When the sensitive data is ready to be retrieved and revealed, call the `reveal()` method on the container as shown below: 
 
 ```javascript
-container.uploadFiles();
+container
+  .reveal()
+  .then(data => {
+    // Handle success.
+  })
+  .catch(err => {
+    // Handle error.
+  });
 ```
-### File upload limitations:
-
-- Only non-executable file are allowed to be uploaded.
-- Files must have a maximum size of 32 MB
-- File columns can't enable tokenization, redaction, or arrays.
-- Re-uploading a file overwrites previously uploaded data.
-- Partial uploads or resuming a previous upload isn't supported.
-
-### End-to-end file upload
 
+### End to end example of reveal data with Composable Reveal Elements
 ```javascript
 // Step 1.
-const container = skyflowClient.container(Skyflow.ContainerType.COLLECT);
-
+const container = skyflowClient.container(Skyflow.ContainerType.COMPOSE_REVEAL, containerOptions);
 // Step 2.
-const element = container.create({
-  table: 'pii_fields',
-  column: 'file',
-  skyflowID: '431eaa6c-5c15-4513-aa15-29f50babe882',
-  inputstyles: {
+const cardNumberElement = container.create({
+  token: 'b63ec4e0-bbad-4e43-96e6-6bd50f483f75',
+  inputStyles: {
     base: {
       color: '#1d1d1d',
     },
@@ -2790,7 +4067,6 @@ const element = container.create({
   labelStyles: {
     base: {
       fontSize: '12px',
-      fontWeight: 'bold',
     },
   },
   errorTextStyles: {
@@ -2798,227 +4074,186 @@ const element = container.create({
       color: '#f44336',
     },
   },
-  type: Skyflow.ElementType.FILE_INPUT,
+  label: 'card_number',
+  altText: 'XXXX XXXX XXXX XXXX',
+  redaction: Skyflow.RedactionType.MASKED
 });
 
-// Step 3.
-element.mount('#file'); // Assumes there is a div with id='#file' in the webpage.
-
-// Step 4.
-container.uploadFiles();
-```
-
-**Sample Response :**
-```javascript
-{
-    fileUploadResponse: [
-        {
-            "skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882"
-        }
-    ]
-}
-```
-### File upload with options:
-
-Along with fileElementInput, you can define other options in the Options object as described below: 
-```js
-const options = {
- allowedFileType: String[],  // Optional, indicates the allowed file types for upload
-}
-```
-`allowedFileType`: An array of string value that indicates the allowedFileTypes to be uploaded.
-
-#### File upload with options example
-
-```javascript
-// Create collect Container.
-const collectContainer = skyflow.container(Skyflow.ContainerType.COLLECT);
-
-// Create collect elements.
-const cardNumberElement = collectContainer.create({
-  table: 'newTable',
-  column: 'card_number',
-  inputstyles: {
+const cvvElement = container.create({
+  token: '89024714-6a26-4256-b9d4-55ad69aa4047',
+  inputStyles: {
     base: {
       color: '#1d1d1d',
     },
   },
-  labelStyles: {
-    base: {
-      fontSize: '12px',
-      fontWeight: 'bold',
-    },
-  },
-  errorTextStyles: {
-    base: {
-      color: '#f44336',
-    },
-  },
-  placeholder: 'card number',
-  label: 'Card Number',
-  type: Skyflow.ElementType.CARD_NUMBER,
+  label: 'cvv',
+  altText: 'XXX',
 });
-const options = { 
-    allowedFileType: [".pdf",".png"];
-};
-const fileElement = collectContainer.create({
-  table: 'newTable',
-  column: 'file',
-  skyflowID: '431eaa6c-5c15-4513-aa15-29f50babe882',
-  inputstyles: {
-    base: {
-      color: '#1d1d1d',
-    },
-  },
-  labelStyles: {
-    base: {
-      fontSize: '12px',
-      fontWeight: 'bold',
-    },
-  },
-  errorTextStyles: {
-    base: {
-      color: '#f44336',
-    },
-  },
-  type: Skyflow.ElementType.FILE_INPUT,
-},
-  options
-);
 
-// Mount the elements.
-cardNumberElement.mount('#collectCardNumber');
-fileElement.mount('#collectFile');
+const expiryDate= container.create({
+ token: 'a4b24714-6a26-4256-b9d4-55ad69aa4047',
+ inputStyles: {
+   base: {
+     color: '#1d1d1d',
+   },
+ },
+ label: 'expiryDate',
+ altText: 'MM/YYYY',
+});
+// Step 3.
+container.mount('#container')
+// Step 4.
+container
+  .reveal()
+  .then(data => {
+    // Handle success.
+  })
+  .catch(err => {
+    // Handle error.
+  });
+```
+The response below shows that some tokens assigned to the reveal elements get revealed successfully, while others fail and remain unrevealed.
 
-// Collect and upload methods.
-collectContainer.collect({});
-collectContainer.uploadFiles();
+### Sample Response
 
 ```
-**Sample Response for collect():**
-```javascript
 {
-  "records": [
+  "success": [
+     {
+     "token": "b63ec4e0-bbad-4e43-96e6-6bd50f483f75",
+     "value": "xxxxxxxxx4163"
+     "valueType": "STRING"
+   },
+   {
+     "token": "a4b24714-6a26-4256-b9d4-55ad69aa4047",
+     "value": "12/2098"
+     "valueType": "STRING"
+   }
+  ],
+ "errors": [
     {
-      "table": "newTable",
-      "fields": {
-        "card_number": "f3907186-e7e2-466f-91e5-48e12c2bcbc1",
-      }
-    }
-  ]
-}
-```
-**Sample Response for file uploadFiles() :**
-```javascript
-{
-    "fileUploadResponse": [
-        {
-            "skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882"
-        }
-    ]
+       "token": "89024714-6a26-4256-b9d4-55ad69aa4047",
+       "error": {
+         "code": 404,
+         "description": "Tokens not found for 89024714-6a26-4256-b9d4-55ad69aa4047"
+       } 
+   }   
+  ]
 }
 ```
-#### File upload with additional elements
 
+## Update Reveal Composable Elements
+
+You can update reveal composable element properties with the `update` interface.
+
+The `update` interface takes the below object:
 ```javascript
-// Create collect Container.
-const collectContainer = skyflow.container(Skyflow.ContainerType.COLLECT);
+const updateElement = {
+  token: 'string',          // Optional, token of the data being revealed.
+  inputStyles: {},          // Optional, styles to be applied to the element.
+  labelStyles: {},          // Optional, styles to be applied to the label of the reveal element.
+  errorTextStyles: {},      // Optional, styles that will be applied to the errorText of the reveal element.
+  label: 'string',          // Optional, label for the form element.
+  altText: 'string',        // Optional, string that is shown before reveal, will show token if altText is not provided.
+  redaction: RedactionType, // Optional, Redaction Type to be applied to data.
+  skyflowID: 'string',      // Optional, Skyflow ID of the file to render.
+  table: 'string',          // Optional, table name of the file to render.
+  column: 'string'          // Optional, column name of the file to render. 
+};
+```
 
-// Create collect elements.
-const cardNumberElement = collectContainer.create({
-  table: 'newTable',
-  column: 'card_number',
-  inputstyles: {
-    base: {
-      color: '#1d1d1d',
-    },
-  },
-  labelStyles: {
+Only include the properties that you want to update for the specified reveal element. 
+
+Properties your provided when you created the element remain the same until you explicitly update them.
+
+
+### End to end example
+```javascript
+// Create a reveal composable container. 
+const revealComposableContainer = skyflowClient.container(Skyflow.ContainerType.COMPOSE_REVEAL, containerOptions);
+
+const stylesOptions = {
+  inputStyles: {
     base: {
-      fontSize: '12px',
-      fontWeight: 'bold',
+      fontFamily: 'Inter',
+      fontStyle: 'normal',
+      fontWeight: 400,
+      fontSize: '14px',
+      lineHeight: '21px',
+      width: '294px',
     },
   },
+  labelStyles: {},
   errorTextStyles: {
     base: {
-      color: '#f44336',
+      color: '#f44336'
     },
   },
-  placeholder: 'card number',
+};
+
+// Create reveal elements
+const cardHolderNameRevealElement = revealComposableContainer.create({
+  token: 'ed5fdd1f-5009-435c-a06b-3417ce76d2c8',
+  altText: 'first name',
+  ...stylesOptions,
+  label: 'Card Holder Name',
+});
+
+const cardNumberRevealElement = revealComposableContainer.create({
+  token: '8ee84061-7107-4faf-bb25-e044f3d191fe',
+  altText: 'xxxx',
+  ...stylesOptions,
   label: 'Card Number',
-  type: Skyflow.ElementType.CARD_NUMBER,
+  redaction: 'RedactionType.CARD_NUMBER'
 });
 
-const fileElement = collectContainer.create({
-  table: 'newTable',
-  column: 'file',
-  skyflowID: '431eaa6c-5c15-4513-aa15-29f50babe882',
-  inputstyles: {
-    base: {
-      color: '#1d1d1d',
-    },
-  },
+// Mount the reveal elements.
+revealContainer.mount('#container'); // Assumes there is a div with container
+// ...
+
+// Update label, labelStyles properties on cardHolderNameRevealElement.
+cardHolderNameRevealElement.update({
+  label: 'CARDHOLDER NAME',
   labelStyles: {
     base: {
-      fontSize: '12px',
-      fontWeight: 'bold',
-    },
+      color: '#aa11aa'
+    }
+  }
+});
+
+// Update inputStyles, errorTextStyles properties on cardNumberRevealElement.
+cardNumberRevealElement.update({
+  inputStyles: {
+    base: {
+      color: '#fff',
+      backgroundColor: '#000',
+      borderColor: '#f00',
+      borderWidth: '5px'
+    }
   },
   errorTextStyles: {
     base: {
-      color: '#f44336',
-    },
-  },
-  type: Skyflow.ElementType.FILE_INPUT,
-});
-
-// Mount the elements.
-cardNumberElement.mount('#collectCardNumber');
-fileElement.mount('#collectFile');
-
-// Collect and upload methods.
-collectContainer.collect({});
-collectContainer.uploadFiles();
-
-```
-**Sample Response for collect():**
-```javascript
-{
-  "records": [
-    {
-      "table": "newTable",
-      "fields": {
-        "card_number": "f3907186-e7e2-466f-91e5-48e12c2bcbc1",
-      }
+      backgroundColor: '#000',
     }
-  ]
-}
-```
-**Sample Response for file uploadFiles() :**
-```javascript
-{
-    "fileUploadResponse": [
-        {
-            "skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882"
-        }
-    ]
-}
+  }
+});
 ```
 
-Note: File name should contain only alphanumeric characters and !-_.*()
+---
 
-## Render a file with a File Element
+
+## Render a file with a Composable File Element
 
 You can render files using the Skyflow File Element. Use the following steps to securely render a file.
 
-## Step 1: Create a container
+### Step 1: Create a container
 Create a container for the form elements using the container(Skyflow.ContainerType) method of the Skyflow client:
 
 ```javascript
-const container = skyflowClient.container(Skyflow.ContainerType.REVEAL)
+const container = skyflowClient.container(Skyflow.ContainerType.COMPOSE_REVEAL, containerOptions)
 ```
 
-## Step 2: Create a File Element
+### Step 2: Create a File Element
 Define a Skyflow Element to render the file as shown below.
 
 ```javascript
@@ -3057,11 +4292,11 @@ errorTextStyles: {
   }
 }
 ```
-## Step 3: Mount Elements to the DOM
-Elements used for rendering files are mounted to the DOM the same way as Elements used for collecting data. Refer to Step 3 of the [section above](https://github.com/skyflowapi/skyflow-js#step-3-mount-elements-to-the-dom).
+### Step 3: Mount Container to the DOM
+Mount Elements for file rendering to the DOM the same way as Elements used for revealing data. Refer to Step 3 of the [section above](#step-3-mount-container-to-the-dom).
 
-## Step 4: Render File
-When the element is created and mounted, call the renderFile() method on the element as shown below:
+### Step 4: Render File
+After you create and mount the element, call the renderFile() method on the element as shown below:
 ```javascript
 fileElement
   .renderFile()
@@ -3073,10 +4308,10 @@ fileElement
   });
 ```
 
-## End to end example of file render
+### End to end example of file render
 ```javascript
 // Step 1.
-const container = skyflowClient.container(Skyflow.ContainerType.REVEAL);
+const container = skyflowClient.container(Skyflow.ContainerType.COMPOSE_REVEAL, containerOptions);
 
 // REPLACE with your custom implementation to fetch skyflow_id from backend service.
 // Sample implementation
@@ -3131,117 +4366,6 @@ fetch("<BACKEND_URL>")
 
 ```
 
-## Sample Success Response
-```json
-{
-  "success": [
-     {
-     "skyflow_id": "b63ec4e0-bbad-4e43-96e6-6bd50f483f75",
-     "column": "file"
-   },
-  ]
-}
-```
-
-### Update Reveal Elements
-
-You can update reveal element properties with the `update` interface.
-
-The `update` interface takes the below object:
-```javascript
-const updateElement = {
-  token: 'string',          // Optional, token of the data being revealed.
-  inputStyles: {},          // Optional, styles to be applied to the element.
-  labelStyles: {},          // Optional, styles to be applied to the label of the reveal element.
-  errorTextStyles: {},      // Optional, styles that will be applied to the errorText of the reveal element.
-  label: 'string',          // Optional, label for the form element.
-  altText: 'string',        // Optional, string that is shown before reveal, will show token if altText is not provided.
-  redaction: RedactionType, // Optional, Redaction Type to be applied to data.
-  skyflowID: 'string',      // Optional, Skyflow ID of the file to render.
-  table: 'string',          // Optional, table name of the file to render.
-  column: 'string'          // Optional, column name of the file to render. 
-};
-```
-
-Only include the properties that you want to update for the specified reveal element. 
-
-Properties your provided when you created the element remain the same until you explicitly update them.
-
-### End to end example
-```javascript
-// Create a reveal container. 
-const revealContainer = skyflow.container(Skyflow.ContainerType.REVEAL);
-
-const stylesOptions = {
-  inputStyles: {
-    base: {
-      fontFamily: 'Inter',
-      fontStyle: 'normal',
-      fontWeight: 400,
-      fontSize: '14px',
-      lineHeight: '21px',
-      width: '294px',
-    },
-  },
-  labelStyles: {},
-  errorTextStyles: {
-    base: {
-      color: '#f44336'
-    },
-  },
-};
-
-// Create reveal elements
-const cardHolderNameRevealElement = revealContainer.create({
-  token: 'ed5fdd1f-5009-435c-a06b-3417ce76d2c8',
-  altText: 'first name',
-  ...stylesOptions,
-  label: 'Card Holder Name',
-});
-
-const cardNumberRevealElement = revealContainer.create({
-  token: '8ee84061-7107-4faf-bb25-e044f3d191fe',
-  altText: 'xxxx',
-  ...stylesOptions,
-  label: 'Card Number',
-  redaction: 'RedactionType.CARD_NUMBER'
-});
-
-// Mount the reveal elements.
-cardHolderNameRevealElement.mount('#cardHolderNameRevealElement'); // Assumes there is a div with id='#cardHolderNameRevealElement' in the webpage.
-cardNumberRevealElement.mount('#cardNumberRevealElement'); // Assumes there is a div with id='#cardNumberRevealElement' in the webpage.
-
-// ...
-
-// Update label, labelStyles properties on cardHolderNameRevealElement.
-cardHolderNameRevealElement.update({
-  label: 'CARDHOLDER NAME',
-  labelStyles: {
-    base: {
-      color: '#aa11aa'
-    }
-  }
-});
-
-// Update inputStyles, errorTextStyles properties on cardNumberRevealElement.
-cardNumberRevealElement.update({
-  inputStyles: {
-    base: {
-      color: '#fff',
-      backgroundColor: '#000',
-      borderColor: '#f00',
-      borderWidth: '5px'
-    }
-  },
-  errorTextStyles: {
-    base: {
-      backgroundColor: '#000',
-    }
-  }
-});
-```
-
----
 # Securely deleting data client-side
 -  [**Deleting data from the vault**](#deleting-data-from-the-vault)