From 8160a1bfaf6046ae0eef692a7a5c0cc7cf004235 Mon Sep 17 00:00:00 2001
From: Raalzz <rahulsawanth06@gmail.com>
Date: Tue, 31 Jan 2023 13:08:46 +0530
Subject: [PATCH 1/5] fix: includes util function to map defined values and
 upated Radio component

---
 docs/docs/components/radio.mdx                  |  4 ++--
 packages/lib/src/components/Radio/Radio.tsx     | 17 +++++++++--------
 .../components/Radio/RadioGroup/RadioGroup.tsx  |  9 ++-------
 .../src/components/Radio/radio.styles.css.ts    |  1 +
 .../lib/src/components/Radio/radio.types.ts     |  7 +++----
 .../access-defined-values.ts                    | 11 +++++++++++
 packages/lib/src/utils/index.ts                 |  2 ++
 7 files changed, 30 insertions(+), 21 deletions(-)
 create mode 100644 packages/lib/src/utils/access-defined-values/access-defined-values.ts
 create mode 100644 packages/lib/src/utils/index.ts

diff --git a/docs/docs/components/radio.mdx b/docs/docs/components/radio.mdx
index b0b04cb..b7ca75b 100644
--- a/docs/docs/components/radio.mdx
+++ b/docs/docs/components/radio.mdx
@@ -144,8 +144,8 @@ const Demo = () => {
 
 | Key            |              type               | Optional? |
 | :------------- | :-----------------------------: | --------: |
-| value          |            `string;`            |        No |
-| name           |            `string;`            |        No |
+| value          |            `string;`            |       Yes |
+| name           |            `string;`            |       Yes |
 | radioSize      | `xs` `sm` `md` `lg` `xl` string |       Yes |
 | isDisabled     |            `boolean`            |       Yes |
 | baseStyles     |       `baseStyles object`       |       Yes |
diff --git a/packages/lib/src/components/Radio/Radio.tsx b/packages/lib/src/components/Radio/Radio.tsx
index 8b15ed1..5c52f28 100644
--- a/packages/lib/src/components/Radio/Radio.tsx
+++ b/packages/lib/src/components/Radio/Radio.tsx
@@ -9,8 +9,8 @@ import {
 } from "./radio.styles.css";
 import "./radio.global.styles.css";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { eliminateUndefinedKeys } from "../../utils/object-utils";
 import { SvgDot } from "../_internal/Icons/SvgDot";
+import { accessDefinedValues, eliminateUndefinedKeys } from "../../utils";
 
 const Radio: ForwardRefRenderFunction<HTMLInputElement, IRadioProps> = (
   {
@@ -19,20 +19,21 @@ const Radio: ForwardRefRenderFunction<HTMLInputElement, IRadioProps> = (
     value,
     name,
     checked,
-    radioSize = "xs",
-    isDisabled = false,
+    radioSize,
     baseStyles,
     disabledStyles,
     selectedStyles,
+    isDisabled = false,
     ...nativeProps
   },
   ref
 ) => {
   const assignVariables = assignInlineVars(
     eliminateUndefinedKeys({
-      [radioThemeVars.radioStyleSize]: radioSizes[radioSize]
-        ? radioSizes[radioSize]
-        : undefined,
+      [radioThemeVars.radioStyleSize]: accessDefinedValues(
+        radioSize,
+        radioSizes
+      ),
       [radioThemeVars.baseStyles.backgroundColor]: baseStyles?.backgroundColor,
       [radioThemeVars.baseStyles.borderColor]: baseStyles?.borderColor,
       [radioThemeVars.selectedStyles.backgroundColor]:
@@ -51,8 +52,8 @@ const Radio: ForwardRefRenderFunction<HTMLInputElement, IRadioProps> = (
       style={{ ...assignVariables, ...(style || {}) }}
     >
       <input
+        {...nativeProps} //This should always be at the top
         ref={ref}
-        {...nativeProps}
         type="radio"
         value={value}
         name={name}
@@ -61,7 +62,7 @@ const Radio: ForwardRefRenderFunction<HTMLInputElement, IRadioProps> = (
       />
       <div
         aria-hidden="true"
-        className={`${radioCheckMarkClass}`}
+        className={radioCheckMarkClass}
         data-checked={checked ? "true" : "false"}
         data-disabled={isDisabled ? "true" : "false"}
       >
diff --git a/packages/lib/src/components/Radio/RadioGroup/RadioGroup.tsx b/packages/lib/src/components/Radio/RadioGroup/RadioGroup.tsx
index 3d24b5a..f4722ad 100644
--- a/packages/lib/src/components/Radio/RadioGroup/RadioGroup.tsx
+++ b/packages/lib/src/components/Radio/RadioGroup/RadioGroup.tsx
@@ -1,24 +1,19 @@
 import React, { ForwardRefRenderFunction } from "react";
-
 import { TRadioGroupProps } from "../radio.types";
 import { Flex } from "../../Flex";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { radioGroupChildClass, radioGroupSpacing } from "../radio.styles.css";
-import { eliminateUndefinedKeys } from "../../../utils/object-utils";
 
 const RadioGroup: ForwardRefRenderFunction<HTMLDivElement, TRadioGroupProps> = (
   {
     children,
     className,
     style,
-    orientation = "horizontal",
     spacing = "xs",
+    orientation = "horizontal",
     ...nativeProps
   },
   ref
 ) => {
-  const assignVariables = assignInlineVars(eliminateUndefinedKeys({}));
-
   return (
     <Flex
       flexDirection={orientation === "horizontal" ? "row" : "column"}
@@ -27,7 +22,7 @@ const RadioGroup: ForwardRefRenderFunction<HTMLDivElement, TRadioGroupProps> = (
       className={` ${orientation === "vertical" ? radioGroupChildClass : ""} ${
         className || ""
       }`}
-      style={{ ...assignVariables, ...(style || {}) }}
+      style={{ ...(style || {}) }}
       {...nativeProps}
     >
       {children}
diff --git a/packages/lib/src/components/Radio/radio.styles.css.ts b/packages/lib/src/components/Radio/radio.styles.css.ts
index 952108e..003df2d 100644
--- a/packages/lib/src/components/Radio/radio.styles.css.ts
+++ b/packages/lib/src/components/Radio/radio.styles.css.ts
@@ -23,6 +23,7 @@ export const radioSizes: Record<TRadioTheme[1]["radioStyleSize"], string> = {
   xl: "48px"
 };
 
+//Radio Default Values
 export const [radioThemeClass, radioThemeVars]: TRadioTheme = createTheme({
   radioStyleSize: radioSizes.xs,
   baseStyles: {
diff --git a/packages/lib/src/components/Radio/radio.types.ts b/packages/lib/src/components/Radio/radio.types.ts
index 38d9453..6cd6c35 100644
--- a/packages/lib/src/components/Radio/radio.types.ts
+++ b/packages/lib/src/components/Radio/radio.types.ts
@@ -21,10 +21,9 @@ export interface IRadioProps
     React.InputHTMLAttributes<HTMLInputElement>,
     HTMLInputElement
   > {
-  color?: string;
-  value: string;
-  name: string;
-  radioSize?: string;
+  value?: string;
+  name?: string;
+  radioSize?: Partial<TRadioTheme[1]["radioStyleSize"]>;
   isDisabled?: boolean;
   baseStyles?: Partial<TRadioTheme[1]["baseStyles"]>;
   disabledStyles?: Partial<TRadioTheme[1]["disabledStyles"]>;
diff --git a/packages/lib/src/utils/access-defined-values/access-defined-values.ts b/packages/lib/src/utils/access-defined-values/access-defined-values.ts
new file mode 100644
index 0000000..6edcc74
--- /dev/null
+++ b/packages/lib/src/utils/access-defined-values/access-defined-values.ts
@@ -0,0 +1,11 @@
+export const accessDefinedValues = (
+  value: string | undefined,
+  definitionObject: Record<string, string>
+) => {
+  const keys = Object.keys(definitionObject);
+  if (value && keys.includes(value)) {
+    return definitionObject[value];
+  } else {
+    return value;
+  }
+};
diff --git a/packages/lib/src/utils/index.ts b/packages/lib/src/utils/index.ts
new file mode 100644
index 0000000..0105f82
--- /dev/null
+++ b/packages/lib/src/utils/index.ts
@@ -0,0 +1,2 @@
+export * from "./access-defined-values/access-defined-values";
+export * from "./object-utils";

From c68bab10dc78a66e69715ab83b56b953357b9c5e Mon Sep 17 00:00:00 2001
From: Raalzz <rahulsawanth06@gmail.com>
Date: Thu, 2 Feb 2023 13:20:49 +0530
Subject: [PATCH 2/5] fix: git comments

---
 packages/lib/src/components/Radio/radio.styles.css.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/lib/src/components/Radio/radio.styles.css.ts b/packages/lib/src/components/Radio/radio.styles.css.ts
index 003df2d..952108e 100644
--- a/packages/lib/src/components/Radio/radio.styles.css.ts
+++ b/packages/lib/src/components/Radio/radio.styles.css.ts
@@ -23,7 +23,6 @@ export const radioSizes: Record<TRadioTheme[1]["radioStyleSize"], string> = {
   xl: "48px"
 };
 
-//Radio Default Values
 export const [radioThemeClass, radioThemeVars]: TRadioTheme = createTheme({
   radioStyleSize: radioSizes.xs,
   baseStyles: {

From 62264a9a0d23b612e6586b9d2f9bd13e4229797e Mon Sep 17 00:00:00 2001
From: Raalzz <rahulsawanth06@gmail.com>
Date: Fri, 3 Feb 2023 13:02:11 +0530
Subject: [PATCH 3/5] fix: stepper refactor, added examples in docs

---
 docs/docs/components/stepper.mdx              | 91 +++++++++++++++++--
 .../components/examples/StepperExample.tsx    | 30 ++++++
 packages/eslint-config/react.js               | 15 ++-
 .../lib/src/components/Divider/Divider.tsx    |  3 +-
 .../lib/src/components/Stepper/Stepper.tsx    |  4 +-
 .../Stepper/StepperStep/StepperStep.tsx       | 32 +++++--
 .../components/Stepper/stepper.styles.css.ts  |  9 +-
 .../src/components/Stepper/stepper.types.ts   |  4 +-
 8 files changed, 155 insertions(+), 33 deletions(-)
 create mode 100644 docs/src/components/examples/StepperExample.tsx

diff --git a/docs/docs/components/stepper.mdx b/docs/docs/components/stepper.mdx
index 267b6bc..8e451bc 100644
--- a/docs/docs/components/stepper.mdx
+++ b/docs/docs/components/stepper.mdx
@@ -6,10 +6,13 @@ Here's a quick start guide to get started with the Stepper component.
 
 ### Importing Component
 
-import { Stepper, StepperStep, Card } from "@hover-design/react";
+import { Stepper, StepperStep, Card, Flex } from "@hover-design/react";
+import { StepperExample } from "@site/src/components/examples/StepperExample";
 
 export const StepperContainer = ({ children }) => (
-  <Card variant="shadow">{children}</Card>
+  <Flex alignItems="center" justifyContent="center">
+    <Card variant="shadow">{children}</Card>
+  </Flex>
 );
 
 ```jsx
@@ -24,15 +27,26 @@ import { Stepper, StepperStep } from "@hover-design/react";
 import { Stepper, StepperStep } from "@hover-design/react";
 
 const Demo = () => {
-  const [active, setActive] = useState(1);
-  const nextStep = () =>
-    setActive((current) => (current < 3 ? current + 1 : current));
-  const prevStep = () =>
-    setActive((current) => (current > 0 ? current - 1 : current));
+  const [activeStep, setActiveStep] = useState(1);
 
   return (
     <div>
-      <Stepper onStepClick={setActive} activeStep={active}>
+      <Stepper onStepClick={setActiveStep} activeStep={activeStep}>
+        <StepperStep>
+          <label>Step 1</label>
+        </StepperStep>
+        <StepperStep>
+          <label>Step 2</label>
+        </StepperStep>
+        <StepperStep>
+          <label>Step 3</label>
+        </StepperStep>
+      </Stepper>
+      <Stepper
+        onStepClick={setActiveStep}
+        activeStep={activeStep}
+        labelOrientation="vertical"
+      >
         <StepperStep>
           <label>Step 1</label>
         </StepperStep>
@@ -48,6 +62,67 @@ const Demo = () => {
 };
 ```
 
+<Flex alignItems="center" justifyContent="space-around" >
+<StepperContainer>
+  <StepperExample />
+</StepperContainer>
+
+<StepperContainer>
+  <StepperExample StepperProps={{ labelOrientation: "vertical" }} />
+</StepperContainer>
+</Flex>
+
+##### Stepper with orientation
+
+```jsx
+<div>
+  <Stepper
+    onStepClick={setActiveStep}
+    activeStep={activeStep}
+    orientation="vertical"
+  >
+    <StepperStep>
+      <label>Step 1</label>
+    </StepperStep>
+    <StepperStep>
+      <label>Step 2</label>
+    </StepperStep>
+    <StepperStep>
+      <label>Step 3</label>
+    </StepperStep>
+  </Stepper>
+
+  <Stepper
+    onStepClick={setActiveStep}
+    activeStep={activeStep}
+    orientation="vertical"
+    labelOrientation="vertical"
+  >
+    <StepperStep>
+      <label>Step 1</label>
+    </StepperStep>
+    <StepperStep>
+      <label>Step 2</label>
+    </StepperStep>
+    <StepperStep>
+      <label>Step 3</label>
+    </StepperStep>
+  </Stepper>
+</div>
+```
+
+<Flex alignItems="center" justifyContent="space-around" >
+<StepperContainer>
+  <StepperExample StepperProps={{ orientation: "vertical" }} />
+</StepperContainer>
+
+<StepperContainer>
+  <StepperExample
+    StepperProps={{ orientation: "vertical", labelOrientation: "vertical" }}
+  />
+</StepperContainer>
+</Flex>
+
 ### Stepper Props Reference
 
 | Key              |              type               | Optional? |
diff --git a/docs/src/components/examples/StepperExample.tsx b/docs/src/components/examples/StepperExample.tsx
new file mode 100644
index 0000000..17c43e0
--- /dev/null
+++ b/docs/src/components/examples/StepperExample.tsx
@@ -0,0 +1,30 @@
+import {
+  IStepperProps,
+  IStepperStepProps,
+  Stepper,
+  StepperStep
+} from "@hover-design/react";
+
+import React, { useState } from "react";
+
+const StepperExample = ({
+  StepperProps,
+  StepperStepProps
+}: {
+  StepperProps?: Omit<IStepperProps, "ref">;
+  StepperStepProps?: Omit<IStepperStepProps, "ref">;
+}) => {
+  const [active, setActive] = useState(1);
+
+  return (
+    <div>
+      <Stepper activeStep={active} onStepClick={setActive} {...StepperProps}>
+        <StepperStep {...StepperStepProps}>Step 1</StepperStep>
+        <StepperStep {...StepperStepProps}>Step 2</StepperStep>
+        <StepperStep {...StepperStepProps}>Step 3</StepperStep>
+      </Stepper>
+    </div>
+  );
+};
+
+export { StepperExample };
diff --git a/packages/eslint-config/react.js b/packages/eslint-config/react.js
index 10189b2..80eac2f 100644
--- a/packages/eslint-config/react.js
+++ b/packages/eslint-config/react.js
@@ -5,26 +5,25 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 2020,
     sourceType: "module",
-    ecmaFeatures: { jsx: true },
+    ecmaFeatures: { jsx: true }
   },
   settings: {
     react: {
-      version: "detect",
-    },
+      version: "detect"
+    }
   },
   env: {
     browser: true,
     amd: true,
-    node: true,
+    node: true
   },
   extends: [
     "plugin:react/recommended",
     "plugin:jsx-a11y/recommended",
-    "./base",
+    "./base"
   ],
   rules: {
     "react/react-in-jsx-scope": OFF,
-    "jsx-a11y/accessible-emoji": ERROR,
-    "react/prop-types": OFF,
-  },
+    "react/prop-types": OFF
+  }
 };
diff --git a/packages/lib/src/components/Divider/Divider.tsx b/packages/lib/src/components/Divider/Divider.tsx
index f6d5669..bd12576 100644
--- a/packages/lib/src/components/Divider/Divider.tsx
+++ b/packages/lib/src/components/Divider/Divider.tsx
@@ -58,7 +58,8 @@ export const Divider = ({
           : dividerContainerVertical
       }`}
     >
-      <hr
+      <div
+        role="separator"
         className={`${dividerClass} ${className}`}
         style={dividerStyles}
         {...nativeProps}
diff --git a/packages/lib/src/components/Stepper/Stepper.tsx b/packages/lib/src/components/Stepper/Stepper.tsx
index e45a150..e4f8049 100644
--- a/packages/lib/src/components/Stepper/Stepper.tsx
+++ b/packages/lib/src/components/Stepper/Stepper.tsx
@@ -57,11 +57,11 @@ const StepperComponent: ForwardRefRenderFunction<
         dividerProps: item.props.dividerProps || dividerProps,
         className: item.props.className || className,
         style: item.props.style || style,
+        size: item.props.size || size,
         orientation,
         labelOrientation,
         onClick: () =>
-          allowClick && typeof onStepClick === "function" && onStepClick(index),
-        size
+          allowClick && typeof onStepClick === "function" && onStepClick(index)
       })
     );
     return acc;
diff --git a/packages/lib/src/components/Stepper/StepperStep/StepperStep.tsx b/packages/lib/src/components/Stepper/StepperStep/StepperStep.tsx
index f5ecc14..fa319bf 100644
--- a/packages/lib/src/components/Stepper/StepperStep/StepperStep.tsx
+++ b/packages/lib/src/components/Stepper/StepperStep/StepperStep.tsx
@@ -2,9 +2,12 @@ import { assignInlineVars } from "@vanilla-extract/dynamic";
 import React, { ForwardRefRenderFunction } from "react";
 import { Divider } from "../../Divider";
 import { Flex } from "../../Flex";
-import { eliminateUndefinedKeys } from "../../../utils/object-utils";
+import { eliminateUndefinedKeys, accessDefinedValues } from "../../../utils";
 import {
+  stepperBorderRadius,
+  StepperChildrenClass,
   StepperDividerWrapperClass,
+  stepperSizes,
   StepperStepIconClass,
   stepperThemeClass,
   stepperThemeVars
@@ -27,6 +30,7 @@ const StepperStepComponent: ForwardRefRenderFunction<
     completedStyles,
     progressStyles,
     dividerProps,
+    size,
     borderRadius,
     orientation,
     labelOrientation,
@@ -38,6 +42,14 @@ const StepperStepComponent: ForwardRefRenderFunction<
 ) => {
   const assignVariables = assignInlineVars(
     eliminateUndefinedKeys({
+      [stepperThemeVars.stepperStyleBorderRadius]: accessDefinedValues(
+        borderRadius,
+        stepperBorderRadius
+      ),
+      [stepperThemeVars.stepperStyleSize]: accessDefinedValues(
+        size,
+        stepperSizes
+      ),
       [stepperThemeVars.baseStyles.backgroundColor]:
         baseStyles?.backgroundColor,
       [stepperThemeVars.baseStyles.color]: baseStyles?.color,
@@ -69,7 +81,7 @@ const StepperStepComponent: ForwardRefRenderFunction<
     return icon;
   };
 
-  const renderIcon = () => {
+  const RenderIcon = () => {
     return (
       <Flex
         display="inline-flex"
@@ -83,8 +95,8 @@ const StepperStepComponent: ForwardRefRenderFunction<
     );
   };
 
-  const renderDivider = () => {
-    if (isLastChild) return null;
+  const RenderDivider = () => {
+    if (isLastChild) return <></>;
     return (
       <div className={StepperDividerWrapperStyle}>
         <Divider
@@ -113,15 +125,15 @@ const StepperStepComponent: ForwardRefRenderFunction<
     >
       {orientation === labelOrientation ? (
         <>
-          {renderIcon()}
+          <RenderIcon />
           <Flex
             display="flex"
             alignItems="center"
             alignSelf="stretch"
             flexDirection={labelOrientation === "vertical" ? "column" : "row"}
           >
-            <div>{children}</div>
-            {renderDivider()}
+            <div className={StepperChildrenClass}>{children}</div>
+            <RenderDivider />
           </Flex>
         </>
       ) : (
@@ -132,10 +144,10 @@ const StepperStepComponent: ForwardRefRenderFunction<
             alignSelf="stretch"
             flexDirection={labelOrientation === "vertical" ? "row" : "column"}
           >
-            {renderIcon()}
-            {renderDivider()}
+            <RenderIcon />
+            <RenderDivider />
           </Flex>
-          <div>{children}</div>
+          <div className={StepperChildrenClass}>{children}</div>
         </>
       )}
     </Flex>
diff --git a/packages/lib/src/components/Stepper/stepper.styles.css.ts b/packages/lib/src/components/Stepper/stepper.styles.css.ts
index 30864d7..0aff02a 100644
--- a/packages/lib/src/components/Stepper/stepper.styles.css.ts
+++ b/packages/lib/src/components/Stepper/stepper.styles.css.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "@vanilla-extract/css";
+import { createTheme, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { TStepperTheme } from "./stepper.types";
 
@@ -72,7 +72,8 @@ export const StepperStepIconClass = recipe({
     height: stepperThemeVars.stepperStyleSize,
     backgroundColor: stepperThemeVars.baseStyles.backgroundColor,
     color: stepperThemeVars.baseStyles.color,
-    borderRadius: stepperThemeVars.stepperStyleBorderRadius
+    borderRadius: stepperThemeVars.stepperStyleBorderRadius,
+    cursor: "pointer"
   },
   variants: {
     stepState: {
@@ -94,3 +95,7 @@ export const StepperStepIconClass = recipe({
     }
   }
 });
+
+export const StepperChildrenClass = style({
+  cursor: "pointer"
+});
diff --git a/packages/lib/src/components/Stepper/stepper.types.ts b/packages/lib/src/components/Stepper/stepper.types.ts
index fe81b07..24b1a26 100644
--- a/packages/lib/src/components/Stepper/stepper.types.ts
+++ b/packages/lib/src/components/Stepper/stepper.types.ts
@@ -15,8 +15,8 @@ export interface IStepperProps
   onStepClick?: (stepIndex: number) => void;
   orientation?: "horizontal" | "vertical";
   labelOrientation?: "horizontal" | "vertical";
-  size?: string;
-  borderRadius?: string;
+  size?: Partial<TStepperTheme[1]["stepperStyleSize"]>;
+  borderRadius?: Partial<TStepperTheme[1]["stepperStyleBorderRadius"]>;
   baseStyles?: Partial<TStepperTheme[1]["baseStyles"]>;
   completedStyles?: Partial<TStepperTheme[1]["completedStyles"]>;
   progressStyles?: Partial<TStepperTheme[1]["progressStyles"]>;

From 34026d79807f03fdb6dc5ad1cad80ef34dbf8d7d Mon Sep 17 00:00:00 2001
From: Raalzz <rahulsawanth06@gmail.com>
Date: Fri, 3 Feb 2023 18:32:50 +0530
Subject: [PATCH 4/5] fix: sonarcloud fix

---
 .../Stepper/StepperStep/StepperStep.tsx       | 115 ++++++++++++------
 .../src/components/Stepper/stepper.types.ts   |   1 -
 2 files changed, 78 insertions(+), 38 deletions(-)

diff --git a/packages/lib/src/components/Stepper/StepperStep/StepperStep.tsx b/packages/lib/src/components/Stepper/StepperStep/StepperStep.tsx
index fa319bf..4b38b8b 100644
--- a/packages/lib/src/components/Stepper/StepperStep/StepperStep.tsx
+++ b/packages/lib/src/components/Stepper/StepperStep/StepperStep.tsx
@@ -1,5 +1,9 @@
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import React, { ForwardRefRenderFunction } from "react";
+import React, {
+  ForwardedRef,
+  ForwardRefRenderFunction,
+  ReactNode
+} from "react";
 import { Divider } from "../../Divider";
 import { Flex } from "../../Flex";
 import { eliminateUndefinedKeys, accessDefinedValues } from "../../../utils";
@@ -15,6 +19,55 @@ import {
 import { IStepperStepProps } from "../stepper.types";
 import { CheckIcon } from "../../_internal/Icons";
 
+const RenderDivider = ({
+  isLastChild,
+  StepperDividerWrapperStyle,
+  stepState,
+  dividerProps,
+  orientation
+}: Pick<
+  IStepperStepProps,
+  "isLastChild" | "stepState" | "dividerProps" | "orientation"
+> & { StepperDividerWrapperStyle: string }) => {
+  if (isLastChild) return <></>;
+  return (
+    <div className={StepperDividerWrapperStyle}>
+      <Divider
+        size="2px"
+        color={
+          stepState === "stepCompleted"
+            ? stepperThemeVars.completedStyles.backgroundColor
+            : stepperThemeVars.baseStyles.backgroundColor
+        }
+        {...dividerProps}
+        orientation={orientation}
+      />
+    </div>
+  );
+};
+
+const RenderIcon = ({
+  StepperStepIconStyle,
+  _Icon,
+  ref
+}: {
+  StepperStepIconStyle: string;
+  _Icon: () => ReactNode;
+  ref: ForwardedRef<HTMLDivElement>;
+}) => {
+  return (
+    <Flex
+      display="inline-flex"
+      alignItems="center"
+      justifyContent="center"
+      className={StepperStepIconStyle}
+      ref={ref}
+    >
+      {_Icon()}
+    </Flex>
+  );
+};
+
 const StepperStepComponent: ForwardRefRenderFunction<
   HTMLDivElement,
   IStepperStepProps
@@ -81,38 +134,6 @@ const StepperStepComponent: ForwardRefRenderFunction<
     return icon;
   };
 
-  const RenderIcon = () => {
-    return (
-      <Flex
-        display="inline-flex"
-        alignItems="center"
-        justifyContent="center"
-        className={StepperStepIconStyle}
-        ref={ref}
-      >
-        {_Icon()}
-      </Flex>
-    );
-  };
-
-  const RenderDivider = () => {
-    if (isLastChild) return <></>;
-    return (
-      <div className={StepperDividerWrapperStyle}>
-        <Divider
-          size="2px"
-          color={
-            stepState === "stepCompleted"
-              ? stepperThemeVars.completedStyles.backgroundColor
-              : stepperThemeVars.baseStyles.backgroundColor
-          }
-          {...dividerProps}
-          orientation={orientation}
-        />
-      </div>
-    );
-  };
-
   return (
     <Flex
       display="inline-flex"
@@ -125,7 +146,11 @@ const StepperStepComponent: ForwardRefRenderFunction<
     >
       {orientation === labelOrientation ? (
         <>
-          <RenderIcon />
+          <RenderIcon
+            StepperStepIconStyle={StepperStepIconStyle}
+            _Icon={_Icon}
+            ref={ref}
+          />
           <Flex
             display="flex"
             alignItems="center"
@@ -133,7 +158,13 @@ const StepperStepComponent: ForwardRefRenderFunction<
             flexDirection={labelOrientation === "vertical" ? "column" : "row"}
           >
             <div className={StepperChildrenClass}>{children}</div>
-            <RenderDivider />
+            <RenderDivider
+              isLastChild={isLastChild}
+              StepperDividerWrapperStyle={StepperDividerWrapperStyle}
+              stepState={stepState}
+              dividerProps={dividerProps}
+              orientation={orientation}
+            />
           </Flex>
         </>
       ) : (
@@ -144,8 +175,18 @@ const StepperStepComponent: ForwardRefRenderFunction<
             alignSelf="stretch"
             flexDirection={labelOrientation === "vertical" ? "row" : "column"}
           >
-            <RenderIcon />
-            <RenderDivider />
+            <RenderIcon
+              StepperStepIconStyle={StepperStepIconStyle}
+              _Icon={_Icon}
+              ref={ref}
+            />
+            <RenderDivider
+              isLastChild={isLastChild}
+              StepperDividerWrapperStyle={StepperDividerWrapperStyle}
+              stepState={stepState}
+              dividerProps={dividerProps}
+              orientation={orientation}
+            />
           </Flex>
           <div className={StepperChildrenClass}>{children}</div>
         </>
diff --git a/packages/lib/src/components/Stepper/stepper.types.ts b/packages/lib/src/components/Stepper/stepper.types.ts
index 24b1a26..c1103bfc 100644
--- a/packages/lib/src/components/Stepper/stepper.types.ts
+++ b/packages/lib/src/components/Stepper/stepper.types.ts
@@ -37,7 +37,6 @@ export interface IStepperStepProps
     Omit<IStepperProps, "activeStep" | "children" | "onStepClick"> {
   children?: ReactNode;
   ref?: MutableRefObject<HTMLDivElement | null>;
-  dividerProps?: DividerProps;
 }
 
 export type TStepperTheme = [

From 20650c773611f6be44f3de15502d3ac70fad1e41 Mon Sep 17 00:00:00 2001
From: Raalzz <rahulsawanth06@gmail.com>
Date: Mon, 20 Feb 2023 14:43:29 +0530
Subject: [PATCH 5/5] fix: git comments

---
 .../src/components/Stepper/StepperStep/StepperStep.tsx    | 8 ++++----
 packages/lib/src/components/Stepper/stepper.styles.css.ts | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/lib/src/components/Stepper/StepperStep/StepperStep.tsx b/packages/lib/src/components/Stepper/StepperStep/StepperStep.tsx
index 4b38b8b..c85be61 100644
--- a/packages/lib/src/components/Stepper/StepperStep/StepperStep.tsx
+++ b/packages/lib/src/components/Stepper/StepperStep/StepperStep.tsx
@@ -8,10 +8,10 @@ import { Divider } from "../../Divider";
 import { Flex } from "../../Flex";
 import { eliminateUndefinedKeys, accessDefinedValues } from "../../../utils";
 import {
-  stepperBorderRadius,
+  StepperBorderRadius,
   StepperChildrenClass,
   StepperDividerWrapperClass,
-  stepperSizes,
+  StepperSizes,
   StepperStepIconClass,
   stepperThemeClass,
   stepperThemeVars
@@ -97,11 +97,11 @@ const StepperStepComponent: ForwardRefRenderFunction<
     eliminateUndefinedKeys({
       [stepperThemeVars.stepperStyleBorderRadius]: accessDefinedValues(
         borderRadius,
-        stepperBorderRadius
+        StepperBorderRadius
       ),
       [stepperThemeVars.stepperStyleSize]: accessDefinedValues(
         size,
-        stepperSizes
+        StepperSizes
       ),
       [stepperThemeVars.baseStyles.backgroundColor]:
         baseStyles?.backgroundColor,
diff --git a/packages/lib/src/components/Stepper/stepper.styles.css.ts b/packages/lib/src/components/Stepper/stepper.styles.css.ts
index 0aff02a..362a686 100644
--- a/packages/lib/src/components/Stepper/stepper.styles.css.ts
+++ b/packages/lib/src/components/Stepper/stepper.styles.css.ts
@@ -2,7 +2,7 @@ import { createTheme, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { TStepperTheme } from "./stepper.types";
 
-export const stepperSizes: Record<
+export const StepperSizes: Record<
   TStepperTheme[1]["stepperStyleSize"],
   string
 > = {
@@ -13,7 +13,7 @@ export const stepperSizes: Record<
   xl: "48px"
 };
 
-export const stepperBorderRadius: Record<
+export const StepperBorderRadius: Record<
   TStepperTheme[1]["stepperStyleBorderRadius"],
   string
 > = {
@@ -26,8 +26,8 @@ export const stepperBorderRadius: Record<
 
 export const [stepperThemeClass, stepperThemeVars]: TStepperTheme = createTheme(
   {
-    stepperStyleSize: stepperSizes.md,
-    stepperStyleBorderRadius: stepperBorderRadius.xl,
+    stepperStyleSize: StepperSizes.md,
+    stepperStyleBorderRadius: StepperBorderRadius.xl,
     baseStyles: {
       color: "#495057",
       backgroundColor: "#ebf0f5",