dhre-component-lib 0.4.2 → 0.4.4

package/dist/components/InputTextField/InputTextField.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import "./InputTextField.module.scss";
 export interface CustomInputFieldProps {
     label?: string;

package/dist/components/RangeSlider/RangeSlider.d.ts

@@ -6,9 +6,10 @@ interface rangeSlider {
     maxRange: number;
     text1: string;
     text2: string;
-    getSliderValue?: React.ChangeEventHandler<HTMLInputElement>;
+    getSliderValue?: (event: any, property?: any) => void;
     value?: string;
     rangeMultiples?: number;
+    property?: any;
 }
 declare const RangeSlider: (props: rangeSlider) => React.JSX.Element;
 export default RangeSlider;

package/dist/components/TextArea/TextArea.d.ts

@@ -6,9 +6,10 @@ declare function TextArea(props: {
         target: {
             value: string;
         };
-    }) => void;
+    }, property?: any) => void;
     requiredLimit: string;
     placeholder: string;
     charText: string;
+    property?: any;
 }): React.JSX.Element;
 export default TextArea;

package/dist/index.d.ts

@@ -297,10 +297,11 @@ declare function TextArea(props: {
         target: {
             value: string;
         };
-    }) => void;
+    }, property?: any) => void;
     requiredLimit: string;
     placeholder: string;
     charText: string;
+    property?: any;
 }): React.JSX.Element;
 
 interface DrawerProps {
@@ -359,9 +360,10 @@ interface rangeSlider {
     maxRange: number;
     text1: string;
     text2: string;
-    getSliderValue?: React.ChangeEventHandler<HTMLInputElement>;
+    getSliderValue?: (event: any, property?: any) => void;
     value?: string;
     rangeMultiples?: number;
+    property?: any;
 }
 declare const RangeSlider: (props: rangeSlider) => React.JSX.Element;
 

package/dist/index.esm.js

@@ -156,10 +156,10 @@ const Typography = ({ variant = 'B1', weight = 'MEDIUM', children, className, ..
     return React__default.createElement("div", { className: classNames, ...props }, children);
 };
 
-var css$h = ".label {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  left: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.inputContainer {\n  position: relative;\n}\n\n.inputError:focus-visible {\n  outline: 1px solid #eb0542 !important;\n}\n\n.inputContainer::placeholder {\n  color: #686868;\n  font-size: 16px;\n  font-family: \"Meraas Aktiv\", sans-serif;\n  font-weight: 400;\n  line-height: 22.4px;\n}";
+var css$h = ".label {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  left: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.inputContainer {\n  position: relative;\n}\n\n.inputError:focus-visible {\n  outline: 1px solid #eb0542 !important;\n}\n\n.inputContainer::placeholder {\n  color: #686868;\n  font-size: 16px;\n  font-family: \"Meraas Aktiv\", sans-serif;\n  font-weight: 400;\n  line-height: 22.4px;\n}\n\n.astreik {\n  color: #eb0542;\n}";
 n(css$h,{});
 
-const CustomInputField = ({ label, value = '', type = INPUT_TYPES.TEXT, placeholder = '', onChange, className = '', inputClassName = '', labelClassName = '', error, errorClassName = '', maxLength = 0, minLength = 0, checkValidation, name, min, ...rest }) => {
+const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placeholder = "", onChange, className = "", inputClassName = "", labelClassName = "", error, errorClassName = "", maxLength = 0, minLength = 0, checkValidation, name, min, ...rest }) => {
     const [showLabelOnBorder, setShowLabelOnBorder] = useState(false);
     const handleInputValues = (e) => {
         onChange?.(e);
@@ -175,12 +175,17 @@ const CustomInputField = ({ label, value = '', type = INPUT_TYPES.TEXT, placehol
             setShowLabelOnBorder(true);
         }
     }, []);
+    useEffect(() => {
+        setShowLabelOnBorder(!!value);
+    }, [value]);
     return (React__default.createElement("div", { className: `${className} ${'inputContainer'}` },
-        (placeholder && showLabelOnBorder) && React__default.createElement("label", { className: 'label' }, placeholder),
+        ((placeholder && showLabelOnBorder) || (placeholder && value)) && React__default.createElement("label", { className: 'label' },
+            placeholder.replace("*", ""),
+            placeholder.includes("*") && React__default.createElement("label", { className: 'astreik' }, "*")),
         React__default.createElement("input", { type: type, value: value, name: name, placeholder: showLabelOnBorder ? "" : placeholder, onChange: handleInputValues, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue, 
             // className={inputClassName}
             className: `${inputClassName} ${error ? "inputError" : ''}`, maxLength: maxLength, minLength: minLength, min: min, ...rest }),
-        error && React__default.createElement(Typography, { variant: 'L1', weight: 'SEMI_BOLD', className: errorClassName }, error)));
+        error && (React__default.createElement(Typography, { variant: "L1", weight: "SEMI_BOLD", className: errorClassName }, error))));
 };
 
 var css$g = ".container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.spinner {\n  border: 2px solid transparent;\n  border-radius: 50%;\n  border-top: 2px solid currentColor;\n  animation: spin 1s linear infinite;\n}\n\n.spinnerInner {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n}\n\n.errorText {\n  color: red;\n}\n\n.button {\n  padding: 8px 16px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 16px;\n}\n.button-text {\n  background: none;\n}\n.button-outlined {\n  border: 1px solid currentColor;\n}\n.button-contained {\n  background-color: currentColor;\n  color: white;\n}\n.button-primary {\n  color: blue;\n}\n.button-secondary {\n  color: gray;\n}\n.button-small {\n  font-size: 12px;\n}\n.button-medium {\n  font-size: 16px;\n}\n.button-large {\n  font-size: 20px;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}";
