@cuemath/leap 3.1.10-j2 → 3.1.10

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

@@ -277,16 +277,6 @@ export declare const CopyIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
 export declare const CountdownTimer: FC<ICountdownTimer>;
 
-export declare const COUNTRY_CODE_MAP: {
-    id: string;
-    code: string;
-    label: string;
-    value: string;
-    icon: string;
-    url: string;
-    geoIPCountryCode: string;
-}[];
-
 declare const COURSE_STREAMS: {
     readonly SAT_DEMO: "SAT-DEMO";
     readonly SAT_MATH: "SAT-MATH";
@@ -2360,6 +2350,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;
 }
@@ -3565,6 +3594,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;
@@ -4128,6 +4165,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>>;
@@ -5845,6 +5887,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>>;