@lanaco/lnc-react-ui 4.0.121 → 4.0.123

package/dist/OverlayGeneralCardsSection.cjs

@@ -1,91 +1,133 @@
-"use strict";const r=require("react/jsx-runtime"),l=require("react"),g=require("./emotion-styled.browser.esm-BtEseadx.cjs"),x=require("./consts-goSZX3xP.cjs"),f=require("./style-JqDQj4jh.cjs"),u=require("./utils-CZynEOC_.cjs"),p=require("./Button.cjs"),v=require("./ThemeProvider.cjs"),j=g.styled.div`
-  display: grid;
-  grid-template-columns: ${n=>`repeat(${n.limit}, auto)`};
-  gap: 1.25rem;
-  justify-items: center;
-
-  @media (max-width: ${x.MOBILE_SIZE_PX+"px"}) {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-`,h=g.styled.div`
-  width: 100%;
-  overflow: hidden;
-  position: relative;
-
-  border-radius: 0.75rem;
-  background: ${n=>n==null?void 0:n.overlay};
+"use strict";const n=require("react/jsx-runtime"),d=require("react"),t=require("./index-BpbMKBf_.cjs"),u=require("./Button.cjs"),g=require("./emotion-styled.browser.esm-BtEseadx.cjs"),f=require("./consts-goSZX3xP.cjs"),_=g.styled.div`
+  display: flex;
+  height: 28.75rem;
+  padding: 2.25rem;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: space-between;
   cursor: pointer;
-
-  & img {
-    transition: var(--transition, all 0.3s ease);
-    overflow: hidden;
-  }
-  overflow: hidden;
+  flex: 1;
+  flex-shrink: 0;
+  background: ${r=>r==null?void 0:r.backgroundColor}, url(${r=>r==null?void 0:r.backgroundImage});
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 0.75rem;
 
   &:hover {
-    & img {
-      transform: scale(1.1);
-    }
+    flex: 2;
   }
 
