@cuemath/leap 3.2.18 → 3.2.19-beta-0.1

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

@@ -3,14 +3,14 @@ import n from "../../../assets/line-icons/icons/hint-fill.js";
 import l from "../../ui/layout/flex-view.js";
 import r from "../../ui/text/text.js";
 import { getPuzzleCardPattern as p } from "../utils/puzzle-pattern.js";
-const d = o(l)(({ theme: t, $visible: i }) => {
+const f = o(l)(({ theme: t, $visible: i }) => {
   const { gutter: e } = t.layout;
   return i ? `
     overflow: scroll;
     padding-top: ${e * 1.5}px;
     padding-bottom: ${e * 2}px;
   ` : "";
-}), g = o(l)`
+}), d = o(l)`
   position: relative;
   margin: 0 auto;
   box-shadow: inset 0px 0px 0px 4px ${({ theme: t, $imageHue: i }) => t.colors[`${i}_4`]};
@@ -27,7 +27,7 @@ const d = o(l)(({ theme: t, $visible: i }) => {
     bottom: 0;
     background-image: ${({ $imageHue: t }) => `url(${p(t)})`};
     background-size: cover;
-    opacity: 0.2;
+    opacity: 0.4;
   }
 `, x = o(n)`
   color: ${({ theme: t }) => t.colors.BLACK_1};
@@ -44,7 +44,7 @@ const d = o(l)(({ theme: t, $visible: i }) => {
   color: ${({ theme: t }) => t.colors.BLACK};
   font-size: 14px;
   line-height: 1.2;
-  font-family: 'Athletics';
+  font-family: 'Athletics-Regular';
 
   font-weight: 400;
   font-style: normal;
@@ -70,10 +70,14 @@ const d = o(l)(({ theme: t, $visible: i }) => {
   li {
     margin: 4px 0;
   }
+
+  strong {
+    font-weight: 700;
+  }
 `;
 export {
-  d as PuzzleAppWrapper,
-  g as PuzzleContainer,
+  f as PuzzleAppWrapper,
+  d as PuzzleContainer,
   h as PuzzleQuestionWrapper,
   u as StyledFeedbackText,
   x as StyledHintFillIcon

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

@@ -1 +1 @@
-{"version":3,"file":"puzzle-app-styled.js","sources":["../../../../src/features/puzzles/app/puzzle-app-styled.tsx"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport styled from 'styled-components';\n\nimport HintFillIcon from '../../../assets/line-icons/icons/hint-fill';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { getPuzzleCardPattern } from '../utils/puzzle-pattern';\n\nconst PuzzleAppWrapper = styled(FlexView)<{ $visible: boolean }>(({ theme, $visible }) => {\n  const { gutter } = theme.layout;\n\n  if (!$visible) {\n    return ``;\n  }\n\n  return `\n    overflow: scroll;\n    padding-top: ${gutter * 1.5}px;\n    padding-bottom: ${gutter * 2}px;\n  `;\n});\n\nconst PuzzleContainer = styled(FlexView)<{ $imageHue: THueNames; $backgroundOpacity?: number }>`\n  position: relative;\n  margin: 0 auto;\n  box-shadow: inset 0px 0px 0px 4px ${({ theme, $imageHue }) => theme.colors[`${$imageHue}_4`]};\n  max-width: 343px;\n  width: 100%;\n  min-height: max-content;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-image: ${({ $imageHue }) => `url(${getPuzzleCardPattern($imageHue)})`};\n    background-size: cover;\n    opacity: 0.2;\n  }\n`;\n\nconst StyledHintFillIcon = styled(HintFillIcon)`\n  color: ${({ theme }) => theme.colors.BLACK_1};\n\n  & .hint-fill-icon-path {\n    fill: ${({ theme }) => theme.colors.WHITE_1};\n  }\n`;\n\nconst StyledFeedbackText = styled(Text)`\n  & span {\n    font-weight: 700;\n    margin-right: 4px;\n  }\n`;\n\nconst PuzzleQuestionWrapper = styled.div`\n  color: ${({ theme }) => theme.colors.BLACK};\n  font-size: 14px;\n  line-height: 1.2;\n  font-family: 'Athletics';\n\n  font-weight: 400;\n  font-style: normal;\n\n  em {\n    font-style: italic;\n  }\n\n  ul,\n  ol {\n    list-style-type: initial;\n    padding-left: 32px;\n  }\n\n  ol {\n    list-style-type: decimal;\n  }\n\n  p {\n    margin: 0;\n  }\n\n  li {\n    margin: 4px 0;\n  }\n`;\n\nexport {\n  PuzzleAppWrapper,\n  PuzzleContainer,\n  StyledFeedbackText,\n  StyledHintFillIcon,\n  PuzzleQuestionWrapper,\n};\n"],"names":["PuzzleAppWrapper","styled","FlexView","theme","$visible","gutter","PuzzleContainer","$imageHue","getPuzzleCardPattern","StyledHintFillIcon","HintFillIcon","StyledFeedbackText","Text","PuzzleQuestionWrapper"],"mappings":";;;;;AASM,MAAAA,IAAmBC,EAAOC,CAAQ,EAAyB,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAAe;AAClF,QAAA,EAAE,QAAAC,EAAO,IAAIF,EAAM;AAEzB,SAAKC,IAIE;AAAA;AAAA,mBAEUC,IAAS,GAAG;AAAA,sBACTA,IAAS,CAAC;AAAA,MANrB;AAQX,CAAC,GAEKC,IAAkBL,EAAOC,CAAQ;AAAA;AAAA;AAAA,sCAGD,CAAC,EAAE,OAAAC,GAAO,WAAAI,QAAgBJ,EAAM,OAAO,GAAGI,CAAS,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAYtE,CAAC,EAAE,WAAAA,EAAU,MAAM,OAAOC,EAAqBD,CAAS,CAAC,GAAG;AAAA;AAAA;AAAA;AAAA,GAM9EE,IAAqBR,EAAOS,CAAY;AAAA,WACnC,CAAC,EAAE,OAAAP,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,YAGlC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAIzCQ,IAAqBV,EAAOW,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA,GAOhCC,IAAwBZ,EAAO;AAAA,WAC1B,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"puzzle-app-styled.js","sources":["../../../../src/features/puzzles/app/puzzle-app-styled.tsx"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport styled from 'styled-components';\n\nimport HintFillIcon from '../../../assets/line-icons/icons/hint-fill';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { getPuzzleCardPattern } from '../utils/puzzle-pattern';\n\nconst PuzzleAppWrapper = styled(FlexView)<{ $visible: boolean }>(({ theme, $visible }) => {\n  const { gutter } = theme.layout;\n\n  if (!$visible) {\n    return ``;\n  }\n\n  return `\n    overflow: scroll;\n    padding-top: ${gutter * 1.5}px;\n    padding-bottom: ${gutter * 2}px;\n  `;\n});\n\nconst PuzzleContainer = styled(FlexView)<{ $imageHue: THueNames; $backgroundOpacity?: number }>`\n  position: relative;\n  margin: 0 auto;\n  box-shadow: inset 0px 0px 0px 4px ${({ theme, $imageHue }) => theme.colors[`${$imageHue}_4`]};\n  max-width: 343px;\n  width: 100%;\n  min-height: max-content;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-image: ${({ $imageHue }) => `url(${getPuzzleCardPattern($imageHue)})`};\n    background-size: cover;\n    opacity: 0.4;\n  }\n`;\n\nconst StyledHintFillIcon = styled(HintFillIcon)`\n  color: ${({ theme }) => theme.colors.BLACK_1};\n\n  & .hint-fill-icon-path {\n    fill: ${({ theme }) => theme.colors.WHITE_1};\n  }\n`;\n\nconst StyledFeedbackText = styled(Text)`\n  & span {\n    font-weight: 700;\n    margin-right: 4px;\n  }\n`;\n\nconst PuzzleQuestionWrapper = styled.div`\n  color: ${({ theme }) => theme.colors.BLACK};\n  font-size: 14px;\n  line-height: 1.2;\n  font-family: 'Athletics-Regular';\n\n  font-weight: 400;\n  font-style: normal;\n\n  em {\n    font-style: italic;\n  }\n\n  ul,\n  ol {\n    list-style-type: initial;\n    padding-left: 32px;\n  }\n\n  ol {\n    list-style-type: decimal;\n  }\n\n  p {\n    margin: 0;\n  }\n\n  li {\n    margin: 4px 0;\n  }\n\n  strong {\n    font-weight: 700;\n  }\n`;\n\nexport {\n  PuzzleAppWrapper,\n  PuzzleContainer,\n  StyledFeedbackText,\n  StyledHintFillIcon,\n  PuzzleQuestionWrapper,\n};\n"],"names":["PuzzleAppWrapper","styled","FlexView","theme","$visible","gutter","PuzzleContainer","$imageHue","getPuzzleCardPattern","StyledHintFillIcon","HintFillIcon","StyledFeedbackText","Text","PuzzleQuestionWrapper"],"mappings":";;;;;AASM,MAAAA,IAAmBC,EAAOC,CAAQ,EAAyB,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAAe;AAClF,QAAA,EAAE,QAAAC,EAAO,IAAIF,EAAM;AAEzB,SAAKC,IAIE;AAAA;AAAA,mBAEUC,IAAS,GAAG;AAAA,sBACTA,IAAS,CAAC;AAAA,MANrB;AAQX,CAAC,GAEKC,IAAkBL,EAAOC,CAAQ;AAAA;AAAA;AAAA,sCAGD,CAAC,EAAE,OAAAC,GAAO,WAAAI,QAAgBJ,EAAM,OAAO,GAAGI,CAAS,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAYtE,CAAC,EAAE,WAAAA,EAAU,MAAM,OAAOC,EAAqBD,CAAS,CAAC,GAAG;AAAA;AAAA;AAAA;AAAA,GAM9EE,IAAqBR,EAAOS,CAAY;AAAA,WACnC,CAAC,EAAE,OAAAP,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,YAGlC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAIzCQ,IAAqBV,EAAOW,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA,GAOhCC,IAAwBZ,EAAO;AAAA,WAC1B,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -1,79 +1,34 @@
-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)`
+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)`
   position: relative;
+  cursor: pointer;
 
-  box-shadow: inset 0px 0px 0px 4px ${({ theme: t, $imageHue: i }) => t.colors[`${i}_4`]};
+  box-shadow: inset 0px 0px 0px 4px ${({ theme: o, $imageHue: t }) => o.colors[`${t}_4`]};
 
-  background-image: ${({ $imageHue: t }) => `url(${l(t)})`};
+  background-image: ${({ $imageHue: o }) => `url(${p(o)})`};
   background-size: cover;
 
-  ${({ $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 "";
+  &:hover {
+    outline: 1px solid ${({ theme: o }) => o.colors.BLACK_1};
   }
-}}
+`, 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: -16px;
+  right: -15px;
 `;
 export {
-  d as PuzzleWrapper
+  n as PuzzleWrapper,
+  b as StickerWrapper,
+  x as Title
 };
 //# 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, { 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;"}
+{"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: -16px;\n  right: -15px;\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;"}

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

@@ -1,35 +1,84 @@
-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(
+import { jsx as i, jsxs as f } from "react/jsx-runtime";
+import { memo as P, useRef as _, useMemo as y, useCallback as s } from "react";
+import S from "../../ui/buttons/clickable/clickable.js";
+import b from "../../ui/image/image.js";
+import A from "../../ui/layout/flex-view.js";
+import Z from "../../ui/lottie-animation/lottie-animation.js";
+import { PUZZLE_ANALYTICS_EVENTS as k } from "../puzzle-analytics-events.js";
+import { getPuzzleStickerLottie as x } from "../utils/puzzle-feedback-celebration.js";
+import { PuzzleWrapper as M, Title as j, StickerWrapper as v } from "./puzzle-card-styled.js";
+const R = {
+  autoplay: !1,
+  loop: !0,
+  renderer: "canvas"
+}, G = P(
   ({
-    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
-    }
-  )
+    imageHue: c,
+    imageUrl: u,
+    title: h,
+    height: $ = "100%",
+    width: z = "100%",
+    onCardClick: n,
+    userNodeId: o,
+    rewards: r,
+    studentId: a,
+    nodeId: m
+  }) => {
+    const { sticker: p } = (r == null ? void 0 : r[0]) || {}, l = _(null), L = y(
+      () => ({
+        node_id: m,
+        student_id: a,
+        node_type: "PUZZLE_CARD"
+      }),
+      [m, a]
+    ), e = p ? x(p) : void 0, g = s(() => {
+      o && (n == null || n(o));
+    }, [n, o]), E = s(() => {
+      var t;
+      e && ((t = l.current) == null || t.play());
+    }, [e]), d = s(() => {
+      var t;
+      e && ((t = l.current) == null || t.stop());
+    }, [e]);
+    return /* @__PURE__ */ i(
+      S,
+      {
+        label: "",
+        analyticsLabel: k.PUZZLE_VIEWED,
+        analyticsProps: L,
+        onClick: g,
+        children: /* @__PURE__ */ f(
+          M,
+          {
+            $width: z,
+            $height: $,
+            $justifyContent: "center",
+            $alignItems: "center",
+            $imageHue: c,
+            $background: `${c}_2`,
+            onMouseEnter: E,
+            onMouseLeave: d,
+            children: [
+              /* @__PURE__ */ f(A, { $justifyContent: "center", $alignItems: "center", $flexGap: 12, children: [
+                /* @__PURE__ */ i(b, { src: u ?? "", width: 68, height: 68, withLoader: !1, alt: "Puzzle" }),
+                /* @__PURE__ */ i(j, { $renderAs: "ab3", $align: "center", $width: "80%", children: h })
+              ] }),
+              e && /* @__PURE__ */ i(v, { $widthX: 2.5, $heightX: 2.5, children: /* @__PURE__ */ i(
+                Z,
+                {
+                  src: e,
+                  ref: l,
+                  settings: R
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
 );
 export {
-  c as default
+  G 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 } 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;"}
+{"version":3,"file":"puzzle-card.js","sources":["../../../../src/features/puzzles/comps/puzzle-card.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../ui/lottie-animation/types';\nimport type { IPuzzleCardProps } from './puzzle-card-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useMemo, useRef } 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: true,\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 lottieAnimationRef = useRef<ILottieAnimationRef | null>(null);\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    const handleOnMouseEnter = useCallback(() => {\n      if (puzzleStickerLottie) lottieAnimationRef.current?.play();\n    }, [puzzleStickerLottie]);\n\n    const handleOnMouseLeave = useCallback(() => {\n      if (puzzleStickerLottie) lottieAnimationRef.current?.stop();\n    }, [puzzleStickerLottie]);\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          onMouseEnter={handleOnMouseEnter}\n          onMouseLeave={handleOnMouseLeave}\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                src={puzzleStickerLottie}\n                ref={lottieAnimationRef}\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","lottieAnimationRef","useRef","analyticsProps","useMemo","puzzleStickerLottie","getPuzzleStickerLottie","handleCardClick","useCallback","handleOnMouseEnter","_a","handleOnMouseLeave","jsx","Clickable","PUZZLE_ANALYTICS_EVENTS","jsxs","Styled.PuzzleWrapper","FlexView","Image","Styled.Title","Styled.StickerWrapper","LottieAnimation"],"mappings":";;;;;;;;;AAcA,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,IAAqBC,EAAmC,IAAI,GAE5DC,IAAiBC;AAAA,MACrB,OAAO;AAAA,QACL,SAASL;AAAA,QACT,YAAYD;AAAA,QACZ,WAAW;AAAA,MAAA;AAAA,MAEb,CAACC,GAAQD,CAAS;AAAA,IAAA,GAGdO,IAAsBL,IAAUM,EAAuBN,CAAO,IAAI,QAElEO,IAAkBC,EAAY,MAAM;AACxC,MAAIZ,MACFD,KAAA,QAAAA,EAAcC;AAAA,IAChB,GACC,CAACD,GAAaC,CAAU,CAAC,GAEtBa,IAAqBD,EAAY,MAAM;;AACvC,MAAAH,OAAwCK,IAAAT,EAAA,YAAA,QAAAS,EAAS;AAAA,IAAK,GACzD,CAACL,CAAmB,CAAC,GAElBM,IAAqBH,EAAY,MAAM;;AACvC,MAAAH,OAAwCK,IAAAT,EAAA,YAAA,QAAAS,EAAS;AAAA,IAAK,GACzD,CAACL,CAAmB,CAAC;AAGtB,WAAA,gBAAAO;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,gBAAgBC,EAAwB;AAAA,QACxC,gBAAAX;AAAA,QACA,SAASI;AAAA,QAET,UAAA,gBAAAQ;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,QAAQtB;AAAA,YACR,SAASD;AAAA,YACT,iBAAgB;AAAA,YAChB,aAAY;AAAA,YACZ,WAAWH;AAAA,YACX,aAAa,GAAGA,CAAQ;AAAA,YACxB,cAAcmB;AAAA,YACd,cAAcE;AAAA,YAEd,UAAA;AAAA,cAAA,gBAAAI,EAACE,KAAS,iBAAgB,UAAS,aAAY,UAAS,UAAU,IAChE,UAAA;AAAA,gBAAC,gBAAAL,EAAAM,GAAA,EAAM,KAAK3B,KAAY,IAAI,OAAO,IAAI,QAAQ,IAAI,YAAY,IAAO,KAAI,SAAS,CAAA;AAAA,gBAEnF,gBAAAqB,EAACO,GAAA,EAAa,WAAU,OAAM,QAAO,UAAS,QAAO,OAClD,UACH3B,EAAA,CAAA;AAAA,cAAA,GACF;AAAA,cAECa,uBACEe,GAAA,EAAsB,SAAS,KAAK,UAAU,KAC7C,UAAA,gBAAAR;AAAA,gBAACS;AAAA,gBAAA;AAAA,kBACC,KAAKhB;AAAA,kBACL,KAAKJ;AAAA,kBACL,UAAUd;AAAA,gBAAA;AAAA,cAAA,GAEd;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

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

@@ -0,0 +1,8 @@
+const A = {
+  REVEAL: [0, 50],
+  REVEAL_ASSIGNED: [58, 160]
+};
+export {
+  A as PUZZLE_ASSIGN_ANIMATION
+};
+//# sourceMappingURL=puzzle-container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"puzzle-container.js","sources":["../../../../src/features/puzzles/constants/puzzle-container.ts"],"sourcesContent":["import type { AnimationSegment } from 'lottie-web';\n\nexport const PUZZLE_ASSIGN_ANIMATION = {\n  REVEAL: [0, 50] as AnimationSegment,\n  REVEAL_ASSIGNED: [58, 160] as AnimationSegment,\n};\n"],"names":["PUZZLE_ASSIGN_ANIMATION"],"mappings":"AAEO,MAAMA,IAA0B;AAAA,EACrC,QAAQ,CAAC,GAAG,EAAE;AAAA,EACd,iBAAiB,CAAC,IAAI,GAAG;AAC3B;"}

package/dist/features/puzzles/puzzle-analytics-events.js

@@ -0,0 +1,11 @@
+import { PLUGINS as z } from "../../node_modules/@cuemath/analytics-v2/dist/constants.js";
+var E = /* @__PURE__ */ ((e) => (e.PUZZLE_ASSIGNED = "puzzle_assigned", e.PUZZLE_VIEWED = "puzzle_viewed", e))(E || {});
+const _ = {
+  puzzle_viewed: [z.MIXPANEL],
+  puzzle_assigned: [z.MIXPANEL]
+};
+export {
+  E as PUZZLE_ANALYTICS_EVENTS,
+  _ as PUZZLE_ANALYTICS_WHITELIST_EVENTS
+};
+//# sourceMappingURL=puzzle-analytics-events.js.map

package/dist/features/puzzles/puzzle-analytics-events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"puzzle-analytics-events.js","sources":["../../../src/features/puzzles/puzzle-analytics-events.ts"],"sourcesContent":["import { PLUGINS } from '@cuemath/analytics-v2/dist/constants';\n\nexport enum PUZZLE_ANALYTICS_EVENTS {\n  PUZZLE_ASSIGNED = 'puzzle_assigned',\n  PUZZLE_VIEWED = 'puzzle_viewed',\n}\n\nexport const PUZZLE_ANALYTICS_WHITELIST_EVENTS = {\n  [PUZZLE_ANALYTICS_EVENTS.PUZZLE_VIEWED]: [PLUGINS.MIXPANEL],\n  [PUZZLE_ANALYTICS_EVENTS.PUZZLE_ASSIGNED]: [PLUGINS.MIXPANEL],\n};\n"],"names":["PUZZLE_ANALYTICS_EVENTS","PUZZLE_ANALYTICS_WHITELIST_EVENTS","PLUGINS"],"mappings":";AAEY,IAAAA,sBAAAA,OACVA,EAAA,kBAAkB,mBAClBA,EAAA,gBAAgB,iBAFNA,IAAAA,KAAA,CAAA,CAAA;AAKL,MAAMC,IAAoC;AAAA,EAC9C,eAAwC,CAACC,EAAQ,QAAQ;AAAA,EACzD,iBAA0C,CAACA,EAAQ,QAAQ;AAC9D;"}

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

@@ -1,47 +1,77 @@
-import o from "styled-components";
-import t from "../../ui/layout/flex-view.js";
-const p = o(t)`
-  cursor: pointer;
+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"};
 
-  &:hover {
-    outline: 2px solid ${({ theme: e }) => e.colors.BLACK_1};
-  }
-`, l = o(t)(({ theme: e, $disabled: n }) => {
-  const { colors: r } = e;
+    &:hover {
+      outline: 2px solid ${i.BLACK_1};
+    }
+  `;
+}), x = e(r)(({ theme: t, $assigned: o, $assigning: i }) => {
+  const { colors: n, layout: p } = t;
   return `
-    position: absolute;
-    bottom: -48px;
     cursor: pointer;
-    z-index: -1;
+    width: ${p.gutter * 15.9375}px;
+    position: absolute;
+    left: ${o ? "0" : "50px"};
+    bottom: ${o ? "-50px" : "11px"};
     
-    ${n && `
-      background: ${r.WHITE_4};
-      border: 2px solid ${r.WHITE_5};
+    ${(o || i) && `
+      background: ${n.WHITE_4};
+      border: 2px solid ${n.WHITE_5};
       border-top: 0;
       pointer-events: none;
     `}
   `;
-}), c = o(t)`
+});
+e(r)`
   position: relative;
   top: -8px;
   height: 100%;
   width: 100%;
-`, u = o(t)`
+`;
+e(r)`
   border-radius: 50%;
-`, a = o(t)`
+`;
+const d = e(r)`
   position: relative;
   transition: height 0.3s ease-out;
-`, d = o(t)`
+`, g = e(r)`
   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 {
-  d as AssignedTag,
-  u as CheckMarkIcon,
-  l as PuzzleButton,
-  a as PuzzleContainer,
-  p as PuzzleContent,
-  c as PuzzleText
+  g as AssignedTag,
+  $ as PuzzleAssignedWrapper,
+  x as PuzzleButton,
+  d as PuzzleContainer,
+  c as PuzzleContent,
+  h as PuzzleContentWrapper
 };
 //# 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 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;"}
+{"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;"}

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

@@ -0,0 +1,55 @@
+import { jsxs as i, Fragment as $, jsx as e } from "react/jsx-runtime";
+import { memo as d } from "react";
+import m from "../../ui/buttons/clickable/clickable.js";
+import u from "../../ui/image/image.js";
+import t from "../../ui/text/text.js";
+import { PuzzleContent as g, AssignedTag as h, PuzzleButton as p } from "./puzzle-container-styled.js";
+const k = d(
+  ({ handleOnPuzzleClick: l, imageUrl: o, title: c, handleAssign: a, assigned: r, assigning: n, analyticsProps: s }) => /* @__PURE__ */ i($, { children: [
+    /* @__PURE__ */ i(
+      g,
+      {
+        $justifyContent: "center",
+        $alignItems: "center",
+        onClick: l,
+        title: "Click to preview",
+        $flexGapX: 1.5,
+        $assigned: r,
+        $gutterX: 1,
+        children: [
+          /* @__PURE__ */ e(u, { width: 136, height: 136, src: o, withLoader: !1, alt: "Puzzle" }),
+          /* @__PURE__ */ e(t, { $renderAs: "h4", $align: "center", children: c }),
+          r && /* @__PURE__ */ e(h, { $gap: 4, $gutter: 8, $background: "BLACK_1", children: /* @__PURE__ */ e(t, { $renderAs: "ac4", $color: "WHITE_1", children: "Assigned" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      m,
+      {
+        onClick: a,
+        label: "",
+        analyticsLabel: "puzzle_assigned",
+        disabled: r || n,
+        analyticsProps: s,
+        children: /* @__PURE__ */ e(
+          p,
+          {
+            $background: "BLACK_1",
+            $widthX: 15.75,
+            $alignItems: "center",
+            $justifyContent: "center",
+            $gapX: 0.75,
+            $gutterX: 1,
+            $assigned: r,
+            $assigning: n,
+            children: /* @__PURE__ */ e(t, { $renderAs: "ub1-bold", $color: r ? "BLACK_T_38" : "WHITE_1", children: r ? "Discuss in next class" : "Assign" })
+          }
+        )
+      }
+    )
+  ] })
+);
+export {
+  k as default
+};
+//# sourceMappingURL=puzzle-container-view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"puzzle-container-view.js","sources":["../../../../src/features/puzzles/puzzle-container/puzzle-container-view.tsx"],"sourcesContent":["import type { IPuzzleContainerViewProps } from './puzzle-container-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport Image from '../../ui/image/image';\nimport Text from '../../ui/text/text';\nimport * as Styled from './puzzle-container-styled';\n\nconst PuzzleContainerView: FC<IPuzzleContainerViewProps> = memo(\n  ({ handleOnPuzzleClick, imageUrl, title, handleAssign, assigned, assigning, analyticsProps }) => {\n    return (\n      <>\n        <Styled.PuzzleContent\n          $justifyContent=\"center\"\n          $alignItems=\"center\"\n          onClick={handleOnPuzzleClick}\n          title=\"Click to preview\"\n          $flexGapX={1.5}\n          $assigned={assigned}\n          $gutterX={1}\n        >\n          <Image width={136} height={136} src={imageUrl} withLoader={false} alt=\"Puzzle\" />\n          <Text $renderAs=\"h4\" $align=\"center\">\n            {title}\n          </Text>\n\n          {assigned && (\n            <Styled.AssignedTag $gap={4} $gutter={8} $background=\"BLACK_1\">\n              <Text $renderAs=\"ac4\" $color=\"WHITE_1\">\n                Assigned\n              </Text>\n            </Styled.AssignedTag>\n          )}\n        </Styled.PuzzleContent>\n\n        <Clickable\n          onClick={handleAssign}\n          label=\"\"\n          analyticsLabel=\"puzzle_assigned\"\n          disabled={assigned || assigning}\n          analyticsProps={analyticsProps}\n        >\n          <Styled.PuzzleButton\n            $background=\"BLACK_1\"\n            $widthX={15.75}\n            $alignItems=\"center\"\n            $justifyContent=\"center\"\n            $gapX={0.75}\n            $gutterX={1}\n            $assigned={assigned}\n            $assigning={assigning}\n          >\n            <Text $renderAs=\"ub1-bold\" $color={assigned ? 'BLACK_T_38' : 'WHITE_1'}>\n              {assigned ? 'Discuss in next class' : 'Assign'}\n            </Text>\n          </Styled.PuzzleButton>\n        </Clickable>\n      </>\n    );\n  },\n);\n\nexport default PuzzleContainerView;\n"],"names":["PuzzleContainerView","memo","handleOnPuzzleClick","imageUrl","title","handleAssign","assigned","assigning","analyticsProps","jsxs","Fragment","Styled.PuzzleContent","jsx","Image","Text","Styled.AssignedTag","Clickable","Styled.PuzzleButton"],"mappings":";;;;;;AAUA,MAAMA,IAAqDC;AAAA,EACzD,CAAC,EAAE,qBAAAC,GAAqB,UAAAC,GAAU,OAAAC,GAAO,cAAAC,GAAc,UAAAC,GAAU,WAAAC,GAAW,gBAAAC,QAGtE,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,iBAAgB;AAAA,QAChB,aAAY;AAAA,QACZ,SAAST;AAAA,QACT,OAAM;AAAA,QACN,WAAW;AAAA,QACX,WAAWI;AAAA,QACX,UAAU;AAAA,QAEV,UAAA;AAAA,UAAC,gBAAAM,EAAAC,GAAA,EAAM,OAAO,KAAK,QAAQ,KAAK,KAAKV,GAAU,YAAY,IAAO,KAAI,SAAS,CAAA;AAAA,4BAC9EW,GAAK,EAAA,WAAU,MAAK,QAAO,UACzB,UACHV,GAAA;AAAA,UAECE,KACE,gBAAAM,EAAAG,GAAA,EAAmB,MAAM,GAAG,SAAS,GAAG,aAAY,WACnD,4BAACD,GAAK,EAAA,WAAU,OAAM,QAAO,WAAU,qBAEvC,CAAA,GACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,IAEA,gBAAAF;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAASX;AAAA,QACT,OAAM;AAAA,QACN,gBAAe;AAAA,QACf,UAAUC,KAAYC;AAAA,QACtB,gBAAAC;AAAA,QAEA,UAAA,gBAAAI;AAAA,UAACK;AAAAA,UAAA;AAAA,YACC,aAAY;AAAA,YACZ,SAAS;AAAA,YACT,aAAY;AAAA,YACZ,iBAAgB;AAAA,YAChB,OAAO;AAAA,YACP,UAAU;AAAA,YACV,WAAWX;AAAA,YACX,YAAYC;AAAA,YAEZ,UAAA,gBAAAK,EAACE,GAAK,EAAA,WAAU,YAAW,QAAQR,IAAW,eAAe,WAC1D,UAAWA,IAAA,0BAA0B,SACxC,CAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAGN;"}