@lanaco/lnc-react-ui 4.0.163 → 4.0.164

package/dist/BlogExploreSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),b=require("react"),n=require("./index-BpbMKBf_.cjs"),z=require("./utils-Dl9xPH4c.cjs"),Y=require("./TextInput.cjs"),N=require("./Icon.cjs"),B=require("./Link.cjs"),L=require("./DropdownMenu.cjs"),P=require("./DropdownItem.cjs"),O=require("./tag-yputMSpE.cjs"),ee=require("./BlogProductCardsSection.cjs"),A=require("./emotion-styled.browser.esm-BtEseadx.cjs"),ne=require("./index-BueKsXT8.cjs"),$=require("./BlogListSection.cjs"),re=require("./consts-goSZX3xP.cjs"),te=A.styled.div`
+"use strict";const e=require("react/jsx-runtime"),x=require("react"),r=require("./index-BpbMKBf_.cjs"),oe=require("./useDetectMobile-zkbzoOGV.cjs"),P=require("./utils-Dl9xPH4c.cjs"),ce=require("./TextInput.cjs"),k=require("./Icon.cjs"),le=require("./Link.cjs"),$=require("./IconButton.cjs"),M=require("./DropdownMenu.cjs"),R=require("./DropdownItem.cjs"),de=require("./tag-CmeZsPQt.cjs"),me=require("./BlogProductCardsSection.cjs"),V=require("./emotion-styled.browser.esm-BtEseadx.cjs"),he=require("./index-BueKsXT8.cjs"),D=require("./BlogListSection.cjs"),pe=require("./consts-goSZX3xP.cjs"),ue=V.styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -79,7 +79,7 @@
       }
     }
   }
-`,ie=b.forwardRef(({perPageOptions:c=[{code:10,name:"Show 10 items"},{code:25,name:"Show 25 items"},{code:50,name:"Show 50 items"}],perPage:m,handlePerPage:u=()=>{},page:s=1,handlePage:o=()=>{},totalPage:r},d)=>{var _,l;const p=()=>{s>1&&(o==null||o(s-1))},f=()=>{s<r&&(o==null||o(s+1))},g=()=>{const i=[];if(r<=7)for(let a=1;a<=r;a++)i.push(a);else s<=3?i.push(1,2,3,"...",r):s>=r-2?i.push(1,"...",r-2,r-1,r):i.push(1,2,3,"...",r);return i==null?void 0:i.map((a,x)=>a==="..."?e.jsx("div",{className:"pagination__page ellipsis",children:a},`pagination-ellipsis__${x}`):e.jsx("div",{onClick:()=>o(a),className:`pagination__page ${s===a?"active":""}`,children:a},`pagination-page__${x}`))};return e.jsxs(te,{className:"pagination",children:[e.jsx(L,{color:"neutral",control:((_=c==null?void 0:c.find(i=>(i==null?void 0:i.code)===m))==null?void 0:_.name)||((l=c[0])==null?void 0:l.name),placement:"bottom",zIndex:1001,className:"pagination__per-page",children:c==null?void 0:c.map((i,a)=>e.jsx(P,{active:(i==null?void 0:i.code)===(m==null?void 0:m.code),className:"sort-by__item",onClick:()=>u(i),children:i==null?void 0:i.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(N,{icon:" mng-lnc-chevron--left"})}),g(),e.jsx("div",{className:`pagination__page ${s===r?"disabled":""}`,onClick:f,children:e.jsx(N,{icon:" mng-lnc-chevron--right"})})]})]})}),ae=A.styled.div`
+`,_e=x.forwardRef(({perPageOptions:l=[{code:10,name:"Show 10 items"},{code:25,name:"Show 25 items"},{code:50,name:"Show 50 items"}],perPage:u,handlePerPage:g=()=>{},page:s=1,handlePage:d=()=>{},totalPage:t},p)=>{var f,m;const _=()=>{s>1&&(d==null||d(s-1))},y=()=>{s<t&&(d==null||d(s+1))},b=()=>{const i=[];if(t<=7)for(let a=1;a<=t;a++)i.push(a);else s<=3?i.push(1,2,3,"...",t):s>=t-2?i.push(1,"...",t-2,t-1,t):i.push(1,2,3,"...",t);return i==null?void 0:i.map((a,v)=>a==="..."?e.jsx("div",{className:"pagination__page ellipsis",children:a},`pagination-ellipsis__${v}`):e.jsx("div",{onClick:()=>d(a),className:`pagination__page ${s===a?"active":""}`,children:a},`pagination-page__${v}`))};return e.jsxs(ue,{className:"pagination",children:[e.jsx(M,{color:"neutral",control:((f=l==null?void 0:l.find(i=>(i==null?void 0:i.code)===u))==null?void 0:f.name)||((m=l[0])==null?void 0:m.name),placement:"bottom",zIndex:1001,className:"pagination__per-page",children:l==null?void 0:l.map((i,a)=>e.jsx(R,{active:(i==null?void 0:i.code)===(u==null?void 0:u.code),className:"sort-by__item",onClick:()=>g(i),children:i==null?void 0:i.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:_,children:e.jsx(k,{icon:" mng-lnc-chevron--left"})}),b(),e.jsx("div",{className:`pagination__page ${s===t?"disabled":""}`,onClick:y,children:e.jsx(k,{icon:" mng-lnc-chevron--right"})})]})]})}),fe=V.styled.div`
   display: flex;
   align-items: flex-start;
   gap: 2rem;
@@ -96,18 +96,44 @@
     flex-direction: column;
     align-items: flex-start;
     gap: 1.5rem;
+    max-width: 50rem;
 
     border-right: 1px solid var(--gray-200, #dddfe4);
     padding-right: 2rem;
 
     & .section__tags {
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
+      width: 100%;
+      overflow-x: hidden;
+      white-space: nowrap;
     }
 
     & .pagination {
       padding: 1.25rem 0;
     }
 
+    & .main-content__heading {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      & .main-content__tags-nav {
+        display: flex;
+        gap: 0.25rem;
+
+        & .main-content__tag-nav {
+          &:not(:disabled) {
+            color: var(--gray-950, #14161a);
+            background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
+
+            &:hover {
+              background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
+            }
+          }
+        }
+      }
+    }
+
     & .main-content__title {
       color: var(--gray-950, #14161a);
       font-size: 1.5rem;
@@ -118,7 +144,11 @@
 
     & .tags__item {
       &:not(.active) {
-        background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
+        background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
+
+        &:hover {
+          background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
+        }
       }
     }
 
@@ -255,7 +285,7 @@
             font-style: normal;
             font-weight: 500;
             line-height: 1.25rem;
-            ${z.truncateTextInRows(2)}
+            ${P.truncateTextInRows(2)}
           }
 
           & .item__description {
@@ -270,16 +300,19 @@
     }
   }
 
-  @media (max-width: ${re.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${pe.MOBILE_SIZE_PX+"px"}) {
     flex-direction: column;
 
     & .landing__main-content {
       width: 100%;
+      max-width: 100%;
       padding-right: 0;
       border-right: none;
 
       & .section__tags {
-        flex-wrap: nowrap;
+        width: 100%;
+        overflow-x: auto;
+        white-space: nowrap;
       }
 
       & .main-content__actions {
@@ -287,6 +320,8 @@
       }
 
       & .main-content__items {
+        width: 100%;
+
         & .main-content__divider {
           display: none;
         }
@@ -317,4 +352,4 @@
       display: none;
     }
   }
-`,R=b.forwardRef(({mainTitle:c,sideTitle:m,tags:u,selectedTag:s,handleSelectTag:o=()=>{},blogs:r,miniBlogs:d,products:p,blogsLoading:f=!1,productsLoading:g=!1,sortingOptions:_,sortBy:l,handleSortBy:i=()=>{},allTagText:a="All",searchPlaceholderText:x="Search blogs",timeToReadText:S="{0} min read",getBlogImageUrl:y=()=>{},handleSelectBlog:v=()=>{},handleSelectBlogTag:k=()=>{},handleShareBlog:q=()=>{},showAllButtonLink:E,showAllButtonText:F="Show all products",viewAllButtonText:D="View all (11)",viewAllButtonLink:se,handleViewAll:M=()=>{},handleShowAll:U=()=>{},handleSelectProduct:V=()=>{},getProductImageUrl:H=()=>{},page:W,handlePage:T=()=>{},perPage:X,handlePerPage:Z=()=>{},totalPage:j,perPageOptions:G,handleSearch:J=()=>{},onBookmark:C=()=>{},bookmarkComponent:I=e.jsx(e.Fragment,{children:" "}),componentName:w},K)=>{const Q=t=>{document.getElementById("landing__container").scrollIntoView({behavior:"smooth",block:"start"}),T==null||T(t)};return e.jsxs(ae,{ref:K,id:"landing__container",children:[e.jsxs("div",{className:"landing__main-content",children:[c&&e.jsx("div",{className:"main-content__title",children:c}),u&&e.jsx(O.FaqSectionTags,{tags:u,allTagText:a,selectedTagCode:s,onSelectTag:o}),e.jsxs("div",{className:"main-content__actions",children:[e.jsx(Y,{className:"main-content__search",placeholder:x,debounceTime:200,prefix:e.jsx(N,{icon:" mng-lnc-search",sizeInUnits:"1.25rem",className:"main-content__search-prefix"}),color:"neutral",onChange:J}),e.jsx(L,{color:"neutral",control:l==null?void 0:l.name,zIndex:1001,className:"main-content__sort-by",children:_==null?void 0:_.map((t,h)=>e.jsx(P,{active:(t==null?void 0:t.code)===(l==null?void 0:l.code),className:"sort-by__item",onClick:()=>i(t),children:t==null?void 0:t.name},`blog-epxlore-section-sorting-option__${h+1}`))})]}),e.jsxs("div",{className:"main-content__items",children:[r&&(r==null?void 0:r.length)>0&&e.jsx($,{timeToReadText:S,items:r==null?void 0:r.slice(0,5),isLoading:f,getImage:y,onSelectCard:v,onSelectOption:k,onShare:q,onBookmark:C,bookmarkComponent:I,componentName:w}),e.jsx("div",{className:"main-content__divider"}),p&&(p==null?void 0:p.length)>0&&e.jsx(ee,{buttonText:F,buttonLink:E,onButtonAction:U,onSelectCard:V,items:p,isLoading:g,getImage:H,isHighlight:!0,componentName:w}),e.jsx("div",{className:"main-content__divider"}),r&&(r==null?void 0:r.length)>0&&e.jsx($,{timeToReadText:S,items:r==null?void 0:r.slice(5),isLoading:f,getImage:y,onSelectCard:v,onSelectOption:k,onShare:q,onBookmark:C,bookmarkComponent:I,componentName:w})]}),j&&j>1&&e.jsx(ie,{perPageOptions:G,perPage:X,handlePerPage:Z,page:W,handlePage:Q,totalPage:j})]}),e.jsxs("div",{className:"landing__side-content",children:[m&&e.jsx("div",{className:"side-content__title",children:m}),d&&(d==null?void 0:d.length)>0&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"side-content__items",children:d==null?void 0:d.map((t,h)=>e.jsx(b.Fragment,{children:e.jsxs("div",{className:"side-content__item",onClick:()=>v(t),children:[e.jsx(ne.ProductImageWrapper,{src:y(t==null?void 0:t.imageUrl,t==null?void 0:t.uuid)||null,alt:`Mini blog ${h+1}`,className:"item__image"}),e.jsxs("div",{className:"item__content",children:[e.jsx("div",{className:"item__title",children:t==null?void 0:t.title}),e.jsx("div",{className:"item__description",children:z.formatLocaleDateString(t==null?void 0:t.publishedAt)})]})]})},`mini_blg_${h}`))}),e.jsx(B,{onClick:M,className:"side-content__link",children:D})]})]})]})});R.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=R;
+`,W=x.forwardRef(({mainTitle:l,sideTitle:u,tags:g,selectedTag:s,handleSelectTag:d=()=>{},blogs:t,miniBlogs:p,products:_,blogsLoading:y=!1,productsLoading:b=!1,sortingOptions:f,sortBy:m,handleSortBy:i=()=>{},allTagText:a="All",searchPlaceholderText:v="Search blogs",timeToReadText:C="{0} min read",getBlogImageUrl:w=()=>{},handleSelectBlog:T=()=>{},handleSelectBlogTag:q=()=>{},handleShareBlog:L=()=>{},showAllButtonLink:E,showAllButtonText:F="Show all products",viewAllButtonText:U="View all (11)",handleViewAll:H=()=>{},handleShowAll:X=()=>{},handleSelectProduct:Z=()=>{},getProductImageUrl:G=()=>{},page:J,handlePage:j=()=>{},perPage:K,handlePerPage:Q=()=>{},totalPage:N,perPageOptions:Y,handleSearch:B=()=>{},onBookmark:A=()=>{},bookmarkComponent:z=e.jsx(e.Fragment,{}),componentName:S},O)=>{const ee=n=>{document.getElementById("landing__container").scrollIntoView({behavior:"smooth",block:"start"}),j==null||j(n)},o=x.useRef(null),ne=oe.useDetectMobile(),[h,re]=x.useState({arrowsVisible:!1,leftArrowDisabled:!1,rightArrowDisabled:!1});x.useEffect(()=>{const n=o==null?void 0:o.current;if(!n)return;const c=()=>{const ae=n.scrollWidth-n.clientWidth;re(se=>({...se,arrowsVisible:n.clientWidth<n.scrollWidth,leftArrowDisabled:n.scrollLeft<=0,rightArrowDisabled:n.scrollLeft>=ae}))},I=new ResizeObserver(c);return I.observe(n),c(),n.addEventListener("scroll",c),()=>{I.disconnect(),n.removeEventListener("scroll",c)}},[]);const te=()=>{var n;(n=o==null?void 0:o.current)==null||n.scrollBy({left:100,behavior:"smooth"})},ie=()=>{var n;(n=o==null?void 0:o.current)==null||n.scrollBy({left:-100,behavior:"smooth"})};return e.jsxs(fe,{ref:O,id:"landing__container",children:[e.jsxs("div",{className:"landing__main-content",children:[e.jsxs("div",{className:"main-content__heading",children:[e.jsx("div",{className:"main-content__title",children:l}),!ne&&(h==null?void 0:h.arrowsVisible)&&e.jsxs("div",{className:"main-content__tags-nav",children:[e.jsx($,{icon:"chevron-left",borderRadius:"curved",btnType:"tinted",color:"neutral",disabled:h==null?void 0:h.leftArrowDisabled,className:"main-content__tag-nav",onClick:ie}),e.jsx($,{icon:"chevron-right",borderRadius:"curved",btnType:"tinted",color:"neutral",disabled:h==null?void 0:h.rightArrowDisabled,className:"main-content__tag-nav",onClick:te})]})]}),g&&e.jsx(de.FaqSectionTags,{ref:o,tags:g,allTagText:a,selectedTagCode:s,onSelectTag:d}),e.jsxs("div",{className:"main-content__actions",children:[e.jsx(ce,{className:"main-content__search",placeholder:v,debounceTime:200,prefix:e.jsx(k,{icon:" mng-lnc-search",sizeInUnits:"1.25rem",className:"main-content__search-prefix"}),color:"neutral",onChange:B}),e.jsx(M,{color:"neutral",control:m==null?void 0:m.name,zIndex:1001,className:"main-content__sort-by",children:f==null?void 0:f.map((n,c)=>e.jsx(R,{active:(n==null?void 0:n.code)===(m==null?void 0:m.code),className:"sort-by__item",onClick:()=>i(n),children:n==null?void 0:n.name},`blog-epxlore-section-sorting-option__${c+1}`))})]}),e.jsxs("div",{className:"main-content__items",children:[t&&(t==null?void 0:t.length)>0&&e.jsx(D,{timeToReadText:C,items:t==null?void 0:t.slice(0,5),isLoading:y,getImage:w,onSelectCard:T,onSelectOption:q,onShare:L,onBookmark:A,bookmarkComponent:z,componentName:S}),e.jsx("div",{className:"main-content__divider"}),_&&(_==null?void 0:_.length)>0&&e.jsx(me,{buttonText:F,buttonLink:E,onButtonAction:X,onSelectCard:Z,items:_,isLoading:b,getImage:G,isHighlight:!0,componentName:S}),e.jsx("div",{className:"main-content__divider"}),t&&(t==null?void 0:t.length)>0&&e.jsx(D,{timeToReadText:C,items:t==null?void 0:t.slice(5),isLoading:y,getImage:w,onSelectCard:T,onSelectOption:q,onShare:L,onBookmark:A,bookmarkComponent:z,componentName:S})]}),N&&N>1&&e.jsx(_e,{perPageOptions:Y,perPage:K,handlePerPage:Q,page:J,handlePage:ee,totalPage:N})]}),e.jsxs("div",{className:"landing__side-content",children:[u&&e.jsx("div",{className:"side-content__title",children:u}),p&&(p==null?void 0:p.length)>0&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"side-content__items",children:p==null?void 0:p.map((n,c)=>e.jsx(x.Fragment,{children:e.jsxs("div",{className:"side-content__item",onClick:()=>T(n),children:[e.jsx(he.ProductImageWrapper,{src:w(n==null?void 0:n.imageUrl,n==null?void 0:n.uuid)||null,alt:`Mini blog ${c+1}`,className:"item__image"}),e.jsxs("div",{className:"item__content",children:[e.jsx("div",{className:"item__title",children:n==null?void 0:n.title}),e.jsx("div",{className:"item__description",children:P.formatLocaleDateString(n==null?void 0:n.publishedAt)})]})]})},`mini_blg_${c}`))}),e.jsx(le,{onClick:H,className:"side-content__link",children:U})]})]})]})});W.propTypes={mainTitle:r.PropTypes.string,sideTitle:r.PropTypes.string,tags:r.PropTypes.array,selectedTag:r.PropTypes.any,handleSelectTag:r.PropTypes.func,blogs:r.PropTypes.array,miniBlogs:r.PropTypes.array,products:r.PropTypes.array,blogsLoading:r.PropTypes.bool,productsLoading:r.PropTypes.bool,sortingOptions:r.PropTypes.array,sortBy:r.PropTypes.any,handleSortBy:r.PropTypes.func,allTagText:r.PropTypes.string,searchPlaceholderText:r.PropTypes.string,timeToReadText:r.PropTypes.string,getBlogImageUrl:r.PropTypes.func,handleSelectBlog:r.PropTypes.func,handleSelectBlogTag:r.PropTypes.func,handleShareBlog:r.PropTypes.func,handleBookmarkBlog:r.PropTypes.func,showAllButtonLink:r.PropTypes.string,showAllButtonText:r.PropTypes.string,viewAllButtonText:r.PropTypes.string,handleShowAll:r.PropTypes.func,handleSelectProduct:r.PropTypes.func,getProductImageUrl:r.PropTypes.func,page:r.PropTypes.number,handlePage:r.PropTypes.func,perPage:r.PropTypes.any,handlePerPage:r.PropTypes.func,totalPage:r.PropTypes.number,perPageOptions:r.PropTypes.array,handleSearch:r.PropTypes.func};module.exports=W;

package/dist/BlogExploreSection.js

@@ -1,19 +1,21 @@
-import { jsxs as l, jsx as n, Fragment as L } from "react/jsx-runtime";
-import { forwardRef as j, Fragment as B } from "react";
-import { P as e } from "./index-CblbdqjE.js";
-import { p as O, s as P } from "./utils-BdsZgOUE.js";
-import ee from "./TextInput.js";
-import k from "./Icon.js";
-import ne from "./Link.js";
-import F from "./DropdownMenu.js";
+import { jsxs as o, jsx as t, Fragment as j } from "react/jsx-runtime";
+import { forwardRef as V, useRef as ce, useState as le, useEffect as se, Fragment as de } from "react";
+import { P as n } from "./index-CblbdqjE.js";
+import { u as me } from "./useDetectMobile-Bkvj0VMa.js";
+import { p as he, s as fe } from "./utils-BdsZgOUE.js";
+import _e from "./TextInput.js";
+import C from "./Icon.js";
+import ue from "./Link.js";
+import M from "./IconButton.js";
+import W from "./DropdownMenu.js";
 import E from "./DropdownItem.js";
-import { F as te } from "./tag-cRMfP-SZ.js";
-import re from "./BlogProductCardsSection.js";
-import { s as M } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { P as ie } from "./index-CF3HhgvN.js";
-import A from "./BlogListSection.js";
-import { M as ae } from "./consts-BuFChS64.js";
-const ce = M.div`
+import { F as ge } from "./tag-BtS5lWJ0.js";
+import pe from "./BlogProductCardsSection.js";
+import { s as R } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { P as ve } from "./index-CF3HhgvN.js";
+import F from "./BlogListSection.js";
+import { M as xe } from "./consts-BuFChS64.js";
+const ye = R.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -94,93 +96,93 @@ const ce = M.div`
       }
     }
   }
-`, oe = j(
+`, be = V(
   ({
-    perPageOptions: o = [
+    perPageOptions: d = [
       { code: 10, name: "Show 10 items" },
       { code: 25, name: "Show 25 items" },
       { code: 50, name: "Show 50 items" }
     ],
-    perPage: f,
-    handlePerPage: g = () => {
+    perPage: u,
+    handlePerPage: v = () => {
     },
     page: c = 1,
-    handlePage: s = () => {
+    handlePage: m = () => {
     },
-    totalPage: t
-  }, m) => {
-    var _, d;
-    const h = () => {
-      c > 1 && (s == null || s(c - 1));
-    }, p = () => {
-      c < t && (s == null || s(c + 1));
+    totalPage: r
+  }, _) => {
+    var p, h;
+    const g = () => {
+      c > 1 && (m == null || m(c - 1));
     }, x = () => {
+      c < r && (m == null || m(c + 1));
+    }, b = () => {
       const i = [];
-      if (t <= 7)
-        for (let a = 1; a <= t; a++)
+      if (r <= 7)
+        for (let a = 1; a <= r; a++)
           i.push(a);
       else
-        c <= 3 ? i.push(1, 2, 3, "...", t) : c >= t - 2 ? i.push(1, "...", t - 2, t - 1, t) : i.push(1, 2, 3, "...", t);
-      return i == null ? void 0 : i.map((a, v) => a === "..." ? /* @__PURE__ */ n(
+        c <= 3 ? i.push(1, 2, 3, "...", r) : c >= r - 2 ? i.push(1, "...", r - 2, r - 1, r) : i.push(1, 2, 3, "...", r);
+      return i == null ? void 0 : i.map((a, y) => a === "..." ? /* @__PURE__ */ t(
         "div",
         {
           className: "pagination__page ellipsis",
           children: a
         },
-        `pagination-ellipsis__${v}`
-      ) : /* @__PURE__ */ n(
+        `pagination-ellipsis__${y}`
+      ) : /* @__PURE__ */ t(
         "div",
         {
-          onClick: () => s(a),
+          onClick: () => m(a),
           className: `pagination__page ${c === a ? "active" : ""}`,
           children: a
         },
-        `pagination-page__${v}`
+        `pagination-page__${y}`
       ));
     };
-    return /* @__PURE__ */ l(ce, { className: "pagination", children: [
-      /* @__PURE__ */ n(
-        F,
+    return /* @__PURE__ */ o(ye, { className: "pagination", children: [
+      /* @__PURE__ */ t(
+        W,
         {
           color: "neutral",
-          control: ((_ = o == null ? void 0 : o.find((i) => (i == null ? void 0 : i.code) === f)) == null ? void 0 : _.name) || ((d = o[0]) == null ? void 0 : d.name),
+          control: ((p = d == null ? void 0 : d.find((i) => (i == null ? void 0 : i.code) === u)) == null ? void 0 : p.name) || ((h = d[0]) == null ? void 0 : h.name),
           placement: "bottom",
           zIndex: 1001,
           className: "pagination__per-page",
-          children: o == null ? void 0 : o.map((i, a) => /* @__PURE__ */ n(
+          children: d == null ? void 0 : d.map((i, a) => /* @__PURE__ */ t(
             E,
             {
-              active: (i == null ? void 0 : i.code) === (f == null ? void 0 : f.code),
+              active: (i == null ? void 0 : i.code) === (u == null ? void 0 : u.code),
               className: "sort-by__item",
-              onClick: () => g(i),
+              onClick: () => v(i),
               children: i == null ? void 0 : i.name
             },
             `blog-epxlore-section-per-page-option__${a + 1}`
           ))
         }
       ),
-      /* @__PURE__ */ l("div", { className: "pagination__pages", children: [
-        /* @__PURE__ */ n(
+      /* @__PURE__ */ o("div", { className: "pagination__pages", children: [
+        /* @__PURE__ */ t(
           "div",
           {
             className: `pagination__page ${c === 1 ? "disabled" : ""}`,
-            onClick: h,
-            children: /* @__PURE__ */ n(k, { icon: " mng-lnc-chevron--left" })
+            onClick: g,
+            children: /* @__PURE__ */ t(C, { icon: " mng-lnc-chevron--left" })
           }
         ),
-        x(),
-        /* @__PURE__ */ n(
+        b(),
+        /* @__PURE__ */ t(
           "div",
           {
-            className: `pagination__page ${c === t ? "disabled" : ""}`,
-            onClick: p,
-            children: /* @__PURE__ */ n(k, { icon: " mng-lnc-chevron--right" })
+            className: `pagination__page ${c === r ? "disabled" : ""}`,
+            onClick: x,
+            children: /* @__PURE__ */ t(C, { icon: " mng-lnc-chevron--right" })
           }
         )
       ] })
     ] });
   }
-), le = M.div`
+), we = R.div`
   display: flex;
   align-items: flex-start;
   gap: 2rem;
@@ -197,18 +199,44 @@ const ce = M.div`
     flex-direction: column;
     align-items: flex-start;
     gap: 1.5rem;
