@lanaco/lnc-react-ui 4.0.32 → 4.0.34

package/dist/OverlayGeneralCardsSection.js

@@ -0,0 +1,183 @@
+import { jsx as r, Fragment as _, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import f from "./Button.js";
+import { useTheme as x } from "./ThemeProvider.js";
+import { n as m } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { m as i, t as s } from "./utils-CqvISfv9.js";
+import { M as h } from "./consts-C1uHV4xc.js";
+import { R as u } from "./style-BGQ1B_dp.js";
+const v = m.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 0.75rem;
+  position: relative;
+  max-height: 28.75rem;
+
+  & .wrapper__overlay {
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      border-radius: 0.75rem;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 99%;
+      max-height: 28.75rem;
+      background: ${(t) => t == null ? void 0 : t.overlay};
+    }
+  }
+
+  & .wrapper__image {
+    border-radius: 0.75rem;
+  }
+
+  & .wrapper__image--skeleton {
+    width: 100%;
+    border-radius: 0.75rem;
+    background-color: ${i("-90deg")};
+  }
+
+  & .wrapper__text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 1rem;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    & .text__title {
+      color: var(--white);
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.5rem;
+      ${s(2)}
+    }
+
+    & .text__description {
+      color: var(--white);
+      font-size: 1.375rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 1.75rem;
+      ${s(2)}
+    }
+
+    & .text__title--skeleton {
+      background-color: ${i("-90deg")};
+      height: 1rem;
+      width: 9rem;
+    }
+
+    & .text__description--skeleton {
+      background-color: ${i("-90deg")};
+      height: 1rem;
+      width: 12rem;
+    }
+  }
+
+  & .text__action {
+    background: var(--white);
+    color: var(--black);
+    position: absolute;
+    bottom: 1rem;
+    left: 1rem;
+
+    &:hover {
+      background: var(--primary-500, #f59e0b);
+      color: var(--white);
+    }
+  }
+
+  & .text__action--skeleton {
+    background-color: ${i("-90deg")};
+    height: 2rem;
+    width: 9rem;
+    position: absolute;
+    bottom: 1rem;
+    left: 1rem;
+  }
+
+  @media (max-width: ${h + "px"}) {
+    max-height: 100%;
+
+    & .wrapper__overlay {
+      &::after {
+        max-height: 100%;
+      }
+    }
+
+    & .wrapper__text {
+      top: 1rem;
+      left: 1rem;
+    }
+
+    & .text__action {
+      bottom: 2rem;
+      left: 2rem;
+    }
+  }
+`, w = p(
+  ({
+    title: t,
+    image: a,
+    overlay: l,
+    description: n,
+    actionText: c,
+    actionLink: e,
+    handleClick: o = () => {
+    }
+  }, y) => {
+    const { theme: g } = x();
+    return /* @__PURE__ */ r(_, { children: /* @__PURE__ */ d(v, { theme: g, overlay: l, onClick: o, children: [
+      /* @__PURE__ */ r("div", { className: "wrapper__overlay", children: /* @__PURE__ */ r("img", { src: a, className: "wrapper__image" }) }),
+      /* @__PURE__ */ d("div", { className: "wrapper__text", children: [
+        /* @__PURE__ */ r("div", { className: "text__title", children: t }),
+        /* @__PURE__ */ r("div", { className: "text__description", children: n })
+      ] }),
+      /* @__PURE__ */ r(
+        f,
+        {
+          text: c,
+          onClick: o,
+          className: "text__action"
+        }
+      )
+    ] }) });
+  }
+), b = m.div`
+  display: grid;
+  grid-template-columns: ${(t) => `repeat(${t.limit}, 1fr)`};
+  gap: 1.25rem;
+  justify-items: center;
+
+  @media (max-width: ${h + "px"}) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+`, j = p(
+  ({ title: t, items: a, limit: l = 2, onSelectCard: n = () => {
+  } }, c) => /* @__PURE__ */ d(u, { children: [
+    /* @__PURE__ */ r("div", { className: "regular-title center", children: /* @__PURE__ */ r("div", { className: "regular-title-text", children: /* @__PURE__ */ r("span", { children: t }) }) }),
+    /* @__PURE__ */ r(b, { limit: l, children: a && (a == null ? void 0 : a.map((e, o) => /* @__PURE__ */ r(
+      w,
+      {
+        title: e == null ? void 0 : e.title,
+        image: e == null ? void 0 : e.image,
+        description: e == null ? void 0 : e.description,
+        actionText: e == null ? void 0 : e.actionText,
+        overlay: e == null ? void 0 : e.overlay,
+        handleClick: () => n(e == null ? void 0 : e.uuid)
+      },
+      `landing-page-overlay-general-card__${o + 1}`
+    ))) })
+  ] })
+);
+export {
+  j as default
+};

package/dist/PasswordInput.cjs

@@ -1,4 +1,4 @@
-"use strict";const a=require("react/jsx-runtime"),s=require("react"),n=require("./index-BPVoEhTF.cjs"),L=require("./index-DaiUAQVF.cjs"),D=require("./Icon.cjs"),h=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),r=require("./utils-CE6bljYe.cjs"),A=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),G=h.newStyled.div`
+"use strict";const a=require("react/jsx-runtime"),s=require("react"),n=require("./index-BPVoEhTF.cjs"),L=require("./index-DaiUAQVF.cjs"),D=require("./Icon.cjs"),h=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),r=require("./utils-C0YSTwcn.cjs"),A=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),G=h.newStyled.div`
   display: flex;
   align-items: center;
 

package/dist/PasswordInput.js

@@ -4,7 +4,7 @@ import { P as n } from "./index-S5Cd7WrG.js";
 import { d as J } from "./index-CNBqQrtK.js";
 import K from "./Icon.js";
 import { n as m } from "./emotion-styled.browser.esm-BiK8DcgW.js";
-import { d as g, a, b as M, e as Q, h as O, g as X } from "./utils-DtEdJZWa.js";
+import { d as g, a, b as M, e as Q, h as O, g as X } from "./utils-CqvISfv9.js";
 import { u as Y } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
 const Z = m.div`
   display: flex;

