@cuemath/leap 3.1.7-aa4 → 3.1.7-gg1

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

@@ -1,17 +1,16 @@
 import { jsx as r } from "react/jsx-runtime";
-import { memo as $, useCallback as d, useMemo as h } from "react";
-import f from "../../ui/buttons/clickable/clickable.js";
+import { memo as $, useCallback as d, useMemo as C } from "react";
+import h from "../../ui/buttons/clickable/clickable.js";
 import l from "../../ui/layout/flex-view.js";
-import { getColorsForUser as p } from "../cue-canvas-helpers.js";
-import { ColorPicker as u, StyledCheckIcon as g } from "../cue-cavas-styled.js";
-import { useCueCanvasActions as k } from "../hooks/use-cue-canvas-actions.js";
-const j = $((c) => {
-  const { activeInstance: t } = k(), { setActiveColor: i, activeColor: n, userType: s, renderAs: o } = c, a = d(
+import { getColorsForUser as f } from "../cue-canvas-helpers.js";
+import { ColorPicker as p, StyledCheckIcon as u } from "../cue-cavas-styled.js";
+const y = $((c) => {
+  const { setActiveColor: t, activeColor: i, userType: n, renderAs: o } = c, s = d(
     (e) => {
-      i(e), t == null || t.setColor(e);
+      t(e);
     },
-    [t, i]
-  ), m = h(() => p(s, o), [s, o]);
+    [t]
+  ), a = C(() => f(n, o), [n, o]);
   return /* @__PURE__ */ r(
     l,
     {
@@ -19,10 +18,10 @@ const j = $((c) => {
       $flexWrap: !0,
       $width: o === "canvas" ? 66 : 200,
       $position: "relative",
-      children: m.map((e, C) => /* @__PURE__ */ r(
-        f,
+      children: a.map((e, m) => /* @__PURE__ */ r(
+        h,
         {
-          onClick: () => a(e),
+          onClick: () => s(e),
           label: `Color Picker - ${e}`,
           children: /* @__PURE__ */ r(
             l,
@@ -31,10 +30,10 @@ const j = $((c) => {
               $height: 22,
               $borderRadius: 11,
               $justifyContent: "center",
-              $background: n === e ? "BLACK" : "WHITE",
+              $background: i === e ? "BLACK" : "WHITE",
               $alignItems: "center",
               children: /* @__PURE__ */ r(
-                u,
+                p,
                 {
                   $width: 20,
                   $height: 20,
@@ -42,18 +41,18 @@ const j = $((c) => {
                   $color: e,
                   $alignItems: "center",
                   $justifyContent: "center",
-                  children: n === e && /* @__PURE__ */ r(g, {})
+                  children: i === e && /* @__PURE__ */ r(u, {})
                 }
               )
             }
           )
         },
-        C
+        m
       ))
     }
   );
 });
 export {
-  j as default
+  y as default
 };
 //# sourceMappingURL=color-palette.js.map

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 type { TUserTypes } from '../../ui/types';\nimport type { TCueCanvasColors, TRenderAs } from '../types/cue-canvas';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getColorsForUser } from '../cue-canvas-helpers';\nimport { StyledCheckIcon, ColorPicker } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\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 { activeInstance: cueCanvas } = useCueCanvasActions();\n  const { setActiveColor, activeColor, userType, renderAs } = props;\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","cueCanvas","useCueCanvasActions","setActiveColor","activeColor","userType","renderAs","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","FlexView","index","Clickable","ColorPicker","StyledCheckIcon"],"mappings":";;;;;;;AAkBM,MAAAA,IAAwCC,EAAK,CAASC,MAAA;AAC1D,QAAM,EAAE,gBAAgBC,EAAU,IAAIC,EAAoB,GACpD,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,GAAU,UAAAC,MAAaN,GACtDO,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAN,EAAeM,CAAK,GACpBR,KAAA,QAAAA,EAAW,SAASQ;AAAA,IACtB;AAAA,IACA,CAACR,GAAWE,CAAc;AAAA,EAAA,GAEtBO,IAASC,EAAQ,MAAMC,EAAiBP,GAAUC,CAAQ,GAAG,CAACD,GAAUC,CAAQ,CAAC;AAGrF,SAAA,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,WAAS;AAAA,MACT,QAAQR,MAAa,WAAW,KAAK;AAAA,MACrC,WAAU;AAAA,MAET,UAAOI,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,aAAaV,MAAgBK,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,UAAAL,MAAgBK,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 type { TUserTypes } from '../../ui/types';\nimport type { TCueCanvasColors, TRenderAs } from '../types/cue-canvas';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getColorsForUser } from '../cue-canvas-helpers';\nimport { StyledCheckIcon, ColorPicker } from '../cue-cavas-styled';\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 handleColorChange = useCallback(\n    (color: TCueCanvasColors) => {\n      setActiveColor(color);\n    },\n    [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","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,GACtDK,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAN,EAAeM,CAAK;AAAA,IACtB;AAAA,IACA,CAACN,CAAc;AAAA,EAAA,GAEXO,IAASC,EAAQ,MAAMC,EAAiBP,GAAUC,CAAQ,GAAG,CAACD,GAAUC,CAAQ,CAAC;AAGrF,SAAA,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,WAAS;AAAA,MACT,QAAQR,MAAa,WAAW,KAAK;AAAA,MACrC,WAAU;AAAA,MAET,UAAOI,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,aAAaV,MAAgBK,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,UAAAL,MAAgBK,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/toolbar.js

@@ -1,18 +1,18 @@
 import { jsx as a, jsxs as s } from "react/jsx-runtime";
-import { memo as c, useEffect as f } from "react";
+import { memo as f, useEffect as c } from "react";
 import l from "../../ui/layout/flex-view.js";
 import { getUserTools as p } from "../cue-canvas-helpers.js";
 import { useCueCanvasActions as u } from "../hooks/use-cue-canvas-actions.js";
-import v from "./color-picker-menu.js";
-import C from "./tool.js";
+import C from "./color-picker-menu.js";
+import v from "./tool.js";
 import x from "./whiteboard-toolbar.js";
-const b = c(({ userType: r, renderAs: o }) => {
-  const m = p(r, o), { activeInstance: t, activeTool: e, activeColor: i } = u();
-  return f(() => {
-    t && o === "canvas" && (i && t.setColor(i), e && t.setTool(e));
-  }, [i, e, t, o]), o === "whiteboard" ? /* @__PURE__ */ a(x, { tools: m, userType: r }) : /* @__PURE__ */ s(l, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", $flexGapX: 0.5, children: [
-    m.map((n) => /* @__PURE__ */ a(C, { tool: n, shouldAnimate: !0 }, n)),
-    /* @__PURE__ */ a(v, { userType: r, renderAs: "canvas" })
+const b = f(({ userType: t, renderAs: r }) => {
+  const m = p(t, r), { activeInstance: o, activeTool: e, activeColor: i } = u();
+  return c(() => {
+    o && (i && o.setColor(i), e && o.setTool(e));
+  }, [i, e, o, r]), r === "whiteboard" ? /* @__PURE__ */ a(x, { tools: m, userType: t }) : /* @__PURE__ */ s(l, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", $flexGapX: 0.5, children: [
+    m.map((n) => /* @__PURE__ */ a(v, { tool: n, shouldAnimate: !0 }, n)),
+    /* @__PURE__ */ a(C, { userType: t, renderAs: "canvas" })
   ] });
 }), k = b;
 export {

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 type { IToolbarProps } from '../types/toolbar';\n\nimport 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 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  useEffect(() => {\n    //This effect is used to set the active tool and color on the cueCanvas instance\n    // when user navigfate to differnet questions this is used to sync tool and color for the cueCanvas instance\n    // this is only needed for canvas as whiteboard will only have 1 instance\n    if (cueCanvas && renderAs === 'canvas') {\n      if (activeColor) {\n        cueCanvas.setColor(activeColor);\n      }\n\n      if (activeTool) {\n        cueCanvas.setTool(activeTool);\n      }\n    }\n  }, [activeColor, activeTool, cueCanvas, renderAs]);\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":";;;;;;;;AAWA,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,SAfAC,EAAU,MAAM;AAIV,IAAAJ,KAAaH,MAAa,aACxBK,KACFF,EAAU,SAASE,CAAW,GAG5BD,KACFD,EAAU,QAAQC,CAAU;AAAA,KAG/B,CAACC,GAAaD,GAAYD,GAAWH,CAAQ,CAAC,GAE7CA,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 type { IToolbarProps } from '../types/toolbar';\n\nimport 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 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  useEffect(() => {\n    if (cueCanvas) {\n      if (activeColor) {\n        cueCanvas.setColor(activeColor);\n      }\n\n      if (activeTool) {\n        cueCanvas.setTool(activeTool);\n      }\n    }\n  }, [activeColor, activeTool, cueCanvas, renderAs]);\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":";;;;;;;;AAWA,MAAMA,IAAmCC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AAClE,QAAAC,IAAQC,EAAaH,GAAUC,CAAQ,GACvC,EAAE,gBAAgBG,GAAW,YAAAC,GAAY,aAAAC,EAAA,IAAgBC;AAc/D,SAZAC,EAAU,MAAM;AACd,IAAIJ,MACEE,KACFF,EAAU,SAASE,CAAW,GAG5BD,KACFD,EAAU,QAAQC,CAAU;AAAA,KAG/B,CAACC,GAAaD,GAAYD,GAAWH,CAAQ,CAAC,GAE7CA,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;"}

package/dist/features/ui/modals/modal-context.js

@@ -0,0 +1,13 @@
+import { createContext as o } from "react";
+const e = o({
+  modal: null,
+  openModal: () => {
+  },
+  closeModal: () => {
+  },
+  isClosing: !1
+});
+export {
+  e as default
+};
+//# sourceMappingURL=modal-context.js.map

package/dist/features/ui/modals/modal-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-context.js","sources":["../../../../src/features/ui/modals/modal-context.ts"],"sourcesContent":["import type { IModalContext } from './modal-types';\n\nimport { createContext } from 'react';\n\n/**\n * Context for providing modal functionality throughout the application\n * Provides access to modal state and actions to open/close modals\n *\n * @example\n * // Usage with useContext\n * const { openModal, closeModal } = useContext(ModalContext);\n * openModal('modalName', { someParam: 'value' });\n */\nconst ModalContext = createContext<IModalContext>({\n  modal: null,\n  openModal: () => {},\n  closeModal: () => {},\n  isClosing: false,\n});\n\nexport default ModalContext;\n"],"names":["ModalContext","createContext"],"mappings":";AAaA,MAAMA,IAAeC,EAA6B;AAAA,EAChD,OAAO;AAAA,EACP,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,WAAW;AACb,CAAC;"}

package/dist/features/ui/modals/modal-helpers.js

@@ -0,0 +1,17 @@
+const e = () => {
+  const o = window.innerWidth > document.documentElement.clientWidth;
+  if (document.body.dataset.originalOverflow = document.body.style.overflow || "", o) {
+    const d = window.innerWidth - document.documentElement.clientWidth;
+    document.body.dataset.originalPadding = document.body.style.paddingRight || "";
+    const t = parseInt(window.getComputedStyle(document.body).paddingRight, 10) || 0;
+    document.body.style.paddingRight = `${t + d}px`;
+  }
+  document.body.style.overflow = "hidden", document.body.style.touchAction = "none";
+}, n = () => {
+  document.body.dataset.originalPadding !== void 0 && (document.body.style.paddingRight = document.body.dataset.originalPadding, delete document.body.dataset.originalPadding), document.body.dataset.originalOverflow !== void 0 ? (document.body.style.overflow = document.body.dataset.originalOverflow, delete document.body.dataset.originalOverflow) : document.body.style.overflow = "", document.body.style.touchAction = "";
+};
+export {
+  e as lockScroll,
+  n as unlockScroll
+};
+//# sourceMappingURL=modal-helpers.js.map

package/dist/features/ui/modals/modal-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-helpers.js","sources":["../../../../src/features/ui/modals/modal-helpers.ts"],"sourcesContent":["/**\n * Locks scrolling on the body element while preserving the scrollbar width to prevent layout shifts.\n * Stores original style values in data attributes for later restoration.\n */\nexport const lockScroll = (): void => {\n  // Calculate if scrollbar is present\n  const hasScrollbar = window.innerWidth > document.documentElement.clientWidth;\n\n  // Save original overflow state regardless\n  document.body.dataset.originalOverflow = document.body.style.overflow || '';\n\n  if (hasScrollbar) {\n    // Calculate scrollbar width\n    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n\n    // Save original padding\n    document.body.dataset.originalPadding = document.body.style.paddingRight || '';\n\n    // Get current padding if any\n    const currentPadding = parseInt(window.getComputedStyle(document.body).paddingRight, 10) || 0;\n\n    // Add padding to prevent content shift when scrollbar disappears\n    document.body.style.paddingRight = `${currentPadding + scrollbarWidth}px`;\n  }\n\n  // Lock scroll\n  document.body.style.overflow = 'hidden';\n  document.body.style.touchAction = 'none'; // Prevent touch scrolling on mobile\n};\n\n/**\n * Unlocks scrolling on the body element and restores original styles.\n * Uses stored data attributes from lockScroll to restore previous state.\n */\nexport const unlockScroll = (): void => {\n  // Restore original padding if it was set\n  if (document.body.dataset.originalPadding !== undefined) {\n    document.body.style.paddingRight = document.body.dataset.originalPadding;\n    delete document.body.dataset.originalPadding;\n  }\n\n  // Restore original overflow\n  if (document.body.dataset.originalOverflow !== undefined) {\n    document.body.style.overflow = document.body.dataset.originalOverflow;\n    delete document.body.dataset.originalOverflow;\n  } else {\n    document.body.style.overflow = '';\n  }\n\n  document.body.style.touchAction = '';\n};\n"],"names":["lockScroll","hasScrollbar","scrollbarWidth","currentPadding","unlockScroll"],"mappings":"AAIO,MAAMA,IAAa,MAAY;AAEpC,QAAMC,IAAe,OAAO,aAAa,SAAS,gBAAgB;AAKlE,MAFA,SAAS,KAAK,QAAQ,mBAAmB,SAAS,KAAK,MAAM,YAAY,IAErEA,GAAc;AAEhB,UAAMC,IAAiB,OAAO,aAAa,SAAS,gBAAgB;AAGpE,aAAS,KAAK,QAAQ,kBAAkB,SAAS,KAAK,MAAM,gBAAgB;AAGtE,UAAAC,IAAiB,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,cAAc,EAAE,KAAK;AAG5F,aAAS,KAAK,MAAM,eAAe,GAAGA,IAAiBD,CAAc;AAAA,EACvE;AAGS,WAAA,KAAK,MAAM,WAAW,UACtB,SAAA,KAAK,MAAM,cAAc;AACpC,GAMaE,IAAe,MAAY;AAEtC,EAAI,SAAS,KAAK,QAAQ,oBAAoB,WAC5C,SAAS,KAAK,MAAM,eAAe,SAAS,KAAK,QAAQ,iBAClD,OAAA,SAAS,KAAK,QAAQ,kBAI3B,SAAS,KAAK,QAAQ,qBAAqB,UAC7C,SAAS,KAAK,MAAM,WAAW,SAAS,KAAK,QAAQ,kBAC9C,OAAA,SAAS,KAAK,QAAQ,oBAEpB,SAAA,KAAK,MAAM,WAAW,IAGxB,SAAA,KAAK,MAAM,cAAc;AACpC;"}

package/dist/features/ui/modals/modal-provider.js

@@ -0,0 +1,48 @@
+import { jsxs as k, jsx as C } from "react/jsx-runtime";
+import { memo as E, useState as a, useCallback as M, useMemo as x, useEffect as u } from "react";
+import y from "./modal.js";
+import I from "./modal-context.js";
+import { lockScroll as S, unlockScroll as h } from "./modal-helpers.js";
+const D = 500, T = E(({ children: w, modals: d, isUserAuthenticated: t }) => {
+  const [o, c] = a(null), [f, v] = a(void 0), [s, r] = a(!1), m = M(
+    (n, l) => {
+      const i = d.find((P) => P.name === n);
+      if (!i)
+        throw new Error(`Modal with name "${n}" not found`);
+      if (i.isPrivate && !t)
+        throw new Error(
+          `Access violation: Modal "${n}" is private and user is not authenticated`
+        );
+      r(!1), c(i), v(l), S();
+    },
+    [t, d]
+  ), e = M(() => {
+    r(!0), h(), setTimeout(() => {
+      c(null), r(!1);
+    }, D);
+  }, []), p = x(
+    () => ({
+      modal: o,
+      modalParams: f,
+      openModal: m,
+      closeModal: e,
+      isClosing: s
+    }),
+    [o, f, m, e, s]
+  );
+  return u(() => {
+    !t && (o != null && o.isPrivate) && e();
+  }, [t, o, e]), u(() => {
+    const n = (l) => {
+      l.key === "Escape" && (o == null ? void 0 : o.isDismissable) !== !1 && !s && e();
+    };
+    return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
+  }, [o, e, s]), /* @__PURE__ */ k(I.Provider, { value: p, children: [
+    w,
+    o && /* @__PURE__ */ C(y, { modal: o, isClosing: s, onClose: e })
+  ] });
+}), O = T;
+export {
+  O as default
+};
+//# sourceMappingURL=modal-provider.js.map

package/dist/features/ui/modals/modal-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-provider.js","sources":["../../../../src/features/ui/modals/modal-provider.tsx"],"sourcesContent":["import type { IModal, IModalContext, IModalProviderProps } from './modal-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport Modal from './modal';\nimport ModalContext from './modal-context';\nimport { lockScroll, unlockScroll } from './modal-helpers';\n\nconst ANIMATION_DURATION_MS = 500; // Match the animation duration in modal.tsx\n\n/**\n * Provider component that manages modal state and provides modal context to child components\n */\nconst ModalProvider: FC<IModalProviderProps> = memo(({ children, modals, isUserAuthenticated }) => {\n  const [modal, setModal] = useState<IModal | null>(null);\n  const [modalParams, setModalParams] = useState<Record<string, unknown> | undefined>(undefined);\n  const [isClosing, setIsClosing] = useState(false);\n\n  /**\n   * Opens a modal by name with optional parameters\n   * Handles authentication check for private modals\n   */\n  const openModal = useCallback<IModalContext['openModal']>(\n    (modalName, newModalParams) => {\n      const newModal = modals.find(m => m.name === modalName);\n\n      if (!newModal) {\n        throw new Error(`Modal with name \"${modalName}\" not found`);\n      }\n\n      if (newModal.isPrivate && !isUserAuthenticated) {\n        throw new Error(\n          `Access violation: Modal \"${modalName}\" is private and user is not authenticated`,\n        );\n      }\n\n      setIsClosing(false);\n      setModal(newModal);\n      setModalParams(newModalParams as unknown as Record<string, unknown> | undefined);\n      lockScroll(); // Lock scroll while preserving scrollbar width\n    },\n    [isUserAuthenticated, modals],\n  );\n\n  const closeModal = useCallback(() => {\n    setIsClosing(true);\n    // Wait for the animation to complete before removing the modal\n    unlockScroll();\n    setTimeout(() => {\n      setModal(null);\n      setIsClosing(false);\n    }, ANIMATION_DURATION_MS);\n  }, []);\n\n  const modalContent = useMemo<IModalContext>(\n    () => ({\n      modal,\n      modalParams,\n      openModal,\n      closeModal,\n      isClosing,\n    }),\n    [modal, modalParams, openModal, closeModal, isClosing],\n  );\n\n  useEffect(() => {\n    if (!isUserAuthenticated && modal?.isPrivate) {\n      // If the modal is private and user is not authenticated, close it\n      closeModal();\n    }\n  }, [isUserAuthenticated, modal, closeModal]);\n\n  // Handle ESC key\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && modal?.isDismissable !== false && !isClosing) {\n        closeModal();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [modal, closeModal, isClosing]);\n\n  return (\n    <ModalContext.Provider value={modalContent}>\n      {children}\n      {modal && <Modal modal={modal} isClosing={isClosing} onClose={closeModal} />}\n    </ModalContext.Provider>\n  );\n});\n\nexport default ModalProvider;\n"],"names":["ANIMATION_DURATION_MS","ModalProvider","memo","children","modals","isUserAuthenticated","modal","setModal","useState","modalParams","setModalParams","isClosing","setIsClosing","openModal","useCallback","modalName","newModalParams","newModal","m","lockScroll","closeModal","unlockScroll","modalContent","useMemo","useEffect","handleKeyDown","e","jsxs","ModalContext","jsx","Modal","ModalProvider$1"],"mappings":";;;;;AASA,MAAMA,IAAwB,KAKxBC,IAAyCC,EAAK,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,qBAAAC,QAA0B;AACjG,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAwB,IAAI,GAChD,CAACC,GAAaC,CAAc,IAAIF,EAA8C,MAAS,GACvF,CAACG,GAAWC,CAAY,IAAIJ,EAAS,EAAK,GAM1CK,IAAYC;AAAA,IAChB,CAACC,GAAWC,MAAmB;AAC7B,YAAMC,IAAWb,EAAO,KAAK,CAAKc,MAAAA,EAAE,SAASH,CAAS;AAEtD,UAAI,CAACE;AACH,cAAM,IAAI,MAAM,oBAAoBF,CAAS,aAAa;AAGxD,UAAAE,EAAS,aAAa,CAACZ;AACzB,cAAM,IAAI;AAAA,UACR,4BAA4BU,CAAS;AAAA,QAAA;AAIzC,MAAAH,EAAa,EAAK,GAClBL,EAASU,CAAQ,GACjBP,EAAeM,CAAgE,GACpEG;IACb;AAAA,IACA,CAACd,GAAqBD,CAAM;AAAA,EAAA,GAGxBgB,IAAaN,EAAY,MAAM;AACnC,IAAAF,EAAa,EAAI,GAEJS,KACb,WAAW,MAAM;AACf,MAAAd,EAAS,IAAI,GACbK,EAAa,EAAK;AAAA,OACjBZ,CAAqB;AAAA,EAC1B,GAAG,CAAE,CAAA,GAECsB,IAAeC;AAAA,IACnB,OAAO;AAAA,MACL,OAAAjB;AAAA,MACA,aAAAG;AAAA,MACA,WAAAI;AAAA,MACA,YAAAO;AAAA,MACA,WAAAT;AAAA,IAAA;AAAA,IAEF,CAACL,GAAOG,GAAaI,GAAWO,GAAYT,CAAS;AAAA,EAAA;AAGvD,SAAAa,EAAU,MAAM;AACV,IAAA,CAACnB,MAAuBC,KAAA,QAAAA,EAAO,cAEtBc;EAEZ,GAAA,CAACf,GAAqBC,GAAOc,CAAU,CAAC,GAG3CI,EAAU,MAAM;AACR,UAAAC,IAAgB,CAACC,MAAqB;AAC1C,MAAIA,EAAE,QAAQ,aAAYpB,KAAA,gBAAAA,EAAO,mBAAkB,MAAS,CAACK,KAChDS;IACb;AAGK,kBAAA,iBAAiB,WAAWK,CAAa,GAEzC,MAAM,OAAO,oBAAoB,WAAWA,CAAa;AAAA,EAC/D,GAAA,CAACnB,GAAOc,GAAYT,CAAS,CAAC,GAG9B,gBAAAgB,EAAAC,EAAa,UAAb,EAAsB,OAAON,GAC3B,UAAA;AAAA,IAAAnB;AAAA,IACAG,KAAU,gBAAAuB,EAAAC,GAAA,EAAM,OAAAxB,GAAc,WAAAK,GAAsB,SAASS,GAAY;AAAA,EAC5E,EAAA,CAAA;AAEJ,CAAC,GAEDW,IAAe9B;"}

package/dist/features/ui/modals/modal-styled.js

@@ -0,0 +1,154 @@
+import o from "styled-components";
+const s = o.div(
+  ({ theme: { colors: a }, $isClosing: t }) => `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: ${a.BLACK_T_60};
+  backdrop-filter: blur(40px);
+  display: flex;
+  animation: ${t ? "backdropFadeOut" : "backdropFadeIn"} 0.2s ease-out forwards;
+  
+  @keyframes backdropFadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes backdropFadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+`
+), l = o.div(
+  ({ theme: { colors: a }, $isClosing: t, $width: i }) => `
+  position: relative;
+  align-self: center;
+  margin: 0 auto;
+  width: ${i};
+  background-color: ${a.WHITE_1};
+  border: 1px solid ${a.BLACK_1};
+  transform-origin: center center;
+  animation: ${t ? "modalDisappear" : "modalAppear"} 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
+  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);
+  
+  /* Responsive behavior for smaller screens */
+  @media (max-width: calc(${i} + 80px)) {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    border: none;
+  }
+  
+  @keyframes modalAppear {
+    0% {
+      opacity: 0;
+      transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);
+    }
+    100% {
+      opacity: 1;
+      transform: perspective(1200px) translateZ(0) translateY(0) scale(1);
+    }
+  }
+  
+  @keyframes modalDisappear {
+    0% {
+      opacity: 1;
+      transform: perspective(1200px) translateZ(0) translateY(0) scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);
+    }
+  }
+`
+), c = o.div(
+  ({ $modalWidth: a }) => `
+  max-height: calc(100vh - 142px);
+  overflow-y: auto;
+
+  @media (max-width: calc(${a} + 80px)) {
+    max-height: 100vh;
+  }
+}`
+), m = o.div(
+  ({ theme: { colors: a }, $modalWidth: t }) => `
+  position: absolute;
+  top: -56px;
+  right: -40px;
+  color: ${a.WHITE_1};
+  transition: all 0.2s ease;
+  
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  @media (max-width: calc(${t} + 80px)) {
+    top: 16px;
+    right: 16px;
+    color: ${a.BLACK_1};
+  }
+`
+), e = 720, r = 800, n = 500, d = o.div(
+  ({ $isClosing: a }) => `
+  position: absolute;
+  width: ${e}px;
+  height: 100%;
+  left: 50%;
+  margin-left: ${-(e / 2)}px;
+  clip-path: polygon(calc(50% - 100px) 0, calc(50% + 100px) 0, 100% 100%, 0 100%);
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  animation: openSpotlight;
+  animation-duration: ${r}ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+  opacity: 0;
+  ${a ? `
+      animation: closeSpotlight;
+      animation-duration: ${n}ms;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+      opacity: 1;
+    ` : ""}
+
+  @keyframes openSpotlight {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes closeSpotlight {
+    from {
+      transform: rotateY(0);
+    }
+    to {
+      transform: rotateY(90deg);
+    }
+  }
+`
+);
+export {
+  l as BaseModal,
+  c as BaseModalContent,
+  m as CloseButtonContainer,
+  s as ModalContainer,
+  d as SpotlightModal
+};
+//# sourceMappingURL=modal-styled.js.map

package/dist/features/ui/modals/modal-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-styled.js","sources":["../../../../src/features/ui/modals/modal-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nconst ModalContainer = styled.div<{ $isClosing?: boolean }>(\n  ({ theme: { colors }, $isClosing }) => `\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ${colors.BLACK_T_60};\n  backdrop-filter: blur(40px);\n  display: flex;\n  animation: ${$isClosing ? 'backdropFadeOut' : 'backdropFadeIn'} 0.2s ease-out forwards;\n  \n  @keyframes backdropFadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  \n  @keyframes backdropFadeOut {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n`,\n);\n\n/**\n * Base modal container with customizable width and animation state\n */\nconst BaseModal = styled.div<{\n  $isClosing?: boolean;\n  $width: string;\n}>(\n  ({ theme: { colors }, $isClosing, $width }) => `\n  position: relative;\n  align-self: center;\n  margin: 0 auto;\n  width: ${$width};\n  background-color: ${colors.WHITE_1};\n  border: 1px solid ${colors.BLACK_1};\n  transform-origin: center center;\n  animation: ${\n    $isClosing ? 'modalDisappear' : 'modalAppear'\n  } 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;\n  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);\n  \n  /* Responsive behavior for smaller screens */\n  @media (max-width: calc(${$width} + 80px)) {\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n    max-height: 100%;\n    border: none;\n  }\n  \n  @keyframes modalAppear {\n    0% {\n      opacity: 0;\n      transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n    }\n    100% {\n      opacity: 1;\n      transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n    }\n  }\n  \n  @keyframes modalDisappear {\n    0% {\n      opacity: 1;\n      transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n    }\n    100% {\n      opacity: 0;\n      transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n    }\n  }\n`,\n);\n\n/**\n * Scrollable content container inside the modal\n */\nconst BaseModalContent = styled.div<{ $modalWidth: string }>(\n  ({ $modalWidth }) => `\n  max-height: calc(100vh - 142px);\n  overflow-y: auto;\n\n  @media (max-width: calc(${$modalWidth} + 80px)) {\n    max-height: 100vh;\n  }\n}`,\n);\n\n/**\n * Container for the close button with responsive positioning\n */\nconst CloseButtonContainer = styled.div<{ $modalWidth: string }>(\n  ({ theme: { colors }, $modalWidth }) => `\n  position: absolute;\n  top: -56px;\n  right: -40px;\n  color: ${colors.WHITE_1};\n  transition: all 0.2s ease;\n  \n  &:hover {\n    transform: scale(1.05);\n  }\n\n  @media (max-width: calc(${$modalWidth} + 80px)) {\n    top: 16px;\n    right: 16px;\n    color: ${colors.BLACK_1};\n  }\n`,\n);\n\nconst spotlightWidth = 720;\nconst spotlightAnimationStartDuration = 800;\nconst spotlightAnimationEndDuration = 500;\n\nconst SpotlightModal = styled.div<{\n  $isClosing?: boolean;\n}>(\n  ({ $isClosing }) => `\n  position: absolute;\n  width: ${spotlightWidth}px;\n  height: 100%;\n  left: 50%;\n  margin-left: ${-(spotlightWidth / 2)}px;\n  clip-path: polygon(calc(50% - 100px) 0, calc(50% + 100px) 0, 100% 100%, 0 100%);\n  background: linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 1) 0%,\n    rgba(0, 0, 0, 0) 100%\n  );\n  animation: openSpotlight;\n  animation-duration: ${spotlightAnimationStartDuration}ms;\n  animation-timing-function: linear;\n  animation-fill-mode: forwards;\n  opacity: 0;\n  ${\n    $isClosing\n      ? `\n      animation: closeSpotlight;\n      animation-duration: ${spotlightAnimationEndDuration}ms;\n      animation-timing-function: linear;\n      animation-fill-mode: forwards;\n      opacity: 1;\n    `\n      : ''\n  }\n\n  @keyframes openSpotlight {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes closeSpotlight {\n    from {\n      transform: rotateY(0);\n    }\n    to {\n      transform: rotateY(90deg);\n    }\n  }\n`,\n);\n\nexport { ModalContainer, BaseModal, BaseModalContent, CloseButtonContainer, SpotlightModal };\n"],"names":["ModalContainer","styled","colors","$isClosing","BaseModal","$width","BaseModalContent","$modalWidth","CloseButtonContainer","spotlightWidth","spotlightAnimationStartDuration","spotlightAnimationEndDuration","SpotlightModal"],"mappings":";AAEA,MAAMA,IAAiBC,EAAO;AAAA,EAC5B,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAO,GAAG,YAAAC,EAAiB,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMnBD,EAAO,UAAU;AAAA;AAAA;AAAA,eAGxBC,IAAa,oBAAoB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBhE,GAKMC,IAAYH,EAAO;AAAA,EAIvB,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAU,GAAA,YAAAC,GAAY,QAAAE,QAAa;AAAA;AAAA;AAAA;AAAA,WAItCA,CAAM;AAAA,sBACKH,EAAO,OAAO;AAAA,sBACdA,EAAO,OAAO;AAAA;AAAA,eAGhCC,IAAa,mBAAmB,aAClC;AAAA;AAAA;AAAA;AAAA,4BAI0BE,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BlC,GAKMC,IAAmBL,EAAO;AAAA,EAC9B,CAAC,EAAE,aAAAM,EAAA,MAAkB;AAAA;AAAA;AAAA;AAAA,4BAIKA,CAAW;AAAA;AAAA;AAAA;AAIvC,GAKMC,IAAuBP,EAAO;AAAA,EAClC,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAO,GAAG,aAAAK,EAAkB,MAAA;AAAA;AAAA;AAAA;AAAA,WAI/BL,EAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOGK,CAAW;AAAA;AAAA;AAAA,aAG1BL,EAAO,OAAO;AAAA;AAAA;AAG3B,GAEMO,IAAiB,KACjBC,IAAkC,KAClCC,IAAgC,KAEhCC,IAAiBX,EAAO;AAAA,EAG5B,CAAC,EAAE,YAAAE,EAAA,MAAiB;AAAA;AAAA,WAEXM,CAAc;AAAA;AAAA;AAAA,iBAGR,EAAEA,IAAiB,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQdC,CAA+B;AAAA;AAAA;AAAA;AAAA,IAKnDP,IACI;AAAA;AAAA,4BAEoBQ,CAA6B;AAAA;AAAA;AAAA;AAAA,QAKjD,EACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBF;"}

package/dist/features/ui/modals/modal.js

@@ -0,0 +1,19 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { memo as m } from "react";
+import h from "../../../assets/line-icons/icons/cross.js";
+import c from "../buttons/clickable/clickable.js";
+import { ModalContainer as r, SpotlightModal as f, BaseModal as C, CloseButtonContainer as p, BaseModalContent as $ } from "./modal-styled.js";
+const B = m(({ modal: n, isClosing: e = !1, onClose: s }) => {
+  const { renderAs: d, element: l, modalWidth: i, isDismissable: a } = n;
+  return d === "spotlight" ? /* @__PURE__ */ t(r, { $isClosing: e, children: [
+    /* @__PURE__ */ o(f, { $isClosing: e }),
+    l
+  ] }) : /* @__PURE__ */ o(r, { $isClosing: e, children: /* @__PURE__ */ t(C, { $isClosing: e, $width: i, children: [
+    a !== !1 && /* @__PURE__ */ o(p, { $modalWidth: i, children: /* @__PURE__ */ o(c, { label: "Close", onClick: s, children: /* @__PURE__ */ o(h, { width: 40, height: 40 }) }) }),
+    /* @__PURE__ */ o($, { $modalWidth: i, children: l })
+  ] }) });
+});
+export {
+  B as default
+};
+//# sourceMappingURL=modal.js.map

package/dist/features/ui/modals/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":["../../../../src/features/ui/modals/modal.tsx"],"sourcesContent":["import type { IModalProps } from './modal-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport Clickable from '../buttons/clickable/clickable';\nimport * as Styled from './modal-styled';\n\n/**\n * Modal component that renders modal content with close button\n * Handles animation state for entry and exit transitions\n */\nconst Modal: FC<IModalProps> = memo(({ modal, isClosing = false, onClose }) => {\n  const { renderAs, element, modalWidth, isDismissable } = modal;\n\n  if (renderAs === 'spotlight') {\n    return (\n      <Styled.ModalContainer $isClosing={isClosing}>\n        <Styled.SpotlightModal $isClosing={isClosing} />\n        {element}\n      </Styled.ModalContainer>\n    );\n  }\n\n  return (\n    <Styled.ModalContainer $isClosing={isClosing}>\n      <Styled.BaseModal $isClosing={isClosing} $width={modalWidth}>\n        {isDismissable !== false && (\n          <Styled.CloseButtonContainer $modalWidth={modalWidth}>\n            <Clickable label=\"Close\" onClick={onClose}>\n              <CrossIcon width={40} height={40} />\n            </Clickable>\n          </Styled.CloseButtonContainer>\n        )}\n        <Styled.BaseModalContent $modalWidth={modalWidth}>{element}</Styled.BaseModalContent>\n      </Styled.BaseModal>\n    </Styled.ModalContainer>\n  );\n});\n\nexport default Modal;\n"],"names":["Modal","memo","modal","isClosing","onClose","renderAs","element","modalWidth","isDismissable","jsxs","Styled.ModalContainer","jsx","Styled.SpotlightModal","Styled.BaseModal","Styled.CloseButtonContainer","Clickable","CrossIcon","Styled.BaseModalContent"],"mappings":";;;;;AAaM,MAAAA,IAAyBC,EAAK,CAAC,EAAE,OAAAC,GAAO,WAAAC,IAAY,IAAO,SAAAC,QAAc;AAC7E,QAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,YAAAC,GAAY,eAAAC,MAAkBN;AAEzD,SAAIG,MAAa,cAEZ,gBAAAI,EAAAC,GAAA,EAAsB,YAAYP,GACjC,UAAA;AAAA,IAAA,gBAAAQ,EAACC,GAAA,EAAsB,YAAYT,EAAW,CAAA;AAAA,IAC7CG;AAAA,EACH,EAAA,CAAA,IAKD,gBAAAK,EAAAD,GAAA,EAAsB,YAAYP,GACjC,UAAC,gBAAAM,EAAAI,GAAA,EAAiB,YAAYV,GAAW,QAAQI,GAC9C,UAAA;AAAA,IAAkBC,MAAA,wBAChBM,GAAA,EAA4B,aAAaP,GACxC,4BAACQ,GAAU,EAAA,OAAM,SAAQ,SAASX,GAChC,4BAACY,GAAU,EAAA,OAAO,IAAI,QAAQ,IAAI,GACpC,EACF,CAAA;AAAA,sBAEDC,GAAA,EAAwB,aAAaV,GAAa,UAAQD,GAAA;AAAA,EAAA,EAC7D,CAAA,EACF,CAAA;AAEJ,CAAC;"}

package/dist/features/ui/modals/use-modal-actions.js

@@ -0,0 +1,10 @@
+import { useContext as e } from "react";
+import n from "./modal-context.js";
+const l = () => {
+  const { openModal: o, closeModal: t, isClosing: s } = e(n);
+  return { openModal: o, closeModal: t, isClosing: s };
+}, c = l;
+export {
+  c as default
+};
+//# sourceMappingURL=use-modal-actions.js.map

package/dist/features/ui/modals/use-modal-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-modal-actions.js","sources":["../../../../src/features/ui/modals/use-modal-actions.ts"],"sourcesContent":["import type { IUseModalActions } from './modal-types';\n\nimport { useContext } from 'react';\n\nimport ModalContext from './modal-context';\n\nconst useModalActions: IUseModalActions = () => {\n  const { openModal, closeModal, isClosing } = useContext(ModalContext);\n\n  return { openModal, closeModal, isClosing };\n};\n\nexport default useModalActions;\n"],"names":["useModalActions","openModal","closeModal","isClosing","useContext","ModalContext","useModalActions$1"],"mappings":";;AAMA,MAAMA,IAAoC,MAAM;AAC9C,QAAM,EAAE,WAAAC,GAAW,YAAAC,GAAY,WAAAC,EAAU,IAAIC,EAAWC,CAAY;AAE7D,SAAA,EAAE,WAAAJ,GAAW,YAAAC,GAAY,WAAAC;AAClC,GAEAG,IAAeN;"}

package/dist/features/ui/modals/use-modal-params.js

@@ -0,0 +1,10 @@
+import { useContext as a } from "react";
+import t from "./modal-context.js";
+const r = () => {
+  const { modalParams: o } = a(t);
+  return o;
+}, m = r;
+export {
+  m as default
+};
+//# sourceMappingURL=use-modal-params.js.map

package/dist/features/ui/modals/use-modal-params.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-modal-params.js","sources":["../../../../src/features/ui/modals/use-modal-params.ts"],"sourcesContent":["import type { IUseModalParams } from './modal-types';\n\nimport { useContext } from 'react';\n\nimport ModalContext from './modal-context';\n\nconst useModalParams: IUseModalParams = <T = undefined>(): T => {\n  const { modalParams } = useContext(ModalContext);\n\n  return modalParams as T;\n};\n\nexport default useModalParams;\n"],"names":["useModalParams","modalParams","useContext","ModalContext","useModalParams$1"],"mappings":";;AAMA,MAAMA,IAAkC,MAAwB;AAC9D,QAAM,EAAE,aAAAC,EAAA,IAAgBC,EAAWC,CAAY;AAExC,SAAAF;AACT,GAEAG,IAAeJ;"}

package/dist/index.d.ts

@@ -807,8 +807,6 @@ declare interface ICalloutProps {
 declare interface ICanvasUpdateConfig {
     dimesion?: IViewport;
     gridName?: TCueCanvasGridName;
-    height?: number;
-    users?: Record<string, IUserCanvasConfig>;
 }
 
 declare interface ICascadeSelectValue {
@@ -2362,6 +2360,45 @@ declare interface IMilestoneWidgetResourcesProps extends INodeCardCallbacks {
     canUpdatePlan?: boolean;
 }
 
+/**
+ * Configuration for a modal component
+ */
+export declare interface IModal {
+    /** Unique identifier for the modal */
+    name: string;
+    /** Content to display inside the modal */
+    element: JSX.Element;
+    /** Rendering style of the modal */
+    renderAs?: 'modal' | 'fullscreen' | 'spotlight';
+    /** Whether the modal can be dismissed by clicking outside or ESC key (default: true) */
+    isDismissable?: boolean;
+    /** Whether the modal requires authentication to view (default: true) */
+    isPrivate?: boolean;
+    /** Width of the modal in CSS units (e.g., '500px', '80vw') */
+    modalWidth: string;
+}
+
+/**
+ * Context for managing modals throughout the application
+ */
+declare interface IModalContext {
+    /** Currently active modal or null if no modal is open */
+    modal: IModal | null;
+    /** Parameters passed to the modal when opened */
+    modalParams?: Record<string, unknown>;
+    /** Opens a modal by name with optional parameters */
+    openModal: <T = undefined>(name: string, params?: T) => void;
+    /** Closes the currently open modal */
+    closeModal: () => void;
+    /** Whether the modal is in the process of closing (for animation) */
+    isClosing?: boolean;
+}
+
+declare interface IModalProviderProps extends PropsWithChildren {
+    modals: IModal[];
+    isUserAuthenticated?: boolean;
+}
+
 export declare interface IMultiplayerWebGameProps extends IBaseWebGameProps, ISyncableWebGameProps {
     enablePlayerTurnIndicators?: boolean;
 }
@@ -3566,6 +3603,14 @@ declare interface IUseIsTabBlocked {
     (): IMultiTabBlockerContextValue;
 }
 
+declare interface IUseModalActions {
+    (): Pick<IModalContext, 'openModal' | 'closeModal' | 'isClosing'>;
+}
+
+declare interface IUseModalParams {
+    <T = undefined>(): T;
+}
+
 declare interface IusePointerSyncMethods {
     publishMouseMove?: (data: IPointerData) => void;
     susbcribeMouseMove?: (qrId: string, cb: (data: IPointerData) => void) => void;
@@ -3576,11 +3621,6 @@ declare interface IusePointerSyncProps {
     targetUserId?: string;
 }
 
-declare interface IUserCanvasConfig {
-    tool?: TCueCanvasTool;
-    color?: TCueCanvasColors;
-}
-
 export declare interface IUserChapterData {
     chapter_code: string;
     chapter_id: string;
@@ -4123,6 +4163,11 @@ export declare const MistakeIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
 export declare const Mobile: React.FC<React.SVGProps<SVGSVGElement>>;
 
+/**
+ * Provider component that manages modal state and provides modal context to child components
+ */
+export declare const ModalProvider: FC<IModalProviderProps>;
+
 export declare const MoreVerticalIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
 export declare const MultiTabBlocker: FC<PropsWithChildren<IMultiTabBlockerProps>>;
@@ -4786,12 +4831,8 @@ declare type TCreateOnPresubmit = (options: TOnPreSubmitOptions) => void;
 
 declare type TCueCanvasChangeDataObject = Record<string, TDrawingData[]>;
 
-declare type TCueCanvasColors = 'CANVAS_RED' | 'CANVAS_YELLOW' | 'CANVAS_GREEN' | 'CANVAS_BLUE' | 'CANVAS_PURPLE' | 'CANVAS_PINK' | 'LIGHT_ORANGE' | 'LIGHT_RED' | 'LIGHT_PINK' | 'LIGHT_PURPLE' | 'LIGHT_BLUE' | 'LIGHT_TEAL' | 'LIGHT_GREEN' | 'LIGHT_YELLOW' | 'WHITE' | 'ORANGE' | 'RED' | 'PINK' | 'PURPLE' | 'BLUE' | 'TEAL' | 'GREEN' | 'YELLOW' | 'GREY' | 'DARK_ORANGE' | 'DARK_RED' | 'DARK_PINK' | 'DARK_PURPLE' | 'DARK_BLUE' | 'DARK_TEAL' | 'DARK_GREEN' | 'DARK_YELLOW' | 'BLACK';
-
 declare type TCueCanvasGridName = 'none' | 'square2-grid' | 'square-checked' | 'square-dots' | 'square-grid' | 'tri-dots' | 'tri-grid' | 'tri2-dots' | 'tri2-grid';
 
-declare type TCueCanvasTool = 'pen' | 'eraser' | 'move' | 'undo' | 'redo' | 'marker' | 'highlighter' | 'ruler' | 'pan' | 'clearAll' | 'text' | 'equation' | 'grid' | 'home' | 'lock' | 'unlock' | 'zoomIn' | 'zoomOut' | 'upload' | 'download';
-
 declare type TCueProgramData = {
     description: string;
     id: string;
@@ -5841,6 +5882,10 @@ export declare const useIsTabBlocked: IUseIsTabBlocked;
 
 export declare const useJourney: () => IJourneyContext;
 
+export declare const useModalActions: IUseModalActions;
+
+export declare const useModalParams: IUseModalParams;
+
 export declare const usePointerSync: ({ userType, targetUserId, }: IusePointerSyncProps) => IusePointerSyncMethods;
 
 export declare const User2Icon: React.FC<React.SVGProps<SVGSVGElement>>;