@lanaco/lnc-react-ui 4.0.26 → 4.0.28

package/dist/index6.js

@@ -1,144 +1,222 @@
-import { jsxs as t, jsx as i } from "react/jsx-runtime";
-import { forwardRef as $ } from "react";
-import { n as r } from "./emotion-styled.browser.esm-BiK8DcgW.js";
-import { M as o } from "./consts-DNVz1x1I.js";
-import v from "./Button.js";
-import { u as y } from "./useDetectMobile-BookNOsk.js";
-const M = r.div`
+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";
+const b = d.div`
   display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   border-radius: 0.75rem;
-  background-color: ${(e) => e.bgcolor || "transparent"};
-  overflow: hidden;
-  max-height: ${(e) => e.height || "22.5rem"};
-  min-height: ${(e) => e.height || "22.5rem"};
-  background-color: ${(e) => e.bgcolor || "transparent"};
-
-  & button {
-    width: fit-content;
-  }
+  position: relative;
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
 
-  ${(e) => e.hasBorder === !0 && `border: 1px solid var(--gray-95008, rgba(20, 22, 26, 0.08));
-  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  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";
+}};
 
-`}
-
-  & img {
+  & .wrapper__image {
+    height: 100%;
+    width: 100%;
     object-fit: cover;
-    max-width: ${(e) => e.imgW || "22.5rem"};
-    min-width: ${(e) => e.imgW || "22.5rem"};
-    max-height: ${(e) => e.height || "22.5rem"};
-    min-height: ${(e) => e.height || "22.5rem"};
+    border-radius: 0.75rem;
   }
 
-  ${(e) => e.hasBorder === !0 && `border: 1px solid var(--gray-95008, rgba(20, 22, 26, 0.08));
-  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
-
-`}
+  & .wrapper__image--skeleton {
+    width: 24.5rem;
+    height: 30rem;
+    border-radius: 0.75rem;
+    background-color: ${o("-90deg")};
+  }
 
-  @media (max-width: ${o + "px"}) {
-    gap: 1.5rem;
+  & .wrapper__text {
+    display: flex;
     flex-direction: column;
-    min-height: unset;
-    max-height: unset;
+    align-items: flex-start;
+    padding: 1rem;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    gap: 0.75rem;
 
-    & button {
-      width: fit-content;
+    & .text__title {
+      color: var(--white, #ffffff);
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.5rem;
+      ${c(2)}
     }
 
-    & img {
-      max-width: 100%;
-      min-width: 100%;
-      max-height: ${(e) => e.imgHMob || "12.1rem"};
-      min-height: ${(e) => e.imgHMob || "12.1rem"};
+    & .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);
     }
-  }
-`, C = r.div`
-  padding: ${(e) => e.smallPadding === !0 ? "2rem" : "4rem 5rem"};
-  display: flex;
-  gap: 2rem;
-  flex-direction: ${(e) => e.isHorizontalContent === !0 ? "row" : "column"};
-  flex: 1;
 
-  ${(e) => e.isHorizontalContent === !0 && "justify-content: space-between;"}
+    & .text__description {
+      color: var(--white);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.25rem;
+      ${c(2)}
+    }
 
-  @media (max-width: ${o + "px"}) {
-    padding: 0;
-    flex-direction: column;
+    & .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;
+    }
+  }
+`, 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"
+              }
+            )
+          ] })
+        ]
+      }
+    ) });
   }
-`, H = r.div`
+), y = d.div`
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 1.5rem;
 
-  & .header-title {
-    font-size: 1.75rem;
+  & .regular-title {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 1.5rem;
     font-weight: 600;
+    & .regular-title-text {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+    }
+
+    & i {
+      font-size: 1.5rem;
+      color: var(--primary-500, #f59e0b);
+    }
   }
 
-  & .header-subtitle {
-    color: var(--gray-950, #14161a);
-    font-size: 1rem;
-    font-weight: 500;
+  @media (max-width: ${f + "px"}) {
+    gap: 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: ${o + "px"}) {
+  @media (max-width: ${f + "px"}) {
+    display: flex;
     flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    padding: 0 1rem;
   }
-`, I = $((e, B) => {
-  const {
-    title: l,
-    subtitle: h,
-    buttonText: g,
-    image: a,
-    imagePosition: n = "right",
-    noImageForMobile: m = !1,
-    height: s,
-    imageWidth: c,
-    imageHeightMob: x,
-    smallPadding: p = !1,
-    isHorizontalContent: u = !1,
-    backgroundColor: b,
-    hasBorder: f = !1,
-    onBannerClick: w
-  } = e, d = y();
-  return /* @__PURE__ */ t(
-    M,
-    {
-      bgcolor: b,
-      height: s,
-      imgW: c,
-      imgHMob: x,
-      hasBorder: f,
-      children: [
-        n !== "right" && !(m === !0 && d === !0) && /* @__PURE__ */ i("img", { src: a }),
-        /* @__PURE__ */ t(
-          C,
-          {
-            isHorizontalContent: u,
-            smallPadding: p,
-            children: [
-              /* @__PURE__ */ t(H, { children: [
-                /* @__PURE__ */ i("div", { className: "header-title", children: l }),
-                /* @__PURE__ */ i("div", { className: "header-subitle", children: h })
-              ] }),
-              /* @__PURE__ */ i(
-                v,
-                {
-                  size: "medium",
-                  color: "neutral",
-                  type: "button",
-                  onClick: w,
-                  children: g
-                }
-              )
-            ]
-          }
-        ),
-        n === "right" && !(m === !0 && d === !0) && /* @__PURE__ */ i("img", { src: a })
-      ]
-    }
-  );
-});
+`, 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,
+      {
+        ...a
+      },
+      `landing-page-masonry-general-card__${l + 1}`
+    ))) })
+  ] })
+);
 export {
-  I as default
+  C as default
 };

