@lanaco/lnc-react-ui 4.0.152 → 4.0.154

package/dist/MasonryGeneralCardsSection.js

@@ -1,10 +1,10 @@
-import { jsx as t, Fragment as w, jsxs as m } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
+import { jsx as t, Fragment as w, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
 import b from "./Button.js";
 import { s } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { o as n, p as g, k as p } from "./utils-BdsZgOUE.js";
+import { o as n, p, k as h } from "./utils-BdsZgOUE.js";
+import { M as c } from "./consts-BuFChS64.js";
 import { u as v } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-import { M as f } from "./consts-BuFChS64.js";
 const y = s.div`
   display: flex;
   flex-direction: column;
@@ -70,7 +70,7 @@ const y = s.div`
       font-style: normal;
       font-weight: 500;
       line-height: 1.5rem;
-      ${g(2)}
+      ${p(2)}
     }
 
     & .text__tag {
@@ -92,7 +92,7 @@ const y = s.div`
       font-style: normal;
       font-weight: 400;
       line-height: 1.25rem;
-      ${g(2)}
+      ${p(2)}
     }
 
     & .text__action {
@@ -123,8 +123,15 @@ const y = s.div`
       width: 9rem;
     }
   }
-    cursor: pointer;
-`, k = h(
+  cursor: pointer;
+
+  @media (max-width: ${c + "px"}) {
+    & .wrapper__image {
+      height: 100%;
+      max-height: 14.5rem;
+    }
+  }
+`, k = f(
   ({
     title: r,
     imageUrl: e,
@@ -133,27 +140,27 @@ const y = s.div`
     onSelectCard: l = () => {
     },
     className: o,
-    position: d,
-    tag: c,
+    position: m,
+    tag: g,
     backgroundColor: x
   }, u) => {
     const _ = v();
-    return /* @__PURE__ */ t(w, { children: /* @__PURE__ */ m(
+    return /* @__PURE__ */ t(w, { children: /* @__PURE__ */ d(
       y,
       {
         ref: u,
         theme: _,
         className: o,
-        position: d,
+        position: m,
         backgroundColor: x,
         onClick: l,
         children: [
           /* @__PURE__ */ t("img", { src: e, className: "wrapper__image" }),
-          /* @__PURE__ */ m("div", { className: "wrapper__text", children: [
-            c && /* @__PURE__ */ t("div", { className: "text__tag", children: c }),
+          /* @__PURE__ */ d("div", { className: "wrapper__text", children: [
+            g && /* @__PURE__ */ t("div", { className: "text__tag", children: g }),
             /* @__PURE__ */ t("div", { className: "text__title", children: r }),
-            p(i) && /* @__PURE__ */ t("div", { className: "text__description", children: i }),
-            p(a) && /* @__PURE__ */ t(
+            h(i) && /* @__PURE__ */ t("div", { className: "text__description", children: i }),
+            h(a) && /* @__PURE__ */ t(
               b,
               {
                 text: a,
@@ -189,7 +196,7 @@ const y = s.div`
     }
   }
 
-  @media (max-width: ${f + "px"}) {
+  @media (max-width: ${c + "px"}) {
     gap: 1.25rem;
 
     & .regular-title {
@@ -210,26 +217,25 @@ const y = s.div`
   height: 30rem;
   max-height: 30rem;
 
-  @media (max-width: ${f + "px"}) {
+  @media (max-width: ${c + "px"}) {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     width: 100%;
     height: 100%;
     max-height: 100%;
-    padding: 0 1rem;
   }
-`, I = h(
+`, I = f(
   ({ title: r, items: e, limit: i = 3, onSelectCard: a = () => {
-  } }, l) => /* @__PURE__ */ m($, { ref: l, children: [
+  } }, l) => /* @__PURE__ */ d($, { 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, d) => /* @__PURE__ */ t(
+    /* @__PURE__ */ t(N, { limit: i, children: e && (e == null ? void 0 : e.map((o, m) => /* @__PURE__ */ t(
       k,
       {
         ...o,
         onSelectCard: () => a(o)
       },
-      `landing-page-masonry-general-card__${d + 1}`
+      `landing-page-masonry-general-card__${m + 1}`
     ))) })
   ] })
 );

package/dist/ProductsWithBannerSection.cjs

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

package/dist/ProductsWithBannerSection.js

@@ -1,10 +1,10 @@
 import { jsxs as s, jsx as r, Fragment as c } from "react/jsx-runtime";
 import { forwardRef as u, Suspense as P, memo as y, useMemo as N } from "react";
 import { s as p } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as S } from "./consts-BuFChS64.js";
+import { M as g } from "./consts-BuFChS64.js";
 import { u as $ } from "./useDetectMobile-Bkvj0VMa.js";
 import { R as U } from "./style-DFPWLJBr.js";
-import { p as I, o as b, l as M, k as W } from "./utils-BdsZgOUE.js";
+import { p as I, o as w, l as M, k as W } from "./utils-BdsZgOUE.js";
 import { P as j } from "./index-CF3HhgvN.js";
 const E = p.div`
   width: 100%;
@@ -23,12 +23,19 @@ const E = p.div`
     height: 100%;
     object-fit: cover;
   }
+
+  @media (max-width: ${g + "px"}) {
+    height: 100%;
+    min-height: 100%;
+    max-height: 100%;
+    aspect-ratio: 1 / 1;
+  }
 `, R = p.div`
   display: grid;
   grid-template-columns: ${(t) => `repeat(${t.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${S + "px"}) {
+  @media (max-width: ${g + "px"}) {
     display: flex;
     gap: 1rem;
     overflow-x: auto;
@@ -67,18 +74,18 @@ const E = p.div`
   }
 
   & .skeleton-img {
-    background-color: ${b("-90deg")};
+    background-color: ${w("-90deg")};
     border-radius: 0.75rem;
     border: 1px solid white;
   }
 
   & .skeleton-title {
-    background-color: ${b("-90deg")};
+    background-color: ${w("-90deg")};
     width: 100%;
     height: 1.25rem;
   }
 
-  @media (max-width: ${S + "px"}) {
+  @media (max-width: ${g + "px"}) {
     & img {
       width: 8.875rem;
       height: 8.875rem;
@@ -94,13 +101,13 @@ const E = p.div`
     uuid: o,
     title: i,
     image: a,
-    sellerUuid: g,
-    onSelectCard: n = () => {
+    sellerUuid: h,
+    onSelectCard: d = () => {
     },
-    imageComponent: d
+    imageComponent: n
   } = t;
-  return /* @__PURE__ */ s(k, { ref: l, className: "product-card", onClick: n, children: [
-    M(d) ? d : /* @__PURE__ */ r(j, { src: a }),
+  return /* @__PURE__ */ s(k, { ref: l, className: "product-card", onClick: d, children: [
+    M(n) ? n : /* @__PURE__ */ r(j, { src: a }),
     /* @__PURE__ */ r("div", { className: "card-title", children: i })
   ] });
 }), B = u(({}, t) => /* @__PURE__ */ s(k, { className: "product-card", children: [
@@ -125,45 +132,45 @@ const E = p.div`
     limit: i,
     keyPrefix: a
   }
-) : t }), w = y(z), q = u((t, l) => {
+) : t }), S = y(z), q = u((t, l) => {
   const {
     icon: o,
     items: i,
     limit: a = 4,
-    imageUrl: g,
-    onSelectCard: n = () => {
+    imageUrl: h,
+    onSelectCard: d = () => {
     },
-    title: d = "Season inspiration",
+    title: n = "Season inspiration",
     isLoading: v = !1,
-    getImage: h = () => {
+    getImage: f = () => {
     }
-  } = t, f = $(), C = N(() => /* @__PURE__ */ r(c, { children: f === !0 ? i == null ? void 0 : i.map((e, m) => /* @__PURE__ */ r(
-    w,
+  } = t, b = $(), C = N(() => /* @__PURE__ */ r(c, { children: b === !0 ? i == null ? void 0 : i.map((e, m) => /* @__PURE__ */ r(
+    S,
     {
       title: e == null ? void 0 : e.name,
       sellerUuid: e == null ? void 0 : e.sellerUuid,
       uuid: e == null ? void 0 : e.uuid,
-      onSelectCard: () => n({ uuid: e == null ? void 0 : e.uuid, nameSlug: e == null ? void 0 : e.nameSlug }),
-      image: h(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null
+      onSelectCard: () => d({ uuid: e == null ? void 0 : e.uuid, nameSlug: e == null ? void 0 : e.nameSlug }),
+      image: f(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null
     },
     m
   )) : i == null ? void 0 : i.slice(0, a).map((e, m) => /* @__PURE__ */ r(
-    w,
+    S,
     {
       title: e == null ? void 0 : e.name,
       sellerUuid: e == null ? void 0 : e.sellerUuid,
       uuid: e == null ? void 0 : e.uuid,
-      onSelectCard: () => n({ uuid: e == null ? void 0 : e.uuid, nameSlug: e == null ? void 0 : e.nameSlug }),
-      image: h(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null
+      onSelectCard: () => d({ uuid: e == null ? void 0 : e.uuid, nameSlug: e == null ? void 0 : e.nameSlug }),
+      image: f(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null
     },
     m
-  )) }), [i, f, a]);
+  )) }), [i, b, a]);
   return /* @__PURE__ */ s(U, { ref: l, children: [
     /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ s("div", { className: "regular-title-text", children: [
       W(o) && /* @__PURE__ */ r("i", { className: o }),
-      /* @__PURE__ */ r("span", { children: d })
+      /* @__PURE__ */ r("span", { children: n })
     ] }) }),
-    /* @__PURE__ */ r(E, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: g }) }),
+    /* @__PURE__ */ r(E, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: h }) }),
     /* @__PURE__ */ r(R, { limit: a, children: /* @__PURE__ */ r(
       _,
       {

package/dist/ShopCardsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),c=require("react"),v=require("./Button.cjs"),p=require("./skeleton-CWPYgHom.cjs"),j=require("./utils-Dl9xPH4c.cjs"),b=require("./emotion-styled.browser.esm-BtEseadx.cjs"),C=require("./consts-goSZX3xP.cjs"),d=b.styled.div`
+"use strict";const t=require("react/jsx-runtime"),b=require("react"),u=require("./Button.cjs"),_=require("./skeleton-CanJ6Gr6.cjs"),d=require("./utils-Dl9xPH4c.cjs"),j=require("./emotion-styled.browser.esm-BtEseadx.cjs"),C=require("./consts-goSZX3xP.cjs"),k=j.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -67,25 +67,63 @@
     width: 100%;
   }
 
+  & .wrapper__view-all {
+    align-self: center;
+    color: var(--neutral-600, #0f2a46);
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.25rem;
+    letter-spacing: -0.0056rem;
+
+    &:focus {
+      outline: none;
+    }
+
+    display: none;
+  }
+
   @media (max-width: ${C.MOBILE_SIZE_PX+"px"}) {
+    & .wrapper__view-all {
+      display: unset;
+    }
+
     & .wrapper__heading {
       & .wrapper__title {
         & .title__action {
-          display: none;
+          &.grid {
+            display: none;
+          }
         }
       }
     }
 
     & .wrapper__cards {
-      grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCardsForMobile}, minmax(0, 1fr))`};
       gap: 1rem;
-    }
-  }
 
-  @media (max-width: 400px) {
-    & .wrapper__cards {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-      gap: 1rem;
+      ${i=>i!=null&&i.gridView?`
+            grid-template-columns: repeat(2, minmax(0, 1fr)); 
+            & > div {
+              min-width:100%;
+             max-width:100%;
+            }`:`
+            display: flex;
+            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 */
+            }`}
     }
   }
-`,S=c.forwardRef(({title:i,subtitle:s,items:n,limit:m=4,limitForMobile:u=2,buttonText:_="Show More",onSelectCard:g=()=>{},onButtonAction:l=()=>{},icon:o,getImage:x=()=>{},getProductImage:h=()=>{},hideProducts:f=!1,showRating:w=!0},y)=>{var a;return t.jsxs(d,{ref:y,limitCards:m,limitCardsForMobile:u,children:[t.jsxs("div",{className:"wrapper__heading",children:[t.jsxs("div",{className:"wrapper__title",children:[i&&t.jsxs("div",{className:"title__text",children:[j.isDefinedNotEmptyString(o)&&t.jsx("i",{className:o}),t.jsx("span",{children:i})]}),l&&t.jsx(v,{text:_,color:"neutral",borderRadius:"curved",btnType:"tinted",className:"title__action",onClick:l})]}),s&&t.jsx("div",{className:"wrapper__subtitle",children:s})]}),t.jsx("div",{className:"wrapper__cards",children:n&&(n==null?void 0:n.length)>0?n==null?void 0:n.map((e,r)=>t.jsx(p.ShopCard,{showRating:w,uuid:e==null?void 0:e.uuid,title:e==null?void 0:e.name,subtitle:e==null?void 0:e.shortDescription,rating:e==null?void 0:e.ratingArithmeticMean,reviewCount:e==null?void 0:e.reviewCount,products:e==null?void 0:e.products,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>g(e==null?void 0:e.uuid),image:x(e==null?void 0:e.profileImage,e==null?void 0:e.uuid)||null,getProductImage:h,canAcceptPayments:e==null?void 0:e.canAcceptPayments,hideProducts:f},`shop-card__${r+1}`)):(a=Array.from("1234"))==null?void 0:a.map((e,r)=>t.jsx(p.ShopCardSkeleton,{},`shop-card-skeleton__${r+1}`))})]})});module.exports=S;
+`,S=b.forwardRef(({title:i,subtitle:o,items:r,limit:g=4,limitForMobile:w=2,buttonText:a="Show More",onSelectCard:h=()=>{},onButtonAction:n=()=>{},icon:p,getImage:f=()=>{},getProductImage:x=()=>{},hideProducts:c=!1,showRating:y=!0,gridView:l=!1},v)=>{var m;return t.jsxs(k,{ref:v,limitCards:g,limitCardsForMobile:w,gridView:l,children:[t.jsxs("div",{className:"wrapper__heading",children:[t.jsxs("div",{className:"wrapper__title",children:[i&&t.jsxs("div",{className:"title__text",children:[d.isDefinedNotEmptyString(p)&&t.jsx("i",{className:p}),t.jsx("span",{children:i})]}),n&&t.jsx(u,{text:a,color:"neutral",borderRadius:"curved",btnType:"tinted",className:`title__action ${l?"grid":""}`,onClick:n})]}),o&&t.jsx("div",{className:"wrapper__subtitle",children:o})]}),t.jsx("div",{className:"wrapper__cards",children:r&&(r==null?void 0:r.length)>0?r==null?void 0:r.map((e,s)=>t.jsx(_.ShopCard,{showRating:!y,uuid:e==null?void 0:e.uuid,title:e==null?void 0:e.name,subtitle:e==null?void 0:e.shortDescription,rating:e==null?void 0:e.ratingArithmeticMean,reviewCount:e==null?void 0:e.reviewCount,products:e==null?void 0:e.products,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>h(e==null?void 0:e.uuid),image:f(e==null?void 0:e.profileImage,e==null?void 0:e.uuid)||null,getProductImage:x,canAcceptPayments:e==null?void 0:e.canAcceptPayments,hideProducts:!c},`shop-card__${s+1}`)):(m=Array.from("1234"))==null?void 0:m.map((e,s)=>t.jsx(_.ShopCardSkeleton,{},`shop-card-skeleton__${s+1}`))}),l&&n&&t.jsx(u,{text:a,borderRadius:"curved",btnType:"basic",color:"neutral",className:"wrapper__view-all",onClick:n})]})});module.exports=S;

package/dist/ShopCardsSection.js

@@ -1,11 +1,11 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { forwardRef as v } from "react";
-import C from "./Button.js";
-import { S as b, a as d } from "./skeleton-Bil8w1A7.js";
-import { k as S } from "./utils-BdsZgOUE.js";
-import { s as N } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as c } from "./consts-BuFChS64.js";
-const $ = N.div`
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import _ from "./Button.js";
+import { S as c, a as C } from "./skeleton-BWFqIToC.js";
+import { k } from "./utils-BdsZgOUE.js";
+import { s as S } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as N } from "./consts-BuFChS64.js";
+const $ = S.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -74,79 +74,119 @@ const $ = N.div`
     width: 100%;
   }
 
-  @media (max-width: ${c + "px"}) {
+  & .wrapper__view-all {
+    align-self: center;
+    color: var(--neutral-600, #0f2a46);
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.25rem;
+    letter-spacing: -0.0056rem;
+
+    &:focus {
+      outline: none;
+    }
+
+    display: none;
+  }
+
+  @media (max-width: ${N + "px"}) {
+    & .wrapper__view-all {
+      display: unset;
+    }
+
     & .wrapper__heading {
       & .wrapper__title {
         & .title__action {
-          display: none;
+          &.grid {
+            display: none;
+          }
         }
       }
     }
 
     & .wrapper__cards {
-      grid-template-columns: ${(t) => `repeat(${t == null ? void 0 : t.limitCardsForMobile}, minmax(0, 1fr))`};
       gap: 1rem;
-    }
-  }
 
-  @media (max-width: 400px) {
-    & .wrapper__cards {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-      gap: 1rem;
+      ${(t) => t != null && t.gridView ? `
+            grid-template-columns: repeat(2, minmax(0, 1fr)); 
+            & > div {
+              min-width:100%;
+             max-width:100%;
+            }` : `
+            display: flex;
+            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 */
+            }`}
     }
   }
-`, P = v(
+`, D = d(
   ({
     title: t,
-    subtitle: o,
-    items: i,
-    limit: m = 4,
-    limitForMobile: _ = 2,
-    buttonText: g = "Show More",
-    onSelectCard: f = () => {
+    subtitle: s,
+    items: r,
+    limit: g = 4,
+    limitForMobile: h = 2,
+    buttonText: p = "Show More",
+    onSelectCard: u = () => {
     },
-    onButtonAction: a = () => {
+    onButtonAction: l = () => {
     },
-    icon: p,
-    getImage: u = () => {
+    icon: m,
+    getImage: w = () => {
     },
-    getProductImage: h = () => {
+    getProductImage: y = () => {
     },
-    hideProducts: w = !1,
-    showRating: x = !0
-  }, y) => {
-    var s;
+    hideProducts: v = !1,
+    showRating: x = !0,
+    gridView: o = !1
+  }, b) => {
+    var f;
     return /* @__PURE__ */ n(
       $,
       {
-        ref: y,
-        limitCards: m,
-        limitCardsForMobile: _,
+        ref: b,
+        limitCards: g,
+        limitCardsForMobile: h,
+        gridView: o,
         children: [
           /* @__PURE__ */ n("div", { className: "wrapper__heading", children: [
             /* @__PURE__ */ n("div", { className: "wrapper__title", children: [
               t && /* @__PURE__ */ n("div", { className: "title__text", children: [
-                S(p) && /* @__PURE__ */ r("i", { className: p }),
-                /* @__PURE__ */ r("span", { children: t })
+                k(m) && /* @__PURE__ */ i("i", { className: m }),
+                /* @__PURE__ */ i("span", { children: t })
               ] }),
-              a && /* @__PURE__ */ r(
-                C,
+              l && /* @__PURE__ */ i(
+                _,
                 {
-                  text: g,
+                  text: p,
                   color: "neutral",
                   borderRadius: "curved",
                   btnType: "tinted",
-                  className: "title__action",
-                  onClick: a
+                  className: `title__action ${o ? "grid" : ""}`,
+                  onClick: l
                 }
               )
             ] }),
-            o && /* @__PURE__ */ r("div", { className: "wrapper__subtitle", children: o })
+            s && /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: s })
           ] }),
-          /* @__PURE__ */ r("div", { className: "wrapper__cards", children: i && (i == null ? void 0 : i.length) > 0 ? i == null ? void 0 : i.map((e, l) => /* @__PURE__ */ r(
-            b,
+          /* @__PURE__ */ i("div", { className: "wrapper__cards", children: r && (r == null ? void 0 : r.length) > 0 ? r == null ? void 0 : r.map((e, a) => /* @__PURE__ */ i(
+            c,
             {
-              showRating: x,
+              showRating: !x,
               uuid: e == null ? void 0 : e.uuid,
               title: e == null ? void 0 : e.name,
               subtitle: e == null ? void 0 : e.shortDescription,
@@ -154,19 +194,30 @@ const $ = N.div`
               reviewCount: e == null ? void 0 : e.reviewCount,
               products: e == null ? void 0 : e.products,
               imageComponent: e == null ? void 0 : e.imageComponent,
-              onSelectCard: () => f(e == null ? void 0 : e.uuid),
-              image: u(e == null ? void 0 : e.profileImage, e == null ? void 0 : e.uuid) || null,
-              getProductImage: h,
+              onSelectCard: () => u(e == null ? void 0 : e.uuid),
+              image: w(e == null ? void 0 : e.profileImage, e == null ? void 0 : e.uuid) || null,
+              getProductImage: y,
               canAcceptPayments: e == null ? void 0 : e.canAcceptPayments,
-              hideProducts: w
+              hideProducts: !v
             },
-            `shop-card__${l + 1}`
-          )) : (s = Array.from("1234")) == null ? void 0 : s.map((e, l) => /* @__PURE__ */ r(d, {}, `shop-card-skeleton__${l + 1}`)) })
+            `shop-card__${a + 1}`
+          )) : (f = Array.from("1234")) == null ? void 0 : f.map((e, a) => /* @__PURE__ */ i(C, {}, `shop-card-skeleton__${a + 1}`)) }),
+          o && l && /* @__PURE__ */ i(
+            _,
+            {
+              text: p,
+              borderRadius: "curved",
+              btnType: "basic",
+              color: "neutral",
+              className: "wrapper__view-all",
+              onClick: l
+            }
+          )
         ]
       }
     );
   }
 );
 export {
-  P as default
+  D as default
 };