@@ -9581,7 +9586,7 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, }) => {
                 dot && haveDots.includes(tab.value.toLowerCase()) && (React__default.createElement("span", { className: "dot" })))))))));
 };
 
-var css$9 = ".dropdown {\n  width: 100%;\n  border: 0.0625rem solid #686868;\n  height: 3.5rem;\n  border-radius: 0.5rem;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem;\n  position: relative;\n  cursor: pointer;\n}\n\n.label {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  left: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.placeholder {\n  color: #686868;\n}\n\n.dropPosition {\n  position: relative;\n}\n\n.dropdownValues {\n  border: 0.0625rem solid #e1e1e1;\n  box-shadow: 0px 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.2509803922);\n  border-radius: 0.5rem;\n  margin-top: 0.3125rem;\n  position: absolute;\n  width: 100%;\n  z-index: 9;\n}\n\n.unselectedText {\n  background: #ffffff;\n  height: 3.24rem;\n  padding: 1rem;\n  color: #686868;\n  cursor: pointer;\n}\n\n.value {\n  color: #000000;\n}\n\n.unselectedText:hover {\n  background: #e1e1e1;\n  color: #000000;\n  font-weight: 700 !important;\n}\n\n.backdropDropdown {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n\n.dropdown select {\n  background: transparent;\n  width: 10.625rem;\n  padding: 0.5rem;\n  border: 0;\n  border-radius: 0;\n  height: 2.1875rem;\n}";
+var css$9 = ".dropdown {\n  width: 100%;\n  border: 0.0625rem solid #686868;\n  height: 3.5rem;\n  border-radius: 0.5rem;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem;\n  position: relative;\n  cursor: pointer;\n}\n\n.astreik {\n  color: #eb0542;\n}\n\n.label {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  left: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.placeholder {\n  color: #686868;\n}\n\n.dropPosition {\n  position: relative;\n}\n\n.dropdownValues {\n  border: 0.0625rem solid #e1e1e1;\n  box-shadow: 0px 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.2509803922);\n  border-radius: 0.5rem;\n  margin-top: 0.3125rem;\n  position: absolute;\n  width: 100%;\n  z-index: 9;\n}\n\n.unselectedText {\n  background: #ffffff;\n  height: 3.24rem;\n  padding: 1rem;\n  color: #686868;\n  cursor: pointer;\n}\n\n.value {\n  color: #000000;\n}\n\n.unselectedText:hover {\n  background: #e1e1e1;\n  color: #000000;\n  font-weight: 700 !important;\n}\n\n.backdropDropdown {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n\n.dropdown select {\n  background: transparent;\n  width: 10.625rem;\n  padding: 0.5rem;\n  border: 0;\n  border-radius: 0;\n  height: 2.1875rem;\n}";
 n(css$9,{});
 
 function Dropdown(props) {
@@ -9596,24 +9601,32 @@ function Dropdown(props) {
     return (React__default.createElement(React__default.Fragment, null,
         openDropdown && (React__default.createElement("div", { onClick: () => setOpenDropdown(!openDropdown), className: "backdropDropdown" })),
         React__default.createElement("div", { className: "dropPosition" },
-            placeholder && selectedValue && (React__default.createElement("label", { className: "label" }, placeholder)),
+            placeholder && selectedValue && (React__default.createElement("label", { className: "label" },
+                placeholder.replace("*", ""),
+                placeholder.includes("*") && React__default.createElement("label", { className: 'astreik' }, "*"))),
             React__default.createElement("div", { onClick: () => setOpenDropdown(!openDropdown), className: `${"dropdown"} ${className}` },
                 !selectedValue && (React__default.createElement(Typography, { className: "placeholder", variant: "B3", weight: "SEMI_BOLD" }, placeholder)),
-                selectedValue && (React__default.createElement(Typography, { className: "value", variant: "B3", weight: "BOLD" }, selectedValue.name)),
+                selectedValue && (React__default.createElement(Typography, { className: "value", variant: "B3", weight: "MEDIUM" }, selectedValue.name)),
                 !openDropdown && React__default.createElement("div", null, arrowDown),
                 openDropdown && React__default.createElement("div", null, arrowUp)),
             openDropdown && (React__default.createElement("div", { className: "dropdownValues" }, dropdownList.map((val) => (React__default.createElement("div", { onClick: () => selectedDropdwonValue(val), className: "unselectedText" },
                 React__default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD" }, val.name)))))))));
 }
 
-var css$8 = ".textArea {\n  min-width: 70%;\n  width: 100%;\n  height: 8.875rem;\n  border-radius: 0.5rem;\n  padding: 1rem;\n  font-size: 1rem;\n  font-family: Meraas Aktiv;\n  font-weight: 400;\n  line-height: 1.4rem;\n  text-align: left;\n  outline: none;\n  resize: none;\n  overflow: auto;\n  max-width: 100%;\n  max-height: 100%;\n}\n.characters {\n  color: #686868;\n}\n\n.textArea100 {\n  height: 100%;\n  width: 100%;\n  position: relative;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n}\n\n.textArea::placeholder {\n  font-family: Meraas Aktiv, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 22.4px;\n  text-align: left;\n  color: #686868;\n}\n\n.maxLimit {\n  color: #eb0542 !important;\n}\n\n.maxLimitArea {\n  border: 1px solid #eb0542 !important;\n}";
+var css$8 = ".textArea {\n  min-width: 70%;\n  width: 100%;\n  height: 8.875rem;\n  border-radius: 0.5rem;\n  padding: 1rem;\n  font-size: 1rem;\n  font-family: Meraas Aktiv;\n  font-weight: 400;\n  line-height: 1.4rem;\n  text-align: left;\n  outline: none;\n  resize: none;\n  overflow: auto;\n  max-width: 100%;\n  max-height: 100%;\n}\n.characters {\n  color: #686868;\n}\n\n.textArea100 {\n  height: 100%;\n  width: 100%;\n  position: relative;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n}\n\n.label {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  left: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.astreik {\n  color: #eb0542;\n}\n\n.textArea::placeholder {\n  font-family: Meraas Aktiv, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 22.4px;\n  text-align: left;\n  color: #686868;\n}\n\n.maxLimit {\n  color: #eb0542 !important;\n}\n\n.maxLimitArea {\n  border: 1px solid #eb0542 !important;\n}";
 n(css$8,{});
 
 function TextArea(props) {
-    const { value, onChange, requiredLimit, placeholder, charText } = props;
+    const { value, onChange, requiredLimit, placeholder, charText, property } = props;
+    const [showLabelOnBorder, setShowLabelOnBorder] = React__default.useState(false);
+    const checkFieldValue = (e) => {
+        if (!e.target.value) {
+            setShowLabelOnBorder(false);
+        }
+    };
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { className: "textArea100" },
-            React__default.createElement("textarea", { value: value, onChange: onChange, maxLength: Number(requiredLimit), className: `textArea ${value?.length === Number(requiredLimit) ? "maxLimitArea" : ""}`, placeholder: placeholder })),
+            React__default.createElement("textarea", { value: value, onChange: (event) => onChange(event, property), maxLength: Number(requiredLimit), onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue, className: `textArea ${value?.length === Number(requiredLimit) ? "maxLimitArea" : ""}`, placeholder: placeholder })),
         React__default.createElement(Typography, { className: `characters ${value?.length === Number(requiredLimit) ? "maxLimit" : ""}`, variant: "L1", weight: "SEMI_BOLD" },
             value?.length ?? 0,
             "/",
@@ -9811,13 +9824,13 @@ var css$2 = ".range {\n  display: flex;\n  flex-direction: row;\n  justify-conte
 n(css$2,{});
 
 const RangeSlider = (props) => {
-    const { sliderLimit, minRange, maxRange, text1, text2, getSliderValue, value, rangeMultiples = 1 } = props;
+    const { sliderLimit, minRange, maxRange, text1, text2, getSliderValue, value, rangeMultiples = 1, property } = props;
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: "range" }, Array.from({ length: sliderLimit }).map((_, index) => (React__default.createElement("div", { className: "rangeLabels" },
+        React__default.createElement("div", { className: "range" }, Array.from({ length: sliderLimit }).map((_, index) => (React__default.createElement("div", { key: index, className: "rangeLabels" },
             React__default.createElement(Typography, { className: Number(value) === index ? "rangeLabelColor" : "", variant: "B3", weight: Number(value) === index ? "BOLD" : "SEMI_BOLD" }, index % rangeMultiples === 0 ? index : " "),
             React__default.createElement("div", { className: `${Number(value) === index ? "rangeSelectedBorder" : "rangeBorder"} ${index % rangeMultiples !== 0 ? "rangeMarginTop" : ""}` }))))),
         React__default.createElement("div", { className: "slidecontainer" },
-            React__default.createElement("input", { type: "range", min: minRange, max: maxRange, value: value, className: "slider", id: "myRange", onChange: getSliderValue })),
+            React__default.createElement("input", { type: "range", min: minRange, max: maxRange, value: value, className: "slider", id: "myRange", onChange: (event) => getSliderValue && getSliderValue(event, property) })),
         React__default.createElement("div", { className: "satisfiedText" },
             React__default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD" },
                 " ",
@@ -9860,7 +9873,7 @@ const Carousel = ({ items }) => {
         React__default.createElement("div", { className: "carousel-dots" }, items?.map((_, index) => (React__default.createElement("span", { key: index, "data-testid": `dot-${index}`, className: `dot ${index === currentIndex ? "active" : ""}`, onClick: () => handleDotClick(index) }))))));
 };
 
-var css = ".stepperCircle {\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: 50%;\n  border: 2px solid #000000;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n\n.contentSecondary {\n  color: #686868;\n}\n\n.stepperSuccessBorder {\n  border: none;\n}\n\n.stepperNotReachedBorder {\n  border: 2px solid #a7a7a7;\n}\n\n.stepperAlignment {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  align-items: baseline;\n  justify-content: space-between;\n}\n\n.stepperItem {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 1rem;\n}\n\n.marginRight1 {\n  margin-right: 1rem;\n}\n\n.stepperVerticalItem {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n}\n\n.stepperDivider {\n  width: 88%;\n  border: 2px dashed #898989;\n  height: 0.125rem;\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.stepperDisabledDivider {\n  width: 88%;\n  border: 2px dashed #898989;\n  height: 0.125rem;\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.stepperPlainDivider {\n  width: 88%;\n  border: 2px solid #000000;\n  height: 0.125rem;\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.stepperVerticalDivider {\n  border-left: 2px solid #000000;\n  min-height: 2rem;\n  max-height: 100%;\n  margin-left: 1rem;\n  padding-left: 2rem;\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.stepperVerticalCircle {\n  min-width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 50%;\n  border: 2px solid #000000;\n  color: #ffffff;\n  background: #000000;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  margin-right: 1rem;\n}\n\n.stepperVerticalDisabledDivider {\n  width: 50%;\n  border-left: 2px dashed #898989;\n  min-height: 1rem;\n  max-height: 100%;\n  margin-left: 0.7rem;\n  padding-left: 2rem;\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n.stepperVerticalPlainDivider {\n  width: 50%;\n  border-left: 2px solid #00b578;\n  min-height: 1rem;\n  max-height: 100%;\n  margin-left: 0.7rem;\n  padding-left: 2rem;\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n.paddingLeft2 {\n  padding-left: 2.7rem;\n}\n\n.stepperVerticalAlignment {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.flex {\n  display: flex;\n  flex-direction: row;\n}\n\n.warning {\n  color: #eb8425;\n}\n\n.error {\n  color: #eb0542;\n}\n\n.stepperWarningCircle {\n  border: 2px solid #eb8425;\n}\n\n.stepperErrorCircle {\n  border: 2px solid #eb0542;\n}\n\n.flexCenter {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.marginRight {\n  margin-right: 1rem;\n  margin-top: -0.3rem;\n}";
+var css = ".stepperCircle {\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: 50%;\n  border: 2px solid #000000;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n\n.contentSecondary {\n  color: #686868;\n}\n\n.stepperSuccessBorder {\n  border: none;\n}\n\n.stepperNotReachedBorder {\n  border: 2px solid #a7a7a7;\n}\n\n.stepperAlignment {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  align-items: baseline;\n  justify-content: space-between;\n}\n\n.stepperItem {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 1rem;\n}\n\n.marginRight1 {\n  margin-right: 1rem;\n}\n\n.stepperVerticalItem {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n}\n\n.stepperDivider {\n  width: 88%;\n  border: 2px dashed #898989;\n  height: 0.125rem;\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.stepperDisabledDivider {\n  width: 88%;\n  border: 2px dashed #898989;\n  height: 0.125rem;\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.stepperPlainDivider {\n  width: 88%;\n  border: 2px solid #000000;\n  height: 0.125rem;\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.stepperVerticalDivider {\n  border-left: 2px solid #000000;\n  min-height: 2rem;\n  max-height: 100%;\n  margin-left: 1rem;\n  padding-left: 2rem;\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.stepperVerticalCircle {\n  min-width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 50%;\n  border: 2px solid #000000;\n  color: #ffffff;\n  background: #000000;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  margin-right: 1rem;\n}\n\n.stepperVerticalDisabledDivider {\n  width: 50%;\n  border-left: 2px dashed #898989;\n  min-height: 1rem;\n  max-height: 100%;\n  margin-left: 0.7rem;\n  padding-left: 2rem;\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n.stepperVerticalPlainDivider {\n  width: 50%;\n  border-left: 2px solid #00b578;\n  min-height: 1rem;\n  max-height: 100%;\n  margin-left: 0.7rem;\n  padding-left: 2rem;\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n.paddingLeft2 {\n  padding-left: 2.7rem;\n}\n\n.stepperVerticalAlignment {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.flex {\n  display: flex;\n  flex-direction: row;\n}\n\n.warning {\n  color: #eb8425;\n}\n\n.error {\n  color: #eb0542;\n}\n\n.stepperWarningCircle {\n  border: 2px solid #eb8425;\n}\n\n.stepperErrorCircle {\n  border: 2px solid #eb0542;\n}\n\n.flexCenter {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.marginRight {\n  margin-right: 1rem;\n  margin-top: -0.3rem;\n}\n\n.column {\n  display: flex;\n  flex-direction: column;\n}\n\n.typoClass {\n  color: #686868;\n  margin-top: 4px;\n}";
 n(css,{});
 
 const common = {
@@ -15496,7 +15509,7 @@ process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 
-const Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex, displayRightContent, isPaymentPlanFlow }) => {
+const Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex, displayRightContent, isPaymentPlanFlow, }) => {
     return (React__default.createElement(React__default.Fragment, null,
         alignment !== "vertical" && (React__default.createElement(React__default.Fragment, null,
             type === "static" && (React__default.createElement("div", { className: "stepperAlignment" }, stepperData?.map((val) => (React__default.createElement("div", { key: val.id, style: {
@@ -15505,8 +15518,7 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
                         : "",
                 } },
                 React__default.createElement("div", { className: "stepperItem" },
-                    React__default.createElement("div", { className: "stepperCircle" }, showLabelIndex ? val.id : ""),
-                    val.id < stepperData.length && (React__default.createElement("div", { className: "stepperDivider" }, " "))),
+                    React__default.createElement("div", { className: "stepperCircle" }, showLabelIndex ? val.id : "")),
                 React__default.createElement(Typography, { variant: variant, weight: "SEMI_BOLD" }, val?.name)))))),
             type === "dynamic" && (React__default.createElement("div", { className: "stepperAlignment" }, stepperData?.map((val) => (React__default.createElement("div", { key: val.id, style: {
                     width: val.id < stepperData.length
@@ -15529,8 +15541,9 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
             type === "dynamic" && (React__default.createElement("div", { className: "stepperVerticalAlignment" }, stepperData?.map((val) => (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement("div", { className: "stepperVerticalItem" },
                     React__default.createElement("div", { className: "flex" },
-                        isPaymentPlanFlow && React__default.createElement(Box, { className: "marginRight" }, val?.img),
-                        !isPaymentPlanFlow && currentStep &&
+                        isPaymentPlanFlow && (React__default.createElement(Box, { className: "marginRight" }, val?.img)),
+                        !isPaymentPlanFlow &&
+                            currentStep &&
                             (currentStep === val.id || currentStep < val.id) && (React__default.createElement("div", { className: `${"stepperCircle"} ${"marginRight1"} ${currentStep === val.id && status === "Rejected"
                                 ? "stepperErrorCircle"
                                 : currentStep === val.id &&
@@ -15539,7 +15552,9 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
                                     : ""} ${currentStep < val.id
                                 ? "stepperNotReachedBorder"
                                 : ""}` }, showLabelIndex ? val.id : "")),
-                        !isPaymentPlanFlow && currentStep && currentStep > val.id && (React__default.createElement("div", { className: `${"stepperCircle"} ${"marginRight1"} ${"stepperSuccessBorder"}` }, successIcon)),
+                        !isPaymentPlanFlow &&
+                            currentStep &&
+                            currentStep > val.id && (React__default.createElement("div", { className: `${"stepperCircle"} ${"marginRight1"} ${"stepperSuccessBorder"}` }, successIcon)),
                         React__default.createElement(Typography, { className: currentStep &&
                                 (currentStep === val.id || currentStep < val.id)
                                 ? "contentSecondary"
@@ -15547,7 +15562,7 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
                     currentStep === val.id && (React__default.createElement("div", { className: `${"flex"} ${status === "Rejected" ? "error" : "warning"}` },
                         statusIcon,
                         status)),
-                    displayRightContent && React__default.createElement(Typography, { variant: "B2", weight: "SEMI_BOLD" }, val?.value)),
+                    displayRightContent && (React__default.createElement(Typography, { variant: "B2", weight: "SEMI_BOLD" }, val?.value))),
                 React__default.createElement("div", null,
                     React__default.createElement("div", { className: val.id < stepperData.length
                             ? currentStep && currentStep > val.id
@@ -15564,7 +15579,9 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
                 React__default.createElement("div", { className: "stepperVerticalItem" },
                     React__default.createElement("div", { className: "flexCenter" },
                         React__default.createElement("div", { className: "stepperVerticalCircle" }, showLabelIndex ? val.id : ""),
-                        React__default.createElement(Typography, { variant: "B2", weight: "SEMI_BOLD" }, val?.name))),
+                        React__default.createElement("div", { className: "column" },
+                            React__default.createElement(Typography, { variant: "B2", weight: "SEMI_BOLD" }, val?.name),
+                            React__default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD", className: "typoClass" }, val?.value)))),
                 React__default.createElement("div", null, val.id < stepperData.length && (React__default.createElement("div", { className: "stepperVerticalDivider" }, " "))))))))))));
 };