dhre-component-lib 0.11.0 → 0.13.0

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

@@ -9,6 +9,7 @@ interface StepperData {
     img?: React.ReactNode;
 }
 type StepperWeight = "BOLD" | "SEMI_BOLD" | "MEDIUM" | "REGULAR" | "LIGHT";
+type TypographyVariant = "H1" | "H2" | "H3" | "H4" | "H5" | "H6" | "H7" | "H8" | "B1" | "B2" | "B3" | "B4" | "L1" | "L2" | "L3";
 interface StepperInterface {
     stepperData: StepperData[];
     type: string;
@@ -25,6 +26,8 @@ interface StepperInterface {
     displayRightContent?: boolean;
     isPaymentPlanFlow?: boolean;
     weight?: StepperWeight;
+    verticalTypographyVariant?: TypographyVariant;
+    spacedDashedDivider?: boolean;
 }
 declare const Stepper: React.FC<StepperInterface>;
 export default Stepper;

package/dist/index.d.ts

@@ -311,10 +311,10 @@ declare const OTPInput: React.FC<OTPInputProps>;
  *
  * No runtime brand detection needed — CSS handles switching via body.Lifestyle class.
  */
-type TypographyVariant = 'H1' | 'H2' | 'H3' | 'H4' | 'H5' | 'H6' | 'H7' | 'H8' | 'B1' | 'B2' | 'B3' | 'B4' | 'L1' | 'L2' | 'L3';
+type TypographyVariant$1 = 'H1' | 'H2' | 'H3' | 'H4' | 'H5' | 'H6' | 'H7' | 'H8' | 'B1' | 'B2' | 'B3' | 'B4' | 'L1' | 'L2' | 'L3';
 type TypographyWeight = 'BOLD' | 'SEMI_BOLD' | 'MEDIUM' | 'REGULAR' | 'LIGHT';
 interface TypographyProps {
-    variant?: TypographyVariant;
+    variant?: TypographyVariant$1;
     weight?: TypographyWeight;
     children: React.ReactNode;
     className?: string;
@@ -558,6 +558,7 @@ interface StepperData {
     img?: React.ReactNode;
 }
 type StepperWeight = "BOLD" | "SEMI_BOLD" | "MEDIUM" | "REGULAR" | "LIGHT";
+type TypographyVariant = "H1" | "H2" | "H3" | "H4" | "H5" | "H6" | "H7" | "H8" | "B1" | "B2" | "B3" | "B4" | "L1" | "L2" | "L3";
 interface StepperInterface {
     stepperData: StepperData[];
     type: string;
@@ -574,6 +575,8 @@ interface StepperInterface {
     displayRightContent?: boolean;
     isPaymentPlanFlow?: boolean;
     weight?: StepperWeight;
+    verticalTypographyVariant?: TypographyVariant;
+    spacedDashedDivider?: boolean;
 }
 declare const Stepper: React.FC<StepperInterface>;
 

package/dist/index.esm.js

@@ -22294,7 +22294,7 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, wrapperClassName }) =>
                     React__default.createElement("div", { className: "counts" }, tab?.count))))))));
 };
 
