@lanaco/lnc-react-ui 4.0.112 → 4.0.113

package/dist/FaqSection.js

@@ -0,0 +1,481 @@
+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 { P as e } 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: o = [], selectedTagCode: a = null, onSelectTag: d = () => {
+  } }, u) => /* @__PURE__ */ r(j, { children: o == null ? void 0 : o.map((t, p) => /* @__PURE__ */ r(
+    z,
+    {
+      label: t == null ? void 0 : t.name,
+      borderRadius: "curved",
+      color: "neutral",
+      className: `tags__item ${a === (t == null ? void 0 : t.code) ? "active" : ""}`,
+      onClick: () => {
+        d(t);
+      }
+    },
+    `faq-section-tag__${p + 1}`
+  )) })
+);
+q.propTypes = {
+  tags: e.array,
+  onSelectTag: e.func
+};
+const b = ({
+  title: o,
+  description: a,
+  questionText: d,
+  feedbackText: u,
+  impressions: t = !1,
+  onSelectItem: p = () => {
+  },
+  onImpressed: m = () => {
+  }
+}) => {
+  const [f, g] = T(!1), [_, v] = T(!1), h = () => {
+    g((i) => !i), p();
+  }, s = (i, c) => {
+    i == null || i.stopPropagation(), v(!0), m(c);
+  };
+  return /* @__PURE__ */ l(
+    R,
+    {
+      className: f ? "expanded" : "",
+      onClick: h,
+      children: [
+        /* @__PURE__ */ l("div", { className: "card__heading", children: [
+          /* @__PURE__ */ r("div", { className: "card__title", children: o }),
+          /* @__PURE__ */ r(
+            N,
+            {
+              icon: f ? " mng-lnc-subtract" : " mng-lnc-add",
+              sizeInUnits: "1.25rem",
+              className: "card__icon"
+            }
+          )
+        ] }),
+        f && /* @__PURE__ */ l(y, { children: [
+          /* @__PURE__ */ r("div", { className: "card__description", children: a }),
+          t && /* @__PURE__ */ r(y, { children: _ ? /* @__PURE__ */ l("div", { className: "card__impression feedback", children: [
+            /* @__PURE__ */ r(
+              N,
+              {
+                icon: " mng-lnc-checkmark--outline",
+                sizeInUnits: "1.25rem",
+                color: "success"
+              }
+            ),
+            /* @__PURE__ */ r("div", { className: "imppression__question", children: u })
+          ] }) : /* @__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,
+                {
+                  icon: " mng-lnc-thumbs-up",
+                  borderRadius: "curved",
+                  btnType: "outline",
+                  onClick: (i) => s(i, !0)
+                }
+              ),
+              /* @__PURE__ */ r(
+                C,
+                {
+                  icon: " mng-lnc-thumbs-down",
+                  borderRadius: "curved",
+                  btnType: "outline",
+                  onClick: (i) => s(i, !1)
+                }
+              )
+            ] })
+          ] }) })
+        ] })
+      ]
+    }
+  );
+}, M = S(
+  ({
+    items: o = [],
+    questionText: a,
+    feedbackText: d,
+    showMoreText: u,
+    impressions: t = !1,
+    onSelectItem: p = () => {
+    },
+    onImpressed: m = () => {
+    }
+  }, f) => {
+    const g = E(), [_, v] = T(!1), h = () => {
+      v((i) => !i);
+    }, s = $(() => {
+      if (g)
+        return o == null ? void 0 : o.map((n, w) => /* @__PURE__ */ r(
+          b,
+          {
+            title: n == null ? void 0 : n.title,
+            description: n == null ? void 0 : n.description,
+            questionText: a,
+            feedbackText: d,
+            impressions: t,
+            onSelectItem: () => p(n),
+            onImpressed: (x) => m(n, x)
+          },
+          `faq-section-item__${w + 1}`
+        ));
+      const i = [], c = [];
+      return o == null || o.forEach((n, w) => {
+        w % 2 === 0 ? i.push(
+          /* @__PURE__ */ r(
+            b,
+            {
+              title: n == null ? void 0 : n.title,
+              description: n == null ? void 0 : n.description,
+              questionText: a,
+              feedbackText: d,
+              impressions: t,
+              onSelectItem: () => p(n),
+              onImpressed: (x) => m(n, x)
+            },
+            `faq-section-item__${w + 1}`
+          )
+        ) : c.push(
+          /* @__PURE__ */ r(
+            b,
+            {
+              title: n == null ? void 0 : n.title,
+              description: n == null ? void 0 : n.description,
+              questionText: a,
+              feedbackText: d,
+              impressions: t,
+              onSelectItem: () => p(n),
+              onImpressed: (x) => m(n, x)
+            },
+            `faq-section-item__${w + 1}`
+          )
+        );
+      }), /* @__PURE__ */ l(y, { children: [
+        /* @__PURE__ */ r("div", { className: "section__column", children: i }),
+        /* @__PURE__ */ r("div", { className: "section__column", children: c })
+      ] });
+    }, [o, g]);
+    return /* @__PURE__ */ r(P, { children: g ? _ ? s : /* @__PURE__ */ l(y, { children: [
+      s == null ? void 0 : s.slice(0, 4),
+      (s == null ? void 0 : s.length) > 4 && /* @__PURE__ */ r(
+        F,
+        {
+          text: u,
+          btnType: "basic",
+          color: "neutral",
+          className: "section__show-more",
+          onClick: h
+        }
+      )
+    ] }) : s });
+  }
+);
+b.propTypes = {
+  title: e.string,
+  description: e.string,
+  questionText: e.string,
+  feedbackText: e.string,
+  showMoreText: e.string,
+  impressions: e.bool,
+  onSelectItem: e.func,
+  onImpressed: e.func
+};
+M.propTypes = {
+  items: e.array,
+  questionText: e.string,
+  feedbackText: e.string,
+  showMoreText: e.string,
+  impressions: e.bool,
+  onSelectItem: e.func,
+  onImpressed: e.func
+};
+const B = k.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+
+  & .section__heading {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    text-align: center;
+    width: 100%;
+  }
+
+  & .section__title {
+    color: var(--navy-900, #0c1520);
+    text-align: center;
+    font-size: 1.5rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 2rem;
+  }
+
+  & .section__description {
+    color: var(--navy-500, #7a8594);
+    text-align: center;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.5rem;
+  }
+
+  @media (max-width: ${I + "px"}) {
+    & .section__title {
+      font-size: 1rem;
+      font-weight: 500;
+      line-height: 1.5rem;
+    }
+
+    & .section__description {
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 1.25rem;
+      letter-spacing: 0.25px;
+    }
+  }
+`, U = S(
+  ({
+    title: o,
+    description: a,
+    questionText: d,
+    feedbackText: u,
+    showMoreText: t,
+    impressions: p = !1,
+    tags: m = [],
+    items: f = [],
+    onSelectItem: g = () => {
+    },
+    onImpressed: _ = () => {
+    }
+  }, v) => {
+    const [h, s] = T(null);
+    return /* @__PURE__ */ l(B, { ref: v, children: [
+      /* @__PURE__ */ l("div", { className: "section__heading", children: [
+        o && /* @__PURE__ */ r("div", { className: "section__title", children: o }),
+        a && /* @__PURE__ */ r("div", { className: "section__description", children: a })
+      ] }),
+      /* @__PURE__ */ r(
+        q,
+        {
+          tags: m,
+          selectedTagCode: h,
+          onSelectTag: (c) => {
+            s(c == null ? void 0 : c.code);
+          }
+        }
+      ),
+      /* @__PURE__ */ r(
+        M,
+        {
+          items: h === null ? f : f == null ? void 0 : f.filter((c) => (c == null ? void 0 : c.tagCode) === h),
+          questionText: d,
+          feedbackText: u,
+          showMoreText: t,
+          impressions: p,
+          onSelectItem: g,
+          onImpressed: _
+        },
+        `faq-section-items__${h}`
+      )
+    ] });
+  }
+);
+U.propTypes = {
+  title: e.string,
+  description: e.string,
+  tags: e.array,
+  items: e.array,
+  questionText: e.string,
+  feedbackText: e.string,
+  showMoreText: e.string,
+  impressions: e.bool,
+  onSelectItem: e.func,
+  onImpressed: e.func
+};
+export {
+  U as default
+};

package/dist/FeedbackSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),l=require("react"),n=require("./utils-CZynEOC_.cjs"),o=require("./Button.cjs"),d=require("./styled-components.browser.esm-CMTEDJ_5.cjs"),f=require("./consts-goSZX3xP.cjs"),m=d.qe.div`
+"use strict";const e=require("react/jsx-runtime"),l=require("react"),n=require("./utils-CZynEOC_.cjs"),o=require("./Button.cjs"),d=require("./styled-components.browser.esm-CvykQBGY.cjs"),f=require("./consts-goSZX3xP.cjs"),m=d.qe.div`
   display: flex;
   flex-direction: column;
   align-items: center;

package/dist/FeedbackSection.js

@@ -2,7 +2,7 @@ import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
 import { k as t } from "./utils-BbgAIA9N.js";
 import d from "./Button.js";
-import { q as f } from "./styled-components.browser.esm-C9FYANiy.js";
+import { q as f } from "./styled-components.browser.esm-D-n22PJk.js";
 import { M as m } from "./consts-BuFChS64.js";
 const g = f.div`
   display: flex;

package/dist/FileInput.cjs

@@ -1,4 +1,4 @@
-"use strict";const b=require("react/jsx-runtime"),m=require("react"),g=require("./emotion-styled.browser.esm-BtEseadx.cjs"),o=require("./index-BPVoEhTF.cjs"),t=require("./utils-CZynEOC_.cjs"),j=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),q=g.styled.label`
+"use strict";const b=require("react/jsx-runtime"),m=require("react"),g=require("./emotion-styled.browser.esm-BtEseadx.cjs"),o=require("./index-BpbMKBf_.cjs"),t=require("./utils-CZynEOC_.cjs"),j=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),q=g.styled.label`
   display: inline-flex;
   box-sizing: border-box;
   width: 100%;

package/dist/FileInput.js

@@ -1,7 +1,7 @@
 import { jsxs as R, jsx as m } from "react/jsx-runtime";
 import { forwardRef as S, useState as y } from "react";
 import { s as b } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { P as t } from "./index-S5Cd7WrG.js";
+import { P as t } from "./index-CblbdqjE.js";
 import { d as x, b as a, e as V, c as $, h as I } from "./utils-BbgAIA9N.js";
 import { u as B } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const D = b.label`