catchup-library-web 2.5.8 → 2.5.10

package/dist/index.mjs

@@ -3454,41 +3454,33 @@ var ShowBodyMediaByContentType = ({
       case "TEXT":
         return /* @__PURE__ */ jsx20("div", { className: "mb-1 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ jsx20("p", { className: "whitespace-pre-wrap", children: retrieveValueParts(value) }) });
       case "IMAGE":
-        return /* @__PURE__ */ jsx20("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs13(
-          "div",
-          {
-            className: `${convertToPercentage(
-              size
-            )} rounded-catchup-xlarge relative`,
-            children: [
-              /* @__PURE__ */ jsx20(
+        return /* @__PURE__ */ jsx20("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx20(
+            BaseImage_default,
+            {
+              src: value,
+              alt: "body-image",
+              size: "custom",
+              className: "max-h-[50vh] max-w-full object-contain rounded-catchup-xlarge"
+            }
+          ),
+          /* @__PURE__ */ jsx20(
+            "div",
+            {
+              className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
+              onClick: () => handleOpenFullScreen(value),
+              children: /* @__PURE__ */ jsx20(
                 BaseImage_default,
                 {
-                  src: value,
-                  alt: "body-image",
+                  src: "/icons/arrow-up.webp",
+                  alt: "expand",
                   size: "custom",
-                  className: "w-full rounded-catchup-xlarge"
-                }
-              ),
-              /* @__PURE__ */ jsx20(
-                "div",
-                {
-                  className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
-                  onClick: () => handleOpenFullScreen(value),
-                  children: /* @__PURE__ */ jsx20(
-                    BaseImage_default,
-                    {
-                      src: "/icons/arrow-up.webp",
-                      alt: "expand",
-                      size: "custom",
-                      className: "w-full"
-                    }
-                  )
+                  className: "w-full"
                 }
               )
-            ]
-          }
-        ) });
+            }
+          )
+        ] }) });
       case "VIDEO":
         return /* @__PURE__ */ jsx20("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ jsx20(
           "video",
@@ -3593,7 +3585,7 @@ var ActivityBodyContent = ({
       key
     });
   }).filter(Boolean);
