evelearn-theme 2.0.28 → 2.0.30

package/dist/index.js

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -120,10 +120,6 @@ function _object_without_properties_loose(source, excluded) {
 function _sliced_to_array(arr, i) {
     return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
-function _type_of(obj) {
-    "@swc/helpers - typeof";
-    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
-}
 function _unsupported_iterable_to_array(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return _array_like_to_array(o, minLen);
@@ -132,201 +128,38 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
-var __create = Object.create;
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var ReactDOM = require('react-dom');
+var clsx = require('clsx');
+var framerMotion = require('framer-motion');
+var formik = require('formik');
+var react$1 = require('@floating-ui/react');
+var useDebounce = require('use-debounce');
+function _interopDefault(e) {
+    return e && e.__esModule ? e : {
+        default: e
+    };
+}
+var ReactDOM__default = /*#__PURE__*/ _interopDefault(ReactDOM);
+var clsx__default = /*#__PURE__*/ _interopDefault(clsx);
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = function(target, all) {
-    for(var name in all)__defProp(target, name, {
-        get: all[name],
-        enumerable: true
+var __name = function(target, value) {
+    return __defProp(target, "name", {
+        value: value,
+        configurable: true
     });
 };
-var __copyProps = function(to, from, except, desc) {
-    if (from && (typeof from === "undefined" ? "undefined" : _type_of(from)) === "object" || typeof from === "function") {
-        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
-        try {
-            var _loop = function() {
-                var key = _step.value;
-                if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-                    get: function() {
-                        return from[key];
-                    },
-                    enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-                });
-            };
-            for(var _iterator = __getOwnPropNames(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true)_loop();
-        } catch (err) {
-            _didIteratorError = true;
-            _iteratorError = err;
-        } finally{
-            try {
-                if (!_iteratorNormalCompletion && _iterator.return != null) {
-                    _iterator.return();
-                }
-            } finally{
-                if (_didIteratorError) {
-                    throw _iteratorError;
-                }
-            }
-        }
-    }
-    return to;
-};
-var __toESM = function(mod, isNodeMode, target) {
-    return target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(// If the importer is in node compatibility mode or this is not an ESM
-    // file that has been converted to a CommonJS file using a Babel-
-    // compatible transform (i.e. "__esModule" has not been set), then set
-    // "default" to the CommonJS "module.exports" for node compatibility.
-    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-        value: mod,
-        enumerable: true
-    }) : target, mod);
-};
-var __toCommonJS = function(mod) {
-    return __copyProps(__defProp({}, "__esModule", {
-        value: true
-    }), mod);
-};
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-    AnimateLogo: function() {
-        return AnimateLogo_default;
-    },
-    Backdrop: function() {
-        return Backdrop_default;
-    },
-    BottomAlert: function() {
-        return BottomAlert_default;
-    },
-    Breakpoint: function() {
-        return Breakpoint_default;
-    },
-    Button: function() {
-        return Button_default;
-    },
-    Checkbox: function() {
-        return Checkbox_default;
-    },
-    CircleProgress: function() {
-        return CircleProgress_default;
-    },
-    Container: function() {
-        return Container_default;
-    },
-    CourseProgress: function() {
-        return CourseProgress_default;
-    },
-    ErrorText: function() {
-        return ErrorText_default;
-    },
-    Fade: function() {
-        return Fade_default;
-    },
-    FunButton: function() {
-        return FunButton_default;
-    },
-    FunRoundButton: function() {
-        return FunRoundButton_default;
-    },
-    IconInfo: function() {
-        return IconInfo_default;
-    },
-    Modal: function() {
-        return Modal_default;
-    },
-    NoResults: function() {
-        return NoResults_default;
-    },
-    NoticeBox: function() {
-        return NoticeBox_default;
-    },
-    Overlay: function() {
-        return Overlay_default;
-    },
-    OverlaySpinner: function() {
-        return OverlaySpinner_default;
-    },
-    PRIMARY_COLOR: function() {
-        return PRIMARY_COLOR;
-    },
-    Pill: function() {
-        return Pill_default;
-    },
-    ProgressBar: function() {
-        return ProgressBar_default;
-    },
-    ProgressBarSimple: function() {
-        return ProgressBarSimple_default;
-    },
-    RadioOption: function() {
-        return RadioOption_default;
-    },
-    RatingStars: function() {
-        return RatingStars_default;
-    },
-    ScrollProgress: function() {
-        return ScrollProgress_default;
-    },
-    Slider: function() {
-        return Slider_default;
-    },
-    Spinner: function() {
-        return Spinner_default;
-    },
-    StepsComponent: function() {
-        return StepsComponent_default;
-    },
-    Tippy: function() {
-        return Tippy_default;
-    },
-    ToggleSwitch: function() {
-        return ToggleSwitch_default;
-    },
-    UserContentSwitcher: function() {
-        return UserContentSwitcher_default;
-    },
-    baseFieldStyle: function() {
-        return baseFieldStyle;
-    },
-    createExerciseElementStyle: function() {
-        return createExerciseElementStyle;
-    },
-    exerciseDeleteButton: function() {
-        return exerciseDeleteButton;
-    },
-    exerciseEditButton: function() {
-        return exerciseEditButton;
-    },
-    headerButtonClass: function() {
-        return headerButtonClass;
-    },
-    headerTippyClass: function() {
-        return headerTippyClass;
-    },
-    tippyClassname: function() {
-        return tippyClassname;
-    },
-    xIconButton: function() {
-        return xIconButton;
-    }
-});
-module.exports = __toCommonJS(index_exports);
 // src/constants.tsx
 var PRIMARY_COLOR = "#00b4d8";
-// src/Common/ErrorText.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var ErrorText = function(param) {
+var ErrorText = /* @__PURE__ */ __name(function(param) {
     var text = param.text, style = param.style, classNames = param.classNames;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+    return /* @__PURE__ */ jsxRuntime.jsx("p", {
         className: classNames ? classNames : "text-red-500 font-semibold text-wrap py-auto",
         style: style,
         children: text
     });
-};
+}, "ErrorText");
 var ErrorText_default = ErrorText;
 // 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-950 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";
@@ -337,36 +170,34 @@ var exerciseEditButton = "w-6 h-6 flex justify-center text-gray-700 dark:text-gr
 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";
-// src/Spinners/Spinner.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Spinner = function(param) {
+var Spinner = /* @__PURE__ */ __name(function(param) {
     var _param_visible = param.visible, visible = _param_visible === void 0 ? true : _param_visible, size = param.size, isWhite = param.white;
     if (visible === false) return null;
     var color = isWhite ? "stroke-white/90" : "stroke-slate-600/80";
     var bgColor = isWhite ? "stroke-white/20" : "stroke-slate-500/20";
     var dimensions = size === "small" ? "w-5 h-5" : "w-8 h-8";
     var spinnerClasses = "\n        absolute\n        top-0\n        animate-spin\n        ".concat(dimensions, "\n    ");
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
         className: "relative h-8 w-8 flex justify-center items-center",
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", {
+            /* @__PURE__ */ jsxRuntime.jsx("svg", {
                 className: "absolute top-0 ".concat(dimensions, " ").concat(bgColor),
                 viewBox: "0 0 24 24",
                 fill: "none",
                 strokeWidth: "2.4",
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", {
+                children: /* @__PURE__ */ jsxRuntime.jsx("circle", {
                     cx: "12",
                     cy: "12",
                     r: "10"
                 })
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", {
+            /* @__PURE__ */ jsxRuntime.jsx("svg", {
                 className: spinnerClasses,
                 viewBox: "0 0 24 24",
                 fill: "none",
                 strokeWidth: "2.4",
                 strokeLinecap: "round",
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", {
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", {
                     d: "\n                        M 12 2 \n                        A 10 10 0 0 1 22 12 \n                        A 10 10 0 0 1 12 22 \n                        A 10 10 0 0 1 2 12 \n                        A 10 10 0 0 1 12 2\n                    ",
                     strokeDasharray: "13 18.4",
                     stroke: "inherit",
@@ -375,38 +206,36 @@ var Spinner = function(param) {
             })
         ]
     });
-};
-var SpinnerCentered = function(props) {
+}, "Spinner");
+var SpinnerCentered = /* @__PURE__ */ __name(function(props) {
     if (props.visible === false) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
         className: "w-full flex justify-center items-center",
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, _object_spread({}, props))
+        children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, _object_spread({}, props))
     });
-};
+}, "SpinnerCentered");
 Spinner.displayName = "Spinner";
 SpinnerCentered.displayName = "Spinner.Centered";
 Spinner.Centered = SpinnerCentered;
 var Spinner_default = Spinner;
-// src/Common/NoResults.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
 var HEIGHT = 160;
 var WIDTH = HEIGHT * (16 / 9);
