@cuemath/leap 3.0.9 → 3.0.10-aa1

package/dist/features/cue-canvas/cue-cavas-styled.js

@@ -1,4 +1,4 @@
-import e, { css as l } from "styled-components";
+import i, { css as l } from "styled-components";
 import a from "../../assets/line-icons/icons/check.js";
 import d from "../../assets/line-icons/icons/down.js";
 import h from "../../assets/line-icons/icons/highlighter.js";
@@ -10,45 +10,45 @@ import $ from "../../assets/line-icons/icons/undo.js";
 import m from "../../assets/line-icons/icons/unlock.js";
 import p from "../ui/layout/flex-view.js";
 import { CANVAS_COLORS as c } from "./constants/constants.js";
-const S = e(u)(({
+const S = i(u)(({
   theme: r,
   $active: o,
   $activeColor: t,
   $shouldAnimate: s
 }) => {
-  const { colors: i } = r, n = o ? c[t] : i.REAL_BLACK_50;
+  const { colors: e } = r, n = o ? c[t] : e.REAL_BLACK_50;
   return l`
     position: relative;
     transition: top 0.3s ease-in-out;
     top: ${o && s ? "0px" : "8px"};
     cursor: ${o ? "auto" : "pointer"};
     .pencil-dark-shade {
-      fill: ${o ? n : i.GREY_3};
+      fill: ${o ? n : e.GREY_3};
     }
 
     .pencil-light-shade {
-      fill: ${o ? n : i.GREY_2};
+      fill: ${o ? n : e.GREY_2};
       opacity: ${o ? 0.3 : 1};
     }
 
     ${!o && l`
       &:hover {
         .pencil-dark-shade {
-          fill: ${i.GREY_4};
+          fill: ${e.GREY_4};
         }
         .pencil-light-shade {
-          fill: ${i.GREY_2};
+          fill: ${e.GREY_2};
         }
       }
     `}
   `;
-}), W = e(g)(({
+}), G = i(g)(({
   theme: r,
   $active: o,
   $activeColor: t,
   $shouldAnimate: s
 }) => {
-  const { colors: i } = r, n = o ? c[t] : i.REAL_BLACK_50;
+  const { colors: e } = r, n = o ? c[t] : e.REAL_BLACK_50;
   return l`
     cursor: ${o ? "auto" : "pointer"};
     position: relative;
@@ -56,36 +56,36 @@ const S = e(u)(({
     top: ${o && s ? "0px" : "8px"};
 
     .ruler-rect-color {
-      fill: ${o ? n : i.GREY_3};
+      fill: ${o ? n : e.GREY_3};
     }
 
     .ruler-stripe-base {
-      fill: ${o ? n : i.GREY_2};
+      fill: ${o ? n : e.GREY_2};
       opacity: ${o ? 0.2 : 1};
     }
 
     .ruler-small-stripe {
-      fill: ${i.REAL_BLACK};
+      fill: ${e.REAL_BLACK};
     }
 
     ${!o && l`
       &:hover {
         .ruler-rect-color {
-          fill: ${i.GREY_4};
+          fill: ${e.GREY_4};
         }
         .ruler-stripe-base {
-          fill: ${i.GREY_3};
+          fill: ${e.GREY_3};
         }
       }
     `}
   `;
-}), w = e(h)(({
+}), W = i(h)(({
   $active: r,
   theme: o,
   $activeColor: t,
   $shouldAnimate: s
 }) => {
-  const { colors: i } = o, n = r ? c[t] : i.REAL_BLACK_50;
+  const { colors: e } = o, n = r ? c[t] : e.REAL_BLACK_50;
   return l`
     cursor: ${r ? "auto" : "pointer"};
     position: relative;
@@ -123,13 +123,13 @@ const S = e(u)(({
       }
     `}
   `;
-}), G = e(x)(({
+}), Y = i(x)(({
   $active: r,
   theme: o,
   $activeColor: t,
   $shouldAnimate: s
 }) => {
-  const { colors: i } = o, n = r ? c[t] : i.REAL_BLACK_50;
+  const { colors: e } = o, n = r ? c[t] : e.REAL_BLACK_50;
   return l`
     cursor: ${r ? "auto" : "pointer"};
     position: relative;
@@ -169,13 +169,13 @@ const S = e(u)(({
       }
     `}
   `;
-}), Y = e(f)`
+}), w = i(f)`
   width: 20px;
   height: 20px;
-`, H = e(m)`
+`, H = i(m)`
   width: 20px;
   height: 20px;
-`, P = e(p)(
+`, P = i(p)(
   ({ theme: r, $active: o }) => {
     const { colors: t } = r;
     return l`
@@ -187,6 +187,7 @@ const S = e(u)(({
       border: 1px solid ${t.WHITE};
       border-radius: 50%;
       transition: all 100ms ease-in-out;
+      border: 1px solid ${t.GREY_1};
 
       ${!o && l`
         &:hover {
@@ -214,13 +215,13 @@ const S = e(u)(({
       `}
     `;
   }
-), T = e(a)`
+), T = i(a)`
   path {
     stroke: ${"white"};
   }
-`, U = e($)`
+`, U = i($)`
   transform: scaleX(-1);
-`, j = e(p)`
+`, j = i(p)`
   position: absolute;
   display: flex;
   justify-content: center;
@@ -228,7 +229,7 @@ const S = e(u)(({
   transition:
     opacity 0.5s ease,
     transform 0.5s ease;
-`, D = e(p)(
+`, D = i(p)(
   ({ $canScribble: r, $canRender: o, $renderAs: t }) => `
   display: ${o ? "block" : "none"};
   opacity: ${r ? 1 : 0.5};
@@ -241,18 +242,18 @@ const S = e(u)(({
     `}
   
 `
-), O = e(p)(
+), O = i(p)(
   ({ $color: r }) => `
 background: ${c[r]};
 `
-), V = e(d)`
+), V = i(d)`
   pointer-events: none;
   transition: transform 0.5s ease;
   transform: ${({ $isAnimating: r }) => r ? "rotate(180deg)" : "rotate(0deg)"};
-`, z = e(p)`
+`, z = i(p)`
   overflow: hidden;
   border-right: 1px solid ${({ theme: r }) => r.colors.GREY_1};
-`, F = e(p)`
+`, F = i(p)`
   position: absolute;
   padding: 8px 8px 0 8px;
   overflow: hidden;
@@ -276,11 +277,11 @@ export {
   U as RedoIcon,
   T as StyledCheckIcon,
   V as StyledDownIcon,
-  w as StyledHighlighterWrapper,
-  Y as StyledLockIcon,
+  W as StyledHighlighterWrapper,
+  w as StyledLockIcon,
   S as StyledPencilIcon,
-  W as StyledRulerIcon,
-  G as StyledSketchWrapper,
+  G as StyledRulerIcon,
+  Y as StyledSketchWrapper,
   H as StyledUnlockIcon,
   P as StyledWrapper
 };

package/dist/features/cue-canvas/cue-cavas-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"cue-cavas-styled.js","sources":["../../../src/features/cue-canvas/cue-cavas-styled.tsx"],"sourcesContent":["import type { ICueCanvasWrapper, TCueCanvasColors } from './types/cue-canvas';\n\nimport styled, { css } from 'styled-components';\n\nimport TickIcon from '../../assets/line-icons/icons/check';\nimport DownIcon from '../../assets/line-icons/icons/down';\nimport HighlighterIcon from '../../assets/line-icons/icons/highlighter';\nimport LockIcon from '../../assets/line-icons/icons/lock';\nimport PencilIcon from '../../assets/line-icons/icons/pencil';\nimport RulerIcon from '../../assets/line-icons/icons/ruler';\nimport SketchIcon from '../../assets/line-icons/icons/sketch';\nimport UndoIcon from '../../assets/line-icons/icons/undo';\nimport UnlockIcon from '../../assets/line-icons/icons/unlock';\nimport FlexView from '../ui/layout/flex-view';\nimport { CANVAS_COLORS } from './constants/constants';\n\ninterface IToolProps {\n  $active: boolean;\n  $activeColor: TCueCanvasColors;\n  $shouldAnimate: boolean;\n}\n\nexport const StyledPencilIcon = styled(PencilIcon)<IToolProps>(({\n  theme,\n  $active,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n    cursor: ${$active ? 'auto' : 'pointer'};\n    .pencil-dark-shade {\n      fill: ${$active ? color : colors.GREY_3};\n    }\n\n    .pencil-light-shade {\n      fill: ${$active ? color : colors.GREY_2};\n      opacity: ${$active ? 0.3 : 1};\n    }\n\n    ${!$active &&\n    css`\n      &:hover {\n        .pencil-dark-shade {\n          fill: ${colors.GREY_4};\n        }\n        .pencil-light-shade {\n          fill: ${colors.GREY_2};\n        }\n      }\n    `}\n  `;\n});\n\nexport const StyledRulerIcon = styled(RulerIcon)<IToolProps>(({\n  theme,\n  $active,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n\n    .ruler-rect-color {\n      fill: ${$active ? color : colors.GREY_3};\n    }\n\n    .ruler-stripe-base {\n      fill: ${$active ? color : colors.GREY_2};\n      opacity: ${$active ? 0.2 : 1};\n    }\n\n    .ruler-small-stripe {\n      fill: ${colors.REAL_BLACK};\n    }\n\n    ${!$active &&\n    css`\n      &:hover {\n        .ruler-rect-color {\n          fill: ${colors.GREY_4};\n        }\n        .ruler-stripe-base {\n          fill: ${colors.GREY_3};\n        }\n      }\n    `}\n  `;\n});\n\nexport const StyledHighlighterWrapper = styled(HighlighterIcon)<IToolProps>(({\n  $active,\n  theme,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n    ${!$active &&\n    css`\n      &:hover {\n        .highlighter-tip {\n          fill: ${theme.colors.BLACK};\n        }\n\n        .highlighter-stripe {\n          fill: ${theme.colors.BLACK_50};\n        }\n\n        .highlighter-light-body {\n          fill: ${theme.colors.BLACK_10};\n        }\n      }\n    `}\n\n    ${$active &&\n    css`\n      .highlighter-tip {\n        fill: ${color};\n      }\n\n      .highlighter-stripe {\n        fill: ${color};\n        opacity: 0.6;\n      }\n\n      .highlighter-light-body {\n        fill: ${color};\n        opacity: 0.2;\n      }\n    `}\n  `;\n});\n\nexport const StyledSketchWrapper = styled(SketchIcon)<IToolProps>(({\n  $active,\n  theme,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n\n    ${!$active &&\n    css`\n      &:hover {\n        .pen-tip {\n          fill: ${theme.colors.BLACK};\n        }\n\n        .pen-dark-shade {\n          fill: ${theme.colors.BLACK_50};\n        }\n\n        .pen-light-shade {\n          fill: ${theme.colors.BLACK_10};\n        }\n      }\n    `}\n\n    ${$active &&\n    css`\n      cursor: ${$active ? 'auto' : 'pointer'};\n      .pen-tip {\n        fill: ${color};\n      }\n\n      .pen-dark-shade {\n        fill: ${color};\n        opacity: 0.6;\n      }\n\n      .pen-light-shade {\n        fill: ${color};\n        opacity: 0.4;\n      }\n    `}\n  `;\n});\n\nexport const StyledLockIcon = styled(LockIcon)`\n  width: 20px;\n  height: 20px;\n`;\n\nexport const StyledUnlockIcon = styled(UnlockIcon)`\n  width: 20px;\n  height: 20px;\n`;\n\nexport const StyledWrapper = styled(FlexView)<Omit<IToolProps, '$activeColor' | '$shouldAnimate'>>(\n  ({ theme, $active }) => {\n    const { colors } = theme;\n\n    return css`\n      cursor: ${$active ? 'auto' : 'pointer'};\n      width: 32px;\n      height: 32px;\n      justify-content: center;\n      align-items: center;\n      border: 1px solid ${colors.WHITE};\n      border-radius: 50%;\n      transition: all 100ms ease-in-out;\n\n      ${!$active &&\n      css`\n        &:hover {\n          border: 1px solid ${colors.REAL_BLACK};\n        }\n      `}\n\n      ${$active &&\n      css`\n        cursor: auto;\n        background: ${colors.BLACK};\n        .tile-icon {\n          fill: ${colors.BLACK};\n        }\n        svg {\n          path,\n          rect,\n          circle {\n            stroke: ${colors.WHITE};\n          }\n          .hover-eraser {\n            stroke: none;\n            fill: ${colors.WHITE};\n          }\n        }\n      `}\n    `;\n  },\n);\n\nexport const StyledCheckIcon = styled(TickIcon)`\n  path {\n    stroke: ${'white'};\n  }\n`;\n\nexport const RedoIcon = styled(UndoIcon)`\n  transform: scaleX(-1);\n`;\n\nexport const PaletteWrapper = styled(FlexView)`\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  top: -24px; //-16 for icon, -8 for gap\n  transition:\n    opacity 0.5s ease,\n    transform 0.5s ease;\n`;\n\nexport const CueCanvasWrapper = styled(FlexView)<ICueCanvasWrapper>(\n  ({ $canScribble, $canRender, $renderAs }) => `\n  display: ${$canRender ? 'block' : 'none'};\n  opacity: ${$canScribble ? 1 : 0.5};\n  pointer-events: ${$canScribble ? 'auto' : 'none'};\n\n  ${\n    $renderAs === 'canvas' &&\n    $canScribble &&\n    `\n    background-image: radial-gradient(rgb(43 43 43 / 8%) 2px, transparent 10%);\n    background-position:0 0,32px 32px;\n    background-size: 30px 32px;\n    `\n  }\n  \n`,\n);\n\nexport const ColorPicker = styled(FlexView)<{ $color: TCueCanvasColors }>(\n  ({ $color }) => `\nbackground: ${CANVAS_COLORS[$color]};\n`,\n);\n\nexport const StyledDownIcon = styled(DownIcon)<{ $isAnimating: boolean }>`\n  pointer-events: none;\n  transition: transform 0.5s ease;\n  transform: ${({ $isAnimating }) => ($isAnimating ? 'rotate(180deg)' : 'rotate(0deg)')};\n`;\n\nexport const PenIconWrapper = styled(FlexView)`\n  overflow: hidden;\n  border-right: 1px solid ${({ theme }) => theme.colors.GREY_1};\n`;\n\nexport const MenuWrapper = styled(FlexView)`\n  position: absolute;\n  padding: 8px 8px 0 8px;\n  overflow: hidden;\n  bottom: 58px;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  transition:\n    opacity 0.5s ease,\n    transform 0.5s ease;\n\n  :hover {\n    cursor: pointer;\n  }\n`;\n"],"names":["StyledPencilIcon","styled","PencilIcon","theme","$active","$activeColor","$shouldAnimate","colors","color","CANVAS_COLORS","css","StyledRulerIcon","RulerIcon","StyledHighlighterWrapper","HighlighterIcon","StyledSketchWrapper","SketchIcon","StyledLockIcon","LockIcon","StyledUnlockIcon","UnlockIcon","StyledWrapper","FlexView","StyledCheckIcon","TickIcon","RedoIcon","UndoIcon","PaletteWrapper","CueCanvasWrapper","$canScribble","$canRender","$renderAs","ColorPicker","$color","StyledDownIcon","DownIcon","$isAnimating","PenIconWrapper","MenuWrapper"],"mappings":"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"}
+{"version":3,"file":"cue-cavas-styled.js","sources":["../../../src/features/cue-canvas/cue-cavas-styled.tsx"],"sourcesContent":["import type { ICueCanvasWrapper, TCueCanvasColors } from './types/cue-canvas';\n\nimport styled, { css } from 'styled-components';\n\nimport TickIcon from '../../assets/line-icons/icons/check';\nimport DownIcon from '../../assets/line-icons/icons/down';\nimport HighlighterIcon from '../../assets/line-icons/icons/highlighter';\nimport LockIcon from '../../assets/line-icons/icons/lock';\nimport PencilIcon from '../../assets/line-icons/icons/pencil';\nimport RulerIcon from '../../assets/line-icons/icons/ruler';\nimport SketchIcon from '../../assets/line-icons/icons/sketch';\nimport UndoIcon from '../../assets/line-icons/icons/undo';\nimport UnlockIcon from '../../assets/line-icons/icons/unlock';\nimport FlexView from '../ui/layout/flex-view';\nimport { CANVAS_COLORS } from './constants/constants';\n\ninterface IToolProps {\n  $active: boolean;\n  $activeColor: TCueCanvasColors;\n  $shouldAnimate: boolean;\n}\n\nexport const StyledPencilIcon = styled(PencilIcon)<IToolProps>(({\n  theme,\n  $active,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n    cursor: ${$active ? 'auto' : 'pointer'};\n    .pencil-dark-shade {\n      fill: ${$active ? color : colors.GREY_3};\n    }\n\n    .pencil-light-shade {\n      fill: ${$active ? color : colors.GREY_2};\n      opacity: ${$active ? 0.3 : 1};\n    }\n\n    ${!$active &&\n    css`\n      &:hover {\n        .pencil-dark-shade {\n          fill: ${colors.GREY_4};\n        }\n        .pencil-light-shade {\n          fill: ${colors.GREY_2};\n        }\n      }\n    `}\n  `;\n});\n\nexport const StyledRulerIcon = styled(RulerIcon)<IToolProps>(({\n  theme,\n  $active,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n\n    .ruler-rect-color {\n      fill: ${$active ? color : colors.GREY_3};\n    }\n\n    .ruler-stripe-base {\n      fill: ${$active ? color : colors.GREY_2};\n      opacity: ${$active ? 0.2 : 1};\n    }\n\n    .ruler-small-stripe {\n      fill: ${colors.REAL_BLACK};\n    }\n\n    ${!$active &&\n    css`\n      &:hover {\n        .ruler-rect-color {\n          fill: ${colors.GREY_4};\n        }\n        .ruler-stripe-base {\n          fill: ${colors.GREY_3};\n        }\n      }\n    `}\n  `;\n});\n\nexport const StyledHighlighterWrapper = styled(HighlighterIcon)<IToolProps>(({\n  $active,\n  theme,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n    ${!$active &&\n    css`\n      &:hover {\n        .highlighter-tip {\n          fill: ${theme.colors.BLACK};\n        }\n\n        .highlighter-stripe {\n          fill: ${theme.colors.BLACK_50};\n        }\n\n        .highlighter-light-body {\n          fill: ${theme.colors.BLACK_10};\n        }\n      }\n    `}\n\n    ${$active &&\n    css`\n      .highlighter-tip {\n        fill: ${color};\n      }\n\n      .highlighter-stripe {\n        fill: ${color};\n        opacity: 0.6;\n      }\n\n      .highlighter-light-body {\n        fill: ${color};\n        opacity: 0.2;\n      }\n    `}\n  `;\n});\n\nexport const StyledSketchWrapper = styled(SketchIcon)<IToolProps>(({\n  $active,\n  theme,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n\n    ${!$active &&\n    css`\n      &:hover {\n        .pen-tip {\n          fill: ${theme.colors.BLACK};\n        }\n\n        .pen-dark-shade {\n          fill: ${theme.colors.BLACK_50};\n        }\n\n        .pen-light-shade {\n          fill: ${theme.colors.BLACK_10};\n        }\n      }\n    `}\n\n    ${$active &&\n    css`\n      cursor: ${$active ? 'auto' : 'pointer'};\n      .pen-tip {\n        fill: ${color};\n      }\n\n      .pen-dark-shade {\n        fill: ${color};\n        opacity: 0.6;\n      }\n\n      .pen-light-shade {\n        fill: ${color};\n        opacity: 0.4;\n      }\n    `}\n  `;\n});\n\nexport const StyledLockIcon = styled(LockIcon)`\n  width: 20px;\n  height: 20px;\n`;\n\nexport const StyledUnlockIcon = styled(UnlockIcon)`\n  width: 20px;\n  height: 20px;\n`;\n\nexport const StyledWrapper = styled(FlexView)<Omit<IToolProps, '$activeColor' | '$shouldAnimate'>>(\n  ({ theme, $active }) => {\n    const { colors } = theme;\n\n    return css`\n      cursor: ${$active ? 'auto' : 'pointer'};\n      width: 32px;\n      height: 32px;\n      justify-content: center;\n      align-items: center;\n      border: 1px solid ${colors.WHITE};\n      border-radius: 50%;\n      transition: all 100ms ease-in-out;\n      border: 1px solid ${colors.GREY_1};\n\n      ${!$active &&\n      css`\n        &:hover {\n          border: 1px solid ${colors.REAL_BLACK};\n        }\n      `}\n\n      ${$active &&\n      css`\n        cursor: auto;\n        background: ${colors.BLACK};\n        .tile-icon {\n          fill: ${colors.BLACK};\n        }\n        svg {\n          path,\n          rect,\n          circle {\n            stroke: ${colors.WHITE};\n          }\n          .hover-eraser {\n            stroke: none;\n            fill: ${colors.WHITE};\n          }\n        }\n      `}\n    `;\n  },\n);\n\nexport const StyledCheckIcon = styled(TickIcon)`\n  path {\n    stroke: ${'white'};\n  }\n`;\n\nexport const RedoIcon = styled(UndoIcon)`\n  transform: scaleX(-1);\n`;\n\nexport const PaletteWrapper = styled(FlexView)`\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  top: -24px; //-16 for icon, -8 for gap\n  transition:\n    opacity 0.5s ease,\n    transform 0.5s ease;\n`;\n\nexport const CueCanvasWrapper = styled(FlexView)<ICueCanvasWrapper>(\n  ({ $canScribble, $canRender, $renderAs }) => `\n  display: ${$canRender ? 'block' : 'none'};\n  opacity: ${$canScribble ? 1 : 0.5};\n  pointer-events: ${$canScribble ? 'auto' : 'none'};\n\n  ${\n    $renderAs === 'canvas' &&\n    $canScribble &&\n    `\n    background-image: radial-gradient(rgb(43 43 43 / 8%) 2px, transparent 10%);\n    background-position:0 0,32px 32px;\n    background-size: 30px 32px;\n    `\n  }\n  \n`,\n);\n\nexport const ColorPicker = styled(FlexView)<{ $color: TCueCanvasColors }>(\n  ({ $color }) => `\nbackground: ${CANVAS_COLORS[$color]};\n`,\n);\n\nexport const StyledDownIcon = styled(DownIcon)<{ $isAnimating: boolean }>`\n  pointer-events: none;\n  transition: transform 0.5s ease;\n  transform: ${({ $isAnimating }) => ($isAnimating ? 'rotate(180deg)' : 'rotate(0deg)')};\n`;\n\nexport const PenIconWrapper = styled(FlexView)`\n  overflow: hidden;\n  border-right: 1px solid ${({ theme }) => theme.colors.GREY_1};\n`;\n\nexport const MenuWrapper = styled(FlexView)`\n  position: absolute;\n  padding: 8px 8px 0 8px;\n  overflow: hidden;\n  bottom: 58px;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  transition:\n    opacity 0.5s ease,\n    transform 0.5s ease;\n\n  :hover {\n    cursor: pointer;\n  }\n`;\n"],"names":["StyledPencilIcon","styled","PencilIcon","theme","$active","$activeColor","$shouldAnimate","colors","color","CANVAS_COLORS","css","StyledRulerIcon","RulerIcon","StyledHighlighterWrapper","HighlighterIcon","StyledSketchWrapper","SketchIcon","StyledLockIcon","LockIcon","StyledUnlockIcon","UnlockIcon","StyledWrapper","FlexView","StyledCheckIcon","TickIcon","RedoIcon","UndoIcon","PaletteWrapper","CueCanvasWrapper","$canScribble","$canRender","$renderAs","ColorPicker","$color","StyledDownIcon","DownIcon","$isAnimating","PenIconWrapper","MenuWrapper"],"mappings":"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"}

package/dist/features/cue-canvas/hooks/use-cue-canvas-actions.js

@@ -1,32 +1,32 @@
-import { useContext as l, useMemo as v } from "react";
-import u from "../cue-canvas-context.js";
-const C = () => {
+import { useContext as a, useMemo as m } from "react";
+import v from "../cue-canvas-context.js";
+const A = () => {
   const {
-    activeInstance: t,
-    setActiveTool: o,
+    activeInstance: o,
+    setActiveTool: t,
     activeTool: e,
-    setActiveInstance: i,
-    activeColor: r,
-    setActiveColor: s,
-    setActiveSidebar: c,
-    activeSidebar: n
-  } = l(u), a = v(
+    setActiveInstance: r,
+    activeColor: s,
+    setActiveColor: i,
+    homeworkId: n,
+    setHomeworkId: c
+  } = a(v), l = m(
     () => e ? ["pen", "ruler", "highlighter", "marker"].includes(e) : !1,
     [e]
   );
   return {
-    activeInstance: t,
-    setActiveTool: o,
+    activeInstance: o,
+    setActiveTool: t,
     activeTool: e,
-    setActiveInstance: i,
-    activeColor: r,
-    setActiveColor: s,
-    isWritingToolActive: a,
-    setActiveSidebar: c,
-    activeSidebar: n
+    setActiveInstance: r,
+    activeColor: s,
+    setActiveColor: i,
+    isWritingToolActive: l,
+    homeworkId: n,
+    setHomeworkId: c
   };
 };
 export {
-  C as useCueCanvasActions
+  A as useCueCanvasActions
 };
 //# sourceMappingURL=use-cue-canvas-actions.js.map

package/dist/features/cue-canvas/hooks/use-cue-canvas-actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-cue-canvas-actions.js","sources":["../../../../src/features/cue-canvas/hooks/use-cue-canvas-actions.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport PolyContext from '../cue-canvas-context';\n\nexport const useCueCanvasActions = () => {\n  const {\n    activeInstance,\n    setActiveTool,\n    activeTool,\n    setActiveInstance,\n    activeColor,\n    setActiveColor,\n    setActiveSidebar,\n    activeSidebar,\n  } = useContext(PolyContext);\n\n  const isWritingToolActive = useMemo(\n    () => (activeTool ? ['pen', 'ruler', 'highlighter', 'marker'].includes(activeTool) : false),\n    [activeTool],\n  );\n\n  return {\n    activeInstance,\n    setActiveTool,\n    activeTool,\n    setActiveInstance,\n    activeColor,\n    setActiveColor,\n    isWritingToolActive,\n    setActiveSidebar,\n    activeSidebar,\n  };\n};\n"],"names":["useCueCanvasActions","activeInstance","setActiveTool","activeTool","setActiveInstance","activeColor","setActiveColor","setActiveSidebar","activeSidebar","useContext","PolyContext","isWritingToolActive","useMemo"],"mappings":";;AAIO,MAAMA,IAAsB,MAAM;AACjC,QAAA;AAAA,IACJ,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,eAAAC;AAAA,EAAA,IACEC,EAAWC,CAAW,GAEpBC,IAAsBC;AAAA,IAC1B,MAAOT,IAAa,CAAC,OAAO,SAAS,eAAe,QAAQ,EAAE,SAASA,CAAU,IAAI;AAAA,IACrF,CAACA,CAAU;AAAA,EAAA;AAGN,SAAA;AAAA,IACL,gBAAAF;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,qBAAAK;AAAA,IACA,kBAAAJ;AAAA,IACA,eAAAC;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"use-cue-canvas-actions.js","sources":["../../../../src/features/cue-canvas/hooks/use-cue-canvas-actions.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport PolyContext from '../cue-canvas-context';\n\nexport const useCueCanvasActions = () => {\n  const {\n    activeInstance,\n    setActiveTool,\n    activeTool,\n    setActiveInstance,\n    activeColor,\n    setActiveColor,\n    homeworkId,\n    setHomeworkId,\n  } = useContext(PolyContext);\n\n  const isWritingToolActive = useMemo(\n    () => (activeTool ? ['pen', 'ruler', 'highlighter', 'marker'].includes(activeTool) : false),\n    [activeTool],\n  );\n\n  return {\n    activeInstance,\n    setActiveTool,\n    activeTool,\n    setActiveInstance,\n    activeColor,\n    setActiveColor,\n    isWritingToolActive,\n    homeworkId,\n    setHomeworkId,\n  };\n};\n"],"names":["useCueCanvasActions","activeInstance","setActiveTool","activeTool","setActiveInstance","activeColor","setActiveColor","homeworkId","setHomeworkId","useContext","PolyContext","isWritingToolActive","useMemo"],"mappings":";;AAIO,MAAMA,IAAsB,MAAM;AACjC,QAAA;AAAA,IACJ,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,EAAA,IACEC,EAAWC,CAAW,GAEpBC,IAAsBC;AAAA,IAC1B,MAAOT,IAAa,CAAC,OAAO,SAAS,eAAe,QAAQ,EAAE,SAASA,CAAU,IAAI;AAAA,IACrF,CAACA,CAAU;AAAA,EAAA;AAGN,SAAA;AAAA,IACL,gBAAAF;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,qBAAAK;AAAA,IACA,YAAAJ;AAAA,IACA,eAAAC;AAAA,EAAA;AAEJ;"}

package/dist/features/cue-canvas/sidebar/homework/helper.js

@@ -0,0 +1,20 @@
+const m = (t) => {
+  const e = typeof t == "string" ? new Date(t) : new Date(t * 1e3), o = e.getDate(), r = e.getMonth() + 1;
+  return { year: e.getFullYear(), month: r, date: o };
+};
+function a(t) {
+  const n = /* @__PURE__ */ new Date();
+  return n.setMonth(t - 1), n.toLocaleString("en-US", {
+    month: "short"
+  });
+}
+const c = (t) => {
+  var e;
+  return (e = a(+t)) == null ? void 0 : e.toUpperCase();
+};
+export {
+  m as getDateInInputFormat,
+  c as getMonthNameforNumber,
+  a as toMonthName
+};
+//# sourceMappingURL=helper.js.map

package/dist/features/cue-canvas/sidebar/homework/helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.js","sources":["../../../../../src/features/cue-canvas/sidebar/homework/helper.ts"],"sourcesContent":["export const getDateInInputFormat = (inputDate: number | string) => {\n  const isDateInString = typeof inputDate === 'string';\n  const dateToBeConverted = isDateInString ? new Date(inputDate) : new Date(inputDate * 1000);\n\n  const dateNum = dateToBeConverted.getDate();\n  const monthNum = dateToBeConverted.getMonth() + 1;\n  const year = dateToBeConverted.getFullYear();\n\n  return { year, month: monthNum, date: dateNum };\n};\n\nexport function toMonthName(monthNumber: number) {\n  const date = new Date();\n\n  date.setMonth(monthNumber - 1);\n\n  return date.toLocaleString('en-US', {\n    month: 'short',\n  });\n}\nexport const getMonthNameforNumber = (num: number) => {\n  const monthName = toMonthName(+num)?.toUpperCase();\n\n  return monthName;\n};\n"],"names":["getDateInInputFormat","inputDate","dateToBeConverted","dateNum","monthNum","toMonthName","monthNumber","date","getMonthNameforNumber","num","_a"],"mappings":"AAAa,MAAAA,IAAuB,CAACC,MAA+B;AAE5D,QAAAC,IADiB,OAAOD,KAAc,WACD,IAAI,KAAKA,CAAS,IAAI,IAAI,KAAKA,IAAY,GAAI,GAEpFE,IAAUD,EAAkB,WAC5BE,IAAWF,EAAkB,SAAA,IAAa;AAGhD,SAAO,EAAE,MAFIA,EAAkB,eAEhB,OAAOE,GAAU,MAAMD,EAAQ;AAChD;AAEO,SAASE,EAAYC,GAAqB;AACzC,QAAAC,wBAAW;AAEZ,SAAAA,EAAA,SAASD,IAAc,CAAC,GAEtBC,EAAK,eAAe,SAAS;AAAA,IAClC,OAAO;AAAA,EAAA,CACR;AACH;AACa,MAAAC,IAAwB,CAACC,MAAgB;AApBzC,MAAAC;AAuBJ,UAFWA,IAAAL,EAAY,CAACI,CAAG,MAAhB,gBAAAC,EAAmB;AAGvC;"}

package/dist/features/cue-canvas/sidebar/homework/homework-menu.js

@@ -0,0 +1,33 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { memo as m } from "react";
+import s from "../../../../assets/line-icons/icons/cross.js";
+import $ from "../../../ui/buttons/clickable/clickable.js";
+import r from "../../../ui/layout/flex-view.js";
+import n from "../../../ui/text/text.js";
+import p from "./homework-request.js";
+import { MenuContainer as d } from "./homework-styled.js";
+const a = ({ onSelect: t, hwRequests: c, studentName: l }) => /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ o(
+  r,
+  {
+    $flexDirection: "row",
+    $alignItems: "center",
+    $justifyContent: "center",
+    $flexWrap: !0,
+    $gutterX: 0.5,
+    $gapX: 0.5,
+    children: [
+      /* @__PURE__ */ o(r, { $flexDirection: "row", $gapX: 0.5, children: [
+        /* @__PURE__ */ o(r, { $width: "184px", $gutterX: 1, children: [
+          /* @__PURE__ */ e(n, { $color: "WHITE", $renderAs: "eyebrow2", children: "HOMEWORK" }),
+          /* @__PURE__ */ e(n, { $color: "WHITE", $renderAs: "eyebrow2", children: "HELP REQUESTS" })
+        ] }),
+        /* @__PURE__ */ e($, { onClick: t, label: "close activities menu", children: /* @__PURE__ */ e(s, { color: "WHITE" }) })
+      ] }),
+      c.map((i) => /* @__PURE__ */ e(r, { $gutterX: 0.25, $gapX: 0.5, children: /* @__PURE__ */ e(p, { hwRequest: i, onSelect: t, studentName: l }) }, i.created_on_ts))
+    ]
+  }
+) }) }), E = m(a);
+export {
+  E as default
+};
+//# sourceMappingURL=homework-menu.js.map

package/dist/features/cue-canvas/sidebar/homework/homework-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"homework-menu.js","sources":["../../../../../src/features/cue-canvas/sidebar/homework/homework-menu.tsx"],"sourcesContent":["import type { IHomeWorkMenuProps } from './homework-types';\n\nimport { memo } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport HWRequest from './homework-request';\nimport * as Styled from './homework-styled';\n\nconst HomeWorkMenu: React.FC<IHomeWorkMenuProps> = ({ onSelect, hwRequests, studentName }) => {\n  return (\n    <Styled.MenuContainer>\n      <FlexView>\n        <FlexView\n          $flexDirection=\"row\"\n          $alignItems=\"center\"\n          $justifyContent=\"center\"\n          $flexWrap\n          $gutterX={0.5}\n          $gapX={0.5}\n        >\n          <FlexView $flexDirection=\"row\" $gapX={0.5}>\n            <FlexView $width={'184px'} $gutterX={1}>\n              <Text $color=\"WHITE\" $renderAs=\"eyebrow2\">\n                HOMEWORK\n              </Text>\n              <Text $color=\"WHITE\" $renderAs=\"eyebrow2\">\n                HELP REQUESTS\n              </Text>\n            </FlexView>\n            <Clickable onClick={onSelect} label=\"close activities menu\">\n              <CrossIcon color=\"WHITE\" />\n            </Clickable>\n          </FlexView>\n\n          {hwRequests.map(item => (\n            <FlexView $gutterX={0.25} $gapX={0.5} key={item.created_on_ts}>\n              <HWRequest hwRequest={item} onSelect={onSelect} studentName={studentName} />\n            </FlexView>\n          ))}\n        </FlexView>\n      </FlexView>\n    </Styled.MenuContainer>\n  );\n};\n\nexport default memo(HomeWorkMenu);\n"],"names":["HomeWorkMenu","onSelect","hwRequests","studentName","jsx","Styled.MenuContainer","FlexView","jsxs","Text","Clickable","CrossIcon","item","HWRequest","HomeWorkMenu$1","memo"],"mappings":";;;;;;;;AAWA,MAAMA,IAA6C,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,aAAAC,QAEvE,gBAAAC,EAAAC,GAAA,EACC,4BAACC,GACC,EAAA,UAAA,gBAAAC;AAAA,EAACD;AAAA,EAAA;AAAA,IACC,gBAAe;AAAA,IACf,aAAY;AAAA,IACZ,iBAAgB;AAAA,IAChB,WAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IAEP,UAAA;AAAA,MAAA,gBAAAC,EAACD,GAAS,EAAA,gBAAe,OAAM,OAAO,KACpC,UAAA;AAAA,QAAA,gBAAAC,EAACD,GAAS,EAAA,QAAQ,SAAS,UAAU,GACnC,UAAA;AAAA,UAAA,gBAAAF,EAACI,GAAK,EAAA,QAAO,SAAQ,WAAU,YAAW,UAE1C,YAAA;AAAA,4BACCA,GAAK,EAAA,QAAO,SAAQ,WAAU,YAAW,UAE1C,iBAAA;AAAA,QAAA,GACF;AAAA,QACA,gBAAAJ,EAACK,GAAU,EAAA,SAASR,GAAU,OAAM,yBAClC,UAAC,gBAAAG,EAAAM,GAAA,EAAU,OAAM,QAAA,CAAQ,EAC3B,CAAA;AAAA,MAAA,GACF;AAAA,MAECR,EAAW,IAAI,CAAAS,wBACbL,GAAS,EAAA,UAAU,MAAM,OAAO,KAC/B,UAAC,gBAAAF,EAAAQ,GAAA,EAAU,WAAWD,GAAM,UAAAV,GAAoB,aAAAE,GAA0B,EADjC,GAAAQ,EAAK,aAEhD,CACD;AAAA,IAAA;AAAA,EAAA;AAAA,EAEL,CAAA,EACF,CAAA,GAIWE,IAAAC,EAAKd,CAAY;"}

package/dist/features/cue-canvas/sidebar/homework/homework-request.js

@@ -0,0 +1,60 @@
+import { jsx as o, jsxs as q } from "react/jsx-runtime";
+import { h as c } from "../../../../node_modules/humanize-plus/dist/humanize.js";
+import { memo as $, useCallback as k } from "react";
+import W from "../../../ui/buttons/clickable/clickable.js";
+import _ from "../../../ui/layout/flex-view.js";
+import d from "../../../ui/text/text.js";
+import { useCueCanvasActions as y } from "../../hooks/use-cue-canvas-actions.js";
+import { getDateInInputFormat as E, getMonthNameforNumber as T } from "./helper.js";
+import { HWImageContainer as v } from "./homework-styled.js";
+import l from "../../../../node_modules/uuid/dist/esm-browser/v4.js";
+const D = (u) => {
+  var a;
+  const { hwRequest: h, onSelect: r, studentName: p } = u, {
+    problem_description: n,
+    problem_image_urls: e,
+    created_on_ts: f,
+    homework_id: s
+  } = h, { setHomeworkId: m, activeInstance: t } = y(), g = k(() => {
+    const x = l();
+    if (e && e.length > 0) {
+      const i = {
+        data: {
+          [x]: [
+            void 0,
+            {
+              name: "text",
+              html: n,
+              x: 879.323630603094,
+              y: 75.07325572085722,
+              rot: 0
+            }
+          ]
+        }
+      };
+      e.forEach((C) => {
+        const H = l(), R = C + `?${Date.now()}`;
+        i.data[H] = [
+          void 0,
+          {
+            name: "image",
+            href: R,
+            x: 48.30546944572333,
+            y: 72.56813201988393,
+            rot: 0
+          }
+        ];
+      }), t == null || t.replaceCanvas(i);
+    }
+    r(), m(s);
+  }, [t, n, s, e, r, m]), { date: I, month: w } = E(f), b = `${c.ordinal(I)} ${c.titleCase((a = T(w)) == null ? void 0 : a.toLowerCase())}`;
+  return /* @__PURE__ */ o(W, { label: "HW Request Item", onClick: g, children: /* @__PURE__ */ q(_, { $alignItems: "center", $justifyContent: "center", $borderRadius: 8, $background: "WHITE", children: [
+    /* @__PURE__ */ o(v, { src: e[0], alt: "Homework Request" }),
+    /* @__PURE__ */ o(d, { $renderAs: "body3", color: "WHITE", children: p }),
+    /* @__PURE__ */ o(d, { $renderAs: "body3", color: "WHITE", children: b })
+  ] }) });
+}, V = $(D);
+export {
+  V as default
+};
+//# sourceMappingURL=homework-request.js.map

package/dist/features/cue-canvas/sidebar/homework/homework-request.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"homework-request.js","sources":["../../../../../src/features/cue-canvas/sidebar/homework/homework-request.tsx"],"sourcesContent":["import type { IReplaceCanvas } from '../../types/cue-canvas';\nimport type { IHomeWorkRequestProps } from './homework-types';\n\nimport { ordinal, titleCase } from 'humanize-plus';\nimport { memo, useCallback } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\nimport { getDateInInputFormat, getMonthNameforNumber } from './helper';\nimport * as Styled from './homework-styled';\n\nconst HomeWorkRequest: React.FC<IHomeWorkRequestProps> = props => {\n  const { hwRequest, onSelect, studentName } = props;\n  const {\n    problem_description: hwRequestDesc,\n    problem_image_urls: hwRequestImages,\n    created_on_ts: createdOnTs,\n    homework_id: hwRequestId,\n  } = hwRequest;\n  const { setHomeworkId, activeInstance } = useCueCanvasActions();\n\n  const onSelectHwRequest = useCallback(() => {\n    const textId = uuidv4();\n\n    if (hwRequestImages && hwRequestImages.length > 0) {\n      const actionData: IReplaceCanvas = {\n        data: {\n          [textId]: [\n            undefined,\n            {\n              name: 'text',\n              html: hwRequestDesc,\n              x: 879.323630603094,\n              y: 75.07325572085722,\n              rot: 0,\n            },\n          ],\n        },\n      };\n\n      hwRequestImages.forEach(image => {\n        const imgId = uuidv4();\n        const imageUrl = image + `?${Date.now()}`;\n\n        actionData.data[imgId] = [\n          undefined,\n          {\n            name: 'image',\n            href: imageUrl,\n            x: 48.30546944572333,\n            y: 72.56813201988393,\n            rot: 0,\n          },\n        ];\n      });\n\n      activeInstance?.replaceCanvas(actionData);\n    }\n    // const url = new URL(window.location.href);\n    // url.searchParams.set('homeworkId', hwRequestId);\n    // console.log('url', url);\n    // window.history.replaceState({}, '', url.toString());\n    onSelect();\n    setHomeworkId(hwRequestId);\n  }, [activeInstance, hwRequestDesc, hwRequestId, hwRequestImages, onSelect, setHomeworkId]);\n\n  const { date, month } = getDateInInputFormat(createdOnTs);\n\n  const dateString = `${ordinal(date)} ${titleCase(getMonthNameforNumber(month)?.toLowerCase())}`;\n\n  return (\n    <Clickable label=\"HW Request Item\" onClick={onSelectHwRequest}>\n      <FlexView $alignItems=\"center\" $justifyContent=\"center\" $borderRadius={8} $background=\"WHITE\">\n        <Styled.HWImageContainer src={hwRequestImages[0]} alt=\"Homework Request\" />\n        <Text $renderAs=\"body3\" color=\"WHITE\">\n          {studentName}\n        </Text>\n        <Text $renderAs=\"body3\" color=\"WHITE\">\n          {dateString}\n        </Text>\n      </FlexView>\n    </Clickable>\n  );\n};\n\nexport default memo(HomeWorkRequest);\n"],"names":["HomeWorkRequest","props","hwRequest","onSelect","studentName","hwRequestDesc","hwRequestImages","createdOnTs","hwRequestId","setHomeworkId","activeInstance","useCueCanvasActions","onSelectHwRequest","useCallback","textId","uuidv4","actionData","image","imgId","imageUrl","date","month","getDateInInputFormat","dateString","ordinal","titleCase","_a","getMonthNameforNumber","jsx","Clickable","jsxs","FlexView","Styled.HWImageContainer","Text","HWRequest","memo"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAAmD,CAASC,MAAA;;AAChE,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,aAAAC,EAAA,IAAgBH,GACvC;AAAA,IACJ,qBAAqBI;AAAA,IACrB,oBAAoBC;AAAA,IACpB,eAAeC;AAAA,IACf,aAAaC;AAAA,EACX,IAAAN,GACE,EAAE,eAAAO,GAAe,gBAAAC,EAAe,IAAIC,EAAoB,GAExDC,IAAoBC,EAAY,MAAM;AAC1C,UAAMC,IAASC;AAEX,QAAAT,KAAmBA,EAAgB,SAAS,GAAG;AACjD,YAAMU,IAA6B;AAAA,QACjC,MAAM;AAAA,UACJ,CAACF,CAAM,GAAG;AAAA,YACR;AAAA,YACA;AAAA,cACE,MAAM;AAAA,cACN,MAAMT;AAAA,cACN,GAAG;AAAA,cACH,GAAG;AAAA,cACH,KAAK;AAAA,YACP;AAAA,UACF;AAAA,QACF;AAAA,MAAA;AAGF,MAAAC,EAAgB,QAAQ,CAASW,MAAA;AAC/B,cAAMC,IAAQH,KACRI,IAAWF,IAAQ,IAAI,KAAK,IAAK,CAAA;AAE5B,QAAAD,EAAA,KAAKE,CAAK,IAAI;AAAA,UACvB;AAAA,UACA;AAAA,YACE,MAAM;AAAA,YACN,MAAMC;AAAA,YACN,GAAG;AAAA,YACH,GAAG;AAAA,YACH,KAAK;AAAA,UACP;AAAA,QAAA;AAAA,MACF,CACD,GAEDT,KAAA,QAAAA,EAAgB,cAAcM;AAAA,IAChC;AAKS,IAAAb,KACTM,EAAcD,CAAW;AAAA,EAAA,GACxB,CAACE,GAAgBL,GAAeG,GAAaF,GAAiBH,GAAUM,CAAa,CAAC,GAEnF,EAAE,MAAAW,GAAM,OAAAC,EAAM,IAAIC,EAAqBf,CAAW,GAElDgB,IAAa,GAAGC,UAAQJ,CAAI,CAAC,IAAIK,aAAUC,IAAAC,EAAsBN,CAAK,MAA3B,gBAAAK,EAA8B,aAAa,CAAC;AAE7F,SACG,gBAAAE,EAAAC,GAAA,EAAU,OAAM,mBAAkB,SAASjB,GAC1C,UAAA,gBAAAkB,EAACC,GAAS,EAAA,aAAY,UAAS,iBAAgB,UAAS,eAAe,GAAG,aAAY,SACpF,UAAA;AAAA,IAAC,gBAAAH,EAAAI,GAAA,EAAwB,KAAK1B,EAAgB,CAAC,GAAG,KAAI,oBAAmB;AAAA,sBACxE2B,GAAK,EAAA,WAAU,SAAQ,OAAM,SAC3B,UACH7B,GAAA;AAAA,sBACC6B,GAAK,EAAA,WAAU,SAAQ,OAAM,SAC3B,UACHV,GAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,GAEeW,IAAAC,EAAKnC,CAAe;"}

package/dist/features/cue-canvas/sidebar/homework/homework-styled.js

@@ -0,0 +1,25 @@
+import o from "styled-components";
+import t from "../../../ui/layout/flex-view.js";
+const i = o(t)`
+  position: absolute;
+  top: 38px;
+  left: -79px; //32px + 32 px  for icon +4 + 4 gutter + 7 padding
+  width: 248px;
+  height: 438px;
+  border-radius: 6px;
+  background: #292734;
+  box-shadow: 0px 4px 8px ${({ theme: r }) => r.colors.BLACK_T_20};
+  overflow-y: auto;
+`, d = o.img`
+  width: 184px;
+  height: 128px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+`;
+export {
+  d as HWImageContainer,
+  i as MenuContainer
+};
+//# sourceMappingURL=homework-styled.js.map

package/dist/features/cue-canvas/sidebar/homework/homework-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"homework-styled.js","sources":["../../../../../src/features/cue-canvas/sidebar/homework/homework-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst MenuContainer = styled(FlexView)`\n  position: absolute;\n  top: 38px;\n  left: -79px; //32px + 32 px  for icon +4 + 4 gutter + 7 padding\n  width: 248px;\n  height: 438px;\n  border-radius: 6px;\n  background: #292734;\n  box-shadow: 0px 4px 8px ${({ theme }) => theme.colors.BLACK_T_20};\n  overflow-y: auto;\n`;\nconst HWImageContainer = styled.img`\n  width: 184px;\n  height: 128px;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n`;\n\nexport { MenuContainer, HWImageContainer };\n"],"names":["MenuContainer","styled","FlexView","theme","HWImageContainer"],"mappings":";;AAIM,MAAAA,IAAgBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAQT,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA,GAG5DC,IAAmBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/cue-canvas/sidebar/homework/homework.js

@@ -0,0 +1,32 @@
+import { jsxs as k, jsx as r } from "react/jsx-runtime";
+import { memo as d, useRef as p, useCallback as c, useEffect as C } from "react";
+import w from "../../../../assets/line-icons/icons/hw.js";
+import v from "../../../ui/buttons/clickable/clickable.js";
+import b from "../../../ui/hooks/use-context-menu-click-handler.js";
+import H from "../../../ui/layout/flex-view.js";
+import { StyledWrapper as W } from "../../cue-cavas-styled.js";
+import { useCueCanvasActions as x } from "../../hooks/use-cue-canvas-actions.js";
+import M from "./homework-menu.js";
+const R = (a) => {
+  const { activeSidebar: e, setActiveSidebar: o, hwRequests: f, studentName: u } = a, { activeInstance: t } = x(), l = p(null), h = c(
+    () => o((s) => s === "homework" ? void 0 : s),
+    [o]
+  ), { menuVisible: n, onMenuClick: i } = b(
+    l,
+    void 0,
+    !0,
+    h
+  ), m = c(() => {
+    e === "tile" && (t == null || t.toggleTiles(!1)), o(e === "homework" ? void 0 : "homework"), i();
+  }, [e, t, i, o]);
+  return C(() => {
+    e === "tile" && n && i();
+  }, [e, n, i]), /* @__PURE__ */ k(H, { $position: "relative", ref: l, children: [
+    /* @__PURE__ */ r(v, { onClick: m, label: "homework help", children: /* @__PURE__ */ r(W, { $active: e === "homework", children: /* @__PURE__ */ r(w, { width: 20, height: 20, fill: e === "homework" ? "WHITE" : "BLACK" }) }) }),
+    n && /* @__PURE__ */ r(M, { onSelect: m, hwRequests: f, studentName: u })
+  ] });
+}, $ = d(R);
+export {
+  $ as default
+};
+//# sourceMappingURL=homework.js.map

package/dist/features/cue-canvas/sidebar/homework/homework.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"homework.js","sources":["../../../../../src/features/cue-canvas/sidebar/homework/homework.tsx"],"sourcesContent":["import type { IHomeWorkRequestsContainerProps } from './homework-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useRef } from 'react';\n\nimport HWIcon from '../../../../assets/line-icons/icons/hw';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../../ui/layout/flex-view';\nimport { StyledWrapper } from '../../cue-cavas-styled';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\nimport HomeWorkMenu from './homework-menu';\n\nconst HomeWorkRequestsContainer: FC<IHomeWorkRequestsContainerProps> = props => {\n  const { activeSidebar, setActiveSidebar, hwRequests, studentName } = props;\n  const { activeInstance: cueCanvas } = useCueCanvasActions();\n  const homeWorkMenuRef = useRef(null);\n\n  const handleMenuClose = useCallback(\n    () => setActiveSidebar(prev => (prev === 'homework' ? undefined : prev)),\n    [setActiveSidebar],\n  );\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    homeWorkMenuRef,\n    undefined,\n    true,\n    handleMenuClose,\n  );\n\n  const handleClick = useCallback(() => {\n    if (activeSidebar === 'tile') {\n      cueCanvas?.toggleTiles(false);\n    }\n    setActiveSidebar(activeSidebar === 'homework' ? undefined : 'homework');\n    onMenuClick();\n  }, [activeSidebar, cueCanvas, onMenuClick, setActiveSidebar]);\n\n  useEffect(() => {\n    if (activeSidebar === 'tile' && menuVisible) {\n      onMenuClick();\n    }\n  }, [activeSidebar, menuVisible, onMenuClick]);\n\n  return (\n    <FlexView $position=\"relative\" ref={homeWorkMenuRef}>\n      <Clickable onClick={handleClick} label=\"homework help\">\n        <StyledWrapper $active={activeSidebar === 'homework'}>\n          <HWIcon width={20} height={20} fill={activeSidebar === 'homework' ? 'WHITE' : 'BLACK'} />\n        </StyledWrapper>\n      </Clickable>\n      {menuVisible && (\n        <HomeWorkMenu onSelect={handleClick} hwRequests={hwRequests} studentName={studentName} />\n      )}\n    </FlexView>\n  );\n};\n\nexport default memo(HomeWorkRequestsContainer);\n"],"names":["HomeWorkRequestsContainer","props","activeSidebar","setActiveSidebar","hwRequests","studentName","cueCanvas","useCueCanvasActions","homeWorkMenuRef","useRef","handleMenuClose","useCallback","prev","menuVisible","onMenuClick","useContextMenuClickHandler","handleClick","useEffect","jsxs","FlexView","jsx","Clickable","StyledWrapper","HWIcon","HomeWorkMenu","Homework","memo"],"mappings":";;;;;;;;;AAaA,MAAMA,IAAiE,CAASC,MAAA;AAC9E,QAAM,EAAE,eAAAC,GAAe,kBAAAC,GAAkB,YAAAC,GAAY,aAAAC,MAAgBJ,GAC/D,EAAE,gBAAgBK,EAAU,IAAIC,EAAoB,GACpDC,IAAkBC,EAAO,IAAI,GAE7BC,IAAkBC;AAAA,IACtB,MAAMR,EAAiB,CAAAS,MAASA,MAAS,aAAa,SAAYA,CAAK;AAAA,IACvE,CAACT,CAAgB;AAAA,EAAA,GAEb,EAAE,aAAAU,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCP;AAAA,IACA;AAAA,IACA;AAAA,IACAE;AAAA,EAAA,GAGIM,IAAcL,EAAY,MAAM;AACpC,IAAIT,MAAkB,WACpBI,KAAA,QAAAA,EAAW,YAAY,MAERH,EAAAD,MAAkB,aAAa,SAAY,UAAU,GAC1DY;KACX,CAACZ,GAAeI,GAAWQ,GAAaX,CAAgB,CAAC;AAE5D,SAAAc,EAAU,MAAM;AACV,IAAAf,MAAkB,UAAUW,KAClBC;EAEb,GAAA,CAACZ,GAAeW,GAAaC,CAAW,CAAC,GAGzC,gBAAAI,EAAAC,GAAA,EAAS,WAAU,YAAW,KAAKX,GAClC,UAAA;AAAA,IAAC,gBAAAY,EAAAC,GAAA,EAAU,SAASL,GAAa,OAAM,iBACrC,UAAC,gBAAAI,EAAAE,GAAA,EAAc,SAASpB,MAAkB,YACxC,UAAA,gBAAAkB,EAACG,KAAO,OAAO,IAAI,QAAQ,IAAI,MAAMrB,MAAkB,aAAa,UAAU,QAAS,CAAA,EAAA,CACzF,EACF,CAAA;AAAA,IACCW,KACE,gBAAAO,EAAAI,GAAA,EAAa,UAAUR,GAAa,YAAAZ,GAAwB,aAAAC,GAA0B;AAAA,EAE3F,EAAA,CAAA;AAEJ,GAEeoB,IAAAC,EAAK1B,CAAyB;"}

package/dist/features/cue-canvas/sidebar/puzzles/api/get-puzzles.js

@@ -0,0 +1,13 @@
+import { createGetAPI as e } from "@cuemath/rest-api";
+import { BASE_URL_V3 as r, BASE_URL_V2 as c } from "../../../../../constants/api.js";
+import { stringify as o } from "../../../../../helpers/query-string.js";
+const { get: g } = e({
+  getURL: (t, i) => `${r}/curriculum/cueboard-activities/?${o(i)}`
+}), { useGet: _ } = e({
+  getURL: (t) => `${c}/curriculum/wb-activities/${t}`
+});
+export {
+  g as getPuzzles,
+  _ as useGetActivity
+};
+//# sourceMappingURL=get-puzzles.js.map

package/dist/features/cue-canvas/sidebar/puzzles/api/get-puzzles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-puzzles.js","sources":["../../../../../../src/features/cue-canvas/sidebar/puzzles/api/get-puzzles.ts"],"sourcesContent":["import { createGetAPI } from '@cuemath/rest-api';\n\nimport { BASE_URL_V2, BASE_URL_V3 } from '../../../../../constants/api';\nimport { stringify } from '../../../../../helpers/query-string';\n\nexport interface IFilterOption {\n  applied: boolean;\n  code: string;\n  name: string;\n}\n\nexport interface IFilterData {\n  activity_tiles: IFilterOption[];\n  activity_topics: IFilterOption[];\n  activity_types: IFilterOption[];\n  grades: IFilterOption[];\n  search: string;\n}\n\nexport interface IPuzzlesResultData {\n  activity_tiles: string[];\n  activity_topics: string[];\n  activity_types: string[];\n  activity_url: string;\n  created_on: string;\n  created_on_ts: number;\n  grades: string[];\n  id: string;\n  is_live: boolean;\n  name: string;\n  node_id: string;\n  updated_on: string;\n  updated_on_ts: number;\n}\nexport interface IPuzzlesResponses {\n  filters: IFilterData;\n  results: IPuzzlesResultData[];\n}\nexport interface IGetPuzzles {\n  activity_tiles?: string[];\n  activity_topics?: string[];\n  activity_types?: string[];\n  grades?: string[];\n  search?: string;\n}\n\nexport interface ActivityMetadata {\n  code: string;\n  description: string | null;\n  id: string;\n  is_live: boolean;\n  name: string;\n  priority: number | null;\n  type: 'ACTIVITY_TILE' | 'ACTIVITY_TOPIC' | 'ACTIVITY_TYPE' | string;\n}\n\nexport interface IActivityGrade {\n  code: string;\n  description: string;\n  id: string;\n  is_live: boolean;\n  name: string;\n  priority: number;\n  type: 'GRADE';\n}\n\nexport interface ActivityData {\n  activity_tiles: ActivityMetadata[];\n  activity_topics: ActivityMetadata[];\n  activity_types: ActivityMetadata[];\n  grades: IActivityGrade[];\n  worksheet: Worksheet;\n}\n\ninterface Worksheet {\n  code: string;\n  complete_in: number | null;\n  course_type: string;\n  description: string | null;\n  desmos_calculator_enabled: boolean;\n  id: string;\n  instructions_ref: string | null;\n  is_lesson_v3_enabled: boolean;\n  is_live: boolean;\n  is_subjective: boolean;\n  is_turing: boolean;\n  learnosity_activity_ref: string | null;\n  name: string;\n  points_available: number;\n  project_name: string;\n  sheet_time: number | null;\n  student_instructions_ref: string | null;\n  target_accuracy: number;\n  thumbnail_url: string | null;\n  total_questions: number | null;\n  visible_in_mpr: boolean;\n  worksheet_type: string;\n}\n\nconst { get: getPuzzles } = createGetAPI<IPuzzlesResponses, IGetPuzzles>({\n  getURL: (_, query) => `${BASE_URL_V3}/curriculum/cueboard-activities/?${stringify(query)}`,\n});\n\nconst { useGet: useGetActivity } = createGetAPI<ActivityData>({\n  getURL: nodeId => `${BASE_URL_V2}/curriculum/wb-activities/${nodeId}`,\n});\n\nexport { getPuzzles, useGetActivity };\n"],"names":["getPuzzles","createGetAPI","_","query","BASE_URL_V3","stringify","useGetActivity","nodeId","BASE_URL_V2"],"mappings":";;;AAmGA,MAAM,EAAE,KAAKA,EAAW,IAAIC,EAA6C;AAAA,EACvE,QAAQ,CAACC,GAAGC,MAAU,GAAGC,CAAW,oCAAoCC,EAAUF,CAAK,CAAC;AAC1F,CAAC,GAEK,EAAE,QAAQG,EAAe,IAAIL,EAA2B;AAAA,EAC5D,QAAQ,CAAAM,MAAU,GAAGC,CAAW,6BAA6BD,CAAM;AACrE,CAAC;"}

package/dist/features/cue-canvas/sidebar/puzzles/filter-selection-menu.js

@@ -0,0 +1,60 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { memo as h, useState as u, useCallback as m } from "react";
+import b from "../../../../assets/line-icons/icons/back.js";
+import C from "../../../../assets/line-icons/icons/cross.js";
+import s from "../../../ui/buttons/clickable/clickable.js";
+import x from "../../../ui/buttons/text-button/text-button.js";
+import k from "../../../ui/inputs/checkbox-input-list/checkbox-input-list.js";
+import i from "../../../ui/layout/flex-view.js";
+import d from "../../../ui/text/text.js";
+import { MenuContainer as g, CheckboxWrapper as I } from "./puzzles-styled.js";
+const T = ({
+  closeAllPopups: t,
+  menuItems: c,
+  onFiltersChange: a,
+  type: n
+}) => {
+  const [o, p] = u(
+    c.filter((r) => r.applied).map((r) => r.name)
+  ), f = m((r) => {
+    p(r);
+  }, []), $ = m(() => {
+    a({
+      [n]: o
+    }), t();
+  }, [a, t, o, n]);
+  return /* @__PURE__ */ l(g, { children: [
+    /* @__PURE__ */ l(i, { $justifyContent: "space-between", $flexDirection: "row", $gutterX: 1, $gapX: 0.5, children: [
+      /* @__PURE__ */ l(i, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 1, children: [
+        /* @__PURE__ */ e(s, { onClick: t, label: "back", children: /* @__PURE__ */ e(b, { color: "WHITE" }) }),
+        /* @__PURE__ */ l(d, { $color: "WHITE", $renderAs: "eyebrow2", children: [
+          "Select ",
+          n === "grades" ? n : n.split("_")[1],
+          o.length > 0 && /* @__PURE__ */ e("span", { children: ` (${o.length})` })
+        ] })
+      ] }),
+      /* @__PURE__ */ l(i, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 1, children: [
+        /* @__PURE__ */ e(x, { color: "WHITE", label: "Apply", onClick: $ }),
+        /* @__PURE__ */ e(s, { onClick: t, label: "close filter menu", children: /* @__PURE__ */ e(C, { color: "WHITE" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(I, { $gutterX: 1, $gapX: 1, children: /* @__PURE__ */ e(
+      k,
+      {
+        size: "medium",
+        renderAs: "black-dark",
+        numColumns: 3,
+        options: c.map((r) => ({
+          id: r.name,
+          label: /* @__PURE__ */ e(d, { $renderAs: "ub3-bold", $color: "WHITE", $inline: !0, children: r.name })
+        })),
+        value: o,
+        onChange: f
+      }
+    ) })
+  ] });
+}, A = h(T);
+export {
+  A as default
+};
+//# sourceMappingURL=filter-selection-menu.js.map