-  return /* @__PURE__ */ jsx21("div", { className: "flex flex-col justify-center items-center", children: processedBodies.map((body, index) => /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx21("div", { className: "flex flex-col justify-center items-center max-h-[40vh] overflow-y-auto", children: processedBodies.map((body, index) => /* @__PURE__ */ jsx21(
     ShowBodyMediaByContentType_default,
     {
       index,
@@ -3743,7 +3735,7 @@ var InputGroup = ({
         onRequestClose: () => {
           setShowMathConstructor(false);
         },
-        children: /* @__PURE__ */ jsx23("div", { className: "bg-white rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs14("div", { className: "p-6 space-y-6", children: [
+        children: /* @__PURE__ */ jsx23("div", { className: "bg-catchup-white rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs14("div", { className: "p-6 space-y-6", children: [
           /* @__PURE__ */ jsx23("div", { children: /* @__PURE__ */ jsx23("div", { className: "border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input", children: /* @__PURE__ */ jsx23(
             "math-field",
             {
@@ -3990,7 +3982,7 @@ var InputGroup = ({
       /* @__PURE__ */ jsx23(
         "div",
         {
-          className: `w-full border ${errorText ? "border-catchup-red shadow-error" : "border-catchup-gray-100"} rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${disabled ? "bg-catchup-lighter-gray" : "bg-white"}`,
+          className: `w-full border ${errorText ? "border-catchup-red shadow-error" : "border-catchup-gray-100"} rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${disabled ? "bg-catchup-lighter-gray" : "bg-catchup-white"}`,
           children: /* @__PURE__ */ jsx23(
             "input",
             {
@@ -4355,7 +4347,7 @@ var ShowMaterialMediaByContentType = ({
       src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ jsx25(
         "div",
         {
-          className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1 bg-white bg-opacity-80",
+          className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1 bg-catchup-white bg-opacity-80",
           onMouseEnter: (e) => {
             e.preventDefault();
           },
@@ -4776,13 +4768,13 @@ var FillInTheBlanksActivityMaterialContent = ({
               top: `${mousePosition.y}px`,
               transform: "translate(-50%, -50%)"
             },
-            children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx29("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx29("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx29(
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx29("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx29("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx29(
               InputWithSpecialExpression_default,
               {
                 value: draggedOption,
                 showSpecialOnly: false
               }
-            ) }) }) : /* @__PURE__ */ jsx29("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx29(
+            ) }) }) : /* @__PURE__ */ jsx29("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx29(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -4802,13 +4794,13 @@ var FillInTheBlanksActivityMaterialContent = ({
               top: `${touchPosition.y}px`,
               transform: "translate(-50%, -50%)"
             },
-            children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx29("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx29("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx29(
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx29("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx29("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ jsx29(
               InputWithSpecialExpression_default,
               {
                 value: draggedOption,
                 showSpecialOnly: false
               }
-            ) }) }) : /* @__PURE__ */ jsx29("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx29(
+            ) }) }) : /* @__PURE__ */ jsx29("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx29(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -5256,7 +5248,7 @@ var GroupingActivityMaterialContent = ({
           top: `${mousePosition.y}px`,
           transform: "translate(-50%, -50%)"
         },
-        children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx31("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx31("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ jsx31("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx31("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx31("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ jsx31("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
           (inputPart, index) => /* @__PURE__ */ jsx31(
             "span",
             {
@@ -5265,7 +5257,7 @@ var GroupingActivityMaterialContent = ({
             },
             index
           )
-        ) }) }) }) : /* @__PURE__ */ jsx31("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx31(
+        ) }) }) }) : /* @__PURE__ */ jsx31("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx31(
           ShowMaterialMediaByContentType_default,
           {
             contentType: contentMap.type,
@@ -5285,7 +5277,7 @@ var GroupingActivityMaterialContent = ({
           top: `${touchPosition.y}px`,
           transform: "translate(-50%, -50%)"
         },
-        children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx31("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx31("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ jsx31("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx31("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx31("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px]", children: /* @__PURE__ */ jsx31("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
           (inputPart, index) => /* @__PURE__ */ jsx31(
             "span",
             {
@@ -5294,7 +5286,7 @@ var GroupingActivityMaterialContent = ({
             },
             index
           )
-        ) }) }) }) : /* @__PURE__ */ jsx31("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx31(
+        ) }) }) }) : /* @__PURE__ */ jsx31("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx31(
           ShowMaterialMediaByContentType_default,
           {
             contentType: contentMap.type,
@@ -5685,7 +5677,7 @@ var MatchingActivityMaterialContent = ({
           top: `${mousePosition.y}px`,
           transform: "translate(-50%, -50%)"
         },
-        children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx33("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx33("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx33("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx33("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
           (inputPart, index) => /* @__PURE__ */ jsx33(
             "span",
             {
@@ -5694,7 +5686,7 @@ var MatchingActivityMaterialContent = ({
             },
             index
           )
-        ) }) }) }) : /* @__PURE__ */ jsx33("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx33(
+        ) }) }) }) : /* @__PURE__ */ jsx33("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx33(
           ShowMaterialMediaByContentType_default,
           {
             contentType: contentMap.type,
@@ -5714,7 +5706,7 @@ var MatchingActivityMaterialContent = ({
           top: `${touchPosition.y}px`,
           transform: "translate(-50%, -50%)"
         },
-        children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx33("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx33("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx33("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx33("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] px-4", children: /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(draggedValue).map(
           (inputPart, index) => /* @__PURE__ */ jsx33(
             "span",
             {
@@ -5723,7 +5715,7 @@ var MatchingActivityMaterialContent = ({
             },
             index
           )
-        ) }) }) }) : /* @__PURE__ */ jsx33("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx33(
+        ) }) }) }) : /* @__PURE__ */ jsx33("div", { className: "border-catchup-blue border-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx33(
           ShowMaterialMediaByContentType_default,
           {
             contentType: contentMap.type,
@@ -5853,14 +5845,15 @@ var MatchingActivityMaterialContent = ({
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;
 
 // src/components/activities/MatchingActivityContent.tsx
-import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 var MatchingActivityContent = ({
   answerMap,
   data,
   canAnswerQuestion,
   changeAnswer,
   isPreview,
-  showCorrectAnswer
+  showCorrectAnswer,
+  isFullScreen
 }) => {
   const contentMap = parseContentMapFromData(data);
   const matchingBodyMap = parseBodyMapFromData(data, "MATCHING");
@@ -5870,16 +5863,17 @@ var MatchingActivityContent = ({
     answerMap2[key] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs24(Fragment6, { children: [
-    /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs24("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ jsx34("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ jsx34(
       ActivityBodyContent_default,
       {
         bodyMap: matchingBodyMap,
         templateType: "MATCHING"
       }
-    ),
-    /* @__PURE__ */ jsx34(DividerLine_default, {}),
-    /* @__PURE__ */ jsx34(
+    ) }),
+    /* @__PURE__ */ jsx34("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx34(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx34("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx34(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx34("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx34(
       MatchingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5891,7 +5885,7 @@ var MatchingActivityContent = ({
         isPreview,
         showCorrectAnswer
       }
-    )
+    ) })
   ] });
 };
 var MatchingActivityContent_default = MatchingActivityContent;
@@ -6295,7 +6289,7 @@ var retrieveAcceptedFormats = (fileType) => {
 };
 
 // src/components/activities/material-contents/OpenEndedActivityMaterialContent.tsx
-import { Fragment as Fragment7, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 var OpenEndedActivityMaterialContent = ({
   answerMap,
   contentMap,
@@ -6352,7 +6346,7 @@ var OpenEndedActivityMaterialContent = ({
     const answerMapAnswer = answerMap2["ANSWER"];
     const extension = answerMapAnswer.split(".").pop();
     const fileType = retrieveFileTypeFromExtension(extension);
-    return /* @__PURE__ */ jsx39(Fragment7, { children: fileType === "IMAGE" ? /* @__PURE__ */ jsx39("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx39(Fragment6, { children: fileType === "IMAGE" ? /* @__PURE__ */ jsx39("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ jsx39(
       BaseImage_default,
       {
         src: answerMapAnswer,
@@ -6375,7 +6369,7 @@ var OpenEndedActivityMaterialContent = ({
       }
     ) });
   };
-  return /* @__PURE__ */ jsx39(Fragment7, { children: /* @__PURE__ */ jsxs29("div", { className: "", children: [
+  return /* @__PURE__ */ jsx39(Fragment6, { children: /* @__PURE__ */ jsxs29("div", { className: "", children: [
     /* @__PURE__ */ jsx39("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx39("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
     /* @__PURE__ */ jsx39("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx39(DividerLine_default, {}) }),
     contentMap.type === "TEXT" ? RenderTextContent(answerMap) : contentMap.type === "IMAGE" ? RenderImageContent(answerMap) : contentMap.type === "AUDIO" ? RenderAudioContent(answerMap) : null
@@ -6384,7 +6378,7 @@ var OpenEndedActivityMaterialContent = ({
 var OpenEndedActivityMaterialContent_default = OpenEndedActivityMaterialContent;
 
 // src/components/activities/OpenEndedActivityContent.tsx
-import { Fragment as Fragment8, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 var OpenEndedActivityContent = ({
   answerMap,
   data,
@@ -6415,7 +6409,7 @@ var OpenEndedActivityContent = ({
         )
       }
     ),
-    showMaterialContent ? /* @__PURE__ */ jsxs30(Fragment8, { children: [
+    showMaterialContent ? /* @__PURE__ */ jsxs30(Fragment7, { children: [
       /* @__PURE__ */ jsx40(
         "div",
         {
@@ -6439,45 +6433,8 @@ var OpenEndedActivityContent = ({
 var OpenEndedActivityContent_default = OpenEndedActivityContent;
 
 // src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
-import { useEffect as useEffect15, useState as useState24, useRef as useRef7 } from "react";
+import { useEffect as useEffect14, useState as useState23, useRef as useRef7 } from "react";
 import { InlineMath as InlineMath9 } from "react-katex";
-
-// src/hooks/useScreenSize.ts
-import { useState as useState23, useEffect as useEffect14 } from "react";
-var useScreenSize = () => {
-  const [containerSize, setContainerSize] = useState23({
-    width: 0,
-    height: 0
-  });
-  const [screenSize, setScreenSize] = useState23({
-    width: window.innerWidth,
-    height: window.innerHeight
-  });
-  useEffect14(() => {
-    const handleResize = () => {
-      setScreenSize({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
-      const container = document.getElementById("container");
-      if (!container) return;
-      const boundingClientRect = container.getBoundingClientRect();
-      setContainerSize({
-        width: boundingClientRect.width,
-        height: boundingClientRect.height
-      });
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-  return { screenSize, containerSize };
-};
-var useScreenSize_default = useScreenSize;
-
-// src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
 import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
 var OrderingActivityMaterialContent = ({
   uniqueValue,
@@ -6489,33 +6446,23 @@ var OrderingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedKey, setSelectedKey] = useState24(null);
-  const [draggedKey, setDraggedKey] = useState24(null);
-  const [dropTargetKey, setDropTargetKey] = useState24(null);
-  const [draggedElement, setDraggedElement] = useState24(
+  const [selectedKey, setSelectedKey] = useState23(null);
+  const [draggedKey, setDraggedKey] = useState23(null);
+  const [dropTargetKey, setDropTargetKey] = useState23(null);
+  const [draggedElement, setDraggedElement] = useState23(
     null
   );
   const dragElementRef = useRef7(null);
-  const [mousePosition, setMousePosition] = useState24({
+  const [mousePosition, setMousePosition] = useState23({
     x: 0,
     y: 0
   });
-  const [touchPosition, setTouchPosition] = useState24({
+  const [touchPosition, setTouchPosition] = useState23({
     x: 0,
     y: 0
   });
-  const { screenSize } = useScreenSize_default();
-  const [view, setView] = useState24("PC");
-  const [displayAnswerMap, setDisplayAnswerMap] = useState24(answerMap);
-  useEffect15(() => {
-    if (!screenSize) return;
-    if (screenSize.width <= 1024) {
-      setView("TABLET");
-    } else {
-      setView("PC");
-    }
-  }, [screenSize]);
-  useEffect15(() => {
+  const [displayAnswerMap, setDisplayAnswerMap] = useState23(answerMap);
+  useEffect14(() => {
     if (showCorrectAnswer) {
       const correctAnswerMap = {};
       Object.keys(answerMap).forEach((answerKey, index) => {
@@ -6533,26 +6480,6 @@ var OrderingActivityMaterialContent = ({
     }
     return "INCORRECT";
   };
-  const calculateMarginTop = (index) => {
-    if (index === 0) {
-      return 0;
-    } else if (index === 1) {
-      if (contentMap.type === "TEXT") {
-        return 65;
-      } else {
-        return 130;
-      }
-    } else if (index % 2 === 0) {
-      if (contentMap.type === "TEXT") {
-        return -65;
-      } else {
-        return -130;
-      }
-    } else if (index % 2 === 1) {
-      return 0;
-    }
-    return 0;
-  };
   const handleMouseDown = (e, materialKey) => {
     if (!checkCanAnswerQuestion()) return;
     e.preventDefault();
@@ -6641,7 +6568,7 @@ var OrderingActivityMaterialContent = ({
               top: `${mousePosition.y}px`,
               transform: "translate(-50%, -50%)"
             },
-            children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx41("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx41("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx41("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx41("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               materialMap[displayAnswerMap[draggedKey]]
             ).map((inputPart, index) => /* @__PURE__ */ jsx41(
               "span",
@@ -6650,7 +6577,7 @@ var OrderingActivityMaterialContent = ({
                 children: inputPart.isEquation ? /* @__PURE__ */ jsx41("span", { className: "text-xl", children: /* @__PURE__ */ jsx41(InlineMath9, { math: inputPart.value }) }) : inputPart.value
               },
               index
-            )) }) }) : /* @__PURE__ */ jsx41("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx41(
+            )) }) }) : /* @__PURE__ */ jsx41("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx41(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -6670,7 +6597,7 @@ var OrderingActivityMaterialContent = ({
               top: `${touchPosition.y}px`,
               transform: "translate(-50%, -50%)"
             },
-            children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx41("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx41("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx41("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx41("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               materialMap[displayAnswerMap[draggedKey]]
             ).map((inputPart, index) => /* @__PURE__ */ jsx41(
               "span",
@@ -6679,7 +6606,7 @@ var OrderingActivityMaterialContent = ({
                 children: inputPart.isEquation ? /* @__PURE__ */ jsx41("span", { className: "text-xl", children: /* @__PURE__ */ jsx41(InlineMath9, { math: inputPart.value }) }) : inputPart.value
               },
               index
-            )) }) }) : /* @__PURE__ */ jsx41("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ jsx41(
+            )) }) }) : /* @__PURE__ */ jsx41("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-catchup-white shadow-lg", children: /* @__PURE__ */ jsx41(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -6695,13 +6622,10 @@ var OrderingActivityMaterialContent = ({
             displayAnswerMap[materialKey] + "",
             index + ""
           );
-          return /* @__PURE__ */ jsx41("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ jsxs31(
+          return /* @__PURE__ */ jsx41("div", { className: "w-full", children: /* @__PURE__ */ jsxs31(
             "div",
             {
               className: `flex flex-row items-center my-4 mx-2`,
-              style: {
-                marginTop: view === "PC" ? calculateMarginTop(parseFloat(materialKey)) : 0
-              },
               children: [
                 /* @__PURE__ */ jsx41("div", { className: "mr-3", children: /* @__PURE__ */ jsx41("div", { className: "h-catchup-activity-box-item w-catchup-activity-box-item flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-y-auto", children: /* @__PURE__ */ jsx41(
                   "div",
@@ -6760,14 +6684,15 @@ var OrderingActivityMaterialContent = ({
 var OrderingActivityMaterialContent_default = OrderingActivityMaterialContent;
 
 // src/components/activities/OrderingActivityContent.tsx
-import { Fragment as Fragment9, jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
 var OrderingActivityContent = ({
   answerMap,
   data,
   canAnswerQuestion,
   changeAnswer,
   isPreview,
-  showCorrectAnswer
+  showCorrectAnswer,
+  isFullScreen
 }) => {
   const contentMap = parseContentMapFromData(data);
   const orderingBodyMap = parseBodyMapFromData(data, "ORDERING");
@@ -6779,16 +6704,17 @@ var OrderingActivityContent = ({
     answerMap2[secondaryKey] = prevValue;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs32(Fragment9, { children: [
-    /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsxs32("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ jsx42("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ jsx42(
       ActivityBodyContent_default,
       {
         bodyMap: orderingBodyMap,
         templateType: "ORDERING"
       }
-    ),
-    /* @__PURE__ */ jsx42(DividerLine_default, {}),
-    /* @__PURE__ */ jsx42(
+    ) }),
+    /* @__PURE__ */ jsx42("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx42(DividerLine_default, {}) }),
+    /* @__PURE__ */ jsx42("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx42(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ jsx42("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx42(
       OrderingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6800,15 +6726,15 @@ var OrderingActivityContent = ({
         isPreview,
         showCorrectAnswer
       }
-    )
+    ) })
   ] });
 };
 var OrderingActivityContent_default = OrderingActivityContent;
 
 // src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx
-import { useEffect as useEffect16, useState as useState25 } from "react";
+import { useEffect as useEffect15, useState as useState24 } from "react";
 import { InlineMath as InlineMath10 } from "react-katex";
-import { Fragment as Fragment10, jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 var TrueFalseActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -6819,9 +6745,9 @@ var TrueFalseActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [shuffleOptionList, setShuffleOptionList] = useState25([]);
-  const [displayAnswerMap, setDisplayAnswerMap] = useState25(answerMap);
-  useEffect16(() => {
+  const [shuffleOptionList, setShuffleOptionList] = useState24([]);
+  const [displayAnswerMap, setDisplayAnswerMap] = useState24(answerMap);
+  useEffect15(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
     optionList.push(...materialMap.falseList);
@@ -6831,7 +6757,7 @@ var TrueFalseActivityMaterialContent = ({
       setShuffleOptionList(shuffleArray(optionList));
     }
   }, []);
-  useEffect16(() => {
+  useEffect15(() => {
     if (showCorrectAnswer) {
       setDisplayAnswerMap(materialMap);
     } else {
@@ -6914,7 +6840,7 @@ var TrueFalseActivityMaterialContent = ({
         },
         index
       );
-    }) }) : /* @__PURE__ */ jsxs33(Fragment10, { children: [
+    }) }) : /* @__PURE__ */ jsxs33(Fragment8, { children: [
       displayAnswerMap.trueList.map((item) => /* @__PURE__ */ jsxs33("div", { className: "flex flex-row items-center gap-x-2", children: [
         /* @__PURE__ */ jsx43("div", { className: "flex-1", children: /* @__PURE__ */ jsx43("p", { children: item }) }),
         /* @__PURE__ */ jsx43("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx43("p", { className: "underline", children: i18n_default.t("true") }) })
@@ -7127,7 +7053,7 @@ var ActivityEvaluationRubricContent = ({
 var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 
 // src/components/activities/ActivityPreviewByData.tsx
-import { useEffect as useEffect17, useState as useState26 } from "react";
+import { useEffect as useEffect16, useState as useState25 } from "react";
 
 // src/components/boxes/SelectionBox.tsx
 import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
@@ -7167,7 +7093,7 @@ var SelectionBox = ({
 var SelectionBox_default = SelectionBox;
 
 // src/components/activities/ActivityPreviewByData.tsx
-import { Fragment as Fragment11, jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
 var ACTIVITY_TEMPLATE_LIST = [
   { type: "ORDERING", materialMap: "orderingMaterialMap" },
   { type: "DROPDOWN", materialMap: "dropdownMaterialMap" },
@@ -7198,11 +7124,11 @@ var ActivityPreviewByData = ({
   showMaterialContent = true,
   isPreview = true
 }) => {
-  const [selectedType, setSelectedType] = useState26(null);
-  const [optionList, setOptionList] = useState26([]);
-  const [answerMapMap, setAnswerMapMap] = useState26({});
-  const [activityTemplateTypeList, setActivityTemplateTypeList] = useState26([]);
-  useEffect17(() => {
+  const [selectedType, setSelectedType] = useState25(null);
+  const [optionList, setOptionList] = useState25([]);
+  const [answerMapMap, setAnswerMapMap] = useState25({});
+  const [activityTemplateTypeList, setActivityTemplateTypeList] = useState25([]);
+  useEffect16(() => {
     if (!data) return;
     let currentActivityTemplateMapList = JSON.parse(
       JSON.stringify(ACTIVITY_TEMPLATE_LIST)
@@ -7220,7 +7146,7 @@ var ActivityPreviewByData = ({
     }
     setActivityTemplateTypeList(currentActivityTemplateMapList);
   }, [data, answerType, typeList]);
-  useEffect17(() => {
+  useEffect16(() => {
     if (activityTemplateTypeList.length === 0) return;
     const currentOptionList = [];
     for (const activityTemplateType of activityTemplateTypeList) {
@@ -7240,11 +7166,11 @@ var ActivityPreviewByData = ({
     }
     setOptionList(currentOptionList);
   }, [activityTemplateTypeList, showDifficulty]);
-  useEffect17(() => {
+  useEffect16(() => {
     if (optionList.length === 0) return;
     setSelectedType(optionList[0].id);
   }, [optionList]);
-  useEffect17(() => {
+  useEffect16(() => {
     if (activityTemplateTypeList.length === 0) return;
     const currentAnswerMapMap = {};
     for (const activityTemplateMap of activityTemplateTypeList) {
@@ -7276,42 +7202,42 @@ var ActivityPreviewByData = ({
     }
     switch (selectedType) {
       case "ORDERING":
-        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsxs38(Fragment11, { children: [
+        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
           isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx48(OrderingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "DROPDOWN":
-        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsxs38(Fragment11, { children: [
+        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
           isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx48(DropdownActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MCSA":
-        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsxs38(Fragment11, { children: [
+        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
           isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx48(MCSAActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MCMA":
-        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsxs38(Fragment11, { children: [
+        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
           isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx48(MCMAActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MATCHING":
-        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsxs38(Fragment11, { children: [
+        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
           isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx48(MatchingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "GROUPING":
-        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsxs38(Fragment11, { children: [
+        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
           isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx48(GroupingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "FILL_IN_THE_BLANKS":
-        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsxs38(Fragment11, { children: [
+        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
           isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx48(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "OPEN_ENDED":
-        return data.openEndedBodyMap ? /* @__PURE__ */ jsxs38(Fragment11, { children: [
+        return data.openEndedBodyMap ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
           isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx48(
             OpenEndedActivityContent_default,
@@ -7321,7 +7247,7 @@ var ActivityPreviewByData = ({
           )
         ] }) : null;
       case "TRUE_FALSE":
-        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsxs38(Fragment11, { children: [
+        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
           isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx48(TrueFalseActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
@@ -7331,7 +7257,7 @@ var ActivityPreviewByData = ({
   };
   if (!data) return null;
   return /* @__PURE__ */ jsxs38("div", { children: [
-    showType && optionList.length > 0 ? /* @__PURE__ */ jsxs38(Fragment11, { children: [
+    showType && optionList.length > 0 ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
       /* @__PURE__ */ jsxs38("div", { className: "mb-2", children: [
         showDescription ? /* @__PURE__ */ jsx48("div", { className: "my-2", children: /* @__PURE__ */ jsx48("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
         /* @__PURE__ */ jsx48(
@@ -7429,7 +7355,7 @@ var LeftTextRightInputGroup = ({
 var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/groups/PageTravelGroup.tsx
-import { useEffect as useEffect18, useState as useState27 } from "react";
+import { useEffect as useEffect17, useState as useState26 } from "react";
 import { jsx as jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
 var PageTravelGroup = ({
   isImageProcessing,
@@ -7439,90 +7365,104 @@ var PageTravelGroup = ({
   setPageNumber,
   setImageReady
 }) => {
-  const [totalPageNumber, setTotalPageNumber] = useState27(0);
-  const [newPageNumber, setNewPageNumber] = useState27(0);
-  useEffect18(() => {
+  const [totalPageNumber, setTotalPageNumber] = useState26(0);
+  const [newPageNumber, setNewPageNumber] = useState26(0);
+  useEffect17(() => {
     if (!initialTotalPageNumber) return;
     setTotalPageNumber(initialTotalPageNumber);
   }, [initialTotalPageNumber]);
-  useEffect18(() => {
+  useEffect17(() => {
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
-  return /* @__PURE__ */ jsxs41("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
-    pageNumber === 0 ? null : /* @__PURE__ */ jsx52("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx52(
-      BaseImage_default,
+  const handlePageChange = (newPage) => {
+    if (isImageProcessing) {
+      handleImageProcessing();
+    } else {
+      setPageNumber(newPage);
+      setImageReady(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs41("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap gap-x-2", children: [
+    /* @__PURE__ */ jsx52(
+      "button",
       {
-        size: "small",
-        alt: "arrow-left",
-        src: "/icons/arrow-left.webp",
-        onClick: () => {
-          if (isImageProcessing) {
-            handleImageProcessing();
-          } else {
-            if (pageNumber - 1 >= 0) {
-              setPageNumber(pageNumber - 1);
-            }
-            setImageReady(false);
-          }
-        }
+        className: "px-2 py-1 bg-catchup-blue-100 rounded-catchup-small",
+        disabled: pageNumber <= 0,
+        onClick: () => handlePageChange(pageNumber - 1),
+        children: "\u2190"
       }
-    ) }),
-    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ jsx52("div", { className: "px-2", children: /* @__PURE__ */ jsx52(
-      "p",
+    ),
+    /* @__PURE__ */ jsxs41("p", { className: "text-md", children: [
+      pageNumber + 1,
+      " / ",
+      totalPageNumber
+    ] }),
+    /* @__PURE__ */ jsx52(
+      "button",
       {
-        className: `${pageNumber === index ? "text-xl" : "text-md"} cursor-pointer`,
-        onClick: () => {
-          if (isImageProcessing) {
-            handleImageProcessing();
-          } else {
-            setPageNumber(index);
-            setImageReady(false);
-          }
-        },
-        children: index + 1
+        className: "px-2 py-1 bg-catchup-blue-100 rounded-catchup-small",
+        disabled: pageNumber >= totalPageNumber - 1,
+        onClick: () => handlePageChange(pageNumber + 1),
+        children: "\u2192"
       }
-    ) }, index)),
-    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ jsx52("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx52(
-      BaseImage_default,
-      {
-        size: "small",
-        alt: "arrow-right",
-        src: "/icons/arrow-right.webp",
-        onClick: () => {
-          if (isImageProcessing) {
-            handleImageProcessing();
-          } else {
-            if (pageNumber + 1 <= totalPageNumber) {
-              setPageNumber(pageNumber + 1);
-            }
-            setImageReady(false);
-          }
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsx52("div", { children: /* @__PURE__ */ jsx52(
+    ),
+    /* @__PURE__ */ jsx52(
       "input",
       {
-        className: `w-[90px] py-2 px-4 border border-catchup-gray-100 rounded-catchup-xlarge focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 focus:shadow-input`,
+        className: "w-[90px] py-2 px-4 border border-catchup-gray-100 rounded-catchup-xlarge focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 focus:shadow-input",
         type: "number",
         value: newPageNumber,
         onChange: (e) => {
-          const inputPageNumber = parseInt(e.target.value);
-          setNewPageNumber(inputPageNumber);
+          setNewPageNumber(parseInt(e.target.value));
         },
         onKeyDown: (e) => {
           if (isNaN(newPageNumber) || newPageNumber <= 0 || newPageNumber > totalPageNumber)
             return;
           if (e.key === "Enter") {
-            setPageNumber(newPageNumber - 1);
+            handlePageChange(newPageNumber - 1);
           }
         }
       }
-    ) })
+    )
   ] });
 };
 var PageTravelGroup_default = PageTravelGroup;
 
+// src/hooks/useScreenSize.ts
+import { useState as useState27, useEffect as useEffect18 } from "react";
+var useScreenSize = () => {
+  const [containerSize, setContainerSize] = useState27({
+    width: 0,
+    height: 0
+  });
+  const [screenSize, setScreenSize] = useState27({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+  useEffect18(() => {
+    const handleResize = () => {
+      setScreenSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+      const container = document.getElementById("container");
+      if (!container) return;
+      const boundingClientRect = container.getBoundingClientRect();
+      setContainerSize({
+        width: boundingClientRect.width,
+        height: boundingClientRect.height
+      });
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return { screenSize, containerSize };
+};
+var useScreenSize_default = useScreenSize;
+
 // src/components/boxes/SelectionCheckbox.tsx
 import { jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
 var SelectionCheckbox = ({