@lanaco/lnc-react-ui 4.0.125 → 4.0.127

package/dist/Accordion.cjs

@@ -1,4 +1,4 @@
-"use strict";const g=require("react/jsx-runtime"),t=require("react"),o=require("./index-BpbMKBf_.cjs"),x=require("./emotion-styled.browser.esm-BtEseadx.cjs"),c=require("./utils-CZynEOC_.cjs"),R=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),N=require("./useUpdateEffect-BtMgpgIV.cjs"),O=x.styled.div`
+"use strict";const g=require("react/jsx-runtime"),t=require("react"),o=require("./index-BpbMKBf_.cjs"),x=require("./emotion-styled.browser.esm-BtEseadx.cjs"),c=require("./utils-DmMdPm9O.cjs"),R=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),N=require("./useUpdateEffect-BtMgpgIV.cjs"),O=x.styled.div`
   color: ${s=>!s.disabled&&c.getColorRgbaValue(s.theme,"Accordion","primary","enabled","text")};
   background-color: transparent;
   ${s=>c.getComponentTypographyCss(s.theme,"Accordion",s.size,"enabled")};

package/dist/Accordion.js

@@ -2,7 +2,7 @@ import { jsxs as N } from "react/jsx-runtime";
 import { forwardRef as O, useState as x, Children as i, isValidElement as c, cloneElement as f } from "react";
 import { P as o } from "./index-CblbdqjE.js";
 import { s as D } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { b as R, c as S, h as T } from "./utils-BbgAIA9N.js";
+import { b as R, c as S, h as T } from "./utils-BPdU4_1q.js";
 import { u as I } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 import { u as P } from "./useUpdateEffect-CuYWz7EA.js";
 const M = D.div`

package/dist/AccordionSummary.cjs

@@ -1,4 +1,4 @@
-"use strict";const n=require("react/jsx-runtime"),f=require("react"),s=require("./index-BpbMKBf_.cjs"),x=require("./emotion-styled.browser.esm-BtEseadx.cjs"),g=require("./Icon.cjs"),C=require("./utils-CZynEOC_.cjs"),P=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),h={small:"0.6rem 1rem",medium:"0.8rem 1.25rem",large:"1rem 1.5rem"},R=x.styled.div`
+"use strict";const n=require("react/jsx-runtime"),f=require("react"),s=require("./index-BpbMKBf_.cjs"),x=require("./emotion-styled.browser.esm-BtEseadx.cjs"),g=require("./Icon.cjs"),C=require("./utils-DmMdPm9O.cjs"),P=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),h={small:"0.6rem 1rem",medium:"0.8rem 1.25rem",large:"1rem 1.5rem"},R=x.styled.div`
   display: flex;
   justify-content: space-between;
   cursor: pointer;

package/dist/AccordionSummary.js

@@ -3,7 +3,7 @@ import { forwardRef as C } from "react";
 import { P as o } from "./index-CblbdqjE.js";
 import { s as g } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import h from "./Icon.js";
-import { b as x } from "./utils-BbgAIA9N.js";
+import { b as x } from "./utils-BPdU4_1q.js";
 import { u as A } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const N = {
   small: "0.6rem 1rem",

package/dist/ActionsToolbar.cjs

@@ -1,4 +1,4 @@
-"use strict";const o=require("react/jsx-runtime"),B=require("react"),e=require("./index-BpbMKBf_.cjs"),V=require("./emotion-styled.browser.esm-BtEseadx.cjs"),Y=require("./DropdownMenu.cjs"),i=require("./DropdownItem.cjs"),M=require("./Separator.cjs"),y=require("./Button.cjs"),b=require("./utils-CZynEOC_.cjs"),Z=require("./ThemeProvider.cjs"),F=V.styled.div`
+"use strict";const o=require("react/jsx-runtime"),B=require("react"),e=require("./index-BpbMKBf_.cjs"),V=require("./emotion-styled.browser.esm-BtEseadx.cjs"),Y=require("./DropdownMenu.cjs"),i=require("./DropdownItem.cjs"),M=require("./Separator.cjs"),y=require("./Button.cjs"),b=require("./utils-DmMdPm9O.cjs"),Z=require("./ThemeProvider.cjs"),F=V.styled.div`
   display: flex;
   align-items: center;
   border-radius: 8px;

package/dist/ActionsToolbar.js

@@ -6,7 +6,7 @@ import Z from "./DropdownMenu.js";
 import i from "./DropdownItem.js";
 import q from "./Separator.js";
 import b from "./Button.js";
-import { b as m } from "./utils-BbgAIA9N.js";
+import { b as m } from "./utils-BPdU4_1q.js";
 import { useTheme as F } from "./ThemeProvider.js";
 const G = V.div`
   display: flex;

