dhre-component-lib 0.8.6 → 0.8.8

package/dist/index.js

@@ -21622,7 +21622,7 @@ const MapComponent = ({ containerClassName = "map-container", zoom = 18, mapOpti
     }
 };
 
-var css$e = ".otpMainContainer {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin: 10px 0;\n  width: 343px;\n}\n\n.otpInputDiv {\n  flex-direction: row;\n  gap: 12px;\n  display: flex;\n}\n\n.otpInput {\n  width: calc(25% - 9px);\n  height: 48px;\n  text-align: center;\n  font-size: 18px;\n  font-weight: 400;\n  border-radius: 8px;\n}\n@media (max-width: 600px) {\n  .otpInput {\n    height: 40px;\n  }\n}\n\n.otpInput::-webkit-inner-spin-button {\n  display: none;\n}\n\n.resendContainer {\n  display: flex;\n  flex-direction: row;\n  margin-top: 10px;\n  justify-content: space-between;\n}\n\n.errorText {\n  color: #EB0542;\n  font-weight: 400;\n  font-size: 14px;\n}\n\n.timerText {\n  color: #0569C2;\n  font-weight: 400;\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n}\n\n.resendText {\n  color: #A7A7A7;\n  font-weight: 700;\n  font-size: 14px;\n}\n\n.enabledResendText {\n  color: #000000;\n  font-weight: 700;\n  font-size: 14px;\n}";
+var css$e = ".otpMainContainer {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin: 10px 0;\n  width: 343px;\n}\n\n.otpInputDiv {\n  flex-direction: row;\n  gap: 12px;\n  display: flex;\n}\n\n.otpInput {\n  width: calc(25% - 9px);\n  height: 48px;\n  text-align: center;\n  font-size: 18px;\n  font-weight: 400;\n  border-radius: 8px;\n}\n@media (max-width: 600px) {\n  .otpInput {\n    height: 40px;\n  }\n}\n\n.otpInput:focus-visible {\n  outline: none;\n  border: 1px solid #000000 !important;\n}\n\n.otpInput::-webkit-inner-spin-button {\n  display: none;\n}\n\n.resendContainer {\n  display: flex;\n  flex-direction: row;\n  margin-top: 10px;\n  justify-content: space-between;\n}\n\n.errorText {\n  color: #EB0542;\n  font-weight: 400;\n  font-size: 14px;\n}\n\n.timerText {\n  color: #0569C2;\n  font-weight: 400;\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n}\n\n.resendText {\n  color: #A7A7A7;\n  font-weight: 700;\n  font-size: 14px;\n}\n\n.enabledResendText {\n  color: #000000;\n  font-weight: 700;\n  font-size: 14px;\n}";
 n(css$e,{});
 
 const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDelay = 60, error = false, errorText, resendText, showResendButton = true, className, inputClassName, disableResend, icon, noResendButtonText }) => {
@@ -21787,7 +21787,7 @@ const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSug
             React__namespace.default.createElement("div", { className: "underline" }))))) : (React__namespace.default.createElement(Typography, { variant: "B4", weight: "SEMI_BOLD", className: "no-suggestions" }, "No results found"))))));
 };
 
