npm - @cuemath/leap - Versions diffs - 3.0.11-akm-3 → 3.0.11-akm-1 - Mend

@cuemath/leap 3.0.11-akm-3 → 3.0.11-akm-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/dist/features/cue-canvas/cue-canvas-provider.js CHANGED Viewed

@@ -1,25 +1,23 @@
-import { jsx as d } from "react/jsx-runtime";
-import { memo as f, useMemo as n, useState as o } from "react";
-import p from "./cue-canvas-context.js";
-import { getColorsForUser as x } from "./cue-canvas-helpers.js";
-const A = f(
-  ({ children: a, userType: t }) => {
-    const i = n(() => x(t), [t]), [e, v] = o(), [r, m] = o("pen"), [s, l] = o(), [c, C] = o(i[0]), u = n(
+import { jsx as C } from "react/jsx-runtime";
+import { memo as u, useMemo as c, useState as o } from "react";
+import f from "./cue-canvas-context.js";
+import { getColorsForUser as p } from "./cue-canvas-helpers.js";
+const d = u(
+  ({ children: n, userType: t }) => {
+    const a = c(() => p(t), [t]), [e, i] = o(), [r, v] = o("pen"), [s, m] = o(a[0]), l = c(
       () => ({
         activeInstance: e,
-        setActiveInstance: v,
+        setActiveInstance: i,
         activeTool: r,
-        setActiveTool: m,
-        activeColor: c,
-        setActiveColor: C,
-        activeSidebar: s,
-        setActiveSidebar: l
+        setActiveTool: v,
+        activeColor: s,
+        setActiveColor: m
       }),
-      [c, e, s, r]
+      [s, e, r]
     );
-    return /* @__PURE__ */ d(p.Provider, { value: u, children: a });
+    return /* @__PURE__ */ C(f.Provider, { value: l, children: n });
   }
-), g = A;
+), g = d;
 export {
   g as default
 };

package/dist/features/cue-canvas/cue-canvas-provider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cue-canvas-provider.js","sources":["../../../src/features/cue-canvas/cue-canvas-provider.tsx"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type { CueCanvasCore } from './cue-canvas-core';\nimport type { TCueCanvasColors, ~~TCueCanvasSidebar,~~ TCueCanvasTool } from './types/cue-canvas';\nimport type { FC, PropsWithChildren } from 'react';\n\nimport { useState, memo, useMemo } from 'react';\n\nimport CueCanvasContext from './cue-canvas-context';\nimport { getColorsForUser } from './cue-canvas-helpers';\n\nconst CueCanvasProvider: FC<PropsWithChildren<{ userType: TUserTypes }>> = memo(\n ({ children, userType }) => {\n const colors = useMemo(() => getColorsForUser(userType), [userType]);\n\n const [activeInstance, setActiveInstance] = useState<CueCanvasCore>();\n const [activeTool, setActiveTool] = useState<TCueCanvasTool>('pen');\n const [~~activeSidebar, setActiveSidebar] = useState<TCueCanvasSidebar>();\n const [~~activeColor, setActiveColor] = useState<TCueCanvasColors>(colors[0] as TCueCanvasColors);\n const contextValue = useMemo(\n () => ({\n activeInstance: activeInstance,\n setActiveInstance: setActiveInstance,\n activeTool: activeTool,\n setActiveTool: setActiveTool,\n activeColor,\n setActiveColor,\n ~~activeSidebar,\n setActiveSidebar,\n~~ }),\n [activeColor, activeInstance, ~~activeSidebar,~~ activeTool],\n );\n\n return <CueCanvasContext.Provider value={contextValue}>{children}</CueCanvasContext.Provider>;\n },\n);\n\nexport default CueCanvasProvider;\n"],"names":["CueCanvasProvider","memo","children","userType","colors","useMemo","getColorsForUser","activeInstance","setActiveInstance","useState","activeTool","setActiveTool","~~activeSidebar","setActiveSidebar","~~activeColor","setActiveColor","contextValue","CueCanvasContext","CueCanvasProvider$1"],"mappings":";;;;AAUA,MAAMA,IAAqEC;AAAA,EACzE,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AACpB,UAAAC,IAASC,EAAQ,MAAMC,EAAiBH,CAAQ,GAAG,CAACA,CAAQ,CAAC,GAE7D,CAACI,GAAgBC,CAAiB,IAAIC,EAAwB,GAC9D,CAACC,GAAYC,CAAa,IAAIF,EAAyB,KAAK,GAC5D,CAACG,~~GAAeC,CAAgB,IAAIJ,EAA4B,GAChE,CAACK,~~GAAaC,CAAc,~~IAAIN~~,EAA2BL,EAAO,CAAC,CAAqB,~~GACxFY~~,~~IAAeX~~;AAAA,MACnB,OAAO;AAAA,QACL,gBAAAE;AAAA,QACA,mBAAAC;AAAA,QACA,YAAAE;AAAA,QACA,eAAAC;AAAA,QACA,~~aAAAG~~;AAAA,QACA,gBAAAC;AAAA,~~QACA,eAAAH;AAAA,QACA,kBAAAC;AAAA,~~MAAA;AAAA,MAEF,~~CAACC~~,~~GAAaP~~,~~GAAgBK~~,~~GAAeF,~~CAAU;AAAA,IAAA;~~AAGzD~~,~~6BAAQO~~,EAAiB,UAAjB,EAA0B,OAAOD,GAAe,~~UAAAd~~,EAAS,CAAA;AAAA,EACnE;AACF,~~GAEAgB~~,~~IAAelB~~;"}
1	+ {"version":3,"file":"cue-canvas-provider.js","sources":["../../../src/features/cue-canvas/cue-canvas-provider.tsx"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type { CueCanvasCore } from './cue-canvas-core';\nimport type { TCueCanvasColors, TCueCanvasTool } from './types/cue-canvas';\nimport type { FC, PropsWithChildren } from 'react';\n\nimport { useState, memo, useMemo } from 'react';\n\nimport CueCanvasContext from './cue-canvas-context';\nimport { getColorsForUser } from './cue-canvas-helpers';\n\nconst CueCanvasProvider: FC<PropsWithChildren<{ userType: TUserTypes }>> = memo(\n ({ children, userType }) => {\n const colors = useMemo(() => getColorsForUser(userType), [userType]);\n\n const [activeInstance, setActiveInstance] = useState<CueCanvasCore>();\n const [activeTool, setActiveTool] = useState<TCueCanvasTool>('pen');\n const [activeColor, setActiveColor] = useState<TCueCanvasColors>(colors[0] as TCueCanvasColors);\n const contextValue = useMemo(\n () => ({\n activeInstance: activeInstance,\n setActiveInstance: setActiveInstance,\n activeTool: activeTool,\n setActiveTool: setActiveTool,\n activeColor,\n setActiveColor,\n }),\n [activeColor, activeInstance, activeTool],\n );\n\n return <CueCanvasContext.Provider value={contextValue}>{children}</CueCanvasContext.Provider>;\n },\n);\n\nexport default CueCanvasProvider;\n"],"names":["CueCanvasProvider","memo","children","userType","colors","useMemo","getColorsForUser","activeInstance","setActiveInstance","useState","activeTool","setActiveTool","activeColor","setActiveColor","contextValue","CueCanvasContext","CueCanvasProvider$1"],"mappings":";;;;AAUA,MAAMA,IAAqEC;AAAA,EACzE,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AACpB,UAAAC,IAASC,EAAQ,MAAMC,EAAiBH,CAAQ,GAAG,CAACA,CAAQ,CAAC,GAE7D,CAACI,GAAgBC,CAAiB,IAAIC,EAAwB,GAC9D,CAACC,GAAYC,CAAa,IAAIF,EAAyB,KAAK,GAC5D,CAACG,GAAaC,CAAc,IAAIJ,EAA2BL,EAAO,CAAC,CAAqB,GACxFU,IAAeT;AAAA,MACnB,OAAO;AAAA,QACL,gBAAAE;AAAA,QACA,mBAAAC;AAAA,QACA,YAAAE;AAAA,QACA,eAAAC;AAAA,QACA,aAAAC;AAAA,QACA,gBAAAC;AAAA,MAAA;AAAA,MAEF,CAACD,GAAaL,GAAgBG,CAAU;AAAA,IAAA;AAG1C,6BAAQK,EAAiB,UAAjB,EAA0B,OAAOD,GAAe,UAAAZ,EAAS,CAAA;AAAA,EACnE;AACF,GAEAc,IAAehB;"}

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

@@ -7,7 +7,7 @@ import { useCueCanvasActions as M } from "./hooks/use-cue-canvas-actions.js";
 import T from "./hooks/use-height-extender.js";
 const U = V(
   ({
-    responseId: w,
+    canvasId: w,
     width: u,
     height: t,
     canRender: f,
@@ -39,18 +39,18 @@ const U = V(
       t && e.current && e.current.resetViewPort();
     }, [t, u]), o(() => {
       if (f && l && !e.current) {
-        const n = k(u, t, s, C), P = z(s, C), v = new j(
-          i,
-          p,
-          E,
-          x,
-          I,
-          t,
-          A,
-          w,
-          C,
-          s
-        );
+        const n = k(u, t, s, C), P = z(s, C), v = new j({
+          onPublish: i,
+          onSubscribe: p,
+          onUpdateActiveTool: E,
+          onUpdateHeight: x,
+          uploadImageToS3: I,
+          height: t,
+          userId: A,
+          canvasId: w,
+          userType: C,
+          renderAs: s
+        });
         (async () => {
           await v.create({
             canvasElementRef: m,

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

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

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

@@ -42,7 +42,7 @@ const S = e(u)(({
       }
     `}
   `;
-}), W = e(g)(({
+}), G = e(g)(({
   theme: r,
   $active: o,
   $activeColor: t,
@@ -79,7 +79,7 @@ const S = e(u)(({
       }
     `}
   `;
-}), w = e(h)(({
+}), W = e(h)(({
   $active: r,
   theme: o,
   $activeColor: t,
@@ -123,7 +123,7 @@ const S = e(u)(({
       }
     `}
   `;
-}), G = e(x)(({
+}), Y = e(x)(({
   $active: r,
   theme: o,
   $activeColor: t,
@@ -169,7 +169,7 @@ const S = e(u)(({
       }
     `}
   `;
-}), Y = e(f)`
+}), w = e(f)`
   width: 20px;
   height: 20px;
 `, H = e(m)`
@@ -187,6 +187,7 @@ const S = e(u)(({
       border: 1px solid ${t.WHITE};
       border-radius: 50%;
       transition: all 100ms ease-in-out;
+      border: 1px solid ${t.GREY_1};
       ${!o && l`
         &:hover {
@@ -276,11 +277,11 @@ export {
   U as RedoIcon,
   T as StyledCheckIcon,
   V as StyledDownIcon,
-  w as StyledHighlighterWrapper,
-  Y as StyledLockIcon,
+  W as StyledHighlighterWrapper,
+  w as StyledLockIcon,
   S as StyledPencilIcon,
-  W as StyledRulerIcon,
-  G as StyledSketchWrapper,
+  G as StyledRulerIcon,
+  Y as StyledSketchWrapper,
   H as StyledUnlockIcon,
   P as StyledWrapper
 };

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

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

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

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

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

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

package/dist/features/post-game-stats/streak/streak-styled.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import i, { keyframes as r, css as s } from "styled-components";
 import { GAME_LAUNCHER_SIZE as t } from "../../circle-games/game-launcher/comps/card-container/constants.js";
 import { GAME_LAUNCHER_ASSET_PADDING as n } from "../../circle-games/game-launcher/comps/segmented-game-card/constants.js";
-import c from "../../ui/text/text.js";
-import { STREAK_TOP_GREEN_SEGMENT_HEIGHT as o, STREAK_CONTAINER_TOP_OFFSET as x } from "./constants.js";
-const m = 50 * 84 / 100, p = r`
+import d from "../../ui/text/text.js";
+import { STREAK_TOP_GREEN_SEGMENT_HEIGHT as a, STREAK_CONTAINER_TOP_OFFSET as x } from "./constants.js";
+const f = 50 * 84 / 100, p = r`
   0%{
     opacity: 0;
   }
@@ -17,7 +17,7 @@ const m = 50 * 84 / 100, p = r`
   100%{
     opacity: 0;
   }
-`, S = i.div`
+`, u = i.div`
   height: ${t}px;
   width: ${t}px;
   background: transparent;
@@ -25,24 +25,24 @@ const m = 50 * 84 / 100, p = r`
   justify-content: center;
   align-items: center;
   position: relative;
-`, u = i.div`
+`, y = i.div`
   position: absolute;
   border-radius: ${Math.ceil((t + n) / 2)}px;
   height: ${t + n}px;
   width: ${t + n}px;
   z-index: 0;
-`, y = i.div`
+`, S = i.div`
   height: ${t + n}px;
   width: ${t + n}px;
   position: absolute;
   z-index: 2;
 `, _ = i.div`
   position: absolute;
-  top: ${o}px;
+  top: ${a}px;
   z-index: 2;
-  height: ${t - o - x}px;
-  animation: ${({ $animationType: e, $duration: a }) => s`
-    ${e === "fadein" ? p : l} ${a}ms linear forwards
+  height: ${t - a - x}px;
+  animation: ${({ $animationType: e, $duration: o }) => s`
+    ${e === "fadein" ? p : l} ${o}ms linear forwards
   `};
   overflow: hidden;
   display: flex;
@@ -53,10 +53,11 @@ const m = 50 * 84 / 100, p = r`
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: ${(t - o) * 2}px;
+  justify-content: center;
+  height: ${(t - a) * 2}px;
   transition: ${({ $translateDuration: e }) => `all ${e}ms linear`};
   transform: ${({ $translate: e }) => e ? "translateY(-100%)" : "translateY(0%)"};
-`, T = i(c)`
+`, T = i(d)`
   font-size: 123px;
   line-height: 123px;
   text-align: center;
@@ -68,15 +69,15 @@ const m = 50 * 84 / 100, p = r`
 `, k = i.div`
   z-index: 2;
   opacity: 0;
-  animation: ${({ $animationType: e, $duration: a, $delay: d }) => s`
-    ${e === "fadein" ? p : l} ${a}ms ${d}ms ease forwards
+  animation: ${({ $animationType: e, $duration: o, $delay: c }) => s`
+    ${e === "fadein" ? p : l} ${o}ms ${c}ms ease forwards
   `};
-  transform: translateY(${(t + m) * 84 / 200 + 25}px);
+  transform: translateY(${(t + f) * 84 / 200 + 25}px);
 `;
 export {
-  u as SVGImgContainer,
-  S as Streak,
-  y as StreakLottieView,
+  y as SVGImgContainer,
+  u as Streak,
+  S as StreakLottieView,
   T as StreakValue,
   A as StreakValueContainer,
   _ as StreakValueWrapper,

package/dist/features/post-game-stats/streak/streak-styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"streak-styled.js","sources":["../../../../src/features/post-game-stats/streak/streak-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { GAME_LAUNCHER_ASSET_PADDING } from '../../circle-games/game-launcher/comps/segmented-game-card/constants';\nimport Text from '../../ui/text/text';\nimport { STREAK_CONTAINER_TOP_OFFSET, STREAK_TOP_GREEN_SEGMENT_HEIGHT } from './constants';\n\nconst MASK_PADDING = (50 * 84) / 100;\n\nconst fadeIn = keyframes`\n 0%{\n opacity: 0;\n }\n 100%{\n opacity: 1;\n }\n`;\n\nconst fadeOut = keyframes`\n 0%{\n opacity: 1;\n }\n 100%{\n opacity: 0;\n }\n`;\n\nexport const Streak = styled.div`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n background: transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n`;\n\nexport const SVGImgContainer = styled.div`\n position: absolute;\n border-radius: ${Math.ceil((GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING) / 2)}px;\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n z-index: 0;\n`;\n\nexport const StreakLottieView = styled.div`\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n position: absolute;\n z-index: 2;\n`;\n\nexport const StreakValueWrapper = styled.div<{\n $duration: number;\n $animationType: 'fadein' \| 'fadeout';\n}>`\n position: absolute;\n top: ${STREAK_TOP_GREEN_SEGMENT_HEIGHT}px;\n z-index: 2;\n height: ${GAME_LAUNCHER_SIZE - STREAK_TOP_GREEN_SEGMENT_HEIGHT - STREAK_CONTAINER_TOP_OFFSET}px;\n animation: ${({ $animationType, $duration }) => css`\n ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms linear forwards\n `};\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\nexport const StreakValueContainer = styled.div<{\n $translate: boolean;\n $translateDuration: number;\n}>`\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n height: ${(GAME_LAUNCHER_SIZE - STREAK_TOP_GREEN_SEGMENT_HEIGHT) * 2}px;\n transition: ${({ $translateDuration }) => `all ${$translateDuration}ms linear`};\n transform: ${({ $translate }) => ($translate ? 'translateY(-100%)' : 'translateY(0%)')};\n`;\n\nexport const StreakValue = styled(Text)`\n font-size: 123px;\n line-height: 123px;\n text-align: center;\n height: 100%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const TextWrapper = styled.div<{\n $duration: number;\n $delay: number;\n $animationType: 'fadein' \| 'fadeout';\n}>`\n z-index: 2;\n opacity: 0;\n animation: ${({ $animationType, $duration, $delay }) => css`\n ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms ${$delay}ms ease forwards\n `};\n transform: translateY(${((GAME_LAUNCHER_SIZE + MASK_PADDING) * 84) / 200 + 25}px);\n`;\n"],"names":["MASK_PADDING","fadeIn","keyframes","fadeOut","Streak","styled","GAME_LAUNCHER_SIZE","SVGImgContainer","GAME_LAUNCHER_ASSET_PADDING","StreakLottieView","StreakValueWrapper","STREAK_TOP_GREEN_SEGMENT_HEIGHT","STREAK_CONTAINER_TOP_OFFSET","$animationType","$duration","css","StreakValueContainer","$translateDuration","$translate","StreakValue","Text","TextWrapper","$delay"],"mappings":";;;;;AAOA,MAAMA,IAAgB,KAAK,KAAM,KAE3BC,IAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAUD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASHE,IAASC,EAAO;AAAA,YACjBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQhBC,IAAkBF,EAAO;AAAA;AAAA,mBAEnB,KAAK,MAAMC,IAAqBE,KAA+B,CAAC,CAAC;AAAA,YACxEF,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA,GAI9CC,IAAmBJ,EAAO;AAAA,YAC3BC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA,GAK9CE,IAAqBL,EAAO;AAAA;AAAA,SAKhCM,CAA+B;AAAA;AAAA,YAE5BL,IAAqBK,IAAkCC,CAA2B;AAAA,eAC/E,CAAC,EAAE,gBAAAC,GAAgB,WAAAC,EAAA,MAAgBC;AAAA,MAC5CF,MAAmB,WAAWZ,IAASE,CAAO,IAAIW,CAAS;AAAA,GAC9D;AAAA;AAAA;AAAA;AAAA;AAAA,GAOUE,IAAuBX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,~~aAQ9BC~~,IAAqBK,KAAmC,CAAC;AAAA,gBACtD,CAAC,EAAE,oBAAAM,EAAyB,MAAA,OAAOA,CAAkB,WAAW;AAAA,eACjE,CAAC,EAAE,YAAAC,EAAA,MAAkBA,IAAa,sBAAsB,gBAAiB;AAAA,GAG3EC,IAAcd,EAAOe,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWzBC,IAAchB,EAAO;AAAA;AAAA;AAAA,eAOnB,CAAC,EAAE,gBAAAQ,GAAgB,WAAAC,GAAW,QAAAQ,QAAaP;AAAA,MACpDF,MAAmB,WAAWZ,IAASE,CAAO,IAAIW,CAAS,MAAMQ,CAAM;AAAA,GAC1E;AAAA,2BACyBhB,IAAqBN,KAAgB,KAAM,MAAM,EAAE;AAAA;"}
1	+ {"version":3,"file":"streak-styled.js","sources":["../../../../src/features/post-game-stats/streak/streak-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { GAME_LAUNCHER_ASSET_PADDING } from '../../circle-games/game-launcher/comps/segmented-game-card/constants';\nimport Text from '../../ui/text/text';\nimport { STREAK_CONTAINER_TOP_OFFSET, STREAK_TOP_GREEN_SEGMENT_HEIGHT } from './constants';\n\nconst MASK_PADDING = (50 * 84) / 100;\n\nconst fadeIn = keyframes`\n 0%{\n opacity: 0;\n }\n 100%{\n opacity: 1;\n }\n`;\n\nconst fadeOut = keyframes`\n 0%{\n opacity: 1;\n }\n 100%{\n opacity: 0;\n }\n`;\n\nexport const Streak = styled.div`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n background: transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n`;\n\nexport const SVGImgContainer = styled.div`\n position: absolute;\n border-radius: ${Math.ceil((GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING) / 2)}px;\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n z-index: 0;\n`;\n\nexport const StreakLottieView = styled.div`\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n position: absolute;\n z-index: 2;\n`;\n\nexport const StreakValueWrapper = styled.div<{\n $duration: number;\n $animationType: 'fadein' \| 'fadeout';\n}>`\n position: absolute;\n top: ${STREAK_TOP_GREEN_SEGMENT_HEIGHT}px;\n z-index: 2;\n height: ${GAME_LAUNCHER_SIZE - STREAK_TOP_GREEN_SEGMENT_HEIGHT - STREAK_CONTAINER_TOP_OFFSET}px;\n animation: ${({ $animationType, $duration }) => css`\n ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms linear forwards\n `};\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\nexport const StreakValueContainer = styled.div<{\n $translate: boolean;\n $translateDuration: number;\n}>`\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: ${(GAME_LAUNCHER_SIZE - STREAK_TOP_GREEN_SEGMENT_HEIGHT) * 2}px;\n transition: ${({ $translateDuration }) => `all ${$translateDuration}ms linear`};\n transform: ${({ $translate }) => ($translate ? 'translateY(-100%)' : 'translateY(0%)')};\n`;\n\nexport const StreakValue = styled(Text)`\n font-size: 123px;\n line-height: 123px;\n text-align: center;\n height: 100%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const TextWrapper = styled.div<{\n $duration: number;\n $delay: number;\n $animationType: 'fadein' \| 'fadeout';\n}>`\n z-index: 2;\n opacity: 0;\n animation: ${({ $animationType, $duration, $delay }) => css`\n ${$animationType === 'fadein' ? fadeIn : fadeOut} ${$duration}ms ${$delay}ms ease forwards\n `};\n transform: translateY(${((GAME_LAUNCHER_SIZE + MASK_PADDING) * 84) / 200 + 25}px);\n`;\n"],"names":["MASK_PADDING","fadeIn","keyframes","fadeOut","Streak","styled","GAME_LAUNCHER_SIZE","SVGImgContainer","GAME_LAUNCHER_ASSET_PADDING","StreakLottieView","StreakValueWrapper","STREAK_TOP_GREEN_SEGMENT_HEIGHT","STREAK_CONTAINER_TOP_OFFSET","$animationType","$duration","css","StreakValueContainer","$translateDuration","$translate","StreakValue","Text","TextWrapper","$delay"],"mappings":";;;;;AAOA,MAAMA,IAAgB,KAAK,KAAM,KAE3BC,IAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAUD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASHE,IAASC,EAAO;AAAA,YACjBC,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQhBC,IAAkBF,EAAO;AAAA;AAAA,mBAEnB,KAAK,MAAMC,IAAqBE,KAA+B,CAAC,CAAC;AAAA,YACxEF,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA,GAI9CC,IAAmBJ,EAAO;AAAA,YAC3BC,IAAqBE,CAA2B;AAAA,WACjDF,IAAqBE,CAA2B;AAAA;AAAA;AAAA,GAK9CE,IAAqBL,EAAO;AAAA;AAAA,SAKhCM,CAA+B;AAAA;AAAA,YAE5BL,IAAqBK,IAAkCC,CAA2B;AAAA,eAC/E,CAAC,EAAE,gBAAAC,GAAgB,WAAAC,EAAA,MAAgBC;AAAA,MAC5CF,MAAmB,WAAWZ,IAASE,CAAO,IAAIW,CAAS;AAAA,GAC9D;AAAA;AAAA;AAAA;AAAA;AAAA,GAOUE,IAAuBX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAS9BC,IAAqBK,KAAmC,CAAC;AAAA,gBACtD,CAAC,EAAE,oBAAAM,EAAyB,MAAA,OAAOA,CAAkB,WAAW;AAAA,eACjE,CAAC,EAAE,YAAAC,EAAA,MAAkBA,IAAa,sBAAsB,gBAAiB;AAAA,GAG3EC,IAAcd,EAAOe,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWzBC,IAAchB,EAAO;AAAA;AAAA;AAAA,eAOnB,CAAC,EAAE,gBAAAQ,GAAgB,WAAAC,GAAW,QAAAQ,QAAaP;AAAA,MACpDF,MAAmB,WAAWZ,IAASE,CAAO,IAAIW,CAAS,MAAMQ,CAAM;AAAA,GAC1E;AAAA,2BACyBhB,IAAqBN,KAAgB,KAAM,MAAM,EAAE;AAAA;"}

package/dist/features/ui/theme/tab.js CHANGED Viewed

@@ -45,6 +45,32 @@ const o = (a) => ({ sizes: {
       hover: 500,
       disabled: 400
     }
+  },
+  secondary: {
+    backgroundColorName: {
+      inactive: "BLACK",
+      active: "WHITE",
+      hover: "WHITE",
+      disabled: "GREY_1"
+    },
+    colorName: {
+      inactive: "WHITE",
+      active: "BLACK",
+      hover: "BLACK",
+      disabled: "BLACK_50"
+    },
+    borderColorName: {
+      inactive: "WHITE",
+      active: "WHITE",
+      hover: "BLACK",
+      disabled: "GREY_1"
+    },
+    fontWeight: {
+      inactive: 400,
+      active: 500,
+      hover: 500,
+      disabled: 400
+    }
   }
 } });
 export {

package/dist/features/ui/theme/tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab.js","sources":["../../../../src/features/ui/theme/tab.ts"],"sourcesContent":["import type { ITabSizeConfig, ITabVariantConfig, TTabSizes, TTabVariants } from '../types';\n\ninterface IGetTabConfig {\n (gutter: number): {\n sizes: Record<TTabSizes, ITabSizeConfig>;\n variants: Record<TTabVariants, ITabVariantConfig>;\n };\n}\n\nconst getTabConfig: IGetTabConfig = (gutter: number) => {\n const sizes: Record<TTabSizes, ITabSizeConfig> = {\n xsmall: {\n height: gutter * 1.625,\n paddingHorizontal: gutter * 0.5,\n textVariant: 'body3',\n },\n small: {\n height: gutter * 2,\n paddingHorizontal: gutter * 0.75,\n textVariant: 'body2',\n },\n regular: {\n height: gutter * 2.5,\n paddingHorizontal: gutter,\n textVariant: 'body1',\n },\n medium: {\n height: gutter * 3,\n paddingHorizontal: gutter,\n textVariant: 'body1',\n },\n };\n\n const variants: Record<TTabVariants, ITabVariantConfig> = {\n primary: {\n backgroundColorName: {\n inactive: 'WHITE',\n active: 'BLACK',\n hover: 'BLACK',\n disabled: 'GREY_1',\n },\n colorName: {\n inactive: 'BLACK',\n active: 'WHITE',\n hover: 'WHITE',\n disabled: 'BLACK_50',\n },\n borderColorName: {\n inactive: 'GREY_3',\n active: 'BLACK',\n hover: 'BLACK',\n disabled: 'GREY_1',\n },\n fontWeight: {\n inactive: 400,\n active: 500,\n hover: 500,\n disabled: 400,\n },\n },\n };\n\n return { sizes, variants };\n};\n\nexport default getTabConfig;\n"],"names":["getTabConfig","gutter"],"mappings":"AASM,MAAAA,IAA8B,CAACC,~~OAqD5B~~,EAAE,~~OApDwC~~;AAAA,EAC/C,QAAQ;AAAA,IACN,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAS;AAAA,IAC5B,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAS;AAAA,IAC5B,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,QAAQA,IAAS;AAAA,IACjB,mBAAmBA;AAAA,IACnB,aAAa;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,IACN,QAAQA,IAAS;AAAA,IACjB,mBAAmBA;AAAA,IACnB,aAAa;AAAA,EACf;AAAA,~~GAgCc~~,~~UA7B0C~~;AAAA,EACxD,SAAS;AAAA,IACP,qBAAqB;AAAA,MACnB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EACF;AAAA;"}
1	+ {"version":3,"file":"tab.js","sources":["../../../../src/features/ui/theme/tab.ts"],"sourcesContent":["import type { ITabSizeConfig, ITabVariantConfig, TTabSizes, TTabVariants } from '../types';\n\ninterface IGetTabConfig {\n (gutter: number): {\n sizes: Record<TTabSizes, ITabSizeConfig>;\n variants: Record<TTabVariants, ITabVariantConfig>;\n };\n}\n\nconst getTabConfig: IGetTabConfig = (gutter: number) => {\n const sizes: Record<TTabSizes, ITabSizeConfig> = {\n xsmall: {\n height: gutter * 1.625,\n paddingHorizontal: gutter * 0.5,\n textVariant: 'body3',\n },\n small: {\n height: gutter * 2,\n paddingHorizontal: gutter * 0.75,\n textVariant: 'body2',\n },\n regular: {\n height: gutter * 2.5,\n paddingHorizontal: gutter,\n textVariant: 'body1',\n },\n medium: {\n height: gutter * 3,\n paddingHorizontal: gutter,\n textVariant: 'body1',\n },\n };\n\n const variants: Record<TTabVariants, ITabVariantConfig> = {\n primary: {\n backgroundColorName: {\n inactive: 'WHITE',\n active: 'BLACK',\n hover: 'BLACK',\n disabled: 'GREY_1',\n },\n colorName: {\n inactive: 'BLACK',\n active: 'WHITE',\n hover: 'WHITE',\n disabled: 'BLACK_50',\n },\n borderColorName: {\n inactive: 'GREY_3',\n active: 'BLACK',\n hover: 'BLACK',\n disabled: 'GREY_1',\n },\n fontWeight: {\n inactive: 400,\n active: 500,\n hover: 500,\n disabled: 400,\n },\n },\n secondary: {\n backgroundColorName: {\n inactive: 'BLACK',\n active: 'WHITE',\n hover: 'WHITE',\n disabled: 'GREY_1',\n },\n colorName: {\n inactive: 'WHITE',\n active: 'BLACK',\n hover: 'BLACK',\n disabled: 'BLACK_50',\n },\n borderColorName: {\n inactive: 'WHITE',\n active: 'WHITE',\n hover: 'BLACK',\n disabled: 'GREY_1',\n },\n fontWeight: {\n inactive: 400,\n active: 500,\n hover: 500,\n disabled: 400,\n },\n },\n };\n\n return { sizes, variants };\n};\n\nexport default getTabConfig;\n"],"names":["getTabConfig","gutter"],"mappings":"AASM,MAAAA,IAA8B,CAACC,OA+E5B,EAAE,OA9EwC;AAAA,EAC/C,QAAQ;AAAA,IACN,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAS;AAAA,IAC5B,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAS;AAAA,IAC5B,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,QAAQA,IAAS;AAAA,IACjB,mBAAmBA;AAAA,IACnB,aAAa;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,IACN,QAAQA,IAAS;AAAA,IACjB,mBAAmBA;AAAA,IACnB,aAAa;AAAA,EACf;AAAA,GA0Dc,UAvD0C;AAAA,EACxD,SAAS;AAAA,IACP,qBAAqB;AAAA,MACnB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT,qBAAqB;AAAA,MACnB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EACF;AAAA;"}