From afd0a878822c1874b0ea68a7968364389e0c943f Mon Sep 17 00:00:00 2001
From: Movin Silva <movinpinsara@gmail.com>
Date: Fri, 10 May 2024 15:09:11 +0530
Subject: [PATCH 01/14] feat(auth-components): :sparkles: enhance subtitle
 support for typography

---
 .../SignInTypography/SignInTypography.tsx     |  6 ++++--
 .../SignInTypography/sign-in-typography.scss  | 21 +++++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 packages/react/src/oxygen-ui-react-auth-components/SignInTypography/sign-in-typography.scss

diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInTypography/SignInTypography.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignInTypography/SignInTypography.tsx
index 7e951f8b..590b8231 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignInTypography/SignInTypography.tsx
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInTypography/SignInTypography.tsx
@@ -20,6 +20,7 @@ import {Typography, TypographyProps} from '@oxygen-ui/react';
 import clsx from 'clsx';
 import {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, forwardRef} from 'react';
 import {WithWrapperProps} from '../models/component';
+import './sign-in-typography.scss';
 
 export type SignInTypographyProps<C extends ElementType = ElementType> = {
   component?: C;
@@ -32,7 +33,7 @@ const SignInTypography: ForwardRefExoticComponent<SignInTypographyProps> & WithW
   <C extends ElementType>(props: SignInTypographyProps<C>, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
     const {className, title, subtitle, variant, align, ...rest} = props;
 
-    const classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
+    let classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
 
     let extendedVariant: string = variant || 'body1';
     let extendedAlign: string = align || 'left';
@@ -42,6 +43,7 @@ const SignInTypography: ForwardRefExoticComponent<SignInTypographyProps> & WithW
         extendedVariant = 'h5';
       } else if (subtitle) {
         extendedVariant = 'body1';
+        classes = clsx(classes, `Oxygen${COMPONENT_NAME}-subtitle`);
       }
     }
 
@@ -51,7 +53,7 @@ const SignInTypography: ForwardRefExoticComponent<SignInTypographyProps> & WithW
       }
     }
 
-    return <Typography ref={ref} className={classes} variant={extendedVariant} align={extendedAlign} {...rest} />;
+    return <Typography ref={ref} className={classes} color variant={extendedVariant} align={extendedAlign} {...rest} />;
   },
 ) as ForwardRefExoticComponent<SignInTypographyProps> & WithWrapperProps;
 
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInTypography/sign-in-typography.scss b/packages/react/src/oxygen-ui-react-auth-components/SignInTypography/sign-in-typography.scss
new file mode 100644
index 00000000..ae3a72de
--- /dev/null
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInTypography/sign-in-typography.scss
@@ -0,0 +1,21 @@
+/**
+ * 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.
+ */
+
+.OxygenSignInTypography-subtitle {
+  color: grey;
+}

From f3ddfb8413e3a062553e8a4aa45fb19c4323499b Mon Sep 17 00:00:00 2001
From: Movin Silva <movinpinsara@gmail.com>
Date: Fri, 10 May 2024 16:48:32 +0530
Subject: [PATCH 02/14] feat(auth-components): :sparkles: add prop support for
 SignIn component

---
 .../SignIn/SignIn.tsx                         | 52 +++++++++++++++++--
 1 file changed, 48 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
index 726e995a..d0aeee5b 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
@@ -21,15 +21,20 @@ import clsx from 'clsx';
 import {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, forwardRef} from 'react';
 import {WithWrapperProps} from '../models/component';
 import SignInAlert from '../SignInAlert/SignInAlert';
-import SignInButton from '../SignInButton/SignInButton';
+import SignInButton, {SignInButtonProps} from '../SignInButton/SignInButton';
 import SignInDivider from '../SignInDivider/SignInDivider';
-import SignInLink from '../SignInLink/SignInLink';
+import SignInLink, {SignInLinkProps} from '../SignInLink/SignInLink';
 import SignInPaper from '../SignInPaper/SignInPaper';