package/dist/{index-CjQhwLEY.cjs → index-Cm0f72Po.cjs}

@@ -1 +1 @@
-"use strict";const e=require("react/jsx-runtime"),d=require("react"),i=require("./skeleton-BQd32q08.cjs"),x=require("./useDetectMobile-zkbzoOGV.cjs"),c=require("./Button.cjs"),m=require("./index-BueKsXT8.cjs"),p=d.forwardRef((o,n)=>{const{title:l,imageUrl:a,text:u,onCardClick:t,buttonText:r}=o,s=x.useDetectMobile();return e.jsxs(i.Wrapper,{ref:n,className:"blog-card",onClick:t,children:[e.jsx(m.ProductImageWrapper,{src:a}),e.jsxs(i.TextWrapper,{children:[e.jsx("div",{className:"text-wr-title",children:l}),e.jsx("div",{className:"text-wr",children:u}),s!==!0&&e.jsx(c,{type:"button",btnType:"outline",size:"medium",color:"gray",onClick:t,children:r})]}),s===!0&&e.jsx(c,{className:"action",type:"button",btnType:"outline",size:"medium",color:"gray",onClick:t,children:r})]})});exports.BlogCardLarge=p;
+"use strict";const e=require("react/jsx-runtime"),d=require("react"),i=require("./skeleton-BdbB-LdT.cjs"),x=require("./useDetectMobile-zkbzoOGV.cjs"),c=require("./Button.cjs"),m=require("./index-BueKsXT8.cjs"),p=d.forwardRef((o,n)=>{const{title:l,imageUrl:a,text:u,onCardClick:t,buttonText:r}=o,s=x.useDetectMobile();return e.jsxs(i.Wrapper,{ref:n,className:"blog-card",onClick:t,children:[e.jsx(m.ProductImageWrapper,{src:a}),e.jsxs(i.TextWrapper,{children:[e.jsx("div",{className:"text-wr-title",children:l}),e.jsx("div",{className:"text-wr",children:u}),s!==!0&&e.jsx(c,{type:"button",btnType:"outline",size:"medium",color:"gray",onClick:t,children:r})]}),s===!0&&e.jsx(c,{className:"action",type:"button",btnType:"outline",size:"medium",color:"gray",onClick:t,children:r})]})});exports.BlogCardLarge=p;

package/dist/{index-DXNlFyQ4.js → index-DGp7FHms.js}

@@ -1,6 +1,6 @@
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { W as d, T as u } from "./skeleton-B74purm7.js";
+import { W as d, T as u } from "./skeleton-CQPwIEP0.js";
 import { u as b } from "./useDetectMobile-Bkvj0VMa.js";
 import a from "./Button.js";
 import { P as f } from "./index-CF3HhgvN.js";