dhre-component-lib 0.12.0 → 0.13.0

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

@@ -27,6 +27,7 @@ interface StepperInterface {
     isPaymentPlanFlow?: boolean;
     weight?: StepperWeight;
     verticalTypographyVariant?: TypographyVariant;
+    spacedDashedDivider?: boolean;
 }
 declare const Stepper: React.FC<StepperInterface>;
 export default Stepper;

package/dist/index.d.ts

@@ -576,6 +576,7 @@ interface StepperInterface {
     isPaymentPlanFlow?: boolean;
     weight?: StepperWeight;
     verticalTypographyVariant?: TypographyVariant;
+    spacedDashedDivider?: boolean;
 }
 declare const Stepper: React.FC<StepperInterface>;
 

package/dist/index.esm.js

@@ -22641,10 +22641,10 @@ 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: 1px solid #000000;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0 !important;\n}\n\n.contentSecondary {\n  color: var(--vertical-stepper-text, #686868);\n}\n\n.stepperSuccessBorder {\n  border: none;\n}\n\n.stepperNotReachedBorder {\n  border: 1px 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-inline-end: 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: 1px dashed #898989;\n  height: 0.125rem;\n  margin: 0 1rem;\n}\n\n.stepperDisabledDivider {\n  width: 88%;\n  border: 1px dashed #898989;\n  height: 0.125rem;\n  margin: 0 1rem;\n}\n\n.stepperPlainDivider {\n  width: 88%;\n  border: 1px solid var(--content-primary);\n  height: 0.125rem;\n  margin: 0 1rem;\n}\n\n.stepperVerticalDivider {\n  border-inline-start: 2px solid var(--content-primary);\n  min-height: 2rem;\n  max-height: 100%;\n  margin-inline-start: 1.25rem;\n  padding-inline-start: 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 var(--content-primary);\n  color: #ffffff;\n  background: var(--surface-inverted);\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  margin-inline-end: 1rem;\n}\n\n.stepperVerticalDisabledDivider {\n  width: 1.75rem;\n  min-height: 2rem;\n  max-height: 100%;\n  margin: 0.75rem 0;\n  background-image: linear-gradient(#686868 50%, rgba(255, 255, 255, 0) 0%);\n  background-position: center;\n  background-size: 0.5px 10px;\n  background-repeat: repeat-y;\n}\n\n.stepperVerticalPlainDivider {\n  width: var(--stepper-vertical-width-plain-divider, 2px);\n  border-inline-start: 1px solid var(--stepper-vertical-success-divider-color, #008256);\n  min-height: 2rem;\n  max-height: 100%;\n  margin: 0.75rem 0;\n  margin-inline-start: 0.875rem;\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: var(--warning-color, --semantic-warning2);\n  gap: var(--gap-spacing, unset);\n}\n\n.error {\n  color: var(--error-color, --semantic-error);\n  gap: var(--gap-spacing, unset);\n}\n\n.stepperWarningCircle {\n  border: 2px solid var(--stepper-vertical-warning-circle, --semantic-warning2);\n}\n\n.stepperErrorCircle {\n  border: 2px solid var(--error-color, --semantic-error);\n}\n\n.flexCenter {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.marginRight {\n  margin-inline-end: 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\n.contentPrimary {\n  color: var(--content-primary);\n}";
+var css = ".stepperCircle {\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: 50%;\n  border: 1px solid #000000;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0 !important;\n}\n\n.contentSecondary {\n  color: var(--vertical-stepper-text, #686868);\n}\n\n.stepperSuccessBorder {\n  border: none;\n}\n\n.stepperNotReachedBorder {\n  border: 1px 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-inline-end: 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: 1px dashed #898989;\n  height: 0.125rem;\n  margin: 0 1rem;\n}\n\n.stepperDisabledDivider {\n  width: 88%;\n  border: 1px dashed var(--stepper-disabled-divider-far-color, #898989);\n  height: 0.125rem;\n  margin: 0 1rem;\n}\n\n.stepperNextDivider {\n  width: 88%;\n  border: 1px dashed var(--stepper-disabled-divider-near-color, #898989);\n  height: 0.125rem;\n  margin: 0 1rem;\n}\n\n.stepperDisabledDividerSpaced {\n  width: 88%;\n  height: 0.0625rem;\n  margin: 0 1rem;\n  background-image: repeating-linear-gradient(to right, var(--stepper-disabled-divider-far-color, var(--deep-blue-700)) 0 4px, transparent 4px 10px);\n  background-position: center;\n  background-repeat: repeat-x;\n}\n\n.stepperNextDividerSpaced {\n  width: 88%;\n  height: 0.0625rem;\n  margin: 0 1rem;\n  background-image: repeating-linear-gradient(to right, var(--stepper-disabled-divider-near-color, var(--deep-blue-300)) 0 4px, transparent 4px 10px);\n  background-position: center;\n  background-repeat: repeat-x;\n}\n\n.stepperPlainDivider {\n  width: 88%;\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--horizontal-stepper-border-color, var(--content-primary));\n  height: 0.125rem;\n  margin: 0 1rem;\n}\n\n.stepperVerticalDivider {\n  border-inline-start: 2px solid var(--content-primary);\n  min-height: 2rem;\n  max-height: 100%;\n  margin-inline-start: 1.25rem;\n  padding-inline-start: 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 var(--content-primary);\n  color: #ffffff;\n  background: var(--surface-inverted);\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  margin-inline-end: 1rem;\n}\n\n.stepperVerticalDisabledDivider {\n  width: 1.75rem;\n  min-height: 2rem;\n  max-height: 100%;\n  margin: 0.75rem 0;\n  background-image: linear-gradient(#686868 50%, rgba(255, 255, 255, 0) 0%);\n  background-position: center;\n  background-size: 0.5px 10px;\n  background-repeat: repeat-y;\n}\n\n.stepperVerticalPlainDivider {\n  width: var(--stepper-vertical-width-plain-divider, 2px);\n  border-inline-start: 1px solid var(--stepper-vertical-success-divider-color, #008256);\n  min-height: 2rem;\n  max-height: 100%;\n  margin: 0.75rem 0;\n  margin-inline-start: 0.875rem;\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: var(--warning-color, --semantic-warning2);\n  gap: var(--gap-spacing, unset);\n}\n\n.error {\n  color: var(--error-color, --semantic-error);\n  gap: var(--gap-spacing, unset);\n}\n\n.stepperWarningCircle {\n  border: 2px solid var(--stepper-vertical-warning-circle, --semantic-warning2);\n}\n\n.stepperErrorCircle {\n  border: 2px solid var(--error-color, --semantic-error);\n}\n\n.flexCenter {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.marginRight {\n  margin-inline-end: 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\n.contentPrimary {\n  color: var(--content-primary);\n}";
 n(css,{});
 