package/dist/PopoverContent.cjs

@@ -1,4 +1,4 @@
-"use strict";const n=require("react/jsx-runtime"),c=require("react"),s=require("./floating-ui.react.esm-C4vrBVJU.cjs"),i=require("./index-BPVoEhTF.cjs"),x=require("./PopoverContext.cjs"),h=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),a=require("./utils-CE6bljYe.cjs"),y=require("./motion-Oud-wpUz.cjs"),f=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),P=h.newStyled(y.motion.div)`
+"use strict";const n=require("react/jsx-runtime"),c=require("react"),s=require("./floating-ui.react.esm-C4vrBVJU.cjs"),i=require("./index-BPVoEhTF.cjs"),x=require("./PopoverContext.cjs"),h=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),a=require("./utils-C0YSTwcn.cjs"),y=require("./motion-Oud-wpUz.cjs"),f=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),P=h.newStyled(y.motion.div)`
   font-family: ${e=>{var t,r;return(r=(t=e.theme)==null?void 0:t.typography)==null?void 0:r.fontFamily}};
   animation: fadeIn 0.4s;
   box-shadow: ${e=>a.getComponentPropValue(e.theme,"Popover",e.color,"enabled","boxShadow")};

package/dist/PopoverContent.js

@@ -4,7 +4,7 @@ import { a as f, F as u, b as g } from "./floating-ui.react.esm-72DKnou_.js";
 import { P as a } from "./index-S5Cd7WrG.js";
 import h from "./PopoverContext.js";
 import { n as x } from "./emotion-styled.browser.esm-BiK8DcgW.js";
