@cuemath/leap 2.8.49 → 2.8.50-as2

package/dist/features/cue-canvas/cue-canvas-helpers.js

@@ -1,17 +1,36 @@
-const c = (e) => {
-  var t;
-  const n = (t = e.current) == null ? void 0 : t.shadowRoot;
-  if (n) {
-    const s = n.querySelectorAll("x-polypad");
-    if (s[0]) {
-      const a = s[0].querySelector("svg.canvas"), r = a == null ? void 0 : a.querySelector("path.mask");
-      r == null || r.setAttribute("stroke", "transparent"), r == null || r.setAttribute("fill", "transparent"), r == null || r.removeAttribute("style");
+const d = [
+  "none",
+  "square2-grid",
+  "square-checked",
+  "square-dots",
+  "tri-dots",
+  "tri2-dots",
+  "square-grid",
+  "tri-grid",
+  "tri2-grid"
+], g = /* @__PURE__ */ new Set([
+  "undo",
+  "redo",
+  "clearAll",
+  "home",
+  "zoomIn",
+  "zoomOut",
+  "upload",
+  "download"
+]), A = (e) => {
+  var o;
+  const r = (o = e.current) == null ? void 0 : o.shadowRoot;
+  if (r) {
+    const t = r.querySelectorAll("x-polypad");
+    if (t[0]) {
+      const s = t[0].querySelector("svg.canvas"), n = s == null ? void 0 : s.querySelector("path.mask");
+      n == null || n.setAttribute("stroke", "transparent"), n == null || n.setAttribute("fill", "transparent"), n == null || n.removeAttribute("style");
     }
   }
-}, i = (e, n, t) => t === "canvas" ? {
+}, E = (e, r, o, t) => o === "canvas" ? {
   canvas: "notebook",
   canvasX: e,
-  canvasY: n,
+  canvasY: r,
   noPinchPan: !0,
   grid: "none",
   background: "transparent",
@@ -19,9 +38,14 @@ const c = (e) => {
 } : {
   canvas: "infinite",
   canvasX: e,
-  canvasY: n,
-  grid: "none"
-}, l = (e) => e === "canvas" ? {
+  canvasY: r,
+  grid: "none",
+  noPinchPan: t === "STUDENT",
+  noDeleting: t === "STUDENT",
+  noCopyPaste: t === "STUDENT",
+  noMusic: !0,
+  noAudio: !0
+}, T = (e) => e === "canvas" ? {
   sidebarTiles: !1,
   sidebarSettings: !1,
   settings: !1,
@@ -33,12 +57,12 @@ const c = (e) => {
   sidebarSettings: !1,
   settings: !1,
   toolbar: !1
-}, o = (e) => [e[1], e[0]], u = (e) => {
-  const n = /* @__PURE__ */ new Map();
-  return e.forEach((t, s) => {
-    n.set(s, o(t));
-  }), n;
-}, g = (e) => {
+}, a = (e) => [e[1], e[0]], S = (e) => {
+  const r = /* @__PURE__ */ new Map();
+  return e.forEach((o, t) => {
+    r.set(t, a(o));
+  }), r;
+}, p = (e) => {
   switch (e) {
     case "pen":
       return ["pen", "pen"];
@@ -48,10 +72,41 @@ const c = (e) => {
       return ["pen", "highlighter"];
     case "ruler":
       return ["pen", "ruler"];
+    case "equation":
+      return ["text", "equation"];
     default:
       return [e, void 0];
   }
-}, p = (e) => e === "TEACHER" ? [
+}, i = [
+  "pen",
+  "ruler",
+  "marker",
+  "highlighter",
+  "eraser",
+  "move",
+  "pan",
+  "clearAll",
+  "text",
+  "equation",
+  "grid",
+  "home",
+  "undo",
+  "redo",
+  "zoomIn",
+  "zoomOut",
+  "upload",
+  "download"
+], c = [
+  "pen",
+  "ruler",
+  "marker",
+  "highlighter",
+  "move",
+  "text",
+  "undo",
+  "redo",
+  "download"
+], u = [
   "pen",
   "ruler",
   "marker",
@@ -60,15 +115,19 @@ const c = (e) => {
   "move",
   "undo",
   "redo"
-] : ["pen", "ruler", "eraser", "move", "undo", "redo"], A = (e) => e === "TEACHER" ? ["CANVAS_RED", "CANVAS_YELLOW", "CANVAS_GREEN"] : ["CANVAS_BLUE", "CANVAS_PURPLE", "CANVAS_PINK"];
+], l = ["pen", "ruler", "eraser", "move", "undo", "redo"], h = (e, r) => r === "whiteboard" ? e === "TEACHER" ? i : c : e === "TEACHER" ? u : l, f = (e) => e === "TEACHER" ? ["CANVAS_RED", "CANVAS_YELLOW", "CANVAS_GREEN"] : ["CANVAS_BLUE", "CANVAS_PURPLE", "CANVAS_PINK"], m = (e) => ["pen", "ruler", "marker", "highlighter"].includes(e), v = (e) => Object.values(e).some((r) => !!(!r[0] && r[1] && "name" in r[1] && (r[1].name === "text" || r[1].name === "equation")));
 export {
-  i as getCanvasConfig,
-  l as getCanvasSettings,
-  A as getColorsForUser,
-  o as getReverseAction,
-  u as getReverseMap,
-  g as getToolAndSubtool,
-  p as getUserTools,
-  c as removeMask
+  d as GRID_NAMES,
+  g as STATELESS_TOOLS,
+  v as checkTextOrEquationTool,
+  E as getCanvasConfig,
+  T as getCanvasSettings,
+  f as getColorsForUser,
+  m as getIsWritingTool,
+  a as getReverseAction,
+  S as getReverseMap,
+  p as getToolAndSubtool,
+  h as getUserTools,
+  A as removeMask
 };
 //# sourceMappingURL=cue-canvas-helpers.js.map

package/dist/features/cue-canvas/cue-canvas-helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"cue-canvas-helpers.js","sources":["../../../src/features/cue-canvas/cue-canvas-helpers.ts"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type {\n  TCueCanvasColors,\n  TCueCanvasChangeData,\n  TCueCanvasTool,\n  TCueCanvasToolOption,\n  TDrawingData,\n  TRenderAs,\n} from './types/cue-canvas';\nimport type { IPolypadCreateOptions, IPolypadOptions } from './types/polypad';\n\nexport const removeMask = (canvasElementRef: React.RefObject<HTMLDivElement>) => {\n  const shadowRoot = canvasElementRef.current?.shadowRoot;\n\n  if (shadowRoot) {\n    const xPolypad = shadowRoot.querySelectorAll('x-polypad');\n\n    if (xPolypad[0]) {\n      const svgCanvas = xPolypad[0].querySelector('svg.canvas');\n      const maskPath = svgCanvas?.querySelector('path.mask');\n\n      maskPath?.setAttribute('stroke', 'transparent');\n      maskPath?.setAttribute('fill', 'transparent');\n      maskPath?.removeAttribute('style');\n    }\n  }\n\n  return undefined;\n};\n\nexport const getCanvasConfig = (\n  width: number,\n  height: number,\n  renderAs: TRenderAs,\n): IPolypadOptions => {\n  return renderAs === 'canvas'\n    ? {\n        canvas: 'notebook',\n        canvasX: width,\n        canvasY: height,\n        noPinchPan: true,\n        grid: 'none',\n        background: 'transparent',\n        noSnapping: true,\n      }\n    : ({\n        canvas: 'infinite',\n        canvasX: width,\n        canvasY: height,\n        grid: 'none',\n      } as IPolypadOptions);\n};\n\nexport const getCanvasSettings = (renderAs: TRenderAs): IPolypadCreateOptions => {\n  return renderAs === 'canvas'\n    ? {\n        sidebarTiles: false,\n        sidebarSettings: false,\n        settings: false,\n        toolbar: false,\n        canvasMargin: 0,\n      }\n    : {\n        sidebarTiles: false, //userType === 'TEACHER'\n        sidebarSettings: false,\n        settings: false,\n        toolbar: false,\n      };\n};\n\nexport const getReverseAction = (action: TDrawingData[]) => [action[1], action[0]];\n\nexport const getReverseMap = (data: TCueCanvasChangeData) => {\n  const newData = new Map<string, TDrawingData[]>();\n\n  data.forEach((value, key) => {\n    newData.set(key, getReverseAction(value));\n  });\n\n  return newData;\n};\n\nexport const getToolAndSubtool = (\n  tool: TCueCanvasTool,\n): [\n  Exclude<TCueCanvasTool, 'marker' | 'highlighter' | 'ruler'>,\n  TCueCanvasToolOption | undefined,\n] => {\n  switch (tool) {\n    case 'pen':\n      return ['pen', 'pen'];\n    case 'marker':\n      return ['pen', 'marker'];\n    case 'highlighter':\n      return ['pen', 'highlighter'];\n    case 'ruler':\n      return ['pen', 'ruler'];\n    default:\n      return [tool, undefined];\n  }\n};\n\nexport const getUserTools = (userType: TUserTypes) => {\n  return userType === 'TEACHER'\n    ? ([\n        'pen',\n        'ruler',\n        'marker',\n        'highlighter',\n        'eraser',\n        'move',\n        'undo',\n        'redo',\n      ] as TCueCanvasTool[])\n    : (['pen', 'ruler', 'eraser', 'move', 'undo', 'redo'] as TCueCanvasTool[]);\n};\n\nexport const getColorsForUser = (userType: TUserTypes) => {\n  return userType === 'TEACHER'\n    ? (['CANVAS_RED', 'CANVAS_YELLOW', 'CANVAS_GREEN'] as TCueCanvasColors[])\n    : (['CANVAS_BLUE', 'CANVAS_PURPLE', 'CANVAS_PINK'] as TCueCanvasColors[]);\n};\n"],"names":["removeMask","canvasElementRef","_a","shadowRoot","xPolypad","svgCanvas","maskPath","getCanvasConfig","width","height","renderAs","getCanvasSettings","getReverseAction","action","getReverseMap","data","newData","value","key","getToolAndSubtool","tool","getUserTools","userType","getColorsForUser"],"mappings":"AAWa,MAAAA,IAAa,CAACC,MAAsD;AAApE,MAAAC;AACL,QAAAC,KAAaD,IAAAD,EAAiB,YAAjB,gBAAAC,EAA0B;AAE7C,MAAIC,GAAY;AACR,UAAAC,IAAWD,EAAW,iBAAiB,WAAW;AAEpD,QAAAC,EAAS,CAAC,GAAG;AACf,YAAMC,IAAYD,EAAS,CAAC,EAAE,cAAc,YAAY,GAClDE,IAAWD,KAAA,gBAAAA,EAAW,cAAc;AAEhC,MAAAC,KAAA,QAAAA,EAAA,aAAa,UAAU,gBACvBA,KAAA,QAAAA,EAAA,aAAa,QAAQ,gBAC/BA,KAAA,QAAAA,EAAU,gBAAgB;AAAA,IAC5B;AAAA,EACF;AAGF,GAEaC,IAAkB,CAC7BC,GACAC,GACAC,MAEOA,MAAa,WAChB;AAAA,EACE,QAAQ;AAAA,EACR,SAASF;AAAA,EACT,SAASC;AAAA,EACT,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,YAAY;AAAA,IAEb;AAAA,EACC,QAAQ;AAAA,EACR,SAASD;AAAA,EACT,SAASC;AAAA,EACT,MAAM;AAAA,GAIDE,IAAoB,CAACD,MACzBA,MAAa,WAChB;AAAA,EACE,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,cAAc;AAAA,IAEhB;AAAA,EACE,cAAc;AAAA;AAAA,EACd,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,SAAS;AAAA,GAIJE,IAAmB,CAACC,MAA2B,CAACA,EAAO,CAAC,GAAGA,EAAO,CAAC,CAAC,GAEpEC,IAAgB,CAACC,MAA+B;AACrD,QAAAC,wBAAc;AAEf,SAAAD,EAAA,QAAQ,CAACE,GAAOC,MAAQ;AAC3B,IAAAF,EAAQ,IAAIE,GAAKN,EAAiBK,CAAK,CAAC;AAAA,EAAA,CACzC,GAEMD;AACT,GAEaG,IAAoB,CAC/BC,MAIG;AACH,UAAQA,GAAM;AAAA,IACZ,KAAK;AACI,aAAA,CAAC,OAAO,KAAK;AAAA,IACtB,KAAK;AACI,aAAA,CAAC,OAAO,QAAQ;AAAA,IACzB,KAAK;AACI,aAAA,CAAC,OAAO,aAAa;AAAA,IAC9B,KAAK;AACI,aAAA,CAAC,OAAO,OAAO;AAAA,IACxB;AACS,aAAA,CAACA,GAAM,MAAS;AAAA,EAC3B;AACF,GAEaC,IAAe,CAACC,MACpBA,MAAa,YACf;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,IAED,CAAC,OAAO,SAAS,UAAU,QAAQ,QAAQ,MAAM,GAG3CC,IAAmB,CAACD,MACxBA,MAAa,YACf,CAAC,cAAc,iBAAiB,cAAc,IAC9C,CAAC,eAAe,iBAAiB,aAAa;"}
+{"version":3,"file":"cue-canvas-helpers.js","sources":["../../../src/features/cue-canvas/cue-canvas-helpers.ts"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type {\n  TCueCanvasColors,\n  TCueCanvasChangeData,\n  TCueCanvasTool,\n  TCueCanvasToolOption,\n  TDrawingData,\n  TRenderAs,\n  TCueCanvasGridName,\n  TCueCanvasChangeDataObject,\n} from './types/cue-canvas';\nimport type { IPolypadCreateOptions, IPolypadOptions } from './types/polypad';\n\nexport const GRID_NAMES: TCueCanvasGridName[] = [\n  'none',\n  'square2-grid',\n  'square-checked',\n  'square-dots',\n  'tri-dots',\n  'tri2-dots',\n  'square-grid',\n  'tri-grid',\n  'tri2-grid',\n];\n\nexport const STATELESS_TOOLS = new Set<TCueCanvasTool>([\n  'undo',\n  'redo',\n  'clearAll',\n  'home',\n  'zoomIn',\n  'zoomOut',\n  'upload',\n  'download',\n]);\n\nexport const removeMask = (canvasElementRef: React.RefObject<HTMLDivElement>) => {\n  const shadowRoot = canvasElementRef.current?.shadowRoot;\n\n  if (shadowRoot) {\n    const xPolypad = shadowRoot.querySelectorAll('x-polypad');\n\n    if (xPolypad[0]) {\n      const svgCanvas = xPolypad[0].querySelector('svg.canvas');\n      const maskPath = svgCanvas?.querySelector('path.mask');\n\n      maskPath?.setAttribute('stroke', 'transparent');\n      maskPath?.setAttribute('fill', 'transparent');\n      maskPath?.removeAttribute('style');\n    }\n  }\n\n  return undefined;\n};\n\nexport const getCanvasConfig = (\n  width: number,\n  height: number,\n  renderAs: TRenderAs,\n  userType: TUserTypes,\n): IPolypadOptions => {\n  return renderAs === 'canvas'\n    ? {\n        canvas: 'notebook',\n        canvasX: width,\n        canvasY: height,\n        noPinchPan: true,\n        grid: 'none',\n        background: 'transparent',\n        noSnapping: true,\n      }\n    : {\n        canvas: 'infinite',\n        canvasX: width,\n        canvasY: height,\n        grid: 'none',\n        noPinchPan: userType === 'STUDENT',\n        noDeleting: userType === 'STUDENT',\n        noCopyPaste: userType === 'STUDENT',\n        noMusic: true,\n        noAudio: true,\n      };\n};\n\nexport const getCanvasSettings = (renderAs: TRenderAs): IPolypadCreateOptions => {\n  return renderAs === 'canvas'\n    ? {\n        sidebarTiles: false,\n        sidebarSettings: false,\n        settings: false,\n        toolbar: false,\n        canvasMargin: 0,\n      }\n    : {\n        sidebarTiles: false, //userType === 'TEACHER'\n        sidebarSettings: false,\n        settings: false,\n        toolbar: false,\n      };\n};\n\nexport const getReverseAction = (action: TDrawingData[]) => [action[1], action[0]];\n\nexport const getReverseMap = (data: TCueCanvasChangeData) => {\n  const newData = new Map<string, TDrawingData[]>();\n\n  data.forEach((value, key) => {\n    newData.set(key, getReverseAction(value));\n  });\n\n  return newData;\n};\n\nexport const getToolAndSubtool = (\n  tool: TCueCanvasTool,\n): [\n  Exclude<TCueCanvasTool, 'marker' | 'highlighter' | 'ruler' | 'equation'>,\n  TCueCanvasToolOption | undefined,\n] => {\n  switch (tool) {\n    case 'pen':\n      return ['pen', 'pen'];\n    case 'marker':\n      return ['pen', 'marker'];\n    case 'highlighter':\n      return ['pen', 'highlighter'];\n    case 'ruler':\n      return ['pen', 'ruler'];\n    case 'equation':\n      return ['text', 'equation'];\n    default:\n      return [tool, undefined];\n  }\n};\n\nconst TEACHER_WHITEBOARD_TOOLS: TCueCanvasTool[] = [\n  'pen',\n  'ruler',\n  'marker',\n  'highlighter',\n  'eraser',\n  'move',\n  'pan',\n  'clearAll',\n  'text',\n  'equation',\n  'grid',\n  'home',\n  'undo',\n  'redo',\n  'zoomIn',\n  'zoomOut',\n  'upload',\n  'download',\n];\n\nconst STUDENT_WHITEBOARD_TOOLS: TCueCanvasTool[] = [\n  'pen',\n  'ruler',\n  'marker',\n  'highlighter',\n  'move',\n  'text',\n  'undo',\n  'redo',\n  'download',\n];\n\nconst TEACHER_DEFAULT_TOOLS: TCueCanvasTool[] = [\n  'pen',\n  'ruler',\n  'marker',\n  'highlighter',\n  'eraser',\n  'move',\n  'undo',\n  'redo',\n];\n\nconst STUDENT_DEFAULT_TOOLS: TCueCanvasTool[] = ['pen', 'ruler', 'eraser', 'move', 'undo', 'redo'];\n\nexport const getUserTools = (userType: TUserTypes, renderAs: TRenderAs): TCueCanvasTool[] => {\n  if (renderAs === 'whiteboard') {\n    return userType === 'TEACHER' ? TEACHER_WHITEBOARD_TOOLS : STUDENT_WHITEBOARD_TOOLS;\n  }\n\n  return userType === 'TEACHER' ? TEACHER_DEFAULT_TOOLS : STUDENT_DEFAULT_TOOLS;\n};\n\nexport const getColorsForUser = (userType: TUserTypes) => {\n  return userType === 'TEACHER'\n    ? (['CANVAS_RED', 'CANVAS_YELLOW', 'CANVAS_GREEN'] as TCueCanvasColors[])\n    : (['CANVAS_BLUE', 'CANVAS_PURPLE', 'CANVAS_PINK'] as TCueCanvasColors[]);\n};\n\nexport const getIsWritingTool = (penTool: string) => {\n  return ['pen', 'ruler', 'marker', 'highlighter'].includes(penTool);\n};\n\nexport const checkTextOrEquationTool = (payload: TCueCanvasChangeDataObject) => {\n  return Object.values(payload).some(value => {\n    if (\n      !value[0] &&\n      value[1] &&\n      'name' in value[1] &&\n      (value[1].name === 'text' || value[1].name === 'equation')\n    ) {\n      return true;\n    }\n\n    return false;\n  });\n};\n"],"names":["GRID_NAMES","STATELESS_TOOLS","removeMask","canvasElementRef","_a","shadowRoot","xPolypad","svgCanvas","maskPath","getCanvasConfig","width","height","renderAs","userType","getCanvasSettings","getReverseAction","action","getReverseMap","data","newData","value","key","getToolAndSubtool","tool","TEACHER_WHITEBOARD_TOOLS","STUDENT_WHITEBOARD_TOOLS","TEACHER_DEFAULT_TOOLS","STUDENT_DEFAULT_TOOLS","getUserTools","getColorsForUser","getIsWritingTool","penTool","checkTextOrEquationTool","payload"],"mappings":"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"}

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

@@ -1,73 +1,81 @@
-import { jsx as A } from "react/jsx-runtime";
-import { memo as R, useRef as i, useEffect as n } from "react";
+import { jsx as R } from "react/jsx-runtime";
+import { memo as T, useRef as g, useCallback as $, useEffect as o } from "react";
 import { CueCanvasCore as V } from "./cue-canvas-core.js";
-import { getCanvasConfig as j, getCanvasSettings as l } from "./cue-canvas-helpers.js";
-import { CueCanvasWrapper as H } from "./cue-cavas-styled.js";
-import { useCueCanvasActions as I } from "./hooks/use-cue-canvas-actions.js";
-import P from "./hooks/use-height-extender.js";
-const W = R(
+import { getCanvasConfig as j, getCanvasSettings as k } from "./cue-canvas-helpers.js";
+import { CueCanvasWrapper as y } from "./cue-cavas-styled.js";
+import { useCueCanvasActions as z } from "./hooks/use-cue-canvas-actions.js";
+import H from "./hooks/use-height-extender.js";
+const M = T(
   ({
-    responseId: $,
+    responseId: w,
     width: u,
-    height: r,
-    canRender: a,
-    onUpdateHeight: g,
-    initialData: s,
+    height: t,
+    canRender: f,
+    onUpdateHeight: x,
+    initialData: a,
     onPublish: v,
-    onSubscribe: m,
-    userId: w,
-    appended: p,
-    canScribble: t,
-    userType: x,
-    renderAs: c = "canvas"
+    onSubscribe: p,
+    userId: A,
+    appended: i,
+    canScribble: r,
+    userType: l,
+    renderAs: s = "canvas"
   }) => {
-    const C = i(null), { setActiveInstance: o } = I(), e = i(null);
-    return P({
+    const C = g(null), { setActiveInstance: c, setActiveTool: d } = z(), e = g(null), E = $(
+      (n) => {
+        d(n);
+      },
+      [d]
+    ), I = $((n) => (console.log(n, "file to upload"), "https://cuemath-intel.s3.amazonaws.com/media/cuemath-whiteboard/2b0b9468-d6d4-11e8-9bfb-02420a000032:practice/Screenshot 2025-04-16 at 3.18.32 PM.png_b9079e2f-4ae6-439c-8edd-104dbfdc6100"), []);
+    return H({
       canvasElementRef: C,
       cueCanvasRef: e,
-      canScribble: t
-    }), n(() => {
-      t && e.current && (e.current.resetViewPort(), o(e.current));
-    }, [t, o]), n(() => {
-      s && e.current && e.current.update(s);
-    }, [s]), n(() => {
-      r && e.current && e.current.resetViewPort();
-    }, [r, u]), n(() => {
-      if (a && p && !e.current) {
-        const E = j(u, r, c), y = l(c), f = new V(
+      canScribble: r
+    }), o(() => {
+      r && e.current && (e.current.resetViewPort(), c(e.current));
+    }, [r, c]), o(() => {
+      a && e.current && e.current.update(a);
+    }, [a]), o(() => {
+      t && e.current && e.current.resetViewPort();
+    }, [t, u]), o(() => {
+      if (f && i && !e.current) {
+        const n = j(u, t, s, l), P = k(s), m = new V(
           v,
-          m,
-          g,
-          r,
+          p,
+          E,
+          x,
+          I,
+          t,
+          A,
           w,
-          $,
-          x
+          l,
+          s
         );
         (async () => {
-          await f.create({
+          await m.create({
             canvasElementRef: C,
-            canvasConfig: E,
-            canvasSetting: y,
-            initialData: s
-          }), e.current = f, t && o(f);
+            canvasConfig: n,
+            canvasSetting: P,
+            initialData: a
+          }), e.current = m, r && c(m);
         })();
       }
-    }, [v, m, o, a, p]), n(() => () => {
+    }, [v, p, c, f, i]), o(() => () => {
       e.current && (e.current.destroy(), e.current = null);
-    }, []), /* @__PURE__ */ A(
-      H,
+    }, []), /* @__PURE__ */ R(
+      y,
       {
         ref: C,
         $width: u,
-        $height: r,
-        $canScribble: t,
-        $canRender: a,
-        $renderAs: c
+        $height: t,
+        $canScribble: r,
+        $canRender: f,
+        $renderAs: s
       }
     );
   }
-), L = W;
+), K = M;
 export {
-  L as default
+  K as default
 };
 //# sourceMappingURL=cue-canvas.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cue-canvas.js","sources":["../../../src/features/cue-canvas/cue-canvas.tsx"],"sourcesContent":["import type { ICueCanvas } from './types/cue-canvas';\n\nimport { memo, useEffect, useRef } from 'react';\n\nimport { CueCanvasCore } from './cue-canvas-core';\nimport { getCanvasConfig, getCanvasSettings } from './cue-canvas-helpers';\nimport { CueCanvasWrapper } from './cue-cavas-styled';\nimport { useCueCanvasActions } from './hooks/use-cue-canvas-actions';\nimport useHeightExtender from './hooks/use-height-extender';\n\nconst CueCanvas: React.FC<ICueCanvas> = memo(\n  ({\n    responseId,\n    width,\n    height,\n    canRender,\n    onUpdateHeight,\n    initialData,\n    onPublish,\n    onSubscribe,\n    userId,\n    appended,\n    canScribble,\n    userType,\n    renderAs = 'canvas',\n  }) => {\n    const canvasElementRef = useRef<HTMLDivElement>(null);\n    const { setActiveInstance: setActiveCueCanvas } = useCueCanvasActions();\n\n    const cueCanvasRef = useRef<CueCanvasCore | null>(null);\n\n    useHeightExtender({\n      canvasElementRef,\n      cueCanvasRef,\n      canScribble,\n    });\n\n    useEffect(() => {\n      if (canScribble && cueCanvasRef.current) {\n        cueCanvasRef.current.resetViewPort();\n\n        setActiveCueCanvas(cueCanvasRef.current);\n      }\n    }, [canScribble, setActiveCueCanvas]);\n\n    useEffect(() => {\n      if (initialData && cueCanvasRef.current) {\n        cueCanvasRef.current.update(initialData);\n      }\n    }, [initialData]);\n\n    useEffect(() => {\n      if (height && cueCanvasRef.current) {\n        cueCanvasRef.current.resetViewPort();\n      }\n    }, [height, width]);\n\n    useEffect(() => {\n      if (canRender && appended && !cueCanvasRef.current) {\n        const canvasConfig = getCanvasConfig(width, height, renderAs);\n        const canvasSetting = getCanvasSettings(renderAs);\n        const cueCanvasCore = new CueCanvasCore(\n          onPublish,\n          onSubscribe,\n          onUpdateHeight,\n          height,\n          userId,\n          responseId,\n          userType,\n        );\n        const createCueCanvas = async () => {\n          await cueCanvasCore.create({\n            canvasElementRef,\n            canvasConfig,\n            canvasSetting,\n            initialData,\n          });\n          cueCanvasRef.current = cueCanvasCore;\n\n          if (canScribble) {\n            setActiveCueCanvas(cueCanvasCore);\n          }\n        };\n\n        createCueCanvas();\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [onPublish, onSubscribe, setActiveCueCanvas, canRender, appended]);\n\n    useEffect(() => {\n      return () => {\n        if (cueCanvasRef.current) {\n          cueCanvasRef.current.destroy();\n          cueCanvasRef.current = null;\n        }\n      };\n    }, []);\n\n    return (\n      <CueCanvasWrapper\n        ref={canvasElementRef}\n        $width={width}\n        $height={height}\n        $canScribble={canScribble}\n        $canRender={canRender}\n        $renderAs={renderAs}\n      />\n    );\n  },\n);\n\nexport default CueCanvas;\n"],"names":["CueCanvas","memo","responseId","width","height","canRender","onUpdateHeight","initialData","onPublish","onSubscribe","userId","appended","canScribble","userType","renderAs","canvasElementRef","useRef","setActiveCueCanvas","useCueCanvasActions","cueCanvasRef","useHeightExtender","useEffect","canvasConfig","getCanvasConfig","canvasSetting","getCanvasSettings","cueCanvasCore","CueCanvasCore","jsx","CueCanvasWrapper","CueCanvas$1"],"mappings":";;;;;;;AAUA,MAAMA,IAAkCC;AAAA,EACtC,CAAC;AAAA,IACC,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,EAAA,MACP;AACE,UAAAC,IAAmBC,EAAuB,IAAI,GAC9C,EAAE,mBAAmBC,EAAmB,IAAIC,EAAoB,GAEhEC,IAAeH,EAA6B,IAAI;AAEpC,WAAAI,EAAA;AAAA,MAChB,kBAAAL;AAAA,MACA,cAAAI;AAAA,MACA,aAAAP;AAAA,IAAA,CACD,GAEDS,EAAU,MAAM;AACV,MAAAT,KAAeO,EAAa,YAC9BA,EAAa,QAAQ,iBAErBF,EAAmBE,EAAa,OAAO;AAAA,IACzC,GACC,CAACP,GAAaK,CAAkB,CAAC,GAEpCI,EAAU,MAAM;AACV,MAAAd,KAAeY,EAAa,WACjBA,EAAA,QAAQ,OAAOZ,CAAW;AAAA,IACzC,GACC,CAACA,CAAW,CAAC,GAEhBc,EAAU,MAAM;AACV,MAAAjB,KAAUe,EAAa,WACzBA,EAAa,QAAQ;IACvB,GACC,CAACf,GAAQD,CAAK,CAAC,GAElBkB,EAAU,MAAM;AACd,UAAIhB,KAAaM,KAAY,CAACQ,EAAa,SAAS;AAClD,cAAMG,IAAeC,EAAgBpB,GAAOC,GAAQU,CAAQ,GACtDU,IAAgBC,EAAkBX,CAAQ,GAC1CY,IAAgB,IAAIC;AAAA,UACxBnB;AAAA,UACAC;AAAA,UACAH;AAAA,UACAF;AAAA,UACAM;AAAA,UACAR;AAAA,UACAW;AAAA,QAAA;AAgBc,SAdQ,YAAY;AAClC,gBAAMa,EAAc,OAAO;AAAA,YACzB,kBAAAX;AAAA,YACA,cAAAO;AAAA,YACA,eAAAE;AAAA,YACA,aAAAjB;AAAA,UAAA,CACD,GACDY,EAAa,UAAUO,GAEnBd,KACFK,EAAmBS,CAAa;AAAA,QAClC;MAIJ;AAAA,IAAA,GAEC,CAAClB,GAAWC,GAAaQ,GAAoBZ,GAAWM,CAAQ,CAAC,GAEpEU,EAAU,MACD,MAAM;AACX,MAAIF,EAAa,YACfA,EAAa,QAAQ,WACrBA,EAAa,UAAU;AAAA,IACzB,GAED,CAAE,CAAA,GAGH,gBAAAS;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKd;AAAA,QACL,QAAQZ;AAAA,QACR,SAASC;AAAA,QACT,cAAcQ;AAAA,QACd,YAAYP;AAAA,QACZ,WAAWS;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjB;AACF,GAEAgB,IAAe9B;"}
+{"version":3,"file":"cue-canvas.js","sources":["../../../src/features/cue-canvas/cue-canvas.tsx"],"sourcesContent":["import type { ICueCanvas, TCueCanvasTool } from './types/cue-canvas';\n\nimport { memo, useCallback, useEffect, useRef } from 'react';\n\nimport { CueCanvasCore } from './cue-canvas-core';\nimport { getCanvasConfig, getCanvasSettings } from './cue-canvas-helpers';\nimport { CueCanvasWrapper } from './cue-cavas-styled';\nimport { useCueCanvasActions } from './hooks/use-cue-canvas-actions';\nimport useHeightExtender from './hooks/use-height-extender';\n\nconst CueCanvas: React.FC<ICueCanvas> = memo(\n  ({\n    responseId,\n    width,\n    height,\n    canRender,\n    onUpdateHeight,\n    initialData,\n    onPublish,\n    onSubscribe,\n    userId,\n    appended,\n    canScribble,\n    userType,\n    renderAs = 'canvas',\n  }) => {\n    const canvasElementRef = useRef<HTMLDivElement>(null);\n    const { setActiveInstance: setActiveCueCanvas, setActiveTool } = useCueCanvasActions();\n\n    const cueCanvasRef = useRef<CueCanvasCore | null>(null);\n\n    const onUpdateActiveTool = useCallback(\n      (tool: TCueCanvasTool) => {\n        setActiveTool(tool);\n      },\n      [setActiveTool],\n    );\n\n    const uploadImageToS3 = useCallback((file: File) => {\n      // Todo @ayushsinghal1998: Update this once upload api is ready\n\n      // eslint-disable-next-line no-console\n      console.log(file, 'file to upload');\n\n      return 'https://cuemath-intel.s3.amazonaws.com/media/cuemath-whiteboard/2b0b9468-d6d4-11e8-9bfb-02420a000032:practice/Screenshot 2025-04-16 at 3.18.32 PM.png_b9079e2f-4ae6-439c-8edd-104dbfdc6100';\n    }, []);\n\n    useHeightExtender({\n      canvasElementRef,\n      cueCanvasRef,\n      canScribble,\n    });\n\n    useEffect(() => {\n      if (canScribble && cueCanvasRef.current) {\n        cueCanvasRef.current.resetViewPort();\n\n        setActiveCueCanvas(cueCanvasRef.current);\n      }\n    }, [canScribble, setActiveCueCanvas]);\n\n    useEffect(() => {\n      if (initialData && cueCanvasRef.current) {\n        cueCanvasRef.current.update(initialData);\n      }\n    }, [initialData]);\n\n    useEffect(() => {\n      if (height && cueCanvasRef.current) {\n        cueCanvasRef.current.resetViewPort();\n      }\n    }, [height, width]);\n\n    useEffect(() => {\n      if (canRender && appended && !cueCanvasRef.current) {\n        const canvasConfig = getCanvasConfig(width, height, renderAs, userType);\n        const canvasSetting = getCanvasSettings(renderAs);\n        const cueCanvasCore = new CueCanvasCore(\n          onPublish,\n          onSubscribe,\n          onUpdateActiveTool,\n          onUpdateHeight,\n          uploadImageToS3,\n          height,\n          userId,\n          responseId,\n          userType,\n          renderAs,\n        );\n        const createCueCanvas = async () => {\n          await cueCanvasCore.create({\n            canvasElementRef,\n            canvasConfig,\n            canvasSetting,\n            initialData,\n          });\n          cueCanvasRef.current = cueCanvasCore;\n\n          if (canScribble) {\n            setActiveCueCanvas(cueCanvasCore);\n          }\n        };\n\n        createCueCanvas();\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [onPublish, onSubscribe, setActiveCueCanvas, canRender, appended]);\n\n    useEffect(() => {\n      return () => {\n        if (cueCanvasRef.current) {\n          cueCanvasRef.current.destroy();\n          cueCanvasRef.current = null;\n        }\n      };\n    }, []);\n\n    return (\n      <CueCanvasWrapper\n        ref={canvasElementRef}\n        $width={width}\n        $height={height}\n        $canScribble={canScribble}\n        $canRender={canRender}\n        $renderAs={renderAs}\n      />\n    );\n  },\n);\n\nexport default CueCanvas;\n"],"names":["CueCanvas","memo","responseId","width","height","canRender","onUpdateHeight","initialData","onPublish","onSubscribe","userId","appended","canScribble","userType","renderAs","canvasElementRef","useRef","setActiveCueCanvas","setActiveTool","useCueCanvasActions","cueCanvasRef","onUpdateActiveTool","useCallback","tool","uploadImageToS3","file","useHeightExtender","useEffect","canvasConfig","getCanvasConfig","canvasSetting","getCanvasSettings","cueCanvasCore","CueCanvasCore","jsx","CueCanvasWrapper","CueCanvas$1"],"mappings":";;;;;;;AAUA,MAAMA,IAAkCC;AAAA,EACtC,CAAC;AAAA,IACC,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,EAAA,MACP;AACE,UAAAC,IAAmBC,EAAuB,IAAI,GAC9C,EAAE,mBAAmBC,GAAoB,eAAAC,MAAkBC,EAAoB,GAE/EC,IAAeJ,EAA6B,IAAI,GAEhDK,IAAqBC;AAAA,MACzB,CAACC,MAAyB;AACxB,QAAAL,EAAcK,CAAI;AAAA,MACpB;AAAA,MACA,CAACL,CAAa;AAAA,IAAA,GAGVM,IAAkBF,EAAY,CAACG,OAI3B,QAAA,IAAIA,GAAM,gBAAgB,GAE3B,+LACN,CAAE,CAAA;AAEa,WAAAC,EAAA;AAAA,MAChB,kBAAAX;AAAA,MACA,cAAAK;AAAA,MACA,aAAAR;AAAA,IAAA,CACD,GAEDe,EAAU,MAAM;AACV,MAAAf,KAAeQ,EAAa,YAC9BA,EAAa,QAAQ,iBAErBH,EAAmBG,EAAa,OAAO;AAAA,IACzC,GACC,CAACR,GAAaK,CAAkB,CAAC,GAEpCU,EAAU,MAAM;AACV,MAAApB,KAAea,EAAa,WACjBA,EAAA,QAAQ,OAAOb,CAAW;AAAA,IACzC,GACC,CAACA,CAAW,CAAC,GAEhBoB,EAAU,MAAM;AACV,MAAAvB,KAAUgB,EAAa,WACzBA,EAAa,QAAQ;IACvB,GACC,CAAChB,GAAQD,CAAK,CAAC,GAElBwB,EAAU,MAAM;AACd,UAAItB,KAAaM,KAAY,CAACS,EAAa,SAAS;AAClD,cAAMQ,IAAeC,EAAgB1B,GAAOC,GAAQU,GAAUD,CAAQ,GAChEiB,IAAgBC,EAAkBjB,CAAQ,GAC1CkB,IAAgB,IAAIC;AAAA,UACxBzB;AAAA,UACAC;AAAA,UACAY;AAAA,UACAf;AAAA,UACAkB;AAAA,UACApB;AAAA,UACAM;AAAA,UACAR;AAAA,UACAW;AAAA,UACAC;AAAA,QAAA;AAgBc,SAdQ,YAAY;AAClC,gBAAMkB,EAAc,OAAO;AAAA,YACzB,kBAAAjB;AAAA,YACA,cAAAa;AAAA,YACA,eAAAE;AAAA,YACA,aAAAvB;AAAA,UAAA,CACD,GACDa,EAAa,UAAUY,GAEnBpB,KACFK,EAAmBe,CAAa;AAAA,QAClC;MAIJ;AAAA,IAAA,GAEC,CAACxB,GAAWC,GAAaQ,GAAoBZ,GAAWM,CAAQ,CAAC,GAEpEgB,EAAU,MACD,MAAM;AACX,MAAIP,EAAa,YACfA,EAAa,QAAQ,WACrBA,EAAa,UAAU;AAAA,IACzB,GAED,CAAE,CAAA,GAGH,gBAAAc;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKpB;AAAA,QACL,QAAQZ;AAAA,QACR,SAASC;AAAA,QACT,cAAcQ;AAAA,QACd,YAAYP;AAAA,QACZ,WAAWS;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjB;AACF,GAEAsB,IAAepC;"}

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

@@ -1,86 +1,95 @@
-import s, { css as e } from "styled-components";
+import s, { css as n } from "styled-components";
 import c from "../../assets/line-icons/icons/check.js";
-import a from "../../assets/line-icons/icons/highlighter.js";
-import h from "../../assets/line-icons/icons/pencil.js";
-import u from "../../assets/line-icons/icons/ruler.js";
-import d from "../../assets/line-icons/icons/sketch.js";
+import d from "../../assets/line-icons/icons/down.js";
+import h from "../../assets/line-icons/icons/highlighter.js";
+import u from "../../assets/line-icons/icons/pencil.js";
+import f from "../../assets/line-icons/icons/ruler.js";
+import g from "../../assets/line-icons/icons/sketch.js";
+import $ from "../../assets/line-icons/icons/undo.js";
 import p from "../ui/layout/flex-view.js";
-import { CANVAS_COLORS as n } from "./constants/constants.js";
-const C = s(h)(({
+import { CANVAS_COLORS as a } from "./constants/constants.js";
+const b = s(u)(({
   theme: r,
   $active: o,
-  $activeColor: t
+  $activeColor: t,
+  $isWhiteBoard: l
 }) => {
-  const { colors: l } = r, i = o ? n[t] : l.REAL_BLACK_50;
-  return e`
+  const { colors: e } = r, i = o ? a[t] : e.REAL_BLACK_50;
+  return n`
     position: relative;
     transition: top 0.3s ease-in-out;
-    top: ${o ? "0px" : "8px"};
+    top: ${o && !l ? "0px" : "8px"};
     cursor: ${o ? "auto" : "pointer"};
     .pencil-dark-shade {
-      fill: ${o ? i : l.GREY_3};
+      fill: ${o ? i : e.GREY_3};
     }
 
     .pencil-light-shade {
-      fill: ${o ? i : l.GREY_2};
+      fill: ${o ? i : e.GREY_2};
       opacity: ${o ? 0.3 : 1};
     }
 
-    ${!o && e`
+    ${!o && n`
       &:hover {
         .pencil-dark-shade {
-          fill: ${l.GREY_4};
+          fill: ${e.GREY_4};
         }
         .pencil-light-shade {
-          fill: ${l.GREY_2};
+          fill: ${e.GREY_2};
         }
       }
     `}
   `;
-}), k = s(u)(({ theme: r, $active: o, $activeColor: t }) => {
-  const { colors: l } = r, i = o ? n[t] : l.REAL_BLACK_50;
-  return e`
+}), I = s(f)(({
+  theme: r,
+  $active: o,
+  $activeColor: t,
+  $isWhiteBoard: l
+}) => {
+  const { colors: e } = r, i = o ? a[t] : e.REAL_BLACK_50;
+  return n`
     cursor: ${o ? "auto" : "pointer"};
     position: relative;
     transition: top 0.3s ease-in-out;
-    top: ${o ? "0px" : "8px"};
+    top: ${o && !l ? "0px" : "8px"};
 
     .ruler-rect-color {
-      fill: ${o ? i : l.GREY_3};
+      fill: ${o ? i : e.GREY_3};
     }
 
     .ruler-stripe-base {
-      fill: ${o ? i : l.GREY_2};
+      fill: ${o ? i : e.GREY_2};
       opacity: ${o ? 0.2 : 1};
     }
 
     .ruler-small-stripe {
-      fill: ${l.REAL_BLACK};
+      fill: ${e.REAL_BLACK};
     }
 
-    ${!o && e`
+    ${!o && n`
       &:hover {
         .ruler-rect-color {
-          fill: ${l.GREY_4};
+          fill: ${e.GREY_4};
         }
         .ruler-stripe-base {
-          fill: ${l.GREY_3};
+          fill: ${e.GREY_3};
         }
       }
     `}
   `;
-}), E = s(a)(({
+}), B = s(h)(({
   $active: r,
   theme: o,
-  $activeColor: t
+  $activeColor: t,
+  $isWhiteBoard: l
 }) => {
-  const { colors: l } = o, i = r ? n[t] : l.REAL_BLACK_50;
-  return e`
+  const { colors: e } = o, i = r ? a[t] : e.REAL_BLACK_50;
+  return n`
     cursor: ${r ? "auto" : "pointer"};
     position: relative;
     transition: top 0.3s ease-in-out;
-    top: ${r ? "0px" : "8px"};
-    ${!r && e`
+    top: ${r && !l ? "0px" : "8px"};
+    ${!r && n`
       &:hover {
         .highlighter-tip {
           fill: ${o.colors.BLACK};
@@ -96,7 +105,7 @@ const C = s(h)(({
       }
     `}
 
-    ${r && e`
+    ${r && n`
       .highlighter-tip {
         fill: ${i};
       }
@@ -112,19 +121,20 @@ const C = s(h)(({
       }
     `}
   `;
-}), R = s(d)(({
+}), K = s(g)(({
   $active: r,
   theme: o,
-  $activeColor: t
+  $activeColor: t,
+  $isWhiteBoard: l
 }) => {
-  const { colors: l } = o, i = r ? n[t] : l.REAL_BLACK_50;
-  return e`
+  const { colors: e } = o, i = r ? a[t] : e.REAL_BLACK_50;
+  return n`
     cursor: ${r ? "auto" : "pointer"};
     position: relative;
     transition: top 0.3s ease-in-out;
-    top: ${r ? "0px" : "8px"};
+    top: ${r && !l ? "0px" : "8px"};
 
-    ${!r && e`
+    ${!r && n`
       &:hover {
         .pen-tip {
           fill: ${o.colors.BLACK};
@@ -140,7 +150,7 @@ const C = s(h)(({
       }
     `}
 
-    ${r && e`
+    ${r && n`
       cursor: ${r ? "auto" : "pointer"};
       .pen-tip {
         fill: ${i};
@@ -157,12 +167,12 @@ const C = s(h)(({
       }
     `}
   `;
-}), m = s(p)(({
+}), W = s(p)(({
   theme: r,
   $active: o
 }) => {
   const { colors: t } = r;
-  return e`
+  return n`
     cursor: ${o ? "auto" : "pointer"};
     width: 32px;
     height: 32px;
@@ -176,13 +186,13 @@ const C = s(h)(({
     &:hover {
       border: 1px solid ${t.REAL_BLACK};
     }
-    ${!o && e`
+    ${!o && n`
       &:hover {
         border: 1px solid ${t.REAL_BLACK};
       }
     `}
 
-    ${o && e`
+    ${o && n`
       cursor: auto;
       background: ${t.BLACK};
       svg {
@@ -200,11 +210,13 @@ const C = s(h)(({
       }
     `}
   `;
-}), B = s(c)`
+}), G = s(c)`
   path {
     stroke: ${"white"};
   }
-`, K = s(p)`
+`, S = s($)`
+  transform: scaleX(-1);
+`, Y = s(p)`
   position: absolute;
   display: flex;
   justify-content: center;
@@ -212,7 +224,7 @@ const C = s(h)(({
   transition:
     opacity 0.5s ease,
     transform 0.5s ease;
-`, b = s(p)(
+`, w = s(p)(
   ({ $canScribble: r, $canRender: o, $renderAs: t }) => `
   display: ${o ? "block" : "none"};
   opacity: ${r ? 1 : 0.5};
@@ -225,20 +237,45 @@ const C = s(h)(({
     `}
   
 `
-), I = s(p)(
+), H = s(p)(
   ({ $color: r }) => `
-background: ${n[r]};
+background: ${a[r]};
 `
-);
+), P = s(d)`
+  pointer-events: none;
+  transition: transform 0.5s ease;
+  transform: ${({ $isAnimating: r }) => r ? "rotate(180deg)" : "rotate(0deg)"};
+`, T = s(p)`
+  overflow: hidden;
+  border-right: 1px solid ${({ theme: r }) => r.colors.GREY_1};
+`, j = s(p)`
+  position: absolute;
+  padding: 8px 8px 0 8px;
+  overflow: hidden;
+  bottom: 58px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  transition:
+    opacity 0.5s ease,
+    transform 0.5s ease;
+
+  :hover {
+    cursor: pointer;
+  }
+`;
 export {
-  I as ColorPicker,
-  b as CueCanvasWrapper,
-  K as PalleteWrapper,
-  B as StyledCheckIcon,
-  E as StyledHighlighterWrapper,
-  C as StyledPencilIcon,
-  k as StyledRulerIcon,
-  R as StyledSketchWrapper,
-  m as StyledWrapper
+  H as ColorPicker,
+  w as CueCanvasWrapper,
+  j as MenuWrapper,
+  Y as PaletteWrapper,
+  T as PenIconWrapper,
+  S as RedoIcon,
+  G as StyledCheckIcon,
+  P as StyledDownIcon,
+  B as StyledHighlighterWrapper,
+  b as StyledPencilIcon,
+  I as StyledRulerIcon,
+  K as StyledSketchWrapper,
+  W as StyledWrapper
 };
 //# sourceMappingURL=cue-cavas-styled.js.map