ml-ui-lib 1.0.49 → 1.0.51

package/dist/components/Accordion/Accordion.css

@@ -1,6 +1,6 @@
 .accordion {
   width: 100%;
-  font-family: "Inter", sans-serif;
+  font-family: Poppins, sans-serif;
   color: #222;
 }
 

package/dist/components/Footer/Footer.js

@@ -19,7 +19,7 @@ export const Footer = ({ footerItems, logoSrc = '', logoAlt = 'M Lhuillier Logo'
                                             display: 'flex',
                                             flexDirection: 'column',
                                             alignItems: 'center'
-                                        }, children: [_jsx("a", { href: "/", children: _jsx("img", { src: logoSrc, alt: logoAlt, width: logoWidth, height: logoHeight, style: { display: 'block' } }) }), _jsx("span", { style: { marginTop: '-15px', }, children: "FINANCIAL SERVICES, INC." }), _jsx("span", { style: { marginTop: '0px', fontSize: '15px' }, children: "B. Benedicto St, North Reclamation, Cebu City" }), " ", _jsx("br", {})] }), _jsx("span", { children: "M Lhuillier Financial Services, Inc. is regulated by the Bangko Sentral ng Pilipinas (BSP).For inquiries or assistance, you may reach us via:" }), _jsx("span", { children: _jsxs("ul", { className: 'footer-contact', children: [_jsx("li", { children: "Phone: +63 947 999 0337" }), _jsxs("li", { children: ["Email: ", _jsx("a", { href: "mailto:customercare@mlhuillier.com", style: { color: 'rgb(44, 48, 122) !important' }, children: "customercare@mlhuillier.com" })] })] }) })] }), footerItems.map((group, i) => {
+                                        }, children: [_jsx("a", { href: "/", children: _jsx("img", { src: logoSrc, alt: logoAlt, width: logoWidth, height: logoHeight, style: { display: 'block' } }) }), _jsx("span", { style: { marginTop: '-15px', }, children: "FINANCIAL SERVICES, INC." }), _jsx("span", { style: { marginTop: '0px', fontSize: '15px' }, children: "B. Benedicto St., North Reclamation, Cebu City" }), " ", _jsx("br", {})] }), _jsx("span", { children: "M Lhuillier Financial Services, Inc. is regulated by the Bangko Sentral ng Pilipinas (BSP). For inquiries or assistance, you may reach us via:" }), _jsx("span", { children: _jsxs("ul", { className: 'footer-contact', children: [_jsx("li", { children: "Phone: +63 947 999 0337" }), _jsxs("li", { children: ["Email: ", _jsx("a", { href: "mailto:customercare@mlhuillier.com", style: { color: 'rgb(44, 48, 122) !important' }, children: "customercare@mlhuillier.com" })] })] }) })] }), footerItems.map((group, i) => {
                                 // Format the display name
                                 const displayName = group.name
                                     .split('-')

package/dist/components/Modal/Modal.css

@@ -34,7 +34,7 @@
   background: transparent;
   border: none;
   font-size: 26px;
-  color: #666;
+  color: #555;
   cursor: pointer;
   line-height: 1;
   transition: color 0.2s ease, transform 0.15s ease;
@@ -74,8 +74,7 @@
 }
 
 .modal-title {
-  font-size: 20px;
-  font-weight: 600;
+  margin: 0px;
 }
 
 /* Animations */

package/dist/components/Modal/Modal.js

@@ -15,5 +15,5 @@ export const Modal = ({ open, onClose, title, children, zIndex = 1000, variant =
                 zIndex: zIndex + 1,
                 width: `${width}%`,
                 maxWidth: "95vw",
-            }, children: [_jsx("button", { className: "modal-close", onClick: onClose, "aria-label": "Close modal", children: "\u00D7" }), title && (_jsx("div", { className: "modal-header", children: _jsx("h2", { className: "modal-title", children: title }) })), _jsx("div", { className: "modal-content", children: children })] }) }));
+            }, children: [title && (_jsxs("div", { className: "modal-header", children: [_jsx("h3", { className: "modal-title", children: title }), _jsx("button", { className: "modal-close", onClick: onClose, "aria-label": "Close modal", children: "\u00D7" })] })), _jsx("div", { className: "modal-content", children: children })] }) }));
 };

