dhre-component-lib 0.8.22 → 0.8.23
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
|
@@ -106,7 +106,7 @@ const Breadcrumb = ({ items, breadcrumbClassName, itemClassName, separator = "/"
|
|
|
106
106
|
index < items.length - 1 && (React__default.createElement("span", { className: `${'separator'} ${separatorClassName}` }, separator)))))));
|
|
107
107
|
};
|
|
108
108
|
|
|
109
|
-
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
|
|
109
|
+
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 var(--surface-inverted);\n border-radius: var(--border-radius-x-small);\n background-color: var(--surface-static);\n cursor: pointer;\n position: relative;\n}\n.custom-checkbox input[type=checkbox]:checked {\n background-color: var(--surface-inverted);\n}\n.custom-checkbox input[type=checkbox] {\n /* Create the white tick mark */\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: var(--content-primary);\n}";
|
|
110
110
|
n(css$k,{});
|
|
111
111
|
|
|
112
112
|
const Checkbox = ({ label, checked = false, onChange, className = '', checkboxClassName = '', labelClassName = '', ...rest }) => {
|
|
@@ -147,7 +147,7 @@ const Typography = ({ variant = 'B1', weight = 'MEDIUM', children, className, ..
|
|
|
147
147
|
return React__default.createElement("div", { className: classNames, ...props }, children);
|
|
148
148
|
};
|
|
149
149
|
|
|
150
|
-
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 color: var(--navbar-background);\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:
|
|
150
|
+
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 color: var(--navbar-background);\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 color: var(--content-primary);\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: var(--content-secondary) !important;\n font-size: 16px;\n font-family: var(--brand-font-family);\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: var(--brand-font-family);\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}\n\n.emailField {\n direction: ltr;\n}\n\n.emailField:placeholder-shown {\n direction: inherit;\n}\n\n.textcolor {\n color: var(--content-primary);\n}";
|
|
151
151
|
n(css$i,{});
|
|
152
152
|
|
|
153
153
|
const common = {
|
|
@@ -12412,7 +12412,7 @@ const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placehol
|
|
|
12412
12412
|
((placeholder && showLabelOnBorder) || (placeholder && value)) && (React__default.createElement("label", { className: istoolTip ? "inputLabelTooltip" : "inputLabel" },
|
|
12413
12413
|
placeholder.replace("*", ""),
|
|
12414
12414
|
placeholder.includes("*") && React__default.createElement("label", { className: "astreik" }, "*"))),
|
|
12415
|
-
React__default.createElement("input", { type: type, value: value, name: name, placeholder: showLabelOnBorder ? "" : placeholder, onChange: handleInputValues, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue, className: `${inputClassName} ${type === INPUT_TYPES.EMAIL ? "emailField" : ""} ${error ? "inputError" : ""}`, maxLength: maxLength, minLength: minLength, min: min, disabled: disabled, ...rest }),
|
|
12415
|
+
React__default.createElement("input", { type: type, value: value, name: name, placeholder: showLabelOnBorder ? "" : placeholder, onChange: handleInputValues, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue, className: `${inputClassName} textcolor ${type === INPUT_TYPES.EMAIL ? "emailField" : ""} ${error ? "inputError" : ""}`, maxLength: maxLength, minLength: minLength, min: min, disabled: disabled, ...rest }),
|
|
12416
12416
|
error && !link && (React__default.createElement(Typography, { variant: "L1", weight: "SEMI_BOLD", className: errorClassName }, error)),
|
|
12417
12417
|
error && link && (React__default.createElement("div", { className: linkWrapper },
|
|
12418
12418
|
React__default.createElement(Typography, { variant: "L1", weight: "SEMI_BOLD", className: errorClassName },
|
|
@@ -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: 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
|
|
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 var(--content-primary);\n}\n.search-field-container.disabled-border {\n border: 1px solid var(--border-disabled-static);\n background-color: var(--surface-disabled);\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 color: var(--content-primary);\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, }) => {
|
|
@@ -22126,7 +22126,7 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, wrapperClassName }) =>
|
|
|
22126
22126
|
React__default.createElement("div", { className: "counts" }, tab?.count))))))));
|
|
22127
22127
|
};
|
|
22128
22128
|
|
|
22129
|
-
var css$9 = ".dropdown {\n width: 100%;\n 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}\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: 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}\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:
|
|
22129
|
+
var css$9 = ".dropdown {\n width: 100%;\n 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}\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 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: 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}\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: var(--content-primary);\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}";
|
|
22130
22130
|
n(css$9,{});
|
|
22131
22131
|
|
|
22132
22132
|
function Dropdown(props) {
|
|
@@ -22235,7 +22235,7 @@ className = {}, }) => {
|
|
|
22235
22235
|
variant === "permanent" && (React__default.createElement("div", { className: `${"sideDrawerContainer"} ${getPositionClass()} ${width} ${classNames}` }, component))));
|
|
22236
22236
|
};
|
|
22237
22237
|
|
|
22238
|
-
var css$6 = ".toggle-switch {\n width: 32.9px;\n height: 20px;\n display: inline-block;\n position: relative;\n cursor: pointer;\n outline: none;\n}\n\n.switch {\n width: 100%;\n height: 100%;\n background-color: #e1e1e1;\n border-radius:
|
|
22238
|
+
var css$6 = ".toggle-switch {\n width: 32.9px;\n height: 20px;\n display: inline-block;\n position: relative;\n cursor: pointer;\n outline: none;\n}\n\n.switch {\n width: 100%;\n height: 100%;\n background-color: #e1e1e1;\n border-radius: var(--border-radius-one-rem);\n position: relative;\n transition: background-color 0.3s ease-in-out;\n}\n.switch.on {\n background-color: #00b578;\n}\n.switch.off {\n background-color: #e1e1e1;\n}\n.switch .slider {\n width: 17.42px;\n height: 17.42px;\n background-color: #ffffff;\n border-radius: var(--border-radius-half);\n position: absolute;\n top: 1px;\n opacity: 1 !important;\n transition: transform 0.3s ease-in-out;\n}\n.switch .slider.slider-on {\n transform: translateX(15px);\n}\n.switch .slider.slider-off {\n transform: translateX(1px);\n}";
|
|
22239
22239
|
n(css$6,{});
|
|
22240
22240
|
|
|
22241
22241
|
const ToggleSwitch = ({ initialState = false, onToggle }) => {
|
|
@@ -22449,7 +22449,7 @@ const Carousel = ({ items }) => {
|
|
|
22449
22449
|
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) }))))));
|
|
22450
22450
|
};
|
|
22451
22451
|
|
|
22452
|
-
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
|
|
22452
|
+
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 #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}\n\n.contentPrimary {\n color: var(--content-primary);\n}";
|
|
22453
22453
|
n(css,{});
|
|
22454
22454
|
|
|
22455
22455
|
const Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex, displayRightContent, isPaymentPlanFlow, }) => {
|
|
@@ -22479,7 +22479,7 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
|
|
|
22479
22479
|
: "stepperDisabledDivider", style: { width: dividerWidth ?? "" } }, " "))),
|
|
22480
22480
|
React__default.createElement(Typography, { className: currentStep && currentStep < val.id
|
|
22481
22481
|
? "contentSecondary"
|
|
22482
|
-
: "", variant: variant, weight: "SEMI_BOLD" }, val?.name)))))))),
|
|
22482
|
+
: "contentPrimary", variant: variant, weight: "SEMI_BOLD" }, val?.name)))))))),
|
|
22483
22483
|
alignment === "vertical" && (React__default.createElement(React__default.Fragment, null,
|
|
22484
22484
|
type === "dynamic" && (React__default.createElement("div", { className: "stepperVerticalAlignment" }, stepperData?.map((val) => (React__default.createElement(React__default.Fragment, null,
|
|
22485
22485
|
React__default.createElement("div", { className: "stepperVerticalItem" },
|