From a44938643c710f42134ad6ee252f2593af2e1245 Mon Sep 17 00:00:00 2001
From: "shashank.mishra_once" <shashank.mishra_once@DESKTOP-5V3TR90>
Date: Wed, 12 Jun 2024 12:47:16 +0530
Subject: [PATCH 01/11] feat: ONCEHUB-73610 Optimized select types for dropdown
 multiselect and quick select

---
 .../select.type.ts}                           |  3 ++-
 src/lib/components/multi-select/README.md     |  9 ++++---
 .../multi-select/multi-select.stories.tsx     |  2 +-
 .../components/multi-select/multi-select.tsx  |  2 +-
 .../components/quick-multi-select/README.md   |  9 ++++---
 .../quick-multi-select.stories.tsx            |  2 +-
 .../quick-multi-select/quick-multi-select.tsx |  4 +--
 .../quick-multi-select.type.ts                |  6 -----
 src/lib/components/quick-select/README.md     |  9 ++++---
 .../quick-select/quick-select.stories.tsx     |  3 +--
 .../components/quick-select/quick-select.tsx  |  2 +-
 .../quick-select/quick-select.type.ts         |  6 -----
 src/lib/components/select/README.md           |  4 +--
 src/lib/components/select/auto-complete.tsx   | 16 ++++++------
 src/lib/components/select/select.stories.tsx  | 25 +++++++++----------
 src/lib/components/select/select.tsx          | 10 ++++----
 src/lib/components/select/select.types.ts     |  6 -----
 17 files changed, 51 insertions(+), 67 deletions(-)
 rename src/lib/{components/multi-select/multi-select.type.ts => Models/select.type.ts} (68%)
 delete mode 100644 src/lib/components/quick-multi-select/quick-multi-select.type.ts
 delete mode 100644 src/lib/components/quick-select/quick-select.type.ts
 delete mode 100644 src/lib/components/select/select.types.ts

diff --git a/src/lib/components/multi-select/multi-select.type.ts b/src/lib/Models/select.type.ts
similarity index 68%
rename from src/lib/components/multi-select/multi-select.type.ts
rename to src/lib/Models/select.type.ts
index 2bdd689..0051fb2 100644
--- a/src/lib/components/multi-select/multi-select.type.ts
+++ b/src/lib/Models/select.type.ts
@@ -1,6 +1,7 @@
 export interface Option {
   id: string;
   text: string;
-  order: number;
+  order?: number;
+  avatar?: string;
   disabled?: boolean;
 }
diff --git a/src/lib/components/multi-select/README.md b/src/lib/components/multi-select/README.md
index b59c199..b61efbc 100644
--- a/src/lib/components/multi-select/README.md
+++ b/src/lib/components/multi-select/README.md
@@ -19,10 +19,11 @@ Here's an example of how to define the `Option` interface:
 
 ```jsx
 export interface Option {
-	id: number;
-	text: string;
-	order?: number;
-	disabled?: boolean;
+    id: string;
+    text: string;
+    order: number;
+    avatar?: string;
+    disabled?: boolean;
 }
 ```
 
diff --git a/src/lib/components/multi-select/multi-select.stories.tsx b/src/lib/components/multi-select/multi-select.stories.tsx
index ea8c5a0..9822a8a 100644
--- a/src/lib/components/multi-select/multi-select.stories.tsx
+++ b/src/lib/components/multi-select/multi-select.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { MultiSelect } from './multi-select';
-import { Option } from './multi-select.type';
+import { Option } from './../../Models/select.type';
 
 const meta: Meta<typeof MultiSelect> = {
   title: 'Basic/MultiSelect',
diff --git a/src/lib/components/multi-select/multi-select.tsx b/src/lib/components/multi-select/multi-select.tsx
index 3ecce0c..5f249c4 100644
--- a/src/lib/components/multi-select/multi-select.tsx
+++ b/src/lib/components/multi-select/multi-select.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, CSSProperties, KeyboardEvent } from 'react';
-import { Option } from './multi-select.type';
+import { Option } from './../../Models/select.type';
 import { Button } from '../button/button';
 import styles from './multi-select.module.scss';
 import luminance from '@oncehub/relative-luminance';
diff --git a/src/lib/components/quick-multi-select/README.md b/src/lib/components/quick-multi-select/README.md
index 715af89..eb16152 100644
--- a/src/lib/components/quick-multi-select/README.md
+++ b/src/lib/components/quick-multi-select/README.md
@@ -19,10 +19,11 @@ Here's an example of how to define the `Option` interface:
 
 ```jsx
 export interface Option {
-	id: number;
-	text: string;
-	order?: number;
-	disabled?: boolean;
+    id: string;
+    text: string;
+    order: number;
+    avatar?: string;
+    disabled?: boolean;
 }
 ```
 
