@lanaco/lnc-react-ui 4.0.32 → 4.0.34

package/dist/QuizSection.js

@@ -0,0 +1,697 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { forwardRef as T, useState as b, useRef as D, useEffect as q } from "react";
+import { p as ee, l as B, q as re } from "./utils-CqvISfv9.js";
+import R from "./Button.js";
+import { n as Q } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { M as S, C as M, a as L } from "./consts-C1uHV4xc.js";
+import F from "./Icon.js";
+import te from "./ProgressBar.js";
+const ae = Q.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 2rem;
+  flex: 1 0 0;
+
+  & .wrapper__content {
+    display: flex;
+    flex-direction: column;
+
+    & .wrapper__title {
+      color: var(--gray-950, #14161a);
+      font-size: 1.75rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 2.25rem;
+      letter-spacing: -0.59px;
+    }
+
+    & .wrapper__description {
+      color: var(--gray-950, #14161a);
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.5rem;
+      letter-spacing: -0.18px;
+    }
+  }
+
+  & .wrapper__action {
+    background: var(--gray-950, #14161a);
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.25rem;
+    letter-spacing: -0.09px;
+    padding: 0.625rem 0.75rem;
+
+    &:hover {
+      color: var(--white, #fff);
+      background: var(---gray-600, #676e79);
+    }
+
+    &:focus {
+      outline: none;
+      background: var(--gray-950, #14161a);
+    }
+  }
+
+  @media (max-width: ${S + "px"}) {
+    & .wrapper__title {
+      font-size: 1.375rem;
+      line-height: 1.75rem;
+    }
+
+    & .wrapper__description {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+  }
+`, ie = Q.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.5rem;
+  align-self: stretch;
+
+  & .wrapper__headline {
+    display: flex;
+    align-items: flex-start;
+    justify-items: space-between;
+    gap: 32px;
+    width: 100%;
+
+    & .wrapper__question-no {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      gap: 0.75rem;
+      width: 100%;
+
+      & .question-no__text {
+        color: var(--gray-950, #14161a);
+        font-size: 1.375rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1.75rem;
+      }
+
+      & .question-no__progress-bar {
+        height: 0.25rem;
+        & > div {
+          background: var(--yellow-600, #d97706);
+        }
+      }
+    }
+
+    & .wrapper__timer {
+      position: relative;
+      width: 3.75rem;
+      height: 3.75rem;
+      background-color: #f0f0f0;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      & .timer__display {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 10;
+
+        & .timer__text {
+          color: var(--red-600, #e11d48);
+          font-size: 0.75rem;
+          font-style: normal;
+          font-weight: 500;
+          line-height: 1rem;
+          letter-spacing: 0.5px;
+        }
+      }
+    }
+  }
+
+  & .wrapper__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2.5rem;
+    width: 100%;
+
+    & .wrapper__item {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1.25rem;
+      align-self: stretch;
+
+      & .wrapper__text {
+        color: var(--gray-950, #14161a);
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1.5rem;
+        letter-spacing: 0.1px;
+      }
+
+      & .wrapper__answers {
+        display: flex;
+        align-items: flex-start;
+        gap: 0.75rem;
+        align-self: stretch;
+
+        & .wrapper__answer {
+          display: flex;
+          padding: 1rem 0.75rem;
+          align-items: flex-start;
+          justify-content: space-between;
+          border-radius: 0.75rem;
+          border: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
+          color: var(--gray-950, #14161a);
+          font-size: 0.875rem;
+          font-style: normal;
+          font-weight: 500;
+          line-height: 1.25rem;
+          letter-spacing: -0.09px;
+          width: 100%;
+
+          &:hover {
+            cursor: pointer;
+          }
+
+          &.active {
+            border: 2px solid var(--yellow-600, #d97706);
+          }
+
+          & .wrapper__icon {
+            color: var(--yellow-600, #d97706);
+          }
+        }
+      }
+    }
+
+    & .wrapper__actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 0.5rem;
+      align-items: center;
+      align-self: stretch;
+      width: 100%;
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.25rem;
+      letter-spacing: -0.09px;
+
+      & .wrapper__action {
+        padding: 0.625rem 0.75rem;
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 1.25rem;
+        letter-spacing: -0.09px;
+        min-width: 5rem;
+
+        &.action__give-up {
+          background: transparent;
+          color: var(--gray-950, #14161a);
+
+          &:hover {
+            background: var(--neutral-9504, rgba(20, 22, 26, 0.12));
+          }
+
+          &:focus {
+            outline: none;
+            background: transparent;
+          }
+        }
+
+        &.action__next {
+          background: var(--gray-950, #14161a);
+
+          &:hover {
+            background: var(---gray-600, #676e79);
+          }
+
+          &:focus {
+            outline: none;
+            background: var(--gray-950, #14161a);
+          }
+
+          &:disabled {
+            color: var(--white, #fff);
+            background: var(--neutral-9504, rgba(20, 22, 26, 0.12));
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: ${S + "px"}) {
+    & .wrapper__content {
+      & .wrapper__item {
+        & .wrapper__answers {
+          flex-direction: column;
+        }
+      }
+    }
+  }
+`, ne = Q.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.5rem;
+
+  & .wrapper__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    align-self: stretch;
+
+    & .wrapper__info {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.25rem;
+      align-self: stretch;
+      color: var(--gray-950, #14161a);
+
+      align-items: center;
+
+      & .wrapper__title {
+        font-size: 1.75rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 2.25rem;
+      }
+
+      & .wrapper__description {
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 1.5rem;
+      }
+    }
+  }
+
+  & .wrapper__actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.25rem;
+    letter-spacing: -0.09px;
+
+    & .wrapper__action {
+      padding: 0.625rem 0.75rem;
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.25rem;
+      letter-spacing: -0.09px;
+      min-width: 22rem;
+      width: 100%;
+
+      &.action__end-quiz {
+        background: transparent;
+        color: var(--gray-950, #14161a);
+
+        &:hover {
+          background: var(--neutral-9504, rgba(20, 22, 26, 0.12));
+        }
+
+        &:focus {
+          outline: none;
+          background: transparent;
+        }
+      }
+
+      &.action__continue {
+        background: var(--gray-950, #14161a);
+
+        &:hover {
+          background: var(---gray-600, #676e79);
+        }
+
+        &:focus {
+          outline: none;
+          background: var(--gray-950, #14161a);
+        }
+      }
+    }
+  }
+
+  @media (max-width: ${S + "px"}) {
+    width: 100%;
+
+    & .wrapper__actions {
+      & .wrapper__action {
+        width: 100%;
+        min-width: 100%;
+      }
+    }
+  }
+`, le = T(
+  ({
+    title: s,
+    description: c,
+    startQuizText: d = "Start quiz",
+    onStartQuiz: _ = () => {
+    }
+  }, o) => /* @__PURE__ */ a(ae, { children: [
+    /* @__PURE__ */ a("div", { className: "wrapper__content", children: [
+      /* @__PURE__ */ e("div", { className: "wrapper__title", children: s }),
+      /* @__PURE__ */ e("div", { className: "wrapper__description", children: c })
+    ] }),
+    /* @__PURE__ */ e(
+      R,
+      {
+        text: d,
+        size: "medium",
+        className: "wrapper__action",
+        onClick: _
+      }
+    )
+  ] })
+), ce = T(
+  ({
+    questionNoText: s,
+    questionNo: c,
+    totalQuestions: d,
+    text: _,
+    answers: o,
+    selectedAnswer: m,
+    secondsPerQuestion: r,
+    nextText: E = "Next",
+    giveUpText: C = "Give up",
+    nextDisabled: U = !0,
+    onSelectAnswer: Z = () => {
+    },
+    onGiveUp: $ = () => {
+    },
+    onNext: W = () => {
+    }
+  }, O) => {
+    const [f, k] = b(r), [h, I] = b(!0), u = D(null);
+    q(() => (h && f > 0 && (u.current = setInterval(() => {
+      k((i) => i > 0 ? i - 1 : 0);
+    }, 1e3)), () => clearInterval(u.current)), [h, f]);
+    const z = f > 0 ? f / r * L : 0, w = (i) => (m == null ? void 0 : m.uuid) === i;
+    return /* @__PURE__ */ a(ie, { children: [
+      /* @__PURE__ */ a("div", { className: "wrapper__headline", children: [
+        /* @__PURE__ */ a("div", { className: "wrapper__question-no", children: [
+          /* @__PURE__ */ e("div", { className: "question-no__text", children: `${s} ${c} / ${d}` }),
+          /* @__PURE__ */ e(
+            te,
+            {
+              progressPercentage: c / d * 100,
+              className: "question-no__progress-bar"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a("div", { className: "wrapper__timer", children: [
+          /* @__PURE__ */ a("svg", { className: "timer__ring", width: "60", height: "60", children: [
+            /* @__PURE__ */ e(
+              "circle",
+              {
+                className: "ring__progres-background",
+                cx: "30",
+                cy: "30",
+                r: M,
+                stroke: "#e0e0e0",
+                strokeWidth: "4",
+                fill: "transparent"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "circle",
+              {
+                className: "ring__progres",
+                cx: "30",
+                cy: "30",
+                r: M,
+                stroke: "#d97706",
+                strokeWidth: "4",
+                fill: "transparent",
+                strokeLinecap: "round",
+                transform: "rotate(-90 30 30)",
+                strokeDasharray: L,
+                strokeDashoffset: L - z
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("div", { className: "timer__display", children: /* @__PURE__ */ e("span", { className: "timer__text", children: ee(f) }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "wrapper__content", children: [
+        /* @__PURE__ */ a("div", { className: "wrapper__item", children: [
+          /* @__PURE__ */ e("div", { className: "wrapper__text", children: _ }),
+          /* @__PURE__ */ e("div", { className: "wrapper__answers", children: o && (o == null ? void 0 : o.map((i, x) => /* @__PURE__ */ a(
+            "div",
+            {
+              className: `wrapper__answer ${w(i == null ? void 0 : i.uuid) ? "active" : ""}`,
+              onClick: () => Z(i),
+              children: [
+                `${String.fromCharCode(65 + x)}: ${i == null ? void 0 : i.label}`,
+                w(i == null ? void 0 : i.uuid) && /* @__PURE__ */ e(
+                  F,
+                  {
+                    icon: " mng-lnc-checkmark--filled",
+                    sizeInUnits: "1.25rem",
+                    className: "wrapper__icon"
+                  }
+                )
+              ]
+            },
+            `quiz-answer__${x + 1}`
+          ))) })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "wrapper__actions", children: [
+          /* @__PURE__ */ e(
+            R,
+            {
+              text: C,
+              borderRadius: "curved",
+              size: "medium",
+              className: "wrapper__action action__give-up",
+              onClick: $
+            }
+          ),
+          /* @__PURE__ */ e(
+            R,
+            {
+              text: E,
+              borderRadius: "curved",
+              size: "medium",
+              className: "wrapper__action action__next",
+              disabled: U,
+              onClick: W
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+), oe = T(
+  ({
+    title: s,
+    description: c,
+    continueText: d = "Continue",
+    endQuizText: _ = "End quiz",
+    onContinue: o = () => {
+    },
+    onEndQuiz: m = () => {
+    }
+  }, r) => /* @__PURE__ */ a(ne, { children: [
+    /* @__PURE__ */ a("div", { className: "wrapper__content", children: [
+      /* @__PURE__ */ e(
+        F,
+        {
+          icon: " mng-lnc-checkmark--outline",
+          color: "success",
+          sizeInUnits: "4rem",
+          className: "wrapper__icon"
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: "wrapper__info", children: [
+        s && /* @__PURE__ */ e("div", { className: "wrapper__title", children: s }),
+        c && /* @__PURE__ */ e("div", { className: "wrapper__description", children: c })
+      ] })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "wrapper__actions", children: [
+      /* @__PURE__ */ e(
+        R,
+        {
+          text: d,
+          borderRadius: "curved",
+          size: "medium",
+          className: "wrapper__action action__continue",
+          onClick: o
+        }
+      ),
+      /* @__PURE__ */ e(
+        R,
+        {
+          text: _,
+          borderRadius: "curved",
+          size: "medium",
+          className: "wrapper__action action__end-quiz",
+          onClick: m
+        }
+      )
+    ] })
+  ] })
+), l = {
+  START_QUIZ: 0,
+  QUIZ: 1,
+  CORRECT_ANSWER: 2
+}, pe = Q.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 2rem;
+
+  & .wrapper__outlet {
+    display: flex;
+    padding: 2rem 3rem;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    align-self: stretch;
+  }
+
+  & .wrapper__image {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1 / 1;
+    max-width: 22.5rem;
+  }
+
+  @media (max-width: ${S + "px"}) {
+    & .wrapper__outlet {
+      padding: 0;
+    }
+
+    & .wrapper__image {
+      display: none;
+    }
+  }
+`, we = T(
+  ({
+    welcomeTitle: s,
+    welcomeDescription: c,
+    endTitle: d,
+    endDescription: _,
+    image: o,
+    imageComponent: m,
+    questions: r,
+    secondsPerQuestion: E,
+    numOfCredits: C,
+    startQuizText: U = "Start quiz",
+    nextText: Z = "Next",
+    giveUpText: $ = "Give up",
+    questionNoText: W = "Question",
+    continueText: O = "Continue",
+    endQuizText: f = "End quiz",
+    onStartQuiz: k = () => {
+    },
+    onSelectAnswer: h = () => {
+    },
+    onGiveUp: I = () => {
+    },
+    onNext: u = () => {
+    },
+    onContinue: z = () => {
+    },
+    onEndQuiz: w = () => {
+    }
+  }, i) => {
+    const [x, g] = b(l.START_QUIZ), [p, v] = b(1), [t, j] = b(null), [y, N] = b(null), P = D([]), X = D(0), G = () => {
+      g(l.QUIZ), j(
+        r == null ? void 0 : r.find((n) => (n == null ? void 0 : n.questionNo) === p)
+      ), k == null || k();
+    }, H = (n) => {
+      N(n), h == null || h();
+    }, J = () => {
+      g(l.START_QUIZ), v(1), N(null), I == null || I();
+    }, K = () => {
+      let n = (y == null ? void 0 : y.uuid) === (t == null ? void 0 : t.correctAnswer);
+      n ? (g(l.CORRECT_ANSWER), X.current += C || (t == null ? void 0 : t.numOfCredits)) : p === (r == null ? void 0 : r.length) ? (g(l.START_QUIZ), v(1), N(null)) : (v(p + 1), j(
+        r == null ? void 0 : r.find((A) => (A == null ? void 0 : A.questionNo) === p + 1)
+      ), N(null)), P.current = [
+        ...P.current,
+        {
+          question: t,
+          selectedAnswer: y,
+          isCorrect: n
+        }
+      ], u == null || u();
+    }, V = () => {
+      p === (r == null ? void 0 : r.length) ? (g(l.START_QUIZ), v(1)) : (g(l.QUIZ), v(p + 1), j(
+        r == null ? void 0 : r.find((n) => (n == null ? void 0 : n.questionNo) === p + 1)
+      )), N(null), z == null || z();
+    }, Y = () => {
+      g(l.START_QUIZ), v(1), N(null), w == null || w();
+    };
+    return /* @__PURE__ */ a(pe, { children: [
+      /* @__PURE__ */ a("div", { className: "wrapper__outlet", children: [
+        x === l.START_QUIZ && /* @__PURE__ */ e(
+          le,
+          {
+            title: s,
+            description: c,
+            startQuizText: U,
+            onStartQuiz: G
+          }
+        ),
+        x === l.QUIZ && t && /* @__PURE__ */ e(
+          ce,
+          {
+            questionNoText: W,
+            questionNo: p,
+            totalQuestions: (r == null ? void 0 : r.length) || 0,
+            text: t == null ? void 0 : t.text,
+            answers: t == null ? void 0 : t.answers,
+            secondsPerQuestion: E || (t == null ? void 0 : t.secondsPerQuestion),
+            selectedAnswer: y,
+            nextText: Z,
+            giveUpText: $,
+            nextDisabled: !B(y),
+            onSelectAnswer: H,
+            onGiveUp: J,
+            onNext: K
+          },
+          `quiz-question__${p}`
+        ),
+        x === l.CORRECT_ANSWER && /* @__PURE__ */ e(
+          oe,
+          {
+            title: d,
+            description: re(
+              _,
+              C || (t == null ? void 0 : t.numOfCredits)
+            ),
+            continueText: O,
+            endQuizText: f,
+            onContinue: V,
+            onEndQuiz: Y
+          }
+        )
+      ] }),
+      B(m) ? m : /* @__PURE__ */ e("img", { src: o, className: "wrapper__image" })
+    ] });
+  }
+);
+export {
+  we as default
+};

package/dist/RadioInput.cjs

@@ -1,4 +1,4 @@
-"use strict";const i=require("react/jsx-runtime"),h=require("react"),m=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),r=require("./index-BPVoEhTF.cjs"),o=require("./utils-CE6bljYe.cjs"),O=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),j=e=>e=="left"?"row-reverse":"row",q=m.newStyled.label`
+"use strict";const i=require("react/jsx-runtime"),h=require("react"),m=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),r=require("./index-BPVoEhTF.cjs"),o=require("./utils-C0YSTwcn.cjs"),O=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),j=e=>e=="left"?"row-reverse":"row",q=m.newStyled.label`
   min-height: ${e=>o.getSizeValueWithUnits(e.theme,e.size)};
   max-height: ${e=>o.getSizeValueWithUnits(e.theme,e.size)};
   width: 100%;

package/dist/RadioInput.js

@@ -2,7 +2,7 @@ import { jsxs as b, jsx as n } from "react/jsx-runtime";
 import { forwardRef as P, useState as j } from "react";
 import { n as g } from "./emotion-styled.browser.esm-BiK8DcgW.js";
 import { P as i } from "./index-S5Cd7WrG.js";
-import { d as f, g as N, e as T, a as t } from "./utils-DtEdJZWa.js";
+import { d as f, g as N, e as T, a as t } from "./utils-CqvISfv9.js";
 import { u as F } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
 const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
   min-height: ${(e) => f(e.theme, e.size)};

package/dist/RangeSlider.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),y=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),n=require("./index-BPVoEhTF.cjs"),o=require("react"),a=require("./utils-CE6bljYe.cjs"),_=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),F=require("./useUpdateEffect-BtMgpgIV.cjs"),L=({theme:e,size:i})=>{var c=a.getSizeValueWithUnits(e,i);return`
+"use strict";const t=require("react/jsx-runtime"),y=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),n=require("./index-BPVoEhTF.cjs"),o=require("react"),a=require("./utils-C0YSTwcn.cjs"),_=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),F=require("./useUpdateEffect-BtMgpgIV.cjs"),L=({theme:e,size:i})=>{var c=a.getSizeValueWithUnits(e,i);return`
     min-height: ${c};
     max-height: ${c};
   `},b={small:"0.875rem",medium:"1.125rem",large:"1.375rem"},W=y.newStyled.div`