package/dist/components/SlidingPanel/SlidingPanel.css

@@ -118,11 +118,11 @@
 /* Header + body */
 .spb-header {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    justify-content: end;
-    padding: 12px 16px;
-    /* border-bottom: 1px solid #f1f1f1; */
-    min-height: 0px;
+    gap: 10px;
+    /* margin-bottom: 16px; */
+    padding: 0px 10px;
 }
 
 .spb-title {
@@ -151,19 +151,21 @@
 
 /* Desktop close button */
 .spb-close-btn {
-    background: none;
+    position: absolute;
+    top: 12px;
+    right: 14px;
+    background: transparent;
     border: none;
-    font-size: 25px;
-    line-height: 1;
+    font-size: 26px;
+    color: #555;
     cursor: pointer;
-    padding: 30px 0px 25px 10px;
-    border-radius: 6px;
-    color: #111827;
-    margin-right: 0px;
+    line-height: 1;
+    transition: color 0.2s ease, transform 0.15s ease;
 }
 
 .spb-close-btn:hover {
-    background: rgb(255 0 0 / 27%);
+    color: #000;
+    transform: scale(1.1);
 }
 
 /* Handle (mobile) */

package/dist/components/SlidingPanel/SlidingPanel.d.ts

@@ -8,6 +8,7 @@ export interface SlidingPanelProps {
     width?: string;
     closeOnOverlayClick?: boolean;
     position?: "bottom" | "top" | "left" | "right";
+    title?: string;
 }
 export declare const SlidingPanel: React.FC<SlidingPanelProps>;
 export default SlidingPanel;

package/dist/components/SlidingPanel/SlidingPanel.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import "./SlidingPanel.css";
-export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width = "100%", closeOnOverlayClick = true, position = "bottom", }) => {
+export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width = "100%", closeOnOverlayClick = true, position = "bottom", title = "" }) => {
     const [visible, setVisible] = useState(false);
     const [animateOpen, setAnimateOpen] = useState(false);
     const panelRef = useRef(null);
@@ -176,6 +176,6 @@ export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width
     }, [onClose, position]);
     if (!visible && !isOpen)
         return null;
-    return (_jsxs("div", { className: `spb-root ${animateOpen ? "spb-open" : "spb-close"}`, children: [_jsx("div", { className: "spb-backdrop", onClick: () => closeOnOverlayClick && onClose() }), _jsxs("div", { ref: panelRef, className: `spb-panel spb-panel--position-${position}`, style: { height, width }, role: "dialog", "aria-modal": "true", onClick: (e) => e.stopPropagation(), children: [_jsx("div", { ref: headerRef, className: "spb-header", children: _jsx("button", { className: "spb-close-btn", onClick: onClose, children: "\u00D7" }) }), _jsx("div", { className: "spb-body", children: children })] })] }));
+    return (_jsxs("div", { className: `spb-root ${animateOpen ? "spb-open" : "spb-close"}`, children: [_jsx("div", { className: "spb-backdrop", onClick: () => closeOnOverlayClick && onClose() }), _jsxs("div", { ref: panelRef, className: `spb-panel spb-panel--position-${position}`, style: { height, width }, role: "dialog", "aria-modal": "true", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { ref: headerRef, className: "spb-header", children: [_jsx("h3", { children: title }), _jsx("button", { className: "spb-close-btn", onClick: onClose, children: "\u00D7" })] }), _jsx("div", { className: "spb-body", children: children })] })] }));
 };
 export default SlidingPanel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ml-ui-lib",
-  "version": "1.0.49",
+  "version": "1.0.51",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",