-  & .content-wrapper {
-    position: absolute;
-    right: 0;
-    top: 0;
-    padding: 2.25rem;
+  & .section__text {
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
     gap: 1rem;
-    justify-content: space-between;
-    height: 100%;
-    width: 100%;
+    align-self: stretch;
+
+    & .section__title {
+      color: var(--white, #fff);
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.5rem;
+    }
+
+    & .section__description {
+      color: var(--white, #fff);
+      font-size: 1.375rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 1.75rem;
+    }
   }
 
-  & button {
-    width: fit-content;
-    color: var(--gray-950, #14161a);
+  & .section__action {
     background: var(--white, #fff);
+    color: var(--gray-950, #14161a);
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.25rem;
 
     &:hover {
       color: var(--gray-700, #4e555f);
-      background: var(--white, #fff);
+    }
+
+    &:focus {
+      outline: none;
     }
   }
 
-  & .content-text {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    color: var(--white, #fff);
-    font-size: 1rem;
-    font-weight: 500;
+  @media (max-width: ${f.MOBILE_SIZE_PX+"px"}) {
+    padding: 2rem;
+    min-height: 17.5rem;
 
-    & .content-text-title {
-      font-weight: 600;
-      ${u.truncateTextInRows(2)}
+    &:hover {
+      flex: 1;
+    }
+
+    & .section__text {
+      gap: 0.5rem;
+
+      & .section__title {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+      }
+
+      & .section__description {
+        font-size: 1rem;
+        line-height: 1.5rem;
+      }
     }
   }
+`,h=d.forwardRef(({title:r,description:o,buttonText:i,imageUrl:s,backgroundColor:c,handleSelectCard:e=()=>{},handleButtonAction:l=()=>{}},m)=>n.jsxs(_,{backgroundImage:s,backgroundColor:c,onClick:e,children:[n.jsxs("div",{className:"section__text",children:[r&&n.jsx("div",{className:"section__title",children:r}),o&&n.jsx("div",{className:"section__description",children:o})]}),n.jsx(u,{text:i,onClick:a=>{a==null||a.stopPropagation(),l()},borderRadius:"regular",color:"gray",className:"section__action"})]}));h.propTypes={title:t.PropTypes.string,description:t.PropTypes.string,buttonText:t.PropTypes.string,imageUrl:t.PropTypes.string,backgroundColor:t.PropTypes.string,handleSelectCard:t.PropTypes.func,handleButtonAction:t.PropTypes.func};const x=g.styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.5rem;
 
-  & img {
-    aspect-ratio: 1 / 1;
-    mix-blend-mode: multiply;
+  & .section__title {
+    color: var(--gray-950, #14161a);
+    font-size: 1.5rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 2rem;
+    letter-spacing: -0.0294rem;
+  }
+
+  & .section__items {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
     width: 100%;
-    object-fit: cover;
   }
 
-  & .img-skeleton {
-    background-color: ${u.linearGradientAnimation("-90deg")};
-    min-height: 28.75rem;
+  & .section__item {
+    background: lightblue;
+    height: 24rem;
+    transition: width 0.5s ease;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    flex: 1;
+
+    &:hover {
+      flex: 2;
+      transition: width 0.5s ease;
+    }
   }
 
-  @media (max-width: ${x.MOBILE_SIZE_PX+"px"}) {
-    & img,
-    .img.skeleton {
-      aspect-ratio: unset;
-      min-height: 28.75rem;
-      max-height: 28.75rem;
+  @media (max-width: ${f.MOBILE_SIZE_PX+"px"}) {
+    & .section__title {
+      font-size: 1.375rem;
+      line-height: 1.75rem;
+    }
+
+    & .section__items {
+      flex-direction: column;
     }
   }
-`,y=l.forwardRef(({},n)=>r.jsx(h,{ref:n,children:r.jsx("div",{className:"img-skeleton"})})),w=({limit:n=2,isLoading:t=!1,keyPrefix:o})=>r.jsx(r.Fragment,{children:Array.from({length:n},(s,a)=>r.jsx(y,{isLoading:t},`${o}-skeleton-product-card-${a}`))}),m=({children:n,fallbackComponent:t=r.jsx(r.Fragment,{}),isLoading:o=!1,limit:s,keyPrefix:a})=>r.jsx(l.Suspense,{fallbackComponent:t,children:o===!0?r.jsx(w,{isLoading:o,limit:s,keyPrefix:a}):n}),k=l.forwardRef(({title:n,image:t,backgroundColor:o,description:s,buttonText:a,handleClick:i=()=>{},onButtonAction:c=()=>{}},e)=>{const{theme:d}=v.useTheme();return r.jsx(r.Fragment,{children:r.jsxs(h,{ref:e,theme:d,overlay:o,onClick:i,children:[r.jsx("img",{src:t}),r.jsxs("div",{className:"content-wrapper",children:[r.jsxs("div",{className:"content-text",children:[r.jsx("div",{children:n}),r.jsx("div",{className:"content-text-title",children:s})]}),u.isDefinedNotEmptyString(a)&&r.jsx(p,{text:a,onClick:c,className:"text__action",size:"medium",color:"gray"})]})]})})}),b=l.forwardRef(({title:n,items:t,limit:o=2,onSelectCard:s=()=>{},isLoading:a=!1,onButtonAction:i=()=>{}},c)=>r.jsxs(f.RegulatTitleSectionWrapper,{ref:c,children:[r.jsx("div",{className:"regular-title center",children:r.jsx("div",{className:"regular-title-text",children:r.jsx("span",{children:n})})}),r.jsx(j,{limit:o,children:r.jsx(m,{isLoading:a,limit:o,keyPrefix:"explore-landing",children:t==null?void 0:t.map((e,d)=>r.jsx(k,{title:e==null?void 0:e.title,image:e==null?void 0:e.imageUrl,description:e==null?void 0:e.description,buttonText:e==null?void 0:e.buttonText,backgroundColor:e==null?void 0:e.backgroundColor,handleClick:()=>s(e==null?void 0:e.selectAction,e),onButtonAction:()=>i(e==null?void 0:e.buttonLink,e)},`landing-page-overlay-general-card__${d+1}`))})})]}));module.exports=b;
+`,p=d.forwardRef(({title:r,items:o,onSelectCard:i=()=>{},onButtonAction:s=()=>{}},c)=>n.jsxs(x,{children:[n.jsx("div",{className:"section__title",children:r}),n.jsx("div",{className:"section__items",children:o==null?void 0:o.map((e,l)=>n.jsx(h,{title:e==null?void 0:e.title,description:e==null?void 0:e.description,imageUrl:e==null?void 0:e.imageUrl,buttonText:e==null?void 0:e.buttonText,backgroundColor:e==null?void 0:e.backgroundColor,handleSelectCard:()=>i(e),handleButtonAction:()=>s(e)},`overlay-general-card__${l+1}`))})]}));module.exports=p;

package/dist/OverlayGeneralCardsSection.js

@@ -1,197 +1,208 @@
-import { jsx as r, Fragment as g, jsxs as i } from "react/jsx-runtime";
-import { forwardRef as p, Suspense as m } from "react";
-import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { P as t } from "./index-CblbdqjE.js";
+import _ from "./Button.js";
+import { s as g } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { M as h } from "./consts-BuFChS64.js";
-import { R as v } from "./style-08foMKSd.js";
-import { p as x, o as y, k as w } from "./utils-BbgAIA9N.js";
-import k from "./Button.js";
-import { useTheme as b } from "./ThemeProvider.js";
-const $ = f.div`
-  display: grid;
-  grid-template-columns: ${(n) => `repeat(${n.limit}, auto)`};
-  gap: 1.25rem;
-  justify-items: center;
-
-  @media (max-width: ${h + "px"}) {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-`, u = f.div`
-  width: 100%;
-  overflow: hidden;
-  position: relative;
-
-  border-radius: 0.75rem;
-  background: ${(n) => n == null ? void 0 : n.overlay};
+const u = g.div`
+  display: flex;
+  height: 28.75rem;
+  padding: 2.25rem;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: space-between;
   cursor: pointer;
-
-  & img {
-    transition: var(--transition, all 0.3s ease);
-    overflow: hidden;
-  }
-  overflow: hidden;
+  flex: 1;
+  flex-shrink: 0;
+  background: ${(r) => r == null ? void 0 : r.backgroundColor}, url(${(r) => r == null ? void 0 : r.backgroundImage});
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 0.75rem;
 
   &:hover {
-    & img {
-      transform: scale(1.1);
-    }
+    flex: 2;
   }
 
-  & .content-wrapper {
-    position: absolute;
-    right: 0;
-    top: 0;
-    padding: 2.25rem;
+  & .section__text {
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
     gap: 1rem;
-    justify-content: space-between;
-    height: 100%;
-    width: 100%;
+    align-self: stretch;
+
+    & .section__title {
+      color: var(--white, #fff);
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.5rem;
+    }
+
+    & .section__description {
+      color: var(--white, #fff);
+      font-size: 1.375rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 1.75rem;
+    }
   }
 
-  & button {
-    width: fit-content;
-    color: var(--gray-950, #14161a);
+  & .section__action {
     background: var(--white, #fff);
+    color: var(--gray-950, #14161a);
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.25rem;
 
     &:hover {
       color: var(--gray-700, #4e555f);
-      background: var(--white, #fff);
+    }
+
+    &:focus {
+      outline: none;
     }
   }
 
-  & .content-text {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    color: var(--white, #fff);
-    font-size: 1rem;
-    font-weight: 500;
+  @media (max-width: ${h + "px"}) {
+    padding: 2rem;
+    min-height: 17.5rem;
 
-    & .content-text-title {
-      font-weight: 600;
-      ${x(2)}
+    &:hover {
+      flex: 1;
+    }
+
+    & .section__text {
+      gap: 0.5rem;
+
+      & .section__title {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+      }
+
+      & .section__description {
+        font-size: 1rem;
+        line-height: 1.5rem;
+      }
     }
   }
+`, m = f(
+  ({
+    title: r,
+    description: n,
+    buttonText: i,
+    imageUrl: a,
+    backgroundColor: d,
+    handleSelectCard: e = () => {
+    },
+    handleButtonAction: l = () => {
+    }
+  }, p) => /* @__PURE__ */ c(
+    u,
+    {
+      backgroundImage: a,
+      backgroundColor: d,
+      onClick: e,
+      children: [
+        /* @__PURE__ */ c("div", { className: "section__text", children: [
+          r && /* @__PURE__ */ o("div", { className: "section__title", children: r }),
+          n && /* @__PURE__ */ o("div", { className: "section__description", children: n })
+        ] }),
+        /* @__PURE__ */ o(
+          _,
+          {
+            text: i,
+            onClick: (s) => {
+              s == null || s.stopPropagation(), l();
+            },
+            borderRadius: "regular",
+            color: "gray",
+            className: "section__action"
+          }
+        )
+      ]
+    }
+  )
+);
+m.propTypes = {
+  title: t.string,
+  description: t.string,
+  buttonText: t.string,
+  imageUrl: t.string,
+  backgroundColor: t.string,
+  handleSelectCard: t.func,
+  handleButtonAction: t.func
+};
+const x = g.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.5rem;
+
+  & .section__title {
+    color: var(--gray-950, #14161a);
+    font-size: 1.5rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 2rem;
+    letter-spacing: -0.0294rem;
+  }
 
-  & img {
-    aspect-ratio: 1 / 1;
-    mix-blend-mode: multiply;
+  & .section__items {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
     width: 100%;
-    object-fit: cover;
   }
 
-  & .img-skeleton {
-    background-color: ${y("-90deg")};
-    min-height: 28.75rem;
+  & .section__item {
+    background: lightblue;
+    height: 24rem;
+    transition: width 0.5s ease;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    flex: 1;
+
+    &:hover {
+      flex: 2;
+      transition: width 0.5s ease;
+    }
   }
 
   @media (max-width: ${h + "px"}) {
-    & img,
-    .img.skeleton {
-      aspect-ratio: unset;
-      min-height: 28.75rem;
-      max-height: 28.75rem;
+    & .section__title {
+      font-size: 1.375rem;
+      line-height: 1.75rem;
     }
-  }
-`, C = p(({}, n) => /* @__PURE__ */ r(u, { ref: n, children: /* @__PURE__ */ r("div", { className: "img-skeleton" }) })), N = ({ limit: n = 2, isLoading: o = !1, keyPrefix: t }) => /* @__PURE__ */ r(g, { children: Array.from({ length: n }, (l, a) => /* @__PURE__ */ r(
-  C,
-  {
-    isLoading: o
-  },
-  `${t}-skeleton-product-card-${a}`
-)) }), S = ({
-  children: n,
-  fallbackComponent: o = /* @__PURE__ */ r(g, {}),
-  isLoading: t = !1,
-  limit: l,
-  keyPrefix: a
-}) => /* @__PURE__ */ r(m, { fallbackComponent: o, children: t === !0 ? /* @__PURE__ */ r(
-  N,
-  {
-    isLoading: t,
-    limit: l,
-    keyPrefix: a
-  }
-) : n }), _ = p(
-  ({
-    title: n,
-    image: o,
-    backgroundColor: t,
-    description: l,
-    buttonText: a,
-    handleClick: c = () => {
-    },
-    onButtonAction: d = () => {
+
+    & .section__items {
+      flex-direction: column;
     }
-  }, e) => {
-    const { theme: s } = b();
-    return /* @__PURE__ */ r(g, { children: /* @__PURE__ */ i(
-      u,
-      {
-        ref: e,
-        theme: s,
-        overlay: t,
-        onClick: c,
-        children: [
-          /* @__PURE__ */ r("img", { src: o }),
-          /* @__PURE__ */ i("div", { className: "content-wrapper", children: [
-            /* @__PURE__ */ i("div", { className: "content-text", children: [
-              /* @__PURE__ */ r("div", { children: n }),
-              /* @__PURE__ */ r("div", { className: "content-text-title", children: l })
-            ] }),
-            w(a) && /* @__PURE__ */ r(
-              k,
-              {
-                text: a,
-                onClick: d,
-                className: "text__action",
-                size: "medium",
-                color: "gray"
-              }
-            )
-          ] })
-        ]
-      }
-    ) });
   }
-), E = p(
-  ({
-    title: n,
-    items: o,
-    limit: t = 2,
-    onSelectCard: l = () => {
-    },
-    isLoading: a = !1,
-    onButtonAction: c = () => {
-    }
-  }, d) => /* @__PURE__ */ i(v, { ref: d, children: [
-    /* @__PURE__ */ r("div", { className: "regular-title center", children: /* @__PURE__ */ r("div", { className: "regular-title-text", children: /* @__PURE__ */ r("span", { children: n }) }) }),
-    /* @__PURE__ */ r($, { limit: t, children: /* @__PURE__ */ r(
-      S,
+`, z = f(
+  ({ title: r, items: n, onSelectCard: i = () => {
+  }, onButtonAction: a = () => {
+  } }, d) => /* @__PURE__ */ c(x, { children: [
+    /* @__PURE__ */ o("div", { className: "section__title", children: r }),
+    /* @__PURE__ */ o("div", { className: "section__items", children: n == null ? void 0 : n.map((e, l) => /* @__PURE__ */ o(
+      m,
       {
-        isLoading: a,
-        limit: t,
-        keyPrefix: "explore-landing",
-        children: o == null ? void 0 : o.map((e, s) => /* @__PURE__ */ r(
-          _,
-          {
-            title: e == null ? void 0 : e.title,
-            image: e == null ? void 0 : e.imageUrl,
-            description: e == null ? void 0 : e.description,
-            buttonText: e == null ? void 0 : e.buttonText,
-            backgroundColor: e == null ? void 0 : e.backgroundColor,
-            handleClick: () => l(e == null ? void 0 : e.selectAction, e),
-            onButtonAction: () => c(e == null ? void 0 : e.buttonLink, e)
-          },
-          `landing-page-overlay-general-card__${s + 1}`
-        ))
-      }
-    ) })
+        title: e == null ? void 0 : e.title,
+        description: e == null ? void 0 : e.description,
+        imageUrl: e == null ? void 0 : e.imageUrl,
+        buttonText: e == null ? void 0 : e.buttonText,
+        backgroundColor: e == null ? void 0 : e.backgroundColor,
+        handleSelectCard: () => i(e),
+        handleButtonAction: () => a(e)
+      },
+      `overlay-general-card__${l + 1}`
+    )) })
   ] })
 );
 export {
-  E as default
+  z as default
 };

package/dist/SimpleProductsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),n=require("react"),k=require("./emotion-styled.browser.esm-BtEseadx.cjs"),M=require("./consts-goSZX3xP.cjs"),U=require("./useDetectMobile-zkbzoOGV.cjs"),F=require("./index-B_HNDmXL.cjs"),N=require("./index-BaLBHyTh.cjs"),v=require("./suspense-product-card-simple-CJwnghtt.cjs"),T=k.styled.div`
+"use strict";const r=require("react/jsx-runtime"),n=require("react"),k=require("./emotion-styled.browser.esm-BtEseadx.cjs"),M=require("./consts-goSZX3xP.cjs"),U=require("./useDetectMobile-zkbzoOGV.cjs"),F=require("./index-B_HNDmXL.cjs"),N=require("./index-CSgGox95.cjs"),v=require("./suspense-product-card-simple-CJwnghtt.cjs"),T=k.styled.div`
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 1.25rem;

package/dist/SimpleProductsSection.js

@@ -4,7 +4,7 @@ import { s as v } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { M as B } from "./consts-BuFChS64.js";
 import { u as I } from "./useDetectMobile-Bkvj0VMa.js";
 import { S as L } from "./index-B2pFbNKc.js";
-import { T as j } from "./index-CsrdUl1x.js";
+import { T as j } from "./index-DK8dqEUQ.js";
 import { S as z } from "./suspense-product-card-simple-Z-FddSb-.js";
 const C = v.div`
   display: grid;

package/dist/index-Bg5OOQN0.cjs

@@ -0,0 +1,5 @@
+"use strict";const a=require("./_commonjsHelpers-DwTZ_eVU.cjs");var i={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/(function(n){(function(){var c={}.hasOwnProperty;function e(){for(var t="",r=0;r<arguments.length;r++){var s=arguments[r];s&&(t=o(t,f(s)))}return t}function f(t){if(typeof t=="string"||typeof t=="number")return t;if(typeof t!="object")return"";if(Array.isArray(t))return e.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var r="";for(var s in t)c.call(t,s)&&t[s]&&(r=o(r,s));return r}function o(t,r){return r?t?t+" "+r:t+r:t}n.exports?(e.default=e,n.exports=e):window.classNames=e})()})(i);var u=i.exports;const p=a.getDefaultExportFromCjs(u);exports.classNames=p;

package/dist/{index-BaLBHyTh.cjs → index-CSgGox95.cjs}

@@ -2,11 +2,11 @@
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
-  color: var(--gray-950, #14161A);
+  color: var(--gray-950, #14161a);
   justify-content: center;
 
   & button {
-    width: fit-content
+    width: fit-content;
   }
 
   & .block-group {
@@ -17,17 +17,17 @@
   & .txt-block-subtitle {
     font-size: 0.75rem;
     font-weight: 400;
-    color: var(--gray-500);
+    color: var(--gray-500, #868c98);
   }
   & .txt-block-title {
     font-size: 1.5rem;
     font-weight: 600;
-    color: var(--gray-950, #14161A);
+    color: var(--gray-950, #14161a);
   }
   & .txt-block-description {
     font-size: 0.875rem;
     font-weight: 400;
-    color: var(--gray-700, #4E555F);
+    color: var(--gray-700, #4e555f);
   }
 
   @media (max-width: ${u.MOBILE_SIZE_PX+"px"}) {
@@ -37,4 +37,4 @@
       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;
+`,f=a.forwardRef((e,m)=>{const{title:o,subtitle:r,description:i,buttonText:c,buttonLink:n,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(n),color:"gray",children:c})]})});exports.TextBlockV1=f;

package/dist/{index-CsrdUl1x.js → index-DK8dqEUQ.js}

@@ -7,11 +7,11 @@ const u = m.div`
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
-  color: var(--gray-950, #14161A);
+  color: var(--gray-950, #14161a);
   justify-content: center;
 
   & button {
-    width: fit-content
+    width: fit-content;
   }
 
   & .block-group {
@@ -22,17 +22,17 @@ const u = m.div`
   & .txt-block-subtitle {
     font-size: 0.75rem;
     font-weight: 400;
-    color: var(--gray-500);
+    color: var(--gray-500, #868c98);
   }
   & .txt-block-title {
     font-size: 1.5rem;
     font-weight: 600;
-    color: var(--gray-950, #14161A);
+    color: var(--gray-950, #14161a);
   }
   & .txt-block-description {
     font-size: 0.875rem;
     font-weight: 400;
-    color: var(--gray-700, #4E555F);
+    color: var(--gray-700, #4e555f);
   }
 
   @media (max-width: ${f + "px"}) {