ml-ui-lib 1.0.37 → 1.0.39

package/dist/components/Footer/Footer.css

@@ -2,6 +2,7 @@
   width: 100%;
   padding: 40px 20px 20px;
   background: #f0f0f0 !important;
+  border-top: solid 5px #898787;
 }
 
 .footer-container {
@@ -20,6 +21,11 @@
   align-items: center;
 }
 
+.footer-contact {
+  padding-left: 0.75rem;
+  margin: 10px 0px 0px -90px;
+}
+
 .footer-columns {
   display: grid;
   grid-template-columns: auto 15% 15% 15%;
@@ -118,7 +124,7 @@
   .footer-columns {
     grid-template-columns: repeat(5, 1fr);
     display: grid;
-    grid-template-columns: auto 12% 10% 10% 14%;
+    grid-template-columns: auto 12% 10% 12% 14%;
     gap: 2rem;
     flex: 1 1 auto;
     /* optional if inside flex parent */
@@ -229,7 +235,7 @@
   .app-items {
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
+    justify-content: flex-start;
     gap: 15px;
   }
 
@@ -382,7 +388,6 @@
   }
 }
 
-
 @media (min-width: 940px) and (max-width: 1090px) {
   .footer {
     padding: 50px 50px 10px 50px;
@@ -503,6 +508,17 @@
   }
 }
 
+@media (min-width: 940px) and (max-width: 990px) {
+  .footer-container {
+    width: 745px;
+  }
+
+  .emblems {
+    width: 220px;
+    margin-left: -41px;
+    margin-top: 1rem;
+  }
+}
 
 @media (max-width: 940px) {
   .footer {
@@ -510,7 +526,7 @@
   }
 
   .footer-container {
-    width: 730px;
+    width: 810px;
   }
 
   .footer-logo img {
@@ -602,7 +618,7 @@
     flex-wrap: wrap;
     align-items: center;
     max-width: 553px;
-    width: 490px;
+    /* width: 490px; */
     margin-left: -70px;
     margin-top: 1rem;
   }
@@ -677,7 +693,7 @@
 /* ========== Mobile (≤576px): 1 | 2–3 merged | 4 below ========== */
 @media (max-width: 576px) {
   .footer {
-    padding: 10px 20px;
+    padding: 40px 20px 10px 20px;
   }
 
   .footer-container {
@@ -688,13 +704,18 @@
     width: 350px;
   }
 
+  .footer-contact {
+    padding-left: 0.75rem;
+    margin: 10px 0px 0px -35px;
+  }
+
   .footer-logo img {
-    width: 300px;
-    height: 50px;
+    width: 305px;
+    height: 65px;
   }
 
   .footer-columns {
-    grid-template-columns: 50% 50%;
+    grid-template-columns: 47% 47%;
     grid-template-rows: auto auto auto;
   }
 
@@ -743,6 +764,10 @@
     grid-row: 4;
   }
 
+  .app-items img {
+    width: 170px;
+  }
+
   .socials-items {
     padding: 15px;
     gap: 40px;

package/dist/components/Footer/Footer.js

@@ -19,10 +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', }, 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", { style: {
-                                                paddingLeft: '0.75rem',
-                                                margin: '10px  0px 0px -90px'
-                                            }, 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('-')
@@ -34,6 +31,6 @@ export const Footer = ({ footerItems, logoSrc = '', logoAlt = 'M Lhuillier Logo'
                                                     { name: 'ig', link: 'https://www.instagram.com/mlhuillier_official/' },
                                                     { name: 'x', link: 'https://x.com/KaMLhuillier' },
                                                     { name: 'yt', link: 'https://www.youtube.com/user/MLhuillierInc' },
-                                                ].map((icon) => (_jsx("a", { href: icon.link, target: "_blank", rel: "noopener noreferrer", children: _jsx("img", { src: `/icons/${icon.name}.svg`, alt: icon.name }) }, icon.name))) })] }), _jsxs("div", { className: "apps", children: [_jsx("h4", { children: "Get the MCash App" }), _jsx("div", { className: "app-items", children: appLinksArr.map((item, index) => (_jsx("a", { href: item.link, children: _jsx("img", { src: item.url, alt: "App download" }) }, index))) })] })] }), _jsx("div", { className: 'emblems', children: empblemArr.map((item, index) => (_jsxs("div", { className: "emblem-item", children: [_jsx("img", { src: item.url, alt: item.name }), _jsx("span", { children: item.name })] }, index))) })] }) }), _jsx("div", { className: 'others' }), _jsxs("div", { className: "footer-bottom", children: [_jsxs("p", { children: ["Copyright \u00A9 ", new Date().getFullYear(), " M.Lhuillier Financial Services, Inc."] }), " ", _jsx("p", { children: "All rights reserved." })] })] }) }));
+                                                ].map((icon) => (_jsx("a", { href: icon.link, target: "_blank", rel: "noopener noreferrer", children: _jsx("img", { src: `/icons/${icon.name}.svg`, alt: icon.name }) }, icon.name))) })] }), _jsxs("div", { className: "apps", children: [_jsx("h4", { children: "Get the MCash App" }), _jsx("div", { className: "app-items", children: appLinksArr.map((item, index) => (_jsx("a", { href: item.link, children: _jsx("img", { src: item.url, alt: "App download" }) }, index))) })] })] }), _jsx("div", { className: 'emblems', children: empblemArr.map((item, index) => (_jsxs("div", { className: "emblem-item", children: [_jsx("img", { src: item.url, alt: item.name }), _jsx("span", { children: item.name })] }, index))) })] }) }), _jsx("div", { className: 'others' }), _jsxs("div", { className: "footer-bottom", children: [_jsxs("p", { children: ["Copyright \u00A9 ", new Date().getFullYear(), " M Lhuillier Financial Services, Inc."] }), " ", _jsx("p", { children: "All rights reserved." })] })] }) }));
 };
 export default Footer;

package/package.json

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