@lanaco/lnc-react-ui 4.0.132 → 4.0.134

package/dist/BannerSectionCarousel.cjs

@@ -11,12 +11,80 @@
     align-items: center;
   }
 
-  & .carousel-container {
-    padding-bottom: 1.25rem;
-  }
-
   & .carousel-item {
     padding-right: 0;
+
+    &:not(.react-multi-carousel-item--active) {
+      & .section__card {
+        height: 22.5rem;
+      }
+    }
+
+    & .section__card {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: flex-start;
+      flex: 1 0 0;
+      align-self: stretch;
+      border-radius: 0.75rem;
+      width: 100%;
+      height: 22.5rem;
+      position: relative;
+      overflow: hidden;
+
+      & .section__image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+      }
+
+      & .card__content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        padding: 3rem;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+
+      & .card__text {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.25rem;
+      }
+
+      & .card__title {
+        color: var(--white, #fff);
+        font-size: 1.75rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 2.25rem;
+      }
+
+      & .card__description {
+        color: var(--white, #fff);
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 1.5rem;
+      }
+
+      & .card__action {
+        padding: 0.625rem 0.75rem;
+        background: var(--white, #fff);
+        color: var(--gray-950, #14161a);
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 1.25rem;
+        width: fit-content;
+      }
+    }
   }
 
   & .react-multiple-carousel__arrow {
@@ -46,101 +114,57 @@
     right: 1rem;
   }
 
-  & .section__card {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-start;
-    flex: 1 0 0;
-    align-self: stretch;
-    border-radius: 0.75rem;
-    width: 100%;
-    height: 22.5rem;
-    position: relative;
-    overflow: hidden;
-
-    & .section__image {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      display: block;
-    }
-
-    & .card__content {
-      position: absolute;
-      top: 0;
-      left: 0;
-      padding: 3rem;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-    }
-
-    & .card__text {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 0.25rem;
+  @media (max-width: 464px) {
+    & .carousel-container {
+      min-height: 23.4375rem;
     }
 
-    & .card__title {
-      color: var(--white, #fff);
-      font-size: 1.75rem;
-      font-style: normal;
-      font-weight: 600;
-      line-height: 2.25rem;
-    }
+    & .carousel-item {
+      padding-right: 1rem;
 
-    & .card__description {
-      color: var(--white, #fff);
-      font-size: 1rem;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 1.5rem;
-    }
+      &:last-of-type {
+        padding-left: 1rem;
+        padding-right: 0;
+      }
 
-    & .card__action {
-      padding: 0.625rem 0.75rem;
-      background: var(--white, #fff);
-      color: var(--gray-950, #14161a);
-      font-size: 0.875rem;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 1.25rem;
-      width: fit-content;
-    }
-  }
+      &:nth-last-child(2) {
+        padding-right: 0;
+      }
 
-  & .react-multi-carousel-item:not(.react-multi-carousel-item--active) {
-    & .section__card {
-      height: 22.5rem;
-    }
-  }
+      &:not(.react-multi-carousel-item--active) {
+        & .section__card {
+          height: 20.625rem;
+        }
+      }
 
-  @media (max-width: 464px) {
-    & .carousel-item {
-      padding-right: 0.5rem;
-    }
+      &.react-multi-carousel-item--active:not([data-index="0"]) {
+        & .section__card {
+          animation: scaleCarouselItem 500ms forwards;
+        }
+      }
 
-    & .section__card {
-      height: 23.4375rem;
-      border-radius: 0.5rem;
+      & .section__card {
+        height: 23.4375rem;
+        border-radius: 0.5rem;
 
-      & .section__image {
-        object-fit: fill;
-      }
+        & .section__image {
+          object-fit: fill;
+        }
 
-      & .card__content {
-        display: none;
+        & .card__content {
+          display: none;
+        }
       }
     }
 
-    & .react-multi-carousel-item:not(.react-multi-carousel-item--active) {
-      & .section__card {
+    @keyframes scaleCarouselItem {
+      from {
         height: 20.625rem;
-        transform: scale(0.95);
+      }
+
+      top {
+        height: 23.4375rem;
       }
     }
   }
-`,pt=x.forwardRef(({items:o=[],onSelectItem:i=()=>{},onButtonAction:t=()=>{}},e)=>{const r={desktop:{breakpoint:{max:3e3,min:1024},items:1,partialVisibilityGutter:0},tablet:{breakpoint:{max:1024,min:464},items:1,partialVisibilityGutter:0},mobile:{breakpoint:{max:464,min:0},items:1,partialVisibilityGutter:64}},a=mt.useDetectMobile();return P.jsx(oe,{ref:e,children:P.jsx(ie,{responsive:r,removeArrowOnDeviceType:["tablet","mobile"],infinite:!a,keyBoardControl:!0,autoPlay:!0,partialVisible:!0,customTransition:"transform 500ms ease-in-out",transitionDuration:1e3,sliderClass:"carousel-slider",itemClass:"carousel-item",containerClass:"carousel-container",children:o==null?void 0:o.map((n,s)=>P.jsxs("div",{className:"section__card",onClick:()=>i(n),children:[P.jsx("img",{src:n==null?void 0:n.imageUrl,alt:`Slide ${s+1}`,className:"section__image"}),P.jsxs("div",{className:"card__content",children:[P.jsxs("div",{className:"card__text",children:[(n==null?void 0:n.title)&&P.jsx("div",{className:"card__title",children:n==null?void 0:n.title}),(n==null?void 0:n.title)&&P.jsx("div",{className:"card__description",children:n==null?void 0:n.description})]}),(n==null?void 0:n.buttonText)&&P.jsx(ft,{text:n==null?void 0:n.buttonText,className:"card__action",size:"medium",onClick:l=>{l==null||l.stopPropagation(),t(n)}})]})]},`banner-section-carousel-item__${s+1}`))})},`banner-section-carousel__${a}`)});pt.propTypes={items:z.PropTypes.array,onSelectItem:z.PropTypes.func,onButtonAction:z.PropTypes.func};module.exports=pt;
+`,pt=x.forwardRef(({items:o=[],onSelectItem:i=()=>{},onButtonAction:t=()=>{}},e)=>{const r={desktop:{breakpoint:{max:3e3,min:1024},items:1,partialVisibilityGutter:0},tablet:{breakpoint:{max:1024,min:464},items:1,partialVisibilityGutter:0},mobile:{breakpoint:{max:464,min:0},items:1,partialVisibilityGutter:64}},a=mt.useDetectMobile();return P.jsx(oe,{ref:e,children:P.jsx(ie,{responsive:r,removeArrowOnDeviceType:["tablet","mobile"],infinite:!a,keyBoardControl:!0,autoPlay:!0,partialVisible:!0,customTransition:"transform 500ms ease-in-out",sliderClass:"carousel-slider",itemClass:"carousel-item",containerClass:"carousel-container",rewind:!0,rewindWithAnimation:!0,children:o==null?void 0:o.map((n,s)=>P.jsxs("div",{className:"section__card",onClick:()=>i(n),children:[P.jsx("img",{src:n==null?void 0:n.imageUrl,alt:`Slide ${s+1}`,className:"section__image"}),P.jsxs("div",{className:"card__content",children:[P.jsxs("div",{className:"card__text",children:[(n==null?void 0:n.title)&&P.jsx("div",{className:"card__title",children:n==null?void 0:n.title}),(n==null?void 0:n.title)&&P.jsx("div",{className:"card__description",children:n==null?void 0:n.description})]}),(n==null?void 0:n.buttonText)&&P.jsx(ft,{text:n==null?void 0:n.buttonText,className:"card__action",size:"medium",onClick:l=>{l==null||l.stopPropagation(),t(n)}})]})]},`banner-section-carousel-item__${s+1}`))})},`banner-section-carousel__${a}`)});pt.propTypes={items:z.PropTypes.array,onSelectItem:z.PropTypes.func,onButtonAction:z.PropTypes.func};module.exports=pt;

package/dist/BannerSectionCarousel.js

@@ -139,12 +139,12 @@ H.populateNextSlides = Rt;
 var tt = {};
 Object.defineProperty(tt, "__esModule", { value: !0 });
 var xt = A, Ot = S, At = S;
-function Dt(o, i, t) {
+function Wt(o, i, t) {
   t === void 0 && (t = 0);
   var e, r, a = o.currentSlide, n = o.itemWidth, s = o.slidesToShow, l = i.children, u = i.showDots, h = i.infinite, c = Ot.getSlidesToSlide(o, i), d = a - t - (0 < t ? 0 : c), p = (xt.Children.toArray(l).length - s) % c;
   return r = 0 <= d ? (e = d, u && !h && 0 < p && At.isInRightEnd(o) && (e = a - p), -n * e) : e = d < 0 && a !== 0 ? 0 : void 0, { nextSlides: e, nextPosition: r };
 }
-tt.populatePreviousSlides = Dt;
+tt.populatePreviousSlides = Wt;
 var pt = {};
 (function(o) {
   function i(t, e, r, a, n, s) {
@@ -165,8 +165,8 @@ var X = O;
 m.getWidthFromDeviceType = X.getWidthFromDeviceType, m.getPartialVisibilityGutter = X.getPartialVisibilityGutter, m.getItemClientSideWidth = X.getItemClientSideWidth;
 var P = S;
 m.getInitialState = P.getInitialState, m.getIfSlideIsVisbile = P.getIfSlideIsVisbile, m.getTransformForCenterMode = P.getTransformForCenterMode, m.getTransformForPartialVsibile = P.getTransformForPartialVsibile, m.isInLeftEnd = P.isInLeftEnd, m.isInRightEnd = P.isInRightEnd, m.notEnoughChildren = P.notEnoughChildren, m.getSlidesToSlide = P.getSlidesToSlide;
-var Wt = Z;
-m.throttle = Wt.default;
+var Dt = Z;
+m.throttle = Dt.default;
 var Lt = ct;
 m.throwError = Lt.default;
 var kt = H;
@@ -219,25 +219,25 @@ function Ut(o, i, t, e) {
 }
 it.getLookupTableForNextSlides = Ut;
 Object.defineProperty(et, "__esModule", { value: !0 });
-var W = A, Xt = B, Yt = it, nt = S, Kt = function(o) {
+var D = A, Xt = B, Yt = it, nt = S, Kt = function(o) {
   var i = o.props, t = o.state, e = o.goToSlide, r = o.getState, a = i.showDots, n = i.customDot, s = i.dotListClass, l = i.infinite, u = i.children;
   if (!a || nt.notEnoughChildren(t)) return null;
-  var h, c = t.currentSlide, d = t.slidesToShow, p = nt.getSlidesToSlide(t, i), f = W.Children.toArray(u);
+  var h, c = t.currentSlide, d = t.slidesToShow, p = nt.getSlidesToSlide(t, i), f = D.Children.toArray(u);
   h = l ? Math.ceil(f.length / p) : Math.ceil((f.length - d) / p) + 1;
   var g = Yt.getLookupTableForNextSlides(h, t, i, f), w = Xt.getOriginalIndexLookupTableByClones(d, f), b = w[c];
-  return W.createElement("ul", { className: "react-multi-carousel-dot-list " + s }, Array(h).fill(0).map(function(_, y) {
+  return D.createElement("ul", { className: "react-multi-carousel-dot-list " + s }, Array(h).fill(0).map(function(_, y) {
     var I, C;
     if (l) {
       C = g[y];
       var R = w[C];
       I = b === R || R <= b && b < R + p;
     } else {
-      var D = f.length - d, L = y * p;
-      I = (C = D < L ? D : L) === c || C < c && c < C + p && c < f.length - d;
+      var W = f.length - d, L = y * p;
+      I = (C = W < L ? W : L) === c || C < c && c < C + p && c < f.length - d;
     }
-    return n ? W.cloneElement(n, { index: y, active: I, key: y, onClick: function() {
+    return n ? D.cloneElement(n, { index: y, active: I, key: y, onClick: function() {
       return e(C);
-    }, carouselState: r() }) : W.createElement("li", { "data-index": y, key: y, className: "react-multi-carousel-dot " + (I ? "react-multi-carousel-dot--active" : "") }, W.createElement("button", { "aria-label": "Go to slide " + (y + 1), onClick: function() {
+    }, carouselState: r() }) : D.createElement("li", { "data-index": y, key: y, className: "react-multi-carousel-dot " + (I ? "react-multi-carousel-dot--active" : "") }, D.createElement("button", { "aria-label": "Go to slide " + (y + 1), onClick: function() {
       return e(C);
     } }));
   }));
@@ -487,8 +487,8 @@ var T = A, v = m, E = F, Ht = et, st = $, te = ot, j = S, M = 400, at = "transfo
   }, i.prototype.render = function() {
     var t = this.props, e = t.deviceType, r = t.arrows, a = t.renderArrowsWhenDisabled, n = t.removeArrowOnDeviceType, s = t.infinite, l = t.containerClass, u = t.sliderClass, h = t.customTransition, c = t.additionalTransfrom, d = t.renderDotsOutside, p = t.renderButtonGroupOutside, f = t.className, g = t.rtl;
     process.env.NODE_ENV !== "production" && v.throwError(this.state, this.props);
-    var w = v.getInitialState(this.state, this.props), b = w.shouldRenderOnSSR, _ = w.shouldRenderAtAll, y = v.isInLeftEnd(this.state), I = v.isInRightEnd(this.state), C = r && !(n && (e && -1 < n.indexOf(e) || this.state.deviceType && -1 < n.indexOf(this.state.deviceType))) && !v.notEnoughChildren(this.state) && _, R = !s && y, D = !s && I, L = j.getTransform(this.state, this.props);
-    return T.createElement(T.Fragment, null, T.createElement("div", { className: "react-multi-carousel-list " + l + " " + f, dir: g ? "rtl" : "ltr", ref: this.containerRef }, T.createElement("ul", { ref: this.listRef, className: "react-multi-carousel-track " + u, style: { transition: this.isAnimationAllowed ? h || at : "none", overflow: b ? "hidden" : "unset", transform: "translate3d(" + (L + c) + "px,0,0)" }, onMouseMove: this.handleMove, onMouseDown: this.handleDown, onMouseUp: this.handleOut, onMouseEnter: this.handleEnter, onMouseLeave: this.handleOut, onTouchStart: this.handleDown, onTouchMove: this.handleMove, onTouchEnd: this.handleOut }, this.renderCarouselItems()), C && (!R || a) && this.renderLeftArrow(R), C && (!D || a) && this.renderRightArrow(D), _ && !p && this.renderButtonGroups(), _ && !d && this.renderDotsList()), _ && d && this.renderDotsList(), _ && p && this.renderButtonGroups());
+    var w = v.getInitialState(this.state, this.props), b = w.shouldRenderOnSSR, _ = w.shouldRenderAtAll, y = v.isInLeftEnd(this.state), I = v.isInRightEnd(this.state), C = r && !(n && (e && -1 < n.indexOf(e) || this.state.deviceType && -1 < n.indexOf(this.state.deviceType))) && !v.notEnoughChildren(this.state) && _, R = !s && y, W = !s && I, L = j.getTransform(this.state, this.props);
+    return T.createElement(T.Fragment, null, T.createElement("div", { className: "react-multi-carousel-list " + l + " " + f, dir: g ? "rtl" : "ltr", ref: this.containerRef }, T.createElement("ul", { ref: this.listRef, className: "react-multi-carousel-track " + u, style: { transition: this.isAnimationAllowed ? h || at : "none", overflow: b ? "hidden" : "unset", transform: "translate3d(" + (L + c) + "px,0,0)" }, onMouseMove: this.handleMove, onMouseDown: this.handleDown, onMouseUp: this.handleOut, onMouseEnter: this.handleEnter, onMouseLeave: this.handleOut, onTouchStart: this.handleDown, onTouchMove: this.handleMove, onTouchEnd: this.handleOut }, this.renderCarouselItems()), C && (!R || a) && this.renderLeftArrow(R), C && (!W || a) && this.renderRightArrow(W), _ && !p && this.renderButtonGroups(), _ && !d && this.renderDotsList()), _ && d && this.renderDotsList(), _ && p && this.renderButtonGroups());
   }, i.defaultProps = { slidesToSlide: 1, infinite: !1, draggable: !0, swipeable: !0, arrows: !0, renderArrowsWhenDisabled: !1, containerClass: "", sliderClass: "", itemClass: "", keyBoardControl: !0, autoPlaySpeed: 3e3, showDots: !1, renderDotsOutside: !1, renderButtonGroupOutside: !1, minimumTouchDrag: 80, className: "", dotListClass: "", focusOnSelect: !1, centerMode: !1, additionalTransfrom: 0, pauseOnHover: !0, shouldResetAutoplay: !0, rewind: !1, rtl: !1, rewindWithAnimation: !1 }, i;
 }(T.Component);
 J.default = ee;
@@ -509,12 +509,80 @@ const re = /* @__PURE__ */ mt(oe), ne = yt.div`
     align-items: center;
   }
 
-  & .carousel-container {
-    padding-bottom: 1.25rem;
-  }
-
   & .carousel-item {
     padding-right: 0;
+
+    &:not(.react-multi-carousel-item--active) {
+      & .section__card {
+        height: 22.5rem;
+      }
+    }
+
+    & .section__card {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: flex-start;
+      flex: 1 0 0;
+      align-self: stretch;
+      border-radius: 0.75rem;
+      width: 100%;
+      height: 22.5rem;
+      position: relative;
+      overflow: hidden;
+
+      & .section__image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+      }
+
+      & .card__content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        padding: 3rem;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+
+      & .card__text {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.25rem;
+      }
+
+      & .card__title {
+        color: var(--white, #fff);
+        font-size: 1.75rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 2.25rem;
+      }
+
+      & .card__description {
+        color: var(--white, #fff);
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 1.5rem;
+      }
+
+      & .card__action {
+        padding: 0.625rem 0.75rem;
+        background: var(--white, #fff);
+        color: var(--gray-950, #14161a);
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 1.25rem;
+        width: fit-content;
+      }
+    }
   }
 
   & .react-multiple-carousel__arrow {
@@ -544,100 +612,56 @@ const re = /* @__PURE__ */ mt(oe), ne = yt.div`
     right: 1rem;
   }
 
-  & .section__card {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-start;
-    flex: 1 0 0;
-    align-self: stretch;
-    border-radius: 0.75rem;
-    width: 100%;
-    height: 22.5rem;
-    position: relative;
-    overflow: hidden;
-
-    & .section__image {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      display: block;
-    }
-
-    & .card__content {
-      position: absolute;
-      top: 0;
-      left: 0;
-      padding: 3rem;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-    }
-
-    & .card__text {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 0.25rem;
+  @media (max-width: 464px) {
+    & .carousel-container {
+      min-height: 23.4375rem;
     }
 
-    & .card__title {
-      color: var(--white, #fff);
-      font-size: 1.75rem;
-      font-style: normal;
-      font-weight: 600;
-      line-height: 2.25rem;
-    }
+    & .carousel-item {
+      padding-right: 1rem;
 
-    & .card__description {
-      color: var(--white, #fff);
-      font-size: 1rem;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 1.5rem;
-    }
+      &:last-of-type {
+        padding-left: 1rem;
+        padding-right: 0;
+      }
 
-    & .card__action {
-      padding: 0.625rem 0.75rem;
-      background: var(--white, #fff);
-      color: var(--gray-950, #14161a);
-      font-size: 0.875rem;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 1.25rem;
-      width: fit-content;
-    }
-  }
+      &:nth-last-child(2) {
+        padding-right: 0;
+      }
 
-  & .react-multi-carousel-item:not(.react-multi-carousel-item--active) {
-    & .section__card {
-      height: 22.5rem;
-    }
-  }
+      &:not(.react-multi-carousel-item--active) {
+        & .section__card {
+          height: 20.625rem;
+        }
+      }
 
-  @media (max-width: 464px) {
-    & .carousel-item {
-      padding-right: 0.5rem;
-    }
+      &.react-multi-carousel-item--active:not([data-index="0"]) {
+        & .section__card {
+          animation: scaleCarouselItem 500ms forwards;
+        }
+      }
 
-    & .section__card {
-      height: 23.4375rem;
-      border-radius: 0.5rem;
+      & .section__card {
+        height: 23.4375rem;
+        border-radius: 0.5rem;
 
-      & .section__image {
-        object-fit: fill;
-      }
+        & .section__image {
+          object-fit: fill;
+        }
 
-      & .card__content {
-        display: none;
+        & .card__content {
+          display: none;
+        }
       }
     }
 
-    & .react-multi-carousel-item:not(.react-multi-carousel-item--active) {
-      & .section__card {
+    @keyframes scaleCarouselItem {
+      from {
         height: 20.625rem;
-        transform: scale(0.95);
+      }
+
+      top {
+        height: 23.4375rem;
       }
     }
   }
@@ -672,10 +696,11 @@ const re = /* @__PURE__ */ mt(oe), ne = yt.div`
         autoPlay: !0,
         partialVisible: !0,
         customTransition: "transform 500ms ease-in-out",
-        transitionDuration: 1e3,
         sliderClass: "carousel-slider",
         itemClass: "carousel-item",
         containerClass: "carousel-container",
+        rewind: !0,
+        rewindWithAnimation: !0,
         children: o == null ? void 0 : o.map((n, s) => /* @__PURE__ */ z(
           "div",
           {

package/dist/BlogCardsSponsoredSection.cjs

@@ -1,11 +1,11 @@
-"use strict";const r=require("react/jsx-runtime"),c=require("react"),s=require("./utils-DmMdPm9O.cjs"),h=require("./Icon.cjs"),j=require("./style-C_BRvopE.cjs"),N=require("./index-DiIeF_76.cjs"),b=require("./emotion-styled.browser.esm-BtEseadx.cjs"),v=require("./consts-goSZX3xP.cjs"),x=require("./suspense-large-PHdzP1Ln.cjs"),S=require("./Button.cjs"),z=b.styled.div`
+"use strict";const r=require("react/jsx-runtime"),m=require("react"),s=require("./utils-DmMdPm9O.cjs"),h=require("./Icon.cjs"),j=require("./style-DaT7Beup.cjs"),N=require("./index-DiIeF_76.cjs"),b=require("./emotion-styled.browser.esm-BtEseadx.cjs"),v=require("./consts-goSZX3xP.cjs"),x=require("./suspense-large-PHdzP1Ln.cjs"),S=require("./Button.cjs"),z=b.styled.div`
   display: flex;
   padding: 1rem;
   align-items: center;
   gap: 1.25rem;
   border-radius: 1.25rem;
   align-items: stretch;
-  border: ${t=>t!=null&&t.isSponsored?"2px solid var(--yellow-500, #f59e0b)":"1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08))"};
+  border: ${i=>i!=null&&i.isSponsored?"2px solid var(--yellow-500, #f59e0b)":"1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08))"};
   background: var(--white, #fff);
   min-height: 10.5rem;
   position: relative;
@@ -38,6 +38,7 @@
     object-fit: cover;
     height: auto;
     max-width: 12.5rem;
+    min-width: 12.5rem;
     max-height: 9rem;
     border-radius: 0.75rem;
   }
@@ -102,6 +103,7 @@
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
       max-width: 100%;
+      min-width: 100%;
     }
 
     & .wrapper__content {
@@ -119,7 +121,7 @@
       }
     }
   }
-`,I=c.forwardRef(({title:t,imageUrl:p,options:i,publishedAt:m,timeToReadText:g="{0} min read",timeToRead:_=0,numberOfLikes:n=0,numberOfComments:l=0,isSponsored:o=!1,onSelectCard:f=()=>{}},w)=>r.jsxs(z,{isSponsored:o,onClick:f,children:[o&&r.jsx("div",{className:"wrapper__sponsored",children:r.jsx(h,{icon:" mng-lnc-paw",sizeInUnits:"1.5rem"})}),r.jsx(N.ProductImageWrapper,{src:p,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[r.jsxs("div",{className:"wrapper__subcontent",children:[r.jsx("div",{className:"wrapper__title",children:t}),r.jsx("div",{className:"wrapper__tags",children:i&&(i==null?void 0:i.map((a,u)=>r.jsx(j.BlogTag,{color:a==null?void 0:a.color,children:a==null?void 0:a.name},u)))})]}),r.jsxs("div",{className:"wrapper__info",children:[r.jsx("div",{className:"info__text",children:`${s.formatLocaleDateString(m)} • ${s.formatString(g,_)}`}),r.jsxs("div",{className:"info__text",children:[r.jsxs("div",{children:[r.jsx(h,{icon:" mng-lnc-thumbs-up--filled",sizeInUnits:"1rem"}),s.getRoundedNumber(n)]}),r.jsxs("div",{children:[r.jsx(h,{icon:" mng-lnc-messages-filled",sizeInUnits:"1rem"}),s.getRoundedNumber(l)]})]})]})]})]})),R=b.styled.div`
+`,I=m.forwardRef(({title:i,imageUrl:p,options:t,publishedAt:c,timeToReadText:g="{0} min read",timeToRead:_=0,numberOfLikes:n=0,numberOfComments:l=0,isSponsored:o=!1,onSelectCard:f=()=>{}},w)=>r.jsxs(z,{isSponsored:o,onClick:f,children:[o&&r.jsx("div",{className:"wrapper__sponsored",children:r.jsx(h,{icon:" mng-lnc-paw",sizeInUnits:"1.5rem"})}),r.jsx(N.ProductImageWrapper,{src:p,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[r.jsxs("div",{className:"wrapper__subcontent",children:[r.jsx("div",{className:"wrapper__title",children:i}),r.jsx("div",{className:"wrapper__tags",children:t&&(t==null?void 0:t.map((a,u)=>r.jsx(j.BlogTag,{color:a==null?void 0:a.color,children:a==null?void 0:a.name},u)))})]}),r.jsxs("div",{className:"wrapper__info",children:[r.jsx("div",{className:"info__text",children:`${s.formatLocaleDateString(c)} • ${s.formatString(g,_)}`}),r.jsxs("div",{className:"info__text",children:[r.jsxs("div",{children:[r.jsx(h,{icon:" mng-lnc-thumbs-up--filled",sizeInUnits:"1rem"}),s.getRoundedNumber(n)]}),r.jsxs("div",{children:[r.jsx(h,{icon:" mng-lnc-messages-filled",sizeInUnits:"1rem"}),s.getRoundedNumber(l)]})]})]})]})]})),R=b.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -201,4 +203,4 @@
       gap: 1rem;
     }
   }
-`,q=c.memo(I),k=c.forwardRef(({title:t,subtitle:p,icon:i,buttonText:m,buttonLink:g,timeToReadText:_="{0} min read",items:n,onButtonAction:l=()=>{},onSelectCard:o=()=>{},isLoading:f=!1,getImage:w=()=>{}},a)=>{const u=c.useMemo(()=>{var d;return(d=n==null?void 0:n.slice(0,4))==null?void 0:d.map((e,y)=>r.jsx(q,{title:e==null?void 0:e.title,titleSlug:e==null?void 0:e.titleSlug,options:e==null?void 0:e.options,publishedAt:e==null?void 0:e.publishedAt,timeToReadText:_,timeToRead:e==null?void 0:e.timeToRead,numberOfLikes:e==null?void 0:e.numberOfLikes,numberOfComments:e==null?void 0:e.numberOfComments,isSponsored:e==null?void 0:e.isSponsored,onSelectCard:()=>o==null?void 0:o(e),imageUrl:w(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null},`blog-card-sponsored__${y+1}`))},[n]);return r.jsxs(R,{children:[r.jsxs("div",{className:"wrapper__heading",children:[r.jsxs("div",{className:"wrapper__title",children:[t&&r.jsxs("div",{className:"title__text",children:[s.isDefinedNotEmptyString(i)&&r.jsx("i",{className:i}),r.jsx("span",{children:t})]}),l&&r.jsx(S,{text:m,borderRadius:"curved",btnType:"tinted",className:"title__action",color:"neutral",onClick:d=>{var e;(e=d==null?void 0:d.target)==null||e.blur(),l==null||l(g)}})]}),p&&r.jsx("div",{className:"wrapper__subtitle",children:p})]}),r.jsx("div",{className:"wrapper__cards",children:r.jsx(x.SuspenseBlogLarge,{isLoading:f,limit:4,keyPrefix:"blog-section",children:u})})]})});module.exports=k;
+`,q=m.memo(I),k=m.forwardRef(({title:i,subtitle:p,icon:t,buttonText:c,buttonLink:g,timeToReadText:_="{0} min read",items:n,onButtonAction:l=()=>{},onSelectCard:o=()=>{},isLoading:f=!1,getImage:w=()=>{}},a)=>{const u=m.useMemo(()=>{var d;return(d=n==null?void 0:n.slice(0,4))==null?void 0:d.map((e,y)=>r.jsx(q,{title:e==null?void 0:e.title,titleSlug:e==null?void 0:e.titleSlug,options:e==null?void 0:e.options,publishedAt:e==null?void 0:e.publishedAt,timeToReadText:_,timeToRead:e==null?void 0:e.timeToRead,numberOfLikes:e==null?void 0:e.numberOfLikes,numberOfComments:e==null?void 0:e.numberOfComments,isSponsored:e==null?void 0:e.isSponsored,onSelectCard:()=>o==null?void 0:o(e),imageUrl:w(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null},`blog-card-sponsored__${y+1}`))},[n]);return r.jsxs(R,{children:[r.jsxs("div",{className:"wrapper__heading",children:[r.jsxs("div",{className:"wrapper__title",children:[i&&r.jsxs("div",{className:"title__text",children:[s.isDefinedNotEmptyString(t)&&r.jsx("i",{className:t}),r.jsx("span",{children:i})]}),l&&r.jsx(S,{text:c,borderRadius:"curved",btnType:"tinted",className:"title__action",color:"neutral",onClick:d=>{var e;(e=d==null?void 0:d.target)==null||e.blur(),l==null||l(g)}})]}),p&&r.jsx("div",{className:"wrapper__subtitle",children:p})]}),r.jsx("div",{className:"wrapper__cards",children:r.jsx(x.SuspenseBlogLarge,{isLoading:f,limit:4,keyPrefix:"blog-section",children:u})})]})});module.exports=k;

package/dist/BlogCardsSponsoredSection.js

@@ -2,8 +2,8 @@ import { jsxs as a, jsx as r } from "react/jsx-runtime";
 import { forwardRef as b, memo as S, useMemo as k } from "react";
 import { p as v, s as $, v as j, w as u, k as I } from "./utils-BPdU4_1q.js";
 import h from "./Icon.js";
-import { B as R } from "./style-XXDQBreL.js";
-import { P as L } from "./index-3TFXgZHA.js";
+import { B as R } from "./style-DAn9Ifqe.js";
+import { P as L } from "./index-DRP1yTKe.js";
 import { s as y } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { M as N } from "./consts-BuFChS64.js";
 import { S as O } from "./suspense-large-DrD8xVZi.js";
@@ -48,6 +48,7 @@ const U = y.div`
     object-fit: cover;
     height: auto;
     max-width: 12.5rem;
+    min-width: 12.5rem;
     max-height: 9rem;
     border-radius: 0.75rem;
   }
@@ -112,6 +113,7 @@ const U = y.div`
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
       max-width: 100%;
+      min-width: 100%;
     }
 
     & .wrapper__content {
@@ -132,7 +134,7 @@ const U = y.div`
 `, B = b(
   ({
     title: i,
-    imageUrl: m,
+    imageUrl: p,
     options: t,
     publishedAt: d,
     timeToReadText: c = "{0} min read",
@@ -144,7 +146,7 @@ const U = y.div`
     }
   }, w) => /* @__PURE__ */ a(U, { isSponsored: o, onClick: f, children: [
     o && /* @__PURE__ */ r("div", { className: "wrapper__sponsored", children: /* @__PURE__ */ r(h, { icon: " mng-lnc-paw", sizeInUnits: "1.5rem" }) }),
-    /* @__PURE__ */ r(L, { src: m, className: "wrapper__image" }),
+    /* @__PURE__ */ r(L, { src: p, className: "wrapper__image" }),
     /* @__PURE__ */ a("div", { className: "wrapper__content", children: [
       /* @__PURE__ */ a("div", { className: "wrapper__subcontent", children: [
         /* @__PURE__ */ r("div", { className: "wrapper__title", children: i }),
@@ -252,7 +254,7 @@ const U = y.div`
 `, M = S(B), J = b(
   ({
     title: i,
-    subtitle: m,
+    subtitle: p,
     icon: t,
     buttonText: d,
     buttonLink: c,
@@ -267,8 +269,8 @@ const U = y.div`
     }
   }, l) => {
     const _ = k(() => {
-      var p;
-      return (p = n == null ? void 0 : n.slice(0, 4)) == null ? void 0 : p.map((e, z) => /* @__PURE__ */ r(
+      var m;
+      return (m = n == null ? void 0 : n.slice(0, 4)) == null ? void 0 : m.map((e, z) => /* @__PURE__ */ r(
         M,
         {
           title: e == null ? void 0 : e.title,
@@ -301,14 +303,14 @@ const U = y.div`
               btnType: "tinted",
               className: "title__action",
               color: "neutral",
-              onClick: (p) => {
+              onClick: (m) => {
                 var e;
-                (e = p == null ? void 0 : p.target) == null || e.blur(), s == null || s(c);
+                (e = m == null ? void 0 : m.target) == null || e.blur(), s == null || s(c);
               }
             }
           )
         ] }),
-        m && /* @__PURE__ */ r("div", { className: "wrapper__subtitle", children: m })
+        p && /* @__PURE__ */ r("div", { className: "wrapper__subtitle", children: p })
       ] }),
       /* @__PURE__ */ r("div", { className: "wrapper__cards", children: /* @__PURE__ */ r(
         O,