@lanaco/lnc-react-ui 4.0.37 → 4.0.39

package/dist/OverlayGeneralCardsSection.js

@@ -1,12 +1,23 @@
-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-CjCaF13H.js";
-import { m as i, t as s } from "./utils-DtRLzzTZ.js";
-import { M as h } from "./consts-C1uHV4xc.js";
-import { R as u } from "./style-6tSw9aqK.js";
-const v = m.div`
+import { jsxs as i, jsx as e, Fragment as c } from "react/jsx-runtime";
+import { forwardRef as m, Suspense as v, memo as w, useMemo as k } from "react";
+import { n as _ } from "./emotion-styled.browser.esm-CjCaF13H.js";
+import { M as g } from "./consts-C1uHV4xc.js";
+import { R as y } from "./style-6tSw9aqK.js";
+import { useTheme as f } from "./ThemeProvider.js";
+import { m as d, t as h } from "./utils-DtRLzzTZ.js";
+import b from "./Button.js";
+const $ = _.div`
+  display: grid;
+  grid-template-columns: ${(t) => `repeat(${t.limit}, 1fr)`};
+  gap: 1.25rem;
+  justify-items: center;
+
+  @media (max-width: ${g + "px"}) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+`, u = _.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -37,7 +48,7 @@ const v = m.div`
   & .wrapper__image--skeleton {
     width: 100%;
     border-radius: 0.75rem;
-    background-color: ${i("-90deg")};
+    background-color: ${d("-90deg")};
   }
 
   & .wrapper__text {
@@ -55,7 +66,7 @@ const v = m.div`
       font-style: normal;
       font-weight: 500;
       line-height: 1.5rem;
-      ${s(2)}
+      ${h(2)}
     }
 
     & .text__description {
@@ -64,17 +75,17 @@ const v = m.div`
       font-style: normal;
       font-weight: 600;
       line-height: 1.75rem;
-      ${s(2)}
+      ${h(2)}
     }
 
     & .text__title--skeleton {
-      background-color: ${i("-90deg")};
+      background-color: ${d("-90deg")};
       height: 1rem;
       width: 9rem;
     }
 
     & .text__description--skeleton {
-      background-color: ${i("-90deg")};
+      background-color: ${d("-90deg")};
       height: 1rem;
       width: 12rem;
     }
@@ -94,7 +105,7 @@ const v = m.div`
   }
 
   & .text__action--skeleton {
-    background-color: ${i("-90deg")};
+    background-color: ${d("-90deg")};
     height: 2rem;
     width: 9rem;
     position: absolute;
@@ -102,7 +113,7 @@ const v = m.div`
     left: 1rem;
   }
 