diff --git a/src/lib/components/quick-multi-select/quick-multi-select.stories.tsx b/src/lib/components/quick-multi-select/quick-multi-select.stories.tsx
index c5149cb..7adb913 100644
--- a/src/lib/components/quick-multi-select/quick-multi-select.stories.tsx
+++ b/src/lib/components/quick-multi-select/quick-multi-select.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { QuickMultiSelect } from './quick-multi-select';
-import { Option } from './quick-multi-select.type';
+import { Option } from './../../Models/select.type';
 
 const meta: Meta<typeof QuickMultiSelect> = {
   title: 'Basic/QuickMultiSelect',
diff --git a/src/lib/components/quick-multi-select/quick-multi-select.tsx b/src/lib/components/quick-multi-select/quick-multi-select.tsx
index c9221f6..6f5a0b8 100644
--- a/src/lib/components/quick-multi-select/quick-multi-select.tsx
+++ b/src/lib/components/quick-multi-select/quick-multi-select.tsx
@@ -1,7 +1,7 @@
-import React, { CSSProperties, useEffect, useRef, useState } from 'react';
+import React, { CSSProperties, useRef, useState } from 'react';
 import { Checkbox } from '../checkbox/checkbox';
 import styles from './quick-multi-select.module.scss';
-import { Option } from './quick-multi-select.type';
+import { Option } from './../../Models/select.type';
 import luminance from '@oncehub/relative-luminance';
 import { ColorsService } from '../colors.service';
 
diff --git a/src/lib/components/quick-multi-select/quick-multi-select.type.ts b/src/lib/components/quick-multi-select/quick-multi-select.type.ts
deleted file mode 100644
index 2bdd689..0000000
--- a/src/lib/components/quick-multi-select/quick-multi-select.type.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface Option {
-  id: string;
-  text: string;
-  order: number;
-  disabled?: boolean;
-}
diff --git a/src/lib/components/quick-select/README.md b/src/lib/components/quick-select/README.md
index 8217807..12eed64 100644
--- a/src/lib/components/quick-select/README.md
+++ b/src/lib/components/quick-select/README.md
@@ -19,10 +19,11 @@ Here's an example of how to define the `Option` interface:
 
 ```jsx
 export interface Option {
-	id: number;
-	text: string;
-	order?: number;
-	disbled?: boolean;
+    id: string;
+    text: string;
+    order: number;
+    avatar?: string;
+    disabled?: boolean;
 }
 ```
 
diff --git a/src/lib/components/quick-select/quick-select.stories.tsx b/src/lib/components/quick-select/quick-select.stories.tsx
index 5616516..843ea09 100644
--- a/src/lib/components/quick-select/quick-select.stories.tsx
+++ b/src/lib/components/quick-select/quick-select.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { QuickSelect } from './quick-select';
-import { Option } from './quick-select.type';
+import { Option } from './../../Models/select.type';
 
 const meta: Meta<typeof QuickSelect> = {
   title: 'Basic/QuickSelect',
diff --git a/src/lib/components/quick-select/quick-select.tsx b/src/lib/components/quick-select/quick-select.tsx
index 160453b..ffff2c7 100644
--- a/src/lib/components/quick-select/quick-select.tsx
+++ b/src/lib/components/quick-select/quick-select.tsx
@@ -1,7 +1,7 @@
 import { CSSProperties, FC, useState } from 'react';
 import styles from './quick-select.module.scss';
 import luminance from '@oncehub/relative-luminance';
-import { Option } from './quick-select.type';
+import { Option } from './../../Models/select.type';
 import { ColorsService } from '../colors.service';
 
 interface Props {
diff --git a/src/lib/components/quick-select/quick-select.type.ts b/src/lib/components/quick-select/quick-select.type.ts
deleted file mode 100644
index 2bdd689..0000000
--- a/src/lib/components/quick-select/quick-select.type.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface Option {
-  id: string;
-  text: string;
-  order: number;
-  disabled?: boolean;
-}
diff --git a/src/lib/components/select/README.md b/src/lib/components/select/README.md
index 62f0abe..abe6910 100644
--- a/src/lib/components/select/README.md
+++ b/src/lib/components/select/README.md
@@ -36,7 +36,7 @@ const people = [
 # Dropdown without search
 
 ```ts
-const [selected, setSelected] = useState<IOption | null>(people.length ? people[0] : null);
+const [selected, setSelected] = useState<Option | null>(people.length ? people[0] : null);
 return (
 	<>
 		<span>Drop down without search</span>
@@ -81,7 +81,7 @@ return (
 # Dropdown with search
 
 ```ts
-const [selected, setSelected] = useState<IOption | null>(people.length ? people[0] : null);
+const [selected, setSelected] = useState<Option | null>(people.length ? people[0] : null);
 const [searchQuery, setSearchQuery] = useState('');
 const onSelectDropDown = (object: any) => {
 	setSelected(object);
diff --git a/src/lib/components/select/auto-complete.tsx b/src/lib/components/select/auto-complete.tsx
index ac2acb2..4cc214f 100644
--- a/src/lib/components/select/auto-complete.tsx
+++ b/src/lib/components/select/auto-complete.tsx
@@ -1,6 +1,6 @@
 import { FC, useRef, useEffect, CSSProperties, useState } from 'react';
 import { Combobox } from '@headlessui/react';
-import { IOption } from './select.types';
+import { Option } from './../../Models/select.type';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import luminance from '@oncehub/relative-luminance';
 import { ColorsService } from '../colors.service';
@@ -8,8 +8,8 @@ import { createPortal } from 'react-dom';
 
 interface Props {
   children: any;
-  selected: IOption | null;
-  onSelect: (obj: IOption) => void;
+  selected: Option | null;
+  onSelect: (obj: Option) => void;
   setQuery: (query: any) => void;
   disable?: boolean;
   clearSearch?: boolean;
@@ -38,7 +38,7 @@ export const AutoComplete: FC<Props> = ({
 
   useEffect(() => {
     if (inputRef.current && selected) {
-      inputRef.current.value = selected.label || '';
+      inputRef.current.value = selected.text || '';
     }
   }, [selected]);
 
@@ -104,7 +104,7 @@ export const AutoComplete: FC<Props> = ({
     };
   }, []);
 
-  const onSelection = (option: IOption) => {
+  const onSelection = (option: Option) => {
     onSelect(option);
     handlingCursorPosition();
   };
@@ -113,7 +113,7 @@ export const AutoComplete: FC<Props> = ({
     getDropdownPosition();
     setIsFocused(true);
     if (inputRef.current && selected) {
-      inputRef.current.value = selected.label || '';
+      inputRef.current.value = selected.text || '';
     }
     if (inputRef.current && inputButton.current) {
       if (clearSearch) {
@@ -124,9 +124,9 @@ export const AutoComplete: FC<Props> = ({
     }
   };
 
-  const displayInputValue = (option: IOption) => {
+  const displayInputValue = (option: Option) => {
     handlingCursorPosition();
-    return option?.label;
+    return option?.text;
   };
 
   const handlingCursorPosition = () => {
diff --git a/src/lib/components/select/select.stories.tsx b/src/lib/components/select/select.stories.tsx
index 4bb9cc3..70ad74d 100644
--- a/src/lib/components/select/select.stories.tsx
+++ b/src/lib/components/select/select.stories.tsx
@@ -1,9 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-
 import { Select } from './select';
 import { SelectOption, SelectOptions } from './select-options';
-import { IOption } from './select.types';
+import { Option } from './../../Models/select.type';
 
 const meta: Meta<typeof Select> = {
   title: 'Basic/Select',
@@ -32,22 +31,22 @@ const meta: Meta<typeof Select> = {
 export default meta;
 type Story = StoryObj<typeof Select>;
 
-const options: IOption[] = [
+const options: Option[] = [
   {
-    value: '1',
-    label: 'Wade Cooper',
+    id: '1',
+    text: 'Wade Cooper',
   },
   {
-    value: '2',
-    label: 'Arlene Mccoy',
+    id: '2',
+    text: 'Arlene Mccoy',
   },
   {
-    value: '3',
-    label: 'Devon Webb',
+    id: '3',
+    text: 'Devon Webb',
   },
   {
-    value: '4',
-    label: 'Tom Cook',
+    id: '4',
+    text: 'Tom Cook',
   },
 ];
 
@@ -59,7 +58,7 @@ const children = () => {
       {options.map((option) => (
         <SelectOption
           disable={false}
-          key={option.value}
+          key={option.id}
           className={({ active }: { active: boolean }) =>
             `tw-relative tw-cursor-default tw-select-none tw-py-2 tw-pl-4 tw-pr-4 ${
               active ? 'tw-bg-[#EEEEEE] tw-text-[#333333]' : ''
@@ -70,7 +69,7 @@ const children = () => {
           {({ selected, active }: { selected: boolean; active: boolean }) => (
             <div className="tw-flex tw-items-center">
               <span className={`tw-block tw-truncate ${selected ? 'tw-font-medium' : 'tw-font-normal'}`}>
-                {option.label}
+                {option.text}
               </span>
             </div>
           )}
diff --git a/src/lib/components/select/select.tsx b/src/lib/components/select/select.tsx
index 652daff..d3ed8e8 100644
--- a/src/lib/components/select/select.tsx
+++ b/src/lib/components/select/select.tsx
@@ -1,14 +1,14 @@
 import { FC, useEffect, useRef, useState } from 'react';
 import { Listbox } from '@headlessui/react';
-import { IOption } from './select.types';
+import { Option } from './../../Models/select.type';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import luminance from '@oncehub/relative-luminance';
 import { ColorsService } from '../colors.service';
 import { createPortal } from 'react-dom';
 interface Props {
   children: any;
-  selected: IOption | null;
-  onSelect: (obj: IOption) => void;
+  selected: Option | null;
+  onSelect: (obj: Option) => void;
   themeColor?: string;
 }
 interface IDropdownPosition {
@@ -26,7 +26,7 @@ export const Select: FC<Props> = ({ children, selected, onSelect, themeColor })
   const pageScrollHeight = useRef<number>(0);
 
   let borderColor = '#333333';
-  const onSelection = (option: IOption): void => {
+  const onSelection = (option: Option): void => {
     onSelect(option);
   };
   const handleFocus = (): void => {
@@ -133,7 +133,7 @@ export const Select: FC<Props> = ({ children, selected, onSelect, themeColor })
                   {selected.avatar && (
                     <img src={selected.avatar} alt="" className="tw-mr-2 tw-h-5 tw-w-5 tw-flex-shrink-0" />
                   )}
-                  <span className="tw-block tw-truncate">{selected.label}</span>
+                  <span className="tw-block tw-truncate">{selected.text}</span>
                 </span>
               )}
               <span className="tw-pointer-events-none tw-absolute tw-inset-y-0 tw-right-0 tw-flex tw-items-center tw-pr-2">
diff --git a/src/lib/components/select/select.types.ts b/src/lib/components/select/select.types.ts
deleted file mode 100644
index f9a5093..0000000
--- a/src/lib/components/select/select.types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface IOption {
-  value: string;
-  label: string;
-  avatar?: string;
-  disable?: boolean;
-}

From 305ba932250d0242d3745fde3374ecbd7e1dbeae Mon Sep 17 00:00:00 2001
From: "shashank.mishra_once" <shashank.mishra_once@DESKTOP-5V3TR90>
Date: Wed, 12 Jun 2024 17:31:15 +0530
Subject: [PATCH 02/11] Dropdown issue related to single select is fixed

---
 src/lib/components/select/select.stories.tsx | 50 ++++++++++----------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/select/select.stories.tsx b/src/lib/components/select/select.stories.tsx
index 70ad74d..ab7f358 100644
--- a/src/lib/components/select/select.stories.tsx
+++ b/src/lib/components/select/select.stories.tsx
@@ -52,32 +52,30 @@ const options: Option[] = [
 
 const handleSelectionChange = () => {};
 
-const children = () => {
-  return (
-    <SelectOptions setQuery={() => {}}>
-      {options.map((option) => (
-        <SelectOption
-          disable={false}
-          key={option.id}
-          className={({ active }: { active: boolean }) =>
-            `tw-relative tw-cursor-default tw-select-none tw-py-2 tw-pl-4 tw-pr-4 ${
-              active ? 'tw-bg-[#EEEEEE] tw-text-[#333333]' : ''
-            }`
-          }
-          value={option}
-        >
-          {({ selected, active }: { selected: boolean; active: boolean }) => (
-            <div className="tw-flex tw-items-center">
-              <span className={`tw-block tw-truncate ${selected ? 'tw-font-medium' : 'tw-font-normal'}`}>
-                {option.text}
-              </span>
-            </div>
-          )}
-        </SelectOption>
-      ))}
-    </SelectOptions>
-  );
-};
+const children = (
+  <SelectOptions setQuery={() => {}}>
+    {options.map((option) => (
+      <SelectOption
+        disable={false}
+        key={option.id}
+        className={({ active }: { active: boolean }) =>
+          `tw-relative tw-cursor-default tw-select-none tw-py-2 tw-pl-4 tw-pr-4 ${
+            active ? 'tw-bg-[#EEEEEE] tw-text-[#333333]' : ''
+          }`
+        }
+        value={option}
+      >
+        {({ selected, active }: { selected: boolean; active: boolean }) => (
+          <div className="tw-flex tw-items-center">
+            <span className={`tw-block tw-truncate ${selected ? 'tw-font-medium' : 'tw-font-normal'}`}>
+              {option.text}
+            </span>
+          </div>
+        )}
+      </SelectOption>
+    ))}
+  </SelectOptions>
+);
 
 export const WithoutTheme: Story = {
   args: {

From 4622fa2454ea7623224153db6bee6759cad5d9d3 Mon Sep 17 00:00:00 2001
From: "shashank.mishra_once" <shashank.mishra_once@DESKTOP-5V3TR90>
Date: Wed, 26 Jun 2024 12:58:09 +0530
Subject: [PATCH 03/11] fix: ONCEHUB-73610 Fixed file name for select type

---
 package.json                                                    | 2 +-
 src/lib/components/multi-select/multi-select.stories.tsx        | 2 +-
 src/lib/components/multi-select/multi-select.tsx                | 2 +-
 .../quick-multi-select/quick-multi-select.stories.tsx           | 2 +-
 src/lib/components/quick-multi-select/quick-multi-select.tsx    | 2 +-
 src/lib/components/quick-select/quick-select.stories.tsx        | 2 +-
 src/lib/components/quick-select/quick-select.tsx                | 2 +-
 src/lib/components/select/auto-complete.tsx                     | 2 +-
 src/lib/components/select/select.stories.tsx                    | 2 +-
 src/lib/components/select/select.tsx                            | 2 +-
 src/lib/{Models => interfaces}/select.type.ts                   | 0
 11 files changed, 10 insertions(+), 10 deletions(-)
 rename src/lib/{Models => interfaces}/select.type.ts (100%)

diff --git a/package.json b/package.json
index b3a17c1..d6e0b95 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@oncehub/ui-react",
   "private": false,
-  "version": "1.4.13",
+  "version": "1.4.13-beta.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/scheduleonce/once-ui-react"
diff --git a/src/lib/components/multi-select/multi-select.stories.tsx b/src/lib/components/multi-select/multi-select.stories.tsx
index 9822a8a..b291372 100644
--- a/src/lib/components/multi-select/multi-select.stories.tsx
+++ b/src/lib/components/multi-select/multi-select.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { MultiSelect } from './multi-select';
-import { Option } from './../../Models/select.type';
+import { Option } from '../../interfaces/select.type';
 
 const meta: Meta<typeof MultiSelect> = {
   title: 'Basic/MultiSelect',
diff --git a/src/lib/components/multi-select/multi-select.tsx b/src/lib/components/multi-select/multi-select.tsx
index 5f249c4..bcef286 100644
--- a/src/lib/components/multi-select/multi-select.tsx
+++ b/src/lib/components/multi-select/multi-select.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, CSSProperties, KeyboardEvent } from 'react';
-import { Option } from './../../Models/select.type';
+import { Option } from '../../interfaces/select.type';
 import { Button } from '../button/button';
 import styles from './multi-select.module.scss';
 import luminance from '@oncehub/relative-luminance';
diff --git a/src/lib/components/quick-multi-select/quick-multi-select.stories.tsx b/src/lib/components/quick-multi-select/quick-multi-select.stories.tsx
index 7adb913..552d11b 100644
--- a/src/lib/components/quick-multi-select/quick-multi-select.stories.tsx
+++ b/src/lib/components/quick-multi-select/quick-multi-select.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { QuickMultiSelect } from './quick-multi-select';
-import { Option } from './../../Models/select.type';
+import { Option } from '../../interfaces/select.type';
 
 const meta: Meta<typeof QuickMultiSelect> = {
   title: 'Basic/QuickMultiSelect',
diff --git a/src/lib/components/quick-multi-select/quick-multi-select.tsx b/src/lib/components/quick-multi-select/quick-multi-select.tsx
index 6f5a0b8..316378f 100644
--- a/src/lib/components/quick-multi-select/quick-multi-select.tsx
+++ b/src/lib/components/quick-multi-select/quick-multi-select.tsx
@@ -1,7 +1,7 @@
 import React, { CSSProperties, useRef, useState } from 'react';
 import { Checkbox } from '../checkbox/checkbox';
 import styles from './quick-multi-select.module.scss';
-import { Option } from './../../Models/select.type';
+import { Option } from '../../interfaces/select.type';
 import luminance from '@oncehub/relative-luminance';
 import { ColorsService } from '../colors.service';
 
diff --git a/src/lib/components/quick-select/quick-select.stories.tsx b/src/lib/components/quick-select/quick-select.stories.tsx
index 843ea09..4bd7bf0 100644
--- a/src/lib/components/quick-select/quick-select.stories.tsx
+++ b/src/lib/components/quick-select/quick-select.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { QuickSelect } from './quick-select';
-import { Option } from './../../Models/select.type';
+import { Option } from '../../interfaces/select.type';
 
 const meta: Meta<typeof QuickSelect> = {
   title: 'Basic/QuickSelect',
diff --git a/src/lib/components/quick-select/quick-select.tsx b/src/lib/components/quick-select/quick-select.tsx
index ffff2c7..7106578 100644
--- a/src/lib/components/quick-select/quick-select.tsx
+++ b/src/lib/components/quick-select/quick-select.tsx
@@ -1,7 +1,7 @@
 import { CSSProperties, FC, useState } from 'react';
 import styles from './quick-select.module.scss';
 import luminance from '@oncehub/relative-luminance';
-import { Option } from './../../Models/select.type';
+import { Option } from '../../interfaces/select.type';
 import { ColorsService } from '../colors.service';
 
 interface Props {
diff --git a/src/lib/components/select/auto-complete.tsx b/src/lib/components/select/auto-complete.tsx
index 4cc214f..7fe93b1 100644
--- a/src/lib/components/select/auto-complete.tsx
+++ b/src/lib/components/select/auto-complete.tsx
@@ -1,6 +1,6 @@
 import { FC, useRef, useEffect, CSSProperties, useState } from 'react';
 import { Combobox } from '@headlessui/react';
-import { Option } from './../../Models/select.type';
+import { Option } from '../../interfaces/select.type';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import luminance from '@oncehub/relative-luminance';
 import { ColorsService } from '../colors.service';
diff --git a/src/lib/components/select/select.stories.tsx b/src/lib/components/select/select.stories.tsx
index ab7f358..b04c98d 100644
--- a/src/lib/components/select/select.stories.tsx
+++ b/src/lib/components/select/select.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { Select } from './select';
 import { SelectOption, SelectOptions } from './select-options';
-import { Option } from './../../Models/select.type';
+import { Option } from '../../interfaces/select.type';
 
 const meta: Meta<typeof Select> = {
   title: 'Basic/Select',
diff --git a/src/lib/components/select/select.tsx b/src/lib/components/select/select.tsx
index cd621b6..6d9a15f 100644
--- a/src/lib/components/select/select.tsx
+++ b/src/lib/components/select/select.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useRef, useState } from 'react';
 import { Listbox } from '@headlessui/react';
-import { Option } from './../../Models/select.type';
+import { Option } from '../../interfaces/select.type';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import luminance from '@oncehub/relative-luminance';
 import { ColorsService } from '../colors.service';
diff --git a/src/lib/Models/select.type.ts b/src/lib/interfaces/select.type.ts
similarity index 100%
rename from src/lib/Models/select.type.ts
rename to src/lib/interfaces/select.type.ts

From 3d7d346bc71c4f8a7dd036b8610f85c4173aecd0 Mon Sep 17 00:00:00 2001
From: "shashank.mishra_once" <shashank.mishra_once@DESKTOP-5V3TR90>
Date: Wed, 26 Jun 2024 13:01:33 +0530
Subject: [PATCH 04/11] fix: ONCEHUB-73610 Updated package version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d6e0b95..15b7600 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@oncehub/ui-react",
   "private": false,
-  "version": "1.4.13-beta.1.0",
+  "version": "1.4.13-beta.1.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/scheduleonce/once-ui-react"

From 80accb226b1b01cf17f78ce6944b22eb4cefebed Mon Sep 17 00:00:00 2001
From: "shashank.mishra_once" <shashank.mishra_once@DESKTOP-5V3TR90>
Date: Wed, 26 Jun 2024 13:30:46 +0530
Subject: [PATCH 05/11] fix: ONCEHUB-73610 fixed index file issue

---
 src/lib/components/quick-multi-select/index.tsx | 1 -
 src/lib/components/select/index.tsx             | 1 -
 src/lib/interfaces/index.tsx                    | 1 +
 3 files changed, 1 insertion(+), 2 deletions(-)
 create mode 100644 src/lib/interfaces/index.tsx

diff --git a/src/lib/components/quick-multi-select/index.tsx b/src/lib/components/quick-multi-select/index.tsx
index cf63bfe..64abd60 100644
--- a/src/lib/components/quick-multi-select/index.tsx
+++ b/src/lib/components/quick-multi-select/index.tsx
@@ -1,2 +1 @@
 export * from './quick-multi-select';
-export * from './quick-multi-select.type';
diff --git a/src/lib/components/select/index.tsx b/src/lib/components/select/index.tsx
index 6624d50..548095b 100644
--- a/src/lib/components/select/index.tsx
+++ b/src/lib/components/select/index.tsx
@@ -2,4 +2,3 @@ export * from './select';
 export * from './select-options';
 export * from './auto-complete';
 export * from './options';
-export * from './select.types';
diff --git a/src/lib/interfaces/index.tsx b/src/lib/interfaces/index.tsx
new file mode 100644
index 0000000..e4db6a5
--- /dev/null
+++ b/src/lib/interfaces/index.tsx
@@ -0,0 +1 @@
+export * from './select.type';

From 5dc19ace05083cd8132569d835c19fdab2fedec2 Mon Sep 17 00:00:00 2001
From: "shashank.mishra_once" <shashank.mishra_once@DESKTOP-5V3TR90>
Date: Wed, 26 Jun 2024 13:33:46 +0530
Subject: [PATCH 06/11] fix: ONCEHUB-73610 Updated version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 15b7600..2f5bddc 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@oncehub/ui-react",
   "private": false,
-  "version": "1.4.13-beta.1.1",
+  "version": "1.4.13-beta.1.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/scheduleonce/once-ui-react"

From e3d530438bdc4307b60870d561cab97138994611 Mon Sep 17 00:00:00 2001
From: "shashank.mishra_once" <shashank.mishra_once@DESKTOP-5V3TR90>
Date: Fri, 28 Jun 2024 12:03:01 +0530
Subject: [PATCH 07/11] fix:ONCEHUB-73610 fixed css for auto-complete and added
 export in interface

---
 package-lock.json                           | 4 ++--
 package.json                                | 2 +-
 src/lib/components/select/auto-complete.tsx | 2 +-
 src/lib/index.ts                            | 1 +
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 71a9386..7b02d1f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@oncehub/ui-react",
-  "version": "1.4.13",
+  "version": "1.4.13-beta.1.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@oncehub/ui-react",
-      "version": "1.4.13",
+      "version": "1.4.13-beta.1.3",
       "devDependencies": {
         "@babel/core": "^7.23.2",
         "@headlessui/react": "^1.7.17",
diff --git a/package.json b/package.json
index 2f5bddc..ad2ece6 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@oncehub/ui-react",
   "private": false,
-  "version": "1.4.13-beta.1.2",
+  "version": "1.4.13-beta.1.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/scheduleonce/once-ui-react"
diff --git a/src/lib/components/select/auto-complete.tsx b/src/lib/components/select/auto-complete.tsx
index 7fe93b1..f18ee71 100644
--- a/src/lib/components/select/auto-complete.tsx
+++ b/src/lib/components/select/auto-complete.tsx
@@ -167,7 +167,7 @@ export const AutoComplete: FC<Props> = ({
             <Combobox.Input
               ref={inputRef}
               data-testid={'select-input'}
-              className="tw-h-full tw-w-full tw-border-0 tw-border-b-[1px] tw-border-b-[#333333] tw-pb-2 tw-pl-[10px] tw-pr-10 tw-pt-2 tw-text-base tw-leading-5 tw-placeholder-[#666666] tw-shadow-none focus:tw-border-b-2 focus:tw-border-b-[#006bb1] focus:tw-pb-[7px] focus:tw-outline-none focus:tw-ring-[0px] focus-visible:tw-ring-[0px]"
+              className="tw-h-full tw-w-full tw-border-0 tw-border-b-[1px] tw-border-b-[#333333] tw-pb-2 tw-pl-[10px] tw-pr-10 tw-pt-2 tw-text-base tw-leading-5 tw-truncate tw-placeholder-[#666666] tw-shadow-none focus:tw-border-b-2 focus:tw-border-b-[#006bb1] focus:tw-pb-[7px] focus:tw-outline-none focus:tw-ring-[0px] focus-visible:tw-ring-[0px]"
               displayValue={displayInputValue}
               onChange={(event) => {
                 setQuery(event.target.value);
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 5418566..8723db7 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,2 +1,3 @@
 import './tailwind/theme.css';
 export * from './components';
+export * from './interfaces';

From c2e3b0eb772bd5b281c70c60d9df9f44d829a798 Mon Sep 17 00:00:00 2001
From: "shashank.mishra_once" <shashank.mishra_once@DESKTOP-5V3TR90>
Date: Fri, 28 Jun 2024 15:37:04 +0530
Subject: [PATCH 08/11] fix: ONCEHUB-73610 Using IOption instead of Option

---
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 src/lib/components/multi-select/README.md     | 35 +++++++--------
 .../multi-select/multi-select.stories.tsx     | 12 +++---
 .../components/multi-select/multi-select.tsx  | 38 ++++++++--------
 .../components/quick-multi-select/README.md   | 33 +++++++-------
 .../quick-multi-select.stories.tsx            | 12 +++---
 .../quick-multi-select/quick-multi-select.tsx | 40 +++++++++--------
 src/lib/components/quick-select/README.md     | 43 ++++++++++---------
 .../quick-select/quick-select.stories.tsx     | 12 +++---
 .../components/quick-select/quick-select.tsx  | 26 +++++------
 src/lib/components/select/README.md           |  4 +-
 src/lib/components/select/auto-complete.tsx   | 16 +++----
 src/lib/components/select/select.stories.tsx  | 24 +++++------
 src/lib/components/select/select.tsx          | 10 ++---
 src/lib/interfaces/select.type.ts             |  8 ++--
 16 files changed, 160 insertions(+), 159 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7b02d1f..d1396d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@oncehub/ui-react",
-  "version": "1.4.13-beta.1.3",
+  "version": "1.4.13-beta.1.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@oncehub/ui-react",
-      "version": "1.4.13-beta.1.3",
+      "version": "1.4.13-beta.1.4",
       "devDependencies": {
         "@babel/core": "^7.23.2",
         "@headlessui/react": "^1.7.17",
diff --git a/package.json b/package.json
index ad2ece6..eefbd8e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@oncehub/ui-react",
   "private": false,
-  "version": "1.4.13-beta.1.3",
+  "version": "1.4.13-beta.1.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/scheduleonce/once-ui-react"
diff --git a/src/lib/components/multi-select/README.md b/src/lib/components/multi-select/README.md
index b61efbc..a24c1a8 100644
--- a/src/lib/components/multi-select/README.md
+++ b/src/lib/components/multi-select/README.md
@@ -6,24 +6,25 @@ Import the `MultiSelect` component into your React application:
 import MultiSelect from '@/once-ui/multi-select/multi-select';
 ```
 
-## Option Interface
+## IOption Interface
 
-Before using the `MultiSelect` component, define an `Option` interface for representing the available choices. The `Option` interface should have the following properties:
+Before using the `MultiSelect` component, define an `IOption` interface for representing the available choices. The `IOption` interface should have the following properties:
 
-- `id (number)`: A unique identifier for the option.
-- `text (string)`: The text or label associated with the option.
+- `value (string)`: A unique identifier for the option.
+- `label (string)`: The text or label associated with the option.
 - `order (number, optional)`: An optional property that specifies the order of the option in a list or display.
 - `disabled (boolean, optional)`: An optional property that specifies whether the option is disabled or not.
+- `avatar (string, optional)`: An optional property that specifies the image path.
 
-Here's an example of how to define the `Option` interface:
+Here's an example of how to define the `IOption` interface:
 
 ```jsx
-export interface Option {
-    id: string;
-    text: string;
-    order: number;
-    avatar?: string;
-    disabled?: boolean;
+export interface IOption {
+  value: string;
+  label: string;
+  order?: number;
+  avatar?: string;
+  disable?: boolean;
 }
 ```
 
@@ -31,7 +32,7 @@ export interface Option {
 
 The `MultiSelect` component accepts the following props:
 
-- `options (Array)`: An array of Option objects representing the available choices.
+- `options (Array)`: An array of IOption objects representing the available choices.
 - `checkedValue (Array)`: An array of numbers representing the initially selected options.
 - `onSelectionChange (Function)`: A callback function that is called when the selection changes. It receives an array of selected option values.
 - `minOptions` (optional): Minimum number of options that must be selected (default: 0).
@@ -43,11 +44,11 @@ Example
 import React, { useState } from 'react';
 import MultiSelect from '@/once-ui/multi-select/multi-select';
 
-const options : Option[] = [
-	{ id: '1', text: 'Option 1', order: 1 },
-	{ id: '2', text: 'Option 2', order: 2 },
- { id: '3', text: 'Option 3', order: 3, disabled:true },
-	// Add more options here
+const options: IOption[] = [
+  { value: '1', label: 'Option 1', order: 1 },
+  { value: '2', label: 'Option 2', order: 2 },
+  { value: '3', label: 'Option 3', order: 3, disable: true },
+  //Add more options
 ];
 
 function App() {
diff --git a/src/lib/components/multi-select/multi-select.stories.tsx b/src/lib/components/multi-select/multi-select.stories.tsx
index b291372..ba0d09e 100644
--- a/src/lib/components/multi-select/multi-select.stories.tsx
+++ b/src/lib/components/multi-select/multi-select.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { MultiSelect } from './multi-select';
-import { Option } from '../../interfaces/select.type';
+import { IOption } from '../../interfaces/select.type';
 
 const meta: Meta<typeof MultiSelect> = {
   title: 'Basic/MultiSelect',
@@ -25,7 +25,7 @@ const meta: Meta<typeof MultiSelect> = {
       },
     },
     options: {
-      description: 'An array of Option objects representing the available choices.',
+      description: 'An array of IOption objects representing the available choices.',
       type: 'string',
       table: {
         defaultValue: { summary: '' },
@@ -62,10 +62,10 @@ const meta: Meta<typeof MultiSelect> = {
 export default meta;
 type Story = StoryObj<typeof MultiSelect>;
 
-const options: Option[] = [
-  { id: '1', text: 'Option 1', order: 1 },
-  { id: '2', text: 'Option 2', order: 2 },
-  { id: '3', text: 'Option 3', order: 3, disabled: true },
+const options: IOption[] = [
+  { value: '1', label: 'Option 1', order: 1 },
+  { value: '2', label: 'Option 2', order: 2 },
+  { value: '3', label: 'Option 3', order: 3, disable: true },
 ];
 const handleSelectionChange = () => {};
 
diff --git a/src/lib/components/multi-select/multi-select.tsx b/src/lib/components/multi-select/multi-select.tsx
index bcef286..c5f70c1 100644
--- a/src/lib/components/multi-select/multi-select.tsx
+++ b/src/lib/components/multi-select/multi-select.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, CSSProperties, KeyboardEvent } from 'react';
-import { Option } from '../../interfaces/select.type';
+import { IOption } from '../../interfaces/select.type';
 import { Button } from '../button/button';
 import styles from './multi-select.module.scss';
 import luminance from '@oncehub/relative-luminance';
@@ -8,7 +8,7 @@ import { createPortal } from 'react-dom';
 import PseudoCheckbox from '../common/pseudo-checkbox/pseudo-checkbox';
 
 interface Props {
-  options: Option[];
+  options: IOption[];
   checkedValue: string[];
   onSelectionChange: (val: string[]) => void;
   maxOptions?: number;
@@ -94,7 +94,7 @@ export const MultiSelect: React.FC<Props> = ({
   };
 
   useEffect(() => {
-    const filtered = options.filter((option) => option.text.toLowerCase().includes(searchTerm.toLowerCase()));
+    const filtered = options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
     filteredOptions.current = filtered;
   }, [options, searchTerm]);
 
@@ -102,28 +102,24 @@ export const MultiSelect: React.FC<Props> = ({
   const selectedText =
     selectedOptions.length > 0
       ? selectedOptions
-          .map((id) => {
-            const selectedOption = options.find((option) => option.id === id);
-            return selectedOption?.text !== null ? selectedOption?.text : '';
+          .map((value) => {
+            const selectedOption = options.find((option) => option.value === value);
+            return selectedOption?.label !== null ? selectedOption?.label : '';
           })
-          .filter((text) => text !== '')
+          .filter((label) => label !== '')
           .join(', ')
       : 'Select your option';
 
   const handleLiClick = (id: string) => {
-    const clickedOption = options.find((option) => option.id === id);
-    if (
-      clickedOption &&
-      !clickedOption.disabled &&
-      (maxOptions === undefined || selectedOptions.length <= maxOptions)
-    ) {
+    const clickedOption = options.find((option) => option.value === id);
+    if (clickedOption && !clickedOption.disable && (maxOptions === undefined || selectedOptions.length <= maxOptions)) {
       const isSelected = selectedOptions.includes(id);
       const newSelectedValues = isSelected ? selectedOptions.filter((val) => val !== id) : [...selectedOptions, id];
       const isWithinLimit = maxOptions === undefined || newSelectedValues.length <= maxOptions;
       if (isWithinLimit && dropdownOpen) {
         setSelectedOptions(newSelectedValues);
         onSelectionChange(newSelectedValues);
-        announceOption(`${clickedOption?.text} ${newSelectedValues.includes(id) ? 'selected' : 'not selected'}`);
+        announceOption(`${clickedOption?.label} ${newSelectedValues.includes(id) ? 'selected' : 'not selected'}`);
       }
     }
   };
@@ -257,7 +253,7 @@ export const MultiSelect: React.FC<Props> = ({
       }
     } else if (key === 'Enter' || key === 'Space' || key === ' ') {
       if (focusedIndex !== -1) {
-        handleLiClick(filteredOptions.current[focusedIndex].id);
+        handleLiClick(filteredOptions.current[focusedIndex].value);
       }
     } else if (key === 'Escape') {
       toggleDropDown(false);
@@ -400,23 +396,23 @@ export const MultiSelect: React.FC<Props> = ({
                           {filteredOptions.current.map((option, index) => (
                             // eslint-disable-next-line jsx-a11y/role-supports-aria-props
                             <li
-                              key={option.id}
+                              key={option.value}
                               className={`${styles.optionsList} ${index === focusedIndex ? styles.focused : ''}`}
-                              onClick={() => handleLiClick(option.id)}
+                              onClick={() => handleLiClick(option.value)}
                               aria-selected={index === focusedIndex}
                               role="option"
                             >
                               <PseudoCheckbox
                                 themeColor={themeColor}
-                                checked={selectedOptions.includes(option.id)}
+                                checked={selectedOptions.includes(option.value)}
                                 disabled={
-                                  option.disabled ||
+                                  option.disable ||
                                   (maxOptions !== undefined &&
                                     selectedOptions.length >= maxOptions &&
-                                    !selectedOptions.includes(option.id))
+                                    !selectedOptions.includes(option.value))
                                 }
                               />
-                              <span>{option.text}</span>
+                              <span>{option.label}</span>
                             </li>
                           ))}
                         </ul>
diff --git a/src/lib/components/quick-multi-select/README.md b/src/lib/components/quick-multi-select/README.md
index eb16152..34349d0 100644
--- a/src/lib/components/quick-multi-select/README.md
+++ b/src/lib/components/quick-multi-select/README.md
@@ -6,24 +6,25 @@ Import the `QuickMultiSelect` component into your React application:
 import QuickMultiSelect from '@/once-ui/quick-multi-select/quick-multi-select';
 ```
 
-## Option Interface
+## IOption Interface
 
-Before using the `QuickMultiSelect` component, define an `Option` interface for representing the available choices. The `Option` interface should have the following properties:
+Before using the `QuickMultiSelect` component, define an `IOption` interface for representing the available choices. The `IOption` interface should have the following properties:
 
-- `id (number)`: A unique identifier for the option.
-- `text (string)`: The text or label associated with the option.
+- `value (string)`: A unique identifier for the option.
+- `label (string)`: The text or label associated with the option.
 - `order (number, optional)`: An optional property that specifies the order of the option in a list or display.
 - `disabled (boolean, optional)`: An optional property that specifies whether the option is disabled or not.
+- `avatar (string, optional)`: An optional property that specifies the image path.
 
-Here's an example of how to define the `Option` interface:
+Here's an example of how to define the `IOption` interface:
 
 ```jsx
-export interface Option {
-    id: string;
-    text: string;
-    order: number;
-    avatar?: string;
-    disabled?: boolean;
+export interface IOption {
+  value: string;
+  label: string;
+  order?: number;
+  avatar?: string;
+  disable?: boolean;
 }
 ```
 
@@ -31,7 +32,7 @@ export interface Option {
 
 The `QuickMultiSelect` component accepts the following props:
 
-- `options (Array)`: An array of Option objects representing the available choices.
+- `options (Array)`: An array of IOption objects representing the available choices.
 - `checkedValue (Array)`: An array of numbers representing the initially selected options.
 - `onSelectionChange (Function)`: A callback function that is called when the selection changes. It receives an array of selected option values.
 - `maxOptions?`: Maximum number of option that can be checked;
@@ -42,10 +43,10 @@ Example
 import React, { useState } from 'react';
 import MultiSelect from '@/once-ui/multi-select/multi-select';
 
-const options = [
-	{ id: '1', text: 'Option 1', order: 1 },
-	{ id: '2', text: 'Option 2', order: 2 },
-	{ id: '3', text: 'Option 3', order: 3, disabled: true },
+const options: IOption[] = [
+  { value: '1', label: 'Option 1', order: 1 },
+  { value: '2', label: 'Option 2', order: 2 },
+  { value: '3', label: 'Option 3', order: 3, disable: true },
 	// Add more options here
 ];
 
diff --git a/src/lib/components/quick-multi-select/quick-multi-select.stories.tsx b/src/lib/components/quick-multi-select/quick-multi-select.stories.tsx
index 552d11b..cec2837 100644
--- a/src/lib/components/quick-multi-select/quick-multi-select.stories.tsx
+++ b/src/lib/components/quick-multi-select/quick-multi-select.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { QuickMultiSelect } from './quick-multi-select';
-import { Option } from '../../interfaces/select.type';
+import { IOption } from '../../interfaces/select.type';
 
 const meta: Meta<typeof QuickMultiSelect> = {
   title: 'Basic/QuickMultiSelect',
@@ -17,7 +17,7 @@ const meta: Meta<typeof QuickMultiSelect> = {
       },
     },
     options: {
-      description: 'An array of Option objects representing the available choices.',
+      description: 'An array of IOption objects representing the available choices.',
       type: 'string',
       table: {
         defaultValue: { summary: '' },
@@ -54,10 +54,10 @@ const meta: Meta<typeof QuickMultiSelect> = {
 export default meta;
 type Story = StoryObj<typeof QuickMultiSelect>;
 
-const options: Option[] = [
-  { id: '1', text: 'Option 1', order: 1 },
-  { id: '2', text: 'Option 2', order: 2 },
-  { id: '3', text: 'Option 3', order: 3, disabled: true },
+const options: IOption[] = [
+  { value: '1', label: 'Option 1', order: 1 },
+  { value: '2', label: 'Option 2', order: 2 },
+  { value: '3', label: 'Option 3', order: 3, disable: true },
 ];
 const handleSelectionChange = () => {};
 
diff --git a/src/lib/components/quick-multi-select/quick-multi-select.tsx b/src/lib/components/quick-multi-select/quick-multi-select.tsx
index 316378f..8dc77df 100644
--- a/src/lib/components/quick-multi-select/quick-multi-select.tsx
+++ b/src/lib/components/quick-multi-select/quick-multi-select.tsx
@@ -1,12 +1,12 @@
 import React, { CSSProperties, useRef, useState } from 'react';
 import { Checkbox } from '../checkbox/checkbox';
 import styles from './quick-multi-select.module.scss';
-import { Option } from '../../interfaces/select.type';
+import { IOption } from '../../interfaces/select.type';
 import luminance from '@oncehub/relative-luminance';
 import { ColorsService } from '../colors.service';
 
 interface Props {
-  options: Option[];
+  options: IOption[];
   checkedValue: string[];
   onSelectionChange: (val: string[]) => void;
   maxOptions?: number;
@@ -31,8 +31,8 @@ export const QuickMultiSelect: React.FC<Props> = ({
   let theme: string;
 
   const handleLiClick = (id: string): void => {
-    const clickedOption = options.find((option) => option.id === id);
-    if (!clickedOption || clickedOption.disabled) {
+    const clickedOption = options.find((option) => option.value === id);
+    if (!clickedOption || clickedOption.disable) {
       return;
     }
     const checkbox = checkboxRefs.current[id];
@@ -65,54 +65,56 @@ export const QuickMultiSelect: React.FC<Props> = ({
         {options.map((option) => (
           <li
             style={{ ...quickMultiSelectStyleObj, ...style }}
-            key={option.id}
+            key={option.value}
             className={`${className} ${
-              option.disabled ||
-              (maxOptions !== undefined && selectedOptions.length >= maxOptions && !selectedOptions.includes(option.id))
+              option.disable ||
+              (maxOptions !== undefined &&
+                selectedOptions.length >= maxOptions &&
+                !selectedOptions.includes(option.value))
                 ? styles.disabled
                 : ''
-            } ${selectedOptions.includes(option.id) ? styles.selected : ''}`}
-            tabIndex={option.disabled ? -1 : 0}
-            onClick={() => handleLiClick(option.id)}
+            } ${selectedOptions.includes(option.value) ? styles.selected : ''}`}
+            tabIndex={option.disable ? -1 : 0}
+            onClick={() => handleLiClick(option.value)}
             onKeyPress={(event) => {
               if (event.key === ' ' || event.code === 'Space') {
                 event.preventDefault();
-                handleLiClick(option.id);
+                handleLiClick(option.value);
               }
             }}
             data-testid={'option-box'}
           >
             <Checkbox
-              id={option.id}
+              id={option.value}
               checkboxSize="large"
               tabIndex={-1}
               themeColor={themeColor}
               ref={(checkbox) => {
-                checkboxRefs.current[option.id] = checkbox; // Store checkbox reference
+                checkboxRefs.current[option.value] = checkbox; // Store checkbox reference
               }}
-              checked={selectedOptions.includes(option.id)}
+              checked={selectedOptions.includes(option.value)}
               disabled={
-                option.disabled ||
+                option.disable ||
                 (maxOptions !== undefined &&
                   selectedOptions.length >= maxOptions &&
-                  !selectedOptions.includes(option.id))
+                  !selectedOptions.includes(option.value))
               }
             >
               <span
                 style={{
                   color:
                     (themeColor && (themeColor === '#ffffff' || theme === 'light')) ||
-                    option.disabled ||
+                    option.disable ||
                     (maxOptions !== undefined &&
                       selectedOptions.length >= maxOptions &&
-                      !selectedOptions.includes(option.id))
+                      !selectedOptions.includes(option.value))
                       ? '#333333'
                       : themeColor && (themeColor !== '#ffffff' || theme !== 'light')
                       ? themeColor
                       : '#006bb1',
                 }}
               >
-                {option.text}
+                {option.label}
               </span>
             </Checkbox>
           </li>
diff --git a/src/lib/components/quick-select/README.md b/src/lib/components/quick-select/README.md
index 12eed64..365a89f 100644
--- a/src/lib/components/quick-select/README.md
+++ b/src/lib/components/quick-select/README.md
@@ -6,24 +6,25 @@ Import the `QuickSelect` component into your React application:
 import QuickSelect from '@/once-ui/quick-select/quick-select';
 ```
 
-## Option Interface
+## IOption Interface
 
-Before using the `QuickSelect` component, define an `Option` interface for representing the available choices. The `Option` interface should have the following properties:
+Before using the `QuickSelect` component, define an `IOption` interface for representing the available choices. The `IOption` interface should have the following properties:
 
-- `id (number)`: A unique identifier for the option.
-- `text (string)`: The text or label associated with the option.
+- `value (string)`: A unique identifier for the option.
+- `label (string)`: The text or label associated with the option.
 - `order (number, optional)`: An optional property that specifies the order of the option in a list or display.
 - `disabled (boolean, optional)`: An optional property that specifies whether the option is disabled or not.
+- `avatar (string, optional)`: An optional property that specifies the image path.
 
-Here's an example of how to define the `Option` interface:
+Here's an example of how to define the `IOption` interface:
 
 ```jsx
-export interface Option {
-    id: string;
-    text: string;
-    order: number;
-    avatar?: string;
-    disabled?: boolean;
+export interface IOption {
+  value: string;
+  label: string;
+  order?: number;
+  avatar?: string;
+  disable?: boolean;
 }
 ```
 
@@ -31,9 +32,9 @@ export interface Option {
 
 ```ts
 interface Props {
-  options: Option[];
-  onSelect: (option: Option) => void;
-  selected: Option | null;
+  options: IOption[];
+  onSelect: (option: IOption) => void;
+  selected: IOption | null;
   themeColor?: string;
   className?: string;
   style?: CSSProperties;
@@ -43,7 +44,7 @@ interface Props {
 
 The `QuickMultiSelect` component accepts the following props:
 
-1. `options` (Required): An array of option objects, each containing an `id`, `text`, `order`, and `disabled`.
+1. `options` (Required): An array of option objects, each containing an `value`, `label`, `order`, `avatar` and `disable`.
 
 2. `onSelect` (Required): A callback function that gets called when an option is selected. It takes the selected option as an argument.
 
@@ -63,18 +64,18 @@ Example
 import React, { useState } from 'react';
 import QuickSelect from '@/once-ui/quick-select/quick-select';
 
-const options: Option[] = [
-  { id: '31', text: "Kaushal", order: 1 },
-  { id: '32', text: "Amit", order: 2 },
-  { id: '33', text: "Shubham", order: 3 },
-  { id: '34', text: "Shaurabh", order: 4, disabled : true },
+const options: IOption[] = [
+  { value: '1', label: 'Option 1', order: 1 },
+  { value: '2', label: 'Option 2', order: 2 },
+  { value: '3', label: 'Option 3', order: 3, disable: true },
+  // Add more options
 ];
 
 function App() {
   const [selectedOption, setSelectedOption] =
     (useState < Option) | (null > null);
 
-  const handleSelect = (option: Option) => {
+  const handleSelect = (option: IOption) => {
     setSelectedOption(option);
   };
   return (
diff --git a/src/lib/components/quick-select/quick-select.stories.tsx b/src/lib/components/quick-select/quick-select.stories.tsx
index 4bd7bf0..2b51117 100644
--- a/src/lib/components/quick-select/quick-select.stories.tsx
+++ b/src/lib/components/quick-select/quick-select.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { QuickSelect } from './quick-select';
-import { Option } from '../../interfaces/select.type';
+import { IOption } from '../../interfaces/select.type';
 
 const meta: Meta<typeof QuickSelect> = {
   title: 'Basic/QuickSelect',
@@ -16,7 +16,7 @@ const meta: Meta<typeof QuickSelect> = {
       },
     },
     options: {
-      description: 'An array of option objects, each containing an `id`, `text`, `order`, and `disabled`.',
+      description: 'An array of option objects, each containing an `value`, `label`, `order`, `avatar` and `disable`.',
       type: 'string',
       table: {
         defaultValue: { summary: '' },
@@ -72,10 +72,10 @@ const meta: Meta<typeof QuickSelect> = {
 export default meta;
 type Story = StoryObj<typeof QuickSelect>;
 
-const options: Option[] = [
-  { id: '1', text: 'Option 1', order: 1 },
-  { id: '2', text: 'Option 2', order: 2 },
-  { id: '3', text: 'Option 3', order: 3, disabled: true },
+const options: IOption[] = [
+  { value: '1', label: 'Option 1', order: 1 },
+  { value: '2', label: 'Option 2', order: 2 },
+  { value: '3', label: 'Option 3', order: 3, disable: true },
   // Add more options here
 ];
 const handleSelectionChange = () => {};
diff --git a/src/lib/components/quick-select/quick-select.tsx b/src/lib/components/quick-select/quick-select.tsx
index 7106578..274c2ae 100644
--- a/src/lib/components/quick-select/quick-select.tsx
+++ b/src/lib/components/quick-select/quick-select.tsx
@@ -1,13 +1,13 @@
 import { CSSProperties, FC, useState } from 'react';
 import styles from './quick-select.module.scss';
 import luminance from '@oncehub/relative-luminance';
-import { Option } from '../../interfaces/select.type';
+import { IOption } from '../../interfaces/select.type';
 import { ColorsService } from '../colors.service';
 
 interface Props {
-  options: Option[];
-  onSelect: (option: Option | undefined) => void;
-  selected?: Option;
+  options: IOption[];
+  onSelect: (option: IOption | undefined) => void;
+  selected?: IOption;
   themeColor?: string;
   className?: string;
   style?: CSSProperties;
@@ -30,7 +30,7 @@ export const QuickSelect: FC<Props> = ({
   let quickOptionTriangleStyleObj: CSSProperties = {};
   let checkmarkColor: string = '#ffffff';
   const selectOption = (option: any) => {
-    if (selectedOption?.id === option?.id) {
+    if (selectedOption?.value === option?.value) {
       setSelected(undefined);
       onSelect(undefined);
       return;
@@ -61,14 +61,14 @@ export const QuickSelect: FC<Props> = ({
     <div className={styles.singleSelectWrapper}>
       <div className={styles.quickOption}>
         <ul className={styles.quickOption} role="radiogroup" id={id}>
-          {options.map((option: Option) => (
+          {options.map((option: IOption) => (
             <li
-              tabIndex={option.disabled ? -1 : 0}
-              className={`${className} ${selectedOption?.id === option.id ? styles.selected : ''} ${
-                option.disabled ? styles.disabled : ''
+              tabIndex={option.disable ? -1 : 0}
+              className={`${className} ${selectedOption?.value === option.value ? styles.selected : ''} ${
+                option.disable ? styles.disabled : ''
               }`}
               style={{ ...quickOptionStyleObj, ...style }}
-              key={option.id}
+              key={option.value}
               onClick={() => selectOption(option)}
               onKeyPress={(event) => {
                 if (event.key === ' ' || event.code === 'Space') {
@@ -78,10 +78,10 @@ export const QuickSelect: FC<Props> = ({
               }}
               data-testid={'checkbox-input'}
               role="radio"
-              aria-checked={selectedOption?.id === option.id}
+              aria-checked={selectedOption?.value === option.value}
             >
-              {option.text}
-              {selectedOption?.id === option.id && !option.disabled && (
+              {option.label}
+              {selectedOption?.value === option.value && !option.disable && (
                 <div className={styles.triangle} style={{ ...quickOptionTriangleStyleObj }}>
                   {showLoader && (
                     <div className={styles.loader} style={{ borderRightColor: themeColor ?? '#006bb1' }}></div>
diff --git a/src/lib/components/select/README.md b/src/lib/components/select/README.md
index abe6910..62f0abe 100644
--- a/src/lib/components/select/README.md
+++ b/src/lib/components/select/README.md
@@ -36,7 +36,7 @@ const people = [
 # Dropdown without search
 
 ```ts
-const [selected, setSelected] = useState<Option | null>(people.length ? people[0] : null);
+const [selected, setSelected] = useState<IOption | null>(people.length ? people[0] : null);
 return (
 	<>
 		<span>Drop down without search</span>
@@ -81,7 +81,7 @@ return (
 # Dropdown with search
 
 ```ts
-const [selected, setSelected] = useState<Option | null>(people.length ? people[0] : null);
+const [selected, setSelected] = useState<IOption | null>(people.length ? people[0] : null);
 const [searchQuery, setSearchQuery] = useState('');
 const onSelectDropDown = (object: any) => {
 	setSelected(object);
diff --git a/src/lib/components/select/auto-complete.tsx b/src/lib/components/select/auto-complete.tsx
index f18ee71..38ba186 100644
--- a/src/lib/components/select/auto-complete.tsx
+++ b/src/lib/components/select/auto-complete.tsx
@@ -1,6 +1,6 @@
 import { FC, useRef, useEffect, CSSProperties, useState } from 'react';
 import { Combobox } from '@headlessui/react';
-import { Option } from '../../interfaces/select.type';
+import { IOption } from '../../interfaces/select.type';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import luminance from '@oncehub/relative-luminance';
 import { ColorsService } from '../colors.service';
@@ -8,8 +8,8 @@ import { createPortal } from 'react-dom';
 
 interface Props {
   children: any;
-  selected: Option | null;
-  onSelect: (obj: Option) => void;
+  selected: IOption | null;
+  onSelect: (obj: IOption) => void;
   setQuery: (query: any) => void;
   disable?: boolean;
   clearSearch?: boolean;
@@ -38,7 +38,7 @@ export const AutoComplete: FC<Props> = ({
 
   useEffect(() => {
     if (inputRef.current && selected) {
-      inputRef.current.value = selected.text || '';
+      inputRef.current.value = selected.label || '';
     }
   }, [selected]);
 
@@ -104,7 +104,7 @@ export const AutoComplete: FC<Props> = ({
     };
   }, []);
 
-  const onSelection = (option: Option) => {
+  const onSelection = (option: IOption) => {
     onSelect(option);
     handlingCursorPosition();
   };
@@ -113,7 +113,7 @@ export const AutoComplete: FC<Props> = ({
     getDropdownPosition();
     setIsFocused(true);
     if (inputRef.current && selected) {
-      inputRef.current.value = selected.text || '';
+      inputRef.current.value = selected.label || '';
     }
     if (inputRef.current && inputButton.current) {
       if (clearSearch) {
@@ -124,9 +124,9 @@ export const AutoComplete: FC<Props> = ({
     }
   };
 
-  const displayInputValue = (option: Option) => {
+  const displayInputValue = (option: IOption) => {
     handlingCursorPosition();
-    return option?.text;
+    return option?.label;
   };
 
   const handlingCursorPosition = () => {
diff --git a/src/lib/components/select/select.stories.tsx b/src/lib/components/select/select.stories.tsx
index b04c98d..65e5854 100644
--- a/src/lib/components/select/select.stories.tsx
+++ b/src/lib/components/select/select.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { Select } from './select';
 import { SelectOption, SelectOptions } from './select-options';
-import { Option } from '../../interfaces/select.type';
+import { IOption } from '../../interfaces/select.type';
 
 const meta: Meta<typeof Select> = {
   title: 'Basic/Select',
@@ -31,22 +31,22 @@ const meta: Meta<typeof Select> = {
 export default meta;
 type Story = StoryObj<typeof Select>;
 
-const options: Option[] = [
+const options: IOption[] = [
   {
-    id: '1',
-    text: 'Wade Cooper',
+    value: '1',
+    label: 'Wade Cooper',
   },
   {
-    id: '2',
-    text: 'Arlene Mccoy',
+    value: '2',
+    label: 'Arlene Mccoy',
   },
   {
-    id: '3',
-    text: 'Devon Webb',
+    value: '3',
+    label: 'Devon Webb',
   },
   {
-    id: '4',
-    text: 'Tom Cook',
+    value: '4',
+    label: 'Tom Cook',
   },
 ];
 
@@ -57,7 +57,7 @@ const children = (
     {options.map((option) => (
       <SelectOption
         disable={false}
-        key={option.id}
+        key={option.value}
         className={({ active }: { active: boolean }) =>
           `tw-relative tw-cursor-default tw-select-none tw-py-2 tw-pl-4 tw-pr-4 ${
             active ? 'tw-bg-[#EEEEEE] tw-text-[#333333]' : ''
@@ -68,7 +68,7 @@ const children = (
         {({ selected, active }: { selected: boolean; active: boolean }) => (
           <div className="tw-flex tw-items-center">
             <span className={`tw-block tw-truncate ${selected ? 'tw-font-medium' : 'tw-font-normal'}`}>
-              {option.text}
+              {option.label}
             </span>
           </div>
         )}
diff --git a/src/lib/components/select/select.tsx b/src/lib/components/select/select.tsx
index 6d9a15f..a320b9e 100644
--- a/src/lib/components/select/select.tsx
+++ b/src/lib/components/select/select.tsx
@@ -1,14 +1,14 @@
 import { FC, useEffect, useRef, useState } from 'react';
 import { Listbox } from '@headlessui/react';
-import { Option } from '../../interfaces/select.type';
+import { IOption } from '../../interfaces/select.type';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import luminance from '@oncehub/relative-luminance';
 import { ColorsService } from '../colors.service';
 import { createPortal } from 'react-dom';
 interface Props {
   children: any;
-  selected: Option | null;
-  onSelect: (obj: Option) => void;
+  selected: IOption | null;
+  onSelect: (obj: IOption) => void;
   themeColor?: string;
 }
 interface IDropdownPosition {
@@ -26,7 +26,7 @@ export const Select: FC<Props> = ({ children, selected, onSelect, themeColor })
   const pageScrollHeight = useRef<number>(0);
 
   let borderColor = '#333333';
-  const onSelection = (option: Option): void => {
+  const onSelection = (option: IOption): void => {
     onSelect(option);
   };
   const handleFocus = (): void => {
@@ -133,7 +133,7 @@ export const Select: FC<Props> = ({ children, selected, onSelect, themeColor })
                   {selected.avatar && (
                     <img src={selected.avatar} alt="" className="tw-mr-2 tw-h-5 tw-w-5 tw-flex-shrink-0" />
                   )}
-                  <span className="tw-block tw-truncate">{selected.text}</span>
+                  <span className="tw-block tw-truncate">{selected.label}</span>
                 </span>
               )}
               <span className="tw-pointer-events-none tw-absolute tw-inset-y-0 tw-right-0 tw-flex tw-items-center tw-pr-2">
diff --git a/src/lib/interfaces/select.type.ts b/src/lib/interfaces/select.type.ts
index 0051fb2..bb617d1 100644
--- a/src/lib/interfaces/select.type.ts
+++ b/src/lib/interfaces/select.type.ts
@@ -1,7 +1,7 @@
-export interface Option {
-  id: string;
-  text: string;
+export interface IOption {
+  value: string;
+  label: string;
   order?: number;
   avatar?: string;
-  disabled?: boolean;
+  disable?: boolean;
 }

From c6bf06f8d7a4c29a3473f06d1fa789dace9096cb Mon Sep 17 00:00:00 2001
From: "shashank.mishra_once" <shashank.mishra_once@DESKTOP-5V3TR90>
Date: Mon, 22 Jul 2024 10:32:11 +0530
Subject: [PATCH 09/11] version update

---
 package-lock.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d1396d0..0730a44 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@oncehub/ui-react",
-  "version": "1.4.13-beta.1.4",
+  "version": "1.5.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@oncehub/ui-react",
-      "version": "1.4.13-beta.1.4",
+      "version": "1.5.0",
       "devDependencies": {
         "@babel/core": "^7.23.2",
         "@headlessui/react": "^1.7.17",

From ab9c468d0cac0f05c7d3a932d814af118f34c467 Mon Sep 17 00:00:00 2001
From: "shashank.mishra_once" <shashank.mishra_once@DESKTOP-5V3TR90>
Date: Mon, 22 Jul 2024 10:39:32 +0530
Subject: [PATCH 10/11] beta version reduction

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0730a44..0557893 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@oncehub/ui-react",
-  "version": "1.5.0",
+  "version": "1.4.15-beta.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@oncehub/ui-react",
-      "version": "1.5.0",
+      "version": "1.4.15-beta.1.0",
       "devDependencies": {
         "@babel/core": "^7.23.2",
         "@headlessui/react": "^1.7.17",
diff --git a/package.json b/package.json
index dc67c99..5886692 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@oncehub/ui-react",
   "private": false,
-  "version": "1.5.0",
+  "version": "1.4.15-beta.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/scheduleonce/once-ui-react"

From 7813fba7e5b4e9b341cf8371748838ff6ee57cd7 Mon Sep 17 00:00:00 2001
From: "shashank.mishra_once" <shashank.mishra_once@DESKTOP-5V3TR90>
Date: Fri, 20 Sep 2024 16:44:38 +0530
Subject: [PATCH 11/11] feat: Updated once-ui-react for IOption optimization

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8b9b1a2..abf33f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@oncehub/ui-react",
-  "version": "1.4.16",
+  "version": "1.4.17",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@oncehub/ui-react",
-      "version": "1.4.16",
+      "version": "1.4.17",
       "devDependencies": {
         "@babel/core": "^7.23.2",
         "@headlessui/react": "^1.7.17",
diff --git a/package.json b/package.json
index 86cfa92..97aec59 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@oncehub/ui-react",
   "private": false,
-  "version": "1.4.16",
+  "version": "1.4.17",
   "repository": {
     "type": "git",
     "url": "https://github.com/scheduleonce/once-ui-react"