@lanaco/lnc-react-ui 4.0.203 → 4.0.204

package/dist/PartnerCardsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),a=require("react"),b=require("./Icon.cjs"),j=require("./Button.cjs"),q=require("./Popover.cjs"),N=require("./PopoverTrigger.cjs"),z=require("./PopoverContent.cjs"),P=require("./Drawer.cjs"),C=require("./useDetectMobile-zkbzoOGV.cjs"),_=require("./emotion-styled.browser.esm-BtEseadx.cjs"),k=require("./consts-goSZX3xP.cjs"),p=require("./utils-RnrgDDZP.cjs"),$=_.styled.div`
+"use strict";const e=require("react/jsx-runtime"),c=require("react"),u=require("./Icon.cjs"),f=require("./Popover.cjs"),v=require("./PopoverTrigger.cjs"),y=require("./PopoverContent.cjs"),j=require("./useDetectMobile-zkbzoOGV.cjs"),d=require("./emotion-styled.browser.esm-BtEseadx.cjs"),w=require("./consts-goSZX3xP.cjs"),l=require("./utils-RnrgDDZP.cjs"),b=d.styled.div`
   display: flex;
   flex-direction: column;
   gap: 3rem;
@@ -6,46 +6,6 @@
   padding: 2rem;
   background: #f4f6fb;
 
-  & .section__drawer {
-    background: white !important;
-    opacity: 1;
-    padding-top: 0.5rem;
-    padding-bottom: 2.125rem;
-    border-top-left-radius: 1rem;
-    border-top-right-radius: 1rem;
-    display: flex;
-    flex-direction: column;
-
-    & .drawer__image {
-      max-height: 4rem;
-    }
-
-    & .drawer__content {
-      display: flex;
-      flex-direction: column;
-      gap: 1.25rem;
-    }
-
-    & .drawer__description {
-      color: var(--gray-900, #0c1520);
-      font-weight: 400;
-      font-size: 0.875rem;
-      leading-trim: none;
-      line-height: 1.25rem;
-      letter-spacing: 0.0156rem;
-      text-align: center;
-    }
-
-    & .drawer__action {
-      font-weight: 500;
-      font-style: medium;
-      font-size: 0.875rem;
-      leading-trim: none;
-      line-height: 1.25rem;
-      letter-spacing: -0.0056rem;
-    }
-  }
-
   & .section__text {
     display: flex;
     flex-direction: column;
@@ -66,7 +26,7 @@
         letter-spacing: 0%;
         text-align: center;
         color: var(--gray-900, #0c1520);
-        ${p.truncateText()}
+        ${l.truncateText()}
       }
 
       &::after {
@@ -92,7 +52,7 @@
       letter-spacing: 0.0156rem;
       text-align: center;
       color: var(--gray-700, #424b56);
-      ${p.truncateTextInRows(2)}
+      ${l.truncateTextInRows(2)}
     }
   }
 
@@ -129,7 +89,7 @@
     }
   }
 
