@lanaco/lnc-react-ui 4.0.79 → 4.0.81

package/dist/BlogsSectionWithFilters.cjs

@@ -1,12 +1,12 @@
-"use strict";const t=require("react/jsx-runtime"),d=require("react"),h=require("./emotion-styled.browser.esm-BtEseadx.cjs"),k=require("./consts-CtNoHdBj.cjs"),N=require("./useDetectMobile-D6d5LpdL.cjs"),a=require("./utils-BXPz9bck.cjs"),q=require("./style-C571ywKV.cjs"),$=require("./Button.cjs"),T=require("./Link.cjs"),B=require("./index-CAqPGuiA.cjs"),M=require("./index-ryadTWiS.cjs"),R=h.styled.div`
+"use strict";const e=require("react/jsx-runtime"),c=require("react"),h=require("./emotion-styled.browser.esm-BtEseadx.cjs"),f=require("./consts-CtNoHdBj.cjs"),C=require("./useDetectMobile-D6d5LpdL.cjs"),a=require("./utils-BXPz9bck.cjs"),N=require("./style-C571ywKV.cjs"),q=require("./Button.cjs"),$=require("./Link.cjs"),T=require("./index-CAqPGuiA.cjs"),B=require("./index-ryadTWiS.cjs"),M=h.styled.div`
   display: grid;
   grid-template-columns: ${i=>`repeat(${i.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${k.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${f.MOBILE_SIZE_PX+"px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`,y=h.styled.div`
+`,w=h.styled.div`
   display: flex;
   width: 100%;
   box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
@@ -42,9 +42,9 @@
     margin-top: auto;
   }
 
-  @media (max-width: ${k.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${f.MOBILE_SIZE_PX+"px"}) {
   }
-`,S=h.styled.div`
+`,k=h.styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -73,4 +73,4 @@
     color: var(--gray-700, #4e555f);
     ${a.truncateTextInRows(3)}
   }
-`,W=d.forwardRef((i,o)=>{const{title:n,imageUrl:s,text:r,buttonText:m,onCardClick:l}=i;return t.jsxs(y,{ref:o,className:"blog-card",onClick:l,children:[t.jsxs(S,{children:[t.jsx("div",{className:"text-wr-title",children:n}),t.jsx("div",{className:"text-wr",children:r}),t.jsx(T,{color:"gray",onClick:l,children:m})]}),t.jsx(B.ProductImageWrapper,{src:s})]})}),I=d.forwardRef(({},i)=>t.jsxs(y,{className:"blog-card",children:[t.jsxs(S,{children:[t.jsx("div",{className:"skeleton-title"}),t.jsx("div",{className:"text-wr"}),t.jsx("div",{className:"skeleton-action"})]}),t.jsx("div",{className:"skeleton-img"})]})),P=({limit:i=3,isLoading:o=!1,keyPrefix:n})=>t.jsx(t.Fragment,{children:Array.from({length:i},(s,r)=>t.jsx(I,{isLoading:o},`${n}-skeleton-product-card-${r}`))}),_=({children:i,fallbackComponent:o=t.jsx(t.Fragment,{}),isLoading:n=!1,limit:s,keyPrefix:r})=>t.jsx(d.Suspense,{fallbackComponent:o,children:n===!0?t.jsx(P,{isLoading:n,limit:s,keyPrefix:r}):i}),w=d.memo(W),z=d.forwardRef((i,o)=>{const{icon:n,title:s,items:r,buttonText:m,limit:l=3,options:c,onButtonAction:v=()=>{},buttonLink:p,onSelectOption:j=()=>{},isLoading:x=!1,onSelectCard:u=()=>{},getImage:b=()=>{}}=i,f=N.useDetectMobile(),C=d.useMemo(()=>t.jsx(t.Fragment,{children:f===!0?r==null?void 0:r.map((e,g)=>t.jsx(w,{title:e==null?void 0:e.title,imageUrl:b(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,text:e==null?void 0:e.description,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>u(e)},g)):r==null?void 0:r.slice(0,l).map((e,g)=>t.jsx(w,{title:e==null?void 0:e.title,imageUrl:b(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,text:e==null?void 0:e.description,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>u(e)},g))}),[r,f,l,u]);return t.jsxs(q.TitleWithOptionsSectionWrapper,{ref:o,children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[a.isDefinedNotEmptyString(n)&&t.jsx("i",{className:n}),t.jsx("span",{children:s})]}),a.isDefinedNotEmptyString(p)&&t.jsx($,{type:"button",btnType:"tinted",color:"gray",onClick:()=>v(p),borderRadius:"curved",children:m})]}),(c==null?void 0:c.length)>0&&t.jsx(M.SelectBar,{items:c,onRemove:e=>{j(e)},onSelect:e=>{j(e)},labelKey:"name",valueKey:"code",noMargin:!0}),t.jsx(R,{limit:l,children:t.jsx(_,{isLoading:x,limit:l,keyPrefix:"explore-landing",children:C})})]})});module.exports=z;
+`,R=c.forwardRef((i,o)=>{const{title:n,imageUrl:l,text:r,buttonText:m,onCardClick:s}=i;return e.jsxs(w,{ref:o,className:"blog-card",onClick:s,children:[e.jsxs(k,{children:[e.jsx("div",{className:"text-wr-title",children:n}),e.jsx("div",{className:"text-wr",children:r}),e.jsx($,{color:"gray",onClick:s,children:m})]}),e.jsx(T.ProductImageWrapper,{src:l})]})}),W=c.forwardRef(({},i)=>e.jsxs(w,{className:"blog-card",children:[e.jsxs(k,{children:[e.jsx("div",{className:"skeleton-title"}),e.jsx("div",{className:"text-wr"}),e.jsx("div",{className:"skeleton-action"})]}),e.jsx("div",{className:"skeleton-img"})]})),P=({limit:i=3,isLoading:o=!1,keyPrefix:n})=>e.jsx(e.Fragment,{children:Array.from({length:i},(l,r)=>e.jsx(W,{isLoading:o},`${n}-skeleton-product-card-${r}`))}),_=({children:i,fallbackComponent:o=e.jsx(e.Fragment,{}),isLoading:n=!1,limit:l,keyPrefix:r})=>e.jsx(c.Suspense,{fallbackComponent:o,children:n===!0?e.jsx(P,{isLoading:n,limit:l,keyPrefix:r}):i}),b=c.memo(R),z=c.forwardRef((i,o)=>{const{icon:n,title:l,items:r,buttonText:m,limit:s=3,options:d,onButtonAction:y=()=>{},buttonLink:p,onSelectOption:x=()=>{},isLoading:v=!1,onSelectCard:u=()=>{}}=i,j=C.useDetectMobile(),S=c.useMemo(()=>e.jsx(e.Fragment,{children:j===!0?r==null?void 0:r.map((t,g)=>e.jsx(b,{title:t==null?void 0:t.title,imageUrl:(t==null?void 0:t.image)||null,text:t==null?void 0:t.text,buttonText:t==null?void 0:t.buttonText,onCardClick:()=>u(t)},g)):r==null?void 0:r.slice(0,s).map((t,g)=>e.jsx(b,{title:t==null?void 0:t.title,imageUrl:(t==null?void 0:t.image)||null,text:t==null?void 0:t.text,buttonText:t==null?void 0:t.buttonText,onCardClick:()=>u(t)},g))}),[r,j,s,u]);return e.jsxs(N.TitleWithOptionsSectionWrapper,{ref:o,children:[e.jsxs("div",{className:"regular-title",children:[e.jsxs("div",{className:"regular-title-text",children:[a.isDefinedNotEmptyString(n)&&e.jsx("i",{className:n}),e.jsx("span",{children:l})]}),a.isDefinedNotEmptyString(p)&&e.jsx(q,{type:"button",btnType:"tinted",color:"gray",onClick:()=>y(p),borderRadius:"curved",children:m})]}),(d==null?void 0:d.length)>0&&e.jsx(B.SelectBar,{items:d,onRemove:t=>{x(t)},onSelect:t=>{x(t)},labelKey:"name",valueKey:"code",noMargin:!0}),e.jsx(M,{limit:s,children:e.jsx(_,{isLoading:v,limit:s,keyPrefix:"explore-landing",children:S})})]})});module.exports=z;

package/dist/BlogsSectionWithFilters.js

@@ -1,23 +1,23 @@
-import { jsxs as n, jsx as t, Fragment as u } from "react/jsx-runtime";
-import { forwardRef as h, Suspense as M, memo as P, useMemo as z } from "react";
+import { jsxs as l, jsx as t, Fragment as h } from "react/jsx-runtime";
+import { forwardRef as u, Suspense as W, memo as x, useMemo as M } from "react";
 import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as C } from "./consts-C1uHV4xc.js";