-var css$c = ".modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.6);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n  backdrop-filter: blur(3px);\n}\n\n.modal-container {\n  background-color: white;\n  padding: 40px;\n  border-radius: 20px;\n  width: 560px;\n  max-width: 560px;\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);\n  position: relative;\n  transition: transform 0.3s ease, opacity 0.3s ease;\n}\n@media (min-width: 768px) {\n  .modal-container {\n    width: 80%;\n  }\n}\n@media (min-width: 1024px) {\n  .modal-container {\n    width: 60%;\n  }\n}\n\n.modal-header {\n  font-size: 1.5rem;\n  font-weight: bold;\n  margin-bottom: 15px;\n}\n\n.modal-content {\n  margin-bottom: 20px;\n}\n\n.modal-close {\n  position: absolute;\n  top: 40px;\n  right: 40px;\n  background: none;\n  border: none;\n  font-size: 1.5rem;\n  cursor: pointer;\n}\n\n@media (max-width: 767px) {\n  .modal-container {\n    width: 95%;\n  }\n}";
+var css$c = ".modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.6);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n  backdrop-filter: blur(3px);\n}\n\n.modal-container {\n  background-color: white;\n  padding: 40px;\n  border-radius: 20px;\n  width: 560px;\n  max-width: 560px;\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);\n  position: relative;\n  transition: transform 0.3s ease, opacity 0.3s ease;\n}\n@media (min-width: 768px) {\n  .modal-container {\n    width: 80%;\n  }\n}\n@media (min-width: 1024px) {\n  .modal-container {\n    width: 60%;\n  }\n}\n\n.modal-header {\n  font-size: 1.5rem;\n  font-weight: bold;\n  margin-bottom: 15px;\n}\n\n.modal-content {\n  margin-bottom: 20px;\n}\n\n.modal-close {\n  position: absolute;\n  top: 40px;\n  right: 40px;\n  background: none;\n  border: none;\n  font-size: 1.5rem;\n  cursor: pointer;\n}\n\n@media (max-width: 767px) {\n  .modal-container {\n    width: 90%;\n    padding: 20px;\n  }\n}";
 n(css$c,{});
 
 const Modal = ({ isOpen, onClose, title, children, crossIcon, className }) => {
@@ -21911,10 +21911,10 @@ var css$8 = ".textArea {\n  min-width: 70%;\n  width: 100%;\n  height: 8.875rem;
 n(css$8,{});
 
 function TextArea(props) {
-    const { value, onChange, requiredLimit, placeholder, charText, property, isShortTextBox } = props;
+    const { shouldCheckRegex, value, onChange, requiredLimit, placeholder, charText, property, isShortTextBox } = props;
     const [showLabelOnBorder, setShowLabelOnBorder] = React$1.useState(false);
     const checkSpecialChar = (e) => {
-        if (!/[0-9a-zA-Z ]/.test(e.key)) {
+        if (shouldCheckRegex && !/[0-9a-zA-Z ]/.test(e.key)) {
             e.preventDefault();
         }
         console.log('textAraea');
@@ -22181,7 +22181,7 @@ const Carousel = ({ items }) => {
         React__namespace.default.createElement("div", { className: "carousel-dots" }, items?.map((_, index) => (React__namespace.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}\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-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: 1px dashed #898989;\n  height: 0.125rem;\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.stepperDisabledDivider {\n  width: 88%;\n  border: 1px dashed #898989;\n  height: 0.125rem;\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.stepperPlainDivider {\n  width: 88%;\n  border: 1px 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: 1.25rem;\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: 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-left: 1px solid #00b578;\n  min-height: 2rem;\n  max-height: 100%;\n  margin: 0.75rem 0;\n  margin-left: 0.875rem;\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}";
+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-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: 1px dashed #898989;\n  height: 0.125rem;\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.stepperDisabledDivider {\n  width: 88%;\n  border: 1px dashed #898989;\n  height: 0.125rem;\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.stepperPlainDivider {\n  width: 88%;\n  border: 1px 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: 1.25rem;\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: 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-left: 1px solid #008256;\n  min-height: 2rem;\n  max-height: 100%;\n  margin: 0.75rem 0;\n  margin-left: 0.875rem;\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 Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex, displayRightContent, isPaymentPlanFlow, }) => {
@@ -22193,7 +22193,7 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
                         : "",
                 } },
                 React__namespace.default.createElement("div", { className: "stepperItem" },
-                    React__namespace.default.createElement("div", { className: "stepperCircle" }, showLabelIndex ? val.id : "")),
+                    React__namespace.default.createElement("div", { style: { flexShrink: 0 }, className: "stepperCircle" }, showLabelIndex ? val.id : "")),
                 React__namespace.default.createElement(Typography, { variant: variant, weight: "SEMI_BOLD" }, val?.name)))))),
             type === "dynamic" && (React__namespace.default.createElement("div", { className: "stepperAlignment" }, stepperData?.map((val) => (React__namespace.default.createElement("div", { key: val.id, style: {
                     width: val.id < stepperData.length