dhre-component-lib 0.8.7 → 0.8.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +4 -4
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +4 -4
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -21599,7 +21599,7 @@ const MapComponent = ({ containerClassName = "map-container", zoom = 18, mapOpti
|
|
|
21599
21599
|
}
|
|
21600
21600
|
};
|
|
21601
21601
|
|
|
21602
|
-
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}";
|
|
21602
|
+
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}";
|
|
21603
21603
|
n(css$e,{});
|
|
21604
21604
|
|
|
21605
21605
|
const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDelay = 60, error = false, errorText, resendText, showResendButton = true, className, inputClassName, disableResend, icon, noResendButtonText }) => {
|
|
@@ -21764,7 +21764,7 @@ const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSug
|
|
|
21764
21764
|
React__default.createElement("div", { className: "underline" }))))) : (React__default.createElement(Typography, { variant: "B4", weight: "SEMI_BOLD", className: "no-suggestions" }, "No results found"))))));
|
|
21765
21765
|
};
|
|
21766
21766
|
|
|
21767
|
-
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:
|
|
21767
|
+
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}";
|
|
21768
21768
|
n(css$c,{});
|
|
21769
21769
|
|
|
21770
21770
|
const Modal = ({ isOpen, onClose, title, children, crossIcon, className }) => {
|
|
@@ -22158,7 +22158,7 @@ const Carousel = ({ items }) => {
|
|
|
22158
22158
|
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) }))))));
|
|
22159
22159
|
};
|
|
22160
22160
|
|
|
22161
|
-
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 #
|
|
22161
|
+
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}";
|
|
22162
22162
|
n(css,{});
|
|
22163
22163
|
|
|
22164
22164
|
const Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex, displayRightContent, isPaymentPlanFlow, }) => {
|
|
@@ -22170,7 +22170,7 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
|
|
|
22170
22170
|
: "",
|
|
22171
22171
|
} },
|
|
22172
22172
|
React__default.createElement("div", { className: "stepperItem" },
|
|
22173
|
-
React__default.createElement("div", { className: "stepperCircle" }, showLabelIndex ? val.id : "")),
|
|
22173
|
+
React__default.createElement("div", { style: { flexShrink: 0 }, className: "stepperCircle" }, showLabelIndex ? val.id : "")),
|
|
22174
22174
|
React__default.createElement(Typography, { variant: variant, weight: "SEMI_BOLD" }, val?.name)))))),
|
|
22175
22175
|
type === "dynamic" && (React__default.createElement("div", { className: "stepperAlignment" }, stepperData?.map((val) => (React__default.createElement("div", { key: val.id, style: {
|
|
22176
22176
|
width: val.id < stepperData.length
|