@lanaco/lnc-react-ui 4.0.206 → 4.0.208

package/dist/ProductsWithBannerSection.js

@@ -1,13 +1,13 @@
-import { jsxs as t, jsx as r, Fragment as P } from "react/jsx-runtime";
-import { forwardRef as W, useRef as N, Suspense as U, memo as G, useMemo as M } from "react";
-import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as R } from "./consts-BuFChS64.js";
-import { u as _ } from "./useDetectMobile-Bkvj0VMa.js";
-import { R as j } from "./style-neMbLWE6.js";
-import { m as B, l as I, k as C } from "./utils-DtEfC-TX.js";
-import { P as L } from "./index-B22BZVBG.js";
-import { b as s, a as i, S as u, c as b } from "./style-BwQ4djFC.js";
-const y = f.div`
+import { jsxs as t, jsx as r, Fragment as W } from "react/jsx-runtime";
+import { forwardRef as N, useRef as P, Suspense as U, memo as G, useMemo as j } from "react";
+import { s as R } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { d as h } from "./breakpoints-ff0SIcV3.js";
+import { u as M } from "./useDetectMobile-CcVo3PNi.js";
+import { R as y } from "./style-BUyFad_y.js";
+import { n as B, m as L, l as C } from "./utils-B2fsQ6PS.js";
+import { P as _ } from "./index-BvMY2TbK.js";
+import { b as s, a as i, S as g, c as f } from "./style-BwQ4djFC.js";
+const z = R.div`
   width: 100%;
   height: 22.5rem;
   min-height: 22.5rem;
@@ -25,7 +25,7 @@ const y = f.div`
     object-fit: cover;
   }
 
-  @media (max-width: ${R + "px"}) {
+  @media ${h("S")} {
     height: 100%;
     min-height: 100%;
     max-height: 100%;
@@ -40,15 +40,25 @@ const y = f.div`
       }
     }
   }
-`, z = f.div`
+`, D = R.div`
   display: grid;
   grid-template-columns: ${(a) => `repeat(${a.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${R + "px"}) {
+  @media ${h("M")} {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @media ${h("S")} {
     grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+  }
+
+  @media ${h("XS")} {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
   }
-`, D = f.a`
+`, I = R.a`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -69,7 +79,7 @@ const y = f.div`
     ${B(2)}
   }
 