-const Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex, displayRightContent, isPaymentPlanFlow, weight = "SEMI_BOLD", verticalTypographyVariant, }) => {
+const Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex, displayRightContent, isPaymentPlanFlow, weight = "SEMI_BOLD", verticalTypographyVariant, spacedDashedDivider, }) => {
     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: {
@@ -22668,7 +22668,13 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
                     currentStep && currentStep > val.id && (React__default.createElement("div", { className: `${"stepperCircle"} ${"stepperSuccessBorder"}` }, successIcon)),
                     val.id < stepperData.length && (React__default.createElement("div", { className: currentStep && currentStep > val.id
                             ? "stepperPlainDivider"
-                            : "stepperDisabledDivider", style: { width: dividerWidth ?? "" } }, " "))),
+                            : currentStep && currentStep === val.id
+                                ? spacedDashedDivider
+                                    ? "stepperNextDividerSpaced"
+                                    : "stepperNextDivider"
+                                : spacedDashedDivider
+                                    ? "stepperDisabledDividerSpaced"
+                                    : "stepperDisabledDivider", style: { width: dividerWidth ?? "" } }, " "))),
                 React__default.createElement(Typography, { className: currentStep && currentStep < val.id
                         ? "contentSecondary"
                         : "contentPrimary", variant: variant, weight: weight }, val?.name)))))))),