@lanaco/lnc-react-ui 4.0.160 → 4.0.162

package/dist/MasonryGeneralCardsSection.js

@@ -1,4 +1,4 @@
-import { jsx as t, Fragment as w, jsxs as d } from "react/jsx-runtime";
+import { jsx as t, Fragment as w, jsxs as m } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
 import b from "./Button.js";
 import { s } from "./emotion-styled.browser.esm-BNN1dTl3.js";
@@ -140,23 +140,23 @@ const y = s.div`
     onSelectCard: l = () => {
     },
     className: o,
-    position: m,
+    position: d,
     tag: g,
     backgroundColor: x
   }, u) => {
     const _ = v();
-    return /* @__PURE__ */ t(w, { children: /* @__PURE__ */ d(
+    return /* @__PURE__ */ t(w, { children: /* @__PURE__ */ m(
       y,
       {
         ref: u,
         theme: _,
         className: o,
-        position: m,
+        position: d,
         backgroundColor: x,
         onClick: l,
         children: [
           /* @__PURE__ */ t("img", { src: e, className: "wrapper__image" }),
-          /* @__PURE__ */ d("div", { className: "wrapper__text", children: [
+          /* @__PURE__ */ m("div", { className: "wrapper__text", children: [
             g && /* @__PURE__ */ t("div", { className: "text__tag", children: g }),
             /* @__PURE__ */ t("div", { className: "text__title", children: r }),
             h(i) && /* @__PURE__ */ t("div", { className: "text__description", children: i }),
@@ -197,8 +197,6 @@ const y = s.div`
   }
 
   @media (max-width: ${c + "px"}) {
-    gap: 1.25rem;
-
     & .regular-title {
       font-size: 1.375rem;
 
@@ -220,22 +218,22 @@ const y = s.div`
   @media (max-width: ${c + "px"}) {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 1.25rem;
     width: 100%;
     height: 100%;
     max-height: 100%;
   }
 `, I = f(
   ({ title: r, items: e, limit: i = 3, onSelectCard: a = () => {
-  } }, l) => /* @__PURE__ */ d($, { ref: l, children: [
+  } }, l) => /* @__PURE__ */ m($, { ref: l, children: [
     /* @__PURE__ */ t("div", { className: "regular-title", children: /* @__PURE__ */ t("div", { className: "regular-title-text", children: /* @__PURE__ */ t("span", { children: r }) }) }),
-    /* @__PURE__ */ t(N, { limit: i, children: e && (e == null ? void 0 : e.map((o, m) => /* @__PURE__ */ t(
+    /* @__PURE__ */ t(N, { limit: i, children: e && (e == null ? void 0 : e.map((o, d) => /* @__PURE__ */ t(
       k,
       {
         ...o,
         onSelectCard: () => a(o)
       },
-      `landing-page-masonry-general-card__${m + 1}`
+      `landing-page-masonry-general-card__${d + 1}`
     ))) })
   ] })
 );

package/dist/ProductsWithBannerSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),d=require("react"),f=require("./emotion-styled.browser.esm-BtEseadx.cjs"),j=require("./consts-goSZX3xP.cjs"),y=require("./useDetectMobile-zkbzoOGV.cjs"),P=require("./style-lSjkOR95.cjs"),l=require("./utils-Dl9xPH4c.cjs"),N=require("./index-BueKsXT8.cjs"),I=f.styled.div`
+"use strict";const r=require("react/jsx-runtime"),o=require("react"),f=require("./emotion-styled.browser.esm-BtEseadx.cjs"),j=require("./consts-goSZX3xP.cjs"),v=require("./useDetectMobile-zkbzoOGV.cjs"),y=require("./style-Db3VFbfP.cjs"),c=require("./utils-Dl9xPH4c.cjs"),N=require("./index-BueKsXT8.cjs"),$=f.styled.div`
   width: 100%;
   height: 22.5rem;
   min-height: 22.5rem;
@@ -21,32 +21,25 @@
     min-height: 100%;
     max-height: 100%;
     aspect-ratio: 1 / 1;
+
+    & .product-card {
+      & img {
+        width: 100%;
+        height: 100%;
+        min-width: 100%;
+        min-height: 100%;
+      }
+    }
   }
-`,$=f.styled.div`
+`,I=f.styled.div`
   display: grid;
   grid-template-columns: ${t=>`repeat(${t.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
   @media (max-width: ${j.MOBILE_SIZE_PX+"px"}) {
-    display: flex;
-    gap: 1rem;
-    overflow-x: auto;
-
-    -webkit-overflow-scrolling: touch;
-    ::-webkit-scrollbar {
-      -webkit-appearance: none;
-    }
-    -ms-overflow-style: none;
-    /* Internet Explorer 10+ */
-    scrollbar-width: none;
-    /* Firefox */
-
-    &::-webkit-scrollbar {
-      display: none;
-      /* Safari and Chrome */
-    }
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-`,k=f.styled.div`
+`,C=f.styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -62,17 +55,17 @@
   & .card-title {
     font-size: 0.875rem;
     font-weight: 600;
-     ${l.truncateTextInRows(2)}
+     ${c.truncateTextInRows(2)}
   }
 
   & .skeleton-img {
-    background-color: ${l.linearGradientAnimation("-90deg")};
+    background-color: ${c.linearGradientAnimation("-90deg")};
     border-radius: 0.75rem;
     border: 1px solid white;
   }
 
   & .skeleton-title {
-    background-color: ${l.linearGradientAnimation("-90deg")};
+    background-color: ${c.linearGradientAnimation("-90deg")};
     width: 100%;
     height: 1.25rem;
   }
@@ -88,4 +81,4 @@
       object-fit: cover;
     }
   }
-`,R=d.forwardRef((t,o)=>{const{uuid:a,title:i,image:s,sellerUuid:w,onSelectCard:c=()=>{},imageComponent:m,metadata:n}=t,u=d.useRef(null);return r.jsxs(k,{ref:u,className:"product-card",name:n==null?void 0:n.name,"data-accessor":n==null?void 0:n.accessor,onClick:g=>c(g,o),children:[l.isDefined(m)?m:r.jsx(N.ProductImageWrapper,{src:s}),r.jsx("div",{className:"card-title",children:i})]})}),_=d.forwardRef(({},t)=>r.jsxs(k,{className:"product-card",children:[r.jsx("img",{className:"skeleton-img"}),r.jsx("div",{className:"skeleton-title"})]})),q=({limit:t=4,isLoading:o=!1,keyPrefix:a})=>r.jsx(r.Fragment,{children:Array.from({length:t},(i,s)=>r.jsx(_,{isLoading:o},`${a}-skeleton-product-card-${s}`))}),E=({children:t,fallbackComponent:o=r.jsx(r.Fragment,{}),isLoading:a=!1,limit:i,keyPrefix:s})=>r.jsx(d.Suspense,{fallbackComponent:o,children:a===!0?r.jsx(q,{isLoading:a,limit:i,keyPrefix:s}):t}),S=d.memo(R),M=d.forwardRef((t,o)=>{const{icon:a,items:i,limit:s=4,imageUrl:w,onSelectCard:c=()=>{},title:m="Season inspiration",isLoading:n=!1,getImage:u=()=>{},componentName:g}=t,b=y.useDetectMobile(),v=d.useMemo(()=>r.jsx(r.Fragment,{children:b===!0?i==null?void 0:i.map((e,h)=>r.jsx(S,{title:e==null?void 0:e.name,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:(C,p)=>c({uuid:e==null?void 0:e.uuid,nameSlug:e==null?void 0:e.nameSlug,cardRef:p}),image:u(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,metadata:{name:g,accessor:e==null?void 0:e.accessor}},h)):i==null?void 0:i.slice(0,s).map((e,h)=>r.jsx(S,{title:e==null?void 0:e.name,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:(C,p)=>c({uuid:e==null?void 0:e.uuid,nameSlug:e==null?void 0:e.nameSlug,cardRef:p}),image:u(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,metadata:{name:g,accessor:e==null?void 0:e.accessor}},h))}),[i,b,s]);return r.jsxs(P.RegulatTitleSectionWrapper,{ref:o,children:[r.jsx("div",{className:"regular-title",children:r.jsxs("div",{className:"regular-title-text",children:[l.isDefinedNotEmptyString(a)&&r.jsx("i",{className:a}),r.jsx("span",{children:m})]})}),r.jsx(I,{className:"products-banner",children:r.jsx("img",{src:w})}),r.jsx($,{limit:s,children:r.jsx(E,{isLoading:n,limit:s,keyPrefix:"explore-landing",children:v})})]})});module.exports=M;
+`,R=o.forwardRef((t,d)=>{const{uuid:a,title:i,image:s,sellerUuid:w,onSelectCard:l=()=>{},imageComponent:m,metadata:n}=t,u=o.useRef(null);return r.jsxs(C,{ref:u,className:"product-card",name:n==null?void 0:n.name,"data-accessor":n==null?void 0:n.accessor,onClick:g=>l(g,d),children:[c.isDefined(m)?m:r.jsx(N.ProductImageWrapper,{src:s}),r.jsx("div",{className:"card-title",children:i})]})}),_=o.forwardRef(({},t)=>r.jsxs(C,{className:"product-card",children:[r.jsx("img",{className:"skeleton-img"}),r.jsx("div",{className:"skeleton-title"})]})),q=({limit:t=4,isLoading:d=!1,keyPrefix:a})=>r.jsx(r.Fragment,{children:Array.from({length:t},(i,s)=>r.jsx(_,{isLoading:d},`${a}-skeleton-product-card-${s}`))}),M=({children:t,fallbackComponent:d=r.jsx(r.Fragment,{}),isLoading:a=!1,limit:i,keyPrefix:s})=>r.jsx(o.Suspense,{fallbackComponent:d,children:a===!0?r.jsx(q,{isLoading:a,limit:i,keyPrefix:s}):t}),b=o.memo(R),U=o.forwardRef((t,d)=>{const{icon:a,items:i,limit:s=4,imageUrl:w,onSelectCard:l=()=>{},title:m="Season inspiration",isLoading:n=!1,getImage:u=()=>{},componentName:g}=t,S=v.useDetectMobile(),P=o.useMemo(()=>r.jsx(r.Fragment,{children:S===!0?i==null?void 0:i.map((e,h)=>r.jsx(b,{title:e==null?void 0:e.name,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:(k,p)=>l({uuid:e==null?void 0:e.uuid,nameSlug:e==null?void 0:e.nameSlug,cardRef:p}),image:u(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,metadata:{name:g,accessor:e==null?void 0:e.accessor}},h)):i==null?void 0:i.slice(0,s).map((e,h)=>r.jsx(b,{title:e==null?void 0:e.name,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:(k,p)=>l({uuid:e==null?void 0:e.uuid,nameSlug:e==null?void 0:e.nameSlug,cardRef:p}),image:u(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,metadata:{name:g,accessor:e==null?void 0:e.accessor}},h))}),[i,S,s]);return r.jsxs(y.RegulatTitleSectionWrapper,{ref:d,children:[r.jsx("div",{className:"regular-title",children:r.jsxs("div",{className:"regular-title-text",children:[c.isDefinedNotEmptyString(a)&&r.jsx("i",{className:a}),r.jsx("span",{children:m})]})}),r.jsx($,{className:"products-banner",children:r.jsx("img",{src:w})}),r.jsx(I,{limit:s,children:r.jsx(M,{isLoading:n,limit:s,keyPrefix:"explore-landing",children:P})})]})});module.exports=U;

package/dist/ProductsWithBannerSection.js

@@ -1,12 +1,12 @@
 import { jsxs as u, jsx as r, Fragment as h } from "react/jsx-runtime";
-import { forwardRef as f, useRef as $, Suspense as U, memo as I, useMemo as M } from "react";
-import { s as b } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as w } from "./consts-BuFChS64.js";
-import { u as R } from "./useDetectMobile-Bkvj0VMa.js";
-import { R as W } from "./style-BLuyU97E.js";
-import { p as j, o as v, l as E, k as z } from "./utils-BdsZgOUE.js";
-import { P as B } from "./index-CF3HhgvN.js";
-const D = b.div`
+import { forwardRef as f, useRef as U, Suspense as y, memo as M, useMemo as R } from "react";
+import { s as w } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as b } from "./consts-BuFChS64.js";
+import { u as W } from "./useDetectMobile-Bkvj0VMa.js";
+import { R as j } from "./style-DKAOBWn3.js";
+import { p as I, o as k, l as z, k as B } from "./utils-BdsZgOUE.js";
+import { P as D } from "./index-CF3HhgvN.js";
+const E = w.div`
   width: 100%;
   height: 22.5rem;
   min-height: 22.5rem;
@@ -24,37 +24,30 @@ const D = b.div`
     object-fit: cover;
   }
 
-  @media (max-width: ${w + "px"}) {
+  @media (max-width: ${b + "px"}) {
     height: 100%;
     min-height: 100%;
     max-height: 100%;
     aspect-ratio: 1 / 1;
+
+    & .product-card {
+      & img {
+        width: 100%;
+        height: 100%;
+        min-width: 100%;
+        min-height: 100%;
+      }
+    }
   }
-`, _ = b.div`
+`, _ = w.div`
   display: grid;
   grid-template-columns: ${(t) => `repeat(${t.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${w + "px"}) {
-    display: flex;
-    gap: 1rem;
-    overflow-x: auto;
-
-    -webkit-overflow-scrolling: touch;
-    ::-webkit-scrollbar {
-      -webkit-appearance: none;
-    }
-    -ms-overflow-style: none;
-    /* Internet Explorer 10+ */
-    scrollbar-width: none;
-    /* Firefox */
-
-    &::-webkit-scrollbar {
-      display: none;
-      /* Safari and Chrome */
-    }
+  @media (max-width: ${b + "px"}) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-`, P = b.div`
+`, P = w.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -70,22 +63,22 @@ const D = b.div`
   & .card-title {
     font-size: 0.875rem;
     font-weight: 600;
-     ${j(2)}
+     ${I(2)}
   }
 
   & .skeleton-img {
-    background-color: ${v("-90deg")};
+    background-color: ${k("-90deg")};
     border-radius: 0.75rem;
     border: 1px solid white;
   }
 
   & .skeleton-title {
-    background-color: ${v("-90deg")};
+    background-color: ${k("-90deg")};
     width: 100%;
     height: 1.25rem;
   }
 
-  @media (max-width: ${w + "px"}) {
+  @media (max-width: ${b + "px"}) {
     & img {
       width: 8.875rem;
       height: 8.875rem;
@@ -96,107 +89,107 @@ const D = b.div`
       object-fit: cover;
     }
   }
-`, A = f((t, l) => {
+`, A = f((t, n) => {
   const {
     uuid: o,
     title: i,
     image: a,
     sellerUuid: S,
-    onSelectCard: d = () => {
+    onSelectCard: m = () => {
     },
     imageComponent: s,
-    metadata: n
-  } = t, m = $(null);
+    metadata: d
+  } = t, l = U(null);
   return /* @__PURE__ */ u(
     P,
     {
-      ref: m,
+      ref: l,
       className: "product-card",
-      name: n == null ? void 0 : n.name,
-      "data-accessor": n == null ? void 0 : n.accessor,
-      onClick: (c) => d(c, l),
+      name: d == null ? void 0 : d.name,
+      "data-accessor": d == null ? void 0 : d.accessor,
+      onClick: (c) => m(c, n),
       children: [
-        E(s) ? s : /* @__PURE__ */ r(B, { src: a }),
+        z(s) ? s : /* @__PURE__ */ r(D, { src: a }),
         /* @__PURE__ */ r("div", { className: "card-title", children: i })
       ]
     }
   );
-}), F = f(({}, t) => /* @__PURE__ */ u(P, { className: "product-card", children: [
+}), G = f(({}, t) => /* @__PURE__ */ u(P, { className: "product-card", children: [
   /* @__PURE__ */ r("img", { className: "skeleton-img" }),
   /* @__PURE__ */ r("div", { className: "skeleton-title" })
-] })), G = ({ limit: t = 4, isLoading: l = !1, keyPrefix: o }) => /* @__PURE__ */ r(h, { children: Array.from({ length: t }, (i, a) => /* @__PURE__ */ r(
-  F,
+] })), T = ({ limit: t = 4, isLoading: n = !1, keyPrefix: o }) => /* @__PURE__ */ r(h, { children: Array.from({ length: t }, (i, a) => /* @__PURE__ */ r(
+  G,
   {
-    isLoading: l
+    isLoading: n
   },
   `${o}-skeleton-product-card-${a}`
-)) }), T = ({
+)) }), F = ({
   children: t,
-  fallbackComponent: l = /* @__PURE__ */ r(h, {}),
+  fallbackComponent: n = /* @__PURE__ */ r(h, {}),
   isLoading: o = !1,
   limit: i,
   keyPrefix: a
-}) => /* @__PURE__ */ r(U, { fallbackComponent: l, children: o === !0 ? /* @__PURE__ */ r(
-  G,
+}) => /* @__PURE__ */ r(y, { fallbackComponent: n, children: o === !0 ? /* @__PURE__ */ r(
+  T,
   {
     isLoading: o,
     limit: i,
     keyPrefix: a
   }
-) : t }), C = I(A), Q = f((t, l) => {
+) : t }), v = M(A), Q = f((t, n) => {
   const {
     icon: o,
     items: i,
     limit: a = 4,
     imageUrl: S,
-    onSelectCard: d = () => {
+    onSelectCard: m = () => {
     },
     title: s = "Season inspiration",
-    isLoading: n = !1,
-    getImage: m = () => {
+    isLoading: d = !1,
+    getImage: l = () => {
     },
     componentName: c
-  } = t, k = R(), N = M(() => /* @__PURE__ */ r(h, { children: k === !0 ? i == null ? void 0 : i.map((e, p) => /* @__PURE__ */ r(
-    C,
+  } = t, C = W(), N = R(() => /* @__PURE__ */ r(h, { children: C === !0 ? i == null ? void 0 : i.map((e, p) => /* @__PURE__ */ r(
+    v,
     {
       title: e == null ? void 0 : e.name,
       sellerUuid: e == null ? void 0 : e.sellerUuid,
       uuid: e == null ? void 0 : e.uuid,
-      onSelectCard: (y, g) => d({
+      onSelectCard: ($, g) => m({
         uuid: e == null ? void 0 : e.uuid,
         nameSlug: e == null ? void 0 : e.nameSlug,
         cardRef: g
       }),
-      image: m(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
+      image: l(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
       metadata: { name: c, accessor: e == null ? void 0 : e.accessor }
     },
     p
   )) : i == null ? void 0 : i.slice(0, a).map((e, p) => /* @__PURE__ */ r(
-    C,
+    v,
     {
       title: e == null ? void 0 : e.name,
       sellerUuid: e == null ? void 0 : e.sellerUuid,
       uuid: e == null ? void 0 : e.uuid,
-      onSelectCard: (y, g) => d({
+      onSelectCard: ($, g) => m({
         uuid: e == null ? void 0 : e.uuid,
         nameSlug: e == null ? void 0 : e.nameSlug,
         cardRef: g
       }),
-      image: m(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
+      image: l(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
       metadata: { name: c, accessor: e == null ? void 0 : e.accessor }
     },
     p
-  )) }), [i, k, a]);
-  return /* @__PURE__ */ u(W, { ref: l, children: [
+  )) }), [i, C, a]);
+  return /* @__PURE__ */ u(j, { ref: n, children: [
     /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ u("div", { className: "regular-title-text", children: [
-      z(o) && /* @__PURE__ */ r("i", { className: o }),
+      B(o) && /* @__PURE__ */ r("i", { className: o }),
       /* @__PURE__ */ r("span", { children: s })
     ] }) }),
-    /* @__PURE__ */ r(D, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: S }) }),
+    /* @__PURE__ */ r(E, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: S }) }),
     /* @__PURE__ */ r(_, { limit: a, children: /* @__PURE__ */ r(
-      T,
+      F,
       {
-        isLoading: n,
+        isLoading: d,
         limit: a,
         keyPrefix: "explore-landing",
         children: N

package/dist/QuattroCardsSection.cjs

@@ -155,6 +155,8 @@
   }
 
   @media (max-width: ${m.MOBILE_SIZE_PX+"px"}) {
+    gap: 1.25rem;
+
     & .wrapper__cards {
       grid-template-columns: repeat(1, minmax(0, 1fr));
       gap: 1rem;

package/dist/QuattroCardsSection.js

@@ -174,6 +174,8 @@ const y = c.div`
   }
 
   @media (max-width: ${m + "px"}) {
+    gap: 1.25rem;
+
     & .wrapper__cards {
       grid-template-columns: repeat(1, minmax(0, 1fr));
       gap: 1rem;