package/dist/Alert.cjs

@@ -1,4 +1,4 @@
-"use strict";const o=require("react/jsx-runtime"),c=require("react"),r=require("./index-BpbMKBf_.cjs"),x=require("./emotion-styled.browser.esm-BtEseadx.cjs"),T=require("./ThemeProvider.cjs"),t=require("./utils-CZynEOC_.cjs"),s=require("./Icon.cjs"),P=x.styled.div`
+"use strict";const o=require("react/jsx-runtime"),c=require("react"),r=require("./index-BpbMKBf_.cjs"),x=require("./emotion-styled.browser.esm-BtEseadx.cjs"),T=require("./ThemeProvider.cjs"),t=require("./utils-DmMdPm9O.cjs"),s=require("./Icon.cjs"),P=x.styled.div`
   min-height: 3rem;
   ${e=>t.getComponentTypographyCss(e.theme,"Alert",e.size,"enabled")};
   line-height: 1.25rem;

package/dist/Alert.js

@@ -3,7 +3,7 @@ import { forwardRef as y, cloneElement as x } from "react";
 import { P as r } from "./index-CblbdqjE.js";
 import { s as w } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { useTheme as N } from "./ThemeProvider.js";
-import { c as A, a as $, b as o, g as m } from "./utils-BbgAIA9N.js";
+import { c as A, a as $, b as o, g as m } from "./utils-BPdU4_1q.js";
 import s from "./Icon.js";
 const T = w.div`
   min-height: 3rem;

package/dist/Avatar.cjs

@@ -1,4 +1,4 @@
-"use strict";const n=require("react/jsx-runtime"),T=require("react"),i=require("./index-BpbMKBf_.cjs"),P=require("./emotion-styled.browser.esm-BtEseadx.cjs"),s=require("./utils-CZynEOC_.cjs"),I=require("./Icon.cjs"),f=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),x=P.styled.div`
+"use strict";const n=require("react/jsx-runtime"),T=require("react"),i=require("./index-BpbMKBf_.cjs"),P=require("./emotion-styled.browser.esm-BtEseadx.cjs"),s=require("./utils-DmMdPm9O.cjs"),I=require("./Icon.cjs"),f=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),x=P.styled.div`
   border-radius: ${e=>s.getBorderRadiusValueWithUnits(e.theme,e.borderRadius)};
   color: white;
   display: inline-flex;

package/dist/Avatar.js

@@ -2,7 +2,7 @@ import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as I } from "react";
 import { P as i } from "./index-CblbdqjE.js";
 import { s as U } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { a as y, d as t, h as $, b as v } from "./utils-BbgAIA9N.js";
+import { a as y, d as t, h as $, b as v } from "./utils-BPdU4_1q.js";
 import w from "./Icon.js";
 import { u as R } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const x = U.div`

package/dist/Badge.cjs

@@ -1,4 +1,4 @@
-"use strict";const h=require("react/jsx-runtime"),p=require("react"),r=require("./index-BpbMKBf_.cjs"),f=require("./emotion-styled.browser.esm-BtEseadx.cjs"),s=require("./utils-CZynEOC_.cjs"),z=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),t=e=>e=="large"?"2rem":e=="medium"?"1.75rem":"1.5rem",R=f.styled.div`
+"use strict";const h=require("react/jsx-runtime"),p=require("react"),r=require("./index-BpbMKBf_.cjs"),f=require("./emotion-styled.browser.esm-BtEseadx.cjs"),s=require("./utils-DmMdPm9O.cjs"),z=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),t=e=>e=="large"?"2rem":e=="medium"?"1.75rem":"1.5rem",R=f.styled.div`
   ${e=>s.getComponentTypographyCss(e.theme,"Badge",e.size,"enabled")};
   background-color: ${e=>s.getColorRgbaValue(e.theme,"Badge",e.color,"enabled","background","backgroundOpacity")};
   color: ${e=>s.getColorRgbaValue(e.theme,"Badge",e.color,"enabled","text")};