-  @media (max-width: ${k.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${w.MOBILE_SIZE_PX+"px"}) {
     padding: 1rem;
 
     & .section__text {
@@ -141,7 +101,7 @@
 
     & .section__items {
       display: grid;
-      grid-template-columns: ${()=>"repeat(2, minmax(0, auto))"};
+      grid-template-columns: ${()=>"repeat(2, minmax(0, 1fr))"};
       justify-items: center;
       gap: 1rem;
 
@@ -155,7 +115,7 @@
       }
     }
   }
-`,I=_.styled.div`
+`,q=d.styled.div`
   width: 100%;
   height: 100%;
   max-width: 16.25rem;
@@ -171,4 +131,4 @@
   line-height: 1rem;
   letter-spacing: 0.025rem;
   color: var(--gray-900, #0c1520);
-`,D=a.forwardRef(({icon:s,title:c,description:l,items:t,learnMoreText:u="Learn more",onSelectCard:d=()=>{}},M)=>{const g=C.useDetectMobile(),o=a.useRef(null),[x,m]=a.useState(null),[i,h]=a.useState(null),f=r=>{m(r)},w=()=>{m(null)},v=r=>{var n;h(r),(n=o==null?void 0:o.current)==null||n.open()},y=()=>{h(null)};return e.jsxs($,{children:[e.jsxs("div",{className:"section__text",children:[s&&e.jsx(b,{icon:s,sizeInUnits:"2.5rem",color:"warning",className:"section__icon"}),c&&e.jsx("div",{className:"section__title",children:e.jsx("span",{children:c})}),l&&e.jsx("div",{className:"section__description",children:l})]}),t&&(t==null?void 0:t.length)>0&&e.jsx("div",{className:"section__items",children:g?t==null?void 0:t.map((r,n)=>e.jsx("div",{className:"section__item",onClick:()=>v(r),children:e.jsx("img",{src:r==null?void 0:r.imageUrl,alt:`Partner card image ${n+1}`,loading:"lazy"})},`partner-cards-section-item__${n+1}`)):t==null?void 0:t.map((r,n)=>e.jsxs(q,{open:n===x,placement:"top-end",offsetValue:4,children:[e.jsx(N,{className:"section__trigger",children:e.jsx("div",{className:"section__item",onMouseEnter:()=>f(n),onMouseLeave:w,onClick:()=>d(r),children:e.jsx("img",{src:r==null?void 0:r.imageUrl,alt:`Partner card image ${n+1}`,loading:"lazy"})})}),e.jsx(z,{style:{padding:0,borderRadius:12},children:e.jsx(I,{children:r==null?void 0:r.description})})]},`partner-cards-section-item__${n+1}`))}),g&&e.jsxs(P,{ref:o,direction:"bottom",className:"section__drawer",onClose:y,children:[e.jsx("img",{src:i==null?void 0:i.imageUrl,alt:"Drawer image",className:"drawer__image",loading:"lazy"}),e.jsxs("div",{className:"drawer__content",children:[e.jsx("div",{className:"drawer__description",children:i==null?void 0:i.description}),e.jsx(j,{text:u,btnType:"outline",borderRadius:"curved",trailingIcon:"fa-light fa-up-right-from-square fa-xs",color:"neutral",className:"drawer__action",onClick:()=>d(i)})]})]})]})});module.exports=D;
+`,P=c.forwardRef(({icon:i,title:o,description:s,items:n,onSelectCard:g=()=>{},onTapCard:h=()=>{}})=>{const p=j.useDetectMobile(),[m,a]=c.useState(null),x=r=>{a(r)},_=()=>{a(null)};return e.jsxs(b,{children:[e.jsxs("div",{className:"section__text",children:[i&&e.jsx(u,{icon:i,sizeInUnits:"2.5rem",color:"warning",className:"section__icon"}),o&&e.jsx("div",{className:"section__title",children:e.jsx("span",{children:o})}),s&&e.jsx("div",{className:"section__description",children:s})]}),n&&(n==null?void 0:n.length)>0&&e.jsx("div",{className:"section__items",children:p?n==null?void 0:n.map((r,t)=>e.jsx("div",{className:"section__item",onClick:()=>h(r),children:e.jsx("img",{src:r==null?void 0:r.imageUrl,alt:`Partner card image ${t+1}`,loading:"lazy"})},`partner-cards-section-item__${t+1}`)):n==null?void 0:n.map((r,t)=>e.jsxs(f,{open:t===m,placement:"top-end",offsetValue:4,children:[e.jsx(v,{className:"section__trigger",children:e.jsx("div",{className:"section__item",onMouseEnter:()=>x(t),onMouseLeave:_,onClick:()=>g(r),children:e.jsx("img",{src:r==null?void 0:r.imageUrl,alt:`Partner card image ${t+1}`,loading:"lazy"})})}),e.jsx(y,{style:{padding:0,borderRadius:12},children:e.jsx(q,{children:r==null?void 0:r.description})})]},`partner-cards-section-item__${t+1}`))})]})});module.exports=P;

package/dist/PartnerCardsSection.js

@@ -1,16 +1,14 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { forwardRef as b, useRef as N, useState as h } from "react";
-import z from "./Icon.js";
-import P from "./Button.js";
-import C from "./Popover.js";
-import k from "./PopoverTrigger.js";
-import $ from "./PopoverContent.js";
-import I from "./Drawer.js";
-import { u as j } from "./useDetectMobile-Bkvj0VMa.js";
-import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M } from "./consts-BuFChS64.js";
-import { t as D, m as O } from "./utils-DtEfC-TX.js";
-const R = f.div`
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { forwardRef as _, useState as x } from "react";
+import u from "./Icon.js";
+import v from "./Popover.js";
+import y from "./PopoverTrigger.js";
+import w from "./PopoverContent.js";
+import { u as b } from "./useDetectMobile-Bkvj0VMa.js";
+import { s as l } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as P } from "./consts-BuFChS64.js";
+import { t as N, m as $ } from "./utils-DtEfC-TX.js";
+const z = l.div`
   display: flex;
   flex-direction: column;
   gap: 3rem;
@@ -18,46 +16,6 @@ const R = f.div`
   padding: 2rem;
   background: #f4f6fb;
 
-  & .section__drawer {
-    background: white !important;
-    opacity: 1;
-    padding-top: 0.5rem;
-    padding-bottom: 2.125rem;
-    border-top-left-radius: 1rem;
-    border-top-right-radius: 1rem;
-    display: flex;
-    flex-direction: column;
-
-    & .drawer__image {
-      max-height: 4rem;
-    }
-
-    & .drawer__content {
-      display: flex;
-      flex-direction: column;
-      gap: 1.25rem;
-    }
-
-    & .drawer__description {
-      color: var(--gray-900, #0c1520);
-      font-weight: 400;
-      font-size: 0.875rem;
-      leading-trim: none;
-      line-height: 1.25rem;
-      letter-spacing: 0.0156rem;
-      text-align: center;
-    }
-
-    & .drawer__action {
-      font-weight: 500;
-      font-style: medium;
-      font-size: 0.875rem;
-      leading-trim: none;
-      line-height: 1.25rem;
-      letter-spacing: -0.0056rem;
-    }
-  }
-
   & .section__text {
     display: flex;
     flex-direction: column;
@@ -78,7 +36,7 @@ const R = f.div`
         letter-spacing: 0%;
         text-align: center;
         color: var(--gray-900, #0c1520);
-        ${D()}
+        ${N()}
       }
 
       &::after {
@@ -104,7 +62,7 @@ const R = f.div`
       letter-spacing: 0.0156rem;
       text-align: center;
       color: var(--gray-700, #424b56);
-      ${O(2)}
+      ${$(2)}
     }
   }
 
@@ -141,7 +99,7 @@ const R = f.div`
     }
   }
 
