@cuemath/leap 3.3.0 → 3.3.2-2.beta-guru-01

package/dist/features/ui/inputs/checkbox-input-list/checkbox-input-list.js

@@ -1,33 +1,35 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useMemo as g, useCallback as I } from "react";
-import L from "../../arrow-tooltip/arrow-tooltip.js";
-import O from "../checkbox-input/checkbox-input.js";
-import { CheckboxInputListWrapper as v, CheckboxOptionWrapper as A } from "./checkbox-input-list-styled.js";
-const $ = (h) => {
+import { useMemo as $, useCallback as w } from "react";
+import I from "../../arrow-tooltip/arrow-tooltip.js";
+import O from "../../layout/flex-view.js";
+import v from "../checkbox-input/checkbox-input.js";
+import { CheckboxOptionWrapper as A } from "./checkbox-input-list-styled.js";
+const L = (a) => {
   const {
-    size: a,
+    size: h,
     value: o,
     options: d,
-    disabled: s,
+    disabled: l,
     renderAs: u,
-    numColumns: C,
-    indeterminate: f,
-    visibleOnCheck: x,
+    numColumns: f,
+    optionFlexGap: x,
+    indeterminate: C,
+    visibleOnCheck: b,
     maximumSelection: e,
     onChange: i
-  } = h, c = g(
+  } = a, s = $(
     () => !!(e && e > 1 && o.length >= e),
     [e, o.length]
-  ), b = I(
+  ), k = w(
     (t, n) => {
-      n ? e === 1 ? i([t]) : (!c || !e) && i([...o, t]) : i(o.filter((l) => l !== t));
+      n ? e === 1 ? i([t]) : (!s || !e) && i([...o, t]) : i(o.filter((p) => p !== t));
     },
-    [e, i, c, o]
+    [e, i, s, o]
   );
-  return /* @__PURE__ */ r(v, { children: d.map((t) => {
-    const { id: n, label: l } = t, p = o.includes(n), m = c && !p, k = (s == null ? void 0 : s.includes(n)) || m;
-    return /* @__PURE__ */ r(A, { $numColumns: C ?? 1, children: /* @__PURE__ */ r(
-      L,
+  return /* @__PURE__ */ r(O, { $flexDirection: "row", $flexGap: x, $flexWrap: !0, children: d.map((t) => {
+    const { id: n, label: p } = t, c = o.includes(n), m = s && !c, g = (l == null ? void 0 : l.includes(n)) || m;
+    return /* @__PURE__ */ r(A, { $numColumns: f ?? 1, children: /* @__PURE__ */ r(
+      I,
       {
         renderAs: "primary",
         position: "top",
@@ -35,23 +37,23 @@ const $ = (h) => {
         hidden: !m,
         zIndex: 2,
         children: /* @__PURE__ */ r(
-          O,
+          v,
           {
             value: n,
-            size: a,
-            label: l,
-            checked: p,
+            size: h,
+            label: p,
+            checked: c,
             renderAs: u,
-            disabled: k,
-            onChange: b,
-            indeterminate: f,
-            visibleOnCheck: x
+            disabled: g,
+            onChange: k,
+            indeterminate: C,
+            visibleOnCheck: b
           }
         )
       }
     ) }, n);
   }) });
-}, W = $;
+}, W = L;
 export {
   W as default
 };

package/dist/features/ui/inputs/checkbox-input-list/checkbox-input-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-input-list.js","sources":["../../../../../src/features/ui/inputs/checkbox-input-list/checkbox-input-list.tsx"],"sourcesContent":["import type { ICheckboxInputProps } from './checkbox-input-list-types';\n\nimport { useCallback, useMemo } from 'react';\n\nimport ArrowTooltip from '../../arrow-tooltip/arrow-tooltip';\nimport CheckboxOption from '../checkbox-input/checkbox-input';\nimport * as Styled from './checkbox-input-list-styled';\n\nconst CheckboxInputList = <IDType extends string | number>(props: ICheckboxInputProps<IDType>) => {\n  const {\n    size,\n    value,\n    options,\n    disabled,\n    renderAs,\n    numColumns,\n    indeterminate,\n    visibleOnCheck,\n    maximumSelection,\n    onChange,\n  } = props;\n\n  const reachedMaxLength = useMemo(\n    () => !!(maximumSelection && maximumSelection > 1 && value.length >= maximumSelection),\n    [maximumSelection, value.length],\n  );\n\n  const handleOnChange = useCallback(\n    (selectedValue: IDType, selected: boolean) => {\n      if (!selected) {\n        onChange(value.filter(val => val !== selectedValue));\n      } else {\n        if (maximumSelection === 1) {\n          onChange([selectedValue]);\n        } else if (!reachedMaxLength || !maximumSelection) {\n          onChange([...value, selectedValue]);\n        }\n      }\n    },\n    [maximumSelection, onChange, reachedMaxLength, value],\n  );\n\n  return (\n    <Styled.CheckboxInputListWrapper>\n      {options.map(option => {\n        const { id, label } = option;\n\n        const checked = value.includes(id);\n        const showTooltip = reachedMaxLength && !checked;\n        const disableCheck = disabled?.includes(id) || showTooltip;\n\n        return (\n          <Styled.CheckboxOptionWrapper key={id} $numColumns={numColumns ?? 1}>\n            <ArrowTooltip\n              renderAs=\"primary\"\n              position=\"top\"\n              tooltipItem={`${maximumSelection} options already selected`}\n              hidden={!showTooltip}\n              zIndex={2}\n            >\n              <CheckboxOption<IDType>\n                value={id}\n                size={size}\n                label={label}\n                checked={checked}\n                renderAs={renderAs}\n                disabled={disableCheck}\n                onChange={handleOnChange}\n                indeterminate={indeterminate} //* Took this name from Mui.\n                visibleOnCheck={visibleOnCheck}\n              />\n            </ArrowTooltip>\n          </Styled.CheckboxOptionWrapper>\n        );\n      })}\n    </Styled.CheckboxInputListWrapper>\n  );\n};\n\nexport default CheckboxInputList;\n"],"names":["CheckboxInputList","props","size","value","options","disabled","renderAs","numColumns","indeterminate","visibleOnCheck","maximumSelection","onChange","reachedMaxLength","useMemo","handleOnChange","useCallback","selectedValue","selected","val","Styled.CheckboxInputListWrapper","option","id","label","checked","showTooltip","disableCheck","Styled.CheckboxOptionWrapper","jsx","ArrowTooltip","CheckboxOption","CheckboxInputList$1"],"mappings":";;;;;AAQA,MAAMA,IAAoB,CAAiCC,MAAuC;AAC1F,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,UAAAC;AAAA,EACE,IAAAV,GAEEW,IAAmBC;AAAA,IACvB,MAAM,CAAC,EAAEH,KAAoBA,IAAmB,KAAKP,EAAM,UAAUO;AAAA,IACrE,CAACA,GAAkBP,EAAM,MAAM;AAAA,EAAA,GAG3BW,IAAiBC;AAAA,IACrB,CAACC,GAAuBC,MAAsB;AAC5C,MAAKA,IAGCP,MAAqB,IACdC,EAAA,CAACK,CAAa,CAAC,KACf,CAACJ,KAAoB,CAACF,MAC/BC,EAAS,CAAC,GAAGR,GAAOa,CAAa,CAAC,IALpCL,EAASR,EAAM,OAAO,CAAOe,MAAAA,MAAQF,CAAa,CAAC;AAAA,IAQvD;AAAA,IACA,CAACN,GAAkBC,GAAUC,GAAkBT,CAAK;AAAA,EAAA;AAGtD,2BACGgB,GAAA,EACE,UAAAf,EAAQ,IAAI,CAAUgB,MAAA;AACf,UAAA,EAAE,IAAAC,GAAI,OAAAC,EAAU,IAAAF,GAEhBG,IAAUpB,EAAM,SAASkB,CAAE,GAC3BG,IAAcZ,KAAoB,CAACW,GACnCE,KAAepB,KAAA,gBAAAA,EAAU,SAASgB,OAAOG;AAE/C,6BACGE,GAAA,EAAsC,aAAanB,KAAc,GAChE,UAAA,gBAAAoB;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,UAAS;AAAA,QACT,aAAa,GAAGlB,CAAgB;AAAA,QAChC,QAAQ,CAACc;AAAA,QACT,QAAQ;AAAA,QAER,UAAA,gBAAAG;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,OAAOR;AAAA,YACP,MAAAnB;AAAA,YACA,OAAAoB;AAAA,YACA,SAAAC;AAAA,YACA,UAAAjB;AAAA,YACA,UAAUmB;AAAA,YACV,UAAUX;AAAA,YACV,eAAAN;AAAA,YACA,gBAAAC;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA,KAlB+BY,CAoBnC;AAAA,EAEH,CAAA,EACH,CAAA;AAEJ,GAEAS,IAAe9B;"}
+{"version":3,"file":"checkbox-input-list.js","sources":["../../../../../src/features/ui/inputs/checkbox-input-list/checkbox-input-list.tsx"],"sourcesContent":["import type { ICheckboxInputProps } from './checkbox-input-list-types';\n\nimport { useCallback, useMemo } from 'react';\n\nimport ArrowTooltip from '../../arrow-tooltip/arrow-tooltip';\nimport FlexView from '../../layout/flex-view';\nimport CheckboxOption from '../checkbox-input/checkbox-input';\nimport * as Styled from './checkbox-input-list-styled';\n\nconst CheckboxInputList = <IDType extends string | number>(props: ICheckboxInputProps<IDType>) => {\n  const {\n    size,\n    value,\n    options,\n    disabled,\n    renderAs,\n    numColumns,\n    optionFlexGap,\n    indeterminate,\n    visibleOnCheck,\n    maximumSelection,\n    onChange,\n  } = props;\n\n  const reachedMaxLength = useMemo(\n    () => !!(maximumSelection && maximumSelection > 1 && value.length >= maximumSelection),\n    [maximumSelection, value.length],\n  );\n\n  const handleOnChange = useCallback(\n    (selectedValue: IDType, selected: boolean) => {\n      if (!selected) {\n        onChange(value.filter(val => val !== selectedValue));\n      } else {\n        if (maximumSelection === 1) {\n          onChange([selectedValue]);\n        } else if (!reachedMaxLength || !maximumSelection) {\n          onChange([...value, selectedValue]);\n        }\n      }\n    },\n    [maximumSelection, onChange, reachedMaxLength, value],\n  );\n\n  return (\n    <FlexView $flexDirection=\"row\" $flexGap={optionFlexGap} $flexWrap>\n      {options.map(option => {\n        const { id, label } = option;\n\n        const checked = value.includes(id);\n        const showTooltip = reachedMaxLength && !checked;\n        const disableCheck = disabled?.includes(id) || showTooltip;\n\n        return (\n          <Styled.CheckboxOptionWrapper key={id} $numColumns={numColumns ?? 1}>\n            <ArrowTooltip\n              renderAs=\"primary\"\n              position=\"top\"\n              tooltipItem={`${maximumSelection} options already selected`}\n              hidden={!showTooltip}\n              zIndex={2}\n            >\n              <CheckboxOption<IDType>\n                value={id}\n                size={size}\n                label={label}\n                checked={checked}\n                renderAs={renderAs}\n                disabled={disableCheck}\n                onChange={handleOnChange}\n                indeterminate={indeterminate} //* Took this name from Mui.\n                visibleOnCheck={visibleOnCheck}\n              />\n            </ArrowTooltip>\n          </Styled.CheckboxOptionWrapper>\n        );\n      })}\n    </FlexView>\n  );\n};\n\nexport default CheckboxInputList;\n"],"names":["CheckboxInputList","props","size","value","options","disabled","renderAs","numColumns","optionFlexGap","indeterminate","visibleOnCheck","maximumSelection","onChange","reachedMaxLength","useMemo","handleOnChange","useCallback","selectedValue","selected","val","jsx","FlexView","option","id","label","checked","showTooltip","disableCheck","Styled.CheckboxOptionWrapper","ArrowTooltip","CheckboxOption","CheckboxInputList$1"],"mappings":";;;;;;AASA,MAAMA,IAAoB,CAAiCC,MAAuC;AAC1F,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,UAAAC;AAAA,EACE,IAAAX,GAEEY,IAAmBC;AAAA,IACvB,MAAM,CAAC,EAAEH,KAAoBA,IAAmB,KAAKR,EAAM,UAAUQ;AAAA,IACrE,CAACA,GAAkBR,EAAM,MAAM;AAAA,EAAA,GAG3BY,IAAiBC;AAAA,IACrB,CAACC,GAAuBC,MAAsB;AAC5C,MAAKA,IAGCP,MAAqB,IACdC,EAAA,CAACK,CAAa,CAAC,KACf,CAACJ,KAAoB,CAACF,MAC/BC,EAAS,CAAC,GAAGT,GAAOc,CAAa,CAAC,IALpCL,EAAST,EAAM,OAAO,CAAOgB,MAAAA,MAAQF,CAAa,CAAC;AAAA,IAQvD;AAAA,IACA,CAACN,GAAkBC,GAAUC,GAAkBV,CAAK;AAAA,EAAA;AAIpD,SAAA,gBAAAiB,EAACC,GAAS,EAAA,gBAAe,OAAM,UAAUb,GAAe,WAAS,IAC9D,UAAQJ,EAAA,IAAI,CAAUkB,MAAA;AACf,UAAA,EAAE,IAAAC,GAAI,OAAAC,EAAU,IAAAF,GAEhBG,IAAUtB,EAAM,SAASoB,CAAE,GAC3BG,IAAcb,KAAoB,CAACY,GACnCE,KAAetB,KAAA,gBAAAA,EAAU,SAASkB,OAAOG;AAE/C,6BACGE,GAAA,EAAsC,aAAarB,KAAc,GAChE,UAAA,gBAAAa;AAAA,MAACS;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,UAAS;AAAA,QACT,aAAa,GAAGlB,CAAgB;AAAA,QAChC,QAAQ,CAACe;AAAA,QACT,QAAQ;AAAA,QAER,UAAA,gBAAAN;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,OAAOP;AAAA,YACP,MAAArB;AAAA,YACA,OAAAsB;AAAA,YACA,SAAAC;AAAA,YACA,UAAAnB;AAAA,YACA,UAAUqB;AAAA,YACV,UAAUZ;AAAA,YACV,eAAAN;AAAA,YACA,gBAAAC;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA,KAlB+Ba,CAoBnC;AAAA,EAEH,CAAA,EACH,CAAA;AAEJ,GAEAQ,IAAe/B;"}

package/dist/features/ui/modals/modal.js

@@ -1,55 +1,57 @@
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
-import { captureException as u } from "@sentry/browser";
-import { memo as $, useCallback as g, Suspense as n } from "react";
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
+import { captureException as E } from "@sentry/browser";
+import { memo as v, useCallback as b, Suspense as n } from "react";
 import { ErrorBoundary as a } from "react-error-boundary";
-import E from "../../../assets/line-icons/icons/cross.js";
+import { useTheme as x } from "styled-components";
+import B from "../../../assets/line-icons/icons/cross.js";
 import h from "../error/error.js";
-import M from "../buttons/clickable/clickable.js";
-import x from "../layout/flex-view.js";
+import S from "../buttons/clickable/clickable.js";
+import W from "../layout/flex-view.js";
 import c from "../loader/app-loader/app-loader.js";
-import { ModalContainer as d, BottomSheetModal as v, ModalLoaderWrapper as C, SpotlightModal as B, BaseModal as S, CloseButtonContainer as W, BaseModalContent as w } from "./modal-styled.js";
-const q = $(({ modal: b, isClosing: o = !1, onClose: m }) => {
-  const { renderAs: s, element: e, modalWidth: l, isDismissable: p } = b, i = g((t) => {
-    u(t);
-  }, []), k = g((t) => {
-    t.stopPropagation();
+import { EDeviceType as w } from "../theme/constants.js";
+import { ModalContainer as d, BottomSheetModal as y, ModalLoaderWrapper as g, SpotlightModal as A, BaseModal as L, CloseButtonContainer as j, BaseModalContent as D } from "./modal-styled.js";
+const N = v(({ modal: u, isClosing: r = !1, onClose: m }) => {
+  const { device: C } = x(), k = C <= w.MOBILE, { renderAs: s, element: e, modalWidth: i, isDismissable: p, renderOnMobileAs: M } = u, t = b((l) => {
+    E(l);
+  }, []), $ = b((l) => {
+    l.stopPropagation();
   }, []);
-  return s === "bottom-sheet" ? /* @__PURE__ */ r(d, { $isClosing: o, onClick: p ? m : () => null, children: /* @__PURE__ */ r(v, { $isClosing: o, onClick: k, children: /* @__PURE__ */ r(
+  return s === "bottom-sheet" || k && M === "bottom-sheet" ? /* @__PURE__ */ o(d, { $isClosing: r, onClick: p ? m : () => null, children: /* @__PURE__ */ o(y, { $isClosing: r, onClick: $, children: /* @__PURE__ */ o(
     a,
     {
-      fallback: /* @__PURE__ */ r(x, { $gap: 24, children: /* @__PURE__ */ r(h, { height: "100%" }) }),
-      onError: i,
-      children: /* @__PURE__ */ r(n, { fallback: /* @__PURE__ */ r(c, { height: "50vh" }), children: e })
+      fallback: /* @__PURE__ */ o(W, { $gap: 24, children: /* @__PURE__ */ o(h, { height: "100%" }) }),
+      onError: t,
+      children: /* @__PURE__ */ o(n, { fallback: /* @__PURE__ */ o(c, { height: "50vh" }), children: e })
     }
-  ) }) }) : s === "spotlight" ? /* @__PURE__ */ r(d, { $isClosing: o, children: /* @__PURE__ */ r(
+  ) }) }) : s === "spotlight" ? /* @__PURE__ */ o(d, { $isClosing: r, children: /* @__PURE__ */ o(
     a,
     {
-      fallback: /* @__PURE__ */ r(C, { children: /* @__PURE__ */ r(h, { height: "100vh" }) }),
-      onError: i,
+      fallback: /* @__PURE__ */ o(g, { children: /* @__PURE__ */ o(h, { height: "100vh" }) }),
+      onError: t,
       children: /* @__PURE__ */ f(
         n,
         {
-          fallback: /* @__PURE__ */ r(C, { children: /* @__PURE__ */ r(c, { height: "100vh" }) }),
+          fallback: /* @__PURE__ */ o(g, { children: /* @__PURE__ */ o(c, { height: "100vh" }) }),
           children: [
-            /* @__PURE__ */ r(B, { $isClosing: o }),
+            /* @__PURE__ */ o(A, { $isClosing: r }),
             e
           ]
         }
       )
     }
-  ) }) : /* @__PURE__ */ r(d, { $isClosing: o, children: /* @__PURE__ */ f(S, { $isClosing: o, $width: l, children: [
-    p !== !1 && /* @__PURE__ */ r(W, { $modalWidth: l, children: /* @__PURE__ */ r(M, { label: "Close", onClick: m, children: /* @__PURE__ */ r(E, { width: 40, height: 40 }) }) }),
-    /* @__PURE__ */ r(w, { $modalWidth: l, children: /* @__PURE__ */ r(
+  ) }) : /* @__PURE__ */ o(d, { $isClosing: r, children: /* @__PURE__ */ f(L, { $isClosing: r, $width: i, children: [
+    p !== !1 && /* @__PURE__ */ o(j, { $modalWidth: i, children: /* @__PURE__ */ o(S, { label: "Close", onClick: m, children: /* @__PURE__ */ o(B, { width: 40, height: 40 }) }) }),
+    /* @__PURE__ */ o(D, { $modalWidth: i, children: /* @__PURE__ */ o(
       a,
       {
-        fallback: /* @__PURE__ */ r(h, { height: "50vh", size: "compact" }),
-        onError: i,
-        children: /* @__PURE__ */ r(n, { fallback: /* @__PURE__ */ r(c, { height: "50vh" }), children: e })
+        fallback: /* @__PURE__ */ o(h, { height: "50vh", size: "compact" }),
+        onError: t,
+        children: /* @__PURE__ */ o(n, { fallback: /* @__PURE__ */ o(c, { height: "50vh" }), children: e })
       }
     ) })
   ] }) });
 });
 export {
-  q as default
+  N as default
 };
 //# sourceMappingURL=modal.js.map

package/dist/features/ui/modals/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../src/features/ui/modals/modal.tsx"],"sourcesContent":["import type { IModalProps } from './modal-types';\nimport type { FC } from 'react';\n\nimport { captureException } from '@sentry/browser';\nimport { memo, Suspense, useCallback } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport Error from '../../ui/error/error';\nimport Clickable from '../buttons/clickable/clickable';\nimport FlexView from '../layout/flex-view';\nimport AppLoader from '../loader/app-loader/app-loader';\nimport * as Styled from './modal-styled';\n\n/**\n * Modal component that renders modal content with close button\n * Handles animation state for entry and exit transitions\n */\nconst Modal: FC<IModalProps> = memo(({ modal, isClosing = false, onClose }) => {\n  const { renderAs, element, modalWidth, isDismissable } = modal;\n\n  const sentryCaptureException = useCallback((error: Error) => {\n    captureException(error);\n  }, []);\n\n  const handleStopPropagation = useCallback((e: React.MouseEvent) => {\n    e.stopPropagation();\n  }, []);\n\n  if (renderAs === 'bottom-sheet') {\n    return (\n      <Styled.ModalContainer $isClosing={isClosing} onClick={isDismissable ? onClose : () => null}>\n        <Styled.BottomSheetModal $isClosing={isClosing} onClick={handleStopPropagation}>\n          <ErrorBoundary\n            fallback={\n              <FlexView $gap={24}>\n                <Error height=\"100%\" />\n              </FlexView>\n            }\n            onError={sentryCaptureException}\n          >\n            <Suspense fallback={<AppLoader height=\"50vh\" />}>{element}</Suspense>\n          </ErrorBoundary>\n        </Styled.BottomSheetModal>\n      </Styled.ModalContainer>\n    );\n  }\n\n  if (renderAs === 'spotlight') {\n    return (\n      <Styled.ModalContainer $isClosing={isClosing}>\n        <ErrorBoundary\n          fallback={\n            <Styled.ModalLoaderWrapper>\n              <Error height=\"100vh\" />\n            </Styled.ModalLoaderWrapper>\n          }\n          onError={sentryCaptureException}\n        >\n          <Suspense\n            fallback={\n              <Styled.ModalLoaderWrapper>\n                <AppLoader height=\"100vh\" />\n              </Styled.ModalLoaderWrapper>\n            }\n          >\n            <Styled.SpotlightModal $isClosing={isClosing} />\n            {element}\n          </Suspense>\n        </ErrorBoundary>\n      </Styled.ModalContainer>\n    );\n  }\n\n  return (\n    <Styled.ModalContainer $isClosing={isClosing}>\n      <Styled.BaseModal $isClosing={isClosing} $width={modalWidth}>\n        {isDismissable !== false && (\n          <Styled.CloseButtonContainer $modalWidth={modalWidth}>\n            <Clickable label=\"Close\" onClick={onClose}>\n              <CrossIcon width={40} height={40} />\n            </Clickable>\n          </Styled.CloseButtonContainer>\n        )}\n        <Styled.BaseModalContent $modalWidth={modalWidth}>\n          <ErrorBoundary\n            fallback={<Error height=\"50vh\" size=\"compact\" />}\n            onError={sentryCaptureException}\n          >\n            <Suspense fallback={<AppLoader height=\"50vh\" />}>{element}</Suspense>\n          </ErrorBoundary>\n        </Styled.BaseModalContent>\n      </Styled.BaseModal>\n    </Styled.ModalContainer>\n  );\n});\n\nexport default Modal;\n"],"names":["Modal","memo","modal","isClosing","onClose","renderAs","element","modalWidth","isDismissable","sentryCaptureException","useCallback","error","captureException","handleStopPropagation","e","Styled.ModalContainer","Styled.BottomSheetModal","jsx","ErrorBoundary","FlexView","Error","Suspense","AppLoader","Styled.ModalLoaderWrapper","jsxs","Styled.SpotlightModal","Styled.BaseModal","Styled.CloseButtonContainer","Clickable","CrossIcon","Styled.BaseModalContent"],"mappings":";;;;;;;;;;AAkBM,MAAAA,IAAyBC,EAAK,CAAC,EAAE,OAAAC,GAAO,WAAAC,IAAY,IAAO,SAAAC,QAAc;AAC7E,QAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,YAAAC,GAAY,eAAAC,MAAkBN,GAEnDO,IAAyBC,EAAY,CAACC,MAAiB;AAC3D,IAAAC,EAAiBD,CAAK;AAAA,EACxB,GAAG,CAAE,CAAA,GAECE,IAAwBH,EAAY,CAACI,MAAwB;AACjE,IAAAA,EAAE,gBAAgB;AAAA,EACpB,GAAG,CAAE,CAAA;AAEL,SAAIT,MAAa,mCAEZU,GAAA,EAAsB,YAAYZ,GAAW,SAASK,IAAgBJ,IAAU,MAAM,MACrF,4BAACY,GAAA,EAAwB,YAAYb,GAAW,SAASU,GACvD,UAAA,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,4BACGC,GAAS,EAAA,MAAM,IACd,UAAC,gBAAAF,EAAAG,GAAA,EAAM,QAAO,OAAA,CAAO,EACvB,CAAA;AAAA,MAEF,SAASX;AAAA,MAET,UAAA,gBAAAQ,EAACI,KAAS,UAAU,gBAAAJ,EAACK,KAAU,QAAO,OAAO,CAAA,GAAK,UAAQhB,EAAA,CAAA;AAAA,IAAA;AAAA,EAAA,EAE9D,CAAA,EACF,CAAA,IAIAD,MAAa,cAEZ,gBAAAY,EAAAF,GAAA,EAAsB,YAAYZ,GACjC,UAAA,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,4BACGK,GAAA,EACC,UAAC,gBAAAN,EAAAG,GAAA,EAAM,QAAO,QAAQ,CAAA,GACxB;AAAA,MAEF,SAASX;AAAA,MAET,UAAA,gBAAAe;AAAA,QAACH;AAAA,QAAA;AAAA,UACC,4BACGE,GAAA,EACC,UAAC,gBAAAN,EAAAK,GAAA,EAAU,QAAO,QAAQ,CAAA,GAC5B;AAAA,UAGF,UAAA;AAAA,YAAA,gBAAAL,EAACQ,GAAA,EAAsB,YAAYtB,EAAW,CAAA;AAAA,YAC7CG;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA,IAKD,gBAAAW,EAAAF,GAAA,EAAsB,YAAYZ,GACjC,UAAC,gBAAAqB,EAAAE,GAAA,EAAiB,YAAYvB,GAAW,QAAQI,GAC9C,UAAA;AAAA,IAAkBC,MAAA,wBAChBmB,GAAA,EAA4B,aAAapB,GACxC,4BAACqB,GAAU,EAAA,OAAM,SAAQ,SAASxB,GAChC,4BAACyB,GAAU,EAAA,OAAO,IAAI,QAAQ,IAAI,GACpC,EACF,CAAA;AAAA,IAED,gBAAAZ,EAAAa,GAAA,EAAwB,aAAavB,GACpC,UAAA,gBAAAU;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAW,gBAAAD,EAAAG,GAAA,EAAM,QAAO,QAAO,MAAK,WAAU;AAAA,QAC9C,SAASX;AAAA,QAET,UAAA,gBAAAQ,EAACI,KAAS,UAAU,gBAAAJ,EAACK,KAAU,QAAO,OAAO,CAAA,GAAK,UAAQhB,EAAA,CAAA;AAAA,MAAA;AAAA,IAAA,GAE9D;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"modal.js","sources":["../../../../src/features/ui/modals/modal.tsx"],"sourcesContent":["import type { IModalProps } from './modal-types';\nimport type { FC } from 'react';\n\nimport { captureException } from '@sentry/browser';\nimport { memo, Suspense, useCallback } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\nimport { useTheme } from 'styled-components';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport Error from '../../ui/error/error';\nimport Clickable from '../buttons/clickable/clickable';\nimport FlexView from '../layout/flex-view';\nimport AppLoader from '../loader/app-loader/app-loader';\nimport { EDeviceType } from '../theme/constants';\nimport * as Styled from './modal-styled';\n\n/**\n * Modal component that renders modal content with close button\n * Handles animation state for entry and exit transitions\n */\nconst Modal: FC<IModalProps> = memo(({ modal, isClosing = false, onClose }) => {\n  const { device } = useTheme();\n  const isMobile = device <= EDeviceType.MOBILE;\n  const { renderAs, element, modalWidth, isDismissable, renderOnMobileAs } = modal;\n\n  const sentryCaptureException = useCallback((error: Error) => {\n    captureException(error);\n  }, []);\n\n  const handleStopPropagation = useCallback((e: React.MouseEvent) => {\n    e.stopPropagation();\n  }, []);\n\n  if (renderAs === 'bottom-sheet' || (isMobile && renderOnMobileAs === 'bottom-sheet')) {\n    return (\n      <Styled.ModalContainer $isClosing={isClosing} onClick={isDismissable ? onClose : () => null}>\n        <Styled.BottomSheetModal $isClosing={isClosing} onClick={handleStopPropagation}>\n          <ErrorBoundary\n            fallback={\n              <FlexView $gap={24}>\n                <Error height=\"100%\" />\n              </FlexView>\n            }\n            onError={sentryCaptureException}\n          >\n            <Suspense fallback={<AppLoader height=\"50vh\" />}>{element}</Suspense>\n          </ErrorBoundary>\n        </Styled.BottomSheetModal>\n      </Styled.ModalContainer>\n    );\n  }\n\n  if (renderAs === 'spotlight') {\n    return (\n      <Styled.ModalContainer $isClosing={isClosing}>\n        <ErrorBoundary\n          fallback={\n            <Styled.ModalLoaderWrapper>\n              <Error height=\"100vh\" />\n            </Styled.ModalLoaderWrapper>\n          }\n          onError={sentryCaptureException}\n        >\n          <Suspense\n            fallback={\n              <Styled.ModalLoaderWrapper>\n                <AppLoader height=\"100vh\" />\n              </Styled.ModalLoaderWrapper>\n            }\n          >\n            <Styled.SpotlightModal $isClosing={isClosing} />\n            {element}\n          </Suspense>\n        </ErrorBoundary>\n      </Styled.ModalContainer>\n    );\n  }\n\n  return (\n    <Styled.ModalContainer $isClosing={isClosing}>\n      <Styled.BaseModal $isClosing={isClosing} $width={modalWidth}>\n        {isDismissable !== false && (\n          <Styled.CloseButtonContainer $modalWidth={modalWidth}>\n            <Clickable label=\"Close\" onClick={onClose}>\n              <CrossIcon width={40} height={40} />\n            </Clickable>\n          </Styled.CloseButtonContainer>\n        )}\n        <Styled.BaseModalContent $modalWidth={modalWidth}>\n          <ErrorBoundary\n            fallback={<Error height=\"50vh\" size=\"compact\" />}\n            onError={sentryCaptureException}\n          >\n            <Suspense fallback={<AppLoader height=\"50vh\" />}>{element}</Suspense>\n          </ErrorBoundary>\n        </Styled.BaseModalContent>\n      </Styled.BaseModal>\n    </Styled.ModalContainer>\n  );\n});\n\nexport default Modal;\n"],"names":["Modal","memo","modal","isClosing","onClose","device","useTheme","isMobile","EDeviceType","renderAs","element","modalWidth","isDismissable","renderOnMobileAs","sentryCaptureException","useCallback","error","captureException","handleStopPropagation","e","Styled.ModalContainer","Styled.BottomSheetModal","jsx","ErrorBoundary","FlexView","Error","Suspense","AppLoader","Styled.ModalLoaderWrapper","jsxs","Styled.SpotlightModal","Styled.BaseModal","Styled.CloseButtonContainer","Clickable","CrossIcon","Styled.BaseModalContent"],"mappings":";;;;;;;;;;;;AAoBM,MAAAA,IAAyBC,EAAK,CAAC,EAAE,OAAAC,GAAO,WAAAC,IAAY,IAAO,SAAAC,QAAc;AACvE,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAWF,KAAUG,EAAY,QACjC,EAAE,UAAAC,GAAU,SAAAC,GAAS,YAAAC,GAAY,eAAAC,GAAe,kBAAAC,EAAqB,IAAAX,GAErEY,IAAyBC,EAAY,CAACC,MAAiB;AAC3D,IAAAC,EAAiBD,CAAK;AAAA,EACxB,GAAG,CAAE,CAAA,GAECE,IAAwBH,EAAY,CAACI,MAAwB;AACjE,IAAAA,EAAE,gBAAgB;AAAA,EACpB,GAAG,CAAE,CAAA;AAEL,SAAIV,MAAa,kBAAmBF,KAAYM,MAAqB,mCAEhEO,GAAA,EAAsB,YAAYjB,GAAW,SAASS,IAAgBR,IAAU,MAAM,MACrF,4BAACiB,GAAA,EAAwB,YAAYlB,GAAW,SAASe,GACvD,UAAA,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,4BACGC,GAAS,EAAA,MAAM,IACd,UAAC,gBAAAF,EAAAG,GAAA,EAAM,QAAO,OAAA,CAAO,EACvB,CAAA;AAAA,MAEF,SAASX;AAAA,MAET,UAAA,gBAAAQ,EAACI,KAAS,UAAU,gBAAAJ,EAACK,KAAU,QAAO,OAAO,CAAA,GAAK,UAAQjB,EAAA,CAAA;AAAA,IAAA;AAAA,EAAA,EAE9D,CAAA,EACF,CAAA,IAIAD,MAAa,cAEZ,gBAAAa,EAAAF,GAAA,EAAsB,YAAYjB,GACjC,UAAA,gBAAAmB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,4BACGK,GAAA,EACC,UAAC,gBAAAN,EAAAG,GAAA,EAAM,QAAO,QAAQ,CAAA,GACxB;AAAA,MAEF,SAASX;AAAA,MAET,UAAA,gBAAAe;AAAA,QAACH;AAAA,QAAA;AAAA,UACC,4BACGE,GAAA,EACC,UAAC,gBAAAN,EAAAK,GAAA,EAAU,QAAO,QAAQ,CAAA,GAC5B;AAAA,UAGF,UAAA;AAAA,YAAA,gBAAAL,EAACQ,GAAA,EAAsB,YAAY3B,EAAW,CAAA;AAAA,YAC7CO;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA,IAKD,gBAAAY,EAAAF,GAAA,EAAsB,YAAYjB,GACjC,UAAC,gBAAA0B,EAAAE,GAAA,EAAiB,YAAY5B,GAAW,QAAQQ,GAC9C,UAAA;AAAA,IAAkBC,MAAA,wBAChBoB,GAAA,EAA4B,aAAarB,GACxC,4BAACsB,GAAU,EAAA,OAAM,SAAQ,SAAS7B,GAChC,4BAAC8B,GAAU,EAAA,OAAO,IAAI,QAAQ,IAAI,GACpC,EACF,CAAA;AAAA,IAED,gBAAAZ,EAAAa,GAAA,EAAwB,aAAaxB,GACpC,UAAA,gBAAAW;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAW,gBAAAD,EAAAG,GAAA,EAAM,QAAO,QAAO,MAAK,WAAU;AAAA,QAC9C,SAASX;AAAA,QAET,UAAA,gBAAAQ,EAACI,KAAS,UAAU,gBAAAJ,EAACK,KAAU,QAAO,OAAO,CAAA,GAAK,UAAQjB,EAAA,CAAA;AAAA,MAAA;AAAA,IAAA,GAE9D;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAC;"}

package/dist/features/wins-dashboard/belts-elements-stickers/belts-elements-stickers.js

@@ -0,0 +1,109 @@
+import { jsxs as y, jsx as i } from "react/jsx-runtime";
+import { memo as b } from "react";
+import h, { css as a } from "styled-components";
+import A from "../../ui/layout/flex-view.js";
+import l from "../../ui/separator/separator.js";
+import { StickerMap as k, MATH_REWARDS as R, INSTRUCTION_REWARDS as T, SCREEN_SIZES as m } from "../constants.js";
+import D from "./belts.js";
+import p from "./reward-elements.js";
+const _ = h(A)`
+  justify-content: space-between;
+  margin: 110px 120px;
+  margin-bottom: 48px;
+  ${({ $containerStyle: t }) => t}
+
+  ${({ $renderOnTeacher: t }) => t && a`
+      margin: 50px auto;
+      padding: 0 16px;
+    `}
+`, C = (t) => {
+  if (!(t && Array.isArray(t) && t.length > 0))
+    return { elements: [] };
+  const e = {
+    elements: []
+  };
+  return t.forEach((n) => {
+    const { aggregate_for: r, aggregates: o } = n || {}, { name: s } = r || {};
+    s && [...R, ...T].includes(s) && e.elements.push({ name: s, count: o || 0 });
+  }), e;
+}, j = (t) => {
+  if (!(t && Array.isArray(t) && t.length > 0))
+    return { stickers: [] };
+  const e = {};
+  return t.forEach((n) => {
+    const { badge_id: r, name: o } = n;
+    r && o && (e[r] === void 0 ? e[r] = { name: o, count: 1 } : e[r] = { name: o, count: e[r].count + 1 });
+  }), { stickers: Object.values(e) };
+}, $ = (t) => t >= m.LAPTOPL ? {
+  containerStyle: a`
+        margin: 110px auto;
+        margin-bottom: 48px;
+        max-width: 1040px;
+        width: 100%;
+      `
+} : t < m.TABLET ? {
+  containerStyle: a`
+        margin: 110px 40px;
+        margin-bottom: 48px;
+        flex-direction: column;
+        width: 100%;
+      `
+} : t < m.LAPTOP ? {
+  containerStyle: a`
+        max-width: 784px;
+        width: 100%;
+        margin: 100px auto;
+        flex-direction: column;
+      `
+} : {
+  containerStyle: a`
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin: 110px 120px;
+      margin-bottom: 48px;
+    `
+}, O = ({
+  curriculumHomeData: t,
+  rewardHomeData: c,
+  programStream: e = "MATH",
+  currentScreenWidth: n,
+  renderOnTeacher: r = !1
+}) => {
+  const { data: o } = t || {}, { curriculum_map: s } = o || {}, { belts: u, goals: x } = s || {}, { data: f } = c || {}, { user_rewards: g, user_stickers: d } = f || {}, { elements: w } = C(g || []), { stickers: E } = j(d || []), { containerStyle: S } = $(n) || {};
+  return /* @__PURE__ */ y(
+    _,
+    {
+      $flexDirection: "row",
+      $justifyContent: "space-between",
+      $containerStyle: S,
+      $renderOnTeacher: r,
+      children: [
+        /* @__PURE__ */ i(D, { beltStats: u, goalStats: x, currentScreenWidth: n }),
+        /* @__PURE__ */ i(l, { width: 60, height: 30 }),
+        /* @__PURE__ */ i(
+          p,
+          {
+            elements: w,
+            programStream: e,
+            currentScreenWidth: n
+          }
+        ),
+        /* @__PURE__ */ i(l, { width: 60, height: 30 }),
+        /* @__PURE__ */ i(
+          p,
+          {
+            elements: E,
+            isSticker: !0,
+            currentScreenWidth: n,
+            lotties: k
+          }
+        )
+      ]
+    }
+  );
+}, F = b(O);
+export {
+  F as default
+};
+//# sourceMappingURL=belts-elements-stickers.js.map

package/dist/features/wins-dashboard/belts-elements-stickers/belts-elements-stickers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"belts-elements-stickers.js","sources":["../../../../src/features/wins-dashboard/belts-elements-stickers/belts-elements-stickers.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport { INSTRUCTION_REWARDS, MATH_REWARDS, SCREEN_SIZES, StickerMap } from '../constants';\nimport Belts from './belts';\nimport RewardElements from './reward-elements';\n\ninterface WrapperProps {\n  $containerStyle?: ReturnType<typeof css>;\n  $renderOnTeacher?: boolean;\n}\n\nconst Wrapper = styled(FlexView)<WrapperProps>`\n  justify-content: space-between;\n  margin: 110px 120px;\n  margin-bottom: 48px;\n  ${({ $containerStyle }) => $containerStyle}\n\n  ${({ $renderOnTeacher }) =>\n    $renderOnTeacher &&\n    css`\n      margin: 50px auto;\n      padding: 0 16px;\n    `}\n`;\n\ninterface RewardElement {\n  aggregate_for?: { name?: string };\n  aggregates?: number;\n}\n\ninterface StickerElement {\n  badge_id?: string;\n  name?: string;\n}\n\nconst getRewardElements = (\n  elements: RewardElement[],\n): { elements: Array<{ name: string; count: number }> } => {\n  const isElementsExist = elements && Array.isArray(elements) && elements.length > 0;\n\n  if (!isElementsExist) {\n    return { elements: [] };\n  }\n\n  const elementsData = {\n    elements: [] as Array<{ name: string; count: number }>,\n  };\n\n  elements.forEach(item => {\n    const { aggregate_for: rewardData, aggregates: totalCount } = item || {};\n    const { name } = rewardData || {};\n\n    if (name && [...MATH_REWARDS, ...INSTRUCTION_REWARDS].includes(name)) {\n      elementsData.elements.push({ name, count: totalCount || 0 });\n    }\n  });\n\n  return elementsData;\n};\n\nconst getRewardStickers = (\n  stickers: StickerElement[],\n): { stickers: Array<{ name: string; count: number }> } => {\n  const isStickersExist = stickers && Array.isArray(stickers) && stickers.length > 0;\n\n  if (!isStickersExist) {\n    return { stickers: [] };\n  }\n\n  const stickersCount: Record<string, { name: string; count: number }> = {};\n\n  stickers.forEach(item => {\n    const { badge_id: badgeId, name } = item;\n\n    if (badgeId && name) {\n      if (stickersCount[badgeId] === undefined) {\n        stickersCount[badgeId] = { name, count: 1 };\n      } else {\n        stickersCount[badgeId] = { name, count: stickersCount[badgeId].count + 1 };\n      }\n    }\n  });\n\n  return { stickers: Object.values(stickersCount) };\n};\n\nconst getBadgeContainerConfig = (currentScreenWidth: number) => {\n  if (currentScreenWidth >= SCREEN_SIZES.LAPTOPL) {\n    return {\n      containerStyle: css`\n        margin: 110px auto;\n        margin-bottom: 48px;\n        max-width: 1040px;\n        width: 100%;\n      `,\n    };\n  }\n\n  if (currentScreenWidth < SCREEN_SIZES.TABLET) {\n    return {\n      containerStyle: css`\n        margin: 110px 40px;\n        margin-bottom: 48px;\n        flex-direction: column;\n        width: 100%;\n      `,\n    };\n  }\n\n  if (currentScreenWidth < SCREEN_SIZES.LAPTOP) {\n    return {\n      containerStyle: css`\n        max-width: 784px;\n        width: 100%;\n        margin: 100px auto;\n        flex-direction: column;\n      `,\n    };\n  }\n\n  return {\n    containerStyle: css`\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      margin: 110px 120px;\n      margin-bottom: 48px;\n    `,\n  };\n};\n\n// Types for component props\ninterface CurriculumMap {\n  belts?: {\n    current_belt_type?: string;\n    goals_required?: number;\n  };\n  goals?: {\n    completed_goals: number;\n    total_goals: number;\n  };\n}\n\ninterface CurriculumHomeData {\n  data?: {\n    curriculum_map?: CurriculumMap;\n  };\n}\n\ninterface RewardHomeData {\n  data?: {\n    user_rewards?: RewardElement[];\n    user_stickers?: StickerElement[];\n  };\n}\n\ninterface BeltsElementsStickersProps {\n  curriculumHomeData?: CurriculumHomeData;\n  rewardHomeData?: RewardHomeData;\n  programStream?: string;\n  currentScreenWidth: number;\n  renderOnTeacher?: boolean;\n}\n\nconst BeltsElementsStickers: React.FC<BeltsElementsStickersProps> = ({\n  curriculumHomeData,\n  rewardHomeData,\n  programStream = 'MATH',\n  currentScreenWidth,\n  renderOnTeacher = false,\n}) => {\n  const { data: curriculumData } = curriculumHomeData || {};\n  const { curriculum_map: curriculumMap } = curriculumData || {};\n  const { belts: beltStats, goals: goalStats } = curriculumMap || {};\n  const { data: rewardHome } = rewardHomeData || {};\n  const { user_rewards: rewardElementsData, user_stickers: rewardStickersData } = rewardHome || {};\n  const { elements } = getRewardElements(rewardElementsData || []);\n  const { stickers } = getRewardStickers(rewardStickersData || []);\n  const { containerStyle } = getBadgeContainerConfig(currentScreenWidth) || {};\n\n  return (\n    <Wrapper\n      $flexDirection=\"row\"\n      $justifyContent=\"space-between\"\n      $containerStyle={containerStyle}\n      $renderOnTeacher={renderOnTeacher}\n    >\n      <Belts beltStats={beltStats} goalStats={goalStats} currentScreenWidth={currentScreenWidth} />\n      <Separator width={60} height={30} />\n      <RewardElements\n        elements={elements}\n        programStream={programStream}\n        currentScreenWidth={currentScreenWidth}\n      />\n      <Separator width={60} height={30} />\n      <RewardElements\n        elements={stickers}\n        isSticker\n        currentScreenWidth={currentScreenWidth}\n        lotties={StickerMap}\n      />\n    </Wrapper>\n  );\n};\n\nexport default memo(BeltsElementsStickers);\n"],"names":["Wrapper","styled","FlexView","$containerStyle","$renderOnTeacher","css","getRewardElements","elements","elementsData","item","rewardData","totalCount","name","MATH_REWARDS","INSTRUCTION_REWARDS","getRewardStickers","stickers","stickersCount","badgeId","getBadgeContainerConfig","currentScreenWidth","SCREEN_SIZES","BeltsElementsStickers","curriculumHomeData","rewardHomeData","programStream","renderOnTeacher","curriculumData","curriculumMap","beltStats","goalStats","rewardHome","rewardElementsData","rewardStickersData","containerStyle","jsxs","jsx","Belts","Separator","RewardElements","StickerMap","beltsElementsStickers","memo"],"mappings":"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"}

package/dist/features/wins-dashboard/belts-elements-stickers/belts.js

@@ -0,0 +1,95 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { memo as w } from "react";
+import s, { css as c } from "styled-components";
+import E from "../../ui/arrow-tooltip/arrow-tooltip.js";
+import g from "../../ui/layout/flex-view.js";
+import h from "../../ui/separator/separator.js";
+import m from "../../ui/text/text.js";
+import { SCREEN_SIZES as p, getBeltIcon as x } from "../constants.js";
+import u from "./progress-bar-horizontal.js";
+const y = "Black", P = s.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  ${({ $currentScreenWidth: e }) => e < p.LAPTOP && c`
+      width: 80%;
+      flex-direction: row;
+    `}
+`, _ = s(g)`
+  min-width: 250px;
+  ${({ $currentScreenWidth: e }) => e < p.LAPTOP && c`
+      min-width: 180px;
+    `}
+`, A = s(g)`
+  width: 120px;
+  align-items: center;
+  padding-left: 22px;
+`, b = s.img`
+  width: 142px;
+  height: 110px;
+  ${({ $isBeltsExist: e }) => !e && c`
+      filter: grayscale(100%);
+      opacity: 20%;
+    `};
+  ${({ $currentScreenWidth: e }) => e < p.LAPTOP && c`
+      width: 104px;
+      height: 80px;
+    `}
+`, Y = s(g)`
+  width: 250px;
+`, C = s(h)`
+  ${({ $currentScreenWidth: e }) => e < p.LAPTOP && c`
+      height: 52px;
+    `}
+`, L = s(m)`
+  opacity: ${({ $isBeltsExist: e }) => !e && "50%"};
+`, S = (e, l, o, r) => {
+  let i = `${e}/${l} goal mastered`;
+  const a = l - e;
+  return o ? e === l ? i = "Congrats! You're now a Black Belt" : r ? i = `Next Belt: ${r} ${r > 1 ? "goals" : "goal"} away` : i = e < l ? `Next Belt: ${a} ${a > 1 ? "goals" : "goal"} away` : "Congrats! You're now a Black Belt" : o || (i = "You have no belts earned"), i;
+}, R = () => /* @__PURE__ */ t(m, { $renderAs: "body3", $color: "WHITE", children: "You can't earn belts for the selected program" }), I = ({ beltStats: e, goalStats: l, currentScreenWidth: o }) => {
+  const { current_belt_type: r, goals_required: i } = e || {}, { completed_goals: a = 0, total_goals: $ = 1 } = l || {}, n = !!r, f = n ? `${r && r.toUpperCase()} BELT` : "BELTS", B = Math.floor(a * 100 / $), T = S(a, $, n, i);
+  return /* @__PURE__ */ t(
+    E,
+    {
+      position: "bottom",
+      tooltipItem: R(),
+      renderAs: "primary",
+      hidden: n,
+      children: /* @__PURE__ */ d(P, { $currentScreenWidth: o, children: [
+        /* @__PURE__ */ d(_, { $currentScreenWidth: o, children: [
+          /* @__PURE__ */ t(m, { $renderAs: "h5", children: f }),
+          /* @__PURE__ */ t(h, { height: 24 }),
+          /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(
+            b,
+            {
+              $currentScreenWidth: o,
+              $isBeltsExist: n,
+              src: n ? x(r || "") : x(y),
+              alt: "Belt"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ d(Y, { children: [
+          /* @__PURE__ */ t(C, { $currentScreenWidth: o, height: 38 }),
+          /* @__PURE__ */ t(
+            u,
+            {
+              progress: B,
+              height: 4,
+              backgroundColor: "GREY_1",
+              progressColor: n ? "GREY_4" : "GREY_2"
+            }
+          ),
+          /* @__PURE__ */ t(h, { height: 8 }),
+          /* @__PURE__ */ t(L, { $isBeltsExist: n, $renderAs: "body3", $color: "GREY_4", children: T })
+        ] })
+      ] })
+    }
+  );
+}, F = w(I);
+export {
+  F as default
+};
+//# sourceMappingURL=belts.js.map

package/dist/features/wins-dashboard/belts-elements-stickers/belts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"belts.js","sources":["../../../../src/features/wins-dashboard/belts-elements-stickers/belts.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { getBeltIcon, SCREEN_SIZES } from '../constants';\nimport ProgressBarHorizontal from './progress-bar-horizontal';\n\nconst DEFAULT_BELT_TYPE = 'Black';\n\ninterface ContainerProps {\n  $currentScreenWidth: number;\n}\n\nconst Container = styled.div<ContainerProps>`\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  align-items: center;\n  ${({ $currentScreenWidth }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      width: 80%;\n      flex-direction: row;\n    `}\n`;\n\ninterface HeaderContainerProps {\n  $currentScreenWidth: number;\n}\n\nconst HeaderContainer = styled(FlexView)<HeaderContainerProps>`\n  min-width: 250px;\n  ${({ $currentScreenWidth }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      min-width: 180px;\n    `}\n`;\n\nconst ProfileWrapper = styled(FlexView)`\n  width: 120px;\n  align-items: center;\n  padding-left: 22px;\n`;\n\ninterface BeltImgProps {\n  $isBeltsExist: boolean;\n  $currentScreenWidth: number;\n}\n\nconst BeltImg = styled.img<BeltImgProps>`\n  width: 142px;\n  height: 110px;\n  ${({ $isBeltsExist }) =>\n    !$isBeltsExist &&\n    css`\n      filter: grayscale(100%);\n      opacity: 20%;\n    `};\n  ${({ $currentScreenWidth }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      width: 104px;\n      height: 80px;\n    `}\n`;\n\nconst ProgressBarWrapper = styled(FlexView)`\n  width: 250px;\n`;\n\ninterface SeparatorDivProps {\n  $currentScreenWidth: number;\n}\n\nconst SeparatorDiv = styled(Separator)<SeparatorDivProps>`\n  ${({ $currentScreenWidth }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      height: 52px;\n    `}\n`;\n\ninterface BeltTextProps {\n  $isBeltsExist: boolean;\n}\n\nconst BeltText = styled(Text)<BeltTextProps>`\n  opacity: ${({ $isBeltsExist }) => !$isBeltsExist && '50%'};\n`;\n\nconst getBarTitle = (\n  completedGoals: number,\n  totalGoals: number,\n  isBeltsExist: boolean,\n  nextBeltGoals?: number,\n): string => {\n  let title = `${completedGoals}/${totalGoals} goal mastered`;\n  const goalsReq = totalGoals - completedGoals;\n\n  if (isBeltsExist) {\n    if (completedGoals === totalGoals) {\n      title = \"Congrats! You're now a Black Belt\";\n    } else if (nextBeltGoals) {\n      title = `Next Belt: ${nextBeltGoals} ${nextBeltGoals > 1 ? 'goals' : 'goal'} away`;\n    } else {\n      title =\n        completedGoals < totalGoals\n          ? `Next Belt: ${goalsReq} ${goalsReq > 1 ? 'goals' : 'goal'} away`\n          : \"Congrats! You're now a Black Belt\";\n    }\n  } else if (!isBeltsExist) {\n    title = 'You have no belts earned';\n  }\n\n  return title;\n};\n\nconst getToolTipText = () => {\n  return (\n    <Text $renderAs=\"body3\" $color=\"WHITE\">\n      You can&apos;t earn belts for the selected program\n    </Text>\n  );\n};\n\ninterface BeltStats {\n  current_belt_type?: string;\n  goals_required?: number;\n}\n\ninterface GoalStats {\n  completed_goals: number;\n  total_goals: number;\n}\n\ninterface BeltsProps {\n  beltStats?: BeltStats | null;\n  goalStats?: GoalStats | null;\n  currentScreenWidth: number;\n}\n\nconst Belts: React.FC<BeltsProps> = ({ beltStats, goalStats, currentScreenWidth }) => {\n  const { current_belt_type: currentBeltType, goals_required: nextBeltGoals } = beltStats || {};\n  const { completed_goals: completedGoals = 0, total_goals: totalGoals = 1 } = goalStats || {};\n\n  const isBeltsExist = !!currentBeltType;\n  const beltTitle = isBeltsExist\n    ? `${currentBeltType && currentBeltType.toUpperCase()} BELT`\n    : 'BELTS';\n  const progress = Math.floor((completedGoals * 100) / totalGoals);\n  const barTitle = getBarTitle(completedGoals, totalGoals, isBeltsExist, nextBeltGoals);\n\n  return (\n    <ArrowTooltip\n      position=\"bottom\"\n      tooltipItem={getToolTipText()}\n      renderAs=\"primary\"\n      hidden={isBeltsExist}\n    >\n      <Container $currentScreenWidth={currentScreenWidth}>\n        <HeaderContainer $currentScreenWidth={currentScreenWidth}>\n          <Text $renderAs=\"h5\">{beltTitle}</Text>\n          <Separator height={24} />\n          <ProfileWrapper>\n            <BeltImg\n              $currentScreenWidth={currentScreenWidth}\n              $isBeltsExist={isBeltsExist}\n              src={\n                !isBeltsExist ? getBeltIcon(DEFAULT_BELT_TYPE) : getBeltIcon(currentBeltType || '')\n              }\n              alt=\"Belt\"\n            />\n          </ProfileWrapper>\n        </HeaderContainer>\n        <ProgressBarWrapper>\n          <SeparatorDiv $currentScreenWidth={currentScreenWidth} height={38} />\n          <ProgressBarHorizontal\n            progress={progress}\n            height={4}\n            backgroundColor=\"GREY_1\"\n            progressColor={isBeltsExist ? 'GREY_4' : 'GREY_2'}\n          />\n          <Separator height={8} />\n          <BeltText $isBeltsExist={isBeltsExist} $renderAs=\"body3\" $color=\"GREY_4\">\n            {barTitle}\n          </BeltText>\n        </ProgressBarWrapper>\n      </Container>\n    </ArrowTooltip>\n  );\n};\n\nexport default memo(Belts);\n"],"names":["DEFAULT_BELT_TYPE","Container","styled","$currentScreenWidth","SCREEN_SIZES","css","HeaderContainer","FlexView","ProfileWrapper","BeltImg","$isBeltsExist","ProgressBarWrapper","SeparatorDiv","Separator","BeltText","Text","getBarTitle","completedGoals","totalGoals","isBeltsExist","nextBeltGoals","title","goalsReq","getToolTipText","Belts","beltStats","goalStats","currentScreenWidth","currentBeltType","beltTitle","progress","barTitle","jsx","ArrowTooltip","jsxs","getBeltIcon","ProgressBarHorizontal","Belts$1","memo"],"mappings":"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"}