dhre-component-lib 0.3.4 → 0.3.5

package/dist/components/OtpInput/OtpInput.d.ts

@@ -7,8 +7,8 @@ interface OTPInputProps {
     onResend: () => void;
     resendDelay?: number;
     error?: boolean;
-    errorText?: string;
-    resendText: string;
+    errorText?: React.ReactNode;
+    resendText: React.ReactNode;
     showResendButton?: boolean;
     className?: string;
     inputClassName?: string;

package/dist/components/Stepper/Stepper.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import './Stepper.module.scss';
-interface stepperData {
+interface StepperData {
     name: string;
     id: number;
     component?: React.ReactNode;
     status?: string;
 }
-interface stepperInterface {
-    stepperData: stepperData[];
+interface StepperInterface {
+    stepperData: StepperData[];
     type: string;
     showLabelIndex: boolean;
     currentStep?: number;
@@ -17,6 +17,8 @@ interface stepperInterface {
     statusIcon?: React.ReactNode;
     component?: React.ReactNode;
     submittedDate?: React.ReactNode;
+    dividerWidth?: string;
+    variant?: any;
 }
-declare const Stepper: React.FC<stepperInterface>;
+declare const Stepper: React.FC<StepperInterface>;
 export default Stepper;

package/dist/index.d.ts

@@ -199,8 +199,8 @@ interface OTPInputProps {
     onResend: () => void;
     resendDelay?: number;
     error?: boolean;
-    errorText?: string;
-    resendText: string;
+    errorText?: React.ReactNode;
+    resendText: React.ReactNode;
     showResendButton?: boolean;
     className?: string;
     inputClassName?: string;
@@ -372,14 +372,14 @@ interface CarouselItems {
 }
 declare const Carousel: React.FC<CarouselProps>;
 
-interface stepperData {
+interface StepperData {
     name: string;
     id: number;
     component?: React.ReactNode;
     status?: string;
 }
-interface stepperInterface {
-    stepperData: stepperData[];
+interface StepperInterface {
+    stepperData: StepperData[];
     type: string;
     showLabelIndex: boolean;
     currentStep?: number;
@@ -389,7 +389,9 @@ interface stepperInterface {
     statusIcon?: React.ReactNode;
     component?: React.ReactNode;
     submittedDate?: React.ReactNode;
+    dividerWidth?: string;
+    variant?: any;
 }
-declare const Stepper: React.FC<stepperInterface>;
+declare const Stepper: React.FC<StepperInterface>;
 
 export { Accordion as Accordian, Avatar, Badge, Breadcrumb as BreadCrumb, Button, ButtonCategory, Carousel, Checkbox, CircularProgress, GetDirectionAction as Directions, CustomDivider as Divider, Drawer, Dropdown, MapComponent as GoogleMap, HoverOptionsWrapper, CustomInputField as InputTextField, Link, MediaType, Menu, Modal, OTPInput as OtpInput, Progress, CustomRadioButton as RadioButton, RangeSlider, Search, Stepper, Tabs, TextArea, Toast, ToastStatus, ToggleSwitch, Typography, PdfView as default };

package/dist/index.esm.js

@@ -9835,29 +9835,27 @@ const Carousel = ({ items }) => {
         React.createElement("div", { className: "carousel-dots" }, items.map((_, index) => (React.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  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}";
+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(css,{});
 
-const Stepper = ({ submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex }) => {
+const Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex }) => {
     return (React.createElement(React.Fragment, null,
         alignment !== "vertical" && React.createElement(React.Fragment, null,
             type === "static" &&
-                React.createElement("div", { className: 'stepperAlignment' }, stepperData?.map((val) => (React.createElement(React.Fragment, null,
-                    React.createElement("div", { style: { width: val.id < stepperData.length ? 100 / (stepperData.length - 1) + '%' : '' } },
-                        React.createElement("div", { className: 'stepperItem' },
-                            React.createElement("div", { className: 'stepperCircle' }, showLabelIndex ? val.id : ''),
-                            val.id < stepperData.length && React.createElement("div", { className: 'stepperDivider' }, "  ")),
-                        React.createElement(Typography, { variant: 'B2', weight: 'SEMI_BOLD' }, val?.name)))))),
+                React.createElement("div", { className: 'stepperAlignment' }, stepperData?.map((val) => (React.createElement("div", { key: val.id, style: { width: val.id < stepperData.length ? 100 / (stepperData.length - 1) + '%' : '' } },
+                    React.createElement("div", { className: 'stepperItem' },
+                        React.createElement("div", { className: 'stepperCircle' }, showLabelIndex ? val.id : ''),
+                        val.id < stepperData.length && React.createElement("div", { className: 'stepperDivider' }, "   ")),
+                    React.createElement(Typography, { variant: variant, weight: 'SEMI_BOLD' }, val?.name))))),
             type === "dynamic" &&
-                React.createElement("div", { className: 'stepperAlignment' }, stepperData?.map((val) => (React.createElement(React.Fragment, null,
-                    React.createElement("div", { style: { width: val.id < stepperData.length ? 100 / (stepperData.length - 1) + '%' : '' } },
-                        React.createElement("div", { className: 'stepperItem' },
-                            (currentStep && (currentStep === val.id || currentStep < val.id)) && React.createElement("div", { className: `${'stepperCircle'} ${currentStep < val.id ? 'stepperNotReachedBorder' : ""}` }, showLabelIndex ? val.id : ''),
-                            (currentStep && currentStep > val.id) && React.createElement("div", { className: `${'stepperCircle'} ${'stepperSuccessBorder'}` }, successIcon),
-                            val.id < stepperData.length && React.createElement("div", { className: (currentStep && currentStep > val.id) ? 'stepperPlainDivider' : 'stepperDisabledDivider' }, "  ")),
-                        React.createElement(Typography, { className: (currentStep && (currentStep < val.id)) ? 'contentSecondary' : '', variant: 'B2', weight: 'SEMI_BOLD' }, val?.name))))))),
+                React.createElement("div", { className: 'stepperAlignment' }, stepperData?.map((val) => (React.createElement("div", { key: val.id, style: { width: val.id < stepperData.length ? 100 / (stepperData.length - 1) + '%' : '' } },
+                    React.createElement("div", { className: 'stepperItem' },
+                        (currentStep && (currentStep === val.id || currentStep < val.id)) && React.createElement("div", { className: `${'stepperCircle'} ${currentStep < val.id ? 'stepperNotReachedBorder' : ""}` }, showLabelIndex ? val.id : ''),
+                        (currentStep && currentStep > val.id) && React.createElement("div", { className: `${'stepperCircle'} ${'stepperSuccessBorder'}` }, successIcon),
+                        val.id < stepperData.length && React.createElement("div", { className: (currentStep && currentStep > val.id) ? 'stepperPlainDivider' : 'stepperDisabledDivider', style: { width: dividerWidth ?? '' } }, "  ")),
+                    React.createElement(Typography, { className: (currentStep && (currentStep < val.id)) ? 'contentSecondary' : '', variant: variant, weight: 'SEMI_BOLD' }, val?.name)))))),
         alignment === "vertical" && React.createElement(React.Fragment, null,
-            type === "dynamic" && React.createElement(React.Fragment, null,
+            type === "dynamic" &&
                 React.createElement("div", { className: 'stepperVerticalAlignment' }, stepperData?.map((val) => (React.createElement(React.Fragment, null,
                     React.createElement("div", { className: 'stepperVerticalItem' },
                         React.createElement("div", { className: 'flex' },
@@ -9873,14 +9871,14 @@ const Stepper = ({ submittedDate, component, status, statusIcon, successIcon, cu
                             ((currentStep && (val.id < currentStep)) || ((currentStep === val.id) && status !== "Pending")) && React.createElement("div", null, submittedDate),
                             "  ",
                             React.createElement("div", null, val.component),
-                            "  "))))))),
-            type === "static" && React.createElement(React.Fragment, null,
+                            "  ")))))),
+            type === "static" &&
                 React.createElement("div", { className: 'stepperVerticalAlignment' }, stepperData?.map((val) => (React.createElement(React.Fragment, null,
                     React.createElement("div", { className: 'stepperVerticalItem' },
                         React.createElement("div", { className: 'flexCenter' },
                             React.createElement("div", { className: 'stepperVerticalCircle' }, showLabelIndex ? val.id : ''),
                             React.createElement(Typography, { variant: 'B2', weight: 'SEMI_BOLD' }, val?.name))),
-                    React.createElement("div", null, val.id < stepperData.length && React.createElement("div", { className: 'stepperVerticalDivider' }, "  "))))))))));
+                    React.createElement("div", null, val.id < stepperData.length && React.createElement("div", { className: 'stepperVerticalDivider' }, "  ")))))))));
 };
 
 export { Accordion as Accordian, Avatar, Badge, Breadcrumb as BreadCrumb, Button, ButtonCategory, Carousel, Checkbox, CircularProgress, GetDirectionAction as Directions, CustomDivider as Divider, Drawer, Dropdown, MapComponent as GoogleMap, HoverOptionsWrapper, CustomInputField as InputTextField, Link, MediaType, Menu, Modal, OTPInput as OtpInput, Progress, CustomRadioButton as RadioButton, RangeSlider, Search, Stepper, Tabs, TextArea, Toast, ToastStatus, ToggleSwitch, Typography, PdfView as default };