@lanaco/lnc-react-ui 4.0.25 → 4.0.26

package/dist/index10.cjs

@@ -1,78 +1,49 @@
-"use strict";const i=require("react/jsx-runtime"),w=require("react"),g=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),y=require("./consts-dNz9tpt4.cjs"),v=require("./useDetectMobile-rBe0FiP2.cjs"),c=require("./utils-CE6bljYe.cjs"),k=require("./index-C2M7QHPq.cjs"),j=g.newStyled.div`
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 1.25rem;
+"use strict";const i=require("react/jsx-runtime"),p=require("react"),c=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),g=require("./consts-dNz9tpt4.cjs"),b=require("./useDetectMobile-rBe0FiP2.cjs"),f=require("./style-C3OB0uad.cjs"),a=require("./utils-CE6bljYe.cjs"),j=c.newStyled.div`
+  width: 100%;
+  height: 22.5rem;
+  min-height: 22.5rem;
+  max-height: 22.5rem;
+  overflow: hidden;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  border: 1px solid var(--gray-95008, #14161a14);
+  border-radius: 0.75rem;
+  margin-bottom: 0.5rem;
 
-  & .text-block-v1 {
-    grid-column: 1 / 4;
-    max-width: 27rem;
-    margin: auto;
+  & img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
+`,v=c.newStyled.div`
+  display: grid;
+  grid-template-columns: ${o=>`repeat(${o.limit},  minmax(0, 1fr))`};
+  gap: 1.25rem;
 
-  @media (max-width: ${y.MOBILE_SIZE_PX+"px"}) {
-    grid-template-columns: repeat(2, 1fr);
-
-    & .text-block-v1 {
-      grid-column: 1 / 3;
-      max-width: unset;
-      margin: unset;
-    }
+  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+    display: flex;
+    gap: 1rem;
+    overflow-x: auto;
 
-    & .simple-product-card {
-      max-width: unset;
-      min-width: unset;
-      width: unset;
+    -webkit-overflow-scrolling: touch;
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
     }
+    -ms-overflow-style: none;
+    /* Internet Explorer 10+ */
+    scrollbar-width: none;
+    /* Firefox */
 
-    & .img-wrapper {
-
+    &::-webkit-scrollbar {
+      display: none;
+      /* Safari and Chrome */
     }
   }
-`;g.newStyled.div`
-  background-color: var(--gray-200, #dddfe4);
-  border-radius: 0.75rem;
-  min-width: 11.625rem;
-  min-height: 11.625rem;
-  max-width: 11.625rem;
-  max-height: 11.625rem;
-  ${c.linearGradientAnimation("-90deg")}
-`;const S=g.newStyled.div`
+`,y=c.newStyled.div`
   display: flex;
   flex-direction: column;
-  justify-content: end;
-  position: relative;
-  border-radius: 0.75rem;
-  overflow: hidden;
+  gap: 0.5rem;
   cursor: pointer;
-  background: linear-gradient(
-    178deg,
-    rgba(0, 0, 0, 0) 1.5%,
-    rgba(0, 0, 0, 0.16) 8.95%,
-    #000 98.39%
-  );
-
-  & .text-block {
-    padding: 0.75rem;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    position: absolute;
-    bottom: 0rem;
-    left: 0rem;
-  }
-  & .img-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    background: linear-gradient(
-      178deg,
-      rgba(0, 0, 0, 0) 1.5%,
-      rgba(0, 0, 0, 0.16) 8.95%,
-      #000 98.39%
-    );
-  }
 
   & img {
     width: 100%;
@@ -81,37 +52,39 @@
     border-radius: 0.75rem;
   }
 
-  & .fallback-image {
-    mix-blend-mode: multiply;
+  & .card-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+     ${a.truncateTextInRows(2)}
   }
 
-  font-size: 0.875rem;
-  font-weight: 500;
-  & .price-chip {
-    font-size: 0.75rem;
-    font-weight: 500;
-    padding: 0 0.38rem;
-    min-height: 1.25rem;
-    max-height: 1.25rem;
-    width: fit-content;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 62.4375rem;
-    z-index: 1;
-    background-color: var(--white, #fff);
-    color: var(--gray-950, #14161A);
+  &:hover {
+    & .card-title {
+      color: var(--primary-500, #F59E0B);
+    }
   }
-  & .title-simple-product-card {
-    z-index: 1;
-    color: var(--white, #fff);
-    transition: all 0.2s ease;
+
+  & .skeleton-img {
+    background-color: ${a.linearGradientAnimation("-90deg")};
+    border-radius: 0.75rem;
+    border: 1px solid white;
   }
 
-  &:hover {
-    & .title-simple-product-card {
-      z-index: 1;
-      color: var(--primary-500, #F59E0B);
+  & .skeleton-title {
+    background-color: ${a.linearGradientAnimation("-90deg")};
+    width: 100%;
+    height: 1.25rem;
+  }
+
+  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+    & img {
+      width: 8.875rem;
+      height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      object-fit: cover;
     }
   }
-`,h=w.forwardRef((s,f)=>{const{uuid:b,title:l,price:d,currency:a,isNegotiable:m,isFree:r,image:u,sellerUuid:t,onSelectCard:p=()=>{},imageComponent:n,negotiableText:e="Negotiable",freeText:o="Free"}=s;return i.jsxs(S,{className:"simple-product-card",onClick:p,children:[c.isDefined(n)?n:i.jsx("img",{src:u}),i.jsxs("div",{className:"text-block",children:[i.jsx("div",{className:"title-simple-product-card",children:l}),i.jsxs("div",{className:"price-chip",children:[d&&a&&`${c.formatPrice(d)} ${c.GetCurrencySymbol(a)}`,m&&e,r&&o]})]})]})}),q=w.forwardRef((s,f)=>{var n;const{title:b,subtitle:l,description:d,buttonText:a,buttonLink:m,items:r,onButtonAction:u=()=>{},onSelectCard:t=()=>{}}=s,p=v.useDetectMobile();return i.jsxs(j,{ref:f,limit:6,children:[i.jsx(k.TextBlockV1,{subtitle:l,title:b,description:d,buttonText:a,buttonLink:m,onButtonAction:u,className:"text-block-v1"}),p===!0?(n=r==null?void 0:r.slice(0,4))==null?void 0:n.map((e,o)=>i.jsx(h,{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,onSelectCard:()=>t==null?void 0:t(e==null?void 0:e.uuid)},o)):r==null?void 0:r.map((e,o)=>i.jsx(h,{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,onSelectCard:()=>t==null?void 0:t(e==null?void 0:e.uuid)},o))]})});module.exports=q;
+`,h=p.forwardRef((o,m)=>{const{uuid:d,title:r,image:n,sellerUuid:u,onSelectCard:t=()=>{},imageComponent:s}=o;return i.jsxs(y,{className:"product-card",onClick:t,children:[a.isDefined(s)?s:i.jsx("img",{src:n}),i.jsx("div",{className:"card-title",children:r})]})}),S=p.forwardRef((o,m)=>{const{icon:d,items:r,limit:n=4,bannerImage:u,onSelectCard:t=()=>{},title:s="Season inspiration"}=o,w=b.useDetectMobile();return i.jsxs(f.RegulatTitleSectionWrapper,{ref:m,children:[i.jsx("div",{className:"regular-title",children:i.jsxs("div",{className:"regular-title-text",children:[a.isDefinedNotEmptyString(d)&&i.jsx("i",{className:d}),i.jsx("span",{children:s})]})}),i.jsx(j,{className:"products-banner",children:i.jsx("img",{src:u})}),i.jsx(v,{limit:n,children:w===!0?r==null?void 0:r.map((e,l)=>i.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>t==null?void 0:t(e==null?void 0:e.uuid)},l)):r==null?void 0:r.slice(0,n).map((e,l)=>i.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>t==null?void 0:t(e==null?void 0:e.uuid)},l))})]})});module.exports=S;

package/dist/index10.js

@@ -1,87 +1,56 @@
-import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import { forwardRef as w } from "react";
-import { n as g } from "./emotion-styled.browser.esm-BiK8DcgW.js";
-import { M as v } from "./consts-DNVz1x1I.js";
-import { u as y } from "./useDetectMobile-BookNOsk.js";
-import { m as k, l as z, n as N, G as S } from "./utils-DtEdJZWa.js";
-import { T as j } from "./index-DcYg32le.js";
-const T = g.div`
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 1.25rem;
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { n as s } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { M as f } from "./consts-DNVz1x1I.js";
+import { u as w } from "./useDetectMobile-BookNOsk.js";
+import { R as v } from "./style-Ch-xOasu.js";
+import { t as k, m as h, l as y, k as N } from "./utils-DtEdJZWa.js";
+const S = s.div`
+  width: 100%;
+  height: 22.5rem;
+  min-height: 22.5rem;
+  max-height: 22.5rem;
+  overflow: hidden;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  border: 1px solid var(--gray-95008, #14161a14);
+  border-radius: 0.75rem;
+  margin-bottom: 0.5rem;
 
-  & .text-block-v1 {
-    grid-column: 1 / 4;
-    max-width: 27rem;
-    margin: auto;
+  & img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
+`, $ = s.div`
+  display: grid;
+  grid-template-columns: ${(a) => `repeat(${a.limit},  minmax(0, 1fr))`};
+  gap: 1.25rem;
 
-  @media (max-width: ${v + "px"}) {
-    grid-template-columns: repeat(2, 1fr);
-
-    & .text-block-v1 {
-      grid-column: 1 / 3;
-      max-width: unset;
-      margin: unset;
-    }
+  @media (max-width: ${f + "px"}) {
+    display: flex;
+    gap: 1rem;
+    overflow-x: auto;
 
-    & .simple-product-card {
-      max-width: unset;
-      min-width: unset;
-      width: unset;
+    -webkit-overflow-scrolling: touch;
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
     }
+    -ms-overflow-style: none;
+    /* Internet Explorer 10+ */
+    scrollbar-width: none;
+    /* Firefox */
 
-    & .img-wrapper {
-
+    &::-webkit-scrollbar {
+      display: none;
+      /* Safari and Chrome */
     }
   }
-`;
-g.div`
-  background-color: var(--gray-200, #dddfe4);
-  border-radius: 0.75rem;
-  min-width: 11.625rem;
-  min-height: 11.625rem;
-  max-width: 11.625rem;
-  max-height: 11.625rem;
-  ${k("-90deg")}
-`;
-const U = g.div`
+`, j = s.div`
   display: flex;
   flex-direction: column;
-  justify-content: end;
-  position: relative;
-  border-radius: 0.75rem;
-  overflow: hidden;
+  gap: 0.5rem;
   cursor: pointer;
-  background: linear-gradient(
-    178deg,
-    rgba(0, 0, 0, 0) 1.5%,
-    rgba(0, 0, 0, 0.16) 8.95%,
-    #000 98.39%
-  );
-
-  & .text-block {
-    padding: 0.75rem;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    position: absolute;
-    bottom: 0rem;
-    left: 0rem;
-  }
-  & .img-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    background: linear-gradient(
-      178deg,
-      rgba(0, 0, 0, 0) 1.5%,
-      rgba(0, 0, 0, 0.16) 8.95%,
-      #000 98.39%
-    );
-  }
 
   & img {
     width: 100%;
@@ -90,120 +59,94 @@ const U = g.div`
     border-radius: 0.75rem;
   }
 
-  & .fallback-image {
-    mix-blend-mode: multiply;
+  & .card-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+     ${k(2)}
   }
 
-  font-size: 0.875rem;
-  font-weight: 500;
-  & .price-chip {
-    font-size: 0.75rem;
-    font-weight: 500;
-    padding: 0 0.38rem;
-    min-height: 1.25rem;
-    max-height: 1.25rem;
-    width: fit-content;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 62.4375rem;
-    z-index: 1;
-    background-color: var(--white, #fff);
-    color: var(--gray-950, #14161A);
+  &:hover {
+    & .card-title {
+      color: var(--primary-500, #F59E0B);
+    }
+  }
+
+  & .skeleton-img {
+    background-color: ${h("-90deg")};
+    border-radius: 0.75rem;
+    border: 1px solid white;
   }
-  & .title-simple-product-card {
-    z-index: 1;
-    color: var(--white, #fff);
-    transition: all 0.2s ease;
+
+  & .skeleton-title {
+    background-color: ${h("-90deg")};
+    width: 100%;
+    height: 1.25rem;
   }
 
-  &:hover {
-    & .title-simple-product-card {
-      z-index: 1;
-      color: var(--primary-500, #F59E0B);
+  @media (max-width: ${f + "px"}) {
+    & img {
+      width: 8.875rem;
+      height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      object-fit: cover;
     }
   }
-`, b = w((m, f) => {
+`, u = g((a, c) => {
   const {
-    uuid: h,
-    title: c,
-    price: d,
-    currency: n,
-    isNegotiable: s,
-    isFree: i,
-    image: u,
-    sellerUuid: r,
-    onSelectCard: p = () => {
+    uuid: l,
+    title: i,
+    image: o,
+    sellerUuid: p,
+    onSelectCard: t = () => {
     },
-    imageComponent: t,
-    negotiableText: e = "Negotiable",
-    freeText: o = "Free"
-  } = m;
-  return /* @__PURE__ */ l(U, { className: "simple-product-card", onClick: p, children: [
-    z(t) ? t : /* @__PURE__ */ a("img", { src: u }),
-    /* @__PURE__ */ l("div", { className: "text-block", children: [
-      /* @__PURE__ */ a("div", { className: "title-simple-product-card", children: c }),
-      /* @__PURE__ */ l("div", { className: "price-chip", children: [
-        d && n && `${N(d)} ${S(n)}`,
-        s && e,
-        i && o
-      ] })
-    ] })
+    imageComponent: d
+  } = a;
+  return /* @__PURE__ */ m(j, { className: "product-card", onClick: t, children: [
+    y(d) ? d : /* @__PURE__ */ r("img", { src: o }),
+    /* @__PURE__ */ r("div", { className: "card-title", children: i })
   ] });
-}), E = w((m, f) => {
-  var t;
+}), P = g((a, c) => {
   const {
-    title: h,
-    subtitle: c,
-    description: d,
-    buttonText: n,
-    buttonLink: s,
+    icon: l,
     items: i,
-    onButtonAction: u = () => {
+    limit: o = 4,
+    bannerImage: p,
+    onSelectCard: t = () => {
     },
-    onSelectCard: r = () => {
-    }
-  } = m, p = y();
-  return /* @__PURE__ */ l(T, { ref: f, limit: 6, children: [
-    /* @__PURE__ */ a(
-      j,
-      {
-        subtitle: c,
-        title: h,
-        description: d,
-        buttonText: n,
-        buttonLink: s,
-        onButtonAction: u,
-        className: "text-block-v1"
-      }
-    ),
-    p === !0 ? (t = i == null ? void 0 : i.slice(0, 4)) == null ? void 0 : t.map((e, o) => /* @__PURE__ */ a(
-      b,
+    title: d = "Season inspiration"
+  } = a, b = w();
+  return /* @__PURE__ */ m(v, { ref: c, children: [
+    /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ m("div", { className: "regular-title-text", children: [
+      N(l) && /* @__PURE__ */ r("i", { className: l }),
+      /* @__PURE__ */ r("span", { children: d })
+    ] }) }),
+    /* @__PURE__ */ r(S, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: p }) }),
+    /* @__PURE__ */ r($, { limit: o, children: b === !0 ? i == null ? void 0 : i.map((e, n) => /* @__PURE__ */ r(
+      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,
-        onSelectCard: () => r == null ? void 0 : r(e == null ? void 0 : e.uuid)
+        onSelectCard: () => t == null ? void 0 : t(e == null ? void 0 : e.uuid)
       },
-      o
-    )) : i == null ? void 0 : i.map((e, o) => /* @__PURE__ */ a(
-      b,
+      n
+    )) : i == null ? void 0 : i.slice(0, o).map((e, n) => /* @__PURE__ */ r(
+      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,
-        onSelectCard: () => r == null ? void 0 : r(e == null ? void 0 : e.uuid)
+        onSelectCard: () => t == null ? void 0 : t(e == null ? void 0 : e.uuid)
       },
-      o
-    ))
+      n
+    )) })
   ] });
 });
 export {
-  E as default
+  P as default
 };