dhre-component-lib 0.8.16 → 0.8.18
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/components/OtpInput/OtpInput.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +21 -19
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +21 -19
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
package/dist/index.esm.js
CHANGED
|
@@ -107,7 +107,7 @@ const Badge = ({ content, badgeClassName, handleClick, }) => {
|
|
|
107
107
|
return (React__default.createElement("button", { onClick: handleClick, className: `${'badge'} ${badgeClassName}` }, content));
|
|
108
108
|
};
|
|
109
109
|
|
|
110
|
-
var css$l = ".breadcrumb {\n display: flex;\n align-items: center;\n font-size: 16px;\n}\n\n.breadcrumbItem {\n color: blue;\n cursor: pointer;\n margin-
|
|
110
|
+
var css$l = ".breadcrumb {\n display: flex;\n align-items: center;\n font-size: 16px;\n}\n\n.breadcrumbItem {\n color: blue;\n cursor: pointer;\n margin-inline-end: 8px;\n}\n.breadcrumbItem:hover {\n text-decoration: underline;\n}\n\n.separator {\n margin: 0 8px;\n color: grey;\n}";
|
|
111
111
|
n(css$l,{});
|
|
112
112
|
|
|
113
113
|
const Breadcrumb = ({ items, breadcrumbClassName, itemClassName, separator = "/", separatorClassName, }) => {
|
|
@@ -116,7 +116,7 @@ const Breadcrumb = ({ items, breadcrumbClassName, itemClassName, separator = "/"
|
|
|
116
116
|
index < items.length - 1 && (React__default.createElement("span", { className: `${'separator'} ${separatorClassName}` }, separator)))))));
|
|
117
117
|
};
|
|
118
118
|
|
|
119
|
-
var css$k = ".custom-checkbox {\n display: flex;\n align-items: center;\n}\n.custom-checkbox input[type=checkbox] {\n /* Hide the default checkbox */\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n margin-
|
|
119
|
+
var css$k = ".custom-checkbox {\n display: flex;\n align-items: center;\n}\n.custom-checkbox input[type=checkbox] {\n /* Hide the default checkbox */\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n margin-inline-end: 8px;\n border: 2px solid #000000;\n border-radius: 4px;\n background-color: #ffffff;\n cursor: pointer;\n position: relative;\n /* Create the white tick mark */\n}\n.custom-checkbox input[type=checkbox]:checked {\n background-color: #000000;\n}\n.custom-checkbox input[type=checkbox]:checked::after {\n content: \"\";\n position: absolute;\n top: 0;\n inset-inline-start: 5px;\n width: 5px;\n height: 10px;\n border: solid #ffffff;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n}\n.custom-checkbox input[type=checkbox]:focus {\n outline: none;\n box-shadow: 0 0 3px #000000;\n}\n.custom-checkbox .checkbox-label {\n font-size: 14px;\n color: #000000; /* Adjust the text color if needed */\n}";
|
|
120
120
|
n(css$k,{});
|
|
121
121
|
|
|
122
122
|
const Checkbox = ({ label, checked = false, onChange, className = '', checkboxClassName = '', labelClassName = '', ...rest }) => {
|
|
@@ -157,7 +157,7 @@ const Typography = ({ variant = 'B1', weight = 'MEDIUM', children, className, ..
|
|
|
157
157
|
return React__default.createElement("div", { className: classNames, ...props }, children);
|
|
158
158
|
};
|
|
159
159
|
|
|
160
|
-
var css$i = ".inputLabel {\n position: absolute;\n z-index: 1;\n top: -10px;\n
|
|
160
|
+
var css$i = ".inputLabel {\n position: absolute;\n z-index: 1;\n top: -10px;\n inset-inline-start: 11px;\n background: #ffffff;\n padding: 0 6px;\n transition: all 0.3s ease-out;\n}\n\n.inputLabelTooltip {\n position: absolute;\n z-index: 1;\n top: 17px;\n inset-inline-start: 11px;\n background: #ffffff;\n padding: 0 6px;\n transition: all 0.3s ease-out;\n}\n\n.inputContainer {\n position: relative;\n z-index: 0;\n}\n\n.inputError:focus-visible {\n outline: 1px solid #eb0542 !important;\n}\n\n.inputContainer::placeholder {\n color: #686868;\n font-size: 16px;\n font-family: \"Meraas Aktiv\", sans-serif;\n font-weight: 400;\n line-height: 22.4px;\n}\n\n.astreik {\n color: #eb0542;\n}\n\ninput::-webkit-contacts-auto-fill-button {\n box-shadow: 0 0 0px 1000px white inset !important;\n -webkit-text-fill-color: inherit !important;\n background-image: none !important;\n mask-image: none;\n}\n\n.ToolTipImage {\n position: relative;\n inset-inline-start: 87.5%;\n z-index: 2;\n top: 2.75rem;\n cursor: pointer;\n}\n\n.tooltipwrapper {\n display: flex;\n flex-direction: row !important;\n gap: 1rem;\n}\n\n.tooltipText {\n font-family: Meraas Aktiv;\n font-size: 16px;\n font-weight: 400;\n line-height: 22.4px;\n text-align: start;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n color: #000000;\n max-width: 17.1875rem;\n}\n\n.tooltip {\n cursor: pointer;\n}\n\n.linkWrapper {\n display: flex;\n gap: 1;\n}\n\n.linkClassName {\n text-decoration: underline;\n cursor: pointer;\n color: #eb0542;\n}";
|
|
161
161
|
n(css$i,{});
|
|
162
162
|
|
|
163
163
|
const common = {
|
|
@@ -21602,7 +21602,7 @@ const MapComponent = ({ containerClassName = "map-container", zoom = 18, mapOpti
|
|
|
21602
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
|
-
const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDelay = 60, error = false, errorText, resendText, showResendButton = true, className, inputClassName, disableResend, icon, noResendButtonText, patternRegex = null, }) => {
|
|
21605
|
+
const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDelay = 60, error = false, errorText, resendText, showResendButton = true, className, inputClassName, disableResend, icon, noResendButtonText, secondText = "secs", patternRegex = null, }) => {
|
|
21606
21606
|
const [otp, setOtp] = useState(Array(length).fill(""));
|
|
21607
21607
|
const [timer, setTimer] = useState(resendDelay);
|
|
21608
21608
|
const [isComplete, setIsComplete] = useState(false);
|
|
@@ -21671,26 +21671,28 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
|
|
|
21671
21671
|
}
|
|
21672
21672
|
return isComplete ? "#00B578" : "#A7A7A7";
|
|
21673
21673
|
}
|
|
21674
|
-
return (React__default.createElement("div", { className: `${
|
|
21674
|
+
return (React__default.createElement("div", { className: `${"otpMainContainer"} ${className ? className : ""}` },
|
|
21675
21675
|
React__default.createElement("div", { className: "otpInputDiv" }, Array(length)
|
|
21676
21676
|
.fill("")
|
|
21677
|
-
.map((_, index) => (React__default.createElement("input", { key: index, type: "number", id: `otp-input-${index}`, value: otp[index], "data-testid": `otp-input-${index}`, onChange: (e) => handleChange(e.target.value, index, e), onKeyDown: (e) => handleKeyDown(e, index), style: { border: `1px solid ${getReadableStatus()}` }, className: `${
|
|
21677
|
+
.map((_, index) => (React__default.createElement("input", { key: index, type: "number", id: `otp-input-${index}`, value: otp[index], "data-testid": `otp-input-${index}`, onChange: (e) => handleChange(e.target.value, index, e), onKeyDown: (e) => handleKeyDown(e, index), style: { border: `1px solid ${getReadableStatus()}` }, className: `${"otpInput"} ${inputClassName ? inputClassName : ""}`, autoFocus: autoFocus && index === 0 })))),
|
|
21678
21678
|
React__default.createElement("div", { className: "resendContainer" },
|
|
21679
|
-
error &&
|
|
21680
|
-
!showResendButton && !error && React__default.createElement("div", { className: "errorText" }, noResendButtonText),
|
|
21679
|
+
error && React__default.createElement("div", { className: "errorText" }, errorText),
|
|
21680
|
+
!showResendButton && !error && (React__default.createElement("div", { className: "errorText" }, noResendButtonText)),
|
|
21681
21681
|
showResendButton && (React__default.createElement(React__default.Fragment, null,
|
|
21682
21682
|
React__default.createElement("div", { className: "timerText" },
|
|
21683
21683
|
timer ? icon : "",
|
|
21684
|
-
timer > 0 ? `00:${timer}
|
|
21684
|
+
timer > 0 ? `00:${timer} ${secondText}` : ""),
|
|
21685
21685
|
React__default.createElement("button", { type: "button", onClick: handleResendClick, disabled: timer > 0 || disableResend, style: {
|
|
21686
21686
|
border: "none",
|
|
21687
21687
|
background: "none",
|
|
21688
21688
|
cursor: timer > 0 || disableResend ? "not-allowed" : "pointer",
|
|
21689
21689
|
} },
|
|
21690
|
-
React__default.createElement("div", { className:
|
|
21690
|
+
React__default.createElement("div", { className: timer > 0 || disableResend
|
|
21691
|
+
? "resendText"
|
|
21692
|
+
: "enabledResendText" }, resendText)))))));
|
|
21691
21693
|
};
|
|
21692
21694
|
|
|
21693
|
-
var css$d = ".search-field-container {\n display: flex;\n align-items: center;\n padding: 8px;\n border-radius: 10px;\n background-color: #ffffff;\n transition: border-color 0.3s ease;\n}\n.search-field-container.default-border {\n border: 1px solid #a7a7a7;\n}\n.search-field-container.typing-border {\n border: 1px solid #ffffff;\n}\n.search-field-container.typing-dark-border {\n border: 1px solid #a7a7a7;\n}\n.search-field-container.stopped-border {\n border: 1px solid #000000;\n}\n.search-field-container.disabled-border {\n border: 1px solid #4f4f4f;\n background-color: #e1e1e1;\n}\n\n.search-icon {\n margin-
|
|
21695
|
+
var css$d = ".search-field-container {\n display: flex;\n align-items: center;\n padding: 8px;\n border-radius: 10px;\n background-color: #ffffff;\n transition: border-color 0.3s ease;\n}\n.search-field-container.default-border {\n border: 1px solid #a7a7a7;\n}\n.search-field-container.typing-border {\n border: 1px solid #ffffff;\n}\n.search-field-container.typing-dark-border {\n border: 1px solid #a7a7a7;\n}\n.search-field-container.stopped-border {\n border: 1px solid #000000;\n}\n.search-field-container.disabled-border {\n border: 1px solid #4f4f4f;\n background-color: #e1e1e1;\n}\n\n.search-icon {\n margin-inline-end: 8px;\n}\n\n.search-input {\n flex: 1;\n border: none;\n background-color: transparent;\n outline: none;\n height: 2rem;\n}\n\n.cross-icon {\n cursor: pointer;\n margin-inline-start: 0.5rem;\n margin-top: 4px;\n}\n\n.suggestions-dropdown {\n border: 1px solid #ccc;\n background-color: white;\n position: absolute;\n width: 600px;\n z-index: 10;\n top: 13.5rem;\n border-radius: 10px;\n}\n@media (max-width: 767px) {\n .suggestions-dropdown {\n width: 94%;\n top: 10rem;\n }\n}\n\n.suggestion-item {\n padding: 16px 8px 16px 8px;\n cursor: pointer;\n text-align: start;\n}\n\n.underline {\n height: 1px;\n background-color: #cecece;\n margin: 0 1.5rem;\n}\n\n.suggestion-item:hover {\n background-color: none;\n}\n\n.row {\n flex-direction: row;\n display: flex;\n background: none;\n border: none;\n align-items: center;\n padding-inline-start: 10px;\n}\n\n.no-suggestions {\n padding: 20px;\n}\n\n.search-input::placeholder {\n color: #686868;\n font-size: 16px;\n font-family: \"Meraas Aktiv\", sans-serif;\n font-weight: 400;\n line-height: 22.4px;\n}";
|
|
21694
21696
|
n(css$d,{});
|
|
21695
21697
|
|
|
21696
21698
|
const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSuggestion, suggestions, placeholder, className = "", suggestionClassName = "", onSearchIconClick, onHandleClear, isWhiteBackgound = false, shouldShowAll = false, }) => {
|
|
@@ -21789,7 +21791,7 @@ const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSug
|
|
|
21789
21791
|
React__default.createElement("div", { className: "underline" }))))) : (React__default.createElement(Typography, { variant: "B4", weight: "SEMI_BOLD", className: "no-suggestions" }, "No results found"))))));
|
|
21790
21792
|
};
|
|
21791
21793
|
|
|
21792
|
-
var css$c = ".modal-overlay {\n position: fixed;\n top: 0;\n
|
|
21794
|
+
var css$c = ".modal-overlay {\n position: fixed;\n top: 0;\n inset-inline-start: 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 inset-inline-end: 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}";
|
|
21793
21795
|
n(css$c,{});
|
|
21794
21796
|
|
|
21795
21797
|
const Modal = ({ isOpen, onClose, title, children, crossIcon, className }) => {
|
|
@@ -21813,7 +21815,7 @@ const Modal = ({ isOpen, onClose, title, children, crossIcon, className }) => {
|
|
|
21813
21815
|
React__default.createElement("button", { className: "modal-close", onClick: onClose }, crossIcon))));
|
|
21814
21816
|
};
|
|
21815
21817
|
|
|
21816
|
-
var css$b = ".accordion {\n padding: 10px;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n}\n.accordion.with-border {\n border: 1px solid #cecece;\n padding: 24px 16px 24px 16px;\n border-radius: 16px;\n}\n.accordion.without-border {\n border-bottom: 1px solid #f5f5f5;\n padding: 16px 0px 16px 0px;\n}\n.accordion.without-border-bottom {\n margin-top: 5px;\n}\n.accordion.without-border-bottom {\n margin-top: 5px;\n}\n.accordion .accordion-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.accordion .accordion-header .accordion-icon {\n margin-
|
|
21818
|
+
var css$b = ".accordion {\n padding: 10px;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n}\n.accordion.with-border {\n border: 1px solid #cecece;\n padding: 24px 16px 24px 16px;\n border-radius: 16px;\n}\n.accordion.without-border {\n border-bottom: 1px solid #f5f5f5;\n padding: 16px 0px 16px 0px;\n}\n.accordion.without-border-bottom {\n margin-top: 5px;\n}\n.accordion.without-border-bottom {\n margin-top: 5px;\n}\n.accordion .accordion-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.accordion .accordion-header .accordion-icon {\n margin-inline-end: 10px;\n}\n.accordion .accordion-header .accordion-text {\n display: flex;\n flex-direction: column;\n}\n.accordion .accordion-header .accordian-arrow {\n display: flex;\n justify-content: flex-end;\n}\n.accordion .accordion-content {\n padding: 16px 4px 16px 4px;\n}";
|
|
21817
21819
|
n(css$b,{});
|
|
21818
21820
|
|
|
21819
21821
|
const Accordion = ({ icon, title, description, children, border = false, upArrowIcon, downArrowIcon, openByDefault, borderBottom = false, className }) => {
|
|
@@ -21837,7 +21839,7 @@ const Accordion = ({ icon, title, description, children, border = false, upArrow
|
|
|
21837
21839
|
isOpen && (React__default.createElement("div", { className: "accordion-content" }, children))));
|
|
21838
21840
|
};
|
|
21839
21841
|
|
|
21840
|
-
var css$a = ".tabs {\n display: flex;\n}\n\n.tab {\n padding: 12px;\n cursor: pointer;\n background-color: transparent;\n border: none;\n color: #686868;\n border-bottom: 2px solid transparent;\n transition: border-bottom 0.3s ease;\n font-size: 18px !important;\n display: flex;\n align-items: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n gap: 0.5rem;\n line-height: 25.2px;\n font-family: \"Meraas Aktiv\", sans-serif;\n font-weight: 400;\n}\n\n.tab.active {\n border-bottom: 2px solid #000000;\n color: #000000;\n}\n\n.tab.inActive {\n border-bottom: 1px solid #e1e1e1;\n}\n\n.tab:hover {\n color: #000000;\n}\n\n.main {\n display: flex;\n gap: 8px;\n overflow-x: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.main::-webkit-scrollbar {\n display: none;\n}\n\n@media (max-width: 767px) {\n .main {\n display: flex;\n gap: 8px;\n overflow-x: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n }\n .main::-webkit-scrollbar {\n display: none;\n }\n}\n.dot {\n display: inline-block !important;\n width: 8px !important;\n height: 8px !important;\n background-color: red !important;\n border-radius: 50% !important;\n margin-
|
|
21842
|
+
var css$a = ".tabs {\n display: flex;\n}\n\n.tab {\n padding: 12px;\n cursor: pointer;\n background-color: transparent;\n border: none;\n color: #686868;\n border-bottom: 2px solid transparent;\n transition: border-bottom 0.3s ease;\n font-size: 18px !important;\n display: flex;\n align-items: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n gap: 0.5rem;\n line-height: 25.2px;\n font-family: \"Meraas Aktiv\", sans-serif;\n font-weight: 400;\n}\n\n.tab.active {\n border-bottom: 2px solid #000000;\n color: #000000;\n}\n\n.tab.inActive {\n border-bottom: 1px solid #e1e1e1;\n}\n\n.tab:hover {\n color: #000000;\n}\n\n.main {\n display: flex;\n gap: 8px;\n overflow-x: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.main::-webkit-scrollbar {\n display: none;\n}\n\n@media (max-width: 767px) {\n .main {\n display: flex;\n gap: 8px;\n overflow-x: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n }\n .main::-webkit-scrollbar {\n display: none;\n }\n}\n.dot {\n display: inline-block !important;\n width: 8px !important;\n height: 8px !important;\n background-color: red !important;\n border-radius: 50% !important;\n margin-inline-start: 5px !important;\n}\n\n.counts {\n background-color: #d92d27;\n border-radius: 1.5rem;\n font-size: 18px;\n color: #ffffff;\n padding: 1px;\n width: 2rem;\n height: 1.5rem;\n}";
|
|
21841
21843
|
n(css$a,{});
|
|
21842
21844
|
|
|
21843
21845
|
const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, wrapperClassName }) => {
|
|
@@ -21869,7 +21871,7 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, wrapperClassName }) =>
|
|
|
21869
21871
|
React__default.createElement("div", { className: "counts" }, tab?.count))))))));
|
|
21870
21872
|
};
|
|
21871
21873
|
|
|
21872
|
-
var css$9 = ".dropdown {\n width: 100%;\n border: 0.0625rem solid #686868;\n height: 3.5rem;\n border-radius: 0.5rem;\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}\n\n.astreik {\n color: #eb0542;\n}\n\n.dropdownLabel {\n position: absolute;\n z-index: 2;\n top: -10px;\n
|
|
21874
|
+
var css$9 = ".dropdown {\n width: 100%;\n border: 0.0625rem solid #686868;\n height: 3.5rem;\n border-radius: 0.5rem;\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}\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: #ffffff;\n padding: 0 6px;\n transition: all 0.3s ease-out;\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: 0px 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.2509803922);\n border-radius: 0.5rem;\n margin-top: 0.3125rem;\n position: absolute;\n width: 100%;\n z-index: 9;\n max-height: 30vh;\n overflow-y: auto;\n}\n\n.unselectedText {\n background: #ffffff;\n min-height: 3.24rem;\n padding: 1rem;\n color: #686868;\n cursor: pointer;\n}\n\n.value {\n color: #000000;\n}\n\n.unselectedText:hover {\n background: #e1e1e1;\n 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}";
|
|
21873
21875
|
n(css$9,{});
|
|
21874
21876
|
|
|
21875
21877
|
function Dropdown(props) {
|
|
@@ -21914,7 +21916,7 @@ function Dropdown(props) {
|
|
|
21914
21916
|
(React__default.createElement(Typography, { variant: "B3", weight: "BOLD" }, val.name)) : (React__default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD" }, val.name))))))))));
|
|
21915
21917
|
}
|
|
21916
21918
|
|
|
21917
|
-
var css$8 = ".textArea {\n min-width: 70%;\n width: 100%;\n height: 8.875rem;\n border-radius: 0.5rem;\n padding: 1rem;\n font-size: 1rem;\n font-family: Meraas Aktiv;\n font-weight: 400;\n line-height: 1.4rem;\n text-align:
|
|
21919
|
+
var css$8 = ".textArea {\n min-width: 70%;\n width: 100%;\n height: 8.875rem;\n border-radius: 0.5rem;\n padding: 1rem;\n font-size: 1rem;\n font-family: Meraas Aktiv;\n font-weight: 400;\n line-height: 1.4rem;\n text-align: start;\n outline: none;\n resize: none;\n overflow: auto;\n max-width: 100%;\n max-height: 100%;\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n.textArea::-webkit-scrollbar {\n display: none;\n}\n\n.shortTextBox {\n min-width: 70%;\n width: 100%;\n border-radius: 0.5rem;\n padding: 1rem;\n font-size: 1rem;\n font-family: Meraas Aktiv;\n font-weight: 400;\n line-height: 1.4rem;\n text-align: start;\n outline: none;\n resize: none;\n overflow: auto;\n max-width: 100%;\n max-height: 100%;\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n.shortTextBox::-webkit-scrollbar {\n display: none;\n}\n\n.inputTextAreaLabel {\n position: absolute;\n z-index: 1;\n top: -10px;\n inset-inline-start: 11px;\n background: #ffffff;\n padding: 0 6px;\n transition: all 0.3s ease-out;\n}\n\n.astreik {\n color: #eb0542;\n}\n\n.characters {\n color: #686868;\n}\n\n.textArea100 {\n height: 100%;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n}\n\n.positionRel {\n position: relative;\n z-index: 0;\n}\n\n.label {\n position: absolute;\n z-index: 1;\n top: -10px;\n inset-inline-start: 11px;\n background: #ffffff;\n padding: 0 6px;\n transition: all 0.3s ease-out;\n}\n\n.astreik {\n color: #eb0542;\n}\n\n.textArea::placeholder {\n font-family: Meraas Aktiv, sans-serif;\n font-size: 16px;\n font-weight: 400;\n line-height: 22.4px;\n text-align: start;\n color: #686868;\n}\n\n.maxLimit {\n color: #eb0542 !important;\n}\n\n.maxLimitArea {\n border: 1px solid #eb0542 !important;\n}";
|
|
21918
21920
|
n(css$8,{});
|
|
21919
21921
|
|
|
21920
21922
|
function TextArea(props) {
|
|
@@ -22086,7 +22088,7 @@ const Menu = (props) => {
|
|
|
22086
22088
|
" "))));
|
|
22087
22089
|
};
|
|
22088
22090
|
|
|
22089
|
-
var css$3 = ".toast {\n display: flex;\n align-items: center;\n position: fixed;\n
|
|
22091
|
+
var css$3 = ".toast {\n display: flex;\n align-items: center;\n position: fixed;\n inset-inline: 30%;\n color: #fff;\n border-radius: 8px;\n z-index: 10000 !important;\n opacity: 1;\n top: 127px;\n padding: 0 1rem;\n}\n.toast .icon {\n margin-inline-end: 10px;\n margin-top: 5px;\n}\n.toast .icon1 {\n margin-inline-end: 10px;\n margin-top: 5px;\n background: none;\n border: none;\n}\n.toast .text {\n flex-grow: 1;\n text-align: start;\n}\n.toast .undo {\n color: #fff;\n background: none;\n border: none;\n text-decoration: underline;\n cursor: pointer;\n margin-inline-start: auto; /* Pushes the undo button to the right */\n padding: 0;\n float: inline-end;\n}\n.toast .suggestion-item {\n padding: 20px 8px 16px 0;\n cursor: pointer;\n text-align: start;\n}\n.toast .progress-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 4px;\n transition: width 0.1s linear;\n}\n.toast.successMain {\n background-color: #008256;\n}\n.toast .successProgress {\n background-color: #024324;\n}\n.toast.errorMain {\n background-color: #dc3545;\n}\n.toast .errorProgress {\n background-color: #c82333;\n}";
|
|
22090
22092
|
n(css$3,{});
|
|
22091
22093
|
|
|
22092
22094
|
const Toast = ({ icon, text, onActionText, onAction, onHide, type, className, duration, showCrossIcon, crossIcon }) => {
|
|
@@ -22157,7 +22159,7 @@ const RangeSlider = (props) => {
|
|
|
22157
22159
|
" "))));
|
|
22158
22160
|
};
|
|
22159
22161
|
|
|
22160
|
-
var css$1 = ".carousel-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin: 0 auto;\n overflow: hidden;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n.carousel-wrapper {\n position: relative;\n display: flex;\n transition: transform 0.5s ease-in-out;\n overflow: hidden;\n height: 100%;\n display: flex;\n}\n\n.carousel-slides {\n display: flex;\n transition: transform 0.3s ease-in-out;\n width: 100%;\n height: 90%;\n}\n\n.carousel-slide {\n min-width: 100%;\n transition: opacity 0.5s ease;\n display: none;\n}\n.carousel-slide.active {\n display: block;\n}\n\n.carousel-image {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n}\n\n.carousel-video {\n width: 100%;\n display: block;\n margin-top: -60px;\n height: 120%;\n}\n\n.carousel-dots {\n text-align: center;\n position: absolute;\n bottom: 15px;\n
|
|
22162
|
+
var css$1 = ".carousel-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin: 0 auto;\n overflow: hidden;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n.carousel-wrapper {\n position: relative;\n display: flex;\n transition: transform 0.5s ease-in-out;\n overflow: hidden;\n height: 100%;\n display: flex;\n}\n\n.carousel-slides {\n display: flex;\n transition: transform 0.3s ease-in-out;\n width: 100%;\n height: 90%;\n}\n\n.carousel-slide {\n min-width: 100%;\n transition: opacity 0.5s ease;\n display: none;\n}\n.carousel-slide.active {\n display: block;\n}\n\n.carousel-image {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n}\n\n.carousel-video {\n width: 100%;\n display: block;\n margin-top: -60px;\n height: 120%;\n}\n\n.carousel-dots {\n text-align: center;\n position: absolute;\n bottom: 15px;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n gap: 5px;\n z-index: 2;\n width: 50%;\n height: 5%;\n margin-bottom: -10px;\n}\n\n.dot {\n height: 3px;\n width: 50px;\n background-color: #716f6f;\n border-radius: 30px;\n display: inline-block;\n transition: background-color 0.3s ease;\n cursor: pointer;\n}\n.dot.active {\n background-color: black;\n}\n.dot:hover {\n background-color: #666;\n}";
|
|
22161
22163
|
n(css$1,{});
|
|
22162
22164
|
|
|
22163
22165
|
const Carousel = ({ items }) => {
|
|
@@ -22188,7 +22190,7 @@ const Carousel = ({ items }) => {
|
|
|
22188
22190
|
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) }))))));
|
|
22189
22191
|
};
|
|
22190
22192
|
|
|
22191
|
-
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-
|
|
22193
|
+
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 #000000;\n height: 0.125rem;\n margin: 0 1rem;\n}\n\n.stepperVerticalDivider {\n border-inline-start: 2px solid #000000;\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 #000000;\n color: #ffffff;\n background: #000000;\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: #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-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}";
|
|
22192
22194
|
n(css,{});
|
|
22193
22195
|
|
|
22194
22196
|
const Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex, displayRightContent, isPaymentPlanFlow, }) => {
|