-  @media (max-width: ${R + "px"}) {
+  @media ${h("S")} {
     & img {
       width: 8.875rem;
       height: 8.875rem;
@@ -80,52 +90,52 @@ const y = f.div`
       object-fit: cover;
     }
   }
-`, E = W((a, h) => {
+`, T = N((a, l) => {
   const {
     uuid: o,
-    title: d,
+    title: m,
     image: c,
-    sellerUuid: k,
-    onSelectCard: w = () => {
+    sellerUuid: v,
+    onSelectCard: S = () => {
     },
-    imageComponent: g,
-    metadata: m,
+    imageComponent: p,
+    metadata: d,
     nameSlug: n,
-    LinkComponent: l
-  } = a, p = l || "a", S = N(null);
+    LinkComponent: u
+  } = a, b = u || "a", w = P(null);
   return /* @__PURE__ */ t(
-    D,
+    I,
     {
-      ref: S,
+      ref: w,
       className: "product-card",
-      name: m == null ? void 0 : m.name,
-      "data-accessor": m == null ? void 0 : m.accessor,
-      onClick: (e) => w(e, h),
-      as: p,
-      ...l ? {
+      name: d == null ? void 0 : d.name,
+      "data-accessor": d == null ? void 0 : d.accessor,
+      onClick: (e) => S(e, l),
+      as: b,
+      ...u ? {
         to: `/product/${C(n) ? `${n}-` : ""}${o}`
       } : {
         href: `/product/${C(n) ? `${n}-` : ""}${o}`
       },
       children: [
-        I(g) ? g : /* @__PURE__ */ r(L, { src: c }),
-        /* @__PURE__ */ r("div", { className: "card-title", children: d })
+        L(p) ? p : /* @__PURE__ */ r(_, { src: c }),
+        /* @__PURE__ */ r("div", { className: "card-title", children: m })
       ]
     }
   );
-}), T = f(s)`
-  @media (max-width: ${R + "px"}) {
+}), q = R(s)`
+  @media ${h("S")} {
     & .skeleton__banner {
       height: 100%;
       aspect-ratio: 1 / 1;
     }
   }
-`, q = ({ keyPrefix: a }) => /* @__PURE__ */ t(T, { children: [
+`, E = ({ keyPrefix: a }) => /* @__PURE__ */ t(q, { children: [
   /* @__PURE__ */ r(i, { height: "22.5rem", className: "skeleton__banner" }),
-  /* @__PURE__ */ t(u, { children: [
+  /* @__PURE__ */ t(g, { children: [
     /* @__PURE__ */ t(s, { gap: "0.5rem", children: [
       /* @__PURE__ */ r(
-        b,
+        f,
         {
           height: "100%",
           width: "100%",
@@ -133,7 +143,7 @@ const y = f.div`
         }
       ),
       /* @__PURE__ */ r(s, { height: "1rem", children: /* @__PURE__ */ r(i, { height: "1rem", borderRadius: "0.75rem" }) }),
-      /* @__PURE__ */ t(u, { gap: "0.5rem", children: [
+      /* @__PURE__ */ t(g, { gap: "0.5rem", children: [
         /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" }),
         /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" })
       ] }),
@@ -146,7 +156,7 @@ const y = f.div`
         noGradient: !0,
         children: [
           /* @__PURE__ */ r(
-            b,
+            f,
             {
               height: "100%",
               width: "100%",
@@ -154,7 +164,7 @@ const y = f.div`
             }
           ),
           /* @__PURE__ */ r(i, { height: "1rem", borderRadius: "0.75rem" }),
-          /* @__PURE__ */ t(u, { gap: "0.5rem", noGradient: !0, children: [
+          /* @__PURE__ */ t(g, { gap: "0.5rem", noGradient: !0, children: [
             /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" }),
             /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" })
           ] }),
@@ -170,7 +180,7 @@ const y = f.div`
         noGradient: !0,
         children: [
           /* @__PURE__ */ r(
-            b,
+            f,
             {
               height: "100%",
               width: "100%",
@@ -178,7 +188,7 @@ const y = f.div`
             }
           ),
           /* @__PURE__ */ r(i, { height: "1rem", borderRadius: "0.75rem" }),
-          /* @__PURE__ */ t(u, { gap: "0.5rem", noGradient: !0, children: [
+          /* @__PURE__ */ t(g, { gap: "0.5rem", noGradient: !0, children: [
             /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" }),
             /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" })
           ] }),
@@ -194,7 +204,7 @@ const y = f.div`
         noGradient: !0,
         children: [
           /* @__PURE__ */ r(
-            b,
+            f,
             {
               height: "100%",
               width: "100%",
@@ -202,7 +212,7 @@ const y = f.div`
             }
           ),
           /* @__PURE__ */ r(i, { height: "1rem", borderRadius: "0.75rem" }),
-          /* @__PURE__ */ t(u, { gap: "0.5rem", noGradient: !0, children: [
+          /* @__PURE__ */ t(g, { gap: "0.5rem", noGradient: !0, children: [
             /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" }),
             /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" })
           ] }),
@@ -214,64 +224,64 @@ const y = f.div`
   ] })
 ] }), F = ({
   keyPrefix: a,
-  isLoading: h = !1,
-  fallbackComponent: o = /* @__PURE__ */ r(P, {}),
-  children: d
-}) => /* @__PURE__ */ r(U, { fallbackComponent: o, children: h === !0 ? /* @__PURE__ */ r(q, { keyPrefix: a }) : d }), v = G(E), Y = W((a, h) => {
+  isLoading: l = !1,
+  fallbackComponent: o = /* @__PURE__ */ r(W, {}),
+  children: m
+}) => /* @__PURE__ */ r(U, { fallbackComponent: o, children: l === !0 ? /* @__PURE__ */ r(E, { keyPrefix: a }) : m }), k = G(T), Z = N((a, l) => {
   const {
     icon: o,
-    items: d,
+    items: m,
     limit: c = 4,
-    imageUrl: k,
-    title: w = "Season inspiration",
-    isLoading: g = !1,
-    getImage: m = () => {
+    imageUrl: v,
+    title: S = "Season inspiration",
+    isLoading: p = !1,
+    getImage: d = () => {
     },
     componentName: n,
-    LinkComponent: l
-  } = a, p = _(), S = M(() => /* @__PURE__ */ r(P, { children: p === !0 ? d == null ? void 0 : d.map((e, $) => /* @__PURE__ */ r(
-    v,
+    LinkComponent: u
+  } = a, b = M(), w = j(() => /* @__PURE__ */ r(W, { children: b === !0 ? m == null ? void 0 : m.map((e, $) => /* @__PURE__ */ r(
+    k,
     {
       title: e == null ? void 0 : e.name,
       sellerUuid: e == null ? void 0 : e.sellerUuid,
       uuid: e == null ? void 0 : e.uuid,
       nameSlug: e == null ? void 0 : e.nameSlug,
-      image: m(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
+      image: d(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
       metadata: { name: n, accessor: e == null ? void 0 : e.accessor },
-      LinkComponent: l
+      LinkComponent: u
     },
     $
-  )) : d == null ? void 0 : d.slice(0, c).map((e, $) => /* @__PURE__ */ r(
-    v,
+  )) : m == null ? void 0 : m.slice(0, c).map((e, $) => /* @__PURE__ */ r(
+    k,
     {
       title: e == null ? void 0 : e.name,
       sellerUuid: e == null ? void 0 : e.sellerUuid,
       uuid: e == null ? void 0 : e.uuid,
       nameSlug: e == null ? void 0 : e.nameSlug,
-      image: m(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
+      image: d(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
       metadata: { name: n, accessor: e == null ? void 0 : e.accessor },
-      LinkComponent: l
+      LinkComponent: u
     },
     $
-  )) }), [d, p, c]);
-  return /* @__PURE__ */ t(j, { ref: h, children: [
+  )) }), [m, b, c]);
+  return /* @__PURE__ */ t(y, { ref: l, children: [
     /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ t("div", { className: "regular-title-text", children: [
       C(o) && /* @__PURE__ */ r("i", { className: o }),
-      /* @__PURE__ */ r("span", { children: w })
+      /* @__PURE__ */ r("span", { children: S })
     ] }) }),
     /* @__PURE__ */ t(
       F,
       {
-        isLoading: g,
+        isLoading: p,
         keyPrefix: "products-with-banner-skeleton",
         children: [
-          /* @__PURE__ */ r(y, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: k }) }),
-          /* @__PURE__ */ r(z, { limit: c, children: S })
+          /* @__PURE__ */ r(z, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: v }) }),
+          /* @__PURE__ */ r(D, { limit: c, children: w })
         ]
       }
     )
   ] });
 });
 export {
-  Y as default
+  Z as default
 };

package/dist/ProgressBar.cjs

@@ -1,4 +1,4 @@
-"use strict";const l=require("react/jsx-runtime"),n=require("react"),i=require("./emotion-styled.browser.esm-BtEseadx.cjs"),r=require("./utils-RnrgDDZP.cjs"),p=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),x=i.styled.div`
+"use strict";const l=require("react/jsx-runtime"),n=require("react"),i=require("./emotion-styled.browser.esm-BtEseadx.cjs"),r=require("./utils-CITgSxXe.cjs"),p=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),x=i.styled.div`
   width: 100%;
   position: relative;
   background-color: ${e=>r.getColorRgbaValue(e.theme,"Progress",e.color,"enabled","unfilled")};

package/dist/ProgressBar.js

@@ -1,7 +1,7 @@
-import { jsxs as c, jsx as h } from "react/jsx-runtime";
+import { jsxs as c, jsx as b } from "react/jsx-runtime";
 import { forwardRef as u, isValidElement as f, cloneElement as P } from "react";
 import { s as t } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { b as a, c as x } from "./utils-DtEfC-TX.js";
+import { c as a, d as x } from "./utils-B2fsQ6PS.js";
 import { u as $ } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const w = t.div`
   width: 100%;
@@ -54,7 +54,7 @@ const w = t.div`
     color: g = "primary",
     progressBarEndComponent: r,
     ...p
-  } = e, o = $(), b = () => {
+  } = e, o = $(), h = () => {
     var n;
     if (f(r))
       return P(r, {
@@ -72,13 +72,13 @@ const w = t.div`
       progressPercentage: s,
       ...p,
       children: [
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ b(
           y,
           {
             progressPercentage: s,
             theme: o,
             color: g,
-            children: r !== null && b()
+            children: r !== null && h()
           }
         ),
         i && /* @__PURE__ */ c(z, { theme: o, size: l, children: [

package/dist/QuattroCardsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),d=require("react"),m=require("./utils-RnrgDDZP.cjs"),p=require("./emotion-styled.browser.esm-BtEseadx.cjs"),g=require("./consts-goSZX3xP.cjs"),_=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),f=require("./styled-components.browser.esm-CvykQBGY.cjs"),h=require("./index-D0IYt1s3.cjs"),b=p.styled.div`
+"use strict";const r=require("react/jsx-runtime"),d=require("react"),m=require("./utils-CITgSxXe.cjs"),g=require("./emotion-styled.browser.esm-BtEseadx.cjs"),p=require("./breakpoints-CcVm-gVm.cjs"),f=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),_=require("./styled-components.browser.esm-CvykQBGY.cjs"),h=require("./index-uCWKRzoS.cjs"),b=g.styled.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -41,7 +41,7 @@
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
   border-radius: 0.75rem;
   z-index: 2;
-`,w=p.styled.a`
+`,w=g.styled.a`
   text-decoration: none;
   color: var(--gray-950);
   cursor: pointer;
@@ -93,7 +93,7 @@
     }
   }
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media ${p.down("S")} {
     width: 100%;
 
     img {
@@ -110,7 +110,7 @@
       display: block;
     }
   }
-`,y=d.forwardRef(({title:o,description:r,imageUrl:l,onSelectCard:i=()=>{},link:n,LinkComponent:s},c)=>{const{theme:a}=_.useTheme(),e=s||"a";return t.jsxs(w,{ref:c,theme:a,onClick:i,as:e,...s?{to:`/${n}`}:{href:`/${n}`},children:[t.jsx("img",{loading:"lazy",src:l}),t.jsx(b,{theme:a,className:"quattro-card__gradient",children:t.jsxs("div",{className:"quattro-card__text",children:[t.jsx("div",{className:"quattro-card__title",children:o}),t.jsx("div",{className:"quattro-card__description",children:r})]})})]})}),x=f.qe.div`
+`,y=d.forwardRef(({title:o,description:t,imageUrl:l,onSelectCard:i=()=>{},link:n,LinkComponent:s},c)=>{const{theme:a}=f.useTheme(),e=s||"a";return r.jsxs(w,{ref:c,theme:a,onClick:i,as:e,...s?{to:`/${n}`}:{href:`/${n}`},children:[r.jsx("img",{loading:"lazy",src:l}),r.jsx(b,{theme:a,className:"quattro-card__gradient",children:r.jsxs("div",{className:"quattro-card__text",children:[r.jsx("div",{className:"quattro-card__title",children:o}),r.jsx("div",{className:"quattro-card__description",children:t})]})})]})}),q=_.qe.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -156,12 +156,14 @@
     width: 100%;
   }
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media ${p.down("S")} {
     gap: 1.25rem;
+  }
 
+  @media ${p.down("XS")} {
     & .wrapper__cards {
       grid-template-columns: repeat(1, minmax(0, 1fr));
       gap: 1rem;
     }
   }
-`,q=d.memo(y),j=d.forwardRef(({title:o,items:r,isLoading:l=!1,onSelectCard:i=()=>{},LinkComponent:n},s)=>{const c=d.useMemo(()=>{var a;return(a=r==null?void 0:r.slice(0,4))==null?void 0:a.map((e,u)=>t.jsx(q,{title:e==null?void 0:e.title,description:e==null?void 0:e.description,imageUrl:e==null?void 0:e.imageUrl,onSelectCard:()=>i==null?void 0:i(e),link:e==null?void 0:e.link,LinkComponent:n},`quattro-card__${u+1}`))},[r]);return t.jsxs(x,{ref:s,children:[t.jsx("div",{className:"wrapper__heading",children:t.jsx("div",{className:"wrapper__title",children:m.isDefinedNotEmptyString(o)&&t.jsx("div",{className:"title__text",children:t.jsx("span",{children:o})})})}),t.jsx(h.SuspenseBlogCardsSponsored,{isLoading:l,keyPrefix:"quattro-cards-skeleton",children:t.jsx("div",{className:"wrapper__cards",children:c})})]})});module.exports=j;
+`,x=d.memo(y),j=d.forwardRef(({title:o,items:t,isLoading:l=!1,onSelectCard:i=()=>{},LinkComponent:n},s)=>{const c=d.useMemo(()=>{var a;return(a=t==null?void 0:t.slice(0,4))==null?void 0:a.map((e,u)=>r.jsx(x,{title:e==null?void 0:e.title,description:e==null?void 0:e.description,imageUrl:e==null?void 0:e.imageUrl,onSelectCard:()=>i==null?void 0:i(e),link:e==null?void 0:e.link,LinkComponent:n},`quattro-card__${u+1}`))},[t]);return r.jsxs(q,{ref:s,children:[r.jsx("div",{className:"wrapper__heading",children:r.jsx("div",{className:"wrapper__title",children:m.isDefinedNotEmptyString(o)&&r.jsx("div",{className:"title__text",children:r.jsx("span",{children:o})})})}),r.jsx(h.SuspenseBlogCardsSponsored,{isLoading:l,keyPrefix:"quattro-cards-skeleton",children:r.jsx("div",{className:"wrapper__cards",children:c})})]})});module.exports=j;

package/dist/QuattroCardsSection.js

@@ -1,12 +1,12 @@
 import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import { forwardRef as m, memo as h, useMemo as u } from "react";
-import { t as _, m as b, k as w } from "./utils-DtEfC-TX.js";
-import { s as p } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as g } from "./consts-BuFChS64.js";
+import { forwardRef as p, memo as u, useMemo as h } from "react";
+import { t as _, n as b, l as w } from "./utils-B2fsQ6PS.js";
+import { s as g } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { d as m } from "./breakpoints-ff0SIcV3.js";
 import { u as y } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 import { q as v } from "./styled-components.browser.esm-D-n22PJk.js";
-import { S as q } from "./index-BC2PHcI1.js";
-const k = p.div`
+import { S as q } from "./index-BWeXujWl.js";
+const k = g.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -49,7 +49,7 @@ const k = p.div`
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
   border-radius: 0.75rem;
   z-index: 2;
-`, x = p.a`
+`, z = g.a`
   text-decoration: none;
   color: var(--gray-950);
   cursor: pointer;
@@ -101,7 +101,7 @@ const k = p.div`
     }
   }
 
-  @media (max-width: ${g + "px"}) {
+  @media ${m("S")} {
     width: 100%;
 
     img {
@@ -118,7 +118,7 @@ const k = p.div`
       display: block;
     }
   }
-`, z = m(
+`, N = p(
   ({
     title: o,
     description: e,
@@ -130,7 +130,7 @@ const k = p.div`
   }, l) => {
     const { theme: i } = y();
     return /* @__PURE__ */ c(
-      x,
+      z,
       {
         ref: l,
         theme: i,
@@ -151,7 +151,7 @@ const k = p.div`
       }
     );
   }
-), N = v.div`
+), $ = v.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -197,21 +197,23 @@ const k = p.div`
     width: 100%;
   }
 
-  @media (max-width: ${g + "px"}) {
+  @media ${m("S")} {
     gap: 1.25rem;
+  }
 
+  @media ${m("XS")} {
     & .wrapper__cards {
       grid-template-columns: repeat(1, minmax(0, 1fr));
       gap: 1rem;
     }
   }
-`, C = h(z), B = m(
+`, x = u(N), I = p(
   ({ title: o, items: e, isLoading: d = !1, onSelectCard: a = () => {
   }, LinkComponent: n }, s) => {
-    const l = u(() => {
+    const l = h(() => {
       var i;
       return (i = e == null ? void 0 : e.slice(0, 4)) == null ? void 0 : i.map((r, f) => /* @__PURE__ */ t(
-        C,
+        x,
         {
           title: r == null ? void 0 : r.title,
           description: r == null ? void 0 : r.description,
@@ -223,7 +225,7 @@ const k = p.div`
         `quattro-card__${f + 1}`
       ));
     }, [e]);
-    return /* @__PURE__ */ c(N, { ref: s, children: [
+    return /* @__PURE__ */ c($, { ref: s, children: [
       /* @__PURE__ */ t("div", { className: "wrapper__heading", children: /* @__PURE__ */ t("div", { className: "wrapper__title", children: w(o) && /* @__PURE__ */ t("div", { className: "title__text", children: /* @__PURE__ */ t("span", { children: o }) }) }) }),
       /* @__PURE__ */ t(
         q,
@@ -237,5 +239,5 @@ const k = p.div`
   }
 );
 export {
-  B as default
+  I as default
 };

package/dist/QuizSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),i=require("react"),N=require("./utils-RnrgDDZP.cjs"),k=require("./Button.cjs"),T=require("./emotion-styled.browser.esm-BtEseadx.cjs"),g=require("./consts-goSZX3xP.cjs"),M=require("./Icon.cjs"),K=require("./ProgressBar.cjs"),V=T.styled.div`
+"use strict";const e=require("react/jsx-runtime"),i=require("react"),N=require("./utils-CITgSxXe.cjs"),R=require("./Button.cjs"),Q=require("./emotion-styled.browser.esm-BtEseadx.cjs"),I=require("./breakpoints-CcVm-gVm.cjs"),P=require("./Icon.cjs"),Y=require("./ProgressBar.cjs"),q=Q.styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -49,7 +49,7 @@
     }
   }
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media ${I.down("S")} {
     & .wrapper__title {
       font-size: 1.375rem;
       line-height: 1.75rem;
@@ -60,7 +60,7 @@
       line-height: 1.25rem;
     }
   }
-`,Y=T.styled.div`
+`,ee=Q.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -250,7 +250,7 @@
     }
   }
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media ${I.down("S")} {
     & .wrapper__content {
       & .wrapper__item {
         & .wrapper__answers {
@@ -259,7 +259,7 @@
       }
     }
   }
-`,q=T.styled.div`
+`,re=Q.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -349,7 +349,7 @@
     }
   }
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media ${I.down("S")} {
     width: 100%;
 
     & .wrapper__actions {
@@ -359,7 +359,7 @@
       }
     }
   }
-`,ee=i.forwardRef(({title:f,description:c,startQuizText:h="Start quiz",onStartQuiz:x=()=>{}},o)=>e.jsxs(V,{ref:o,children:[e.jsxs("div",{className:"wrapper__content",children:[e.jsx("div",{className:"wrapper__title",children:f}),e.jsx("div",{className:"wrapper__description",children:c})]}),e.jsx(k,{text:h,size:"medium",className:"wrapper__action",onClick:x})]})),re=i.forwardRef(({questionNoText:f,questionNo:c,totalQuestions:h,text:x,options:o,correctAnswerIndex:n,selectedAnswer:r,secondsPerQuestion:C,nextText:z="Next",giveUpText:Q="Give up",nextDisabled:U=!0,onSelectAnswer:Z=()=>{},onGiveUp:L=()=>{},onNext:$=()=>{},selectedAnswerIndex:p},R)=>{const[d,b]=i.useState(C),[u,E]=i.useState(!0),w=i.useRef(null);i.useEffect(()=>(u&&d>0&&(w.current=setInterval(()=>{b(m=>m>0?m-1:0)},1e3)),()=>clearInterval(w.current)),[u,d]);const W=d>0?d/C*g.CIRCLE_CIRCUMFERENCE:0;return e.jsxs(Y,{ref:R,children:[e.jsxs("div",{className:"wrapper__headline",children:[e.jsxs("div",{className:"wrapper__question-no",children:[e.jsx("div",{className:"question-no__text",children:`${f} ${c} / ${h}`}),e.jsx(K,{progressPercentage:c/h*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:g.CIRCLE_RADIUS,stroke:"#e0e0e0",strokeWidth:"4",fill:"transparent"}),e.jsx("circle",{className:"ring__progres",cx:"30",cy:"30",r:g.CIRCLE_RADIUS,stroke:"#d97706",strokeWidth:"4",fill:"transparent",strokeLinecap:"round",transform:"rotate(-90 30 30)",strokeDasharray:g.CIRCLE_CIRCUMFERENCE,strokeDashoffset:g.CIRCLE_CIRCUMFERENCE-W})]}),e.jsx("div",{className:"timer__display",children:e.jsx("span",{className:"timer__text",children:N.formatTimerText(d)})})]})]}),e.jsxs("div",{className:"wrapper__content",children:[e.jsxs("div",{className:"wrapper__item",children:[e.jsx("div",{className:"wrapper__text",children:x}),e.jsx("div",{className:"wrapper__answers",children:o==null?void 0:o.map((m,a)=>e.jsxs("div",{className:`wrapper__answer ${n===a&&n===p?"active":N.isDefinedNotEmptyString(r)&&n!==p&&p===a?"incorrect":""}`,onClick:()=>Z(m,a),children:[`${String.fromCharCode(65+a)}: ${m}`,n===a&&n===p&&e.jsx(M,{icon:" mng-lnc-checkmark--filled",sizeInUnits:"1.25rem",className:"wrapper__icon"}),p>=0&&n!==p&&p===a&&e.jsx(M,{icon:" mng-lnc-close--filled",sizeInUnits:"1.25rem",className:"wrapper__icon__incorrect"})]},`quiz-answer__${a+1}`))})]}),e.jsxs("div",{className:"wrapper__actions",children:[e.jsx(k,{text:Q,borderRadius:"curved",size:"medium",className:"wrapper__action action__give-up",onClick:L}),e.jsx(k,{text:z,borderRadius:"curved",size:"medium",className:"wrapper__action action__next",disabled:U,onClick:$})]})]})]})}),te=i.forwardRef(({title:f,description:c,continueText:h="Continue",endQuizText:x="End quiz",onContinue:o=()=>{},onEndQuiz:n=()=>{}},r)=>e.jsxs(q,{ref:r,children:[e.jsxs("div",{className:"wrapper__content",children:[e.jsx(M,{icon:" mng-lnc-checkmark--outline",color:"success",sizeInUnits:"4rem",className:"wrapper__icon"}),e.jsxs("div",{className:"wrapper__info",children:[f&&e.jsx("div",{className:"wrapper__title",children:f}),c&&e.jsx("div",{className:"wrapper__description",children:c})]})]}),e.jsxs("div",{className:"wrapper__actions",children:[e.jsx(k,{text:h,borderRadius:"curved",size:"medium",className:"wrapper__action action__continue",onClick:o}),e.jsx(k,{text:x,borderRadius:"curved",size:"medium",className:"wrapper__action action__end-quiz",onClick:n})]})]})),l={START_QUIZ:0,QUIZ:1,CORRECT_ANSWER:2},ae=T.styled.div`
+`,te=i.forwardRef(({title:g,description:c,startQuizText:f="Start quiz",onStartQuiz:h=()=>{}},o)=>e.jsxs(q,{ref:o,children:[e.jsxs("div",{className:"wrapper__content",children:[e.jsx("div",{className:"wrapper__title",children:g}),e.jsx("div",{className:"wrapper__description",children:c})]}),e.jsx(R,{text:f,size:"medium",className:"wrapper__action",onClick:h})]})),B=26,O=2*Math.PI*B,ae=i.forwardRef(({questionNoText:g,questionNo:c,totalQuestions:f,text:h,options:o,correctAnswerIndex:n,selectedAnswer:r,secondsPerQuestion:k,nextText:z="Next",giveUpText:U="Give up",nextDisabled:E=!0,onSelectAnswer:$=()=>{},onGiveUp:W=()=>{},onNext:Z=()=>{},selectedAnswerIndex:p},j)=>{const[d,b]=i.useState(k),[u,S]=i.useState(!0),x=i.useRef(null);i.useEffect(()=>(u&&d>0&&(x.current=setInterval(()=>{b(m=>m>0?m-1:0)},1e3)),()=>clearInterval(x.current)),[u,d]);const D=d>0?d/k*O:0;return e.jsxs(ee,{ref:j,children:[e.jsxs("div",{className:"wrapper__headline",children:[e.jsxs("div",{className:"wrapper__question-no",children:[e.jsx("div",{className:"question-no__text",children:`${g} ${c} / ${f}`}),e.jsx(Y,{progressPercentage:c/f*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:B,stroke:"#e0e0e0",strokeWidth:"4",fill:"transparent"}),e.jsx("circle",{className:"ring__progres",cx:"30",cy:"30",r:B,stroke:"#d97706",strokeWidth:"4",fill:"transparent",strokeLinecap:"round",transform:"rotate(-90 30 30)",strokeDasharray:O,strokeDashoffset:O-D})]}),e.jsx("div",{className:"timer__display",children:e.jsx("span",{className:"timer__text",children:N.formatTimerText(d)})})]})]}),e.jsxs("div",{className:"wrapper__content",children:[e.jsxs("div",{className:"wrapper__item",children:[e.jsx("div",{className:"wrapper__text",children:h}),e.jsx("div",{className:"wrapper__answers",children:o==null?void 0:o.map((m,a)=>e.jsxs("div",{className:`wrapper__answer ${n===a&&n===p?"active":N.isDefinedNotEmptyString(r)&&n!==p&&p===a?"incorrect":""}`,onClick:()=>$(m,a),children:[`${String.fromCharCode(65+a)}: ${m}`,n===a&&n===p&&e.jsx(P,{icon:" mng-lnc-checkmark--filled",sizeInUnits:"1.25rem",className:"wrapper__icon"}),p>=0&&n!==p&&p===a&&e.jsx(P,{icon:" mng-lnc-close--filled",sizeInUnits:"1.25rem",className:"wrapper__icon__incorrect"})]},`quiz-answer__${a+1}`))})]}),e.jsxs("div",{className:"wrapper__actions",children:[e.jsx(R,{text:U,borderRadius:"curved",size:"medium",className:"wrapper__action action__give-up",onClick:W}),e.jsx(R,{text:z,borderRadius:"curved",size:"medium",className:"wrapper__action action__next",disabled:E,onClick:Z})]})]})]})}),ie=i.forwardRef(({title:g,description:c,continueText:f="Continue",endQuizText:h="End quiz",onContinue:o=()=>{},onEndQuiz:n=()=>{}},r)=>e.jsxs(re,{ref:r,children:[e.jsxs("div",{className:"wrapper__content",children:[e.jsx(P,{icon:" mng-lnc-checkmark--outline",color:"success",sizeInUnits:"4rem",className:"wrapper__icon"}),e.jsxs("div",{className:"wrapper__info",children:[g&&e.jsx("div",{className:"wrapper__title",children:g}),c&&e.jsx("div",{className:"wrapper__description",children:c})]})]}),e.jsxs("div",{className:"wrapper__actions",children:[e.jsx(R,{text:f,borderRadius:"curved",size:"medium",className:"wrapper__action action__continue",onClick:o}),e.jsx(R,{text:h,borderRadius:"curved",size:"medium",className:"wrapper__action action__end-quiz",onClick:n})]})]})),l={START_QUIZ:0,QUIZ:1,CORRECT_ANSWER:2},ne=Q.styled.div`
   display: flex;
   width: 100%;
   align-items: center;
@@ -383,7 +383,7 @@
     border-radius: 0.75rem;
   }
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media ${I.down("S")} {
     & .wrapper__outlet {
       padding: 0;
     }
@@ -392,4 +392,4 @@
       display: none;
     }
   }
-`,ie=i.forwardRef(({title:f,subtitle:c,endTitle:h,endDescription:x,imageUrl:o,imageComponent:n,questions:r,secondsPerQuestion:C,numberOfCredits:z,startQuizText:Q="Start quiz",nextText:U="Next",giveUpText:Z="Give up",questionNoText:L="Question",continueText:$="Continue",endQuizText:p="End quiz",onStartQuiz:R=()=>{},onSelectAnswer:d=()=>{},onGiveUp:b=()=>{},onNext:u=()=>{},onContinue:E=()=>{},onEndQuiz:w=()=>{}},W)=>{const[m,a]=i.useState(l.START_QUIZ),[_,v]=i.useState(0),[t,D]=i.useState(null),[O,y]=i.useState(null),[P,j]=i.useState(null),A=i.useRef([]),I=i.useRef(0),B=()=>{var s;a(l.QUIZ),D((s=r==null?void 0:r.at)==null?void 0:s.call(r,_)),R==null||R()},X=(s,S)=>{j(S),y(s),d==null||d()},F=()=>{a(l.START_QUIZ),v(0),y(null),j(null),b==null||b()},G=()=>{var S;const s=P===(t==null?void 0:t.correctAnswerIndex);s?(a(l.CORRECT_ANSWER),I.current+=z||(t==null?void 0:t.numberOfCredits)):_===(r==null?void 0:r.length)-1?(a(l.START_QUIZ),v(0),y(null),j(null)):(v(_+1),D((S=r==null?void 0:r.at)==null?void 0:S.call(r,_+1)),y(null),j(null)),A.current=[...A.current,{question:t,selectedAnswer:O,isCorrect:s}],u==null||u()},H=()=>{var s;_===(r==null?void 0:r.length)-1?(a(l.START_QUIZ),v(0)):(a(l.QUIZ),v(_+1),D((s=r==null?void 0:r.at)==null?void 0:s.call(r,_+1))),y(null),j(null),E==null||E(I==null?void 0:I.current)},J=()=>{a(l.START_QUIZ),v(0),y(null),j(null),w==null||w()};return e.jsxs(ae,{ref:W,children:[e.jsxs("div",{className:"wrapper__outlet",children:[m===l.START_QUIZ&&e.jsx(ee,{title:f,description:c,startQuizText:Q,onStartQuiz:B}),m===l.QUIZ&&t&&e.jsx(re,{questionNoText:L,questionNo:_,totalQuestions:(r==null?void 0:r.length)||0,text:t==null?void 0:t.questionText,options:t==null?void 0:t.options,secondsPerQuestion:C||(t==null?void 0:t.secondsPerQuestion),correctAnswerIndex:t==null?void 0:t.correctAnswerIndex,selectedAnswer:O,nextText:U,giveUpText:Z,nextDisabled:!N.isDefined(O),onSelectAnswer:X,onGiveUp:F,onNext:G,selectedAnswerIndex:P},`quiz-question__${_}`),m===l.CORRECT_ANSWER&&e.jsx(te,{title:h,description:N.formatString(x,z||(t==null?void 0:t.numberOfCredits)),continueText:$,endQuizText:p,onContinue:H,onEndQuiz:J})]}),N.isDefined(n)?n:e.jsx("img",{src:o,className:"wrapper__image"})]})});module.exports=ie;
+`,le=i.forwardRef(({title:g,subtitle:c,endTitle:f,endDescription:h,imageUrl:o,imageComponent:n,questions:r,secondsPerQuestion:k,numberOfCredits:z,startQuizText:U="Start quiz",nextText:E="Next",giveUpText:$="Give up",questionNoText:W="Question",continueText:Z="Continue",endQuizText:p="End quiz",onStartQuiz:j=()=>{},onSelectAnswer:d=()=>{},onGiveUp:b=()=>{},onNext:u=()=>{},onContinue:S=()=>{},onEndQuiz:x=()=>{}},D)=>{const[m,a]=i.useState(l.START_QUIZ),[_,w]=i.useState(0),[t,A]=i.useState(null),[L,v]=i.useState(null),[M,y]=i.useState(null),F=i.useRef([]),C=i.useRef(0),G=()=>{var s;a(l.QUIZ),A((s=r==null?void 0:r.at)==null?void 0:s.call(r,_)),j==null||j()},H=(s,T)=>{y(T),v(s),d==null||d()},J=()=>{a(l.START_QUIZ),w(0),v(null),y(null),b==null||b()},K=()=>{var T;const s=M===(t==null?void 0:t.correctAnswerIndex);s?(a(l.CORRECT_ANSWER),C.current+=z||(t==null?void 0:t.numberOfCredits)):_===(r==null?void 0:r.length)-1?(a(l.START_QUIZ),w(0),v(null),y(null)):(w(_+1),A((T=r==null?void 0:r.at)==null?void 0:T.call(r,_+1)),v(null),y(null)),F.current=[...F.current,{question:t,selectedAnswer:L,isCorrect:s}],u==null||u()},V=()=>{var s;_===(r==null?void 0:r.length)-1?(a(l.START_QUIZ),w(0)):(a(l.QUIZ),w(_+1),A((s=r==null?void 0:r.at)==null?void 0:s.call(r,_+1))),v(null),y(null),S==null||S(C==null?void 0:C.current)},X=()=>{a(l.START_QUIZ),w(0),v(null),y(null),x==null||x()};return e.jsxs(ne,{ref:D,children:[e.jsxs("div",{className:"wrapper__outlet",children:[m===l.START_QUIZ&&e.jsx(te,{title:g,description:c,startQuizText:U,onStartQuiz:G}),m===l.QUIZ&&t&&e.jsx(ae,{questionNoText:W,questionNo:_,totalQuestions:(r==null?void 0:r.length)||0,text:t==null?void 0:t.questionText,options:t==null?void 0:t.options,secondsPerQuestion:k||(t==null?void 0:t.secondsPerQuestion),correctAnswerIndex:t==null?void 0:t.correctAnswerIndex,selectedAnswer:L,nextText:E,giveUpText:$,nextDisabled:!N.isDefined(L),onSelectAnswer:H,onGiveUp:J,onNext:K,selectedAnswerIndex:M},`quiz-question__${_}`),m===l.CORRECT_ANSWER&&e.jsx(ie,{title:f,description:N.formatString(h,z||(t==null?void 0:t.numberOfCredits)),continueText:Z,endQuizText:p,onContinue:V,onEndQuiz:X})]}),N.isDefined(n)?n:e.jsx("img",{src:o,className:"wrapper__image"})]})});module.exports=le;