@lanaco/lnc-react-ui 4.0.23 → 4.0.26

package/dist/index-BlV3tdJ8.cjs

@@ -0,0 +1,87 @@
+"use strict";const e=require("react/jsx-runtime"),p=require("react"),a=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),r=require("./utils-CE6bljYe.cjs");a.newStyled.div`
+  background-color: var(--gray-200, #dddfe4);
+  border-radius: 0.75rem;
+  min-width: 11.625rem;
+  min-height: 11.625rem;
+  max-width: 11.625rem;
+  max-height: 11.625rem;
+  ${r.linearGradientAnimation("-90deg")}
+`;const f=a.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  position: relative;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  cursor: pointer;
+  background: linear-gradient(
+    178deg,
+    rgba(0, 0, 0, 0) 1.5%,
+    rgba(0, 0, 0, 0.16) 8.95%,
+    #000 98.39%
+  );
+
+  & .text-block {
+    padding: 0.75rem;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    position: absolute;
+    bottom: 0rem;
+    left: 0rem;
+  }
+  & .img-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    background: linear-gradient(
+      178deg,
+      rgba(0, 0, 0, 0) 1.5%,
+      rgba(0, 0, 0, 0.16) 8.95%,
+      #000 98.39%
+    );
+  }
+
+  & 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;
+  }
+
+  & .fallback-image {
+    mix-blend-mode: multiply;
+  }
+
+  font-size: 0.875rem;
+  font-weight: 500;
+  & .price-chip {
+    font-size: 0.75rem;
+    font-weight: 500;
+    padding: 0 0.38rem;
+    min-height: 1.25rem;
+    max-height: 1.25rem;
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 62.4375rem;
+    z-index: 1;
+    background-color: var(--white, #fff);
+    color: var(--gray-950, #14161A);
+  }
+  & .title-simple-product-card {
+    z-index: 1;
+    color: var(--white, #fff);
+    transition: all 0.2s ease;
+  }
+
+  &:hover {
+    & .title-simple-product-card {
+      z-index: 1;
+      color: var(--primary-500, #F59E0B);
+    }
+  }
+`,h=p.forwardRef((d,b)=>{const{uuid:x,title:n,price:i,currency:t,isNegotiable:c,isFree:l,image:s,sellerUuid:y,onSelectCard:m=()=>{},imageComponent:o,negotiableText:g="Negotiable",freeText:u="Free"}=d;return e.jsxs(f,{className:"simple-product-card",onClick:m,children:[r.isDefined(o)?o:e.jsx("img",{src:s}),e.jsxs("div",{className:"text-block",children:[e.jsx("div",{className:"title-simple-product-card",children:n}),e.jsxs("div",{className:"price-chip",children:[i&&t&&`${r.formatPrice(i)} ${r.GetCurrencySymbol(t)}`,c&&g,l&&u]})]})]})});exports.SimpleProductCard=h;

package/dist/{index-Cu0xwYjD.js → index-Bq3leL2e.js}

@@ -7,15 +7,15 @@ var i = { exports: {} };
 */
 (function(e) {
   (function() {
-    var f = {}.hasOwnProperty;
+    var a = {}.hasOwnProperty;
     function s() {
       for (var t = "", r = 0; r < arguments.length; r++) {
         var n = arguments[r];
-        n && (t = o(t, a(n)));
+        n && (t = o(t, f(n)));
       }
       return t;
     }
-    function a(t) {
+    function f(t) {
       if (typeof t == "string" || typeof t == "number")
         return t;
       if (typeof t != "object")
@@ -26,7 +26,7 @@ var i = { exports: {} };
         return t.toString();
       var r = "";
       for (var n in t)
-        f.call(t, n) && t[n] && (r = o(r, n));
+        a.call(t, n) && t[n] && (r = o(r, n));
       return r;
     }
     function o(t, r) {
@@ -38,5 +38,6 @@ var i = { exports: {} };
 var p = i.exports;
 const l = /* @__PURE__ */ c(p);
 export {
+  p as a,
   l as c
 };

package/dist/index-C2M7QHPq.cjs

@@ -0,0 +1,40 @@
+"use strict";const t=require("react/jsx-runtime"),a=require("react"),d=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),u=require("./consts-dNz9tpt4.cjs"),x=require("./Button.cjs"),b=d.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  color: var(--gray-950, #14161A);
+  justify-content: center;
+
+  & button {
+    width: fit-content
+  }
+
+  & .block-group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  & .txt-block-subtitle {
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: var(--gray-500);
+  }
+  & .txt-block-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--gray-950, #14161A);
+  }
+  & .txt-block-description {
+    font-size: 0.875rem;
+    font-weight: 400;
+    color: var(--gray-700, #4E555F);
+  }
+
+  @media (max-width: ${u.MOBILE_SIZE_PX+"px"}) {
+    align-items: start;
+    justify-content: start;
+    & .txt-block-title {
+      font-size: 1.375rem;
+    }
+  }
+`,f=a.forwardRef((e,m)=>{const{title:o,subtitle:r,description:i,buttonText:n,buttonLink:c,onButtonAction:s=()=>{},...l}=e;return t.jsxs(b,{...l,children:[t.jsxs("div",{className:"block-group",children:[t.jsx("div",{className:"txt-block-subtitle",children:r}),t.jsx("div",{className:"txt-block-title",children:o}),t.jsx("div",{className:"txt-block-description",children:i})]}),t.jsx(x,{type:"button",btnType:"outline",borderRadius:"curved",onClick:()=>s(c),color:"gray",children:n})]})});exports.TextBlockV1=f;

package/dist/index-DGl-lSfF.js

@@ -0,0 +1,122 @@
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { n as a } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { m as u, l as h, n as b, G as x } from "./utils-DtEdJZWa.js";
+a.div`
+  background-color: var(--gray-200, #dddfe4);
+  border-radius: 0.75rem;
+  min-width: 11.625rem;
+  min-height: 11.625rem;
+  max-width: 11.625rem;
+  max-height: 11.625rem;
+  ${u("-90deg")}
+`;
+const v = a.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  position: relative;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  cursor: pointer;
+  background: linear-gradient(
+    178deg,
+    rgba(0, 0, 0, 0) 1.5%,
+    rgba(0, 0, 0, 0.16) 8.95%,
+    #000 98.39%
+  );
+
+  & .text-block {
+    padding: 0.75rem;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    position: absolute;
+    bottom: 0rem;
+    left: 0rem;
+  }
+  & .img-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    background: linear-gradient(
+      178deg,
+      rgba(0, 0, 0, 0) 1.5%,
+      rgba(0, 0, 0, 0.16) 8.95%,
+      #000 98.39%
+    );
+  }
+
+  & 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;
+  }
+
+  & .fallback-image {
+    mix-blend-mode: multiply;
+  }
+
+  font-size: 0.875rem;
+  font-weight: 500;
+  & .price-chip {
+    font-size: 0.75rem;
+    font-weight: 500;
+    padding: 0 0.38rem;
+    min-height: 1.25rem;
+    max-height: 1.25rem;
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 62.4375rem;
+    z-index: 1;
+    background-color: var(--white, #fff);
+    color: var(--gray-950, #14161A);
+  }
+  & .title-simple-product-card {
+    z-index: 1;
+    color: var(--white, #fff);
+    transition: all 0.2s ease;
+  }
+
+  &:hover {
+    & .title-simple-product-card {
+      z-index: 1;
+      color: var(--primary-500, #F59E0B);
+    }
+  }
+`, S = f((d, y) => {
+  const {
+    uuid: w,
+    title: n,
+    price: r,
+    currency: i,
+    isNegotiable: m,
+    isFree: l,
+    image: c,
+    sellerUuid: k,
+    onSelectCard: s = () => {
+    },
+    imageComponent: t,
+    negotiableText: p = "Negotiable",
+    freeText: g = "Free"
+  } = d;
+  return /* @__PURE__ */ e(v, { className: "simple-product-card", onClick: s, children: [
+    h(t) ? t : /* @__PURE__ */ o("img", { src: c }),
+    /* @__PURE__ */ e("div", { className: "text-block", children: [
+      /* @__PURE__ */ o("div", { className: "title-simple-product-card", children: n }),
+      /* @__PURE__ */ e("div", { className: "price-chip", children: [
+        r && i && `${b(r)} ${x(i)}`,
+        m && p,
+        l && g
+      ] })
+    ] })
+  ] });
+});
+export {
+  S
+};

package/dist/index-DcYg32le.js

@@ -0,0 +1,69 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { n as m } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { M as f } from "./consts-DNVz1x1I.js";
+import p from "./Button.js";
+const u = m.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  color: var(--gray-950, #14161A);
+  justify-content: center;
+
+  & button {
+    width: fit-content
+  }
+
+  & .block-group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  & .txt-block-subtitle {
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: var(--gray-500);
+  }
+  & .txt-block-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--gray-950, #14161A);
+  }
+  & .txt-block-description {
+    font-size: 0.875rem;
+    font-weight: 400;
+    color: var(--gray-700, #4E555F);
+  }
+
+  @media (max-width: ${f + "px"}) {
+    align-items: start;
+    justify-content: start;
+    & .txt-block-title {
+      font-size: 1.375rem;
+    }
+  }
+`, v = d((e, b) => {
+  const { title: r, subtitle: i, description: n, buttonText: l, buttonLink: c, onButtonAction: s = () => {
+  }, ...a } = e;
+  return /* @__PURE__ */ o(u, { ...a, children: [
+    /* @__PURE__ */ o("div", { className: "block-group", children: [
+      /* @__PURE__ */ t("div", { className: "txt-block-subtitle", children: i }),
+      /* @__PURE__ */ t("div", { className: "txt-block-title", children: r }),
+      /* @__PURE__ */ t("div", { className: "txt-block-description", children: n })
+    ] }),
+    /* @__PURE__ */ t(
+      p,
+      {
+        type: "button",
+        btnType: "outline",
+        borderRadius: "curved",
+        onClick: () => s(c),
+        color: "gray",
+        children: l
+      }
+    )
+  ] });
+});
+export {
+  v as T
+};

package/dist/index-LdP7U1Yl.cjs

@@ -0,0 +1,114 @@
+"use strict";const e=require("react/jsx-runtime"),s=require("react"),c=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),w=require("./consts-dNz9tpt4.cjs"),r=require("./utils-CE6bljYe.cjs"),b=c.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  cursor: pointer;
+
+  & .wrapper-card-1 {
+    display: flex;
+    flex-direction: column;
+    gap: 0.38rem;
+  }
+
+  & .wrapper-card-2 {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  & 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;
+    ${r.truncateTextInRows(2)}
+  }
+
+  & .price-text {
+    font-size: 1rem;
+    font-weight: 600;
+    ${r.truncateText()}
+  }
+
+  & .location-text {
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: var(--gray-600, #676e79);
+    ${r.truncateText()}
+  }
+
+  & .tags-wrapper {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  &:hover {
+    & .card-title {
+      color: var(--primary-500, #f59e0b);
+    }
+  }
+
+  & .skeleton-img {
+    background-color: ${r.linearGradientAnimation("-90deg")};
+    border-radius: 0.75rem;
+    border: 1px solid white;
+  }
+
+  & .skeleton-title {
+    background-color: ${r.linearGradientAnimation("-90deg")};
+    width: 100%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-tags {
+    background-color: ${r.linearGradientAnimation("-90deg")};
+    width: 80%;
+    height: 1.5rem;
+  }
+
+  & .skeleton-price {
+    background-color: ${r.linearGradientAnimation("-90deg")};
+    width: 50%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-sponsored {
+    background-color: ${r.linearGradientAnimation("-90deg")};
+    width: 50%;
+    height: 1rem;
+  }
+
+  @media (max-width: ${w.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;
+    }
+
+    & .price-text {
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+  }
+`,j=c.newStyled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--gray-500);
+  font-size:  0.75rem;
+  font-weight: 500;
+
+  & i {
+    font-size: 1rem;
+    color: var(--warning-500, #F59E0B);
+  }
+`,v=s.forwardRef(({sponsoredText:i="Sponsored"},t)=>e.jsxs(j,{ref:t,className:"sponsored-line",children:[e.jsx("i",{className:"mng-lnc-paw2"}),e.jsx("span",{children:i})]})),y=s.forwardRef((i,t)=>{const{uuid:k,title:d,price:n,currency:o,isNegotiable:l,isFree:m,image:g,sellerUuid:$,location:p,isSponsored:h,imageComponent:a,onSelectCard:u=()=>{},freeText:x="Free",negotiableText:f="Negotiable"}=i;return e.jsxs(b,{className:"product-card",onClick:u,children:[r.isDefined(a)?a:e.jsx("img",{src:g}),e.jsx("div",{className:"wrapper-card-1",children:e.jsx("div",{className:"card-title",children:d})}),e.jsxs("div",{className:"wrapper-card-2",children:[e.jsxs("div",{className:"price-text",children:[n&&o&&`${r.formatPrice(n)} ${r.GetCurrencySymbol(o)}`,l&&{negotiableText:f},m&&{freeText:x}]}),e.jsx("div",{className:"location-text",children:p})]}),h===!0&&e.jsx(v,{})]})});exports.DetailedProductCard=y;