ml-ui-lib 1.0.40 → 1.0.42

package/dist/components/Button/Button.css

@@ -317,7 +317,7 @@
 }
 
 .btn-action-search::after {
-  content: url('../../icons/discover.svg');
+  content: url('./icons/discover.svg');
   position: absolute;
   top: 50%;
   right: -25px;
@@ -339,7 +339,7 @@
 }
 
 .btn-action-download::after {
-  content: url('../../icons/download.svg');
+  content: url('./icons/download.svg');
   position: absolute;
   top: 50%;
   right: -25px;

package/dist/components/Button/icons/contact.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.0833 34.375H30.7291C37.9204 34.375 43.75 28.5454 43.75 21.3542C43.75 14.1629 37.9204 8.33333 30.7291 8.33333H19.2708C12.0795 8.33333 6.24996 14.1629 6.24996 21.3542C6.24996 29.5984 11.684 34.6393 17.629 37.7356C20.5817 39.2734 23.5558 40.2673 25.805 40.8765C26.2655 41.0011 26.6937 41.1093 27.0833 41.2023V34.375ZM29.1666 43.75C29.1666 43.75 28.379 43.6351 27.0833 43.3414C21.0793 41.9799 4.16663 36.776 4.16663 21.3542C4.16663 13.0124 10.929 6.25 19.2708 6.25H30.7291C39.0709 6.25 45.8333 13.0124 45.8333 21.3542C45.8333 29.6959 39.0709 36.4583 30.7291 36.4583H29.1666V43.75Z" fill="#FF0000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.4654 12.5521C25.0885 12.5082 23.6467 12.7654 22.4457 13.348C21.2439 13.931 20.1845 14.8957 19.8243 16.2991C19.6813 16.8563 20.017 17.424 20.5743 17.567C21.1315 17.71 21.6992 17.3743 21.8423 16.817C22.0005 16.2007 22.4943 15.6399 23.355 15.2224C24.2044 14.8104 25.3017 14.5995 26.3991 14.6344C27.5025 14.6695 28.5019 14.9491 29.1917 15.4081C29.4871 15.6047 29.76 15.8515 29.9503 16.1817C30.1474 16.5233 30.2083 16.8713 30.2083 17.1875C30.2083 17.6978 30.0605 18.0651 29.8412 18.3536C29.6108 18.6567 29.2653 18.9183 28.8169 19.1353C27.9034 19.5775 26.7601 19.7413 25.972 19.794C25.425 19.8306 25 20.285 25 20.8333V22.3958C25 22.9712 25.4663 23.4375 26.0416 23.4375C26.5743 23.4375 27.0149 23.0368 27.076 22.5208C27.1282 22.0799 27.4541 21.7205 27.8879 21.6256C28.4978 21.4923 29.1345 21.2962 29.7246 21.0105C31.0429 20.3725 32.2916 19.1902 32.2916 17.1875C32.2916 15.6107 31.4811 14.4293 30.346 13.6738C29.246 12.9417 27.8369 12.5957 26.4654 12.5521ZM21.5364 11.4736C23.0892 10.7203 24.8755 10.4171 26.5316 10.4698C28.171 10.5219 29.9898 10.9342 31.5002 11.9394C33.1069 13.0088 34.375 14.7923 34.375 17.1875C34.375 20.2737 32.3717 22.0439 30.6323 22.8858C30.0766 23.1547 29.5076 23.3551 28.9637 23.5053C28.516 24.6838 27.3771 25.5208 26.0416 25.5208C24.3157 25.5208 22.9166 24.1217 22.9166 22.3958V20.8333C22.9166 19.1885 24.1917 17.8251 25.8329 17.7153C26.5336 17.6685 27.358 17.527 27.9093 17.2601C27.9802 17.2258 28.0346 17.195 28.076 17.1692C28.0646 17.161 28.0518 17.1521 28.0375 17.1425C27.7569 16.9557 27.1665 16.7431 26.3329 16.7167C25.5154 16.6906 24.7625 16.8552 24.2642 17.0969C23.9861 17.2318 23.8808 17.3379 23.8488 17.3781C23.4017 19.024 21.7136 20.0103 20.0563 19.5849C18.3847 19.1558 17.3773 17.4527 17.8064 15.7811C18.3683 13.5923 19.9916 12.2229 21.5364 11.4736ZM26.0416 28.125C25.4663 28.125 25 28.5914 25 29.1667C25 29.742 25.4663 30.2083 26.0416 30.2083C26.6169 30.2083 27.0833 29.742 27.0833 29.1667C27.0833 28.5914 26.6169 28.125 26.0416 28.125ZM22.9166 29.1667C22.9166 27.4408 24.3157 26.0417 26.0416 26.0417C27.7675 26.0417 29.1666 27.4408 29.1666 29.1667C29.1666 30.8926 27.7675 32.2917 26.0416 32.2917C24.3157 32.2917 22.9166 30.8926 22.9166 29.1667Z" fill="#FF0000"/>
+</svg>

package/dist/components/Button/icons/discover.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="21" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.9073 32.9398L43.75 43.75M37.5 21.875C37.5 30.5044 30.5044 37.5 21.875 37.5C13.2455 37.5 6.25 30.5044 6.25 21.875C6.25 13.2455 13.2455 6.25 21.875 6.25C30.5044 6.25 37.5 13.2455 37.5 21.875Z" stroke="#FF0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/Button/icons/download.svg

@@ -0,0 +1,4 @@
+<svg width="23" height="25" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.25 31.25C6.25 37.1425 6.25 40.0887 8.08058 41.9194C9.91117 43.75 12.8574 43.75 18.75 43.75H31.25C37.1425 43.75 40.0887 43.75 41.9194 41.9194C43.75 40.0887 43.75 37.1425 43.75 31.25" stroke="#FF0000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25 6.25V33.3333M25 33.3333L33.3333 24.2187M25 33.3333L16.6666 24.2187" stroke="#FF0000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/Button/icons/faq.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25 4.16663C13.494 4.16663 4.16663 13.494 4.16663 25C4.16663 36.5058 13.494 45.8333 25 45.8333C36.5058 45.8333 45.8333 36.5058 45.8333 25C45.8333 13.494 36.5058 4.16663 25 4.16663ZM6.24998 25C6.24998 14.6447 14.6447 6.24998 25 6.24998C35.3554 6.24998 43.75 14.6447 43.75 25C43.75 35.3554 35.3554 43.75 25 43.75C14.6447 43.75 6.24998 35.3554 6.24998 25Z" fill="#FF0000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.7579 16.0881C24.381 16.0443 22.9392 16.3014 21.7382 16.884C20.5364 17.467 19.477 18.4318 19.1168 19.8351C18.9738 20.3923 19.3095 20.96 19.8668 21.103C20.424 21.246 20.9917 20.9103 21.1347 20.353C21.293 19.7368 21.7868 19.1759 22.6474 18.7584C23.4969 18.3464 24.5942 18.1355 25.6916 18.1704C26.7949 18.2055 27.7944 18.4851 28.4842 18.9441C28.7796 19.1407 29.0524 19.3875 29.2428 19.7177C29.4398 20.0594 29.5008 20.4073 29.5008 20.7235C29.5008 21.2338 29.353 21.6011 29.1337 21.8896C28.9033 22.1927 28.5578 22.4544 28.1094 22.6713C27.1959 23.1135 26.0525 23.2773 25.2645 23.33C24.7174 23.3666 24.2924 23.821 24.2924 24.3694V25.9319C24.2924 26.5072 24.7588 26.9735 25.3341 26.9735C25.8668 26.9735 26.3073 26.5728 26.3685 26.0569C26.4207 25.6159 26.7466 25.2565 27.1804 25.1616C27.7903 25.0283 28.427 24.8322 29.0171 24.5465C30.3354 23.9085 31.5841 22.7262 31.5841 20.7235C31.5841 19.1468 30.7736 17.9653 29.6385 17.2098C28.5385 16.4777 27.1294 16.1318 25.7579 16.0881ZM20.8289 15.0096C22.3817 14.2563 24.168 13.9531 25.8241 14.0058C27.4635 14.0579 29.2822 14.4702 30.7927 15.4754C32.3994 16.5448 33.6674 18.3283 33.6674 20.7235C33.6674 23.8097 31.6642 25.5799 29.9247 26.4219C29.3691 26.6907 28.8 26.8911 28.2562 27.0413C27.8085 28.2198 26.6696 29.0569 25.3341 29.0569C23.6082 29.0569 22.2091 27.6577 22.2091 25.9319V24.3694C22.2091 22.7245 23.4842 21.3611 25.1254 21.2513C25.8261 21.2045 26.6505 21.063 27.2018 20.7961C27.2726 20.7619 27.3271 20.731 27.3685 20.7052C27.3571 20.697 27.3443 20.6881 27.3299 20.6785C27.0494 20.4918 26.459 20.2792 25.6254 20.2527C24.8079 20.2267 24.0549 20.3912 23.5567 20.6329C23.2786 20.7678 23.1733 20.8739 23.1413 20.9142C22.6942 22.56 21.0061 23.5463 19.3488 23.1209C17.6771 22.6919 16.6697 20.9887 17.0989 19.3171C17.6608 17.1283 19.2841 15.7589 20.8289 15.0096ZM25.3341 31.661C24.7588 31.661 24.2924 32.1274 24.2924 32.7027C24.2924 33.278 24.7588 33.7444 25.3341 33.7444C25.9094 33.7444 26.3758 33.278 26.3758 32.7027C26.3758 32.1274 25.9094 31.661 25.3341 31.661ZM22.2091 32.7027C22.2091 30.9769 23.6082 29.5777 25.3341 29.5777C27.0599 29.5777 28.4591 30.9769 28.4591 32.7027C28.4591 34.4286 27.0599 35.8277 25.3341 35.8277C23.6082 35.8277 22.2091 34.4286 22.2091 32.7027Z" fill="#FF0000"/>
+</svg>

package/dist/components/Navbar/Navbar.css

@@ -48,16 +48,70 @@
 /* Desktop dropdown bubble */
 .navbar-dropdown-content {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     position: relative;
-    top: 15px;
-    padding: 12px 45px 12px 20px;
+    top: 30px;
+    padding: 20px;
     background: #fff;
     border-radius: 22px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    justify-content: space-between;
+}
+
+.navbar-services {
+    display: flex;
+    flex-direction: row;
+    gap: 30px;
+}
+
+.navbar-services-cols {
+    display: flex;
+    flex-direction: column;
+}
+
+.navbar-services a{
+    border-radius: 15px;
+    padding: 10px 30px;
+}
+
+.navbar-services a:hover {
+    background: linear-gradient(90deg, #b70404, #fe2424, red) 0 0 / 200% 100% !important;
+    color: #ffffff !important;
 }
 
-.navbar-dropdown-content::before {
+.navbar-services-container {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    background-color: #f5f5f5;
+    box-shadow: 0 1px 10px #00000017;
+    border-radius: 20px;
+    padding: 15px;
+    gap: 0px 40px;
+    align-items: center;
+    width: 350px;
+}
+
+.navbar-services-item {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #fa0000;
+    width: 140px;
+    height: 45px;
+    border-radius: 15px;
+    color: #ffffff;
+}
+
+.navbar-services-item:hover {
+    background: linear-gradient(90deg, #b70404, #fe2424, red) 0 0 / 200% 100%;
+}
+
+/* .navbar-dropdown-content::before {
     content: "";
     position: absolute;
     top: -8px;
@@ -67,11 +121,11 @@
     background: #fff;
     transform: rotate(45deg);
     box-shadow: -2px -3px 4px #0000000d
-}
+} */
 
 .navbar-dropdown {
     position: absolute;
-    top: 20px;
+    top: 45px;
     left: -35px;
     display: none;
     z-index: 10;
@@ -86,7 +140,9 @@
 }
 
 .navbar-dropdown-link:hover {
-    background: #f2f2f2;
+    background: #ff0000;
+    color: #ffffff;
+    border-radius: 15px;
 }
 
 /* Desktop hover */
@@ -95,6 +151,11 @@
     display: flex;
     /* keep it rendered */
     flex-direction: column;
+
+    position: fixed;
+    left: 0px;
+    width: 100%;
+
     opacity: 0;
     transform: translateY(-10px);
     pointer-events: none;

package/dist/components/Navbar/Navbar.d.ts

@@ -11,9 +11,16 @@ export interface NavbarItem {
     target?: '_blank' | '_self';
     subLinks?: NavbarSubItem[];
 }
+export interface NavbarProducts {
+    name: string;
+    link: string;
+    target?: '_blank' | '_self';
+    icons?: string;
+}
 export interface NavbarProps {
     siteUrl?: string;
     items: NavbarItem[];
+    products?: NavbarProducts[];
     logoSrc?: string;
     logoAlt?: string;
     logoWidth?: number | string;

package/dist/components/Navbar/Navbar.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect } from 'react';
 import './Navbar.css';
 import { SlidingPanel } from '../SlidingPanel/SlidingPanel';
-export const Navbar = ({ siteUrl, items, logoSrc = '', logoAlt = 'Logo', logoWidth = 220, logoHeight = 40, className = '', login = false, logedinData = null, loginContent, otherContent, onClose, }) => {
+export const Navbar = ({ siteUrl, items, products, logoSrc = '', logoAlt = 'Logo', logoWidth = 220, logoHeight = 40, className = '', login = false, logedinData = null, loginContent, otherContent, onClose, }) => {
     const [menuOpen, setMenuOpen] = useState(false);
     const [showLogin, setShowLogin] = useState(false);
     const [isClosing, setIsClosing] = useState(false);
@@ -91,10 +91,12 @@ export const Navbar = ({ siteUrl, items, logoSrc = '', logoAlt = 'Logo', logoWid
                                                                 else {
                                                                     setMenuOpen(false);
                                                                 }
-                                                            }, children: item.name }), hasSubLinks && (_jsx("div", { className: "navbar-dropdown", children: _jsx("div", { className: "navbar-dropdown-content", children: item.subLinks.map(sub => (_jsx("a", { href: sub.link, target: sub.target || '_self', className: "navbar-dropdown-link", onClick: () => {
-                                                                        setMenuOpen(false);
-                                                                        setOpenDropdown(null);
-                                                                    }, children: sub.name }, sub.name))) }) }))] }, item.name));
+                                                            }, children: item.name }), hasSubLinks && (_jsx("div", { className: "navbar-dropdown", children: _jsxs("div", { className: "navbar-dropdown-content", children: [_jsx("div", { className: "navbar-services", children: Array.from({ length: Math.ceil(item.subLinks.length / 5) }, (_, i) => item.subLinks.slice(i * 5, i * 5 + 5)).map((column, index) => (_jsx("div", { className: 'navbar-services-cols', children: column.map(sub => (_jsx("a", { href: sub.link, target: sub.target || '_self', className: "navbar-dropdown-link", onClick: () => {
+                                                                                    setMenuOpen(false);
+                                                                                    setOpenDropdown(null);
+                                                                                }, children: sub.name }, sub.name))) }, index))) }), _jsx("div", { className: "navbar-services", children: _jsx("div", { className: 'navbar-services-container', children: products.map(product => (_jsx("div", { className: 'navbar-services-item', children: _jsx("span", { style: {
+                                                                                        textAlign: 'center'
+                                                                                    }, children: product.name }) }))) }) })] }) }))] }, item.name));
                                             }) }), isMobile && login && !logedinData && (_jsx("div", { className: 'navbar-item', style: { background: '#ffffff' }, children: _jsx("button", { className: "mobile-login-btn", onClick: toggleLogin, children: "Login" }) }))] }), _jsxs("div", { className: "navbar-right", children: [_jsxs("button", { className: `burger ${menuOpen ? 'active' : ''}`, onClick: toggleMenu, children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), !isMobile && login && !logedinData && (_jsx("span", { className: "login-btn", onClick: toggleLogin, children: "Login" }))] })] })] }) }), login && !logedinData && (_jsx(_Fragment, { children: !isMobile ? (showLogin && (_jsxs(_Fragment, { children: [_jsx("div", { className: "overlay-side-content", children: otherContent }), _jsx("div", { className: "navbar-login-panel", children: _jsxs(SlidingPanel, { isOpen: showLogin && !isClosing, width: "400px", height: "100%", position: "right", closeOnOverlayClick: false, onClose: handleInternalClose, children: [_jsx("div", { className: "navbar-panel-header" }), _jsx("div", { className: "navbar-panel-content", children: loginContent })] }) })] }))) : (_jsx("div", { className: "navbar-login-panel", children: _jsxs(SlidingPanel, { isOpen: showLogin, height: "70%", position: "bottom", onClose: handleInternalClose, children: [_jsx("div", { className: "navbar-panel-header" }), _jsx("div", { className: "navbar-panel-content", children: loginContent })] }) })) }))] }));
 };
 export default Navbar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ml-ui-lib",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -11,7 +11,7 @@
   "scripts": {
     "clean": "rimraf dist",
     "build": "npm run clean && tsc && npm run copy-assets",
-    "copy-assets": "copyfiles -u 1 \"src/**/*.css\" \"src/**/*.png\" dist/",
+    "copy-assets": "copyfiles -u 1 \"src/**/*.css\" \"src/**/*.png\" \"src/**/*.svg\" dist/",
     "watch": "tsc --watch",
     "dev": "npm run build -- --watch"
   },