@lanaco/lnc-react-ui 4.0.199 → 4.0.201

package/dist/PartnerBrandsSection.js

@@ -0,0 +1,154 @@
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { C as p } from "./index-BppfjY8h.js";
+import f from "./Button.js";
+import { u as m } from "./useDetectMobile-Bkvj0VMa.js";
+import { S as _ } from "./style-neMbLWE6.js";
+import { s as b } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+const u = b.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  & .section__slider {
+    position: relative;
+  }
+
+  & .slider__gradient {
+    position: absolute;
+    width: 7.5rem;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+    opacity: 0.4;
+    top: 0;
+
+    &.left {
+      left: 0;
+      background: linear-gradient(to left, transparent, white);
+    }
+
+    &.right {
+      right: 0;
+      background: linear-gradient(to right, transparent, white);
+    }
+  }
+
+  .slider__container {
+    width: 100%;
+  }
+
+  .slider__item {
+    padding-right: 1rem;
+  }
+
+  & .section__item {
+    width: 100%;
+    height: 100%;
+    max-height: 3.75rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--gray-200, #e4e9f0);
+    overflow: hidden;
+
+    & img {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+      filter: grayscale(100%);
+      transition: filter 0.3s ease;
+
+      &:hover {
+        filter: grayscale(0%);
+      }
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+`, j = g(
+  ({
+    title: o,
+    buttonText: n,
+    buttonLink: d,
+    items: e,
+    onSelectCard: c = () => {
+    },
+    onButtonAction: l = () => {
+    }
+  }, v) => {
+    const h = m() ? 2 : 7, a = (e == null ? void 0 : e.length) > h;
+    return /* @__PURE__ */ s(u, { children: [
+      /* @__PURE__ */ s(_, { children: [
+        o && /* @__PURE__ */ i("div", { className: "heading__title", children: o }),
+        n && d && /* @__PURE__ */ i(
+          f,
+          {
+            text: n,
+            borderRadius: "curved",
+            btnType: "tinted",
+            className: "heading__action",
+            color: "neutral",
+            onClick: (r) => {
+              var t;
+              (t = r == null ? void 0 : r.target) == null || t.blur(), l == null || l(d);
+            }
+          }
+        )
+      ] }),
+      e && (e == null ? void 0 : e.length) > 0 && /* @__PURE__ */ s("div", { className: "section__slider", children: [
+        a && /* @__PURE__ */ i("div", { className: "slider__gradient left" }),
+        /* @__PURE__ */ i(
+          p,
+          {
+            responsive: {
+              desktop: {
+                breakpoint: { max: 9999, min: 801 },
+                items: 7,
+                slidesToSlide: 1,
+                partialVisibilityGutter: 10
+              },
+              mobile: {
+                breakpoint: { max: 800, min: 0 },
+                items: 2,
+                slidesToSlide: 1,
+                partialVisibilityGutter: 20
+              }
+            },
+            draggable: !1,
+            swipeable: !1,
+            arrows: !1,
+            infinite: a,
+            autoPlay: a,
+            autoPlaySpeed: 2e3,
+            partialVisible: a,
+            customTransition: "transform 500ms linear",
+            transitionDuration: 500,
+            containerClass: "slider__container",
+            itemClass: "slider__item",
+            children: e == null ? void 0 : e.map((r, t) => /* @__PURE__ */ i(
+              "div",
+              {
+                className: "section__item",
+                onClick: () => c(r),
+                children: /* @__PURE__ */ i(
+                  "img",
+                  {
+                    src: r == null ? void 0 : r.imageUrl,
+                    alt: `Partner brand image ${t + 1}`,
+                    loading: "lazy"
+                  }
+                )
+              },
+              `partner-brands-section-item__${t + 1}`
+            ))
+          }
+        ),
+        a && /* @__PURE__ */ i("div", { className: "slider__gradient right" })
+      ] })
+    ] });
+  }
+);
+export {
+  j as default
+};

package/dist/PartnerStatsSection.cjs

@@ -0,0 +1,100 @@
+"use strict";const e=require("react/jsx-runtime"),l=require("react"),c=require("./emotion-styled.browser.esm-BtEseadx.cjs"),a=require("./consts-goSZX3xP.cjs"),n=require("./utils-RnrgDDZP.cjs"),_=c.styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2rem;
+  align-self: stretch;
+
+  & .section__text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    align-self: stretch;
+    max-width: 50rem;
+
+    & .section__title {
+      color: var(--gray-900, #0c1520);
+      font-size: 2rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 2.5rem;
+      ${n.truncateTextInRows(2)}
+    }
+
+    & .section__description {
+      color: var(--gray-700, #424b56);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.25rem;
+      letter-spacing: 0.0156rem;
+      ${n.truncateTextInRows(2)}
+    }
+  }
+
+  & .section__items {
+    display: flex;
+
+    & .section__item {
+      border-left: 4px solid #ffa36a;
+      height: 3rem;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      flex: 1 0 0;
+      min-width: 12.5rem;
+      padding-left: 0.75rem;
+
+      & .item__title {
+        color: var(--gray-900, #0c1520);
+        font-size: 1.375rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1.75rem;
+      }
+
+      & .item__description {
+        color: var(--gray-600, #5a6573);
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 1.25rem;
+      }
+    }
+  }
+
+  @media (max-width: ${a.MOBILE_SIZE_PX+"px"}) {
+    gap: 1.25rem;
+
+    & .section__text {
+      & .section__title {
+        font-size: 1.375rem;
+        line-height: 1.75rem;
+      }
+
+      & .section__description {
+        ${n.truncateTextInRows(5)}
+      }
+    }
+
+    & .section__items {
+      & .section__item {
+        height: 3.5rem;
+        min-width: auto;
+
+        & .item__title {
+          font-size: 1rem;
+          line-height: 1.5rem;
+          letter-spacing: 0.0063rem;
+        }
+
+        & .item__description {
+          font-size: 12px;
+          line-height: 1rem;
+          letter-spacing: 0.0313rem;
+        }
+      }
+    }
+  }
+`,m=l.forwardRef(({title:r,description:s,items:t},d)=>e.jsxs(_,{children:[e.jsxs("div",{className:"section__text",children:[r&&e.jsx("div",{className:"section__title",children:r}),s&&e.jsx("div",{className:"section__description",children:s})]}),t&&(t==null?void 0:t.length)>0&&e.jsx("div",{className:"section__items",children:t==null?void 0:t.map((i,o)=>e.jsxs("div",{className:"section__item",children:[e.jsx("div",{className:"item__title",children:i==null?void 0:i.title}),e.jsx("div",{className:"item__description",children:i==null?void 0:i.description})]},`partner-stats-section-item__${o+1}`))})]}));module.exports=m;

package/dist/PartnerStatsSection.js

@@ -0,0 +1,124 @@
+import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { s as c } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as m } from "./consts-BuFChS64.js";
+import { m as n } from "./utils-DtEfC-TX.js";
+const _ = c.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2rem;
+  align-self: stretch;
+
+  & .section__text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    align-self: stretch;
+    max-width: 50rem;
+
+    & .section__title {
+      color: var(--gray-900, #0c1520);
+      font-size: 2rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 2.5rem;
+      ${n(2)}
+    }
+
+    & .section__description {
+      color: var(--gray-700, #424b56);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.25rem;
+      letter-spacing: 0.0156rem;
+      ${n(2)}
+    }
+  }
+
+  & .section__items {
+    display: flex;
+
+    & .section__item {
+      border-left: 4px solid #ffa36a;
+      height: 3rem;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      flex: 1 0 0;
+      min-width: 12.5rem;
+      padding-left: 0.75rem;
+
+      & .item__title {
+        color: var(--gray-900, #0c1520);
+        font-size: 1.375rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1.75rem;
+      }
+
+      & .item__description {
+        color: var(--gray-600, #5a6573);
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 1.25rem;
+      }
+    }
+  }
+
+  @media (max-width: ${m + "px"}) {
+    gap: 1.25rem;
+
+    & .section__text {
+      & .section__title {
+        font-size: 1.375rem;
+        line-height: 1.75rem;
+      }
+
+      & .section__description {
+        ${n(5)}
+      }
+    }
+
+    & .section__items {
+      & .section__item {
+        height: 3.5rem;
+        min-width: auto;
+
+        & .item__title {
+          font-size: 1rem;
+          line-height: 1.5rem;
+          letter-spacing: 0.0063rem;
+        }
+
+        & .item__description {
+          font-size: 12px;
+          line-height: 1rem;
+          letter-spacing: 0.0313rem;
+        }
+      }
+    }
+  }
+`, y = a(({ title: o, description: l, items: e }, d) => /* @__PURE__ */ r(_, { children: [
+  /* @__PURE__ */ r("div", { className: "section__text", children: [
+    o && /* @__PURE__ */ i("div", { className: "section__title", children: o }),
+    l && /* @__PURE__ */ i("div", { className: "section__description", children: l })
+  ] }),
+  e && (e == null ? void 0 : e.length) > 0 && /* @__PURE__ */ i("div", { className: "section__items", children: e == null ? void 0 : e.map((t, s) => /* @__PURE__ */ r(
+    "div",
+    {
+      className: "section__item",
+      children: [
+        /* @__PURE__ */ i("div", { className: "item__title", children: t == null ? void 0 : t.title }),
+        /* @__PURE__ */ i("div", { className: "item__description", children: t == null ? void 0 : t.description })
+      ]
+    },
+    `partner-stats-section-item__${s + 1}`
+  )) })
+] }));
+export {
+  y as default
+};

package/dist/PasswordInput.cjs

@@ -1,24 +1,24 @@
-"use strict";const u=require("react/jsx-runtime"),a=require("react"),r=require("./index-BpbMKBf_.cjs"),L=require("./index-Cp66dWMi.cjs"),D=require("./Icon.cjs"),h=require("./emotion-styled.browser.esm-BtEseadx.cjs"),o=require("./utils-RnrgDDZP.cjs"),A=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),G=h.styled.div`
+"use strict";const c=require("react/jsx-runtime"),a=require("react"),p=require("./index-Cp66dWMi.cjs"),B=require("./Icon.cjs"),h=require("./emotion-styled.browser.esm-BtEseadx.cjs"),l=require("./utils-RnrgDDZP.cjs"),D=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),P=h.styled.div`
   display: flex;
   align-items: center;
 
-  min-height: ${e=>o.getSizeValueWithUnits(e.theme,e.size)};
-  max-height: ${e=>o.getSizeValueWithUnits(e.theme,e.size)};
-  background-color: ${e=>o.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
+  min-height: ${e=>l.getSizeValueWithUnits(e.theme,e.size)};
+  max-height: ${e=>l.getSizeValueWithUnits(e.theme,e.size)};
+  background-color: ${e=>l.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
   border: 1px solid
-    ${e=>o.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,e.disabled===!0?"disabled":"enabled","border")};
-  border-radius: ${e=>o.getBorderRadiusValueWithUnits(e.theme,"regular")};
+    ${e=>l.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,e.disabled===!0?"disabled":"enabled","border")};
+  border-radius: ${e=>l.getBorderRadiusValueWithUnits(e.theme,"regular")};
 
-  ${e=>e.focused&&e.readOnly!==!0?o.getOutlineCss(e.theme):""}
-  /* ${e=>e.disabled===!0?o.getDisabledStateCss(e.theme):""} */
-  ${e=>e.disabled===!0&&`background-color: ${o.getColorRgbaValue(e.theme,"Input",e.color,"disabled","background","backgroundOpacity")};
-        color: ${n=>o.getColorRgbaValue(n.theme,"Input",n.color,"disabled","text")};`}
+  ${e=>e.focused&&e.readOnly!==!0?l.getOutlineCss(e.theme):""}
+  /* ${e=>e.disabled===!0?l.getDisabledStateCss(e.theme):""} */
+  ${e=>e.disabled===!0&&`background-color: ${l.getColorRgbaValue(e.theme,"Input",e.color,"disabled","background","backgroundOpacity")};
+        color: ${o=>l.getColorRgbaValue(o.theme,"Input",o.color,"disabled","text")};`}
 `,$=h.styled.span`
   padding: 0 12px;
-  color: ${e=>o.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","prefix")};
-`,H=h.styled($)``,J=h.styled($)`
+  color: ${e=>l.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","prefix")};
+`,A=h.styled($)``,G=h.styled($)`
   cursor: pointer;
-`,K=h.styled.input`
+`,H=h.styled.input`
   background: none;
   border: none;
   outline: none;
@@ -26,16 +26,16 @@
   padding-bottom: 0.625rem;
   width: 100%;
 
-  ${e=>o.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")}
-  min-height: ${e=>o.getSizeValueWithUnits(e.theme,e.size)};
-  max-height: ${e=>o.getSizeValueWithUnits(e.theme,e.size)};
-  color: ${e=>o.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","text")};
-  caret-color: ${e=>o.getColorRgbaValue(e.theme,"Input",e.color,"enabled","caret")};
+  ${e=>l.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")}
+  min-height: ${e=>l.getSizeValueWithUnits(e.theme,e.size)};
+  max-height: ${e=>l.getSizeValueWithUnits(e.theme,e.size)};
+  color: ${e=>l.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","text")};
+  caret-color: ${e=>l.getColorRgbaValue(e.theme,"Input",e.color,"enabled","caret")};
   padding-right: ${e=>e.suffix?"0":"0.75rem"};
   padding-left: ${e=>e.prefix?"0":"0.75rem"};
 
   &::placeholder {
-    color: ${e=>o.getColorRgbaValue(e.theme,"Input",e.color,"enabled","placeholder")};
+    color: ${e=>l.getColorRgbaValue(e.theme,"Input",e.color,"enabled","placeholder")};
   }
 
   &:read-only {
@@ -43,9 +43,9 @@
   }
 
   &:disabled {
-    /* ${e=>o.getDisabledStateCss(e.theme)} */
-    ${e=>`background-color: ${o.getColorRgbaValue(e.theme,"Input",e.color,"disabled","background","backgroundOpacity")};
-        color: ${n=>o.getColorRgbaValue(n.theme,"Input",n.color,"disabled","text")};`}
+    /* ${e=>l.getDisabledStateCss(e.theme)} */
+    ${e=>`background-color: ${l.getColorRgbaValue(e.theme,"Input",e.color,"disabled","background","backgroundOpacity")};
+        color: ${o=>l.getColorRgbaValue(o.theme,"Input",o.color,"disabled","text")};`}
     background: none;
   }
-`,V=a.forwardRef((e,n)=>{const{wrapperRef:k,disabled:C,readOnly:T,debounceTime:R=0,placeholder:z,prefix:y,suffix:f,value:c,defaultValue:v,onChange:d,onBlur:p,onFocus:x,className:O="",style:j={},size:I="small",color:i="primary",...q}=e,l=a.useRef(),g=A.useTheme(),[w,P]=a.useState(c||v||"");a.useEffect(()=>{c!=null&&P(c)},[c]);const[m,W]=a.useState(!0),[b,S]=a.useState(!1);a.useEffect(()=>{var s;const t=((s=l==null?void 0:l.current)==null?void 0:s.value)||"";l.current.selectionStart=t!=null&&t.length?t.length:0,l.current.selectionEnd=t!=null&&t.length?t.length:0},[m]),a.useEffect(()=>{n!=null&&(n.current=l.current)},[n,l]);const E=a.useCallback(L.debounce((t,s)=>U(t,s),R),[d]),U=(t,s)=>{d&&(d==null||d(t,s))},F=t=>{P(t.target.value),E(t,t.target.value)},N=()=>{W(!m),l.current.focus()},_=t=>{S(!0),x==null||x(t)},B=t=>{S(!1),p==null||p(t)};return u.jsxs(G,{ref:k,style:j,className:O,theme:g,color:i,size:I,focused:b,disabled:C,readOnly:T,children:[y&&u.jsx($,{theme:g,color:i,focused:b,className:"lnc-input-prefix",children:y}),u.jsx(K,{ref:l,type:m?"password":"text",theme:g,color:i,size:I,placeholder:z,prefix:y,suffix:f,disabled:C,readOnly:T,focused:b,onFocus:_,onBlur:B,onChange:F,value:w,...q}),u.jsx(J,{theme:g,color:i,focused:b,onClick:N,children:u.jsx(D,{icon:m?"eye-slash":"eye"})}),f&&u.jsx(H,{theme:g,color:i,focused:b,className:"lnc-input-suffix",children:f})]})});V.propTypes={id:r.PropTypes.any,value:r.PropTypes.string,defaultValue:r.PropTypes.string,disabled:r.PropTypes.bool,readOnly:r.PropTypes.bool,debounceTime:r.PropTypes.number,placeholder:r.PropTypes.string,tabIndex:r.PropTypes.number,onChange:r.PropTypes.func,onBlur:r.PropTypes.func,onFocus:r.PropTypes.func,className:r.PropTypes.string,style:r.PropTypes.object,size:r.PropTypes.oneOf(["small","medium","large"]),color:r.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=V;
+`,J=a.forwardRef((e,o)=>{const{wrapperRef:R,disabled:C,readOnly:S,debounceTime:z=0,placeholder:v,prefix:m,suffix:f,value:d,defaultValue:j,onChange:u,onBlur:x,onFocus:y,className:q="",style:w={},size:k="small",color:s="primary",...O}=e,n=a.useRef(),i=D.useTheme(),[W,I]=a.useState(d||j||"");a.useEffect(()=>{d!=null&&I(d)},[d]);const[b,E]=a.useState(!0),[g,V]=a.useState(!1);a.useEffect(()=>{var r;const t=((r=n==null?void 0:n.current)==null?void 0:r.value)||"";n.current.selectionStart=t!=null&&t.length?t.length:0,n.current.selectionEnd=t!=null&&t.length?t.length:0},[b]),a.useEffect(()=>{o!=null&&(o.current=n.current)},[o,n]);const U=a.useCallback(p.debounce((t,r)=>_(t,r),z),[u]),_=(t,r)=>{u&&(u==null||u(t,r))},F=t=>{I(t.target.value),U(t,t.target.value)},L=()=>{E(!b),n.current.focus()},N=t=>{V(!0),y==null||y(t)},T=t=>{V(!1),x==null||x(t)};return c.jsxs(P,{ref:R,style:w,className:q,theme:i,color:s,size:k,focused:g,disabled:C,readOnly:S,children:[m&&c.jsx($,{theme:i,color:s,focused:g,className:"lnc-input-prefix",children:m}),c.jsx(H,{ref:n,type:b?"password":"text",theme:i,color:s,size:k,placeholder:v,prefix:m,suffix:f,disabled:C,readOnly:S,focused:g,onFocus:N,onBlur:T,onChange:F,value:W,...O}),c.jsx(G,{theme:i,color:s,focused:g,onClick:L,children:c.jsx(B,{icon:b?"eye-slash":"eye"})}),f&&c.jsx(A,{theme:i,color:s,focused:g,className:"lnc-input-suffix",children:f})]})});module.exports=J;