From 31bad12b36c75ef56617ad284d724e0a38722ca0 Mon Sep 17 00:00:00 2001
From: chavda-bhavik <bhavikvchavda@gmail.com>
Date: Wed, 2 Nov 2022 10:53:52 +0530
Subject: [PATCH 01/10] feat: Updated Modal and Stepper styles to meet the
 design needs

---
 .../src/design-system/Modal/Modal.stories.tsx |  1 -
 .../src/design-system/Modal/Modal.style.ts    | 19 +++++++++++++++++++
 apps/widget/src/design-system/Modal/Modal.tsx | 19 +++++++------------
 .../design-system/Stepper/Stepper.styles.ts   |  2 ++
 .../src/design-system/Stepper/Stepper.tsx     |  6 +++---
 5 files changed, 31 insertions(+), 16 deletions(-)
 create mode 100644 apps/widget/src/design-system/Modal/Modal.style.ts

diff --git a/apps/widget/src/design-system/Modal/Modal.stories.tsx b/apps/widget/src/design-system/Modal/Modal.stories.tsx
index 325f2521d..16928e2c0 100644
--- a/apps/widget/src/design-system/Modal/Modal.stories.tsx
+++ b/apps/widget/src/design-system/Modal/Modal.stories.tsx
@@ -32,6 +32,5 @@ Simple.args = {
   centered: true,
   opened: true,
   overflow: 'inside',
-  padding: 'sm',
   children: 'Content',
 };
