evelearn-theme 1.0.6 → 2.0.1

package/dist/index.js

@@ -56,7 +56,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/index.tsx
+// src/index.ts
 var index_exports = {};
 __export(index_exports, {
   AnimateLogo: () => AnimateLogo_default,
@@ -78,7 +78,7 @@ __export(index_exports, {
   NoticeBox: () => NoticeBox_default,
   Overlay: () => Overlay_default,
   OverlaySpinner: () => OverlaySpinner_default,
-  PRIMARY_COLOR: () => PRIMARY_COLOR3,
+  PRIMARY_COLOR: () => PRIMARY_COLOR,
   Pill: () => Pill_default,
   ProgressBar: () => ProgressBar_default,
   ProgressBarSimple: () => ProgressBarSimple_default,
@@ -103,81 +103,55 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/Backdrop/Backdrop.tsx
+// src/constants.tsx
+var PRIMARY_COLOR = "#00b4d8";
+
+// src/Common/Container.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var Backdrop = ({ visible, onClick, opacity }) => {
-  if (!visible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+var Container = ({ backgroundImage, style, children, onClick }) => {
+  return backgroundImage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      style: {
-        opacity: opacity ? opacity : 90,
-        zIndex: 21
-      },
-      className: `fixed top-0 left-0 w-full h-screen bg-gray-100 dark:bg-slate-900`,
-      onClick
+      style: __spreadValues({
+        backgroundImage,
+        backgroundSize: "cover"
+      }, style),
+      className: "w-full md:min-h-screen dark:bg-slate-950 mx-auto overflow-y-auto overflow-x-clip px-0 md:px-2 sm:py-4 py-1 relative",
+      onClick,
+      children: children ? children : null
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: `w-full dark:bg-slate-950 mx-auto overflow-y-auto overflow-x-clip px-0 sm:px-16 relative pt-20`,
+      onClick,
+      style: style || { minHeight: "100vh" },
+      children: children ? children : null
     }
   );
 };
-var Backdrop_default = Backdrop;
+var Container_default = Container;
 
-// src/Backdrop/Overlay.tsx
-var import_react = require("react");
-var import_react_dom = __toESM(require("react-dom"));
+// src/Common/ErrorText.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Overlay = ({ visible, onDismissed, onClick, zIndex, isDark, children, opacity, withContainer = true }) => {
-  const [modalRoot, setModalRoot] = (0, import_react.useState)(null);
-  (0, import_react.useEffect)(() => {
-    let root = document.getElementById("modal-root");
-    if (!root) {
-      root = document.createElement("div");
-      root.id = "modal-root";
-      document.body.appendChild(root);
-    }
-    setModalRoot(root);
-    return () => {
-      const root2 = document.getElementById("modal-root");
-      if (root2) {
-        document.body.removeChild(root2);
-      }
-    };
-  }, [visible]);
-  if (!visible || !modalRoot) return null;
-  return import_react_dom.default.createPortal(
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "animate-fade-in", children: withContainer ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "div",
-      {
-        onClick: onDismissed || onClick,
-        className: `top-0 left-0 fixed w-full h-screen flex items-center justify-center`,
-        style: {
-          background: isDark ? `rgba(0, 0, 0, ${opacity || "0.7"})` : `rgba(255, 255, 255, ${opacity || "0.6"})`,
-          zIndex: zIndex || 9999
-        },
-        children
-      }
-    ) : children }),
-    modalRoot
-  );
+var ErrorText = ({ text, style, classNames }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: classNames ? classNames : "text-red-500 font-semibold text-wrap py-auto", style, children: text });
 };
-var Overlay_default = Overlay;
+var ErrorText_default = ErrorText;
 
-// src/Breakpoint/Breakpoint.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Breakpoint = ({ children, fromSize, toSize }) => {
-  let className = "";
-  if (fromSize && toSize) {
-    className = `hidden ${fromSize}:block ${toSize}:hidden`;
-  } else if (fromSize) {
-    className = `hidden ${fromSize}:block`;
-  } else if (toSize) {
-    className = `block ${toSize}:hidden`;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children });
-};
-var Breakpoint_default = Breakpoint;
+// src/Common/fieldStyle.ts
+var baseFieldStyle = "font-sans form-input h-11 w-full bg-white border-gray-200 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-200 text-gray-700 dark:placeholder-gray-400 placeholder-gray-400 rounded-md  px-2 py-1 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50";
+var createExerciseElementStyle = "flex flex-col justify-between space-y-2 w-full p-4 bg-white dark:bg-slate-800 rounded-xl text-gray-800 dark:text-gray-200 border-2 border-slate-200 dark:border-slate-400 overflow-hidden transition-all";
+var exerciseDeleteButton = "w-6 h-6 flex justify-center text-gray-700 dark:text-gray-200 hover:text-red-600 dark:hover:text-red-500 transition-all duration-150 hover:scale-125";
+var xIconButton = "w-6 h-6 flex justify-center text-gray-700 dark:text-gray-200 hover:text-gray-950 dark:hover:text-gray-100 transition-all duration-150 hover:scale-125";
+var exerciseEditButton = "w-6 h-6 flex justify-center text-gray-700 dark:text-gray-200 hover:text-red-600 dark:hover:text-green-500 transition-all duration-150 hover:scale-125";
+var tippyClassname = "p-2 bg-slate-600 dark:bg-slate-900 opacity-90 text-white font-medium font-header rounded-lg";
+var headerTippyClass = "rounded-lg p-2 bg-slate-950 opacity-95 text-white font-medium";
+var headerButtonClass = "w-10 h-10 rounded-full dark:hover:bg-slate-600 hover:bg-slate-200 bg-transparent flex justify-center items-center flex justify-center items-center text-slate-600 dark:text-slate-100 hover:text-primary dark:hover:text-primary transition-colors duration-50";
+var toolbarExerciseButton = "flex bg-gray-50/90 items-center sm:justify-between p-4 shadow-sm w-full rounded-xl border-4 border-transparent hover:border-white text-gray-700 hover:text-white hover:bg-indigo-500 transition-colors duration-75";
 
 // src/Spinners/Spinner.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Spinner = ({ visible = true, size, white, isDark }) => {
   if (visible === false) return null;
   const isWhite = white || isDark;