package/dist/index7.cjs

@@ -1,65 +1,85 @@
-"use strict";const e=require("react/jsx-runtime"),o=require("react"),s=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),c=require("./consts-dNz9tpt4.cjs"),u=require("./Button.cjs"),t=require("./utils-CE6bljYe.cjs"),h=s.newStyled.div`
-  padding-bottom: 1.38rem;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  gap: 2rem;
-  align-items: center;
+"use strict";const r=require("react/jsx-runtime"),s=require("react"),c=require("./utils-CE6bljYe.cjs"),d=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),l=require("./consts-dNz9tpt4.cjs"),h=d.newStyled.div`
+  width: 7.5rem;
+  height: auto;
+  max-height: 7.5rem;
 
-  & button {
-    width: fit-content;
+  & .wrapper__image {
+    width: 7.5rem;
+    height: auto;
   }
 
-  @media (max-width: ${c.MOBILE_SIZE_PX+"px"}) {
-    padding-bottom: 0;
+  @media (max-width: ${l.MOBILE_SIZE_PX+"px"}) {
+    width: 4.5rem;
+    height: auto;
+    max-height: 4.5rem;
+
+    & .wrapper__image {
+      width: 4.5rem;
+      height: auto;
+    }
   }
-`,g=s.newStyled.div`
-  text-align: center;
+`,_=d.newStyled.div`
+  width: 7.5rem;
+  height: 7.5rem;
+  background: ${c.linearGradientAnimation("-90deg")};
+
+  @media (max-width: ${l.MOBILE_SIZE_PX+"px"}) {
+    width: 4.5rem;
+    height: 4.5rem;
+  }
+`,g=s.forwardRef(({imageComponent:t,image:n,onSelectCard:a},i)=>r.jsx(h,{children:c.isDefined(t)?t:r.jsx("img",{src:n,className:"wrapper__image",onSelectCard:a})})),w=s.forwardRef(({},t)=>r.jsx(_,{})),m=d.newStyled.div`
   display: flex;
-  justify-content: center;
   flex-direction: column;
-  gap: 0.25rem;
+  align-items: flex-start;
+  gap: 2rem;
 
-  & .header-title {
-    font-size: 1.5rem;
-    font-weight: 600;
-  }
+  & .wrapper__heading {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
 
-  & .header-subtitle {
-    color: var(--gray-600, #676e79);
-    font-size: 1rem;
-    font-weight: 500;
-  }
+    & .wrapper__title {
+      color: var(--gray-950, #14161a);
+      text-align: center;
+      font-size: 1.5rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 2rem;
+      letter-spacing: -0.47px;
+    }
 
-  @media (max-width: ${c.MOBILE_SIZE_PX+"px"}) {
+    & .wrapper__subtitle {
+      color: var(---gray-600, #676e79);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.25rem;
+      letter-spacing: 0.25px;
+    }
   }
-`,p=s.newStyled.div`
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  align-items: center;
 
-  & .list-item {
+  & .wrapper__content {
     display: flex;
+    justify-content: center;
     align-items: center;
+    gap: 3rem;
+    align-self: stretch;
 
-    & .mng {
-      font-size: 1.25rem;
-      color: var(--success-600);
+    & .wrapper__item {
+      max-width: 7.5rem;
     }
   }
 
-  @media (max-width: ${c.MOBILE_SIZE_PX+"px"}) {
-    & .list-item {
-      flex-direction: column;
-      text-align: center;
-      justify-content: center;
-      gap: 0;
+  @media (max-width: ${l.MOBILE_SIZE_PX+"px"}) {
+    & .wrapper__content {
+      align-content: center;
+      gap: 1rem;
+      flex-wrap: wrap;
+
+      & .wrapper__item {
+        max-width: 4 0.5rem;
+      }
     }
   }
-`,j=o.forwardRef((a,y)=>{const{title:i,subtitle:n,buttonText:d,list:r,fallback:m=()=>{},onBannerClick:l}=a;return e.jsxs(h,{children:[(t.isDefined(i)||t.isDefined(n))&&e.jsxs(g,{children:[t.isDefined(i)&&e.jsx("div",{className:"header-title",children:i}),t.isDefined(n)&&e.jsx("div",{className:"header-subitle",children:n})]}),e.jsx(p,{children:r==null?void 0:r.map((x,f)=>e.jsx(o.Fragment,{children:e.jsxs("div",{className:"list-item",children:[e.jsx("i",{className:"mng mng-lnc-checkmark--filled"}),e.jsx("span",{children:x})]})},f))}),e.jsx(u,{size:"medium",color:"neutral",type:"button",onClick:()=>t.isDefined(l)?l():m(),children:d})]})});module.exports=j;
+`,x=s.forwardRef(({title:t,subtitle:n,items:a=[],onSelectCard:i=()=>{}},f)=>{var o;return r.jsx(m,{children:r.jsxs("div",{className:"wrapper__heading",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),n&&r.jsx("div",{className:"wrapper__subtitle",children:n}),r.jsx("div",{className:"wrapper__content",children:a&&(a==null?void 0:a.length)>0?a==null?void 0:a.map((e,p)=>r.jsx(g,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>i==null?void 0:i(e==null?void 0:e.uuid),className:"wrapper__item"},`brand-hit-card__${p+1}`)):(o=Array.from("12345"))==null?void 0:o.map((e,p)=>r.jsx(w,{},`brand-hit-card-skeleton__${p+1}`))})]})})});module.exports=x;

package/dist/index7.js

@@ -1,104 +1,125 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { forwardRef as h, Fragment as x } from "react";
-import { n as o } from "./emotion-styled.browser.esm-BiK8DcgW.js";
-import { M as a } from "./consts-DNVz1x1I.js";
-import g from "./Button.js";
-import { l as t } from "./utils-DtEdJZWa.js";
-const u = o.div`
-  padding-bottom: 1.38rem;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  gap: 2rem;
-  align-items: center;
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+import { m as c, l as g } from "./utils-DtEdJZWa.js";
+import { n as d } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { M as l } from "./consts-DNVz1x1I.js";
+const _ = d.div`
+  width: 7.5rem;
+  height: auto;
+  max-height: 7.5rem;
 
-  & button {
-    width: fit-content;
+  & .wrapper__image {
+    width: 7.5rem;
+    height: auto;
   }
 
-  @media (max-width: ${a + "px"}) {
-    padding-bottom: 0;
+  @media (max-width: ${l + "px"}) {
+    width: 4.5rem;
+    height: auto;
+    max-height: 4.5rem;
+
+    & .wrapper__image {
+      width: 4.5rem;
+      height: auto;
+    }
   }
-`, y = o.div`
-  text-align: center;
+`, s = d.div`
+  width: 7.5rem;
+  height: 7.5rem;
+  background: ${c("-90deg")};
+
+  @media (max-width: ${l + "px"}) {
+    width: 4.5rem;
+    height: 4.5rem;
+  }
+`, w = o(
+  ({ imageComponent: t, image: n, onSelectCard: e }, i) => /* @__PURE__ */ a(_, { children: g(t) ? t : /* @__PURE__ */ a(
+    "img",
+    {
+      src: n,
+      className: "wrapper__image",
+      onSelectCard: e
+    }
+  ) })
+), f = o(({}, t) => /* @__PURE__ */ a(s, {})), x = d.div`
   display: flex;
-  justify-content: center;
   flex-direction: column;
-  gap: 0.25rem;
+  align-items: flex-start;
+  gap: 2rem;
 
-  & .header-title {
-    font-size: 1.5rem;
-    font-weight: 600;
-  }
+  & .wrapper__heading {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
 
-  & .header-subtitle {
-    color: var(--gray-600, #676e79);
-    font-size: 1rem;
-    font-weight: 500;
-  }
+    & .wrapper__title {
+      color: var(--gray-950, #14161a);
+      text-align: center;
+      font-size: 1.5rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 2rem;
+      letter-spacing: -0.47px;
+    }
 
-  @media (max-width: ${a + "px"}) {
+    & .wrapper__subtitle {
+      color: var(---gray-600, #676e79);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.25rem;
+      letter-spacing: 0.25px;
+    }
   }
-`, b = o.div`
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  align-items: center;
 
-  & .list-item {
+  & .wrapper__content {
     display: flex;
+    justify-content: center;
     align-items: center;
+    gap: 3rem;
+    align-self: stretch;
 
-    & .mng {
-      font-size: 1.25rem;
-      color: var(--success-600);
+    & .wrapper__item {
+      max-width: 7.5rem;
     }
   }
 
-  @media (max-width: ${a + "px"}) {
-    & .list-item {
-      flex-direction: column;
-      text-align: center;
-      justify-content: center;
-      gap: 0;
+  @media (max-width: ${l + "px"}) {
+    & .wrapper__content {
+      align-content: center;
+      gap: 1rem;
+      flex-wrap: wrap;
+
+      & .wrapper__item {
+        max-width: 4 0.5rem;
+      }
     }
   }
-`, N = h((m, w) => {
-  const {
-    title: i,
-    subtitle: n,
-    buttonText: s,
-    list: r,
-    fallback: d = () => {
-    },
-    onBannerClick: c
-  } = m;
-  return /* @__PURE__ */ l(u, { children: [
-    (t(i) || t(n)) && /* @__PURE__ */ l(y, { children: [
-      t(i) && /* @__PURE__ */ e("div", { className: "header-title", children: i }),
-      t(n) && /* @__PURE__ */ e("div", { className: "header-subitle", children: n })
-    ] }),
-    /* @__PURE__ */ e(b, { children: r == null ? void 0 : r.map((f, p) => /* @__PURE__ */ e(x, { children: /* @__PURE__ */ l("div", { className: "list-item", children: [
-      /* @__PURE__ */ e("i", { className: "mng mng-lnc-checkmark--filled" }),
-      /* @__PURE__ */ e("span", { children: f })
-    ] }) }, p)) }),
-    /* @__PURE__ */ e(
-      g,
-      {
-        size: "medium",
-        color: "neutral",
-        type: "button",
-        onClick: () => t(c) ? c() : d(),
-        children: s
-      }
-    )
-  ] });
-});
+`, k = o(
+  ({ title: t, subtitle: n, items: e = [], onSelectCard: i = () => {
+  } }, u) => {
+    var h;
+    return /* @__PURE__ */ a(x, { children: /* @__PURE__ */ m("div", { className: "wrapper__heading", children: [
+      t && /* @__PURE__ */ a("div", { className: "wrapper__title", children: t }),
+      n && /* @__PURE__ */ a("div", { className: "wrapper__subtitle", children: n }),
+      /* @__PURE__ */ a("div", { className: "wrapper__content", children: e && (e == null ? void 0 : e.length) > 0 ? e == null ? void 0 : e.map((r, p) => /* @__PURE__ */ a(
+        w,
+        {
+          image: r == null ? void 0 : r.image,
+          imageComponent: r == null ? void 0 : r.imageComponent,
+          onSelectCard: () => i == null ? void 0 : i(r == null ? void 0 : r.uuid),
+          className: "wrapper__item"
+        },
+        `brand-hit-card__${p + 1}`
+      )) : (h = Array.from("12345")) == null ? void 0 : h.map((r, p) => /* @__PURE__ */ a(
+        f,
+        {},
+        `brand-hit-card-skeleton__${p + 1}`
+      )) })
+    ] }) });
+  }
+);
 export {
-  N as default
+  k as default
 };