package/dist/Badge.js

@@ -2,7 +2,7 @@ import { jsx as h } from "react/jsx-runtime";
 import { forwardRef as y } from "react";
 import { P as r } from "./index-CblbdqjE.js";
 import { s as b } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { c as p, b as o, a as z } from "./utils-BbgAIA9N.js";
+import { c as p, b as o, a as z } from "./utils-BPdU4_1q.js";
 import { u as $ } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const a = (e) => e == "large" ? "2rem" : e == "medium" ? "1.75rem" : "1.5rem", B = b.div`
   ${(e) => p(e.theme, "Badge", e.size, "enabled")};

package/dist/BannerSectionCarousel.cjs

@@ -141,4 +141,4 @@
       padding-right: 0.5rem;
     }
   }
-`,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:48}},a=mt.useDetectMobile();return P.jsx(oe,{ref:e,children:P.jsx(ie,{responsive:r,removeArrowOnDeviceType:"mobile",infinite:!a,keyBoardControl:!0,autoPlay:!0,partialVisible:!0,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:48}},a=mt.useDetectMobile();return P.jsx(oe,{ref:e,children:P.jsx(ie,{responsive:r,removeArrowOnDeviceType:"mobile",infinite:!a,keyBoardControl:!0,autoPlay:!0,partialVisible:!0,customTransition:"transform 300ms ease-in-out",transitionDuration:300,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;

package/dist/BannerSectionCarousel.js

@@ -669,6 +669,8 @@ const re = /* @__PURE__ */ mt(oe), ne = yt.div`
         keyBoardControl: !0,
         autoPlay: !0,
         partialVisible: !0,
+        customTransition: "transform 300ms ease-in-out",
+        transitionDuration: 300,
         sliderClass: "carousel-slider",
         itemClass: "carousel-item",
         containerClass: "carousel-container",

package/dist/BannerSectionWithList.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),c=require("react"),o=require("./emotion-styled.browser.esm-BtEseadx.cjs"),a=require("./consts-goSZX3xP.cjs"),u=require("./Button.cjs"),i=require("./utils-CZynEOC_.cjs"),x=o.styled.div`
+"use strict";const e=require("react/jsx-runtime"),c=require("react"),o=require("./emotion-styled.browser.esm-BtEseadx.cjs"),a=require("./consts-goSZX3xP.cjs"),u=require("./Button.cjs"),i=require("./utils-DmMdPm9O.cjs"),x=o.styled.div`
   padding-bottom: 1.38rem;
   text-align: center;
   display: flex;

package/dist/BannerSectionWithList.js

@@ -3,7 +3,7 @@ import { forwardRef as p, Fragment as u } from "react";
 import { s as m } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { M as s } from "./consts-BuFChS64.js";
 import x from "./Button.js";
-import { l as n } from "./utils-BbgAIA9N.js";
+import { l as n } from "./utils-BPdU4_1q.js";
 const y = m.div`
   padding-bottom: 1.38rem;
   text-align: center;

package/dist/BlogCardsSponsoredSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),p=require("react"),n=require("./utils-CZynEOC_.cjs"),w=require("./Icon.cjs"),N=require("./Chip.cjs"),z=require("./index-BvSNRLNa.cjs"),y=require("./emotion-styled.browser.esm-BtEseadx.cjs"),v=require("./consts-goSZX3xP.cjs"),I=require("./suspense-large-CtcwWswP.cjs"),R=require("./Button.cjs"),k=y.styled.div`
+"use strict";const r=require("react/jsx-runtime"),p=require("react"),n=require("./utils-DmMdPm9O.cjs"),w=require("./Icon.cjs"),N=require("./Chip.cjs"),z=require("./index-DiIeF_76.cjs"),y=require("./emotion-styled.browser.esm-BtEseadx.cjs"),v=require("./consts-goSZX3xP.cjs"),I=require("./suspense-large-PHdzP1Ln.cjs"),R=require("./Button.cjs"),k=y.styled.div`
   display: flex;
   padding: 1rem;
   align-items: center;

package/dist/BlogCardsSponsoredSection.js

@@ -1,12 +1,12 @@
 import { jsxs as a, jsx as r } from "react/jsx-runtime";
 import { forwardRef as v, memo as j, useMemo as I } from "react";
-import { p as y, s as S, v as C, w as b, k as R } from "./utils-BbgAIA9N.js";
+import { p as y, s as S, v as C, w as b, k as R } from "./utils-BPdU4_1q.js";
 import w from "./Icon.js";
 import L from "./Chip.js";
-import { P } from "./index-YGcWbzeb.js";
+import { P } from "./index-3TFXgZHA.js";
 import { s as N } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { M as z } from "./consts-BuFChS64.js";
-import { S as U } from "./suspense-large-BM9s_kZP.js";
+import { S as U } from "./suspense-large-DrD8xVZi.js";
 import M from "./Button.js";
 const T = N.div`
   display: flex;

package/dist/BlogCategoryCardsSection.cjs

@@ -1 +1 @@
-"use strict";const s=require("react/jsx-runtime"),a=require("react"),u=require("./suspense-categories-card-simple-CK7XDK4k.cjs"),l=require("./style-BTTXJFJN.cjs"),m=a.memo(u.CategorySimpleCard),p=a.forwardRef(({items:r,onSelectCard:i=()=>{},isLoading:n=!1,limit:t=4,isHighlight:c=!1},C)=>{const d=a.useMemo(()=>{var o;return(o=r==null?void 0:r.slice(0,4))==null?void 0:o.map((e,g)=>s.jsx(m,{uuid:e==null?void 0:e.uuid,image:e==null?void 0:e.image,name:e==null?void 0:e.name,onSelectCard:()=>i==null?void 0:i(e==null?void 0:e.uuid)},g))},[r]);return s.jsx(l.Wrapper,{className:c?"highlight":"",children:s.jsx("div",{className:"wrapper__grid",children:s.jsx(u.SuspenseSimpleCategoryCard,{isLoading:n,limit:t,keyPrefix:"blog-section",children:d})})})});module.exports=p;
+"use strict";const s=require("react/jsx-runtime"),a=require("react"),u=require("./suspense-categories-card-simple-CWahURI0.cjs"),l=require("./style-BTTXJFJN.cjs"),m=a.memo(u.CategorySimpleCard),p=a.forwardRef(({items:r,onSelectCard:i=()=>{},isLoading:n=!1,limit:t=4,isHighlight:c=!1},C)=>{const d=a.useMemo(()=>{var o;return(o=r==null?void 0:r.slice(0,4))==null?void 0:o.map((e,g)=>s.jsx(m,{uuid:e==null?void 0:e.uuid,image:e==null?void 0:e.image,name:e==null?void 0:e.name,onSelectCard:()=>i==null?void 0:i(e==null?void 0:e.uuid)},g))},[r]);return s.jsx(l.Wrapper,{className:c?"highlight":"",children:s.jsx("div",{className:"wrapper__grid",children:s.jsx(u.SuspenseSimpleCategoryCard,{isLoading:n,limit:t,keyPrefix:"blog-section",children:d})})})});module.exports=p;

package/dist/BlogCategoryCardsSection.js

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
 import { memo as l, forwardRef as f, useMemo as t } from "react";
-import { C as u, S as n } from "./suspense-categories-card-simple-BbtBbuWb.js";
+import { C as u, S as n } from "./suspense-categories-card-simple-Bln7_MpK.js";
 import { W as c } from "./style-tw6KjI2J.js";
 const C = l(u), M = f(
   ({

package/dist/BlogExploreSection.cjs

@@ -0,0 +1,319 @@
+"use strict";const e=require("react/jsx-runtime"),q=require("react"),n=require("./index-BpbMKBf_.cjs"),G=require("./utils-DmMdPm9O.cjs"),J=require("./TextInput.cjs"),j=require("./Icon.cjs"),K=require("./Link.cjs"),C=require("./DropdownMenu.cjs"),z=require("./DropdownItem.cjs"),Q=require("./tag-Bov1gw34.cjs"),W=require("./BlogProductCardsSection.cjs"),P=require("./emotion-styled.browser.esm-BtEseadx.cjs"),S=require("./BlogListSection.cjs"),Y=require("./consts-goSZX3xP.cjs"),B=P.styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+
+  & .pagination__per-page {
+    & button {
+      border-radius: 8px;
+      border: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
+      background: transparent;
+      color: var(---gray-950, #14161a);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.25rem;
+    }
+  }
+
+  & .pagination__pages {
+    display: flex;
+    align-items: center;
+    border-radius: 0.375rem;
+
+    & .pagination__page {
+      display: flex;
+      width: 2.5rem;
+      height: 2.25rem;
+      padding: 0.5rem 1rem;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      border-top: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
+      border-right: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
+      border-bottom: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
+      color: var(--gray-600, #676e79);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.25rem;
+
+      &:hover {
+        cursor: pointer;
+        background: var(--gray-200, #e4e9f0);
+      }
+
+      &.active {
+        border: 1px solid var(--teal-500, #009ea8);
+        background: var(--teal-50, #f4fdff);
+        color: var(--teal-500, #009ea8);
+      }
+
+      &.disabled {
+        cursor: unset;
+        border: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
+        opacity: 0.4;
+
+        &:hover {
+          background: transparent;
+        }
+      }
+
+      &.ellipsis {
+        cursor: unset;
+
+        &:hover {
+          background: transparent;
+        }
+      }
+
+      &:first-of-type {
+        border-radius: 0.5rem 0 0 0.5rem;
+        border-left: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
+      }
+
+      &:last-of-type {
+        border-radius: 0 0.5rem 0.5rem 0;
+      }
+    }
+  }
+`,O=q.forwardRef(({perPageOptions:o=[{code:10,name:"Show 10 items"},{code:25,name:"Show 25 items"},{code:50,name:"Show 50 items"}],perPage:m,handlePerPage:_=()=>{},page:s=1,handlePage:c=()=>{},totalPage:r},d)=>{var h,l;const p=()=>{s>1&&(c==null||c(s-1))},f=()=>{s<r&&(c==null||c(s+1))},x=()=>{const t=[];if(r<=7)for(let a=1;a<=r;a++)t.push(a);else s<=3?t.push(1,2,3,"...",r):s>=r-2?t.push(1,"...",r-2,r-1,r):t.push(1,2,3,"...",r);return t==null?void 0:t.map((a,u)=>a==="..."?e.jsx("div",{className:"pagination__page ellipsis",children:a},`pagination-ellipsis__${u}`):e.jsx("div",{onClick:()=>c(a),className:`pagination__page ${s===a?"active":""}`,children:a},`pagination-page__${u}`))};return e.jsxs(B,{className:"pagination",children:[e.jsx(C,{color:"neutral",control:((h=o==null?void 0:o.find(t=>(t==null?void 0:t.code)===m))==null?void 0:h.name)||((l=o[0])==null?void 0:l.name),placement:"bottom",zIndex:1001,className:"pagination__per-page",children:o==null?void 0:o.map((t,a)=>e.jsx(z,{active:(t==null?void 0:t.code)===(m==null?void 0:m.code),className:"sort-by__item",onClick:()=>_(t),children:t==null?void 0:t.name},`blog-epxlore-section-per-page-option__${a+1}`))}),e.jsxs("div",{className:"pagination__pages",children:[e.jsx("div",{className:`pagination__page ${s===1?"disabled":""}`,onClick:p,children:e.jsx(j,{icon:" mng-lnc-chevron--left"})}),x(),e.jsx("div",{className:`pagination__page ${s===r?"disabled":""}`,onClick:f,children:e.jsx(j,{icon:" mng-lnc-chevron--right"})})]})]})}),ee=P.styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 2rem;
+  align-self: stretch;
+
+  & button {
+    &:focus {
+      outline: none;
+    }
+  }
+
+  & .landing__main-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.5rem;
+
+    border-right: 1px solid var(--gray-200, #dddfe4);
+    padding-right: 2rem;
+
+    & .section__tags {
+      flex-wrap: wrap;
+    }
+
+    & .pagination {
+      padding: 1.25rem 0;
+    }
+
+    & .main-content__title {
+      color: var(--gray-950, #14161a);
+      font-size: 1.5rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 2rem;
+    }
+
+    & .tags__item {
+      &:not(.active) {
+        background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
+      }
+    }
+
+    & .main-content__items {
+      display: flex;
+      flex-direction: column;
+      gap: 1.25rem;
+
+      & .main-content__divider {
+        content: "";
+        display: block;
+        height: 1px;
+        width: 100%;
+        background: var(--gray-200, #dddfe4);
+      }
+
+      & .blog-card-item {
+        background: transparent;
+        border: none;
+        padding: 0;
+      }
+    }
+
+    & .main-content__actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      align-self: stretch;
+      width: 100%;
+
+      & .main-content__search {
+        border-radius: 999px;
+        height: 2.5rem;
+        min-height: 2.5rem;
+        max-width: 23.75rem;
+        width: 100%;
+
+        border: 1px solid var(--gray-200, #e4e9f0);
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+        outline: none;
+
+        & input::placeholder {
+          color: var(--gray-500, #7a8594);
+          font-size: 0.875rem;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 1.25rem;
+          letter-spacing: 0.0156rem;
+        }
+
+        & .main-content__search-prefix {
+          color: var(--gray-500, #7a8594);
+        }
+      }
+
+      & .main-content__sort-by {
+        & button {
+          border-radius: 999px;
+          color: var(--gray-950, #14161a);
+          background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
+          font-size: 0.875rem;
+          font-style: normal;
+          font-weight: 500;
+          line-height: 1.25rem;
+          letter-spacing: -0.0056rem;
+        }
+      }
+    }
+  }
+
+  & .landing__side-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.5rem;
+    align-self: stretch;
+
+    & .side-content__title {
+      color: var(--gray-950, #14161a);
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 1.5rem;
+    }
+
+    & .side-content__link {
+      color: var(--gray-950, #14161a);
+      font-size: 0.75rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1rem;
+
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+
+    & .side-content__items {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1.25rem;
+      align-self: stretch;
+
+      & .side-content__item {
+        display: flex;
+        align-items: flex-start;
+        gap: 1rem;
+        align-self: stretch;
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        & .item__image {
+          width: 100%;
+          max-width: 6rem;
+          height: 100%;
+          max-height: 3.75rem;
+          object-fit: cover;
+          border-radius: 0.375rem;
+        }
+
+        & .item__content {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 0.25rem;
+
+          & .item__title {
+            color: var(--gray-950, #14161a);
+            font-size: 0.875rem;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 1.25rem;
+          }
+
+          & .item__description {
+            color: var(--gray-600, #676e79);
+            font-size: 0.75rem;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 1rem;
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: ${Y.MOBILE_SIZE_PX+"px"}) {
+    flex-direction: column;
+
+    & .landing__main-content {
+      width: 100%;
+      padding-right: 0;
+      border-right: none;
+
+      & .section__tags {
+        flex-wrap: nowrap;
+      }
+
+      & .main-content__actions {
+        gap: 0.5rem;
+      }
+
+      & .main-content__items {
+        & .main-content__divider {
+          display: none;
+        }
+
+        & .separated {
+          gap: 1.25rem;
+
+          & > div:not(:last-of-type)::after {
+            display: none;
+          }
+        }
+
+        & .blog-product-cards-section {
+          border-radius: 0;
+        }
+      }
+
+      & .pagination {
+        justify-content: center;
+
+        & .pagination__per-page {
+          display: none;
+        }
+      }
+    }
+
+    & .landing__side-content {
+      display: none;
+    }
+  }
+`,I=q.forwardRef(({mainTitle:o,sideTitle:m,tags:_,selectedTag:s,handleSelectTag:c=()=>{},blogs:r,miniBlogs:d,products:p,blogsLoading:f=!1,productsLoading:x=!1,sortingOptions:h,sortBy:l,handleSortBy:t=()=>{},allTagText:a="All",searchPlaceholderText:u="Search blogs",timeToReadText:w="{0} min read",getBlogImageUrl:y=()=>{},handleSelectBlog:g=()=>{},handleSelectBlogTag:b=()=>{},handleShareBlog:N=()=>{},handleBookmarkBlog:k=()=>{},showAllButtonLink:L,showAllButtonText:$="Show all products",viewAllButtonText:A="View all (11)",viewAllButtonLink:ne,handleViewAll:R=()=>{},handleShowAll:D=()=>{},handleSelectProduct:E=()=>{},getProductImageUrl:M=()=>{},page:U,handlePage:F=()=>{},perPage:H,handlePerPage:V=()=>{},totalPage:v,perPageOptions:X,handleSearch:Z=()=>{}},re)=>e.jsxs(ee,{children:[e.jsxs("div",{className:"landing__main-content",children:[o&&e.jsx("div",{className:"main-content__title",children:o}),_&&e.jsx(Q.FaqSectionTags,{tags:_,allTagText:a,selectedTag:s,onSelectTag:c}),e.jsxs("div",{className:"main-content__actions",children:[e.jsx(J,{className:"main-content__search",placeholder:u,debounceTime:200,prefix:e.jsx(j,{icon:" mng-lnc-search",sizeInUnits:"1.25rem",className:"main-content__search-prefix"}),color:"neutral",onChange:Z}),e.jsx(C,{color:"neutral",control:l==null?void 0:l.name,zIndex:1001,className:"main-content__sort-by",children:h==null?void 0:h.map((i,T)=>e.jsx(z,{active:(i==null?void 0:i.code)===(l==null?void 0:l.code),className:"sort-by__item",onClick:()=>t(i),children:i==null?void 0:i.name},`blog-epxlore-section-sorting-option__${T+1}`))})]}),e.jsxs("div",{className:"main-content__items",children:[r&&(r==null?void 0:r.length)>0&&e.jsx(S,{timeToReadText:w,items:r==null?void 0:r.slice(0,5),isLoading:f,getImage:y,onSelectCard:g,onSelectOption:b,onShare:N,onBookmark:k}),e.jsx("div",{className:"main-content__divider"}),p&&(p==null?void 0:p.length)>0&&e.jsx(W,{buttonText:$,buttonLink:L,onButtonAction:D,onSelectCard:E,items:p,isLoading:x,getImage:M,isHighlight:!0}),e.jsx("div",{className:"main-content__divider"}),r&&(r==null?void 0:r.length)>0&&e.jsx(S,{timeToReadText:w,items:r==null?void 0:r.slice(5),isLoading:f,getImage:y,onSelectCard:g,onSelectOption:b,onShare:N,onBookmark:k})]}),v&&v>1&&e.jsx(O,{perPageOptions:X,perPage:H,handlePerPage:V,page:U,handlePage:F,totalPage:v})]}),e.jsxs("div",{className:"landing__side-content",children:[m&&e.jsx("div",{className:"side-content__title",children:m}),e.jsx("div",{className:"side-content__items",children:d&&(d==null?void 0:d.length)>0&&(d==null?void 0:d.map((i,T)=>e.jsxs("div",{className:"side-content__item",onClick:()=>g(i),children:[e.jsx("img",{src:y(i==null?void 0:i.imageUrl,i==null?void 0:i.uuid)||null,alt:`Mini blog ${T+1}`,className:"item__image"}),e.jsxs("div",{className:"item__content",children:[e.jsx("div",{className:"item__title",children:i==null?void 0:i.title}),e.jsx("div",{className:"item__description",children:G.formatLocaleDateString(i==null?void 0:i.publishedAt)})]})]})))}),e.jsx(K,{onClick:R,className:"side-content__link",children:A})]})]}));I.propTypes={mainTitle:n.PropTypes.string,sideTitle:n.PropTypes.string,tags:n.PropTypes.array,selectedTag:n.PropTypes.any,handleSelectTag:n.PropTypes.func,blogs:n.PropTypes.array,miniBlogs:n.PropTypes.array,products:n.PropTypes.array,blogsLoading:n.PropTypes.bool,productsLoading:n.PropTypes.bool,sortingOptions:n.PropTypes.array,sortBy:n.PropTypes.any,handleSortBy:n.PropTypes.func,allTagText:n.PropTypes.string,searchPlaceholderText:n.PropTypes.string,timeToReadText:n.PropTypes.string,getBlogImageUrl:n.PropTypes.func,handleSelectBlog:n.PropTypes.func,handleSelectBlogTag:n.PropTypes.func,handleShareBlog:n.PropTypes.func,handleBookmarkBlog:n.PropTypes.func,showAllButtonLink:n.PropTypes.string,showAllButtonText:n.PropTypes.string,viewAllButtonText:n.PropTypes.string,handleShowAll:n.PropTypes.func,handleSelectProduct:n.PropTypes.func,getProductImageUrl:n.PropTypes.func,page:n.PropTypes.number,handlePage:n.PropTypes.func,perPage:n.PropTypes.any,handlePerPage:n.PropTypes.func,totalPage:n.PropTypes.number,perPageOptions:n.PropTypes.array,handleSearch:n.PropTypes.func};module.exports=I;