dhre-component-lib 0.8.21 → 0.8.22
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 +8 -8
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +8 -8
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -6,7 +6,7 @@ import ReactDOM__default, { createPortal } from 'react-dom';
|
|
|
6
6
|
|
|
7
7
|
var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=true===r.prepend?"prepend":"append",d=true===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
|
|
8
8
|
|
|
9
|
-
var css$o = ".button {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n.button.filled {\n background-color: var(--navbar-background);\n color: #ffffff;\n border: none;\n}\n.button.filled.disabled {\n background-color: #e1e1e1;\n cursor: not-allowed;\n color: #a7a7a7;\n}\n.button.filled.loading {\n background-color:
|
|
9
|
+
var css$o = ".button {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n.button.filled {\n background-color: var(--navbar-background);\n color: #ffffff;\n border: none;\n}\n.button.filled.disabled {\n background-color: #e1e1e1;\n cursor: not-allowed;\n color: #a7a7a7;\n}\n.button.filled.loading {\n background-color: var(--content-primary);\n cursor: progress;\n}\n.button.outlined {\n background-color: transparent;\n border: 2px solid var(content-primary);\n color: var(--content-primary);\n}\n.button.outlined.hovered {\n background-color: transparent;\n border: 2px solid #e1e1e1;\n color: #e1e1e1;\n}\n.button.outlined.disabled {\n border-color: #e1e1e1;\n color: #a7a7a7;\n cursor: not-allowed;\n}\n.button.outlined.loading {\n border-color: var(content-primary);\n color: var(content-primary);\n cursor: progress;\n}\n.button.text {\n background-color: transparent;\n color: var(content-primary);\n border: none;\n}\n.button.text.hovered {\n color: #e1e1e1;\n}\n.button.text.disabled {\n color: #a7a7a7;\n cursor: not-allowed;\n}\n.button.text.loading {\n color: var(content-primary);\n cursor: progress;\n}";
|
|
10
10
|
n(css$o,{});
|
|
11
11
|
|
|
12
12
|
var css$n = ".spinner {\n border-style: solid;\n border-radius: 50%;\n border-color: transparent;\n border-top-color: currentColor;\n animation: spin 1s linear infinite;\n}\n\n.spinner.primary {\n color: #007bff;\n}\n\n.spinner.secondary {\n color: #6c757d;\n}\n\n.spinner.error {\n color: #dc3545;\n}\n\n.spinner.success {\n color: #28a745;\n}\n\n.spinner.info {\n color: #17a2b8;\n}\n\n.spinner.warning {\n color: #ffc107;\n}\n\n.spinner.white {\n color: #ffffff;\n}\n\n.spinner.black {\n color: #000000;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}";
|
|
@@ -143,7 +143,7 @@ n(css$j,{});
|
|
|
143
143
|
|
|
144
144
|
const Typography = ({ variant = 'B1', weight = 'MEDIUM', children, className, ...props }) => {
|
|
145
145
|
const marginStyle = (navigator.userAgent.indexOf('Macintosh') !== -1 || navigator.userAgent.indexOf('Mac OS') !== -1) ? '' : 'typographyText';
|
|
146
|
-
const classNames =
|
|
146
|
+
const classNames = `color ${marginStyle} ${variant}_${weight} ${className ?? ''}`;
|
|
147
147
|
return React__default.createElement("div", { className: classNames, ...props }, children);
|
|
148
148
|
};
|
|
149
149
|
|
|
@@ -21854,7 +21854,7 @@ const MapComponent = ({ containerClassName = "map-container", zoom = 18, mapOpti
|
|
|
21854
21854
|
}
|
|
21855
21855
|
};
|
|
21856
21856
|
|
|
21857
|
-
var css$e = ".otpMainContainer {\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin: 10px 0;\n width: 343px;\n direction: ltr;\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:
|
|
21857
|
+
var css$e = ".otpMainContainer {\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin: 10px 0;\n width: 343px;\n direction: ltr;\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: var(--border-radius-small);\n color: var(--content-primary);\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 var(--content-primary) !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: var(--content-primary);\n font-weight: 700;\n font-size: 14px;\n}";
|
|
21858
21858
|
n(css$e,{});
|
|
21859
21859
|
|
|
21860
21860
|
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, }) => {
|
|
@@ -21947,7 +21947,7 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
|
|
|
21947
21947
|
: "enabledResendText" }, resendText)))))));
|
|
21948
21948
|
};
|
|
21949
21949
|
|
|
21950
|
-
var css$d = ".search-field-container {\n display: flex;\n align-items: center;\n padding: 8px;\n border-radius:
|
|
21950
|
+
var css$d = ".search-field-container {\n display: flex;\n align-items: center;\n padding: 8px;\n border-radius: var(--border-radius-card);\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: var(--border-radius-card);\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: var(--brand-font-family);\n font-weight: 400;\n line-height: 22.4px;\n}";
|
|
21951
21951
|
n(css$d,{});
|
|
21952
21952
|
|
|
21953
21953
|
const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSuggestion, suggestions, placeholder, className = "", suggestionClassName = "", onSearchIconClick, onHandleClear, isWhiteBackgound = false, shouldShowAll = false, }) => {
|
|
@@ -22070,7 +22070,7 @@ const Modal = ({ isOpen, onClose, title, children, crossIcon, className }) => {
|
|
|
22070
22070
|
React__default.createElement("button", { className: "modal-close", onClick: onClose }, crossIcon))));
|
|
22071
22071
|
};
|
|
22072
22072
|
|
|
22073
|
-
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:
|
|
22073
|
+
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: var(--border-radius-one-rem);\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}";
|
|
22074
22074
|
n(css$b,{});
|
|
22075
22075
|
|
|
22076
22076
|
const Accordion = ({ icon, title, description, children, border = false, upArrowIcon, downArrowIcon, openByDefault, borderBottom = false, className }) => {
|
|
@@ -22094,7 +22094,7 @@ const Accordion = ({ icon, title, description, children, border = false, upArrow
|
|
|
22094
22094
|
isOpen && (React__default.createElement("div", { className: "accordion-content" }, children))));
|
|
22095
22095
|
};
|
|
22096
22096
|
|
|
22097
|
-
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: var(--brand-font-family);\n font-weight: 400;\n}\n\n.tab.active {\n border-bottom: 2px solid
|
|
22097
|
+
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: var(--brand-font-family);\n font-weight: 400;\n}\n\n.tab.active {\n border-bottom: 2px solid var(--content-primary);\n color: var(--content-primary);\n}\n\n.tab.inActive {\n border-bottom: 1px solid #e1e1e1;\n}\n\n.tab:hover {\n color: var(--content-primary);\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}";
|
|
22098
22098
|
n(css$a,{});
|
|
22099
22099
|
|
|
22100
22100
|
const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, wrapperClassName }) => {
|
|
@@ -22171,7 +22171,7 @@ function Dropdown(props) {
|
|
|
22171
22171
|
(React__default.createElement(Typography, { variant: "B3", weight: "BOLD" }, val.name)) : (React__default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD" }, val.name))))))))));
|
|
22172
22172
|
}
|
|
22173
22173
|
|
|
22174
|
-
var css$8 = ".textArea {\n min-width: 70%;\n width: 100%;\n height: 8.875rem;\n border-radius: var(--border-radius-small);\n padding: 1rem;\n font-size: 1rem;\n font-family: var(--brand-font-family);\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:
|
|
22174
|
+
var css$8 = ".textArea {\n min-width: 70%;\n width: 100%;\n height: 8.875rem;\n border-radius: var(--border-radius-small);\n padding: 1rem;\n font-size: 1rem;\n font-family: var(--brand-font-family);\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 color: var(--content-primary);\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: var(--border-radius-small);\n padding: 1rem;\n font-size: 1rem;\n font-family: var(--brand-font-family);\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 color: var(--content-primary);\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 color: var(--content-primary);\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: var(--brand-font-family);\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}";
|
|
22175
22175
|
n(css$8,{});
|
|
22176
22176
|
|
|
22177
22177
|
function TextArea(props) {
|
|
@@ -22392,7 +22392,7 @@ const Toast = ({ icon, text, onActionText, onAction, onHide, type, className, du
|
|
|
22392
22392
|
" "));
|
|
22393
22393
|
};
|
|
22394
22394
|
|
|
22395
|
-
var css$2 = ".range {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n color: #a7a7a7;\n width: 100%;\n}\n\n.satisfiedText {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-top: 1rem;\n}\n\n.rangeBorder {\n width: 2px;\n height: 0.5rem;\n background: #a7a7a7;\n}\n\n.rangeSelectedBorder {\n width: 2px;\n height: 0.5rem;\n background: #000000;\n}\n\n.rangeMarginTop {\n margin-top: 1.4rem;\n}\n\n.rangeLabelColor {\n color:
|
|
22395
|
+
var css$2 = ".range {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n color: #a7a7a7;\n width: 100%;\n}\n\n.satisfiedText > div {\n color: var(--content-primary);\n}\n\n.satisfiedText {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-top: 1rem;\n color: var(--content-primary);\n}\n\n.rangeBorder {\n width: 2px;\n height: 0.5rem;\n background: #a7a7a7;\n}\n\n.rangeSelectedBorder {\n width: 2px;\n height: 0.5rem;\n background: #000000;\n}\n\n.rangeMarginTop {\n margin-top: 1.4rem;\n}\n\n.rangeLabelColor {\n color: var(--content-primary);\n}\n\n.rangeLabels {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 1.625rem;\n cursor: pointer;\n}\n\n.slidecontainer {\n width: 100%;\n}\n\n.slider {\n -webkit-appearance: none;\n width: 100%;\n height: 0.5rem;\n border-radius: 6.25rem;\n background: #cecece;\n outline: none;\n opacity: 0.7;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n cursor: pointer;\n}\n\n.slider:hover {\n opacity: 1;\n}\n\n.slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 1.625rem;\n height: 1.625rem;\n border-radius: 50%;\n background: #ffffff;\n cursor: pointer;\n box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2509803922);\n}\n\n.slider::-moz-range-thumb {\n width: 1.625rem;\n height: 1.625rem;\n border-radius: 50%;\n background: #000000;\n cursor: pointer;\n}";
|
|
22396
22396
|
n(css$2,{});
|
|
22397
22397
|
|
|
22398
22398
|
const RangeSlider = (props) => {
|