dhre-component-lib 0.8.5 → 0.8.7

package/dist/index.js

@@ -21838,7 +21838,7 @@ const Accordion = ({ icon, title, description, children, border = false, upArrow
 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 }) => {
+const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, wrapperClassName }) => {
     const [selectedTab, setSelectedTab] = React$1.useState();
     const haveDots = ["identification", "", ""];
     React$1.useEffect(() => {
@@ -21858,7 +21858,7 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot }) => {
         setSelectedTab(tab);
         onTabChange(tab);
     };
-    return (React__namespace.default.createElement("div", { className: "main" },
+    return (React__namespace.default.createElement("div", { className: `main ${wrapperClassName}`.trim() },
         React__namespace.default.createElement("div", { className: "tabs" }, tabs?.map((tab) => (React__namespace.default.createElement(React__namespace.default.Fragment, null,
             React__namespace.default.createElement("button", { key: tab?.value, className: `tab ${selectedTab?.value === tab?.value ? "active" : "inActive"}`, onClick: () => handleTabClick(tab) },
                 tab?.name,
@@ -21911,10 +21911,10 @@ var css$8 = ".textArea {\n  min-width: 70%;\n  width: 100%;\n  height: 8.875rem;
 n(css$8,{});
 
 function TextArea(props) {
-    const { value, onChange, requiredLimit, placeholder, charText, property, isShortTextBox } = props;
+    const { shouldCheckRegex, value, onChange, requiredLimit, placeholder, charText, property, isShortTextBox } = props;
     const [showLabelOnBorder, setShowLabelOnBorder] = React$1.useState(false);
     const checkSpecialChar = (e) => {
-        if (!/[0-9a-zA-Z ]/.test(e.key)) {
+        if (shouldCheckRegex && !/[0-9a-zA-Z ]/.test(e.key)) {
             e.preventDefault();
         }
         console.log('textAraea');