@lanaco/lnc-react-ui 4.0.25 → 4.0.26

package/dist/index9.cjs

@@ -1,90 +1,150 @@
-"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);
+"use strict";const r=require("react/jsx-runtime"),c=require("react"),x=require("./Button.cjs"),s=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),i=require("./utils-CE6bljYe.cjs"),h=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),m=require("./consts-dNz9tpt4.cjs"),f=s.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   border-radius: 0.75rem;
-  margin-bottom: 0.5rem;
+  position: relative;
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
 
-  & img {
-    width: 100%;
+  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"}};
+
+  & .wrapper__image {
     height: 100%;
+    width: 100%;
     object-fit: cover;
+    border-radius: 0.75rem;
   }
-`,v=c.newStyled.div`
-  display: grid;
-  grid-template-columns: ${o=>`repeat(${o.limit},  minmax(0, 1fr))`};
-  gap: 1.25rem;
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  & .wrapper__image--skeleton {
+    width: 24.5rem;
+    height: 30rem;
+    border-radius: 0.75rem;
+    background-color: ${i.linearGradientAnimation("-90deg")};
+  }
+
+  & .wrapper__text {
     display: flex;
-    gap: 1rem;
-    overflow-x: auto;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 1rem;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    gap: 0.75rem;
+
+    & .text__title {
+      color: var(--white, #ffffff);
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.5rem;
+      ${i.truncateTextInRows(2)}
+    }
+
+    & .text__tag {
+      background-color: var(--warning-600, #d97706);
+      color: var(--white, #ffffff);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.25rem;
+      padding: 0.25rem 0.5rem;
+
+      border-radius: 0.375rem;
+      background: var(--warning-600, #d97706);
+    }
+
+    & .text__description {
+      color: var(--white);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.25rem;
+      ${i.truncateTextInRows(2)}
+    }
+
+    & .text__action {
+      background: var(--white);
+      color: var(--black);
+
+      &:hover {
+        background: var(--primary-500, #f59e0b);
+        color: var(--white);
+      }
+    }
 
-    -webkit-overflow-scrolling: touch;
-    ::-webkit-scrollbar {
-      -webkit-appearance: none;
+    & .text__title--skeleton {
+      background-color: ${i.linearGradientAnimation("-90deg")};
+      height: 1rem;
+      width: 9rem;
     }
-    -ms-overflow-style: none;
-    /* Internet Explorer 10+ */
-    scrollbar-width: none;
-    /* Firefox */
-
-    &::-webkit-scrollbar {
-      display: none;
-      /* Safari and Chrome */
+
+    & .text__description--skeleton {
+      background-color: ${i.linearGradientAnimation("-90deg")};
+      height: 1rem;
+      width: 12rem;
+    }
+
+    & .text__action--skeleton {
+      background-color: ${i.linearGradientAnimation("-90deg")};
+      height: 2rem;
+      width: 9rem;
     }
   }
-`,y=c.newStyled.div`
+`,u=c.forwardRef(({title:t,image:e,description:n,actionText:o,onSelectCard:a=()=>{},className:l,position:g,tag:d},y)=>{const p=h.useTheme();return r.jsx(r.Fragment,{children:r.jsxs(f,{theme:p,className:l,onClick:a,position:g,children:[r.jsx("img",{src:e,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__text",children:[d&&r.jsx("div",{className:"text__tag",children:d}),r.jsx("div",{className:"text__title",children:t}),i.isDefinedNotEmptyString(n)&&r.jsx("div",{className:"text__description",children:n}),i.isDefinedNotEmptyString(o)&&r.jsx(x,{text:o,onClick:a,className:"text__action"})]})]})})}),_=s.newStyled.div`
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  cursor: pointer;
+  gap: 1.5rem;
 
-  & img {
-    width: 100%;
-    aspect-ratio: 1 / 1; /* defining the aspect ratio of the image */
-    object-fit: cover; /* making sure the image isn't distorted */
-    border-radius: 0.75rem;
-  }
-
-  & .card-title {
-    font-size: 0.875rem;
+  & .regular-title {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 1.5rem;
     font-weight: 600;
-     ${a.truncateTextInRows(2)}
-  }
+    & .regular-title-text {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+    }
 
-  &:hover {
-    & .card-title {
-      color: var(--primary-500, #F59E0B);
+    & i {
+      font-size: 1.5rem;
+      color: var(--primary-500, #f59e0b);
     }
   }
 
-  & .skeleton-img {
-    background-color: ${a.linearGradientAnimation("-90deg")};
-    border-radius: 0.75rem;
-    border: 1px solid white;
-  }
+  @media (max-width: ${m.MOBILE_SIZE_PX+"px"}) {
+    gap: 1.25rem;
 
-  & .skeleton-title {
-    background-color: ${a.linearGradientAnimation("-90deg")};
-    width: 100%;
-    height: 1.25rem;
-  }
+    & .regular-title {
+      font-size: 1.375rem;
 
-  @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;
+      &.center {
+        justify-content: center;
+      }
     }
   }
-`,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;
+`,w=s.newStyled.div`
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: 15rem 15rem;
+  grid-column-gap: 1.25rem;
+  grid-row-gap: 1.25rem;
+  height: 30rem;
+  max-height: 30rem;
+
+  @media (max-width: ${m.MOBILE_SIZE_PX+"px"}) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    padding: 0 1rem;
+  }
+`,b=c.forwardRef(({title:t,items:e,limit:n=3},o)=>r.jsxs(_,{children:[r.jsx("div",{className:"regular-title",children:r.jsx("div",{className:"regular-title-text",children:r.jsx("span",{children:t})})}),r.jsx(w,{limit:n,children:e&&(e==null?void 0:e.map((a,l)=>r.jsx(u,{...a},`landing-page-masonry-general-card__${l+1}`)))})]}));module.exports=b;

package/dist/index9.js

@@ -1,152 +1,222 @@
-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 { jsx as t, Fragment as u, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import _ from "./Button.js";
+import { n as d } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { m as o, t as c, k as g } from "./utils-DtEdJZWa.js";
+import { u as w } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.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);
+const b = d.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   border-radius: 0.75rem;
-  margin-bottom: 0.5rem;
+  position: relative;
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
 
-  & img {
-    width: 100%;
+  grid-column: ${(r) => {
+  var e;
+  return ((e = r.position) == null ? void 0 : e.columnStart) || "1";
+}} /
+    ${(r) => {
+  var e;
+  return ((e = r.position) == null ? void 0 : e.columnEnd) || "6";
+}};
+  grid-row: ${(r) => {
+  var e;
+  return ((e = r.position) == null ? void 0 : e.rowStart) || "1";
+}} /
+    ${(r) => {
+  var e;
+  return ((e = r.position) == null ? void 0 : e.rowEnd) || "1";
+}};
+
+  & .wrapper__image {
     height: 100%;
+    width: 100%;
     object-fit: cover;
+    border-radius: 0.75rem;
   }
-`, $ = s.div`
-  display: grid;
-  grid-template-columns: ${(a) => `repeat(${a.limit},  minmax(0, 1fr))`};
-  gap: 1.25rem;
 
-  @media (max-width: ${f + "px"}) {
+  & .wrapper__image--skeleton {
+    width: 24.5rem;
+    height: 30rem;
+    border-radius: 0.75rem;
+    background-color: ${o("-90deg")};
+  }
+
+  & .wrapper__text {
     display: flex;
-    gap: 1rem;
-    overflow-x: auto;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 1rem;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    gap: 0.75rem;
+
+    & .text__title {
+      color: var(--white, #ffffff);
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.5rem;
+      ${c(2)}
+    }
+
+    & .text__tag {
+      background-color: var(--warning-600, #d97706);
+      color: var(--white, #ffffff);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.25rem;
+      padding: 0.25rem 0.5rem;
 
-    -webkit-overflow-scrolling: touch;
-    ::-webkit-scrollbar {
-      -webkit-appearance: none;
+      border-radius: 0.375rem;
+      background: var(--warning-600, #d97706);
     }
-    -ms-overflow-style: none;
-    /* Internet Explorer 10+ */
-    scrollbar-width: none;
-    /* Firefox */
-
-    &::-webkit-scrollbar {
-      display: none;
-      /* Safari and Chrome */
+
+    & .text__description {
+      color: var(--white);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.25rem;
+      ${c(2)}
+    }
+
+    & .text__action {
+      background: var(--white);
+      color: var(--black);
+
+      &:hover {
+        background: var(--primary-500, #f59e0b);
+        color: var(--white);
+      }
+    }
+
+    & .text__title--skeleton {
+      background-color: ${o("-90deg")};
+      height: 1rem;
+      width: 9rem;
+    }
+
+    & .text__description--skeleton {
+      background-color: ${o("-90deg")};
+      height: 1rem;
+      width: 12rem;
+    }
+
+    & .text__action--skeleton {
+      background-color: ${o("-90deg")};
+      height: 2rem;
+      width: 9rem;
     }
   }
-`, j = s.div`
+`, v = p(
+  ({
+    title: r,
+    image: e,
+    description: i,
+    actionText: n,
+    onSelectCard: a = () => {
+    },
+    className: l,
+    position: h,
+    tag: s
+  }, $) => {
+    const x = w();
+    return /* @__PURE__ */ t(u, { children: /* @__PURE__ */ m(
+      b,
+      {
+        theme: x,
+        className: l,
+        onClick: a,
+        position: h,
+        children: [
+          /* @__PURE__ */ t("img", { src: e, className: "wrapper__image" }),
+          /* @__PURE__ */ m("div", { className: "wrapper__text", children: [
+            s && /* @__PURE__ */ t("div", { className: "text__tag", children: s }),
+            /* @__PURE__ */ t("div", { className: "text__title", children: r }),
+            g(i) && /* @__PURE__ */ t("div", { className: "text__description", children: i }),
+            g(n) && /* @__PURE__ */ t(
+              _,
+              {
+                text: n,
+                onClick: a,
+                className: "text__action"
+              }
+            )
+          ] })
+        ]
+      }
+    ) });
+  }
+), y = d.div`
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  cursor: pointer;
+  gap: 1.5rem;
 
-  & img {
-    width: 100%;
-    aspect-ratio: 1 / 1; /* defining the aspect ratio of the image */
-    object-fit: cover; /* making sure the image isn't distorted */
-    border-radius: 0.75rem;
-  }
-
-  & .card-title {
-    font-size: 0.875rem;
+  & .regular-title {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 1.5rem;
     font-weight: 600;
-     ${k(2)}
-  }
+    & .regular-title-text {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+    }
 
-  &:hover {
-    & .card-title {
-      color: var(--primary-500, #F59E0B);
+    & i {
+      font-size: 1.5rem;
+      color: var(--primary-500, #f59e0b);
     }
   }
 
-  & .skeleton-img {
-    background-color: ${h("-90deg")};
-    border-radius: 0.75rem;
-    border: 1px solid white;
-  }
+  @media (max-width: ${f + "px"}) {
+    gap: 1.25rem;
 
-  & .skeleton-title {
-    background-color: ${h("-90deg")};
-    width: 100%;
-    height: 1.25rem;
+    & .regular-title {
+      font-size: 1.375rem;
+
+      &.center {
+        justify-content: center;
+      }
+    }
   }
+`, k = d.div`
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: 15rem 15rem;
+  grid-column-gap: 1.25rem;
+  grid-row-gap: 1.25rem;
+  height: 30rem;
+  max-height: 30rem;
 
   @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;
-    }
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    padding: 0 1rem;
   }
-`, u = g((a, c) => {
-  const {
-    uuid: l,
-    title: i,
-    image: o,
-    sellerUuid: p,
-    onSelectCard: t = () => {
-    },
-    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 })
-  ] });
-}), P = g((a, c) => {
-  const {
-    icon: l,
-    items: i,
-    limit: o = 4,
-    bannerImage: p,
-    onSelectCard: t = () => {
-    },
-    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,
-        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)
-      },
-      n
-    )) : i == null ? void 0 : i.slice(0, o).map((e, n) => /* @__PURE__ */ r(
-      u,
+`, C = p(
+  ({ title: r, items: e, limit: i = 3 }, n) => /* @__PURE__ */ m(y, { children: [
+    /* @__PURE__ */ t("div", { className: "regular-title", children: /* @__PURE__ */ t("div", { className: "regular-title-text", children: /* @__PURE__ */ t("span", { children: r }) }) }),
+    /* @__PURE__ */ t(k, { limit: i, children: e && (e == null ? void 0 : e.map((a, l) => /* @__PURE__ */ t(
+      v,
       {
-        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)
+        ...a
       },
-      n
-    )) })
-  ] });
-});
+      `landing-page-masonry-general-card__${l + 1}`
+    ))) })
+  ] })
+);
 export {
-  P as default
+  C as default
 };

package/dist/useEffectOnce-DFrzfNzT.cjs

@@ -0,0 +1 @@
+"use strict";const c=require("react");var t=function(e){c.useEffect(e,[])};exports.useEffectOnce=t;

package/dist/useEffectOnce-guOKBPuL.js

@@ -0,0 +1,7 @@
+import { useEffect as f } from "react";
+var c = function(e) {
+  f(e, []);
+};
+export {
+  c as u
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "4.0.25",
+  "version": "4.0.26",
   "description": "React component library",
   "type": "module",
   "keywords": [
@@ -123,7 +123,11 @@
     "./BannerSectionGrid": "./dist/BannerSectionGrid.js",
     "./BannerSectionSimple": "./dist/BannerSectionSimple.js",
     "./BannerSectionWithList": "./dist/BannerSectionWithList.js",
-    "./BannerSectionWithListImage": "./dist/BannerSectionWithListImage.js"
+    "./BannerSectionWithListImage": "./dist/BannerSectionWithListImage.js",
+    "./BrandHitsSection": "./dist/BrandHitsSection.js",
+    "./FieldOfInterestsMasonrySection": "./dist/FieldOfInterestsMasonrySection.js",
+    "./FieldOfInterestsWithAvatarsCardsSection": "./dist/FieldOfInterestsWithAvatarsCardsSection.js",
+    "./FieldOfInterestsWithTagsCardsSection": "./dist/FieldOfInterestsWithTagsCardsSection.js"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.0.5",

package/vite.config.js

@@ -181,6 +181,22 @@ export default defineConfig({
           __dirname,
           "src/Landing Sections/banners-sections/banner-section-with-list-image/index.jsx"
         ),
+        resolve(
+          __dirname,
+          "src/Landing Sections/brand-sections/brand-hits-section/index.jsx"
+        ),
+        resolve(
+          __dirname,
+          "src/Landing Sections/field-of-interests-sections/field-of-interests-masonry-section/index.jsx"
+        ),
+        resolve(
+          __dirname,
+          "src/Landing Sections/field-of-interests-sections/field-of-interests-with-avatars-cards-section/index.jsx"
+        ),
+        resolve(
+          __dirname,
+          "src/Landing Sections/field-of-interests-sections/field-of-interests-with-tags-cards-section/index.jsx"
+        ),
       ],
       name: "@lanaco/lnc-react-ui",
       fileName: (format, name) => {