-import SignInTextField from '../SignInTextField/SignInTextField';
+import SignInTextField, {SignInTextFieldProps} from '../SignInTextField/SignInTextField';
 import SignInTypography from '../SignInTypography/SignInTypography';
 
 export type SignInProps<C extends ElementType = ElementType> = {
   component?: C;
+  links: SignInLinkProps[];
+  loginOptions?: SignInButtonProps[];
+  subtitle?: string;
+  textFields?: SignInTextFieldProps[];
+  title?: string;
 } & Omit<BoxProps, 'component'>;
 
 type SignInCompoundProps = {
@@ -44,12 +49,51 @@ type SignInCompoundProps = {
 
 const COMPONENT_NAME: string = 'SignIn';
 
+const renderTextFields = (textFields: SignInTextFieldProps[]): ReactElement[] =>
+  textFields.map((textFieldProps: SignInTextFieldProps) => <SignInTextField {...textFieldProps} />);
+
+const renderLinks = (links: SignInLinkProps[]): ReactElement[] =>
+  links.map((linkProps: SignInLinkProps) => (
+    <>
+      <SignInLink {...linkProps} />
+      <br />
+    </>
+  ));
+
+const renderLoginOptions = (loginOptions: SignInButtonProps[]): ReactElement[] =>
+  loginOptions.map((loginOptionProps: SignInButtonProps) => <SignInButton social {...loginOptionProps} />);
+
 const SignIn: ForwardRefExoticComponent<SignInProps> & WithWrapperProps & SignInCompoundProps = forwardRef(
   <C extends ElementType>(props: SignInProps<C>, ref: MutableRefObject<HTMLHRElement>): ReactElement => {
-    const {className, ...rest} = props;
+    const {className, title, subtitle, textFields, links, loginOptions, ...rest} = props;
 
     const classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
 
+    if (title || subtitle || textFields || links || loginOptions) {
+      return (
+        <Box ref={ref} className={classes} {...rest}>
+          <SignInPaper>
+            {title && <SignInTypography title>{title}</SignInTypography>}
+
+            {subtitle && <SignInTypography subtitle>{subtitle}</SignInTypography>}
+
+            {textFields && renderTextFields(textFields)}
+
+            <SignInButton>Sign In</SignInButton>
+
+            {links && renderLinks(links)}
+
+            {loginOptions && (
+              <>
+                <SignInDivider>OR</SignInDivider>
+                {renderLoginOptions(loginOptions)}
+              </>
+            )}
+          </SignInPaper>
+        </Box>
+      );
+    }
+
     return <Box ref={ref} className={classes} {...rest} />;
   },
 ) as ForwardRefExoticComponent<SignInProps> & WithWrapperProps & SignInCompoundProps;

From 1686759f9a64217ec7290bdf6083c1a7a08b64df Mon Sep 17 00:00:00 2001
From: Movin Silva <movinpinsara@gmail.com>
Date: Fri, 10 May 2024 17:42:57 +0530
Subject: [PATCH 03/14] feat(auth-components): :sparkles: add SignInPinInput
 component

---
 .../SignIn/SignIn.tsx                         |  19 ++-
 .../SignInPinInput/SignInPinInput.tsx         | 126 ++++++++++++++++++
 .../SignInPinInput/sign-in-pin-input.scss     |  37 +++++
 3 files changed, 176 insertions(+), 6 deletions(-)
 create mode 100644 packages/react/src/oxygen-ui-react-auth-components/SignInPinInput/SignInPinInput.tsx
 create mode 100644 packages/react/src/oxygen-ui-react-auth-components/SignInPinInput/sign-in-pin-input.scss

diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
index d0aeee5b..b1f98b33 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
@@ -25,12 +25,13 @@ import SignInButton, {SignInButtonProps} from '../SignInButton/SignInButton';
 import SignInDivider from '../SignInDivider/SignInDivider';
 import SignInLink, {SignInLinkProps} from '../SignInLink/SignInLink';
 import SignInPaper from '../SignInPaper/SignInPaper';
+import SignInPinInput from '../SignInPinInput/SignInPinInput';
 import SignInTextField, {SignInTextFieldProps} from '../SignInTextField/SignInTextField';
 import SignInTypography from '../SignInTypography/SignInTypography';
 
 export type SignInProps<C extends ElementType = ElementType> = {
   component?: C;
-  links: SignInLinkProps[];
+  links?: SignInLinkProps[];
   loginOptions?: SignInButtonProps[];
   subtitle?: string;
   textFields?: SignInTextFieldProps[];
@@ -43,6 +44,7 @@ type SignInCompoundProps = {
   Divider: typeof SignInDivider;
   Link: typeof SignInLink;
   Paper: typeof SignInPaper;
+  PinInput: typeof SignInPinInput;
   TextField: typeof SignInTextField;
   Typography: typeof SignInTypography;
 };
@@ -50,18 +52,22 @@ type SignInCompoundProps = {
 const COMPONENT_NAME: string = 'SignIn';
 
 const renderTextFields = (textFields: SignInTextFieldProps[]): ReactElement[] =>
-  textFields.map((textFieldProps: SignInTextFieldProps) => <SignInTextField {...textFieldProps} />);
+  textFields.map((textFieldProps: SignInTextFieldProps, index: number) => (
+    <SignInTextField key={`sign-in-text-field${index + 1}`} {...textFieldProps} />
+  ));
 
 const renderLinks = (links: SignInLinkProps[]): ReactElement[] =>
-  links.map((linkProps: SignInLinkProps) => (
-    <>
+  links.map((linkProps: SignInLinkProps, index: number) => (
+    <div key={`sign-in-link-holder${index + 1}`}>
       <SignInLink {...linkProps} />
       <br />
-    </>
+    </div>
   ));
 
 const renderLoginOptions = (loginOptions: SignInButtonProps[]): ReactElement[] =>
-  loginOptions.map((loginOptionProps: SignInButtonProps) => <SignInButton social {...loginOptionProps} />);
+  loginOptions.map((loginOptionProps: SignInButtonProps, index: number) => (
+    <SignInButton key={`sign-in-button-social${index + 1}`} social {...loginOptionProps} />
+  ));
 
 const SignIn: ForwardRefExoticComponent<SignInProps> & WithWrapperProps & SignInCompoundProps = forwardRef(
   <C extends ElementType>(props: SignInProps<C>, ref: MutableRefObject<HTMLHRElement>): ReactElement => {
@@ -108,5 +114,6 @@ SignIn.Divider = SignInDivider;
 SignIn.Link = SignInLink;
 SignIn.Button = SignInButton;
 SignIn.TextField = SignInTextField;
+SignIn.PinInput = SignInPinInput;
 
 export default SignIn;
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInPinInput/SignInPinInput.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignInPinInput/SignInPinInput.tsx
new file mode 100644
index 00000000..d6b3940f
--- /dev/null
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInPinInput/SignInPinInput.tsx
@@ -0,0 +1,126 @@
+/**
+ * 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 {Box, BoxProps, TextField, TextFieldProps} from '@oxygen-ui/react';
+import clsx from 'clsx';
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  MutableRefObject,
+  ForwardRefExoticComponent,
+  forwardRef,
+  ElementType,
+  ReactElement,
+} from 'react';
+import {WithWrapperProps} from '../models/component';
+import './sign-in-pin-input.scss';
+
+const COMPONENT_NAME: string = 'SignInPinInput';
+
+export type SignInPinInputProps<C extends ElementType = ElementType> = {
+  component?: C;
+  itemProps?: TextFieldProps;
+  length: number;
+  onPinChange?: (pin: string) => void;
+} & Omit<BoxProps, 'component'>;
+
+const SignInPinInput: ForwardRefExoticComponent<SignInPinInputProps> & WithWrapperProps = forwardRef(
+  <C extends ElementType>(props: SignInPinInputProps<C>, ref: MutableRefObject<HTMLHRElement>): ReactElement => {
+    const {length, onPinChange, className, itemProps, ...rest} = props;
+
+    const classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
+
+    const [totp, setTotp] = useState(Array(length).fill('')); // Initialize a state variable for the TOTP
+
+    const refs: MutableRefObject<React.RefObject<HTMLInputElement>[]> = useRef(
+      totp.map(() => React.createRef<HTMLInputElement>()),
+    );
+
+    useEffect(() => {
+      /**
+       * If all fields are filled, call onPinChange
+       */
+      if (onPinChange && totp.every((value: string) => value !== '')) {
+        onPinChange(totp.join(''));
+      }
+    }, [totp, onPinChange]);
+
+    const handleChange = (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
+      const newTotp: string[] = [...totp];
+      newTotp[index] = event.target.value;
+      setTotp(newTotp);
+
+      /**
+       * If a character is entered and there's a next TextField, focus it
+       */
+      if (event.target.value && index < totp.length - 1) {
+        refs.current[index + 1].current?.focus();
+      }
+    };
+
+    const handleKeyDown = (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {
+      /**
+       * If the backspace key is pressed and the current field is empty
+       */
+      if (event.key === 'Backspace' && totp[index] === '') {
+        /**
+         * Prevent the default action to stop deleting characters in the previous field
+         */
+        event.preventDefault();
+
+        /**
+         * If there's a previous field, focus it
+         */
+        if (index > 0) {
+          refs.current[index - 1].current?.focus();
+
+          /**
+           * Clear the value of the previous field
+           */
+          const newTotp: string[] = [...totp];
+          newTotp[index - 1] = '';
+          setTotp(newTotp);
+        }
+      }
+    };
+
+    return (
+      <Box className={classes} ref={ref} {...rest}>
+        {[...Array(length)].map((_: number, index: number) => (
+          <TextField
+            key={`pincode-${index + 1}`}
+            id={`pincode-${index + 1}`}
+            name="number"
+            placeholder="."
+            className="input"
+            value={totp[index]}
+            onChange={handleChange(index)}
+            inputRef={refs.current[index]}
+            inputProps={{maxLength: 1}}
+            onKeyDown={handleKeyDown(index)}
+            {...itemProps}
+          />
+        ))}
+      </Box>
+    );
+  },
+) as ForwardRefExoticComponent<SignInPinInputProps> & WithWrapperProps;
+
+SignInPinInput.muiName = COMPONENT_NAME;
+export default SignInPinInput;
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInPinInput/sign-in-pin-input.scss b/packages/react/src/oxygen-ui-react-auth-components/SignInPinInput/sign-in-pin-input.scss
new file mode 100644
index 00000000..121aae46
--- /dev/null
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInPinInput/sign-in-pin-input.scss
@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+
+.OxygenSignInPinInput {
+  display: flex;
+  flex-flow: row nowrap;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+  margin: 16px 0;
+
+  .MuiInputBase-input {
+    text-align: center;
+  }
+
+  input {
+    padding: 16px 0;
+    width: 45px;
+  }
+}

From ee52fd0adc7f8418c20f67ecd635955f56855d88 Mon Sep 17 00:00:00 2001
From: Movin Silva <movinpinsara@gmail.com>
Date: Sat, 11 May 2024 09:11:47 +0530
Subject: [PATCH 04/14] feat(auth-components): :sparkles: add SignInImage
 component

---
 .../SignIn/SignIn.tsx                         |  3 ++
 .../SignInImage/SignInImage.tsx               | 41 +++++++++++++++++++
 .../SignInImage/sign-in-image.scss            | 22 ++++++++++
 3 files changed, 66 insertions(+)
 create mode 100644 packages/react/src/oxygen-ui-react-auth-components/SignInImage/SignInImage.tsx
 create mode 100644 packages/react/src/oxygen-ui-react-auth-components/SignInImage/sign-in-image.scss

diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
index b1f98b33..5acacd50 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
@@ -23,6 +23,7 @@ import {WithWrapperProps} from '../models/component';
 import SignInAlert from '../SignInAlert/SignInAlert';
 import SignInButton, {SignInButtonProps} from '../SignInButton/SignInButton';
 import SignInDivider from '../SignInDivider/SignInDivider';
+import SignInImage from '../SignInImage/SignInImage';
 import SignInLink, {SignInLinkProps} from '../SignInLink/SignInLink';
 import SignInPaper from '../SignInPaper/SignInPaper';
 import SignInPinInput from '../SignInPinInput/SignInPinInput';
@@ -42,6 +43,7 @@ type SignInCompoundProps = {
   Alert: typeof SignInAlert;
   Button: typeof SignInButton;
   Divider: typeof SignInDivider;
+  Image: typeof SignInImage;
   Link: typeof SignInLink;
   Paper: typeof SignInPaper;
   PinInput: typeof SignInPinInput;
@@ -115,5 +117,6 @@ SignIn.Link = SignInLink;
 SignIn.Button = SignInButton;
 SignIn.TextField = SignInTextField;
 SignIn.PinInput = SignInPinInput;
+SignIn.Image = SignInImage;
 
 export default SignIn;
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInImage/SignInImage.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignInImage/SignInImage.tsx
new file mode 100644
index 00000000..117e0c27
--- /dev/null
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInImage/SignInImage.tsx
@@ -0,0 +1,41 @@
+/**
+ * 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 clsx from 'clsx';
+import {ForwardRefExoticComponent, ImgHTMLAttributes, MutableRefObject, ReactElement, forwardRef} from 'react';
+import {WithWrapperProps} from '../models/component';
+import './sign-in-image.scss';
+
+export type SignInImageProps = ImgHTMLAttributes<HTMLImageElement>;
+
+const COMPONENT_NAME: string = 'SignInImage';
+
+const SignInImage: ForwardRefExoticComponent<SignInImageProps> & WithWrapperProps = forwardRef(
+  (props: SignInImageProps, ref: MutableRefObject<HTMLImageElement>): ReactElement => {
+    const {className, alt, ...rest} = props;
+
+    const classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
+
+    return <img alt={alt} ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<SignInImageProps> & WithWrapperProps;
+
+SignInImage.displayName = COMPONENT_NAME;
+SignInImage.muiName = COMPONENT_NAME;
+
+export default SignInImage;
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInImage/sign-in-image.scss b/packages/react/src/oxygen-ui-react-auth-components/SignInImage/sign-in-image.scss
new file mode 100644
index 00000000..49eda1de
--- /dev/null
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInImage/sign-in-image.scss
@@ -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.
+ */
+
+.OxygenSignInImage {
+  margin: 16px 0;
+  width: 65px;
+}

From fdc0c5d04ee37d7f1028038d39de23f7e685e3e6 Mon Sep 17 00:00:00 2001
From: Movin Silva <movinpinsara@gmail.com>
Date: Sat, 11 May 2024 09:13:30 +0530
Subject: [PATCH 05/14] feat(auth-components): :lipstick: add styles for SignIn
 component

---
 .../SignIn/SignIn.tsx                         |  1 +
 .../SignIn/sign-in.scss                       | 27 +++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 packages/react/src/oxygen-ui-react-auth-components/SignIn/sign-in.scss

diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
index 5acacd50..51211147 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
@@ -29,6 +29,7 @@ import SignInPaper from '../SignInPaper/SignInPaper';
 import SignInPinInput from '../SignInPinInput/SignInPinInput';
 import SignInTextField, {SignInTextFieldProps} from '../SignInTextField/SignInTextField';
 import SignInTypography from '../SignInTypography/SignInTypography';
+import './sign-in.scss';
 
 export type SignInProps<C extends ElementType = ElementType> = {
   component?: C;
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignIn/sign-in.scss b/packages/react/src/oxygen-ui-react-auth-components/SignIn/sign-in.scss
new file mode 100644
index 00000000..0db727a4
--- /dev/null
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignIn/sign-in.scss
@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+
+.OxygenSignIn {
+  display: flex;
+  flex-flow: column nowrap;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  text-align: left;
+  padding: 20px;
+}

From a3835bf04e4aead29a3ad79ea0fe40bd64feef27 Mon Sep 17 00:00:00 2001
From: Movin Silva <movinpinsara@gmail.com>
Date: Sat, 11 May 2024 09:19:36 +0530
Subject: [PATCH 06/14] feat(auth-components): :sparkles: add prop support for
 logo in SignIn component

---
 .../src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
index 51211147..481a743b 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
@@ -35,6 +35,7 @@ export type SignInProps<C extends ElementType = ElementType> = {
   component?: C;
   links?: SignInLinkProps[];
   loginOptions?: SignInButtonProps[];
+  logo?: string;
   subtitle?: string;
   textFields?: SignInTextFieldProps[];
   title?: string;
@@ -74,13 +75,14 @@ const renderLoginOptions = (loginOptions: SignInButtonProps[]): ReactElement[] =
 
 const SignIn: ForwardRefExoticComponent<SignInProps> & WithWrapperProps & SignInCompoundProps = forwardRef(
   <C extends ElementType>(props: SignInProps<C>, ref: MutableRefObject<HTMLHRElement>): ReactElement => {
-    const {className, title, subtitle, textFields, links, loginOptions, ...rest} = props;
+    const {className, title, subtitle, textFields, links, loginOptions, logo, ...rest} = props;
 
     const classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
 
-    if (title || subtitle || textFields || links || loginOptions) {
+    if (title || subtitle || textFields || links || loginOptions || logo) {
       return (
         <Box ref={ref} className={classes} {...rest}>
+          {logo && <SignInImage src={logo} />}
           <SignInPaper>
             {title && <SignInTypography title>{title}</SignInTypography>}
 

From 552bfc29ea044378babfa462350ab75bd771d69b Mon Sep 17 00:00:00 2001
From: Movin Silva <movinpinsara@gmail.com>
Date: Sat, 11 May 2024 09:20:49 +0530
Subject: [PATCH 07/14] style(auth-components): :art: format signIn component

---
 .../react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
index 481a743b..7de88eb4 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
@@ -83,6 +83,7 @@ const SignIn: ForwardRefExoticComponent<SignInProps> & WithWrapperProps & SignIn
       return (
         <Box ref={ref} className={classes} {...rest}>
           {logo && <SignInImage src={logo} />}
+
           <SignInPaper>
             {title && <SignInTypography title>{title}</SignInTypography>}
 

From 31f65c956b407f263acd04d5bad9807c364a4350 Mon Sep 17 00:00:00 2001
From: Movin Silva <movinpinsara@gmail.com>
Date: Sat, 11 May 2024 13:44:52 +0530
Subject: [PATCH 08/14] feat(auth-components): :sparkles: add SignInFooter
 component

---
 .../SignIn/SignIn.tsx                         |  3 +
 .../SignInFooter/SignInFooter.tsx             | 63 +++++++++++++++++++
 .../SignInFooter/sign-in-footer.scss          | 32 ++++++++++
 3 files changed, 98 insertions(+)
 create mode 100644 packages/react/src/oxygen-ui-react-auth-components/SignInFooter/SignInFooter.tsx
 create mode 100644 packages/react/src/oxygen-ui-react-auth-components/SignInFooter/sign-in-footer.scss

diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
index 7de88eb4..1dcc53a4 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
@@ -23,6 +23,7 @@ import {WithWrapperProps} from '../models/component';
 import SignInAlert from '../SignInAlert/SignInAlert';
 import SignInButton, {SignInButtonProps} from '../SignInButton/SignInButton';
 import SignInDivider from '../SignInDivider/SignInDivider';
+import SignInFooter from '../SignInFooter/SignInFooter';
 import SignInImage from '../SignInImage/SignInImage';
 import SignInLink, {SignInLinkProps} from '../SignInLink/SignInLink';
 import SignInPaper from '../SignInPaper/SignInPaper';
@@ -45,6 +46,7 @@ type SignInCompoundProps = {
   Alert: typeof SignInAlert;
   Button: typeof SignInButton;
   Divider: typeof SignInDivider;
+  Footer: typeof SignInFooter;
   Image: typeof SignInImage;
   Link: typeof SignInLink;
   Paper: typeof SignInPaper;
@@ -122,5 +124,6 @@ SignIn.Button = SignInButton;
 SignIn.TextField = SignInTextField;
 SignIn.PinInput = SignInPinInput;
 SignIn.Image = SignInImage;
+SignIn.Footer = SignInFooter;
 
 export default SignIn;
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/SignInFooter.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/SignInFooter.tsx
new file mode 100644
index 00000000..0cab886a
--- /dev/null
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/SignInFooter.tsx
@@ -0,0 +1,63 @@
+/**
+ * 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 {Grid, GridProps} from '@oxygen-ui/react';
+import clsx from 'clsx';
+import {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, forwardRef} from 'react';
+import {WithWrapperProps} from '../models/component';
+import SignInLink from '../SignInLink/SignInLink';
+import SignInTypography from '../SignInTypography/SignInTypography';
+import './sign-in-footer.scss';
+
+const COMPONENT_NAME: string = 'SignInFooter';
+
+export type SignInFooterProps<C extends ElementType = ElementType> = {
+  component?: C;
+} & Omit<GridProps, 'component'>;
+
+// TODO: Handling props for the component
+const SignInFooter: ForwardRefExoticComponent<SignInFooterProps> & WithWrapperProps = forwardRef(
+  <C extends ElementType>(props: SignInFooterProps<C>, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
+    const year: number = new Date().getFullYear();
+
+    const {className, ...rest} = props;
+
+    const classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
+
+    return (
+      <Grid className={classes} container direction="column" alignItems="center" ref={ref} {...rest}>
+        <Grid>
+          <SignInTypography>© {year} WSO2 LLC.</SignInTypography>
+        </Grid>
+        <Grid container justifyContent="space-between" xs={12}>
+          <Grid>
+            <SignInLink>Terms of Use</SignInLink>
+          </Grid>
+          <Grid>
+            <SignInLink>Privacy Policy</SignInLink>
+          </Grid>
+          <Grid>
+            <SignInTypography>en-US</SignInTypography>
+          </Grid>
+        </Grid>
+      </Grid>
+    );
+  },
+) as ForwardRefExoticComponent<SignInFooterProps> & WithWrapperProps;
+
+export default SignInFooter;
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/sign-in-footer.scss b/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/sign-in-footer.scss
new file mode 100644
index 00000000..6c19aa9b
--- /dev/null
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/sign-in-footer.scss
@@ -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.
+ */
+
+.OxygenSignInFooter {
+  width: 100%;
+  margin: 16px 0;
+  color: grey;
+
+  .OxygenSignInLink {
+    color: grey;
+
+    &:hover {
+      color: #ff7300;
+      cursor: pointer;
+    }
+  }
+}

From ddcc908f8167daf1b2df68ee361f7c98a98a4357 Mon Sep 17 00:00:00 2001
From: Movin Silva <movinpinsara@gmail.com>
Date: Sat, 11 May 2024 13:47:54 +0530
Subject: [PATCH 09/14] refactor(auth-components): :recycle: change naming
 style of class names in SignInButton

---
 .../SignInButton/SignInButton.tsx                               | 2 +-
 .../SignInButton/sign-in-button.scss                            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInButton/SignInButton.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignInButton/SignInButton.tsx
index acfe8b4a..51a8fb98 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignInButton/SignInButton.tsx
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInButton/SignInButton.tsx
@@ -35,7 +35,7 @@ const SignInButton: ForwardRefExoticComponent<SignInButtonProps> & WithWrapperPr
 
     let classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
     if (social) {
-      classes = clsx(classes, `Oxygen${COMPONENT_NAME}Social`);
+      classes = clsx(classes, `Oxygen${COMPONENT_NAME}-social`);
     }
 
     return <Button ref={ref} className={classes} fullWidth variant="contained" {...rest} />;
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInButton/sign-in-button.scss b/packages/react/src/oxygen-ui-react-auth-components/SignInButton/sign-in-button.scss
index eee4a6c0..6498e7ab 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignInButton/sign-in-button.scss
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInButton/sign-in-button.scss
@@ -20,7 +20,7 @@
   margin: 16px 0;
 }
 
-.OxygenSignInButtonSocial {
+.OxygenSignInButton-social {
   background: white;
   color: black;
   margin: 0;

From 50ea56126d1556c80bb74958bcef6978c999f7cd Mon Sep 17 00:00:00 2001
From: Movin Silva <movinpinsara@gmail.com>
Date: Mon, 13 May 2024 14:07:16 +0530
Subject: [PATCH 10/14] feat(auth-components): :sparkles: update footer
 component to accept props

---
 .../SignInFooter/SignInFooter.tsx             | 22 +++++--------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/SignInFooter.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/SignInFooter.tsx
index 0cab886a..31294fe0 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/SignInFooter.tsx
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/SignInFooter.tsx
@@ -20,40 +20,30 @@ import {Grid, GridProps} from '@oxygen-ui/react';
 import clsx from 'clsx';
 import {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, forwardRef} from 'react';
 import {WithWrapperProps} from '../models/component';
-import SignInLink from '../SignInLink/SignInLink';
-import SignInTypography from '../SignInTypography/SignInTypography';
+import SignInTypography, {SignInTypographyProps} from '../SignInTypography/SignInTypography';
 import './sign-in-footer.scss';
 
 const COMPONENT_NAME: string = 'SignInFooter';
 
 export type SignInFooterProps<C extends ElementType = ElementType> = {
   component?: C;
+  copyrights?: SignInTypographyProps;
+  items?: GridProps[];
 } & Omit<GridProps, 'component'>;
 
-// TODO: Handling props for the component
 const SignInFooter: ForwardRefExoticComponent<SignInFooterProps> & WithWrapperProps = forwardRef(
   <C extends ElementType>(props: SignInFooterProps<C>, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const year: number = new Date().getFullYear();
-
-    const {className, ...rest} = props;
+    const {className, copyrights, items, ...rest} = props;
 
     const classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
 
     return (
       <Grid className={classes} container direction="column" alignItems="center" ref={ref} {...rest}>
         <Grid>
-          <SignInTypography>© {year} WSO2 LLC.</SignInTypography>
+          <SignInTypography {...copyrights} />
         </Grid>
         <Grid container justifyContent="space-between" xs={12}>
-          <Grid>
-            <SignInLink>Terms of Use</SignInLink>
-          </Grid>
-          <Grid>
-            <SignInLink>Privacy Policy</SignInLink>
-          </Grid>
-          <Grid>
-            <SignInTypography>en-US</SignInTypography>
-          </Grid>
+          {items && items.map((item: GridProps, index: number) => <Grid key={`gride-item-${index + 1}`} {...item} />)}
         </Grid>
       </Grid>
     );

From e1665b2f895db9680d8816847ae3a2e7a4e55cf5 Mon Sep 17 00:00:00 2001
From: Movin Silva <movinpinsara@gmail.com>
Date: Mon, 13 May 2024 14:10:38 +0530
Subject: [PATCH 11/14] fix(auth-components): :coffin: remove prop from
 SignInTypography

---
 .../SignInTypography/SignInTypography.tsx                       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInTypography/SignInTypography.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignInTypography/SignInTypography.tsx
index 590b8231..c974f759 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignInTypography/SignInTypography.tsx
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInTypography/SignInTypography.tsx
@@ -53,7 +53,7 @@ const SignInTypography: ForwardRefExoticComponent<SignInTypographyProps> & WithW
       }
     }
 
-    return <Typography ref={ref} className={classes} color variant={extendedVariant} align={extendedAlign} {...rest} />;
+    return <Typography ref={ref} className={classes} variant={extendedVariant} align={extendedAlign} {...rest} />;
   },
 ) as ForwardRefExoticComponent<SignInTypographyProps> & WithWrapperProps;
 

From 312befac6d4c64ee27cdbf2819cfaff3e0a73cc0 Mon Sep 17 00:00:00 2001
From: Movin Silva <movinpinsara@gmail.com>
Date: Mon, 13 May 2024 18:20:29 +0530
Subject: [PATCH 12/14] feat(auth-components): :sparkles: enhance SignIn
 component props

---
 .../SignIn/SignIn.tsx                         | 160 ++++++++++++++----
 1 file changed, 129 insertions(+), 31 deletions(-)

diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
index 1dcc53a4..0a8b6c69 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
@@ -18,7 +18,14 @@
 
 import {Box, BoxProps} from '@oxygen-ui/react';
 import clsx from 'clsx';
-import {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, forwardRef} from 'react';
+import {
+  ElementType,
+  ForwardRefExoticComponent,
+  MutableRefObject,
+  ReactElement,
+  forwardRef,
+  isValidElement,
+} from 'react';
 import {WithWrapperProps} from '../models/component';
 import SignInAlert from '../SignInAlert/SignInAlert';
 import SignInButton, {SignInButtonProps} from '../SignInButton/SignInButton';
@@ -29,17 +36,39 @@ import SignInLink, {SignInLinkProps} from '../SignInLink/SignInLink';
 import SignInPaper from '../SignInPaper/SignInPaper';
 import SignInPinInput from '../SignInPinInput/SignInPinInput';
 import SignInTextField, {SignInTextFieldProps} from '../SignInTextField/SignInTextField';
-import SignInTypography from '../SignInTypography/SignInTypography';
+import SignInTypography, {SignInTypographyProps} from '../SignInTypography/SignInTypography';
 import './sign-in.scss';
 
+type Footer =
+  | ReactElement
+  | {
+      copyrights?: {
+        link?: string;
+        text: string;
+      };
+      locale?: {
+        text: string;
+      };
+      privacyPolicy?: {
+        link?: string;
+        text: string;
+      };
+      termsOfUse?: {
+        link?: string;
+        text: string;
+      };
+    };
+
 export type SignInProps<C extends ElementType = ElementType> = {
   component?: C;
+  footer?: Footer;
   links?: SignInLinkProps[];
   loginOptions?: SignInButtonProps[];
   logo?: string;
-  subtitle?: string;
+  submitButton?: {text: string} & SignInButtonProps;
+  subtitle?: {text: string} & SignInTypographyProps;
   textFields?: SignInTextFieldProps[];
-  title?: string;
+  title?: {text: string} & SignInTypographyProps;
 } & Omit<BoxProps, 'component'>;
 
 type SignInCompoundProps = {
@@ -77,38 +106,107 @@ const renderLoginOptions = (loginOptions: SignInButtonProps[]): ReactElement[] =
 
 const SignIn: ForwardRefExoticComponent<SignInProps> & WithWrapperProps & SignInCompoundProps = forwardRef(
   <C extends ElementType>(props: SignInProps<C>, ref: MutableRefObject<HTMLHRElement>): ReactElement => {
-    const {className, title, subtitle, textFields, links, loginOptions, logo, ...rest} = props;
+    const {
+      className,
+      title,
+      subtitle,
+      textFields = [
+        {
+          label: 'username',
+          name: 'text',
+          placeholder: 'Enter your username',
+        },
+        {
+          label: 'Password',
+          name: 'password',
+          placeholder: 'Enter your password',
+          type: 'password',
+        },
+      ],
+      links,
+      loginOptions,
+      logo,
+      submitButton,
+      footer,
+      ...rest
+    } = props;
 
     const classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
 
-    if (title || subtitle || textFields || links || loginOptions || logo) {
-      return (
-        <Box ref={ref} className={classes} {...rest}>
-          {logo && <SignInImage src={logo} />}
-
-          <SignInPaper>
-            {title && <SignInTypography title>{title}</SignInTypography>}
-
-            {subtitle && <SignInTypography subtitle>{subtitle}</SignInTypography>}
-
-            {textFields && renderTextFields(textFields)}
-
-            <SignInButton>Sign In</SignInButton>
-
-            {links && renderLinks(links)}
-
-            {loginOptions && (
-              <>
-                <SignInDivider>OR</SignInDivider>
-                {renderLoginOptions(loginOptions)}
-              </>
-            )}
-          </SignInPaper>
-        </Box>
-      );
+    /**
+     * Destructure the title and subtitle props to extract the title and subtitle as both cannot be passed.
+     */
+    const {
+      children: titleChildren,
+      text: titleText,
+      title: titleTitle,
+      subtitle: titleSubtitle,
+      ...restTitleProps
+    } = title ?? {};
+
+    const {
+      children: subtitleChildren,
+      text: subtitleText,
+      title: subtitleTitle,
+      subtitle: subtitleSubtitle,
+      ...restSubtitleProps
+    } = subtitle ?? {};
+
+    const {children: submitButtonChildren, text: submitButtonText, ...restSubmitButtonTextProps} = submitButton ?? {};
+
+    /**
+     * If SignIn component contains any children render only the outer box.
+     * Otherwise render the default SignIn component.
+     */
+    if (props?.['children']) {
+      return <Box ref={ref} className={classes} {...rest} />;
     }
 
-    return <Box ref={ref} className={classes} {...rest} />;
+    return (
+      <Box ref={ref} className={classes} {...rest}>
+        {logo && <SignInImage src={logo} />}
+
+        <SignInPaper>
+          <SignInTypography title {...restTitleProps}>
+            {titleChildren ?? titleText ?? 'Sign In'}
+          </SignInTypography>
+
+          {subtitle && (
+            <SignInTypography subtitle {...restSubtitleProps}>
+              {subtitleChildren ?? subtitleText}
+            </SignInTypography>
+          )}
+
+          {renderTextFields(textFields)}
+
+          <SignInButton {...restSubmitButtonTextProps}>
+            {submitButtonChildren ?? submitButtonText ?? 'Sign In'}
+          </SignInButton>
+
+          {links && renderLinks(links)}
+
+          {loginOptions && (
+            <>
+              <SignInDivider>OR</SignInDivider>
+              {renderLoginOptions(loginOptions)}
+            </>
+          )}
+        </SignInPaper>
+
+        {footer && isValidElement(footer) ? (
+          footer
+        ) : (
+          <SignInFooter
+            copyrights={{children: <SignInLink href={footer?.copyrights?.link}>{footer?.copyrights?.text}</SignInLink>}}
+            items={[
+              {children: <SignInLink href={footer?.termsOfUse?.link}>{footer?.termsOfUse?.text}</SignInLink>},
+              {children: <SignInLink href={footer?.privacyPolicy?.link}>{footer?.privacyPolicy?.text}</SignInLink>},
+              {children: <SignInTypography>{footer?.locale?.text}</SignInTypography>},
+            ]}
+          />
+        )}
+      </Box>
+    );
   },
 ) as ForwardRefExoticComponent<SignInProps> & WithWrapperProps & SignInCompoundProps;
 

From 3746937d5a5d056d6c526fcb919078dbb8ea7607 Mon Sep 17 00:00:00 2001
From: Movin Silva <movinpinsara@gmail.com>
Date: Mon, 13 May 2024 19:18:34 +0530
Subject: [PATCH 13/14] refactor(auth-components): :recycle: refactor SignIn
 component

---
 .../SignIn/SignIn.tsx                         | 34 +++++++------------
 1 file changed, 13 insertions(+), 21 deletions(-)

diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
index 0a8b6c69..c79aa6db 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
@@ -86,24 +86,6 @@ type SignInCompoundProps = {
 
 const COMPONENT_NAME: string = 'SignIn';
 
-const renderTextFields = (textFields: SignInTextFieldProps[]): ReactElement[] =>
-  textFields.map((textFieldProps: SignInTextFieldProps, index: number) => (
-    <SignInTextField key={`sign-in-text-field${index + 1}`} {...textFieldProps} />
-  ));
-
-const renderLinks = (links: SignInLinkProps[]): ReactElement[] =>
-  links.map((linkProps: SignInLinkProps, index: number) => (
-    <div key={`sign-in-link-holder${index + 1}`}>
-      <SignInLink {...linkProps} />
-      <br />
-    </div>
-  ));
-
-const renderLoginOptions = (loginOptions: SignInButtonProps[]): ReactElement[] =>
-  loginOptions.map((loginOptionProps: SignInButtonProps, index: number) => (
-    <SignInButton key={`sign-in-button-social${index + 1}`} social {...loginOptionProps} />
-  ));
-
 const SignIn: ForwardRefExoticComponent<SignInProps> & WithWrapperProps & SignInCompoundProps = forwardRef(
   <C extends ElementType>(props: SignInProps<C>, ref: MutableRefObject<HTMLHRElement>): ReactElement => {
     const {
@@ -177,18 +159,28 @@ const SignIn: ForwardRefExoticComponent<SignInProps> & WithWrapperProps & SignIn
             </SignInTypography>
           )}
 
-          {renderTextFields(textFields)}
+          {textFields.map((textFieldProps: SignInTextFieldProps, index: number) => (
+            <SignInTextField key={`sign-in-text-field${index + 1}`} {...textFieldProps} />
+          ))}
 
           <SignInButton {...restSubmitButtonTextProps}>
             {submitButtonChildren ?? submitButtonText ?? 'Sign In'}
           </SignInButton>
 
-          {links && renderLinks(links)}
+          {links &&
+            links.map((linkProps: SignInLinkProps, index: number) => (
+              <div key={`sign-in-link-holder${index + 1}`}>
+                <SignInLink {...linkProps} />
+                <br />
+              </div>
+            ))}
 
           {loginOptions && (
             <>
               <SignInDivider>OR</SignInDivider>
-              {renderLoginOptions(loginOptions)}
+              {loginOptions.map((loginOptionProps: SignInButtonProps, index: number) => (
+                <SignInButton key={`sign-in-button-social${index + 1}`} social {...loginOptionProps} />
+              ))}
             </>
           )}
         </SignInPaper>

From bc928d36f5149ccc0de2bab1afaec3e614eddef3 Mon Sep 17 00:00:00 2001
From: Movin Silva <movinpinsara@gmail.com>
Date: Mon, 13 May 2024 19:27:34 +0530
Subject: [PATCH 14/14] fix(auth-components): :lipstick: update the colors of
 footer

---
 .../SignInFooter/sign-in-footer.scss                        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/sign-in-footer.scss b/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/sign-in-footer.scss
index 6c19aa9b..2800c95c 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/sign-in-footer.scss
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/sign-in-footer.scss
@@ -19,13 +19,13 @@
 .OxygenSignInFooter {
   width: 100%;
   margin: 16px 0;
-  color: grey;
+  color: var(--oxygen-palette-text-secondary);
 
   .OxygenSignInLink {
-    color: grey;
+    color: var(--oxygen-palette-text-secondary);
 
     &:hover {
-      color: #ff7300;
+      color: var(--oxygen-palette-primary-main);
       cursor: pointer;
     }
   }