-  @media (max-width: ${M + "px"}) {
+  @media (max-width: ${P + "px"}) {
     padding: 1rem;
 
     & .section__text {
@@ -153,7 +111,7 @@ const R = f.div`
 
     & .section__items {
       display: grid;
-      grid-template-columns: ${() => "repeat(2, minmax(0, auto))"};
+      grid-template-columns: ${() => "repeat(2, minmax(0, 1fr))"};
       justify-items: center;
       gap: 1rem;
 
@@ -167,7 +125,7 @@ const R = f.div`
       }
     }
   }
-`, T = f.div`
+`, C = l.div`
   width: 100%;
   height: 100%;
   max-width: 16.25rem;
@@ -183,45 +141,41 @@ const R = f.div`
   line-height: 1rem;
   letter-spacing: 0.025rem;
   color: var(--gray-900, #0c1520);
-`, J = b(
+`, L = _(
   ({
-    icon: c,
-    title: l,
-    description: s,
+    icon: i,
+    title: a,
+    description: c,
     items: t,
-    learnMoreText: _ = "Learn more",
     onSelectCard: d = () => {
+    },
+    onTapCard: m = () => {
     }
-  }, U) => {
-    const m = j(), a = N(null), [u, g] = h(null), [o, p] = h(null), x = (e) => {
-      g(e);
-    }, w = () => {
-      g(null);
-    }, v = (e) => {
-      var n;
-      p(e), (n = a == null ? void 0 : a.current) == null || n.open();
-    }, y = () => {
-      p(null);
+  }) => {
+    const g = b(), [p, s] = x(null), h = (e) => {
+      s(e);
+    }, f = () => {
+      s(null);
     };
-    return /* @__PURE__ */ i(R, { children: [
-      /* @__PURE__ */ i("div", { className: "section__text", children: [
-        c && /* @__PURE__ */ r(
-          z,
+    return /* @__PURE__ */ o(z, { children: [
+      /* @__PURE__ */ o("div", { className: "section__text", children: [
+        i && /* @__PURE__ */ r(
+          u,
           {
-            icon: c,
+            icon: i,
             sizeInUnits: "2.5rem",
             color: "warning",
             className: "section__icon"
           }
         ),
-        l && /* @__PURE__ */ r("div", { className: "section__title", children: /* @__PURE__ */ r("span", { children: l }) }),
-        s && /* @__PURE__ */ r("div", { className: "section__description", children: s })
+        a && /* @__PURE__ */ r("div", { className: "section__title", children: /* @__PURE__ */ r("span", { children: a }) }),
+        c && /* @__PURE__ */ r("div", { className: "section__description", children: c })
       ] }),
-      t && (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ r("div", { className: "section__items", children: m ? t == null ? void 0 : t.map((e, n) => /* @__PURE__ */ r(
+      t && (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ r("div", { className: "section__items", children: g ? t == null ? void 0 : t.map((e, n) => /* @__PURE__ */ r(
         "div",
         {
           className: "section__item",
-          onClick: () => v(e),
+          onClick: () => m(e),
           children: /* @__PURE__ */ r(
             "img",
             {
@@ -232,19 +186,19 @@ const R = f.div`
           )
         },
         `partner-cards-section-item__${n + 1}`
