@lanaco/lnc-react-ui 4.0.124 → 4.0.126

package/dist/FaqSection.js

@@ -1,270 +1,77 @@
-import { jsx as r, jsxs as l, Fragment as y } from "react/jsx-runtime";
-import { forwardRef as S, useState as T, useMemo as $ } from "react";
+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 z from "./Chip.js";
-import { s as k } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as I } from "./consts-BuFChS64.js";
-import { u as E } from "./useDetectMobile-Bkvj0VMa.js";
-import N from "./Icon.js";
-import C from "./IconButton.js";
-import F from "./Button.js";
-const j = k.div`
-  display: flex;
-  gap: 0.75rem;
-  align-items: center;
-  align-content: center;
-
-  & .tags__item {
-    color: var(--gray-900, #0c1520);
-    background: var(--gray-100, #f3f6fb);
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1.25rem;
-    letter-spacing: -0.0056rem;
-    padding: 0.5rem 0.75rem;
-
-    &.active {
-      color: var(--white, #fff);
-      background: var(--gray-900, #0c1520);
-      font-weight: 500;
-
-      &:hover {
-        color: var(--white, #fff);
-        background: var(--gray-900, #0c1520);
-      }
-    }
-
-    &:hover {
-      background: var(--gray-200, #e4e9f0);
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  @media (max-width: ${I + "px"}) {
-    width: 100%;
-    overflow-x: auto;
-    white-space: nowrap;
-
-    -webkit-overflow-scrolling: touch;
-    ::-webkit-scrollbar {
-      -webkit-appearance: none;
-    }
-    -ms-overflow-style: none;
-    /* Internet Explorer 10+ */
-    scrollbar-width: none;
-    /* Firefox */
-
-    &::-webkit-scrollbar {
-      display: none;
-      /* Safari and Chrome */
-    }
-  }
-`, P = k.div`
-  display: flex;
-  gap: 1.25rem;
-  width: 100%;
-
-  & .section__column {
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
-    width: 100%;
-  }
-
-  & .section__show-more {
-    color: var(--neutral-600, #0f2a46);
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 1.25rem;
-    letter-spacing: -0.0056rem;
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  @media (max-width: ${I + "px"}) {
-    flex-direction: column;
-  }
-`, R = k.div`
-  width: 100%;
-  height: fit-content;
-  background: var(--white, #fff);
-  border: 1px solid var(--gray-100, #f3f6fb);
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding: 1rem;
-  border-radius: 0.75rem;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &.expanded {
-    border: 1px solid #ff7621;
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16),
-      0 1px 4px 0 rgba(255, 118, 33, 0.5) inset;
-  }
-
-  & .card__heading {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-
-    & .card__title {
-      color: var(--neutral-600, #0f2a46);
-      font-size: 1rem;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 1.5rem;
-    }
-
-    & .card__icon {
-      color: var(--neutral-600, #0f2a46);
-    }
-  }
-
-  & .card__description {
-    color: var(--neutral-400, #47607b);
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1.25rem;
-    letter-spacing: 0.0156rem;
-  }
-
-  & .card__impression {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-
-    & .imppression__question {
-      color: var(--gray-500, #7a8594);
-      font-size: 0.75rem;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 1rem;
-      letter-spacing: 0.0313rem;
-    }
-
-    & .impression__actions {
-      display: flex;
-      gap: 0.5rem;
-
-      button {
-        color: var(--gray-600, #676e79);
-
-        &:focus {
-          outline: none;
-        }
-      }
-    }
-
-    &.feedback {
-      gap: 0.25rem;
-    }
-  }
-
-  @media (max-width: ${I + "px"}) {
-    & .card__impression {
-      justify-content: space-between;
-
-      &.feedback {
-        justify-content: flex-start;
-      }
-    }
-  }
-`, q = S(
-  ({ tags: s = [], allTagText: a, selectedTagCode: d = null, onSelectTag: h = () => {
-  } }, p) => /* @__PURE__ */ r(j, { children: [{ name: a, code: null }, ...s].map((i, f) => /* @__PURE__ */ r(
-    z,
-    {
-      label: i == null ? void 0 : i.name,
-      borderRadius: "curved",
-      color: "neutral",
-      className: `tags__item ${d === (i == null ? void 0 : i.code) ? "active" : ""}`,
-      onClick: () => {
-        h(i);
-      }
-    },
-    `faq-section-tag__${f + 1}`
-  )) })
-);
-q.propTypes = {
-  tags: n.array,
-  allTagText: n.string,
-  onSelectTag: n.func
-};
-const b = ({
-  title: s,
+import { I as M, a as C, F } from "./tag-D6in2BG6.js";
+import { u as $ } from "./useDetectMobile-Bkvj0VMa.js";
+import w from "./Icon.js";
+import S from "./IconButton.js";
+import E from "./Button.js";
+import { s as P } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as z } from "./consts-BuFChS64.js";
+const I = ({
+  title: t,
   description: a,
-  questionText: d,
-  feedbackText: h,
-  impressions: p = !1,
-  onSelectItem: i = () => {
+  questionText: l,
+  feedbackText: _,
+  impressions: d = !1,
+  onSelectItem: p = () => {
   },
-  onImpressed: f = () => {
+  onImpressed: h = () => {
   }
 }) => {
-  const [m, c] = T(!1), [g, u] = T(!1), _ = () => {
-    c((t) => !t), i();
-  }, o = (t, w) => {
-    t == null || t.stopPropagation(), u(!0), f(w);
+  const [f, c] = x(!1), [u, g] = x(!1), m = () => {
+    c((r) => !r), p();
+  }, o = (r, T) => {
+    r == null || r.stopPropagation(), g(!0), h(T);
   };
-  return /* @__PURE__ */ l(
-    R,
+  return /* @__PURE__ */ i(
+    C,
     {
-      className: m ? "expanded" : "",
-      onClick: _,
+      className: f ? "expanded" : "",
+      onClick: m,
       children: [
-        /* @__PURE__ */ l("div", { className: "card__heading", children: [
-          /* @__PURE__ */ r("div", { className: "card__title", children: s }),
-          /* @__PURE__ */ r(
-            N,
+        /* @__PURE__ */ i("div", { className: "card__heading", children: [
+          /* @__PURE__ */ s("div", { className: "card__title", children: t }),
+          /* @__PURE__ */ s(
+            w,
             {
-              icon: m ? " mng-lnc-subtract" : " mng-lnc-add",
+              icon: f ? " mng-lnc-subtract" : " mng-lnc-add",
               sizeInUnits: "1.25rem",
               className: "card__icon"
             }
           )
         ] }),
-        m && /* @__PURE__ */ l(y, { children: [
-          /* @__PURE__ */ r("div", { className: "card__description", children: a }),
-          p && /* @__PURE__ */ r(y, { children: g ? /* @__PURE__ */ l("div", { className: "card__impression feedback", children: [
-            /* @__PURE__ */ r(
-              N,
+        f && /* @__PURE__ */ i(b, { children: [
+          /* @__PURE__ */ s("div", { className: "card__description", children: a }),
+          d && /* @__PURE__ */ s(b, { children: u ? /* @__PURE__ */ i("div", { className: "card__impression feedback", children: [
+            /* @__PURE__ */ s(
+              w,
               {
                 icon: " mng-lnc-checkmark--outline",
                 sizeInUnits: "1.25rem",
                 color: "success"
               }
             ),
-            /* @__PURE__ */ r("div", { className: "imppression__question", children: h })
-          ] }) : /* @__PURE__ */ l("div", { className: "card__impression", children: [
-            /* @__PURE__ */ r("div", { className: "imppression__question", children: d }),
-            /* @__PURE__ */ l("div", { className: "impression__actions", children: [
-              /* @__PURE__ */ r(
-                C,
+            /* @__PURE__ */ s("div", { className: "imppression__question", children: _ })
+          ] }) : /* @__PURE__ */ i("div", { className: "card__impression", children: [
+            /* @__PURE__ */ s("div", { className: "imppression__question", children: l }),
+            /* @__PURE__ */ i("div", { className: "impression__actions", children: [
+              /* @__PURE__ */ s(
+                S,
                 {
                   icon: " mng-lnc-thumbs-up",
                   borderRadius: "curved",
                   btnType: "outline",
-                  onClick: (t) => o(t, !0)
+                  onClick: (r) => o(r, !0)
                 }
               ),
-              /* @__PURE__ */ r(
-                C,
+              /* @__PURE__ */ s(
+                S,
                 {
                   icon: " mng-lnc-thumbs-down",
                   borderRadius: "curved",
                   btnType: "outline",
-                  onClick: (t) => o(t, !1)
+                  onClick: (r) => o(r, !1)
                 }
               )
             ] })
@@ -273,87 +80,87 @@ const b = ({
       ]
     }
   );
-}, M = S(
+}, k = N(
   ({
-    items: s = [],
+    items: t = [],
     questionText: a,
-    feedbackText: d,
-    showMoreText: h,
-    impressions: p = !1,
-    onSelectItem: i = () => {
+    feedbackText: l,
+    showMoreText: _,
+    impressions: d = !1,
+    onSelectItem: p = () => {
     },
-    onImpressed: f = () => {
+    onImpressed: h = () => {
     }
-  }, m) => {
-    const c = E(), [g, u] = T(!1), _ = () => {
-      u((t) => !t);
-    }, o = $(() => {
+  }, f) => {
+    const c = $(), [u, g] = x(!1), m = () => {
+      g((r) => !r);
+    }, o = q(() => {
       if (c)
-        return s == null ? void 0 : s.map((e, v) => /* @__PURE__ */ r(
-          b,
+        return t == null ? void 0 : t.map((e, v) => /* @__PURE__ */ s(
+          I,
           {
             title: e == null ? void 0 : e.title,
             description: e == null ? void 0 : e.description,
             questionText: a,
-            feedbackText: d,
-            impressions: p,
-            onSelectItem: () => i(e),
-            onImpressed: (x) => f(e, x)
+            feedbackText: l,
+            impressions: d,
+            onSelectItem: () => p(e),
+            onImpressed: (y) => h(e, y)
           },
           `faq-section-item__${v + 1}`
         ));
-      const t = [], w = [];
-      return s == null || s.forEach((e, v) => {
-        v % 2 === 0 ? t.push(
-          /* @__PURE__ */ r(
-            b,
+      const r = [], T = [];
+      return t == null || t.forEach((e, v) => {
+        v % 2 === 0 ? r.push(
+          /* @__PURE__ */ s(
+            I,
             {
               title: e == null ? void 0 : e.title,
               description: e == null ? void 0 : e.description,
               questionText: a,
-              feedbackText: d,
-              impressions: p,
-              onSelectItem: () => i(e),
-              onImpressed: (x) => f(e, x)
+              feedbackText: l,
+              impressions: d,
+              onSelectItem: () => p(e),
+              onImpressed: (y) => h(e, y)
             },
             `faq-section-item__${v + 1}`
           )
-        ) : w.push(
-          /* @__PURE__ */ r(
-            b,
+        ) : T.push(
+          /* @__PURE__ */ s(
+            I,
             {
               title: e == null ? void 0 : e.title,
               description: e == null ? void 0 : e.description,
               questionText: a,
-              feedbackText: d,
-              impressions: p,
-              onSelectItem: () => i(e),
-              onImpressed: (x) => f(e, x)
+              feedbackText: l,
+              impressions: d,
+              onSelectItem: () => p(e),
+              onImpressed: (y) => h(e, y)
             },
             `faq-section-item__${v + 1}`
           )
         );
-      }), /* @__PURE__ */ l(y, { children: [
-        /* @__PURE__ */ r("div", { className: "section__column", children: t }),
-        /* @__PURE__ */ r("div", { className: "section__column", children: w })
+      }), /* @__PURE__ */ i(b, { children: [
+        /* @__PURE__ */ s("div", { className: "section__column", children: r }),
+        /* @__PURE__ */ s("div", { className: "section__column", children: T })
       ] });
-    }, [s, c]);
-    return /* @__PURE__ */ r(P, { children: c ? g ? o : /* @__PURE__ */ l(y, { children: [
+    }, [t, c]);
+    return /* @__PURE__ */ s(M, { children: c ? u ? o : /* @__PURE__ */ i(b, { children: [
       o == null ? void 0 : o.slice(0, 4),
-      (o == null ? void 0 : o.length) > 4 && /* @__PURE__ */ r(
-        F,
+      (o == null ? void 0 : o.length) > 4 && /* @__PURE__ */ s(
+        E,
         {
-          text: h,
+          text: _,
           btnType: "basic",
           color: "neutral",
           className: "section__show-more",
-          onClick: _
+          onClick: m
         }
       )
     ] }) : o });
   }
 );
-b.propTypes = {
+I.propTypes = {
   title: n.string,
   description: n.string,
   questionText: n.string,
@@ -363,7 +170,7 @@ b.propTypes = {
   onSelectItem: n.func,
   onImpressed: n.func
 };
-M.propTypes = {
+k.propTypes = {
   items: n.array,
   questionText: n.string,
   feedbackText: n.string,
@@ -372,7 +179,7 @@ M.propTypes = {
   onSelectItem: n.func,
   onImpressed: n.func
 };
-const B = k.div`
+const B = P.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -404,7 +211,7 @@ const B = k.div`
     line-height: 1.5rem;
   }
 
-  @media (max-width: ${I + "px"}) {
+  @media (max-width: ${z + "px"}) {
     & .section__title {
       font-size: 1rem;
       font-weight: 500;
@@ -418,56 +225,56 @@ const B = k.div`
       letter-spacing: 0.25px;
     }
   }
-`, U = S(
+`, R = N(
   ({
-    title: s,
+    title: t,
     description: a,
-    questionText: d = "What do you think about this answer?",
-    feedbackText: h = "Thank you for feedback!",
-    showMoreText: p = "Show more",
-    allTagText: i = "All",
-    impressions: f = !1,
-    tags: m = [],
+    questionText: l = "What do you think about this answer?",
+    feedbackText: _ = "Thank you for feedback!",
+    showMoreText: d = "Show more",
+    allTagText: p = "All",
+    impressions: h = !1,
+    tags: f = [],
     items: c = [],
-    onSelectItem: g = () => {
+    onSelectItem: u = () => {
     },
-    onImpressed: u = () => {
+    onImpressed: g = () => {
     }
-  }, _) => {
-    const [o, t] = T(null);
-    return /* @__PURE__ */ l(B, { ref: _, children: [
-      /* @__PURE__ */ l("div", { className: "section__heading", children: [
-        s && /* @__PURE__ */ r("div", { className: "section__title", children: s }),
-        a && /* @__PURE__ */ r("div", { className: "section__description", children: a })
+  }, m) => {
+    const [o, r] = x(null);
+    return /* @__PURE__ */ i(B, { ref: m, children: [
+      /* @__PURE__ */ i("div", { className: "section__heading", children: [
+        t && /* @__PURE__ */ s("div", { className: "section__title", children: t }),
+        a && /* @__PURE__ */ s("div", { className: "section__description", children: a })
       ] }),
-      /* @__PURE__ */ r(
-        q,
+      /* @__PURE__ */ s(
+        F,
         {
-          tags: m,
-          allTagText: i,
+          tags: f,
+          allTagText: p,
           selectedTagCode: o,
           onSelectTag: (e) => {
-            t(e == null ? void 0 : e.code);
+            r(e == null ? void 0 : e.code);
           }
         }
       ),
-      /* @__PURE__ */ r(
-        M,
+      /* @__PURE__ */ s(
+        k,
         {
           items: o === null ? c : c == null ? void 0 : c.filter((e) => (e == null ? void 0 : e.tagCode) === o),
-          questionText: d,
-          feedbackText: h,
-          showMoreText: p,
-          impressions: f,
-          onSelectItem: g,
-          onImpressed: u
+          questionText: l,
+          feedbackText: _,
+          showMoreText: d,
+          impressions: h,
+          onSelectItem: u,
+          onImpressed: g
         },
         `faq-section-items__${o}`
       )
     ] });
   }
 );
-U.propTypes = {
+R.propTypes = {
   title: n.string,
   description: n.string,
   tags: n.array,
@@ -481,5 +288,5 @@ U.propTypes = {
   onImpressed: n.func
 };
 export {
-  U as default
+  R as default
 };