-import { c as y, b as P, a as v } from "./utils-DtEdJZWa.js";
+import { c as y, b as P, a as v } from "./utils-CqvISfv9.js";
 import { m as w } from "./motion-ecIGZGwI.js";
 import { u as C } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
 const F = x(w.div)`

package/dist/ProductsWithBannerSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const i=require("react/jsx-runtime"),p=require("react"),c=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),g=require("./consts-dNz9tpt4.cjs"),b=require("./useDetectMobile-rBe0FiP2.cjs"),f=require("./style-C3OB0uad.cjs"),a=require("./utils-CE6bljYe.cjs"),j=c.newStyled.div`
+"use strict";const i=require("react/jsx-runtime"),p=require("react"),c=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),g=require("./consts-CtNoHdBj.cjs"),b=require("./useDetectMobile-D6d5LpdL.cjs"),f=require("./style-BEUISPP7.cjs"),a=require("./utils-C0YSTwcn.cjs"),j=c.newStyled.div`
   width: 100%;
   height: 22.5rem;
   min-height: 22.5rem;

package/dist/ProductsWithBannerSection.js

@@ -1,10 +1,10 @@
 import { jsxs as m, jsx as r } from "react/jsx-runtime";
 import { forwardRef as g } from "react";
 import { n as s } from "./emotion-styled.browser.esm-BiK8DcgW.js";
-import { M as f } from "./consts-DNVz1x1I.js";
-import { u as w } from "./useDetectMobile-BookNOsk.js";
-import { R as v } from "./style-Ch-xOasu.js";
-import { t as k, m as h, l as y, k as N } from "./utils-DtEdJZWa.js";
+import { M as f } from "./consts-C1uHV4xc.js";
+import { u as w } from "./useDetectMobile-BC6EGaBc.js";
+import { R as v } from "./style-BGQ1B_dp.js";
+import { t as k, m as h, l as y, k as N } from "./utils-CqvISfv9.js";
 const S = s.div`
   width: 100%;
   height: 22.5rem;

package/dist/ProgressBar.cjs

@@ -1,4 +1,4 @@
-"use strict";const a=require("react/jsx-runtime"),i=require("react"),r=require("./index-BPVoEhTF.cjs"),l=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),o=require("./utils-CE6bljYe.cjs"),P=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),f=l.newStyled.div`
+"use strict";const a=require("react/jsx-runtime"),i=require("react"),r=require("./index-BPVoEhTF.cjs"),l=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),o=require("./utils-C0YSTwcn.cjs"),P=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),f=l.newStyled.div`
   width: 100%;
   position: relative;
   background-color: ${e=>o.getColorRgbaValue(e.theme,"Progress",e.color,"enabled","unfilled")};

package/dist/ProgressBar.js

@@ -2,7 +2,7 @@ import { jsxs as g, jsx as h } from "react/jsx-runtime";
 import { forwardRef as f, isValidElement as P, cloneElement as y } from "react";
 import { P as r } from "./index-S5Cd7WrG.js";
 import { n as t } from "./emotion-styled.browser.esm-BiK8DcgW.js";
