esewa-ui-library 1.10.11 → 1.10.12

package/README.md

@@ -1,2164 +1,2167 @@
-# esewa-ui-library
-> UI Library for eSewa Mini App
-
-[![NPM](https://img.shields.io/npm/v/esewa-ui-library.svg)](https://www.npmjs.com/package/esewa-ui-library) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
-
-## Install
-
-```bash
-npm install --save esewa-ui-library
-```
-
-## Usage
-
-Import style file in your project:
-```bash
-import 'esewa-ui-library/dist/index.css';
-```
-
-### Components
-
-Import and use components in your project:
-
-```tsx
-import { ESewaButton } from 'esewa-ui-library';
-const App = () => {
-  return <ESewaButton>Click Me</ESewaButton>;
-};
-export default App;
-```
-
-### Available Components
-
-- **AlertCard**: `ESewaAlertCard`
-- **AppBar**: `ESewaAppBar`
-- **Button**: `ESewaButton`
-- **Card**: `ESewaCard`
-- **Carousel**: `ESewaCarousel`
-- **Checkbox**: `ESewaCheckbox`
-- **Chipgroup**: `ESewaChipGroup`
-- **Datepicker**: `ESewaDatepicker`
-- **Dialog**: `ESewaDialog`
-- **Divider**: `ESewaDivider`
-- **FullPageLoadingScreen**: `EsewaFullPageLoadingScreen`
-- **Grid**: `ESewaGrid`, `ESewaGridItem`
-- **Icon**: `ESIcon`
-- **Image**: `ESewaImage`
-- **InputField**: `ESewaInputField`
-- **InputFieldTextArea**: `ESewaInputFeildTextArea`
-- **MultiSelect**: `ESewaMultiSelect`
-- **NepaliDatepicker**: `ESewaNepaliDatepicker`
-- **Radio**: `ESewaRadio`
-- **Select**: `ESewaSelectNative`
-- **Skeleton**: `ESewaSkeleton`
-- **Tag**: `ESewaTag`
-- **Tooltip**: `ESewaTooltip`
----
-
-## ESewaAlertCard
-
-The `ESewaAlertCard` component is used to display alert messages with different variants, optional icons, dismiss buttons, and action buttons.
-
-### Usage:
-
-```tsx
-import { ESewaAlertCard } from 'esewa-ui-library';
-
-const App = () => {
-  return (
-    <ESewaAlertCard
-      variant="warning"
-      title="Warning Alert"
-      description="This is a warning alert"
-      titleIcon="fa fa-exclamation-circle"
-      showDismissIcon={true}
-      dismissIcon="fa fa-times"
-      onDismiss={() => alert('Dismiss clicked')}
-      showCardFooter={true}
-      buttonLabel="Action"
-      buttonOnClick={() => alert('Action clicked')}
-    />
-  );
-};
-
-export default App;
-```
-
-### Props:
-
-| Prop Name            | Type                                              | Default      | Description |
-|----------------------|--------------------------------------------------|-------------|-------------|
-| `alertCardClass`     | `string`                                         | `''`        | Additional class for custom styling |
-| `variant`           | `'primary' | 'warning' | 'danger' | 'info'`      | `'primary'` | Determines the alert style |
-| `title`             | `string`                                         | `undefined` | Title of the alert |
-| `description`       | `string`                                         | `undefined` | Alert description text |
-| `descriptionIcon`   | `string` | `React.ReactNode`                     | `undefined` | Icon class for the description |
-| `showDescriptionIcon` | `boolean`                                      | `false`     | Whether to show the description icon |
-| `titleIcon`         | `string` | `React.ReactNode`                     | `undefined` | Icon class for the title |
-| `dismissIcon`       | `string` | `React.ReactNode`                     | `undefined` | Icon class for the dismiss button |
-| `showDismissIcon`   | `boolean`                                       | `false`     | Whether to show the dismiss button |
-| `onDismiss`        | `() => void`                                     | `undefined` | Callback function when dismiss button is clicked |
-| `showCardFooter`   | `boolean`                                       | `false`     | Whether to show the footer section |
-| `buttonLabel`      | `string`                                         | `undefined` | Label for the action button |
-| `buttonOnClick`    | `() => void`                                     | `undefined` | Callback function when the action button is clicked |
-
----
-
-
-## ESewaAppBar
-
-The `ESewaAlertCard` component is customizable app bar for your eSewa Mini App with support for back, title, and action icons, making navigation and interactions seamless.
-
-Use useESewaDataProvider to set title for appbar. 
-
-### Usage:
-
-```tsx
-import { ESewaAppBar, useESewaDataProvider } from 'esewa-ui-library';
-
-const App = () => {
-  const { updateData } = useESewaDataProvider();
-
-  useEffect(() => {
-      updateData({
-        title: "Merchant Product Form",
-      });
-    }, []);
-
-  return (
-    <ESewaAppBar 
-      icon="icon-es-arrow-left"
-      titleposition="left"
-      onBackIconClick={() => console.log('Back icon clicked')}
-      onTitleClick={() => console.log('Title clicked')}
-      onActionIconClick={() => console.log('Action icon clicked')}
-      actionIcon="icon-settings"
-    />
-  );
-};
-
-export default App;
-```
-
-### Props:
-
-| Prop Name             | Type                      | Default  | Description |
-|-----------------------|---------------------------|----------|-------------|
-| `title`               | `string | any`             | `undefined` | Title to display in the app bar |
-| `icon`                | `string`| `React.ReactNode`| `'icon-back'` | Icon to display as the back button |
-| `imageUrl`            | `string`                  | `undefined` | Image URL to display next to the title |
-| `onBackIconClick`     | `() => void`              | `() => {}` | Callback for the back icon click event |
-| `onTitleClick`        | `() => void`              | `() => {}` | Callback for the title click event |
-| `onActionIconClick`   | `() => void`              | `() => {}` | Callback for the action icon click event |
-| `onClick`             | `() => void`              | `() => {}` | Callback for the entire app bar click event |
-| `className`           | `string`                  | `undefined` | Additional class for custom styling |
-| `titleposition`       | `'left' | 'center' | 'right'` | `'center'` | Position of the title within the app bar |
-| `actionIcon`          | `string`| `React.ReactNode`| `undefined` | Icon for the action button on the right side of the app bar |
-
-
-# ESewaButton
-
-`ESewaButton` is a highly customizable button component built with React and styled using `styled-components`. It supports multiple variants, sizes, icon placement, and other button properties for flexible UI design.
-
-### Usage:
-
-```tsx
-import { ESewaButton } from 'esewa-ui-library';
-
-const App = () => {
-  return (
-    <ESewaButton 
-      type="button"
-      variant="primary"
-      onClick={handleClick}
-      disabled={false}
-      outlined={false}
-      fullwidth={true}
-      icon="icon-class"
-      iconPlacement="start"
-      size="large"
-      textTransform="uppercase"
-    >
-      Click Me
-    </ESewaButton>
-  );
-};
-
-export default App;
-```
-
-
-### Props:
-| Name           | Type                      | Default     | Description                                                                                                  |
-|----------------|---------------------------|-------------|--------------------------------------------------------------------------------------------------------------|
-| `type`         | `'button' | 'submit' | 'reset'` | `'button'`  | Specifies the type of the button. Options include `button`, `submit`, or `reset`.                           |
-| `variant`      | `'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'text'` | `'default'` | Specifies the variant style of the button. Choose from `primary`, `secondary`, `danger`, `success`, `warning`, `info`, or `text`. |
-| `onClick`      | `(e: any) => void`         | `undefined` | The function to execute when the button is clicked.                                                          |
-| `children`     | `React.ReactNode`          | `undefined` | The content of the button, typically text or icons.                                                          |
-| `disabled`     | `boolean`                  | `false`     | Disables the button if set to `true`.                                                                         |
-| `outlined`     | `boolean`                  | `false`     | If `true`, the button will have an outline style.                                                            |
-| `className`    | `string`                   | `''`        | Additional CSS class(es) to apply to the button.                                                             |
-| `fullwidth`    | `boolean`                  | `false`     | If `true`, the button will span the full width of its container.                                              |
-| `icon`         | `string`| `React.ReactNode`| `
-
-
-## Styling and Customization
-
-### Button Size
-
-You can customize the button size using the `size` prop. The available sizes are:
-
-- `large`: Large button with more padding.
-- `medium`: Default button size.
-- `small`: Compact button with smaller padding.
-
-### Button Variants
-
-The button supports various color variants that you can use by specifying the `variant` prop:
-
-- `primary`: The main action button style.
-- `secondary`: A secondary action style.
-- `danger`: A button to signify danger or warning actions.
-- `success`: For success actions.
-- `warning`: For warning actions.
-- `info`: A button for informational actions.
-- `text`: A text-only button with no background.
-
-### Icon Customization
-
-You can add icons to your button using the `icon` prop. The icon will be displayed inside the button either before or after the button text, depending on the `iconPlacement` prop.
-
-- `iconPlacement` can be set to `start` (icon before text) or `end` (icon after text).
-- Use the `iconClass` prop to apply a custom class to the icon for further customization.
-
-### Full Width Button
-
-To make the button span the full width of its container, set the `fullwidth` prop to `true`.
-
-### Disabled Button
-
-If you want to disable the button, set the `disabled` prop to `true`. The button will appear grayed out and will not be clickable.
-
-### Text Transform
-
-You can control the text transformation of the button text using the `textTransform` prop. Available options are:
-
-- `uppercase`: Converts the button text to uppercase.
-- `capitalized`: Capitalizes the first letter of each word.
-
-## Example Usage
-
-### Basic Example
-
-```tsx
-import React from 'react';
-import { ESewaButton } from 'esewa-ui-library';
-
-const App = () => {
-  return (
-    <div>
-      <ESewaButton variant="primary" onClick={() => alert('Button clicked!')}>
-        Primary Button
-      </ESewaButton>
-    </div>
-  );
-}
-
-export default App;
-```
-
-# ESewaCard Component
-
-The `ESewaCard` component is a flexible and customizable card wrapper built with `styled-components` in React. It provides a container with background color, padding, and customizable border radius styles. You can use it to wrap content such as text, images, or other components to create a card-like layout.
-
-The card supports various border radius values through the `className` prop. The `ESewaCard` component is lightweight and can be customized with different CSS variables.
-
-## Props
-| Name        | Type                | Default     | Description                                                                          |
-|-------------|---------------------|-------------|--------------------------------------------------------------------------------------|
-| `children`  | `React.ReactNode`    | `''`        | The content inside the card.                                                         |
-| `className` | `string`             | `''`        | Additional CSS class(es) to apply to the card.                                        |
-
-## Styling and Customization
-
-The `ESewaCard` component uses CSS variables for styling, which allows for easy customization of the card's background, padding, border radius, and more. 
-
-### Border Radius Customization
-
-You can customize the card's border radius by adding the appropriate `className`:
-
-- `border-radius-0`: Border radius of `var(--values-value-0)`
-- `border-radius-2`: Border radius of `var(--values-value-2)`
-- `border-radius-4`: Border radius of `var(--values-value-4)`
-- `border-radius-6`: Border radius of `var(--values-value-6)`
-- `border-radius-8`: Border radius of `var(--values-value-8)`
-- `border-radius-10`: Border radius of `var(--values-value-10)`
-- `border-radius-12`: Border radius of `var(--values-value-12)`
-- `border-radius-14`: Border radius of `var(--values-value-14)`
-- `border-radius-16`: Border radius of `var(--values-value-16)`
-- `border-radius-round`: Border radius of `50%` (perfectly round card)
-
-### Default Styling
-
-- **Background color**: `var(--card-bg)`
-- **Box-shadow**: `var(--shadow--1--umbra)`
-- **Text color**: `var(--text-dark)`
-- **Padding**: `var(--values-value-16)`
-
-## Example Usage
-
-### Basic Example
-
-```tsx
-import React from 'react';
-import { ESewaCard } from 'esewa-ui-library';
-
-const App = () => {
-  return (
-    <div>
-      <ESewaCard>
-        <h3>Card Content</h3>
-        <p>This is a simple card with content inside.</p>
-      </ESewaCard>
-    </div>
-  );
-}
-
-export default App;
-```
-
-### Custom Border Radius Example
-
-You can customize the border radius of the `ESewaCard` component by using different `className` values. Below is an example of how to apply a custom border radius to the card.
-
-#### Example: Card with Border Radius 8
-
-```tsx
-import React from 'react';
-import { ESewaCard } from 'esewa-ui-library';
-
-const App = () => {
-  return (
-    <div>
-      <ESewaCard className="border-radius-8">
-        <h3>Card with Border Radius 8</h3>
-        <p>This card has a border radius of 8px.</p>
-      </ESewaCard>
-    </div>
-  );
-}
-
-export default App;
-```
-
-## ESewaCarousel
-
-`ESewaCarousel` is a flexible and customizable carousel component built with React and styled-components. It supports both horizontal and vertical scrolling, customizable item sizes, and various features such as autoplay, navigation, and indicators.
-
-### Features
-- Supports **horizontal** and **vertical** directions.
-- Ability to display **scrollbars** and customize their visibility.
-- **Navigation buttons** to scroll through items.
-- **Autoplay** functionality with configurable intervals.
-- **Indicators** to show the active item.
-- Customizable **width** and **height** for carousel items.
-- **Responsive** adjustments for smaller screens.
-
-### Props
-| Prop                | Type                           | Default Value  | Description                                                                                       |
-|---------------------|--------------------------------|----------------|---------------------------------------------------------------------------------------------------|
-| `items`             | `React.ReactNode[]`            | `[]`           | Array of items to display in the carousel.                                                         |
-| `direction`         | `'horizontal' \| 'vertical'`   | `'horizontal'` | Defines the direction of scrolling (horizontal or vertical).                                      |
-| `itemWidth`         | `string`                       | `'200px'`      | Custom width of each item in the carousel.                                                         |
-| `itemHeight`        | `string`                       | `'200px'`      | Custom height of each item in the carousel.                                                        |
-| `showScrollbar`     | `boolean`                      | `false`        | Whether to display the scrollbar in the carousel.                                                  |
-| `showIndicator`     | `boolean`                      | `true`         | Whether to display the carousel indicators.                                                        |
-| `visibleItems`      | `number`                       | `undefined`    | Number of items to display at once in the carousel.                                                |
-| `showNav`           | `boolean`                      | `false`        | Whether to show left and right navigation buttons.                                                 |
-| `autoplay`          | `boolean`                      | `false`        | Whether the carousel should autoplay.                                                              |
-| `autoplayInterval`  | `number`                       | `3000`         | Interval for autoplay in milliseconds (default 3000ms).                                            |
-### Styling
-
-The `ESewaCarousel` component is styled using `styled-components`. The component is fully customizable, and you can adjust the appearance by modifying the following properties in the CSS:
-
-- `background-color` for items (`--card-bg`)
-- `color` for text (`--body-color`)
-- Customizable scrollbar styles (`.carousel-wrapper.show-scrollbar`).
-
-### Example Usage
-
-#### Horizontal Carousel
-
-```tsx
-import React from 'react';
-import { ESewaCarousel } from 'esewa-ui-library';
-
-const items = [
-  <div>Item 1</div>,
-  <div>Item 2</div>,
-  <div>Item 3</div>
-];
-
-const App = () => {
-  return (
-    <ESewaCarousel 
-      items={items} 
-      direction="horizontal" 
-      itemWidth="250px" 
-      itemHeight="200px" 
-      showScrollbar 
-      showNav 
-      showIndicator 
-      autoplay 
-      autoplayInterval={4000}
-    />
-  );
-}
-
-export default App;
-```
-
-# ESewaCheckbox Component
-
-The `ESewaCheckbox` component is a fully customizable checkbox built with React and styled using `styled-components`. It provides support for labels, disabled states, custom change handling, and additional styling flexibility through props.
-
-## Features
-
-- **Customizable checkbox**: Allows the user to easily customize the checkbox with a label.
-- **Change handling**: Provides an `onChange` callback to handle state changes.
-- **Disabled state**: Supports disabling the checkbox.
-- **Custom styling**: Supports custom class names and additional styling flexibility via props.
-
-## Usage
-
-### Basic Usage
-
-To use the `ESewaCheckbox` component, import it and pass the necessary props to it.
-
-```tsx
-import { ESewaCheckbox } from 'esewa-ui-library';
-
-const MyComponent = () => {
-  const [isChecked, setIsChecked] = useState(false);
-
-  const handleChange = (checked: boolean) => {
-    setIsChecked(checked);
-  };
-
-  return (
-    <ESewaCheckbox 
-      label="I agree to the terms" 
-      checked={isChecked} 
-      onChange={handleChange} 
-    />
-  );
-};
-```
-
-## Props
-| Prop          | Type        | Default Value | Description                                       |
-|---------------|-------------|---------------|---------------------------------------------------|
-| `label`       | `string?`   | `undefined`   | The label text for the checkbox.                  |
-| `onChange`    | `(checked: boolean) => void?` | `undefined` | Callback function to handle checkbox state change. |
-| `checked`     | `boolean?`  | `false`       | The checked state of the checkbox.                |
-| `labelClass`  | `string?`   | `''`          | Class name for styling the label.                 |
-| `className`   | `string?`   | `''`          | Custom class name for the checkbox container.     |
-| `disabled`    | `boolean?`  | `false`       | If true, disables the checkbox.   
-
-# ESewaChipGroup Component
-
-## Overview
-
-The `ESewaChipGroup` component is a customizable chip group component built with React and styled-components. It allows you to display a set of chips with selectable options. You can choose between single or multiple selection modes, with customizable styles and optional icons.
-
-## Props
-| Prop            | Type                            | Default Value | Description                                                                                                                                                    |
-|-----------------|---------------------------------|---------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `selection`     | `'single' \| 'multiple'`        | Required      | Specifies the selection mode: `'single'` for single selection, `'multiple'` for multiple selection.                                                          |
-| `required`      | `boolean?`                       | `false`       | If true, ensures that at least one chip is selected when the selection mode is `'multiple'`.                                                                  |
-| `chips`         | `ChipProps[]`                    | Required      | An array of chips to display. Each chip includes a text label, an optional icon, and an ID.                                                                  |
-| `className`     | `string?`                        | `''`          | Optional custom class name for styling the chip container.                                                                                                    |
-| `onChange`    | `(selected: number[] | number) => void?` | `undefined` | Callback function to handle chip state change. |
-
-# ESewaDatePicker
-
-A customizable and accessible date picker component for React, built using **styled-components**.
-
-## Features
-
-- Customizable label with a required indicator.
-- Supports `min` and `max` date restrictions.
-- Supports `readOnly` and `disabled` states.
-- Displays validation messages when needed.
-- Automatically focuses on the input when `autoFocus` is enabled.
-- Styled using `styled-components`.
-
-
-## Usage
-
-### Basic Example
-
-```tsx
-import React, { useState } from "react";
-import { ESewaDatePicker } from 'esewa-ui-library';
-
-const App = () => {
-  const [date, setDate] = useState("");
-
-  return (
-    <div>
-      <ESewaDatePicker
-        label="Select Date"
-        name="date"
-        value={date}
-        onChange={(e) => setDate(e.target.value)}
-        required
-      />
-    </div>
-  );
-};
-
-export default App
-```
-
-## Example with Validation, Min & Max Dates
-
-```tsx
-import React, { useState } from "react";
-import { ESewaDatePicker } from 'esewa-ui-library';
-
-const App = () => {
-  const [date, setDate] = useState("");
-
-  return (
-    <div>
-      <ESewaDatePicker
-        label="Start Date"
-        name="startDate"
-        value={date}
-        onChange={(e) => setDate(e.target.value)}
-        min="2023-12-01"
-        max="2024-12-31"
-        validationMessage="Please select a valid date."
-        required
-      />
-    </div>
-  );
-};
-
-export default App;
-```
-
-## Props
-
-| Prop Name          | Type                                      | Default   | Description |
-|--------------------|-------------------------------------------|-----------|-------------|
-| `id`               | `string`                                  | `undefined` | ID for the input field. |
-| `name`             | `string`                                  | `undefined` | Name attribute for the input field. |
-| `label`            | `string`                                  | `undefined` | Label text displayed above the input field. |
-| `value`            | `string`                                  | `undefined` | Selected date value (in `YYYY-MM-DD` format). |
-| `min`              | `string`                                  | `undefined` | Minimum selectable date (in `YYYY-MM-DD` format). |
-| `max`              | `string`                                  | `undefined` | Maximum selectable date (in `YYYY-MM-DD` format). |
-| `required`         | `boolean`                                 | `false`    | Marks the field as required. |
-| `readOnly`         | `boolean`                                 | `false`    | Makes the input read-only. |
-| `disabled`         | `boolean`                                 | `false`    | Disables the input field. |
-| `className`        | `string`                                  | `""`       | Additional class names for styling. |
-| `validationMessage`| `string`                                  | `undefined` | Displays an error message below the input. |
-| `autoFocus`        | `boolean`                                 | `false`    | Automatically focuses on the input when mounted. |
-| `onChange`         | `(event: React.ChangeEvent<HTMLInputElement>) => void` | `undefined` | Callback function triggered on date change. |
-
-
-# ESewaDialog Component
-
-## Usage
-
-The `ESewaDialog` component is a modal dialog used to display content with options like OK and Cancel actions. You can customize the dialog's appearance, positioning, and button texts.
-
-### Example:
-
-```tsx
-import React, { useState } from 'react';
-import { ESewaDialog } from 'esewa-ui-library';
-
-const App = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const openDialog = () => setIsOpen(true);
-  const closeDialog = () => setIsOpen(false);
-  const handleOk = () => {
-    console.log('OK button clicked');
-    closeDialog();
-  };
-
-  return (
-    <div>
-      <button onClick={openDialog}>Open Dialog</button>
-
-      {
-        isOpen && (<ESewaDialog
-          isOpen={isOpen}
-          title="Sample Dialog"
-          okText="Confirm"
-          cancelText="Cancel"
-          onOk={handleOk}
-          onCancel={closeDialog}
-          position="center"
-        >
-          <p>Dialog content goes here.</p>
-        </ESewaDialog>)
-      }
-    </div>
-  );
-};
-
-export default App;
-```
-
-## Props
-
-| Prop Name            | Type                                                       | Default                | Description                                                                                                                                               |
-|----------------------|------------------------------------------------------------|------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `isOpen`             | `boolean`                                                  | `false`                | Controls the visibility of the dialog.                                                                                                                     |
-| `showLeftIcon`       | `boolean`                                                  | `false`                | Whether to show the left icon in the dialog header.                                                                                                        |
-| `leftIcon`           | `string` | `React.ReactNode`                               | `'icon-es-check'`      | The icon class to be displayed in the left side of the dialog header.                                                                                     |
-| `showCloseIcon`      | `boolean`                                                  | `false`                | Whether to show the close icon in the dialog header.                                                                                                      |
-| `closeIcon`          | `string`                                                   | `'icon-es-close'`      | The icon class for the close button.                                                                                                                       |
-| `okText`             | `string`                                                   | `'OK'`                  | The text to be displayed on the OK button.                                                                                                                 |
-| `cancelText`         | `string`                                                   | `'Cancel'`             | The text to be displayed on the Cancel button.                                                                                                            |
-| `title`              | `string`                                                   | `undefined`            | The title of the dialog.                                                                                                                                  |
-| `children`           | `React.ReactNode`                                          | `undefined`            | The content to be displayed in the body of the dialog.                                                                                                    |
-| `onOk`               | `() => void`                                               | `undefined`            | The callback function for the OK button click event.                                                                                                      |
-| `onCancel`           | `() => void`                                               | `() => {}`             | The callback function for the Cancel button click event or clicking outside the dialog.                                                                  |
-| `position`           | `'center' | 'top' | 'bottom'`                            | `'bottom'`             | The position of the dialog on the screen. Can be `center`, `top`, or `bottom`.                                                                          |
-| `disableSubmitButton`| `boolean`                                                  | `false`                | Whether the OK button should be disabled.           
-                                                                                                       |
-# ESewaDivider Component
-
-The `ESewaDivider` component is a customizable divider line that can be used to separate content in your React application. You can customize the color, thickness, width, margin, and style (dotted or solid) of the divider.
-
-## Usage
-
-To use the `ESewaDivider`, simply import it into your React component and include it in your JSX. You can customize the divider's appearance using the available props.
-
-### Basic Usage
-
-```tsx
-import React from 'react'
-import { ESewaDivider } from 'esewa-ui-library';
-
-const MyComponent = () => {
-  return (
-    <div>
-      <p>Content above the divider</p>
-      <ESewaDivider />
-      <p>Content below the divider</p>
-    </div>
-  )
-}
-```
-
-## Props
-
-The `ESewaDivider` component accepts the following props to customize its appearance:
-
-| Prop         | Type     | Default Value    | Description                                                                                       |
-|--------------|----------|------------------|---------------------------------------------------------------------------------------------------|
-| `color`      | `string` | `'var(--border)'` | The color of the divider. You can specify any valid CSS color value.                              |
-| `thickness`  | `string` | `'1px'`          | The thickness of the divider. You can specify the value in `px`, `em`, `rem`, etc.                |
-| `width`      | `string` | `'100%'`         | The width of the divider. You can specify a percentage, `px`, `em`, `rem`, etc.                   |
-| `margin`     | `string` | `'8px 0'`        | The margin around the divider. You can specify the margin in `px`, `em`, `rem`, etc.               |
-| `className`  | `string` | `''` (optional)  | A custom CSS class for additional styling.                                                        |
-| `dotted`     | `boolean`| `false`          | If `true`, the divider will be styled with a dotted line (`dashed` style). Otherwise, it is solid. |
-
-### Example
-
-```tsx
-<ESewaDivider 
-  color="blue" 
-  thickness="2px" 
-  width="50%" 
-  margin="10px 0" 
-  dotted 
-/>
-```
-
-In this example, the divider will be blue, 2px thick, 50% wide, with 10px margin on top and bottom, and have a dotted line style.
-
-# Full Page Loading Component
-
-The `EsewaFullPageLoadingScreen` component provides a full-page loading screen with a loading animation consisting of animated dots and an optional text message.
-
-## Usage
-
-You can use the `EsewaFullPageLoadingScreen` component to show a loading screen with animated dots.
-
-### Example Usage
-
-```tsx
-import React from 'react';
-import { EsewaFullPageLoadingScreen } from 'esewa-ui-library';
-
-const App = () => {
-  return (
-    <div>
-      {/* Display loading screen with a custom message */}
-      <EsewaFullPageLoadingScreen text="Loading, please wait..." />
-    </div>
-  );
-};
-
-export default App;
-```
-
-## Props
-
-| Prop   | Type    | Default Value | Description                                                                                           |
-|--------|---------|---------------|-------------------------------------------------------------------------------------------------------|
-| `text` | `string` | `undefined`   | Custom loading text that will be displayed next to the animated dots. If not provided, no text will be shown. |
-
-
-# `ESewaGrid` & `ESewaGridItem` Component
-
-## Overview
-
-The `ESewaGrid` and `ESewaGridItem` components are used to create flexible grid layouts with a 12-column grid system. The `ESewaGrid` serves as the container for the grid, and the `ESewaGridItem` allows you to define the column span for individual items within the grid.
-
-
-## Usage
-
-The `ESewaGrid` component is used to create a 12-column grid layout. You can use `ESewaGridItem` to define the number of columns an item will span within the grid.
-
-### Example
-
-```tsx
-import { ESewaGrid, ESewaGridItem } from './esewa-ui-library';
-
-const Example = () => {
-  return (
-    <ESewaGrid>
-      <ESewaGridItem colSpan={4}>Item 1</ESewaGridItem>
-      <ESewaGridItem colSpan={8}>Item 2</ESewaGridItem>
-      <ESewaGridItem colSpan={12}>Item 3</ESewaGridItem>
-    </ESewaGrid>
-  );
-};
-```
-
-In the example above:
-Item 1 spans 4 columns.
-
-Item 2 spans 8 columns.
-
-Item 3 spans all 12 columns.
-
-## Props
-
-### `ESewaGrid` Props
-
-| Prop      | Type             | Default Value | Description                                                                |
-|-----------|------------------|---------------|----------------------------------------------------------------------------|
-| `children`| `React.ReactNode` | Required      | The content inside the grid container.                                     |
-| `className`| `string`         | `''`          | Custom class name for styling the grid container.                          |
-
-### `ESewaGridItem` Props
-
-| Prop      | Type                                                   | Default Value | Description                                                                 |
-|-----------|--------------------------------------------------------|---------------|-----------------------------------------------------------------------------|
-| `colSpan` | `1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12`   | Required      | Defines the number of columns the grid item will span (from 1 to 12).       |
-| `children`| `React.ReactNode`                                      | Required      | The content inside the grid item.                                           |
-| `className`| `string`                                              | `''`          | Custom class name for styling the grid item.                                |
-
-## Example: ESewaGrid with All Column Spans
-
-### Example: Usage of All Column Spans
-
-In this example, we use all possible column spans (from 1 to 12) to demonstrate how `ESewaGrid` and `ESewaGridItem` work:
-
-```tsx
-import { ESewaGrid, ESewaGridItem } from './esewa-ui-library'
-
-const Example = () => {
-  return (
-    <ESewaGrid>
-      <ESewaGridItem colSpan={1}>Item 1 (1 Column)</ESewaGridItem>
-      <ESewaGridItem colSpan={2}>Item 2 (2 Columns)</ESewaGridItem>
-      <ESewaGridItem colSpan={3}>Item 3 (3 Columns)</ESewaGridItem>
-      <ESewaGridItem colSpan={4}>Item 4 (4 Columns)</ESewaGridItem>
-      <ESewaGridItem colSpan={5}>Item 5 (5 Columns)</ESewaGridItem>
-      <ESewaGridItem colSpan={6}>Item 6 (6 Columns)</ESewaGridItem>
-      <ESewaGridItem colSpan={7}>Item 7 (7 Columns)</ESewaGridItem>
-      <ESewaGridItem colSpan={8}>Item 8 (8 Columns)</ESewaGridItem>
-      <ESewaGridItem colSpan={9}>Item 9 (9 Columns)</ESewaGridItem>
-      <ESewaGridItem colSpan={10}>Item 10 (10 Columns)</ESewaGridItem>
-      <ESewaGridItem colSpan={11}>Item 11 (11 Columns)</ESewaGridItem>
-      <ESewaGridItem colSpan={12}>Item 12 (12 Columns)</ESewaGridItem>
-    </ESewaGrid>
-  )
-}
-```
-
-# ESIcon Component
-
-The `ESIcon` component is a customizable icon component built using `styled-components` and CSS variables. It allows you to display an icon from a font icon set and customize its size and colors.
-
-### Basic Example
-
-```tsx
-import React from "react";
-import { ESIcon } from './esewa-ui-library'
-
-const App = () => {
-  return (
-    <div>
-      <ESIcon icon="home" size={40} iconPrimaryColor="blue" iconSecondaryColor="gray" />
-      <ESIcon icon="settings" size={30} iconPrimaryColor="green" />
-    </div>
-  );
-};
-
-export default App;
-```
-
-### Example with Custom Colors and Size, Multiple Icons
-
-In this example, we render multiple icons with custom sizes and colors.
-
-```tsx
-import React from "react";
-import { ESIcon } from './esewa-ui-library'
-
-const App = () => {
-  return (
-    <div>
-      <ESIcon icon="search" size={50} iconPrimaryColor="red" iconSecondaryColor="yellow" />
-      <ESIcon icon="user" size={32} iconPrimaryColor="purple" />
-      <ESIcon icon="cart" size={48} iconPrimaryColor="orange" iconSecondaryColor="black" />
-    </div>
-  );
-};
-
-export default App;
-
-```
-
-### ESIcon Component Props
-
-| Prop                | Type                             | Default   | Description                                                        |
-|---------------------|----------------------------------|-----------|--------------------------------------------------------------------|
-| `icon`              | `string`                         | -         | The name of the icon to display. This should be the icon class name (e.g., `search`, `user`, etc.). |
-| `size`              | `number`                         | `28`      | The size of the icon in pixels.                                    |
-| `iconPrimaryColor`  | `string`                         | `undefined` | The primary color of the icon. If not provided, the default color is used. |
-| `iconSecondaryColor`| `string`                         | `undefined` | The secondary color of the icon. If not provided, the default color is used. |
-
-### Usage Example:
-
-```tsx
-<ESIcon icon="search" size={50} iconPrimaryColor="red" iconSecondaryColor="yellow" />
-```
-
-# ESewaImage Component
-
-`ESewaImage` is a React component that handles lazy-loading, error handling, and image preview in a modal. It provides functionality for images to be lazy-loaded when they enter the viewport, with a fallback image in case of error. It also allows the user to click on the image to open a larger preview in a modal.
-
-## Features:
-- **Lazy Loading**: Image is loaded only when it is about to enter the viewport.
-- **Error Handling**: If the image fails to load, a fallback image is used.
-- **Image Preview**: Clicking the image opens it in a modal view.
-- **Customizable Styles**: Customize the width, height, and className of the image.
-
-```tsx
-import { ESewaImage } from './esewa-ui-library'
-
-<ESewaImage
-  src="https://example.com/image.jpg"        // The source URL for the image
-  alt="Description of the image"             // Alt text for accessibility
-  width="300"                                // Image width (can be string or number)
-  height="200"                               // Image height (can be string or number)
-  loading="lazy"                             // Lazy loading option (default is 'lazy')
-  className="custom-class"                   // Optional custom class for styling
-  fallbackSrc="https://example.com/fallback.jpg"  // Fallback image URL
-/>
-```
-
-## Props
-
-The `ESewaImage` component accepts the following props:
-
-| Prop            | Type                                  | Default Value     | Description                                                                 |
-|-----------------|---------------------------------------|-------------------|-----------------------------------------------------------------------------|
-| `src`           | `string`                              | `fallbackImage`   | The URL of the image to be displayed.                                       |
-| `alt`           | `string`                              | `https://`         | The alt text for the image (for accessibility).                             |
-| `width`         | `string | number`                      | -                 | The width of the image (can be a string like `'300px'` or a number like `300`). |
-| `height`        | `string | number`                      | -                 | The height of the image (can be a string like `'200px'` or a number like `200`). |
-| `className`     | `string`                              | -                 | Optional custom CSS class for styling the image.                            |
-| `fallbackSrc`   | `string`                              | `fallbackImage`   | The URL for the fallback image if the primary image fails to load.          |
-| `loading`       | `'lazy' | 'eager'`                      | `'lazy'`          | Determines the image loading strategy: `'lazy'` or `'eager'`.               |
-
-
-# ESewaInputField Component
-
-`ESewaInputField` is a customizable and reusable input field component for React. It supports various types of input fields (text, password, number, email, etc.) and comes with built-in validation messaging, styling, and accessibility features.
-
-## Usage
-
-You can use the `ESewaInputField` component in your React application by following the steps below.
-
-### Basic Usage
-
-```tsx
-import React, { useState } from 'react';
-import { ESewaInputField } from './esewa-ui-library'
-
-const MyComponent = () => {
-  const [inputValue, setInputValue] = useState('');
-
-  const handleChange = (e) => {
-    setInputValue(e.target.value);
-  };
-
-  return (
-    <ESewaInputField
-      type="text"
-      label="Username"
-      name="username"
-      value={inputValue}
-      onChange={handleChange}
-      placeholder="Enter your username"
-      required
-      validationMessage="Username is required"
-    />
-  );
-};
-
-export default MyComponent;
-```
-
-## Props
-
-The `ESewaInputField` component accepts the following props:
-
-| Prop               | Type                                                      | Default       | Description                                                                                                                                                                                                                              |
-|--------------------|-----------------------------------------------------------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `id`               | `string`                                                  | `undefined`   | A unique identifier for the input field.                                                                                                                                                                                                  |
-| `type`             | `'text' | 'password' | 'number' | 'email' | 'date' | 'checkbox' | 'radio' | 'select' | 'textarea'` | `'text'`      | The type of the input field.                                                                                                                                                                                                           |
-| `name`             | `string`                                                  | `undefined`   | The name of the input field, used for form submissions.                                                                                                                                                                                    |
-| `label`            | `string`                                                  | `undefined`   | The label to display next to the input field.                                                                                                                                                                                              |
-| `placeholder`      | `string`                                                  | `undefined`   | The placeholder text displayed in the input field when it is empty.                                                                                                                                                                      |
-| `value`            | `string | number`                                         | `undefined`   | The current value of the input field.                                                                                                                                                                                                     |
-| `checked`          | `boolean`                                                 | `undefined`   | Specifies whether the checkbox or radio button is checked (only applicable for `checkbox` and `radio` types).                                                                                                                             |
-| `pattern`          | `string`                                                  | `undefined`   | A regular expression that the input value must match (useful for email, password, etc.).                                                                                                                                                  |
-| `min`              | `number`                                                  | `undefined`   | The minimum value for `number`, `date`, or `range` input types.                                                                                                                                                                        |
-| `max`              | `number`                                                  | `undefined`   | The maximum value for `number`, `date`, or `range` input types.                                                                                                                                                                        |
-| `step`             | `number`                                                  | `undefined`   | The step value for `number`, `date`, or `range` input types.                                                                                                                                                                            |
-| `required`         | `boolean`                                                 | `false`       | If `true`, the input field is required to be filled out before form submission.                                                                                                                                                           |
-| `readOnly`         | `boolean`                                                 | `false`       | If `true`, the input field is read-only, meaning the user cannot modify the value.                                                                                                                                                          |
-| `disabled`         | `boolean`                                                 | `false`       | If `true`, the input field is disabled, preventing user interaction.                                                                                                                                                                     |
-| `className`        | `string`                                                  | `''`          | A custom class name to apply to the input field's container.                                                                                                                                                                            |
-| `validationMessage`| `string`                                                  | `undefined`   | A validation message that is displayed when the input is invalid or doesn't meet the specified requirements.                                                                                                                              |
-| `autoFocus`        | `boolean`                                                 | `false`       | If `true`, the input field will automatically receive focus when the component is rendered.                                                                                                                                               |
-| `onChange`         | `(e: React.ChangeEvent<HTMLInputElement>) => void`         | `undefined`   | A callback function that is called when the input value changes. The `onChange` function receives the change event as an argument.                                                                                                      |
-
-### Notes:
-- Some props are type-dependent. For example, `min`, `max`, and `step` are only relevant for `number`, `range`, or `date` input types.
-- The `required`, `readOnly`, and `disabled` props affect user interaction with the input field.
-- You can pass any additional attributes via the `rest` prop, which will be spread onto the underlying `<input>` element.
-
-
-# ESewaInputFeildTextArea Component
-
-The `ESewaInputFeildTextArea` component is a styled text area input field with customizable properties for labels, validation, and more. It provides a clean and consistent design for text area fields in React applications.
-
-## Usage
-
-### Basic Example
-
-```tsx
-import { ESewaInputFeildTextArea } from './esewa-ui-library'
-
-const Example = () => {
-  const [value, setValue] = useState('');
-
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(e.target.value);
-  };
-
-  return (
-    <ESewaInputFeildTextArea
-      label="Your Message"
-      value={value}
-      onChange={handleChange}
-      placeholder="Enter your message here"
-      required
-      validationMessage="Message is required"
-    />
-  );
-};
-```
-
-With maxLength and rows
-
-```tsx
-import { ESewaInputFeildTextArea } from './esewa-ui-library'
-
-const Example = () => {
-  const [value, setValue] = useState('');
-
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(e.target.value);
-  };
-
-  return (
-    <ESewaInputFeildTextArea
-      label="Your Feedback"
-      value={value}
-      onChange={handleChange}
-      placeholder="Enter your feedback here"
-      maxLength={200}
-      rows={5}
-      required
-      validationMessage="Feedback is required"
-    />
-  );
-};
-```
-
-In this example, the ESewaInputFeildTextArea is used with a label, value, onChange, placeholder, and optional maxLength and rows properties. You can customize the component further as needed based on the provided props.
-
-## Props
-
-| Name              | Type                              | Default     | Description                                                                 |
-|-------------------|-----------------------------------|-------------|-----------------------------------------------------------------------------|
-| `name`            | `string`                          | -           | The name of the textarea element.                                            |
-| `label`           | `string`                          | -           | The label text that is displayed above the textarea.                         |
-| `placeholder`     | `string`                          | -           | The placeholder text that appears when the textarea is empty.                |
-| `value`           | `string \| number`                | -           | The current value of the textarea.                                           |
-| `maxLength`       | `number`                          | -           | The maximum number of characters allowed in the textarea.                    |
-| `required`        | `boolean`                         | `false`     | If `true`, the textarea becomes required when submitting the form.            |
-| `readOnly`        | `boolean`                         | `false`     | If `true`, the textarea is set to read-only.                                 |
-| `disabled`        | `boolean`                         | `false`     | If `true`, the textarea is disabled and cannot be interacted with.           |
-| `className`       | `string`                          | -           | Additional CSS class name(s) for custom styling.                            |
-| `rows`            | `number`                          | `3`         | Defines the number of visible rows for the textarea.                         |
-| `validationMessage`| `string`                         | -           | An optional message to display when validation fails.                        |
-| `onChange`        | `(e: ChangeEvent<HTMLTextAreaElement>) => void` | -   | Event handler function for handling text input changes.                     |
-
-
-# ESewaMultiSelect Component
-
-The `ESewaMultiSelect` component is a customizable multi-select dropdown component built using React and styled-components. It allows users to select multiple options from a list, with a search feature and customizable styles.
-
-## Usage
-
-To use the `ESewaMultiSelect` component in your React project, follow these steps:
-
-### 1. Import the Component
-
-First, import the `ESewaMultiSelect` component in your React file:
-
-### 2.Define Options and State
-Create an array of options that will be displayed in the multi-select dropdown. You also need to set up state to handle the selected items.
-
-```tsx
-const [selectedItems, setSelectedItems] = useState([])
-
-const options = [
-  { value: '1', label: 'Option 1' },
-  { value: '2', label: 'Option 2' },
-  { value: '3', label: 'Option 3' },
-  { value: '4', label: 'Option 4' }
-]
-```
-
-### 3. Handle Selection Changes
-Define a handler function that will be called whenever the selection changes.
-
-const handleChange = (selected: Option[]) => {
-  setSelectedItems(selected)
-}
-
-### 4. Render the Component
-Now you can render the ESewaMultiSelect component and pass in the necessary props:
-
-```tsx
-<ESewaMultiSelect
-  options={options}
-  onChange={handleChange}
-  placeholder="Select options"
-/>
-```
-
-### 5. Display Selected Items
-```tsx
-<div>
-  <h3>Selected Items</h3>
-  <ul>
-    {selectedItems.map(item => (
-      <li key={item.value}>{item.label}</li>
-    ))}
-  </ul>
-</div>
-```
-
-### Full Example
-
-```tsx
-import React, { useState } from 'react'
-import { ESewaMultiSelect } from './esewa-ui-library'
-
-const MyComponent = () => {
-  const [selectedItems, setSelectedItems] = useState([])
-
-  const options = [
-    { value: '1', label: 'Option 1' },
-    { value: '2', label: 'Option 2' },
-    { value: '3', label: 'Option 3' },
-    { value: '4', label: 'Option 4' }
-  ]
-
-  const handleChange = (selected: Option[]) => {
-    setSelectedItems(selected)
-  }
-
-  return (
-    <div>
-      <ESewaMultiSelect
-        options={options}
-        onChange={handleChange}
-        placeholder="Select options"
-      />
-      <div>
-        <h3>Selected Items</h3>
-        <ul>
-          {selectedItems.map(item => (
-            <li key={item.value}>{item.label}</li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  )
-}
-```
-
-# ESewaSelectNative Component
-
-The `ESewaSelectNative` is a customizable `select` dropdown component built with React and styled using `styled-components`. It provides a native `select` element with additional features such as labels, validation messages, and optional full-width styling.
-
-## Usage
-
-Here is an example of how to use the `ESewaSelectNative` component in your React application:
-
-```tsx
-import React, { useState } from 'react';
-import { ESewaSelectNative } from './esewa-ui-library'
-
-const ExampleComponent = () => {
-  const [selectedValue, setSelectedValue] = useState<string>('');
-
-  const handleSelectChange = (value: string) => {
-    setSelectedValue(value);
-  };
-
-  const options = [
-    { label: 'Option 1', value: '1' },
-    { label: 'Option 2', value: '2' },
-    { label: 'Option 3', value: '3' }
-  ];
-
-  return (
-    <div>
-      <ESewaSelectNative
-        label="Select an Option"
-        placeholder="Choose an option"
-        options={options}
-        value={selectedValue}
-        onChange={handleSelectChange}
-        required
-        fullwidth
-      />
-    </div>
-  );
-};
-```
-
-## Props
-
-| Name                | Type               | Default   | Description                                                                 |
-|---------------------|--------------------|-----------|-----------------------------------------------------------------------------|
-| `options`           | `Options[]`         | `[]`      | An array of objects representing the available options in the dropdown.     |
-| `placeholder`       | `string`            | `''`      | Placeholder text shown when no option is selected.                          |
-| `onChange`          | `(value: string) => void` | `() => {}` | A callback function triggered when an option is selected.                   |
-| `label`             | `string`            | `undefined` | The label displayed above the dropdown.                                     |
-| `value`             | `string`            | `undefined` | The currently selected value in the dropdown.                               |
-| `disabled`          | `boolean`           | `false`   | If `true`, disables the dropdown.                                           |
-| `validationMessage` | `string`            | `undefined` | A validation message that is displayed below the select field.              |
-| `required`          | `boolean`           | `false`   | If `true`, marks the field as required with an asterisk.                     |
-| `fullwidth`         | `boolean`           | `false`   | If `true`, the dropdown will take the full width of its container.          |
-
-### `Options` Type
-
-Each option is represented by an object with the following properties:
-
-| Name    | Type   | Description                                            |
-|---------|--------|--------------------------------------------------------|
-| `label` | `string` | The label text displayed for the option.              |
-| `value` | `any`   | The unique value associated with the option.            |
-
-# ESewaNepaliDatepicker Component
-
-The `ESewaNepaliDatepicker` component is a React component for selecting a Nepali date using the `nepali-datepicker-reactjs` library. It allows users to select a date in Nepali format, and it also supports custom styling and locales.
-
-## Usage
-
-Here is an example of how to use the `ESewaNepaliDatepicker` component in your React application:
-
-```tsx
-import React, { useState } from 'react'
-import { ESewaNepaliDatepicker } from './esewa-ui-library'
-
-const App = () => {
-  const [date, setDate] = useState<string>('')
-
-  const handleDateChange = (newDate: string) => {
-    setDate(newDate)
-  }
-
-  return (
-    <div>
-      <ESewaNepaliDatepicker
-        label="Select Nepali Date"
-        value={date}
-        onChange={handleDateChange}
-        calenderLocale="ne"  // You can use 'en' for English or 'ne' for Nepali locale
-      />
-    </div>
-  )
-}
-
-export default App
-```
-
-### Props
-
-The `ESewaNepaliDatepicker` component accepts the following props:
-
-| Prop Name        | Type                               | Description                                                                                                                                               | Default Value  |
-|------------------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|----------------|
-| `label`          | `string`                           | The label text to display above the date picker.                                                                                                           | `undefined`    |
-| `className`      | `string`                           | Custom class name to apply custom styles to the date picker component.                                                                                   | `undefined`    |
-| `value`          | `string`                           | The current date value in the form of a string.                                                                                                            | `undefined`    |
-| `onChange`       | `(val: string) => void`            | Callback function that is triggered when the selected date changes. It receives the selected date as a string.                                             | `undefined`    |
-| `calenderLocale` | `'en' | 'ne'`                      | The locale of the calendar. Use `'en'` for the English calendar or `'ne'` for the Nepali calendar.                                                        | `'en'`         |
-
-### Example
-
-```tsx
-<ESewaNepaliDatepicker
-  label="Select Nepali Date"
-  value={date}
-  onChange={handleDateChange}
-  calenderLocale="ne"
-/>
-```
-
-# ESewaRadio Component
-
-The `ESewaRadio` component is a customizable radio button with a label, styled using `styled-components`. It supports the necessary props for usage in forms and customizable styling.
-
-## 2. Using the Component
-
-After importing the `ESewaRadio` component, you can use it in your React components by passing the necessary props. Below is an example of how to use the radio button:
-
-### Example Usage
-
-```tsx
-import React, { useState } from 'react';
-import { ESewaRadio } from './esewa-ui-library'
-
-const MyComponent = () => {
-  const [isChecked, setChecked] = useState(false);
-
-  return (
-    <div>
-      <ESewaRadio
-        label="Accept Terms and Conditions"
-        name="terms"
-        checked={isChecked}
-        onChange={(checked) => setChecked(checked)}
-      />
-    </div>
-  );
-};
-
-export default MyComponent;
-```
-
-## Explanation of Props
-
-The `ESewaRadio` component accepts the following props:
-
-### `label`
-- **Type:** `string`
-- **Required:** No
-- **Description:** This prop is used to display the label next to the radio button. It is an optional prop and can be omitted if no label is needed.
-
-```tsx
-<ESewaRadio label="Accept Terms and Conditions" ... />
-```
-## Props
-
-The `ESewaRadio` component accepts the following props:
-
-| Prop        | Type                          | Required | Default Value | Description                                                                                      |
-|-------------|-------------------------------|----------|---------------|--------------------------------------------------------------------------------------------------|
-| `label`     | `string`                       | No       | `undefined`   | The label displayed next to the radio button.                                                     |
-| `name`      | `string`                       | Yes      | N/A           | The name of the radio button, which groups it together with other radio buttons.                  |
-| `onChange`  | `(checked: boolean) => void`   | No       | `undefined`   | Callback function that is triggered when the radio button's checked state changes.               |
-| `checked`   | `boolean`                      | Yes      | false   | Determines whether the radio button is selected (`true`) or not (`false`).                       |
-| `labelClass`| `string`                       | No       | `''`          | A custom class applied to the label element for styling.                                          |
-| `className` | `string`                       | No       | `''`          | A custom class applied to the root wrapper element of the radio button component.                |
-| `disabled`  | `boolean`                      | No       |  false        | Used to disable radio state                                                                 |
-
-# ESewaSanitizeHtml Component
-
-The `ESewaSanitizeHtml` component sanitizes HTML content before rendering it in a React component. It ensures that the HTML content is safe and free from malicious code by using the `DOMPurify` library.
-
-## Usage
-
-To use the `ESewaSanitizeHtml` component, simply pass the raw HTML content as the `html` prop. The component will sanitize the content to ensure it is safe for rendering.
-
-### Example:
-
-```tsx
-import React from 'react'
-import { ESewaSanitizeHtml } from './esewa-ui-library'
-
-const MyComponent = () => {
-  const rawHtml = '<p style="color:red">This is <b>sanitized</b> HTML content.</p>'
-  
-  return (
-    <div>
-      <h1>Sanitized HTML Example</h1>
-      <ESewaSanitizeHtml html={rawHtml} />
-    </div>
-  )
-}
-
-export default MyComponent
-```
-
-### In this example:
-
-- **rawHtml**: A string containing raw HTML content, including styles and tags such as `<p>` and `<b>`.
-- **ESewaSanitizeHtml component**: The component receives the `html` prop (in this case, `rawHtml`) and sanitizes it using `DOMPurify`.
-- **Sanitized HTML**: The sanitized HTML content is rendered inside a `div` element, using the `dangerouslySetInnerHTML` property.
-
-By passing the raw HTML to the component, it ensures that any potentially harmful content (like JavaScript or malicious code) is removed, making the content safe to render on the page.
-
-### Props
-
-| Prop    | Type                  | Description                                                                 |
-|---------|-----------------------|-----------------------------------------------------------------------------|
-| `html`  | `string | undefined` | The raw HTML string that needs to be sanitized. It can be `undefined` as well. |
-
-#### Prop Descriptions
-
-- **html**: This is the raw HTML content that you want to sanitize before rendering. It should be a string, and you can optionally pass `undefined` if no HTML is available to render.
-
-# ESewaSkeleton Component
-
-The `ESewaSkeleton` component provides a customizable skeleton loader UI. It is often used as a placeholder while content is loading or being fetched asynchronously. The skeleton loader can be customized to appear as a rectangle or a circle and can be styled with different dimensions.
-
-### Example Usage
-
-```tsx
-import React, { useState, useEffect } from 'react'
-import { ESewaSkeleton } from './esewa-ui-library'
-
-const YourComponent = () => {
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false)
-    }, 2000) // Simulating an API call
-  }, [])
-
-  return (
-    <div>
-      <ESewaSkeleton loading={loading} width="200px" height="20px">
-        <div>Content is loaded</div>
-      </ESewaSkeleton>
-    </div>
-  )
-}
-```
-
-### Props
-
-| Name      | Type         | Default      | Description                                             |
-|-----------|--------------|--------------|---------------------------------------------------------|
-| `loading` | `boolean`    | `false`      | Determines if the skeleton should be shown.             |
-| `width`   | `string`     | `100%`       | Defines the width of the skeleton.                      |
-| `height`  | `string`     | `20px`       | Defines the height of the skeleton.                     |
-| `circle`  | `boolean`    | `false`      | Makes the skeleton circular (applies border-radius 50%). |
-| `className` | `string`   | `''`         | Additional class names for styling.                     |
-| `children` | `React.ReactNode` | `undefined` | Content to render when `loading` is false.              |
-
-
-## ESewaTag Component
-
-The `ESewaTag` component is a flexible and customizable tag component used to display status labels, notifications, or simple tags with optional icons.
-
-### Usage
-
-```tsx
-import React from 'react'
-import { ESewaTag } from './esewa-ui-library'
-import { FaCheckCircle } from 'react-icons/fa'
-
-const YourComponent = () => {
-  const handleTagClick = () => {
-    console.log('Tag clicked!')
-  }
-
-  return (
-    <div>
-      <ESewaTag
-        text="Success Tag"
-        icon={<FaCheckCircle />}
-        variant="success"
-        iconPosition="start"
-        size="normal"
-        onClick={handleTagClick}
-      />
-      
-      <ESewaTag
-        text="Warning Tag"
-        variant="warning"
-        size="small"
-        onClick={handleTagClick}
-      />
-    </div>
-  )
-}
-```
-
-
-### Props
-
-| Name           | Type                 | Default       | Description                                                                 |
-|----------------|----------------------|---------------|-----------------------------------------------------------------------------|
-| `text`         | `string`             | -             | The text content to display inside the tag.                                  |
-| `icon`         | `string` | `React.ReactNode`    | `undefined`   | An optional icon to display alongside the text.                              |
-| `variant`      | `'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info'` | `'primary'` | Defines the tag's color scheme. Available variants: `primary`, `secondary`, `danger`, `success`, `warning`, `info`. |
-| `iconPosition` | `'start' | 'end'`     | `'start'`     | Defines the position of the icon. Choose between `start` (before text) or `end` (after text). |
-| `size`         | `'normal' | 'small'`  | `'normal'`    | Defines the size of the tag. Available sizes: `normal`, `small`.              |
-| `onClick`      | `() => void`         | `undefined`   | A function to be triggered when the tag is clicked.                          |
-
-
-## Tooltip Component
-
-The `Tooltip` component provides an interactive tool-tip feature, displaying additional information when hovering over a target element. It is highly customizable, allowing the user to control the position of the tooltip and its appearance.
-
-### Features
-
-- **Positioning**: Tooltips can be displayed on the top, bottom, left, or right of the target element.
-- **Transitions**: Smooth fade-in and fade-out effect with controlled visibility and opacity transitions.
-- **Customization**: Easily customizable styles with CSS variables and positioning options.
-
-### Example Usage
-
-```tsx
-import React, { useState } from 'react'
-import { ESewaTooltip } from './esewa-ui-library'
-
-const TooltipExample = () => {
-
-  return (
-    <ESewaTooltip content='Tooltip on click' position='bottom'>
-      <button>Click Me</button>
-    </ESewaTooltip>
-  )
-}
-
-export default TooltipExample
-```
-
-### Props
-
-| Name             | Type        | Default    | Description                                                        |
-|------------------|-------------|------------|--------------------------------------------------------------------|
-| `position`       | `'top' | 'bottom' | 'left' | 'right'` | `'top'` | Determines where the tooltip will appear in relation to the target element. Available positions: `top`, `bottom`, `left`, `right`. |
-| `content`        | `string`    | -          | The content/text to display inside the tooltip.                     |
-| `target`         | `React.ReactNode` | - | The target element which will trigger the tooltip. |
-| `delay`          | `number`    | `0`        | The delay in milliseconds before the tooltip becomes visible. |
-| `className`      | `string`    | `''`       | Additional class names for styling or overriding default styles. |
-
-### CSS Custom Variables
-
-- `--secondary`: Defines the background color of the tooltip.
-- `--white`: Defines the text color of the tooltip.
-
-
-### Providers
-
-- **ThemeProvider**: `ThemeProvider`
-
-Wrap your component with this provider to apply theme.
-
-```tsx
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import { ESewaThemeProvider } from 'esewa-ui-library'
-import App from './App.tsx'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <ESewaThemeProvider>
-        <App />
-    </ESewaThemeProvider>
-  </StrictMode>,
-)
-
-```
-
-In your page
-
-```tsx
-import { useEffect, useState } from "react";
-import {
-  MoonIcon,
-  SunIcon,
-} from "@heroicons/react/24/outline";
-
-const [darkMode, setDarkMode] = useState<boolean>(
-  window.matchMedia('(prefers-color-scheme: dark)').matches
-);
-
-const handleThemeToggle = () => {
-  setDarkMode((prevMode) => !prevMode);
-};
-
-useEffect(() => {
-  const theme = darkMode ? 'dark' : 'light';
-  document.documentElement.setAttribute('data-theme', theme);
-}, [darkMode]);
-
-<button
-  onClick={handleThemeToggle}
->
-  {darkMode ? (
-    <SunIcon className="h-6 w-6" />
-  ) : (
-    <MoonIcon className="h-6 w-6" />
-  )}
-</button>
-
-```
-
-- **ESewaProvider**: `ESewaProvider`
-
-Wrap your component with this provider.
-
-```tsx
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import { ESewaProvider } from 'esewa-ui-library'
-import App from './App.tsx'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <ESewaProvider>
-        <App />
-    </ESewaProvider>
-  </StrictMode>,
-)
-
-```
-
-then you can use useESewaDataProvider
-
-```tsx
-import { ESewaAppBar, useESewaDataProvider } from 'esewa-ui-library';
-
-const App = () => {
-  const { updateData } = useESewaDataProvider();
-
-  useEffect(() => {
-      updateData({
-        title: "Merchant Product Form",
-      });
-    }, []);
-
-  return (
-    <ESewaAppBar 
-      icon="icon-es-arrow-left"
-      titleposition="left"
-      onBackIconClick={() => console.log('Back icon clicked')}
-      onTitleClick={() => console.log('Title clicked')}
-      onActionIconClick={() => console.log('Action icon clicked')}
-      actionIcon="icon-settings"
-    />
-  );
-};
-
-export default App;
-
-```
-
-
-- **ESewaPaymentProvider**: `ESewaPaymentProvider`
-
-# Services
-
-## Overview
-
-This library provides a set of services that allow interaction between the merchant app and the host application. These services include authentication, location access, user detail retrieval, media access, and transaction validation.
-
-## Table of Contents
-
-- [Initialization](#initialization)
-- [Service Requests](#service-requests)
-  - [Location Request](#location-request)
-  - [User Detail Request](#user-detail-request)
-  - [Media Access Request](#media-access-request)
-  - [Validate Payment](#validate-payment)
-  - [Request Payment](#request-payment)
-  - [Close App](#close-app)
-  - [Get Product](#get-product)
-  - [Validate User](#validate-user)
-  - [Merchant Detail](#merchant-detail)
-  - [QR Scanner Request](#qr-scanner-request)
-  - [Request File Download](#request-file-download)
-- [Error Handling](#error-handling)
-
-## Initialization
-
-Before the app loads, it must be initialized to obtain authentication credentials.
-
-### Usage
-
-```tsx
-useEffect(() => {
-    const saveAuthData = (res: { token?: string; scope?: any }): void => {
-      if (!res?.token) {
-        console.warn('Token is missing, skipping storage');
-        return;
-      }
-      sessionStorage.setItem('miniAppAuthToken', res.token);
-      sessionStorage.setItem('miniAppAuthScope', JSON.stringify(res.scope || {}));
-    };
-
-    const initAppCallback = (data: any) => {
-      try {
-        if (!data) {
-          throw new Error('Received null or undefined response');
-        }
-        const res = JSON.parse(data);
-        if (!res || typeof res !== 'object') {
-          throw new Error('Parsed response is not a valid object');
-        }
-        if (res?.error_message) {
-          return;
-        }
-        saveAuthData(res);
-      } catch (error) {
-        console.error('Error parsing response:', error);
-      }
-    };
-
-    const requestData = {
-      merchant_identifier: 'IAAAAABTOBAbFhAXHhEHAgoXX0FRR1FJJiw3LCwkJzE=', //your identifier key
-      requestType: REQUEST_TYPE_ENUM.INIT_APP,
-      callbackKey: CALLBACK_TYPE_ENUM.INIT_APP_CALLBACK
-    };
-
-    requestFromMiniApp(requestData, initAppCallback);
-}, []);
-```
-
-### Response Examples
-
-#### Success
-
-```json
-{
-    "token": "SEdcRFVePhYfCRtQJhEiATA8DyVWFFA7Dw8UBEAKH1IkLFwYJAUxPgI%3D",
-    "scope": [
-        "USER_DETAIL_ACCESS",
-        "LOCATION_ACCESS",
-        "MEDIA_ACCESS"
-    ]
-}
-```
-
-#### Error
-
-```json
-{
-    "error_message": "Service is currently unavailable."
-}
-```
-
-## Service Requests
-Merchants can only request services that are included in their granted scope. Before making a request, ensure the service type exists in scope.
-
-#### Location Request
-
-Pass the token received from initialization to request location access.
-
-```tsx
-const onLocationRequestClick = () => {
-    const obj: REQUEST_DATA_TYPE = {
-      requestType: REQUEST_TYPE_ENUM.LOCATION_ACCESS,
-      token: sessionStorage.getItem('miniAppAuthToken'),
-      callbackKey: CALLBACK_TYPE_ENUM.LOCATION_ACCESS_CALLBACK
-    }
-
-    const locationAccessCallBack: any = (data: any) => {
-      console.log('Location Access Response:', data)
-
-      try {
-        if (!data) {
-          throw new Error('Received null or undefined response')
-        }
-        const res = JSON.parse(data)
-        if (!res || typeof res !== 'object') {
-          throw new Error('Parsed response is not a valid object')
-        }
-        if (res?.error_message) {
-          throw new Error('Error res', res.error_message)
-        }
-        setLocationDetail(res) //use this response as needed
-      } catch (error) {
-        console.error('Error parsing response:', error)
-      }
-    }
-
-    requestFromMiniApp(
-      obj,
-      locationAccessCallBack
-    )
-  }
-```
-
-#### User Detail Request
-
-```tsx
-const onUserDetailRequestClick = () => {
-    const obj = {
-      requestType: REQUEST_TYPE_ENUM.USER_DETAIL_ACCESS,
-      token: sessionStorage.getItem('miniAppAuthToken'),
-      merchant_identifier: 'IAAAAABTOBAbFhAXHhEHAgoXX0FRR1FJJiw3LCwkJzE=',
-      callbackKey: CALLBACK_TYPE_ENUM.USER_DETAIL_ACCESS_CALLBACK
-    };
-
-    const userDetailAccessCallBack = (data: any) => {
-      try {
-        if (!data) throw new Error('Received null or undefined response');
-        const res = JSON.parse(data);
-        if (res?.error_message) throw new Error(res.error_message);
-        setUserDetail(res);
-      } catch (error) {
-        console.error('Error parsing response:', error);
-      }
-    };
-
-    requestFromMiniApp(obj, userDetailAccessCallBack);
-};
-```
-
-#### Media Access Request
-
-```tsx
-const onMediaAccessRequestClick = () => {
-    const obj = {
-      requestType: REQUEST_TYPE_ENUM.MEDIA_ACCESS,
-      token: sessionStorage.getItem('miniAppAuthToken'),
-      callbackKey: CALLBACK_TYPE_ENUM.MEDIA_ACCESS_CALLBACK
-    };
-
-    const mediaAccessCallBack = (data: any) => {
-      try {
-        if (!data) throw new Error('Received null or undefined response');
-        const res = data;
-        if (res?.error_message) throw new Error(res.error_message);
-        setMediaDetail(res);
-      } catch (error) {
-        console.error('Error parsing response:', error);
-      }
-    };
-
-    requestFromMiniApp(obj, mediaAccessCallBack);
-};
-```
-
-#### Validate Payment
-Pass token received from initialize request call with respective request type and callback key
-
-```tsx
-const onValidateTransactionClick = () => {
-    const obj = {
-      requestType: REQUEST_TYPE_ENUM.VALIDATE_TRANSACTION,
-      token: sessionStorage.getItem('miniAppAuthToken'),
-      callbackKey: CALLBACK_TYPE_ENUM.VALIDATE_TRANSACTION_CALLBACK
-    };
-
-    const validateTransactionCallBack = (data: any) => {
-      try {
-        if (!data) throw new Error('Received null or undefined response');
-        const res = JSON.parse(data);
-        if (res?.error_message) throw new Error(res.error_message);
-        setTransactionValidateRes(res);
-      } catch (error) {
-        console.error('Error parsing response:', error);
-      }
-    };
-
-    requestFromMiniApp(obj, validateTransactionCallBack);
-};
-```
-#### Request Payment
-Pass token received from initialize request call with respective request type, callback key , your merchant identifier and request payload
-
-```tsx
-const onRequestPaymentClick = () => {
-    const productPayload = {
-        "product_code": "NP-ES-VIANET",
-        "amount": 28.48,
-        "properties": {
-            "productId": "3299",
-            "payment_id": "1613103_PP",
-            "refId": "400005",
-            "customer_id": "48707",
-            "payer": "CUSTOMER"
-        },
-        "channel": "WEB_USER"
-    };
-
-    const obj = {
-      requestType: REQUEST_TYPE_ENUM.REQUEST_PAYMENT,
-      merchant_identifier: 'IAAAAABTOBAbFhAXHhEHAgoXX0FRR1FJJiw3LCwkJzE=',
-      token: sessionStorage.getItem('miniAppAuthToken'),
-      data: productPayload,
-      callbackKey: CALLBACK_TYPE_ENUM.REQUEST_PAYMENT_CALLBACK
-    };
-
-    const requestPaymentCallBack: any = (data:any) => {
-      console.log("Make payment Response:", data);
-
-      try {
-        if (!data) {
-          throw new Error('Received null or undefined response');
-        }
-        const res = JSON.parse(data);
-
-        if (!res || typeof res !== 'object') {
-          throw new Error('Parsed response is not a valid object');
-        }
-
-        if (res?.error_message) {
-          throw new Error('Error res', res.error_message);
-        }
-
-        setMakePaymentRes(res);
-      } catch (error) {
-        console.error('Error parsing response:', error);
-      }
-    };
-
-    requestFromMiniApp(obj, requestPaymentCallBack);
-};
-```
-
-#### Close App
-
-Pass the following to close the app.
-
-```tsx
-const onCloseRequestClick = () => {
-    const obj: REQUEST_DATA_TYPE = {
-      requestType: REQUEST_TYPE_ENUM.CLOSE_APP,
-      callbackKey: CALLBACK_TYPE_ENUM.CLOSE_APP_CALLBACK
-    }
-
-    requestFromMiniApp(
-      obj
-    )
-  }
-```
-
-#### Get Product Request
-
-  ```tsx
-  const onGetProductClick = () => {
-      const obj = {
-        requestType: REQUEST_TYPE_ENUM.GET_PRODUCT,
-        token: sessionStorage.getItem('miniAppAuthToken'),
-        callbackKey: CALLBACK_TYPE_ENUM.GET_PRODUCT_CALLBACK
-      };
-
-      const getProductCallBack = (data: any) => {
-        try {
-          if (!data) throw new Error('Received null or undefined response');
-          const res = JSON.parse(data);
-          if (res?.error_message) throw new Error(res.error_message);
-          setProduct(res);
-        } catch (error) {
-          console.error('Error parsing response:', error);
-        }
-      };
-
-      requestFromMiniApp(obj, getProductCallBack);
-  };
-  ```
-
-  #### Validate User Request
-
-  ```tsx
-  const onValidateUserClick = () => {
-      const obj = {
-        requestType: REQUEST_TYPE_ENUM.VALIDATE_USER,
-        token: sessionStorage.getItem('miniAppAuthToken'),
-        callbackKey: CALLBACK_TYPE_ENUM.VALIDATE_USER_CALLBACK
-      };
-
-      const validateUserCallBack = (data: any) => {
-        try {
-          if (!data) throw new Error('Received null or undefined response');
-          const res = JSON.parse(data);
-          if (res?.error_message) throw new Error(res.error_message);
-          setProduct(res);
-        } catch (error) {
-          console.error('Error parsing response:', error);
-        }
-      };
-
-      requestFromMiniApp(obj, validateUserCallBack);
-  };
-  ```
-
-  #### Merchant Detail Request
-
-  ```tsx
-  const onMerchantDetailClick = () => {
-      const obj = {
-        requestType: REQUEST_TYPE_ENUM.MERCHANT_DETAIL,
-        token: sessionStorage.getItem('miniAppAuthToken'),
-        callbackKey: CALLBACK_TYPE_ENUM.MERCHANT_DETAIL_CALLBACK
-      };
-
-      const merchantDetailCallBack = (data: any) => {
-        try {
-          if (!data) throw new Error('Received null or undefined response');
-          const res = JSON.parse(data);
-          if (res?.error_message) throw new Error(res.error_message);
-          setProduct(res);
-        } catch (error) {
-          console.error('Error parsing response:', error);
-        }
-      };
-
-      requestFromMiniApp(obj, merchantDetailCallBack);
-  };
-  ```
-
-  #### QR Scanner Request
-
-  ```tsx
-  const onQrScannerClick = () => {
-      const obj = {
-        requestType: REQUEST_TYPE_ENUM.QR_SCANNER_ACCESS,
-        token: sessionStorage.getItem('miniAppAuthToken'),
-        callbackKey: CALLBACK_TYPE_ENUM.QR_SCANNER_ACCESS_CALLBACK
-      };
-
-      const qrScannerCallBack = (data: any) => {
-        try {
-          if (!data) throw new Error('Received null or undefined response');
-          const res = JSON.parse(data);
-          if (res?.error_message) throw new Error(res.error_message);
-          setProduct(res);
-        } catch (error) {
-          console.error('Error parsing response:', error);
-        }
-      };
-
-      requestFromMiniApp(obj, qrScannerCallBack);
-  };
-  ```
-
-#### Request File Download
-
-Pass the following to request file download.
-
-**1. Link Type file download request**
-
-    const onPdfDownloadRequestClick = () => {
-        const obj: REQUEST_DATA_TYPE = {
-          requestType: REQUEST_TYPE_ENUM.FILE_DOWNLOAD_ACCESS,
-          callbackKey: CALLBACK_TYPE_ENUM.FILE_DOWNLOAD_ACCESS_CALLBACK,
-          data: {
-            fileName: 'Statement-2025.pdf',
-            type: 'url',
-            content: 'https://www.aeee.in/wp-content/uploads/2020/08/Sample-pdf.pdf' //pass file url
-          }
-        }
-
-        const fileDownloadCallBack: any = (data: any) => {
-          try{
-            if (!data) {
-              throw new Error('Received null or undefined response')
-            }
-            const res = data
-            if (res?.error_message) { //fail case
-              throw new Error('Error res', res.error_message)
-            }
-            else{
-              console.log(res.message) //success case
-            }
-          }
-          catch (error) {
-            console.error('Error parsing response:', error)
-          }
-        }
-
-        requestFromMiniApp(
-          obj,
-          fileDownloadCallBack
-        )
-      }
-
-**2. Base64 Encoded Type file download request**
-
-    const onPdfDownloadRequestClick = () => {
-        const response = await fetch('/base64.txt');
-        const content = await response.text(); //encoded pdf content/response from api
-        let base64Content = content.includes(',')
-            ? content
-            : `data:application/pdf;base64,${content}`;
-        const obj: REQUEST_DATA_TYPE = {
-          requestType: REQUEST_TYPE_ENUM.FILE_DOWNLOAD_ACCESS,
-          callbackKey: CALLBACK_TYPE_ENUM.FILE_DOWNLOAD_ACCESS_CALLBACK,
-          data: {
-            fileName: 'Statement-base64-2025.pdf',
-            type: 'base64',
-            content: base64Content
-          }
-        }
-
-        const fileDownloadCallBack: any = (data: any) => {
-          try{
-            if (!data) {
-              throw new Error('Received null or undefined response')
-            }
-            const res = data
-            if (res?.error_message) { //fail case
-              throw new Error('Error res', res.error_message)
-            }
-            else{
-              console.log(res.message) //success case
-            }
-          }
-          catch (error) {
-            console.error('Error parsing response:', error)
-          }
-        }
-
-        requestFromMiniApp(
-          obj,
-          fileDownloadCallBack
-        )
-      }
-
-## Error Handling
-
-Errors are returned as JSON responses with an `error_message` field.
-
-#### Example
-
-```json
-{
-    "error_message": "Service is currently unavailable"
-}
-```
-
-```json
-{
-    "error_message": "Merchant scope not found"
-}
-```
----
-
-This document provides a structured approach to interacting with the MiniApp services, ensuring proper initialization and error handling for seamless integration.
-
-### Utilities
-
-- `titleCase`
-- `revertIgnoredCase`
-- `formatText`
-- `formatAmount`
-- `debounce`
-- `reverseCamelCase`
-- `reverseSnakeCase`
-
-### Types
-
-- `REQUEST_TYPE_ENUM`
-
-```tsx
-import {REQUEST_TYPE_ENUM} from 'esewa-ui-library'
-```
-
-```json
-enum REQUEST_TYPE_ENUM {
-  INIT_APP = 'INIT_APP',
-  REQUEST_PAYMENT = 'REQUEST_PAYMENT',
-  USER_DETAIL_ACCESS = 'USER_DETAIL_ACCESS',
-  MEDIA_ACCESS = 'MEDIA_ACCESS',
-  LOCATION_ACCESS = 'LOCATION_ACCESS',
-  VALIDATE_TRANSACTION = 'VALIDATE_TRANSACTION',
-  CLOSE_APP = 'CLOSE_APP',
-  FILE_DOWNLOAD_ACCESS = 'FILE_DOWNLOAD_ACCESS'
-  GET_PRODUCT = 'GET_PRODUCT',
-  VALIDATE_USER = 'VALIDATE_USER',
-  MERCHANT_DETAIL = 'MERCHANT_DETAIL',
-  QR_SCANNER_ACCESS = 'QR_SCANNER_ACCESS'
-}
-```
-
-- `CALLBACK_TYPE_ENUM`
-
-```tsx
-import {CALLBACK_TYPE_ENUM} from 'esewa-ui-library'
-```
-
-```json
-enum CALLBACK_TYPE_ENUM{
-  INIT_APP_CALLBACK = 'INIT_APP_CALLBACK',
-  REQUEST_PAYMENT_CALLBACK = 'REQUEST_PAYMENT_CALLBACK',
-  USER_DETAIL_ACCESS_CALLBACK = 'USER_DETAIL_ACCESS_CALLBACK',
-  MEDIA_ACCESS_CALLBACK = 'MEDIA_ACCESS_CALLBACK',
-  LOCATION_ACCESS_CALLBACK = 'LOCATION_ACCESS_CALLBACK',
-  VALIDATE_TRANSACTION_CALLBACK = 'VALIDATE_TRANSACTION_CALLBACK',
-  CLOSE_APP_CALLBACK = 'CLOSE_APP_CALLBACK',
-  FILE_DOWNLOAD_ACCESS_CALLBACK = 'FILE_DOWNLOAD_ACCESS_CALLBACK',
-  GET_PRODUCT_CALLBACK = 'GET_PRODUCT_CALLBACK',
-  VALIDATE_USER_CALLBACK = 'VALIDATE_USER_CALLBACK',
-  MERCHANT_DETAIL_CALLBACK = 'MERCHANT_DETAIL_CALLBACK',
-  QR_SCANNER_ACCESS_CALLBACK = 'QR_SCANNER_ACCESS_CALLBACK'
-}
-```
-
-<!-- ### Hooks
-
-- `useMessage`
-- `useSessionStorage`
-- `useDebounce` -->
-
-## Contributing
-
-Feel free to submit issues and pull requests. Make sure to follow the coding guidelines and write tests where applicable.
-
-## License
-
-This project is licensed under the MIT License.
+# esewa-ui-library
+> UI Library for eSewa Mini App
+
+[![NPM](https://img.shields.io/npm/v/esewa-ui-library.svg)](https://www.npmjs.com/package/esewa-ui-library) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## Install
+
+```bash
+npm install --save esewa-ui-library
+```
+
+## Usage
+
+Import style file in your project:
+```bash
+import 'esewa-ui-library/dist/index.css';
+```
+
+### Components
+
+Import and use components in your project:
+
+```tsx
+import { ESewaButton } from 'esewa-ui-library';
+const App = () => {
+  return <ESewaButton>Click Me</ESewaButton>;
+};
+export default App;
+```
+
+### Available Components
+
+- **AlertCard**: `ESewaAlertCard`
+- **AppBar**: `ESewaAppBar`
+- **Button**: `ESewaButton`
+- **Card**: `ESewaCard`
+- **Carousel**: `ESewaCarousel`
+- **Checkbox**: `ESewaCheckbox`
+- **Chipgroup**: `ESewaChipGroup`
+- **Datepicker**: `ESewaDatepicker`
+- **Dialog**: `ESewaDialog`
+- **Divider**: `ESewaDivider`
+- **FullPageLoadingScreen**: `EsewaFullPageLoadingScreen`
+- **Grid**: `ESewaGrid`, `ESewaGridItem`
+- **Icon**: `ESIcon`
+- **Image**: `ESewaImage`
+- **InputField**: `ESewaInputField`
+- **InputFieldTextArea**: `ESewaInputFeildTextArea`
+- **MultiSelect**: `ESewaMultiSelect`
+- **NepaliDatepicker**: `ESewaNepaliDatepicker`
+- **Radio**: `ESewaRadio`
+- **Select**: `ESewaSelectNative`
+- **Skeleton**: `ESewaSkeleton`
+- **Tag**: `ESewaTag`
+- **Tooltip**: `ESewaTooltip`
+---
+
+## ESewaAlertCard
+
+The `ESewaAlertCard` component is used to display alert messages with different variants, optional icons, dismiss buttons, and action buttons.
+
+### Usage:
+
+```tsx
+import { ESewaAlertCard } from 'esewa-ui-library';
+
+const App = () => {
+  return (
+    <ESewaAlertCard
+      variant="warning"
+      title="Warning Alert"
+      description="This is a warning alert"
+      titleIcon="fa fa-exclamation-circle"
+      showDismissIcon={true}
+      dismissIcon="fa fa-times"
+      onDismiss={() => alert('Dismiss clicked')}
+      showCardFooter={true}
+      buttonLabel="Action"
+      buttonOnClick={() => alert('Action clicked')}
+    />
+  );
+};
+
+export default App;
+```
+
+### Props:
+
+| Prop Name            | Type                                              | Default      | Description |
+|----------------------|--------------------------------------------------|-------------|-------------|
+| `alertCardClass`     | `string`                                         | `''`        | Additional class for custom styling |
+| `variant`           | `'primary' | 'warning' | 'danger' | 'info'`      | `'primary'` | Determines the alert style |
+| `title`             | `string`                                         | `undefined` | Title of the alert |
+| `description`       | `string`                                         | `undefined` | Alert description text |
+| `descriptionIcon`   | `string` | `React.ReactNode`                     | `undefined` | Icon class for the description |
+| `showDescriptionIcon` | `boolean`                                      | `false`     | Whether to show the description icon |
+| `titleIcon`         | `string` | `React.ReactNode`                     | `undefined` | Icon class for the title |
+| `dismissIcon`       | `string` | `React.ReactNode`                     | `undefined` | Icon class for the dismiss button |
+| `showDismissIcon`   | `boolean`                                       | `false`     | Whether to show the dismiss button |
+| `onDismiss`        | `() => void`                                     | `undefined` | Callback function when dismiss button is clicked |
+| `showCardFooter`   | `boolean`                                       | `false`     | Whether to show the footer section |
+| `buttonLabel`      | `string`                                         | `undefined` | Label for the action button |
+| `buttonOnClick`    | `() => void`                                     | `undefined` | Callback function when the action button is clicked |
+
+---
+
+
+## ESewaAppBar
+
+The `ESewaAlertCard` component is customizable app bar for your eSewa Mini App with support for back, title, and action icons, making navigation and interactions seamless.
+
+Use useESewaDataProvider to set title for appbar.
+
+### Usage:
+
+```tsx
+import { ESewaAppBar, useESewaDataProvider } from 'esewa-ui-library';
+
+const App = () => {
+  const { updateData } = useESewaDataProvider();
+
+  useEffect(() => {
+      updateData({
+        title: "Merchant Product Form",
+      });
+    }, []);
+
+  return (
+    <ESewaAppBar 
+      icon="icon-es-arrow-left"
+      titleposition="left"
+      onBackIconClick={() => console.log('Back icon clicked')}
+      onTitleClick={() => console.log('Title clicked')}
+      onActionIconClick={() => console.log('Action icon clicked')}
+      actionIcon="icon-settings"
+    />
+  );
+};
+
+export default App;
+```
+
+### Props:
+
+| Prop Name             | Type                      | Default  | Description |
+|-----------------------|---------------------------|----------|-------------|
+| `title`               | `string | any`             | `undefined` | Title to display in the app bar |
+| `icon`                | `string`| `React.ReactNode`| `'icon-back'` | Icon to display as the back button |
+| `imageUrl`            | `string`                  | `undefined` | Image URL to display next to the title |
+| `onBackIconClick`     | `() => void`              | `() => {}` | Callback for the back icon click event |
+| `onTitleClick`        | `() => void`              | `() => {}` | Callback for the title click event |
+| `onActionIconClick`   | `() => void`              | `() => {}` | Callback for the action icon click event |
+| `onClick`             | `() => void`              | `() => {}` | Callback for the entire app bar click event |
+| `className`           | `string`                  | `undefined` | Additional class for custom styling |
+| `titleposition`       | `'left' | 'center' | 'right'` | `'center'` | Position of the title within the app bar |
+| `actionIcon`          | `string`| `React.ReactNode`| `undefined` | Icon for the action button on the right side of the app bar |
+
+
+# ESewaButton
+
+`ESewaButton` is a highly customizable button component built with React and styled using `styled-components`. It supports multiple variants, sizes, icon placement, and other button properties for flexible UI design.
+
+### Usage:
+
+```tsx
+import { ESewaButton } from 'esewa-ui-library';
+
+const App = () => {
+  return (
+    <ESewaButton 
+      type="button"
+      variant="primary"
+      onClick={handleClick}
+      disabled={false}
+      outlined={false}
+      fullwidth={true}
+      icon="icon-class"
+      iconPlacement="start"
+      size="large"
+      textTransform="uppercase"
+    >
+      Click Me
+    </ESewaButton>
+  );
+};
+
+export default App;
+```
+
+
+### Props:
+| Name           | Type                      | Default     | Description                                                                                                  |
+|----------------|---------------------------|-------------|--------------------------------------------------------------------------------------------------------------|
+| `type`         | `'button' | 'submit' | 'reset'` | `'button'`  | Specifies the type of the button. Options include `button`, `submit`, or `reset`.                           |
+| `variant`      | `'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'text'` | `'default'` | Specifies the variant style of the button. Choose from `primary`, `secondary`, `danger`, `success`, `warning`, `info`, or `text`. |
+| `onClick`      | `(e: any) => void`         | `undefined` | The function to execute when the button is clicked.                                                          |
+| `children`     | `React.ReactNode`          | `undefined` | The content of the button, typically text or icons.                                                          |
+| `disabled`     | `boolean`                  | `false`     | Disables the button if set to `true`.                                                                         |
+| `outlined`     | `boolean`                  | `false`     | If `true`, the button will have an outline style.                                                            |
+| `className`    | `string`                   | `''`        | Additional CSS class(es) to apply to the button.                                                             |
+| `fullwidth`    | `boolean`                  | `false`     | If `true`, the button will span the full width of its container.                                              |
+| `icon`         | `string`| `React.ReactNode`| `
+
+
+## Styling and Customization
+
+### Button Size
+
+You can customize the button size using the `size` prop. The available sizes are:
+
+- `large`: Large button with more padding.
+- `medium`: Default button size.
+- `small`: Compact button with smaller padding.
+
+### Button Variants
+
+The button supports various color variants that you can use by specifying the `variant` prop:
+
+- `primary`: The main action button style.
+- `secondary`: A secondary action style.
+- `danger`: A button to signify danger or warning actions.
+- `success`: For success actions.
+- `warning`: For warning actions.
+- `info`: A button for informational actions.
+- `text`: A text-only button with no background.
+
+### Icon Customization
+
+You can add icons to your button using the `icon` prop. The icon will be displayed inside the button either before or after the button text, depending on the `iconPlacement` prop.
+
+- `iconPlacement` can be set to `start` (icon before text) or `end` (icon after text).
+- Use the `iconClass` prop to apply a custom class to the icon for further customization.
+
+### Full Width Button
+
+To make the button span the full width of its container, set the `fullwidth` prop to `true`.
+
+### Disabled Button
+
+If you want to disable the button, set the `disabled` prop to `true`. The button will appear grayed out and will not be clickable.
+
+### Text Transform
+
+You can control the text transformation of the button text using the `textTransform` prop. Available options are:
+
+- `uppercase`: Converts the button text to uppercase.
+- `capitalized`: Capitalizes the first letter of each word.
+
+## Example Usage
+
+### Basic Example
+
+```tsx
+import React from 'react';
+import { ESewaButton } from 'esewa-ui-library';
+
+const App = () => {
+  return (
+    <div>
+      <ESewaButton variant="primary" onClick={() => alert('Button clicked!')}>
+        Primary Button
+      </ESewaButton>
+    </div>
+  );
+}
+
+export default App;
+```
+
+# ESewaCard Component
+
+The `ESewaCard` component is a flexible and customizable card wrapper built with `styled-components` in React. It provides a container with background color, padding, and customizable border radius styles. You can use it to wrap content such as text, images, or other components to create a card-like layout.
+
+The card supports various border radius values through the `className` prop. The `ESewaCard` component is lightweight and can be customized with different CSS variables.
+
+## Props
+| Name        | Type                | Default     | Description                                                                          |
+|-------------|---------------------|-------------|--------------------------------------------------------------------------------------|
+| `children`  | `React.ReactNode`    | `''`        | The content inside the card.                                                         |
+| `className` | `string`             | `''`        | Additional CSS class(es) to apply to the card.                                        |
+
+## Styling and Customization
+
+The `ESewaCard` component uses CSS variables for styling, which allows for easy customization of the card's background, padding, border radius, and more.
+
+### Border Radius Customization
+
+You can customize the card's border radius by adding the appropriate `className`:
+
+- `border-radius-0`: Border radius of `var(--values-value-0)`
+- `border-radius-2`: Border radius of `var(--values-value-2)`
+- `border-radius-4`: Border radius of `var(--values-value-4)`
+- `border-radius-6`: Border radius of `var(--values-value-6)`
+- `border-radius-8`: Border radius of `var(--values-value-8)`
+- `border-radius-10`: Border radius of `var(--values-value-10)`
+- `border-radius-12`: Border radius of `var(--values-value-12)`
+- `border-radius-14`: Border radius of `var(--values-value-14)`
+- `border-radius-16`: Border radius of `var(--values-value-16)`
+- `border-radius-round`: Border radius of `50%` (perfectly round card)
+
+### Default Styling
+
+- **Background color**: `var(--card-bg)`
+- **Box-shadow**: `var(--shadow--1--umbra)`
+- **Text color**: `var(--text-dark)`
+- **Padding**: `var(--values-value-16)`
+
+## Example Usage
+
+### Basic Example
+
+```tsx
+import React from 'react';
+import { ESewaCard } from 'esewa-ui-library';
+
+const App = () => {
+  return (
+    <div>
+      <ESewaCard>
+        <h3>Card Content</h3>
+        <p>This is a simple card with content inside.</p>
+      </ESewaCard>
+    </div>
+  );
+}
+
+export default App;
+```
+
+### Custom Border Radius Example
+
+You can customize the border radius of the `ESewaCard` component by using different `className` values. Below is an example of how to apply a custom border radius to the card.
+
+#### Example: Card with Border Radius 8
+
+```tsx
+import React from 'react';
+import { ESewaCard } from 'esewa-ui-library';
+
+const App = () => {
+  return (
+    <div>
+      <ESewaCard className="border-radius-8">
+        <h3>Card with Border Radius 8</h3>
+        <p>This card has a border radius of 8px.</p>
+      </ESewaCard>
+    </div>
+  );
+}
+
+export default App;
+```
+
+## ESewaCarousel
+
+`ESewaCarousel` is a flexible and customizable carousel component built with React and styled-components. It supports both horizontal and vertical scrolling, customizable item sizes, and various features such as autoplay, navigation, and indicators.
+
+### Features
+- Supports **horizontal** and **vertical** directions.
+- Ability to display **scrollbars** and customize their visibility.
+- **Navigation buttons** to scroll through items.
+- **Autoplay** functionality with configurable intervals.
+- **Indicators** to show the active item.
+- Customizable **width** and **height** for carousel items.
+- **Responsive** adjustments for smaller screens.
+
+### Props
+| Prop                | Type                           | Default Value  | Description                                                                                       |
+|---------------------|--------------------------------|----------------|---------------------------------------------------------------------------------------------------|
+| `items`             | `React.ReactNode[]`            | `[]`           | Array of items to display in the carousel.                                                         |
+| `direction`         | `'horizontal' \| 'vertical'`   | `'horizontal'` | Defines the direction of scrolling (horizontal or vertical).                                      |
+| `itemWidth`         | `string`                       | `'200px'`      | Custom width of each item in the carousel.                                                         |
+| `itemHeight`        | `string`                       | `'200px'`      | Custom height of each item in the carousel.                                                        |
+| `showScrollbar`     | `boolean`                      | `false`        | Whether to display the scrollbar in the carousel.                                                  |
+| `showIndicator`     | `boolean`                      | `true`         | Whether to display the carousel indicators.                                                        |
+| `visibleItems`      | `number`                       | `undefined`    | Number of items to display at once in the carousel.                                                |
+| `showNav`           | `boolean`                      | `false`        | Whether to show left and right navigation buttons.                                                 |
+| `autoplay`          | `boolean`                      | `false`        | Whether the carousel should autoplay.                                                              |
+| `autoplayInterval`  | `number`                       | `3000`         | Interval for autoplay in milliseconds (default 3000ms).                                            |
+### Styling
+
+The `ESewaCarousel` component is styled using `styled-components`. The component is fully customizable, and you can adjust the appearance by modifying the following properties in the CSS:
+
+- `background-color` for items (`--card-bg`)
+- `color` for text (`--body-color`)
+- Customizable scrollbar styles (`.carousel-wrapper.show-scrollbar`).
+
+### Example Usage
+
+#### Horizontal Carousel
+
+```tsx
+import React from 'react';
+import { ESewaCarousel } from 'esewa-ui-library';
+
+const items = [
+  <div>Item 1</div>,
+  <div>Item 2</div>,
+  <div>Item 3</div>
+];
+
+const App = () => {
+  return (
+    <ESewaCarousel 
+      items={items} 
+      direction="horizontal" 
+      itemWidth="250px" 
+      itemHeight="200px" 
+      showScrollbar 
+      showNav 
+      showIndicator 
+      autoplay 
+      autoplayInterval={4000}
+    />
+  );
+}
+
+export default App;
+```
+
+# ESewaCheckbox Component
+
+The `ESewaCheckbox` component is a fully customizable checkbox built with React and styled using `styled-components`. It provides support for labels, disabled states, custom change handling, and additional styling flexibility through props.
+
+## Features
+
+- **Customizable checkbox**: Allows the user to easily customize the checkbox with a label.
+- **Change handling**: Provides an `onChange` callback to handle state changes.
+- **Disabled state**: Supports disabling the checkbox.
+- **Custom styling**: Supports custom class names and additional styling flexibility via props.
+
+## Usage
+
+### Basic Usage
+
+To use the `ESewaCheckbox` component, import it and pass the necessary props to it.
+
+```tsx
+import { ESewaCheckbox } from 'esewa-ui-library';
+
+const MyComponent = () => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleChange = (checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  return (
+    <ESewaCheckbox 
+      label="I agree to the terms" 
+      checked={isChecked} 
+      onChange={handleChange} 
+    />
+  );
+};
+```
+
+## Props
+| Prop          | Type        | Default Value | Description                                       |
+|---------------|-------------|---------------|---------------------------------------------------|
+| `label`       | `string?`   | `undefined`   | The label text for the checkbox.                  |
+| `onChange`    | `(checked: boolean) => void?` | `undefined` | Callback function to handle checkbox state change. |
+| `checked`     | `boolean?`  | `false`       | The checked state of the checkbox.                |
+| `labelClass`  | `string?`   | `''`          | Class name for styling the label.                 |
+| `className`   | `string?`   | `''`          | Custom class name for the checkbox container.     |
+| `disabled`    | `boolean?`  | `false`       | If true, disables the checkbox.   
+
+# ESewaChipGroup Component
+
+## Overview
+
+The `ESewaChipGroup` component is a customizable chip group component built with React and styled-components. It allows you to display a set of chips with selectable options. You can choose between single or multiple selection modes, with customizable styles and optional icons.
+
+## Props
+| Prop            | Type                            | Default Value | Description                                                                                                                                                    |
+|-----------------|---------------------------------|---------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `selection`     | `'single' \| 'multiple'`        | Required      | Specifies the selection mode: `'single'` for single selection, `'multiple'` for multiple selection.                                                          |
+| `required`      | `boolean?`                       | `false`       | If true, ensures that at least one chip is selected when the selection mode is `'multiple'`.                                                                  |
+| `chips`         | `ChipProps[]`                    | Required      | An array of chips to display. Each chip includes a text label, an optional icon, and an ID.                                                                  |
+| `className`     | `string?`                        | `''`          | Optional custom class name for styling the chip container.                                                                                                    |
+| `onChange`    | `(selected: number[] | number) => void?` | `undefined` | Callback function to handle chip state change. |
+
+# ESewaDatePicker
+
+A customizable and accessible date picker component for React, built using **styled-components**.
+
+## Features
+
+- Customizable label with a required indicator.
+- Supports `min` and `max` date restrictions.
+- Supports `readOnly` and `disabled` states.
+- Displays validation messages when needed.
+- Automatically focuses on the input when `autoFocus` is enabled.
+- Styled using `styled-components`.
+
+
+## Usage
+
+### Basic Example
+
+```tsx
+import React, { useState } from "react";
+import { ESewaDatePicker } from 'esewa-ui-library';
+
+const App = () => {
+  const [date, setDate] = useState("");
+
+  return (
+    <div>
+      <ESewaDatePicker
+        label="Select Date"
+        name="date"
+        value={date}
+        onChange={(e) => setDate(e.target.value)}
+        required
+      />
+    </div>
+  );
+};
+
+export default App
+```
+
+## Example with Validation, Min & Max Dates
+
+```tsx
+import React, { useState } from "react";
+import { ESewaDatePicker } from 'esewa-ui-library';
+
+const App = () => {
+  const [date, setDate] = useState("");
+
+  return (
+    <div>
+      <ESewaDatePicker
+        label="Start Date"
+        name="startDate"
+        value={date}
+        onChange={(e) => setDate(e.target.value)}
+        min="2023-12-01"
+        max="2024-12-31"
+        validationMessage="Please select a valid date."
+        required
+      />
+    </div>
+  );
+};
+
+export default App;
+```
+
+## Props
+
+| Prop Name          | Type                                      | Default   | Description |
+|--------------------|-------------------------------------------|-----------|-------------|
+| `id`               | `string`                                  | `undefined` | ID for the input field. |
+| `name`             | `string`                                  | `undefined` | Name attribute for the input field. |
+| `label`            | `string`                                  | `undefined` | Label text displayed above the input field. |
+| `value`            | `string`                                  | `undefined` | Selected date value (in `YYYY-MM-DD` format). |
+| `min`              | `string`                                  | `undefined` | Minimum selectable date (in `YYYY-MM-DD` format). |
+| `max`              | `string`                                  | `undefined` | Maximum selectable date (in `YYYY-MM-DD` format). |
+| `required`         | `boolean`                                 | `false`    | Marks the field as required. |
+| `readOnly`         | `boolean`                                 | `false`    | Makes the input read-only. |
+| `disabled`         | `boolean`                                 | `false`    | Disables the input field. |
+| `className`        | `string`                                  | `""`       | Additional class names for styling. |
+| `validationMessage`| `string`                                  | `undefined` | Displays an error message below the input. |
+| `autoFocus`        | `boolean`                                 | `false`    | Automatically focuses on the input when mounted. |
+| `onChange`         | `(event: React.ChangeEvent<HTMLInputElement>) => void` | `undefined` | Callback function triggered on date change. |
+
+
+# ESewaDialog Component
+
+## Usage
+
+The `ESewaDialog` component is a modal dialog used to display content with options like OK and Cancel actions. You can customize the dialog's appearance, positioning, and button texts.
+
+### Example:
+
+```tsx
+import React, { useState } from 'react';
+import { ESewaDialog } from 'esewa-ui-library';
+
+const App = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const openDialog = () => setIsOpen(true);
+  const closeDialog = () => setIsOpen(false);
+  const handleOk = () => {
+    console.log('OK button clicked');
+    closeDialog();
+  };
+
+  return (
+    <div>
+      <button onClick={openDialog}>Open Dialog</button>
+
+      {
+        isOpen && (<ESewaDialog
+          isOpen={isOpen}
+          title="Sample Dialog"
+          okText="Confirm"
+          cancelText="Cancel"
+          onOk={handleOk}
+          onCancel={closeDialog}
+          position="center"
+        >
+          <p>Dialog content goes here.</p>
+        </ESewaDialog>)
+      }
+    </div>
+  );
+};
+
+export default App;
+```
+
+## Props
+
+| Prop Name            | Type                                                       | Default                | Description                                                                                                                                               |
+|----------------------|------------------------------------------------------------|------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `isOpen`             | `boolean`                                                  | `false`                | Controls the visibility of the dialog.                                                                                                                     |
+| `showLeftIcon`       | `boolean`                                                  | `false`                | Whether to show the left icon in the dialog header.                                                                                                        |
+| `leftIcon`           | `string` | `React.ReactNode`                               | `'icon-es-check'`      | The icon class to be displayed in the left side of the dialog header.                                                                                     |
+| `showCloseIcon`      | `boolean`                                                  | `false`                | Whether to show the close icon in the dialog header.                                                                                                      |
+| `closeIcon`          | `string`                                                   | `'icon-es-close'`      | The icon class for the close button.                                                                                                                       |
+| `okText`             | `string`                                                   | `'OK'`                  | The text to be displayed on the OK button.                                                                                                                 |
+| `cancelText`         | `string`                                                   | `'Cancel'`             | The text to be displayed on the Cancel button.                                                                                                            |
+| `title`              | `string`                                                   | `undefined`            | The title of the dialog.                                                                                                                                  |
+| `children`           | `React.ReactNode`                                          | `undefined`            | The content to be displayed in the body of the dialog.                                                                                                    |
+| `onOk`               | `() => void`                                               | `undefined`            | The callback function for the OK button click event.                                                                                                      |
+| `onCancel`           | `() => void`                                               | `() => {}`             | The callback function for the Cancel button click event or clicking outside the dialog.                                                                  |
+| `position`           | `'center' | 'top' | 'bottom'`                            | `'bottom'`             | The position of the dialog on the screen. Can be `center`, `top`, or `bottom`.                                                                          |
+| `disableSubmitButton`| `boolean`                                                  | `false`                | Whether the OK button should be disabled.           
+|
+# ESewaDivider Component
+
+The `ESewaDivider` component is a customizable divider line that can be used to separate content in your React application. You can customize the color, thickness, width, margin, and style (dotted or solid) of the divider.
+
+## Usage
+
+To use the `ESewaDivider`, simply import it into your React component and include it in your JSX. You can customize the divider's appearance using the available props.
+
+### Basic Usage
+
+```tsx
+import React from 'react'
+import { ESewaDivider } from 'esewa-ui-library';
+
+const MyComponent = () => {
+  return (
+    <div>
+      <p>Content above the divider</p>
+      <ESewaDivider />
+      <p>Content below the divider</p>
+    </div>
+  )
+}
+```
+
+## Props
+
+The `ESewaDivider` component accepts the following props to customize its appearance:
+
+| Prop         | Type     | Default Value    | Description                                                                                       |
+|--------------|----------|------------------|---------------------------------------------------------------------------------------------------|
+| `color`      | `string` | `'var(--border)'` | The color of the divider. You can specify any valid CSS color value.                              |
+| `thickness`  | `string` | `'1px'`          | The thickness of the divider. You can specify the value in `px`, `em`, `rem`, etc.                |
+| `width`      | `string` | `'100%'`         | The width of the divider. You can specify a percentage, `px`, `em`, `rem`, etc.                   |
+| `margin`     | `string` | `'8px 0'`        | The margin around the divider. You can specify the margin in `px`, `em`, `rem`, etc.               |
+| `className`  | `string` | `''` (optional)  | A custom CSS class for additional styling.                                                        |
+| `dotted`     | `boolean`| `false`          | If `true`, the divider will be styled with a dotted line (`dashed` style). Otherwise, it is solid. |
+
+### Example
+
+```tsx
+<ESewaDivider 
+  color="blue" 
+  thickness="2px" 
+  width="50%" 
+  margin="10px 0" 
+  dotted 
+/>
+```
+
+In this example, the divider will be blue, 2px thick, 50% wide, with 10px margin on top and bottom, and have a dotted line style.
+
+# Full Page Loading Component
+
+The `EsewaFullPageLoadingScreen` component provides a full-page loading screen with a loading animation consisting of animated dots and an optional text message.
+
+## Usage
+
+You can use the `EsewaFullPageLoadingScreen` component to show a loading screen with animated dots.
+
+### Example Usage
+
+```tsx
+import React from 'react';
+import { EsewaFullPageLoadingScreen } from 'esewa-ui-library';
+
+const App = () => {
+  return (
+    <div>
+      {/* Display loading screen with a custom message */}
+      <EsewaFullPageLoadingScreen text="Loading, please wait..." />
+    </div>
+  );
+};
+
+export default App;
+```
+
+## Props
+
+| Prop   | Type    | Default Value | Description                                                                                           |
+|--------|---------|---------------|-------------------------------------------------------------------------------------------------------|
+| `text` | `string` | `undefined`   | Custom loading text that will be displayed next to the animated dots. If not provided, no text will be shown. |
+
+
+# `ESewaGrid` & `ESewaGridItem` Component
+
+## Overview
+
+The `ESewaGrid` and `ESewaGridItem` components are used to create flexible grid layouts with a 12-column grid system. The `ESewaGrid` serves as the container for the grid, and the `ESewaGridItem` allows you to define the column span for individual items within the grid.
+
+
+## Usage
+
+The `ESewaGrid` component is used to create a 12-column grid layout. You can use `ESewaGridItem` to define the number of columns an item will span within the grid.
+
+### Example
+
+```tsx
+import { ESewaGrid, ESewaGridItem } from './esewa-ui-library';
+
+const Example = () => {
+  return (
+    <ESewaGrid>
+      <ESewaGridItem colSpan={4}>Item 1</ESewaGridItem>
+      <ESewaGridItem colSpan={8}>Item 2</ESewaGridItem>
+      <ESewaGridItem colSpan={12}>Item 3</ESewaGridItem>
+    </ESewaGrid>
+  );
+};
+```
+
+In the example above:
+Item 1 spans 4 columns.
+
+Item 2 spans 8 columns.
+
+Item 3 spans all 12 columns.
+
+## Props
+
+### `ESewaGrid` Props
+
+| Prop      | Type             | Default Value | Description                                                                |
+|-----------|------------------|---------------|----------------------------------------------------------------------------|
+| `children`| `React.ReactNode` | Required      | The content inside the grid container.                                     |
+| `className`| `string`         | `''`          | Custom class name for styling the grid container.                          |
+
+### `ESewaGridItem` Props
+
+| Prop      | Type                                                   | Default Value | Description                                                                 |
+|-----------|--------------------------------------------------------|---------------|-----------------------------------------------------------------------------|
+| `colSpan` | `1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12`   | Required      | Defines the number of columns the grid item will span (from 1 to 12).       |
+| `children`| `React.ReactNode`                                      | Required      | The content inside the grid item.                                           |
+| `className`| `string`                                              | `''`          | Custom class name for styling the grid item.                                |
+
+## Example: ESewaGrid with All Column Spans
+
+### Example: Usage of All Column Spans
+
+In this example, we use all possible column spans (from 1 to 12) to demonstrate how `ESewaGrid` and `ESewaGridItem` work:
+
+```tsx
+import { ESewaGrid, ESewaGridItem } from './esewa-ui-library'
+
+const Example = () => {
+  return (
+    <ESewaGrid>
+      <ESewaGridItem colSpan={1}>Item 1 (1 Column)</ESewaGridItem>
+      <ESewaGridItem colSpan={2}>Item 2 (2 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={3}>Item 3 (3 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={4}>Item 4 (4 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={5}>Item 5 (5 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={6}>Item 6 (6 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={7}>Item 7 (7 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={8}>Item 8 (8 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={9}>Item 9 (9 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={10}>Item 10 (10 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={11}>Item 11 (11 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={12}>Item 12 (12 Columns)</ESewaGridItem>
+    </ESewaGrid>
+  )
+}
+```
+
+# ESIcon Component
+
+The `ESIcon` component is a customizable icon component built using `styled-components` and CSS variables. It allows you to display an icon from a font icon set and customize its size and colors.
+
+### Basic Example
+
+```tsx
+import React from "react";
+import { ESIcon } from './esewa-ui-library'
+
+const App = () => {
+  return (
+    <div>
+      <ESIcon icon="home" size={40} iconPrimaryColor="blue" iconSecondaryColor="gray" />
+      <ESIcon icon="settings" size={30} iconPrimaryColor="green" />
+    </div>
+  );
+};
+
+export default App;
+```
+
+### Example with Custom Colors and Size, Multiple Icons
+
+In this example, we render multiple icons with custom sizes and colors.
+
+```tsx
+import React from "react";
+import { ESIcon } from './esewa-ui-library'
+
+const App = () => {
+  return (
+    <div>
+      <ESIcon icon="search" size={50} iconPrimaryColor="red" iconSecondaryColor="yellow" />
+      <ESIcon icon="user" size={32} iconPrimaryColor="purple" />
+      <ESIcon icon="cart" size={48} iconPrimaryColor="orange" iconSecondaryColor="black" />
+    </div>
+  );
+};
+
+export default App;
+
+```
+
+### ESIcon Component Props
+
+| Prop                | Type                             | Default   | Description                                                        |
+|---------------------|----------------------------------|-----------|--------------------------------------------------------------------|
+| `icon`              | `string`                         | -         | The name of the icon to display. This should be the icon class name (e.g., `search`, `user`, etc.). |
+| `size`              | `number`                         | `28`      | The size of the icon in pixels.                                    |
+| `iconPrimaryColor`  | `string`                         | `undefined` | The primary color of the icon. If not provided, the default color is used. |
+| `iconSecondaryColor`| `string`                         | `undefined` | The secondary color of the icon. If not provided, the default color is used. |
+
+### Usage Example:
+
+```tsx
+<ESIcon icon="search" size={50} iconPrimaryColor="red" iconSecondaryColor="yellow" />
+```
+
+# ESewaImage Component
+
+`ESewaImage` is a React component that handles lazy-loading, error handling, and image preview in a modal. It provides functionality for images to be lazy-loaded when they enter the viewport, with a fallback image in case of error. It also allows the user to click on the image to open a larger preview in a modal.
+
+## Features:
+- **Lazy Loading**: Image is loaded only when it is about to enter the viewport.
+- **Error Handling**: If the image fails to load, a fallback image is used.
+- **Image Preview**: Clicking the image opens it in a modal view.
+- **Customizable Styles**: Customize the width, height, and className of the image.
+
+```tsx
+import { ESewaImage } from './esewa-ui-library'
+
+<ESewaImage
+  src="https://example.com/image.jpg"        // The source URL for the image
+  alt="Description of the image"             // Alt text for accessibility
+  width="300"                                // Image width (can be string or number)
+  height="200"                               // Image height (can be string or number)
+  loading="lazy"                             // Lazy loading option (default is 'lazy')
+  className="custom-class"                   // Optional custom class for styling
+  fallbackSrc="https://example.com/fallback.jpg"  // Fallback image URL
+/>
+```
+
+## Props
+
+The `ESewaImage` component accepts the following props:
+
+| Prop            | Type                                  | Default Value     | Description                                                                 |
+|-----------------|---------------------------------------|-------------------|-----------------------------------------------------------------------------|
+| `src`           | `string`                              | `fallbackImage`   | The URL of the image to be displayed.                                       |
+| `alt`           | `string`                              | `https://`         | The alt text for the image (for accessibility).                             |
+| `width`         | `string | number`                      | -                 | The width of the image (can be a string like `'300px'` or a number like `300`). |
+| `height`        | `string | number`                      | -                 | The height of the image (can be a string like `'200px'` or a number like `200`). |
+| `className`     | `string`                              | -                 | Optional custom CSS class for styling the image.                            |
+| `fallbackSrc`   | `string`                              | `fallbackImage`   | The URL for the fallback image if the primary image fails to load.          |
+| `loading`       | `'lazy' | 'eager'`                      | `'lazy'`          | Determines the image loading strategy: `'lazy'` or `'eager'`.               |
+
+
+# ESewaInputField Component
+
+`ESewaInputField` is a customizable and reusable input field component for React. It supports various types of input fields (text, password, number, email, etc.) and comes with built-in validation messaging, styling, and accessibility features.
+
+## Usage
+
+You can use the `ESewaInputField` component in your React application by following the steps below.
+
+### Basic Usage
+
+```tsx
+import React, { useState } from 'react';
+import { ESewaInputField } from './esewa-ui-library'
+
+const MyComponent = () => {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleChange = (e) => {
+    setInputValue(e.target.value);
+  };
+
+  return (
+    <ESewaInputField
+      type="text"
+      label="Username"
+      name="username"
+      value={inputValue}
+      onChange={handleChange}
+      placeholder="Enter your username"
+      required
+      validationMessage="Username is required"
+    />
+  );
+};
+
+export default MyComponent;
+```
+
+## Props
+
+The `ESewaInputField` component accepts the following props:
+
+| Prop               | Type                                                      | Default       | Description                                                                                                                                                                                                                              |
+|--------------------|-----------------------------------------------------------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `id`               | `string`                                                  | `undefined`   | A unique identifier for the input field.                                                                                                                                                                                                  |
+| `type`             | `'text' | 'password' | 'number' | 'email' | 'date' | 'checkbox' | 'radio' | 'select' | 'textarea'` | `'text'`      | The type of the input field.                                                                                                                                                                                                           |
+| `name`             | `string`                                                  | `undefined`   | The name of the input field, used for form submissions.                                                                                                                                                                                    |
+| `label`            | `string`                                                  | `undefined`   | The label to display next to the input field.                                                                                                                                                                                              |
+| `placeholder`      | `string`                                                  | `undefined`   | The placeholder text displayed in the input field when it is empty.                                                                                                                                                                      |
+| `value`            | `string | number`                                         | `undefined`   | The current value of the input field.                                                                                                                                                                                                     |
+| `checked`          | `boolean`                                                 | `undefined`   | Specifies whether the checkbox or radio button is checked (only applicable for `checkbox` and `radio` types).                                                                                                                             |
+| `pattern`          | `string`                                                  | `undefined`   | A regular expression that the input value must match (useful for email, password, etc.).                                                                                                                                                  |
+| `min`              | `number`                                                  | `undefined`   | The minimum value for `number`, `date`, or `range` input types.                                                                                                                                                                        |
+| `max`              | `number`                                                  | `undefined`   | The maximum value for `number`, `date`, or `range` input types.                                                                                                                                                                        |
+| `step`             | `number`                                                  | `undefined`   | The step value for `number`, `date`, or `range` input types.                                                                                                                                                                            |
+| `required`         | `boolean`                                                 | `false`       | If `true`, the input field is required to be filled out before form submission.                                                                                                                                                           |
+| `readOnly`         | `boolean`                                                 | `false`       | If `true`, the input field is read-only, meaning the user cannot modify the value.                                                                                                                                                          |
+| `disabled`         | `boolean`                                                 | `false`       | If `true`, the input field is disabled, preventing user interaction.                                                                                                                                                                     |
+| `className`        | `string`                                                  | `''`          | A custom class name to apply to the input field's container.                                                                                                                                                                            |
+| `validationMessage`| `string`                                                  | `undefined`   | A validation message that is displayed when the input is invalid or doesn't meet the specified requirements.                                                                                                                              |
+| `autoFocus`        | `boolean`                                                 | `false`       | If `true`, the input field will automatically receive focus when the component is rendered.                                                                                                                                               |
+| `onChange`         | `(e: React.ChangeEvent<HTMLInputElement>) => void`         | `undefined`   | A callback function that is called when the input value changes. The `onChange` function receives the change event as an argument.                                                                                                      |
+
+### Notes:
+- Some props are type-dependent. For example, `min`, `max`, and `step` are only relevant for `number`, `range`, or `date` input types.
+- The `required`, `readOnly`, and `disabled` props affect user interaction with the input field.
+- You can pass any additional attributes via the `rest` prop, which will be spread onto the underlying `<input>` element.
+
+
+# ESewaInputFeildTextArea Component
+
+The `ESewaInputFeildTextArea` component is a styled text area input field with customizable properties for labels, validation, and more. It provides a clean and consistent design for text area fields in React applications.
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { ESewaInputFeildTextArea } from './esewa-ui-library'
+
+const Example = () => {
+  const [value, setValue] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <ESewaInputFeildTextArea
+      label="Your Message"
+      value={value}
+      onChange={handleChange}
+      placeholder="Enter your message here"
+      required
+      validationMessage="Message is required"
+    />
+  );
+};
+```
+
+With maxLength and rows
+
+```tsx
+import { ESewaInputFeildTextArea } from './esewa-ui-library'
+
+const Example = () => {
+  const [value, setValue] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <ESewaInputFeildTextArea
+      label="Your Feedback"
+      value={value}
+      onChange={handleChange}
+      placeholder="Enter your feedback here"
+      maxLength={200}
+      rows={5}
+      required
+      validationMessage="Feedback is required"
+    />
+  );
+};
+```
+
+In this example, the ESewaInputFeildTextArea is used with a label, value, onChange, placeholder, and optional maxLength and rows properties. You can customize the component further as needed based on the provided props.
+
+## Props
+
+| Name              | Type                              | Default     | Description                                                                 |
+|-------------------|-----------------------------------|-------------|-----------------------------------------------------------------------------|
+| `name`            | `string`                          | -           | The name of the textarea element.                                            |
+| `label`           | `string`                          | -           | The label text that is displayed above the textarea.                         |
+| `placeholder`     | `string`                          | -           | The placeholder text that appears when the textarea is empty.                |
+| `value`           | `string \| number`                | -           | The current value of the textarea.                                           |
+| `maxLength`       | `number`                          | -           | The maximum number of characters allowed in the textarea.                    |
+| `required`        | `boolean`                         | `false`     | If `true`, the textarea becomes required when submitting the form.            |
+| `readOnly`        | `boolean`                         | `false`     | If `true`, the textarea is set to read-only.                                 |
+| `disabled`        | `boolean`                         | `false`     | If `true`, the textarea is disabled and cannot be interacted with.           |
+| `className`       | `string`                          | -           | Additional CSS class name(s) for custom styling.                            |
+| `rows`            | `number`                          | `3`         | Defines the number of visible rows for the textarea.                         |
+| `validationMessage`| `string`                         | -           | An optional message to display when validation fails.                        |
+| `onChange`        | `(e: ChangeEvent<HTMLTextAreaElement>) => void` | -   | Event handler function for handling text input changes.                     |
+
+
+# ESewaMultiSelect Component
+
+The `ESewaMultiSelect` component is a customizable multi-select dropdown component built using React and styled-components. It allows users to select multiple options from a list, with a search feature and customizable styles.
+
+## Usage
+
+To use the `ESewaMultiSelect` component in your React project, follow these steps:
+
+### 1. Import the Component
+
+First, import the `ESewaMultiSelect` component in your React file:
+
+### 2.Define Options and State
+Create an array of options that will be displayed in the multi-select dropdown. You also need to set up state to handle the selected items.
+
+```tsx
+const [selectedItems, setSelectedItems] = useState([])
+
+const options = [
+  { value: '1', label: 'Option 1' },
+  { value: '2', label: 'Option 2' },
+  { value: '3', label: 'Option 3' },
+  { value: '4', label: 'Option 4' }
+]
+```
+
+### 3. Handle Selection Changes
+Define a handler function that will be called whenever the selection changes.
+
+const handleChange = (selected: Option[]) => {
+setSelectedItems(selected)
+}
+
+### 4. Render the Component
+Now you can render the ESewaMultiSelect component and pass in the necessary props:
+
+```tsx
+<ESewaMultiSelect
+  options={options}
+  onChange={handleChange}
+  placeholder="Select options"
+/>
+```
+
+### 5. Display Selected Items
+```tsx
+<div>
+  <h3>Selected Items</h3>
+  <ul>
+    {selectedItems.map(item => (
+      <li key={item.value}>{item.label}</li>
+    ))}
+  </ul>
+</div>
+```
+
+### Full Example
+
+```tsx
+import React, { useState } from 'react'
+import { ESewaMultiSelect } from './esewa-ui-library'
+
+const MyComponent = () => {
+  const [selectedItems, setSelectedItems] = useState([])
+
+  const options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+    { value: '4', label: 'Option 4' }
+  ]
+
+  const handleChange = (selected: Option[]) => {
+    setSelectedItems(selected)
+  }
+
+  return (
+    <div>
+      <ESewaMultiSelect
+        options={options}
+        onChange={handleChange}
+        placeholder="Select options"
+      />
+      <div>
+        <h3>Selected Items</h3>
+        <ul>
+          {selectedItems.map(item => (
+            <li key={item.value}>{item.label}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+```
+
+# ESewaSelectNative Component
+
+The `ESewaSelectNative` is a customizable `select` dropdown component built with React and styled using `styled-components`. It provides a native `select` element with additional features such as labels, validation messages, and optional full-width styling.
+
+## Usage
+
+Here is an example of how to use the `ESewaSelectNative` component in your React application:
+
+```tsx
+import React, { useState } from 'react';
+import { ESewaSelectNative } from './esewa-ui-library'
+
+const ExampleComponent = () => {
+  const [selectedValue, setSelectedValue] = useState<string>('');
+
+  const handleSelectChange = (value: string) => {
+    setSelectedValue(value);
+  };
+
+  const options = [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3' }
+  ];
+
+  return (
+    <div>
+      <ESewaSelectNative
+        label="Select an Option"
+        placeholder="Choose an option"
+        options={options}
+        value={selectedValue}
+        onChange={handleSelectChange}
+        required
+        fullwidth
+      />
+    </div>
+  );
+};
+```
+
+## Props
+
+| Name                | Type               | Default   | Description                                                                 |
+|---------------------|--------------------|-----------|-----------------------------------------------------------------------------|
+| `options`           | `Options[]`         | `[]`      | An array of objects representing the available options in the dropdown.     |
+| `placeholder`       | `string`            | `''`      | Placeholder text shown when no option is selected.                          |
+| `onChange`          | `(value: string) => void` | `() => {}` | A callback function triggered when an option is selected.                   |
+| `label`             | `string`            | `undefined` | The label displayed above the dropdown.                                     |
+| `value`             | `string`            | `undefined` | The currently selected value in the dropdown.                               |
+| `disabled`          | `boolean`           | `false`   | If `true`, disables the dropdown.                                           |
+| `validationMessage` | `string`            | `undefined` | A validation message that is displayed below the select field.              |
+| `required`          | `boolean`           | `false`   | If `true`, marks the field as required with an asterisk.                     |
+| `fullwidth`         | `boolean`           | `false`   | If `true`, the dropdown will take the full width of its container.          |
+
+### `Options` Type
+
+Each option is represented by an object with the following properties:
+
+| Name    | Type   | Description                                            |
+|---------|--------|--------------------------------------------------------|
+| `label` | `string` | The label text displayed for the option.              |
+| `value` | `any`   | The unique value associated with the option.            |
+
+# ESewaNepaliDatepicker Component
+
+The `ESewaNepaliDatepicker` component is a React component for selecting a Nepali date using the `nepali-datepicker-reactjs` library. It allows users to select a date in Nepali format, and it also supports custom styling and locales.
+
+## Usage
+
+Here is an example of how to use the `ESewaNepaliDatepicker` component in your React application:
+
+```tsx
+import React, { useState } from 'react'
+import { ESewaNepaliDatepicker } from './esewa-ui-library'
+
+const App = () => {
+  const [date, setDate] = useState<string>('')
+
+  const handleDateChange = (newDate: string) => {
+    setDate(newDate)
+  }
+
+  return (
+    <div>
+      <ESewaNepaliDatepicker
+        label="Select Nepali Date"
+        value={date}
+        onChange={handleDateChange}
+        calenderLocale="ne"  // You can use 'en' for English or 'ne' for Nepali locale
+      />
+    </div>
+  )
+}
+
+export default App
+```
+
+### Props
+
+The `ESewaNepaliDatepicker` component accepts the following props:
+
+| Prop Name        | Type                               | Description                                                                                                                                               | Default Value  |
+|------------------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|----------------|
+| `label`          | `string`                           | The label text to display above the date picker.                                                                                                           | `undefined`    |
+| `className`      | `string`                           | Custom class name to apply custom styles to the date picker component.                                                                                   | `undefined`    |
+| `value`          | `string`                           | The current date value in the form of a string.                                                                                                            | `undefined`    |
+| `onChange`       | `(val: string) => void`            | Callback function that is triggered when the selected date changes. It receives the selected date as a string.                                             | `undefined`    |
+| `calenderLocale` | `'en' | 'ne'`                      | The locale of the calendar. Use `'en'` for the English calendar or `'ne'` for the Nepali calendar.                                                        | `'en'`         |
+
+### Example
+
+```tsx
+<ESewaNepaliDatepicker
+  label="Select Nepali Date"
+  value={date}
+  onChange={handleDateChange}
+  calenderLocale="ne"
+/>
+```
+
+# ESewaRadio Component
+
+The `ESewaRadio` component is a customizable radio button with a label, styled using `styled-components`. It supports the necessary props for usage in forms and customizable styling.
+
+## 2. Using the Component
+
+After importing the `ESewaRadio` component, you can use it in your React components by passing the necessary props. Below is an example of how to use the radio button:
+
+### Example Usage
+
+```tsx
+import React, { useState } from 'react';
+import { ESewaRadio } from './esewa-ui-library'
+
+const MyComponent = () => {
+  const [isChecked, setChecked] = useState(false);
+
+  return (
+    <div>
+      <ESewaRadio
+        label="Accept Terms and Conditions"
+        name="terms"
+        checked={isChecked}
+        onChange={(checked) => setChecked(checked)}
+      />
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+## Explanation of Props
+
+The `ESewaRadio` component accepts the following props:
+
+### `label`
+- **Type:** `string`
+- **Required:** No
+- **Description:** This prop is used to display the label next to the radio button. It is an optional prop and can be omitted if no label is needed.
+
+```tsx
+<ESewaRadio label="Accept Terms and Conditions" ... />
+```
+## Props
+
+The `ESewaRadio` component accepts the following props:
+
+| Prop        | Type                          | Required | Default Value | Description                                                                                      |
+|-------------|-------------------------------|----------|---------------|--------------------------------------------------------------------------------------------------|
+| `label`     | `string`                       | No       | `undefined`   | The label displayed next to the radio button.                                                     |
+| `name`      | `string`                       | Yes      | N/A           | The name of the radio button, which groups it together with other radio buttons.                  |
+| `onChange`  | `(checked: boolean) => void`   | No       | `undefined`   | Callback function that is triggered when the radio button's checked state changes.               |
+| `checked`   | `boolean`                      | Yes      | false   | Determines whether the radio button is selected (`true`) or not (`false`).                       |
+| `labelClass`| `string`                       | No       | `''`          | A custom class applied to the label element for styling.                                          |
+| `className` | `string`                       | No       | `''`          | A custom class applied to the root wrapper element of the radio button component.                |
+| `disabled`  | `boolean`                      | No       |  false        | Used to disable radio state                                                                 |
+
+# ESewaSanitizeHtml Component
+
+The `ESewaSanitizeHtml` component sanitizes HTML content before rendering it in a React component. It ensures that the HTML content is safe and free from malicious code by using the `DOMPurify` library.
+
+## Usage
+
+To use the `ESewaSanitizeHtml` component, simply pass the raw HTML content as the `html` prop. The component will sanitize the content to ensure it is safe for rendering.
+
+### Example:
+
+```tsx
+import React from 'react'
+import { ESewaSanitizeHtml } from './esewa-ui-library'
+
+const MyComponent = () => {
+  const rawHtml = '<p style="color:red">This is <b>sanitized</b> HTML content.</p>'
+  
+  return (
+    <div>
+      <h1>Sanitized HTML Example</h1>
+      <ESewaSanitizeHtml html={rawHtml} />
+    </div>
+  )
+}
+
+export default MyComponent
+```
+
+### In this example:
+
+- **rawHtml**: A string containing raw HTML content, including styles and tags such as `<p>` and `<b>`.
+- **ESewaSanitizeHtml component**: The component receives the `html` prop (in this case, `rawHtml`) and sanitizes it using `DOMPurify`.
+- **Sanitized HTML**: The sanitized HTML content is rendered inside a `div` element, using the `dangerouslySetInnerHTML` property.
+
+By passing the raw HTML to the component, it ensures that any potentially harmful content (like JavaScript or malicious code) is removed, making the content safe to render on the page.
+
+### Props
+
+| Prop    | Type                  | Description                                                                 |
+|---------|-----------------------|-----------------------------------------------------------------------------|
+| `html`  | `string | undefined` | The raw HTML string that needs to be sanitized. It can be `undefined` as well. |
+
+#### Prop Descriptions
+
+- **html**: This is the raw HTML content that you want to sanitize before rendering. It should be a string, and you can optionally pass `undefined` if no HTML is available to render.
+
+# ESewaSkeleton Component
+
+The `ESewaSkeleton` component provides a customizable skeleton loader UI. It is often used as a placeholder while content is loading or being fetched asynchronously. The skeleton loader can be customized to appear as a rectangle or a circle and can be styled with different dimensions.
+
+### Example Usage
+
+```tsx
+import React, { useState, useEffect } from 'react'
+import { ESewaSkeleton } from './esewa-ui-library'
+
+const YourComponent = () => {
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false)
+    }, 2000) // Simulating an API call
+  }, [])
+
+  return (
+    <div>
+      <ESewaSkeleton loading={loading} width="200px" height="20px">
+        <div>Content is loaded</div>
+      </ESewaSkeleton>
+    </div>
+  )
+}
+```
+
+### Props
+
+| Name      | Type         | Default      | Description                                             |
+|-----------|--------------|--------------|---------------------------------------------------------|
+| `loading` | `boolean`    | `false`      | Determines if the skeleton should be shown.             |
+| `width`   | `string`     | `100%`       | Defines the width of the skeleton.                      |
+| `height`  | `string`     | `20px`       | Defines the height of the skeleton.                     |
+| `circle`  | `boolean`    | `false`      | Makes the skeleton circular (applies border-radius 50%). |
+| `className` | `string`   | `''`         | Additional class names for styling.                     |
+| `children` | `React.ReactNode` | `undefined` | Content to render when `loading` is false.              |
+
+
+## ESewaTag Component
+
+The `ESewaTag` component is a flexible and customizable tag component used to display status labels, notifications, or simple tags with optional icons.
+
+### Usage
+
+```tsx
+import React from 'react'
+import { ESewaTag } from './esewa-ui-library'
+import { FaCheckCircle } from 'react-icons/fa'
+
+const YourComponent = () => {
+  const handleTagClick = () => {
+    console.log('Tag clicked!')
+  }
+
+  return (
+    <div>
+      <ESewaTag
+        text="Success Tag"
+        icon={<FaCheckCircle />}
+        variant="success"
+        iconPosition="start"
+        size="normal"
+        onClick={handleTagClick}
+      />
+      
+      <ESewaTag
+        text="Warning Tag"
+        variant="warning"
+        size="small"
+        onClick={handleTagClick}
+      />
+    </div>
+  )
+}
+```
+
+
+### Props
+
+| Name           | Type                 | Default       | Description                                                                 |
+|----------------|----------------------|---------------|-----------------------------------------------------------------------------|
+| `text`         | `string`             | -             | The text content to display inside the tag.                                  |
+| `icon`         | `string` | `React.ReactNode`    | `undefined`   | An optional icon to display alongside the text.                              |
+| `variant`      | `'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info'` | `'primary'` | Defines the tag's color scheme. Available variants: `primary`, `secondary`, `danger`, `success`, `warning`, `info`. |
+| `iconPosition` | `'start' | 'end'`     | `'start'`     | Defines the position of the icon. Choose between `start` (before text) or `end` (after text). |
+| `size`         | `'normal' | 'small'`  | `'normal'`    | Defines the size of the tag. Available sizes: `normal`, `small`.              |
+| `onClick`      | `() => void`         | `undefined`   | A function to be triggered when the tag is clicked.                          |
+
+
+## Tooltip Component
+
+The `Tooltip` component provides an interactive tool-tip feature, displaying additional information when hovering over a target element. It is highly customizable, allowing the user to control the position of the tooltip and its appearance.
+
+### Features
+
+- **Positioning**: Tooltips can be displayed on the top, bottom, left, or right of the target element.
+- **Transitions**: Smooth fade-in and fade-out effect with controlled visibility and opacity transitions.
+- **Customization**: Easily customizable styles with CSS variables and positioning options.
+
+### Example Usage
+
+```tsx
+import React, { useState } from 'react'
+import { ESewaTooltip } from './esewa-ui-library'
+
+const TooltipExample = () => {
+
+  return (
+    <ESewaTooltip content='Tooltip on click' position='bottom'>
+      <button>Click Me</button>
+    </ESewaTooltip>
+  )
+}
+
+export default TooltipExample
+```
+
+### Props
+
+| Name             | Type        | Default    | Description                                                        |
+|------------------|-------------|------------|--------------------------------------------------------------------|
+| `position`       | `'top' | 'bottom' | 'left' | 'right'` | `'top'` | Determines where the tooltip will appear in relation to the target element. Available positions: `top`, `bottom`, `left`, `right`. |
+| `content`        | `string`    | -          | The content/text to display inside the tooltip.                     |
+| `target`         | `React.ReactNode` | - | The target element which will trigger the tooltip. |
+| `delay`          | `number`    | `0`        | The delay in milliseconds before the tooltip becomes visible. |
+| `className`      | `string`    | `''`       | Additional class names for styling or overriding default styles. |
+
+### CSS Custom Variables
+
+- `--secondary`: Defines the background color of the tooltip.
+- `--white`: Defines the text color of the tooltip.
+
+
+### Providers
+
+- **ThemeProvider**: `ThemeProvider`
+
+Wrap your component with this provider to apply theme.
+
+```tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { ESewaThemeProvider } from 'esewa-ui-library'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ESewaThemeProvider>
+        <App />
+    </ESewaThemeProvider>
+  </StrictMode>,
+)
+
+```
+
+In your page
+
+```tsx
+import { useEffect, useState } from "react";
+import {
+  MoonIcon,
+  SunIcon,
+} from "@heroicons/react/24/outline";
+
+const [darkMode, setDarkMode] = useState<boolean>(
+  window.matchMedia('(prefers-color-scheme: dark)').matches
+);
+
+const handleThemeToggle = () => {
+  setDarkMode((prevMode) => !prevMode);
+};
+
+useEffect(() => {
+  const theme = darkMode ? 'dark' : 'light';
+  document.documentElement.setAttribute('data-theme', theme);
+}, [darkMode]);
+
+<button
+  onClick={handleThemeToggle}
+>
+  {darkMode ? (
+    <SunIcon className="h-6 w-6" />
+  ) : (
+    <MoonIcon className="h-6 w-6" />
+  )}
+</button>
+
+```
+
+- **ESewaProvider**: `ESewaProvider`
+
+Wrap your component with this provider.
+
+```tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { ESewaProvider } from 'esewa-ui-library'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ESewaProvider>
+        <App />
+    </ESewaProvider>
+  </StrictMode>,
+)
+
+```
+
+then you can use useESewaDataProvider
+
+```tsx
+import { ESewaAppBar, useESewaDataProvider } from 'esewa-ui-library';
+
+const App = () => {
+  const { updateData } = useESewaDataProvider();
+
+  useEffect(() => {
+      updateData({
+        title: "Merchant Product Form",
+      });
+    }, []);
+
+  return (
+    <ESewaAppBar 
+      icon="icon-es-arrow-left"
+      titleposition="left"
+      onBackIconClick={() => console.log('Back icon clicked')}
+      onTitleClick={() => console.log('Title clicked')}
+      onActionIconClick={() => console.log('Action icon clicked')}
+      actionIcon="icon-settings"
+    />
+  );
+};
+
+export default App;
+
+```
+
+
+- **ESewaPaymentProvider**: `ESewaPaymentProvider`
+
+# Services
+
+## Overview
+
+This library provides a set of services that allow interaction between the merchant app and the host application. These services include authentication, location access, user detail retrieval, media access, and transaction validation.
+
+## Table of Contents
+
+- [Initialization](#initialization)
+- [Service Requests](#service-requests)
+    - [Location Request](#location-request)
+    - [User Detail Request](#user-detail-request)
+    - [Media Access Request](#media-access-request)
+    - [Validate Payment](#validate-payment)
+    - [Request Payment](#request-payment)
+    - [Close App](#close-app)
+    - [Get Product](#get-product)
+    - [Validate User](#validate-user)
+    - [Merchant Detail](#merchant-detail)
+    - [QR Scanner Request](#qr-scanner-request)
+    - [Request File Download](#request-file-download)
+- [Error Handling](#error-handling)
+
+## Initialization
+
+Before the app loads, it must be initialized to obtain authentication credentials.
+
+### Usage
+
+```tsx
+useEffect(() => {
+    const saveAuthData = (res: { token?: string; scope?: any }): void => {
+      if (!res?.token) {
+        console.warn('Token is missing, skipping storage');
+        return;
+      }
+      sessionStorage.setItem('miniAppAuthToken', res.token);
+      sessionStorage.setItem('miniAppAuthScope', JSON.stringify(res.scope || {}));
+    };
+
+    const initAppCallback = (data: any) => {
+      try {
+        if (!data) {
+          throw new Error('Received null or undefined response');
+        }
+        const res = JSON.parse(data);
+        if (!res || typeof res !== 'object') {
+          throw new Error('Parsed response is not a valid object');
+        }
+        if (res?.error_message) {
+          return;
+        }
+        saveAuthData(res);
+      } catch (error) {
+        console.error('Error parsing response:', error);
+      }
+    };
+
+    const requestData = {
+      merchant_identifier: 'IAAAAABTOBAbFhAXHhEHAgoXX0FRR1FJJiw3LCwkJzE=', //your identifier key
+      requestType: REQUEST_TYPE_ENUM.INIT_APP,
+      callbackKey: CALLBACK_TYPE_ENUM.INIT_APP_CALLBACK
+    };
+
+    requestFromMiniApp(requestData, initAppCallback);
+}, []);
+```
+
+### Response Examples
+
+#### Success
+
+```json
+{
+    "token": "SEdcRFVePhYfCRtQJhEiATA8DyVWFFA7Dw8UBEAKH1IkLFwYJAUxPgI%3D",
+    "scope": [
+        "USER_DETAIL_ACCESS",
+        "LOCATION_ACCESS",
+        "MEDIA_ACCESS"
+    ]
+}
+```
+
+#### Error
+
+```json
+{
+    "error_message": "Service is currently unavailable."
+}
+```
+
+## Service Requests
+Merchants can only request services that are included in their granted scope. Before making a request, ensure the service type exists in scope.
+
+#### Location Request
+
+Pass the token received from initialization to request location access.
+
+```tsx
+const onLocationRequestClick = () => {
+    const obj: REQUEST_DATA_TYPE = {
+      requestType: REQUEST_TYPE_ENUM.LOCATION_ACCESS,
+      token: sessionStorage.getItem('miniAppAuthToken'),
+      callbackKey: CALLBACK_TYPE_ENUM.LOCATION_ACCESS_CALLBACK
+    }
+
+    const locationAccessCallBack: any = (data: any) => {
+      console.log('Location Access Response:', data)
+
+      try {
+        if (!data) {
+          throw new Error('Received null or undefined response')
+        }
+        const res = JSON.parse(data)
+        if (!res || typeof res !== 'object') {
+          throw new Error('Parsed response is not a valid object')
+        }
+        if (res?.error_message) {
+          throw new Error('Error res', res.error_message)
+        }
+        setLocationDetail(res) //use this response as needed
+      } catch (error) {
+        console.error('Error parsing response:', error)
+      }
+    }
+
+    requestFromMiniApp(
+      obj,
+      locationAccessCallBack
+    )
+  }
+```
+
+#### User Detail Request
+
+```tsx
+const onUserDetailRequestClick = () => {
+    const obj = {
+      requestType: REQUEST_TYPE_ENUM.USER_DETAIL_ACCESS,
+      token: sessionStorage.getItem('miniAppAuthToken'),
+      merchant_identifier: 'IAAAAABTOBAbFhAXHhEHAgoXX0FRR1FJJiw3LCwkJzE=',
+      callbackKey: CALLBACK_TYPE_ENUM.USER_DETAIL_ACCESS_CALLBACK
+    };
+
+    const userDetailAccessCallBack = (data: any) => {
+      try {
+        if (!data) throw new Error('Received null or undefined response');
+        const res = JSON.parse(data);
+        if (res?.error_message) throw new Error(res.error_message);
+        setUserDetail(res);
+      } catch (error) {
+        console.error('Error parsing response:', error);
+      }
+    };
+
+    requestFromMiniApp(obj, userDetailAccessCallBack);
+};
+```
+
+#### Media Access Request
+
+```tsx
+const onMediaAccessRequestClick = () => {
+    const obj = {
+      requestType: REQUEST_TYPE_ENUM.MEDIA_ACCESS,
+      token: sessionStorage.getItem('miniAppAuthToken'),
+      callbackKey: CALLBACK_TYPE_ENUM.MEDIA_ACCESS_CALLBACK
+    };
+
+    const mediaAccessCallBack = (data: any) => {
+      try {
+        if (!data) throw new Error('Received null or undefined response');
+        const res = data;
+        if (res?.error_message) throw new Error(res.error_message);
+        setMediaDetail(res);
+      } catch (error) {
+        console.error('Error parsing response:', error);
+      }
+    };
+
+    requestFromMiniApp(obj, mediaAccessCallBack);
+};
+```
+
+#### Validate Payment
+Pass token received from initialize request call with respective request type and callback key
+
+```tsx
+const onValidateTransactionClick = () => {
+    const obj = {
+      requestType: REQUEST_TYPE_ENUM.VALIDATE_TRANSACTION,
+      token: sessionStorage.getItem('miniAppAuthToken'),
+      callbackKey: CALLBACK_TYPE_ENUM.VALIDATE_TRANSACTION_CALLBACK
+    };
+
+    const validateTransactionCallBack = (data: any) => {
+      try {
+        if (!data) throw new Error('Received null or undefined response');
+        const res = JSON.parse(data);
+        if (res?.error_message) throw new Error(res.error_message);
+        setTransactionValidateRes(res);
+      } catch (error) {
+        console.error('Error parsing response:', error);
+      }
+    };
+
+    requestFromMiniApp(obj, validateTransactionCallBack);
+};
+```
+#### Request Payment
+Pass token received from initialize request call with respective request type, callback key , your merchant identifier and request payload
+
+```tsx
+const onRequestPaymentClick = () => {
+    const productPayload = {
+        "product_code": "NP-ES-VIANET",
+        "amount": 28.48,
+        "properties": {
+            "productId": "3299",
+            "payment_id": "1613103_PP",
+            "refId": "400005",
+            "customer_id": "48707",
+            "payer": "CUSTOMER"
+        },
+        "channel": "WEB_USER"
+    };
+
+    const obj = {
+      requestType: REQUEST_TYPE_ENUM.REQUEST_PAYMENT,
+      merchant_identifier: 'IAAAAABTOBAbFhAXHhEHAgoXX0FRR1FJJiw3LCwkJzE=',
+      token: sessionStorage.getItem('miniAppAuthToken'),
+      data: productPayload,
+      callbackKey: CALLBACK_TYPE_ENUM.REQUEST_PAYMENT_CALLBACK
+    };
+
+    const requestPaymentCallBack: any = (data:any) => {
+      console.log("Make payment Response:", data);
+
+      try {
+        if (!data) {
+          throw new Error('Received null or undefined response');
+        }
+        const res = JSON.parse(data);
+
+        if (!res || typeof res !== 'object') {
+          throw new Error('Parsed response is not a valid object');
+        }
+
+        if (res?.error_message) {
+          throw new Error('Error res', res.error_message);
+        }
+
+        setMakePaymentRes(res);
+      } catch (error) {
+        console.error('Error parsing response:', error);
+      }
+    };
+
+    requestFromMiniApp(obj, requestPaymentCallBack);
+};
+```
+
+#### Close App
+
+Pass the following to close the app.
+
+```tsx
+const onCloseRequestClick = () => {
+    const obj: REQUEST_DATA_TYPE = {
+      requestType: REQUEST_TYPE_ENUM.CLOSE_APP,
+      callbackKey: CALLBACK_TYPE_ENUM.CLOSE_APP_CALLBACK
+    }
+
+    requestFromMiniApp(
+      obj
+    )
+  }
+```
+
+#### Get Product Request
+
+  ```tsx
+  const onGetProductClick = () => {
+      const obj = {
+        requestType: REQUEST_TYPE_ENUM.GET_PRODUCT,
+        token: sessionStorage.getItem('miniAppAuthToken'),
+        callbackKey: CALLBACK_TYPE_ENUM.GET_PRODUCT_CALLBACK
+      };
+
+      const getProductCallBack = (data: any) => {
+        try {
+          if (!data) throw new Error('Received null or undefined response');
+          const res = JSON.parse(data);
+          if (res?.error_message) throw new Error(res.error_message);
+          setProduct(res);
+        } catch (error) {
+          console.error('Error parsing response:', error);
+        }
+      };
+
+      requestFromMiniApp(obj, getProductCallBack);
+  };
+  ```
+
+#### Validate User Request
+
+  ```tsx
+  const onValidateUserClick = () => {
+      const obj = {
+        requestType: REQUEST_TYPE_ENUM.VALIDATE_USER,
+        token: sessionStorage.getItem('miniAppAuthToken'),
+        callbackKey: CALLBACK_TYPE_ENUM.VALIDATE_USER_CALLBACK,
+        data: {
+          esewa_id: 9847474747
+        }
+      };
+
+      const validateUserCallBack = (data: any) => {
+        try {
+          if (!data) throw new Error('Received null or undefined response');
+          const res = JSON.parse(data);
+          if (res?.error_message) throw new Error(res.error_message);
+          setProduct(res);
+        } catch (error) {
+          console.error('Error parsing response:', error);
+        }
+      };
+
+      requestFromMiniApp(obj, validateUserCallBack);
+  };
+  ```
+
+#### Merchant Detail Request
+
+  ```tsx
+  const onMerchantDetailClick = () => {
+      const obj = {
+        requestType: REQUEST_TYPE_ENUM.MERCHANT_DETAIL,
+        token: sessionStorage.getItem('miniAppAuthToken'),
+        callbackKey: CALLBACK_TYPE_ENUM.MERCHANT_DETAIL_CALLBACK
+      };
+
+      const merchantDetailCallBack = (data: any) => {
+        try {
+          if (!data) throw new Error('Received null or undefined response');
+          const res = JSON.parse(data);
+          if (res?.error_message) throw new Error(res.error_message);
+          setProduct(res);
+        } catch (error) {
+          console.error('Error parsing response:', error);
+        }
+      };
+
+      requestFromMiniApp(obj, merchantDetailCallBack);
+  };
+  ```
+
+#### QR Scanner Request
+
+  ```tsx
+  const onQrScannerClick = () => {
+      const obj = {
+        requestType: REQUEST_TYPE_ENUM.QR_SCANNER_ACCESS,
+        token: sessionStorage.getItem('miniAppAuthToken'),
+        callbackKey: CALLBACK_TYPE_ENUM.QR_SCANNER_ACCESS_CALLBACK
+      };
+
+      const qrScannerCallBack = (data: any) => {
+        try {
+          if (!data) throw new Error('Received null or undefined response');
+          const res = JSON.parse(data);
+          if (res?.error_message) throw new Error(res.error_message);
+          setProduct(res);
+        } catch (error) {
+          console.error('Error parsing response:', error);
+        }
+      };
+
+      requestFromMiniApp(obj, qrScannerCallBack);
+  };
+  ```
+
+#### Request File Download
+
+Pass the following to request file download.
+
+**1. Link Type file download request**
+
+    const onPdfDownloadRequestClick = () => {
+        const obj: REQUEST_DATA_TYPE = {
+          requestType: REQUEST_TYPE_ENUM.FILE_DOWNLOAD_ACCESS,
+          callbackKey: CALLBACK_TYPE_ENUM.FILE_DOWNLOAD_ACCESS_CALLBACK,
+          data: {
+            fileName: 'Statement-2025.pdf',
+            type: 'url',
+            content: 'https://www.aeee.in/wp-content/uploads/2020/08/Sample-pdf.pdf' //pass file url
+          }
+        }
+
+        const fileDownloadCallBack: any = (data: any) => {
+          try{
+            if (!data) {
+              throw new Error('Received null or undefined response')
+            }
+            const res = data
+            if (res?.error_message) { //fail case
+              throw new Error('Error res', res.error_message)
+            }
+            else{
+              console.log(res.message) //success case
+            }
+          }
+          catch (error) {
+            console.error('Error parsing response:', error)
+          }
+        }
+
+        requestFromMiniApp(
+          obj,
+          fileDownloadCallBack
+        )
+      }
+
+**2. Base64 Encoded Type file download request**
+
+    const onPdfDownloadRequestClick = () => {
+        const response = await fetch('/base64.txt');
+        const content = await response.text(); //encoded pdf content/response from api
+        let base64Content = content.includes(',')
+            ? content
+            : `data:application/pdf;base64,${content}`;
+        const obj: REQUEST_DATA_TYPE = {
+          requestType: REQUEST_TYPE_ENUM.FILE_DOWNLOAD_ACCESS,
+          callbackKey: CALLBACK_TYPE_ENUM.FILE_DOWNLOAD_ACCESS_CALLBACK,
+          data: {
+            fileName: 'Statement-base64-2025.pdf',
+            type: 'base64',
+            content: base64Content
+          }
+        }
+
+        const fileDownloadCallBack: any = (data: any) => {
+          try{
+            if (!data) {
+              throw new Error('Received null or undefined response')
+            }
+            const res = data
+            if (res?.error_message) { //fail case
+              throw new Error('Error res', res.error_message)
+            }
+            else{
+              console.log(res.message) //success case
+            }
+          }
+          catch (error) {
+            console.error('Error parsing response:', error)
+          }
+        }
+
+        requestFromMiniApp(
+          obj,
+          fileDownloadCallBack
+        )
+      }
+
+## Error Handling
+
+Errors are returned as JSON responses with an `error_message` field.
+
+#### Example
+
+```json
+{
+    "error_message": "Service is currently unavailable"
+}
+```
+
+```json
+{
+    "error_message": "Merchant scope not found"
+}
+```
+---
+
+This document provides a structured approach to interacting with the MiniApp services, ensuring proper initialization and error handling for seamless integration.
+
+### Utilities
+
+- `titleCase`
+- `revertIgnoredCase`
+- `formatText`
+- `formatAmount`
+- `debounce`
+- `reverseCamelCase`
+- `reverseSnakeCase`
+
+### Types
+
+- `REQUEST_TYPE_ENUM`
+
+```tsx
+import {REQUEST_TYPE_ENUM} from 'esewa-ui-library'
+```
+
+```json
+enum REQUEST_TYPE_ENUM {
+  INIT_APP = 'INIT_APP',
+  REQUEST_PAYMENT = 'REQUEST_PAYMENT',
+  USER_DETAIL_ACCESS = 'USER_DETAIL_ACCESS',
+  MEDIA_ACCESS = 'MEDIA_ACCESS',
+  LOCATION_ACCESS = 'LOCATION_ACCESS',
+  VALIDATE_TRANSACTION = 'VALIDATE_TRANSACTION',
+  CLOSE_APP = 'CLOSE_APP',
+  FILE_DOWNLOAD_ACCESS = 'FILE_DOWNLOAD_ACCESS'
+  GET_PRODUCT = 'GET_PRODUCT',
+  VALIDATE_USER = 'VALIDATE_USER',
+  MERCHANT_DETAIL = 'MERCHANT_DETAIL',
+  QR_SCANNER_ACCESS = 'QR_SCANNER_ACCESS'
+}
+```
+
+- `CALLBACK_TYPE_ENUM`
+
+```tsx
+import {CALLBACK_TYPE_ENUM} from 'esewa-ui-library'
+```
+
+```json
+enum CALLBACK_TYPE_ENUM{
+  INIT_APP_CALLBACK = 'INIT_APP_CALLBACK',
+  REQUEST_PAYMENT_CALLBACK = 'REQUEST_PAYMENT_CALLBACK',
+  USER_DETAIL_ACCESS_CALLBACK = 'USER_DETAIL_ACCESS_CALLBACK',
+  MEDIA_ACCESS_CALLBACK = 'MEDIA_ACCESS_CALLBACK',
+  LOCATION_ACCESS_CALLBACK = 'LOCATION_ACCESS_CALLBACK',
+  VALIDATE_TRANSACTION_CALLBACK = 'VALIDATE_TRANSACTION_CALLBACK',
+  CLOSE_APP_CALLBACK = 'CLOSE_APP_CALLBACK',
+  FILE_DOWNLOAD_ACCESS_CALLBACK = 'FILE_DOWNLOAD_ACCESS_CALLBACK',
+  GET_PRODUCT_CALLBACK = 'GET_PRODUCT_CALLBACK',
+  VALIDATE_USER_CALLBACK = 'VALIDATE_USER_CALLBACK',
+  MERCHANT_DETAIL_CALLBACK = 'MERCHANT_DETAIL_CALLBACK',
+  QR_SCANNER_ACCESS_CALLBACK = 'QR_SCANNER_ACCESS_CALLBACK'
+}
+```
+
+<!-- ### Hooks
+
+- `useMessage`
+- `useSessionStorage`
+- `useDebounce` -->
+
+## Contributing
+
+Feel free to submit issues and pull requests. Make sure to follow the coding guidelines and write tests where applicable.
+
+## License
+
+This project is licensed under the MIT License.