-      )) : t == null ? void 0 : t.map((e, n) => /* @__PURE__ */ i(
-        C,
+      )) : t == null ? void 0 : t.map((e, n) => /* @__PURE__ */ o(
+        v,
         {
-          open: n === u,
+          open: n === p,
           placement: "top-end",
           offsetValue: 4,
           children: [
-            /* @__PURE__ */ r(k, { className: "section__trigger", children: /* @__PURE__ */ r(
+            /* @__PURE__ */ r(y, { className: "section__trigger", children: /* @__PURE__ */ r(
               "div",
               {
                 className: "section__item",
-                onMouseEnter: () => x(n),
-                onMouseLeave: w,
+                onMouseEnter: () => h(n),
+                onMouseLeave: f,
                 onClick: () => d(e),
                 children: /* @__PURE__ */ r(
                   "img",
@@ -256,49 +210,14 @@ const R = f.div`
                 )
               }
             ) }),
-            /* @__PURE__ */ r($, { style: { padding: 0, borderRadius: 12 }, children: /* @__PURE__ */ r(T, { children: e == null ? void 0 : e.description }) })
+            /* @__PURE__ */ r(w, { style: { padding: 0, borderRadius: 12 }, children: /* @__PURE__ */ r(C, { children: e == null ? void 0 : e.description }) })
           ]
         },
         `partner-cards-section-item__${n + 1}`
-      )) }),
-      m && /* @__PURE__ */ i(
-        I,
-        {
-          ref: a,
-          direction: "bottom",
-          className: "section__drawer",
-          onClose: y,
-          children: [
-            /* @__PURE__ */ r(
-              "img",
-              {
-                src: o == null ? void 0 : o.imageUrl,
-                alt: "Drawer image",
-                className: "drawer__image",
-                loading: "lazy"
-              }
-            ),
-            /* @__PURE__ */ i("div", { className: "drawer__content", children: [
-              /* @__PURE__ */ r("div", { className: "drawer__description", children: o == null ? void 0 : o.description }),
-              /* @__PURE__ */ r(
-                P,
-                {
-                  text: _,
-                  btnType: "outline",
-                  borderRadius: "curved",
-                  trailingIcon: "fa-light fa-up-right-from-square fa-xs",
-                  color: "neutral",
-                  className: "drawer__action",
-                  onClick: () => d(o)
-                }
-              )
-            ] })
-          ]
-        }
-      )
+      )) })
     ] });
   }
 );
 export {
-  J as default
+  L as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "4.0.203",
+  "version": "4.0.204",
   "description": "React component library",
   "type": "module",
   "keywords": [