From 531d101d36e4ca5a92fd6f516cf55e3fa77089c8 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 17 Oct 2024 16:07:32 +0530
Subject: [PATCH 01/19] fix(react): password eye icon not working without
 criteria

---
 packages/react/src/components/TextField/TextField.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react/src/components/TextField/TextField.tsx b/packages/react/src/components/TextField/TextField.tsx
index edb01ba9..1bfd3753 100644
--- a/packages/react/src/components/TextField/TextField.tsx
+++ b/packages/react/src/components/TextField/TextField.tsx
@@ -94,7 +94,7 @@ const PasswordField: ForwardRefExoticComponent<TextFieldProps> = forwardRef(
 
 const PasswordFieldWithCriteria: ForwardRefExoticComponent<TextFieldProps> = forwardRef(
   <C extends ElementType = ElementType>(
-    {criteria, id, type, ...rest}: TextFieldProps<C>,
+    {criteria, id, ...rest}: TextFieldProps<C>,
     ref: Ref<HTMLDivElement>,
   ): ReactElement => {
     const [openPasswordCriteriaTooltip, setOpenPasswordCriteriaTooltip] = useState<boolean>(false);
@@ -138,7 +138,6 @@ const PasswordFieldWithCriteria: ForwardRefExoticComponent<TextFieldProps> = for
         <PasswordField
           ref={ref}
           id={id}
-          type={type}
           onClick={handleClick}
           onBlurCapture={handleBlurCapture}
           onFocus={handleClick}

From 875aa8f7c03d10f1d500eee7c857f8d087f5b4c0 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Fri, 18 Oct 2024 00:05:34 +0530
Subject: [PATCH 02/19] feat(react): add `readonly` variant styles

---
 .../TextField/TextField.stories.mdx           | 37 ++++++++++++-------
 .../src/components/TextField/TextField.tsx    |  2 +-
 .../src/components/TextField/text-field.scss  | 12 +++++-
 3 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/packages/react/src/components/TextField/TextField.stories.mdx b/packages/react/src/components/TextField/TextField.stories.mdx
index 3c826bfd..d5da0f70 100644
--- a/packages/react/src/components/TextField/TextField.stories.mdx
+++ b/packages/react/src/components/TextField/TextField.stories.mdx
@@ -1,7 +1,7 @@
 import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
 import dedent from 'ts-dedent';
-import StoryConfig from '../../../.storybook/story-config.ts';
 import TextField from './TextField.tsx';
+import StoryConfig from '../../../.storybook/story-config.ts';
 
 export const meta = {
   component: TextField,
@@ -58,21 +58,32 @@ A component that wraps an input filed and an input label.
   <Story name="Basic" args={{label: 'Username', placeholder: 'Enter your username'}} />
 </Canvas>
 
+### Readonly
+
+Readonly variation of the text field.
+
+<Canvas>
+  <Story name="Readonly" args={{InputProps: {readOnly: true}, defaultValue: 'johndoe', label: 'Username'}} />
+</Canvas>
+
 ### Password
 
 <Canvas>
-  <Story name="Password" args={{
-    label: 'Password', 
-    placeholder: 'Enter your password', 
-    type: 'password', 
-    id: 'password', 
-    criteria: [
-      'More than 8 characters', 
-      'Atleast one uppercase and lowercase letter', 
-      'Atleast one number', 
-      'Atleast one of the symbols #@!$%'
-    ]
-    }} />
+  <Story
+    name="Password"
+    args={{
+      criteria: [
+        'More than 8 characters',
+        'Atleast one uppercase and lowercase letter',
+        'Atleast one number',
+        'Atleast one of the symbols #@!$%',
+      ],
+      id: 'password',
+      label: 'Password',
+      placeholder: 'Enter your password',
+      type: 'password',
+    }}
+  />
 </Canvas>
 
 ## Usage
diff --git a/packages/react/src/components/TextField/TextField.tsx b/packages/react/src/components/TextField/TextField.tsx
index 1bfd3753..8211723a 100644
--- a/packages/react/src/components/TextField/TextField.tsx
+++ b/packages/react/src/components/TextField/TextField.tsx
@@ -188,7 +188,7 @@ const TextField: OverridableComponent<FormControlTypeMap<TextFieldProps>> = forw
         {type === TextFieldInputTypes.INPUT_PASSWORD ? (
           <PasswordFieldWithCriteria ref={ref} id={id} variant={variant} type={type} {...rest} />
         ) : (
-          <MuiTextField ref={ref} id={id} variant={variant} type={type} {...rest} />
+          <MuiTextField ref={ref} id={id} variant={variant} className="OxygenTextField-root" type={type} {...rest} />
         )}
       </div>
     );
diff --git a/packages/react/src/components/TextField/text-field.scss b/packages/react/src/components/TextField/text-field.scss
index dd90d90b..ff0fd7b7 100644
--- a/packages/react/src/components/TextField/text-field.scss
+++ b/packages/react/src/components/TextField/text-field.scss
@@ -16,8 +16,16 @@
  * under the License.
  */
 
-.oxygen-text-field {
-  /* Add Styles */
+:root {
+  --oxygen-palette-ReadOnlyInput-bg: #e9ecef;
+}
+
+.OxygenTextField-root {
+  .Mui-readOnly,
+  .MuiInputBase-readOnly {
+    cursor: default;
+    background: var(--oxygen-palette-ReadOnlyInput-bg);
+  }
 }
 
 .oxygen-text-field-tooltip {

From 35f6e570866e63012d7d0714431a9f83248afd73 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Fri, 18 Oct 2024 00:05:56 +0530
Subject: [PATCH 03/19] feat(react): override `MuiOutlinedInput` padding

---
 packages/react/src/theme/default-theme.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/react/src/theme/default-theme.ts b/packages/react/src/theme/default-theme.ts
index 0202ee17..cd05d82f 100644
--- a/packages/react/src/theme/default-theme.ts
+++ b/packages/react/src/theme/default-theme.ts
@@ -153,6 +153,13 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial<
         },
       },
     },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        input: {
+          padding: '0.67857143em 1em',
+        },
+      },
+    },
     MuiTypography: {
       defaultProps: {
         variantMapping: {

From ffc4bcd429d2f7f3e157819f7c06374d7d8e0780 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Fri, 18 Oct 2024 00:07:09 +0530
Subject: [PATCH 04/19] feat(primitives): add `CloneIcon`

---
 packages/primitives/src/icons/clone-16.svg | 23 ++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 packages/primitives/src/icons/clone-16.svg

diff --git a/packages/primitives/src/icons/clone-16.svg b/packages/primitives/src/icons/clone-16.svg
new file mode 100644
index 00000000..7985c2dc
--- /dev/null
+++ b/packages/primitives/src/icons/clone-16.svg
@@ -0,0 +1,23 @@
+<!--
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+-->
+
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M11.9947 2.33562C11.91 1.03154 10.8255 0 9.5 0H2.5L2.33562 0.00531768C1.03154 0.0899613 0 1.17452 0 2.5V9.5L0.00531768 9.66438C0.0899613 10.9685 1.17452 12 2.5 12H4V13.5L4.00532 13.6644C4.08996 14.9685 5.17452 16 6.5 16H13.5L13.6644 15.9947C14.9685 15.91 16 14.8255 16 13.5V5.5L15.9947 5.33562C15.91 4.03154 14.8255 3 13.5 3H12V2.5L11.9947 2.33562ZM11 3V2.5C11 1.7203 10.4051 1.07955 9.64446 1.00687L9.5 1H2.5C1.7203 1 1.07955 1.59489 1.00687 2.35554L1 2.5V9.5C1 10.2797 1.59489 10.9204 2.35554 10.9931L2.5 11H4V10.5C4 10.2239 4.22386 10 4.5 10C4.74546 10 4.94961 10.1769 4.99194 10.4101L5 10.5V13.5C5 14.2797 5.59489 14.9204 6.35554 14.9931L6.5 15H13.5C14.2797 15 14.9204 14.4051 14.9931 13.6445L15 13.5V5.5C15 4.7203 14.4051 4.07955 13.6445 4.00687L13.5 4H9.5C9.22386 4 9 3.77614 9 3.5C9 3.25454 9.17688 3.05039 9.41012 3.00806L9.5 3H11ZM4.5 3.5C4.77614 3.5 5 3.72386 5 4C5 6.50123 6.83659 8.5735 9.23477 8.94181L8.14645 7.85355C7.97288 7.67999 7.9536 7.41056 8.08859 7.21569L8.14645 7.14645C8.32001 6.97288 8.58944 6.9536 8.78431 7.08859L8.85355 7.14645L11.2071 9.5L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.97288 11.68 7.9536 11.4106 8.08859 11.2157L8.14645 11.1464L9.32996 9.96301C6.33162 9.62985 4 7.08721 4 4C4 3.72386 4.22386 3.5 4.5 3.5Z"
+    fill="black" />
+</svg>

From 58a74e3b21ed58d690b973f6fe8e0da6c047a991 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Fri, 18 Oct 2024 00:07:22 +0530
Subject: [PATCH 05/19] feat(primitives): add `GlobeIcon`

---
 packages/primitives/src/icons/globe-16.svg | 23 ++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 packages/primitives/src/icons/globe-16.svg

diff --git a/packages/primitives/src/icons/globe-16.svg b/packages/primitives/src/icons/globe-16.svg
new file mode 100644
index 00000000..674746bb
--- /dev/null
+++ b/packages/primitives/src/icons/globe-16.svg
@@ -0,0 +1,23 @@
+<!--
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+-->
+
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10.3875 1.16672C9.99112 1.05039 9.584 0.97453 9.17235 0.940303C8.26155 0.833182 7.3386 0.904968 6.45531 1.15163L6.40248 1.16672C4.8189 1.60156 3.42202 2.5446 2.42669 3.85079C1.43136 5.15698 0.892698 6.75398 0.893556 8.39618C0.894413 10.0384 1.43474 11.6348 2.43144 12.94C3.42813 14.2451 4.82599 15.1867 6.41003 15.6199C6.98991 15.7832 7.58878 15.8695 8.1912 15.8765C8.25839 15.8887 8.32671 15.8938 8.39498 15.8916C9.06598 15.8929 9.73395 15.8015 10.3799 15.6199C11.9626 15.1852 13.3588 14.243 14.3543 12.9381C15.3497 11.6331 15.8893 10.0375 15.8901 8.39618C15.891 6.75489 15.3531 5.1587 14.359 3.85269C13.365 2.54668 11.9697 1.60306 10.3875 1.16672ZM10.1837 1.89127C11.1609 2.16177 12.0646 2.64896 12.8276 3.31664C13.5907 3.98431 14.1935 4.81533 14.5913 5.74796H11.3762C10.9924 4.26622 10.2863 2.88747 9.3082 1.71013C9.604 1.74946 9.89658 1.81 10.1837 1.89127ZM8.39498 1.82334C9.42609 2.94021 10.1786 4.28497 10.5913 5.74796H6.18361C6.59448 4.28143 7.35306 2.93567 8.39498 1.82485V1.82334ZM10.7799 6.50269C11.0214 7.75153 11.0214 9.03507 10.7799 10.2839H6.01002C5.88228 9.66315 5.81904 9.03084 5.82133 8.39707C5.81942 7.76083 5.88265 7.12606 6.01002 6.50269H10.7799ZM6.55342 1.90636L6.60626 1.89127C6.89404 1.81459 7.18648 1.75661 7.48175 1.71768C6.49837 2.89032 5.78927 4.26777 5.40623 5.74947H2.20238C2.59861 4.82719 3.19433 4.00419 3.94667 3.33968C4.69901 2.67517 5.58927 2.18566 6.55342 1.90636ZM1.64766 8.39707C1.64778 7.75537 1.74186 7.11714 1.92691 6.50269H5.24019C5.12528 7.12762 5.06718 7.76167 5.0666 8.39707C5.06683 9.03 5.12494 9.66157 5.24019 10.2839H1.92691C1.74132 9.67217 1.64722 9.03635 1.64766 8.39707ZM6.60626 14.8953C5.62806 14.627 4.72333 14.1406 3.95997 13.4727C3.1966 12.8047 2.59442 11.9726 2.19861 11.0386H5.39868C5.7857 12.5237 6.50001 13.9033 7.4893 15.0765C7.19089 15.0379 6.89574 14.9774 6.60626 14.8953ZM6.18361 11.0386H10.5913C10.1836 12.5059 9.43047 13.8542 8.39498 14.9708C7.35952 13.8518 6.60197 12.5047 6.18361 11.0386ZM10.1837 14.8953C9.89267 14.9709 9.59793 15.0314 9.30066 15.0765C10.281 13.8995 10.9897 12.5208 11.3762 11.0386H14.5913C14.1944 11.9718 13.5919 12.8034 12.8287 13.4712C12.0655 14.1389 11.1613 14.6258 10.1837 14.8953ZM11.5422 10.2839C11.7762 9.03436 11.7762 7.75224 11.5422 6.50269H14.8555C15.0442 7.11632 15.1384 7.7551 15.1347 8.39707C15.1366 9.0359 15.0451 9.67156 14.863 10.2839H11.5422Z"
+    fill="black" />
+</svg>

From 1c86bc57d07b3cea82ea05534071a0058237bc1c Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 21 Oct 2024 00:34:38 +0530
Subject: [PATCH 06/19] chore(react): update snapshots

---
 .../__tests__/__snapshots__/Autocomplete.test.tsx.snap |  6 +++---
 .../__test__/__snapshots__/OutlinedInput.test.tsx.snap |  4 ++--
 .../__snapshots__/PhoneNumberInput.test.tsx.snap       |  8 ++++----
 .../__tests__/__snapshots__/Select.test.tsx.snap       |  4 ++--
 .../__tests__/__snapshots__/SignIn.test.tsx.snap       | 10 +++++-----
 .../__test__/__snapshots__/TextField.test.tsx.snap     |  6 +++---
 6 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/react/src/components/Autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/components/Autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index 838729e4..c7c23a16 100644
--- a/packages/react/src/components/Autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/components/Autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -18,10 +18,10 @@ exports[`Alert should match the snapshot 1`] = `
           Movie
         </label>
         <div
-          class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
+          class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root OxygenTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
         >
           <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-115mmlx-MuiInputBase-root-MuiOutlinedInput-root"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-118ft55-MuiInputBase-root-MuiOutlinedInput-root"
           >
             <input
               aria-autocomplete="list"
@@ -29,7 +29,7 @@ exports[`Alert should match the snapshot 1`] = `
               aria-invalid="false"
               autocapitalize="none"
               autocomplete="off"
-              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-11fn00k-MuiInputBase-input-MuiOutlinedInput-input"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1d0o5yu-MuiInputBase-input-MuiOutlinedInput-input"
               id=":r2:"
               role="combobox"
               spellcheck="false"
diff --git a/packages/react/src/components/OutlinedInput/__test__/__snapshots__/OutlinedInput.test.tsx.snap b/packages/react/src/components/OutlinedInput/__test__/__snapshots__/OutlinedInput.test.tsx.snap
index 1dd45e6e..edc33b49 100644
--- a/packages/react/src/components/OutlinedInput/__test__/__snapshots__/OutlinedInput.test.tsx.snap
+++ b/packages/react/src/components/OutlinedInput/__test__/__snapshots__/OutlinedInput.test.tsx.snap
@@ -4,10 +4,10 @@ exports[`OutlinedInput should match the snapshot 1`] = `
 <body>
   <div>
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary oxygen-outlined-input css-9s98je-MuiInputBase-root-MuiOutlinedInput-root"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary oxygen-outlined-input css-sc35us-MuiInputBase-root-MuiOutlinedInput-root"
     >
       <input
-        class="MuiInputBase-input MuiOutlinedInput-input css-d9o7zs-MuiInputBase-input-MuiOutlinedInput-input"
+        class="MuiInputBase-input MuiOutlinedInput-input css-1gmaq6h-MuiInputBase-input-MuiOutlinedInput-input"
         type="text"
         value=""
       />
diff --git a/packages/react/src/components/PhoneNumberInput/__test__/__snapshots__/PhoneNumberInput.test.tsx.snap b/packages/react/src/components/PhoneNumberInput/__test__/__snapshots__/PhoneNumberInput.test.tsx.snap
index 14fa25cd..9308fc3d 100644
--- a/packages/react/src/components/PhoneNumberInput/__test__/__snapshots__/PhoneNumberInput.test.tsx.snap
+++ b/packages/react/src/components/PhoneNumberInput/__test__/__snapshots__/PhoneNumberInput.test.tsx.snap
@@ -17,13 +17,13 @@ exports[`TextField should match the snapshot 1`] = `
         class="oxygen-box oxygen-select-input MuiBox-root css-0"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary oxygen-select css-saqlya-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary oxygen-select css-z48p9p-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
         >
           <div
             aria-expanded="false"
             aria-haspopup="listbox"
             aria-labelledby="phone-number-label phone-number-select"
-            class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input oxygen-select-input-root css-1d3lhbp-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+            class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input oxygen-select-input-root css-cu70ox-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
             id="phone-number-select"
             role="button"
             tabindex="0"
@@ -72,10 +72,10 @@ exports[`TextField should match the snapshot 1`] = `
           </fieldset>
         </div>
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary oxygen-outlined-input css-9s98je-MuiInputBase-root-MuiOutlinedInput-root"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary oxygen-outlined-input css-sc35us-MuiInputBase-root-MuiOutlinedInput-root"
         >
           <input
-            class="MuiInputBase-input MuiOutlinedInput-input css-d9o7zs-MuiInputBase-input-MuiOutlinedInput-input"
+            class="MuiInputBase-input MuiOutlinedInput-input css-1gmaq6h-MuiInputBase-input-MuiOutlinedInput-input"
             id="phone-number-input"
             type="tel"
             value=""
diff --git a/packages/react/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
index 25aa116e..87f254ea 100644
--- a/packages/react/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
@@ -4,12 +4,12 @@ exports[`Select should match the snapshot 1`] = `
 <body>
   <div>
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary oxygen-select css-saqlya-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary oxygen-select css-z48p9p-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
     >
       <div
         aria-expanded="false"
         aria-haspopup="listbox"
-        class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-1d3lhbp-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+        class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-cu70ox-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
         role="button"
         tabindex="0"
       >
diff --git a/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap b/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap
index 9c3b4653..334bbfb8 100644
--- a/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap
+++ b/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap
@@ -33,14 +33,14 @@ exports[`SignIn should match the snapshot 1`] = `
               Username
             </label>
             <div
-              class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
+              class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root OxygenTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
             >
               <div
-                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-focused MuiInputBase-formControl css-e1xd3c-MuiInputBase-root-MuiOutlinedInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-focused MuiInputBase-formControl css-wyl8kf-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <input
                   aria-invalid="false"
-                  class="MuiInputBase-input MuiOutlinedInput-input css-d9o7zs-MuiInputBase-input-MuiOutlinedInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input css-1gmaq6h-MuiInputBase-input-MuiOutlinedInput-input"
                   id="name"
                   name="text"
                   placeholder="Enter your username"
@@ -79,12 +79,12 @@ exports[`SignIn should match the snapshot 1`] = `
               class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
             >
               <div
-                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-115mmlx-MuiInputBase-root-MuiOutlinedInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-118ft55-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <input
                   aria-invalid="false"
                   autocomplete="current-password"
-                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd css-11fn00k-MuiInputBase-input-MuiOutlinedInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd css-1d0o5yu-MuiInputBase-input-MuiOutlinedInput-input"
                   id=":r4:"
                   name="password"
                   placeholder="Enter your password"
diff --git a/packages/react/src/components/TextField/__test__/__snapshots__/TextField.test.tsx.snap b/packages/react/src/components/TextField/__test__/__snapshots__/TextField.test.tsx.snap
index b8854299..57a7f7fb 100644
--- a/packages/react/src/components/TextField/__test__/__snapshots__/TextField.test.tsx.snap
+++ b/packages/react/src/components/TextField/__test__/__snapshots__/TextField.test.tsx.snap
@@ -10,14 +10,14 @@ exports[`TextField should match the snapshot 1`] = `
         class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated oxygen-input-label css-f3834g-MuiFormLabel-root-MuiInputLabel-root"
       />
       <div
-        class="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
+        class="MuiFormControl-root MuiTextField-root OxygenTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-9s98je-MuiInputBase-root-MuiOutlinedInput-root"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-sc35us-MuiInputBase-root-MuiOutlinedInput-root"
         >
           <input
             aria-invalid="false"
-            class="MuiInputBase-input MuiOutlinedInput-input css-d9o7zs-MuiInputBase-input-MuiOutlinedInput-input"
+            class="MuiInputBase-input MuiOutlinedInput-input css-1gmaq6h-MuiInputBase-input-MuiOutlinedInput-input"
             id=":r1:"
             type="text"
             value=""

From ffac271478c446a47f10d50e35c3e2456f9570df Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 21 Oct 2024 00:35:33 +0530
Subject: [PATCH 07/19] feat(react): add `Stack` component

---
 packages/react/.storybook/story-config.ts     |  4 ++
 .../src/components/Stack/Stack.stories.mdx    | 62 +++++++++++++++++
 packages/react/src/components/Stack/Stack.tsx | 66 +++++++++++++++++++
 .../components/Stack/__test__/Stack.test.tsx  | 32 +++++++++
 .../__snapshots__/Stack.test.tsx.snap         | 11 ++++
 packages/react/src/components/Stack/index.ts  | 22 +++++++
 packages/react/src/components/index.ts        |  3 +
 7 files changed, 200 insertions(+)
 create mode 100644 packages/react/src/components/Stack/Stack.stories.mdx
 create mode 100644 packages/react/src/components/Stack/Stack.tsx
 create mode 100644 packages/react/src/components/Stack/__test__/Stack.test.tsx
 create mode 100644 packages/react/src/components/Stack/__test__/__snapshots__/Stack.test.tsx.snap
 create mode 100644 packages/react/src/components/Stack/index.ts

diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts
index aec76ee6..7ff59a48 100644
--- a/packages/react/.storybook/story-config.ts
+++ b/packages/react/.storybook/story-config.ts
@@ -105,6 +105,7 @@ export type Stories =
   | 'SignIn'
   | 'Skeleton'
   | 'Snackbar'
+  | 'Stack'
   | 'Stepper'
   | 'Switch'
   | 'Tab'
@@ -358,6 +359,9 @@ const StoryConfig: StorybookConfig = {
   Snackbar: {
     hierarchy: `${StorybookCategories.Feedback}/Snackbar`,
   },
+  Stack: {
+    hierarchy: `${StorybookCategories.Layout}/Stack`,
+  },
   Stepper: {
     hierarchy: `${StorybookCategories.Surfaces}/Stepper`,
   },
diff --git a/packages/react/src/components/Stack/Stack.stories.mdx b/packages/react/src/components/Stack/Stack.stories.mdx
new file mode 100644
index 00000000..8e3edaba
--- /dev/null
+++ b/packages/react/src/components/Stack/Stack.stories.mdx
@@ -0,0 +1,62 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import Stack from './Stack.tsx';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Box from '../Box/Box.tsx';
+import Paper from '../Paper/Paper.tsx';
+
+export const meta = {
+  component: Stack,
+  title: StoryConfig.Stack.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => (
+  <Box sx={{width: '100%'}}>
+    <Stack spacing={2} {...args}>
+      <Paper>Item 1</Paper>
+      <Paper>Item 2</Paper>
+      <Paper>Item 3</Paper>
+    </Stack>
+  </Box>
+);
+
+# Stack
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+The Stack component manages the layout of its immediate children along the vertical or horizontal axis, with optional
+spacing and dividers between each child.
+
+> **NOTE** Stack is ideal for one-dimensional layouts, while Grid is preferable when you need both vertical and
+> horizontal arrangement.
+
+<Canvas>
+  <Story name="Overview" args={{}}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Stack` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Stack from '@oxygen-ui/react/Stack';\n
+function Demo() {
+  return <Stack>{ /* Content */ }</Stack>;
+}`}
+/>
diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx
new file mode 100644
index 00000000..8a872e03
--- /dev/null
+++ b/packages/react/src/components/Stack/Stack.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
+import MuiStack from '@mui/material/Stack';
+import type {StackProps as MuiStackProps, StackTypeMap} from '@mui/material/Stack';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
+
+export type StackProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = StackTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiStackProps<D, P>, 'component'>;
+
+/**
+ * The Stack is a container component for arranging elements vertically or horizontally.
+ *
+ * Demos:
+ *
+ * - [Stack (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-Stack)
+ * - [Stack (MUI)](https://mui.com/material-ui/react-stack/)
+ *
+ * API:
+ *
+ * - [Stack API](https://mui.com/material-ui/api/stack/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Stack component.
+ * @param ref - The ref to be forwarded to the MuiStack component.
+ * @returns The rendered Stack component.
+ */
+const Stack: OverridableComponent<StackTypeMap<StackProps>> = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: StackProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => <MuiStack ref={ref} className={clsx('OxygenStack-root', className)} {...rest} />,
+) as OverridableComponent<StackTypeMap<StackProps>>;
+
+export default Stack;
diff --git a/packages/react/src/components/Stack/__test__/Stack.test.tsx b/packages/react/src/components/Stack/__test__/Stack.test.tsx
new file mode 100644
index 00000000..f551f527
--- /dev/null
+++ b/packages/react/src/components/Stack/__test__/Stack.test.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {render} from '@unit-testing';
+import Stack from '../Stack';
+
+describe('Stack', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(<Stack />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<Stack />);
+    expect(baseElement).toMatchSnapshot();
+  });
+});
diff --git a/packages/react/src/components/Stack/__test__/__snapshots__/Stack.test.tsx.snap b/packages/react/src/components/Stack/__test__/__snapshots__/Stack.test.tsx.snap
new file mode 100644
index 00000000..507c9b1a
--- /dev/null
+++ b/packages/react/src/components/Stack/__test__/__snapshots__/Stack.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Stack should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="MuiStack-root OxygenStack-root css-nen11g-MuiStack-root"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/react/src/components/Stack/index.ts b/packages/react/src/components/Stack/index.ts
new file mode 100644
index 00000000..4ec4bc40
--- /dev/null
+++ b/packages/react/src/components/Stack/index.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {default} from './Stack';
+export * from './Stack';
+
+export type {StackTypeMap} from '@mui/material/Stack';
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index bd03b2e9..4aab0ff7 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -199,6 +199,9 @@ export * from './SignIn';
 export {default as Skeleton} from './Skeleton';
 export * from './Skeleton';
 
+export {default as Stack} from './Stack';
+export * from './Stack';
+
 export {default as Stepper} from './Stepper';
 export * from './Stepper';
 

From a2957cbf834327cb045dbfa78ad349d069aa2ef4 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 21 Oct 2024 10:02:54 +0530
Subject: [PATCH 08/19] chore(react): update exports

---
 packages/react/src/index.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index ff0bc444..b6dda0e4 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -22,8 +22,6 @@ export {default as usePastelColorGenerator} from './hooks/use-pastel-color-gener
 export * from './hooks/use-pastel-color-generator';
 export {default} from './utils/generate-pastel-color';
 export {
-  Alert,
-  AlertTitle,
   ToggleButton,
   ToggleButtonGroup,
   Dialog,

From 293e66dcbe4d81a1d0485ac3ec4191792d565ec7 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 21 Oct 2024 10:03:38 +0530
Subject: [PATCH 09/19] feat(react): add `Collapse` component

---
 packages/react/.storybook/story-config.ts     |  4 +
 .../components/Collapse/Collapse.stories.mdx  | 79 +++++++++++++++++++
 .../src/components/Collapse/Collapse.tsx      | 67 ++++++++++++++++
 .../Collapse/__tests__/Collapse.test.tsx      | 32 ++++++++
 .../__snapshots__/Collapse.test.tsx.snap      | 20 +++++
 .../react/src/components/Collapse/index.ts    | 20 +++++
 packages/react/src/components/index.ts        |  3 +
 7 files changed, 225 insertions(+)
 create mode 100644 packages/react/src/components/Collapse/Collapse.stories.mdx
 create mode 100644 packages/react/src/components/Collapse/Collapse.tsx
 create mode 100644 packages/react/src/components/Collapse/__tests__/Collapse.test.tsx
 create mode 100644 packages/react/src/components/Collapse/__tests__/__snapshots__/Collapse.test.tsx.snap
 create mode 100644 packages/react/src/components/Collapse/index.ts

diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts
index 7ff59a48..259eb91f 100644
--- a/packages/react/.storybook/story-config.ts
+++ b/packages/react/.storybook/story-config.ts
@@ -59,6 +59,7 @@ export type Stories =
   | 'CircularProgressAvatar'
   | 'Chip'
   | 'Code'
+  | 'Collapse'
   | 'CollapsibleNavbarItem'
   | 'ColorModeToggle'
   | 'Colors'
@@ -216,6 +217,9 @@ const StoryConfig: StorybookConfig = {
   Code: {
     hierarchy: `${StorybookCategories.DataDisplay}/Code`,
   },
+  Collapse: {
+    hierarchy: `${StorybookCategories.Utils}/Collapse`,
+  },
   CollapsibleNavbarItem: {
     hierarchy: `${StorybookCategories.Navigation}/Collapsible Navbar Item`,
   },
diff --git a/packages/react/src/components/Collapse/Collapse.stories.mdx b/packages/react/src/components/Collapse/Collapse.stories.mdx
new file mode 100644
index 00000000..0c5cefa3
--- /dev/null
+++ b/packages/react/src/components/Collapse/Collapse.stories.mdx
@@ -0,0 +1,79 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import {useArgs} from '@storybook/client-api';
+import dedent from 'ts-dedent';
+import Collapse from './Collapse.tsx';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Box from '../Box/Box.tsx';
+import FormControlLabel from '../FormControlLabel/FormControlLabel.tsx';
+import FormGroup from '../FormGroup/FormGroup.tsx';
+import Paper from '../Paper/Paper.tsx';
+import Switch from '../Switch/Switch.tsx';
+
+export const meta = {
+  component: Collapse,
+  title: StoryConfig.Collapse.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = ({...props}) => {
+  const [runtimeArgs, updateArgs] = useArgs();
+  const {in: checked} = runtimeArgs;
+  return (
+    <Box sx={{p: 3}}>
+      <FormGroup sx={{mb: 2}}>
+        <FormControlLabel
+          control={<Switch checked={checked} onChange={() => updateArgs({...runtimeArgs, in: !checked})} />}
+          label="Show"
+        />
+      </FormGroup>
+      <Collapse in={checked} {...props}>
+        <Paper sx={{background: 'red', height: '200px', width: '200px'}} />
+      </Collapse>
+    </Box>
+  );
+};
+
+# Collapse
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Expand from the start edge of the child element. Use the `orientation` prop if you need a horizontal collapse. The
+`collapsedSize` prop can be used to set the minimum width/height when not expanded.
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{in: false}}
+    parameters={{
+      docs: {iframeHeight: 476, inlineStories: false},
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Collapse` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Collapse from '@oxygen-ui/react/Collapse';\n
+function Demo() {
+  return (
+    <Collapse />
+  );
+}`}
+/>
diff --git a/packages/react/src/components/Collapse/Collapse.tsx b/packages/react/src/components/Collapse/Collapse.tsx
new file mode 100644
index 00000000..04cadfe3
--- /dev/null
+++ b/packages/react/src/components/Collapse/Collapse.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import MuiCollapse from '@mui/material/Collapse';
+import type {CollapseProps as MuiCollapseProps} from '@mui/material/Collapse';
+import type {OverridableComponent, OverridableTypeMap} from '@mui/material/OverridableComponent';
+import type {TransitionProps} from '@mui/material/transitions';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import type {ReactElement, Ref, ElementType} from 'react';
+
+export type CollapseProps<C extends ElementType = ElementType<TransitionProps>> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiCollapseProps, 'component'>;
+
+/**
+ * A Transition component to expand from the start edge of the child element.
+ *
+ * Demos:
+ *
+ * - [Card (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-card)
+ * - [Card (MUI)](https://mui.com/material-ui/react-card/)
+ * - [Lists (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-list)
+ * - [Lists (MUI)](https://mui.com/material-ui/react-list/)
+ * - [Collapse (Oxygen UI)](https://mui.com/material-ui/transitions/)
+ * - [Transitions (MUI)](https://mui.com/material-ui/transitions/)
+ *
+ * API:
+ *
+ * - [Collapse API](https://mui.com/material-ui/api/collapse/)
+ * - inherits [Transition API](http://reactcommunity.org/react-transition-group/transition/#Transition-props)
+ *
+ * @remarks
+ * - ✔️ Props of the [Transition](https://mui.com/material-ui/transitions/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Collapse component.
+ * @param ref - The ref to be forwarded to the MuiCollapse component.
+ * @returns The rendered Collapse component.
+ */
+const Collapse: OverridableComponent<OverridableTypeMap> = forwardRef(
+  ({className, ...rest}: CollapseProps<ElementType<TransitionProps>>, ref: Ref<HTMLDivElement>): ReactElement => (
+    <MuiCollapse ref={ref} className={clsx('OxygenCollapse-root', className)} {...rest} />
+  ),
+) as OverridableComponent<OverridableTypeMap>;
+
+export default Collapse;
diff --git a/packages/react/src/components/Collapse/__tests__/Collapse.test.tsx b/packages/react/src/components/Collapse/__tests__/Collapse.test.tsx
new file mode 100644
index 00000000..c040bf31
--- /dev/null
+++ b/packages/react/src/components/Collapse/__tests__/Collapse.test.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {render} from '@unit-testing';
+import Collapse from '../Collapse';
+
+describe('Collapse', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(<Collapse />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<Collapse />);
+    expect(baseElement).toMatchSnapshot();
+  });
+});
diff --git a/packages/react/src/components/Collapse/__tests__/__snapshots__/Collapse.test.tsx.snap b/packages/react/src/components/Collapse/__tests__/__snapshots__/Collapse.test.tsx.snap
new file mode 100644
index 00000000..ba7832bf
--- /dev/null
+++ b/packages/react/src/components/Collapse/__tests__/__snapshots__/Collapse.test.tsx.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Collapse should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="MuiCollapse-root MuiCollapse-vertical OxygenCollapse-root MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+      style="min-height: 0px;"
+    >
+      <div
+        class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+      >
+        <div
+          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+        />
+      </div>
+    </div>
+  </div>
+</body>
+`;
diff --git a/packages/react/src/components/Collapse/index.ts b/packages/react/src/components/Collapse/index.ts
new file mode 100644
index 00000000..518ee59a
--- /dev/null
+++ b/packages/react/src/components/Collapse/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {default} from './Collapse';
+export * from './Collapse';
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index 4aab0ff7..f335c112 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -82,6 +82,9 @@ export * from './CircularProgressAvatar';
 export {default as Code} from './Code';
 export * from './Code';
 
+export {default as Collapse} from './Collapse';
+export * from './Collapse';
+
 export {default as ColorModeToggle} from './ColorModeToggle';
 export * from './ColorModeToggle';
 

From 767a32fb67b26ad62bbf44d8198df4daa2328e13 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 21 Oct 2024 11:45:54 +0530
Subject: [PATCH 10/19] chore(react): update missing root level exports

---
 packages/react/src/components/index.ts | 31 +++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index f335c112..8fbfcfcd 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -16,8 +16,8 @@
  * under the License.
  */
 
-export {default as AccountOverview} from './AccountOverview';
-export * from './AccountOverview';
+export {default as Accordion} from './Accordion';
+export * from './Accordion';
 
 export {default as AccordionDetails} from './AccordionDetails';
 export * from './AccordionDetails';
@@ -25,9 +25,18 @@ export * from './AccordionDetails';
 export {default as AccordionSummary} from './AccordionSummary';
 export * from './AccordionSummary';
 
+export {default as AccountOverview} from './AccountOverview';
+export * from './AccountOverview';
+
 export {default as ActionCard} from './ActionCard';
 export * from './ActionCard';
 
+export {default as Alert} from './Alert';
+export * from './Alert';
+
+export {default as AlertTitle} from './AlertTitle';
+export * from './AlertTitle';
+
 export {default as AppBar} from './AppBar';
 export * from './AppBar';
 
@@ -40,6 +49,9 @@ export * from './Autocomplete';
 export {default as Avatar} from './Avatar';
 export * from './Avatar';
 
+export {default as Backdrop} from './Backdrop';
+export * from './Backdrop';
+
 export {default as Badge} from './Badge';
 export * from './Badge';
 
@@ -85,6 +97,9 @@ export * from './Code';
 export {default as Collapse} from './Collapse';
 export * from './Collapse';
 
+export {default as CollapsibleNavbarItem} from './CollapsibleNavbarItem';
+export * from './CollapsibleNavbarItem';
+
 export {default as ColorModeToggle} from './ColorModeToggle';
 export * from './ColorModeToggle';
 
@@ -94,6 +109,9 @@ export * from './Container';
 export {default as CountryFlag} from './CountryFlag';
 export * from './CountryFlag';
 
+export {default as DataGrid} from './DataGrid';
+export * from './DataGrid';
+
 export {default as Divider} from './Divider';
 export * from './Divider';
 
@@ -109,6 +127,9 @@ export * from './Footer';
 export {default as FormControl} from './FormControl';
 export * from './FormControl';
 
+export {default as FormControlLabel} from './FormControlLabel';
+export * from './FormControlLabel';
+
 export {default as FormGroup} from './FormGroup';
 export * from './FormGroup';
 
@@ -118,9 +139,6 @@ export * from './FormHelperText';
 export {default as FormLabel} from './FormLabel';
 export * from './FormLabel';
 
-export {default as FormControlLabel} from './FormControlLabel';
-export * from './FormControlLabel';
-
 export {default as Grid} from './Grid';
 export * from './Grid';
 
@@ -202,6 +220,9 @@ export * from './SignIn';
 export {default as Skeleton} from './Skeleton';
 export * from './Skeleton';
 
+export {default as Snackbar} from './Snackbar';
+export * from './Snackbar';
+
 export {default as Stack} from './Stack';
 export * from './Stack';
 

From 595f6000e8761f23f03bf23c82631b6b4d81e889 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 21 Oct 2024 11:46:11 +0530
Subject: [PATCH 11/19] fix(react): re-export proper props interface

---
 packages/react/src/components/AlertTitle/AlertTitle.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/AlertTitle/AlertTitle.tsx b/packages/react/src/components/AlertTitle/AlertTitle.tsx
index da223461..56800731 100644
--- a/packages/react/src/components/AlertTitle/AlertTitle.tsx
+++ b/packages/react/src/components/AlertTitle/AlertTitle.tsx
@@ -17,7 +17,7 @@
  */
 
 import MuiAlertTitle from '@mui/material/AlertTitle';
-import type {AlertTitleProps, AlertTitleProps as MuiAlertTitleProps} from '@mui/material/AlertTitle';
+import type {AlertTitleProps as MuiAlertTitleProps} from '@mui/material/AlertTitle';
 import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
@@ -25,7 +25,7 @@ import type {ReactElement, ElementType, Ref} from 'react';
 import type {TypographyTypeMap} from '../Typography';
 import './alert-title.scss';
 
-export type AlertProps<C extends ElementType = ElementType> = {
+export type AlertTitleProps<C extends ElementType = ElementType> = {
   /**
    * The component used for the root node. Either a string to use a HTML element or a component.
    */
@@ -57,7 +57,7 @@ export type AlertProps<C extends ElementType = ElementType> = {
  */
 const AlertTitle: OverridableComponent<TypographyTypeMap<AlertTitleProps>> = forwardRef(
   <C extends ElementType = ElementType>(
-    {className, ...rest}: AlertProps<C>,
+    {className, ...rest}: AlertTitleProps<C>,
     ref: Ref<HTMLDivElement>,
   ): ReactElement => {
     const classes: string = clsx('oxygen-alert-title', className);

From 947b054a923ae1e297a81f7ed958a4c17fc70ee4 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 21 Oct 2024 12:12:51 +0530
Subject: [PATCH 12/19] feat(react): add `Dialog` components

---
 packages/react/.storybook/story-config.ts     |  22 ++--
 .../components/Collapse/Collapse.stories.mdx  |   4 +-
 .../src/components/Dialog/Dialog.stories.mdx  | 119 ++++++++++++++++++
 .../react/src/components/Dialog/Dialog.tsx    |  64 ++++++++++
 .../Dialog/__tests__/Dialog.test.tsx          |  40 ++++++
 .../__snapshots__/Dialog.test.tsx.snap        |  43 +++++++
 packages/react/src/components/Dialog/index.ts |  20 +++
 .../DialogActions/DialogActions.tsx           |  54 ++++++++
 .../__tests__/DialogActions.test.tsx          |  32 +++++
 .../__snapshots__/DialogActions.test.tsx.snap |  11 ++
 .../src/components/DialogActions/index.ts     |  20 +++
 .../DialogContent/DialogContent.tsx           |  54 ++++++++
 .../__tests__/DialogContent.test.tsx          |  32 +++++
 .../__snapshots__/DialogContent.test.tsx.snap |  11 ++
 .../src/components/DialogContent/index.ts     |  20 +++
 .../DialogContentText/DialogContentText.tsx   |  72 +++++++++++
 .../__tests__/DialogContentText.test.tsx      |  32 +++++
 .../DialogContentText.test.tsx.snap           |  13 ++
 .../src/components/DialogContentText/index.ts |  22 ++++
 .../components/DialogTitle/DialogTitle.tsx    |  67 ++++++++++
 .../__tests__/DialogTitle.test.tsx            |  32 +++++
 .../__snapshots__/DialogTitle.test.tsx.snap   |  13 ++
 .../react/src/components/DialogTitle/index.ts |  22 ++++
 packages/react/src/components/index.ts        |  15 +++
 24 files changed, 823 insertions(+), 11 deletions(-)
 create mode 100644 packages/react/src/components/Dialog/Dialog.stories.mdx
 create mode 100644 packages/react/src/components/Dialog/Dialog.tsx
 create mode 100644 packages/react/src/components/Dialog/__tests__/Dialog.test.tsx
 create mode 100644 packages/react/src/components/Dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
 create mode 100644 packages/react/src/components/Dialog/index.ts
 create mode 100644 packages/react/src/components/DialogActions/DialogActions.tsx
 create mode 100644 packages/react/src/components/DialogActions/__tests__/DialogActions.test.tsx
 create mode 100644 packages/react/src/components/DialogActions/__tests__/__snapshots__/DialogActions.test.tsx.snap
 create mode 100644 packages/react/src/components/DialogActions/index.ts
 create mode 100644 packages/react/src/components/DialogContent/DialogContent.tsx
 create mode 100644 packages/react/src/components/DialogContent/__tests__/DialogContent.test.tsx
 create mode 100644 packages/react/src/components/DialogContent/__tests__/__snapshots__/DialogContent.test.tsx.snap
 create mode 100644 packages/react/src/components/DialogContent/index.ts
 create mode 100644 packages/react/src/components/DialogContentText/DialogContentText.tsx
 create mode 100644 packages/react/src/components/DialogContentText/__tests__/DialogContentText.test.tsx
 create mode 100644 packages/react/src/components/DialogContentText/__tests__/__snapshots__/DialogContentText.test.tsx.snap
 create mode 100644 packages/react/src/components/DialogContentText/index.ts
 create mode 100644 packages/react/src/components/DialogTitle/DialogTitle.tsx
 create mode 100644 packages/react/src/components/DialogTitle/__tests__/DialogTitle.test.tsx
 create mode 100644 packages/react/src/components/DialogTitle/__tests__/__snapshots__/DialogTitle.test.tsx.snap
 create mode 100644 packages/react/src/components/DialogTitle/index.ts

diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts
index 259eb91f..dd875484 100644
--- a/packages/react/.storybook/story-config.ts
+++ b/packages/react/.storybook/story-config.ts
@@ -32,6 +32,7 @@ enum StorybookCategories {
   Utils = 'Utils'
 }
 
+// NOTE: Please keep the stories in alphabetical order.
 export type Stories =
   | 'Accordion'
   | 'AccordionDetails'
@@ -46,35 +47,36 @@ export type Stories =
   | 'Avatar'
   | 'Backdrop'
   | 'Badge'
-  | 'Breadcrumbs'
   | 'Box'
+  | 'Breadcrumbs'
   | 'Button'
-  | 'CircularProgress'
   | 'Card'
   | 'CardActions'
   | 'CardContent'
   | 'CardHeader'
   | 'Carousel'
   | 'Checkbox'
-  | 'CircularProgressAvatar'
   | 'Chip'
+  | 'CircularProgress'
+  | 'CircularProgressAvatar'
   | 'Code'
+  | 'Colors'
   | 'Collapse'
   | 'CollapsibleNavbarItem'
   | 'ColorModeToggle'
-  | 'Colors'
   | 'Container'
+  | 'CountryFlag'
   | 'DataGrid'
+  | 'Dialog'
   | 'Divider'
   | 'Drawer'
-  | 'CountryFlag'
   | 'Fab'
   | 'Footer'
+  | 'FormControl'
   | 'FormControlLabel'
   | 'FormGroup'
-  | 'FormLabel'
   | 'FormHelperText'
-  | 'FormControl'
+  | 'FormLabel'
   | 'Grid'
   | 'Header'
   | 'IconButton'
@@ -93,13 +95,12 @@ export type Stories =
   | 'ListItemText'
   | 'Menu'
   | 'MenuItem'
-  | 'UserDropdownMenu'
   | 'Navbar'
   | 'NavbarItem'
   | 'OutlinedInput'
   | 'Paper'
-  | 'Popover'
   | 'PhoneNumberInput'
+  | 'Popover'
   | 'Radio'
   | 'RadioGroup'
   | 'Select'
@@ -235,6 +236,9 @@ const StoryConfig: StorybookConfig = {
   DataGrid: {
     hierarchy: `${StorybookCategories.DataDisplay}/DataGrid`,
   },
+  Dialog: {
+    hierarchy: `${StorybookCategories.Feedback}/Dialog`,
+  },
   Divider: {
     hierarchy: `${StorybookCategories.DataDisplay}/Divider`,
   },
diff --git a/packages/react/src/components/Collapse/Collapse.stories.mdx b/packages/react/src/components/Collapse/Collapse.stories.mdx
index 0c5cefa3..a31f4dc1 100644
--- a/packages/react/src/components/Collapse/Collapse.stories.mdx
+++ b/packages/react/src/components/Collapse/Collapse.stories.mdx
@@ -16,7 +16,7 @@ export const meta = {
 
 <Meta title={meta.title} component={meta.component} />
 
-export const Template = ({...props}) => {
+export const Template = ({...args}) => {
   const [runtimeArgs, updateArgs] = useArgs();
   const {in: checked} = runtimeArgs;
   return (
@@ -27,7 +27,7 @@ export const Template = ({...props}) => {
           label="Show"
         />
       </FormGroup>
-      <Collapse in={checked} {...props}>
+      <Collapse in={checked} {...args}>
         <Paper sx={{background: 'red', height: '200px', width: '200px'}} />
       </Collapse>
     </Box>
diff --git a/packages/react/src/components/Dialog/Dialog.stories.mdx b/packages/react/src/components/Dialog/Dialog.stories.mdx
new file mode 100644
index 00000000..8324dadd
--- /dev/null
+++ b/packages/react/src/components/Dialog/Dialog.stories.mdx
@@ -0,0 +1,119 @@
+import {XMarkIcon} from '@oxygen-ui/react-icons';
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import {useArgs} from '@storybook/client-api';
+import dedent from 'ts-dedent';
+import Dialog from './Dialog.tsx';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Box from '../Box/Box.tsx';
+import Button from '../Button/Button.tsx';
+import DialogActions from '../DialogActions/DialogActions.tsx';
+import DialogContent from '../DialogContent/DialogContent.tsx';
+import DialogContentText from '../DialogContentText/DialogContentText.tsx';
+import DialogTitle from '../DialogTitle/DialogTitle.tsx';
+import IconButton from '../IconButton/IconButton.tsx';
+
+export const meta = {
+  component: Dialog,
+  title: StoryConfig.Dialog.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = ({...args}) => {
+  const [runtimeArgs, updateArgs] = useArgs();
+  const {open} = runtimeArgs;
+  const handleOpen = () => updateArgs({...runtimeArgs, open: true});
+  const handleClose = () => updateArgs({...runtimeArgs, open: false});
+  return (
+    <Box display="flex" alignItems="center" justifyContent="center">
+      <Button variant="outlined" onClick={handleOpen}>
+        Open dialog
+      </Button>
+      <Dialog onClose={handleClose} aria-labelledby="customized-dialog-title" open={open} {...args}>
+        <DialogTitle sx={{m: 0, p: 2}} id="customized-dialog-title">
+          Modal title
+        </DialogTitle>
+        <IconButton
+          aria-label="close"
+          onClick={handleClose}
+          sx={theme => ({
+            color: theme.palette.grey[500],
+            position: 'absolute',
+            right: 8,
+            top: 8,
+          })}
+        >
+          <XMarkIcon />
+        </IconButton>
+        <DialogContent dividers>
+          <DialogContentText gutterBottom>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
+            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          </DialogContentText>
+          <DialogContentText gutterBottom>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
+            rutrum faucibus dolor auctor.
+          </DialogContentText>
+          <DialogContentText gutterBottom>
+            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button autoFocus onClick={handleClose}>
+            Save changes
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+};
+
+# Dialog
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+A Dialog is a type of `modal` window that appears in front of app content to provide critical information or ask for a
+decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a
+required action has been taken.
+
+Dialogs are purposefully interruptive, so they should be used sparingly.
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{open: false}}
+    parameters={{
+      docs: {iframeHeight: 476, inlineStories: false},
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Dialog` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Dialog from '@oxygen-ui/react/Dialog';\n
+function Demo() {
+  return (
+    <Dialog open>
+      {/* Content */}
+    </Dialog>
+  );
+}`}
+/>
diff --git a/packages/react/src/components/Dialog/Dialog.tsx b/packages/react/src/components/Dialog/Dialog.tsx
new file mode 100644
index 00000000..1dc5f4cf
--- /dev/null
+++ b/packages/react/src/components/Dialog/Dialog.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import MuiDialog from '@mui/material/Dialog';
+import type {DialogProps as MuiDialogProps} from '@mui/material/Dialog';
+import type {ModalTypeMap} from '@mui/material/Modal';
+import {OverridableComponent} from '@mui/material/OverridableComponent';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import type {ElementType, ReactElement, Ref} from 'react';
+
+export type DialogProps<C extends ElementType = ElementType> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiDialogProps, 'component'>;
+
+/**
+ * Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
+ *
+ * Demos:
+ *
+ * - [Dialog (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-dialog)
+ * - [Dialog (MUI)](https://mui.com/material-ui/react-dialog/)
+ *
+ * API:
+ *
+ * - [Dialog API](https://mui.com/material-ui/api/dialog/)
+ * - inherits [Modal API](https://mui.com/material-ui/api/modal/)
+ *
+ * @remarks
+ * - ✔️ Props of the [Modal](https://mui.com/material-ui/api/modal/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Dialog component.
+ * @param ref - The ref to be forwarded to the MuiDialog component.
+ * @returns The rendered Dialog component.
+ */
+const Dialog: OverridableComponent<ModalTypeMap<ModalTypeMap['defaultComponent'], DialogProps>> = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: DialogProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => <MuiDialog ref={ref} className={clsx('OxygenDialog-root')} {...rest} />,
+) as OverridableComponent<ModalTypeMap<ModalTypeMap['defaultComponent'], DialogProps>>;
+
+export default Dialog;
diff --git a/packages/react/src/components/Dialog/__tests__/Dialog.test.tsx b/packages/react/src/components/Dialog/__tests__/Dialog.test.tsx
new file mode 100644
index 00000000..da0f5fe4
--- /dev/null
+++ b/packages/react/src/components/Dialog/__tests__/Dialog.test.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {render} from '@unit-testing';
+import Dialog from '../Dialog';
+
+describe('Dialog', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(
+      <Dialog open>
+        <div />
+      </Dialog>,
+    );
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(
+      <Dialog open>
+        <div />
+      </Dialog>,
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+});
diff --git a/packages/react/src/components/Dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/react/src/components/Dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
new file mode 100644
index 00000000..3cd8d56c
--- /dev/null
+++ b/packages/react/src/components/Dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dialog should match the snapshot 1`] = `
+<body
+  style="padding-right: 1024px; overflow: hidden;"
+>
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root OxygenDialog-root MuiModal-root css-1wzsylk-MuiModal-root-MuiDialog-root"
+    role="presentation"
+  >
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root MuiModal-backdrop css-yiavyu-MuiBackdrop-root-MuiDialog-backdrop"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-testid="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper css-hz1bth-MuiDialog-container"
+      role="presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
+    >
+      <div
+        aria-labelledby=":r1:"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm css-qyj3hh-MuiPaper-root-MuiDialog-paper"
+        role="dialog"
+      >
+        <div />
+      </div>
+    </div>
+    <div
+      data-testid="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/react/src/components/Dialog/index.ts b/packages/react/src/components/Dialog/index.ts
new file mode 100644
index 00000000..4aff5a6f
--- /dev/null
+++ b/packages/react/src/components/Dialog/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {default} from './Dialog';
+export * from './Dialog';
diff --git a/packages/react/src/components/DialogActions/DialogActions.tsx b/packages/react/src/components/DialogActions/DialogActions.tsx
new file mode 100644
index 00000000..e50ac81f
--- /dev/null
+++ b/packages/react/src/components/DialogActions/DialogActions.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import MuiDialogActions from '@mui/material/DialogActions';
+import type {DialogActionsProps as MuiDialogActionsProps} from '@mui/material/DialogActions';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
+
+export type DialogActionsProps = MuiDialogActionsProps;
+
+/**
+ * The Dialog Actions is an optional container for a Dialog's Buttons.
+ *
+ * Demos:
+ *
+ * - [Dialog (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-dialog)
+ * - [Dialog (MUI)](https://mui.com/material-ui/react-dialog/)
+ *
+ * API:
+ *
+ * - [DialogActions API](https://mui.com/material-ui/api/dialog-actions/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the DialogActions component.
+ * @param ref - The ref to be forwarded to the MuiDialogActions component.
+ * @returns The rendered DialogActions component.
+ */
+const DialogActions: ForwardRefExoticComponent<DialogActionsProps> = forwardRef(
+  ({className, ...rest}: DialogActionsProps, ref: Ref<HTMLDivElement>): ReactElement => (
+    <MuiDialogActions ref={ref} className={clsx('OxygenDialogActions-root', className)} {...rest} />
+  ),
+) as ForwardRefExoticComponent<DialogActionsProps>;
+
+export default DialogActions;
diff --git a/packages/react/src/components/DialogActions/__tests__/DialogActions.test.tsx b/packages/react/src/components/DialogActions/__tests__/DialogActions.test.tsx
new file mode 100644
index 00000000..b09e85e2
--- /dev/null
+++ b/packages/react/src/components/DialogActions/__tests__/DialogActions.test.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {render} from '@unit-testing';
+import DialogActions from '../DialogActions';
+
+describe('DialogActions', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(<DialogActions />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<DialogActions />);
+    expect(baseElement).toMatchSnapshot();
+  });
+});
diff --git a/packages/react/src/components/DialogActions/__tests__/__snapshots__/DialogActions.test.tsx.snap b/packages/react/src/components/DialogActions/__tests__/__snapshots__/DialogActions.test.tsx.snap
new file mode 100644
index 00000000..844c5a04
--- /dev/null
+++ b/packages/react/src/components/DialogActions/__tests__/__snapshots__/DialogActions.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DialogActions should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="MuiDialogActions-root MuiDialogActions-spacing OxygenDialogActions-root css-hlj6pa-MuiDialogActions-root"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/react/src/components/DialogActions/index.ts b/packages/react/src/components/DialogActions/index.ts
new file mode 100644
index 00000000..16cdd355
--- /dev/null
+++ b/packages/react/src/components/DialogActions/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {default} from './DialogActions';
+export * from './DialogActions';
diff --git a/packages/react/src/components/DialogContent/DialogContent.tsx b/packages/react/src/components/DialogContent/DialogContent.tsx
new file mode 100644
index 00000000..eb6d3496
--- /dev/null
+++ b/packages/react/src/components/DialogContent/DialogContent.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import MuiDialogContent from '@mui/material/DialogContent';
+import type {DialogContentProps as MuiDialogContentProps} from '@mui/material/DialogContent';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
+
+export type DialogContentProps = MuiDialogContentProps;
+
+/**
+ * The Dialog Content is an optional container for displaying the Dialog's content.
+ *
+ * Demos:
+ *
+ * - [Dialog (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-dialog)
+ * - [Dialog (MUI)](https://mui.com/material-ui/react-dialog/)
+ *
+ * API:
+ *
+ * - [DialogContent API](https://mui.com/material-ui/api/dialog-content/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the DialogContent component.
+ * @param ref - The ref to be forwarded to the MuiDialogContent component.
+ * @returns The rendered DialogContent component.
+ */
+const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef(
+  ({className, ...rest}: DialogContentProps, ref: Ref<HTMLDivElement>): ReactElement => (
+    <MuiDialogContent ref={ref} className={clsx('OxygenDialogContent-root', className)} {...rest} />
+  ),
+) as ForwardRefExoticComponent<DialogContentProps>;
+
+export default DialogContent;
diff --git a/packages/react/src/components/DialogContent/__tests__/DialogContent.test.tsx b/packages/react/src/components/DialogContent/__tests__/DialogContent.test.tsx
new file mode 100644
index 00000000..9445d058
--- /dev/null
+++ b/packages/react/src/components/DialogContent/__tests__/DialogContent.test.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {render} from '@unit-testing';
+import DialogContent from '../DialogContent';
+
+describe('DialogContent', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(<DialogContent />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<DialogContent />);
+    expect(baseElement).toMatchSnapshot();
+  });
+});
diff --git a/packages/react/src/components/DialogContent/__tests__/__snapshots__/DialogContent.test.tsx.snap b/packages/react/src/components/DialogContent/__tests__/__snapshots__/DialogContent.test.tsx.snap
new file mode 100644
index 00000000..71725783
--- /dev/null
+++ b/packages/react/src/components/DialogContent/__tests__/__snapshots__/DialogContent.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DialogContent should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="MuiDialogContent-root OxygenDialogContent-root css-ypiqx9-MuiDialogContent-root"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/react/src/components/DialogContent/index.ts b/packages/react/src/components/DialogContent/index.ts
new file mode 100644
index 00000000..126f0421
--- /dev/null
+++ b/packages/react/src/components/DialogContent/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {default} from './DialogContent';
+export * from './DialogContent';
diff --git a/packages/react/src/components/DialogContentText/DialogContentText.tsx b/packages/react/src/components/DialogContentText/DialogContentText.tsx
new file mode 100644
index 00000000..2bf025a8
--- /dev/null
+++ b/packages/react/src/components/DialogContentText/DialogContentText.tsx
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import MuiDialogContentText from '@mui/material/DialogContentText';
+import type {
+  DialogContentTextTypeMap,
+  DialogContentTextProps as MuiDialogContentTextProps,
+} from '@mui/material/DialogContentText';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import type {ReactElement, ElementType, Ref} from 'react';
+
+export type DialogContentTextProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = DialogContentTextTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiDialogContentTextProps<D, P>, 'component'>;
+
+/**
+ * The Dialog Content Text is a wrapper for text inside of `<DialogContent />`.
+ *
+ * Demos:
+ *
+ * - [Dialog (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-dialog)
+ * - [Dialog (MUI)](https://mui.com/material-ui/react-dialog/)
+ *
+ * API:
+ *
+ * - [DialogContentText API](https://mui.com/material-ui/api/dialog-content-text/)
+ * - inherits [Typography API](https://mui.com/material-ui/api/typography/)
+ *
+ * @remarks
+ * - ✔️ Props of the [Typography](https://mui.com/material-ui/api/typography/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the DialogContentText component.
+ * @param ref - The ref to be forwarded to the MuiDialogContentText component.
+ * @returns The rendered DialogContentText component.
+ */
+const DialogContentText: OverridableComponent<DialogContentTextTypeMap<DialogContentTextProps>> = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: DialogContentTextProps<C>,
+    ref: Ref<HTMLSpanElement>,
+  ): ReactElement => (
+    <MuiDialogContentText ref={ref} className={clsx('OxygenDialogContentText-root', className)} {...rest} />
+  ),
+) as OverridableComponent<DialogContentTextTypeMap<DialogContentTextProps>>;
+
+export default DialogContentText;
diff --git a/packages/react/src/components/DialogContentText/__tests__/DialogContentText.test.tsx b/packages/react/src/components/DialogContentText/__tests__/DialogContentText.test.tsx
new file mode 100644
index 00000000..40dec33e
--- /dev/null
+++ b/packages/react/src/components/DialogContentText/__tests__/DialogContentText.test.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {render} from '@unit-testing';
+import DialogContentText from '../DialogContentText';
+
+describe('DialogContentText', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(<DialogContentText>Demo Text</DialogContentText>);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<DialogContentText>Demo Text</DialogContentText>);
+    expect(baseElement).toMatchSnapshot();
+  });
+});
diff --git a/packages/react/src/components/DialogContentText/__tests__/__snapshots__/DialogContentText.test.tsx.snap b/packages/react/src/components/DialogContentText/__tests__/__snapshots__/DialogContentText.test.tsx.snap
new file mode 100644
index 00000000..7602a382
--- /dev/null
+++ b/packages/react/src/components/DialogContentText/__tests__/__snapshots__/DialogContentText.test.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DialogContentText should match the snapshot 1`] = `
+<body>
+  <div>
+    <p
+      class="MuiTypography-root MuiDialogContentText-root MuiTypography-body1 OxygenDialogContentText-root css-16iuqzr-MuiTypography-root-MuiDialogContentText-root"
+    >
+      Demo Text
+    </p>
+  </div>
+</body>
+`;
diff --git a/packages/react/src/components/DialogContentText/index.ts b/packages/react/src/components/DialogContentText/index.ts
new file mode 100644
index 00000000..34a9223c
--- /dev/null
+++ b/packages/react/src/components/DialogContentText/index.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {default} from './DialogContentText';
+export * from './DialogContentText';
+
+export type {DialogContentTextTypeMap} from './DialogContentText';
diff --git a/packages/react/src/components/DialogTitle/DialogTitle.tsx b/packages/react/src/components/DialogTitle/DialogTitle.tsx
new file mode 100644
index 00000000..f1c562c3
--- /dev/null
+++ b/packages/react/src/components/DialogTitle/DialogTitle.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import MuiDialogTitle from '@mui/material/DialogTitle';
+import type {DialogTitleTypeMap, DialogTitleProps as MuiDialogTitleProps} from '@mui/material/DialogTitle';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import type {ReactElement, ElementType, Ref} from 'react';
+
+export type DialogTitleProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = DialogTitleTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiDialogTitleProps<D, P>, 'component'>;
+
+/**
+ * The Dialog Content Text is a wrapper used for the title of a Dialog.
+ *
+ * Demos:
+ *
+ * - [Dialog (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-dialog)
+ * - [Dialog (MUI)](https://mui.com/material-ui/react-dialog/)
+ *
+ * API:
+ *
+ * - [DialogTitle API](https://mui.com/material-ui/api/dialog-title/)
+ * - inherits [Typography API](https://mui.com/material-ui/api/typography/)
+ *
+ * @remarks
+ * - ✔️ Props of the [Typography](https://mui.com/material-ui/api/typography/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the DialogTitle component.
+ * @param ref - The ref to be forwarded to the MuiDialogTitle component.
+ * @returns The rendered DialogTitle component.
+ */
+const DialogTitle: OverridableComponent<DialogTitleTypeMap<DialogTitleProps>> = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: DialogTitleProps<C>,
+    ref: Ref<HTMLSpanElement>,
+  ): ReactElement => <MuiDialogTitle ref={ref} className={clsx('OxygenDialogTitle-root', className)} {...rest} />,
+) as OverridableComponent<DialogTitleTypeMap<DialogTitleProps>>;
+
+export default DialogTitle;
diff --git a/packages/react/src/components/DialogTitle/__tests__/DialogTitle.test.tsx b/packages/react/src/components/DialogTitle/__tests__/DialogTitle.test.tsx
new file mode 100644
index 00000000..0951b0b5
--- /dev/null
+++ b/packages/react/src/components/DialogTitle/__tests__/DialogTitle.test.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {render} from '@unit-testing';
+import DialogTitle from '../DialogTitle';
+
+describe('DialogTitle', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(<DialogTitle>Demo Title</DialogTitle>);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<DialogTitle>Demo Title</DialogTitle>);
+    expect(baseElement).toMatchSnapshot();
+  });
+});
diff --git a/packages/react/src/components/DialogTitle/__tests__/__snapshots__/DialogTitle.test.tsx.snap b/packages/react/src/components/DialogTitle/__tests__/__snapshots__/DialogTitle.test.tsx.snap
new file mode 100644
index 00000000..998f34a3
--- /dev/null
+++ b/packages/react/src/components/DialogTitle/__tests__/__snapshots__/DialogTitle.test.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DialogTitle should match the snapshot 1`] = `
+<body>
+  <div>
+    <h2
+      class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root OxygenDialogTitle-root css-6em1yz-MuiTypography-root-MuiDialogTitle-root"
+    >
+      Demo Title
+    </h2>
+  </div>
+</body>
+`;
diff --git a/packages/react/src/components/DialogTitle/index.ts b/packages/react/src/components/DialogTitle/index.ts
new file mode 100644
index 00000000..f034f6c3
--- /dev/null
+++ b/packages/react/src/components/DialogTitle/index.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {default} from './DialogTitle';
+export * from './DialogTitle';
+
+export type {DialogTitleTypeMap} from '@mui/material/DialogTitle';
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index 8fbfcfcd..ef397e47 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -112,6 +112,21 @@ export * from './CountryFlag';
 export {default as DataGrid} from './DataGrid';
 export * from './DataGrid';
 
+export {default as Dialog} from './Dialog';
+export * from './Dialog';
+
+export {default as DialogActions} from './DialogActions';
+export * from './DialogActions';
+
+export {default as DialogContent} from './DialogContent';
+export * from './DialogContent';
+
+export {default as DialogContentText} from './DialogContentText';
+export * from './DialogContentText';
+
+export {default as DialogTitle} from './DialogTitle';
+export * from './DialogTitle';
+
 export {default as Divider} from './Divider';
 export * from './Divider';
 

From 7e3f5a87e2d8df3f3cfa07181d39b2c7578d3a59 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 21 Oct 2024 12:25:57 +0530
Subject: [PATCH 13/19] chore(react): remove un-exported `BackdropRoot`

---
 packages/react/src/components/Backdrop/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/components/Backdrop/index.ts b/packages/react/src/components/Backdrop/index.ts
index c992ac72..0fbd0d0d 100644
--- a/packages/react/src/components/Backdrop/index.ts
+++ b/packages/react/src/components/Backdrop/index.ts
@@ -19,5 +19,4 @@
 export {default} from './Backdrop';
 export * from './Backdrop';
 
-export {BackdropRoot} from '@mui/material/Backdrop';
 export type {BackdropComponentsPropsOverrides, BackdropTypeMap} from '@mui/material/Backdrop';

From 2966db1fff8e9ff96cbd3383d3daa5d0d5ef61cb Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 21 Oct 2024 12:28:13 +0530
Subject: [PATCH 14/19] chore(react): update doc comments

---
 packages/react/src/components/Collapse/Collapse.tsx | 2 +-
 packages/react/src/components/Stack/Stack.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Collapse/Collapse.tsx b/packages/react/src/components/Collapse/Collapse.tsx
index 04cadfe3..441545a3 100644
--- a/packages/react/src/components/Collapse/Collapse.tsx
+++ b/packages/react/src/components/Collapse/Collapse.tsx
@@ -40,7 +40,7 @@ export type CollapseProps<C extends ElementType = ElementType<TransitionProps>>
  * - [Card (MUI)](https://mui.com/material-ui/react-card/)
  * - [Lists (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-list)
  * - [Lists (MUI)](https://mui.com/material-ui/react-list/)
- * - [Collapse (Oxygen UI)](https://mui.com/material-ui/transitions/)
+ * - [Collapse (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/utils-collapse)
  * - [Transitions (MUI)](https://mui.com/material-ui/transitions/)
  *
  * API:
diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx
index 8a872e03..808f0647 100644
--- a/packages/react/src/components/Stack/Stack.tsx
+++ b/packages/react/src/components/Stack/Stack.tsx
@@ -39,7 +39,7 @@ export type StackProps<
  *
  * Demos:
  *
- * - [Stack (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-Stack)
+ * - [Stack (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/layout-stack)
  * - [Stack (MUI)](https://mui.com/material-ui/react-stack/)
  *
  * API:

From af171a98a5ef47ad1158c11d9b836f98bb04d3c1 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 21 Oct 2024 12:35:03 +0530
Subject: [PATCH 15/19] chore(react): update export

---
 packages/react/src/components/DialogContentText/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/DialogContentText/index.ts b/packages/react/src/components/DialogContentText/index.ts
index 34a9223c..82959a51 100644
--- a/packages/react/src/components/DialogContentText/index.ts
+++ b/packages/react/src/components/DialogContentText/index.ts
@@ -19,4 +19,4 @@
 export {default} from './DialogContentText';
 export * from './DialogContentText';
 
-export type {DialogContentTextTypeMap} from './DialogContentText';
+export type {DialogContentTextTypeMap} from '@mui/material/DialogContentText';

From 53ce20b8534e7a170bb1eaa58f03dac01f51cbaa Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 21 Oct 2024 12:43:10 +0530
Subject: [PATCH 16/19] chore(react): update copyright

---
 packages/react/src/components/Dialog/index.ts            | 2 +-
 packages/react/src/components/DialogActions/index.ts     | 2 +-
 packages/react/src/components/DialogContent/index.ts     | 2 +-
 packages/react/src/components/DialogContentText/index.ts | 2 +-
 packages/react/src/components/DialogTitle/index.ts       | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/Dialog/index.ts b/packages/react/src/components/Dialog/index.ts
index 4aff5a6f..431de538 100644
--- a/packages/react/src/components/Dialog/index.ts
+++ b/packages/react/src/components/Dialog/index.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
diff --git a/packages/react/src/components/DialogActions/index.ts b/packages/react/src/components/DialogActions/index.ts
index 16cdd355..31405213 100644
--- a/packages/react/src/components/DialogActions/index.ts
+++ b/packages/react/src/components/DialogActions/index.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
diff --git a/packages/react/src/components/DialogContent/index.ts b/packages/react/src/components/DialogContent/index.ts
index 126f0421..cd054029 100644
--- a/packages/react/src/components/DialogContent/index.ts
+++ b/packages/react/src/components/DialogContent/index.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
diff --git a/packages/react/src/components/DialogContentText/index.ts b/packages/react/src/components/DialogContentText/index.ts
index 82959a51..10a7b4dc 100644
--- a/packages/react/src/components/DialogContentText/index.ts
+++ b/packages/react/src/components/DialogContentText/index.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
diff --git a/packages/react/src/components/DialogTitle/index.ts b/packages/react/src/components/DialogTitle/index.ts
index f034f6c3..1da045d2 100644
--- a/packages/react/src/components/DialogTitle/index.ts
+++ b/packages/react/src/components/DialogTitle/index.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except

From 0f69b3b64da3f549cec8ef7fa06e4a5716826268 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 21 Oct 2024 12:43:59 +0530
Subject: [PATCH 17/19] chore(react): update copyright

---
 .../src/components/DialogContentText/DialogContentText.tsx      | 2 +-
 packages/react/src/components/DialogTitle/DialogTitle.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/DialogContentText/DialogContentText.tsx b/packages/react/src/components/DialogContentText/DialogContentText.tsx
index 2bf025a8..06a98b1c 100644
--- a/packages/react/src/components/DialogContentText/DialogContentText.tsx
+++ b/packages/react/src/components/DialogContentText/DialogContentText.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
diff --git a/packages/react/src/components/DialogTitle/DialogTitle.tsx b/packages/react/src/components/DialogTitle/DialogTitle.tsx
index f1c562c3..b9fe3eb1 100644
--- a/packages/react/src/components/DialogTitle/DialogTitle.tsx
+++ b/packages/react/src/components/DialogTitle/DialogTitle.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except

From 59f82e65ed617df09e57c4028bd251e1d6b12c6f Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 21 Oct 2024 12:53:56 +0530
Subject: [PATCH 18/19] chore(react): update colors for dark mode

---
 packages/react/src/components/TextField/text-field.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/TextField/text-field.scss b/packages/react/src/components/TextField/text-field.scss
index ff0fd7b7..6dc6b096 100644
--- a/packages/react/src/components/TextField/text-field.scss
+++ b/packages/react/src/components/TextField/text-field.scss
@@ -17,7 +17,11 @@
  */
 
 :root {
-  --oxygen-palette-ReadOnlyInput-bg: #e9ecef;
+  --oxygen-palette-ReadOnlyInput-bg: var(--oxygen-palette-grey-200);
+}
+
+:root[data-mui-color-scheme="dark"] {
+  --oxygen-palette-ReadOnlyInput-bg: var(--oxygen-palette-grey-900);
 }
 
 .OxygenTextField-root {

From 6d70f06a599120147c584a3c473b9f68ab68866e Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 21 Oct 2024 13:32:06 +0530
Subject: [PATCH 19/19] chore(react): remove redundant export

---
 packages/react/src/index.ts | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index b6dda0e4..5da21c4a 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -21,15 +21,7 @@ export * from './theme';
 export {default as usePastelColorGenerator} from './hooks/use-pastel-color-generator';
 export * from './hooks/use-pastel-color-generator';
 export {default} from './utils/generate-pastel-color';
-export {
-  ToggleButton,
-  ToggleButtonGroup,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogContentText,
-  DialogActions,
-} from '@mui/material';
+export {ToggleButton, ToggleButtonGroup} from '@mui/material';
 export {useColorScheme} from '@mui/material/styles';
 
 export type {Theme} from './models/theme';