@@ -190,18 +164,18 @@ var Spinner = ({ visible = true, size, white, isDark }) => {
         animate-spin
         ${dimensions}
     `;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative h-8 w-8 flex justify-center items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative h-8 w-8 flex justify-center items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "svg",
       {
         className: `absolute top-0 ${dimensions} ${bgColor}`,
         viewBox: "0 0 24 24",
         fill: "none",
         strokeWidth: "2.4",
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "svg",
       {
         className: spinnerClasses,
@@ -209,7 +183,7 @@ var Spinner = ({ visible = true, size, white, isDark }) => {
         fill: "none",
         strokeWidth: "2.4",
         strokeLinecap: "round",
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "path",
           {
             d: `
@@ -230,15 +204,139 @@ var Spinner = ({ visible = true, size, white, isDark }) => {
 };
 var SpinnerCentered = (props) => {
   if (props.visible === false) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-full flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, __spreadValues({}, props)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-full flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, __spreadValues({}, props)) });
 };
 Spinner.displayName = "Spinner";
 SpinnerCentered.displayName = "Spinner.Centered";
 Spinner.Centered = SpinnerCentered;
 var Spinner_default = Spinner;
 
-// src/Button/Button.tsx
+// src/Common/NoResults.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var HEIGHT = 160;
+var WIDTH = HEIGHT * (16 / 9);
+var NoResults = ({ loading, message }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative w-full flex justify-center items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex justify-start w-full space-x-2 py-3 p-4 bg-slate-100 dark:bg-slate-800 rounded-md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: `calc(${WIDTH}px + 1rem)`, height: 320 }, className: "rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition-shadow duration-150 px-2 pt-2 bg-slate-200 dark:bg-slate-700 animate-pulse" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: `calc(${WIDTH}px + 1rem)`, height: 320 }, className: "rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition-shadow duration-150 px-2 pt-2 bg-slate-200 dark:bg-slate-700 animate-pulse" })
+    ] }),
+    !loading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute w-full h-full flex justify-center items-center m-auto", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "p-4 rounded-lg bg-white dark:bg-slate-700 shadow-xl", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "font-semibold text-lg text-gray-700 dark:text-gray-300", children: message || "No results" }) }) })
+  ] });
+};
+var NoResults_default = NoResults;
+
+// src/Common/Pill.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var Pill = ({ text }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "rounded-full px-3 py-1 text-sm font-header font-medium bg-white dark:bg-slate-900 text-gray-700 dark:text-gray-300 mr-2 mb-2", children: text });
+};
+var Pill_default = Pill;
+
+// src/Common/StepsComponent.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var StepsComponent = ({ steps, activeStep, onStepPress }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex justify-between items-center w-full p-1 mb-2", children: steps.map((step, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex justify-center items-center space-x-2 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => onStepPress(index),
+        className: `flex items-center space-x-2 px-4 py-2 rounded-lg min-w-10 md:min-w-20 sm:min-w-40 font-header transition-all duration-150
+                                        ${activeStep === index ? "bg-primary text-white shadow-lg scale-110 border-2 border-primary" : "bg-gray-100 dark:bg-slate-800 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-slate-700 border-2 border-transparent hover:border-primary/30"}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "font-medium truncate", children: [
+          index + 1,
+          ".   ",
+          step.label
+        ] })
+      }
+    ) }) }, `step_${index}_${step.label}`);
+  }) });
+};
+var StepsComponent_default = StepsComponent;
+
+// src/Fade/Fade.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Fade = ({ children, inProp }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "animate-fade-in", children });
+};
+var Fade_default = Fade;
+
+// src/Backdrop/Backdrop.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Backdrop = ({ visible, onClick, opacity }) => {
+  if (!visible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      style: {
+        opacity: opacity ? opacity : 90,
+        zIndex: 21
+      },
+      className: `fixed top-0 left-0 w-full h-screen bg-gray-100 dark:bg-slate-900`,
+      onClick
+    }
+  );
+};
+var Backdrop_default = Backdrop;
+
+// src/Breakpoint/Breakpoint.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Breakpoint = ({ children, fromSize, toSize }) => {
+  let className = "";
+  if (fromSize && toSize) {
+    className = `hidden ${fromSize}:block ${toSize}:hidden`;
+  } else if (fromSize) {
+    className = `hidden ${fromSize}:block`;
+  } else if (toSize) {
+    className = `block ${toSize}:hidden`;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className, children });
+};
+var Breakpoint_default = Breakpoint;
+
+// src/Backdrop/Overlay.tsx
+var import_react = require("react");
+var import_react_dom = __toESM(require("react-dom"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Overlay = ({ visible, onDismissed, onClick, zIndex, isDark, children, opacity, withContainer = true }) => {
+  const [modalRoot, setModalRoot] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    let root = document.getElementById("modal-root");
+    if (!root) {
+      root = document.createElement("div");
+      root.id = "modal-root";
+      document.body.appendChild(root);
+    }
+    setModalRoot(root);
+    return () => {
+      const root2 = document.getElementById("modal-root");
+      if (root2) {
+        document.body.removeChild(root2);
+      }
+    };
+  }, [visible]);
+  if (!visible || !modalRoot) return null;
+  return import_react_dom.default.createPortal(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "animate-fade-in", children: withContainer ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        onClick: onDismissed || onClick,
+        className: `top-0 left-0 fixed w-full h-screen flex items-center justify-center`,
+        style: {
+          background: isDark ? `rgba(0, 0, 0, ${opacity || "0.7"})` : `rgba(255, 255, 255, ${opacity || "0.6"})`,
+          zIndex: zIndex || 9999
+        },
+        children
+      }
+    ) : children }),
+    modalRoot
+  );
+};
+var Overlay_default = Overlay;
+
+// src/Button/Button.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var Button = ({ disabled = false, loading, onClick, kind = "primary", size = "small", type = "button", children }) => {
   const styled = () => {
     switch (kind) {
@@ -276,14 +374,14 @@ var Button = ({ disabled = false, loading, onClick, kind = "primary", size = "sm
         return "px-2 py-1";
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: type || "button", disabled, className: `rounded-lg focus:outline-none transition duration-100 ${styled()} ${sized()}`, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-full max-h-11", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex w-full justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spinner_default, { white: true }) }) : children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: type || "button", disabled, className: `rounded-lg focus:outline-none transition duration-100 ${styled()} ${sized()}`, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-full max-h-11", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex w-full justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner_default, { white: true }) }) : children }) });
 };
 var Button_default = Button;
 
 // src/Button/FunButton.tsx
 var import_react2 = require("react");
 var import_framer_motion = require("framer-motion");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var FunButton = ({
   onClick,
   disabled,
@@ -337,7 +435,7 @@ var FunButton = ({
     const cName = classStyle;
     return cName + (disabled ? " opacity-70 cursor-default hover:bg-black/70" : "");
   }, [classStyle, disabled]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_framer_motion.motion.button,
     {
       className: `${computedClassName}`,
@@ -346,7 +444,7 @@ var FunButton = ({
       onMouseDown: onClick,
       whileTap: { y: disabled ? 0 : 2 },
       transition: { duration: 0.1, ease: "easeInOut" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         import_framer_motion.motion.span,
         {
           className: computedClassStyle,
@@ -358,7 +456,7 @@ var FunButton = ({
           animate: { y: active ? 0 : -6 },
           whileTap: { y: disabled ? -6 : 0 },
           transition: { duration: 0.1, ease: "easeInOut" },
-          children: loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: size === "small" ? "min-h-6" : "min-h-10", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Spinner_default.Centered, { visible: true, size: size === "small" ? "small" : "base", white: true }) }) : children
+          children: loading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: size === "small" ? "min-h-6" : "min-h-10", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Spinner_default.Centered, { visible: true, size: size === "small" ? "small" : "base", white: true }) }) : children
         }
       )
     }
@@ -369,7 +467,7 @@ var FunButton_default = FunButton;
 // src/Button/FunRoundButton.tsx
 var import_react3 = require("react");
 var import_framer_motion2 = require("framer-motion");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var FunRoundButton = ({ onClick, disabled, type, children, color, active, className, size = 44 }) => {
   const { front, bottom } = (0, import_react3.useMemo)(() => {
     switch (color) {
@@ -389,7 +487,7 @@ var FunRoundButton = ({ onClick, disabled, type, children, color, active, classN
         return { bottom: disabled ? "#d1d5db" : "#00b4d8", front: disabled ? "#38bdf8" : "#0369a1" };
     }
   }, [color, disabled]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_framer_motion2.motion.button,
     {
       className: `${className || "border-none p-0 flex justify-center items-center cursor-pointer z-10"} ${disabled ? "opacity-70 cursor-default" : "hover:opacity-95"}`,
@@ -405,7 +503,7 @@ var FunRoundButton = ({ onClick, disabled, type, children, color, active, classN
       onClick,
       whileHover: { opacity: 0.95 },
       whileTap: { y: disabled ? 0 : 2 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         import_framer_motion2.motion.span,
         {
           className: "flex justify-center items-center z-10",
@@ -431,16 +529,7 @@ var FunRoundButton_default = FunRoundButton;
 // src/Checkbox/Checkbox.tsx
 var import_react4 = require("react");
 var import_formik = require("formik");
-
-// src/Common/ErrorText.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ErrorText = ({ text, style, classNames }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: classNames ? classNames : "text-red-500 font-semibold text-wrap py-auto", style, children: text });
-};
-var ErrorText_default = ErrorText;
-
-// src/Checkbox/Checkbox.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Checkbox = ({ name, labelText, isLarge, onChange, isDisabled }) => {
   const [{ value }, { error }, { setValue, setTouched }] = (0, import_formik.useField)(name);
   const onCheck = (e) => {
@@ -450,9 +539,9 @@ var Checkbox = ({ name, labelText, isLarge, onChange, isDisabled }) => {
   const rand = (0, import_react4.useMemo)(() => {
     return Math.random();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative flex flex-col justify-center items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative flex flex-col justify-center items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "input",
         {
           disabled: !!isDisabled,
@@ -468,9 +557,9 @@ var Checkbox = ({ name, labelText, isLarge, onChange, isDisabled }) => {
           className: `form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded ${isLarge ? "h-5 w-5" : "h-4 w-4"}`
         }
       ),
-      typeof labelText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { htmlFor: `${name}${rand}`, className: "ml-2 block text-sm text-gray-800 dark:text-gray-200", children: labelText }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { htmlFor: `${name}${rand}`, children: labelText })
+      typeof labelText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { htmlFor: `${name}${rand}`, className: "ml-2 block text-sm text-gray-800 dark:text-gray-200", children: labelText }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { htmlFor: `${name}${rand}`, children: labelText })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ErrorText_default, { classNames: "absolute w-64 left-6 top-4 text-xs text-red-500", text: error })
+    error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ErrorText_default, { classNames: "absolute w-64 left-6 top-4 text-xs text-red-500", text: error })
   ] });
 };
 var MultiChoiceCheckBox = ({ name, hasMultipleAnswers, index, isLarge, allOptionsName }) => {
@@ -484,7 +573,7 @@ var MultiChoiceCheckBox = ({ name, hasMultipleAnswers, index, isLarge, allOption
     }
     setOptionsValue(optionsValue == null ? void 0 : optionsValue.map((el, idx) => ({ option: el.option, id: el.id, isCorrectAnswer: index === idx ? !el.isCorrectAnswer : false })));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "input",
     {
       onChange: (e) => onCheck(e),
@@ -502,11 +591,11 @@ var Checkbox_default = Checkbox;
 
 // src/Checkbox/RadioOption.tsx
 var import_formik2 = require("formik");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var RadioOption = ({ name, isLarge, labelText, option, onSelect }) => {
   const [{ value }, {}, { setValue }] = (0, import_formik2.useField)(name);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "input",
       {
         onChange: () => {
@@ -521,19 +610,19 @@ var RadioOption = ({ name, isLarge, labelText, option, onSelect }) => {
         className: `form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded ${isLarge ? "h-5 w-5" : "h-4 w-4"}`
       }
     ),
-    typeof labelText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: option, className: "ml-2 block text-sm text-gray-900", children: labelText }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: option, children: labelText })
+    typeof labelText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { htmlFor: option, className: "ml-2 block text-sm text-gray-900", children: labelText }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { htmlFor: option, children: labelText })
   ] });
 };
 var RadioOption_default = RadioOption;
 
 // src/Common/BottomAlert.tsx
 var import_react_dom2 = __toESM(require("react-dom"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var BottomAlert = ({ isDark, setDontShowAgain, dontShowAgain, title, borderColor, onDismissed, cancelText, confirmText, onConfirm, onCancel, isSingleAction, children, buttonColor }) => {
   const dismiss = () => {
     onDismissed == null ? void 0 : onDismissed();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       className: "top-0 left-0 fixed w-full h-screen flex justify-center",
@@ -541,11 +630,11 @@ var BottomAlert = ({ isDark, setDontShowAgain, dontShowAgain, title, borderColor
         background: isDark ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.1)",
         zIndex: 9999
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute top-0 w-full h-screen flex justify-center bg-gray-200/90 dark:bg-slate-800/50", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute sm:w-1/2 w-full mx-auto shadow-xl rounded-md p-6 flex z-50 flex-col top-24 bg-white dark:bg-slate-900 overflow-clip rounded-bl-lg rounded-br-lg border-b-8 border-b-blue-500", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { borderColor: borderColor || "#0ea5e9" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "font-semibold font-header text-gray-700 dark:text-gray-300 text-xl", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mt-2 text-lg", children }),
-        setDontShowAgain ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center space-x-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute top-0 w-full h-screen flex justify-center bg-gray-200/90 dark:bg-slate-800/50", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute sm:w-1/2 w-full mx-auto shadow-xl rounded-md p-6 flex z-50 flex-col top-24 bg-white dark:bg-slate-900 overflow-clip rounded-bl-lg rounded-br-lg border-b-8 border-b-blue-500", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { borderColor: borderColor || "#0ea5e9" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "font-semibold font-header text-gray-700 dark:text-gray-300 text-xl", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mt-2 text-lg", children }),
+        setDontShowAgain ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center space-x-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "input",
             {
               onChange: () => {
@@ -557,9 +646,9 @@ var BottomAlert = ({ isDark, setDontShowAgain, dontShowAgain, title, borderColor
               className: `form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded h-4 w-4`
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { htmlFor: "show_again_check", className: "dark:text-gray-200 text-gray-700", children: "Don't show again" })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { htmlFor: "show_again_check", className: "dark:text-gray-200 text-gray-700", children: "Don't show again" })
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mt-4 flex items-center justify-end space-x-4 z-10", children: isSingleAction ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mt-4 flex items-center justify-end space-x-4 z-10", children: isSingleAction ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           Button_default,
           {
             type: "button",
@@ -570,8 +659,8 @@ var BottomAlert = ({ isDark, setDontShowAgain, dontShowAgain, title, borderColor
             },
             children: confirmText || "Okay"
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "w-1/3 flex justify-end space-x-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-full flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "w-1/3 flex justify-end space-x-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-full flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             Button_default,
             {
               type: "button",
@@ -583,7 +672,7 @@ var BottomAlert = ({ isDark, setDontShowAgain, dontShowAgain, title, borderColor
               children: cancelText || "Cancel"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-full flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-full flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             Button_default,
             {
               type: "button",
@@ -603,53 +692,16 @@ var BottomAlert = ({ isDark, setDontShowAgain, dontShowAgain, title, borderColor
 var BAWrapper = (props) => {
   if (!props.isVisible) return null;
   return import_react_dom2.default.createPortal(
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BottomAlert, __spreadValues({}, props)),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BottomAlert, __spreadValues({}, props)),
     document.body
   );
 };
 var BottomAlert_default = BAWrapper;
 
-// src/Common/Container.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Container = ({ backgroundImage, style, children, onClick }) => {
-  return backgroundImage ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    "div",
-    {
-      style: __spreadValues({
-        backgroundImage,
-        backgroundSize: "cover"
-      }, style),
-      className: "w-full md:min-h-screen dark:bg-slate-950 mx-auto overflow-y-auto overflow-x-clip px-0 md:px-2 sm:py-4 py-1 relative",
-      onClick,
-      children: children ? children : null
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    "div",
-    {
-      className: `w-full dark:bg-slate-950 mx-auto overflow-y-auto overflow-x-clip px-0 sm:px-16 relative pt-20`,
-      onClick,
-      style: style || { minHeight: "100vh" },
-      children: children ? children : null
-    }
-  );
-};
-var Container_default = Container;
-
-// src/Common/fieldStyle.ts
-var baseFieldStyle = "font-sans form-input h-11 w-full bg-white border-gray-200 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-200 text-gray-700 dark:placeholder-gray-400 placeholder-gray-400 rounded-md  px-2 py-1 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50";
-var createExerciseElementStyle = "flex flex-col justify-between space-y-2 w-full p-4 bg-white dark:bg-slate-800 rounded-xl text-gray-800 dark:text-gray-200 border-2 border-slate-200 dark:border-slate-400 overflow-hidden transition-all";
-var exerciseDeleteButton = "w-6 h-6 flex justify-center text-gray-700 dark:text-gray-200 hover:text-red-600 dark:hover:text-red-500 transition-all duration-150 hover:scale-125";
-var xIconButton = "w-6 h-6 flex justify-center text-gray-700 dark:text-gray-200 hover:text-gray-950 dark:hover:text-gray-100 transition-all duration-150 hover:scale-125";
-var exerciseEditButton = "w-6 h-6 flex justify-center text-gray-700 dark:text-gray-200 hover:text-red-600 dark:hover:text-green-500 transition-all duration-150 hover:scale-125";
-var tippyClassname = "p-2 bg-slate-600 dark:bg-slate-900 opacity-90 text-white font-medium font-header rounded-lg";
-var headerTippyClass = "rounded-lg p-2 bg-slate-950 opacity-95 text-white font-medium";
-var headerButtonClass = "w-10 h-10 rounded-full dark:hover:bg-slate-600 hover:bg-slate-200 bg-transparent flex justify-center items-center flex justify-center items-center text-slate-600 dark:text-slate-100 hover:text-primary dark:hover:text-primary transition-colors duration-50";
-var toolbarExerciseButton = "flex bg-gray-50/90 items-center sm:justify-between p-4 shadow-sm w-full rounded-xl border-4 border-transparent hover:border-white text-gray-700 hover:text-white hover:bg-indigo-500 transition-colors duration-75";
-
 // src/Common/Tippy.tsx
 var import_react5 = require("react");
 var import_react6 = require("@floating-ui/react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var Tippy = ({ children, content, placement = "top", className = "", wrapperClassname = "", disabled = false, arrow: useArrow = false, visible }) => {
   const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
   const arrowRef = (0, import_react5.useRef)(null);
@@ -685,9 +737,9 @@ var Tippy = ({ children, content, placement = "top", className = "", wrapperClas
     dismiss,
     role
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react6.FloatingPortal, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react6.FloatingPortal, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "div",
         __spreadProps(__spreadValues({
           ref: refs.setFloating,
@@ -702,7 +754,7 @@ var Tippy = ({ children, content, placement = "top", className = "", wrapperClas
           children: content
         })
       ),
-      useArrow && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      useArrow && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         import_react6.FloatingArrow,
         {
           ref: arrowRef,
@@ -712,22 +764,22 @@ var Tippy = ({ children, content, placement = "top", className = "", wrapperClas
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", __spreadProps(__spreadValues({ ref: refs.setReference }, getReferenceProps()), { className: wrapperClassname, children }))
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", __spreadProps(__spreadValues({ ref: refs.setReference }, getReferenceProps()), { className: wrapperClassname, children }))
   ] });
 };
 var Tippy_default = Tippy;
 
 // src/Common/IconInfo.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var IconInfo = ({ content, icon, number, color }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-shrink-0 items-center justify-center w-8 h-8 rounded-full bg-slate-400 dark:bg-slate-600 dark:border dark:border-white", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-shrink-0 items-center justify-center w-8 h-8 rounded-full bg-slate-400 dark:bg-slate-600 dark:border dark:border-white", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     Tippy_default,
     {
       className: tippyClassname,
       content,
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", children: [
         icon,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: `absolute -bottom-1 ${number > 9 ? number > 99 ? number > 999 ? "w-8 h-8 -right-6 -bottom-3" : "w-6 h-6 -right-5 -bottom-2" : "w-5 h-5 -right-3" : "w-4 -right-3"} flex justify-center items-center text-xs font-sans rounded-full text-white ${color || "bg-secondary"}`, children: number })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: `absolute -bottom-1 ${number > 9 ? number > 99 ? number > 999 ? "w-8 h-8 -right-6 -bottom-3" : "w-6 h-6 -right-5 -bottom-2" : "w-5 h-5 -right-3" : "w-4 -right-3"} flex justify-center items-center text-xs font-sans rounded-full text-white ${color || "bg-secondary"}`, children: number })
       ] })
     }
   ) });
@@ -738,37 +790,37 @@ var IconInfo_default = IconInfo;
 var import_link = __toESM(require("next/link"));
 
 // src/Icons/XIcon.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var XIcon = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) });
 };
 var XIcon_default = XIcon;
 
 // src/Common/Modal.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Modal = (_a) => {
   var _b = _a, { visible, children, fullscreen, displayDark, dismissLink, bgOpacity, onDismissed, dismissable = true, dismissOnBackdropClick = true, style } = _b, props = __objRest(_b, ["visible", "children", "fullscreen", "displayDark", "dismissLink", "bgOpacity", "onDismissed", "dismissable", "dismissOnBackdropClick", "style"]);
   if (!visible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Overlay_default, __spreadProps(__spreadValues({ visible, onClick: dismissOnBackdropClick ? onDismissed : void 0, isDark: displayDark, withContainer: true }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Overlay_default, __spreadProps(__spreadValues({ visible, onClick: dismissOnBackdropClick ? onDismissed : void 0, isDark: displayDark, withContainer: true }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       className: `${displayDark && "dark"} bg-slate-900/20 fixed inset-0 flex items-center justify-center`,
       style: { zIndex: 1e4 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: ["relative mx-1 w-full md:mx-auto md:w-3/4 lg:w-1/2", fullscreen && `md:w-5/6 lg:w-5/6`].join(" "), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: dismissLink ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: ["relative mx-1 w-full md:mx-auto md:w-3/4 lg:w-1/2", fullscreen && `md:w-5/6 lg:w-5/6`].join(" "), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: dismissLink ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           import_link.default,
           {
             href: dismissLink,
             scroll: false,
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { onClick: onDismissed, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(XIcon_default, { className: "absolute h-5 w-5 top-5 sm:top-20 right-4 transition-colors cursor-pointer duration-75 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-500" }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { onClick: onDismissed, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(XIcon_default, { className: "absolute h-5 w-5 top-5 sm:top-20 right-4 transition-colors cursor-pointer duration-75 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-500" }) })
           }
-        ) : dismissable ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        ) : dismissable ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "button",
           {
             className: "absolute top-5 sm:top-20 right-4 transition-colors cursor-pointer duration-75 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-500",
             type: "button",
             onClick: onDismissed,
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               XIcon_default,
               {
                 className: "h-5 w-5"
@@ -776,13 +828,13 @@ var Modal = (_a) => {
             )
           }
         ) : null }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "div",
           {
             className: "my-1 sm:mt-16 bg-white dark:bg-slate-900 shadow-lg border border-gray-100 dark:border-none rounded-xl overflow-x-visible overflow-y-visible no-scrollbar",
             onClick: (e) => e.stopPropagation(),
             style: __spreadValues({ maxHeight: "calc(100vh - 6rem)" }, style),
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "p-4 sm:p-10", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mt-8 sm:mt-0", children }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "p-4 sm:p-10", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mt-8 sm:mt-0", children }) })
           }
         )
       ] })
@@ -791,24 +843,9 @@ var Modal = (_a) => {
 };
 var Modal_default = Modal;
 
-// src/Common/NoResults.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var HEIGHT = 160;
-var WIDTH = HEIGHT * (16 / 9);
-var NoResults = ({ loading, message }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative w-full flex justify-center items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex justify-start w-full space-x-2 py-3 p-4 bg-slate-100 dark:bg-slate-800 rounded-md", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { width: `calc(${WIDTH}px + 1rem)`, height: 320 }, className: "rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition-shadow duration-150 px-2 pt-2 bg-slate-200 dark:bg-slate-700 animate-pulse" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { width: `calc(${WIDTH}px + 1rem)`, height: 320 }, className: "rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition-shadow duration-150 px-2 pt-2 bg-slate-200 dark:bg-slate-700 animate-pulse" })
-    ] }),
-    !loading && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "absolute w-full h-full flex justify-center items-center m-auto", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "p-4 rounded-lg bg-white dark:bg-slate-700 shadow-xl", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "font-semibold text-lg text-gray-700 dark:text-gray-300", children: message || "No results" }) }) })
-  ] });
-};
-var NoResults_default = NoResults;
-
 // src/Common/NoticeBox.tsx
 var import_react7 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var NoticeBox = ({ children, type, isDismissible, isVisible, onDismiss }) => {
   const [visible, setVisible] = (0, import_react7.useState)(true);
   const styles = (0, import_react7.useMemo)(() => {
@@ -829,15 +866,15 @@ var NoticeBox = ({ children, type, isDismissible, isVisible, onDismiss }) => {
     setVisible(isVisible);
   }, [isVisible]);
   if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       style: {
         zIndex: 100
       },
       className: styles,
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", children: [
-        isDismissible && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", children: [
+        isDismissible && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "button",
           {
             type: "button",
@@ -846,7 +883,7 @@ var NoticeBox = ({ children, type, isDismissible, isVisible, onDismiss }) => {
               onDismiss == null ? void 0 : onDismiss();
             },
             className: "absolute bottom-1 right-1 transition-colors cursor-pointer duration-75 hover:text-blue-500",
-            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(XIcon_default, { className: "h-5 w-5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(XIcon_default, { className: "h-5 w-5" })
           }
         ),
         children
@@ -856,58 +893,51 @@ var NoticeBox = ({ children, type, isDismissible, isVisible, onDismiss }) => {
 };
 var NoticeBox_default = NoticeBox;
 
-// src/Common/Pill.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var Pill = ({ text }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "rounded-full px-3 py-1 text-sm font-header font-medium bg-white dark:bg-slate-900 text-gray-700 dark:text-gray-300 mr-2 mb-2", children: text });
-};
-var Pill_default = Pill;
-
 // src/Icons/StarIcon.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var StarIcon = ({ className, percentage, color }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("linearGradient", { id: "grad", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("stop", { offset: `${(percentage || 0.5) * 100}%`, "stop-color": color ? color : "#4b5563" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("stop", { offset: `${100 - (percentage || 0.5) * 100}%`, "stop-color": "white" })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("linearGradient", { id: "grad", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("stop", { offset: `${(percentage || 0.5) * 100}%`, "stop-color": color ? color : "#4b5563" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("stop", { offset: `${100 - (percentage || 0.5) * 100}%`, "stop-color": "white" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { fill: "url(#grad)", d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { fill: "url(#grad)", d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
   ] });
 };
 var StarIcon_default = StarIcon;
 
 // src/Icons/StarIconSolid.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var StartIconSolid = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
 };
 var StarIconSolid_default = StartIconSolid;
 
 // src/Common/RatingStars.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var RatingStars = ({ avgRating, large }) => {
   const icons = [1, 2, 3, 4, 5].map((el) => {
     if (avgRating === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StarIconSolid_default, { className: `${large ? "h-5 w-5" : "h-3 w-3"} text-gray-200 dark:text-gray-400` }, `rating_star_${el}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StarIconSolid_default, { className: `${large ? "h-5 w-5" : "h-3 w-3"} text-gray-200 dark:text-gray-400` }, `rating_star_${el}`);
     }
     if (Number.isInteger(avgRating)) {
       if (el <= avgRating) {
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StarIconSolid_default, { className: `${large ? "h-5 w-5" : "h-3 w-3"} text-blue-500` }, `rating_star_${el}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StarIconSolid_default, { className: `${large ? "h-5 w-5" : "h-3 w-3"} text-blue-500` }, `rating_star_${el}`);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StarIconSolid_default, { className: `${large ? "h-5 w-5" : "h-3 w-3"} text-gray-200 dark:text-gray-400` }, `rating_star_${el}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StarIconSolid_default, { className: `${large ? "h-5 w-5" : "h-3 w-3"} text-gray-200 dark:text-gray-400` }, `rating_star_${el}`);
     }
     const whole = Math.floor(avgRating);
     if (el <= whole) {
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StarIconSolid_default, { className: `${large ? "h-5 w-5" : "h-3 w-3"} text-blue-500` }, `rating_star_${el}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StarIconSolid_default, { className: `${large ? "h-5 w-5" : "h-3 w-3"} text-blue-500` }, `rating_star_${el}`);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StarIcon_default, { percentage: avgRating - whole, color: "#00b4d8", className: `${large ? "h-5 w-5" : "h-3 w-3"}` }, `rating_star_${el}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StarIcon_default, { percentage: avgRating - whole, color: "#00b4d8", className: `${large ? "h-5 w-5" : "h-3 w-3"}` }, `rating_star_${el}`);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     Tippy_default,
     {
       content: avgRating === 0 ? "No ratings" : "Average Rating " + avgRating,
       className: "bg-gray-800 opacity-90 text-white rounded-md px-2 py-1 cursor-pointer h-fit",
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center space-x-0 justify-start", children: icons })
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center space-x-0 justify-start", children: icons })
     }
   );
 };
