@lanaco/lnc-react-ui 4.0.23 → 4.0.25

package/dist/index8.js

@@ -0,0 +1,222 @@
+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;
+  position: relative;
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px 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";
+}};
+
+  & .wrapper__image {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    border-radius: 0.75rem;
+  }
+
+  & .wrapper__image--skeleton {
+    width: 24.5rem;
+    height: 30rem;
+    border-radius: 0.75rem;
+    background-color: ${o("-90deg")};
+  }
+
+  & .wrapper__text {
+    display: flex;
+    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;
+
+      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;
+      ${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;
+    }
+  }
+`, 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: 1.5rem;
+
+  & .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);
+    }
+  }
+
+  @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: ${f + "px"}) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    padding: 0 1rem;
+  }
+`, 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 {
+  C as default
+};

package/dist/index9.cjs

@@ -0,0 +1,90 @@
+"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);
+  border-radius: 0.75rem;
+  margin-bottom: 0.5rem;
+
+  & img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`,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"}) {
+    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 */
+    }
+  }
+`,y=c.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  cursor: pointer;
+
+  & 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;
+    font-weight: 600;
+     ${a.truncateTextInRows(2)}
+  }
+
+  &:hover {
+    & .card-title {
+      color: var(--primary-500, #F59E0B);
+    }
+  }
+
+  & .skeleton-img {
+    background-color: ${a.linearGradientAnimation("-90deg")};
+    border-radius: 0.75rem;
+    border: 1px solid white;
+  }
+
+  & .skeleton-title {
+    background-color: ${a.linearGradientAnimation("-90deg")};
+    width: 100%;
+    height: 1.25rem;
+  }
+
+  @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;
+    }
+  }
+`,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;

package/dist/index9.js

@@ -0,0 +1,152 @@
+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 { 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);
+  border-radius: 0.75rem;
+  margin-bottom: 0.5rem;
+
+  & img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`, $ = s.div`
+  display: grid;
+  grid-template-columns: ${(a) => `repeat(${a.limit},  minmax(0, 1fr))`};
+  gap: 1.25rem;
+
+  @media (max-width: ${f + "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 */
+    }
+  }
+`, j = s.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  cursor: pointer;
+
+  & 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;
+    font-weight: 600;
+     ${k(2)}
+  }
+
+  &:hover {
+    & .card-title {
+      color: var(--primary-500, #F59E0B);
+    }
+  }
+
+  & .skeleton-img {
+    background-color: ${h("-90deg")};
+    border-radius: 0.75rem;
+    border: 1px solid white;
+  }
+
+  & .skeleton-title {
+    background-color: ${h("-90deg")};
+    width: 100%;
+    height: 1.25rem;
+  }
+
+  @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;
+    }
+  }
+`, 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,
+      {
+        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
+    )) })
+  ] });
+});
+export {
+  P as default
+};

package/dist/style-C3OB0uad.cjs

@@ -0,0 +1,76 @@
+"use strict";const r=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),t=require("./consts-dNz9tpt4.cjs"),i=r.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  & .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);
+    }
+  }
+
+  @media (max-width: ${t.MOBILE_SIZE_PX+"px"}) {
+    gap: 1.25rem;
+
+    & .regular-title {
+      font-size: 1.375rem;
+
+      &.center {
+        justify-content: center;
+      }
+    }
+  }
+`;r.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+
+  & .regular-title {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 1.5rem;
+    font-weight: 600;
+    padding-bottom: 0.75rem;
+    & .regular-title-text {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+    }
+
+    & i {
+      font-size: 1.5rem;
+      color: var(--primary-500, #F59E0B);
+    }
+  }
+
+  @media (max-width: ${t.MOBILE_SIZE_PX+"px"}) {
+    & .regular-title {
+      font-size: 1.375rem;
+    }
+  }
+`;const a=e=>(e==null?void 0:e.toLowerCase())=="success"?"color: var(--success-700); border: 1px solid var(--success-600); background-color: var(--sucess-60008);":(e==null?void 0:e.toLowerCase())=="warning"?"color: var(--warning-600); border: 1px solid var(--warning-500); background-color: var(--warning-50012);":(e==null?void 0:e.toLowerCase())=="info"?"color: var(--info-700); border: 1px solid var(--info-600); background-color: var(--sucess-60012);":(e==null?void 0:e.toLowerCase())=="danger"?"color: var(--danger-600); border: 1px solid var(--danger-500); background-color: var(--danger-5008);":(e==null?void 0:e.toLowerCase())=="gray"?"color: var(--info-700); border: 1px solid var(--info-600); background-color: var(--sucess-60012);":"color: var(--gray-950, #14161A); border: 1px solid var(--gray-200); background-color: var(--white);";r.newStyled.div`
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0 0.5rem;
+  align-items: center;
+  min-height: 1.25rem;
+  max-height: 1.25rem;
+  border-radius: 0.25rem;
+  display: flex;
+  ${e=>a(e.color)}
+`;exports.RegulatTitleSectionWrapper=i;

package/dist/style-Ch-xOasu.js

@@ -0,0 +1,84 @@
+import { n as r } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { M as a } from "./consts-DNVz1x1I.js";
+const s = r.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  & .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);
+    }
+  }
+
+  @media (max-width: ${a + "px"}) {
+    gap: 1.25rem;
+
+    & .regular-title {
+      font-size: 1.375rem;
+
+      &.center {
+        justify-content: center;
+      }
+    }
+  }
+`;
+r.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+
+  & .regular-title {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 1.5rem;
+    font-weight: 600;
+    padding-bottom: 0.75rem;
+    & .regular-title-text {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+    }
+
+    & i {
+      font-size: 1.5rem;
+      color: var(--primary-500, #F59E0B);
+    }
+  }
+
+  @media (max-width: ${a + "px"}) {
+    & .regular-title {
+      font-size: 1.375rem;
+    }
+  }
+`;
+const i = (e) => (e == null ? void 0 : e.toLowerCase()) == "success" ? "color: var(--success-700); border: 1px solid var(--success-600); background-color: var(--sucess-60008);" : (e == null ? void 0 : e.toLowerCase()) == "warning" ? "color: var(--warning-600); border: 1px solid var(--warning-500); background-color: var(--warning-50012);" : (e == null ? void 0 : e.toLowerCase()) == "info" ? "color: var(--info-700); border: 1px solid var(--info-600); background-color: var(--sucess-60012);" : (e == null ? void 0 : e.toLowerCase()) == "danger" ? "color: var(--danger-600); border: 1px solid var(--danger-500); background-color: var(--danger-5008);" : (e == null ? void 0 : e.toLowerCase()) == "gray" ? "color: var(--info-700); border: 1px solid var(--info-600); background-color: var(--sucess-60012);" : "color: var(--gray-950, #14161A); border: 1px solid var(--gray-200); background-color: var(--white);";
+r.div`
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0 0.5rem;
+  align-items: center;
+  min-height: 1.25rem;
+  max-height: 1.25rem;
+  border-radius: 0.25rem;
+  display: flex;
+  ${(e) => i(e.color)}
+`;
+export {
+  s as R
+};