-import { a as n, g as x } from "./utils-DtEdJZWa.js";
+import { a as n, g as x } from "./utils-CqvISfv9.js";
 import { u as w } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
 const $ = t.div`
   width: 100%;

package/dist/QuizSection.cjs

@@ -0,0 +1,387 @@
+"use strict";const e=require("react/jsx-runtime"),i=require("react"),z=require("./utils-C0YSTwcn.cjs"),k=require("./Button.cjs"),S=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),p=require("./consts-CtNoHdBj.cjs"),A=require("./Icon.cjs"),H=require("./ProgressBar.cjs"),J=S.newStyled.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: ${p.MOBILE_SIZE_PX+"px"}) {
+    & .wrapper__title {
+      font-size: 1.375rem;
+      line-height: 1.75rem;
+    }
+
+    & .wrapper__description {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+  }
+`,K=S.newStyled.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: ${p.MOBILE_SIZE_PX+"px"}) {
+    & .wrapper__content {
+      & .wrapper__item {
+        & .wrapper__answers {
+          flex-direction: column;
+        }
+      }
+    }
+  }
+`,V=S.newStyled.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: ${p.MOBILE_SIZE_PX+"px"}) {
+    width: 100%;
+
+    & .wrapper__actions {
+      & .wrapper__action {
+        width: 100%;
+        min-width: 100%;
+      }
+    }
+  }
+`,Y=i.forwardRef(({title:d,description:s,startQuizText:m="Start quiz",onStartQuiz:f=()=>{}},c)=>e.jsxs(J,{children:[e.jsxs("div",{className:"wrapper__content",children:[e.jsx("div",{className:"wrapper__title",children:d}),e.jsx("div",{className:"wrapper__description",children:s})]}),e.jsx(k,{text:m,size:"medium",className:"wrapper__action",onClick:f})]})),q=i.forwardRef(({questionNoText:d,questionNo:s,totalQuestions:m,text:f,answers:c,selectedAnswer:_,secondsPerQuestion:r,nextText:E="Next",giveUpText:C="Give up",nextDisabled:T=!0,onSelectAnswer:Q=()=>{},onGiveUp:U=()=>{},onNext:Z=()=>{}},W)=>{const[g,N]=i.useState(r),[x,I]=i.useState(!0),u=i.useRef(null);i.useEffect(()=>(x&&g>0&&(u.current=setInterval(()=>{N(a=>a>0?a-1:0)},1e3)),()=>clearInterval(u.current)),[x,g]);const b=g>0?g/r*p.CIRCLE_CIRCUMFERENCE:0,w=a=>(_==null?void 0:_.uuid)===a;return e.jsxs(K,{children:[e.jsxs("div",{className:"wrapper__headline",children:[e.jsxs("div",{className:"wrapper__question-no",children:[e.jsx("div",{className:"question-no__text",children:`${d} ${s} / ${m}`}),e.jsx(H,{progressPercentage:s/m*100,className:"question-no__progress-bar"})]}),e.jsxs("div",{className:"wrapper__timer",children:[e.jsxs("svg",{className:"timer__ring",width:"60",height:"60",children:[e.jsx("circle",{className:"ring__progres-background",cx:"30",cy:"30",r:p.CIRCLE_RADIUS,stroke:"#e0e0e0",strokeWidth:"4",fill:"transparent"}),e.jsx("circle",{className:"ring__progres",cx:"30",cy:"30",r:p.CIRCLE_RADIUS,stroke:"#d97706",strokeWidth:"4",fill:"transparent",strokeLinecap:"round",transform:"rotate(-90 30 30)",strokeDasharray:p.CIRCLE_CIRCUMFERENCE,strokeDashoffset:p.CIRCLE_CIRCUMFERENCE-b})]}),e.jsx("div",{className:"timer__display",children:e.jsx("span",{className:"timer__text",children:z.formatTimerText(g)})})]})]}),e.jsxs("div",{className:"wrapper__content",children:[e.jsxs("div",{className:"wrapper__item",children:[e.jsx("div",{className:"wrapper__text",children:f}),e.jsx("div",{className:"wrapper__answers",children:c&&(c==null?void 0:c.map((a,v)=>e.jsxs("div",{className:`wrapper__answer ${w(a==null?void 0:a.uuid)?"active":""}`,onClick:()=>Q(a),children:[`${String.fromCharCode(65+v)}: ${a==null?void 0:a.label}`,w(a==null?void 0:a.uuid)&&e.jsx(A,{icon:" mng-lnc-checkmark--filled",sizeInUnits:"1.25rem",className:"wrapper__icon"})]},`quiz-answer__${v+1}`)))})]}),e.jsxs("div",{className:"wrapper__actions",children:[e.jsx(k,{text:C,borderRadius:"curved",size:"medium",className:"wrapper__action action__give-up",onClick:U}),e.jsx(k,{text:E,borderRadius:"curved",size:"medium",className:"wrapper__action action__next",disabled:T,onClick:Z})]})]})]})}),ee=i.forwardRef(({title:d,description:s,continueText:m="Continue",endQuizText:f="End quiz",onContinue:c=()=>{},onEndQuiz:_=()=>{}},r)=>e.jsxs(V,{children:[e.jsxs("div",{className:"wrapper__content",children:[e.jsx(A,{icon:" mng-lnc-checkmark--outline",color:"success",sizeInUnits:"4rem",className:"wrapper__icon"}),e.jsxs("div",{className:"wrapper__info",children:[d&&e.jsx("div",{className:"wrapper__title",children:d}),s&&e.jsx("div",{className:"wrapper__description",children:s})]})]}),e.jsxs("div",{className:"wrapper__actions",children:[e.jsx(k,{text:m,borderRadius:"curved",size:"medium",className:"wrapper__action action__continue",onClick:c}),e.jsx(k,{text:f,borderRadius:"curved",size:"medium",className:"wrapper__action action__end-quiz",onClick:_})]})]})),l={START_QUIZ:0,QUIZ:1,CORRECT_ANSWER:2},re=S.newStyled.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: ${p.MOBILE_SIZE_PX+"px"}) {
+    & .wrapper__outlet {
+      padding: 0;
+    }
+
+    & .wrapper__image {
+      display: none;
+    }
+  }
+`,te=i.forwardRef(({welcomeTitle:d,welcomeDescription:s,endTitle:m,endDescription:f,image:c,imageComponent:_,questions:r,secondsPerQuestion:E,numOfCredits:C,startQuizText:T="Start quiz",nextText:Q="Next",giveUpText:U="Give up",questionNoText:Z="Question",continueText:W="Continue",endQuizText:g="End quiz",onStartQuiz:N=()=>{},onSelectAnswer:x=()=>{},onGiveUp:I=()=>{},onNext:u=()=>{},onContinue:b=()=>{},onEndQuiz:w=()=>{}},a)=>{const[v,h]=i.useState(l.START_QUIZ),[o,y]=i.useState(1),[t,L]=i.useState(null),[j,R]=i.useState(null),O=i.useRef([]),D=i.useRef(0),M=()=>{h(l.QUIZ),L(r==null?void 0:r.find(n=>(n==null?void 0:n.questionNo)===o)),N==null||N()},P=n=>{R(n),x==null||x()},B=()=>{h(l.START_QUIZ),y(1),R(null),I==null||I()},X=()=>{let n=(j==null?void 0:j.uuid)===(t==null?void 0:t.correctAnswer);n?(h(l.CORRECT_ANSWER),D.current+=C||(t==null?void 0:t.numOfCredits)):o===(r==null?void 0:r.length)?(h(l.START_QUIZ),y(1),R(null)):(y(o+1),L(r==null?void 0:r.find($=>($==null?void 0:$.questionNo)===o+1)),R(null)),O.current=[...O.current,{question:t,selectedAnswer:j,isCorrect:n}],u==null||u()},F=()=>{o===(r==null?void 0:r.length)?(h(l.START_QUIZ),y(1)):(h(l.QUIZ),y(o+1),L(r==null?void 0:r.find(n=>(n==null?void 0:n.questionNo)===o+1))),R(null),b==null||b()},G=()=>{h(l.START_QUIZ),y(1),R(null),w==null||w()};return e.jsxs(re,{children:[e.jsxs("div",{className:"wrapper__outlet",children:[v===l.START_QUIZ&&e.jsx(Y,{title:d,description:s,startQuizText:T,onStartQuiz:M}),v===l.QUIZ&&t&&e.jsx(q,{questionNoText:Z,questionNo:o,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:j,nextText:Q,giveUpText:U,nextDisabled:!z.isDefined(j),onSelectAnswer:P,onGiveUp:B,onNext:X},`quiz-question__${o}`),v===l.CORRECT_ANSWER&&e.jsx(ee,{title:m,description:z.formatString(f,C||(t==null?void 0:t.numOfCredits)),continueText:W,endQuizText:g,onContinue:F,onEndQuiz:G})]}),z.isDefined(_)?_:e.jsx("img",{src:c,className:"wrapper__image"})]})});module.exports=te;