dhre-component-lib 0.7.0 → 0.7.2

package/dist/components/Search/Search.d.ts

@@ -4,7 +4,7 @@ interface Suggestion {
     id: string;
     title: string;
     faqAnswer: string;
-    faqQuestion: string;
+    faqQuestion: any;
     fieldFaqCategory: string;
     isBookmarked: boolean;
     images: string[];

package/dist/index.d.ts

@@ -223,7 +223,7 @@ interface Suggestion {
     id: string;
     title: string;
     faqAnswer: string;
-    faqQuestion: string;
+    faqQuestion: any;
     fieldFaqCategory: string;
     isBookmarked: boolean;
     images: string[];

package/dist/index.esm.js

@@ -9422,7 +9422,7 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
                     React__default.createElement("div", { className: (timer > 0 || disableResend) ? "resendText" : "enabledResendText" }, resendText)))))));
 };
 
-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-right: 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: 4px 0 0 8px;\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: 91%;\n    top: 13rem;\n  }\n}\n\n.suggestion-item {\n  padding: 16px 8px 16px 8px;\n  cursor: pointer;\n  text-align: left;\n}\n\n.underline {\n  height: 1px;\n  background-color: #cecece;\n  margin-left: 24px;\n  margin-right: 24px;\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-left: 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}";
+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-right: 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: 4px 0 0 8px;\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: left;\n}\n\n.underline {\n  height: 1px;\n  background-color: #cecece;\n  margin-left: 24px;\n  margin-right: 24px;\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-left: 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}";
 n(css$d,{});
 
 const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSuggestion, suggestions, placeholder, className = {}, onSearchIconClick, onHandleClear, isWhiteBackgound = false }) => {
@@ -9506,7 +9506,7 @@ const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSug
             query && !disabled && (React__default.createElement("span", { onClick: handleClear, className: "cross-icon" }, crossIcon))),
         showSuggestions && (React__default.createElement("div", { className: "suggestions-dropdown" }, filteredSuggestions.length > 0 ? (filteredSuggestions.map((suggestion) => (React__default.createElement(React__default.Fragment, { key: suggestion.id },
             React__default.createElement("button", { onClick: () => handleSelectSuggestion(suggestion), className: "row" },
-                searchIcon,
+                React__default.createElement("div", null, searchIcon),
                 React__default.createElement(Typography, { variant: "B4", weight: "SEMI_BOLD", className: "suggestion-item" }, suggestion.title)),
             React__default.createElement("div", { className: "underline" }))))) : (React__default.createElement(Typography, { variant: "B4", weight: "SEMI_BOLD", className: "no-suggestions" }, "No results found"))))));
 };
@@ -9559,7 +9559,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: #a7a7a7;\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}\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  .tab {\n    font-size: 14px;\n  }\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;\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 }) => {
@@ -9718,7 +9718,7 @@ const ToggleSwitch = ({ initialState = false, onToggle }) => {
             React__default.createElement("div", { className: `slider ${isToggled ? 'slider-on' : 'slider-off'}` }))));
 };
 
-var css$5 = ".swipe-action-wrapper {\n  position: relative;\n  width: 100%;\n}\n.swipe-action-wrapper .swipe-actions {\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s ease-in-out;\n}\n.swipe-action-wrapper .swipe-actions.active {\n  opacity: 1;\n  pointer-events: all;\n}\n.swipe-action-wrapper .swipe-actions.active::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 150%;\n  height: 100%;\n  background: linear-gradient(90deg, rgba(255, 255, 255, 0.735) 0%, #ffffff 50%);\n  pointer-events: none;\n}\n.swipe-action-wrapper .swipe-actions button {\n  border: none;\n  padding: 10px;\n  cursor: pointer;\n  background: none;\n  transition: transform 0.2s, box-shadow 0.2s ease-in-out;\n  z-index: 2;\n}\n.swipe-action-wrapper .swipe-actions button:hover {\n  transform: translateY(-2px);\n}\n.swipe-action-wrapper:hover .swipe-actions {\n  opacity: 1;\n  pointer-events: all;\n}";
+var css$5 = ".swipe-action-wrapper {\n  position: relative;\n  width: 100%;\n}\n.swipe-action-wrapper .swipe-actions {\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s ease-in-out;\n}\n.swipe-action-wrapper .swipe-actions.active {\n  opacity: 1;\n  pointer-events: all;\n}\n.swipe-action-wrapper .swipe-actions.active::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 125%;\n  height: 100%;\n  background: linear-gradient(90deg, rgba(255, 255, 255, 0.735) 0%, #ffffff 50%);\n  pointer-events: none;\n}\n.swipe-action-wrapper .swipe-actions button {\n  border: none;\n  padding: 10px;\n  cursor: pointer;\n  background: none;\n  transition: transform 0.2s, box-shadow 0.2s ease-in-out;\n  z-index: 2;\n}\n.swipe-action-wrapper .swipe-actions button:hover {\n  transform: translateY(-2px);\n}\n.swipe-action-wrapper:hover .swipe-actions {\n  opacity: 1;\n  pointer-events: all;\n}";
 n(css$5,{});
 
 const HoverOptionsWrapper = ({ children, onPin, onRead, onDelete, pinIcon, readIcon, deleteIcon, swipeThreshold = 50 }) => {