@cuemath/leap 3.2.9-pzd-0.4 → 3.2.10

package/dist/features/journey/comps/coachmark/coachmark.js

@@ -1,17 +1,18 @@
 import { jsx as i, jsxs as g, Fragment as m } from "react/jsx-runtime";
 import L from "../../../../node_modules/lodash.throttle/index.js";
-import { useState as $, useEffect as O, useMemo as p } from "react";
+import { useState as O, useEffect as $, useMemo as p } from "react";
+import { useTheme as R } from "styled-components";
 import c from "../../../ui/arrow-tooltip/arrow-tooltip.js";
-import R from "../../../ui/nudge/nudge.js";
-import { getTheme as a } from "../../../ui/theme/get-theme.js";
+import a from "../../../ui/nudge/nudge.js";
+import { EDeviceType as A } from "../../../ui/theme/constants.js";
 import { IndicatorType as u } from "../../use-journey/constants.js";
-import { CoachmarkBody as A, ClonedElementWrapper as h } from "./coachmark-styled.js";
-import { getTooltipXCoordinates as X } from "./coachmark-utils.js";
+import { CoachmarkBody as X, ClonedElementWrapper as h } from "./coachmark-styled.js";
+import { getTooltipXCoordinates as Y } from "./coachmark-utils.js";
 const V = ({
   coachmark: e,
   isInsideScrollView: T
 }) => {
-  const t = e.originalElementToHighlightRef.current, [C, b] = $(() => {
+  const t = e.originalElementToHighlightRef.current, { device: C, zIndex: I } = R(), [v, E] = O(() => {
     const o = t == null ? void 0 : t.getBoundingClientRect();
     return {
       top: ((o == null ? void 0 : o.top) ?? 0) + window.scrollY,
@@ -21,7 +22,7 @@ const V = ({
     };
   }), n = L(() => {
     const o = t == null ? void 0 : t.getBoundingClientRect();
-    o && b({
+    o && E({
       top: o.top + window.scrollY,
       left: o.left + window.scrollX,
       width: o.width,
@@ -30,21 +31,21 @@ const V = ({
   }, 100), {
     top: r = 0,
     left: l = 0,
-    height: I = 0,
-    width: P = 0
-  } = T ? C : (t == null ? void 0 : t.getBoundingClientRect()) ?? {};
-  O(() => (window.addEventListener("resize", n), window.addEventListener("scroll", n), () => {
+    height: P = 0,
+    width: b = 0
+  } = T ? v : (t == null ? void 0 : t.getBoundingClientRect()) ?? {};
+  $(() => (window.addEventListener("resize", n), window.addEventListener("scroll", n), () => {
     window.removeEventListener("resize", n), window.removeEventListener("scroll", n);
   }), [n, t]);
-  const { zIndex: v, device: y } = a(), w = y === "mobile", d = v.JOURNEY_OVERLAY, s = p(() => t ? window.getComputedStyle(t).position === "absolute" : !1, [t]), f = p(() => {
+  const w = C === A.MOBILE, d = I.JOURNEY_OVERLAY, s = p(() => t ? window.getComputedStyle(t).position === "absolute" : !1, [t]), f = p(() => {
     const o = e.indicator;
     return {
       width: w ? 246 : 264,
       // Can be over ridden
-      tooltipXCoOrdinates: X(o),
+      tooltipXCoOrdinates: Y(o),
       zIndex: d + 1,
       ...o,
-      tooltipItem: /* @__PURE__ */ i(A, { children: o.tooltipItem }),
+      tooltipItem: /* @__PURE__ */ i(X, { children: o.tooltipItem }),
       alwaysVisible: !0,
       renderAs: "primary",
       // Deprecate this
@@ -54,7 +55,7 @@ const V = ({
       type: u.TOOLTIP,
       isAnimated: !0
     };
-  }, [d, e.indicator, w]), E = p(() => {
+  }, [d, e.indicator, w]), y = p(() => {
     const o = e.indicator;
     return {
       ...o,
@@ -64,7 +65,7 @@ const V = ({
   }, [e.indicator, l, r]);
   return !t || !e.isActive ? null : e.type === u.TOOLTIP ? s ? /* @__PURE__ */ g(m, { children: [
     e.elementToHighlight,
-    /* @__PURE__ */ i(h, { $position: "absolute", $top: r, $left: l, children: /* @__PURE__ */ i(c, { ...f, children: /* @__PURE__ */ i("div", { style: { height: I, width: P } }) }) })
+    /* @__PURE__ */ i(h, { $position: "absolute", $top: r, $left: l, children: /* @__PURE__ */ i(c, { ...f, children: /* @__PURE__ */ i("div", { style: { height: P, width: b } }) }) })
   ] }) : /* @__PURE__ */ i(h, { $position: "absolute", $top: r, $left: l, children: /* @__PURE__ */ i(c, { ...f, children: e.elementToHighlight }) }) : e.type === u.NUDGE ? /* @__PURE__ */ g(m, { children: [
     /* @__PURE__ */ i(
       h,
@@ -75,7 +76,7 @@ const V = ({
         children: e.elementToHighlight
       }
     ),
-    /* @__PURE__ */ i(R, { zIndex: d + 1, ...E })
+    /* @__PURE__ */ i(a, { zIndex: d + 1, ...y })
   ] }) : null;
 };
 export {

package/dist/features/journey/comps/coachmark/coachmark.js.map

@@ -1 +1 @@
-{"version":3,"file":"coachmark.js","sources":["../../../../../src/features/journey/comps/coachmark/coachmark.tsx"],"sourcesContent":["import type { IArrowTooltipProps } from '../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../ui/nudge/nudge-types';\nimport type { ICoachmarkProps } from '../../use-journey/journey-context-types';\n\nimport throttle from 'lodash.throttle';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport Nudge from '../../../ui/nudge/nudge';\nimport { getTheme } from '../../../ui/theme/get-theme';\nimport { IndicatorType } from '../../use-journey/constants';\nimport * as S from './coachmark-styled';\nimport { getTooltipXCoordinates } from './coachmark-utils';\n\nexport const Coachmark: React.FC<{ coachmark: ICoachmarkProps; isInsideScrollView: boolean }> = ({\n  coachmark,\n  isInsideScrollView,\n}) => {\n  const targetElement = coachmark.originalElementToHighlightRef.current;\n\n  const [position, setPosition] = useState(() => {\n    const rect = targetElement?.getBoundingClientRect();\n\n    return {\n      top: (rect?.top ?? 0) + window.scrollY,\n      left: rect?.left ?? 0 + window.scrollX,\n      width: rect?.width ?? 0,\n      height: rect?.height ?? 0,\n    };\n  });\n\n  const handlePositionChange = throttle(() => {\n    const rect = targetElement?.getBoundingClientRect();\n\n    if (rect) {\n      setPosition({\n        top: rect.top + window.scrollY,\n        left: rect.left + window.scrollX,\n        width: rect.width,\n        height: rect.height,\n      });\n    }\n  }, 100);\n\n  const {\n    top = 0,\n    left = 0,\n    height = 0,\n    width = 0,\n  } = isInsideScrollView ? position : targetElement?.getBoundingClientRect() ?? {};\n\n  useEffect(() => {\n    window.addEventListener('resize', handlePositionChange);\n    window.addEventListener('scroll', handlePositionChange);\n\n    return () => {\n      window.removeEventListener('resize', handlePositionChange);\n      window.removeEventListener('scroll', handlePositionChange);\n    };\n  }, [handlePositionChange, targetElement]);\n\n  const { zIndex, device } = getTheme();\n  const isMobile = device === 'mobile';\n\n  const BLUR_OVERLAY_Z_INDEX = zIndex.JOURNEY_OVERLAY;\n\n  const isAbsolute = useMemo(() => {\n    if (!targetElement) return false;\n\n    return window.getComputedStyle(targetElement).position === 'absolute';\n  }, [targetElement]);\n\n  const tooltipProps = useMemo(() => {\n    const arrowToolTipProps = coachmark.indicator as IArrowTooltipProps;\n\n    return {\n      width: isMobile ? 246 : 264, // Can be over ridden\n      tooltipXCoOrdinates: getTooltipXCoordinates(arrowToolTipProps),\n      zIndex: BLUR_OVERLAY_Z_INDEX + 1,\n      ...arrowToolTipProps,\n      tooltipItem: <S.CoachmarkBody>{arrowToolTipProps.tooltipItem}</S.CoachmarkBody>,\n      alwaysVisible: true,\n      renderAs: 'primary', // Deprecate this\n      borderWidth: 1,\n      arrowColor: arrowToolTipProps.arrowColor || 'WHITE',\n      borderColor: arrowToolTipProps.borderColor || 'WHITE',\n      type: IndicatorType.TOOLTIP,\n      isAnimated: true,\n    } as IArrowTooltipProps;\n  }, [BLUR_OVERLAY_Z_INDEX, coachmark.indicator, isMobile]);\n\n  const nudgeProps = useMemo(() => {\n    const props: INudgeProps = coachmark.indicator as INudgeProps;\n\n    return {\n      ...props,\n      nudgePointerX: left + (props.nudgePointerX ?? 0),\n      nudgePointerY: top + (props.nudgePointerY ?? 0),\n    };\n  }, [coachmark.indicator, left, top]);\n\n  if (!targetElement || !coachmark.isActive) {\n    return null;\n  }\n\n  if (coachmark.type === IndicatorType.TOOLTIP) {\n    if (isAbsolute) {\n      return (\n        <>\n          {coachmark.elementToHighlight}\n          <S.ClonedElementWrapper $position=\"absolute\" $top={top} $left={left}>\n            <ArrowTooltip {...tooltipProps}>\n              <div style={{ height, width }} />\n            </ArrowTooltip>\n          </S.ClonedElementWrapper>\n        </>\n      );\n    }\n\n    return (\n      <S.ClonedElementWrapper $position=\"absolute\" $top={top} $left={left}>\n        <ArrowTooltip {...tooltipProps}>{coachmark.elementToHighlight}</ArrowTooltip>\n      </S.ClonedElementWrapper>\n    );\n  }\n\n  if (coachmark.type === IndicatorType.NUDGE) {\n    return (\n      <>\n        <S.ClonedElementWrapper\n          $top={isAbsolute ? 0 : top}\n          $left={isAbsolute ? 0 : left}\n          $position={isAbsolute ? 'relative' : 'absolute'}\n        >\n          {coachmark.elementToHighlight}\n        </S.ClonedElementWrapper>\n        <Nudge zIndex={BLUR_OVERLAY_Z_INDEX + 1} {...nudgeProps} />\n      </>\n    );\n  }\n\n  return null;\n};\n"],"names":["Coachmark","coachmark","isInsideScrollView","targetElement","position","setPosition","useState","rect","handlePositionChange","throttle","top","left","height","width","useEffect","zIndex","device","getTheme","isMobile","BLUR_OVERLAY_Z_INDEX","isAbsolute","useMemo","tooltipProps","arrowToolTipProps","getTooltipXCoordinates","jsx","S.CoachmarkBody","IndicatorType","nudgeProps","props","jsxs","Fragment","S.ClonedElementWrapper","ArrowTooltip","Nudge"],"mappings":"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"}
+{"version":3,"file":"coachmark.js","sources":["../../../../../src/features/journey/comps/coachmark/coachmark.tsx"],"sourcesContent":["import type { IArrowTooltipProps } from '../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../ui/nudge/nudge-types';\nimport type { ICoachmarkProps } from '../../use-journey/journey-context-types';\n\nimport throttle from 'lodash.throttle';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport Nudge from '../../../ui/nudge/nudge';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport { IndicatorType } from '../../use-journey/constants';\nimport * as S from './coachmark-styled';\nimport { getTooltipXCoordinates } from './coachmark-utils';\n\nexport const Coachmark: React.FC<{ coachmark: ICoachmarkProps; isInsideScrollView: boolean }> = ({\n  coachmark,\n  isInsideScrollView,\n}) => {\n  const targetElement = coachmark.originalElementToHighlightRef.current;\n  const { device, zIndex } = useTheme();\n\n  const [position, setPosition] = useState(() => {\n    const rect = targetElement?.getBoundingClientRect();\n\n    return {\n      top: (rect?.top ?? 0) + window.scrollY,\n      left: rect?.left ?? 0 + window.scrollX,\n      width: rect?.width ?? 0,\n      height: rect?.height ?? 0,\n    };\n  });\n\n  const handlePositionChange = throttle(() => {\n    const rect = targetElement?.getBoundingClientRect();\n\n    if (rect) {\n      setPosition({\n        top: rect.top + window.scrollY,\n        left: rect.left + window.scrollX,\n        width: rect.width,\n        height: rect.height,\n      });\n    }\n  }, 100);\n\n  const {\n    top = 0,\n    left = 0,\n    height = 0,\n    width = 0,\n  } = isInsideScrollView ? position : targetElement?.getBoundingClientRect() ?? {};\n\n  useEffect(() => {\n    window.addEventListener('resize', handlePositionChange);\n    window.addEventListener('scroll', handlePositionChange);\n\n    return () => {\n      window.removeEventListener('resize', handlePositionChange);\n      window.removeEventListener('scroll', handlePositionChange);\n    };\n  }, [handlePositionChange, targetElement]);\n\n  const isMobile = device === EDeviceType.MOBILE;\n\n  const BLUR_OVERLAY_Z_INDEX = zIndex.JOURNEY_OVERLAY;\n\n  const isAbsolute = useMemo(() => {\n    if (!targetElement) return false;\n\n    return window.getComputedStyle(targetElement).position === 'absolute';\n  }, [targetElement]);\n\n  const tooltipProps = useMemo(() => {\n    const arrowToolTipProps = coachmark.indicator as IArrowTooltipProps;\n\n    return {\n      width: isMobile ? 246 : 264, // Can be over ridden\n      tooltipXCoOrdinates: getTooltipXCoordinates(arrowToolTipProps),\n      zIndex: BLUR_OVERLAY_Z_INDEX + 1,\n      ...arrowToolTipProps,\n      tooltipItem: <S.CoachmarkBody>{arrowToolTipProps.tooltipItem}</S.CoachmarkBody>,\n      alwaysVisible: true,\n      renderAs: 'primary', // Deprecate this\n      borderWidth: 1,\n      arrowColor: arrowToolTipProps.arrowColor || 'WHITE',\n      borderColor: arrowToolTipProps.borderColor || 'WHITE',\n      type: IndicatorType.TOOLTIP,\n      isAnimated: true,\n    } as IArrowTooltipProps;\n  }, [BLUR_OVERLAY_Z_INDEX, coachmark.indicator, isMobile]);\n\n  const nudgeProps = useMemo(() => {\n    const props: INudgeProps = coachmark.indicator as INudgeProps;\n\n    return {\n      ...props,\n      nudgePointerX: left + (props.nudgePointerX ?? 0),\n      nudgePointerY: top + (props.nudgePointerY ?? 0),\n    };\n  }, [coachmark.indicator, left, top]);\n\n  if (!targetElement || !coachmark.isActive) {\n    return null;\n  }\n\n  if (coachmark.type === IndicatorType.TOOLTIP) {\n    if (isAbsolute) {\n      return (\n        <>\n          {coachmark.elementToHighlight}\n          <S.ClonedElementWrapper $position=\"absolute\" $top={top} $left={left}>\n            <ArrowTooltip {...tooltipProps}>\n              <div style={{ height, width }} />\n            </ArrowTooltip>\n          </S.ClonedElementWrapper>\n        </>\n      );\n    }\n\n    return (\n      <S.ClonedElementWrapper $position=\"absolute\" $top={top} $left={left}>\n        <ArrowTooltip {...tooltipProps}>{coachmark.elementToHighlight}</ArrowTooltip>\n      </S.ClonedElementWrapper>\n    );\n  }\n\n  if (coachmark.type === IndicatorType.NUDGE) {\n    return (\n      <>\n        <S.ClonedElementWrapper\n          $top={isAbsolute ? 0 : top}\n          $left={isAbsolute ? 0 : left}\n          $position={isAbsolute ? 'relative' : 'absolute'}\n        >\n          {coachmark.elementToHighlight}\n        </S.ClonedElementWrapper>\n        <Nudge zIndex={BLUR_OVERLAY_Z_INDEX + 1} {...nudgeProps} />\n      </>\n    );\n  }\n\n  return null;\n};\n"],"names":["Coachmark","coachmark","isInsideScrollView","targetElement","device","zIndex","useTheme","position","setPosition","useState","rect","handlePositionChange","throttle","top","left","height","width","useEffect","isMobile","EDeviceType","BLUR_OVERLAY_Z_INDEX","isAbsolute","useMemo","tooltipProps","arrowToolTipProps","getTooltipXCoordinates","jsx","S.CoachmarkBody","IndicatorType","nudgeProps","props","jsxs","Fragment","S.ClonedElementWrapper","ArrowTooltip","Nudge"],"mappings":"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"}

package/dist/features/journey/hooks/use-home-page-journey/tooltip-item.js

@@ -1,28 +1,22 @@
-import { jsxs as l, jsx as o, Fragment as s } from "react/jsx-runtime";
-import { memo as n } from "react";
-import d from "../../../ui/buttons/button/button.js";
-import p from "../../../ui/layout/flex-view.js";
-import a from "../../../ui/text/text.js";
-const c = ({
-  text: e,
-  element: r,
-  buttonLabel: t,
-  onButtonClick: m,
-  ctaWidth: i
-}) => /* @__PURE__ */ l(p, { $flexRowGapX: 0.75, children: [
-  r ? /* @__PURE__ */ o(s, { children: r }) : /* @__PURE__ */ o(a, { $renderAs: "ab2-bold", children: e }),
+import { jsxs as i, jsx as o, Fragment as l } from "react/jsx-runtime";
+import { memo as s } from "react";
+import n from "../../../ui/buttons/button/button.js";
+import d from "../../../ui/layout/flex-view.js";
+import p from "../../../ui/text/text.js";
+const a = ({ text: e, element: r, buttonLabel: t, onButtonClick: m }) => /* @__PURE__ */ i(d, { $flexRowGapX: 0.75, children: [
+  r ? /* @__PURE__ */ o(l, { children: r }) : /* @__PURE__ */ o(p, { $renderAs: "ab2-bold", children: e }),
   /* @__PURE__ */ o(
-    d,
+    n,
     {
       label: t,
       size: "xsmall",
-      width: i || 96,
+      widthX: 6,
       renderAs: "secondary",
       onClick: m
     }
   )
-] }), T = n(c);
+] }), w = s(a);
 export {
-  T as default
+  w as default
 };
 //# sourceMappingURL=tooltip-item.js.map

package/dist/features/journey/hooks/use-home-page-journey/tooltip-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-item.js","sources":["../../../../../src/features/journey/hooks/use-home-page-journey/tooltip-item.tsx"],"sourcesContent":["import type { JSX } from 'react';\n\nimport { memo } from 'react';\n\nimport Button from '../../../ui/buttons/button/button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\ninterface ITooltipItemProps {\n  text?: string;\n  element?: JSX.Element;\n  buttonLabel: string;\n  onButtonClick: () => void;\n  ctaWidth?: string;\n}\n\nconst TooltipItem = ({\n  text,\n  element,\n  buttonLabel,\n  onButtonClick,\n  ctaWidth,\n}: ITooltipItemProps) => (\n  <FlexView $flexRowGapX={0.75}>\n    {element ? <>{element}</> : <Text $renderAs=\"ab2-bold\">{text}</Text>}\n    <Button\n      label={buttonLabel}\n      size=\"xsmall\"\n      width={ctaWidth || 96}\n      renderAs=\"secondary\"\n      onClick={onButtonClick}\n    />\n  </FlexView>\n);\n\nexport default memo(TooltipItem);\n"],"names":["TooltipItem","text","element","buttonLabel","onButtonClick","ctaWidth","jsxs","FlexView","Text","jsx","Button","TooltipItem$1","memo"],"mappings":";;;;;AAgBA,MAAMA,IAAc,CAAC;AAAA,EACnB,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AACF,MACE,gBAAAC,EAACC,GAAS,EAAA,cAAc,MACrB,UAAA;AAAA,EAAAL,2BAAa,UAAQA,EAAA,CAAA,sBAAOM,GAAK,EAAA,WAAU,YAAY,UAAKP,EAAA,CAAA;AAAA,EAC7D,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOP;AAAA,MACP,MAAK;AAAA,MACL,OAAOE,KAAY;AAAA,MACnB,UAAS;AAAA,MACT,SAASD;AAAA,IAAA;AAAA,EACX;AAAA,EACF,CAAA,GAGaO,IAAAC,EAAKZ,CAAW;"}
+{"version":3,"file":"tooltip-item.js","sources":["../../../../../src/features/journey/hooks/use-home-page-journey/tooltip-item.tsx"],"sourcesContent":["import type { JSX } from 'react';\n\nimport { memo } from 'react';\n\nimport Button from '../../../ui/buttons/button/button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\ninterface ITooltipItemProps {\n  text?: string;\n  element?: JSX.Element;\n  buttonLabel: string;\n  onButtonClick: () => void;\n}\n\nconst TooltipItem = ({ text, element, buttonLabel, onButtonClick }: ITooltipItemProps) => (\n  <FlexView $flexRowGapX={0.75}>\n    {element ? <>{element}</> : <Text $renderAs=\"ab2-bold\">{text}</Text>}\n    <Button\n      label={buttonLabel}\n      size=\"xsmall\"\n      widthX={6}\n      renderAs=\"secondary\"\n      onClick={onButtonClick}\n    />\n  </FlexView>\n);\n\nexport default memo(TooltipItem);\n"],"names":["TooltipItem","text","element","buttonLabel","onButtonClick","jsxs","FlexView","Text","jsx","Button","TooltipItem$1","memo"],"mappings":";;;;;AAeA,MAAMA,IAAc,CAAC,EAAE,MAAAC,GAAM,SAAAC,GAAS,aAAAC,GAAa,eAAAC,QACjD,gBAAAC,EAACC,GAAS,EAAA,cAAc,MACrB,UAAA;AAAA,EAAAJ,2BAAa,UAAQA,EAAA,CAAA,sBAAOK,GAAK,EAAA,WAAU,YAAY,UAAKN,EAAA,CAAA;AAAA,EAC7D,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAON;AAAA,MACP,MAAK;AAAA,MACL,QAAQ;AAAA,MACR,UAAS;AAAA,MACT,SAASC;AAAA,IAAA;AAAA,EACX;AAAA,EACF,CAAA,GAGaM,IAAAC,EAAKX,CAAW;"}

package/dist/features/journey/journey-id/journey-id-student.js

@@ -1,5 +1,5 @@
-var R = /* @__PURE__ */ ((E) => (E.CIRCLE_ACTIVITIES_INTRO_JOURNEY = "CIRCLE_ACTIVITIES_INTRO_JOURNEY", E.CIRCLE_LEADERBOARD_INTRO_JOURNEY = "CIRCLE_LEADERBOARD_INTRO_JOURNEY", E.CIRCLE_POINTS_REWARD_JOURNEY = "CIRCLE_POINTS_REWARD_JOURNEY", E.CIRCLE_STREAK_UPDATE_JOURNEY = "CIRCLE_STREAK_UPDATE_JOURNEY", E.CIRCLE_TUTORIAL_JOURNEY = "CIRCLE_TUTORIAL_JOURNEY", E.CIRCLE_TABLES_INTRO_JOURNEY = "CIRCLE_TABLES_INTRO_JOURNEY", E.CIRCLE_TABLES_INFINTE_JOURNEY = "CIRCLE_TABLES_INFINITE_JOURNEY", E.CIRCLE_LESSONS_K_1_INTRO_JOURNEY = "CIRCLE_LESSONS_K_1_INTRO_JOURNEY", E.CIRCLE_STREAK_REDUCTION_JOURNEY = "CIRCLE_STREAK_REDUCTION_JOURNEY", E.HOMEPAGE_JOURNEY = "HOMEPAGE_JOURNEY", E.CHAPTER_PAGE_JOURNEY = "CHAPTER_PAGE_JOURNEY", E.PUZZLE_ATTEMPT_JOURNEY = "PUZZLE_ATTEMPT_JOURNEY", E.CHALLENGE_ARENA_JOURNEY = "CHALLENGE_ARENA_JOURNEY", E.PUZZLE_ASSIGNED_JOURNEY = "PUZZLE_ASSIGNED_JOURNEY", E.PUZZLE_DASHBOARD_JOURNEY = "PUZZLE_DASHBOARD_JOURNEY", E))(R || {});
+var E = /* @__PURE__ */ ((R) => (R.CIRCLE_ACTIVITIES_INTRO_JOURNEY = "CIRCLE_ACTIVITIES_INTRO_JOURNEY", R.CIRCLE_LEADERBOARD_INTRO_JOURNEY = "CIRCLE_LEADERBOARD_INTRO_JOURNEY", R.CIRCLE_POINTS_REWARD_JOURNEY = "CIRCLE_POINTS_REWARD_JOURNEY", R.CIRCLE_STREAK_UPDATE_JOURNEY = "CIRCLE_STREAK_UPDATE_JOURNEY", R.CIRCLE_TUTORIAL_JOURNEY = "CIRCLE_TUTORIAL_JOURNEY", R.CIRCLE_TABLES_INTRO_JOURNEY = "CIRCLE_TABLES_INTRO_JOURNEY", R.CIRCLE_TABLES_INFINTE_JOURNEY = "CIRCLE_TABLES_INFINITE_JOURNEY", R.CIRCLE_LESSONS_K_1_INTRO_JOURNEY = "CIRCLE_LESSONS_K_1_INTRO_JOURNEY", R.CIRCLE_STREAK_REDUCTION_JOURNEY = "CIRCLE_STREAK_REDUCTION_JOURNEY", R.HOMEPAGE_JOURNEY = "HOMEPAGE_JOURNEY", R.CHAPTER_PAGE_JOURNEY = "CHAPTER_PAGE_JOURNEY", R.CHALLENGE_ARENA_JOURNEY = "CHALLENGE_ARENA_JOURNEY", R))(E || {});
 export {
-  R as JOURNEY_ID_STUDENT
+  E as JOURNEY_ID_STUDENT
 };
 //# sourceMappingURL=journey-id-student.js.map

package/dist/features/journey/journey-id/journey-id-student.js.map

@@ -1 +1 @@
-{"version":3,"file":"journey-id-student.js","sources":["../../../../src/features/journey/journey-id/journey-id-student.ts"],"sourcesContent":["export enum JOURNEY_ID_STUDENT {\n  CIRCLE_ACTIVITIES_INTRO_JOURNEY = 'CIRCLE_ACTIVITIES_INTRO_JOURNEY',\n  CIRCLE_LEADERBOARD_INTRO_JOURNEY = 'CIRCLE_LEADERBOARD_INTRO_JOURNEY',\n  CIRCLE_POINTS_REWARD_JOURNEY = 'CIRCLE_POINTS_REWARD_JOURNEY',\n  CIRCLE_STREAK_UPDATE_JOURNEY = 'CIRCLE_STREAK_UPDATE_JOURNEY',\n  CIRCLE_TUTORIAL_JOURNEY = 'CIRCLE_TUTORIAL_JOURNEY',\n  CIRCLE_TABLES_INTRO_JOURNEY = 'CIRCLE_TABLES_INTRO_JOURNEY',\n  CIRCLE_TABLES_INFINTE_JOURNEY = 'CIRCLE_TABLES_INFINITE_JOURNEY',\n  CIRCLE_LESSONS_K_1_INTRO_JOURNEY = 'CIRCLE_LESSONS_K_1_INTRO_JOURNEY',\n\n  // TODO: Deprecate bottom journeys, they are not actually journeys\n  CIRCLE_STREAK_REDUCTION_JOURNEY = 'CIRCLE_STREAK_REDUCTION_JOURNEY',\n  HOMEPAGE_JOURNEY = 'HOMEPAGE_JOURNEY',\n  CHAPTER_PAGE_JOURNEY = 'CHAPTER_PAGE_JOURNEY',\n  PUZZLE_ATTEMPT_JOURNEY = 'PUZZLE_ATTEMPT_JOURNEY',\n  CHALLENGE_ARENA_JOURNEY = 'CHALLENGE_ARENA_JOURNEY',\n  PUZZLE_ASSIGNED_JOURNEY = 'PUZZLE_ASSIGNED_JOURNEY',\n  PUZZLE_DASHBOARD_JOURNEY = 'PUZZLE_DASHBOARD_JOURNEY',\n}\n"],"names":["JOURNEY_ID_STUDENT"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,kCAAkC,mCAClCA,EAAA,mCAAmC,oCACnCA,EAAA,+BAA+B,gCAC/BA,EAAA,+BAA+B,gCAC/BA,EAAA,0BAA0B,2BAC1BA,EAAA,8BAA8B,+BAC9BA,EAAA,gCAAgC,kCAChCA,EAAA,mCAAmC,oCAGnCA,EAAA,kCAAkC,mCAClCA,EAAA,mBAAmB,oBACnBA,EAAA,uBAAuB,wBACvBA,EAAA,yBAAyB,0BACzBA,EAAA,0BAA0B,2BAC1BA,EAAA,0BAA0B,2BAC1BA,EAAA,2BAA2B,4BAjBjBA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"journey-id-student.js","sources":["../../../../src/features/journey/journey-id/journey-id-student.ts"],"sourcesContent":["export enum JOURNEY_ID_STUDENT {\n  CIRCLE_ACTIVITIES_INTRO_JOURNEY = 'CIRCLE_ACTIVITIES_INTRO_JOURNEY',\n  CIRCLE_LEADERBOARD_INTRO_JOURNEY = 'CIRCLE_LEADERBOARD_INTRO_JOURNEY',\n  CIRCLE_POINTS_REWARD_JOURNEY = 'CIRCLE_POINTS_REWARD_JOURNEY',\n  CIRCLE_STREAK_UPDATE_JOURNEY = 'CIRCLE_STREAK_UPDATE_JOURNEY',\n  CIRCLE_TUTORIAL_JOURNEY = 'CIRCLE_TUTORIAL_JOURNEY',\n  CIRCLE_TABLES_INTRO_JOURNEY = 'CIRCLE_TABLES_INTRO_JOURNEY',\n  CIRCLE_TABLES_INFINTE_JOURNEY = 'CIRCLE_TABLES_INFINITE_JOURNEY',\n  CIRCLE_LESSONS_K_1_INTRO_JOURNEY = 'CIRCLE_LESSONS_K_1_INTRO_JOURNEY',\n\n  // TODO: Deprecate bottom journeys, they are not actually journeys\n  CIRCLE_STREAK_REDUCTION_JOURNEY = 'CIRCLE_STREAK_REDUCTION_JOURNEY',\n  HOMEPAGE_JOURNEY = 'HOMEPAGE_JOURNEY',\n  CHAPTER_PAGE_JOURNEY = 'CHAPTER_PAGE_JOURNEY',\n  CHALLENGE_ARENA_JOURNEY = 'CHALLENGE_ARENA_JOURNEY',\n}\n"],"names":["JOURNEY_ID_STUDENT"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,kCAAkC,mCAClCA,EAAA,mCAAmC,oCACnCA,EAAA,+BAA+B,gCAC/BA,EAAA,+BAA+B,gCAC/BA,EAAA,0BAA0B,2BAC1BA,EAAA,8BAA8B,+BAC9BA,EAAA,gCAAgC,kCAChCA,EAAA,mCAAmC,oCAGnCA,EAAA,kCAAkC,mCAClCA,EAAA,mBAAmB,oBACnBA,EAAA,uBAAuB,wBACvBA,EAAA,0BAA0B,2BAdhBA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/features/journey/journey-id/journey-id-teacher.js

@@ -1,5 +1,5 @@
-var N = /* @__PURE__ */ ((E) => (E.HOMEPAGE_JOURNEY = "HOMEPAGE_JOURNEY", E.CHAPTER_PAGE_JOURNEY = "CHAPTER_PAGE_JOURNEY", E.CHALLENGE_ARENA_JOURNEY = "CHALLENGE_ARENA_JOURNEY", E.PUZZLE_ASSIGN_JOURNEY = "PUZZLE_ASSIGN_JOURNEY", E.PUZZLE_INTRO_JOURNEY = "PUZZLE_INTRO_JOURNEY", E.PUZZLE_REVIEW_JOURNEY = "PUZZLE_REVIEW_JOURNEY", E.PUZZLE_PROGRESS_JOURNEY = "PUZZLE_PROGRESS_JOURNEY", E.PUZZLE_UNASSIGN_JOURNEY = "PUZZLE_UNASSIGN_JOURNEY", E))(N || {});
+var A = /* @__PURE__ */ ((E) => (E.HOMEPAGE_JOURNEY = "HOMEPAGE_JOURNEY", E.CHAPTER_PAGE_JOURNEY = "CHAPTER_PAGE_JOURNEY", E.CHALLENGE_ARENA_JOURNEY = "CHALLENGE_ARENA_JOURNEY", E))(A || {});
 export {
-  N as JOURNEY_ID_TEACHER
+  A as JOURNEY_ID_TEACHER
 };
 //# sourceMappingURL=journey-id-teacher.js.map

package/dist/features/journey/journey-id/journey-id-teacher.js.map

@@ -1 +1 @@
-{"version":3,"file":"journey-id-teacher.js","sources":["../../../../src/features/journey/journey-id/journey-id-teacher.ts"],"sourcesContent":["export enum JOURNEY_ID_TEACHER {\n  HOMEPAGE_JOURNEY = 'HOMEPAGE_JOURNEY',\n  CHAPTER_PAGE_JOURNEY = 'CHAPTER_PAGE_JOURNEY',\n  CHALLENGE_ARENA_JOURNEY = 'CHALLENGE_ARENA_JOURNEY',\n  PUZZLE_ASSIGN_JOURNEY = 'PUZZLE_ASSIGN_JOURNEY',\n  PUZZLE_INTRO_JOURNEY = 'PUZZLE_INTRO_JOURNEY',\n  PUZZLE_REVIEW_JOURNEY = 'PUZZLE_REVIEW_JOURNEY',\n  PUZZLE_PROGRESS_JOURNEY = 'PUZZLE_PROGRESS_JOURNEY',\n  PUZZLE_UNASSIGN_JOURNEY = 'PUZZLE_UNASSIGN_JOURNEY',\n}\n"],"names":["JOURNEY_ID_TEACHER"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,mBAAmB,oBACnBA,EAAA,uBAAuB,wBACvBA,EAAA,0BAA0B,2BAC1BA,EAAA,wBAAwB,yBACxBA,EAAA,uBAAuB,wBACvBA,EAAA,wBAAwB,yBACxBA,EAAA,0BAA0B,2BAC1BA,EAAA,0BAA0B,2BARhBA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"journey-id-teacher.js","sources":["../../../../src/features/journey/journey-id/journey-id-teacher.ts"],"sourcesContent":["export enum JOURNEY_ID_TEACHER {\n  HOMEPAGE_JOURNEY = 'HOMEPAGE_JOURNEY',\n  CHAPTER_PAGE_JOURNEY = 'CHAPTER_PAGE_JOURNEY',\n  CHALLENGE_ARENA_JOURNEY = 'CHALLENGE_ARENA_JOURNEY',\n}\n"],"names":["JOURNEY_ID_TEACHER"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,mBAAmB,oBACnBA,EAAA,uBAAuB,wBACvBA,EAAA,0BAA0B,2BAHhBA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/features/puzzles/comps/puzzle-card-styled.js

@@ -1,34 +1,79 @@
-import e from "styled-components";
-import r from "../../ui/layout/flex-view.js";
-import i from "../../ui/text/text.js";
-import { getPuzzleCardPattern as p } from "../utils/puzzle-pattern.js";
-const n = e(r)`
+import e, { keyframes as a, css as r } from "styled-components";
+import n from "../../ui/layout/flex-view.js";
+import { getPuzzleCardPattern as l } from "../utils/puzzle-pattern.js";
+const m = a`
+  from { transform: translateY(-100%); }
+  to   { transform: translateY(0); }
+`, o = a`
+  from { transform: rotateY(0deg); }
+  to   { transform: rotateY(360deg); }
+`, c = a`
+  from { transform: translateY(0); opacity: 1; }
+  to   { transform: translateY(-100%); opacity: 0; }
+`, d = e(n)`
   position: relative;
-  cursor: pointer;
 
-  box-shadow: inset 0px 0px 0px 4px ${({ theme: o, $imageHue: t }) => o.colors[`${t}_4`]};
+  box-shadow: inset 0px 0px 0px 4px ${({ theme: t, $imageHue: i }) => t.colors[`${i}_4`]};
 
-  background-image: ${({ $imageHue: o }) => `url(${p(o)})`};
+  background-image: ${({ $imageHue: t }) => `url(${l(t)})`};
   background-size: cover;
 
-  &:hover {
-    outline: 1px solid ${({ theme: o }) => o.colors.BLACK_1};
+  ${({ $animationPhase: t }) => t && r`
+      transform-style: preserve-3d;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(-100%);
+    `}
+
+  ${({ $animationPhase: t, theme: i, $imageHue: s }) => {
+  switch (t) {
+    case "movingIn":
+      return r`
+          visibility: visible;
+          opacity: 1;
+          animation: ${m} 0.5s ease-out forwards;
+        `;
+    case "revealing":
+      return r`
+          visibility: visible;
+          opacity: 1;
+          transform: translateY(0); /* Position after moveIn */
+          animation: ${o} 1s ease-in-out forwards;
+        `;
+    case "visible":
+      return r`
+          visibility: visible;
+          opacity: 1;
+          transform: translateY(0) rotateY(360deg);
+          background-color: ${i.colors[`${s}_2`]};
+          transition: background-color 0.2s ease-in;
+        `;
+    case "assigning":
+      return r`
+          visibility: visible;
+          opacity: 1;
+          transform: translateY(0); /* Reset rotation for this animation */
+          animation: ${o} 1s ease-in-out forwards;
+        `;
+    case "assigned":
+      return r`
+          visibility: visible;
+          opacity: 1;
+          transform: translateY(0) rotateY(360deg);
+        `;
+    case "movingOut":
+      return r`
+          visibility: visible;
+          opacity: 1;
+          transform: translateY(0); /* Start from final position */
+          animation: ${c} 0.5s ease-in forwards;
+        `;
+    default:
+      return "";
   }
-`, x = e(i)`
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: break-spaces;
-`, b = e(r)`
-  position: absolute;
-  top: -10px;
-  right: -10px;
+}}
 `;
 export {
-  n as PuzzleWrapper,
-  b as StickerWrapper,
-  x as Title
+  d as PuzzleWrapper
 };
 //# sourceMappingURL=puzzle-card-styled.js.map

package/dist/features/puzzles/comps/puzzle-card-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"puzzle-card-styled.js","sources":["../../../../src/features/puzzles/comps/puzzle-card-styled.tsx"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { getPuzzleCardPattern } from '../utils/puzzle-pattern';\n\nconst PuzzleWrapper = styled(FlexView)<{ $animationPhase?: string; $imageHue: THueNames }>`\n  position: relative;\n  cursor: pointer;\n\n  box-shadow: inset 0px 0px 0px 4px ${({ theme, $imageHue }) => theme.colors[`${$imageHue}_4`]};\n\n  background-image: ${({ $imageHue }) => `url(${getPuzzleCardPattern($imageHue)})`};\n  background-size: cover;\n\n  &:hover {\n    outline: 1px solid ${({ theme }) => theme.colors.BLACK_1};\n  }\n`;\n\nconst Title = styled(Text)`\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: break-spaces;\n`;\n\nconst StickerWrapper = styled(FlexView)`\n  position: absolute;\n  top: -10px;\n  right: -10px;\n`;\n\nexport { PuzzleWrapper, Title, StickerWrapper };\n"],"names":["PuzzleWrapper","styled","FlexView","theme","$imageHue","getPuzzleCardPattern","Title","Text","StickerWrapper"],"mappings":";;;;AAQM,MAAAA,IAAgBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,sCAIC,CAAC,EAAE,OAAAC,GAAO,WAAAC,QAAgBD,EAAM,OAAO,GAAGC,CAAS,IAAI,CAAC;AAAA;AAAA,sBAExE,CAAC,EAAE,WAAAA,EAAU,MAAM,OAAOC,EAAqBD,CAAS,CAAC,GAAG;AAAA;AAAA;AAAA;AAAA,yBAIzD,CAAC,EAAE,OAAAD,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAItDG,IAAQL,EAAOM,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASnBC,IAAiBP,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"puzzle-card-styled.js","sources":["../../../../src/features/puzzles/comps/puzzle-card-styled.tsx"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport styled, { css, keyframes } from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { getPuzzleCardPattern } from '../utils/puzzle-pattern';\n\n// --- Keyframes for each animation step ---\nconst moveInAnim = keyframes`\n  from { transform: translateY(-100%); }\n  to   { transform: translateY(0); }\n`;\n\nconst rotateYAnim = keyframes`\n  from { transform: rotateY(0deg); }\n  to   { transform: rotateY(360deg); }\n`;\n\nconst moveOutAnim = keyframes`\n  from { transform: translateY(0); opacity: 1; }\n  to   { transform: translateY(-100%); opacity: 0; }\n`;\n\nconst PuzzleWrapper = styled(FlexView)<{ $animationPhase?: string; $imageHue: THueNames }>`\n  position: relative;\n\n  box-shadow: inset 0px 0px 0px 4px ${({ theme, $imageHue }) => theme.colors[`${$imageHue}_4`]};\n\n  background-image: ${({ $imageHue }) => `url(${getPuzzleCardPattern($imageHue)})`};\n  background-size: cover;\n\n  ${({ $animationPhase }) =>\n    $animationPhase &&\n    css`\n      transform-style: preserve-3d;\n      opacity: 0;\n      visibility: hidden;\n      transform: translateY(-100%);\n    `}\n\n  ${({ $animationPhase, theme, $imageHue }) => {\n    switch ($animationPhase) {\n      case 'movingIn':\n        return css`\n          visibility: visible;\n          opacity: 1;\n          animation: ${moveInAnim} 0.5s ease-out forwards;\n        `;\n      case 'revealing':\n        return css`\n          visibility: visible;\n          opacity: 1;\n          transform: translateY(0); /* Position after moveIn */\n          animation: ${rotateYAnim} 1s ease-in-out forwards;\n        `;\n      case 'visible':\n        return css`\n          visibility: visible;\n          opacity: 1;\n          transform: translateY(0) rotateY(360deg);\n          background-color: ${theme.colors[`${$imageHue}_2`]};\n          transition: background-color 0.2s ease-in;\n        `;\n      case 'assigning':\n        return css`\n          visibility: visible;\n          opacity: 1;\n          transform: translateY(0); /* Reset rotation for this animation */\n          animation: ${rotateYAnim} 1s ease-in-out forwards;\n        `;\n      case 'assigned':\n        return css`\n          visibility: visible;\n          opacity: 1;\n          transform: translateY(0) rotateY(360deg);\n        `;\n      case 'movingOut':\n        return css`\n          visibility: visible;\n          opacity: 1;\n          transform: translateY(0); /* Start from final position */\n          animation: ${moveOutAnim} 0.5s ease-in forwards;\n        `;\n      default:\n        return '';\n    }\n  }}\n`;\n\nexport { PuzzleWrapper };\n"],"names":["moveInAnim","keyframes","rotateYAnim","moveOutAnim","PuzzleWrapper","styled","FlexView","theme","$imageHue","getPuzzleCardPattern","$animationPhase","css"],"mappings":";;;AAQA,MAAMA,IAAaC;AAAA;AAAA;AAAA,GAKbC,IAAcD;AAAA;AAAA;AAAA,GAKdE,IAAcF;AAAA;AAAA;AAAA,GAKdG,IAAgBC,EAAOC,CAAQ;AAAA;AAAA;AAAA,sCAGC,CAAC,EAAE,OAAAC,GAAO,WAAAC,QAAgBD,EAAM,OAAO,GAAGC,CAAS,IAAI,CAAC;AAAA;AAAA,sBAExE,CAAC,EAAE,WAAAA,EAAU,MAAM,OAAOC,EAAqBD,CAAS,CAAC,GAAG;AAAA;AAAA;AAAA,IAG9E,CAAC,EAAE,iBAAAE,QACHA,KACAC;AAAA;AAAA;AAAA;AAAA;AAAA,KAKC;AAAA;AAAA,IAED,CAAC,EAAE,iBAAAD,GAAiB,OAAAH,GAAO,WAAAC,QAAgB;AAC3C,UAAQE,GAAiB;AAAA,IACvB,KAAK;AACI,aAAAC;AAAA;AAAA;AAAA,uBAGQX,CAAU;AAAA;AAAA,IAE3B,KAAK;AACI,aAAAW;AAAA;AAAA;AAAA;AAAA,uBAIQT,CAAW;AAAA;AAAA,IAE5B,KAAK;AACI,aAAAS;AAAA;AAAA;AAAA;AAAA,8BAIeJ,EAAM,OAAO,GAAGC,CAAS,IAAI,CAAC;AAAA;AAAA;AAAA,IAGtD,KAAK;AACI,aAAAG;AAAA;AAAA;AAAA;AAAA,uBAIQT,CAAW;AAAA;AAAA,IAE5B,KAAK;AACI,aAAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKT,KAAK;AACI,aAAAA;AAAA;AAAA;AAAA;AAAA,uBAIQR,CAAW;AAAA;AAAA,IAE5B;AACS,aAAA;AAAA,EACX;AACF,CAAC;AAAA;"}

package/dist/features/puzzles/comps/puzzle-card.js

@@ -1,77 +1,35 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { memo as u, useMemo as z, useCallback as L } from "react";
-import P from "../../ui/buttons/clickable/clickable.js";
-import _ from "../../ui/image/image.js";
-import d from "../../ui/layout/flex-view.js";
-import E from "../../ui/lottie-animation/lottie-animation.js";
-import { PUZZLE_ANALYTICS_EVENTS as S } from "../puzzle-analytics-events.js";
-import { getPuzzleStickerLottie as b } from "../utils/puzzle-feedback-celebration.js";
-import { PuzzleWrapper as y, Title as Z, StickerWrapper as k } from "./puzzle-card-styled.js";
-const x = {
-  autoplay: !1,
-  loop: !1,
-  renderer: "canvas"
-}, X = u(
+import { jsx as h } from "react/jsx-runtime";
+import { memo as p } from "react";
+import { PuzzleWrapper as s } from "./puzzle-card-styled.js";
+const c = p(
   ({
-    imageHue: o,
-    imageUrl: s,
-    title: p,
-    height: h = "100%",
-    width: f = "100%",
-    onCardClick: e,
-    userNodeId: i,
-    rewards: r,
-    studentId: n,
-    nodeId: l
-  }) => {
-    const { sticker: c } = (r == null ? void 0 : r[0]) || {}, $ = z(
-      () => ({
-        node_id: l,
-        student_id: n,
-        node_type: "PUZZLE_CARD"
-      }),
-      [l, n]
-    ), m = c ? b(c) : void 0, g = L(() => {
-      i && (e == null || e(i));
-    }, [e, i]);
-    return /* @__PURE__ */ t(
-      P,
-      {
-        label: "",
-        analyticsLabel: S.PUZZLE_VIEWED,
-        analyticsProps: $,
-        onClick: g,
-        children: /* @__PURE__ */ a(
-          y,
-          {
-            $width: f,
-            $height: h,
-            $justifyContent: "center",
-            $alignItems: "center",
-            $imageHue: o,
-            $background: `${o}_2`,
-            children: [
-              /* @__PURE__ */ a(d, { $justifyContent: "center", $alignItems: "center", $flexGap: 12, children: [
-                /* @__PURE__ */ t(_, { src: s ?? "", width: 68, height: 68, withLoader: !1, alt: "Puzzle" }),
-                /* @__PURE__ */ t(Z, { $renderAs: "ab3", $align: "center", $width: "80%", children: p })
-              ] }),
-              m && /* @__PURE__ */ t(k, { $widthX: 2.5, $heightX: 2.5, children: /* @__PURE__ */ t(
-                E,
-                {
-                  width: 40,
-                  height: 40,
-                  src: m,
-                  settings: x
-                }
-              ) })
-            ]
-          }
-        )
-      }
-    );
-  }
+    children: e,
+    imageHue: t,
+    onAnimationEnd: r,
+    animationPhase: o,
+    width: i,
+    widthX: m,
+    height: n,
+    heightX: $,
+    backgroundColor: a
+  }) => /* @__PURE__ */ h(
+    s,
+    {
+      $animationPhase: o,
+      onAnimationEnd: r,
+      $width: i,
+      $height: n,
+      $widthX: m,
+      $heightX: $,
+      $alignItems: "center",
+      $justifyContent: "center",
+      $imageHue: t,
+      $background: a ?? `${t}_6`,
+      children: e
+    }
+  )
 );
 export {
-  X as default
+  c as default
 };
 //# sourceMappingURL=puzzle-card.js.map

package/dist/features/puzzles/comps/puzzle-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"puzzle-card.js","sources":["../../../../src/features/puzzles/comps/puzzle-card.tsx"],"sourcesContent":["import type { IPuzzleCardProps } from './puzzle-card-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport { PUZZLE_ANALYTICS_EVENTS } from '../puzzle-analytics-events';\nimport { getPuzzleStickerLottie } from '../utils/puzzle-feedback-celebration';\nimport * as Styled from './puzzle-card-styled';\n\nconst puzzleStickerLottieSettings = {\n  autoplay: false,\n  loop: false,\n  renderer: 'canvas',\n};\n\nconst PuzzleCard: FC<IPuzzleCardProps> = memo(\n  ({\n    imageHue,\n    imageUrl,\n    title,\n    height = '100%',\n    width = '100%',\n    onCardClick,\n    userNodeId,\n    rewards,\n    studentId,\n    nodeId,\n  }) => {\n    const { sticker } = rewards?.[0] || {};\n\n    const analyticsProps = useMemo(\n      () => ({\n        node_id: nodeId,\n        student_id: studentId,\n        node_type: 'PUZZLE_CARD',\n      }),\n      [nodeId, studentId],\n    );\n\n    const puzzleStickerLottie = sticker ? getPuzzleStickerLottie(sticker) : undefined;\n\n    const handleCardClick = useCallback(() => {\n      if (userNodeId) {\n        onCardClick?.(userNodeId);\n      }\n    }, [onCardClick, userNodeId]);\n\n    return (\n      <Clickable\n        label=\"\"\n        analyticsLabel={PUZZLE_ANALYTICS_EVENTS.PUZZLE_VIEWED}\n        analyticsProps={analyticsProps}\n        onClick={handleCardClick}\n      >\n        <Styled.PuzzleWrapper\n          $width={width}\n          $height={height}\n          $justifyContent=\"center\"\n          $alignItems=\"center\"\n          $imageHue={imageHue}\n          $background={`${imageHue}_2`}\n        >\n          <FlexView $justifyContent=\"center\" $alignItems=\"center\" $flexGap={12}>\n            <Image src={imageUrl ?? ''} width={68} height={68} withLoader={false} alt=\"Puzzle\" />\n\n            <Styled.Title $renderAs=\"ab3\" $align=\"center\" $width=\"80%\">\n              {title}\n            </Styled.Title>\n          </FlexView>\n\n          {puzzleStickerLottie && (\n            <Styled.StickerWrapper $widthX={2.5} $heightX={2.5}>\n              <LottieAnimation\n                width={40}\n                height={40}\n                src={puzzleStickerLottie}\n                settings={puzzleStickerLottieSettings}\n              />\n            </Styled.StickerWrapper>\n          )}\n        </Styled.PuzzleWrapper>\n      </Clickable>\n    );\n  },\n);\n\nexport default PuzzleCard;\n"],"names":["puzzleStickerLottieSettings","PuzzleCard","memo","imageHue","imageUrl","title","height","width","onCardClick","userNodeId","rewards","studentId","nodeId","sticker","analyticsProps","useMemo","puzzleStickerLottie","getPuzzleStickerLottie","handleCardClick","useCallback","jsx","Clickable","PUZZLE_ANALYTICS_EVENTS","jsxs","Styled.PuzzleWrapper","FlexView","Image","Styled.Title","Styled.StickerWrapper","LottieAnimation"],"mappings":";;;;;;;;;AAaA,MAAMA,IAA8B;AAAA,EAClC,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEMC,IAAmCC;AAAA,EACvC,CAAC;AAAA,IACC,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,EAAA,MACI;AACJ,UAAM,EAAE,SAAAC,EAAQ,KAAIH,KAAA,gBAAAA,EAAU,OAAM,CAAA,GAE9BI,IAAiBC;AAAA,MACrB,OAAO;AAAA,QACL,SAASH;AAAA,QACT,YAAYD;AAAA,QACZ,WAAW;AAAA,MAAA;AAAA,MAEb,CAACC,GAAQD,CAAS;AAAA,IAAA,GAGdK,IAAsBH,IAAUI,EAAuBJ,CAAO,IAAI,QAElEK,IAAkBC,EAAY,MAAM;AACxC,MAAIV,MACFD,KAAA,QAAAA,EAAcC;AAAA,IAChB,GACC,CAACD,GAAaC,CAAU,CAAC;AAG1B,WAAA,gBAAAW;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,gBAAgBC,EAAwB;AAAA,QACxC,gBAAAR;AAAA,QACA,SAASI;AAAA,QAET,UAAA,gBAAAK;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,QAAQjB;AAAA,YACR,SAASD;AAAA,YACT,iBAAgB;AAAA,YAChB,aAAY;AAAA,YACZ,WAAWH;AAAA,YACX,aAAa,GAAGA,CAAQ;AAAA,YAExB,UAAA;AAAA,cAAA,gBAAAoB,EAACE,KAAS,iBAAgB,UAAS,aAAY,UAAS,UAAU,IAChE,UAAA;AAAA,gBAAC,gBAAAL,EAAAM,GAAA,EAAM,KAAKtB,KAAY,IAAI,OAAO,IAAI,QAAQ,IAAI,YAAY,IAAO,KAAI,SAAS,CAAA;AAAA,gBAEnF,gBAAAgB,EAACO,GAAA,EAAa,WAAU,OAAM,QAAO,UAAS,QAAO,OAClD,UACHtB,EAAA,CAAA;AAAA,cAAA,GACF;AAAA,cAECW,uBACEY,GAAA,EAAsB,SAAS,KAAK,UAAU,KAC7C,UAAA,gBAAAR;AAAA,gBAACS;AAAA,gBAAA;AAAA,kBACC,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,KAAKb;AAAA,kBACL,UAAUhB;AAAA,gBAAA;AAAA,cAAA,GAEd;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"puzzle-card.js","sources":["../../../../src/features/puzzles/comps/puzzle-card.tsx"],"sourcesContent":["import type { IPuzzleCardProps } from './puzzle-card-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport * as Styled from './puzzle-card-styled';\n\nconst PuzzleCard: FC<IPuzzleCardProps> = memo(\n  ({\n    children,\n    imageHue,\n    onAnimationEnd,\n    animationPhase,\n    width,\n    widthX,\n    height,\n    heightX,\n    backgroundColor,\n  }) => {\n    return (\n      <Styled.PuzzleWrapper\n        $animationPhase={animationPhase}\n        onAnimationEnd={onAnimationEnd}\n        $width={width}\n        $height={height}\n        $widthX={widthX}\n        $heightX={heightX}\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n        $imageHue={imageHue}\n        $background={backgroundColor ?? `${imageHue}_6`}\n      >\n        {children}\n      </Styled.PuzzleWrapper>\n    );\n  },\n);\n\nexport default PuzzleCard;\n"],"names":["PuzzleCard","memo","children","imageHue","onAnimationEnd","animationPhase","width","widthX","height","heightX","backgroundColor","jsx","Styled.PuzzleWrapper"],"mappings":";;;AAOA,MAAMA,IAAmCC;AAAA,EACvC,CAAC;AAAA,IACC,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,iBAAAC;AAAA,EAAA,MAGE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,iBAAiBP;AAAA,MACjB,gBAAAD;AAAA,MACA,QAAQE;AAAA,MACR,SAASE;AAAA,MACT,SAASD;AAAA,MACT,UAAUE;AAAA,MACV,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,WAAWN;AAAA,MACX,aAAaO,KAAmB,GAAGP,CAAQ;AAAA,MAE1C,UAAAD;AAAA,IAAA;AAAA,EAAA;AAIT;"}

package/dist/features/puzzles/puzzle-container/puzzle-container-styled.js

@@ -1,77 +1,47 @@
-import e from "styled-components";
-import r from "../../ui/layout/flex-view.js";
-import { getPuzzleCardPattern as s } from "../utils/puzzle-pattern.js";
-const c = e(r)(({ theme: t, $assigned: o }) => {
-  const { colors: i, layout: n } = t;
-  return `
-    cursor: pointer;
-    width: ${n.gutter * 15.9375}px;
-    height: ${n.gutter * 19.125}px;
-    position: relative;
-    left: ${o ? "0" : "50px"};
-    top: ${o ? "0" : "50px"};
+import o from "styled-components";
+import t from "../../ui/layout/flex-view.js";
+const p = o(t)`
+  cursor: pointer;
 
-    &:hover {
-      outline: 2px solid ${i.BLACK_1};
-    }
-  `;
-}), x = e(r)(({ theme: t, $assigned: o, $assigning: i }) => {
-  const { colors: n, layout: p } = t;
+  &:hover {
+    outline: 2px solid ${({ theme: e }) => e.colors.BLACK_1};
+  }
+`, l = o(t)(({ theme: e, $disabled: n }) => {
+  const { colors: r } = e;
   return `
-    cursor: pointer;
-    width: ${p.gutter * 15.9375}px;
     position: absolute;
-    left: ${o ? "0" : "50px"};
-    bottom: ${o ? "-50px" : "11px"};
+    bottom: -48px;
+    cursor: pointer;
+    z-index: -1;
     
-    ${(o || i) && `
-      background: ${n.WHITE_4};
-      border: 2px solid ${n.WHITE_5};
+    ${n && `
+      background: ${r.WHITE_4};
+      border: 2px solid ${r.WHITE_5};
       border-top: 0;
       pointer-events: none;
     `}
   `;
-});
-e(r)`
+}), c = o(t)`
   position: relative;
   top: -8px;
   height: 100%;
   width: 100%;
-`;
-e(r)`
+`, u = o(t)`
   border-radius: 50%;
-`;
-const d = e(r)`
+`, a = o(t)`
   position: relative;
   transition: height 0.3s ease-out;
-`, g = e(r)`
+`, d = o(t)`
   position: absolute;
   top: 0;
   right: 0;
-`, h = e(r)(({ $visible: t, theme: o }) => {
-  const { layout: i } = o;
-  return `
-    width: ${i.gutter * 22.1875}px;
-    height: ${i.gutter * 26}px;
-    left: 0;
-    opacity: ${t ? 1 : 0};
-    pointer-events: ${t ? "auto" : "none"};
-    transition: opacity 0.2s ease-out;
-  `;
-}), $ = e(r)`
-  position: relative;
-
-  box-shadow: inset 0px 0px 0px 4px ${({ theme: t, $imageHue: o }) => t.colors[`${o}_4`]};
-
-  background-image: ${({ $imageHue: t }) => `url(${s(t)})`};
-  background-size: cover;
 `;
 export {
-  g as AssignedTag,
-  $ as PuzzleAssignedWrapper,
-  x as PuzzleButton,
-  d as PuzzleContainer,
-  c as PuzzleContent,
-  h as PuzzleContentWrapper
+  d as AssignedTag,
+  u as CheckMarkIcon,
+  l as PuzzleButton,
+  a as PuzzleContainer,
+  p as PuzzleContent,
+  c as PuzzleText
 };
 //# sourceMappingURL=puzzle-container-styled.js.map

package/dist/features/puzzles/puzzle-container/puzzle-container-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"puzzle-container-styled.js","sources":["../../../../src/features/puzzles/puzzle-container/puzzle-container-styled.tsx"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { getPuzzleCardPattern } from '../utils/puzzle-pattern';\n\ninterface IPuzzleProps {\n  $assigned?: boolean;\n  $assigning?: boolean;\n}\n\nconst PuzzleContent = styled(FlexView)<IPuzzleProps>(({ theme, $assigned }) => {\n  const { colors, layout } = theme;\n\n  return `\n    cursor: pointer;\n    width: ${layout.gutter * 15.9375}px;\n    height: ${layout.gutter * 19.125}px;\n    position: relative;\n    left: ${$assigned ? '0' : '50px'};\n    top: ${$assigned ? '0' : '50px'};\n\n    &:hover {\n      outline: 2px solid ${colors.BLACK_1};\n    }\n  `;\n});\n\nconst PuzzleButton = styled(FlexView)<IPuzzleProps>(({ theme, $assigned, $assigning }) => {\n  const { colors, layout } = theme;\n\n  return `\n    cursor: pointer;\n    width: ${layout.gutter * 15.9375}px;\n    position: absolute;\n    left: ${$assigned ? '0' : '50px'};\n    bottom: ${$assigned ? '-50px' : '11px'};\n    \n    ${\n      ($assigned || $assigning) &&\n      `\n      background: ${colors.WHITE_4};\n      border: 2px solid ${colors.WHITE_5};\n      border-top: 0;\n      pointer-events: none;\n    `\n    }\n  `;\n});\n\nconst PuzzleText = styled(FlexView)`\n  position: relative;\n  top: -8px;\n  height: 100%;\n  width: 100%;\n`;\n\nconst CheckMarkIcon = styled(FlexView)`\n  border-radius: 50%;\n`;\n\nconst PuzzleContainer = styled(FlexView)`\n  position: relative;\n  transition: height 0.3s ease-out;\n`;\n\nconst AssignedTag = styled(FlexView)`\n  position: absolute;\n  top: 0;\n  right: 0;\n`;\n\ninterface IPuzzleContentWrapper {\n  $visible?: boolean;\n}\n\nconst PuzzleContentWrapper = styled(FlexView)<IPuzzleContentWrapper>(({ $visible, theme }) => {\n  const { layout } = theme;\n\n  return `\n    width: ${layout.gutter * 22.1875}px;\n    height: ${layout.gutter * 26}px;\n    left: 0;\n    opacity: ${$visible ? 1 : 0};\n    pointer-events: ${$visible ? 'auto' : 'none'};\n    transition: opacity 0.2s ease-out;\n  `;\n});\n\nconst PuzzleAssignedWrapper = styled(FlexView)<{ $imageHue: THueNames }>`\n  position: relative;\n\n  box-shadow: inset 0px 0px 0px 4px ${({ theme, $imageHue }) => theme.colors[`${$imageHue}_4`]};\n\n  background-image: ${({ $imageHue }) => `url(${getPuzzleCardPattern($imageHue)})`};\n  background-size: cover;\n`;\n\nexport {\n  PuzzleContainer,\n  PuzzleContentWrapper,\n  PuzzleContent,\n  PuzzleButton,\n  PuzzleText,\n  CheckMarkIcon,\n  AssignedTag,\n  PuzzleAssignedWrapper,\n};\n"],"names":["PuzzleContent","styled","FlexView","theme","$assigned","colors","layout","PuzzleButton","$assigning","PuzzleContainer","AssignedTag","PuzzleContentWrapper","$visible","PuzzleAssignedWrapper","$imageHue","getPuzzleCardPattern"],"mappings":";;;AAYM,MAAAA,IAAgBC,EAAOC,CAAQ,EAAgB,CAAC,EAAE,OAAAC,GAAO,WAAAC,QAAgB;AACvE,QAAA,EAAE,QAAAC,GAAQ,QAAAC,EAAW,IAAAH;AAEpB,SAAA;AAAA;AAAA,aAEIG,EAAO,SAAS,OAAO;AAAA,cACtBA,EAAO,SAAS,MAAM;AAAA;AAAA,YAExBF,IAAY,MAAM,MAAM;AAAA,WACzBA,IAAY,MAAM,MAAM;AAAA;AAAA;AAAA,2BAGRC,EAAO,OAAO;AAAA;AAAA;AAGzC,CAAC,GAEKE,IAAeN,EAAOC,CAAQ,EAAgB,CAAC,EAAE,OAAAC,GAAO,WAAAC,GAAW,YAAAI,QAAiB;AAClF,QAAA,EAAE,QAAAH,GAAQ,QAAAC,EAAW,IAAAH;AAEpB,SAAA;AAAA;AAAA,aAEIG,EAAO,SAAS,OAAO;AAAA;AAAA,YAExBF,IAAY,MAAM,MAAM;AAAA,cACtBA,IAAY,UAAU,MAAM;AAAA;AAAA,OAGnCA,KAAaI,MACd;AAAA,oBACcH,EAAO,OAAO;AAAA,0BACRA,EAAO,OAAO;AAAA;AAAA;AAAA,KAIpC;AAAA;AAEJ,CAAC;AAEkBJ,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOZD,EAAOC,CAAQ;AAAA;AAAA;AAI/B,MAAAO,IAAkBR,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAKjCQ,IAAcT,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAU7BS,IAAuBV,EAAOC,CAAQ,EAAyB,CAAC,EAAE,UAAAU,GAAU,OAAAT,QAAY;AACtF,QAAA,EAAE,QAAAG,EAAW,IAAAH;AAEZ,SAAA;AAAA,aACIG,EAAO,SAAS,OAAO;AAAA,cACtBA,EAAO,SAAS,EAAE;AAAA;AAAA,eAEjBM,IAAW,IAAI,CAAC;AAAA,sBACTA,IAAW,SAAS,MAAM;AAAA;AAAA;AAGhD,CAAC,GAEKC,IAAwBZ,EAAOC,CAAQ;AAAA;AAAA;AAAA,sCAGP,CAAC,EAAE,OAAAC,GAAO,WAAAW,QAAgBX,EAAM,OAAO,GAAGW,CAAS,IAAI,CAAC;AAAA;AAAA,sBAExE,CAAC,EAAE,WAAAA,EAAU,MAAM,OAAOC,EAAqBD,CAAS,CAAC,GAAG;AAAA;AAAA;"}
+{"version":3,"file":"puzzle-container-styled.js","sources":["../../../../src/features/puzzles/puzzle-container/puzzle-container-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\n\nconst PuzzleContent = styled(FlexView)`\n  cursor: pointer;\n\n  &:hover {\n    outline: 2px solid ${({ theme }) => theme.colors.BLACK_1};\n  }\n`;\n\ninterface IPuzzleButton {\n  $disabled?: boolean;\n}\n\nconst PuzzleButton = styled(FlexView)<IPuzzleButton>(({ theme, $disabled }) => {\n  const { colors } = theme;\n\n  return `\n    position: absolute;\n    bottom: -48px;\n    cursor: pointer;\n    z-index: -1;\n    \n    ${\n      $disabled &&\n      `\n      background: ${colors.WHITE_4};\n      border: 2px solid ${colors.WHITE_5};\n      border-top: 0;\n      pointer-events: none;\n    `\n    }\n  `;\n});\n\nconst PuzzleText = styled(FlexView)`\n  position: relative;\n  top: -8px;\n  height: 100%;\n  width: 100%;\n`;\n\nconst CheckMarkIcon = styled(FlexView)`\n  border-radius: 50%;\n`;\n\nconst PuzzleContainer = styled(FlexView)`\n  position: relative;\n  transition: height 0.3s ease-out;\n`;\n\nconst AssignedTag = styled(FlexView)`\n  position: absolute;\n  top: 0;\n  right: 0;\n`;\n\nexport { PuzzleContainer, PuzzleContent, PuzzleButton, PuzzleText, CheckMarkIcon, AssignedTag };\n"],"names":["PuzzleContent","styled","FlexView","theme","PuzzleButton","$disabled","colors","PuzzleText","CheckMarkIcon","PuzzleContainer","AssignedTag"],"mappings":";;AAIM,MAAAA,IAAgBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,yBAIZ,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAQtDC,IAAeH,EAAOC,CAAQ,EAAiB,CAAC,EAAE,OAAAC,GAAO,WAAAE,QAAgB;AACvE,QAAA,EAAE,QAAAC,EAAW,IAAAH;AAEZ,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOHE,KACA;AAAA,oBACcC,EAAO,OAAO;AAAA,0BACRA,EAAO,OAAO;AAAA;AAAA;AAAA,KAIpC;AAAA;AAEJ,CAAC,GAEKC,IAAaN,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAO5BM,IAAgBP,EAAOC,CAAQ;AAAA;AAAA,GAI/BO,IAAkBR,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAKjCQ,IAAcT,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;"}