@lanaco/lnc-react-ui 4.0.38 → 4.0.40

package/dist/GiftCardsSection.cjs

@@ -3,10 +3,7 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 0.75rem;
-
-  &:hover {
-    cursor: pointer;
-  }
+  cursor: pointer;
 
   & .wrapper__card {
     width: 100%;
@@ -57,13 +54,20 @@
     line-height: 1.5rem;
     width: 100%;
     ${s.truncateTextInRows(2)}
+    transition: var(--transition, all 0.2s ease);
+  }
+
+  &:hover {
+    & .wrapper__text {
+      color: var(--primary-500, #f59e0b);
+    }
   }
 `,_=f.newStyled.div`
   width: 100%;
   height: 11.5rem;
   border-radius: 0.75rem;
   background: ${s.linearGradientAnimation("-90deg")};
-`,h=d.forwardRef(({image:r,imageComponent:o,text:i,price:l,currency:p,onSelectCard:n=()=>{}},a)=>t.jsxs(w,{onClick:n,children:[t.jsxs("div",{className:"wrapper__card",children:[s.isDefined(o)?o:t.jsx("img",{src:r,className:"wrapper__image"}),t.jsx("div",{className:"wrapper__tag",children:`${s.formatPrice(l)} ${s.GetCurrencySymbol(p)}`})]}),t.jsx("div",{className:"wrapper__text",children:i})]})),c=d.forwardRef(({},r)=>t.jsx(_,{})),u=f.newStyled.div`
+`,h=d.forwardRef(({image:r,imageComponent:o,text:i,price:l,currency:p,onSelectCard:n=()=>{}},a)=>t.jsxs(w,{ref:a,onClick:n,children:[t.jsxs("div",{className:"wrapper__card",children:[s.isDefined(o)?o:t.jsx("img",{src:r,className:"wrapper__image"}),t.jsx("div",{className:"wrapper__tag",children:`${s.formatPrice(l)} ${s.GetCurrencySymbol(p)}`})]}),t.jsx("div",{className:"wrapper__text",children:i})]})),c=d.forwardRef(({},r)=>t.jsx(_,{})),u=f.newStyled.div`
   display: flex;
   flex-direction: column;
   align-items: center;

package/dist/GiftCardsSection.js

@@ -1,17 +1,14 @@
 import { jsxs as l, jsx as i } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
-import { t as h, m as _, l as w, n as x, G as c } from "./utils-DtRLzzTZ.js";
+import { t as _, m as h, l as w, n as x, G as c } from "./utils-DtRLzzTZ.js";
 import { n as g } from "./emotion-styled.browser.esm-CjCaF13H.js";
 import { M as u } from "./consts-C1uHV4xc.js";
-const y = g.div`
+const v = g.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.75rem;
-
-  &:hover {
-    cursor: pointer;
-  }
+  cursor: pointer;
 
   & .wrapper__card {
     width: 100%;
@@ -61,25 +58,32 @@ const y = g.div`
     font-weight: 500;
     line-height: 1.5rem;
     width: 100%;
-    ${h(2)}
+    ${_(2)}
+    transition: var(--transition, all 0.2s ease);
+  }
+
+  &:hover {
+    & .wrapper__text {
+      color: var(--primary-500, #f59e0b);
+    }
   }
-`, v = g.div`
+`, y = g.div`
   width: 100%;
   height: 11.5rem;
   border-radius: 0.75rem;
-  background: ${_("-90deg")};
+  background: ${h("-90deg")};
 `, b = f(
-  ({ image: r, imageComponent: o, text: t, price: s, currency: p, onSelectCard: a = () => {
-  } }, n) => /* @__PURE__ */ l(y, { onClick: a, children: [
+  ({ image: r, imageComponent: a, text: t, price: s, currency: p, onSelectCard: o = () => {
+  } }, n) => /* @__PURE__ */ l(v, { ref: n, onClick: o, children: [
     /* @__PURE__ */ l("div", { className: "wrapper__card", children: [
-      w(o) ? o : /* @__PURE__ */ i("img", { src: r, className: "wrapper__image" }),
+      w(a) ? a : /* @__PURE__ */ i("img", { src: r, className: "wrapper__image" }),
       /* @__PURE__ */ i("div", { className: "wrapper__tag", children: `${x(
         s
       )} ${c(p)}` })
     ] }),
     /* @__PURE__ */ i("div", { className: "wrapper__text", children: t })
   ] })
-), $ = f(({}, r) => /* @__PURE__ */ i(v, {})), N = g.div`
+), $ = f(({}, r) => /* @__PURE__ */ i(y, {})), N = g.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -128,16 +132,16 @@ const y = g.div`
 `, M = f(
   ({
     title: r,
-    subtitle: o,
+    subtitle: a,
     items: t,
     limit: s = 4,
     limitForMobile: p = 1,
-    onSelectCard: a = () => {
+    onSelectCard: o = () => {
     }
   }) => {
     var d;
     const n = (e) => {
-      a == null || a(e == null ? void 0 : e.uuid);
+      o == null || o(e == null ? void 0 : e.uuid);
     };
     return /* @__PURE__ */ l(
       N,
@@ -147,7 +151,7 @@ const y = g.div`
         children: [
           /* @__PURE__ */ l("div", { className: "wrapper__heading", children: [
             r && /* @__PURE__ */ i("div", { className: "wrapper__title", children: r }),
-            o && /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: o })
+            a && /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: a })
           ] }),
           /* @__PURE__ */ i("div", { className: "wrapper__cards", children: t && (t == null ? void 0 : t.length) > 0 ? t == null ? void 0 : t.map((e, m) => /* @__PURE__ */ i(
             b,

package/dist/LocationSearchSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),l=require("react"),o=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),d=require("./consts-CtNoHdBj.cjs"),f=require("./index-Q_i-aqsF.cjs"),v=o.newStyled.div`
+"use strict";const r=require("react/jsx-runtime"),l=require("react"),o=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),d=require("./consts-CtNoHdBj.cjs"),f=require("./index-Dn5tPLgP.cjs"),v=o.newStyled.div`
   display: flex;
   flex-direction: column;
   padding: 1.25rem;

package/dist/LocationSearchSection.js

@@ -2,7 +2,7 @@ import { jsxs as a, jsx as n } from "react/jsx-runtime";
 import { forwardRef as u, Fragment as v } from "react";
 import { n as t } from "./emotion-styled.browser.esm-CjCaF13H.js";
 import { M as d } from "./consts-C1uHV4xc.js";
-import { S as w } from "./index-CT6_7UFb.js";
+import { S as w } from "./index-5cttM4t7.js";
 const S = t.div`
   display: flex;
   flex-direction: column;

package/dist/MasonryGeneralCardsSection.cjs

@@ -5,17 +5,26 @@
   border-radius: 0.75rem;
   position: relative;
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
+  cursor: pointer;
 
   grid-column: ${t=>{var e;return((e=t.position)==null?void 0:e.columnStart)||"1"}} /
     ${t=>{var e;return((e=t.position)==null?void 0:e.columnEnd)||"6"}};
   grid-row: ${t=>{var e;return((e=t.position)==null?void 0:e.rowStart)||"1"}} /
     ${t=>{var e;return((e=t.position)==null?void 0:e.rowEnd)||"1"}};
 
+  background: linear-gradient(
+    178deg,
+    rgba(0, 0, 0, 0) 1.5%,
+    rgba(0, 0, 0, 0.16) 8.95%,
+    #000 98.39%
+  );
+
   & .wrapper__image {
     height: 100%;
     width: 100%;
     object-fit: cover;
     border-radius: 0.75rem;
+    mix-blend-mode: multiply;
   }
 
   & .wrapper__image--skeleton {
@@ -36,6 +45,7 @@
     gap: 0.75rem;
 
     & .text__title {
+      transition: var(--transiton, all 0.2s ease);
       color: var(--white, #ffffff);
       font-size: 1rem;
       font-style: normal;
@@ -94,7 +104,17 @@
       width: 9rem;
     }
   }
-`,u=m.forwardRef(({title:t,image:e,description:a,actionText:o,onSelectCard:l=()=>{},className:n,position:s,tag:c},y)=>{const p=h.useTheme();return r.jsx(r.Fragment,{children:r.jsxs(f,{theme:p,className:n,onClick:l,position:s,children:[r.jsx("img",{src:e,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__text",children:[c&&r.jsx("div",{className:"text__tag",children:c}),r.jsx("div",{className:"text__title",children:t}),i.isDefinedNotEmptyString(a)&&r.jsx("div",{className:"text__description",children:a}),i.isDefinedNotEmptyString(o)&&r.jsx(x,{text:o,onClick:l,className:"text__action"})]})]})})}),_=d.newStyled.div`
+
+  &:hover {
+    cursor: pointer;
+
+    & .wrapper__text {
+      & .text__title {
+        color: var(--primary-500, #e87722);
+      }
+    }
+  }
+`,u=m.forwardRef(({title:t,image:e,description:a,actionText:o,onSelectCard:l=()=>{},className:n,position:s,tag:c},v)=>{const p=h.useTheme();return r.jsx(r.Fragment,{children:r.jsxs(f,{theme:p,className:n,onClick:l,position:s,children:[r.jsx("img",{src:e,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__text",children:[c&&r.jsx("div",{className:"text__tag",children:c}),r.jsx("div",{className:"text__title",children:t}),i.isDefinedNotEmptyString(a)&&r.jsx("div",{className:"text__description",children:a}),i.isDefinedNotEmptyString(o)&&r.jsx(x,{text:o,onClick:l,className:"text__action"})]})]})})}),_=d.newStyled.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;

package/dist/MasonryGeneralCardsSection.js

@@ -12,6 +12,7 @@ const b = s.div`
   border-radius: 0.75rem;
   position: relative;
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
+  cursor: pointer;
 
   grid-column: ${(r) => {
   var e;
@@ -30,11 +31,19 @@ const b = s.div`
   return ((e = r.position) == null ? void 0 : e.rowEnd) || "1";
 }};
 
+  background: linear-gradient(
+    178deg,
+    rgba(0, 0, 0, 0) 1.5%,
+    rgba(0, 0, 0, 0.16) 8.95%,
+    #000 98.39%
+  );
+
   & .wrapper__image {
     height: 100%;
     width: 100%;
     object-fit: cover;
     border-radius: 0.75rem;
+    mix-blend-mode: multiply;
   }
 
   & .wrapper__image--skeleton {
@@ -55,6 +64,7 @@ const b = s.div`
     gap: 0.75rem;
 
     & .text__title {
+      transition: var(--transiton, all 0.2s ease);
       color: var(--white, #ffffff);
       font-size: 1rem;
       font-style: normal;
@@ -113,6 +123,16 @@ const b = s.div`
       width: 9rem;
     }
   }
+
+  &:hover {
+    cursor: pointer;
+
+    & .wrapper__text {
+      & .text__title {
+        color: var(--primary-500, #e87722);
+      }
+    }
+  }
 `, v = f(
   ({
     title: r,

package/dist/OverlayGeneralCardsSection.cjs

@@ -1,127 +1,83 @@
-"use strict";const r=require("react/jsx-runtime"),c=require("react"),h=require("./Button.cjs"),_=require("./ThemeProvider.cjs"),d=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),o=require("./utils-NZLCh-J5.cjs"),x=require("./consts-CtNoHdBj.cjs"),g=require("./style-BR3tIhP1.cjs"),m=d.newStyled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  border-radius: 0.75rem;
+"use strict";const e=require("react/jsx-runtime"),c=require("react"),x=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),u=require("./consts-CtNoHdBj.cjs"),p=require("./style-DN1qT8BE.cjs"),d=require("./utils-NZLCh-J5.cjs"),f=require("./Button.cjs"),m=require("./ThemeProvider.cjs"),j=x.newStyled.div`
+  display: grid;
+  grid-template-columns: ${n=>`repeat(${n.limit}, 1fr)`};
+  gap: 1.25rem;
+  justify-items: center;
+
+  @media (max-width: ${u.MOBILE_SIZE_PX+"px"}) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+`,g=x.newStyled.div`
+  width: 100%;
+  overflow: hidden;
   position: relative;
-  max-height: 28.75rem;
 
-  & .wrapper__overlay {
-    position: relative;
+  border-radius: 0.75rem;
+  background: ${n=>n==null?void 0:n.overlay};
+  cursor: pointer;
 
-    &::after {
-      content: "";
-      position: absolute;
-      border-radius: 0.75rem;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 99%;
-      max-height: 28.75rem;
-      background: ${t=>t==null?void 0:t.overlay};
-    }
+  & .content-wrapper {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 2.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    justify-content: space-between;
+    height: 100%;
+    width: 100%;
   }
 
-  & .wrapper__image {
-    border-radius: 0.75rem;
-  }
+  & button {
+    width: fit-content;
+    color: var(--gray-950, #14161a);
 
-  & .wrapper__image--skeleton {
-    width: 100%;
-    border-radius: 0.75rem;
-    background-color: ${o.linearGradientAnimation("-90deg")};
+    &:hover {
+      color: var(--gray-700, #4e555f);
+    }
   }
 
-  & .wrapper__text {
+  & .content-text {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    padding: 1rem;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    & .text__title {
-      color: var(--white);
-      font-size: 1rem;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 1.5rem;
-      ${o.truncateTextInRows(2)}
-    }
+    gap: 1rem;
+    color: var(--white, #fff);
+    font-size: 1rem;
+    font-weight: 500;
 
-    & .text__description {
-      color: var(--white);
-      font-size: 1.375rem;
-      font-style: normal;
+    & .content-text-title {
       font-weight: 600;
-      line-height: 1.75rem;
-      ${o.truncateTextInRows(2)}
-    }
-
-    & .text__title--skeleton {
-      background-color: ${o.linearGradientAnimation("-90deg")};
-      height: 1rem;
-      width: 9rem;
-    }
-
-    & .text__description--skeleton {
-      background-color: ${o.linearGradientAnimation("-90deg")};
-      height: 1rem;
-      width: 12rem;
+      ${d.truncateTextInRows(2)}
     }
   }
 
-  & .text__action {
-    background: var(--white);
-    color: var(--black);
-    position: absolute;
-    bottom: 1rem;
-    left: 1rem;
-
-    &:hover {
-      background: var(--primary-500, #f59e0b);
-      color: var(--white);
-    }
+  & img {
+    aspect-ratio: 1 / 1;
+    mix-blend-mode: multiply;
+    width: 100%;
+    object-fit: cover;
   }
 
-  & .text__action--skeleton {
-    background-color: ${o.linearGradientAnimation("-90deg")};
-    height: 2rem;
-    width: 9rem;
-    position: absolute;
-    bottom: 1rem;
-    left: 1rem;
+  & .img-skeleton {
+    background-color: ${d.linearGradientAnimation("-90deg")};
+    min-height: 28.75rem;
   }
 
-  @media (max-width: ${x.MOBILE_SIZE_PX+"px"}) {
-    max-height: 100%;
-
-    & .wrapper__overlay {
-      &::after {
-        max-height: 100%;
-      }
-    }
-
-    & .wrapper__text {
-      top: 1rem;
-      left: 1rem;
-    }
-
-    & .text__action {
-      bottom: 2rem;
-      left: 2rem;
+  &:hover {
+    & .content-text {
+      color: var(--primary-500, #f59e0b);
     }
   }
-`,u=c.forwardRef(({title:t,image:a,overlay:n,description:l,actionText:s,actionLink:e,handleClick:i=()=>{}},v)=>{const{theme:p}=_.useTheme();return r.jsx(r.Fragment,{children:r.jsxs(m,{theme:p,overlay:n,onClick:i,children:[r.jsx("div",{className:"wrapper__overlay",children:r.jsx("img",{src:a,className:"wrapper__image"})}),r.jsxs("div",{className:"wrapper__text",children:[r.jsx("div",{className:"text__title",children:t}),r.jsx("div",{className:"text__description",children:l})]}),r.jsx(h,{text:s,onClick:i,className:"text__action"})]})})}),f=d.newStyled.div`
-  display: grid;
-  grid-template-columns: ${t=>`repeat(${t.limit}, 1fr)`};
-  gap: 1.25rem;
-  justify-items: center;
 
-  @media (max-width: ${x.MOBILE_SIZE_PX+"px"}) {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
+  @media (max-width: ${u.MOBILE_SIZE_PX+"px"}) {
+    & img,
+    .img.skeleton {
+      aspect-ratio: unset;
+      min-height: 28.75rem;
+      max-height: 28.75rem;
+    }
   }
-`,w=c.forwardRef(({title:t,items:a,limit:n=2,onSelectCard:l=()=>{}},s)=>r.jsxs(g.RegulatTitleSectionWrapper,{children:[r.jsx("div",{className:"regular-title center",children:r.jsx("div",{className:"regular-title-text",children:r.jsx("span",{children:t})})}),r.jsx(f,{limit:n,children:a&&(a==null?void 0:a.map((e,i)=>r.jsx(u,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,description:e==null?void 0:e.description,actionText:e==null?void 0:e.actionText,overlay:e==null?void 0:e.overlay,handleClick:()=>l(e==null?void 0:e.uuid)},`landing-page-overlay-general-card__${i+1}`)))})]}));module.exports=w;
+`,v=c.forwardRef(({},n)=>e.jsx(g,{ref:n,children:e.jsx("div",{className:"img-skeleton"})})),y=({limit:n=2,isLoading:t=!1,keyPrefix:o})=>e.jsx(e.Fragment,{children:Array.from({length:n},(a,s)=>e.jsx(v,{isLoading:t},`${o}-skeleton-product-card-${s}`))}),w=({children:n,fallbackComponent:t=e.jsx(e.Fragment,{}),isLoading:o=!1,limit:a,keyPrefix:s})=>e.jsx(c.Suspense,{fallbackComponent:t,children:o===!0?e.jsx(y,{isLoading:o,limit:a,keyPrefix:s}):n}),k=c.forwardRef(({title:n,image:t,overlay:o,description:a,actionText:s,handleClick:i=()=>{}},l)=>{const{theme:r}=m.useTheme();return e.jsx(e.Fragment,{children:e.jsxs(g,{ref:l,theme:r,overlay:o,onClick:i,children:[e.jsx("img",{src:t}),e.jsxs("div",{className:"content-wrapper",children:[e.jsxs("div",{className:"content-text",children:[e.jsx("div",{children:n}),e.jsx("div",{className:"content-text-title",children:a})]}),e.jsx(f,{text:s,onClick:i,className:"text__action",size:"medium",color:"gray"})]})]})})}),_=c.memo(k),b=c.forwardRef(({title:n,items:t,limit:o=2,onSelectCard:a=()=>{},isLoading:s=!1},i)=>{const l=c.useMemo(()=>e.jsx(e.Fragment,{children:t&&(t==null?void 0:t.map((r,h)=>e.jsx(_,{title:r==null?void 0:r.title,image:r==null?void 0:r.image,description:r==null?void 0:r.description,actionText:r==null?void 0:r.actionText,overlay:r==null?void 0:r.overlay,handleClick:()=>a(r==null?void 0:r.uuid)},`landing-page-overlay-general-card__${h+1}`)))}),[t,a]);return e.jsxs(p.RegulatTitleSectionWrapper,{ref:i,children:[e.jsx("div",{className:"regular-title center",children:e.jsx("div",{className:"regular-title-text",children:e.jsx("span",{children:n})})}),e.jsx(j,{limit:o,children:e.jsx(w,{isLoading:s,limit:o,keyPrefix:"explore-landing",children:l})})]})});module.exports=b;