-import { u as I } from "./useDetectMobile-BC6EGaBc.js";
-import { m as p, t as U, k as S } from "./utils-DCs-SbIv.js";
-import { T as R } from "./style-CsMpu4iC.js";
-import j from "./Button.js";
-import A from "./Link.js";
-import { P as E } from "./index-BLxkXrqU.js";
-import { S as F } from "./index-DXmajb7F.js";
-const L = f.div`
+import { M as S } from "./consts-C1uHV4xc.js";
+import { u as P } from "./useDetectMobile-BC6EGaBc.js";
+import { m as g, t as z, k as v } from "./utils-DCs-SbIv.js";
+import { T as I } from "./style-CsMpu4iC.js";
+import R from "./Button.js";
+import j from "./Link.js";
+import { P as A } from "./index-BLxkXrqU.js";
+import { S as E } from "./index-DXmajb7F.js";
+const F = f.div`
   display: grid;
   grid-template-columns: ${(i) => `repeat(${i.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${C + "px"}) {
+  @media (max-width: ${S + "px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`, N = f.div`
+`, C = f.div`
   display: flex;
   width: 100%;
   box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
@@ -46,16 +46,16 @@ const L = f.div`
     min-height: 3.3125rem;
     max-height: 3.3125rem;
     border-radius: 0.75rem;
-    background-color: ${p("-90deg")};
+    background-color: ${g("-90deg")};
   }
 
   & a {
     margin-top: auto;
   }
 