diff --git a/apps/widget/src/design-system/Modal/Modal.style.ts b/apps/widget/src/design-system/Modal/Modal.style.ts
new file mode 100644
index 000000000..ad4200d5c
--- /dev/null
+++ b/apps/widget/src/design-system/Modal/Modal.style.ts
@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
+import { createStyles, MantineTheme } from '@mantine/core';
+import { colors } from '../../config/colors.config';
+
+export const getHeaderStyles = (theme: MantineTheme): React.CSSProperties => ({
+  marginBottom: theme.spacing.xs,
+  marginRight: 0,
+});
+
+export const getModalStyles = (theme: MantineTheme): React.CSSProperties => ({
+  padding: '100px',
+});
+
+export default createStyles((theme: MantineTheme, params, getRef): Record<string, any> => {
+  return {
+    header: getHeaderStyles(theme),
+    modal: getModalStyles(theme),
+  };
+});
diff --git a/apps/widget/src/design-system/Modal/Modal.tsx b/apps/widget/src/design-system/Modal/Modal.tsx
index 5dd8c7dc2..462d07c9a 100644
--- a/apps/widget/src/design-system/Modal/Modal.tsx
+++ b/apps/widget/src/design-system/Modal/Modal.tsx
@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { Modal as MantineModal } from '@mantine/core';
+import useStyles from './Modal.style';
 
 interface IModalProps extends JSX.ElementChildrenAttribute {
   title?: string;
@@ -8,20 +9,11 @@ interface IModalProps extends JSX.ElementChildrenAttribute {
   onClose: () => void;
   overflow?: 'inside' | 'outside';
   size?: 'sm' | 'md' | 'lg' | '100%' | number;
-  padding?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
 }
 
 export function Modal(props: PropsWithChildren<IModalProps>) {
-  const {
-    children,
-    onClose,
-    opened,
-    size = '100%',
-    padding = 'sm',
-    overflow = 'inside',
-    title,
-    centered = true,
-  } = props;
+  const { children, onClose, opened, size = '100%', overflow = 'inside', title, centered = true } = props;
+  const { classes } = useStyles();
 
   return (
     <MantineModal
@@ -34,7 +26,10 @@ export function Modal(props: PropsWithChildren<IModalProps>) {
       centered={centered}
       overflow={overflow}
       title={title}
-      padding={padding}
+      classNames={{
+        header: classes.header,
+        modal: classes.modal,
+      }}
     >
       {children}
     </MantineModal>
diff --git a/apps/widget/src/design-system/Stepper/Stepper.styles.ts b/apps/widget/src/design-system/Stepper/Stepper.styles.ts
index 82358242e..983b3564a 100644
--- a/apps/widget/src/design-system/Stepper/Stepper.styles.ts
+++ b/apps/widget/src/design-system/Stepper/Stepper.styles.ts
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
+import { colors } from '../../config/colors.config';
 import { createStyles, MantineTheme } from '@mantine/core';
 import { IStepperProps } from './Stepper';
 
@@ -7,6 +8,7 @@ export const getSeparatorStyles = (theme: MantineTheme) => ({
   flex: 0,
   marginLeft: 10,
   marginRight: 10,
+  color: colors.lightGray,
 });
 
 export default createStyles((theme: MantineTheme, params: IStepperProps, getRef) => {
diff --git a/apps/widget/src/design-system/Stepper/Stepper.tsx b/apps/widget/src/design-system/Stepper/Stepper.tsx
index 0b7bd9996..d7a35b889 100644
--- a/apps/widget/src/design-system/Stepper/Stepper.tsx
+++ b/apps/widget/src/design-system/Stepper/Stepper.tsx
@@ -1,4 +1,4 @@
-import { Stepper as MantineStepper, DefaultMantineColor, MantineSize } from '@mantine/core';
+import { Stepper as MantineStepper, DefaultMantineColor } from '@mantine/core';
 import useStyles from './Stepper.styles';
 
 interface IStep {
@@ -9,11 +9,11 @@ interface IStep {
 export interface IStepperProps {
   active: number;
   steps: IStep[];
-  size: MantineSize;
+  size?: 'xs' | 'sm' | 'md';
 }
 
 export function Stepper(props: IStepperProps) {
-  const { active, steps, size } = props;
+  const { active, steps, size = 'md' } = props;
   const { classes } = useStyles(props);
 
   const getColor = (index: number): DefaultMantineColor => {

From c18bf68ac0207994072398c8e391929e0e45a633 Mon Sep 17 00:00:00 2001
From: chavda-bhavik <bhavikvchavda@gmail.com>
Date: Wed, 2 Nov 2022 11:26:32 +0530
Subject: [PATCH 02/10] feat: Added Select component

---
 .../design-system/Select/Select.stories.tsx   | 16 ++++++++
 .../src/design-system/Select/Select.styles.ts | 19 ++++++++++
 .../src/design-system/Select/Select.tsx       | 37 +++++++++++++++++++
 apps/widget/src/design-system/Select/index.ts |  1 +
 4 files changed, 73 insertions(+)
 create mode 100644 apps/widget/src/design-system/Select/Select.stories.tsx
 create mode 100644 apps/widget/src/design-system/Select/Select.styles.ts
 create mode 100644 apps/widget/src/design-system/Select/Select.tsx
 create mode 100644 apps/widget/src/design-system/Select/index.ts

diff --git a/apps/widget/src/design-system/Select/Select.stories.tsx b/apps/widget/src/design-system/Select/Select.stories.tsx
new file mode 100644
index 000000000..dc71189ed
--- /dev/null
+++ b/apps/widget/src/design-system/Select/Select.stories.tsx
@@ -0,0 +1,16 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Select } from './Select';
+
+export default {
+  title: 'Select',
+  component: Select,
+} as ComponentMeta<typeof Select>;
+
+const Template: ComponentStory<typeof Select> = (args) => <Select {...args} />;
+
+export const Simple = Template.bind({});
+Simple.args = {
+  title: 'Template',
+  data: [{ value: 'Users', label: 'Users' }],
+  placeholder: 'Select Template',
+};
diff --git a/apps/widget/src/design-system/Select/Select.styles.ts b/apps/widget/src/design-system/Select/Select.styles.ts
new file mode 100644
index 000000000..0f5bc4859
--- /dev/null
+++ b/apps/widget/src/design-system/Select/Select.styles.ts
@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
+import { colors } from '../../config/colors.config';
+import { createStyles, MantineTheme } from '@mantine/core';
+
+export const getLabelStyles = (theme: MantineTheme): React.CSSProperties => ({
+  fontWeight: 'bold',
+});
+
+export const getSelectStyles = (theme: MantineTheme): React.CSSProperties => ({
+  color: colors.darkDeem,
+  cursor: 'pointer',
+});
+
+export default createStyles((theme: MantineTheme, params, getRef): Record<string, any> => {
+  return {
+    label: getLabelStyles(theme),
+    select: getSelectStyles(theme),
+  };
+});
diff --git a/apps/widget/src/design-system/Select/Select.tsx b/apps/widget/src/design-system/Select/Select.tsx
new file mode 100644
index 000000000..a74f3ee2e
--- /dev/null
+++ b/apps/widget/src/design-system/Select/Select.tsx
@@ -0,0 +1,37 @@
+import { NativeSelect as MantineNativeSelect } from '@mantine/core';
+import useStyles from './Select.styles';
+import { ChevronDown } from '../../icons';
+
+interface IOption {
+  value: string;
+  label: string;
+}
+
+interface ISelectProps {
+  title?: string;
+  placeholder?: string;
+  data: IOption[];
+  error?: string;
+  required?: boolean;
+}
+
+export function Select(props: ISelectProps) {
+  const { classes } = useStyles();
+  const { title, placeholder, data, error, required = true } = props;
+
+  return (
+    <MantineNativeSelect
+      title={title}
+      placeholder={placeholder}
+      data={data}
+      error={error}
+      label={title}
+      rightSection={<ChevronDown />}
+      classNames={{
+        label: classes.label,
+        input: classes.select,
+      }}
+      required={required}
+    />
+  );
+}
diff --git a/apps/widget/src/design-system/Select/index.ts b/apps/widget/src/design-system/Select/index.ts
new file mode 100644
index 000000000..7868ecbae
--- /dev/null
+++ b/apps/widget/src/design-system/Select/index.ts
@@ -0,0 +1 @@
+export * from './Select';

From bc5b1df3fa619299c64e894f62d97d1432277cc1 Mon Sep 17 00:00:00 2001
From: chavda-bhavik <bhavikvchavda@gmail.com>
Date: Wed, 2 Nov 2022 12:22:41 +0530
Subject: [PATCH 03/10] feat: Updated select component to meet the design needs

---
 .../src/design-system/Select/Select.styles.ts  | 18 +++++++++++++-----
 .../widget/src/design-system/Select/Select.tsx |  8 +++++---
 apps/widget/src/icons/chevron-down.icon.tsx    |  4 ++--
 apps/widget/src/icons/file.icon.tsx            | 16 ++++++++++------
 apps/widget/src/types/icon.types.ts            |  2 +-
 5 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/apps/widget/src/design-system/Select/Select.styles.ts b/apps/widget/src/design-system/Select/Select.styles.ts
index 0f5bc4859..26c3a2bd9 100644
--- a/apps/widget/src/design-system/Select/Select.styles.ts
+++ b/apps/widget/src/design-system/Select/Select.styles.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 import { colors } from '../../config/colors.config';
 import { createStyles, MantineTheme } from '@mantine/core';
+import { ISelectProps } from './Select';
 
 export const getLabelStyles = (theme: MantineTheme): React.CSSProperties => ({
   fontWeight: 'bold',
@@ -11,9 +12,16 @@ export const getSelectStyles = (theme: MantineTheme): React.CSSProperties => ({
   cursor: 'pointer',
 });
 
-export default createStyles((theme: MantineTheme, params, getRef): Record<string, any> => {
-  return {
-    label: getLabelStyles(theme),
-    select: getSelectStyles(theme),
-  };
+export const getRootStyles = (theme: MantineTheme, width: string | number): React.CSSProperties => ({
+  width,
 });
+
+export default createStyles(
+  (theme: MantineTheme, { width }: { width: string | number }, getRef): Record<string, any> => {
+    return {
+      label: getLabelStyles(theme),
+      select: getSelectStyles(theme),
+      root: getRootStyles(theme, width),
+    };
+  }
+);
diff --git a/apps/widget/src/design-system/Select/Select.tsx b/apps/widget/src/design-system/Select/Select.tsx
index a74f3ee2e..bfe541e60 100644
--- a/apps/widget/src/design-system/Select/Select.tsx
+++ b/apps/widget/src/design-system/Select/Select.tsx
@@ -7,17 +7,18 @@ interface IOption {
   label: string;
 }
 
-interface ISelectProps {
+export interface ISelectProps {
   title?: string;
   placeholder?: string;
   data: IOption[];
   error?: string;
   required?: boolean;
+  width?: string | number;
 }
 
 export function Select(props: ISelectProps) {
-  const { classes } = useStyles();
-  const { title, placeholder, data, error, required = true } = props;
+  const { title, placeholder, data, error, required = true, width = '100%' } = props;
+  const { classes } = useStyles({ width });
 
   return (
     <MantineNativeSelect
@@ -30,6 +31,7 @@ export function Select(props: ISelectProps) {
       classNames={{
         label: classes.label,
         input: classes.select,
+        root: classes.root,
       }}
       required={required}
     />
diff --git a/apps/widget/src/icons/chevron-down.icon.tsx b/apps/widget/src/icons/chevron-down.icon.tsx
index 48cb17fee..5c95058ec 100644
--- a/apps/widget/src/icons/chevron-down.icon.tsx
+++ b/apps/widget/src/icons/chevron-down.icon.tsx
@@ -5,7 +5,7 @@ export function ChevronDown(props: IIcon) {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       fill="currentColor"
-      width="14.993"
+      width="11.993"
       height="8.574"
       viewBox="0 0 14.993 8.574"
       className={props?.className}
@@ -17,7 +17,7 @@ export function ChevronDown(props: IIcon) {
         transform="translate(14.707 0.287) rotate(90)"
         fill="#999"
         stroke="#999"
-        stroke-width="0.5"
+        // stroke-width="0.5"
       />
     </svg>
   );
diff --git a/apps/widget/src/icons/file.icon.tsx b/apps/widget/src/icons/file.icon.tsx
index 956acecaf..8d55e76a4 100644
--- a/apps/widget/src/icons/file.icon.tsx
+++ b/apps/widget/src/icons/file.icon.tsx
@@ -4,13 +4,17 @@ export function FileIcon(props: IIcon) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="-4 -2 24 24"
-      fill="currentColor"
-      style={props?.styles}
-      className={props?.className}
+      width="63.56"
+      height="89.659"
+      viewBox="0 0 63.56 89.659"
+      style={props.styles}
+      className={props.className}
     >
-      {/* eslint-disable-next-line max-len */}
-      <path d="M10.298 2H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V4.961L10.298 2zM3 0h8l5 4v13a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3z"></path>
+      <path
+        fill="#cee7f8"
+        // eslint-disable-next-line max-len
+        d="M62.072 19.981 43.591 1.488A5.034 5.034 0 0 0 40 0H5.476A5.482 5.482 0 0 0 0 5.476v79.425a4.756 4.756 0 0 0 4.758 4.758h54.044a4.756 4.756 0 0 0 4.758-4.758V23.559a5.026 5.026 0 0 0-1.488-3.578Zm-1.077 41.245a2.884 2.884 0 0 0-.744-.09H29.497a3.166 3.166 0 0 1-2.232-.923l-3.822-3.822a3.119 3.119 0 0 0-2.257-.923l-17.968.115a3.77 3.77 0 0 0-.654.064V5.476a2.917 2.917 0 0 1 2.911-2.911H40a1.623 1.623 0 0 1 .359.038v18.673a2.95 2.95 0 0 0 2.95 2.95h17.685ZM33.062 28.971V10.259H8.9v38.18h45.413V28.971Zm-21.6-16.146h19.032v6.8H11.465Zm0 9.362h19.032v6.746H11.465Zm0 9.311h19.032v6.079H11.465Zm0 8.644h19.032v5.733H11.465Zm40.283 5.733H33.063v-5.736h18.686Zm0-8.3H33.063v-6.036h18.686Z"
+      />
     </svg>
   );
 }
diff --git a/apps/widget/src/types/icon.types.ts b/apps/widget/src/types/icon.types.ts
index e827bef17..45c894759 100644
--- a/apps/widget/src/types/icon.types.ts
+++ b/apps/widget/src/types/icon.types.ts
@@ -1,5 +1,5 @@
 export interface IIcon {
   styles?: React.CSSProperties;
   className?: string;
-  onClick?: (e: MouseEvent) => void;
+  onClick?: (e: any) => void;
 }

From c14500a0a5e9d7d463bc5f7658eac3cacd3fab4e Mon Sep 17 00:00:00 2001
From: chavda-bhavik <bhavikvchavda@gmail.com>
Date: Wed, 2 Nov 2022 14:33:54 +0530
Subject: [PATCH 04/10] feat: Updated Dropzone, Select and Stepper component
 styles to meet the design needs

---
 apps/widget/src/config/colors.config.ts       |  2 +-
 apps/widget/src/config/texts.config.ts        |  5 +++--
 .../design-system/Dropzone/Dropzone.style.ts  |  5 +++++
 .../src/design-system/Dropzone/Dropzone.tsx   | 22 +++++++++++++++----
 .../src/design-system/Select/Select.styles.ts |  2 +-
 .../design-system/Stepper/Stepper.stories.tsx |  1 -
 .../design-system/Stepper/Stepper.styles.ts   | 17 +++++++++++---
 .../src/design-system/Stepper/Stepper.tsx     |  6 ++---
 8 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/apps/widget/src/config/colors.config.ts b/apps/widget/src/config/colors.config.ts
index a837d75ed..0a1bce250 100644
--- a/apps/widget/src/config/colors.config.ts
+++ b/apps/widget/src/config/colors.config.ts
@@ -4,7 +4,7 @@ export const colors = {
   darkDeem: '#666666',
   lightDeem: '#CCCCCC',
   lightGray: '#F8F8F8',
-  black: '#FFFFFF',
+  black: '#000000',
   danger: '#AB3022',
   light: '#F2F9FE',
 };
diff --git a/apps/widget/src/config/texts.config.ts b/apps/widget/src/config/texts.config.ts
index 25d293808..736744dba 100644
--- a/apps/widget/src/config/texts.config.ts
+++ b/apps/widget/src/config/texts.config.ts
@@ -1,7 +1,8 @@
 export const TEXTS = {
   DROPZONE: {
-    TITLE: 'Drag file here or Click to select file',
-    SUBTITLE: '.csv, .xlx, .xlsx files are supported',
+    TITLE: 'Drop your file here or ',
+    BROWSE: 'Browse',
+    SUBTITLE: 'Select any .csv, .xlx or .xlsx file',
     FILE_SELECTION: 'File selected successfully',
   },
 };
diff --git a/apps/widget/src/design-system/Dropzone/Dropzone.style.ts b/apps/widget/src/design-system/Dropzone/Dropzone.style.ts
index ef371c5c5..ad0c48e35 100644
--- a/apps/widget/src/design-system/Dropzone/Dropzone.style.ts
+++ b/apps/widget/src/design-system/Dropzone/Dropzone.style.ts
@@ -27,11 +27,16 @@ export const getCheckIconStyles = (theme) => ({
   display: 'block',
 });
 
+export const getWrapperStyles = (theme) => ({
+  width: '100%',
+});
+
 export default createStyles((theme: MantineTheme, params, getRef): Record<string, any> => {
   return {
     icon: getIconStyles(theme),
     successRoot: getSuccessRootStyles(theme),
     root: getRootStyles(theme),
     checkIcon: getCheckIconStyles(theme),
+    wrapper: getWrapperStyles(theme),
   };
 });
diff --git a/apps/widget/src/design-system/Dropzone/Dropzone.tsx b/apps/widget/src/design-system/Dropzone/Dropzone.tsx
index 292bc034f..50857f8d0 100644
--- a/apps/widget/src/design-system/Dropzone/Dropzone.tsx
+++ b/apps/widget/src/design-system/Dropzone/Dropzone.tsx
@@ -2,6 +2,7 @@ import { Group, Text } from '@mantine/core';
 import { Dropzone as MantineDropzone, FileWithPath, MIME_TYPES } from '@mantine/dropzone';
 import useStyles from './Dropzone.style';
 import { TEXTS } from '../../config/texts.config';
+import { colors } from '../../config/colors.config';
 import { FileIcon, CheckIcon } from '../../icons';
 import { File as FileCMP } from '../File';
 
@@ -11,10 +12,11 @@ interface IDropzoneProps {
   onDrop: (files: FileWithPath[]) => void;
   onClear?: () => void;
   file?: FileWithPath;
+  title?: string;
 }
 
 export function Dropzone(props: IDropzoneProps) {
-  const { loading, accept = [MIME_TYPES.csv, MIME_TYPES.xls, MIME_TYPES.xlsx], onDrop, onClear, file } = props;
+  const { loading, accept = [MIME_TYPES.csv, MIME_TYPES.xls, MIME_TYPES.xlsx], onDrop, onClear, file, title } = props;
   const { classes } = useStyles();
 
   const isFileSelected = !!(file && file.name && file.size);
@@ -43,8 +45,11 @@ export function Dropzone(props: IDropzoneProps) {
       <MantineDropzone onDrop={onDrop} accept={accept} loading={loading} classNames={classes}>
         <Group position="center">
           <div>
-            <Text size="xl" align="center">
-              {TEXTS.DROPZONE.TITLE}
+            <Text align="center" weight="bold">
+              {TEXTS.DROPZONE.TITLE}{' '}
+              <Text component="span" color={colors.primary}>
+                {TEXTS.DROPZONE.BROWSE}
+              </Text>
             </Text>
             <MantineDropzone.Idle>
               <Group position="center" mt="md">
@@ -60,5 +65,14 @@ export function Dropzone(props: IDropzoneProps) {
     );
   };
 
-  return isFileSelected ? <SelectedFileContent /> : <SelectFileContent />;
+  return (
+    <div className={classes.wrapper}>
+      {title ? (
+        <Text weight="bold" size="sm" color="">
+          {title}
+        </Text>
+      ) : null}
+      {isFileSelected ? <SelectedFileContent /> : <SelectFileContent />}
+    </div>
+  );
 }
diff --git a/apps/widget/src/design-system/Select/Select.styles.ts b/apps/widget/src/design-system/Select/Select.styles.ts
index 26c3a2bd9..a698cabc3 100644
--- a/apps/widget/src/design-system/Select/Select.styles.ts
+++ b/apps/widget/src/design-system/Select/Select.styles.ts
@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 import { colors } from '../../config/colors.config';
 import { createStyles, MantineTheme } from '@mantine/core';
-import { ISelectProps } from './Select';
 
 export const getLabelStyles = (theme: MantineTheme): React.CSSProperties => ({
   fontWeight: 'bold',
+  color: colors.black,
 });
 
 export const getSelectStyles = (theme: MantineTheme): React.CSSProperties => ({
diff --git a/apps/widget/src/design-system/Stepper/Stepper.stories.tsx b/apps/widget/src/design-system/Stepper/Stepper.stories.tsx
index 9b5837e84..df1cced76 100644
--- a/apps/widget/src/design-system/Stepper/Stepper.stories.tsx
+++ b/apps/widget/src/design-system/Stepper/Stepper.stories.tsx
@@ -22,5 +22,4 @@ Simple.args = {
       label: 'Review',
     },
   ],
-  size: 'xs',
 };
diff --git a/apps/widget/src/design-system/Stepper/Stepper.styles.ts b/apps/widget/src/design-system/Stepper/Stepper.styles.ts
index 983b3564a..c917c32c3 100644
--- a/apps/widget/src/design-system/Stepper/Stepper.styles.ts
+++ b/apps/widget/src/design-system/Stepper/Stepper.styles.ts
@@ -6,13 +6,24 @@ import { IStepperProps } from './Stepper';
 export const getSeparatorStyles = (theme: MantineTheme) => ({
   backgroundColor: 'none',
   flex: 0,
-  marginLeft: 10,
-  marginRight: 10,
+  marginLeft: 7,
+  marginRight: 7,
   color: colors.lightGray,
 });
 
-export default createStyles((theme: MantineTheme, params: IStepperProps, getRef) => {
+export const getStepLabelStyles = (theme: MantineTheme) => ({
+  color: colors.darkDeem,
+  fontWeight: 600,
+});
+
+export const getStepBodyStyles = (theme: MantineTheme) => ({
+  marginLeft: '5px',
+});
+
+export default createStyles((theme: MantineTheme, params: IStepperProps, getRef): Record<string, any> => {
   return {
     separator: getSeparatorStyles(theme),
+    stepLabel: getStepLabelStyles(theme),
+    stepBody: getStepBodyStyles(theme),
   };
 });
diff --git a/apps/widget/src/design-system/Stepper/Stepper.tsx b/apps/widget/src/design-system/Stepper/Stepper.tsx
index d7a35b889..a47b255db 100644
--- a/apps/widget/src/design-system/Stepper/Stepper.tsx
+++ b/apps/widget/src/design-system/Stepper/Stepper.tsx
@@ -1,3 +1,4 @@
+import { CheckIcon } from '../../icons/check.icon';
 import { Stepper as MantineStepper, DefaultMantineColor } from '@mantine/core';
 import useStyles from './Stepper.styles';
 
@@ -9,11 +10,10 @@ interface IStep {
 export interface IStepperProps {
   active: number;
   steps: IStep[];
-  size?: 'xs' | 'sm' | 'md';
 }
 
 export function Stepper(props: IStepperProps) {
-  const { active, steps, size = 'md' } = props;
+  const { active, steps } = props;
   const { classes } = useStyles(props);
 
   const getColor = (index: number): DefaultMantineColor => {
@@ -27,7 +27,7 @@ export function Stepper(props: IStepperProps) {
   };
 
   return (
-    <MantineStepper active={active - 1} size={size} classNames={classes}>
+    <MantineStepper active={active - 1} size="sm" iconSize={28} classNames={classes} completedIcon={<CheckIcon />}>
       {Array.isArray(steps) &&
         steps.map((step, index) => (
           <MantineStepper.Step key={index} label={step.label} description={step.description} color={getColor(index)} />

From 6108ea4b5081e16a32d853daef90b605394113c9 Mon Sep 17 00:00:00 2001
From: chavda-bhavik <bhavikvchavda@gmail.com>
Date: Wed, 2 Nov 2022 15:37:59 +0530
Subject: [PATCH 05/10] feat: Added required prop and Responsivness to
 MappingItem

---
 .../MappingItem/MappingItem.stories.tsx       | 24 +++++++++++++++++--
 .../MappingItem/MappingItem.style.ts          | 21 +++++++++++++++-
 .../design-system/MappingItem/MappingItem.tsx |  3 +++
 3 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/apps/widget/src/design-system/MappingItem/MappingItem.stories.tsx b/apps/widget/src/design-system/MappingItem/MappingItem.stories.tsx
index 6d5b46a1d..f5fd1806f 100644
--- a/apps/widget/src/design-system/MappingItem/MappingItem.stories.tsx
+++ b/apps/widget/src/design-system/MappingItem/MappingItem.stories.tsx
@@ -8,9 +8,9 @@ export default {
 
 const Template: ComponentStory<typeof MappingItem> = (args) => <MappingItem {...args} />;
 
-export const Simple = Template.bind({});
+export const NotMapped = Template.bind({});
 
-Simple.args = {
+NotMapped.args = {
   options: [
     {
       label: 'Firstname',
@@ -26,3 +26,23 @@ Simple.args = {
   size: 'sm',
   placeholder: 'Select Field',
 };
+
+export const Mapped = Template.bind({});
+
+Mapped.args = {
+  options: [
+    {
+      label: 'Firstname',
+      value: '1',
+    },
+    {
+      label: 'Lastname',
+      value: '2',
+    },
+  ],
+  searchable: true,
+  heading: 'First Name',
+  size: 'sm',
+  placeholder: 'Select Field',
+  value: '1',
+};
diff --git a/apps/widget/src/design-system/MappingItem/MappingItem.style.ts b/apps/widget/src/design-system/MappingItem/MappingItem.style.ts
index 9a0a478df..d3a5be0bc 100644
--- a/apps/widget/src/design-system/MappingItem/MappingItem.style.ts
+++ b/apps/widget/src/design-system/MappingItem/MappingItem.style.ts
@@ -4,6 +4,12 @@ import { colors } from '../../config/colors.config';
 
 export const getRootStyles = (theme: MantineTheme): React.CSSProperties => ({
   justifyContent: 'space-between',
+  width: '100%',
+  [`@media (max-width: ${theme.breakpoints.md}px)`]: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: 3,
+  },
 });
 
 export const getSelectionRootStyles = (theme: MantineTheme): React.CSSProperties => ({
@@ -12,7 +18,12 @@ export const getSelectionRootStyles = (theme: MantineTheme): React.CSSProperties
   borderStyle: 'solid',
   borderRadius: 4,
   padding: 0,
-  width: '70%',
+  [`@media (max-width: ${theme.breakpoints.md}px)`]: {
+    width: '100%',
+  },
+  [`@media (min-width: ${theme.breakpoints.md}px)`]: {
+    width: '70%',
+  },
 });
 
 export const getHeadingStyles = (theme: MantineTheme) => ({
@@ -52,6 +63,13 @@ export const getStatusTextStyles = (theme: MantineTheme): React.CSSProperties =>
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing.sm,
+  [`@media (max-width: ${theme.breakpoints.md}px)`]: {
+    flexDirection: 'row-reverse',
+  },
+});
+
+export const getRequiredStyles = (theme: MantineTheme): React.CSSProperties => ({
+  color: 'red',
 });
 
 export default createStyles((theme: MantineTheme, params: { height: number }, getRef): Record<string, any> => {
@@ -62,5 +80,6 @@ export default createStyles((theme: MantineTheme, params: { height: number }, ge
     selectRoot: getSelectRootStyles(theme),
     select: getSelectStyles(theme, params.height),
     heading: getHeadingStyles(theme),
+    required: getRequiredStyles(theme),
   };
 });
diff --git a/apps/widget/src/design-system/MappingItem/MappingItem.tsx b/apps/widget/src/design-system/MappingItem/MappingItem.tsx
index 22d7d4968..339f3469e 100644
--- a/apps/widget/src/design-system/MappingItem/MappingItem.tsx
+++ b/apps/widget/src/design-system/MappingItem/MappingItem.tsx
@@ -10,6 +10,7 @@ interface IOption {
 
 interface IMappingItem {
   heading: string;
+  required?: boolean;
   options: IOption[];
   value?: string;
   placeholder?: string;
@@ -23,6 +24,7 @@ export function MappingItem(props: IMappingItem) {
   const {
     heading,
     options,
+    required,
     value,
     placeholder = 'Select field',
     size = 'sm',
@@ -43,6 +45,7 @@ export function MappingItem(props: IMappingItem) {
       <Group className={classes.selectionRoot} align="stretch" ref={groupRef} noWrap>
         <Text size={size} className={classes.heading}>
           {heading}
+          {required ? <span className={classes.required}>&nbsp;*</span> : null}
         </Text>
         <Select
           placeholder={placeholder}

From 4c9530aebf2eae5ee78166b8afa9b0dfab6a555c Mon Sep 17 00:00:00 2001
From: chavda-bhavik <bhavikvchavda@gmail.com>
Date: Wed, 2 Nov 2022 16:07:07 +0530
Subject: [PATCH 06/10] feat: Updated Dropzone and File components to meed
 design needs:

---
 .../src/design-system/Dropzone/Dropzone.stories.tsx   | 11 ++++++++++-
 apps/widget/src/design-system/File/File.style.ts      |  1 +
 apps/widget/src/design-system/File/File.tsx           |  7 ++++---
 apps/widget/src/icons/file.icon.tsx                   |  2 +-
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/widget/src/design-system/Dropzone/Dropzone.stories.tsx b/apps/widget/src/design-system/Dropzone/Dropzone.stories.tsx
index 0aed7f57d..9a4d643a3 100644
--- a/apps/widget/src/design-system/Dropzone/Dropzone.stories.tsx
+++ b/apps/widget/src/design-system/Dropzone/Dropzone.stories.tsx
@@ -23,4 +23,13 @@ export default {
 
 const Template: ComponentStory<typeof Dropzone> = (args) => <Dropzone {...args} />;
 
-export const Simple = Template.bind({});
+export const Default = Template.bind({});
+
+export const WithFile = Template.bind({});
+WithFile.args = {
+  title: 'Select a file',
+  file: {
+    name: 'Document.tsx',
+    size: 1200,
+  } as unknown as File,
+};
diff --git a/apps/widget/src/design-system/File/File.style.ts b/apps/widget/src/design-system/File/File.style.ts
index 747969fce..5896ccfe3 100644
--- a/apps/widget/src/design-system/File/File.style.ts
+++ b/apps/widget/src/design-system/File/File.style.ts
@@ -16,6 +16,7 @@ export const getContainerStyles = (theme: MantineTheme): React.CSSProperties =>
 export const getFileIconStyles = (theme: MantineTheme): React.CSSProperties => ({
   color: colors.darkDeem,
   height: '20px',
+  width: '20px',
 });
 
 export const getCrossIconStyles = (theme: MantineTheme): React.CSSProperties => ({
diff --git a/apps/widget/src/design-system/File/File.tsx b/apps/widget/src/design-system/File/File.tsx
index 4a7321cf1..992082f38 100644
--- a/apps/widget/src/design-system/File/File.tsx
+++ b/apps/widget/src/design-system/File/File.tsx
@@ -1,6 +1,7 @@
 import { FileIcon, CrossIcon } from '../../icons';
 import { Group, Text } from '@mantine/core';
 import useStyles from './File.style';
+import { colors } from '../../config/colors.config';
 
 interface IFile {
   name: string;
@@ -21,13 +22,13 @@ export function File(props: IFile) {
 
   return (
     <Group className={classes.root}>
-      <Group spacing="sm">
-        <FileIcon className={classes.fileIcon} />
+      <Group spacing="xs">
+        <FileIcon className={classes.fileIcon} fill={colors.darkDeem} />
         <Text size="sm" inline className={classes.nameText}>
           {name}
         </Text>
       </Group>
-      <Group spacing="sm">
+      <Group spacing="xs">
         <Text size="sm" inline className={classes.sizeText}>
           {size}
         </Text>
diff --git a/apps/widget/src/icons/file.icon.tsx b/apps/widget/src/icons/file.icon.tsx
index 8d55e76a4..cb9827fe1 100644
--- a/apps/widget/src/icons/file.icon.tsx
+++ b/apps/widget/src/icons/file.icon.tsx
@@ -11,7 +11,7 @@ export function FileIcon(props: IIcon) {
       className={props.className}
     >
       <path
-        fill="#cee7f8"
+        fill={props?.fill || '#cee7f8'}
         // eslint-disable-next-line max-len
         d="M62.072 19.981 43.591 1.488A5.034 5.034 0 0 0 40 0H5.476A5.482 5.482 0 0 0 0 5.476v79.425a4.756 4.756 0 0 0 4.758 4.758h54.044a4.756 4.756 0 0 0 4.758-4.758V23.559a5.026 5.026 0 0 0-1.488-3.578Zm-1.077 41.245a2.884 2.884 0 0 0-.744-.09H29.497a3.166 3.166 0 0 1-2.232-.923l-3.822-3.822a3.119 3.119 0 0 0-2.257-.923l-17.968.115a3.77 3.77 0 0 0-.654.064V5.476a2.917 2.917 0 0 1 2.911-2.911H40a1.623 1.623 0 0 1 .359.038v18.673a2.95 2.95 0 0 0 2.95 2.95h17.685ZM33.062 28.971V10.259H8.9v38.18h45.413V28.971Zm-21.6-16.146h19.032v6.8H11.465Zm0 9.362h19.032v6.746H11.465Zm0 9.311h19.032v6.079H11.465Zm0 8.644h19.032v5.733H11.465Zm40.283 5.733H33.063v-5.736h18.686Zm0-8.3H33.063v-6.036h18.686Z"
       />

From 2257314a4378af2fe73c96d84da10628b8f2356f Mon Sep 17 00:00:00 2001
From: chavda-bhavik <bhavikvchavda@gmail.com>
Date: Thu, 3 Nov 2022 11:54:12 +0530
Subject: [PATCH 07/10] feat: Removed total data showing from Pagination

---
 .../design-system/Pagination/Pagination.stories.tsx  |  2 --
 .../src/design-system/Pagination/Pagination.tsx      | 12 +++---------
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/apps/widget/src/design-system/Pagination/Pagination.stories.tsx b/apps/widget/src/design-system/Pagination/Pagination.stories.tsx
index e85ca0c85..4aa75f0ec 100644
--- a/apps/widget/src/design-system/Pagination/Pagination.stories.tsx
+++ b/apps/widget/src/design-system/Pagination/Pagination.stories.tsx
@@ -17,6 +17,4 @@ export const Simple = Template.bind({});
 Simple.args = {
   total: 10,
   page: 1,
-  limit: 10,
-  totalRecords: 100,
 };
diff --git a/apps/widget/src/design-system/Pagination/Pagination.tsx b/apps/widget/src/design-system/Pagination/Pagination.tsx
index e2e69e71d..673271779 100644
--- a/apps/widget/src/design-system/Pagination/Pagination.tsx
+++ b/apps/widget/src/design-system/Pagination/Pagination.tsx
@@ -1,23 +1,17 @@
-import { Pagination as MantinePagination, Group, Text } from '@mantine/core';
+import { Pagination as MantinePagination, Group } from '@mantine/core';
 
 interface IPaginationProps {
   page?: number;
   total: number;
-  limit: number;
-  totalRecords: number;
   size?: 'sm' | 'md';
   onChange?: (page: number) => void;
 }
 
 export function Pagination(props: IPaginationProps) {
-  const { total, page = 1, limit, totalRecords, size = 'md', onChange } = props;
+  const { total, page = 1, size = 'md', onChange } = props;
 
   return (
-    <Group style={{ justifyContent: 'space-between' }}>
-      <Text size={size}>
-        {Math.max(0, Math.min((page - 1) * limit, totalRecords))}-{Math.max(0, Math.min(page * limit, totalRecords))} of{' '}
-        {totalRecords}
-      </Text>
+    <Group style={{ justifyContent: 'center' }}>
       <MantinePagination total={total} page={page} size={size} onChange={onChange} />
     </Group>
   );

From 7945516515c338ebcff0c5e8c1c420a0bdce1856 Mon Sep 17 00:00:00 2001
From: chavda-bhavik <bhavikvchavda@gmail.com>
Date: Thu, 3 Nov 2022 11:58:35 +0530
Subject: [PATCH 08/10] feat: Added warning to Table

---
 apps/widget/src/config/colors.config.ts       |  1 +
 .../InvalidWarning/InvalidWarning.tsx         | 23 +++++++++++
 .../src/design-system/InvalidWarning/index.ts |  1 +
 .../src/design-system/Table/Table.stories.tsx | 11 ++++--
 .../src/design-system/Table/Table.style.ts    |  9 ++++-
 apps/widget/src/design-system/Table/Table.tsx | 38 ++++++++++++++-----
 apps/widget/src/icons/download.icon.tsx       | 20 ++++++++++
 apps/widget/src/icons/index.ts                |  1 +
 apps/widget/src/types/icon.types.ts           |  1 +
 apps/widget/src/util/helpers.ts               | 12 ++++++
 10 files changed, 102 insertions(+), 15 deletions(-)
 create mode 100644 apps/widget/src/design-system/InvalidWarning/InvalidWarning.tsx
 create mode 100644 apps/widget/src/design-system/InvalidWarning/index.ts
 create mode 100644 apps/widget/src/icons/download.icon.tsx
 create mode 100644 apps/widget/src/util/helpers.ts

diff --git a/apps/widget/src/config/colors.config.ts b/apps/widget/src/config/colors.config.ts
index 0a1bce250..662bcf8db 100644
--- a/apps/widget/src/config/colors.config.ts
+++ b/apps/widget/src/config/colors.config.ts
@@ -6,5 +6,6 @@ export const colors = {
   lightGray: '#F8F8F8',
   black: '#000000',
   danger: '#AB3022',
+  lightDanger: '#FDEBEB',
   light: '#F2F9FE',
 };
diff --git a/apps/widget/src/design-system/InvalidWarning/InvalidWarning.tsx b/apps/widget/src/design-system/InvalidWarning/InvalidWarning.tsx
new file mode 100644
index 000000000..115deac61
--- /dev/null
+++ b/apps/widget/src/design-system/InvalidWarning/InvalidWarning.tsx
@@ -0,0 +1,23 @@
+import { Tooltip } from '@mantine/core';
+
+interface InvalidWarningProps {
+  label: string;
+}
+export function InvalidWarning(props: InvalidWarningProps) {
+  const { label } = props;
+
+  return (
+    <Tooltip label={label} withArrow>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="-2 -2 24 24"
+        width="20"
+        fill="currentColor"
+        style={{ verticalAlign: 'middle', float: 'right', cursor: 'pointer', color: '#e40000' }}
+      >
+        {/* eslint-disable-next-line max-len */}
+        <path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-13a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V6a1 1 0 0 1 1-1zm0 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
+      </svg>
+    </Tooltip>
+  );
+}
diff --git a/apps/widget/src/design-system/InvalidWarning/index.ts b/apps/widget/src/design-system/InvalidWarning/index.ts
new file mode 100644
index 000000000..516a46128
--- /dev/null
+++ b/apps/widget/src/design-system/InvalidWarning/index.ts
@@ -0,0 +1 @@
+export * from './InvalidWarning';
diff --git a/apps/widget/src/design-system/Table/Table.stories.tsx b/apps/widget/src/design-system/Table/Table.stories.tsx
index b461b4e38..025e2cdeb 100644
--- a/apps/widget/src/design-system/Table/Table.stories.tsx
+++ b/apps/widget/src/design-system/Table/Table.stories.tsx
@@ -28,12 +28,15 @@ Empty.args = {
   data: [],
 };
 
-export const CustomCellRender = Template.bind({});
-CustomCellRender.args = {
+export const WithError = Template.bind({});
+WithError.args = {
   headings: [
-    { title: 'First Name', key: 'firstName', Cell: (item) => <b>{item.firstName}</b> },
+    { title: 'First Name', key: 'firstName' },
     { title: 'Last Name', key: 'lastName' },
     { title: 'Surname', key: 'surname' },
   ],
-  data: [{ firstName: 'John', lastName: 'Baber', surname: 'Doe' }],
+  data: [
+    { firstName: 'John', lastName: 'Baber', surname: 'Doe', error: '`firstName` should be unique' },
+    { firstName: 'John', lastName: 'Baber', surname: 'Doe', error: '`lastName` should be unique' },
+  ],
 };
diff --git a/apps/widget/src/design-system/Table/Table.style.ts b/apps/widget/src/design-system/Table/Table.style.ts
index cd1a232ef..9c1c6ed83 100644
--- a/apps/widget/src/design-system/Table/Table.style.ts
+++ b/apps/widget/src/design-system/Table/Table.style.ts
@@ -2,15 +2,22 @@
 import { createStyles, MantineTheme } from '@mantine/core';
 import { colors } from '../../config/colors.config';
 
-export const getTableStyles = (theme: MantineTheme) => ({});
+export const getTableStyles = (theme: MantineTheme) => ({
+  textAlign: 'center',
+});
 
 export const getHeadingStyles = (theme: MantineTheme): React.CSSProperties => ({
   backgroundColor: colors.lightGray,
 });
 
+export const getInvalidColumnStyles = (theme: MantineTheme): React.CSSProperties => ({
+  backgroundColor: colors.lightDanger,
+});
+
 export default createStyles((theme: MantineTheme, params, getRef): Record<string, any> => {
   return {
     table: getTableStyles(theme),
     heading: getHeadingStyles(theme),
+    invalidColumn: getInvalidColumnStyles(theme),
   };
 });
diff --git a/apps/widget/src/design-system/Table/Table.tsx b/apps/widget/src/design-system/Table/Table.tsx
index ac0bfae2e..76a330caf 100644
--- a/apps/widget/src/design-system/Table/Table.tsx
+++ b/apps/widget/src/design-system/Table/Table.tsx
@@ -1,16 +1,18 @@
 import { Table as MantineTable } from '@mantine/core';
 import useStyles from './Table.style';
+import { getErrorObject } from '../../util/helpers';
+import { InvalidWarning } from '../InvalidWarning';
 
 interface IHeadingItem {
   title: string;
   key: string;
-  Cell?: (item: Record<string, string>) => any;
+  width?: number | string;
 }
 
 interface ITableProps {
   emptyDataText?: string;
   headings?: IHeadingItem[];
-  data?: Record<string, string>[];
+  data?: Record<string, any>[];
 }
 
 export function Table(props: ITableProps) {
@@ -27,7 +29,9 @@ export function Table(props: ITableProps) {
       <thead className={classes.heading}>
         <tr>
           {headings.map((heading: IHeadingItem, index: number) => (
-            <th key={index}>{heading.title}</th>
+            <th style={{ textAlign: 'center', width: heading.width || '' }} key={index}>
+              {heading.title}
+            </th>
           ))}
         </tr>
       </thead>
@@ -35,6 +39,7 @@ export function Table(props: ITableProps) {
   };
 
   const TBody = () => {
+    let errorObject: Record<string, string>;
     if (isHeadingsEmpty) return <tbody />;
 
     if (isDataEmpty)
@@ -48,13 +53,26 @@ export function Table(props: ITableProps) {
 
     return (
       <tbody>
-        {data.map((item: Record<string, string>, i: number) => (
-          <tr key={item.id || i}>
-            {headings.map((heading: IHeadingItem, fieldIndex: number) => (
-              <td key={fieldIndex}>{typeof heading.Cell === 'function' ? heading.Cell(item) : item[heading.key]}</td>
-            ))}
-          </tr>
-        ))}
+        {data.map((item: Record<string, string>, i: number) => {
+          errorObject = getErrorObject(item.error);
+
+          return (
+            <tr key={item.id || i}>
+              {headings.map((heading: IHeadingItem, fieldIndex: number) =>
+                errorObject[heading.key] ? (
+                  // if error exist for column
+                  <td key={fieldIndex} className={classes.invalidColumn}>
+                    {item[heading.key]}
+                    <InvalidWarning label={errorObject[heading.key]} />
+                  </td>
+                ) : (
+                  // normal column
+                  <td key={fieldIndex}>{item[heading.key]}</td>
+                )
+              )}
+            </tr>
+          );
+        })}
       </tbody>
     );
   };
diff --git a/apps/widget/src/icons/download.icon.tsx b/apps/widget/src/icons/download.icon.tsx
new file mode 100644
index 000000000..1e7bacfc5
--- /dev/null
+++ b/apps/widget/src/icons/download.icon.tsx
@@ -0,0 +1,20 @@
+import { IIcon } from '@types';
+
+export function Download(props: IIcon) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      className={props?.className}
+      style={props?.styles}
+    >
+      <path d="M0,0H24V24H0Z" fill="none" />
+      <path
+        d="M3,19H21v2H3Zm10-5.828L19.071,7.1l1.414,1.414L12,17,3.515,8.515,4.929,7.1,11,13.17V2h2Z"
+        fill={props?.fill || '#24a0ed'}
+      />
+    </svg>
+  );
+}
diff --git a/apps/widget/src/icons/index.ts b/apps/widget/src/icons/index.ts
index 8f0ddbd89..7994e6965 100644
--- a/apps/widget/src/icons/index.ts
+++ b/apps/widget/src/icons/index.ts
@@ -3,3 +3,4 @@ export * from './check.icon';
 export * from './cross.icon';
 export * from './chevron-down.icon';
 export * from './green-check.icon';
+export * from './download.icon';
diff --git a/apps/widget/src/types/icon.types.ts b/apps/widget/src/types/icon.types.ts
index 45c894759..049cb9515 100644
--- a/apps/widget/src/types/icon.types.ts
+++ b/apps/widget/src/types/icon.types.ts
@@ -1,4 +1,5 @@
 export interface IIcon {
+  fill?: string;
   styles?: React.CSSProperties;
   className?: string;
   onClick?: (e: any) => void;
diff --git a/apps/widget/src/util/helpers.ts b/apps/widget/src/util/helpers.ts
new file mode 100644
index 000000000..ca9a1529b
--- /dev/null
+++ b/apps/widget/src/util/helpers.ts
@@ -0,0 +1,12 @@
+export function getErrorObject(error: string): Record<string, string> {
+  if (!error) return {};
+  const errorStrs = error.split(`, `);
+  let fieldName: string;
+
+  return errorStrs.reduce((acc: Record<string, string>, val: string) => {
+    [, fieldName] = val.split(/`/);
+    acc[fieldName] = val;
+
+    return acc;
+  }, {});
+}

From 286438208ad7dce5915e6e7260fc94f5606d6ec2 Mon Sep 17 00:00:00 2001
From: chavda-bhavik <bhavikvchavda@gmail.com>
Date: Thu, 3 Nov 2022 13:51:31 +0530
Subject: [PATCH 09/10] feat: Added Warning icon and updated config

---
 apps/widget/src/config/colors.config.ts       |  1 +
 apps/widget/src/config/theme.config.ts        |  4 ----
 .../InvalidWarning/InvalidWarning.tsx         |  3 ++-
 apps/widget/src/icons/index.ts                |  1 +
 apps/widget/src/icons/warning.icon.tsx        | 19 +++++++++++++++++++
 5 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 apps/widget/src/icons/warning.icon.tsx

diff --git a/apps/widget/src/config/colors.config.ts b/apps/widget/src/config/colors.config.ts
index 662bcf8db..f76bac101 100644
--- a/apps/widget/src/config/colors.config.ts
+++ b/apps/widget/src/config/colors.config.ts
@@ -5,6 +5,7 @@ export const colors = {
   lightDeem: '#CCCCCC',
   lightGray: '#F8F8F8',
   black: '#000000',
+  red: '#E40000',
   danger: '#AB3022',
   lightDanger: '#FDEBEB',
   light: '#F2F9FE',
diff --git a/apps/widget/src/config/theme.config.ts b/apps/widget/src/config/theme.config.ts
index 7445fe7f2..3afeeaf25 100644
--- a/apps/widget/src/config/theme.config.ts
+++ b/apps/widget/src/config/theme.config.ts
@@ -6,9 +6,5 @@ export const mantineConfig: MantineThemeOverride = {
   fontFamily: "'Lato', sans serif",
   headings: {
     fontFamily: "'Lato', sans serif",
-    sizes: {
-      h1: { fontSize: 26 },
-      h2: { fontSize: 20 },
-    },
   },
 };
diff --git a/apps/widget/src/design-system/InvalidWarning/InvalidWarning.tsx b/apps/widget/src/design-system/InvalidWarning/InvalidWarning.tsx
index 115deac61..483e24fe2 100644
--- a/apps/widget/src/design-system/InvalidWarning/InvalidWarning.tsx
+++ b/apps/widget/src/design-system/InvalidWarning/InvalidWarning.tsx
@@ -1,4 +1,5 @@
 import { Tooltip } from '@mantine/core';
+import { colors } from '../../config/colors.config';
 
 interface InvalidWarningProps {
   label: string;
@@ -13,7 +14,7 @@ export function InvalidWarning(props: InvalidWarningProps) {
         viewBox="-2 -2 24 24"
         width="20"
         fill="currentColor"
-        style={{ verticalAlign: 'middle', float: 'right', cursor: 'pointer', color: '#e40000' }}
+        style={{ verticalAlign: 'middle', float: 'right', cursor: 'pointer', color: colors.red }}
       >
         {/* eslint-disable-next-line max-len */}
         <path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-13a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V6a1 1 0 0 1 1-1zm0 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
diff --git a/apps/widget/src/icons/index.ts b/apps/widget/src/icons/index.ts
index 7994e6965..5a6ed639e 100644
--- a/apps/widget/src/icons/index.ts
+++ b/apps/widget/src/icons/index.ts
@@ -4,3 +4,4 @@ export * from './cross.icon';
 export * from './chevron-down.icon';
 export * from './green-check.icon';
 export * from './download.icon';
+export * from './warning.icon';
diff --git a/apps/widget/src/icons/warning.icon.tsx b/apps/widget/src/icons/warning.icon.tsx
new file mode 100644
index 000000000..455193b6b
--- /dev/null
+++ b/apps/widget/src/icons/warning.icon.tsx
@@ -0,0 +1,19 @@
+import { IIcon } from '@types';
+
+export function Warning(props: IIcon) {
+  const { className, styles, fill } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="-2 -2 24 24"
+      width="24"
+      fill={fill || '#E40000'}
+      className={className}
+      style={styles}
+    >
+      {/* eslint-disable-next-line max-len */}
+      <path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-13a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V6a1 1 0 0 1 1-1zm0 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
+    </svg>
+  );
+}

From eaa750d8c2a91b5b7e152f72cf8ac5ff6c77a75d Mon Sep 17 00:00:00 2001
From: chavda-bhavik <bhavikvchavda@gmail.com>
Date: Thu, 3 Nov 2022 14:41:14 +0530
Subject: [PATCH 10/10] feat: Added left-icon to Button and added Download icon

---
 apps/widget/src/design-system/Button/Button.tsx | 15 ++++++++++++---
 apps/widget/src/icons/download.icon.tsx         | 11 ++++-------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/apps/widget/src/design-system/Button/Button.tsx b/apps/widget/src/design-system/Button/Button.tsx
index 0350160a9..a9ac94ccf 100644
--- a/apps/widget/src/design-system/Button/Button.tsx
+++ b/apps/widget/src/design-system/Button/Button.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import { Button as MantineButton, MantineSize } from '@mantine/core';
 
 interface IButtonProps {
@@ -8,13 +8,22 @@ interface IButtonProps {
   onClick?: () => void;
   size?: MantineSize;
   color?: 'blue' | 'red';
+  leftIcon?: ReactNode;
 }
 
 export function Button(props: PropsWithChildren<IButtonProps>) {
-  const { variant, disabled, children, loading, onClick, size = 'md', color } = props;
+  const { variant, disabled, children, loading, onClick, size = 'md', color, leftIcon } = props;
 
   return (
-    <MantineButton disabled={disabled} variant={variant} loading={loading} onClick={onClick} size={size} color={color}>
+    <MantineButton
+      leftIcon={leftIcon}
+      disabled={disabled}
+      variant={variant}
+      loading={loading}
+      onClick={onClick}
+      size={size}
+      color={color}
+    >
       {children}
     </MantineButton>
   );
diff --git a/apps/widget/src/icons/download.icon.tsx b/apps/widget/src/icons/download.icon.tsx
index 1e7bacfc5..0b5ee11e8 100644
--- a/apps/widget/src/icons/download.icon.tsx
+++ b/apps/widget/src/icons/download.icon.tsx
@@ -4,17 +4,14 @@ export function Download(props: IIcon) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
+      viewBox="-5 -5 24 24"
       width="24"
-      height="24"
-      viewBox="0 0 24 24"
+      fill="currentColor"
       className={props?.className}
       style={props?.styles}
     >
-      <path d="M0,0H24V24H0Z" fill="none" />
-      <path
-        d="M3,19H21v2H3Zm10-5.828L19.071,7.1l1.414,1.414L12,17,3.515,8.515,4.929,7.1,11,13.17V2h2Z"
-        fill={props?.fill || '#24a0ed'}
-      />
+      {/* eslint-disable-next-line max-len */}
+      <path d="M8 6.641l1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0v5.641zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z" />
     </svg>
   );
 }