@cuemath/leap 3.2.9-link.0 → 3.2.9-pzd-0.1-testing

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 { memo } from 'react';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport Clickable from '../buttons/clickable/clickable';\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  if (renderAs === 'spotlight') {\n    return (\n      <Styled.ModalContainer $isClosing={isClosing}>\n        <Styled.SpotlightModal $isClosing={isClosing} />\n        {element}\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}>{element}</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","jsxs","Styled.ModalContainer","jsx","Styled.SpotlightModal","Styled.BaseModal","Styled.CloseButtonContainer","Clickable","CrossIcon","Styled.BaseModalContent"],"mappings":";;;;;AAaM,MAAAA,IAAyBC,EAAK,CAAC,EAAE,OAAAC,GAAO,WAAAC,IAAY,IAAO,SAAAC,QAAc;AAC7E,QAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,YAAAC,GAAY,eAAAC,MAAkBN;AAEzD,SAAIG,MAAa,cAEZ,gBAAAI,EAAAC,GAAA,EAAsB,YAAYP,GACjC,UAAA;AAAA,IAAA,gBAAAQ,EAACC,GAAA,EAAsB,YAAYT,EAAW,CAAA;AAAA,IAC7CG;AAAA,EACH,EAAA,CAAA,IAKD,gBAAAK,EAAAD,GAAA,EAAsB,YAAYP,GACjC,UAAC,gBAAAM,EAAAI,GAAA,EAAiB,YAAYV,GAAW,QAAQI,GAC9C,UAAA;AAAA,IAAkBC,MAAA,wBAChBM,GAAA,EAA4B,aAAaP,GACxC,4BAACQ,GAAU,EAAA,OAAM,SAAQ,SAASX,GAChC,4BAACY,GAAU,EAAA,OAAO,IAAI,QAAQ,IAAI,GACpC,EACF,CAAA;AAAA,sBAEDC,GAAA,EAAwB,aAAaV,GAAa,UAAQD,GAAA;AAAA,EAAA,EAC7D,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';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport Error from '../../ui/error/error';\nimport Clickable from '../buttons/clickable/clickable';\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  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","jsx","Styled.ModalContainer","ErrorBoundary","Styled.ModalLoaderWrapper","Error","jsxs","Suspense","AppLoader","Styled.SpotlightModal","Styled.BaseModal","Styled.CloseButtonContainer","Clickable","CrossIcon","Styled.BaseModalContent"],"mappings":";;;;;;;;;AAiBM,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;AAEL,SAAIN,MAAa,cAEZ,gBAAAQ,EAAAC,GAAA,EAAsB,YAAYX,GACjC,UAAA,gBAAAU;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,4BACGC,GAAA,EACC,UAAC,gBAAAH,EAAAI,GAAA,EAAM,QAAO,QAAQ,CAAA,GACxB;AAAA,MAEF,SAASR;AAAA,MAET,UAAA,gBAAAS;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,4BACGH,GAAA,EACC,UAAC,gBAAAH,EAAAO,GAAA,EAAU,QAAO,QAAQ,CAAA,GAC5B;AAAA,UAGF,UAAA;AAAA,YAAA,gBAAAP,EAACQ,GAAA,EAAsB,YAAYlB,EAAW,CAAA;AAAA,YAC7CG;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA,IAKD,gBAAAO,EAAAC,GAAA,EAAsB,YAAYX,GACjC,UAAC,gBAAAe,EAAAI,GAAA,EAAiB,YAAYnB,GAAW,QAAQI,GAC9C,UAAA;AAAA,IAAkBC,MAAA,wBAChBe,GAAA,EAA4B,aAAahB,GACxC,4BAACiB,GAAU,EAAA,OAAM,SAAQ,SAASpB,GAChC,4BAACqB,GAAU,EAAA,OAAO,IAAI,QAAQ,IAAI,GACpC,EACF,CAAA;AAAA,IAED,gBAAAZ,EAAAa,GAAA,EAAwB,aAAanB,GACpC,UAAA,gBAAAM;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,UAAW,gBAAAF,EAAAI,GAAA,EAAM,QAAO,QAAO,MAAK,WAAU;AAAA,QAC9C,SAASR;AAAA,QAET,UAAA,gBAAAI,EAACM,KAAS,UAAU,gBAAAN,EAACO,KAAU,QAAO,OAAO,CAAA,GAAK,UAAQd,EAAA,CAAA;AAAA,MAAA;AAAA,IAAA,GAE9D;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAC;"}

package/dist/features/ui/streak-icon/streak-icon-styled.js

@@ -1,4 +1,4 @@
-import t, { keyframes as o } from "styled-components";
+import i, { keyframes as o } from "styled-components";
 const n = o`
 66%{
   opacity: 0;
@@ -6,29 +6,29 @@ const n = o`
 33%{
   opacity: 1;
 }
-`, a = t.div`
+`, a = i.div`
   height: 32px;
   width: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
-  cursor: pointer;
-`, s = t.div`
+  cursor: ${({ isInteractive: t }) => t ? "pointer" : "default"};
+`, s = i.div`
   height: 90%;
   width: 90%;
   position: absolute;
-  background: ${({ theme: i }) => i.colors.BLACK_1};
+  background: ${({ theme: t }) => t.colors.BLACK_1};
   border-radius: 24px;
-`, d = t.div`
+`, d = i.div`
   height: 90%;
   width: 90%;
   position: absolute;
-  background: ${({ theme: i }) => i.colors.RED};
+  background: ${({ theme: t }) => t.colors.RED};
   border-radius: 32px;
   animation: ${n}
-    ${({ $blinkDelay: i, $blinkDuration: e }) => `${e + i}ms linear infinite`};
-`, c = t.div`
+    ${({ $blinkDelay: t, $blinkDuration: e }) => `${e + t}ms linear infinite`};
+`, c = i.div`
   height: 100%;
   width: 100%;
   display: flex;
@@ -38,22 +38,22 @@ const n = o`
   align-self: center;
   padding-top: 6px;
   z-index: 1;
-`, p = t.div`
+`, l = i.div`
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
-`, l = t.img`
+`, p = i.img`
   width: 100%;
   height: 100%;
 `;
 export {
   d as StreakBg,
   c as StreakContent,
-  p as StreakImg,
+  l as StreakImg,
   s as StreakStaticBg,
   a as StreakWrapper,
-  l as StyledImg
+  p as StyledImg
 };
 //# sourceMappingURL=streak-icon-styled.js.map

package/dist/features/ui/streak-icon/streak-icon-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"streak-icon-styled.js","sources":["../../../../src/features/ui/streak-icon/streak-icon-styled.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nconst fadeInFadeOut = keyframes`\n66%{\n  opacity: 0;\n}\n33%{\n  opacity: 1;\n}\n`;\n\nexport const StreakWrapper = styled.div`\n  height: 32px;\n  width: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: pointer;\n`;\n\nexport const StreakStaticBg = styled.div`\n  height: 90%;\n  width: 90%;\n  position: absolute;\n  background: ${({ theme }) => theme.colors.BLACK_1};\n  border-radius: 24px;\n`;\n\nexport const StreakBg = styled.div<{ $blinkDuration: number; $blinkDelay: number }>`\n  height: 90%;\n  width: 90%;\n  position: absolute;\n  background: ${({ theme }) => theme.colors.RED};\n  border-radius: 32px;\n  animation: ${fadeInFadeOut}\n    ${({ $blinkDelay, $blinkDuration }) => `${$blinkDuration + $blinkDelay}ms linear infinite`};\n`;\n\nexport const StreakContent = styled.div`\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  padding-top: 6px;\n  z-index: 1;\n`;\n\nexport const StreakImg = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n`;\n\nexport const StyledImg = styled.img`\n  width: 100%;\n  height: 100%;\n`;\n"],"names":["fadeInFadeOut","keyframes","StreakWrapper","styled","StreakStaticBg","theme","StreakBg","$blinkDelay","$blinkDuration","StreakContent","StreakImg","StyledImg"],"mappings":";AAEA,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUvBC,IAAiBD,EAAO;AAAA;AAAA;AAAA;AAAA,gBAIrB,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAItCC,IAAWH,EAAO;AAAA;AAAA;AAAA;AAAA,gBAIf,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,GAAG;AAAA;AAAA,eAEhCL,CAAa;AAAA,MACtB,CAAC,EAAE,aAAAO,GAAa,gBAAAC,QAAqB,GAAGA,IAAiBD,CAAW,oBAAoB;AAAA,GAGjFE,IAAgBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYvBO,IAAYP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQnBQ,IAAYR,EAAO;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"streak-icon-styled.js","sources":["../../../../src/features/ui/streak-icon/streak-icon-styled.tsx"],"sourcesContent":["import type { IStreakWrapperProps } from './streak-icon-types';\n\nimport styled, { keyframes } from 'styled-components';\n\nconst fadeInFadeOut = keyframes`\n66%{\n  opacity: 0;\n}\n33%{\n  opacity: 1;\n}\n`;\n\nexport const StreakWrapper = styled.div<IStreakWrapperProps>`\n  height: 32px;\n  width: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: ${({ isInteractive }) => (isInteractive ? 'pointer' : 'default')};\n`;\n\nexport const StreakStaticBg = styled.div`\n  height: 90%;\n  width: 90%;\n  position: absolute;\n  background: ${({ theme }) => theme.colors.BLACK_1};\n  border-radius: 24px;\n`;\n\nexport const StreakBg = styled.div<{ $blinkDuration: number; $blinkDelay: number }>`\n  height: 90%;\n  width: 90%;\n  position: absolute;\n  background: ${({ theme }) => theme.colors.RED};\n  border-radius: 32px;\n  animation: ${fadeInFadeOut}\n    ${({ $blinkDelay, $blinkDuration }) => `${$blinkDuration + $blinkDelay}ms linear infinite`};\n`;\n\nexport const StreakContent = styled.div`\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  padding-top: 6px;\n  z-index: 1;\n`;\n\nexport const StreakImg = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n`;\n\nexport const StyledImg = styled.img`\n  width: 100%;\n  height: 100%;\n`;\n"],"names":["fadeInFadeOut","keyframes","StreakWrapper","styled","isInteractive","StreakStaticBg","theme","StreakBg","$blinkDelay","$blinkDuration","StreakContent","StreakImg","StyledImg"],"mappings":";AAIA,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOxB,CAAC,EAAE,eAAAC,EAAA,MAAqBA,IAAgB,YAAY,SAAU;AAAA,GAG7DC,IAAiBF,EAAO;AAAA;AAAA;AAAA;AAAA,gBAIrB,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAItCC,IAAWJ,EAAO;AAAA;AAAA;AAAA;AAAA,gBAIf,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,GAAG;AAAA;AAAA,eAEhCN,CAAa;AAAA,MACtB,CAAC,EAAE,aAAAQ,GAAa,gBAAAC,QAAqB,GAAGA,IAAiBD,CAAW,oBAAoB;AAAA,GAGjFE,IAAgBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYvBQ,IAAYR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQnBS,IAAYT,EAAO;AAAA;AAAA;AAAA;"}

package/dist/features/ui/streak-icon/streak-icon.js

@@ -1,20 +1,22 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { memo as n } from "react";
-import i from "../../../assets/illustrations/streak-green.svg.js";
-import S from "../../../assets/illustrations/streak-white.svg.js";
-import l from "../text/text.js";
-import { BLINK_DURATION as c, BLINK_DELAY as k } from "./constants.js";
-import { StreakWrapper as p, StreakStaticBg as s, StreakBg as f, StreakContent as d, StreakImg as I, StyledImg as o } from "./streak-icon-styled.js";
-const $ = n(({ value: a, blink: t = !1, ...m }) => /* @__PURE__ */ e(p, { ...m, children: [
-  /* @__PURE__ */ r(s, {}),
-  t && /* @__PURE__ */ r(f, { $blinkDuration: c, $blinkDelay: k }),
-  /* @__PURE__ */ e(d, { children: [
-    /* @__PURE__ */ r(I, { children: t ? /* @__PURE__ */ r(o, { src: S, alt: "Streak" }) : /* @__PURE__ */ r(o, { src: i, alt: "Streak" }) }),
-    /* @__PURE__ */ r(l, { $renderAs: "ab3-bold", $color: "WHITE", $align: "center", children: a })
+import { memo as i } from "react";
+import S from "../../../assets/illustrations/streak-green.svg.js";
+import l from "../../../assets/illustrations/streak-white.svg.js";
+import c from "../text/text.js";
+import { BLINK_DURATION as k, BLINK_DELAY as p } from "./constants.js";
+import { StreakWrapper as s, StreakStaticBg as f, StreakBg as d, StreakContent as I, StreakImg as $, StyledImg as o } from "./streak-icon-styled.js";
+const g = i(
+  ({ value: a, blink: t = !1, isInteractive: m = !0, ...n }) => /* @__PURE__ */ e(s, { isInteractive: m, ...n, children: [
+    /* @__PURE__ */ r(f, {}),
+    t && /* @__PURE__ */ r(d, { $blinkDuration: k, $blinkDelay: p }),
+    /* @__PURE__ */ e(I, { children: [
+      /* @__PURE__ */ r($, { children: t ? /* @__PURE__ */ r(o, { src: l, alt: "Streak" }) : /* @__PURE__ */ r(o, { src: S, alt: "Streak" }) }),
+      /* @__PURE__ */ r(c, { $renderAs: "ab3-bold", $color: "WHITE", $align: "center", children: a })
+    ] })
   ] })
-] })), A = $;
+), G = g;
 export {
-  $ as StreakIcon,
-  A as default
+  g as StreakIcon,
+  G as default
 };
 //# sourceMappingURL=streak-icon.js.map

package/dist/features/ui/streak-icon/streak-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"streak-icon.js","sources":["../../../../src/features/ui/streak-icon/streak-icon.tsx"],"sourcesContent":["import type { IStreakIconProps } from './streak-icon-types';\n\nimport React, { memo } from 'react';\n\nimport StreakGreenSVG from '../../../assets/illustrations/streak-green.svg';\nimport StreakWhiteSVG from '../../../assets/illustrations/streak-white.svg';\nimport Text from '../text/text';\nimport { BLINK_DELAY, BLINK_DURATION } from './constants';\nimport * as S from './streak-icon-styled';\n\nexport const StreakIcon: React.FC<IStreakIconProps> = memo(({ value, blink = false, ...rest }) => {\n  return (\n    <S.StreakWrapper {...rest}>\n      <S.StreakStaticBg />\n      {blink && <S.StreakBg $blinkDuration={BLINK_DURATION} $blinkDelay={BLINK_DELAY} />}\n      <S.StreakContent>\n        <S.StreakImg>\n          {blink ? (\n            <S.StyledImg src={StreakWhiteSVG} alt=\"Streak\" />\n          ) : (\n            <S.StyledImg src={StreakGreenSVG} alt=\"Streak\" />\n          )}\n        </S.StreakImg>\n        <Text $renderAs=\"ab3-bold\" $color=\"WHITE\" $align=\"center\">\n          {value}\n        </Text>\n      </S.StreakContent>\n    </S.StreakWrapper>\n  );\n});\n\nexport default StreakIcon;\n"],"names":["StreakIcon","memo","value","blink","rest","jsxs","S.StreakWrapper","jsx","S.StreakStaticBg","S.StreakBg","BLINK_DURATION","BLINK_DELAY","S.StreakContent","S.StreakImg","S.StyledImg","StreakWhiteSVG","StreakGreenSVG","Text","StreakIcon$1"],"mappings":";;;;;;;AAUa,MAAAA,IAAyCC,EAAK,CAAC,EAAE,OAAAC,GAAO,OAAAC,IAAQ,IAAO,GAAGC,QAElF,gBAAAC,EAAAC,GAAA,EAAiB,GAAGF,GACnB,UAAA;AAAA,EAAC,gBAAAG,EAAAC,GAAA,EAAiB;AAAA,EACjBL,uBAAUM,GAAA,EAAW,gBAAgBC,GAAgB,aAAaC,GAAa;AAAA,EAChF,gBAAAN,EAACO,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAL,EAAAM,GAAA,EACE,UAAAV,sBACEW,GAAA,EAAY,KAAKC,GAAgB,KAAI,UAAS,sBAE9CD,GAAA,EAAY,KAAKE,GAAgB,KAAI,SAAS,CAAA,GAEnD;AAAA,IACA,gBAAAT,EAACU,KAAK,WAAU,YAAW,QAAO,SAAQ,QAAO,UAC9C,UACHf,EAAA,CAAA;AAAA,EAAA,GACF;AACF,EAAA,CAAA,CAEH,GAEDgB,IAAelB;"}
+{"version":3,"file":"streak-icon.js","sources":["../../../../src/features/ui/streak-icon/streak-icon.tsx"],"sourcesContent":["import type { IStreakIconProps } from './streak-icon-types';\n\nimport React, { memo } from 'react';\n\nimport StreakGreenSVG from '../../../assets/illustrations/streak-green.svg';\nimport StreakWhiteSVG from '../../../assets/illustrations/streak-white.svg';\nimport Text from '../text/text';\nimport { BLINK_DELAY, BLINK_DURATION } from './constants';\nimport * as S from './streak-icon-styled';\n\nexport const StreakIcon: React.FC<IStreakIconProps> = memo(\n  ({ value, blink = false, isInteractive = true, ...rest }) => {\n    return (\n      <S.StreakWrapper isInteractive={isInteractive} {...rest}>\n        <S.StreakStaticBg />\n        {blink && <S.StreakBg $blinkDuration={BLINK_DURATION} $blinkDelay={BLINK_DELAY} />}\n        <S.StreakContent>\n          <S.StreakImg>\n            {blink ? (\n              <S.StyledImg src={StreakWhiteSVG} alt=\"Streak\" />\n            ) : (\n              <S.StyledImg src={StreakGreenSVG} alt=\"Streak\" />\n            )}\n          </S.StreakImg>\n          <Text $renderAs=\"ab3-bold\" $color=\"WHITE\" $align=\"center\">\n            {value}\n          </Text>\n        </S.StreakContent>\n      </S.StreakWrapper>\n    );\n  },\n);\n\nexport default StreakIcon;\n"],"names":["StreakIcon","memo","value","blink","isInteractive","rest","S.StreakWrapper","jsx","S.StreakStaticBg","S.StreakBg","BLINK_DURATION","BLINK_DELAY","jsxs","S.StreakContent","S.StreakImg","S.StyledImg","StreakWhiteSVG","StreakGreenSVG","Text","StreakIcon$1"],"mappings":";;;;;;;AAUO,MAAMA,IAAyCC;AAAA,EACpD,CAAC,EAAE,OAAAC,GAAO,OAAAC,IAAQ,IAAO,eAAAC,IAAgB,IAAM,GAAGC,0BAE7CC,GAAA,EAAgB,eAAAF,GAA+B,GAAGC,GACjD,UAAA;AAAA,IAAC,gBAAAE,EAAAC,GAAA,EAAiB;AAAA,IACjBL,uBAAUM,GAAA,EAAW,gBAAgBC,GAAgB,aAAaC,GAAa;AAAA,IAChF,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EACE,UAAAX,sBACEY,GAAA,EAAY,KAAKC,GAAgB,KAAI,UAAS,sBAE9CD,GAAA,EAAY,KAAKE,GAAgB,KAAI,SAAS,CAAA,GAEnD;AAAA,MACA,gBAAAV,EAACW,KAAK,WAAU,YAAW,QAAO,SAAQ,QAAO,UAC9C,UACHhB,EAAA,CAAA;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAGN,GAEAiB,IAAenB;"}

package/dist/features/ui/theme/button.js

@@ -1,48 +1,48 @@
-const d = (a) => ({ sizes: {
+const e = (i) => ({ sizes: {
   xsmall: {
-    height: a * 2,
-    paddingHorizontal: a * 1.375,
+    height: i * 2,
+    paddingHorizontal: i * 1.375,
     textVariant: "ub3-bold",
     borderWidth: 1,
-    iconSize: a,
-    iconPadding: a * 0.25,
-    loaderSize: a * 1.25
+    iconSize: i,
+    iconPadding: i * 0.25,
+    loaderSize: i * 1.25
   },
   small: {
-    height: a * 2.5,
-    paddingHorizontal: a * 1.625,
+    height: i * 2.5,
+    paddingHorizontal: i * 1.625,
     textVariant: "ub2-bold",
     borderWidth: 1,
-    iconSize: a * 1.25,
-    iconPadding: a * 0.375,
-    loaderSize: a * 1.5
+    iconSize: i * 1.25,
+    iconPadding: i * 0.375,
+    loaderSize: i * 1.5
   },
   regular: {
-    height: a * 3,
-    paddingHorizontal: a * 1.875,
+    height: i * 3,
+    paddingHorizontal: i * 1.875,
     textVariant: "ub1-bold",
     borderWidth: 1,
-    iconSize: a * 1.5,
-    iconPadding: a * 0.5,
-    loaderSize: a * 1.75
+    iconSize: i * 1.5,
+    iconPadding: i * 0.5,
+    loaderSize: i * 1.75
   },
   medium: {
-    height: a * 3.5,
-    paddingHorizontal: a * 2.125,
+    height: i * 3.5,
+    paddingHorizontal: i * 2.125,
     textVariant: "ub1-bold",
     borderWidth: 1.5,
-    iconSize: a * 1.5,
-    iconPadding: a * 0.5,
-    loaderSize: a * 2
+    iconSize: i * 1.5,
+    iconPadding: i * 0.5,
+    loaderSize: i * 2
   },
   large: {
-    height: a * 4,
-    paddingHorizontal: a * 2.375,
+    height: i * 4,
+    paddingHorizontal: i * 2.375,
     textVariant: "ub1-bold",
     borderWidth: 2,
-    iconSize: a * 1.5,
-    iconPadding: a * 0.5,
-    loaderSize: a * 2.25
+    iconSize: i * 1.5,
+    iconPadding: i * 0.5,
+    loaderSize: i * 2.25
   }
 }, variants: {
   primary: {
@@ -129,57 +129,6 @@ const d = (a) => ({ sizes: {
       active: "BLACK",
       disabled: "WHITE_T_15"
     }
-  },
-  black: {
-    backgroundColorName: {
-      inactive: "BLACK_1",
-      active: "BLACK_T_60",
-      disabled: "BLACK_T_15"
-    },
-    borderColorName: {
-      inactive: "BLACK_1",
-      active: "BLACK_1",
-      disabled: "BLACK_T_15"
-    },
-    colorName: {
-      inactive: "WHITE_1",
-      active: "WHITE_1",
-      disabled: "WHITE_T_87"
-    }
-  },
-  "black-dark": {
-    backgroundColorName: {
-      inactive: "BLACK_1",
-      active: "BLACK_4",
-      disabled: "WHITE_T_10"
-    },
-    borderColorName: {
-      inactive: "WHITE_1",
-      active: "WHITE_1",
-      disabled: "WHITE_T_15"
-    },
-    colorName: {
-      inactive: "WHITE_1",
-      active: "WHITE_1",
-      disabled: "WHITE_T_38"
-    }
-  },
-  "yellow-dark": {
-    backgroundColorName: {
-      inactive: "YELLOW_4",
-      active: "YELLOW_3",
-      disabled: "WHITE_T_10"
-    },
-    borderColorName: {
-      inactive: "WHITE",
-      active: "WHITE",
-      disabled: "WHITE_T_15"
-    },
-    colorName: {
-      inactive: "BLACK_1",
-      active: "BLACK_1",
-      disabled: "WHITE_T_38"
-    }
   }
   // 'yellow': {
   //   backgroundColorName: {
@@ -198,6 +147,23 @@ const d = (a) => ({ sizes: {
   //     disabled: 'BLACK_T_35',
   //   },
   // },
+  // 'yellow-dark': {
+  //   backgroundColorName: {
+  //     inactive: 'YELLOW_4',
+  //     active: 'WHITE_4',
+  //     disabled: 'WHITE_T_40',
+  //   },
+  //   borderColorName: {
+  //     inactive: 'BLACK_4',
+  //     active: 'BLACK_4',
+  //     disabled: 'WHITE_T_40',
+  //   },
+  //   colorName: {
+  //     inactive: 'BLACK_4',
+  //     active: 'BLACK_4',
+  //     disabled: 'WHITE_T_40',
+  //   },
+  // },
   // 'white': {
   //   backgroundColorName: {
   //     inactive: 'WHITE_1',
@@ -232,8 +198,42 @@ const d = (a) => ({ sizes: {
   //     disabled: 'WHITE_T_40',
   //   },
   // },
+  // 'black': {
+  //   backgroundColorName: {
+  //     inactive: 'BLACK_4',
+  //     active: 'BLACK_T_60',
+  //     disabled: 'BLACK_T_35',
+  //   },
+  //   borderColorName: {
+  //     inactive: 'BLACK_4',
+  //     active: 'BLACK_4',
+  //     disabled: 'BLACK_T_35',
+  //   },
+  //   colorName: {
+  //     inactive: 'WHITE_4',
+  //     active: 'WHITE_4',
+  //     disabled: 'BLACK_T_35',
+  //   },
+  // },
+  // 'black-dark': {
+  //   backgroundColorName: {
+  //     inactive: 'BLACK_4',
+  //     active: 'WHITE_T_40',
+  //     disabled: 'WHITE_T_40',
+  //   },
+  //   borderColorName: {
+  //     inactive: 'WHITE_4',
+  //     active: 'WHITE_4',
+  //     disabled: 'WHITE_T_40',
+  //   },
+  //   colorName: {
+  //     inactive: 'WHITE_4',
+  //     active: 'WHITE_4',
+  //     disabled: 'WHITE_T_40',
+  //   },
+  // },
 } });
 export {
-  d as default
+  e as default
 };
 //# sourceMappingURL=button.js.map

package/dist/features/ui/theme/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../../src/features/ui/theme/button.ts"],"sourcesContent":["import type {\n  IButtonSizeConfig,\n  TButtonSizes,\n  IButtonVariantConfig,\n  TButtonVariants,\n} from '../types';\n\ninterface IGetButtonConfig {\n  (gutter: number): {\n    sizes: Record<TButtonSizes, IButtonSizeConfig>;\n    variants: Record<TButtonVariants, IButtonVariantConfig>;\n  };\n}\n\nconst getButtonConfig: IGetButtonConfig = (gutter: number) => {\n  const sizes: Record<TButtonSizes, IButtonSizeConfig> = {\n    xsmall: {\n      height: gutter * 2,\n      paddingHorizontal: gutter * (1 + 0.375),\n      textVariant: 'ub3-bold',\n      borderWidth: 1,\n      iconSize: gutter,\n      iconPadding: gutter * 0.25,\n      loaderSize: gutter * 1.25,\n    },\n    small: {\n      height: gutter * 2.5,\n      paddingHorizontal: gutter * (1 + 0.625),\n      textVariant: 'ub2-bold',\n      borderWidth: 1,\n      iconSize: gutter * 1.25,\n      iconPadding: gutter * 0.375,\n      loaderSize: gutter * 1.5,\n    },\n    regular: {\n      height: gutter * 3,\n      paddingHorizontal: gutter * (1 + 0.875),\n      textVariant: 'ub1-bold',\n      borderWidth: 1,\n      iconSize: gutter * 1.5,\n      iconPadding: gutter * 0.5,\n      loaderSize: gutter * 1.75,\n    },\n    medium: {\n      height: gutter * 3.5,\n      paddingHorizontal: gutter * (1 + 1.125),\n      textVariant: 'ub1-bold',\n      borderWidth: 1.5,\n      iconSize: gutter * 1.5,\n      iconPadding: gutter * 0.5,\n      loaderSize: gutter * 2,\n    },\n    large: {\n      height: gutter * 4,\n      paddingHorizontal: gutter * (1 + 1.375),\n      textVariant: 'ub1-bold',\n      borderWidth: 2,\n      iconSize: gutter * 1.5,\n      iconPadding: gutter * 0.5,\n      loaderSize: gutter * 2.25,\n    },\n  };\n\n  const variants: Record<TButtonVariants, IButtonVariantConfig> = {\n    'primary': {\n      backgroundColorName: {\n        inactive: 'YELLOW_4',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n    },\n    'secondary': {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n    },\n    'tertiary': {\n      backgroundColorName: {\n        inactive: 'RED',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'WHITE',\n        active: 'WHITE',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n    },\n    'secondary-gray': {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'WHITE_4',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n    },\n    'secondary-dark': {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        disabled: 'WHITE_T_10',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        disabled: 'WHITE_T_38',\n      },\n      borderColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        disabled: 'WHITE_T_15',\n      },\n    },\n    'black': {\n      backgroundColorName: {\n        inactive: 'BLACK_1',\n        active: 'BLACK_T_60',\n        disabled: 'BLACK_T_15',\n      },\n      borderColorName: {\n        inactive: 'BLACK_1',\n        active: 'BLACK_1',\n        disabled: 'BLACK_T_15',\n      },\n      colorName: {\n        inactive: 'WHITE_1',\n        active: 'WHITE_1',\n        disabled: 'WHITE_T_87',\n      },\n    },\n    'black-dark': {\n      backgroundColorName: {\n        inactive: 'BLACK_1',\n        active: 'BLACK_4',\n        disabled: 'WHITE_T_10',\n      },\n      borderColorName: {\n        inactive: 'WHITE_1',\n        active: 'WHITE_1',\n        disabled: 'WHITE_T_15',\n      },\n      colorName: {\n        inactive: 'WHITE_1',\n        active: 'WHITE_1',\n        disabled: 'WHITE_T_38',\n      },\n    },\n    'yellow-dark': {\n      backgroundColorName: {\n        inactive: 'YELLOW_4',\n        active: 'YELLOW_3',\n        disabled: 'WHITE_T_10',\n      },\n      borderColorName: {\n        inactive: 'WHITE',\n        active: 'WHITE',\n        disabled: 'WHITE_T_15',\n      },\n      colorName: {\n        inactive: 'BLACK_1',\n        active: 'BLACK_1',\n        disabled: 'WHITE_T_38',\n      },\n    },\n    // 'yellow': {\n    //   backgroundColorName: {\n    //     inactive: 'YELLOW_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    // },\n\n    // 'white': {\n    //   backgroundColorName: {\n    //     inactive: 'WHITE_1',\n    //     active: 'BLACK_T_35',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    // },\n    // 'white-dark': {\n    //   backgroundColorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_T_70',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    // },\n  };\n\n  return { sizes, variants };\n};\n\nexport default getButtonConfig;\n"],"names":["getButtonConfig","gutter"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../../src/features/ui/theme/button.ts"],"sourcesContent":["import type {\n  IButtonSizeConfig,\n  TButtonSizes,\n  IButtonVariantConfig,\n  TButtonVariants,\n} from '../types';\n\ninterface IGetButtonConfig {\n  (gutter: number): {\n    sizes: Record<TButtonSizes, IButtonSizeConfig>;\n    variants: Record<TButtonVariants, IButtonVariantConfig>;\n  };\n}\n\nconst getButtonConfig: IGetButtonConfig = (gutter: number) => {\n  const sizes: Record<TButtonSizes, IButtonSizeConfig> = {\n    xsmall: {\n      height: gutter * 2,\n      paddingHorizontal: gutter * (1 + 0.375),\n      textVariant: 'ub3-bold',\n      borderWidth: 1,\n      iconSize: gutter,\n      iconPadding: gutter * 0.25,\n      loaderSize: gutter * 1.25,\n    },\n    small: {\n      height: gutter * 2.5,\n      paddingHorizontal: gutter * (1 + 0.625),\n      textVariant: 'ub2-bold',\n      borderWidth: 1,\n      iconSize: gutter * 1.25,\n      iconPadding: gutter * 0.375,\n      loaderSize: gutter * 1.5,\n    },\n    regular: {\n      height: gutter * 3,\n      paddingHorizontal: gutter * (1 + 0.875),\n      textVariant: 'ub1-bold',\n      borderWidth: 1,\n      iconSize: gutter * 1.5,\n      iconPadding: gutter * 0.5,\n      loaderSize: gutter * 1.75,\n    },\n    medium: {\n      height: gutter * 3.5,\n      paddingHorizontal: gutter * (1 + 1.125),\n      textVariant: 'ub1-bold',\n      borderWidth: 1.5,\n      iconSize: gutter * 1.5,\n      iconPadding: gutter * 0.5,\n      loaderSize: gutter * 2,\n    },\n    large: {\n      height: gutter * 4,\n      paddingHorizontal: gutter * (1 + 1.375),\n      textVariant: 'ub1-bold',\n      borderWidth: 2,\n      iconSize: gutter * 1.5,\n      iconPadding: gutter * 0.5,\n      loaderSize: gutter * 2.25,\n    },\n  };\n\n  const variants: Record<TButtonVariants, IButtonVariantConfig> = {\n    'primary': {\n      backgroundColorName: {\n        inactive: 'YELLOW_4',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n    },\n    'secondary': {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n    },\n    'tertiary': {\n      backgroundColorName: {\n        inactive: 'RED',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'WHITE',\n        active: 'WHITE',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n    },\n    'secondary-gray': {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'WHITE_4',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n    },\n    'secondary-dark': {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        disabled: 'WHITE_T_10',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        disabled: 'WHITE_T_38',\n      },\n      borderColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        disabled: 'WHITE_T_15',\n      },\n    },\n    // 'yellow': {\n    //   backgroundColorName: {\n    //     inactive: 'YELLOW_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    // },\n    // 'yellow-dark': {\n    //   backgroundColorName: {\n    //     inactive: 'YELLOW_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    // },\n    // 'white': {\n    //   backgroundColorName: {\n    //     inactive: 'WHITE_1',\n    //     active: 'BLACK_T_35',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    // },\n    // 'white-dark': {\n    //   backgroundColorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_T_70',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    // },\n    // 'black': {\n    //   backgroundColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_T_60',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   colorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    // },\n    // 'black-dark': {\n    //   backgroundColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'WHITE_T_40',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   colorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    // },\n  };\n\n  return { sizes, variants };\n};\n\nexport default getButtonConfig;\n"],"names":["getButtonConfig","gutter"],"mappings":"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"}

package/dist/features/worksheet/worksheet/hooks/use-worksheet-journey.js

@@ -0,0 +1,28 @@
+import { useMemo as p, useEffect as z } from "react";
+import { usePuzzleAttemptJourney as c } from "../../../journey/hooks/use-puzzles-journey/use-puzzle-attempt-journey.js";
+import { usePuzzleReviewJourney as f } from "../../../journey/hooks/use-puzzles-journey/use-puzzle-review-journey.js";
+import { usePuzzleUnassignJourney as l } from "../../../journey/hooks/use-puzzles-journey/use-puzzle-unassign-journey.js";
+import { useJourney as P } from "../../../journey/use-journey/use-journey.js";
+const C = ({ behavior: m }) => {
+  const { maximumAttempts: e, canStartJourney: t } = m, { isJourneyActive: r, clearJourney: a } = P(), { puzzleAttemptCtaRef: i, startJourney: o } = c(), { puzzleReviewCtaRef: y, startJourney: u } = f(), { puzzleUnassignRef: J, startJourney: n } = l(), s = p(() => e === -2, [e]);
+  return z(() => {
+    s && t && !r && (o(), u(), n());
+  }, [
+    t,
+    r,
+    s,
+    o,
+    u,
+    n
+  ]), z(() => () => {
+    a();
+  }, []), {
+    puzzleAttemptCtaRef: i,
+    puzzleReviewCtaRef: y,
+    puzzleUnassignRef: J
+  };
+};
+export {
+  C as useWorksheetJourney
+};
+//# sourceMappingURL=use-worksheet-journey.js.map

package/dist/features/worksheet/worksheet/hooks/use-worksheet-journey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-worksheet-journey.js","sources":["../../../../../src/features/worksheet/worksheet/hooks/use-worksheet-journey.ts"],"sourcesContent":["import type { IWorksheetBehavior } from '../worksheet-types';\n\nimport { useEffect, useMemo } from 'react';\n\nimport { usePuzzleAttemptJourney } from '../../../journey/hooks/use-puzzles-journey/use-puzzle-attempt-journey';\nimport { usePuzzleReviewJourney } from '../../../journey/hooks/use-puzzles-journey/use-puzzle-review-journey';\nimport { usePuzzleUnassignJourney } from '../../../journey/hooks/use-puzzles-journey/use-puzzle-unassign-journey';\nimport { useJourney } from '../../../journey/use-journey/use-journey';\n\ninterface IUseWorksheetJourney {\n  behavior: IWorksheetBehavior;\n}\n\nconst useWorksheetJourney = ({ behavior }: IUseWorksheetJourney) => {\n  const { maximumAttempts, canStartJourney } = behavior;\n\n  const { isJourneyActive, clearJourney } = useJourney();\n\n  const { puzzleAttemptCtaRef, startJourney: startPuzzleAttemptJourney } =\n    usePuzzleAttemptJourney();\n\n  const { puzzleReviewCtaRef, startJourney: startPuzzleReviewJourney } = usePuzzleReviewJourney();\n  const { puzzleUnassignRef, startJourney: startPuzzleUnassignJourney } =\n    usePuzzleUnassignJourney();\n\n  const isPuzzleCard = useMemo(() => maximumAttempts === -2, [maximumAttempts]);\n\n  useEffect(() => {\n    if (isPuzzleCard && canStartJourney && !isJourneyActive) {\n      //* This will be triggered by STUDENT during resume sheet.\n      startPuzzleAttemptJourney();\n      //* This will be triggered by TEACHER during review sheet\n      startPuzzleReviewJourney();\n      //* This will be trigger by TEACHER during preview sheet.\n      startPuzzleUnassignJourney();\n    }\n  }, [\n    canStartJourney,\n    isJourneyActive,\n    isPuzzleCard,\n    startPuzzleAttemptJourney,\n    startPuzzleReviewJourney,\n    startPuzzleUnassignJourney,\n  ]);\n\n  useEffect(() => {\n    return () => {\n      clearJourney();\n    };\n  }, []);\n\n  return {\n    puzzleAttemptCtaRef,\n    puzzleReviewCtaRef,\n    puzzleUnassignRef,\n  };\n};\n\nexport { useWorksheetJourney };\n"],"names":["useWorksheetJourney","behavior","maximumAttempts","canStartJourney","isJourneyActive","clearJourney","useJourney","puzzleAttemptCtaRef","startPuzzleAttemptJourney","usePuzzleAttemptJourney","puzzleReviewCtaRef","startPuzzleReviewJourney","usePuzzleReviewJourney","puzzleUnassignRef","startPuzzleUnassignJourney","usePuzzleUnassignJourney","isPuzzleCard","useMemo","useEffect"],"mappings":";;;;;AAaA,MAAMA,IAAsB,CAAC,EAAE,UAAAC,QAAqC;AAC5D,QAAA,EAAE,iBAAAC,GAAiB,iBAAAC,EAAoB,IAAAF,GAEvC,EAAE,iBAAAG,GAAiB,cAAAC,EAAa,IAAIC,EAAW,GAE/C,EAAE,qBAAAC,GAAqB,cAAcC,MACzCC,EAAwB,GAEpB,EAAE,oBAAAC,GAAoB,cAAcC,MAA6BC,EAAuB,GACxF,EAAE,mBAAAC,GAAmB,cAAcC,MACvCC,EAAyB,GAErBC,IAAeC,EAAQ,MAAMf,MAAoB,IAAI,CAACA,CAAe,CAAC;AAE5E,SAAAgB,EAAU,MAAM;AACV,IAAAF,KAAgBb,KAAmB,CAACC,MAEZI,KAEDG,KAEEG;EAC7B,GACC;AAAA,IACDX;AAAA,IACAC;AAAA,IACAY;AAAA,IACAR;AAAA,IACAG;AAAA,IACAG;AAAA,EAAA,CACD,GAEDI,EAAU,MACD,MAAM;AACE,IAAAb;EAAA,GAEd,CAAE,CAAA,GAEE;AAAA,IACL,qBAAAE;AAAA,IACA,oBAAAG;AAAA,IACA,mBAAAG;AAAA,EAAA;AAEJ;"}

package/dist/features/worksheet/worksheet/worksheet-helpers.js

@@ -1,10 +1,10 @@
 import w from "../../../assets/line-icons/icons/bulb2.js";
 import S from "../../../assets/line-icons/icons/edit-star.js";
 import A from "../../../assets/line-icons/icons/edit2.js";
-import O from "../../../assets/line-icons/icons/question-letter.js";
-import R from "../../../assets/line-icons/icons/star2.js";
+import k from "../../../assets/line-icons/icons/question-letter.js";
+import L from "../../../assets/line-icons/icons/star2.js";
 import b from "../constants/events.js";
-import { OPTIONAL_ITEM_TYPES as L, ACTION_BAR_HEIGHT as k, QUESTION_WIDTH as y, SPLIT_QUESTION_WIDTH as N, CLOZE_FORMULA_RESPONSE_LIMIT as x } from "./constants.js";
+import { OPTIONAL_ITEM_TYPES as O, ACTION_BAR_HEIGHT as R, QUESTION_WIDTH as C, SPLIT_QUESTION_WIDTH as N, CLOZE_FORMULA_RESPONSE_LIMIT as x } from "./constants.js";
 import { QUESTION_TAGS as E } from "./worksheet-types.js";
 const Q = (e) => {
   switch (e) {
@@ -35,7 +35,7 @@ const Q = (e) => {
     return !1;
   const r = e.toLowerCase();
   return r === "intro" || r === "concept-intro";
-}, C = (e) => e.reduce((r, t) => {
+}, y = (e) => e.reduce((r, t) => {
   const [n, s] = t.split(":"), a = n == null ? void 0 : n.trim(), c = s == null ? void 0 : s.trim();
   return !a || !c ? r : {
     ...r,
@@ -61,9 +61,9 @@ const Q = (e) => {
           item_display_number: g,
           section_name: l,
           item_type: r ? o : void 0,
-          is_optional: o ? L.includes(o) : !1,
+          is_optional: o ? O.includes(o) : !1,
           item_tags: a.tags ?? [],
-          item_tags_map: C(a.tags ?? []),
+          item_tags_map: y(a.tags ?? []),
           question_number: h - (d ? 1 : 0),
           total_questions: _.length
         };
@@ -105,7 +105,7 @@ const Q = (e) => {
           item_number: c,
           item_display_number: c + 1,
           item_tags: a.tags ?? [],
-          item_tags_map: C(a.tags ?? []),
+          item_tags_map: y(a.tags ?? []),
           question_number: m,
           total_questions: i.length
         };
@@ -131,7 +131,7 @@ const Q = (e) => {
     });
   }
   return n;
-}, J = ({
+}, z = ({
   questions: e,
   initialQuestion: r,
   initialResponseId: t,
@@ -154,7 +154,7 @@ const Q = (e) => {
   if ((u = e[0]) != null && u.response_id)
     return e[0].response_id;
   throw new Error("Initial question not found");
-}, V = ({
+}, J = ({
   questions: e,
   responses: r,
   behavior: t,
@@ -206,7 +206,7 @@ function M(e, r) {
     }
   };
 }
-const z = (e) => e.reduce(
+const V = (e) => e.reduce(
   (r, t) => ({
     ...r,
     [t.response_id]: M(e, t.response_id)
@@ -217,9 +217,9 @@ const z = (e) => e.reduce(
   return {
     questionsContainerWidth: !e.some(
       (a) => a.questions.some((c) => c.stimulus_review)
-    ) ? y : N,
-    maxQuestionWidth: y,
-    actionbarHeight: t === "bottom" ? k : 0
+    ) ? C : N,
+    maxQuestionWidth: C,
+    actionbarHeight: t === "bottom" ? R : 0
   };
 }, Z = ({
   questions: e,
@@ -352,9 +352,9 @@ const z = (e) => e.reduce(
     case "practice-regular":
       return S;
     case "exit-ticket":
-      return O;
+      return k;
     case "advanced":
-      return R;
+      return L;
     default:
       return w;
   }
@@ -385,16 +385,17 @@ const z = (e) => e.reduce(
   bgColor: "BLACK",
   borderColor: "BLACK_4",
   textColor: "WHITE"
-};
+}, ue = (e) => e ? `${e}_1` : "BLUE_1";
 export {
   ie as checkIsClozeFormulaResponseInvalid,
-  J as getInitialQuestionId,
-  z as getInitialResponses,
-  V as getLastUnlockedQuestionIndex,
+  z as getInitialQuestionId,
+  V as getInitialResponses,
+  J as getLastUnlockedQuestionIndex,
   ne as getNavigationSectionBackgroundColor,
   ae as getNavigationSectionIcon,
   oe as getNavigationSectionName,
   ee as getPaperColorByQuestion,
+  ue as getPuzzleWorksheetBackgroundColor,
   te as getQuestionBackgroundImage,
   re as getQuestionBorderColor,
   M as getQuestionMetadata,