-  @media (max-width: ${C + "px"}) {
+  @media (max-width: ${S + "px"}) {
   }
-`, T = f.div`
+`, N = f.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -69,118 +69,114 @@ const L = f.div`
   & .skeleton-title {
     height: 1.5rem;
     width: 80%;
-    background-color: ${p("-90deg")};
+    background-color: ${g("-90deg")};
   }
 
   & .skeleton-action {
     height: 1.25rem;
     width: 20%;
-    background-color: ${p("-90deg")};
+    background-color: ${g("-90deg")};
   }
 
   & .text-wr {
     font-weight: 400;
     font-size: 0.875rem;
     color: var(--gray-700, #4e555f);
-    ${U(3)}
+    ${z(3)}
   }
-`, O = h((i, l) => {
-  const { title: o, imageUrl: m, text: r, buttonText: c, onCardClick: a } = i;
-  return /* @__PURE__ */ n(N, { ref: l, className: "blog-card", onClick: a, children: [
-    /* @__PURE__ */ n(T, { children: [
+`, L = u((i, a) => {
+  const { title: o, imageUrl: m, text: r, buttonText: c, onCardClick: n } = i;
+  return /* @__PURE__ */ l(C, { ref: a, className: "blog-card", onClick: n, children: [
+    /* @__PURE__ */ l(N, { children: [
       /* @__PURE__ */ t("div", { className: "text-wr-title", children: o }),
       /* @__PURE__ */ t("div", { className: "text-wr", children: r }),
-      /* @__PURE__ */ t(A, { color: "gray", onClick: a, children: c })
+      /* @__PURE__ */ t(j, { color: "gray", onClick: n, children: c })
     ] }),
-    /* @__PURE__ */ t(E, { src: m })
+    /* @__PURE__ */ t(A, { src: m })
   ] });
-}), _ = h(({}, i) => /* @__PURE__ */ n(N, { className: "blog-card", children: [
-  /* @__PURE__ */ n(T, { children: [
+}), O = u(({}, i) => /* @__PURE__ */ l(C, { className: "blog-card", children: [
+  /* @__PURE__ */ l(N, { children: [
     /* @__PURE__ */ t("div", { className: "skeleton-title" }),
     /* @__PURE__ */ t("div", { className: "text-wr" }),
     /* @__PURE__ */ t("div", { className: "skeleton-action" })
   ] }),
   /* @__PURE__ */ t("div", { className: "skeleton-img" })
-] })), D = ({ limit: i = 3, isLoading: l = !1, keyPrefix: o }) => /* @__PURE__ */ t(u, { children: Array.from({ length: i }, (m, r) => /* @__PURE__ */ t(
-  _,
+] })), U = ({ limit: i = 3, isLoading: a = !1, keyPrefix: o }) => /* @__PURE__ */ t(h, { children: Array.from({ length: i }, (m, r) => /* @__PURE__ */ t(
+  O,
   {
-    isLoading: l
+    isLoading: a
   },
   `${o}-skeleton-product-card-${r}`
-)) }), G = ({
+)) }), _ = ({
   children: i,
-  fallbackComponent: l = /* @__PURE__ */ t(u, {}),
+  fallbackComponent: a = /* @__PURE__ */ t(h, {}),
   isLoading: o = !1,
   limit: m,
   keyPrefix: r
-}) => /* @__PURE__ */ t(M, { fallbackComponent: l, children: o === !0 ? /* @__PURE__ */ t(
-  D,
+}) => /* @__PURE__ */ t(W, { fallbackComponent: a, children: o === !0 ? /* @__PURE__ */ t(
+  U,
   {
     isLoading: o,
     limit: m,
     keyPrefix: r
   }
-) : i }), y = P(O), te = h((i, l) => {
+) : i }), y = x(L), ee = u((i, a) => {
   const {
     icon: o,
     title: m,
     items: r,
     buttonText: c,
-    limit: a = 3,
+    limit: n = 3,
     options: d,
-    onButtonAction: $ = () => {
+    onButtonAction: T = () => {
     },
     buttonLink: b,
     onSelectOption: k = () => {
     },
-    isLoading: B = !1,
+    isLoading: $ = !1,
     onSelectCard: s = () => {
-    },
-    getImage: w = () => {
     }
-  } = i, v = I(), W = z(() => /* @__PURE__ */ t(u, { children: v === !0 ? r == null ? void 0 : r.map((e, g) => /* @__PURE__ */ t(
+  } = i, w = P(), B = M(() => /* @__PURE__ */ t(h, { children: w === !0 ? r == null ? void 0 : r.map((e, p) => /* @__PURE__ */ t(
     y,
     {
       title: e == null ? void 0 : e.title,
-      imageUrl: w(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
-      text: e == null ? void 0 : e.description,
-      titleSlug: e == null ? void 0 : e.titleSlug,
+      imageUrl: (e == null ? void 0 : e.image) || null,
+      text: e == null ? void 0 : e.text,
       buttonText: e == null ? void 0 : e.buttonText,
       onCardClick: () => s(e)
     },
-    g
-  )) : r == null ? void 0 : r.slice(0, a).map((e, g) => /* @__PURE__ */ t(
+    p
+  )) : r == null ? void 0 : r.slice(0, n).map((e, p) => /* @__PURE__ */ t(
     y,
     {
       title: e == null ? void 0 : e.title,
-      imageUrl: w(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
-      text: e == null ? void 0 : e.description,
-      titleSlug: e == null ? void 0 : e.titleSlug,
+      imageUrl: (e == null ? void 0 : e.image) || null,
+      text: e == null ? void 0 : e.text,
       buttonText: e == null ? void 0 : e.buttonText,
       onCardClick: () => s(e)
     },
-    g
-  )) }), [r, v, a, s]);
-  return /* @__PURE__ */ n(R, { ref: l, children: [
-    /* @__PURE__ */ n("div", { className: "regular-title", children: [
-      /* @__PURE__ */ n("div", { className: "regular-title-text", children: [
-        S(o) && /* @__PURE__ */ t("i", { className: o }),
+    p
+  )) }), [r, w, n, s]);
+  return /* @__PURE__ */ l(I, { ref: a, children: [
+    /* @__PURE__ */ l("div", { className: "regular-title", children: [
+      /* @__PURE__ */ l("div", { className: "regular-title-text", children: [
+        v(o) && /* @__PURE__ */ t("i", { className: o }),
         /* @__PURE__ */ t("span", { children: m })
       ] }),
-      S(b) && /* @__PURE__ */ t(
-        j,
+      v(b) && /* @__PURE__ */ t(
+        R,
         {
           type: "button",
           btnType: "tinted",
           color: "gray",
-          onClick: () => $(b),
+          onClick: () => T(b),
           borderRadius: "curved",
           children: c
         }
       )
     ] }),
     (d == null ? void 0 : d.length) > 0 && /* @__PURE__ */ t(
-      F,
+      E,
       {
         items: d,
         onRemove: (e) => {
@@ -194,17 +190,17 @@ const L = f.div`
         noMargin: !0
       }
     ),
-    /* @__PURE__ */ t(L, { limit: a, children: /* @__PURE__ */ t(
-      G,
+    /* @__PURE__ */ t(F, { limit: n, children: /* @__PURE__ */ t(
+      _,
       {
-        isLoading: B,
-        limit: a,
+        isLoading: $,
+        limit: n,
         keyPrefix: "explore-landing",
-        children: W
+        children: B
       }
     ) })
   ] });
 });
 export {
-  te as default
+  ee as default
 };

package/dist/CustomLoanMapSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),h=require("react"),C=require("./emotion-styled.browser.esm-BtEseadx.cjs"),T=require("./consts-CtNoHdBj.cjs"),f=require("./index-opywxmcY.cjs"),q=require("./index-BuKj-ITH.cjs"),L=C.styled.div`
+"use strict";const e=require("react/jsx-runtime"),h=require("react"),C=require("./emotion-styled.browser.esm-BtEseadx.cjs"),T=require("./consts-CtNoHdBj.cjs"),f=require("./index-opywxmcY.cjs"),q=require("./index-Dy-o153l.cjs"),L=C.styled.div`
   display: flex;
   gap: 2rem;
 

package/dist/CustomLoanMapSection.js

@@ -3,7 +3,7 @@ import { forwardRef as h } from "react";
 import { s as C } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { M as L } from "./consts-C1uHV4xc.js";
 import { L as T } from "./index-5F6QsgOG.js";
-import { L as F } from "./index-CcLiL4eM.js";
+import { L as F } from "./index-D0Cl3mpJ.js";
 const M = C.div`
   display: flex;
   gap: 2rem;

package/dist/LoanCalculatorSection.cjs

@@ -1 +1,226 @@
-"use strict";const n=require("react/jsx-runtime"),u=require("react"),s=require("./index-BuKj-ITH.cjs"),i=u.forwardRef((t,e)=>{const{loanCalculatorTitle:o,loanCalculatorText:a,loanCalculatorPlaceholder:l,openCalculatorText:r,onOpenCalculator:c=()=>{}}=t;return n.jsx(s.LoanCalculator,{ref:e,title:o,text:a,openCalculatorText:r,onOpenCalculator:c,placeholderText:l})});module.exports=i;
+"use strict";const e=require("react/jsx-runtime"),i=require("react"),W=require("./index-Dy-o153l.cjs"),D=require("./Modal.cjs"),V=require("./Button.cjs"),F=require("./TextInput.cjs"),K=require("./RangeSlider.cjs"),O=require("./emotion-styled.browser.esm-BtEseadx.cjs"),G=require("./IconButton.cjs"),J=O.styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+  position: relative;
+  margin-bottom: 0.5rem;
+  margin-top: -0.5rem;
+  padding-bottom: 1rem;
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: -1.5rem;
+    right: -1.5rem;
+    bottom: 0;
+    height: 0.0625rem;
+    background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
+    z-index: 1;
+  }
+
+  & .header__title {
+    color: var(--gray-950, #14161a);
+    text-align: center;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.5rem;
+    width: 100%;
+  }
+
+  & .header__action {
+    position: absolute;
+    right: 0;
+  }
+`,Q=O.styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  align-self: stretch;
+  padding: 0.5rem;
+  border-top: 0.0625rem solid var(--neutral-95008, rgba(20, 22, 26, 0.08));
+
+  & .footer__action {
+    color: var(--gray-950-beta, #14161a);
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.25rem;
+    letter-spacing: -0.0056rem;
+  }
+`,X=O.styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 2rem;
+  align-self: stretch;
+  padding-top: 0.5rem;
+
+  & .loan-calculator__right {
+    max-width: 22rem;
+
+    & .loan-calculator__summary {
+      display: flex;
+      padding: 1.25rem;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1.25rem;
+      flex: 1 0 0;
+      border-radius: 0.75rem;
+      border: 0.0625rem solid var(--neutral-95008, rgba(20, 22, 26, 0.08));
+      background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
+
+      & .summary__hint {
+        color: var(--gray-600, #676e79);
+        font-size: 0.75rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 1rem;
+        letter-spacing: 0.025rem;
+      }
+
+      & .summary__separator {
+        height: 1px;
+        align-self: stretch;
+        background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
+      }
+
+      & .summary__down {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+        align-self: stretch;
+
+        & .summary__title-wrapper {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          align-self: stretch;
+
+          & .summary__title {
+            color: var(--gray-950, #14161a);
+            font-size: 0.875rem;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 1.25rem;
+            letter-spacing: 0.0156rem;
+
+            &.strong {
+              font-weight: 600;
+              letter-spacing: 0.0063rem;
+            }
+          }
+        }
+      }
+
+      & .summary__up {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+        align-self: stretch;
+
+        & .summary__title-wrapper {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 0.125rem;
+
+          & .summary__title {
+            color: var(--gray-950, #14161a);
+            font-size: 1rem;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 1.5rem;
+            letter-spacing: 0.0063rem;
+
+            &.large {
+              font-size: 1.375rem;
+              font-style: normal;
+              font-weight: 600;
+              line-height: 1.75rem;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  & .loan-calculator__left {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2rem;
+
+    & .loan-calculator__submit {
+      width: 100%;
+    }
+
+    & .loan-calculator__range-inputs {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1.5rem;
+      align-self: stretch;
+
+      & .loan-calculator__range-input {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+        align-self: stretch;
+
+        & .range-input__hint {
+          color: var(--gray-500, #868c98);
+          font-size: 0.75rem;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 1rem;
+          letter-spacing: 0.025rem;
+
+          &.center {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            align-self: stretch;
+          }
+        }
+
+        & .range-input__form-field {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 0.75rem;
+          align-self: stretch;
+
+          & .range-input__label-field {
+            display: flex;
+            align-items: center;
+            align-self: stretch;
+            justify-content: space-between;
+            & .range-input__label {
+              color: var(--gray-950, #14161a);
+              font-size: 0.875rem;
+              font-style: normal;
+              font-weight: 500;
+              line-height: 1.25rem;
+              letter-spacing: -0.0056rem;
+            }
+
+            & .range-input__text {
+              max-width: 100px;
+              width: 100%;
+            }
+          }
+
+          & .range-input__ranger-wrapper {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+`,Y=i.forwardRef(({defaultLoanAmount:a=2e4,defaultInterestRate:n=5,defaultLoanPeriod:o=36,monthlyPayment:x=599,totalInterestPaid:y=21579,currency:r="KM",loanPeriodUnit:c="months",minLoanAmount:d=1,maxLoanAmount:u=3e5,minInterestRate:h=1,maxInterestRate:g=15,isFixedInterestRate:v=!1,minLoanPeriod:_=1,maxLoanPeriod:p=240,loanAmountLabel:j="Loan amount",loanAmountHint:b="Enter the total loan amount you want to borrow.",interestRateLabel:N="Interest rate",interestRateHint:w="Enter the annual interest rate for loan.",loanPeriodLabel:C="Loan period",loanPeriodHint:L="Enter the duration of the loan in months.",submitText:T="Calculate",summaryMonthlyPaymentText:$="Monthly payment",summaryMonthlyPaymentHint:q="Lorem ipsum dolor sit amet consectetur. Eu eu velit faucibus hendrerit egestas aliquam.",summaryTotalPaymentText:R="Total interest paid",summaryTotalPaymentHint:M="Lorem ipsum dolor sit amet consectetur. Sed sed viverra sed lobortis. At eu tellus tristique hac quis.",handleSubmit:S=()=>{}},z)=>{const[f,A]=i.useState(a),[l,P]=i.useState(n),[m,H]=i.useState(o),I=t=>{var s;A(+((s=t==null?void 0:t.target)==null?void 0:s.value))},k=t=>{var s;P(+((s=t==null?void 0:t.target)==null?void 0:s.value))},E=t=>{var s;H(+((s=t==null?void 0:t.target)==null?void 0:s.value))},B=()=>{S({loanAmount:f,interestRate:l,loanPeriod:m})};return e.jsxs(X,{children:[e.jsxs("div",{className:"loan-calculator__left",children:[e.jsxs("div",{className:"loan-calculator__range-inputs",children:[e.jsx("div",{className:"loan-calculator__range-input",children:e.jsxs("div",{className:"range-input__form-field",children:[e.jsxs("div",{className:"range-input__label-field",children:[e.jsx("div",{className:"range-input__label",children:`${j} (${r})`}),e.jsx(F,{value:f,onChange:I,className:"range-input__text"})]}),e.jsxs("div",{className:"range-input__ranger-wrapper",children:[e.jsx(K,{className:"range-input__ranger",defaultValue:f,value:f,min:d,max:u,onChange:I}),e.jsxs("div",{className:"range-input__hint center",children:[e.jsx("div",{children:`${d} ${r}`}),e.jsx("div",{children:`${u} ${r}`})]})]}),e.jsx("div",{className:"range-input__hint",children:b})]})}),e.jsx("div",{className:"loan-calculator__range-input",children:e.jsxs("div",{className:"range-input__form-field",children:[e.jsxs("div",{className:"range-input__label-field",children:[e.jsx("div",{className:"range-input__label",children:`${N} (%)`}),e.jsx(F,{value:l,onChange:k,className:"range-input__text"})]}),e.jsxs("div",{className:"range-input__ranger-wrapper",children:[e.jsx(K,{className:"range-input__ranger",defaultValue:l,value:l,min:h,max:g,disabled:v,onChange:k}),e.jsxs("div",{className:"range-input__hint center",children:[e.jsx("div",{children:`${h} %`}),e.jsx("div",{children:`${g} %`})]})]}),e.jsx("div",{className:"range-input__hint",children:w})]})}),e.jsx("div",{className:"loan-calculator__range-input",children:e.jsxs("div",{className:"range-input__form-field",children:[e.jsxs("div",{className:"range-input__label-field",children:[e.jsx("div",{className:"range-input__label",children:`${C} (${c})`}),e.jsx(F,{value:m,onChange:E,className:"range-input__text"})]}),e.jsxs("div",{className:"range-input__ranger-wrapper",children:[e.jsx(K,{className:"range-input__ranger",defaultValue:m,value:m,min:_,max:p,onChange:E}),e.jsxs("div",{className:"range-input__hint center",children:[e.jsx("div",{children:`${_} ${c}`}),e.jsx("div",{children:`${p} ${c}`})]})]}),e.jsx("div",{className:"range-input__hint",children:L})]})})]}),e.jsx(V,{text:T,className:"loan-calculator__submit",onClick:B})]}),e.jsx("div",{className:"loan-calculator__right",children:e.jsxs("div",{className:"loan-calculator__summary",children:[e.jsxs("div",{className:"summary__up",children:[e.jsxs("div",{className:"summary__title-wrapper",children:[e.jsx("div",{className:"summary__title",children:$}),e.jsx("div",{className:"summary__title large",children:`${x} ${r}`})]}),e.jsx("div",{className:"summary__hint",children:q})]}),e.jsx("div",{className:"summary__separator"}),e.jsxs("div",{className:"summary__down",children:[e.jsxs("div",{className:"summary__title-wrapper",children:[e.jsx("div",{className:"summary__title strong",children:R}),e.jsx("div",{className:"summary__title",children:`${y} ${r}`})]}),e.jsx("div",{className:"summary__hint",children:M})]})]})})]})}),Z=i.forwardRef(({defaultLoanAmount:a=2e4,defaultInterestRate:n=5,defaultLoanPeriod:o=36,monthlyPayment:x=599,totalInterestPaid:y=21579,currency:r="KM",loanPeriodUnit:c="months",minLoanAmount:d=1,maxLoanAmount:u=3e5,minInterestRate:h=1,maxInterestRate:g=15,minLoanPeriod:v=1,maxLoanPeriod:_=240,isFixedInterestRate:p=!1,loanAmountLabel:j="Loan amount",loanAmountHint:b="Enter the total loan amount you want to borrow.",interestRateLabel:N="Interest rate",interestRateHint:w="Enter the annual interest rate for loan.",loanPeriodLabel:C="Loan period",loanPeriodHint:L="Enter the duration of the loan in months.",submitText:T="Calculate",summaryMonthlyPaymentText:$="Monthly payment",summaryMonthlyPaymentHint:q="Lorem ipsum dolor sit amet consectetur. Eu eu velit faucibus hendrerit egestas aliquam.",summaryTotalPaymentText:R="Total interest paid",summaryTotalPaymentHint:M="Lorem ipsum dolor sit amet consectetur. Sed sed viverra sed lobortis. At eu tellus tristique hac quis.",handleSubmit:S=()=>{}},z)=>e.jsx(Y,{defaultLoanAmount:a,defaultInterestRate:n,defaultLoanPeriod:o,monthlyPayment:x,totalInterestPaid:y,currency:r,loanPeriodUnit:c,minLoanAmount:d,maxLoanAmount:u,minInterestRate:h,maxInterestRate:g,isFixedInterestRate:p,minLoanPeriod:v,maxLoanPeriod:_,loanAmountLabel:j,loanAmountHint:b,interestRateLabel:N,interestRateHint:w,loanPeriodLabel:C,loanPeriodHint:L,submitText:T,summaryMonthlyPaymentText:$,summaryMonthlyPaymentHint:q,summaryTotalPaymentText:R,summaryTotalPaymentHint:M,handleSubmit:S})),U=i.forwardRef(({headerTitleText:a="Loan calculator",handleClick:n=()=>{}},o)=>e.jsxs(J,{children:[e.jsx("div",{className:"header__title",children:a}),e.jsx(G,{icon:"times",borderRadius:"curved",btnType:"basic",color:"neutral",size:"small",className:"header__action",onClick:n})]})),ee=i.forwardRef(({footerTitleText:a="Close",handleClick:n=()=>{}},o)=>e.jsx(Q,{children:e.jsx(V,{text:a,btnType:"basic",color:"neutral",onClick:n,className:"footer__action"})})),te=i.forwardRef(({defaultLoanAmount:a=2e4,defaultInterestRate:n=5,defaultLoanPeriod:o=36,monthlyPayment:x=599,totalInterestPaid:y=21579,currency:r="KM",loanPeriodUnit:c="months",minLoanAmount:d=1,maxLoanAmount:u=3e5,minInterestRate:h=1,maxInterestRate:g=15,isFixedInterestRate:v=!1,minLoanPeriod:_=1,maxLoanPeriod:p=240,headerTitleText:j="Loan calculator",footerTitleText:b="Close",loanAmountLabel:N="Loan amount",loanAmountHint:w="Enter the total loan amount you want to borrow.",interestRateLabel:C="Interest rate",interestRateHint:L="Enter the annual interest rate for loan.",loanPeriodLabel:T="Loan period",loanPeriodHint:$="Enter the duration of the loan in months.",submitText:q="Calculate",summaryMonthlyPaymentText:R="Monthly payment",summaryMonthlyPaymentHint:M="Lorem ipsum dolor sit amet consectetur. Eu eu velit faucibus hendrerit egestas aliquam.",summaryTotalPaymentText:S="Total interest paid",summaryTotalPaymentHint:z="Lorem ipsum dolor sit amet consectetur. Sed sed viverra sed lobortis. At eu tellus tristique hac quis.",handleSubmit:f=()=>{},handleCancel:A=()=>{}},l)=>{const P=()=>{var m;(m=l==null?void 0:l.current)==null||m.close(),A()};return e.jsx(D,{ref:l,header:e.jsx(U,{headerTitleText:j,handleClick:P}),footer:e.jsx(ee,{footerTitleText:b,handleClick:P}),showCloseButton:!1,children:e.jsx(Z,{defaultLoanAmount:a,defaultInterestRate:n,defaultLoanPeriod:o,monthlyPayment:x,totalInterestPaid:y,currency:r,loanPeriodUnit:c,minLoanAmount:d,maxLoanAmount:u,minInterestRate:h,maxInterestRate:g,minLoanPeriod:_,maxLoanPeriod:p,isFixedInterestRate:v,loanAmountLabel:N,loanAmountHint:w,interestRateLabel:C,interestRateHint:L,loanPeriodLabel:T,loanPeriodHint:$,submitText:q,summaryMonthlyPaymentText:R,summaryMonthlyPaymentHint:M,summaryTotalPaymentText:S,summaryTotalPaymentHint:z,handleSubmit:f})})}),ae=i.forwardRef((a,n)=>{const{loanCalculatorTitle:o,loanCalculatorText:x,loanCalculatorPlaceholder:y,openCalculatorText:r,onOpenCalculator:c=t=>{},defaultLoanAmount:d,defaultInterestRate:u,defaultLoanPeriod:h,monthlyPayment:g,totalInterestPaid:v,currency:_,loanPeriodUnit:p,minLoanAmount:j,maxLoanAmount:b,minInterestRate:N,maxInterestRate:w,minLoanPeriod:C,maxLoanPeriod:L,headerTitleText:T,footerTitleText:$,loanAmountLabel:q,loanAmountHint:R,interestRateLabel:M,interestRateHint:S,loanPeriodLabel:z,loanPeriodHint:f,submitText:A,summaryMonthlyPaymentText:l,summaryMonthlyPaymentHint:P,summaryTotalPaymentText:m,summaryTotalPaymentHint:H,handleSubmit:I,handleCancel:k}=a,E=i.useRef(),B=t=>{var s;(s=E==null?void 0:E.current)==null||s.open(),c(t)};return e.jsxs(e.Fragment,{children:[e.jsx(W.LoanCalculator,{ref:n,title:o,text:x,openCalculatorText:r,onOpenCalculator:B,placeholderText:y}),e.jsx(te,{ref:E,defaultLoanAmount:d,defaultInterestRate:u,defaultLoanPeriod:h,monthlyPayment:g,totalInterestPaid:v,currency:_,loanPeriodUnit:p,minLoanAmount:j,maxLoanAmount:b,minInterestRate:N,maxInterestRate:w,minLoanPeriod:C,maxLoanPeriod:L,headerTitleText:T,footerTitleText:$,loanAmountLabel:q,loanAmountHint:R,interestRateLabel:M,interestRateHint:S,loanPeriodLabel:z,loanPeriodHint:f,submitText:A,summaryMonthlyPaymentText:l,summaryMonthlyPaymentHint:P,summaryTotalPaymentText:m,summaryTotalPaymentHint:H,handleSubmit:I,handleCancel:k})]})});module.exports=ae;