@lanaco/lnc-react-ui 4.0.26 → 4.0.28

package/dist/index4.cjs

@@ -1,68 +1,65 @@
-"use strict";const i=require("react/jsx-runtime"),m=require("react"),b=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),y=require("./consts-dNz9tpt4.cjs"),S=require("./useDetectMobile-rBe0FiP2.cjs"),k=require("./Button.cjs"),u=require("./index-LdP7U1Yl.cjs"),j=b.newStyled.div`
-  padding: 1.75rem 3rem;
-  display: grid;
-  grid-template-columns: ${t=>`repeat(${t.limit||5},  minmax(0, 1fr))`};
+"use strict";const e=require("react/jsx-runtime"),o=require("react"),s=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),c=require("./consts-dNz9tpt4.cjs"),u=require("./Button.cjs"),t=require("./utils-CE6bljYe.cjs"),h=s.newStyled.div`
+  padding-bottom: 1.38rem;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
 
-  gap: 2.97rem;
-
-  border: 1.5px solid var(--danger-600, #e11d48);
-  background-color: var(--danger-50, #fff1f2);
-  position: relative;
-  border-radius: 0.75rem;
-  position: relative;
-
-  & .urgent-tag {
-    position: absolute;
-    left: 1rem;
-    top: -0.75rem;
-    min-height: 1.5rem;
-    max-height: 1.5rem;
-    border-radius: 0.375rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 0.25rem;
-    gap: 0.12rem;
-    font-weight: 500;
-    font-size: 0.875rem;
-    color: var(--white, #fff);
-    background-color: var(--danger-600, #e11d48);
+  & button {
+    width: fit-content;
   }
 
-  & .show-more {
-    grid-column: 1 / 3;
+  @media (max-width: ${c.MOBILE_SIZE_PX+"px"}) {
+    padding-bottom: 0;
   }
+`,g=s.newStyled.div`
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 0.25rem;
 
-  & .product-card {
-    max-width: ${t=>`calc(${100/t.desktopCols}% - ${(t.desktopCols-1)*t.columnGapRem/t.desktopCols}rem)`};
+  & .header-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+  }
 
-    animation-duration: 0.2s;
-    animation-name: animate-fade;
-    animation-delay: 0.2s;
-    animation-fill-mode: backwards;
-    transition: all 0.25s ease;
+  & .header-subtitle {
+    color: var(--gray-600, #676e79);
+    font-size: 1rem;
+    font-weight: 500;
+  }
 
-    @keyframes animate-fade {
-      0% {
-        transform: scale(0.9);
-        -webkit-transform: scale(0.9);
-      }
-      100% {
-        transform: scale(1);
-        -webkit-transform: scale(1);
-      }
-    }
+  @media (max-width: ${c.MOBILE_SIZE_PX+"px"}) {
   }
+`,p=s.newStyled.div`
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  align-items: center;
 
-  @media (max-width: ${y.MOBILE_SIZE_PX+"px"}) {
-    grid-template-columns: repeat(2, 1fr);
-    padding: 2rem 1.25rem;
-    gap: 1.19rem;
+  & .list-item {
+    display: flex;
+    align-items: center;
 
-    & .urgent-tag {
+    & .mng {
+      font-size: 1.25rem;
+      color: var(--success-600);
     }
+  }
 
-    & .img-wrapper {
+  @media (max-width: ${c.MOBILE_SIZE_PX+"px"}) {
+    & .list-item {
+      flex-direction: column;
+      text-align: center;
+      justify-content: center;
+      gap: 0;
     }
   }
-`,v=m.forwardRef((t,p)=>{var c;const{items:r,limit:n=5,limitMobile:l=6,onSelectCard:o=()=>{},title:g="Urgent sale",showLessText:f="Show less",showMoreText:h="Show more"}=t,d=S.useDetectMobile(),[a,w]=m.useState(!1);return i.jsxs(j,{ref:p,limit:n,children:[i.jsxs("div",{className:"urgent-tag",children:[i.jsx("i",{className:"mng mng-lnc-bolt-filled"}),i.jsx("span",{children:g})]}),d===!0?(c=r==null?void 0:r.slice(0,a===!0?r==null?void 0:r.length:l))==null?void 0:c.map((e,s)=>i.jsx(u.DetailedProductCard,{title:e==null?void 0:e.title,price:e==null?void 0:e.price,currency:e==null?void 0:e.currency,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,isSponsored:e==null?void 0:e.isSponsored,onSelectCard:()=>o==null?void 0:o(e==null?void 0:e.uuid)},s)):r==null?void 0:r.slice(0,n).map((e,s)=>i.jsx(u.DetailedProductCard,{title:e==null?void 0:e.title,price:e==null?void 0:e.price,currency:e==null?void 0:e.currency,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,location:e==null?void 0:e.location,isSponsored:e==null?void 0:e.isSponsored,onSelectCard:()=>o==null?void 0:o(e==null?void 0:e.uuid)},s)),d===!0&&l<(r==null?void 0:r.length)&&i.jsx(k,{className:"show-more",btnType:"basic",type:"button",color:"gray",onClick:()=>w(!a),children:a===!0?f:h})]})});module.exports=v;
+`,j=o.forwardRef((a,y)=>{const{title:i,subtitle:n,buttonText:d,list:r,fallback:m=()=>{},onBannerClick:l}=a;return e.jsxs(h,{children:[(t.isDefined(i)||t.isDefined(n))&&e.jsxs(g,{children:[t.isDefined(i)&&e.jsx("div",{className:"header-title",children:i}),t.isDefined(n)&&e.jsx("div",{className:"header-subitle",children:n})]}),e.jsx(p,{children:r==null?void 0:r.map((x,f)=>e.jsx(o.Fragment,{children:e.jsxs("div",{className:"list-item",children:[e.jsx("i",{className:"mng mng-lnc-checkmark--filled"}),e.jsx("span",{children:x})]})},f))}),e.jsx(u,{size:"medium",color:"neutral",type:"button",onClick:()=>t.isDefined(l)?l():m(),children:d})]})});module.exports=j;

package/dist/index4.js

@@ -1,135 +1,104 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { forwardRef as b, useState as y } from "react";
-import { n as S } from "./emotion-styled.browser.esm-BiK8DcgW.js";
-import { M as k } from "./consts-DNVz1x1I.js";
-import { u as v } from "./useDetectMobile-BookNOsk.js";
-import M from "./Button.js";
-import { D as u } from "./index-jVpIwR2G.js";
-const U = S.div`
-  padding: 1.75rem 3rem;
-  display: grid;
-  grid-template-columns: ${(i) => `repeat(${i.limit || 5},  minmax(0, 1fr))`};
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { forwardRef as h, Fragment as x } from "react";
+import { n as o } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { M as a } from "./consts-DNVz1x1I.js";
+import g from "./Button.js";
+import { l as t } from "./utils-DtEdJZWa.js";
+const u = o.div`
+  padding-bottom: 1.38rem;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
 
-  gap: 2.97rem;
-
-  border: 1.5px solid var(--danger-600, #e11d48);
-  background-color: var(--danger-50, #fff1f2);
-  position: relative;
-  border-radius: 0.75rem;
-  position: relative;
-
-  & .urgent-tag {
-    position: absolute;
-    left: 1rem;
-    top: -0.75rem;
-    min-height: 1.5rem;
-    max-height: 1.5rem;
-    border-radius: 0.375rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 0.25rem;
-    gap: 0.12rem;
-    font-weight: 500;
-    font-size: 0.875rem;
-    color: var(--white, #fff);
-    background-color: var(--danger-600, #e11d48);
+  & button {
+    width: fit-content;
   }
 
-  & .show-more {
-    grid-column: 1 / 3;
+  @media (max-width: ${a + "px"}) {
+    padding-bottom: 0;
   }
+`, y = o.div`
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 0.25rem;
 
-  & .product-card {
-    max-width: ${(i) => `calc(${100 / i.desktopCols}% - ${(i.desktopCols - 1) * i.columnGapRem / i.desktopCols}rem)`};
+  & .header-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+  }
 
-    animation-duration: 0.2s;
-    animation-name: animate-fade;
-    animation-delay: 0.2s;
-    animation-fill-mode: backwards;
-    transition: all 0.25s ease;
+  & .header-subtitle {
+    color: var(--gray-600, #676e79);
+    font-size: 1rem;
+    font-weight: 500;
+  }
 
-    @keyframes animate-fade {
-      0% {
-        transform: scale(0.9);
-        -webkit-transform: scale(0.9);
-      }
-      100% {
-        transform: scale(1);
-        -webkit-transform: scale(1);
-      }
-    }
+  @media (max-width: ${a + "px"}) {
   }
+`, b = o.div`
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  align-items: center;
 
-  @media (max-width: ${k + "px"}) {
-    grid-template-columns: repeat(2, 1fr);
-    padding: 2rem 1.25rem;
-    gap: 1.19rem;
+  & .list-item {
+    display: flex;
+    align-items: center;
 
-    & .urgent-tag {
+    & .mng {
+      font-size: 1.25rem;
+      color: var(--success-600);
     }
+  }
 
-    & .img-wrapper {
+  @media (max-width: ${a + "px"}) {
+    & .list-item {
+      flex-direction: column;
+      text-align: center;
+      justify-content: center;
+      gap: 0;
     }
   }
-`, A = b((i, p) => {
-  var d;
+`, N = h((m, w) => {
   const {
-    items: r,
-    limit: n = 5,
-    limitMobile: s = 6,
-    onSelectCard: t = () => {
+    title: i,
+    subtitle: n,
+    buttonText: s,
+    list: r,
+    fallback: d = () => {
     },
-    title: g = "Urgent sale",
-    showLessText: f = "Show less",
-    showMoreText: h = "Show more"
-  } = i, m = v(), [a, w] = y(!1);
-  return /* @__PURE__ */ c(U, { ref: p, limit: n, children: [
-    /* @__PURE__ */ c("div", { className: "urgent-tag", children: [
-      /* @__PURE__ */ o("i", { className: "mng mng-lnc-bolt-filled" }),
-      /* @__PURE__ */ o("span", { children: g })
+    onBannerClick: c
+  } = m;
+  return /* @__PURE__ */ l(u, { children: [
+    (t(i) || t(n)) && /* @__PURE__ */ l(y, { children: [
+      t(i) && /* @__PURE__ */ e("div", { className: "header-title", children: i }),
+      t(n) && /* @__PURE__ */ e("div", { className: "header-subitle", children: n })
     ] }),
-    m === !0 ? (d = r == null ? void 0 : r.slice(0, a === !0 ? r == null ? void 0 : r.length : s)) == null ? void 0 : d.map((e, l) => /* @__PURE__ */ o(
-      u,
-      {
-        title: e == null ? void 0 : e.title,
-        price: e == null ? void 0 : e.price,
-        currency: e == null ? void 0 : e.currency,
-        image: e == null ? void 0 : e.image,
-        sellerUuid: e == null ? void 0 : e.sellerUuid,
-        uuid: e == null ? void 0 : e.uuid,
-        isSponsored: e == null ? void 0 : e.isSponsored,
-        onSelectCard: () => t == null ? void 0 : t(e == null ? void 0 : e.uuid)
-      },
-      l
-    )) : r == null ? void 0 : r.slice(0, n).map((e, l) => /* @__PURE__ */ o(
-      u,
-      {
-        title: e == null ? void 0 : e.title,
-        price: e == null ? void 0 : e.price,
-        currency: e == null ? void 0 : e.currency,
-        image: e == null ? void 0 : e.image,
-        sellerUuid: e == null ? void 0 : e.sellerUuid,
-        uuid: e == null ? void 0 : e.uuid,
-        location: e == null ? void 0 : e.location,
-        isSponsored: e == null ? void 0 : e.isSponsored,
-        onSelectCard: () => t == null ? void 0 : t(e == null ? void 0 : e.uuid)
-      },
-      l
-    )),
-    m === !0 && s < (r == null ? void 0 : r.length) && /* @__PURE__ */ o(
-      M,
+    /* @__PURE__ */ e(b, { children: r == null ? void 0 : r.map((f, p) => /* @__PURE__ */ e(x, { children: /* @__PURE__ */ l("div", { className: "list-item", children: [
+      /* @__PURE__ */ e("i", { className: "mng mng-lnc-checkmark--filled" }),
+      /* @__PURE__ */ e("span", { children: f })
+    ] }) }, p)) }),
+    /* @__PURE__ */ e(
+      g,
       {
-        className: "show-more",
-        btnType: "basic",
+        size: "medium",
+        color: "neutral",
         type: "button",
-        color: "gray",
-        onClick: () => w(!a),
-        children: a === !0 ? f : h
+        onClick: () => t(c) ? c() : d(),
+        children: s
       }
     )
   ] });
 });
 export {
-  A as default
+  N as default
 };

package/dist/index5.cjs

@@ -1,48 +1,82 @@
-"use strict";const t=require("react/jsx-runtime"),p=require("react"),j=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),w=require("./consts-dNz9tpt4.cjs"),f=require("./useDetectMobile-rBe0FiP2.cjs"),m=require("./index-C2M7QHPq.cjs"),k=j.newStyled.div`
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0;
+"use strict";const i=require("react/jsx-runtime"),o=require("react"),t=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),r=require("./consts-dNz9tpt4.cjs"),b=require("./Button.cjs"),w=t.newStyled.div`
+  display: flex;
+  border-radius: 0.75rem;
+  background-color: ${e=>e.bgcolor||"transparent"};
+  overflow: hidden;
 
-  & .text-item {
-    max-height: ${e=>e.height};
-    min-height: ${e=>e.height};
-    max-width: 27rem;
-    margin: auto;
+  & button {
+    width: fit-content;
   }
 
   & img {
     object-fit: cover;
-    width: 100%;
-    max-height: ${e=>e.height};
-    min-height: ${e=>e.height};
+    max-width: ${e=>e.imgW||"33.39346rem"};
+    min-width: ${e=>e.imgW||"33.39346rem"};
+    max-height: ${e=>e.imgH||"22.5rem"};
+    min-height: ${e=>e.imgH||"22.5rem"};
   }
 
-  & .img-1 {
-    border-radius: 0.75rem 0.75rem 0.75rem 0;
+  ${e=>e.hasBorder===!0&&`border: 1px solid var(--gray-95008, rgba(20, 22, 26, 0.08));
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+
+`}
+
+  @media (max-width: ${r.MOBILE_SIZE_PX+"px"}) {
+    flex-direction: column;
+    & img {
+      max-width: 100%;
+      min-width: 100%;
+      max-height: ${e=>e.imgHMob||"12.1rem"};
+      min-height: ${e=>e.imgHMob||"12.1rem"};
+    }
   }
+`,y=t.newStyled.div`
+  padding: 2rem;
+  display: flex;
+  gap: 1.25rem;
+  justify-content: space-between;
+  flex: 1;
+  flex-direction: column;
 
-  & .img-2 {
-    border-radius: 0.75rem 0rem 0.75rem 0.75rem;
+  @media (max-width: ${r.MOBILE_SIZE_PX+"px"}) {
+    padding: 1.25rem;
   }
+`,j=t.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 
-  @media (max-width: ${w.MOBILE_SIZE_PX+"px"}) {
-    grid-template-columns: repeat(1, 1fr);
-    gap: 1.5rem;
+  & .header-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+  }
 
-    & .img-item {
-      width: 100%;
-      min-height: 11.25rem;
-      max-height: 11.25rem;
-    }
+  & .header-subtitle {
+    color: var(--gray-600, #676e79);
+    font-size: 1rem;
+    font-weight: 500;
+  }
 
-    & .img1,
-    .img2 {
-      border-radius: 0.75rem;
-    }
+  @media (max-width: ${r.MOBILE_SIZE_PX+"px"}) {
+    flex-direction: column;
+  }
+`,v=t.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+
+  & .list-item {
+    display: flex;
+    align-items: center;
 
-    & .text-item {
-      min-height: unset;
-      max-height: unset;
+    & .mng {
+      font-size: 1.25rem;
+      color: var(--info-600);
     }
   }
-`,q=p.forwardRef((e,T)=>{const{image1:s,image2:i,title1:n,title2:o,text1:g,text2:a,subtitle1:c,subtitle2:u,buttonText1:h,buttonText2:x,buttonLink1:l,buttonLink2:d,rowHeight:b="12.65625rem"}=e,r=f.useDetectMobile();return t.jsxs(k,{height:b,children:[t.jsx(m.TextBlockV1,{className:"text-item",title:n,subtitle:c,description:g,buttonText:h,buttonLink:l}),t.jsx("img",{className:"img-item img-1",src:s}),r!==!0&&t.jsx("img",{className:"img-item img-2",src:i}),t.jsx(m.TextBlockV1,{className:"text-item",title:o,subtitle:u,description:a,buttonText:x,buttonLink:d}),r===!0&&t.jsx("img",{className:"img-item img-2",src:i})]})});module.exports=q;
+
+  @media (max-width: ${r.MOBILE_SIZE_PX+"px"}) {
+  }
+`,$=o.forwardRef((e,S)=>{const{title:a,subtitle:m,buttonText:s,list:n,image:d,imageHeight:l,imageWidth:c,imageHeightMob:x,hasBorder:g=!0,backgroundColor:h="transparent",onBannerClick:p}=e;return i.jsxs(w,{imgH:l,imgW:c,imgHMob:x,hasBorder:g,bgColor:h,children:[i.jsxs(y,{children:[i.jsxs(j,{children:[i.jsx("div",{className:"header-title",children:a}),i.jsx("div",{className:"header-subitle",children:m})]}),i.jsx(v,{children:n==null?void 0:n.map((u,f)=>i.jsx(o.Fragment,{children:i.jsxs("div",{className:"list-item",children:[i.jsx("i",{className:"mng mng-lnc-checkmark--filled"}),i.jsx("span",{children:u})]})},f))}),i.jsx(b,{size:"medium",color:"gray",type:"button",btnType:"outline",onClick:p,children:s})]}),i.jsx("img",{src:d})]})});module.exports=$;