@cuemath/leap 3.1.5 → 3.1.6-gg2

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);\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,CAAc,GAClBG;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 = <\n  T extends Record<string, unknown> | undefined = undefined,\n>(): 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,MAE9B;AACR,QAAM,EAAE,aAAAC,EAAA,IAAgBC,EAAWC,CAAY;AAExC,SAAAF;AACT,GAEAG,IAAeJ;"}

package/dist/index.d.ts

@@ -2360,6 +2360,45 @@ declare interface IMilestoneWidgetResourcesProps extends INodeCardCallbacks {
     canUpdatePlan?: boolean;
 }
 
+/**
+ * Configuration for a modal component
+ */
+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: (name: string, params?: Record<string, unknown>) => 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;
 }
@@ -3564,6 +3603,14 @@ declare interface IUseIsTabBlocked {
     (): IMultiTabBlockerContextValue;
 }
 
+declare interface IUseModalActions {
+    (): Pick<IModalContext, 'openModal' | 'closeModal' | 'isClosing'>;
+}
+
+declare interface IUseModalParams {
+    <T extends Record<string, unknown> | undefined = undefined>(): T;
+}
+
 declare interface IusePointerSyncMethods {
     publishMouseMove?: (data: IPointerData) => void;
     susbcribeMouseMove?: (qrId: string, cb: (data: IPointerData) => void) => void;
@@ -4116,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>>;
@@ -5830,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>>;