@@ -916,12 +946,12 @@ var RatingStars_default = RatingStars;
 // src/Common/Slider.tsx
 var import_react8 = require("react");
 var import_use_debounce = require("use-debounce");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Slider = ({ min, max, step, value, onChange }) => {
   const handleChange = (event) => {
     onChange(parseFloat(event.target.value));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "input",
     {
       type: "range",
@@ -939,7 +969,7 @@ var DebouncedSlider = ({ min, max, handleUpdate, initialValue }) => {
   const debouncedUpdate = (0, import_use_debounce.useDebouncedCallback)((v) => {
     handleUpdate(v);
   }, 120, { trailing: true, leading: false });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     Slider,
     {
       min,
@@ -956,40 +986,18 @@ var DebouncedSlider = ({ min, max, handleUpdate, initialValue }) => {
 Slider.Debounced = DebouncedSlider;
 var Slider_default = Slider;
 
-// src/Common/StepsComponent.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var StepsComponent = ({ steps, activeStep, onStepPress }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex justify-between items-center w-full p-1 mb-2", children: steps.map((step, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex justify-center items-center space-x-2 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      "button",
-      {
-        type: "button",
-        onClick: () => onStepPress(index),
-        className: `flex items-center space-x-2 px-4 py-2 rounded-lg min-w-10 md:min-w-20 sm:min-w-40 font-header transition-all duration-150
-                                        ${activeStep === index ? "bg-primary text-white shadow-lg scale-110 border-2 border-primary" : "bg-gray-100 dark:bg-slate-800 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-slate-700 border-2 border-transparent hover:border-primary/30"}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "font-medium truncate", children: [
-          index + 1,
-          ".   ",
-          step.label
-        ] })
-      }
-    ) }) }, `step_${index}_${step.label}`);
-  }) });
-};
-var StepsComponent_default = StepsComponent;
-
 // src/Common/ToggleSwitch.tsx
 var import_formik3 = require("formik");
 var import_framer_motion3 = require("framer-motion");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Formik = ({ label, name }) => {
   const [{ value }, , { setValue }] = (0, import_formik3.useField)(name);
   const handleChange = (e) => {
     setValue(e.target.checked);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "input",
         {
           type: "checkbox",
@@ -998,7 +1006,7 @@ var Formik = ({ label, name }) => {
           onChange: handleChange
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `w-10 h-6 rounded-full p-[4px] transition-colors duration-300 ${value ? "bg-[#00b4d8]" : "bg-[#64748b]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `w-10 h-6 rounded-full p-[4px] transition-colors duration-300 ${value ? "bg-[#00b4d8]" : "bg-[#64748b]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         import_framer_motion3.motion.div,
         {
           className: "w-4 h-4 bg-white rounded-full absolute top-1",
@@ -1010,16 +1018,16 @@ var Formik = ({ label, name }) => {
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm font-medium text-gray-800 dark:text-gray-200", children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-sm font-medium text-gray-800 dark:text-gray-200", children: label })
   ] });
 };
 var ToggleSwitch = ({ label, onChange, value }) => {
   const handleChange = (e) => {
     onChange(e.target.checked);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "input",
         {
           type: "checkbox",
@@ -1028,7 +1036,7 @@ var ToggleSwitch = ({ label, onChange, value }) => {
           onChange: handleChange
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `w-10 h-6 rounded-full p-[4px] transition-colors duration-300 ${value ? "bg-[#00b4d8]" : "bg-[#64748b]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `w-10 h-6 rounded-full p-[4px] transition-colors duration-300 ${value ? "bg-[#00b4d8]" : "bg-[#64748b]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         import_framer_motion3.motion.div,
         {
           className: "w-4 h-4 bg-white rounded-full absolute top-1",
@@ -1040,7 +1048,7 @@ var ToggleSwitch = ({ label, onChange, value }) => {
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm font-medium text-gray-800 dark:text-gray-200", children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-sm font-medium text-gray-800 dark:text-gray-200", children: label })
   ] });
 };
 ToggleSwitch.Formik = Formik;
@@ -1050,24 +1058,24 @@ var ToggleSwitch_default = ToggleSwitch;
 var import_framer_motion4 = require("framer-motion");
 
 // src/Icons/PlusCircleIcon.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var PlusCircleIcon = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" }) });
 };
 var PlusCircleIcon_default = PlusCircleIcon;
 
 // src/Icons/ArrowCircleRight.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var StartIconSolid2 = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" }) });
 };
 var ArrowCircleRight_default = StartIconSolid2;
 
 // src/Common/UserContentSwitcher.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var UserContentSwitcher = ({ icon1: Icon1, icon2: Icon2, setGalleryMode, galleryMode, title1, title2 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative flex flex-row items-center my-2 bg-slate-100 dark:bg-slate-900 w-full h-14 rounded-lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "relative flex flex-row items-center my-2 bg-slate-100 dark:bg-slate-900 w-full h-14 rounded-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       import_framer_motion4.motion.div,
       {
         className: "absolute w-1/2 h-11 rounded-md bg-white dark:bg-slate-600",
@@ -1081,25 +1089,25 @@ var UserContentSwitcher = ({ icon1: Icon1, icon2: Icon2, setGalleryMode, gallery
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "button",
       {
         onClick: () => setGalleryMode(title1.toLowerCase()),
         className: "py-2 flex flex-row w-1/2 justify-center items-center gap-1 z-10",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "span",
             {
               className: `truncate ${galleryMode === title1.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"}`,
               children: title1.toLocaleUpperCase()
             }
           ),
-          Icon1 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          Icon1 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             Icon1,
             {
               className: `h-5 w-5 ${galleryMode === title1.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"}`
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             PlusCircleIcon_default,
             {
               className: `h-5 w-5 ${galleryMode === title1.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"}`
@@ -1108,25 +1116,25 @@ var UserContentSwitcher = ({ icon1: Icon1, icon2: Icon2, setGalleryMode, gallery
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "button",
       {
         onClick: () => setGalleryMode(title2.toLowerCase()),
         className: "py-2 flex flex-row w-1/2 justify-center items-center gap-1 z-10",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "span",
             {
               className: `truncate ${galleryMode === title2.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"}`,
               children: title2.toLocaleUpperCase()
             }
           ),
-          Icon2 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          Icon2 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             Icon2,
             {
               className: `h-5 w-5 ${galleryMode === title2.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"}`
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             ArrowCircleRight_default,
             {
               className: `h-5 w-5 ${galleryMode === title2.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"}`
@@ -1139,13 +1147,6 @@ var UserContentSwitcher = ({ icon1: Icon1, icon2: Icon2, setGalleryMode, gallery
 };
 var UserContentSwitcher_default = UserContentSwitcher;
 
-// src/Fade/Fade.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var Fade = ({ children, inProp }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "animate-fade-in", children });
-};
-var Fade_default = Fade;
-
 // src/ProgressBar/ProgressBarSimple.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var ProgressBarSimple = ({ progress, color, height = 10, backgroundColor = "#ccc" }) => {
@@ -1261,7 +1262,7 @@ var CircleProgress_default = CircleProgress;
 
 // src/ProgressBar/CourseProgress.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var PRIMARY_COLOR = "#00b4d8";
+var PRIMARY_COLOR2 = "#00b4d8";
 var CourseProgress = ({ twColor, percentage, label }) => {
   const cx = "50%";
   const cy = "50%";
@@ -1289,7 +1290,7 @@ var CourseProgress = ({ twColor, percentage, label }) => {
           "circle",
           {
             style: { strokeDashoffset },
-            color: twColor || PRIMARY_COLOR,
+            color: twColor || PRIMARY_COLOR2,
             ref: (ref) => {
               if (ref) {
               }
@@ -1363,7 +1364,7 @@ var CourseProgress_default = CourseProgress;
 // src/ProgressBar/ScrollProgress.tsx
 var import_react9 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var PRIMARY_COLOR2 = "#00b4d8";
+var PRIMARY_COLOR3 = "#00b4d8";
 var ScrollProgress = () => {
   const [scrollPercentage, setScrollPercentage] = (0, import_react9.useState)(0);
   (0, import_react9.useEffect)(() => {
@@ -1397,7 +1398,7 @@ var ScrollProgress = () => {
         {
           style: {
             height: "100%",
-            backgroundColor: PRIMARY_COLOR2,
+            backgroundColor: PRIMARY_COLOR3,
             borderRadius: 2,
             width: `${scrollPercentage}%`
           }
@@ -1547,9 +1548,6 @@ var OverlaySpinner = ({ visible }) => {
   );
 };
 var OverlaySpinner_default = OverlaySpinner;
-
-// src/constants.tsx
-var PRIMARY_COLOR3 = "#00b4d8";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnimateLogo,