dhre-component-lib 0.7.2 → 0.7.4

package/dist/components/InputTextField/InputTextField.d.ts

@@ -18,6 +18,7 @@ export interface CustomInputFieldProps {
     name?: string;
     min?: string;
     disabled?: boolean;
+    toolTip?: React.ReactNode;
 }
 declare const CustomInputField: React.FC<CustomInputFieldProps>;
 export default CustomInputField;

package/dist/index.d.ts

@@ -150,6 +150,7 @@ interface CustomInputFieldProps {
     name?: string;
     min?: string;
     disabled?: boolean;
+    toolTip?: React.ReactNode;
 }
 declare const CustomInputField: React.FC<CustomInputFieldProps>;
 

package/dist/index.esm.js

@@ -160,7 +160,7 @@ const Typography = ({ variant = 'B1', weight = 'MEDIUM', children, className, ..
 var css$h = ".inputLabel {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  left: 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(css$h,{});
 
-const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placeholder = "", onChange, className = "", inputClassName = "", labelClassName = "", error, errorClassName = "", maxLength = 0, minLength = 0, checkValidation, name, min, disabled = false, ...rest }) => {
+const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placeholder = "", onChange, className = "", inputClassName = "", labelClassName = "", error, errorClassName = "", maxLength = 0, minLength = 0, checkValidation, name, min, disabled = false, toolTip, ...rest }) => {
     const [showLabelOnBorder, setShowLabelOnBorder] = useState(false);
     const handleInputValues = (e) => {
         onChange?.(e);
@@ -180,6 +180,7 @@ const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placehol
         setShowLabelOnBorder(!!value);
     }, [value]);
     return (React__default.createElement("div", { className: `${className} ${'inputContainer'}` },
+        toolTip,
         ((placeholder && showLabelOnBorder) || (placeholder && value)) && React__default.createElement("label", { className: 'inputLabel' },
             placeholder.replace("*", ""),
             placeholder.includes("*") && React__default.createElement("label", { className: 'astreik' }, "*")),
@@ -9559,7 +9560,7 @@ const Accordion = ({ icon, title, description, children, border = false, upArrow
         isOpen && (React__default.createElement("div", { className: "accordion-content" }, children))));
 };
 
-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;\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-left: 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}";
+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-left: 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}";
 n(css$a,{});
 
 const Tabs = ({ tabs, onTabChange, selectedTabValue, dot }) => {
@@ -9695,7 +9696,7 @@ className = {}, }) => {
         variant === "permanent" && (React__default.createElement("div", { className: `${"sideDrawerContainer"} ${getPositionClass()} ${width} ${classNames}` }, component))));
 };
 
-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: 16px;\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: 50%;\n  position: absolute;\n  top: 1px;\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}";
+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: 16px;\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: 50%;\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}";
 n(css$6,{});
 
 const ToggleSwitch = ({ initialState = false, onToggle }) => {
@@ -9905,7 +9906,7 @@ const Carousel = ({ items }) => {
         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) }))))));
 };
 
-var css = ".stepperCircle {\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: 50%;\n  border: 2px solid #000000;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  aspect-ratio: 1;\n}\n\n.contentSecondary {\n  color: #686868;\n}\n\n.stepperSuccessBorder {\n  border: none;\n}\n\n.stepperNotReachedBorder {\n  border: 2px 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: 2px dashed #898989;\n  height: 0.125rem;\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.stepperDisabledDivider {\n  width: 88%;\n  border: 2px dashed #898989;\n  height: 0.125rem;\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.stepperPlainDivider {\n  width: 88%;\n  border: 2px 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: 1rem;\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: 50%;\n  border-left: 2px dashed #898989;\n  min-height: 1rem;\n  max-height: 100%;\n  margin-left: 0.7rem;\n  padding-left: 2rem;\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n.stepperVerticalPlainDivider {\n  width: 50%;\n  border-left: 2px solid #00b578;\n  min-height: 1rem;\n  max-height: 100%;\n  margin-left: 0.7rem;\n  padding-left: 2rem;\n  margin-top: 1rem;\n  margin-bottom: 1rem;\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: 2px solid #000000;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  aspect-ratio: 1;\n}\n\n.contentSecondary {\n  color: #686868;\n}\n\n.stepperSuccessBorder {\n  border: none;\n}\n\n.stepperNotReachedBorder {\n  border: 2px 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: 2px dashed #898989;\n  height: 0.125rem;\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.stepperDisabledDivider {\n  width: 100%;\n  margin: 0 0.75rem;\n  background-image: linear-gradient(to right, #686868 50%, rgba(255, 255, 255, 0) 0%);\n  background-size: 10px 0.5px;\n  background-repeat: repeat-x;\n  height: 1px;\n}\n\n.stepperPlainDivider {\n  width: 100%;\n  border-top: 1px solid #000000;\n  margin: 0 0.75rem;\n  height: 1px;\n}\n\n.stepperVerticalDivider {\n  border-left: 2px solid #000000;\n  min-height: 2rem;\n  max-height: 100%;\n  margin-left: 1rem;\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}";
 n(css,{});
 
 const common = {