-var NoResults = function(param) {
+var NoResults = /* @__PURE__ */ __name(function(param) {
     var loading = param.loading, message = param.message;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
         className: "relative w-full flex justify-center items-center",
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", {
+            /* @__PURE__ */ jsxRuntime.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_runtime3.jsx)("div", {
+                    /* @__PURE__ */ jsxRuntime.jsx("div", {
                         style: {
                             width: "calc(".concat(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_runtime3.jsx)("div", {
+                    /* @__PURE__ */ jsxRuntime.jsx("div", {
                         style: {
                             width: "calc(".concat(WIDTH, "px + 1rem)"),
                             height: 320
@@ -415,11 +244,11 @@ var NoResults = function(param) {
                     })
                 ]
             }),
-            !loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {
+            !loading && /* @__PURE__ */ jsxRuntime.jsx("div", {
                 className: "absolute w-full h-full flex justify-center items-center m-auto",
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", {
                     className: "p-4 rounded-lg bg-white dark:bg-slate-700 shadow-xl",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", {
+                    children: /* @__PURE__ */ jsxRuntime.jsx("p", {
                         className: "font-semibold text-lg text-gray-700 dark:text-gray-300",
                         children: message || "No results"
                     })
@@ -427,13 +256,11 @@ var NoResults = function(param) {
             })
         ]
     });
-};
+}, "NoResults");
 var NoResults_default = NoResults;
-// src/Common/Container.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Container = function(param) {
+var Container = /* @__PURE__ */ __name(function(param) {
     var backgroundImage = param.backgroundImage, style = param.style, children = param.children, onClick = param.onClick;
-    return backgroundImage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", {
+    return backgroundImage ? /* @__PURE__ */ jsxRuntime.jsx("div", {
         style: _object_spread({
             backgroundImage: backgroundImage,
             backgroundSize: "cover"
@@ -441,7 +268,7 @@ var Container = function(param) {
         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: onClick,
         children: children ? children : null
-    }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", {
+    }) : /* @__PURE__ */ jsxRuntime.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: onClick,
         style: style || {
@@ -449,39 +276,35 @@ var Container = function(param) {
         },
         children: children ? children : null
     });
-};
+}, "Container");
 var Container_default = Container;
-// src/Common/Pill.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Pill = function(param) {
+var Pill = /* @__PURE__ */ __name(function(param) {
     var text = param.text;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", {
+    return /* @__PURE__ */ jsxRuntime.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
     });
-};
+}, "Pill");
 var Pill_default = Pill;
-// src/Common/StepsComponent.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var StepsComponent = function(param) {
+var StepsComponent = /* @__PURE__ */ __name(function(param) {
     var steps = param.steps, activeStep = param.activeStep, onStepPress = param.onStepPress;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
         className: "flex justify-between items-center space-x-1 w-full p-1 mb-2",
         children: steps.map(function(step, index) {
-            return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
+            return /* @__PURE__ */ jsxRuntime.jsx("div", {
                 className: "flex justify-center items-center space-x-2 w-full",
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", {
                     className: "flex flex-col items-center w-full",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", {
+                    children: /* @__PURE__ */ jsxRuntime.jsx("button", {
                         type: "button",
                         onClick: function() {
                             return onStepPress(index);
                         },
                         className: "flex items-center space-x-2 px-4 py-2 rounded-lg w-full min-w-10 md:min-w-20 sm:min-w-40 font-header transition-all duration-150\n                                        ".concat(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)("p", {
+                        children: /* @__PURE__ */ jsxRuntime.jsxs("p", {
                             className: "font-medium truncate",
                             children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", {
+                                /* @__PURE__ */ jsxRuntime.jsxs("span", {
                                     className: "text-semibold",
                                     children: [
                                         index + 1,
@@ -496,24 +319,20 @@ var StepsComponent = function(param) {
             }, "step_".concat(index, "_").concat(step.label));
         })
     });
-};
+}, "StepsComponent");
 var StepsComponent_default = StepsComponent;
-// src/Fade/Fade.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Fade = function(param) {
+var Fade = /* @__PURE__ */ __name(function(param) {
     var children = param.children, inProp = param.inProp;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
         className: "animate-fade-in",
         children: children
     });
-};
+}, "Fade");
 var Fade_default = Fade;
-// src/Backdrop/Backdrop.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Backdrop = function(param) {
+var Backdrop = /* @__PURE__ */ __name(function(param) {
     var visible = param.visible, onClick = param.onClick, opacity = param.opacity;
     if (!visible) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
         style: {
             opacity: opacity ? opacity : 90,
             zIndex: 21
@@ -521,11 +340,9 @@ var Backdrop = function(param) {
         className: "fixed top-0 left-0 w-full h-screen bg-gray-100 dark:bg-slate-900",
         onClick: onClick
     });
-};
+}, "Backdrop");
 var Backdrop_default = Backdrop;
-// src/Breakpoint/Breakpoint.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Breakpoint = function(param) {
+var Breakpoint = /* @__PURE__ */ __name(function(param) {
     var children = param.children, fromSize = param.fromSize, toSize = param.toSize;
     var className = "";
     if (fromSize && toSize) {
@@ -535,20 +352,16 @@ var Breakpoint = function(param) {
     } else if (toSize) {
         className = "block ".concat(toSize, ":hidden");
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
         className: className,
         children: children
     });
-};
+}, "Breakpoint");
 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 = function(param) {
+var Overlay = /* @__PURE__ */ __name(function(param) {
     var visible = param.visible, onDismissed = param.onDismissed, onClick = param.onClick, zIndex = param.zIndex, isDark = param.isDark, children = param.children, opacity = param.opacity, _param_withContainer = param.withContainer, withContainer = _param_withContainer === void 0 ? true : _param_withContainer;
-    var _ref = _sliced_to_array((0, import_react.useState)(null), 2), modalRoot = _ref[0], setModalRoot = _ref[1];
-    (0, import_react.useEffect)(function() {
+    var _react_useState = _sliced_to_array(react.useState(null), 2), modalRoot = _react_useState[0], setModalRoot = _react_useState[1];
+    react.useEffect(function() {
         var root = document.getElementById("modal-root");
         if (!root) {
             root = document.createElement("div");
@@ -567,9 +380,9 @@ var Overlay = function(param) {
         visible
     ]);
     if (!visible || !modalRoot) return null;
-    return import_react_dom.default.createPortal(/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {
+    return ReactDOM__default.default.createPortal(/* @__PURE__ */ jsxRuntime.jsx("div", {
         className: "animate-fade-in",
-        children: withContainer ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {
+        children: withContainer ? /* @__PURE__ */ jsxRuntime.jsx("div", {
             onClick: onDismissed || onClick,
             className: "top-0 left-0 fixed w-full h-screen dark:bg-black/70 bg-white/60 backdrop-blur-lg flex items-center justify-center",
             style: {
@@ -579,38 +392,33 @@ var Overlay = function(param) {
             children: children
         }) : children
     }), modalRoot);
-};
+}, "Overlay");
 var Overlay_default = Overlay;
-// src/Button/Button.tsx
-var import_clsx = __toESM(require("clsx"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Button = function(param) {
+var Button = /* @__PURE__ */ __name(function(param) {
     var _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, loading = param.loading, onClick = param.onClick, _param_kind = param.kind, kind = _param_kind === void 0 ? "primary" : _param_kind, _param_size = param.size, size = _param_size === void 0 ? "small" : _param_size, _param_type = param.type, type = _param_type === void 0 ? "button" : _param_type, children = param.children;
-    var styled = function() {
+    var styled = /* @__PURE__ */ __name(function() {
         switch(kind){
             case "primary":
-                return (0, import_clsx.default)("bg-primary font-header text-white font-medium transition-all duration-75 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-black/10");
+                return clsx__default.default("bg-primary font-header text-white font-medium transition-all duration-75 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-black/10");
             case "indigo":
-                return (0, import_clsx.default)("bg-indigo-500 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-black/10");
+                return clsx__default.default("bg-indigo-500 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-black/10");
             case "green":
-                return (0, import_clsx.default)("bg-green-500 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-black/10");
+                return clsx__default.default("bg-green-500 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-black/10");
             case "teal":
-                return (0, import_clsx.default)("bg-teal-500 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-black/10");
+                return clsx__default.default("bg-teal-500 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-black/10");
             case "secondary":
-                return (0, import_clsx.default)("bg-secondary text-white font-header font-medium transition-all duration-75 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-black/10");
+                return clsx__default.default("bg-secondary text-white font-header font-medium transition-all duration-75 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-black/10");
             case "base":
-                return (0, import_clsx.default)("bg-white border-1 font-header border-gray-200 dark:bg-slate-600 dark:text-gray-100 transition-all duration-75 disabled:opacity-50 disabled:cursor-not-allowed dark:hover:bg-slate-400 hover:bg-slate-100");
+                return clsx__default.default("bg-white border-1 font-header border-gray-200 dark:bg-slate-600 dark:text-gray-100 transition-all duration-75 disabled:opacity-50 disabled:cursor-not-allowed dark:hover:bg-slate-400 hover:bg-slate-100");
             case "gray":
-                return (0, import_clsx.default)("bg-slate-400 dark:bg-slate-700 font-header text-white border-1 font-medium transition-opacity duration-75 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-black/10");
+                return clsx__default.default("bg-slate-400 dark:bg-slate-700 font-header text-white border-1 font-medium transition-opacity duration-75 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-black/10");
             case "alert":
-                return (0, import_clsx.default)("bg-amber-500 font-header text-white transition-all duration-75 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-black/10");
+                return clsx__default.default("bg-amber-500 font-header text-white transition-all duration-75 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-black/10");
             case "warning":
-                return (0, import_clsx.default)("bg-red-500 font-header text-white font-medium transition-opacity duration-75 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-black/10");
-            default:
-                break;
+                return clsx__default.default("bg-red-500 font-header text-white font-medium transition-opacity duration-75 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-black/10");
         }
-    };
-    var sized = function() {
+    }, "styled");
+    var sized = /* @__PURE__ */ __name(function() {
         switch(size){
             case "small":
                 return "p-1";
@@ -621,31 +429,27 @@ var Button = function(param) {
             default:
                 return "px-2 py-1";
         }
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", {
+    }, "sized");
+    return /* @__PURE__ */ jsxRuntime.jsx("button", {
         type: type || "button",
         disabled: disabled,
-        className: (0, import_clsx.default)("rounded-lg cursor-pointer focus:outline-none transition duration-100", styled(), sized()),
+        className: clsx__default.default("rounded-lg cursor-pointer focus:outline-none transition duration-100", styled(), sized()),
         onClick: onClick,
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
             className: "w-full max-h-11",
-            children: loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {
+            children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", {
                 className: "flex w-full justify-center items-center",
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner_default, {
+                children: /* @__PURE__ */ jsxRuntime.jsx(Spinner_default, {
                     white: true
                 })
             }) : children
         })
     });
-};
+}, "Button");
 var Button_default = Button;
-// src/Button/FunButton.tsx
-var import_react2 = require("react");
-var import_framer_motion = require("framer-motion");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var FunButton = function(param) {
+var FunButton = /* @__PURE__ */ __name(function(param) {
     var onClick = param.onClick, disabled = param.disabled, type = param.type, children = param.children, _param_color = param.color, color = _param_color === void 0 ? "primary" : _param_color, loading = param.loading, active = param.active, className = param.className, _param_size = param.size, size = _param_size === void 0 ? "base" : _param_size;
-    var _ref = (0, import_react2.useMemo)(function() {
+    var _react_useMemo = react.useMemo(function() {
         switch(color){
             case "primary":
                 return {
@@ -690,8 +494,8 @@ var FunButton = function(param) {
         }
     }, [
         color
-    ]), front = _ref.front, bottom = _ref.bottom;
-    var classStyle = (0, import_react2.useMemo)(function() {
+    ]), front = _react_useMemo.front, bottom = _react_useMemo.bottom;
+    var classStyle = react.useMemo(function() {
         switch(size){
             case "base":
                 return "relative block px-8 py-3 rounded-lg text-lg text-white font-medium font-header hover:bg-slate-900/20";
@@ -707,21 +511,21 @@ var FunButton = function(param) {
     }, [
         size
     ]);
-    var computedClassName = (0, import_react2.useMemo)(function() {
+    var computedClassName = react.useMemo(function() {
         var cName = className + " rounded-lg border-none p-0 cursor-pointer opacity-90 hover:bg-black/30 transition-opacity";
         return cName + (disabled ? " opacity-70 cursor-default" : "");
     }, [
         className,
         disabled
     ]);
-    var computedClassStyle = (0, import_react2.useMemo)(function() {
+    var computedClassStyle = react.useMemo(function() {
         var cName = classStyle;
         return cName + (disabled ? " opacity-70 cursor-default hover:bg-black/70" : "");
     }, [
         classStyle,
         disabled
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_framer_motion.motion.button, {
+    return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.button, {
         className: "".concat(computedClassName),
         style: {
             background: front,
@@ -736,7 +540,7 @@ var FunButton = function(param) {
             duration: 0.1,
             ease: "easeInOut"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_framer_motion.motion.span, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.span, {
             className: computedClassStyle,
             style: {
                 background: bottom,
@@ -755,9 +559,9 @@ var FunButton = function(param) {
                 duration: 0.1,
                 ease: "easeInOut"
             },
-            children: loading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", {
+            children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", {
                 className: size === "small" ? "min-h-6" : "min-h-10",
-                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Spinner_default.Centered, {
+                children: /* @__PURE__ */ jsxRuntime.jsx(Spinner_default.Centered, {
                     visible: true,
                     size: size === "small" ? "small" : "base",
                     white: true
@@ -765,16 +569,11 @@ var FunButton = function(param) {
             }) : children
         })
     });
-};
+}, "FunButton");
 var FunButton_default = FunButton;
-// src/Button/FunRoundButton.tsx
-var import_react3 = require("react");
-var import_framer_motion2 = require("framer-motion");
-var import_clsx2 = __toESM(require("clsx"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var FunRoundButton = function(param) {
+var FunRoundButton = /* @__PURE__ */ __name(function(param) {
     var onClick = param.onClick, disabled = param.disabled, type = param.type, children = param.children, color = param.color, active = param.active, className = param.className, _param_size = param.size, size = _param_size === void 0 ? 44 : _param_size;
-    var _ref = (0, import_react3.useMemo)(function() {
+    var _react_useMemo = react.useMemo(function() {
         switch(color){
             case "primary":
                 return {
@@ -815,9 +614,9 @@ var FunRoundButton = function(param) {
     }, [
         color,
         disabled
-    ]), front = _ref.front, bottom = _ref.bottom;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_framer_motion2.motion.button, {
-        className: (0, import_clsx2.default)(className || "border-none p-0 flex justify-center items-center cursor-pointer z-10", disabled ? "opacity-70 cursor-default" : "hover:opacity-95"),
+    ]), front = _react_useMemo.front, bottom = _react_useMemo.bottom;
+    return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.button, {
+        className: clsx__default.default(className || "border-none p-0 flex justify-center items-center cursor-pointer z-10", disabled ? "opacity-70 cursor-default" : "hover:opacity-95"),
         style: {
             background: front,
             height: size,
@@ -834,7 +633,7 @@ var FunRoundButton = function(param) {
         whileTap: {
             y: disabled ? 0 : 2
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_framer_motion2.motion.span, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.span, {
             className: "flex justify-center items-center z-10",
             style: {
                 background: bottom,
@@ -861,30 +660,25 @@ var FunRoundButton = function(param) {
             children: children
         })
     });
-};
+}, "FunRoundButton");
 var FunRoundButton_default = FunRoundButton;
-// src/Checkbox/Checkbox.tsx
-var import_react4 = require("react");
-var import_formik = require("formik");
-var import_clsx3 = __toESM(require("clsx"));
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Checkbox = function(param) {
+var Checkbox = /* @__PURE__ */ __name(function(param) {
     var name = param.name, labelText = param.labelText, isLarge = param.isLarge, onChange = param.onChange, isDisabled = param.isDisabled;
-    var _ref = _sliced_to_array((0, import_formik.useField)(name), 3), value = _ref[0].value, error = _ref[1].error, _ref_ = _ref[2], setValue = _ref_.setValue, setTouched = _ref_.setTouched;
-    var onCheck = function(e) {
+    var _formik_useField = _sliced_to_array(formik.useField(name), 3), value = _formik_useField[0].value, error = _formik_useField[1].error, _formik_useField_ = _formik_useField[2], setValue = _formik_useField_.setValue, setTouched = _formik_useField_.setTouched;
+    var onCheck = /* @__PURE__ */ __name(function(e) {
         setTouched(true);
         setValue(!value, true);
-    };
-    var rand = (0, import_react4.useMemo)(function() {
+    }, "onCheck");
+    var rand = react.useMemo(function() {
         return Math.random();
     }, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
         className: "relative flex flex-col justify-center items-center",
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", {
+            /* @__PURE__ */ jsxRuntime.jsxs("div", {
                 className: "flex items-center",
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", {
+                    /* @__PURE__ */ jsxRuntime.jsx("input", {
                         disabled: !!isDisabled,
                         onChange: function(e) {
                             onCheck(e);
@@ -895,30 +689,30 @@ var Checkbox = function(param) {
                         name: name,
                         type: "checkbox",
                         checked: !!value,
-                        className: (0, import_clsx3.default)("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
+                        className: clsx__default.default("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_runtime14.jsx)("label", {
+                    typeof labelText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("label", {
                         htmlFor: "".concat(name).concat(rand),
                         className: "ml-2 block text-sm text-gray-800 dark:text-gray-200",
                         children: labelText
-                    }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", {
+                    }) : /* @__PURE__ */ jsxRuntime.jsx("label", {
                         htmlFor: "".concat(name).concat(rand),
                         children: labelText
                     })
                 ]
             }),
-            error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ErrorText_default, {
+            error && /* @__PURE__ */ jsxRuntime.jsx(ErrorText_default, {
                 classNames: "absolute w-64 left-6 top-4 text-xs text-red-500",
                 text: error
             })
         ]
     });
-};
-var MultiChoiceCheckBox = function(param) {
+}, "Checkbox");
+var MultiChoiceCheckBox = /* @__PURE__ */ __name(function(param) {
     var name = param.name, hasMultipleAnswers = param.hasMultipleAnswers, index = param.index, isLarge = param.isLarge, allOptionsName = param.allOptionsName;
-    var _ref = _sliced_to_array((0, import_formik.useField)(name), 3), value = _ref[0].value, ref = _object_destructuring_empty(_ref[1]), _ref_ = _ref[2], setValue = _ref_.setValue, setTouched = _ref_.setTouched;
-    var _ref1 = _sliced_to_array((0, import_formik.useField)(allOptionsName), 3), _ref_1 = _ref1[0], optionsValue = _ref_1.value, _ref_2 = _ref1[2], setOptionsValue = _ref_2.setValue;
-    var onCheck = function(e) {
+    var _formik_useField = _sliced_to_array(formik.useField(name), 3), value = _formik_useField[0].value, ref = _object_destructuring_empty(_formik_useField[1]), _formik_useField_ = _formik_useField[2], setValue = _formik_useField_.setValue, setTouched = _formik_useField_.setTouched;
+    var _formik_useField1 = _sliced_to_array(formik.useField(allOptionsName), 3), _formik_useField_1 = _formik_useField1[0], optionsValue = _formik_useField_1.value, _formik_useField_2 = _formik_useField1[2], setOptionsValue = _formik_useField_2.setValue;
+    var onCheck = /* @__PURE__ */ __name(function(e) {
         setTouched(true);
         if (hasMultipleAnswers) {
             setValue(!value);
@@ -931,12 +725,12 @@ var MultiChoiceCheckBox = function(param) {
                 isCorrectAnswer: index === idx ? !el.isCorrectAnswer : false
             };
         }));
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", {
+    }, "onCheck");
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
         className: "flex flex-col justify-center items-center",
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", {
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
             className: "flex items-center",
-            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", {
+            children: /* @__PURE__ */ jsxRuntime.jsx("input", {
                 onChange: function(e) {
                     return onCheck(e);
                 },
@@ -945,24 +739,20 @@ var MultiChoiceCheckBox = function(param) {
                 id: name,
                 name: name,
                 type: "checkbox",
-                className: (0, import_clsx3.default)("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
+                className: clsx__default.default("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
             })
         })
     });
-};
+}, "MultiChoiceCheckBox");
 Checkbox.Multi = MultiChoiceCheckBox;
 var Checkbox_default = Checkbox;
-// src/Checkbox/RadioOption.tsx
-var import_clsx4 = __toESM(require("clsx"));
-var import_formik2 = require("formik");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var RadioOption = function(param) {
+var RadioOption = /* @__PURE__ */ __name(function(param) {
     var name = param.name, isLarge = param.isLarge, labelText = param.labelText, option = param.option, onSelect = param.onSelect;
-    var _ref = _sliced_to_array((0, import_formik2.useField)(name), 3), value = _ref[0].value, ref = _object_destructuring_empty(_ref[1]), setValue = _ref[2].setValue;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", {
+    var _formik_useField = _sliced_to_array(formik.useField(name), 3), value = _formik_useField[0].value, ref = _object_destructuring_empty(_formik_useField[1]), setValue = _formik_useField[2].setValue;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
         className: "flex items-center",
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("input", {
+            /* @__PURE__ */ jsxRuntime.jsx("input", {
                 onChange: function() {
                     setValue(option);
                     onSelect === null || onSelect === void 0 ? void 0 : onSelect();
@@ -972,55 +762,52 @@ var RadioOption = function(param) {
                 name: name,
                 type: "checkbox",
                 checked: value === option,
-                className: (0, import_clsx4.default)("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
+                className: clsx__default.default("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_runtime15.jsx)("label", {
+            typeof labelText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("label", {
                 htmlFor: option,
                 className: "ml-2 block text-sm text-gray-900",
                 children: labelText
-            }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", {
+            }) : /* @__PURE__ */ jsxRuntime.jsx("label", {
                 htmlFor: option,
                 children: labelText
             })
         ]
     });
-};
+}, "RadioOption");
 var RadioOption_default = RadioOption;
-// src/Common/BottomAlert.tsx
-var import_react_dom2 = __toESM(require("react-dom"));
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var BottomAlert = function(param) {
+var BottomAlert = /* @__PURE__ */ __name(function(param) {
     var isDark = param.isDark, setDontShowAgain = param.setDontShowAgain, dontShowAgain = param.dontShowAgain, title = param.title, borderColor = param.borderColor, onDismissed = param.onDismissed, cancelText = param.cancelText, confirmText = param.confirmText, onConfirm = param.onConfirm, onCancel = param.onCancel, isSingleAction = param.isSingleAction, children = param.children, buttonColor = param.buttonColor;
-    var dismiss = function() {
+    var dismiss = /* @__PURE__ */ __name(function() {
         onDismissed === null || onDismissed === void 0 ? void 0 : onDismissed();
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", {
+    }, "dismiss");
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
         className: "top-0 left-0 fixed w-full h-screen flex justify-center",
         style: {
             background: isDark ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.1)",
             zIndex: 9999
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", {
+        children: /* @__PURE__ */ jsxRuntime.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", {
+            children: /* @__PURE__ */ jsxRuntime.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", {
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
                     style: {
                         borderColor: borderColor || "#0ea5e9"
                     },
                     children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", {
+                        /* @__PURE__ */ jsxRuntime.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", {
+                        /* @__PURE__ */ jsxRuntime.jsx("div", {
                             className: "mt-2 text-lg",
                             children: children
                         }),
-                        setDontShowAgain ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", {
+                        setDontShowAgain ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
                             className: "flex items-center space-x-1",
                             children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", {
+                                /* @__PURE__ */ jsxRuntime.jsx("input", {
                                     onChange: function() {
                                         setDontShowAgain(function(s) {
                                             return !s;
@@ -1031,16 +818,16 @@ var BottomAlert = function(param) {
                                     type: "checkbox",
                                     className: "form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded h-4 w-4"
                                 }),
-                                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", {
+                                /* @__PURE__ */ jsxRuntime.jsx("label", {
                                     htmlFor: "show_again_check",
                                     className: "dark:text-gray-200 text-gray-700",
                                     children: "Don't show again"
                                 })
                             ]
                         }) : null,
-                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", {
+                        /* @__PURE__ */ jsxRuntime.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, {
+                            children: isSingleAction ? /* @__PURE__ */ jsxRuntime.jsx(Button_default, {
                                 type: "button",
                                 kind: buttonColor,
                                 onClick: function() {
@@ -1048,12 +835,12 @@ var BottomAlert = function(param) {
                                     dismiss();
                                 },
                                 children: confirmText || "Okay"
-                            }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", {
+                            }) : /* @__PURE__ */ jsxRuntime.jsxs("div", {
                                 className: "w-1/3 flex justify-end space-x-4",
                                 children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", {
+                                    /* @__PURE__ */ jsxRuntime.jsx("div", {
                                         className: "w-full flex flex-col",
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button_default, {
+                                        children: /* @__PURE__ */ jsxRuntime.jsx(Button_default, {
                                             type: "button",
                                             kind: "secondary",
                                             onClick: function() {
@@ -1063,9 +850,9 @@ var BottomAlert = function(param) {
                                             children: cancelText || "Cancel"
                                         })
                                     }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", {
+                                    /* @__PURE__ */ jsxRuntime.jsx("div", {
                                         className: "w-full flex flex-col",
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button_default, {
+                                        children: /* @__PURE__ */ jsxRuntime.jsx(Button_default, {
                                             type: "button",
                                             kind: buttonColor,
                                             onClick: function() {
@@ -1083,60 +870,53 @@ var BottomAlert = function(param) {
             })
         })
     });
-};
-var BAWrapper = function(props) {
+}, "BottomAlert");
+var BAWrapper = /* @__PURE__ */ __name(function(props) {
     if (!props.isVisible) return null;
-    return import_react_dom2.default.createPortal(/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BottomAlert, _object_spread({}, props)), document.body);
-};
+    return ReactDOM__default.default.createPortal(/* @__PURE__ */ jsxRuntime.jsx(BottomAlert, _object_spread({}, props)), document.body);
+}, "BAWrapper");
 var BottomAlert_default = BAWrapper;
-// src/Common/IconInfo.tsx
-var import_clsx6 = __toESM(require("clsx"));
-// src/Common/Tippy.tsx
-var import_react5 = require("react");
-var import_react6 = require("@floating-ui/react");
-var import_clsx5 = __toESM(require("clsx"));
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Tippy = function(param) {
+var Tippy = /* @__PURE__ */ __name(function(param) {
     var children = param.children, content = param.content, _param_placement = param.placement, placement = _param_placement === void 0 ? "top" : _param_placement, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, _param_wrapperClassname = param.wrapperClassname, wrapperClassname = _param_wrapperClassname === void 0 ? "" : _param_wrapperClassname, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, tmp = param.arrow, useArrow = tmp === void 0 ? false : tmp, visible = param.visible;
-    var _ref = _sliced_to_array((0, import_react5.useState)(false), 2), isOpen = _ref[0], setIsOpen = _ref[1];
-    var arrowRef = (0, import_react5.useRef)(null);
-    (0, import_react5.useEffect)(function() {
+    var _react_useState = _sliced_to_array(react.useState(false), 2), isOpen = _react_useState[0], setIsOpen = _react_useState[1];
+    var arrowRef = react.useRef(null);
+    react.useEffect(function() {
         if (visible) {
             setIsOpen(true);
         }
     }, [
         visible
     ]);
-    var _ref1 = (0, import_react6.useFloating)({
+    var _react$1_useFloating = react$1.useFloating({
         placement: placement,
         open: isOpen,
         onOpenChange: setIsOpen,
         middleware: [
-            (0, import_react6.offset)(8),
-            (0, import_react6.flip)(),
-            (0, import_react6.shift)(),
-            (0, import_react6.arrow)({
+            react$1.offset(8),
+            react$1.flip(),
+            react$1.shift(),
+            react$1.arrow({
                 element: arrowRef
             })
         ]
-    }), x = _ref1.x, y = _ref1.y, strategy = _ref1.strategy, refs = _ref1.refs, context = _ref1.context;
-    var hover = (0, import_react6.useHover)(context, {
+    }), x = _react$1_useFloating.x, y = _react$1_useFloating.y, strategy = _react$1_useFloating.strategy, refs = _react$1_useFloating.refs, context = _react$1_useFloating.context;
+    var hover = react$1.useHover(context, {
         enabled: !disabled
     });
-    var dismiss = (0, import_react6.useDismiss)(context);
-    var role = (0, import_react6.useRole)(context);
-    var _ref2 = (0, import_react6.useInteractions)([
+    var dismiss = react$1.useDismiss(context);
+    var role = react$1.useRole(context);
+    var _react$1_useInteractions = react$1.useInteractions([
         hover,
         dismiss,
         role
-    ]), getReferenceProps = _ref2.getReferenceProps, getFloatingProps = _ref2.getFloatingProps;
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, {
+    ]), getReferenceProps = _react$1_useInteractions.getReferenceProps, getFloatingProps = _react$1_useInteractions.getFloatingProps;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            isOpen && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react6.FloatingPortal, {
+            isOpen && /* @__PURE__ */ jsxRuntime.jsxs(react$1.FloatingPortal, {
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", _object_spread_props(_object_spread({
+                    /* @__PURE__ */ jsxRuntime.jsx("div", _object_spread_props(_object_spread({
                         ref: refs.setFloating,
-                        className: (0, import_clsx5.default)("".concat(className || tippyClassname))
+                        className: clsx__default.default("".concat(className || tippyClassname))
                     }, getFloatingProps()), {
                         style: {
                             position: strategy,
@@ -1147,7 +927,7 @@ var Tippy = function(param) {
                         },
                         children: content
                     })),
-                    useArrow && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react6.FloatingArrow, {
+                    useArrow && /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingArrow, {
                         ref: arrowRef,
                         context: context,
                         className: "fill-gray-900",
@@ -1155,7 +935,7 @@ var Tippy = function(param) {
                     })
                 ]
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", _object_spread_props(_object_spread({
+            /* @__PURE__ */ jsxRuntime.jsx("div", _object_spread_props(_object_spread({
                 ref: refs.setReference
             }, getReferenceProps()), {
                 className: wrapperClassname,
@@ -1163,52 +943,45 @@ var Tippy = function(param) {
             }))
         ]
     });
-};
+}, "Tippy");
 var Tippy_default = Tippy;
-// src/Common/IconInfo.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var IconInfo = function(param) {
+var IconInfo = /* @__PURE__ */ __name(function(param) {
     var content = param.content, icon = param.icon, number = param.number, color = param.color;
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", {
+    return /* @__PURE__ */ jsxRuntime.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, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(Tippy_default, {
             className: tippyClassname,
             content: content,
-            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", {
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
                 className: "relative",
                 children: [
                     icon,
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", {
-                        className: (0, import_clsx6.default)("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"),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", {
+                        className: clsx__default.default("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
                     })
                 ]
             })
         })
     });
-};
+}, "IconInfo");
 var IconInfo_default = IconInfo;
-// src/Icons/XIcon.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var XIcon = function(param) {
+var XIcon = /* @__PURE__ */ __name(function(param) {
     var className = param.className;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", {
+    return /* @__PURE__ */ jsxRuntime.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", {
+        children: /* @__PURE__ */ jsxRuntime.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"
         })
     });
-};
+}, "XIcon");
 var XIcon_default = XIcon;
-// src/Common/Modal.tsx
-var import_clsx7 = __toESM(require("clsx"));
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var Modal = function(_param) {
+var Modal = /* @__PURE__ */ __name(function(_param) {
     var visible = _param.visible, children = _param.children, fullscreen = _param.fullscreen, displayDark = _param.displayDark, dismissLink = _param.dismissLink, bgOpacity = _param.bgOpacity, onDismissed = _param.onDismissed, _param_dismissable = _param.dismissable, dismissable = _param_dismissable === void 0 ? true : _param_dismissable, _param_dismissOnBackdropClick = _param.dismissOnBackdropClick, dismissOnBackdropClick = _param_dismissOnBackdropClick === void 0 ? true : _param_dismissOnBackdropClick, style = _param.style, props = _object_without_properties(_param, [
         "visible",
         "children",
@@ -1222,37 +995,37 @@ var Modal = function(_param) {
         "style"
     ]);
     if (!visible) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Overlay_default, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay_default, _object_spread_props(_object_spread({
         visible: visible,
         onClick: dismissOnBackdropClick ? onDismissed : void 0,
         isDark: displayDark,
         withContainer: true
     }, props), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
-            className: (0, import_clsx7.default)(displayDark && "dark", "bg-slate-900/20 fixed inset-0 flex items-center justify-center"),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: clsx__default.default(displayDark && "dark", "bg-slate-900/20 fixed inset-0 flex items-center justify-center"),
             style: {
                 zIndex: 1e4
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", {
-                className: (0, import_clsx7.default)("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"),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                className: clsx__default.default("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"),
                 children: [
-                    dismissLink ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("a", {
+                    dismissLink ? /* @__PURE__ */ jsxRuntime.jsx("a", {
                         href: dismissLink,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
+                        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
                             onClick: onDismissed,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(XIcon_default, {
+                            children: /* @__PURE__ */ jsxRuntime.jsx(XIcon_default, {
                                 className: "absolute h-5 w-5 top-4 sm:top-8 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_runtime20.jsx)("button", {
+                    }) : dismissable ? /* @__PURE__ */ jsxRuntime.jsx("button", {
                         className: "absolute top-4 sm:top-8 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_runtime20.jsx)(XIcon_default, {
+                        children: /* @__PURE__ */ jsxRuntime.jsx(XIcon_default, {
                             className: "h-5 w-5"
                         })
                     }) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
+                    /* @__PURE__ */ jsxRuntime.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: function(e) {
                             return e.stopPropagation();
@@ -1260,9 +1033,9 @@ var Modal = function(_param) {
                         style: _object_spread({
                             maxHeight: "calc(100vh - 6rem)"
                         }, style),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
+                        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
                             className: "p-4 sm:p-10",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
+                            children: /* @__PURE__ */ jsxRuntime.jsx("div", {
                                 className: "mt-8 sm:mt-0",
                                 children: children
                             })
@@ -1272,15 +1045,12 @@ var Modal = function(_param) {
             })
         })
     }));
-};
+}, "Modal");
 var Modal_default = Modal;
-// src/Common/NoticeBox.tsx
-var import_react7 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var NoticeBox = function(param) {
+var NoticeBox = /* @__PURE__ */ __name(function(param) {
     var children = param.children, type = param.type, isDismissible = param.isDismissible, isVisible = param.isVisible, onDismiss = param.onDismiss;
-    var _ref = _sliced_to_array((0, import_react7.useState)(true), 2), visible = _ref[0], setVisible = _ref[1];
-    var styles = (0, import_react7.useMemo)(function() {
+    var _react_useState = _sliced_to_array(react.useState(true), 2), visible = _react_useState[0], setVisible = _react_useState[1];
+    var styles = react.useMemo(function() {
         var base = "relative text-base rounded-md p-2 ";
         if (!visible) return "hidden";
         switch(type){
@@ -1297,21 +1067,21 @@ var NoticeBox = function(param) {
         type,
         visible
     ]);
-    (0, import_react7.useEffect)(function() {
+    react.useEffect(function() {
         setVisible(isVisible);
     }, [
         isVisible
     ]);
     if (!isVisible) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
         style: {
             zIndex: 100
         },
         className: styles,
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", {
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
             className: "relative",
             children: [
-                isDismissible && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", {
+                isDismissible && /* @__PURE__ */ jsxRuntime.jsx("button", {
                     type: "button",
                     onClick: function() {
                         setVisible(function(s) {
@@ -1320,7 +1090,7 @@ var NoticeBox = function(param) {
                         onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
                     },
                     className: "absolute bottom-1 right-1 transition-colors cursor-pointer duration-75 hover:text-blue-500",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(XIcon_default, {
+                    children: /* @__PURE__ */ jsxRuntime.jsx(XIcon_default, {
                         className: "h-5 w-5"
                     })
                 }),
@@ -1328,59 +1098,53 @@ var NoticeBox = function(param) {
             ]
         })
     });
-};
+}, "NoticeBox");
 var NoticeBox_default = NoticeBox;
-// src/Icons/StarIcon.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var StarIcon = function(param) {
+var StarIcon = /* @__PURE__ */ __name(function(param) {
     var className = param.className, percentage = param.percentage, color = param.color;
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", {
+    return /* @__PURE__ */ jsxRuntime.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", {
+            /* @__PURE__ */ jsxRuntime.jsx("defs", {
+                children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", {
                     id: "grad",
                     children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("stop", {
+                        /* @__PURE__ */ jsxRuntime.jsx("stop", {
                             offset: "".concat((percentage || 0.5) * 100, "%"),
                             "stop-color": color ? color : "#4b5563"
                         }),
-                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("stop", {
+                        /* @__PURE__ */ jsxRuntime.jsx("stop", {
                             offset: "".concat(100 - (percentage || 0.5) * 100, "%"),
                             "stop-color": "white"
                         })
                     ]
                 })
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", {
+            /* @__PURE__ */ jsxRuntime.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"
             })
         ]
     });
-};
+}, "StarIcon");
 var StarIcon_default = StarIcon;
-// src/Icons/StarIconSolid.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var StartIconSolid = function(param) {
+var StartIconSolid = /* @__PURE__ */ __name(function(param) {
     var className = param.className;
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", {
+    return /* @__PURE__ */ jsxRuntime.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", {
+        children: /* @__PURE__ */ jsxRuntime.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"
         })
     });
-};
+}, "StartIconSolid");
 var StarIconSolid_default = StartIconSolid;
-// src/Common/RatingStars.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var RatingStars = function(param) {
+var RatingStars = /* @__PURE__ */ __name(function(param) {
     var avgRating = param.avgRating, large = param.large;
     var icons = [
         1,
@@ -1390,52 +1154,48 @@ var RatingStars = function(param) {
         5
     ].map(function(el) {
         if (avgRating === 0) {
-            return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StarIconSolid_default, {
+            return /* @__PURE__ */ jsxRuntime.jsx(StarIconSolid_default, {
                 className: "".concat(large ? "h-5 w-5" : "h-3 w-3", " text-gray-200 dark:text-gray-400")
             }, "rating_star_".concat(el));
         }
         if (Number.isInteger(avgRating)) {
             if (el <= avgRating) {
-                return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StarIconSolid_default, {
+                return /* @__PURE__ */ jsxRuntime.jsx(StarIconSolid_default, {
                     className: "".concat(large ? "h-5 w-5" : "h-3 w-3", " text-blue-500")
                 }, "rating_star_".concat(el));
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StarIconSolid_default, {
+            return /* @__PURE__ */ jsxRuntime.jsx(StarIconSolid_default, {
                 className: "".concat(large ? "h-5 w-5" : "h-3 w-3", " text-gray-200 dark:text-gray-400")
             }, "rating_star_".concat(el));
         }
         var whole = Math.floor(avgRating);
         if (el <= whole) {
-            return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StarIconSolid_default, {
+            return /* @__PURE__ */ jsxRuntime.jsx(StarIconSolid_default, {
                 className: "".concat(large ? "h-5 w-5" : "h-3 w-3", " text-blue-500")
             }, "rating_star_".concat(el));
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StarIcon_default, {
+        return /* @__PURE__ */ jsxRuntime.jsx(StarIcon_default, {
             percentage: avgRating - whole,
             color: "#00b4d8",
             className: "".concat(large ? "h-5 w-5" : "h-3 w-3")
         }, "rating_star_".concat(el));
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Tippy_default, {
+    return /* @__PURE__ */ jsxRuntime.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_runtime24.jsx)("div", {
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
             className: "flex items-center space-x-0 justify-start",
             children: icons
         })
     });
-};
+}, "RatingStars");
 var RatingStars_default = RatingStars;
-// src/Common/Slider.tsx
-var import_react8 = require("react");
-var import_use_debounce = require("use-debounce");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var Slider = function(param) {
+var Slider = /* @__PURE__ */ __name(function(param) {
     var min = param.min, max = param.max, step = param.step, value = param.value, onChange = param.onChange;
-    var handleChange = function(event) {
+    var handleChange = /* @__PURE__ */ __name(function(event) {
         onChange(parseFloat(event.target.value));
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("input", {
+    }, "handleChange");
+    return /* @__PURE__ */ jsxRuntime.jsx("input", {
         type: "range",
         min: min,
         max: max,
@@ -1444,17 +1204,17 @@ var Slider = function(param) {
         onChange: handleChange,
         className: "w-full h-2 rounded-lg range-input"
     });
-};
-var DebouncedSlider = function(param) {
+}, "Slider");
+var DebouncedSlider = /* @__PURE__ */ __name(function(param) {
     var min = param.min, max = param.max, handleUpdate = param.handleUpdate, initialValue = param.initialValue;
-    var _ref = _sliced_to_array((0, import_react8.useState)(initialValue), 2), value = _ref[0], setValue = _ref[1];
-    var debouncedUpdate = (0, import_use_debounce.useDebouncedCallback)(function(v) {
+    var _react_useState = _sliced_to_array(react.useState(initialValue), 2), value = _react_useState[0], setValue = _react_useState[1];
+    var debouncedUpdate = useDebounce.useDebouncedCallback(function(v) {
         handleUpdate(v);
     }, 120, {
         trailing: true,
         leading: false
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Slider, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Slider, {
         min: min,
         max: max,
         step: 1,
@@ -1464,35 +1224,30 @@ var DebouncedSlider = function(param) {
             debouncedUpdate(v);
         }
     });
-};
+}, "DebouncedSlider");
 Slider.Debounced = DebouncedSlider;
 var Slider_default = Slider;
-// src/Common/ToggleSwitch.tsx
-var import_formik3 = require("formik");
-var import_framer_motion3 = require("framer-motion");
-var import_clsx8 = __toESM(require("clsx"));
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Formik = function(param) {
+var Formik = /* @__PURE__ */ __name(function(param) {
     var label = param.label, name = param.name;
-    var _ref = _sliced_to_array((0, import_formik3.useField)(name), 3), value = _ref[0].value, setValue = _ref[2].setValue;
-    var handleChange = function(e) {
+    var _formik_useField = _sliced_to_array(formik.useField(name), 3), value = _formik_useField[0].value, setValue = _formik_useField[2].setValue;
+    var handleChange = /* @__PURE__ */ __name(function(e) {
         setValue(e.target.checked);
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", {
+    }, "handleChange");
+    return /* @__PURE__ */ jsxRuntime.jsxs("label", {
         className: "flex items-center space-x-2 cursor-pointer",
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", {
+            /* @__PURE__ */ jsxRuntime.jsxs("div", {
                 className: "relative",
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("input", {
+                    /* @__PURE__ */ jsxRuntime.jsx("input", {
                         type: "checkbox",
                         className: "opacity-0 absolute",
                         checked: value,
                         onChange: handleChange
                     }),
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", {
-                        className: (0, import_clsx8.default)("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, {
+                    /* @__PURE__ */ jsxRuntime.jsx("div", {
+                        className: clsx__default.default("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-[#00b4d8]" : "bg-[#64748b]"),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, {
                             className: "w-4 h-4 bg-white rounded-full absolute top-1",
                             initial: false,
                             animate: {
@@ -1507,33 +1262,33 @@ var Formik = function(param) {
                     })
                 ]
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", {
+            /* @__PURE__ */ jsxRuntime.jsx("span", {
                 className: "text-sm font-medium text-gray-800 dark:text-gray-200",
                 children: label
             })
         ]
     });
-};
-var ToggleSwitch = function(param) {
+}, "Formik");
+var ToggleSwitch = /* @__PURE__ */ __name(function(param) {
     var label = param.label, onChange = param.onChange, value = param.value;
-    var handleChange = function(e) {
+    var handleChange = /* @__PURE__ */ __name(function(e) {
         onChange(e.target.checked);
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", {
+    }, "handleChange");
+    return /* @__PURE__ */ jsxRuntime.jsxs("label", {
         className: "flex items-center space-x-2 cursor-pointer",
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", {
+            /* @__PURE__ */ jsxRuntime.jsxs("div", {
                 className: "relative",
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("input", {
+                    /* @__PURE__ */ jsxRuntime.jsx("input", {
                         type: "checkbox",
                         className: "opacity-0 absolute",
                         checked: value,
                         onChange: handleChange
                     }),
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", {
-                        className: (0, import_clsx8.default)("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, {
+                    /* @__PURE__ */ jsxRuntime.jsx("div", {
+                        className: clsx__default.default("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-[#00b4d8]" : "bg-[#64748b]"),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, {
                             className: "w-4 h-4 bg-white rounded-full absolute top-1",
                             initial: false,
                             animate: {
@@ -1548,64 +1303,55 @@ var ToggleSwitch = function(param) {
                     })
                 ]
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", {
+            /* @__PURE__ */ jsxRuntime.jsx("span", {
                 className: "text-sm font-medium text-gray-800 dark:text-gray-200",
                 children: label
             })
         ]
     });
-};
+}, "ToggleSwitch");
 ToggleSwitch.Formik = Formik;
 var ToggleSwitch_default = ToggleSwitch;
-// src/Common/UserContentSwitcher.tsx
-var import_framer_motion4 = require("framer-motion");
-// src/Icons/PlusCircleIcon.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var PlusCircleIcon = function(param) {
+var PlusCircleIcon = /* @__PURE__ */ __name(function(param) {
     var className = param.className;
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("svg", {
+    return /* @__PURE__ */ jsxRuntime.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", {
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", {
             strokeLinecap: "round",
             strokeLinejoin: "round",
             d: "M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
         })
     });
-};
+}, "PlusCircleIcon");
 var PlusCircleIcon_default = PlusCircleIcon;
-// src/Icons/ArrowCircleRight.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var StartIconSolid2 = function(param) {
+var StartIconSolid2 = /* @__PURE__ */ __name(function(param) {
     var className = param.className;
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", {
+    return /* @__PURE__ */ jsxRuntime.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", {
+        children: /* @__PURE__ */ jsxRuntime.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"
         })
     });
-};
+}, "StartIconSolid");
 var ArrowCircleRight_default = StartIconSolid2;
-// src/Common/UserContentSwitcher.tsx
-var import_clsx9 = __toESM(require("clsx"));
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var UserContentSwitcher = function(param) {
+var UserContentSwitcher = /* @__PURE__ */ __name(function(param) {
     var Icon1 = param.icon1, Icon2 = param.icon2, setGalleryMode = param.setGalleryMode, galleryMode = param.galleryMode, title1 = param.title1, title2 = param.title2;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", {
+    return /* @__PURE__ */ jsxRuntime.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, {
+            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, {
                 className: "absolute w-1/2 h-11 rounded-md bg-white dark:bg-slate-600",
                 animate: {
                     x: galleryMode === title1.toLowerCase() ? "1%" : "99%"
@@ -1616,52 +1362,52 @@ var UserContentSwitcher = function(param) {
                     stiffness: 200
                 }
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("button", {
+            /* @__PURE__ */ jsxRuntime.jsxs("button", {
                 onClick: function() {
                     return 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_runtime29.jsx)("span", {
-                        className: (0, import_clsx9.default)("truncate", {
+                    /* @__PURE__ */ jsxRuntime.jsx("span", {
+                        className: clsx__default.default("truncate", {
                             "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
                             "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
                         }),
                         children: title1.toLocaleUpperCase()
                     }),
-                    Icon1 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon1, {
-                        className: (0, import_clsx9.default)("h-5 w-5", {
+                    Icon1 ? /* @__PURE__ */ jsxRuntime.jsx(Icon1, {
+                        className: clsx__default.default("h-5 w-5", {
                             "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
                             "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
                         })
-                    }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PlusCircleIcon_default, {
-                        className: (0, import_clsx9.default)("h-5 w-5", {
+                    }) : /* @__PURE__ */ jsxRuntime.jsx(PlusCircleIcon_default, {
+                        className: clsx__default.default("h-5 w-5", {
                             "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
                             "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
                         })
                     })
                 ]
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("button", {
+            /* @__PURE__ */ jsxRuntime.jsxs("button", {
                 onClick: function() {
                     return 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_runtime29.jsx)("span", {
-                        className: (0, import_clsx9.default)("truncate", {
+                    /* @__PURE__ */ jsxRuntime.jsx("span", {
+                        className: clsx__default.default("truncate", {
                             "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
                             "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
                         }),
                         children: title2.toLocaleUpperCase()
                     }),
-                    Icon2 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon2, {
-                        className: (0, import_clsx9.default)("h-5 w-5", {
+                    Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(Icon2, {
+                        className: clsx__default.default("h-5 w-5", {
                             "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
                             "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
                         })
-                    }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ArrowCircleRight_default, {
-                        className: (0, import_clsx9.default)("h-5 w-5", {
+                    }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowCircleRight_default, {
+                        className: clsx__default.default("h-5 w-5", {
                             "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
                             "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
                         })
@@ -1670,22 +1416,20 @@ var UserContentSwitcher = function(param) {
             })
         ]
     });
-};
+}, "UserContentSwitcher");
 var UserContentSwitcher_default = UserContentSwitcher;
-// src/ProgressBar/ProgressBarSimple.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var ProgressBarSimple = function(param) {
+var ProgressBarSimple = /* @__PURE__ */ __name(function(param) {
     var progress = param.progress, color = param.color, _param_height = param.height, height = _param_height === void 0 ? 10 : _param_height, _param_backgroundColor = param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? "#ccc" : _param_backgroundColor;
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
         className: "w-full",
-        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", {
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
             className: "w-full overflow-hidden transition-all duration-150 ease-in-out",
             style: {
                 backgroundColor: backgroundColor,
                 height: "".concat(height, "px"),
                 borderRadius: "".concat(height / 2, "px")
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", {
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", {
                 className: "transition-all duration-150 ease-in-out",
                 style: {
                     width: "".concat(progress, "%"),
@@ -1696,20 +1440,17 @@ var ProgressBarSimple = function(param) {
             })
         })
     });
-};
+}, "ProgressBarSimple");
 var ProgressBarSimple_default = ProgressBarSimple;
-// src/ProgressBar/ProgressBar.tsx
-var import_clsx10 = __toESM(require("clsx"));
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var ProgressBar = function(param) {
+var ProgressBar = /* @__PURE__ */ __name(function(param) {
     var progress = param.progress;
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
             className: "-mt-2 mb-6",
-            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", {
                 className: "bg-gray-100 rounded-full h-2",
-                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
-                    className: (0, import_clsx10.default)("rounded-full h-2", progress === 100 ? "bg-green-400" : "bg-gray-100"),
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    className: clsx__default.default("rounded-full h-2", progress === 100 ? "bg-green-400" : "bg-gray-100"),
                     style: {
                         width: "".concat(progress, "%"),
                         minWidth: "100%",
@@ -1719,26 +1460,26 @@ var ProgressBar = function(param) {
             })
         })
     });
-};
-var ProgressStepBar = function(param) {
+}, "ProgressBar");
+var ProgressStepBar = /* @__PURE__ */ __name(function(param) {
     var steps = param.steps, stepIndex = param.stepIndex, onStepClick = param.onStepClick, color = param.color;
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
         className: "flex w-full items-center space-x-0.5 -mt-1 overflow-hidden",
         children: steps.map(function(el, i) {
-            return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+            return /* @__PURE__ */ jsxRuntime.jsx("div", {
                 className: "flex-1 relative",
-                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Tippy_default, {
+                children: /* @__PURE__ */ jsxRuntime.jsx(Tippy_default, {
                     content: el.label,
                     className: tippyClassname,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
                         className: "mb-4",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
                             onClick: function() {
                                 return onStepClick === null || onStepClick === void 0 ? void 0 : onStepClick(i);
                             },
                             className: "cursor-pointer bg-gray-100 rounded-full h-2 overflow-hidden",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
-                                className: (0, import_clsx10.default)("cursor-pointer rounded-full h-2", stepIndex >= i ? "bg-green-400" : "bg-gray-100"),
+                            children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+                                className: clsx__default.default("cursor-pointer rounded-full h-2", stepIndex >= i ? "bg-green-400" : "bg-gray-100"),
                                 style: {
                                     width: "".concat(stepIndex >= i ? 100 : 0, "%"),
                                     transition: "width 0.3s ease"
@@ -1750,12 +1491,10 @@ var ProgressStepBar = function(param) {
             }, "index_progress_".concat(el.label));
         })
     });
-};
+}, "ProgressStepBar");
 ProgressBar.Step = ProgressStepBar;
 var ProgressBar_default = ProgressBar;
-// src/ProgressBar/CircleProgress.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var CircleProgress = function(param) {
+var CircleProgress = /* @__PURE__ */ __name(function(param) {
     var twColor = param.twColor, percentage = param.percentage, radius = param.radius, fill = param.fill, strokeWidth = param.strokeWidth;
     var r = radius;
     var cx = "50%";
@@ -1763,16 +1502,16 @@ var CircleProgress = function(param) {
     var w = Math.round(radius / 16);
     var strokeWidthCalc = strokeWidth ? strokeWidth : w < 8 ? 8 : w;
     var size = radius * 2 + strokeWidthCalc;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
         style: {
             height: size,
             width: size
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("svg", {
+        children: /* @__PURE__ */ jsxRuntime.jsxs("svg", {
             viewBox: "0 0 ".concat(size, " ").concat(size),
             className: "-rotate-90",
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", {
+                /* @__PURE__ */ jsxRuntime.jsx("circle", {
                     className: "text-white/50 dark:text-slate-200/50",
                     strokeWidth: strokeWidthCalc - 0.5,
                     stroke: "currentColor",
@@ -1781,7 +1520,7 @@ var CircleProgress = function(param) {
                     cx: cx,
                     cy: cy
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", {
+                /* @__PURE__ */ jsxRuntime.jsx("circle", {
                     strokeDasharray: 2 * Math.PI * r,
                     strokeDashoffset: 2 * Math.PI * r - percentage / 100 * 2 * Math.PI * r,
                     stroke: twColor || "white/50",
@@ -1795,12 +1534,10 @@ var CircleProgress = function(param) {
             ]
         })
     });
-};
+}, "CircleProgress");
 var CircleProgress_default = CircleProgress;
-// src/ProgressBar/CourseProgress.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
 var PRIMARY_COLOR2 = "#00b4d8";
-var CourseProgress = function(param) {
+var CourseProgress = /* @__PURE__ */ __name(function(param) {
     var twColor = param.twColor, percentage = param.percentage, label = param.label;
     var cx = "50%";
     var cy = "50%";
@@ -1809,16 +1546,16 @@ var CourseProgress = function(param) {
     var fullLength = 2 * Math.PI * r;
     var length = fullLength * (percentage < 1 ? 1 - percentage : 0.01);
     var strokeDashoffset = 2 * Math.PI * r - percentage / 100 * 2 * Math.PI * r;
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
         className: "flex items-center flex-col justify-center space-y-0  dark:bg-inherit dark:text-gray-300",
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", {
+            /* @__PURE__ */ jsxRuntime.jsxs("div", {
                 className: "relative flex items-center justify-center -my-2 -mt-1 overflow-hidden rounded-full",
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", {
+                    /* @__PURE__ */ jsxRuntime.jsxs("svg", {
                         className: "-rotate-90",
                         children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", {
+                            /* @__PURE__ */ jsxRuntime.jsx("circle", {
                                 className: "text-gray-300",
                                 strokeWidth: strokeWidth,
                                 stroke: "currentColor",
@@ -1827,14 +1564,12 @@ var CourseProgress = function(param) {
                                 cx: cx,
                                 cy: cy
                             }),
-                            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", {
+                            /* @__PURE__ */ jsxRuntime.jsx("circle", {
                                 style: {
                                     strokeDashoffset: strokeDashoffset
                                 },
                                 color: twColor || PRIMARY_COLOR2,
-                                ref: function(ref) {
-                                    if (ref) {}
-                                },
+                                ref: function(ref) {},
                                 strokeWidth: strokeWidth,
                                 strokeLinecap: "round",
                                 stroke: "currentColor",
@@ -1847,35 +1582,35 @@ var CourseProgress = function(param) {
                             })
                         ]
                     }),
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", {
+                    /* @__PURE__ */ jsxRuntime.jsx("span", {
                         className: "absolute top-[".concat(50 / 2, "] text-xl leading-none font-medium font-header hidden sm:block"),
                         children: percentage.toString() + "%"
                     })
                 ]
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", {
+            /* @__PURE__ */ jsxRuntime.jsx("p", {
                 className: "font-medium sm:text-xl font-header text-center w-full",
                 children: label
             })
         ]
     });
-};
-var Small = function(param) {
+}, "CourseProgress");
+var Small = /* @__PURE__ */ __name(function(param) {
     var twColor = param.twColor, percentage = param.percentage, label = param.label;
     var cx = 18;
     var cy = 18;
     var r = 14;
     var strokeWidth = 4;
     var strokeDashoffset = 2 * Math.PI * r - percentage / 100 * 2 * Math.PI * r;
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
         className: "flex items-center space-x-2 rounded-full bg-transparent border-2 border-slate-100 w-full",
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", {
+            /* @__PURE__ */ jsxRuntime.jsx("div", {
                 className: "flex items-center justify-center overflow-hidden",
-                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", {
+                children: /* @__PURE__ */ jsxRuntime.jsxs("svg", {
                     className: "w-10 h-11 transform translate-x-1 translate-y-1",
                     children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", {
+                        /* @__PURE__ */ jsxRuntime.jsx("circle", {
                             className: "text-gray-300",
                             strokeWidth: strokeWidth,
                             stroke: "currentColor",
@@ -1884,14 +1619,12 @@ var Small = function(param) {
                             cx: cx,
                             cy: cy
                         }),
-                        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", {
+                        /* @__PURE__ */ jsxRuntime.jsx("circle", {
                             style: {
                                 strokeDashoffset: strokeDashoffset
                             },
                             className: twColor || "text-blue-500",
-                            ref: function(ref) {
-                                if (ref) {}
-                            },
+                            ref: function(ref) {},
                             strokeWidth: strokeWidth,
                             strokeLinecap: "round",
                             stroke: "currentColor",
@@ -1903,7 +1636,7 @@ var Small = function(param) {
                     ]
                 })
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("p", {
+            /* @__PURE__ */ jsxRuntime.jsxs("p", {
                 className: "font-medium dark:text-gray-300 text-gray-600 text-sm font-header mt-1",
                 children: [
                     label,
@@ -1913,29 +1646,26 @@ var Small = function(param) {
             })
         ]
     });
-};
+}, "Small");
 CourseProgress.Small = Small;
 var CourseProgress_default = CourseProgress;
-// src/ProgressBar/ScrollProgress.tsx
-var import_react9 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
 var PRIMARY_COLOR3 = "#00b4d8";
-var ScrollProgress = function() {
-    var _ref = _sliced_to_array((0, import_react9.useState)(0), 2), scrollPercentage = _ref[0], setScrollPercentage = _ref[1];
-    (0, import_react9.useEffect)(function() {
-        var handleScroll = function() {
+var ScrollProgress = /* @__PURE__ */ __name(function() {
+    var _react_useState = _sliced_to_array(react.useState(0), 2), scrollPercentage = _react_useState[0], setScrollPercentage = _react_useState[1];
+    react.useEffect(function() {
+        var handleScroll = /* @__PURE__ */ __name(function() {
             var windowHeight = window.innerHeight;
             var documentHeight = document.documentElement.scrollHeight;
             var scrollY = window.scrollY;
             var scrollPercent = scrollY / (documentHeight - windowHeight) * 100;
             setScrollPercentage(scrollPercent);
-        };
+        }, "handleScroll");
         window.addEventListener("scroll", handleScroll);
         return function() {
             window.removeEventListener("scroll", handleScroll);
         };
     }, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
         style: {
             height: "4px",
             borderRadius: 2,
@@ -1946,7 +1676,7 @@ var ScrollProgress = function() {
             left: "0px",
             right: "0px"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
             style: {
                 height: "100%",
                 backgroundColor: PRIMARY_COLOR3,
@@ -1955,26 +1685,23 @@ var ScrollProgress = function() {
             }
         })
     });
-};
+}, "ScrollProgress");
 var ScrollProgress_default = ScrollProgress;
-// src/Icons/AnimateLogo.tsx
-var import_react10 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var AnimateLogo = function() {
-    var _ref = _sliced_to_array((0, import_react10.useState)(false), 2), isFirefox = _ref[0], setIsFirefox = _ref[1];
-    (0, import_react10.useEffect)(function() {
+var AnimateLogo = /* @__PURE__ */ __name(function() {
+    var _react_useState = _sliced_to_array(react.useState(false), 2), isFirefox = _react_useState[0], setIsFirefox = _react_useState[1];
+    react.useEffect(function() {
         var userAgent = window.navigator.userAgent;
         setIsFirefox(userAgent.indexOf("Firefox") > -1);
     }, []);
     if (isFirefox) {
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", {
+        return /* @__PURE__ */ jsxRuntime.jsx("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             className: "animate-spin",
             viewBox: "0 0 600 600",
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("g", {
+            children: /* @__PURE__ */ jsxRuntime.jsx("g", {
                 height: 176,
                 width: 176,
-                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("path", {
+                children: /* @__PURE__ */ jsxRuntime.jsxs("path", {
                     className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
                     stroke: "currentColor",
                     fill: "none",
@@ -1984,7 +1711,7 @@ var AnimateLogo = function() {
                     strokeDasharray: "1600",
                     d: "M466.49 164.79c17.79 34.76 25.48 75.66 19.08 118.96-11.28 76.36-67.11 139.06-141.89 158.25-127.11 32.61-243.49-61.27-245.86-184.81C95.79 150.86 182.9 60.52 289.23 58.56c33.95-.63 66.08 7.48 94.22 22.29 0 0 15.68 6.34 10.14 23.19 0 0-68.52 219.82-352.61 268.06",
                     children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("animate", {
+                        /* @__PURE__ */ jsxRuntime.jsx("animate", {
                             attributeName: "stroke-dashoffset",
                             to: "0",
                             from: "1600",
@@ -1996,7 +1723,7 @@ var AnimateLogo = function() {
                             keySplines: "0 0.26 0 1;0 0.26 0 1;0 0.26 0 1;0 0.26 0 1",
                             values: "1600;0;0;1600;1600"
                         }),
-                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("animateTransform", {
+                        /* @__PURE__ */ jsxRuntime.jsx("animateTransform", {
                             attributeName: "transform",
                             type: "rotate",
                             from: "0 300 300",
@@ -2014,10 +1741,10 @@ var AnimateLogo = function() {
             })
         });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", {
+    return /* @__PURE__ */ jsxRuntime.jsx("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 600 600",
-        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("g", {
+        children: /* @__PURE__ */ jsxRuntime.jsxs("g", {
             style: {
                 transformOrigin: "center"
             },
@@ -2025,7 +1752,7 @@ var AnimateLogo = function() {
             height: 176,
             width: 176,
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", {
+                /* @__PURE__ */ jsxRuntime.jsx("path", {
                     className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
                     stroke: "currentColor",
                     id: "motionPath",
@@ -2040,7 +1767,7 @@ var AnimateLogo = function() {
                     strokeWidth: "82",
                     strokeDasharray: "1600",
                     d: "M466.49 164.79c17.79 34.76 25.48 75.66 19.08 118.96-11.28 76.36-67.11 139.06-141.89 158.25-127.11 32.61-243.49-61.27-245.86-184.81C95.79 150.86 182.9 60.52 289.23 58.56c33.95-.63 66.08 7.48 94.22 22.29 0 0 15.68 6.34 10.14 23.19 0 0-68.52 219.82-352.61 268.06",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("animate", {
+                    children: /* @__PURE__ */ jsxRuntime.jsx("animate", {
                         attributeName: "stroke-dashoffset",
                         to: "0",
                         from: "1600",
@@ -2053,7 +1780,7 @@ var AnimateLogo = function() {
                         values: "1600;0;0;1600;1600"
                     })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("animateTransform", {
+                /* @__PURE__ */ jsxRuntime.jsx("animateTransform", {
                     attributeName: "transform",
                     type: "rotate",
                     from: "0",
@@ -2069,16 +1796,12 @@ var AnimateLogo = function() {
             ]
         })
     });
-};
+}, "AnimateLogo");
 var AnimateLogo_default = AnimateLogo;
-// src/Spinners/OverlaySpinner.tsx
-var import_react11 = require("react");
-var import_react_dom3 = require("react-dom");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var OverlaySpinner = function(param) {
+var OverlaySpinner = /* @__PURE__ */ __name(function(param) {
     var visible = param.visible;
-    var _ref = _sliced_to_array((0, import_react11.useState)(null), 2), modalRoot = _ref[0], setModalRoot = _ref[1];
-    (0, import_react11.useEffect)(function() {
+    var _react_useState = _sliced_to_array(react.useState(null), 2), modalRoot = _react_useState[0], setModalRoot = _react_useState[1];
+    react.useEffect(function() {
         var root = document.getElementById("spinner-root");
         if (!root) {
             root = document.createElement("div");
@@ -2098,63 +1821,60 @@ var OverlaySpinner = function(param) {
     if (!visible || !modalRoot) {
         return null;
     }
-    return (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", {
+    return ReactDOM.createPortal(/* @__PURE__ */ jsxRuntime.jsx("div", {
         style: {
             zIndex: 11e3
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", {
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
             style: {
                 zIndex: 11001
             },
             className: "fixed shrink-0 top-0 left-0 w-full h-screen flex items-center justify-center dark:bg-black/70 bg-white/60",
-            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", {
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", {
                 className: "h-44 w-44 overflow-visible",
-                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AnimateLogo_default, {})
+                children: /* @__PURE__ */ jsxRuntime.jsx(AnimateLogo_default, {})
             })
         })
     }), modalRoot);
-};
+}, "OverlaySpinner");
 var OverlaySpinner_default = OverlaySpinner;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-    AnimateLogo: AnimateLogo,
-    Backdrop: Backdrop,
-    BottomAlert: BottomAlert,
-    Breakpoint: Breakpoint,
-    Button: Button,
-    Checkbox: Checkbox,
-    CircleProgress: CircleProgress,
-    Container: Container,
-    CourseProgress: CourseProgress,
-    ErrorText: ErrorText,
-    Fade: Fade,
-    FunButton: FunButton,
-    FunRoundButton: FunRoundButton,
-    IconInfo: IconInfo,
-    Modal: Modal,
-    NoResults: NoResults,
-    NoticeBox: NoticeBox,
-    Overlay: Overlay,
-    OverlaySpinner: OverlaySpinner,
-    PRIMARY_COLOR: PRIMARY_COLOR,
-    Pill: Pill,
-    ProgressBar: ProgressBar,
-    ProgressBarSimple: ProgressBarSimple,
-    RadioOption: RadioOption,
-    RatingStars: RatingStars,
-    ScrollProgress: ScrollProgress,
-    Slider: Slider,
-    Spinner: Spinner,
-    StepsComponent: StepsComponent,
-    Tippy: Tippy,
-    ToggleSwitch: ToggleSwitch,
-    UserContentSwitcher: UserContentSwitcher,
-    baseFieldStyle: baseFieldStyle,
-    createExerciseElementStyle: createExerciseElementStyle,
-    exerciseDeleteButton: exerciseDeleteButton,
-    exerciseEditButton: exerciseEditButton,
-    headerButtonClass: headerButtonClass,
-    headerTippyClass: headerTippyClass,
-    tippyClassname: tippyClassname,
-    xIconButton: xIconButton
-});
+exports.AnimateLogo = AnimateLogo_default;
+exports.Backdrop = Backdrop_default;
+exports.BottomAlert = BottomAlert_default;
+exports.Breakpoint = Breakpoint_default;
+exports.Button = Button_default;
+exports.Checkbox = Checkbox_default;
+exports.CircleProgress = CircleProgress_default;
+exports.Container = Container_default;
+exports.CourseProgress = CourseProgress_default;
+exports.ErrorText = ErrorText_default;
+exports.Fade = Fade_default;
+exports.FunButton = FunButton_default;
+exports.FunRoundButton = FunRoundButton_default;
+exports.IconInfo = IconInfo_default;
+exports.Modal = Modal_default;
+exports.NoResults = NoResults_default;
+exports.NoticeBox = NoticeBox_default;
+exports.Overlay = Overlay_default;
+exports.OverlaySpinner = OverlaySpinner_default;
+exports.PRIMARY_COLOR = PRIMARY_COLOR;
+exports.Pill = Pill_default;
+exports.ProgressBar = ProgressBar_default;
+exports.ProgressBarSimple = ProgressBarSimple_default;
+exports.RadioOption = RadioOption_default;
+exports.RatingStars = RatingStars_default;
+exports.ScrollProgress = ScrollProgress_default;
+exports.Slider = Slider_default;
+exports.Spinner = Spinner_default;
+exports.StepsComponent = StepsComponent_default;
+exports.Tippy = Tippy_default;
+exports.ToggleSwitch = ToggleSwitch_default;
+exports.UserContentSwitcher = UserContentSwitcher_default;
+exports.baseFieldStyle = baseFieldStyle;
+exports.createExerciseElementStyle = createExerciseElementStyle;
+exports.exerciseDeleteButton = exerciseDeleteButton;
+exports.exerciseEditButton = exerciseEditButton;
+exports.headerButtonClass = headerButtonClass;
+exports.headerTippyClass = headerTippyClass;
+exports.tippyClassname = tippyClassname;
+exports.xIconButton = xIconButton;