npm package: @licuido-ui/ui_login
Description: The Login component is a reusable React component designed to provide a login interface with various login options. It offers three login options: 'emailWithPasswordLogin', socialMediaLogin', 'mobileNumberLogin','metanasSigninup' and 'metanasResetpassword
Latest version: 3.0.2

# Login

The Login component is a reusable React component designed to provide a login interface with various login options. It offers three login options: 'emailWithPasswordLogin', socialMediaLogin', 'mobileNumberLogin','metanasSigninup' and 'metanasResetpassword'.

### Author

- @author Akila K <akila@crayond.co>

## Link

[Story Book Link ErrorPage](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

### Author

- @author Akila Kalaiyarasan <akila@crayond.co>

## Link

[Story Book Link Login](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_login
```

## Import component

```jsx
import { Login } from '@licuido-ui/ui_login';
```

## Usage

```jsx
<Login
  variant='mobileNumberLogin'
  mainArea={{
    layout: {
      breakpoints: { xs: 12, md: 12, sm: 12, lg: 12 },
    },
  }}
  onSubmit={() => {
    console.log('submit');
  }}
  alt='logo'
  logoSrc={<Logo />}
  logoHeight='100%'
  logoWidth='100%'
  rootStyle={{}}
  title='Welcome!'
  description='One positive feedback per day or week can make us grow exponentially'
  titleStyle={{}}
  buttonText='Login'
  actionText="Don't have an account?"
  actionLink='Sign in'
  cardStyle={{ p: 3 }}
  onSignUpClick={() => {
    console.log('signup');
  }}
  actionStyle={{ fontSize: { xs: '12px', md: '14px', sm: '14px', lg: '14px' } }}
  actionLinkStyle={{ fontSize: { xs: '12px', md: '14px', sm: '14px', lg: '14px' } }}
  btnStyle={{}}
  mobileLabelText='Mobile Number'
  labelStyle={{}}
  mobileFieldstyle={{}}
  dropDownStyle={{}}
  numberFontSize=''
  countryCodeFontWeight=''
  contryCodefontSize=''
  divider={true}
  dividerTextStyle={{}}
  dividerStyle={{}}
  dividerText='or'
  workMailInputVariant='outlined'
  workMailLabelStyle={{}}
  workMailLabel='Work Email'
  workMailInput={true}
  footerText='Forgot Password?'
  onForgotClick={() => {
    console.log('forgot');
  }}
  footerStyle={{}}
  socialMediaList={[
    {
      label: 'SignUp with google',
      icon: <Google />,
      onSocialmediaLogin: () => {
        console.log('SignUp with google');
      },
      style: {
        textAlign: 'center',
        width: '100%',
        color: '#3B3B3B',
        fontSize: '14px',
      },
      // SocialMediaButtonStyle: { p: 1 },
    },
  ]}
  loginFieldStyle={{}}
  emailInputvariant='outlined'
  emailLabelStyle={{}}
  emailLabel='Email'
  passwordLabelStyle={{}}
  passwordLabel='Password'
  pwdInputVariant='outlined'
  invisibleIcon={<VisibilityOffOutlinedIcon />}
  visbleIcon={<VisibilityOutlinedIcon />}
  pwdFieldstyle={{}}
  variantContainerSx={{}}
  cardHeight='auto'
  cardWidth='400px'
  cardBoxShadow='0px 8px 20px #0000000A'
  cardBgColor=''
  openDialog={false}
  dialogTitle=''
  maxWidth='xs'
  dialogTitleStyle={}
  dialogSectionStyle={}
  dialogContent={<></>}
  handleAgreeClick={() => {
    console.log('agree');
  }}
  dialogButtonText=''
  handleDialogClose={() => {
    console.log('close');
  }}
  agreeButtonStyle={}
  bodyTextStyle={}
  dialogButtonVariant='outlined'
  handleOpenDialog={() => {
    console.log('open');
  }}
  handleCheckbox={() => {
    console.log('active');
  }}
  checkedValue={false}
  checkboxText=''
/>
```

## Image

![login img](./loginPageVariats.png)

## Props

| Prop Name                     | Type                                                                                                                     | Default Value                                                                                                              | Description                                          |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
| `loginId`                     | `string`                                                                                                                 | `'login'`                                                                                                                  | Unique ID for the component.                         |
| `className`                   | `string`                                                                                                                 | `''`                                                                                                                       | CSS class name for the component.                    |
| `sx`                          | `SxProps<Theme>`                                                                                                         | `{}`                                                                                                                       | Styling props using MUI's sx prop.                   |
| `onSubmit`                    | `(details: object) => void`                                                                                              | `() => undefined`                                                                                                          | Function to handle form submission.                  |
| `variant`                     | 'emailWithPasswordLogin' `or` 'socialMediaLogin'`or` 'mobileNumberLogin'`or`'metanasResetpassword' `or`'metanasSigninup' | 'emailWithPasswordLogin' `or` 'socialMediaLogin'`or` 'mobileNumberLogin' `or`'metanasSigninup' `0r` 'metanasResetpassword' | Type of login variant.                               |
| `rootStyle`                   | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the root component.                |
| `imageSection`                | `object`                                                                                                                 | See below                                                                                                                  | Configuration for the image section.                 |
| `mainArea`                    | `object`                                                                                                                 | See below                                                                                                                  | Configuration for the main area.                     |
| `alt`                         | `string`                                                                                                                 | `'Logo'`                                                                                                                   | Alt text for the logo image.                         |
| `logoSrc`                     | `string \| ReactNode`                                                                                                    | `''`                                                                                                                       | Source URL or ReactNode for the logo image.          |
| `logoHeight`                  | `string \| number`                                                                                                       | `'auto'`                                                                                                                   | Height of the logo image.                            |
| `logoWidth`                   | `string \| number`                                                                                                       | `'10px'`                                                                                                                   | Width of the logo image.                             |
| `logoStyle`                   | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the logo image.                    |
| `title`                       | `string \| any`                                                                                                          | `'Login'`                                                                                                                  | Title or JSX element for the card.                   |
| `description`                 | `string \| any`                                                                                                          | `''`                                                                                                                       | Description or JSX element for the card.             |
| `actionText`                  | `string`                                                                                                                 | `"Don't have an account?"`                                                                                                 | Text for the action link or button.                  |
| `buttonText`                  | `string`                                                                                                                 | `'Login'`                                                                                                                  | Text for the login button.                           |
| `actionLink`                  | `string`                                                                                                                 | `'Sign Up'`                                                                                                                | URL for the action link.                             |
| `onSignUpClick`               | `() => void`                                                                                                             | `() => undefined`                                                                                                          | Function to handle sign-up link click.               |
| `titleStyle`                  | `CSSProperties`                                                                                                          | `{}`                                                                                                                       | Inline styles for the title.                         |
| `btnStyle`                    | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the login button.                  |
| `cardStyle`                   | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the card component.                |
| `actionStyle`                 | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the action link.                   |
| `actionLinkStyle`             | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the action link.                   |
| `mobileLabelText`             | `string`                                                                                                                 | `'Mobile Number'`                                                                                                          | Label text for the mobile number input.              |
| `labelStyle`                  | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for labels.                            |
| `mobileFieldstyle`            | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the mobile number input field.     |
| `dropDownStyle`               | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the dropdown in mobile input.      |
| `contryCodefontSize`          | `string \| number`                                                                                                       | `'16px'`                                                                                                                   | Font size for the country code.                      |
| `countryCodeFontWeight`       | `string \| number`                                                                                                       | `'bold'`                                                                                                                   | Font weight for the country code.                    |
| `numberFontSize`              | `string \| number`                                                                                                       | `'16px'`                                                                                                                   | Font size for the mobile number input.               |
| `dividerStyle`                | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the divider.                       |
| `dividerText`                 | `string`                                                                                                                 | `'OR'`                                                                                                                     | Text for the divider.                                |
| `dividerTextStyle`            | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the divider text.                  |
| `divider`                     | `true \| false`                                                                                                          | `true`                                                                                                                     | Whether to show a divider.                           |
| `workMailInput`               | `true \| false`                                                                                                          | `true`                                                                                                                     | Whether to show the email input.                     |
| `workMailLabel`               | `string`                                                                                                                 | `'Email'`                                                                                                                  | Label for the email input.                           |
| `workMailLabelStyle`          | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the email input label.             |
| `footerStyle`                 | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the "Forgot password?" text.       |
| `onForgotClick`               | `() => any`                                                                                                              | `() => undefined`                                                                                                          | Function to handle "Forgot password?" click.         |
| `footerText`                  | `string`                                                                                                                 | `'Forgot password?'`                                                                                                       | Text for the "Forgot password?" link.                |
| `workMailInputVariant`        | `'outlined' \| 'standard' \| 'filled'`                                                                                   | `'outlined'`                                                                                                               | Variant for the email input.                         |
| `loginFieldStyle`             | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for login input fields.                |
| `socialMediaList`             | `Array`                                                                                                                  | `[]`                                                                                                                       | List of social media buttons.                        |
| `emailInputvariant`           | `'outlined' \| 'standard' \| 'filled'`                                                                                   | `'outlined'`                                                                                                               | Variant for the email input.                         |
| `emailLabelStyle`             | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the email input label.             |
| `emailLabel`                  | `string`                                                                                                                 | `'Email'`                                                                                                                  | Label for the email input.                           |
| `passwordLabelStyle`          | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the password input label.          |
| `passwordLabel`               | `string`                                                                                                                 | `'Password'`                                                                                                               | Label for the password input.                        |
| `pwdInputVariant`             | `'outlined' \| 'standard' \| 'filled'`                                                                                   | `'outlined'`                                                                                                               | Variant for the password input.                      |
| `invisibleIcon`               | `ReactNode`                                                                                                              | `<VisibilityOffOutlinedIcon />`                                                                                            | Icon for the password visibility toggle (invisible). |
| `visbleIcon`                  | `ReactNode`                                                                                                              | `<VisibilityOutlinedIcon />`                                                                                               | Icon for the password visibility toggle (visible).   |
| `pwdFieldstyle`               | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the password input field.          |
| `variantContainerSx`          | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the variant container.             |
| `cardWidth`                   | `number \| string`                                                                                                       | `'auto'`                                                                                                                   | Width of the card.                                   |
| `cardHeight`                  | `number \| string`                                                                                                       | `'auto'`                                                                                                                   | Height of the card.                                  |
| `cardBgColor`                 | `string`                                                                                                                 | `'white'`                                                                                                                  | Background color of the card.                        |
| `cardBoxShadow`               | `string`                                                                                                                 | `'0px 4px 4px rgba(0, 0, 0, 0.25)'`                                                                                        | Box shadow for the card.                             |
| `conFirmPasswordStyle`        | sxProps                                                                                                                  | sxProps                                                                                                                    | sxProp                                               |
| `conFirmPasswordLabel`        | string                                                                                                                   | string                                                                                                                     | string                                               |
| `metanasPasswordTestRegex`    | string                                                                                                                   | string                                                                                                                     | string                                               |
| `disableDefaultValidation`    | boolean                                                                                                                  | boolean                                                                                                                    | boolean                                              |
| `newPasswordOnChange`         | ()=>{}                                                                                                                   | ()=>{}                                                                                                                     | ()=>{}                                               |
| `confirmPasswordOnChange`     | ()=>{}                                                                                                                   | ()=>{}                                                                                                                     | ()=>{}                                               |
| `passwordVisbleIcon`          | ReactNode                                                                                                                | ReactNode                                                                                                                  | ReactNode                                            |
| `passwordInVisbleIcon`        | ReactNode                                                                                                                | ReactNode                                                                                                                  | ReactNode                                            |
| `confirmPasswordVisbleIcon`   | ReactNode                                                                                                                | ReactNode                                                                                                                  | ReactNode                                            |
| `confirmPasswordInVisbleIcon` | ReactNode                                                                                                                | ReactNode                                                                                                                  | ReactNode                                            |
| `newPasswordErrorMsg`         | string                                                                                                                   | string                                                                                                                     | string                                               |
| `confirmPasswordErrorMsg`     | string                                                                                                                   | string                                                                                                                     | string                                               |
| `errorEmailMsg`               | `string`                                                                                                                 | `string`                                                                                                                   | Enter valid email                                    |
|                               |
| `errorPasswordMsg`            | `string`                                                                                                                 | `string`                                                                                                                   | Enter valid password                                 |
| `handleCheckbox`              | () => void                                                                                                               | Function to handle checkbox change in the component                                                                        |
| `checkboxText`                | `string`                                                                                                                 | Text for the checkbox in the component                                                                                     |
| `checkedValue`                | `boolean`                                                                                                                | Value of the checkbox                                                                                                      |
| Prop Name                     | Type                                                                                                                     | Default Value                                                                                                              | Description                                          |
| -----------------------       | --------------------------------------                                                                                   | -----------------------------------                                                                                        | ---------------------------------------------------- |
| `loginId`                     | `string`                                                                                                                 | `'login'`                                                                                                                  | Unique ID for the component.                         |
| `className`                   | `string`                                                                                                                 | `''`                                                                                                                       | CSS class name for the component.                    |
| `sx`                          | `SxProps<Theme>`                                                                                                         | `{}`                                                                                                                       | Styling props using MUI's sx prop.                   |
| `onSubmit`                    | `(details: object) => void`                                                                                              | `() => undefined`                                                                                                          | Function to handle form submission.                  |
| `variant`                     | 'emailWithPasswordLogin' `or` 'socialMediaLogin'`or` 'mobileNumberLogin'`or`'metanasResetpassword' `or`'metanasSigninup' | 'emailWithPasswordLogin' `or` 'socialMediaLogin'`or` 'mobileNumberLogin' `or`'metanasSigninup' `0r` 'metanasResetpassword' | Type of login variant.                               |
| `rootStyle`                   | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the root component.                |
| `imageSection`                | `object`                                                                                                                 | See below                                                                                                                  | Configuration for the image section.                 |
| `mainArea`                    | `object`                                                                                                                 | See below                                                                                                                  | Configuration for the main area.                     |
| `alt`                         | `string`                                                                                                                 | `'Logo'`                                                                                                                   | Alt text for the logo image.                         |
| `logoSrc`                     | `string \| ReactNode`                                                                                                    | `''`                                                                                                                       | Source URL or ReactNode for the logo image.          |
| `logoHeight`                  | `string \| number`                                                                                                       | `'auto'`                                                                                                                   | Height of the logo image.                            |
| `logoWidth`                   | `string \| number`                                                                                                       | `'10px'`                                                                                                                   | Width of the logo image.                             |
| `logoStyle`                   | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the logo image.                    |
| `title`                       | `string \| any`                                                                                                          | `'Login'`                                                                                                                  | Title or JSX element for the card.                   |
| `description`                 | `string \| any`                                                                                                          | `''`                                                                                                                       | Description or JSX element for the card.             |
| `actionText`                  | `string`                                                                                                                 | `"Don't have an account?"`                                                                                                 | Text for the action link or button.                  |
| `buttonText`                  | `string`                                                                                                                 | `'Login'`                                                                                                                  | Text for the login button.                           |
| `actionLink`                  | `string`                                                                                                                 | `'Sign Up'`                                                                                                                | URL for the action link.                             |
| `onSignUpClick`               | `() => void`                                                                                                             | `() => undefined`                                                                                                          | Function to handle sign-up link click.               |
| `titleStyle`                  | `CSSProperties`                                                                                                          | `{}`                                                                                                                       | Inline styles for the title.                         |
| `btnStyle`                    | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the login button.                  |
| `cardStyle`                   | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the card component.                |
| `actionStyle`                 | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the action link.                   |
| `actionLinkStyle`             | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the action link.                   |
| `mobileLabelText`             | `string`                                                                                                                 | `'Mobile Number'`                                                                                                          | Label text for the mobile number input.              |
| `labelStyle`                  | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for labels.                            |
| `mobileFieldstyle`            | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the mobile number input field.     |
| `dropDownStyle`               | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the dropdown in mobile input.      |
| `contryCodefontSize`          | `string \| number`                                                                                                       | `'16px'`                                                                                                                   | Font size for the country code.                      |
| `countryCodeFontWeight`       | `string \| number`                                                                                                       | `'bold'`                                                                                                                   | Font weight for the country code.                    |
| `numberFontSize`              | `string \| number`                                                                                                       | `'16px'`                                                                                                                   | Font size for the mobile number input.               |
| `dividerStyle`                | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the divider.                       |
| `dividerText`                 | `string`                                                                                                                 | `'OR'`                                                                                                                     | Text for the divider.                                |
| `dividerTextStyle`            | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the divider text.                  |
| `divider`                     | `true \| false`                                                                                                          | `true`                                                                                                                     | Whether to show a divider.                           |
| `workMailInput`               | `true \| false`                                                                                                          | `true`                                                                                                                     | Whether to show the email input.                     |
| `workMailLabel`               | `string`                                                                                                                 | `'Email'`                                                                                                                  | Label for the email input.                           |
| `workMailLabelStyle`          | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the email input label.             |
| `footerStyle`                 | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the "Forgot password?" text.       |
| `onForgotClick`               | `() => any`                                                                                                              | `() => undefined`                                                                                                          | Function to handle "Forgot password?" click.         |
| `footerText`                  | `string`                                                                                                                 | `'Forgot password?'`                                                                                                       | Text for the "Forgot password?" link.                |
| `workMailInputVariant`        | `'outlined' \| 'standard' \| 'filled'`                                                                                   | `'outlined'`                                                                                                               | Variant for the email input.                         |
| `loginFieldStyle`             | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for login input fields.                |
| `socialMediaList`             | `Array`                                                                                                                  | `[]`                                                                                                                       | List of social media buttons.                        |
| `emailInputvariant`           | `'outlined' \| 'standard' \| 'filled'`                                                                                   | `'outlined'`                                                                                                               | Variant for the email input.                         |
| `emailLabelStyle`             | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the email input label.             |
| `emailLabel`                  | `string`                                                                                                                 | `'Email'`                                                                                                                  | Label for the email input.                           |
| `passwordLabelStyle`          | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the password input label.          |
| `passwordLabel`               | `string`                                                                                                                 | `'Password'`                                                                                                               | Label for the password input.                        |
| `pwdInputVariant`             | `'outlined' \| 'standard' \| 'filled'`                                                                                   | `'outlined'`                                                                                                               | Variant for the password input.                      |
| `invisibleIcon`               | `ReactNode`                                                                                                              | `<VisibilityOffOutlinedIcon />`                                                                                            | Icon for the password visibility toggle (invisible). |
| `visbleIcon`                  | `ReactNode`                                                                                                              | `<VisibilityOutlinedIcon />`                                                                                               | Icon for the password visibility toggle (visible).   |
| `pwdFieldstyle`               | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the password input field.          |
| `variantContainerSx`          | `SxProps`                                                                                                                | `{}`                                                                                                                       | Styling props for the variant container.             |
| `cardWidth`                   | `number \| string`                                                                                                       | `'auto'`                                                                                                                   | Width of the card.                                   |
| `cardHeight`                  | `number \| string`                                                                                                       | `'auto'`                                                                                                                   | Height of the card.                                  |
| `cardBgColor`                 | `string`                                                                                                                 | `'white'`                                                                                                                  | Background color of the card.                        |
| `cardBoxShadow`               | `string`                                                                                                                 | `'0px 4px 4px rgba(0, 0, 0, 0.25)'`                                                                                        | Box shadow for the card.                             |
| `conFirmPasswordStyle`        | sxProps                                                                                                                  | sxProps                                                                                                                    | sxProp                                               |
| `conFirmPasswordLabel`        | string                                                                                                                   | string                                                                                                                     | string                                               |
| `metanasPasswordTestRegex`    | string                                                                                                                   | string                                                                                                                     | string                                               |
| `disableDefaultValidation`    | boolean                                                                                                                  | boolean                                                                                                                    | boolean                                              |
| `newPasswordOnChange`         | ()=>{}                                                                                                                   | ()=>{}                                                                                                                     | ()=>{}                                               |
| `confirmPasswordOnChange`     | ()=>{}                                                                                                                   | ()=>{}                                                                                                                     | ()=>{}                                               |
| `passwordVisbleIcon`          | ReactNode                                                                                                                | ReactNode                                                                                                                  | ReactNode                                            |
| `passwordInVisbleIcon`        | ReactNode                                                                                                                | ReactNode                                                                                                                  | ReactNode                                            |
| `confirmPasswordVisbleIcon`   | ReactNode                                                                                                                | ReactNode                                                                                                                  | ReactNode                                            |
| `confirmPasswordInVisbleIcon` | ReactNode                                                                                                                | ReactNode                                                                                                                  | ReactNode                                            |
| `newPasswordErrorMsg`         | string                                                                                                                   | string                                                                                                                     | string                                               |
| `confirmPasswordErrorMsg`     | string                                                                                                                   | string                                                                                                                     | string                                               |
| `errorEmailMsg`               | `string`                                                                                                                 | `string`                                                                                                                   | Enter valid email                                    |
|                               |
| `errorPasswordMsg`            | `string`                                                                                                                 | `string`                                                                                                                   | Enter valid password                                 |
| `buttonEndIcon`               | `ReactNode`                                                                                                              | `ReactNode`                                                                                                                | ReactNode                                            |
| `buttonEndIconStyle`          | `SxProps`                                                                                                                | `SxProps`                                                                                                                  | SxProps                                              |
| `errorStyle`                  | `SxProps`                                                                                                                | `SxProps`                                                                                                                  | SxProps                                              |
| `passwordOnChange`            | ()=>{}                                                                                                                   | ()=>{}                                                                                                                     | ()=>{}                                               |
| `emailOnChange`               | ()=>{}                                                                                                                   | ()=>{}                                                                                                                     | ()=>{}                                               |

1. imagesection contains ,

| Prop                | Type            | Default Value                              | Description                                                 |
| ------------------- | --------------- | ------------------------------------------ | ----------------------------------------------------------- |
| backgroundWrapStyle | object          | `{}`                                       | Styling props for the background wrap of the image section. |
| src                 | string          | `''`                                       | Image source URL.                                           |
| style               | CSSProperties   | `{}`                                       | Inline styles for the image section.                        |
| height              | string          | `''`                                       | Height of the image section.                                |
| width               | string          | `''`                                       | Width of the image section.                                 |
| component           | React.ReactNode | `<>`                                       | Custom React component for the image section.               |
| layout              | object          | breakpoints:{`xs: 0, md: 0, sm: 0, lg: 0`} | Layout breakpoints for responsiveness.                      |
|                     |

2. mainArea contains ,

| Prop            | Type   | Default Value                                    | Description                                   |
| --------------- | ------ | ------------------------------------------------ | --------------------------------------------- |
| layout          | object | breakpoints:`{ xs: 12, md: 12, sm: 12, lg: 12 }` | Layout breakpoints for responsiveness.        |
| WraperStyle     | object | `{}`                                             | Styling props for the main area wrapper.      |
| cardParentStyle | object | `{}`                                             | Additional styling props for the card parent. |

3. Dialog section

| Prop                | Type                                             | Description                                         |
| ------------------- | ------------------------------------------------ | --------------------------------------------------- |
| openDialog          | boolean                                          | Open/close state of the dialog                      |
| dialogTitle         | string                                           | Title of the dialog                                 |
| maxWidth            | string                                           | Maximum width of the dialog                         |
| dialogTitleStyle    | SxProps                                          | Styling props for the dialog title                  |
| dialogSectionStyle  | SxProps                                          | Styling props for the dialog section                |
| agreeButtonStyle    | SxProps                                          | Styling props for the agree button in the dialog    |
| bodyTextStyle       | SxProps                                          | Styling props for the body text in the dialog       |
| dialogContent       | ReactNode                                        | Content of the dialog                               |
| dialogButtonText    | string                                           | Text for the button in the dialog                   |
| dialogButtonVariant | 'text' \| 'outlined' \| 'contained' \| undefined | Variant for the button in the dialog                |
| handleAgreeClick    | () => void                                       | Function to handle agree button click in the dialog |
| handleDialogClose   | () => void                                       | Function to handle dialog close                     |
| handleOpenDialog    | () => void                                       | Function to handle dialog open                      |