-  @media (max-width: ${h + "px"}) {
+  @media (max-width: ${g + "px"}) {
     max-height: 100%;
 
     & .wrapper__overlay {
@@ -121,63 +132,92 @@ const v = m.div`
       left: 2rem;
     }
   }
-`, w = p(
+`, N = m(({}, t) => {
+  const { theme: a } = f();
+  return /* @__PURE__ */ i(u, { theme: a, children: [
+    /* @__PURE__ */ e("div", { className: "wrapper__image--skeleton" }),
+    /* @__PURE__ */ i("div", { className: "wrapper__text", children: [
+      /* @__PURE__ */ e("div", { className: "text__title--skeleton" }),
+      /* @__PURE__ */ e("div", { className: "text__description--skeleton" })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "text__action--skeleton" })
+  ] });
+}), S = ({ limit: t = 2, isLoading: a = !1, keyPrefix: o }) => /* @__PURE__ */ e(c, { children: Array.from({ length: t }, (n, l) => /* @__PURE__ */ e(
+  N,
+  {
+    isLoading: a
+  },
+  `${o}-skeleton-product-card-${l}`
+)) }), C = ({
+  children: t,
+  fallbackComponent: a = /* @__PURE__ */ e(c, {}),
+  isLoading: o = !1,
+  limit: n,
+  keyPrefix: l
+}) => /* @__PURE__ */ e(v, { fallbackComponent: a, children: o === !0 ? /* @__PURE__ */ e(
+  S,
+  {
+    isLoading: o,
+    limit: n,
+    keyPrefix: l
+  }
+) : t }), P = m(
   ({
     title: t,
     image: a,
-    overlay: l,
+    overlay: o,
     description: n,
-    actionText: c,
-    actionLink: e,
-    handleClick: o = () => {
+    actionText: l,
+    actionLink: x,
+    handleClick: s = () => {
     }
-  }, 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 })
+  }, r) => {
+    const { theme: p } = f();
+    return /* @__PURE__ */ e(c, { children: /* @__PURE__ */ i(u, { theme: p, overlay: o, onClick: s, children: [
+      /* @__PURE__ */ e("div", { className: "wrapper__overlay", children: /* @__PURE__ */ e("img", { src: a, className: "wrapper__image" }) }),
+      /* @__PURE__ */ i("div", { className: "wrapper__text", children: [
+        /* @__PURE__ */ e("div", { className: "text__title", children: t }),
+        /* @__PURE__ */ e("div", { className: "text__description", children: n })
       ] }),
-      /* @__PURE__ */ r(
-        f,
+      /* @__PURE__ */ e(
+        b,
         {
-          text: c,
-          onClick: o,
+          text: l,
+          onClick: s,
           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,
+), G = w(P), W = m(
+  ({ title: t, items: a, limit: o = 2, onSelectCard: n = () => {
+  }, isLoading: l = !1 }, x) => {
+    const s = k(() => /* @__PURE__ */ e(c, { children: a && (a == null ? void 0 : a.map((r, p) => /* @__PURE__ */ e(
+      G,
       {
-        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)
+        title: r == null ? void 0 : r.title,
+        image: r == null ? void 0 : r.image,
+        description: r == null ? void 0 : r.description,
+        actionText: r == null ? void 0 : r.actionText,
+        overlay: r == null ? void 0 : r.overlay,
+        handleClick: () => n(r == null ? void 0 : r.uuid)
       },
-      `landing-page-overlay-general-card__${o + 1}`
-    ))) })
-  ] })
+      `landing-page-overlay-general-card__${p + 1}`
+    ))) }), [a]);
+    return /* @__PURE__ */ i(y, { children: [
+      /* @__PURE__ */ e("div", { className: "regular-title center", children: /* @__PURE__ */ e("div", { className: "regular-title-text", children: /* @__PURE__ */ e("span", { children: t }) }) }),
+      /* @__PURE__ */ e($, { limit: o, children: /* @__PURE__ */ e(
+        C,
+        {
+          isLoading: l,
+          limit: o,
+          keyPrefix: "explore-landing",
+          children: s
+        }
+      ) })
+    ] });
+  }
 );
 export {
-  j as default
+  W as default
 };

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-Cle7tAM9.cjs"),g=require("./consts-CtNoHdBj.cjs"),b=require("./useDetectMobile-D6d5LpdL.cjs"),f=require("./style-BR3tIhP1.cjs"),a=require("./utils-NZLCh-J5.cjs"),j=c.newStyled.div`
+"use strict";const r=require("react/jsx-runtime"),d=require("react"),u=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),p=require("./consts-CtNoHdBj.cjs"),v=require("./useDetectMobile-D6d5LpdL.cjs"),k=require("./style-BR3tIhP1.cjs"),l=require("./utils-NZLCh-J5.cjs"),y=u.newStyled.div`
   width: 100%;
   height: 22.5rem;
   min-height: 22.5rem;
@@ -15,12 +15,12 @@
     height: 100%;
     object-fit: cover;
   }
-`,v=c.newStyled.div`
+`,S=u.newStyled.div`
   display: grid;
-  grid-template-columns: ${o=>`repeat(${o.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${t=>`repeat(${t.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
     display: flex;
     gap: 1rem;
     overflow-x: auto;
@@ -39,7 +39,7 @@
       /* Safari and Chrome */
     }
   }
-`,y=c.newStyled.div`
+`,f=u.newStyled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -55,7 +55,7 @@
   & .card-title {
     font-size: 0.875rem;
     font-weight: 600;
-     ${a.truncateTextInRows(2)}
+     ${l.truncateTextInRows(2)}
   }
 
   &:hover {
@@ -65,18 +65,18 @@
   }
 
   & .skeleton-img {
-    background-color: ${a.linearGradientAnimation("-90deg")};
+    background-color: ${l.linearGradientAnimation("-90deg")};
     border-radius: 0.75rem;
     border: 1px solid white;
   }
 
   & .skeleton-title {
-    background-color: ${a.linearGradientAnimation("-90deg")};
+    background-color: ${l.linearGradientAnimation("-90deg")};
     width: 100%;
     height: 1.25rem;
   }
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
     & img {
       width: 8.875rem;
       height: 8.875rem;
@@ -87,4 +87,4 @@
       object-fit: cover;
     }
   }
-`,h=p.forwardRef((o,m)=>{const{uuid:d,title:r,image:n,sellerUuid:u,onSelectCard:t=()=>{},imageComponent:s}=o;return i.jsxs(y,{className:"product-card",onClick:t,children:[a.isDefined(s)?s:i.jsx("img",{src:n}),i.jsx("div",{className:"card-title",children:r})]})}),S=p.forwardRef((o,m)=>{const{icon:d,items:r,limit:n=4,bannerImage:u,onSelectCard:t=()=>{},title:s="Season inspiration"}=o,w=b.useDetectMobile();return i.jsxs(f.RegulatTitleSectionWrapper,{ref:m,children:[i.jsx("div",{className:"regular-title",children:i.jsxs("div",{className:"regular-title-text",children:[a.isDefinedNotEmptyString(d)&&i.jsx("i",{className:d}),i.jsx("span",{children:s})]})}),i.jsx(j,{className:"products-banner",children:i.jsx("img",{src:u})}),i.jsx(v,{limit:n,children:w===!0?r==null?void 0:r.map((e,l)=>i.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>t==null?void 0:t(e==null?void 0:e.uuid)},l)):r==null?void 0:r.slice(0,n).map((e,l)=>i.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>t==null?void 0:t(e==null?void 0:e.uuid)},l))})]})});module.exports=S;
+`,P=d.forwardRef((t,a)=>{const{uuid:o,title:i,image:s,sellerUuid:g,onSelectCard:n=()=>{},imageComponent:c}=t;return r.jsxs(f,{className:"product-card",onClick:n,children:[l.isDefined(c)?c:r.jsx("img",{src:s}),r.jsx("div",{className:"card-title",children:i})]})}),C=d.forwardRef(({},t)=>r.jsxs(f,{className:"product-card",children:[r.jsx("img",{className:"skeleton-img"}),r.jsx("div",{className:"skeleton-title"})]})),N=({limit:t=4,isLoading:a=!1,keyPrefix:o})=>r.jsx(r.Fragment,{children:Array.from({length:t},(i,s)=>r.jsx(C,{isLoading:a},`${o}-skeleton-product-card-${s}`))}),$=({children:t,fallbackComponent:a=r.jsx(r.Fragment,{}),isLoading:o=!1,limit:i,keyPrefix:s})=>r.jsx(d.Suspense,{fallbackComponent:a,children:o===!0?r.jsx(N,{isLoading:o,limit:i,keyPrefix:s}):t}),h=d.memo(P),q=d.forwardRef((t,a)=>{const{icon:o,items:i,limit:s=4,bannerImage:g,onSelectCard:n=()=>{},title:c="Season inspiration",isLoading:w=!1}=t,b=v.useDetectMobile(),j=d.useMemo(()=>r.jsx(r.Fragment,{children:b===!0?i==null?void 0:i.map((e,m)=>r.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>n==null?void 0:n(e==null?void 0:e.uuid)},m)):i==null?void 0:i.slice(0,s).map((e,m)=>r.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>n==null?void 0:n(e==null?void 0:e.uuid)},m))}),[i]);return r.jsxs(k.RegulatTitleSectionWrapper,{ref:a,children:[r.jsx("div",{className:"regular-title",children:r.jsxs("div",{className:"regular-title-text",children:[l.isDefinedNotEmptyString(o)&&r.jsx("i",{className:o}),r.jsx("span",{children:c})]})}),r.jsx(y,{className:"products-banner",children:r.jsx("img",{src:g})}),r.jsx(S,{limit:s,children:r.jsx($,{isLoading:w,limit:s,keyPrefix:"explore-landing",children:j})})]})});module.exports=q;

package/dist/ProductsWithBannerSection.js

@@ -1,11 +1,11 @@
-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-CjCaF13H.js";
-import { M as f } from "./consts-C1uHV4xc.js";
-import { u as w } from "./useDetectMobile-BC6EGaBc.js";
-import { R as v } from "./style-6tSw9aqK.js";
-import { t as k, m as h, l as y, k as N } from "./utils-DtRLzzTZ.js";
-const S = s.div`
+import { jsxs as s, jsx as r, Fragment as c } from "react/jsx-runtime";
+import { forwardRef as u, Suspense as S, memo as C, useMemo as N } from "react";
+import { n as p } from "./emotion-styled.browser.esm-CjCaF13H.js";
+import { M as b } from "./consts-C1uHV4xc.js";
+import { u as P } from "./useDetectMobile-BC6EGaBc.js";
+import { R as $ } from "./style-6tSw9aqK.js";
+import { t as M, m as g, l as j, k as E } from "./utils-DtRLzzTZ.js";
+const I = p.div`
   width: 100%;
   height: 22.5rem;
   min-height: 22.5rem;
@@ -22,12 +22,12 @@ const S = s.div`
     height: 100%;
     object-fit: cover;
   }
-`, $ = s.div`
+`, U = p.div`
   display: grid;
-  grid-template-columns: ${(a) => `repeat(${a.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${(t) => `repeat(${t.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${f + "px"}) {
+  @media (max-width: ${b + "px"}) {
     display: flex;
     gap: 1rem;
     overflow-x: auto;
@@ -46,7 +46,7 @@ const S = s.div`
       /* Safari and Chrome */
     }
   }
-`, j = s.div`
+`, w = p.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -62,7 +62,7 @@ const S = s.div`
   & .card-title {
     font-size: 0.875rem;
     font-weight: 600;
-     ${k(2)}
+     ${M(2)}
   }
 
   &:hover {
@@ -72,18 +72,18 @@ const S = s.div`
   }
 
   & .skeleton-img {
-    background-color: ${h("-90deg")};
+    background-color: ${g("-90deg")};
     border-radius: 0.75rem;
     border: 1px solid white;
   }
 
   & .skeleton-title {
-    background-color: ${h("-90deg")};
+    background-color: ${g("-90deg")};
     width: 100%;
     height: 1.25rem;
   }
 
-  @media (max-width: ${f + "px"}) {
+  @media (max-width: ${b + "px"}) {
     & img {
       width: 8.875rem;
       height: 8.875rem;
@@ -94,59 +94,90 @@ const S = s.div`
       object-fit: cover;
     }
   }
-`, u = g((a, c) => {
+`, W = u((t, d) => {
   const {
-    uuid: l,
+    uuid: a,
     title: i,
     image: o,
-    sellerUuid: p,
-    onSelectCard: t = () => {
+    sellerUuid: h,
+    onSelectCard: n = () => {
     },
-    imageComponent: d
-  } = a;
-  return /* @__PURE__ */ m(j, { className: "product-card", onClick: t, children: [
-    y(d) ? d : /* @__PURE__ */ r("img", { src: o }),
+    imageComponent: l
+  } = t;
+  return /* @__PURE__ */ s(w, { className: "product-card", onClick: n, children: [
+    j(l) ? l : /* @__PURE__ */ r("img", { src: o }),
     /* @__PURE__ */ r("div", { className: "card-title", children: i })
   ] });
-}), P = g((a, c) => {
+}), B = u(({}, t) => /* @__PURE__ */ s(w, { className: "product-card", children: [
+  /* @__PURE__ */ r("img", { className: "skeleton-img" }),
+  /* @__PURE__ */ r("div", { className: "skeleton-title" })
+] })), R = ({ limit: t = 4, isLoading: d = !1, keyPrefix: a }) => /* @__PURE__ */ r(c, { children: Array.from({ length: t }, (i, o) => /* @__PURE__ */ r(
+  B,
+  {
+    isLoading: d
+  },
+  `${a}-skeleton-product-card-${o}`
+)) }), z = ({
+  children: t,
+  fallbackComponent: d = /* @__PURE__ */ r(c, {}),
+  isLoading: a = !1,
+  limit: i,
+  keyPrefix: o
+}) => /* @__PURE__ */ r(S, { fallbackComponent: d, children: a === !0 ? /* @__PURE__ */ r(
+  R,
+  {
+    isLoading: a,
+    limit: i,
+    keyPrefix: o
+  }
+) : t }), f = C(W), O = u((t, d) => {
   const {
-    icon: l,
+    icon: a,
     items: i,
     limit: o = 4,
-    bannerImage: p,
-    onSelectCard: t = () => {
+    bannerImage: h,
+    onSelectCard: n = () => {
+    },
+    title: l = "Season inspiration",
+    isLoading: k = !1
+  } = t, v = P(), y = N(() => /* @__PURE__ */ r(c, { children: v === !0 ? i == null ? void 0 : i.map((e, m) => /* @__PURE__ */ r(
+    f,
+    {
+      title: e == null ? void 0 : e.title,
+      image: e == null ? void 0 : e.image,
+      sellerUuid: e == null ? void 0 : e.sellerUuid,
+      uuid: e == null ? void 0 : e.uuid,
+      onSelectCard: () => n == null ? void 0 : n(e == null ? void 0 : e.uuid)
     },
-    title: d = "Season inspiration"
-  } = a, b = w();
-  return /* @__PURE__ */ m(v, { ref: c, children: [
-    /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ m("div", { className: "regular-title-text", children: [
-      N(l) && /* @__PURE__ */ r("i", { className: l }),
-      /* @__PURE__ */ r("span", { children: d })
+    m
+  )) : i == null ? void 0 : i.slice(0, o).map((e, m) => /* @__PURE__ */ r(
+    f,
+    {
+      title: e == null ? void 0 : e.title,
+      image: e == null ? void 0 : e.image,
+      sellerUuid: e == null ? void 0 : e.sellerUuid,
+      uuid: e == null ? void 0 : e.uuid,
+      onSelectCard: () => n == null ? void 0 : n(e == null ? void 0 : e.uuid)
+    },
+    m
+  )) }), [i]);
+  return /* @__PURE__ */ s($, { ref: d, children: [
+    /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ s("div", { className: "regular-title-text", children: [
+      E(a) && /* @__PURE__ */ r("i", { className: a }),
+      /* @__PURE__ */ r("span", { children: l })
     ] }) }),
-    /* @__PURE__ */ r(S, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: p }) }),
-    /* @__PURE__ */ r($, { limit: o, children: b === !0 ? i == null ? void 0 : i.map((e, n) => /* @__PURE__ */ r(
-      u,
-      {
-        title: e == null ? void 0 : e.title,
-        image: e == null ? void 0 : e.image,
-        sellerUuid: e == null ? void 0 : e.sellerUuid,
-        uuid: e == null ? void 0 : e.uuid,
-        onSelectCard: () => t == null ? void 0 : t(e == null ? void 0 : e.uuid)
-      },
-      n
-    )) : i == null ? void 0 : i.slice(0, o).map((e, n) => /* @__PURE__ */ r(
-      u,
+    /* @__PURE__ */ r(I, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: h }) }),
+    /* @__PURE__ */ r(U, { limit: o, children: /* @__PURE__ */ r(
+      z,
       {
-        title: e == null ? void 0 : e.title,
-        image: e == null ? void 0 : e.image,
-        sellerUuid: e == null ? void 0 : e.sellerUuid,
-        uuid: e == null ? void 0 : e.uuid,
-        onSelectCard: () => t == null ? void 0 : t(e == null ? void 0 : e.uuid)
-      },
-      n
-    )) })
+        isLoading: k,
+        limit: o,
+        keyPrefix: "explore-landing",
+        children: y
+      }
+    ) })
   ] });
 });
 export {
-  P as default
+  O as default
 };

package/dist/QuizSection.cjs

@@ -384,4 +384,4 @@
       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;
+`,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,{ref:a,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;

package/dist/QuizSection.js

@@ -1,4 +1,4 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as i, 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-DtRLzzTZ.js";
 import R from "./Button.js";
@@ -367,8 +367,8 @@ const ae = Q.div`
     startQuizText: d = "Start quiz",
     onStartQuiz: _ = () => {
     }
-  }, o) => /* @__PURE__ */ a(ae, { children: [
-    /* @__PURE__ */ a("div", { className: "wrapper__content", children: [
+  }, o) => /* @__PURE__ */ i(ae, { children: [
+    /* @__PURE__ */ i("div", { className: "wrapper__content", children: [
       /* @__PURE__ */ e("div", { className: "wrapper__title", children: s }),
       /* @__PURE__ */ e("div", { className: "wrapper__description", children: c })
     ] }),
@@ -403,12 +403,12 @@ const ae = Q.div`
   }, 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);
+      k((a) => a > 0 ? a - 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: [
+    const z = f > 0 ? f / r * L : 0, w = (a) => (m == null ? void 0 : m.uuid) === a;
+    return /* @__PURE__ */ i(ie, { children: [
+      /* @__PURE__ */ i("div", { className: "wrapper__headline", children: [
+        /* @__PURE__ */ i("div", { className: "wrapper__question-no", children: [
           /* @__PURE__ */ e("div", { className: "question-no__text", children: `${s} ${c} / ${d}` }),
           /* @__PURE__ */ e(
             te,
@@ -418,8 +418,8 @@ const ae = Q.div`
             }
           )
         ] }),
-        /* @__PURE__ */ a("div", { className: "wrapper__timer", children: [
-          /* @__PURE__ */ a("svg", { className: "timer__ring", width: "60", height: "60", children: [
+        /* @__PURE__ */ i("div", { className: "wrapper__timer", children: [
+          /* @__PURE__ */ i("svg", { className: "timer__ring", width: "60", height: "60", children: [
             /* @__PURE__ */ e(
               "circle",
               {
@@ -452,17 +452,17 @@ const ae = Q.div`
           /* @__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__ */ i("div", { className: "wrapper__content", children: [
+        /* @__PURE__ */ i("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(
+          /* @__PURE__ */ e("div", { className: "wrapper__answers", children: o && (o == null ? void 0 : o.map((a, x) => /* @__PURE__ */ i(
             "div",
             {
-              className: `wrapper__answer ${w(i == null ? void 0 : i.uuid) ? "active" : ""}`,
-              onClick: () => Z(i),
+              className: `wrapper__answer ${w(a == null ? void 0 : a.uuid) ? "active" : ""}`,
+              onClick: () => Z(a),
               children: [
-                `${String.fromCharCode(65 + x)}: ${i == null ? void 0 : i.label}`,
-                w(i == null ? void 0 : i.uuid) && /* @__PURE__ */ e(
+                `${String.fromCharCode(65 + x)}: ${a == null ? void 0 : a.label}`,
+                w(a == null ? void 0 : a.uuid) && /* @__PURE__ */ e(
                   F,
                   {
                     icon: " mng-lnc-checkmark--filled",
@@ -475,7 +475,7 @@ const ae = Q.div`
             `quiz-answer__${x + 1}`
           ))) })
         ] }),
-        /* @__PURE__ */ a("div", { className: "wrapper__actions", children: [
+        /* @__PURE__ */ i("div", { className: "wrapper__actions", children: [
           /* @__PURE__ */ e(
             R,
             {
@@ -511,8 +511,8 @@ const ae = Q.div`
     },
     onEndQuiz: m = () => {
     }
-  }, r) => /* @__PURE__ */ a(ne, { children: [
-    /* @__PURE__ */ a("div", { className: "wrapper__content", children: [
+  }, r) => /* @__PURE__ */ i(ne, { children: [
+    /* @__PURE__ */ i("div", { className: "wrapper__content", children: [
       /* @__PURE__ */ e(
         F,
         {
@@ -522,12 +522,12 @@ const ae = Q.div`
           className: "wrapper__icon"
         }
       ),
-      /* @__PURE__ */ a("div", { className: "wrapper__info", children: [
+      /* @__PURE__ */ i("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__ */ i("div", { className: "wrapper__actions", children: [
       /* @__PURE__ */ e(
         R,
         {
@@ -615,7 +615,7 @@ const ae = Q.div`
     },
     onEndQuiz: w = () => {
     }
-  }, i) => {
+  }, a) => {
     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)
@@ -643,8 +643,8 @@ const ae = Q.div`
     }, Y = () => {
       g(l.START_QUIZ), v(1), N(null), w == null || w();
     };
-    return /* @__PURE__ */ a(pe, { children: [
-      /* @__PURE__ */ a("div", { className: "wrapper__outlet", children: [
+    return /* @__PURE__ */ i(pe, { ref: a, children: [
+      /* @__PURE__ */ i("div", { className: "wrapper__outlet", children: [
         x === l.START_QUIZ && /* @__PURE__ */ e(
           le,
           {