-var css$9 = ".dropdown {\n  width: 100%;\n  border: var(--dropdown-border, 0.0625rem solid #686868);\n  height: 3.5rem;\n  border-radius: var(--border-radius-small);\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  z-index: 1;\n  background: var(--dropdown-background-color, transparent);\n}\n\n.astreik {\n  color: #eb0542;\n}\n\n.dropdownLabel {\n  position: absolute;\n  z-index: 2;\n  top: -10px;\n  inset-inline-start: 11px;\n  background: var(--dropdown-label-background, #ffffff);\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n  color: var(--content-primary);\n}\n\n.placeholder {\n  color: #686868;\n}\n\n.dropPosition {\n  position: relative;\n}\n\n.zIndexProp {\n  z-index: 0;\n}\n\n.dropdownValues {\n  border: 0.0625rem solid #e1e1e1;\n  box-shadow: var(--dropdown-values-box-shadow, 0px 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.2509803922));\n  border-radius: var(--border-radius);\n  margin-top: 0.3125rem;\n  position: absolute;\n  width: 100%;\n  z-index: 9;\n  max-height: 30vh;\n  overflow-y: auto;\n  background: var(--dropdown-values-background-color, #ffffff);\n}\n\n.dropdownSearchContainer {\n  background: #ffffff;\n  padding: 0.75rem;\n  border-bottom: 0.0625rem solid #e1e1e1;\n}\n\n.dropdownSearchField {\n  position: relative;\n  width: 100%;\n}\n\n.dropdownSearchClear {\n  position: absolute;\n  inset-inline-end: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  color: #686868;\n}\n\n.dropdownSearchInput {\n  width: 100%;\n  border: 0.0625rem solid #a7a7a7;\n  border-radius: var(--border-radius-small);\n  height: 2.5rem;\n  padding: 0.5rem 2.5rem 0.5rem 0.75rem;\n  outline: none;\n  font-size: 1rem;\n  font-family: var(--brand-font-family);\n  color: var(--content-primary);\n  background: #ffffff;\n  box-sizing: border-box;\n}\n\n.dropdownSearchInput::placeholder {\n  color: #686868;\n}\n\n.dropdownSearchInput:focus {\n  border-color: var(--content-primary);\n}\n\n.noDropdownResult {\n  display: block;\n  background: #ffffff;\n  min-height: 3.24rem;\n  padding: 1rem;\n  color: #686868;\n}\n\n.unselectedText {\n  background: var(--dropdown-values-background-color, #ffffff);\n  min-height: 3.24rem;\n  padding: 1rem;\n  color: #686868;\n  cursor: pointer;\n}\n\n.value {\n  color: var(--content-primary);\n}\n\n.unselectedText:hover {\n  background: var(--dropdown-values-hover-background, #e1e1e1);\n  color: var(--dropdown-values-hover-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  z-index: 4;\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\n.bold {\n  font-weight: 700;\n}";
+var css$9 = ".dropdown {\n  width: 100%;\n  border: var(--dropdown-border, 0.0625rem solid #686868);\n  height: 3.5rem;\n  border-radius: var(--border-radius-small);\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  z-index: 1;\n  background: var(--dropdown-background-color, transparent);\n}\n\n.astreik {\n  color: #eb0542;\n}\n\n.dropdownLabel {\n  position: absolute;\n  z-index: 2;\n  top: -10px;\n  inset-inline-start: 11px;\n  background: var(--dropdown-label-background, #ffffff);\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n  color: var(--content-primary);\n}\n\n.placeholder {\n  color: var(dropdown-placeholder-color, #686868);\n}\n\n.dropPosition {\n  position: relative;\n}\n\n.zIndexProp {\n  z-index: 0;\n}\n\n.dropdownValues {\n  border: var(--dropdown-list-border, 0.0625rem solid #e1e1e1);\n  box-shadow: var(--dropdown-values-box-shadow, 0px 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.2509803922));\n  border-radius: var(--border-radius);\n  margin-top: 0.3125rem;\n  position: absolute;\n  width: 100%;\n  z-index: 9;\n  max-height: 30vh;\n  overflow-y: auto;\n  background: var(--dropdown-values-background-color, #ffffff);\n}\n\n.dropdownSearchContainer {\n  background: #ffffff;\n  padding: 0.75rem;\n  border-bottom: 0.0625rem solid #e1e1e1;\n}\n\n.dropdownSearchField {\n  position: relative;\n  width: 100%;\n}\n\n.dropdownSearchClear {\n  position: absolute;\n  inset-inline-end: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  color: #686868;\n}\n\n.dropdownSearchInput {\n  width: 100%;\n  border: 0.0625rem solid #a7a7a7;\n  border-radius: var(--border-radius-small);\n  height: 2.5rem;\n  padding: 0.5rem 2.5rem 0.5rem 0.75rem;\n  outline: none;\n  font-size: 1rem;\n  font-family: var(--brand-font-family);\n  color: var(--content-primary);\n  background: #ffffff;\n  box-sizing: border-box;\n}\n\n.dropdownSearchInput::placeholder {\n  color: #686868;\n}\n\n.dropdownSearchInput:focus {\n  border-color: var(--content-primary);\n}\n\n.noDropdownResult {\n  display: block;\n  background: #ffffff;\n  min-height: 3.24rem;\n  padding: 1rem;\n  color: #686868;\n}\n\n.unselectedText {\n  background: var(--dropdown-values-background-color, #ffffff);\n  min-height: 3.24rem;\n  padding: 1rem;\n  color: #686868;\n  cursor: pointer;\n}\n\n.value {\n  color: var(--content-primary);\n}\n\n.unselectedText:hover {\n  background: var(--dropdown-values-hover-background, #e1e1e1);\n  color: var(--dropdown-values-hover-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  z-index: 4;\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\n.bold {\n  font-weight: 700;\n}";
 n(css$9,{});
 
 function Dropdown(props) {
@@ -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: #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: 2px;\n  border-inline-start: 1px solid #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(--semantic-warning2);\n}\n\n.error {\n  color: var(--semantic-error);\n}\n\n.stepperWarningCircle {\n  border: 2px solid var(--semantic-warning2);\n}\n\n.stepperErrorCircle {\n  border: 2px solid var(--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", }) => {
+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)))))))),
@@ -22693,11 +22699,11 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
                         React__default.createElement(Typography, { className: currentStep &&
                                 (currentStep === val.id || currentStep < val.id)
                                 ? "contentSecondary"
-                                : "", variant: "B2", weight: weight }, val?.name)),
+                                : "", variant: verticalTypographyVariant ?? "B2", weight: weight }, val?.name)),
                     currentStep === val.id && (React__default.createElement("div", { className: `${"flex"} ${status === "Rejected" ? "error" : "warning"}` },
                         statusIcon,
                         status)),
-                    displayRightContent && (React__default.createElement(Typography, { variant: "B2", weight: weight }, val?.value))),
+                    displayRightContent && (React__default.createElement(Typography, { variant: verticalTypographyVariant ?? "B2", weight: weight }, val?.value))),
                 React__default.createElement("div", null,
                     React__default.createElement("div", { className: val.id < stepperData.length
                             ? currentStep && currentStep > val.id