+    max-width: 50rem;
 
     border-right: 1px solid var(--gray-200, #dddfe4);
     padding-right: 2rem;
 
     & .section__tags {
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
+      width: 100%;
+      overflow-x: hidden;
+      white-space: nowrap;
     }
 
     & .pagination {
       padding: 1.25rem 0;
     }
 
+    & .main-content__heading {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      & .main-content__tags-nav {
+        display: flex;
+        gap: 0.25rem;
+
+        & .main-content__tag-nav {
+          &:not(:disabled) {
+            color: var(--gray-950, #14161a);
+            background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
+
+            &:hover {
+              background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
+            }
+          }
+        }
+      }
+    }
+
     & .main-content__title {
       color: var(--gray-950, #14161a);
       font-size: 1.5rem;
@@ -219,7 +247,11 @@ const ce = M.div`
 
     & .tags__item {
       &:not(.active) {
-        background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
+        background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
+
+        &:hover {
+          background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
+        }
       }
     }
 
@@ -356,7 +388,7 @@ const ce = M.div`
             font-style: normal;
             font-weight: 500;
             line-height: 1.25rem;
-            ${O(2)}
+            ${he(2)}
           }
 
           & .item__description {
@@ -371,16 +403,19 @@ const ce = M.div`
     }
   }
 
-  @media (max-width: ${ae + "px"}) {
+  @media (max-width: ${xe + "px"}) {
     flex-direction: column;
 
     & .landing__main-content {
       width: 100%;
+      max-width: 100%;
       padding-right: 0;
       border-right: none;
 
       & .section__tags {
-        flex-wrap: nowrap;
+        width: 100%;
+        overflow-x: auto;
+        white-space: nowrap;
       }
 
       & .main-content__actions {
@@ -388,6 +423,8 @@ const ce = M.div`
       }
 
       & .main-content__items {
+        width: 100%;
+
         & .main-content__divider {
           display: none;
         }
@@ -418,86 +455,142 @@ const ce = M.div`
       display: none;
     }
   }
-`, se = j(
+`, Ne = V(
   ({
-    mainTitle: o,
-    sideTitle: f,
-    tags: g,
+    mainTitle: d,
+    sideTitle: u,
+    tags: v,
     selectedTag: c,
-    handleSelectTag: s = () => {
+    handleSelectTag: m = () => {
     },
-    blogs: t,
-    miniBlogs: m,
-    products: h,
-    blogsLoading: p = !1,
-    productsLoading: x = !1,
-    sortingOptions: _,
-    sortBy: d,
+    blogs: r,
+    miniBlogs: _,
+    products: g,
+    blogsLoading: x = !1,
+    productsLoading: b = !1,
+    sortingOptions: p,
+    sortBy: h,
     handleSortBy: i = () => {
     },
     allTagText: a = "All",
-    searchPlaceholderText: v = "Search blogs",
-    timeToReadText: T = "{0} min read",
-    getBlogImageUrl: y = () => {
+    searchPlaceholderText: y = "Search blogs",
+    timeToReadText: L = "{0} min read",
+    getBlogImageUrl: w = () => {
     },
-    handleSelectBlog: w = () => {
+    handleSelectBlog: N = () => {
     },
-    handleSelectBlogTag: C = () => {
+    handleSelectBlogTag: A = () => {
     },
-    handleShareBlog: I = () => {
+    handleShareBlog: z = () => {
     },
     // handleBookmarkBlog = () => {},
-    showAllButtonLink: D,
-    showAllButtonText: R = "Show all products",
-    viewAllButtonText: U = "View all (11)",
-    viewAllButtonLink: de,
-    handleViewAll: V = () => {
+    showAllButtonLink: U,
+    showAllButtonText: q = "Show all products",
+    viewAllButtonText: H = "View all (11)",
+    // viewAllButtonLink,
+    handleViewAll: X = () => {
     },
-    handleShowAll: q = () => {
+    handleShowAll: Z = () => {
     },
-    handleSelectProduct: H = () => {
+    handleSelectProduct: G = () => {
     },
-    getProductImageUrl: W = () => {
+    getProductImageUrl: J = () => {
     },
-    page: X,
-    handlePage: b = () => {
+    page: K,
+    handlePage: k = () => {
     },
-    perPage: Z,
-    handlePerPage: G = () => {
+    perPage: Q,
+    handlePerPage: Y = () => {
     },
-    totalPage: N,
-    perPageOptions: J,
-    handleSearch: K = () => {
+    totalPage: S,
+    perPageOptions: B,
+    handleSearch: O = () => {
     },
     onBookmark: $ = () => {
     },
-    bookmarkComponent: z = /* @__PURE__ */ n(L, { children: " " }),
-    componentName: S
-  }, Q) => {
-    const Y = (r) => {
-      document.getElementById("landing__container").scrollIntoView({ behavior: "smooth", block: "start" }), b == null || b(r);
+    bookmarkComponent: I = /* @__PURE__ */ t(j, {}),
+    componentName: T
+  }, P) => {
+    const ee = (e) => {
+      document.getElementById("landing__container").scrollIntoView({ behavior: "smooth", block: "start" }), k == null || k(e);
+    }, l = ce(null), ne = me(), [f, te] = le({
+      arrowsVisible: !1,
+      leftArrowDisabled: !1,
+      rightArrowDisabled: !1
+    });
+    se(() => {
+      const e = l == null ? void 0 : l.current;
+      if (!e) return;
+      const s = () => {
+        const ae = e.scrollWidth - e.clientWidth;
+        te((oe) => ({
+          ...oe,
+          arrowsVisible: e.clientWidth < e.scrollWidth,
+          leftArrowDisabled: e.scrollLeft <= 0,
+          rightArrowDisabled: e.scrollLeft >= ae
+        }));
+      }, D = new ResizeObserver(s);
+      return D.observe(e), s(), e.addEventListener("scroll", s), () => {
+        D.disconnect(), e.removeEventListener("scroll", s);
+      };
+    }, []);
+    const re = () => {
+      var e;
+      (e = l == null ? void 0 : l.current) == null || e.scrollBy({ left: 100, behavior: "smooth" });
+    }, ie = () => {
+      var e;
+      (e = l == null ? void 0 : l.current) == null || e.scrollBy({ left: -100, behavior: "smooth" });
     };
-    return /* @__PURE__ */ l(le, { ref: Q, id: "landing__container", children: [
-      /* @__PURE__ */ l("div", { className: "landing__main-content", children: [
-        o && /* @__PURE__ */ n("div", { className: "main-content__title", children: o }),
-        g && /* @__PURE__ */ n(
-          te,
+    return /* @__PURE__ */ o(we, { ref: P, id: "landing__container", children: [
+      /* @__PURE__ */ o("div", { className: "landing__main-content", children: [
+        /* @__PURE__ */ o("div", { className: "main-content__heading", children: [
+          /* @__PURE__ */ t("div", { className: "main-content__title", children: d }),
+          !ne && (f == null ? void 0 : f.arrowsVisible) && /* @__PURE__ */ o("div", { className: "main-content__tags-nav", children: [
+            /* @__PURE__ */ t(
+              M,
+              {
+                icon: "chevron-left",
+                borderRadius: "curved",
+                btnType: "tinted",
+                color: "neutral",
+                disabled: f == null ? void 0 : f.leftArrowDisabled,
+                className: "main-content__tag-nav",
+                onClick: ie
+              }
+            ),
+            /* @__PURE__ */ t(
+              M,
+              {
+                icon: "chevron-right",
+                borderRadius: "curved",
+                btnType: "tinted",
+                color: "neutral",
+                disabled: f == null ? void 0 : f.rightArrowDisabled,
+                className: "main-content__tag-nav",
+                onClick: re
+              }
+            )
+          ] })
+        ] }),
+        v && /* @__PURE__ */ t(
+          ge,
           {
-            tags: g,
+            ref: l,
+            tags: v,
             allTagText: a,
             selectedTagCode: c,
-            onSelectTag: s
+            onSelectTag: m
           }
         ),
-        /* @__PURE__ */ l("div", { className: "main-content__actions", children: [
-          /* @__PURE__ */ n(
-            ee,
+        /* @__PURE__ */ o("div", { className: "main-content__actions", children: [
+          /* @__PURE__ */ t(
+            _e,
             {
               className: "main-content__search",
-              placeholder: v,
+              placeholder: y,
               debounceTime: 200,
-              prefix: /* @__PURE__ */ n(
-                k,
+              prefix: /* @__PURE__ */ t(
+                C,
                 {
                   icon: " mng-lnc-search",
                   sizeInUnits: "1.25rem",
@@ -505,155 +598,155 @@ const ce = M.div`
                 }
               ),
               color: "neutral",
-              onChange: K
+              onChange: O
             }
           ),
-          /* @__PURE__ */ n(
-            F,
+          /* @__PURE__ */ t(
+            W,
             {
               color: "neutral",
-              control: d == null ? void 0 : d.name,
+              control: h == null ? void 0 : h.name,
               zIndex: 1001,
               className: "main-content__sort-by",
-              children: _ == null ? void 0 : _.map((r, u) => /* @__PURE__ */ n(
+              children: p == null ? void 0 : p.map((e, s) => /* @__PURE__ */ t(
                 E,
                 {
-                  active: (r == null ? void 0 : r.code) === (d == null ? void 0 : d.code),
+                  active: (e == null ? void 0 : e.code) === (h == null ? void 0 : h.code),
                   className: "sort-by__item",
-                  onClick: () => i(r),
-                  children: r == null ? void 0 : r.name
+                  onClick: () => i(e),
+                  children: e == null ? void 0 : e.name
                 },
-                `blog-epxlore-section-sorting-option__${u + 1}`
+                `blog-epxlore-section-sorting-option__${s + 1}`
               ))
             }
           )
         ] }),
-        /* @__PURE__ */ l("div", { className: "main-content__items", children: [
-          t && (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ n(
-            A,
+        /* @__PURE__ */ o("div", { className: "main-content__items", children: [
+          r && (r == null ? void 0 : r.length) > 0 && /* @__PURE__ */ t(
+            F,
             {
-              timeToReadText: T,
-              items: t == null ? void 0 : t.slice(0, 5),
-              isLoading: p,
-              getImage: y,
-              onSelectCard: w,
-              onSelectOption: C,
-              onShare: I,
+              timeToReadText: L,
+              items: r == null ? void 0 : r.slice(0, 5),
+              isLoading: x,
+              getImage: w,
+              onSelectCard: N,
+              onSelectOption: A,
+              onShare: z,
               onBookmark: $,
-              bookmarkComponent: z,
-              componentName: S
+              bookmarkComponent: I,
+              componentName: T
             }
           ),
-          /* @__PURE__ */ n("div", { className: "main-content__divider" }),
-          h && (h == null ? void 0 : h.length) > 0 && /* @__PURE__ */ n(
-            re,
+          /* @__PURE__ */ t("div", { className: "main-content__divider" }),
+          g && (g == null ? void 0 : g.length) > 0 && /* @__PURE__ */ t(
+            pe,
             {
-              buttonText: R,
-              buttonLink: D,
-              onButtonAction: q,
-              onSelectCard: H,
-              items: h,
-              isLoading: x,
-              getImage: W,
+              buttonText: q,
+              buttonLink: U,
+              onButtonAction: Z,
+              onSelectCard: G,
+              items: g,
+              isLoading: b,
+              getImage: J,
               isHighlight: !0,
-              componentName: S
+              componentName: T
             }
           ),
-          /* @__PURE__ */ n("div", { className: "main-content__divider" }),
-          t && (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ n(
-            A,
+          /* @__PURE__ */ t("div", { className: "main-content__divider" }),
+          r && (r == null ? void 0 : r.length) > 0 && /* @__PURE__ */ t(
+            F,
             {
-              timeToReadText: T,
-              items: t == null ? void 0 : t.slice(5),
-              isLoading: p,
-              getImage: y,
-              onSelectCard: w,
-              onSelectOption: C,
-              onShare: I,
+              timeToReadText: L,
+              items: r == null ? void 0 : r.slice(5),
+              isLoading: x,
+              getImage: w,
+              onSelectCard: N,
+              onSelectOption: A,
+              onShare: z,
               onBookmark: $,
-              bookmarkComponent: z,
-              componentName: S
+              bookmarkComponent: I,
+              componentName: T
             }
           )
         ] }),
-        N && N > 1 && /* @__PURE__ */ n(
-          oe,
+        S && S > 1 && /* @__PURE__ */ t(
+          be,
           {
-            perPageOptions: J,
-            perPage: Z,
-            handlePerPage: G,
-            page: X,
-            handlePage: Y,
-            totalPage: N
+            perPageOptions: B,
+            perPage: Q,
+            handlePerPage: Y,
+            page: K,
+            handlePage: ee,
+            totalPage: S
           }
         )
       ] }),
-      /* @__PURE__ */ l("div", { className: "landing__side-content", children: [
-        f && /* @__PURE__ */ n("div", { className: "side-content__title", children: f }),
-        m && (m == null ? void 0 : m.length) > 0 && /* @__PURE__ */ l(L, { children: [
-          /* @__PURE__ */ n("div", { className: "side-content__items", children: m == null ? void 0 : m.map((r, u) => /* @__PURE__ */ n(B, { children: /* @__PURE__ */ l(
+      /* @__PURE__ */ o("div", { className: "landing__side-content", children: [
+        u && /* @__PURE__ */ t("div", { className: "side-content__title", children: u }),
+        _ && (_ == null ? void 0 : _.length) > 0 && /* @__PURE__ */ o(j, { children: [
+          /* @__PURE__ */ t("div", { className: "side-content__items", children: _ == null ? void 0 : _.map((e, s) => /* @__PURE__ */ t(de, { children: /* @__PURE__ */ o(
             "div",
             {
               className: "side-content__item",
-              onClick: () => w(r),
+              onClick: () => N(e),
               children: [
-                /* @__PURE__ */ n(
-                  ie,
+                /* @__PURE__ */ t(
+                  ve,
                   {
-                    src: y(r == null ? void 0 : r.imageUrl, r == null ? void 0 : r.uuid) || null,
-                    alt: `Mini blog ${u + 1}`,
+                    src: w(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
+                    alt: `Mini blog ${s + 1}`,
                     className: "item__image"
                   }
                 ),
-                /* @__PURE__ */ l("div", { className: "item__content", children: [
-                  /* @__PURE__ */ n("div", { className: "item__title", children: r == null ? void 0 : r.title }),
-                  /* @__PURE__ */ n("div", { className: "item__description", children: P(r == null ? void 0 : r.publishedAt) })
+                /* @__PURE__ */ o("div", { className: "item__content", children: [
+                  /* @__PURE__ */ t("div", { className: "item__title", children: e == null ? void 0 : e.title }),
+                  /* @__PURE__ */ t("div", { className: "item__description", children: fe(e == null ? void 0 : e.publishedAt) })
                 ] })
               ]
             }
-          ) }, `mini_blg_${u}`)) }),
-          /* @__PURE__ */ n(ne, { onClick: V, className: "side-content__link", children: U })
+          ) }, `mini_blg_${s}`)) }),
+          /* @__PURE__ */ t(ue, { onClick: X, className: "side-content__link", children: H })
         ] })
       ] })
     ] });
   }
 );
-se.propTypes = {
-  mainTitle: e.string,
-  sideTitle: e.string,
-  tags: e.array,
-  selectedTag: e.any,
-  handleSelectTag: e.func,
-  blogs: e.array,
-  miniBlogs: e.array,
-  products: e.array,
-  blogsLoading: e.bool,
-  productsLoading: e.bool,
-  sortingOptions: e.array,
-  sortBy: e.any,
-  handleSortBy: e.func,
-  allTagText: e.string,
-  searchPlaceholderText: e.string,
-  timeToReadText: e.string,
-  getBlogImageUrl: e.func,
-  handleSelectBlog: e.func,
-  handleSelectBlogTag: e.func,
-  handleShareBlog: e.func,
-  handleBookmarkBlog: e.func,
-  showAllButtonLink: e.string,
-  showAllButtonText: e.string,
-  viewAllButtonText: e.string,
-  handleShowAll: e.func,
-  handleSelectProduct: e.func,
-  getProductImageUrl: e.func,
-  page: e.number,
-  handlePage: e.func,
-  perPage: e.any,
-  handlePerPage: e.func,
-  totalPage: e.number,
-  perPageOptions: e.array,
-  handleSearch: e.func
+Ne.propTypes = {
+  mainTitle: n.string,
+  sideTitle: n.string,
+  tags: n.array,
+  selectedTag: n.any,
+  handleSelectTag: n.func,
+  blogs: n.array,
+  miniBlogs: n.array,
+  products: n.array,
+  blogsLoading: n.bool,
+  productsLoading: n.bool,
+  sortingOptions: n.array,
+  sortBy: n.any,
+  handleSortBy: n.func,
+  allTagText: n.string,
+  searchPlaceholderText: n.string,
+  timeToReadText: n.string,
+  getBlogImageUrl: n.func,
+  handleSelectBlog: n.func,
+  handleSelectBlogTag: n.func,
+  handleShareBlog: n.func,
+  handleBookmarkBlog: n.func,
+  showAllButtonLink: n.string,
+  showAllButtonText: n.string,
+  viewAllButtonText: n.string,
+  handleShowAll: n.func,
+  handleSelectProduct: n.func,
+  getProductImageUrl: n.func,
+  page: n.number,
+  handlePage: n.func,
+  perPage: n.any,
+  handlePerPage: n.func,
+  totalPage: n.number,
+  perPageOptions: n.array,
+  handleSearch: n.func
 };
 export {
-  se as default
+  Ne as default
 };

package/dist/FaqSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),u=require("react"),n=require("./index-BpbMKBf_.cjs"),P=require("./tag-yputMSpE.cjs"),w=require("./useDetectMobile-zkbzoOGV.cjs"),q=require("./Icon.cjs"),b=require("./IconButton.cjs"),I=require("./Button.cjs"),N=require("./emotion-styled.browser.esm-BtEseadx.cjs"),k=require("./consts-goSZX3xP.cjs"),m=({title:t,description:i,questionText:a,feedbackText:g,impressions:l=!1,onSelectItem:p=()=>{},onImpressed:d=()=>{}})=>{const[h,c]=u.useState(!1),[x,y]=u.useState(!1),T=()=>{c(o=>!o),p()},r=(o,_)=>{o==null||o.stopPropagation(),y(!0),d(_)};return e.jsxs(P.ItemContainer,{className:h?"expanded":"",onClick:T,children:[e.jsxs("div",{className:"card__heading",children:[e.jsx("div",{className:"card__title",children:t}),e.jsx(q,{icon:h?" mng-lnc-subtract":" mng-lnc-add",sizeInUnits:"1.25rem",className:"card__icon"})]}),h&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"card__description",children:i}),l&&e.jsx(e.Fragment,{children:x?e.jsxs("div",{className:"card__impression feedback",children:[e.jsx(q,{icon:" mng-lnc-checkmark--outline",sizeInUnits:"1.25rem",color:"success"}),e.jsx("div",{className:"imppression__question",children:g})]}):e.jsxs("div",{className:"card__impression",children:[e.jsx("div",{className:"imppression__question",children:a}),e.jsxs("div",{className:"impression__actions",children:[e.jsx(b,{icon:" mng-lnc-thumbs-up",borderRadius:"curved",btnType:"outline",onClick:o=>r(o,!0)}),e.jsx(b,{icon:" mng-lnc-thumbs-down",borderRadius:"curved",btnType:"outline",onClick:o=>r(o,!1)})]})]})})]})]})},v=u.forwardRef(({items:t=[],questionText:i,feedbackText:a,showMoreText:g,impressions:l=!1,onSelectItem:p=()=>{},onImpressed:d=()=>{}},h)=>{const c=w.useDetectMobile(),[x,y]=u.useState(!1),T=()=>{y(o=>!o)},r=u.useMemo(()=>{if(c)return t==null?void 0:t.map((s,f)=>e.jsx(m,{title:s==null?void 0:s.title,description:s==null?void 0:s.description,questionText:i,feedbackText:a,impressions:l,onSelectItem:()=>p(s),onImpressed:j=>d(s,j)},`faq-section-item__${f+1}`));const o=[],_=[];return t==null||t.forEach((s,f)=>{f%2===0?o.push(e.jsx(m,{title:s==null?void 0:s.title,description:s==null?void 0:s.description,questionText:i,feedbackText:a,impressions:l,onSelectItem:()=>p(s),onImpressed:j=>d(s,j)},`faq-section-item__${f+1}`)):_.push(e.jsx(m,{title:s==null?void 0:s.title,description:s==null?void 0:s.description,questionText:i,feedbackText:a,impressions:l,onSelectItem:()=>p(s),onImpressed:j=>d(s,j)},`faq-section-item__${f+1}`))}),e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"section__column",children:o}),e.jsx("div",{className:"section__column",children:_})]})},[t,c]);return e.jsx(P.ItemsContainer,{ref:h,children:c?x?r:e.jsxs(e.Fragment,{children:[r==null?void 0:r.slice(0,4),(r==null?void 0:r.length)>4&&e.jsx(I,{text:g,btnType:"basic",color:"neutral",className:"section__show-more",onClick:T})]}):r})});m.propTypes={title:n.PropTypes.string,description:n.PropTypes.string,questionText:n.PropTypes.string,feedbackText:n.PropTypes.string,showMoreText:n.PropTypes.string,impressions:n.PropTypes.bool,onSelectItem:n.PropTypes.func,onImpressed:n.PropTypes.func};v.propTypes={items:n.PropTypes.array,questionText:n.PropTypes.string,feedbackText:n.PropTypes.string,showMoreText:n.PropTypes.string,impressions:n.PropTypes.bool,onSelectItem:n.PropTypes.func,onImpressed:n.PropTypes.func};const M=N.styled.div`
+"use strict";const e=require("react/jsx-runtime"),u=require("react"),n=require("./index-BpbMKBf_.cjs"),P=require("./tag-CmeZsPQt.cjs"),w=require("./useDetectMobile-zkbzoOGV.cjs"),q=require("./Icon.cjs"),b=require("./IconButton.cjs"),I=require("./Button.cjs"),N=require("./emotion-styled.browser.esm-BtEseadx.cjs"),k=require("./consts-goSZX3xP.cjs"),m=({title:t,description:i,questionText:a,feedbackText:g,impressions:l=!1,onSelectItem:p=()=>{},onImpressed:d=()=>{}})=>{const[h,c]=u.useState(!1),[x,y]=u.useState(!1),T=()=>{c(o=>!o),p()},r=(o,_)=>{o==null||o.stopPropagation(),y(!0),d(_)};return e.jsxs(P.ItemContainer,{className:h?"expanded":"",onClick:T,children:[e.jsxs("div",{className:"card__heading",children:[e.jsx("div",{className:"card__title",children:t}),e.jsx(q,{icon:h?" mng-lnc-subtract":" mng-lnc-add",sizeInUnits:"1.25rem",className:"card__icon"})]}),h&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"card__description",children:i}),l&&e.jsx(e.Fragment,{children:x?e.jsxs("div",{className:"card__impression feedback",children:[e.jsx(q,{icon:" mng-lnc-checkmark--outline",sizeInUnits:"1.25rem",color:"success"}),e.jsx("div",{className:"imppression__question",children:g})]}):e.jsxs("div",{className:"card__impression",children:[e.jsx("div",{className:"imppression__question",children:a}),e.jsxs("div",{className:"impression__actions",children:[e.jsx(b,{icon:" mng-lnc-thumbs-up",borderRadius:"curved",btnType:"outline",onClick:o=>r(o,!0)}),e.jsx(b,{icon:" mng-lnc-thumbs-down",borderRadius:"curved",btnType:"outline",onClick:o=>r(o,!1)})]})]})})]})]})},v=u.forwardRef(({items:t=[],questionText:i,feedbackText:a,showMoreText:g,impressions:l=!1,onSelectItem:p=()=>{},onImpressed:d=()=>{}},h)=>{const c=w.useDetectMobile(),[x,y]=u.useState(!1),T=()=>{y(o=>!o)},r=u.useMemo(()=>{if(c)return t==null?void 0:t.map((s,f)=>e.jsx(m,{title:s==null?void 0:s.title,description:s==null?void 0:s.description,questionText:i,feedbackText:a,impressions:l,onSelectItem:()=>p(s),onImpressed:j=>d(s,j)},`faq-section-item__${f+1}`));const o=[],_=[];return t==null||t.forEach((s,f)=>{f%2===0?o.push(e.jsx(m,{title:s==null?void 0:s.title,description:s==null?void 0:s.description,questionText:i,feedbackText:a,impressions:l,onSelectItem:()=>p(s),onImpressed:j=>d(s,j)},`faq-section-item__${f+1}`)):_.push(e.jsx(m,{title:s==null?void 0:s.title,description:s==null?void 0:s.description,questionText:i,feedbackText:a,impressions:l,onSelectItem:()=>p(s),onImpressed:j=>d(s,j)},`faq-section-item__${f+1}`))}),e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"section__column",children:o}),e.jsx("div",{className:"section__column",children:_})]})},[t,c]);return e.jsx(P.ItemsContainer,{ref:h,children:c?x?r:e.jsxs(e.Fragment,{children:[r==null?void 0:r.slice(0,4),(r==null?void 0:r.length)>4&&e.jsx(I,{text:g,btnType:"basic",color:"neutral",className:"section__show-more",onClick:T})]}):r})});m.propTypes={title:n.PropTypes.string,description:n.PropTypes.string,questionText:n.PropTypes.string,feedbackText:n.PropTypes.string,showMoreText:n.PropTypes.string,impressions:n.PropTypes.bool,onSelectItem:n.PropTypes.func,onImpressed:n.PropTypes.func};v.propTypes={items:n.PropTypes.array,questionText:n.PropTypes.string,feedbackText:n.PropTypes.string,showMoreText:n.PropTypes.string,impressions:n.PropTypes.bool,onSelectItem:n.PropTypes.func,onImpressed:n.PropTypes.func};const M=N.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;

package/dist/FaqSection.js

@@ -1,7 +1,7 @@
 import { jsx as s, jsxs as i, Fragment as b } from "react/jsx-runtime";
 import { forwardRef as N, useState as x, useMemo as q } from "react";
 import { P as n } from "./index-CblbdqjE.js";
-import { I as M, a as C, F } from "./tag-cRMfP-SZ.js";
+import { I as M, a as C, F } from "./tag-BtS5lWJ0.js";
 import { u as $ } from "./useDetectMobile-Bkvj0VMa.js";
 import w from "./Icon.js";
 import S from "./IconButton.js";

package/dist/{tag-cRMfP-SZ.js → tag-BtS5lWJ0.js}

@@ -1,9 +1,9 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
 import { P as r } from "./index-CblbdqjE.js";
 import d from "./Chip.js";
 import { s as o } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as t } from "./consts-BuFChS64.js";
+import { M as a } from "./consts-BuFChS64.js";
 const p = o.div`
   display: flex;
   gap: 0.75rem;
@@ -12,7 +12,7 @@ const p = o.div`
 
   & .tags__item {
     color: var(--gray-900, #0c1520);
-    background: var(--gray-100, #f3f6fb);
+    background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
     font-size: 0.875rem;
     font-style: normal;
     font-weight: 400;
@@ -33,6 +33,7 @@ const p = o.div`
 
     &:hover {
       background: var(--gray-200, #e4e9f0);
+      background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
     }
 
     &:focus {
@@ -40,7 +41,7 @@ const p = o.div`
     }
   }
 
-  @media (max-width: ${t + "px"}) {
+  @media (max-width: ${a + "px"}) {
     width: 100%;
     overflow-x: auto;
     white-space: nowrap;
@@ -59,7 +60,7 @@ const p = o.div`
       /* Safari and Chrome */
     }
   }
-`, b = o.div`
+`, v = o.div`
   display: flex;
   gap: 1.25rem;
   width: 100%;
@@ -84,10 +85,10 @@ const p = o.div`
     }
   }
 
-  @media (max-width: ${t + "px"}) {
+  @media (max-width: ${a + "px"}) {
     flex-direction: column;
   }
-`, v = o.div`
+`, y = o.div`
   width: 100%;
   height: fit-content;
   background: var(--white, #fff);
@@ -167,7 +168,7 @@ const p = o.div`
     }
   }
 
-  @media (max-width: ${t + "px"}) {
+  @media (max-width: ${a + "px"}) {
     & .card__impression {
       justify-content: space-between;
 
@@ -176,9 +177,9 @@ const p = o.div`
       }
     }
   }
-`, g = m(
+`, g = f(
   ({ tags: n = [], allTagText: i, selectedTagCode: l = null, onSelectTag: s = () => {
-  } }, c) => /* @__PURE__ */ a(p, { ref: c, className: "section__tags", children: [{ name: i, code: null }, ...n].map((e, f) => /* @__PURE__ */ a(
+  } }, c) => /* @__PURE__ */ t(p, { ref: c, className: "section__tags", children: [{ name: i, code: null }, ...n].map((e, m) => /* @__PURE__ */ t(
     d,
     {
       label: e == null ? void 0 : e.name,
@@ -189,7 +190,7 @@ const p = o.div`
         s(e);
       }
     },
-    `faq-section-tag__${f + 1}`
+    `faq-section-tag__${m + 1}`
   )) })
 );
 g.propTypes = {
@@ -199,6 +200,6 @@ g.propTypes = {
 };
 export {
   g as F,
-  b as I,
-  v as a
+  v as I,
+  y as a
 };

package/dist/{tag-yputMSpE.cjs → tag-CmeZsPQt.cjs}

@@ -1,4 +1,4 @@
-"use strict";const n=require("react/jsx-runtime"),m=require("react"),r=require("./index-BpbMKBf_.cjs"),p=require("./Chip.cjs"),o=require("./emotion-styled.browser.esm-BtEseadx.cjs"),t=require("./consts-goSZX3xP.cjs"),g=o.styled.div`
+"use strict";const t=require("react/jsx-runtime"),m=require("react"),r=require("./index-BpbMKBf_.cjs"),p=require("./Chip.cjs"),n=require("./emotion-styled.browser.esm-BtEseadx.cjs"),o=require("./consts-goSZX3xP.cjs"),g=n.styled.div`
   display: flex;
   gap: 0.75rem;
   align-items: center;
@@ -6,7 +6,7 @@
 
   & .tags__item {
     color: var(--gray-900, #0c1520);
-    background: var(--gray-100, #f3f6fb);
+    background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
     font-size: 0.875rem;
     font-style: normal;
     font-weight: 400;
@@ -27,6 +27,7 @@
 
     &:hover {
       background: var(--gray-200, #e4e9f0);
+      background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
     }
 
     &:focus {
@@ -34,7 +35,7 @@
     }
   }
 
-  @media (max-width: ${t.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${o.MOBILE_SIZE_PX+"px"}) {
     width: 100%;
     overflow-x: auto;
     white-space: nowrap;
@@ -53,7 +54,7 @@
       /* Safari and Chrome */
     }
   }
-`,u=o.styled.div`
+`,u=n.styled.div`
   display: flex;
   gap: 1.25rem;
   width: 100%;
@@ -78,10 +79,10 @@
     }
   }
 
-  @media (max-width: ${t.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${o.MOBILE_SIZE_PX+"px"}) {
     flex-direction: column;
   }
-`,h=o.styled.div`
+`,h=n.styled.div`
   width: 100%;
   height: fit-content;
   background: var(--white, #fff);
@@ -161,7 +162,7 @@
     }
   }
 
-  @media (max-width: ${t.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${o.MOBILE_SIZE_PX+"px"}) {
     & .card__impression {
       justify-content: space-between;
 
@@ -170,4 +171,4 @@
       }
     }
   }
-`,i=m.forwardRef(({tags:a=[],allTagText:s,selectedTagCode:l=null,onSelectTag:c=()=>{}},d)=>n.jsx(g,{ref:d,className:"section__tags",children:[{name:s,code:null},...a].map((e,f)=>n.jsx(p,{label:e==null?void 0:e.name,borderRadius:"curved",color:"neutral",className:`tags__item ${l===(e==null?void 0:e.code)?"active":""}`,onClick:()=>{c(e)}},`faq-section-tag__${f+1}`))}));i.propTypes={tags:r.PropTypes.array,allTagText:r.PropTypes.string,onSelectTag:r.PropTypes.func};exports.FaqSectionTags=i;exports.ItemContainer=h;exports.ItemsContainer=u;
+`,a=m.forwardRef(({tags:i=[],allTagText:s,selectedTagCode:l=null,onSelectTag:c=()=>{}},d)=>t.jsx(g,{ref:d,className:"section__tags",children:[{name:s,code:null},...i].map((e,f)=>t.jsx(p,{label:e==null?void 0:e.name,borderRadius:"curved",color:"neutral",className:`tags__item ${l===(e==null?void 0:e.code)?"active":""}`,onClick:()=>{c(e)}},`faq-section-tag__${f+1}`))}));a.propTypes={tags:r.PropTypes.array,allTagText:r.PropTypes.string,onSelectTag:r.PropTypes.func};exports.FaqSectionTags=a;exports.ItemContainer=h;exports.ItemsContainer=u;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "4.0.163",
+  "version": "4.0.164",
   "description": "React component library",
   "type": "module",
   "keywords": [