@cuemath/leap 3.5.0 → 3.5.1-akm-6

package/dist/features/circle-games/sign-up/comp/input-wrapper/input-wrapper.js

@@ -1,21 +1,21 @@
 import { jsxs as e, jsx as r, Fragment as a } from "react/jsx-runtime";
-import d from "react";
+import { Fragment as d } from "react";
 import c from "../../../../ui/text/text.js";
 import { Spinner as h } from "../spinner/spinner.js";
-import { InputWrapper as l, TextWrapper as f, SpinnerLottieView as s } from "./input-wrapper-styled.js";
-const $ = ({ children: t, helperText: n, custEle: i, showSpinner: p }) => /* @__PURE__ */ e(l, { children: [
-  t,
-  /* @__PURE__ */ r(f, { children: /* @__PURE__ */ e(a, { children: [
+import { InputWrapper as l, TextWrapper as s, SpinnerLottieView as f } from "./input-wrapper-styled.js";
+const u = ({ children: p, helperText: n, custEle: i, showSpinner: t }) => /* @__PURE__ */ e(l, { children: [
+  p,
+  /* @__PURE__ */ r(s, { children: /* @__PURE__ */ e(a, { children: [
     n && /* @__PURE__ */ r(c, { $renderAs: "ab3", $color: "WHITE_70", $align: "center", children: n.split(`
-`).map((o, m) => /* @__PURE__ */ e(d.Fragment, { children: [
+`).map((o, m) => /* @__PURE__ */ e(d, { children: [
       o,
       /* @__PURE__ */ r("br", {})
     ] }, m)) }),
     i && /* @__PURE__ */ r("div", { children: i })
   ] }) }),
-  p && /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r(h, { height: 20, width: 20 }) })
+  t && /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(h, { height: 20, width: 20 }) })
 ] });
 export {
-  $ as InputWrapper
+  u as InputWrapper
 };
 //# sourceMappingURL=input-wrapper.js.map

package/dist/features/circle-games/sign-up/comp/input-wrapper/input-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-wrapper.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/input-wrapper/input-wrapper.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport React from 'react';\n\nimport Text from '../../../../ui/text/text';\nimport { Spinner } from '../spinner/spinner';\nimport * as S from './input-wrapper-styled';\n\ninterface InputWrapperProps {\n  children: ReactElement;\n  helperText?: string;\n  custEle?: ReactNode;\n  showSpinner?: boolean;\n}\n\nexport const InputWrapper = ({ children, helperText, custEle, showSpinner }: InputWrapperProps) => {\n  return (\n    <S.InputWrapper>\n      {children}\n      <S.TextWrapper>\n        <>\n          {helperText && (\n            <Text $renderAs=\"ab3\" $color=\"WHITE_70\" $align=\"center\">\n              {helperText.split('\\n').map((line, index) => (\n                <React.Fragment key={index}>\n                  {line}\n                  <br />\n                </React.Fragment>\n              ))}\n            </Text>\n          )}\n          {custEle && <div>{custEle}</div>}\n        </>\n      </S.TextWrapper>\n      {showSpinner && (\n        <S.SpinnerLottieView>\n          <Spinner height={20} width={20} />\n        </S.SpinnerLottieView>\n      )}\n    </S.InputWrapper>\n  );\n};\n"],"names":["InputWrapper","children","helperText","custEle","showSpinner","jsxs","S.InputWrapper","jsx","S.TextWrapper","Fragment","Text","line","index","React","S.SpinnerLottieView","Spinner"],"mappings":";;;;;AAcO,MAAMA,IAAe,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,SAAAC,GAAS,aAAAC,QAE1D,gBAAAC,EAACC,GAAA,EACE,UAAA;AAAA,EAAAL;AAAA,EACA,gBAAAM,EAAAC,GAAA,EACC,UACG,gBAAAH,EAAAI,GAAA,EAAA,UAAA;AAAA,IAAAP,uBACEQ,GAAK,EAAA,WAAU,OAAM,QAAO,YAAW,QAAO,UAC5C,UAAAR,EAAW,MAAM;AAAA,CAAI,EAAE,IAAI,CAACS,GAAMC,MAChC,gBAAAP,EAAAQ,EAAM,UAAN,EACE,UAAA;AAAA,MAAAF;AAAA,wBACA,MAAG,EAAA;AAAA,IAAA,KAFeC,CAGrB,CACD,GACH;AAAA,IAEDT,KAAY,gBAAAI,EAAA,OAAA,EAAK,UAAQJ,EAAA,CAAA;AAAA,EAAA,EAAA,CAC5B,EACF,CAAA;AAAA,EACCC,KACE,gBAAAG,EAAAO,GAAA,EACC,UAAC,gBAAAP,EAAAQ,GAAA,EAAQ,QAAQ,IAAI,OAAO,GAAA,CAAI,EAClC,CAAA;AAEJ,EAAA,CAAA;"}
+{"version":3,"file":"input-wrapper.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/input-wrapper/input-wrapper.tsx"],"sourcesContent":["import { Fragment, type ReactElement, type ReactNode } from 'react';\n\nimport Text from '../../../../ui/text/text';\nimport { Spinner } from '../spinner/spinner';\nimport * as S from './input-wrapper-styled';\n\ninterface InputWrapperProps {\n  children: ReactElement;\n  helperText?: string;\n  custEle?: ReactNode;\n  showSpinner?: boolean;\n}\n\nexport const InputWrapper = ({ children, helperText, custEle, showSpinner }: InputWrapperProps) => {\n  return (\n    <S.InputWrapper>\n      {children}\n      <S.TextWrapper>\n        <>\n          {helperText && (\n            <Text $renderAs=\"ab3\" $color=\"WHITE_70\" $align=\"center\">\n              {helperText.split('\\n').map((line, index) => (\n                <Fragment key={index}>\n                  {line}\n                  <br />\n                </Fragment>\n              ))}\n            </Text>\n          )}\n          {custEle && <div>{custEle}</div>}\n        </>\n      </S.TextWrapper>\n      {showSpinner && (\n        <S.SpinnerLottieView>\n          <Spinner height={20} width={20} />\n        </S.SpinnerLottieView>\n      )}\n    </S.InputWrapper>\n  );\n};\n"],"names":["InputWrapper","children","helperText","custEle","showSpinner","jsxs","S.InputWrapper","jsx","S.TextWrapper","Fragment","Text","line","index","S.SpinnerLottieView","Spinner"],"mappings":";;;;;AAaO,MAAMA,IAAe,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,SAAAC,GAAS,aAAAC,QAE1D,gBAAAC,EAACC,GAAA,EACE,UAAA;AAAA,EAAAL;AAAA,EACA,gBAAAM,EAAAC,GAAA,EACC,UACG,gBAAAH,EAAAI,GAAA,EAAA,UAAA;AAAA,IAAAP,uBACEQ,GAAK,EAAA,WAAU,OAAM,QAAO,YAAW,QAAO,UAC5C,UAAAR,EAAW,MAAM;AAAA,CAAI,EAAE,IAAI,CAACS,GAAMC,MACjC,gBAAAP,EAACI,GAAA,EACE,UAAA;AAAA,MAAAE;AAAA,wBACA,MAAG,EAAA;AAAA,IAAA,KAFSC,CAGf,CACD,GACH;AAAA,IAEDT,KAAY,gBAAAI,EAAA,OAAA,EAAK,UAAQJ,EAAA,CAAA;AAAA,EAAA,EAAA,CAC5B,EACF,CAAA;AAAA,EACCC,KACE,gBAAAG,EAAAM,GAAA,EACC,UAAC,gBAAAN,EAAAO,GAAA,EAAQ,QAAQ,IAAI,OAAO,GAAA,CAAI,EAClC,CAAA;AAEJ,EAAA,CAAA;"}

package/dist/features/communication/hooks/use-inclass-message-broker/use-inclass-message-broker.js

@@ -1,7 +1,7 @@
-import { useMessageBrokerChannel as k } from "@cuemath/cue-message-broker";
-import { useMemo as I, useCallback as o } from "react";
+import { useMemo as k, useCallback as o } from "react";
+import { useMessageBrokerChannel as I } from "@cuemath/cue-message-broker";
 const S = 3, b = (l) => {
-  const { studentClassroomId: a, onMessageReceive: e, logger: n } = l, t = `inclass_${a}`, r = I(
+  const { studentClassroomId: a, onMessageReceive: e, logger: n } = l, t = `inclass_${a}`, r = k(
     () => ({
       channelId: t,
       ttl: S,
@@ -24,7 +24,7 @@ const S = 3, b = (l) => {
     channelMetadata: m,
     setChannelMetadata: h,
     removeChannelMetadata: C
-  } = k({
+  } = I({
     channelOptions: r,
     consumerFn: e ? c : void 0,
     metadataRequired: !0,

package/dist/features/communication/hooks/use-inclass-message-broker/use-inclass-message-broker.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-inclass-message-broker.js","sources":["../../../../../src/features/communication/hooks/use-inclass-message-broker/use-inclass-message-broker.ts"],"sourcesContent":["import { useMessageBrokerChannel, type IChannelMessage } from '@cuemath/cue-message-broker';\nimport { useCallback, useMemo } from 'react';\n\nimport type {\n  IUseInclassMessageBroker,\n  TInclassChannelMetadata,\n  TInclassMessage,\n} from './use-inclass-message-broker-types';\n\nconst CHANNEL_MESSAGES_TTL = 3; // 3 hours\n\nconst useInClassMessageBroker: IUseInclassMessageBroker = options => {\n  const { studentClassroomId, onMessageReceive, logger } = options;\n  const channelId = `inclass_${studentClassroomId}`;\n  const channelOptions = useMemo(\n    () => ({\n      channelId,\n      ttl: CHANNEL_MESSAGES_TTL,\n      noHistory: true,\n      logger,\n    }),\n    [channelId, logger],\n  );\n\n  const handleMessageReceive = useCallback(\n    (newMessages: Array<IChannelMessage<TInclassMessage>>, initialData?: boolean) => {\n      onMessageReceive?.(\n        newMessages.map(channelMessage => channelMessage.message.payload),\n        initialData,\n      );\n    },\n    [onMessageReceive],\n  );\n\n  const {\n    channel,\n    publish,\n    channelStatus,\n    channelMetadata,\n    setChannelMetadata,\n    removeChannelMetadata,\n  } = useMessageBrokerChannel<TInclassMessage, TInclassChannelMetadata>({\n    channelOptions,\n    consumerFn: onMessageReceive ? handleMessageReceive : undefined,\n    metadataRequired: true,\n    enabled: studentClassroomId !== undefined,\n  });\n\n  const closeChannel = useCallback(() => {\n    channel?.destroyChannel();\n  }, [channel]);\n\n  return {\n    channelStatus,\n    channelMetadata,\n    setChannelMetadata,\n    removeChannelMetadata,\n    publish,\n    closeChannel,\n  };\n};\n\nexport default useInClassMessageBroker;\n"],"names":["CHANNEL_MESSAGES_TTL","useInClassMessageBroker","options","studentClassroomId","onMessageReceive","logger","channelId","channelOptions","useMemo","handleMessageReceive","useCallback","newMessages","initialData","channelMessage","channel","publish","channelStatus","channelMetadata","setChannelMetadata","removeChannelMetadata","useMessageBrokerChannel","closeChannel","useInClassMessageBroker$1"],"mappings":";;AASA,MAAMA,IAAuB,GAEvBC,IAAoD,CAAWC,MAAA;AACnE,QAAM,EAAE,oBAAAC,GAAoB,kBAAAC,GAAkB,QAAAC,EAAA,IAAWH,GACnDI,IAAY,WAAWH,CAAkB,IACzCI,IAAiBC;AAAA,IACrB,OAAO;AAAA,MACL,WAAAF;AAAA,MACA,KAAKN;AAAA,MACL,WAAW;AAAA,MACX,QAAAK;AAAA,IAAA;AAAA,IAEF,CAACC,GAAWD,CAAM;AAAA,EAAA,GAGdI,IAAuBC;AAAA,IAC3B,CAACC,GAAsDC,MAA0B;AAC/E,MAAAR,KAAA,QAAAA;AAAA,QACEO,EAAY,IAAI,CAAkBE,MAAAA,EAAe,QAAQ,OAAO;AAAA,QAChED;AAAA;AAAA,IAEJ;AAAA,IACA,CAACR,CAAgB;AAAA,EAAA,GAGb;AAAA,IACJ,SAAAU;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,uBAAAC;AAAA,MACEC,EAAkE;AAAA,IACpE,gBAAAb;AAAA,IACA,YAAYH,IAAmBK,IAAuB;AAAA,IACtD,kBAAkB;AAAA,IAClB,SAASN,MAAuB;AAAA,EAAA,CACjC,GAEKkB,IAAeX,EAAY,MAAM;AACrC,IAAAI,KAAA,QAAAA,EAAS;AAAA,EAAe,GACvB,CAACA,CAAO,CAAC;AAEL,SAAA;AAAA,IACL,eAAAE;AAAA,IACA,iBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,SAAAJ;AAAA,IACA,cAAAM;AAAA,EAAA;AAEJ,GAEAC,IAAerB;"}
+{"version":3,"file":"use-inclass-message-broker.js","sources":["../../../../../src/features/communication/hooks/use-inclass-message-broker/use-inclass-message-broker.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { useMessageBrokerChannel, type IChannelMessage } from '@cuemath/cue-message-broker';\n\nimport type {\n  IUseInclassMessageBroker,\n  TInclassChannelMetadata,\n  TInclassMessage,\n} from './use-inclass-message-broker-types';\n\nconst CHANNEL_MESSAGES_TTL = 3; // 3 hours\n\nconst useInClassMessageBroker: IUseInclassMessageBroker = options => {\n  const { studentClassroomId, onMessageReceive, logger } = options;\n  const channelId = `inclass_${studentClassroomId}`;\n  const channelOptions = useMemo(\n    () => ({\n      channelId,\n      ttl: CHANNEL_MESSAGES_TTL,\n      noHistory: true,\n      logger,\n    }),\n    [channelId, logger],\n  );\n\n  const handleMessageReceive = useCallback(\n    (newMessages: Array<IChannelMessage<TInclassMessage>>, initialData?: boolean) => {\n      onMessageReceive?.(\n        newMessages.map(channelMessage => channelMessage.message.payload),\n        initialData,\n      );\n    },\n    [onMessageReceive],\n  );\n\n  const {\n    channel,\n    publish,\n    channelStatus,\n    channelMetadata,\n    setChannelMetadata,\n    removeChannelMetadata,\n  } = useMessageBrokerChannel<TInclassMessage, TInclassChannelMetadata>({\n    channelOptions,\n    consumerFn: onMessageReceive ? handleMessageReceive : undefined,\n    metadataRequired: true,\n    enabled: studentClassroomId !== undefined,\n  });\n\n  const closeChannel = useCallback(() => {\n    channel?.destroyChannel();\n  }, [channel]);\n\n  return {\n    channelStatus,\n    channelMetadata,\n    setChannelMetadata,\n    removeChannelMetadata,\n    publish,\n    closeChannel,\n  };\n};\n\nexport default useInClassMessageBroker;\n"],"names":["CHANNEL_MESSAGES_TTL","useInClassMessageBroker","options","studentClassroomId","onMessageReceive","logger","channelId","channelOptions","useMemo","handleMessageReceive","useCallback","newMessages","initialData","channelMessage","channel","publish","channelStatus","channelMetadata","setChannelMetadata","removeChannelMetadata","useMessageBrokerChannel","closeChannel","useInClassMessageBroker$1"],"mappings":";;AAUA,MAAMA,IAAuB,GAEvBC,IAAoD,CAAWC,MAAA;AACnE,QAAM,EAAE,oBAAAC,GAAoB,kBAAAC,GAAkB,QAAAC,EAAA,IAAWH,GACnDI,IAAY,WAAWH,CAAkB,IACzCI,IAAiBC;AAAA,IACrB,OAAO;AAAA,MACL,WAAAF;AAAA,MACA,KAAKN;AAAA,MACL,WAAW;AAAA,MACX,QAAAK;AAAA,IAAA;AAAA,IAEF,CAACC,GAAWD,CAAM;AAAA,EAAA,GAGdI,IAAuBC;AAAA,IAC3B,CAACC,GAAsDC,MAA0B;AAC/E,MAAAR,KAAA,QAAAA;AAAA,QACEO,EAAY,IAAI,CAAkBE,MAAAA,EAAe,QAAQ,OAAO;AAAA,QAChED;AAAA;AAAA,IAEJ;AAAA,IACA,CAACR,CAAgB;AAAA,EAAA,GAGb;AAAA,IACJ,SAAAU;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,uBAAAC;AAAA,MACEC,EAAkE;AAAA,IACpE,gBAAAb;AAAA,IACA,YAAYH,IAAmBK,IAAuB;AAAA,IACtD,kBAAkB;AAAA,IAClB,SAASN,MAAuB;AAAA,EAAA,CACjC,GAEKkB,IAAeX,EAAY,MAAM;AACrC,IAAAI,KAAA,QAAAA,EAAS;AAAA,EAAe,GACvB,CAACA,CAAO,CAAC;AAEL,SAAA;AAAA,IACL,eAAAE;AAAA,IACA,iBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,SAAAJ;AAAA,IACA,cAAAM;AAAA,EAAA;AAEJ,GAEAC,IAAerB;"}

package/dist/features/communication/hooks/use-trial-session-message-broker/use-trial-session-message-broker.js

@@ -1,7 +1,7 @@
-import { useMessageBrokerChannel as g } from "@cuemath/cue-message-broker";
-import { useMemo as S, useCallback as o } from "react";
+import { useMemo as g, useCallback as o } from "react";
+import { useMessageBrokerChannel as S } from "@cuemath/cue-message-broker";
 const k = 3, T = (r) => {
-  const { teacherClassroomId: a, onMessageReceive: e, logger: t } = r, n = `trial_v3_${a}`, l = S(
+  const { teacherClassroomId: a, onMessageReceive: e, logger: t } = r, n = `trial_v3_${a}`, l = g(
     () => ({
       channelId: n,
       ttl: k,
@@ -17,7 +17,7 @@ const k = 3, T = (r) => {
       );
     },
     [e]
-  ), { channel: s, publish: d, channelStatus: i, channelMetadata: u, setChannelMetadata: h } = g({
+  ), { channel: s, publish: d, channelStatus: i, channelMetadata: u, setChannelMetadata: h } = S({
     channelOptions: l,
     consumerFn: e ? c : void 0,
     metadataRequired: !0,

package/dist/features/communication/hooks/use-trial-session-message-broker/use-trial-session-message-broker.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-trial-session-message-broker.js","sources":["../../../../../src/features/communication/hooks/use-trial-session-message-broker/use-trial-session-message-broker.ts"],"sourcesContent":["import { useMessageBrokerChannel, type IChannelMessage } from '@cuemath/cue-message-broker';\nimport { useCallback, useMemo } from 'react';\n\nimport type {\n  ITrialSessionMetadata,\n  IUseTrialSessionMessageBroker,\n  TTrialSessionMessage,\n} from './use-trial-session-message-broker-types';\n\nconst CHANNEL_MESSAGES_TTL = 3; // 3 hours\n\nconst useTrialSessionMessageBroker: IUseTrialSessionMessageBroker = options => {\n  const { teacherClassroomId, onMessageReceive, logger } = options;\n  const channelId = `trial_v3_${teacherClassroomId}`;\n  const channelOptions = useMemo(\n    () => ({\n      channelId,\n      ttl: CHANNEL_MESSAGES_TTL,\n      noHistory: true,\n      logger,\n    }),\n    [channelId, logger],\n  );\n\n  const handleMessageReceive = useCallback(\n    (newMessages: Array<IChannelMessage<TTrialSessionMessage>>, initialData?: boolean) => {\n      onMessageReceive?.(\n        newMessages.map(channelMessage => channelMessage.message.payload),\n        initialData,\n      );\n    },\n    [onMessageReceive],\n  );\n\n  const { channel, publish, channelStatus, channelMetadata, setChannelMetadata } =\n    useMessageBrokerChannel<TTrialSessionMessage, ITrialSessionMetadata>({\n      channelOptions,\n      consumerFn: onMessageReceive ? handleMessageReceive : undefined,\n      metadataRequired: true,\n      enabled: teacherClassroomId !== undefined,\n    });\n\n  const closeChannel = useCallback(() => {\n    channel?.destroyChannel();\n  }, [channel]);\n\n  return {\n    publish,\n    closeChannel,\n    setChannelMetadata,\n    channelStatus,\n    channelMetadata,\n  };\n};\n\nexport default useTrialSessionMessageBroker;\n"],"names":["CHANNEL_MESSAGES_TTL","useTrialSessionMessageBroker","options","teacherClassroomId","onMessageReceive","logger","channelId","channelOptions","useMemo","handleMessageReceive","useCallback","newMessages","initialData","channelMessage","channel","publish","channelStatus","channelMetadata","setChannelMetadata","useMessageBrokerChannel","closeChannel","useTrialSessionMessageBroker$1"],"mappings":";;AASA,MAAMA,IAAuB,GAEvBC,IAA8D,CAAWC,MAAA;AAC7E,QAAM,EAAE,oBAAAC,GAAoB,kBAAAC,GAAkB,QAAAC,EAAA,IAAWH,GACnDI,IAAY,YAAYH,CAAkB,IAC1CI,IAAiBC;AAAA,IACrB,OAAO;AAAA,MACL,WAAAF;AAAA,MACA,KAAKN;AAAA,MACL,WAAW;AAAA,MACX,QAAAK;AAAA,IAAA;AAAA,IAEF,CAACC,GAAWD,CAAM;AAAA,EAAA,GAGdI,IAAuBC;AAAA,IAC3B,CAACC,GAA2DC,MAA0B;AACpF,MAAAR,KAAA,QAAAA;AAAA,QACEO,EAAY,IAAI,CAAkBE,MAAAA,EAAe,QAAQ,OAAO;AAAA,QAChED;AAAA;AAAA,IAEJ;AAAA,IACA,CAACR,CAAgB;AAAA,EAAA,GAGb,EAAE,SAAAU,GAAS,SAAAC,GAAS,eAAAC,GAAe,iBAAAC,GAAiB,oBAAAC,MACxDC,EAAqE;AAAA,IACnE,gBAAAZ;AAAA,IACA,YAAYH,IAAmBK,IAAuB;AAAA,IACtD,kBAAkB;AAAA,IAClB,SAASN,MAAuB;AAAA,EAAA,CACjC,GAEGiB,IAAeV,EAAY,MAAM;AACrC,IAAAI,KAAA,QAAAA,EAAS;AAAA,EAAe,GACvB,CAACA,CAAO,CAAC;AAEL,SAAA;AAAA,IACL,SAAAC;AAAA,IACA,cAAAK;AAAA,IACA,oBAAAF;AAAA,IACA,eAAAF;AAAA,IACA,iBAAAC;AAAA,EAAA;AAEJ,GAEAI,IAAepB;"}
+{"version":3,"file":"use-trial-session-message-broker.js","sources":["../../../../../src/features/communication/hooks/use-trial-session-message-broker/use-trial-session-message-broker.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { useMessageBrokerChannel, type IChannelMessage } from '@cuemath/cue-message-broker';\n\nimport type {\n  ITrialSessionMetadata,\n  IUseTrialSessionMessageBroker,\n  TTrialSessionMessage,\n} from './use-trial-session-message-broker-types';\n\nconst CHANNEL_MESSAGES_TTL = 3; // 3 hours\n\nconst useTrialSessionMessageBroker: IUseTrialSessionMessageBroker = options => {\n  const { teacherClassroomId, onMessageReceive, logger } = options;\n  const channelId = `trial_v3_${teacherClassroomId}`;\n  const channelOptions = useMemo(\n    () => ({\n      channelId,\n      ttl: CHANNEL_MESSAGES_TTL,\n      noHistory: true,\n      logger,\n    }),\n    [channelId, logger],\n  );\n\n  const handleMessageReceive = useCallback(\n    (newMessages: Array<IChannelMessage<TTrialSessionMessage>>, initialData?: boolean) => {\n      onMessageReceive?.(\n        newMessages.map(channelMessage => channelMessage.message.payload),\n        initialData,\n      );\n    },\n    [onMessageReceive],\n  );\n\n  const { channel, publish, channelStatus, channelMetadata, setChannelMetadata } =\n    useMessageBrokerChannel<TTrialSessionMessage, ITrialSessionMetadata>({\n      channelOptions,\n      consumerFn: onMessageReceive ? handleMessageReceive : undefined,\n      metadataRequired: true,\n      enabled: teacherClassroomId !== undefined,\n    });\n\n  const closeChannel = useCallback(() => {\n    channel?.destroyChannel();\n  }, [channel]);\n\n  return {\n    publish,\n    closeChannel,\n    setChannelMetadata,\n    channelStatus,\n    channelMetadata,\n  };\n};\n\nexport default useTrialSessionMessageBroker;\n"],"names":["CHANNEL_MESSAGES_TTL","useTrialSessionMessageBroker","options","teacherClassroomId","onMessageReceive","logger","channelId","channelOptions","useMemo","handleMessageReceive","useCallback","newMessages","initialData","channelMessage","channel","publish","channelStatus","channelMetadata","setChannelMetadata","useMessageBrokerChannel","closeChannel","useTrialSessionMessageBroker$1"],"mappings":";;AAUA,MAAMA,IAAuB,GAEvBC,IAA8D,CAAWC,MAAA;AAC7E,QAAM,EAAE,oBAAAC,GAAoB,kBAAAC,GAAkB,QAAAC,EAAA,IAAWH,GACnDI,IAAY,YAAYH,CAAkB,IAC1CI,IAAiBC;AAAA,IACrB,OAAO;AAAA,MACL,WAAAF;AAAA,MACA,KAAKN;AAAA,MACL,WAAW;AAAA,MACX,QAAAK;AAAA,IAAA;AAAA,IAEF,CAACC,GAAWD,CAAM;AAAA,EAAA,GAGdI,IAAuBC;AAAA,IAC3B,CAACC,GAA2DC,MAA0B;AACpF,MAAAR,KAAA,QAAAA;AAAA,QACEO,EAAY,IAAI,CAAkBE,MAAAA,EAAe,QAAQ,OAAO;AAAA,QAChED;AAAA;AAAA,IAEJ;AAAA,IACA,CAACR,CAAgB;AAAA,EAAA,GAGb,EAAE,SAAAU,GAAS,SAAAC,GAAS,eAAAC,GAAe,iBAAAC,GAAiB,oBAAAC,MACxDC,EAAqE;AAAA,IACnE,gBAAAZ;AAAA,IACA,YAAYH,IAAmBK,IAAuB;AAAA,IACtD,kBAAkB;AAAA,IAClB,SAASN,MAAuB;AAAA,EAAA,CACjC,GAEGiB,IAAeV,EAAY,MAAM;AACrC,IAAAI,KAAA,QAAAA,EAAS;AAAA,EAAe,GACvB,CAACA,CAAO,CAAC;AAEL,SAAA;AAAA,IACL,SAAAC;AAAA,IACA,cAAAK;AAAA,IACA,oBAAAF;AAAA,IACA,eAAAF;AAAA,IACA,iBAAAC;AAAA,EAAA;AAEJ,GAEAI,IAAepB;"}

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 React, { memo, useCallback, useEffect, useRef } from 'react';\n\nimport useIsLearnosityLoaded from '../worksheet/learnosity-preloader/use-is-learnosity-loaded';\nimport { CueCanvasCore } from './cue-canvas-core';\nimport { getCanvasConfig, getCanvasSettings } from './cue-canvas-helpers';\nimport { CueCanvasWrapper } from './cue-cavas-styled';\nimport useConfigUpdater from './hooks/use-config-updater';\nimport { useCueCanvasActions } from './hooks/use-cue-canvas-actions';\nimport useHeightExtender from './hooks/use-height-extender';\nimport useUploadHelper from './hooks/use-upload-helper';\nimport type { ICueCanvas, TCueCanvasTool } from './types/cue-canvas';\n\nconst CueCanvas: React.FC<ICueCanvas> = memo(\n  ({\n    canvasId,\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    canvasConfig,\n    updateCanvasConfig,\n  }) => {\n    const canvasElementRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n    const { setActiveInstance: setActiveCueCanvas, setActiveTool } = useCueCanvasActions();\n    const uploadImageToS3 = useUploadHelper({ userId, renderAs, userType });\n    const { scriptStatus } = useIsLearnosityLoaded(); // This hook checks if the Polypad script is loaded + (additional scripts)\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    useHeightExtender({\n      canvasElementRef,\n      cueCanvasRef,\n      canScribble,\n    });\n    useConfigUpdater(canvasConfig, renderAs);\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 && scriptStatus === 'loaded') {\n        const canvasCreateConfig = getCanvasConfig(width, height, renderAs, userType);\n        const canvasSetting = getCanvasSettings(renderAs, userType);\n        const cueCanvasCore = new CueCanvasCore({\n          onPublish,\n          onSubscribe,\n          onUpdateActiveTool,\n          onUpdateHeight,\n          uploadImageToS3,\n          height,\n          userId,\n          canvasId,\n          userType,\n          renderAs,\n          updateCanvasConfig,\n        });\n\n        const createCueCanvas = async () => {\n          await cueCanvasCore.create({\n            canvasElementRef,\n            canvasConfig: canvasCreateConfig,\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, scriptStatus]);\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        id={renderAs === 'whiteboard' ? 'canvasContainer' : canvasId}\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","canvasId","width","height","canRender","onUpdateHeight","initialData","onPublish","onSubscribe","userId","appended","canScribble","userType","renderAs","canvasConfig","updateCanvasConfig","canvasElementRef","useRef","setActiveCueCanvas","setActiveTool","useCueCanvasActions","uploadImageToS3","useUploadHelper","scriptStatus","useIsLearnosityLoaded","cueCanvasRef","onUpdateActiveTool","useCallback","tool","useHeightExtender","useConfigUpdater","useEffect","canvasCreateConfig","getCanvasConfig","canvasSetting","getCanvasSettings","cueCanvasCore","CueCanvasCore","jsx","CueCanvasWrapper","CueCanvas$1"],"mappings":";;;;;;;;;;AAYA,MAAMA,IAAkCC;AAAA,EACtC,CAAC;AAAA,IACC,UAAAC;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,IACX,cAAAC;AAAA,IACA,oBAAAC;AAAA,EAAA,MACI;AACE,UAAAC,IAAmBC,EAAuB,IAAI,GAC9C,EAAE,mBAAmBC,GAAoB,eAAAC,MAAkBC,EAAoB,GAC/EC,IAAkBC,EAAgB,EAAE,QAAAb,GAAQ,UAAAI,GAAU,UAAAD,GAAU,GAChE,EAAE,cAAAW,MAAiBC,KAEnBC,IAAeR,EAA6B,IAAI,GAEhDS,IAAqBC;AAAA,MACzB,CAACC,MAAyB;AACxB,QAAAT,EAAcS,CAAI;AAAA,MACpB;AAAA,MACA,CAACT,CAAa;AAAA,IAAA;AAGE,WAAAU,EAAA;AAAA,MAChB,kBAAAb;AAAA,MACA,cAAAS;AAAA,MACA,aAAAd;AAAA,IAAA,CACD,GACDmB,EAAiBhB,GAAcD,CAAQ,GAEvCkB,EAAU,MAAM;AACV,MAAApB,KAAec,EAAa,YAC9BA,EAAa,QAAQ,iBAErBP,EAAmBO,EAAa,OAAO;AAAA,IACzC,GACC,CAACd,GAAaO,CAAkB,CAAC,GAEpCa,EAAU,MAAM;AACV,MAAAzB,KAAemB,EAAa,WACjBA,EAAA,QAAQ,OAAOnB,CAAW;AAAA,IACzC,GACC,CAACA,CAAW,CAAC,GAEhByB,EAAU,MAAM;AACV,MAAA5B,KAAUsB,EAAa,WACzBA,EAAa,QAAQ;IACvB,GACC,CAACtB,GAAQD,CAAK,CAAC,GAElB6B,EAAU,MAAM;AACd,UAAI3B,KAAaM,KAAY,CAACe,EAAa,WAAWF,MAAiB,UAAU;AAC/E,cAAMS,IAAqBC,EAAgB/B,GAAOC,GAAQU,GAAUD,CAAQ,GACtEsB,IAAgBC,EAAkBtB,GAAUD,CAAQ,GACpDwB,IAAgB,IAAIC,EAAc;AAAA,UACtC,WAAA9B;AAAA,UACA,aAAAC;AAAA,UACA,oBAAAkB;AAAA,UACA,gBAAArB;AAAA,UACA,iBAAAgB;AAAA,UACA,QAAAlB;AAAA,UACA,QAAAM;AAAA,UACA,UAAAR;AAAA,UACA,UAAAW;AAAA,UACA,UAAAC;AAAA,UACA,oBAAAE;AAAA,QAAA,CACD;AAgBe,SAdQ,YAAY;AAClC,gBAAMqB,EAAc,OAAO;AAAA,YACzB,kBAAApB;AAAA,YACA,cAAcgB;AAAA,YACd,eAAAE;AAAA,YACA,aAAA5B;AAAA,UAAA,CACD,GACDmB,EAAa,UAAUW,GAEnBzB,KACFO,EAAmBkB,CAAa;AAAA,QAClC;MAIJ;AAAA,IAAA,GAEC,CAAC7B,GAAWC,GAAaU,GAAoBd,GAAWM,GAAUa,CAAY,CAAC,GAElFQ,EAAU,MACD,MAAM;AACX,MAAIN,EAAa,YACfA,EAAa,QAAQ,WACrBA,EAAa,UAAU;AAAA,IACzB,GAED,CAAE,CAAA,GAGH,gBAAAa;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,IAAI1B,MAAa,eAAe,oBAAoBZ;AAAA,QACpD,KAAKe;AAAA,QACL,QAAQd;AAAA,QACR,SAASC;AAAA,QACT,cAAcQ;AAAA,QACd,YAAYP;AAAA,QACZ,WAAWS;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjB;AACF,GAEA2B,IAAezC;"}
+{"version":3,"file":"cue-canvas.js","sources":["../../../src/features/cue-canvas/cue-canvas.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useRef, type FC } from 'react';\n\nimport useIsLearnosityLoaded from '../worksheet/learnosity-preloader/use-is-learnosity-loaded';\nimport { CueCanvasCore } from './cue-canvas-core';\nimport { getCanvasConfig, getCanvasSettings } from './cue-canvas-helpers';\nimport { CueCanvasWrapper } from './cue-cavas-styled';\nimport useConfigUpdater from './hooks/use-config-updater';\nimport { useCueCanvasActions } from './hooks/use-cue-canvas-actions';\nimport useHeightExtender from './hooks/use-height-extender';\nimport useUploadHelper from './hooks/use-upload-helper';\nimport type { ICueCanvas, TCueCanvasTool } from './types/cue-canvas';\n\nconst CueCanvas: FC<ICueCanvas> = memo(\n  ({\n    canvasId,\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    canvasConfig,\n    updateCanvasConfig,\n  }) => {\n    const canvasElementRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n    const { setActiveInstance: setActiveCueCanvas, setActiveTool } = useCueCanvasActions();\n    const uploadImageToS3 = useUploadHelper({ userId, renderAs, userType });\n    const { scriptStatus } = useIsLearnosityLoaded(); // This hook checks if the Polypad script is loaded + (additional scripts)\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    useHeightExtender({\n      canvasElementRef,\n      cueCanvasRef,\n      canScribble,\n    });\n    useConfigUpdater(canvasConfig, renderAs);\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 && scriptStatus === 'loaded') {\n        const canvasCreateConfig = getCanvasConfig(width, height, renderAs, userType);\n        const canvasSetting = getCanvasSettings(renderAs, userType);\n        const cueCanvasCore = new CueCanvasCore({\n          onPublish,\n          onSubscribe,\n          onUpdateActiveTool,\n          onUpdateHeight,\n          uploadImageToS3,\n          height,\n          userId,\n          canvasId,\n          userType,\n          renderAs,\n          updateCanvasConfig,\n        });\n\n        const createCueCanvas = async () => {\n          await cueCanvasCore.create({\n            canvasElementRef,\n            canvasConfig: canvasCreateConfig,\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, scriptStatus]);\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        id={renderAs === 'whiteboard' ? 'canvasContainer' : canvasId}\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","canvasId","width","height","canRender","onUpdateHeight","initialData","onPublish","onSubscribe","userId","appended","canScribble","userType","renderAs","canvasConfig","updateCanvasConfig","canvasElementRef","useRef","setActiveCueCanvas","setActiveTool","useCueCanvasActions","uploadImageToS3","useUploadHelper","scriptStatus","useIsLearnosityLoaded","cueCanvasRef","onUpdateActiveTool","useCallback","tool","useHeightExtender","useConfigUpdater","useEffect","canvasCreateConfig","getCanvasConfig","canvasSetting","getCanvasSettings","cueCanvasCore","CueCanvasCore","jsx","CueCanvasWrapper","CueCanvas$1"],"mappings":";;;;;;;;;;AAYA,MAAMA,IAA4BC;AAAA,EAChC,CAAC;AAAA,IACC,UAAAC;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,IACX,cAAAC;AAAA,IACA,oBAAAC;AAAA,EAAA,MACI;AACE,UAAAC,IAAmBC,EAAuB,IAAI,GAC9C,EAAE,mBAAmBC,GAAoB,eAAAC,MAAkBC,EAAoB,GAC/EC,IAAkBC,EAAgB,EAAE,QAAAb,GAAQ,UAAAI,GAAU,UAAAD,GAAU,GAChE,EAAE,cAAAW,MAAiBC,KAEnBC,IAAeR,EAA6B,IAAI,GAEhDS,IAAqBC;AAAA,MACzB,CAACC,MAAyB;AACxB,QAAAT,EAAcS,CAAI;AAAA,MACpB;AAAA,MACA,CAACT,CAAa;AAAA,IAAA;AAGE,WAAAU,EAAA;AAAA,MAChB,kBAAAb;AAAA,MACA,cAAAS;AAAA,MACA,aAAAd;AAAA,IAAA,CACD,GACDmB,EAAiBhB,GAAcD,CAAQ,GAEvCkB,EAAU,MAAM;AACV,MAAApB,KAAec,EAAa,YAC9BA,EAAa,QAAQ,iBAErBP,EAAmBO,EAAa,OAAO;AAAA,IACzC,GACC,CAACd,GAAaO,CAAkB,CAAC,GAEpCa,EAAU,MAAM;AACV,MAAAzB,KAAemB,EAAa,WACjBA,EAAA,QAAQ,OAAOnB,CAAW;AAAA,IACzC,GACC,CAACA,CAAW,CAAC,GAEhByB,EAAU,MAAM;AACV,MAAA5B,KAAUsB,EAAa,WACzBA,EAAa,QAAQ;IACvB,GACC,CAACtB,GAAQD,CAAK,CAAC,GAElB6B,EAAU,MAAM;AACd,UAAI3B,KAAaM,KAAY,CAACe,EAAa,WAAWF,MAAiB,UAAU;AAC/E,cAAMS,IAAqBC,EAAgB/B,GAAOC,GAAQU,GAAUD,CAAQ,GACtEsB,IAAgBC,EAAkBtB,GAAUD,CAAQ,GACpDwB,IAAgB,IAAIC,EAAc;AAAA,UACtC,WAAA9B;AAAA,UACA,aAAAC;AAAA,UACA,oBAAAkB;AAAA,UACA,gBAAArB;AAAA,UACA,iBAAAgB;AAAA,UACA,QAAAlB;AAAA,UACA,QAAAM;AAAA,UACA,UAAAR;AAAA,UACA,UAAAW;AAAA,UACA,UAAAC;AAAA,UACA,oBAAAE;AAAA,QAAA,CACD;AAgBe,SAdQ,YAAY;AAClC,gBAAMqB,EAAc,OAAO;AAAA,YACzB,kBAAApB;AAAA,YACA,cAAcgB;AAAA,YACd,eAAAE;AAAA,YACA,aAAA5B;AAAA,UAAA,CACD,GACDmB,EAAa,UAAUW,GAEnBzB,KACFO,EAAmBkB,CAAa;AAAA,QAClC;MAIJ;AAAA,IAAA,GAEC,CAAC7B,GAAWC,GAAaU,GAAoBd,GAAWM,GAAUa,CAAY,CAAC,GAElFQ,EAAU,MACD,MAAM;AACX,MAAIN,EAAa,YACfA,EAAa,QAAQ,WACrBA,EAAa,UAAU;AAAA,IACzB,GAED,CAAE,CAAA,GAGH,gBAAAa;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,IAAI1B,MAAa,eAAe,oBAAoBZ;AAAA,QACpD,KAAKe;AAAA,QACL,QAAQd;AAAA,QACR,SAASC;AAAA,QACT,cAAcQ;AAAA,QACd,YAAYP;AAAA,QACZ,WAAWS;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjB;AACF,GAEA2B,IAAezC;"}

package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js

@@ -1,5 +1,5 @@
-import { useMessageBrokerChannel as $ } from "@cuemath/cue-message-broker";
-import { useMemo as C, useState as j, useRef as z, useCallback as f } from "react";
+import { useMemo as C, useState as $, useRef as j, useCallback as f } from "react";
+import { useMessageBrokerChannel as z } from "@cuemath/cue-message-broker";
 const M = (e) => ({
   userId: e.userId,
   data: e.data,
@@ -20,7 +20,7 @@ const M = (e) => ({
   const u = C(
     () => A(a),
     [a]
-  ), [t, r] = j(void 0), c = z({}), g = i === "canvas" || e.includes("practice") ? 0 : 24, S = C(
+  ), [t, r] = $(void 0), c = j({}), g = i === "canvas" || e.includes("practice") ? 0 : 24, S = C(
     () => ({
       channelId: e,
       ttl: g,
@@ -49,7 +49,7 @@ const M = (e) => ({
       }), r(h);
     },
     [u]
-  ), { publish: R, channelStatus: q, channel: d, channelMetadata: B, setChannelMetadata: w } = $({
+  ), { publish: R, channelStatus: q, channel: d, channelMetadata: B, setChannelMetadata: w } = z({
     channelOptions: S,
     consumerFn: D,
     metadataRequired: i === "whiteboard"

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

@@ -1 +1 @@
-{"version":3,"file":"use-canvas-sync-broker.js","sources":["../../../../src/features/cue-canvas/hooks/use-canvas-sync-broker.ts"],"sourcesContent":["import { useMessageBrokerChannel, type IChannelMessage } from '@cuemath/cue-message-broker';\nimport { useMemo, useCallback, useState, useRef } from 'react';\n\nimport type {\n  IActionData,\n  ICanvasUpdateConfig,\n  IPublishData,\n  TCueCanvasChangeDataObject,\n  TRenderAs,\n} from '../types/cue-canvas';\n\ninterface IMessage {\n  eventName: string;\n  eventPayload: {\n    responseId: string;\n    data: TCueCanvasChangeDataObject;\n    userId: string;\n    height: number;\n  };\n}\n\nconst extractStrokeData = (payload: IMessage['eventPayload']): IActionData => ({\n  userId: payload.userId,\n  data: payload.data,\n  height: payload.height,\n  responseId: payload.responseId,\n});\n\nconst getCanvasDataFromInitialData = (\n  initialCanvasData: Array<IChannelMessage> | undefined,\n): Record<string, IActionData[]> => {\n  const map: Record<string, IActionData[]> = {};\n\n  if (!initialCanvasData) return map;\n\n  for (const { message } of initialCanvasData) {\n    const payload = (message.payload as IMessage)?.eventPayload;\n    const qrId = payload?.responseId;\n\n    if (!payload?.responseId) continue;\n\n    const strokeData = extractStrokeData(payload);\n\n    if (qrId && map[qrId]) {\n      map[qrId]?.push(strokeData);\n    } else {\n      map[qrId] = [strokeData];\n    }\n  }\n\n  return map;\n};\n\nconst useCanvasSyncBroker = (\n  channelId: string,\n  logEvent: (type: string, payload?: Record<string, unknown>) => void,\n  initialCanvasData?: Array<IChannelMessage>,\n  type: TRenderAs = 'canvas',\n) => {\n  const initialCanvasDataMap = useMemo(\n    () => getCanvasDataFromInitialData(initialCanvasData),\n    [initialCanvasData],\n  );\n  const [initialStrokesData, setInitialStrokesData] = useState<\n    Record<string, IActionData[]> | undefined\n  >(undefined);\n  const callbacksMapRef = useRef<Record<string, (data: IActionData) => void>>({});\n  const ttl = type === 'canvas' ? 0 : channelId.includes('practice') ? 0 : 24;\n\n  const channelOptions = useMemo(\n    () => ({\n      channelId,\n      ttl: ttl,\n      logger: logEvent,\n    }),\n    [channelId, logEvent, ttl],\n  );\n\n  const registerCallback = useCallback((qrId: string, cb: (data: IActionData) => void) => {\n    callbacksMapRef.current = { ...callbacksMapRef.current, [qrId]: cb };\n  }, []);\n\n  const onMessageReceive = useCallback(\n    (messages: Array<IChannelMessage>, initialData?: boolean) => {\n      const strokesPerWidgetMap: Record<string, Array<IActionData>> = initialCanvasDataMap;\n\n      messages.forEach(message => {\n        const { payload } = message.message;\n        const { eventPayload } = payload as IMessage;\n        const qrId = eventPayload?.responseId as string;\n        const strokes = eventPayload?.data;\n        const userId = eventPayload?.userId;\n        const canvasHeight = eventPayload?.height;\n        const widgetOnReceiveCallback = callbacksMapRef.current[qrId];\n\n        if (!initialData && widgetOnReceiveCallback) {\n          widgetOnReceiveCallback({\n            data: strokes,\n            height: canvasHeight,\n            userId,\n            responseId: qrId,\n          });\n        } else {\n          const strokeData = extractStrokeData(eventPayload);\n\n          if (qrId && strokesPerWidgetMap[qrId]) {\n            strokesPerWidgetMap[qrId]?.push(strokeData);\n          } else {\n            strokesPerWidgetMap[qrId] = [strokeData];\n          }\n        }\n      });\n      setInitialStrokesData(strokesPerWidgetMap);\n    },\n    [initialCanvasDataMap],\n  );\n\n  const { publish, channelStatus, channel, channelMetadata, setChannelMetadata } =\n    useMessageBrokerChannel<IPublishData, ICanvasUpdateConfig>({\n      channelOptions,\n      consumerFn: onMessageReceive,\n      metadataRequired: type === 'whiteboard',\n    });\n\n  const closeChannel = useCallback(() => {\n    if (channel) {\n      channel.destroyChannel();\n    }\n  }, [channel]);\n\n  return {\n    publishStrokes: publish,\n    channelStatus,\n    closeChannel,\n    initialStrokesData,\n    registerCallback,\n    setChannelMetadata,\n    channelMetadata,\n  };\n};\n\nexport default useCanvasSyncBroker;\n"],"names":["extractStrokeData","payload","getCanvasDataFromInitialData","initialCanvasData","map","message","_a","qrId","strokeData","_b","useCanvasSyncBroker","channelId","logEvent","type","initialCanvasDataMap","useMemo","initialStrokesData","setInitialStrokesData","useState","callbacksMapRef","useRef","ttl","channelOptions","registerCallback","useCallback","cb","onMessageReceive","messages","initialData","strokesPerWidgetMap","eventPayload","strokes","userId","canvasHeight","widgetOnReceiveCallback","publish","channelStatus","channel","channelMetadata","setChannelMetadata","useMessageBrokerChannel","closeChannel","useCanvasSyncBroker$1"],"mappings":"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"}
+{"version":3,"file":"use-canvas-sync-broker.js","sources":["../../../../src/features/cue-canvas/hooks/use-canvas-sync-broker.ts"],"sourcesContent":["import { useMemo, useCallback, useState, useRef } from 'react';\n\nimport { useMessageBrokerChannel, type IChannelMessage } from '@cuemath/cue-message-broker';\n\nimport type {\n  IActionData,\n  ICanvasUpdateConfig,\n  IPublishData,\n  TCueCanvasChangeDataObject,\n  TRenderAs,\n} from '../types/cue-canvas';\n\ninterface IMessage {\n  eventName: string;\n  eventPayload: {\n    responseId: string;\n    data: TCueCanvasChangeDataObject;\n    userId: string;\n    height: number;\n  };\n}\n\nconst extractStrokeData = (payload: IMessage['eventPayload']): IActionData => ({\n  userId: payload.userId,\n  data: payload.data,\n  height: payload.height,\n  responseId: payload.responseId,\n});\n\nconst getCanvasDataFromInitialData = (\n  initialCanvasData: Array<IChannelMessage> | undefined,\n): Record<string, IActionData[]> => {\n  const map: Record<string, IActionData[]> = {};\n\n  if (!initialCanvasData) return map;\n\n  for (const { message } of initialCanvasData) {\n    const payload = (message.payload as IMessage)?.eventPayload;\n    const qrId = payload?.responseId;\n\n    if (!payload?.responseId) continue;\n\n    const strokeData = extractStrokeData(payload);\n\n    if (qrId && map[qrId]) {\n      map[qrId]?.push(strokeData);\n    } else {\n      map[qrId] = [strokeData];\n    }\n  }\n\n  return map;\n};\n\nconst useCanvasSyncBroker = (\n  channelId: string,\n  logEvent: (type: string, payload?: Record<string, unknown>) => void,\n  initialCanvasData?: Array<IChannelMessage>,\n  type: TRenderAs = 'canvas',\n) => {\n  const initialCanvasDataMap = useMemo(\n    () => getCanvasDataFromInitialData(initialCanvasData),\n    [initialCanvasData],\n  );\n  const [initialStrokesData, setInitialStrokesData] = useState<\n    Record<string, IActionData[]> | undefined\n  >(undefined);\n  const callbacksMapRef = useRef<Record<string, (data: IActionData) => void>>({});\n  const ttl = type === 'canvas' ? 0 : channelId.includes('practice') ? 0 : 24;\n\n  const channelOptions = useMemo(\n    () => ({\n      channelId,\n      ttl: ttl,\n      logger: logEvent,\n    }),\n    [channelId, logEvent, ttl],\n  );\n\n  const registerCallback = useCallback((qrId: string, cb: (data: IActionData) => void) => {\n    callbacksMapRef.current = { ...callbacksMapRef.current, [qrId]: cb };\n  }, []);\n\n  const onMessageReceive = useCallback(\n    (messages: Array<IChannelMessage>, initialData?: boolean) => {\n      const strokesPerWidgetMap: Record<string, Array<IActionData>> = initialCanvasDataMap;\n\n      messages.forEach(message => {\n        const { payload } = message.message;\n        const { eventPayload } = payload as IMessage;\n        const qrId = eventPayload?.responseId as string;\n        const strokes = eventPayload?.data;\n        const userId = eventPayload?.userId;\n        const canvasHeight = eventPayload?.height;\n        const widgetOnReceiveCallback = callbacksMapRef.current[qrId];\n\n        if (!initialData && widgetOnReceiveCallback) {\n          widgetOnReceiveCallback({\n            data: strokes,\n            height: canvasHeight,\n            userId,\n            responseId: qrId,\n          });\n        } else {\n          const strokeData = extractStrokeData(eventPayload);\n\n          if (qrId && strokesPerWidgetMap[qrId]) {\n            strokesPerWidgetMap[qrId]?.push(strokeData);\n          } else {\n            strokesPerWidgetMap[qrId] = [strokeData];\n          }\n        }\n      });\n      setInitialStrokesData(strokesPerWidgetMap);\n    },\n    [initialCanvasDataMap],\n  );\n\n  const { publish, channelStatus, channel, channelMetadata, setChannelMetadata } =\n    useMessageBrokerChannel<IPublishData, ICanvasUpdateConfig>({\n      channelOptions,\n      consumerFn: onMessageReceive,\n      metadataRequired: type === 'whiteboard',\n    });\n\n  const closeChannel = useCallback(() => {\n    if (channel) {\n      channel.destroyChannel();\n    }\n  }, [channel]);\n\n  return {\n    publishStrokes: publish,\n    channelStatus,\n    closeChannel,\n    initialStrokesData,\n    registerCallback,\n    setChannelMetadata,\n    channelMetadata,\n  };\n};\n\nexport default useCanvasSyncBroker;\n"],"names":["extractStrokeData","payload","getCanvasDataFromInitialData","initialCanvasData","map","message","_a","qrId","strokeData","_b","useCanvasSyncBroker","channelId","logEvent","type","initialCanvasDataMap","useMemo","initialStrokesData","setInitialStrokesData","useState","callbacksMapRef","useRef","ttl","channelOptions","registerCallback","useCallback","cb","onMessageReceive","messages","initialData","strokesPerWidgetMap","eventPayload","strokes","userId","canvasHeight","widgetOnReceiveCallback","publish","channelStatus","channel","channelMetadata","setChannelMetadata","useMessageBrokerChannel","closeChannel","useCanvasSyncBroker$1"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"homework-menu.js","sources":["../../../../../src/features/cue-canvas/sidebar/homework/homework-menu.tsx"],"sourcesContent":["import { 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';\nimport type { IHomeWorkMenuProps } from './homework-types';\n\nconst HomeWorkMenu: React.FC<IHomeWorkMenuProps> = ({ onSelect, hwRequests }) => {\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={item.student_name} />\n            </FlexView>\n          ))}\n        </FlexView>\n      </FlexView>\n    </Styled.MenuContainer>\n  );\n};\n\nexport default memo(HomeWorkMenu);\n"],"names":["HomeWorkMenu","onSelect","hwRequests","jsx","Styled.MenuContainer","FlexView","jsxs","Text","Clickable","CrossIcon","item","HWRequest","HomeWorkMenu$1","memo"],"mappings":";;;;;;;;AAUA,MAAMA,IAA6C,CAAC,EAAE,UAAAC,GAAU,YAAAC,QAE3D,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,SAASP,GAAU,OAAM,yBAClC,UAAC,gBAAAE,EAAAM,GAAA,EAAU,OAAM,QAAA,CAAQ,EAC3B,CAAA;AAAA,MAAA,GACF;AAAA,MAECP,EAAW,IAAI,CACdQ,MAAA,gBAAAP,EAACE,KAAS,UAAU,MAAM,OAAO,KAC/B,UAAA,gBAAAF,EAACQ,KAAU,WAAWD,GAAM,UAAAT,GAAoB,aAAaS,EAAK,cAAc,EADvC,GAAAA,EAAK,aAEhD,CACD;AAAA,IAAA;AAAA,EAAA;AAAA,EAEL,CAAA,EACF,CAAA,GAIWE,IAAAC,EAAKb,CAAY;"}
+{"version":3,"file":"homework-menu.js","sources":["../../../../../src/features/cue-canvas/sidebar/homework/homework-menu.tsx"],"sourcesContent":["import { memo, type FC } 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';\nimport type { IHomeWorkMenuProps } from './homework-types';\n\nconst HomeWorkMenu: FC<IHomeWorkMenuProps> = ({ onSelect, hwRequests }) => {\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={item.student_name} />\n            </FlexView>\n          ))}\n        </FlexView>\n      </FlexView>\n    </Styled.MenuContainer>\n  );\n};\n\nexport default memo(HomeWorkMenu);\n"],"names":["HomeWorkMenu","onSelect","hwRequests","jsx","Styled.MenuContainer","FlexView","jsxs","Text","Clickable","CrossIcon","item","HWRequest","HomeWorkMenu$1","memo"],"mappings":";;;;;;;;AAUA,MAAMA,IAAuC,CAAC,EAAE,UAAAC,GAAU,YAAAC,QAErD,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,SAASP,GAAU,OAAM,yBAClC,UAAC,gBAAAE,EAAAM,GAAA,EAAU,OAAM,QAAA,CAAQ,EAC3B,CAAA;AAAA,MAAA,GACF;AAAA,MAECP,EAAW,IAAI,CACdQ,MAAA,gBAAAP,EAACE,KAAS,UAAU,MAAM,OAAO,KAC/B,UAAA,gBAAAF,EAACQ,KAAU,WAAWD,GAAM,UAAAT,GAAoB,aAAaS,EAAK,cAAc,EADvC,GAAAA,EAAK,aAEhD,CACD;AAAA,IAAA;AAAA,EAAA;AAAA,EAEL,CAAA,EACF,CAAA,GAIWE,IAAAC,EAAKb,CAAY;"}

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

@@ -1 +1 @@
-{"version":3,"file":"homework-request.js","sources":["../../../../../src/features/cue-canvas/sidebar/homework/homework-request.tsx"],"sourcesContent":["import { 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 type { IReplaceCanvas } from '../../types/cue-canvas';\nimport { getDateInInputFormat, getMonthNameforNumber } from './helper';\nimport * as Styled from './homework-styled';\nimport type { IHomeWorkRequestProps } from './homework-types';\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: 500,\n              y: 75,\n              rot: 0,\n            },\n          ],\n        },\n      };\n\n      hwRequestImages.forEach(image => {\n        const imgId = uuidv4();\n\n        actionData.data[imgId] = [\n          undefined,\n          {\n            name: 'image',\n            href: image + '?dummyProp=true',\n            x: 48,\n            y: 72,\n            rot: 0,\n            width: 400,\n          },\n        ];\n      });\n\n      activeInstance?.replaceCanvas(actionData);\n    }\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\n          src={hwRequestImages[0] + '?dummyProp=true'}\n          alt=\"Homework Request\"\n          crossOrigin=\"anonymous\"\n        />\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","date","month","getDateInInputFormat","dateString","ordinal","titleCase","_a","getMonthNameforNumber","jsx","Clickable","jsxs","FlexView","Styled.HWImageContainer","Text","HWRequest","memo"],"mappings":";;;;;;;;;;AAaA,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;AAEH,QAAAC,EAAA,KAAKE,CAAK,IAAI;AAAA,UACvB;AAAA,UACA;AAAA,YACE,MAAM;AAAA,YACN,MAAMD,IAAQ;AAAA,YACd,GAAG;AAAA,YACH,GAAG;AAAA,YACH,KAAK;AAAA,YACL,OAAO;AAAA,UACT;AAAA,QAAA;AAAA,MACF,CACD,GAEDP,KAAA,QAAAA,EAAgB,cAAcM;AAAA,IAChC;AACS,IAAAb,KACTM,EAAcD,CAAW;AAAA,EAAA,GACxB,CAACE,GAAgBL,GAAeG,GAAaF,GAAiBH,GAAUM,CAAa,CAAC,GAEnF,EAAE,MAAAU,GAAM,OAAAC,EAAM,IAAIC,EAAqBd,CAAW,GAElDe,IAAa,GAAGC,UAAQJ,CAAI,CAAC,IAAIK,aAAUC,IAAAC,EAAsBN,CAAK,MAA3B,gBAAAK,EAA8B,aAAa,CAAC;AAE7F,SACG,gBAAAE,EAAAC,GAAA,EAAU,OAAM,mBAAkB,SAAShB,GAC1C,UAAA,gBAAAiB,EAACC,GAAS,EAAA,aAAY,UAAS,iBAAgB,UAAS,eAAe,GAAG,aAAY,SACpF,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,KAAKzB,EAAgB,CAAC,IAAI;AAAA,QAC1B,KAAI;AAAA,QACJ,aAAY;AAAA,MAAA;AAAA,IACd;AAAA,sBACC0B,GAAK,EAAA,WAAU,SAAQ,OAAM,SAC3B,UACH5B,GAAA;AAAA,sBACC4B,GAAK,EAAA,WAAU,SAAQ,OAAM,SAC3B,UACHV,GAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,GAEeW,IAAAC,EAAKlC,CAAe;"}
+{"version":3,"file":"homework-request.js","sources":["../../../../../src/features/cue-canvas/sidebar/homework/homework-request.tsx"],"sourcesContent":["import { ordinal, titleCase } from 'humanize-plus';\nimport { memo, useCallback, type FC } 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 type { IReplaceCanvas } from '../../types/cue-canvas';\nimport { getDateInInputFormat, getMonthNameforNumber } from './helper';\nimport * as Styled from './homework-styled';\nimport type { IHomeWorkRequestProps } from './homework-types';\n\nconst HomeWorkRequest: 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: 500,\n              y: 75,\n              rot: 0,\n            },\n          ],\n        },\n      };\n\n      hwRequestImages.forEach(image => {\n        const imgId = uuidv4();\n\n        actionData.data[imgId] = [\n          undefined,\n          {\n            name: 'image',\n            href: image + '?dummyProp=true',\n            x: 48,\n            y: 72,\n            rot: 0,\n            width: 400,\n          },\n        ];\n      });\n\n      activeInstance?.replaceCanvas(actionData);\n    }\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\n          src={hwRequestImages[0] + '?dummyProp=true'}\n          alt=\"Homework Request\"\n          crossOrigin=\"anonymous\"\n        />\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","date","month","getDateInInputFormat","dateString","ordinal","titleCase","_a","getMonthNameforNumber","jsx","Clickable","jsxs","FlexView","Styled.HWImageContainer","Text","HWRequest","memo"],"mappings":";;;;;;;;;;AAaA,MAAMA,IAA6C,CAASC,MAAA;;AAC1D,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;AAEH,QAAAC,EAAA,KAAKE,CAAK,IAAI;AAAA,UACvB;AAAA,UACA;AAAA,YACE,MAAM;AAAA,YACN,MAAMD,IAAQ;AAAA,YACd,GAAG;AAAA,YACH,GAAG;AAAA,YACH,KAAK;AAAA,YACL,OAAO;AAAA,UACT;AAAA,QAAA;AAAA,MACF,CACD,GAEDP,KAAA,QAAAA,EAAgB,cAAcM;AAAA,IAChC;AACS,IAAAb,KACTM,EAAcD,CAAW;AAAA,EAAA,GACxB,CAACE,GAAgBL,GAAeG,GAAaF,GAAiBH,GAAUM,CAAa,CAAC,GAEnF,EAAE,MAAAU,GAAM,OAAAC,EAAM,IAAIC,EAAqBd,CAAW,GAElDe,IAAa,GAAGC,UAAQJ,CAAI,CAAC,IAAIK,aAAUC,IAAAC,EAAsBN,CAAK,MAA3B,gBAAAK,EAA8B,aAAa,CAAC;AAE7F,SACG,gBAAAE,EAAAC,GAAA,EAAU,OAAM,mBAAkB,SAAShB,GAC1C,UAAA,gBAAAiB,EAACC,GAAS,EAAA,aAAY,UAAS,iBAAgB,UAAS,eAAe,GAAG,aAAY,SACpF,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,KAAKzB,EAAgB,CAAC,IAAI;AAAA,QAC1B,KAAI;AAAA,QACJ,aAAY;AAAA,MAAA;AAAA,IACd;AAAA,sBACC0B,GAAK,EAAA,WAAU,SAAQ,OAAM,SAC3B,UACH5B,GAAA;AAAA,sBACC4B,GAAK,EAAA,WAAU,SAAQ,OAAM,SAC3B,UACHV,GAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,GAEeW,IAAAC,EAAKlC,CAAe;"}

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

@@ -1 +1 @@
-{"version":3,"file":"filter-selection-menu.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/filter-selection-menu.tsx"],"sourcesContent":["import { memo, useCallback, useState } from 'react';\n\nimport BackIcon from '../../../../assets/line-icons/icons/back';\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport CheckboxInputList from '../../../ui/inputs/checkbox-input-list/checkbox-input-list';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport type { IFilterOption } from './api/get-puzzles';\nimport * as Styled from './puzzles-styled';\nimport type { FilterSelectionMenuProps } from './puzzles-type';\n\nconst FilterSelectionMenu: React.FC<FilterSelectionMenuProps> = ({\n  closeAllPopups,\n  menuItems,\n  onFiltersChange,\n  type,\n}) => {\n  const [selectedOptions, setSelectedOptions] = useState<string[]>(\n    menuItems.filter((ele: IFilterOption) => ele.applied).map((ele: IFilterOption) => ele.name),\n  );\n\n  const handleFilterChange = useCallback((selectedCodes: string[]) => {\n    setSelectedOptions(selectedCodes);\n  }, []);\n\n  const handleApplyFilters = useCallback(() => {\n    onFiltersChange({\n      [type]: selectedOptions,\n    });\n\n    closeAllPopups();\n  }, [onFiltersChange, closeAllPopups, selectedOptions, type]);\n\n  return (\n    <Styled.MenuContainer>\n      <FlexView $justifyContent=\"space-between\" $flexDirection=\"row\" $gutterX={1} $gapX={0.5}>\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={1}>\n          <Clickable onClick={closeAllPopups} label=\"back\">\n            <BackIcon color=\"WHITE\" />\n          </Clickable>\n          <Text $color=\"WHITE\" $renderAs=\"eyebrow2\">\n            Select {type === 'grades' ? type : type.split('_')[1]}\n            {selectedOptions.length > 0 && <span>{` (${selectedOptions.length})`}</span>}\n          </Text>\n        </FlexView>\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={1}>\n          <TextButton color=\"WHITE\" label=\"Apply\" onClick={handleApplyFilters} />\n          <Clickable onClick={closeAllPopups} label=\"close filter menu\">\n            <CrossIcon color=\"WHITE\" />\n          </Clickable>\n        </FlexView>\n      </FlexView>\n      <Styled.CheckboxWrapper $gutterX={1} $gapX={1}>\n        <CheckboxInputList\n          size=\"medium\"\n          renderAs=\"black-dark\"\n          numColumns={3}\n          options={menuItems.map(ele => ({\n            id: ele.name,\n            label: (\n              <Text $renderAs=\"ub3-bold\" $color=\"WHITE\" $inline>\n                {ele.name}\n              </Text>\n            ),\n          }))}\n          value={selectedOptions}\n          onChange={handleFilterChange}\n        />\n      </Styled.CheckboxWrapper>\n    </Styled.MenuContainer>\n  );\n};\n\nexport default memo(FilterSelectionMenu);\n"],"names":["FilterSelectionMenu","closeAllPopups","menuItems","onFiltersChange","type","selectedOptions","setSelectedOptions","useState","ele","handleFilterChange","useCallback","selectedCodes","handleApplyFilters","jsxs","Styled.MenuContainer","FlexView","jsx","Clickable","BackIcon","Text","TextButton","CrossIcon","Styled.CheckboxWrapper","CheckboxInputList","FilterSelectionMenu$1","memo"],"mappings":";;;;;;;;;;AAaA,MAAMA,IAA0D,CAAC;AAAA,EAC/D,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,MAAAC;AACF,MAAM;AACE,QAAA,CAACC,GAAiBC,CAAkB,IAAIC;AAAA,IAC5CL,EAAU,OAAO,CAACM,MAAuBA,EAAI,OAAO,EAAE,IAAI,CAACA,MAAuBA,EAAI,IAAI;AAAA,EAAA,GAGtFC,IAAqBC,EAAY,CAACC,MAA4B;AAClE,IAAAL,EAAmBK,CAAa;AAAA,EAClC,GAAG,CAAE,CAAA,GAECC,IAAqBF,EAAY,MAAM;AAC3B,IAAAP,EAAA;AAAA,MACd,CAACC,CAAI,GAAGC;AAAA,IAAA,CACT,GAEcJ;KACd,CAACE,GAAiBF,GAAgBI,GAAiBD,CAAI,CAAC;AAGzD,SAAA,gBAAAS,EAACC,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAD,EAAAE,GAAA,EAAS,iBAAgB,iBAAgB,gBAAe,OAAM,UAAU,GAAG,OAAO,KACjF,UAAA;AAAA,MAAA,gBAAAF,EAACE,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAiB,GACnE,UAAA;AAAA,QAAC,gBAAAC,EAAAC,GAAA,EAAU,SAAShB,GAAgB,OAAM,QACxC,UAAC,gBAAAe,EAAAE,GAAA,EAAS,OAAM,QAAA,CAAQ,EAC1B,CAAA;AAAA,QACC,gBAAAL,EAAAM,GAAA,EAAK,QAAO,SAAQ,WAAU,YAAW,UAAA;AAAA,UAAA;AAAA,UAChCf,MAAS,WAAWA,IAAOA,EAAK,MAAM,GAAG,EAAE,CAAC;AAAA,UACnDC,EAAgB,SAAS,KAAK,gBAAAW,EAAC,UAAM,UAAK,KAAAX,EAAgB,MAAM,IAAI,CAAA;AAAA,QAAA,GACvE;AAAA,MAAA,GACF;AAAA,wBACCU,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,iBAAiB,GACnE,UAAA;AAAA,QAAA,gBAAAC,EAACI,KAAW,OAAM,SAAQ,OAAM,SAAQ,SAASR,GAAoB;AAAA,QACrE,gBAAAI,EAACC,GAAU,EAAA,SAAShB,GAAgB,OAAM,qBACxC,UAAC,gBAAAe,EAAAK,GAAA,EAAU,OAAM,QAAA,CAAQ,EAC3B,CAAA;AAAA,MAAA,GACF;AAAA,IAAA,GACF;AAAA,sBACCC,GAAA,EAAuB,UAAU,GAAG,OAAO,GAC1C,UAAA,gBAAAN;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAS;AAAA,QACT,YAAY;AAAA,QACZ,SAASrB,EAAU,IAAI,CAAQM,OAAA;AAAA,UAC7B,IAAIA,EAAI;AAAA,UACR,OACG,gBAAAQ,EAAAG,GAAA,EAAK,WAAU,YAAW,QAAO,SAAQ,SAAO,IAC9C,UAAAX,EAAI,KACP,CAAA;AAAA,QAAA,EAEF;AAAA,QACF,OAAOH;AAAA,QACP,UAAUI;AAAA,MAAA;AAAA,IAAA,GAEd;AAAA,EACF,EAAA,CAAA;AAEJ,GAEee,IAAAC,EAAKzB,CAAmB;"}
+{"version":3,"file":"filter-selection-menu.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/filter-selection-menu.tsx"],"sourcesContent":["import { memo, useCallback, useState, type FC } from 'react';\n\nimport BackIcon from '../../../../assets/line-icons/icons/back';\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport CheckboxInputList from '../../../ui/inputs/checkbox-input-list/checkbox-input-list';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport type { IFilterOption } from './api/get-puzzles';\nimport * as Styled from './puzzles-styled';\nimport type { FilterSelectionMenuProps } from './puzzles-type';\n\nconst FilterSelectionMenu: FC<FilterSelectionMenuProps> = ({\n  closeAllPopups,\n  menuItems,\n  onFiltersChange,\n  type,\n}) => {\n  const [selectedOptions, setSelectedOptions] = useState<string[]>(\n    menuItems.filter((ele: IFilterOption) => ele.applied).map((ele: IFilterOption) => ele.name),\n  );\n\n  const handleFilterChange = useCallback((selectedCodes: string[]) => {\n    setSelectedOptions(selectedCodes);\n  }, []);\n\n  const handleApplyFilters = useCallback(() => {\n    onFiltersChange({\n      [type]: selectedOptions,\n    });\n\n    closeAllPopups();\n  }, [onFiltersChange, closeAllPopups, selectedOptions, type]);\n\n  return (\n    <Styled.MenuContainer>\n      <FlexView $justifyContent=\"space-between\" $flexDirection=\"row\" $gutterX={1} $gapX={0.5}>\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={1}>\n          <Clickable onClick={closeAllPopups} label=\"back\">\n            <BackIcon color=\"WHITE\" />\n          </Clickable>\n          <Text $color=\"WHITE\" $renderAs=\"eyebrow2\">\n            Select {type === 'grades' ? type : type.split('_')[1]}\n            {selectedOptions.length > 0 && <span>{` (${selectedOptions.length})`}</span>}\n          </Text>\n        </FlexView>\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={1}>\n          <TextButton color=\"WHITE\" label=\"Apply\" onClick={handleApplyFilters} />\n          <Clickable onClick={closeAllPopups} label=\"close filter menu\">\n            <CrossIcon color=\"WHITE\" />\n          </Clickable>\n        </FlexView>\n      </FlexView>\n      <Styled.CheckboxWrapper $gutterX={1} $gapX={1}>\n        <CheckboxInputList\n          size=\"medium\"\n          renderAs=\"black-dark\"\n          numColumns={3}\n          options={menuItems.map(ele => ({\n            id: ele.name,\n            label: (\n              <Text $renderAs=\"ub3-bold\" $color=\"WHITE\" $inline>\n                {ele.name}\n              </Text>\n            ),\n          }))}\n          value={selectedOptions}\n          onChange={handleFilterChange}\n        />\n      </Styled.CheckboxWrapper>\n    </Styled.MenuContainer>\n  );\n};\n\nexport default memo(FilterSelectionMenu);\n"],"names":["FilterSelectionMenu","closeAllPopups","menuItems","onFiltersChange","type","selectedOptions","setSelectedOptions","useState","ele","handleFilterChange","useCallback","selectedCodes","handleApplyFilters","jsxs","Styled.MenuContainer","FlexView","jsx","Clickable","BackIcon","Text","TextButton","CrossIcon","Styled.CheckboxWrapper","CheckboxInputList","FilterSelectionMenu$1","memo"],"mappings":";;;;;;;;;;AAaA,MAAMA,IAAoD,CAAC;AAAA,EACzD,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,MAAAC;AACF,MAAM;AACE,QAAA,CAACC,GAAiBC,CAAkB,IAAIC;AAAA,IAC5CL,EAAU,OAAO,CAACM,MAAuBA,EAAI,OAAO,EAAE,IAAI,CAACA,MAAuBA,EAAI,IAAI;AAAA,EAAA,GAGtFC,IAAqBC,EAAY,CAACC,MAA4B;AAClE,IAAAL,EAAmBK,CAAa;AAAA,EAClC,GAAG,CAAE,CAAA,GAECC,IAAqBF,EAAY,MAAM;AAC3B,IAAAP,EAAA;AAAA,MACd,CAACC,CAAI,GAAGC;AAAA,IAAA,CACT,GAEcJ;KACd,CAACE,GAAiBF,GAAgBI,GAAiBD,CAAI,CAAC;AAGzD,SAAA,gBAAAS,EAACC,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAD,EAAAE,GAAA,EAAS,iBAAgB,iBAAgB,gBAAe,OAAM,UAAU,GAAG,OAAO,KACjF,UAAA;AAAA,MAAA,gBAAAF,EAACE,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAiB,GACnE,UAAA;AAAA,QAAC,gBAAAC,EAAAC,GAAA,EAAU,SAAShB,GAAgB,OAAM,QACxC,UAAC,gBAAAe,EAAAE,GAAA,EAAS,OAAM,QAAA,CAAQ,EAC1B,CAAA;AAAA,QACC,gBAAAL,EAAAM,GAAA,EAAK,QAAO,SAAQ,WAAU,YAAW,UAAA;AAAA,UAAA;AAAA,UAChCf,MAAS,WAAWA,IAAOA,EAAK,MAAM,GAAG,EAAE,CAAC;AAAA,UACnDC,EAAgB,SAAS,KAAK,gBAAAW,EAAC,UAAM,UAAK,KAAAX,EAAgB,MAAM,IAAI,CAAA;AAAA,QAAA,GACvE;AAAA,MAAA,GACF;AAAA,wBACCU,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,iBAAiB,GACnE,UAAA;AAAA,QAAA,gBAAAC,EAACI,KAAW,OAAM,SAAQ,OAAM,SAAQ,SAASR,GAAoB;AAAA,QACrE,gBAAAI,EAACC,GAAU,EAAA,SAAShB,GAAgB,OAAM,qBACxC,UAAC,gBAAAe,EAAAK,GAAA,EAAU,OAAM,QAAA,CAAQ,EAC3B,CAAA;AAAA,MAAA,GACF;AAAA,IAAA,GACF;AAAA,sBACCC,GAAA,EAAuB,UAAU,GAAG,OAAO,GAC1C,UAAA,gBAAAN;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAS;AAAA,QACT,YAAY;AAAA,QACZ,SAASrB,EAAU,IAAI,CAAQM,OAAA;AAAA,UAC7B,IAAIA,EAAI;AAAA,UACR,OACG,gBAAAQ,EAAAG,GAAA,EAAK,WAAU,YAAW,QAAO,SAAQ,SAAO,IAC9C,UAAAX,EAAI,KACP,CAAA;AAAA,QAAA,EAEF;AAAA,QACF,OAAOH;AAAA,QACP,UAAUI;AAAA,MAAA;AAAA,IAAA,GAEd;AAAA,EACF,EAAA,CAAA;AAEJ,GAEee,IAAAC,EAAKzB,CAAmB;"}

package/dist/features/cue-canvas/sidebar/puzzles/filters-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"filters-section.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/filters-section.tsx"],"sourcesContent":["import React, { memo } from 'react';\n\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport CheckboxInputList from '../../../ui/inputs/checkbox-input-list/checkbox-input-list';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport type { IFilterSectionProps } from './puzzles-type';\n\nconst FilterSection: React.FC<IFilterSectionProps> = ({\n  title,\n  items,\n  selectedItems,\n  onChange,\n  openSelector,\n}) => {\n  return (\n    <>\n      <Text $renderAs=\"eyebrow2\" $color=\"WHITE\">\n        {title}\n      </Text>\n      <FlexView $gutterX={0.5} $gapX={0.5} $flexRowGapX={0.25}>\n        {items.length > 0 && (\n          <CheckboxInputList\n            size=\"medium\"\n            renderAs=\"black-dark\"\n            numColumns={1}\n            options={items.slice(0, 3).map(ele => ({\n              id: ele,\n              label: (\n                <Text $renderAs=\"ub3-bold\" $color=\"WHITE\" $inline>\n                  {ele}\n                </Text>\n              ),\n            }))}\n            value={selectedItems}\n            onChange={onChange}\n          />\n        )}\n        {items.length > 3 && (\n          <TextButton\n            size=\"small\"\n            color=\"GREY_2\"\n            onClick={openSelector}\n            label={`${items.length - 3}+ more`}\n          />\n        )}\n      </FlexView>\n    </>\n  );\n};\n\nexport default memo(FilterSection);\n"],"names":["FilterSection","title","items","selectedItems","onChange","openSelector","jsxs","Fragment","jsx","Text","FlexView","CheckboxInputList","ele","TextButton","FilterSection$1","memo"],"mappings":";;;;;;AAQA,MAAMA,IAA+C,CAAC;AAAA,EACpD,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AACF,MAGM,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAK,EAAA,WAAU,YAAW,QAAO,SAC/B,UACHR,GAAA;AAAA,oBACCS,GAAS,EAAA,UAAU,KAAK,OAAO,KAAK,cAAc,MAChD,UAAA;AAAA,IAAAR,EAAM,SAAS,KACd,gBAAAM;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAS;AAAA,QACT,YAAY;AAAA,QACZ,SAAST,EAAM,MAAM,GAAG,CAAC,EAAE,IAAI,CAAQU,OAAA;AAAA,UACrC,IAAIA;AAAA,UACJ,yBACGH,GAAK,EAAA,WAAU,YAAW,QAAO,SAAQ,SAAO,IAC9C,UACHG,EAAA,CAAA;AAAA,QAAA,EAEF;AAAA,QACF,OAAOT;AAAA,QACP,UAAAC;AAAA,MAAA;AAAA,IACF;AAAA,IAEDF,EAAM,SAAS,KACd,gBAAAM;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,SAASR;AAAA,QACT,OAAO,GAAGH,EAAM,SAAS,CAAC;AAAA,MAAA;AAAA,IAC5B;AAAA,EAAA,GAEJ;AACF,EAAA,CAAA,GAIWY,IAAAC,EAAKf,CAAa;"}
+{"version":3,"file":"filters-section.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/filters-section.tsx"],"sourcesContent":["import { memo, type FC } from 'react';\n\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport CheckboxInputList from '../../../ui/inputs/checkbox-input-list/checkbox-input-list';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport type { IFilterSectionProps } from './puzzles-type';\n\nconst FilterSection: FC<IFilterSectionProps> = ({\n  title,\n  items,\n  selectedItems,\n  onChange,\n  openSelector,\n}) => {\n  return (\n    <>\n      <Text $renderAs=\"eyebrow2\" $color=\"WHITE\">\n        {title}\n      </Text>\n      <FlexView $gutterX={0.5} $gapX={0.5} $flexRowGapX={0.25}>\n        {items.length > 0 && (\n          <CheckboxInputList\n            size=\"medium\"\n            renderAs=\"black-dark\"\n            numColumns={1}\n            options={items.slice(0, 3).map(ele => ({\n              id: ele,\n              label: (\n                <Text $renderAs=\"ub3-bold\" $color=\"WHITE\" $inline>\n                  {ele}\n                </Text>\n              ),\n            }))}\n            value={selectedItems}\n            onChange={onChange}\n          />\n        )}\n        {items.length > 3 && (\n          <TextButton\n            size=\"small\"\n            color=\"GREY_2\"\n            onClick={openSelector}\n            label={`${items.length - 3}+ more`}\n          />\n        )}\n      </FlexView>\n    </>\n  );\n};\n\nexport default memo(FilterSection);\n"],"names":["FilterSection","title","items","selectedItems","onChange","openSelector","jsxs","Fragment","jsx","Text","FlexView","CheckboxInputList","ele","TextButton","FilterSection$1","memo"],"mappings":";;;;;;AAQA,MAAMA,IAAyC,CAAC;AAAA,EAC9C,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AACF,MAGM,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAK,EAAA,WAAU,YAAW,QAAO,SAC/B,UACHR,GAAA;AAAA,oBACCS,GAAS,EAAA,UAAU,KAAK,OAAO,KAAK,cAAc,MAChD,UAAA;AAAA,IAAAR,EAAM,SAAS,KACd,gBAAAM;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAS;AAAA,QACT,YAAY;AAAA,QACZ,SAAST,EAAM,MAAM,GAAG,CAAC,EAAE,IAAI,CAAQU,OAAA;AAAA,UACrC,IAAIA;AAAA,UACJ,yBACGH,GAAK,EAAA,WAAU,YAAW,QAAO,SAAQ,SAAO,IAC9C,UACHG,EAAA,CAAA;AAAA,QAAA,EAEF;AAAA,QACF,OAAOT;AAAA,QACP,UAAAC;AAAA,MAAA;AAAA,IACF;AAAA,IAEDF,EAAM,SAAS,KACd,gBAAAM;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,SAASR;AAAA,QACT,OAAO,GAAGH,EAAM,SAAS,CAAC;AAAA,MAAA;AAAA,IAC5B;AAAA,EAAA,GAEJ;AACF,EAAA,CAAA,GAIWY,IAAAC,EAAKf,CAAa;"}

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

@@ -1 +1 @@
-{"version":3,"file":"filters.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/filters.tsx"],"sourcesContent":["import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport TabComponent from '../../../ui/tab/tab';\nimport Text from '../../../ui/text/text';\nimport type { IFilterOption } from './api/get-puzzles';\nimport FilterSection from './filters-section';\nimport * as Styled from './puzzles-styled';\nimport type { FiltersProps } from './puzzles-type';\nimport { GRADE_DISPLAY_NAMES } from './utils';\n\nconst getAppliedFilters = (filters: IFilterOption[]): string[] => {\n  return filters.filter(item => item.applied).map(item => item.name);\n};\n\nconst getAllFilters = (filters: IFilterOption[]): string[] => {\n  return filters.map(item => item.name);\n};\n\nconst Filters: React.FC<FiltersProps> = props => {\n  const { handleFiltersChange, filterGrades, filterTypes, filterTiles, filterTopics, togglePopup } =\n    props;\n  const [selectedGrades, setSelectedGrade] = useState<string[]>(getAppliedFilters(filterGrades));\n  const [selectedTiles, setSelectedTiles] = useState<string[]>(getAppliedFilters(filterTiles));\n  const [selectedTopics, setSelectedTopics] = useState<string[]>(getAppliedFilters(filterTopics));\n  const [selectedTypes, setSelectedTypes] = useState<string[]>(getAppliedFilters(filterTypes));\n\n  const allTypes = useMemo(() => getAllFilters(filterTypes), [filterTypes]);\n  const allTiles = useMemo(() => getAllFilters(filterTiles), [filterTiles]);\n  const allTopics = useMemo(() => getAllFilters(filterTopics), [filterTopics]);\n\n  const handleTypeChange = useCallback(\n    (ele: string) => {\n      const newSelectedTypes = selectedTypes.includes(ele)\n        ? selectedTypes.filter(type => type !== ele)\n        : [...selectedTypes, ele];\n\n      setSelectedTypes(newSelectedTypes);\n      handleFiltersChange({\n        activity_types: newSelectedTypes,\n      });\n    },\n    [handleFiltersChange, selectedTypes],\n  );\n\n  const handleTileChange = useCallback(\n    (selectedCodes: string[]) => {\n      setSelectedTiles(selectedCodes);\n      handleFiltersChange({\n        activity_tiles: selectedCodes,\n      });\n    },\n    [handleFiltersChange],\n  );\n\n  const handleTopicChange = useCallback(\n    (selectedCodes: string[]) => {\n      setSelectedTopics(selectedCodes);\n      handleFiltersChange({\n        activity_topics: selectedCodes,\n      });\n    },\n    [handleFiltersChange],\n  );\n\n  const toggleGradePopup = useCallback(() => {\n    togglePopup('grades');\n  }, [togglePopup]);\n\n  const toggleTilesPopup = useCallback(() => {\n    togglePopup('tiles');\n  }, [togglePopup]);\n\n  const toggleTopicsPopup = useCallback(() => {\n    togglePopup('topics');\n  }, [togglePopup]);\n\n  useEffect(() => {\n    setSelectedGrade(getAppliedFilters(filterGrades));\n  }, [filterGrades]);\n\n  useEffect(() => {\n    setSelectedTiles(getAppliedFilters(filterTiles));\n  }, [filterTiles]);\n\n  useEffect(() => {\n    setSelectedTopics(getAppliedFilters(filterTopics));\n  }, [filterTopics]);\n\n  useEffect(() => {\n    setSelectedTypes(getAppliedFilters(filterTypes));\n  }, [filterTypes]);\n\n  return (\n    <>\n      <Text $renderAs=\"eyebrow2\" $color=\"WHITE\">\n        GRADE\n      </Text>\n      <FlexView\n        $flexDirection=\"row\"\n        $justifyContent=\"space-between\"\n        $alignItems=\"center\"\n        $gutterX={0.5}\n        $gapX={0.25}\n        $marginBottomX={0.5}\n      >\n        {selectedGrades.length ? (\n          <Styled.SelectedGrades $renderAs=\"eyebrow2\" $color=\"WHITE\">\n            {selectedGrades.map((grade, index) => (\n              <span key={grade}>\n                {GRADE_DISPLAY_NAMES[grade]}\n                {index < selectedGrades.length - 1 ? ', ' : ''}\n              </span>\n            ))}\n          </Styled.SelectedGrades>\n        ) : (\n          <TextButton color=\"WHITE\" onClick={toggleGradePopup} label=\"Select Grade\" />\n        )}\n        {selectedGrades.length > 0 && (\n          <TextButton color=\"WHITE\" onClick={toggleGradePopup} label=\"Edit\" />\n        )}\n      </FlexView>\n      <Text $renderAs=\"eyebrow2\" $color=\"WHITE\">\n        TYPE\n      </Text>\n      <FlexView $flexDirection=\"row\" $flexWrap>\n        {allTypes.map((ele: string) => (\n          <TabComponent\n            key={ele}\n            $width=\"fit-content\"\n            $renderAs=\"secondary\"\n            label={ele}\n            $selected={selectedTypes.includes(ele)}\n            shape=\"square\"\n            $size=\"small\"\n            onClick={() => handleTypeChange(ele)}\n          />\n        ))}\n      </FlexView>\n      <FilterSection\n        title=\"TOPIC\"\n        items={allTopics}\n        selectedItems={selectedTopics}\n        onChange={handleTopicChange}\n        openSelector={toggleTopicsPopup}\n      />\n      <FilterSection\n        title=\"TILE\"\n        items={allTiles}\n        onChange={handleTileChange}\n        selectedItems={selectedTiles}\n        openSelector={toggleTilesPopup}\n      />\n    </>\n  );\n};\n\nexport default memo(Filters);\n"],"names":["getAppliedFilters","filters","item","getAllFilters","Filters","props","handleFiltersChange","filterGrades","filterTypes","filterTiles","filterTopics","togglePopup","selectedGrades","setSelectedGrade","useState","selectedTiles","setSelectedTiles","selectedTopics","setSelectedTopics","selectedTypes","setSelectedTypes","allTypes","useMemo","allTiles","allTopics","handleTypeChange","useCallback","ele","newSelectedTypes","type","handleTileChange","selectedCodes","handleTopicChange","toggleGradePopup","toggleTilesPopup","toggleTopicsPopup","useEffect","jsxs","Fragment","jsx","Text","FlexView","Styled.SelectedGrades","grade","index","GRADE_DISPLAY_NAMES","TextButton","TabComponent","FilterSection","Filters$1","memo"],"mappings":"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"}
+{"version":3,"file":"filters.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/filters.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useState, type FC } from 'react';\n\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport TabComponent from '../../../ui/tab/tab';\nimport Text from '../../../ui/text/text';\nimport type { IFilterOption } from './api/get-puzzles';\nimport FilterSection from './filters-section';\nimport * as Styled from './puzzles-styled';\nimport type { FiltersProps } from './puzzles-type';\nimport { GRADE_DISPLAY_NAMES } from './utils';\n\nconst getAppliedFilters = (filters: IFilterOption[]): string[] => {\n  return filters.filter(item => item.applied).map(item => item.name);\n};\n\nconst getAllFilters = (filters: IFilterOption[]): string[] => {\n  return filters.map(item => item.name);\n};\n\nconst Filters: FC<FiltersProps> = props => {\n  const { handleFiltersChange, filterGrades, filterTypes, filterTiles, filterTopics, togglePopup } =\n    props;\n  const [selectedGrades, setSelectedGrade] = useState<string[]>(getAppliedFilters(filterGrades));\n  const [selectedTiles, setSelectedTiles] = useState<string[]>(getAppliedFilters(filterTiles));\n  const [selectedTopics, setSelectedTopics] = useState<string[]>(getAppliedFilters(filterTopics));\n  const [selectedTypes, setSelectedTypes] = useState<string[]>(getAppliedFilters(filterTypes));\n\n  const allTypes = useMemo(() => getAllFilters(filterTypes), [filterTypes]);\n  const allTiles = useMemo(() => getAllFilters(filterTiles), [filterTiles]);\n  const allTopics = useMemo(() => getAllFilters(filterTopics), [filterTopics]);\n\n  const handleTypeChange = useCallback(\n    (ele: string) => {\n      const newSelectedTypes = selectedTypes.includes(ele)\n        ? selectedTypes.filter(type => type !== ele)\n        : [...selectedTypes, ele];\n\n      setSelectedTypes(newSelectedTypes);\n      handleFiltersChange({\n        activity_types: newSelectedTypes,\n      });\n    },\n    [handleFiltersChange, selectedTypes],\n  );\n\n  const handleTileChange = useCallback(\n    (selectedCodes: string[]) => {\n      setSelectedTiles(selectedCodes);\n      handleFiltersChange({\n        activity_tiles: selectedCodes,\n      });\n    },\n    [handleFiltersChange],\n  );\n\n  const handleTopicChange = useCallback(\n    (selectedCodes: string[]) => {\n      setSelectedTopics(selectedCodes);\n      handleFiltersChange({\n        activity_topics: selectedCodes,\n      });\n    },\n    [handleFiltersChange],\n  );\n\n  const toggleGradePopup = useCallback(() => {\n    togglePopup('grades');\n  }, [togglePopup]);\n\n  const toggleTilesPopup = useCallback(() => {\n    togglePopup('tiles');\n  }, [togglePopup]);\n\n  const toggleTopicsPopup = useCallback(() => {\n    togglePopup('topics');\n  }, [togglePopup]);\n\n  useEffect(() => {\n    setSelectedGrade(getAppliedFilters(filterGrades));\n  }, [filterGrades]);\n\n  useEffect(() => {\n    setSelectedTiles(getAppliedFilters(filterTiles));\n  }, [filterTiles]);\n\n  useEffect(() => {\n    setSelectedTopics(getAppliedFilters(filterTopics));\n  }, [filterTopics]);\n\n  useEffect(() => {\n    setSelectedTypes(getAppliedFilters(filterTypes));\n  }, [filterTypes]);\n\n  return (\n    <>\n      <Text $renderAs=\"eyebrow2\" $color=\"WHITE\">\n        GRADE\n      </Text>\n      <FlexView\n        $flexDirection=\"row\"\n        $justifyContent=\"space-between\"\n        $alignItems=\"center\"\n        $gutterX={0.5}\n        $gapX={0.25}\n        $marginBottomX={0.5}\n      >\n        {selectedGrades.length ? (\n          <Styled.SelectedGrades $renderAs=\"eyebrow2\" $color=\"WHITE\">\n            {selectedGrades.map((grade, index) => (\n              <span key={grade}>\n                {GRADE_DISPLAY_NAMES[grade]}\n                {index < selectedGrades.length - 1 ? ', ' : ''}\n              </span>\n            ))}\n          </Styled.SelectedGrades>\n        ) : (\n          <TextButton color=\"WHITE\" onClick={toggleGradePopup} label=\"Select Grade\" />\n        )}\n        {selectedGrades.length > 0 && (\n          <TextButton color=\"WHITE\" onClick={toggleGradePopup} label=\"Edit\" />\n        )}\n      </FlexView>\n      <Text $renderAs=\"eyebrow2\" $color=\"WHITE\">\n        TYPE\n      </Text>\n      <FlexView $flexDirection=\"row\" $flexWrap>\n        {allTypes.map((ele: string) => (\n          <TabComponent\n            key={ele}\n            $width=\"fit-content\"\n            $renderAs=\"secondary\"\n            label={ele}\n            $selected={selectedTypes.includes(ele)}\n            shape=\"square\"\n            $size=\"small\"\n            onClick={() => handleTypeChange(ele)}\n          />\n        ))}\n      </FlexView>\n      <FilterSection\n        title=\"TOPIC\"\n        items={allTopics}\n        selectedItems={selectedTopics}\n        onChange={handleTopicChange}\n        openSelector={toggleTopicsPopup}\n      />\n      <FilterSection\n        title=\"TILE\"\n        items={allTiles}\n        onChange={handleTileChange}\n        selectedItems={selectedTiles}\n        openSelector={toggleTilesPopup}\n      />\n    </>\n  );\n};\n\nexport default memo(Filters);\n"],"names":["getAppliedFilters","filters","item","getAllFilters","Filters","props","handleFiltersChange","filterGrades","filterTypes","filterTiles","filterTopics","togglePopup","selectedGrades","setSelectedGrade","useState","selectedTiles","setSelectedTiles","selectedTopics","setSelectedTopics","selectedTypes","setSelectedTypes","allTypes","useMemo","allTiles","allTopics","handleTypeChange","useCallback","ele","newSelectedTypes","type","handleTileChange","selectedCodes","handleTopicChange","toggleGradePopup","toggleTilesPopup","toggleTopicsPopup","useEffect","jsxs","Fragment","jsx","Text","FlexView","Styled.SelectedGrades","grade","index","GRADE_DISPLAY_NAMES","TextButton","TabComponent","FilterSection","Filters$1","memo"],"mappings":"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"}

package/dist/features/cue-canvas/sidebar/puzzles/puzzle-menu-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"puzzle-menu-header.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/puzzle-menu-header.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport PuzzleIcon from '../../../../assets/line-icons/icons/puzzle-icon';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nconst MenuHeader: React.FC<{ toggleMenu: () => void; onReset?: () => void }> = ({\n  toggleMenu,\n  onReset,\n}) => (\n  <FlexView\n    $flexDirection=\"row\"\n    $justifyContent=\"space-between\"\n    $alignItems=\"center\"\n    $gutterX={1}\n    $gapX={0.5}\n    $heightX={3}\n  >\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={0.5}>\n      <PuzzleIcon color=\"WHITE\" />\n      <Text $color=\"WHITE\" $renderAs=\"body2\">\n        ACTIVITIES\n      </Text>\n    </FlexView>\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={1}>\n      <TextButton color=\"WHITE\" label=\"Reset\" onClick={onReset} />\n      <Clickable onClick={toggleMenu} label=\"close activities menu\">\n        <CrossIcon color=\"WHITE\" />\n      </Clickable>\n    </FlexView>\n  </FlexView>\n);\n\nexport default memo(MenuHeader);\n"],"names":["MenuHeader","toggleMenu","onReset","jsxs","FlexView","jsx","PuzzleIcon","Text","TextButton","Clickable","CrossIcon","PuzzleMenuHeader","memo"],"mappings":";;;;;;;;AASA,MAAMA,IAAyE,CAAC;AAAA,EAC9E,YAAAC;AAAA,EACA,SAAAC;AACF,MACE,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,gBAAe;AAAA,IACf,iBAAgB;AAAA,IAChB,aAAY;AAAA,IACZ,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,IAEV,UAAA;AAAA,MAAA,gBAAAD,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAiB,KACnE,UAAA;AAAA,QAAC,gBAAAC,EAAAC,GAAA,EAAW,OAAM,QAAQ,CAAA;AAAA,0BACzBC,GAAK,EAAA,QAAO,SAAQ,WAAU,SAAQ,UAEvC,cAAA;AAAA,MAAA,GACF;AAAA,wBACCH,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,iBAAiB,GACnE,UAAA;AAAA,QAAA,gBAAAC,EAACG,KAAW,OAAM,SAAQ,OAAM,SAAQ,SAASN,GAAS;AAAA,QAC1D,gBAAAG,EAACI,GAAU,EAAA,SAASR,GAAY,OAAM,yBACpC,UAAC,gBAAAI,EAAAK,GAAA,EAAU,OAAM,QAAA,CAAQ,EAC3B,CAAA;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AACF,GAGaC,IAAAC,EAAKZ,CAAU;"}
+{"version":3,"file":"puzzle-menu-header.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/puzzle-menu-header.tsx"],"sourcesContent":["import { memo, type FC } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport PuzzleIcon from '../../../../assets/line-icons/icons/puzzle-icon';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nconst MenuHeader: FC<{ toggleMenu: () => void; onReset?: () => void }> = ({\n  toggleMenu,\n  onReset,\n}) => (\n  <FlexView\n    $flexDirection=\"row\"\n    $justifyContent=\"space-between\"\n    $alignItems=\"center\"\n    $gutterX={1}\n    $gapX={0.5}\n    $heightX={3}\n  >\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={0.5}>\n      <PuzzleIcon color=\"WHITE\" />\n      <Text $color=\"WHITE\" $renderAs=\"body2\">\n        ACTIVITIES\n      </Text>\n    </FlexView>\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={1}>\n      <TextButton color=\"WHITE\" label=\"Reset\" onClick={onReset} />\n      <Clickable onClick={toggleMenu} label=\"close activities menu\">\n        <CrossIcon color=\"WHITE\" />\n      </Clickable>\n    </FlexView>\n  </FlexView>\n);\n\nexport default memo(MenuHeader);\n"],"names":["MenuHeader","toggleMenu","onReset","jsxs","FlexView","jsx","PuzzleIcon","Text","TextButton","Clickable","CrossIcon","PuzzleMenuHeader","memo"],"mappings":";;;;;;;;AASA,MAAMA,IAAmE,CAAC;AAAA,EACxE,YAAAC;AAAA,EACA,SAAAC;AACF,MACE,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,gBAAe;AAAA,IACf,iBAAgB;AAAA,IAChB,aAAY;AAAA,IACZ,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,IAEV,UAAA;AAAA,MAAA,gBAAAD,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAiB,KACnE,UAAA;AAAA,QAAC,gBAAAC,EAAAC,GAAA,EAAW,OAAM,QAAQ,CAAA;AAAA,0BACzBC,GAAK,EAAA,QAAO,SAAQ,WAAU,SAAQ,UAEvC,cAAA;AAAA,MAAA,GACF;AAAA,wBACCH,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,iBAAiB,GACnE,UAAA;AAAA,QAAA,gBAAAC,EAACG,KAAW,OAAM,SAAQ,OAAM,SAAQ,SAASN,GAAS;AAAA,QAC1D,gBAAAG,EAACI,GAAU,EAAA,SAASR,GAAY,OAAM,yBACpC,UAAC,gBAAAI,EAAAK,GAAA,EAAU,OAAM,QAAA,CAAQ,EAC3B,CAAA;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AACF,GAGaC,IAAAC,EAAKZ,CAAU;"}

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

@@ -1 +1 @@
-{"version":3,"file":"puzzle-menu.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/puzzle-menu.tsx"],"sourcesContent":["import { memo, useCallback, useState } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport useDebounce from '../../../hooks/use-debounce';\nimport { Loader } from '../../../ui/buttons/button/button-styled';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport SearchableInput from '../../../ui/inputs/searchable-input/searchable-input';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport type { IGetPuzzles, IPuzzlesResultData } from './api/get-puzzles';\nimport FilterSelectionMenu from './filter-selection-menu';\nimport Filters from './filters';\nimport useFetchCueCanvasActivity from './hooks/use-fetch-cue-canvas-activity';\nimport LaunchPuzzle from './launch-puzzle';\nimport PuzzleMenuHeader from './puzzle-menu-header';\nimport * as Styled from './puzzles-styled';\nimport type { FilterType, PuzzleMenuProps, TActiveFilterMenuType } from './puzzles-type';\nimport { FILTER_KEYS } from './utils';\n\nconst PuzzleMenu: React.FC<PuzzleMenuProps> = ({ toggleMenu, studentGrade }) => {\n  const { isPuzzlesProcessing, setActivityFilters, puzzlesData } =\n    useFetchCueCanvasActivity(studentGrade);\n\n  const { filters, results: puzzles } = puzzlesData || {};\n  const {\n    activity_tiles: filterTiles,\n    activity_topics: filterTopics,\n    activity_types: filterTypes,\n    grades: filterGrades,\n    search: filterSearch,\n  } = filters || {};\n\n  const [launchPuzzleData, setLaunchPuzzlesData] = useState<IPuzzlesResultData | undefined>();\n  const [activeFilterMenuType, setActiveFilterMenuType] = useState<TActiveFilterMenuType | null>(\n    null,\n  );\n  const [searchText, setSearchText] = useState(filterSearch || '');\n\n  const debouncedSearch = useDebounce((value: string) => {\n    if (value !== filterSearch) {\n      handleFiltersChange({ search: value });\n    }\n  }, 300);\n\n  const handleSearchChange = useCallback(\n    (value: string) => {\n      setSearchText(value);\n      debouncedSearch(value);\n    },\n    [debouncedSearch],\n  );\n\n  const togglePopup = useCallback((popupType: TActiveFilterMenuType) => {\n    setActiveFilterMenuType(prev => (prev === popupType ? null : popupType));\n  }, []);\n\n  const closeAllPopups = useCallback(() => {\n    setActiveFilterMenuType(null);\n  }, []);\n\n  const handleFiltersChange = useCallback(\n    (filterChange: IGetPuzzles) => {\n      const filterType = Object.keys(filterChange)[0] as FilterType;\n      const value = filterType && filterChange[filterType];\n\n      setActivityFilters(prevFilters => ({\n        ...prevFilters,\n        [filterType]: value,\n      }));\n    },\n    [setActivityFilters],\n  );\n\n  const handleReset = useCallback(() => {\n    setActivityFilters({});\n    setSearchText('');\n  }, [setActivityFilters]);\n\n  const clearPuzzleData = useCallback(() => {\n    setLaunchPuzzlesData(undefined);\n  }, []);\n\n  if (\n    isPuzzlesProcessing &&\n    (!filterTiles || filterTiles?.length === 0) &&\n    (!filterTopics || filterTopics?.length === 0)\n  ) {\n    return (\n      <Styled.MenuContainer $justifyContent=\"center\" $alignItems=\"center\">\n        <Loader src={ILLUSTRATIONS.LOADER} alt=\"Loader\" $size=\"small\" />;\n      </Styled.MenuContainer>\n    );\n  }\n\n  if (launchPuzzleData) {\n    return (\n      <LaunchPuzzle\n        launchPuzzleData={launchPuzzleData}\n        onMenuVisibilityChange={clearPuzzleData}\n        toggleMenu={toggleMenu}\n      />\n    );\n  }\n\n  if (activeFilterMenuType) {\n    let menuItems;\n    let filterType: FilterType;\n\n    switch (activeFilterMenuType) {\n      case 'grades':\n        menuItems = filterGrades;\n        filterType = FILTER_KEYS.ACTIVITY_GRADES as FilterType;\n        break;\n      case 'topics':\n        menuItems = filterTopics;\n        filterType = FILTER_KEYS.ACTIVITY_TOPICS as FilterType;\n        break;\n      case 'tiles':\n        menuItems = filterTiles;\n        filterType = FILTER_KEYS.ACTIVITY_TILES as FilterType;\n        break;\n      default:\n        return null;\n    }\n\n    if (!menuItems) return null;\n\n    return (\n      <FilterSelectionMenu\n        closeAllPopups={closeAllPopups}\n        menuItems={menuItems}\n        onFiltersChange={handleFiltersChange}\n        type={filterType}\n      />\n    );\n  }\n\n  return (\n    <Styled.MenuContainer>\n      <PuzzleMenuHeader toggleMenu={toggleMenu} onReset={handleReset} />\n      <FlexView $flexDirection=\"row\" $alignItems=\"flex-start\">\n        <Styled.FilterSidebar $width=\"35%\" $gutterX={1}>\n          {filterGrades && filterTiles && filterTopics && filterTypes && (\n            <Filters\n              handleFiltersChange={handleFiltersChange}\n              filterGrades={filterGrades}\n              filterTiles={filterTiles}\n              filterTypes={filterTypes}\n              filterTopics={filterTopics}\n              togglePopup={togglePopup}\n            />\n          )}\n        </Styled.FilterSidebar>\n        <FlexView $width=\"65%\">\n          <Styled.SearchHeaderWrapper $heightX={4} $alignItems=\"center\" $justifyContent=\"center\">\n            <SearchableInput\n              value={searchText}\n              onSearchTextChange={handleSearchChange}\n              renderAs=\"secondary\"\n              width=\"99%\"\n              size=\"regular\"\n              label=\"Type topic name...\"\n              searchOnClear\n            />\n          </Styled.SearchHeaderWrapper>\n          <FlexView $gutterX={1}>\n            <Text $renderAs=\"body3\" $color=\"GREY_2\">\n              {puzzles && puzzles.length > 0\n                ? `${puzzles.length} activities found`\n                : searchText\n                  ? 'No activities found'\n                  : null}\n            </Text>\n          </FlexView>\n          <Styled.ActivitiesList $flexDirection=\"row\" $flexWrap $justifyContent=\"space-evenly\">\n            {puzzles && puzzles?.length > 0 ? (\n              puzzles.map(activity => {\n                const { activity_url: reference, name, id } = activity;\n                const thumbnailSrc = reference.split('_')[0]?.concat('_thumbnail.png');\n\n                if (!reference) return null;\n\n                return (\n                  <Clickable onClick={() => setLaunchPuzzlesData(activity)} key={id} label=\"puzzle\">\n                    <FlexView $alignItems=\"center\">\n                      <Styled.ActivityImage title={name} id={id} src={thumbnailSrc} />\n                      {name && <Styled.ActivityTitle>{name}</Styled.ActivityTitle>}\n                    </FlexView>\n                  </Clickable>\n                );\n              })\n            ) : (\n              <Styled.EmptyStateContainer>\n                Use Filters or Search to find activities\n              </Styled.EmptyStateContainer>\n            )}\n          </Styled.ActivitiesList>\n        </FlexView>\n      </FlexView>\n    </Styled.MenuContainer>\n  );\n};\n\nexport default memo(PuzzleMenu);\n"],"names":["PuzzleMenu","toggleMenu","studentGrade","isPuzzlesProcessing","setActivityFilters","puzzlesData","useFetchCueCanvasActivity","filters","puzzles","filterTiles","filterTopics","filterTypes","filterGrades","filterSearch","launchPuzzleData","setLaunchPuzzlesData","useState","activeFilterMenuType","setActiveFilterMenuType","searchText","setSearchText","debouncedSearch","useDebounce","value","handleFiltersChange","handleSearchChange","useCallback","togglePopup","popupType","prev","closeAllPopups","filterChange","filterType","prevFilters","handleReset","clearPuzzleData","Styled.MenuContainer","jsx","Loader","ILLUSTRATIONS","LaunchPuzzle","menuItems","FILTER_KEYS","FilterSelectionMenu","jsxs","PuzzleMenuHeader","FlexView","Styled.FilterSidebar","Filters","Styled.SearchHeaderWrapper","SearchableInput","Text","Styled.ActivitiesList","activity","reference","name","id","thumbnailSrc","_a","Clickable","Styled.ActivityImage","Styled.ActivityTitle","Styled.EmptyStateContainer","PuzzleMenu$1","memo"],"mappings":"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"}
+{"version":3,"file":"puzzle-menu.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/puzzle-menu.tsx"],"sourcesContent":["import { memo, useCallback, useState, type FC } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport useDebounce from '../../../hooks/use-debounce';\nimport { Loader } from '../../../ui/buttons/button/button-styled';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport SearchableInput from '../../../ui/inputs/searchable-input/searchable-input';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport type { IGetPuzzles, IPuzzlesResultData } from './api/get-puzzles';\nimport FilterSelectionMenu from './filter-selection-menu';\nimport Filters from './filters';\nimport useFetchCueCanvasActivity from './hooks/use-fetch-cue-canvas-activity';\nimport LaunchPuzzle from './launch-puzzle';\nimport PuzzleMenuHeader from './puzzle-menu-header';\nimport * as Styled from './puzzles-styled';\nimport type { FilterType, PuzzleMenuProps, TActiveFilterMenuType } from './puzzles-type';\nimport { FILTER_KEYS } from './utils';\n\nconst PuzzleMenu: FC<PuzzleMenuProps> = ({ toggleMenu, studentGrade }) => {\n  const { isPuzzlesProcessing, setActivityFilters, puzzlesData } =\n    useFetchCueCanvasActivity(studentGrade);\n\n  const { filters, results: puzzles } = puzzlesData || {};\n  const {\n    activity_tiles: filterTiles,\n    activity_topics: filterTopics,\n    activity_types: filterTypes,\n    grades: filterGrades,\n    search: filterSearch,\n  } = filters || {};\n\n  const [launchPuzzleData, setLaunchPuzzlesData] = useState<IPuzzlesResultData | undefined>();\n  const [activeFilterMenuType, setActiveFilterMenuType] = useState<TActiveFilterMenuType | null>(\n    null,\n  );\n  const [searchText, setSearchText] = useState(filterSearch || '');\n\n  const debouncedSearch = useDebounce((value: string) => {\n    if (value !== filterSearch) {\n      handleFiltersChange({ search: value });\n    }\n  }, 300);\n\n  const handleSearchChange = useCallback(\n    (value: string) => {\n      setSearchText(value);\n      debouncedSearch(value);\n    },\n    [debouncedSearch],\n  );\n\n  const togglePopup = useCallback((popupType: TActiveFilterMenuType) => {\n    setActiveFilterMenuType(prev => (prev === popupType ? null : popupType));\n  }, []);\n\n  const closeAllPopups = useCallback(() => {\n    setActiveFilterMenuType(null);\n  }, []);\n\n  const handleFiltersChange = useCallback(\n    (filterChange: IGetPuzzles) => {\n      const filterType = Object.keys(filterChange)[0] as FilterType;\n      const value = filterType && filterChange[filterType];\n\n      setActivityFilters(prevFilters => ({\n        ...prevFilters,\n        [filterType]: value,\n      }));\n    },\n    [setActivityFilters],\n  );\n\n  const handleReset = useCallback(() => {\n    setActivityFilters({});\n    setSearchText('');\n  }, [setActivityFilters]);\n\n  const clearPuzzleData = useCallback(() => {\n    setLaunchPuzzlesData(undefined);\n  }, []);\n\n  if (\n    isPuzzlesProcessing &&\n    (!filterTiles || filterTiles?.length === 0) &&\n    (!filterTopics || filterTopics?.length === 0)\n  ) {\n    return (\n      <Styled.MenuContainer $justifyContent=\"center\" $alignItems=\"center\">\n        <Loader src={ILLUSTRATIONS.LOADER} alt=\"Loader\" $size=\"small\" />;\n      </Styled.MenuContainer>\n    );\n  }\n\n  if (launchPuzzleData) {\n    return (\n      <LaunchPuzzle\n        launchPuzzleData={launchPuzzleData}\n        onMenuVisibilityChange={clearPuzzleData}\n        toggleMenu={toggleMenu}\n      />\n    );\n  }\n\n  if (activeFilterMenuType) {\n    let menuItems;\n    let filterType: FilterType;\n\n    switch (activeFilterMenuType) {\n      case 'grades':\n        menuItems = filterGrades;\n        filterType = FILTER_KEYS.ACTIVITY_GRADES as FilterType;\n        break;\n      case 'topics':\n        menuItems = filterTopics;\n        filterType = FILTER_KEYS.ACTIVITY_TOPICS as FilterType;\n        break;\n      case 'tiles':\n        menuItems = filterTiles;\n        filterType = FILTER_KEYS.ACTIVITY_TILES as FilterType;\n        break;\n      default:\n        return null;\n    }\n\n    if (!menuItems) return null;\n\n    return (\n      <FilterSelectionMenu\n        closeAllPopups={closeAllPopups}\n        menuItems={menuItems}\n        onFiltersChange={handleFiltersChange}\n        type={filterType}\n      />\n    );\n  }\n\n  return (\n    <Styled.MenuContainer>\n      <PuzzleMenuHeader toggleMenu={toggleMenu} onReset={handleReset} />\n      <FlexView $flexDirection=\"row\" $alignItems=\"flex-start\">\n        <Styled.FilterSidebar $width=\"35%\" $gutterX={1}>\n          {filterGrades && filterTiles && filterTopics && filterTypes && (\n            <Filters\n              handleFiltersChange={handleFiltersChange}\n              filterGrades={filterGrades}\n              filterTiles={filterTiles}\n              filterTypes={filterTypes}\n              filterTopics={filterTopics}\n              togglePopup={togglePopup}\n            />\n          )}\n        </Styled.FilterSidebar>\n        <FlexView $width=\"65%\">\n          <Styled.SearchHeaderWrapper $heightX={4} $alignItems=\"center\" $justifyContent=\"center\">\n            <SearchableInput\n              value={searchText}\n              onSearchTextChange={handleSearchChange}\n              renderAs=\"secondary\"\n              width=\"99%\"\n              size=\"regular\"\n              label=\"Type topic name...\"\n              searchOnClear\n            />\n          </Styled.SearchHeaderWrapper>\n          <FlexView $gutterX={1}>\n            <Text $renderAs=\"body3\" $color=\"GREY_2\">\n              {puzzles && puzzles.length > 0\n                ? `${puzzles.length} activities found`\n                : searchText\n                  ? 'No activities found'\n                  : null}\n            </Text>\n          </FlexView>\n          <Styled.ActivitiesList $flexDirection=\"row\" $flexWrap $justifyContent=\"space-evenly\">\n            {puzzles && puzzles?.length > 0 ? (\n              puzzles.map(activity => {\n                const { activity_url: reference, name, id } = activity;\n                const thumbnailSrc = reference.split('_')[0]?.concat('_thumbnail.png');\n\n                if (!reference) return null;\n\n                return (\n                  <Clickable onClick={() => setLaunchPuzzlesData(activity)} key={id} label=\"puzzle\">\n                    <FlexView $alignItems=\"center\">\n                      <Styled.ActivityImage title={name} id={id} src={thumbnailSrc} />\n                      {name && <Styled.ActivityTitle>{name}</Styled.ActivityTitle>}\n                    </FlexView>\n                  </Clickable>\n                );\n              })\n            ) : (\n              <Styled.EmptyStateContainer>\n                Use Filters or Search to find activities\n              </Styled.EmptyStateContainer>\n            )}\n          </Styled.ActivitiesList>\n        </FlexView>\n      </FlexView>\n    </Styled.MenuContainer>\n  );\n};\n\nexport default memo(PuzzleMenu);\n"],"names":["PuzzleMenu","toggleMenu","studentGrade","isPuzzlesProcessing","setActivityFilters","puzzlesData","useFetchCueCanvasActivity","filters","puzzles","filterTiles","filterTopics","filterTypes","filterGrades","filterSearch","launchPuzzleData","setLaunchPuzzlesData","useState","activeFilterMenuType","setActiveFilterMenuType","searchText","setSearchText","debouncedSearch","useDebounce","value","handleFiltersChange","handleSearchChange","useCallback","togglePopup","popupType","prev","closeAllPopups","filterChange","filterType","prevFilters","handleReset","clearPuzzleData","Styled.MenuContainer","jsx","Loader","ILLUSTRATIONS","LaunchPuzzle","menuItems","FILTER_KEYS","FilterSelectionMenu","jsxs","PuzzleMenuHeader","FlexView","Styled.FilterSidebar","Filters","Styled.SearchHeaderWrapper","SearchableInput","Text","Styled.ActivitiesList","activity","reference","name","id","thumbnailSrc","_a","Clickable","Styled.ActivityImage","Styled.ActivityTitle","Styled.EmptyStateContainer","PuzzleMenu$1","memo"],"mappings":"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"}

package/dist/features/cue-canvas/toolbar/color-palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-palette.js","sources":["../../../../src/features/cue-canvas/toolbar/color-palette.tsx"],"sourcesContent":["import { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport type { TUserTypes } from '../../ui/types';\nimport { getColorsForUser } from '../cue-canvas-helpers';\nimport { StyledCheckIcon, ColorPicker } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport type { TCueCanvasColors, TRenderAs } from '../types/cue-canvas';\n\ninterface IColorPalette {\n  setActiveColor: (color: TCueCanvasColors) => void;\n  activeColor: TCueCanvasColors;\n  userType: TUserTypes;\n  renderAs: TRenderAs;\n}\n\nconst ColorPalette: React.FC<IColorPalette> = memo(props => {\n  const { setActiveColor, activeColor, userType, renderAs } = props;\n  const { activeInstance: cueCanvas } = useCueCanvasActions();\n  const handleColorChange = useCallback(\n    (color: TCueCanvasColors) => {\n      setActiveColor(color);\n      cueCanvas?.setColor(color);\n    },\n    [cueCanvas, setActiveColor],\n  );\n  const colors = useMemo(() => getColorsForUser(userType, renderAs), [userType, renderAs]);\n\n  return (\n    <FlexView\n      $flexDirection=\"row\"\n      $flexWrap\n      $width={renderAs === 'canvas' ? 66 : 200}\n      $position=\"relative\"\n    >\n      {colors.map((color, index) => (\n        <Clickable\n          key={index}\n          onClick={() => handleColorChange(color)}\n          label={`Color Picker - ${color}`}\n        >\n          <FlexView\n            $width={22}\n            $height={22}\n            $borderRadius={11}\n            $justifyContent=\"center\"\n            $background={activeColor === color ? 'BLACK' : 'WHITE'}\n            $alignItems=\"center\"\n          >\n            <ColorPicker\n              $width={20}\n              $height={20}\n              $borderRadius={10}\n              $color={color}\n              $alignItems=\"center\"\n              $justifyContent=\"center\"\n            >\n              {activeColor === color && <StyledCheckIcon />}\n            </ColorPicker>\n          </FlexView>\n        </Clickable>\n      ))}\n    </FlexView>\n  );\n});\n\nexport default ColorPalette;\n"],"names":["ColorPalette","memo","props","setActiveColor","activeColor","userType","renderAs","cueCanvas","useCueCanvasActions","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","FlexView","index","Clickable","ColorPicker","StyledCheckIcon"],"mappings":";;;;;;;AAiBM,MAAAA,IAAwCC,EAAK,CAASC,MAAA;AAC1D,QAAM,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,GAAU,UAAAC,MAAaJ,GACtD,EAAE,gBAAgBK,EAAU,IAAIC,EAAoB,GACpDC,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAR,EAAeQ,CAAK,GACpBJ,KAAA,QAAAA,EAAW,SAASI;AAAA,IACtB;AAAA,IACA,CAACJ,GAAWJ,CAAc;AAAA,EAAA,GAEtBS,IAASC,EAAQ,MAAMC,EAAiBT,GAAUC,CAAQ,GAAG,CAACD,GAAUC,CAAQ,CAAC;AAGrF,SAAA,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,WAAS;AAAA,MACT,QAAQV,MAAa,WAAW,KAAK;AAAA,MACrC,WAAU;AAAA,MAET,UAAOM,EAAA,IAAI,CAACD,GAAOM,MAClB,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UAEC,SAAS,MAAMT,EAAkBE,CAAK;AAAA,UACtC,OAAO,kBAAkBA,CAAK;AAAA,UAE9B,UAAA,gBAAAI;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,iBAAgB;AAAA,cAChB,aAAaZ,MAAgBO,IAAQ,UAAU;AAAA,cAC/C,aAAY;AAAA,cAEZ,UAAA,gBAAAI;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,eAAe;AAAA,kBACf,QAAQR;AAAA,kBACR,aAAY;AAAA,kBACZ,iBAAgB;AAAA,kBAEf,UAAAP,MAAgBO,KAAS,gBAAAI,EAACK,GAAgB,CAAA,CAAA;AAAA,gBAAA;AAAA,cAC7C;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAtBKH;AAAA,MAAA,CAwBR;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"color-palette.js","sources":["../../../../src/features/cue-canvas/toolbar/color-palette.tsx"],"sourcesContent":["import { memo, useCallback, useMemo, type FC } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport type { TUserTypes } from '../../ui/types';\nimport { getColorsForUser } from '../cue-canvas-helpers';\nimport { StyledCheckIcon, ColorPicker } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport type { TCueCanvasColors, TRenderAs } from '../types/cue-canvas';\n\ninterface IColorPalette {\n  setActiveColor: (color: TCueCanvasColors) => void;\n  activeColor: TCueCanvasColors;\n  userType: TUserTypes;\n  renderAs: TRenderAs;\n}\n\nconst ColorPalette: FC<IColorPalette> = memo(props => {\n  const { setActiveColor, activeColor, userType, renderAs } = props;\n  const { activeInstance: cueCanvas } = useCueCanvasActions();\n  const handleColorChange = useCallback(\n    (color: TCueCanvasColors) => {\n      setActiveColor(color);\n      cueCanvas?.setColor(color);\n    },\n    [cueCanvas, setActiveColor],\n  );\n  const colors = useMemo(() => getColorsForUser(userType, renderAs), [userType, renderAs]);\n\n  return (\n    <FlexView\n      $flexDirection=\"row\"\n      $flexWrap\n      $width={renderAs === 'canvas' ? 66 : 200}\n      $position=\"relative\"\n    >\n      {colors.map((color, index) => (\n        <Clickable\n          key={index}\n          onClick={() => handleColorChange(color)}\n          label={`Color Picker - ${color}`}\n        >\n          <FlexView\n            $width={22}\n            $height={22}\n            $borderRadius={11}\n            $justifyContent=\"center\"\n            $background={activeColor === color ? 'BLACK' : 'WHITE'}\n            $alignItems=\"center\"\n          >\n            <ColorPicker\n              $width={20}\n              $height={20}\n              $borderRadius={10}\n              $color={color}\n              $alignItems=\"center\"\n              $justifyContent=\"center\"\n            >\n              {activeColor === color && <StyledCheckIcon />}\n            </ColorPicker>\n          </FlexView>\n        </Clickable>\n      ))}\n    </FlexView>\n  );\n});\n\nexport default ColorPalette;\n"],"names":["ColorPalette","memo","props","setActiveColor","activeColor","userType","renderAs","cueCanvas","useCueCanvasActions","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","FlexView","index","Clickable","ColorPicker","StyledCheckIcon"],"mappings":";;;;;;;AAiBM,MAAAA,IAAkCC,EAAK,CAASC,MAAA;AACpD,QAAM,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,GAAU,UAAAC,MAAaJ,GACtD,EAAE,gBAAgBK,EAAU,IAAIC,EAAoB,GACpDC,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAR,EAAeQ,CAAK,GACpBJ,KAAA,QAAAA,EAAW,SAASI;AAAA,IACtB;AAAA,IACA,CAACJ,GAAWJ,CAAc;AAAA,EAAA,GAEtBS,IAASC,EAAQ,MAAMC,EAAiBT,GAAUC,CAAQ,GAAG,CAACD,GAAUC,CAAQ,CAAC;AAGrF,SAAA,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,WAAS;AAAA,MACT,QAAQV,MAAa,WAAW,KAAK;AAAA,MACrC,WAAU;AAAA,MAET,UAAOM,EAAA,IAAI,CAACD,GAAOM,MAClB,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UAEC,SAAS,MAAMT,EAAkBE,CAAK;AAAA,UACtC,OAAO,kBAAkBA,CAAK;AAAA,UAE9B,UAAA,gBAAAI;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,iBAAgB;AAAA,cAChB,aAAaZ,MAAgBO,IAAQ,UAAU;AAAA,cAC/C,aAAY;AAAA,cAEZ,UAAA,gBAAAI;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,eAAe;AAAA,kBACf,QAAQR;AAAA,kBACR,aAAY;AAAA,kBACZ,iBAAgB;AAAA,kBAEf,UAAAP,MAAgBO,KAAS,gBAAAI,EAACK,GAAgB,CAAA,CAAA;AAAA,gBAAA;AAAA,cAC7C;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAtBKH;AAAA,MAAA,CAwBR;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/features/cue-canvas/toolbar/grid-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/grid-menu.tsx"],"sourcesContent":["import React, { memo, useCallback, useRef } from 'react';\n\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 { GRID_NAMES } from '../cue-canvas-helpers';\nimport { MenuWrapper, StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport type { TCueCanvasGridName } from '../types/cue-canvas';\nimport type { IGridMenu, TToolComponentType } from '../types/toolbar';\nimport { GRID_TO_COMP } from './icon-map';\n\nconst GridMenu: React.FC<IGridMenu> = memo(({ GridIcon }) => {\n  const { activeInstance: cueCanvas } = useCueCanvasActions();\n  const gridMenuRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n  const { activeTool } = useCueCanvasActions();\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    gridMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n  const onGridOptionClick = useCallback(\n    (gridOption: TCueCanvasGridName) => {\n      cueCanvas?.changeGrid(gridOption);\n      onMenuClick();\n    },\n    [cueCanvas, onMenuClick],\n  );\n\n  return (\n    <FlexView $gutterX={0.25} ref={gridMenuRef}>\n      <Clickable onClick={onMenuClick} label=\"grid\">\n        <StyledWrapper $active={activeTool === 'grid'}>\n          <GridIcon />\n        </StyledWrapper>\n      </Clickable>\n      {menuVisible && (\n        <MenuWrapper\n          $borderColor=\"GREY_1\"\n          $background=\"GREY_1\"\n          $flexDirection=\"row\"\n          $widthX={11.15}\n          $flexWrap={true}\n          $flexGapX={0.5}\n        >\n          {GRID_NAMES.map(gridName => {\n            const GridComponent = GRID_TO_COMP[gridName] as TToolComponentType;\n\n            return (\n              <Clickable\n                key={gridName}\n                onClick={() => onGridOptionClick(gridName)}\n                label={gridName}\n              >\n                <FlexView\n                  $width={48}\n                  $height={48}\n                  $borderColor=\"BLACK\"\n                  $borderRadius={4}\n                  $background=\"WHITE\"\n                >\n                  <GridComponent />\n                </FlexView>\n              </Clickable>\n            );\n          })}\n        </MenuWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default GridMenu;\n"],"names":["GridMenu","memo","GridIcon","cueCanvas","useCueCanvasActions","gridMenuRef","useRef","activeTool","menuVisible","onMenuClick","useContextMenuClickHandler","onGridOptionClick","useCallback","gridOption","jsxs","FlexView","jsx","Clickable","StyledWrapper","MenuWrapper","GRID_NAMES","gridName","GridComponent","GRID_TO_COMP"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAgCC,EAAK,CAAC,EAAE,UAAAC,QAAe;AAC3D,QAAM,EAAE,gBAAgBC,EAAU,IAAIC,EAAoB,GACpDC,IAAcC,EAAuB,IAAI,GACzC,EAAE,YAAAC,MAAeH,KACjB,EAAE,aAAAI,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIM,IAAoBC;AAAA,IACxB,CAACC,MAAmC;AAClC,MAAAV,KAAA,QAAAA,EAAW,WAAWU,IACVJ;IACd;AAAA,IACA,CAACN,GAAWM,CAAW;AAAA,EAAA;AAGzB,SACG,gBAAAK,EAAAC,GAAA,EAAS,UAAU,MAAM,KAAKV,GAC7B,UAAA;AAAA,IAAA,gBAAAW,EAACC,GAAU,EAAA,SAASR,GAAa,OAAM,QACrC,UAAA,gBAAAO,EAACE,GAAc,EAAA,SAASX,MAAe,QACrC,UAAC,gBAAAS,EAAAd,GAAA,CAAA,CAAS,EACZ,CAAA,GACF;AAAA,IACCM,KACC,gBAAAQ;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,cAAa;AAAA,QACb,aAAY;AAAA,QACZ,gBAAe;AAAA,QACf,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QAEV,UAAAC,EAAW,IAAI,CAAYC,MAAA;AACpB,gBAAAC,IAAgBC,EAAaF,CAAQ;AAGzC,iBAAA,gBAAAL;AAAA,YAACC;AAAA,YAAA;AAAA,cAEC,SAAS,MAAMN,EAAkBU,CAAQ;AAAA,cACzC,OAAOA;AAAA,cAEP,UAAA,gBAAAL;AAAA,gBAACD;AAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,cAAa;AAAA,kBACb,eAAe;AAAA,kBACf,aAAY;AAAA,kBAEZ,4BAACO,GAAc,EAAA;AAAA,gBAAA;AAAA,cACjB;AAAA,YAAA;AAAA,YAZKD;AAAA,UAAA;AAAA,QAaP,CAEH;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"grid-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/grid-menu.tsx"],"sourcesContent":["import { memo, useCallback, useRef, type FC } from 'react';\n\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 { GRID_NAMES } from '../cue-canvas-helpers';\nimport { MenuWrapper, StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport type { TCueCanvasGridName } from '../types/cue-canvas';\nimport type { IGridMenu, TToolComponentType } from '../types/toolbar';\nimport { GRID_TO_COMP } from './icon-map';\n\nconst GridMenu: FC<IGridMenu> = memo(({ GridIcon }) => {\n  const { activeInstance: cueCanvas } = useCueCanvasActions();\n  const gridMenuRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n  const { activeTool } = useCueCanvasActions();\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    gridMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n  const onGridOptionClick = useCallback(\n    (gridOption: TCueCanvasGridName) => {\n      cueCanvas?.changeGrid(gridOption);\n      onMenuClick();\n    },\n    [cueCanvas, onMenuClick],\n  );\n\n  return (\n    <FlexView $gutterX={0.25} ref={gridMenuRef}>\n      <Clickable onClick={onMenuClick} label=\"grid\">\n        <StyledWrapper $active={activeTool === 'grid'}>\n          <GridIcon />\n        </StyledWrapper>\n      </Clickable>\n      {menuVisible && (\n        <MenuWrapper\n          $borderColor=\"GREY_1\"\n          $background=\"GREY_1\"\n          $flexDirection=\"row\"\n          $widthX={11.15}\n          $flexWrap={true}\n          $flexGapX={0.5}\n        >\n          {GRID_NAMES.map(gridName => {\n            const GridComponent = GRID_TO_COMP[gridName] as TToolComponentType;\n\n            return (\n              <Clickable\n                key={gridName}\n                onClick={() => onGridOptionClick(gridName)}\n                label={gridName}\n              >\n                <FlexView\n                  $width={48}\n                  $height={48}\n                  $borderColor=\"BLACK\"\n                  $borderRadius={4}\n                  $background=\"WHITE\"\n                >\n                  <GridComponent />\n                </FlexView>\n              </Clickable>\n            );\n          })}\n        </MenuWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default GridMenu;\n"],"names":["GridMenu","memo","GridIcon","cueCanvas","useCueCanvasActions","gridMenuRef","useRef","activeTool","menuVisible","onMenuClick","useContextMenuClickHandler","onGridOptionClick","useCallback","gridOption","jsxs","FlexView","jsx","Clickable","StyledWrapper","MenuWrapper","GRID_NAMES","gridName","GridComponent","GRID_TO_COMP"],"mappings":";;;;;;;;;AAYA,MAAMA,IAA0BC,EAAK,CAAC,EAAE,UAAAC,QAAe;AACrD,QAAM,EAAE,gBAAgBC,EAAU,IAAIC,EAAoB,GACpDC,IAAcC,EAAuB,IAAI,GACzC,EAAE,YAAAC,MAAeH,KACjB,EAAE,aAAAI,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIM,IAAoBC;AAAA,IACxB,CAACC,MAAmC;AAClC,MAAAV,KAAA,QAAAA,EAAW,WAAWU,IACVJ;IACd;AAAA,IACA,CAACN,GAAWM,CAAW;AAAA,EAAA;AAGzB,SACG,gBAAAK,EAAAC,GAAA,EAAS,UAAU,MAAM,KAAKV,GAC7B,UAAA;AAAA,IAAA,gBAAAW,EAACC,GAAU,EAAA,SAASR,GAAa,OAAM,QACrC,UAAA,gBAAAO,EAACE,GAAc,EAAA,SAASX,MAAe,QACrC,UAAC,gBAAAS,EAAAd,GAAA,CAAA,CAAS,EACZ,CAAA,GACF;AAAA,IACCM,KACC,gBAAAQ;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,cAAa;AAAA,QACb,aAAY;AAAA,QACZ,gBAAe;AAAA,QACf,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QAEV,UAAAC,EAAW,IAAI,CAAYC,MAAA;AACpB,gBAAAC,IAAgBC,EAAaF,CAAQ;AAGzC,iBAAA,gBAAAL;AAAA,YAACC;AAAA,YAAA;AAAA,cAEC,SAAS,MAAMN,EAAkBU,CAAQ;AAAA,cACzC,OAAOA;AAAA,cAEP,UAAA,gBAAAL;AAAA,gBAACD;AAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,cAAa;AAAA,kBACb,eAAe;AAAA,kBACf,aAAY;AAAA,kBAEZ,4BAACO,GAAc,EAAA;AAAA,gBAAA;AAAA,cACjB;AAAA,YAAA;AAAA,YAZKD;AAAA,UAAA;AAAA,QAaP,CAEH;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/toolbar.tsx"],"sourcesContent":["import React, { memo, useEffect } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { getUserTools } from '../cue-canvas-helpers';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport type { IToolbarProps } from '../types/toolbar';\nimport ColorPickerMenu from './color-picker-menu';\nimport Tool from './tool';\nimport WhiteboardToolbar from './whiteboard-toolbar';\n\nconst Toolbar: React.FC<IToolbarProps> = memo(({ userType, renderAs }) => {\n  const tools = getUserTools(userType, renderAs);\n  const { activeInstance: cueCanvas, activeTool, activeColor } = useCueCanvasActions();\n\n  // This effect ensures that the selected tool and color are applied to the cueCanvas instance\n  // whenever it changes. For example, if a user selects a tool and color, then navigates to a\n  // different question (causing a new cueCanvas instance), the same tool and color will be set\n  // on the new instance.\n  // Disabling the exhaustive-deps rule here because we want to run this effect only\n  // when the cueCanvas instance is set, not on every tool & color change.\n  useEffect(() => {\n    if (cueCanvas) {\n      cueCanvas.setColor(activeColor);\n\n      cueCanvas.setTool(activeTool);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [cueCanvas]);\n\n  if (renderAs === 'whiteboard') {\n    return <WhiteboardToolbar tools={tools} userType={userType} />;\n  }\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGapX={0.5}>\n      {tools.map(tool => (\n        <Tool tool={tool} key={tool} shouldAnimate />\n      ))}\n      <ColorPickerMenu userType={userType} renderAs=\"canvas\" />\n    </FlexView>\n  );\n});\n\nexport default Toolbar;\n"],"names":["Toolbar","memo","userType","renderAs","tools","getUserTools","cueCanvas","activeTool","activeColor","useCueCanvasActions","useEffect","jsx","WhiteboardToolbar","jsxs","FlexView","Tool","tool","ColorPickerMenu","Toolbar$1"],"mappings":";;;;;;;;AAUA,MAAMA,IAAmCC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AAClE,QAAAC,IAAQC,EAAaH,GAAUC,CAAQ,GACvC,EAAE,gBAAgBG,GAAW,YAAAC,GAAY,aAAAC,EAAA,IAAgBC;AAiB/D,SATAC,EAAU,MAAM;AACd,IAAIJ,MACFA,EAAU,SAASE,CAAW,GAE9BF,EAAU,QAAQC,CAAU;AAAA,EAC9B,GAEC,CAACD,CAAS,CAAC,GAEVH,MAAa,eACR,gBAAAQ,EAACC,GAAkB,EAAA,OAAAR,GAAc,UAAAF,EAAoB,CAAA,IAI5D,gBAAAW,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UAAS,WAAW,KACrF,UAAA;AAAA,IAAMV,EAAA,IAAI,OACR,gBAAAO,EAAAI,GAAA,EAAK,MAAAC,GAAuB,eAAa,GAAA,GAAnBA,CAAoB,CAC5C;AAAA,IACA,gBAAAL,EAAAM,GAAA,EAAgB,UAAAf,GAAoB,UAAS,SAAS,CAAA;AAAA,EACzD,EAAA,CAAA;AAEJ,CAAC,GAEDgB,IAAelB;"}
+{"version":3,"file":"toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/toolbar.tsx"],"sourcesContent":["import { memo, useEffect, type FC } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { getUserTools } from '../cue-canvas-helpers';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport type { IToolbarProps } from '../types/toolbar';\nimport ColorPickerMenu from './color-picker-menu';\nimport Tool from './tool';\nimport WhiteboardToolbar from './whiteboard-toolbar';\n\nconst Toolbar: FC<IToolbarProps> = memo(({ userType, renderAs }) => {\n  const tools = getUserTools(userType, renderAs);\n  const { activeInstance: cueCanvas, activeTool, activeColor } = useCueCanvasActions();\n\n  // This effect ensures that the selected tool and color are applied to the cueCanvas instance\n  // whenever it changes. For example, if a user selects a tool and color, then navigates to a\n  // different question (causing a new cueCanvas instance), the same tool and color will be set\n  // on the new instance.\n  // Disabling the exhaustive-deps rule here because we want to run this effect only\n  // when the cueCanvas instance is set, not on every tool & color change.\n  useEffect(() => {\n    if (cueCanvas) {\n      cueCanvas.setColor(activeColor);\n\n      cueCanvas.setTool(activeTool);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [cueCanvas]);\n\n  if (renderAs === 'whiteboard') {\n    return <WhiteboardToolbar tools={tools} userType={userType} />;\n  }\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGapX={0.5}>\n      {tools.map(tool => (\n        <Tool tool={tool} key={tool} shouldAnimate />\n      ))}\n      <ColorPickerMenu userType={userType} renderAs=\"canvas\" />\n    </FlexView>\n  );\n});\n\nexport default Toolbar;\n"],"names":["Toolbar","memo","userType","renderAs","tools","getUserTools","cueCanvas","activeTool","activeColor","useCueCanvasActions","useEffect","jsx","WhiteboardToolbar","jsxs","FlexView","Tool","tool","ColorPickerMenu","Toolbar$1"],"mappings":";;;;;;;;AAUA,MAAMA,IAA6BC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AAC5D,QAAAC,IAAQC,EAAaH,GAAUC,CAAQ,GACvC,EAAE,gBAAgBG,GAAW,YAAAC,GAAY,aAAAC,EAAA,IAAgBC;AAiB/D,SATAC,EAAU,MAAM;AACd,IAAIJ,MACFA,EAAU,SAASE,CAAW,GAE9BF,EAAU,QAAQC,CAAU;AAAA,EAC9B,GAEC,CAACD,CAAS,CAAC,GAEVH,MAAa,eACR,gBAAAQ,EAACC,GAAkB,EAAA,OAAAR,GAAc,UAAAF,EAAoB,CAAA,IAI5D,gBAAAW,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UAAS,WAAW,KACrF,UAAA;AAAA,IAAMV,EAAA,IAAI,OACR,gBAAAO,EAAAI,GAAA,EAAK,MAAAC,GAAuB,eAAa,GAAA,GAAnBA,CAAoB,CAC5C;AAAA,IACA,gBAAAL,EAAAM,GAAA,EAAgB,UAAAf,GAAoB,UAAS,SAAS,CAAA;AAAA,EACzD,EAAA,CAAA;AAEJ,CAAC,GAEDgB,IAAelB;"}