evelearn-theme 2.0.28 → 2.0.29

package/dist/index.mjs

@@ -1,4 +1,3 @@
-// src/constants.tsx
 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];
@@ -128,17 +127,31 @@ 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);
 }
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo, useState, useRef, useEffect } from 'react';
+import ReactDOM, { createPortal } from 'react-dom';
+import clsx from 'clsx';
+import { motion } from 'framer-motion';
+import { useField } from 'formik';
+import { useFloating, offset, flip, shift, arrow, useHover, useDismiss, useRole, useInteractions, FloatingPortal, FloatingArrow } from '@floating-ui/react';
+import { useDebouncedCallback } from 'use-debounce';
+var __defProp = Object.defineProperty;
+var __name = function(target, value) {
+    return __defProp(target, "name", {
+        value: value,
+        configurable: true
+    });
+};
+// src/constants.tsx
 var PRIMARY_COLOR = "#00b4d8";
-// src/Common/ErrorText.tsx
-import { jsx } from "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__ */ 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";
@@ -149,9 +162,7 @@ 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
-import { jsx as jsx2, jsxs } from "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";
@@ -161,24 +172,24 @@ var Spinner = function(param) {
     return /* @__PURE__ */ jsxs("div", {
         className: "relative h-8 w-8 flex justify-center items-center",
         children: [
-            /* @__PURE__ */ jsx2("svg", {
+            /* @__PURE__ */ jsx("svg", {
                 className: "absolute top-0 ".concat(dimensions, " ").concat(bgColor),
                 viewBox: "0 0 24 24",
                 fill: "none",
                 strokeWidth: "2.4",
-                children: /* @__PURE__ */ jsx2("circle", {
+                children: /* @__PURE__ */ jsx("circle", {
                     cx: "12",
                     cy: "12",
                     r: "10"
                 })
             }),
-            /* @__PURE__ */ jsx2("svg", {
+            /* @__PURE__ */ jsx("svg", {
                 className: spinnerClasses,
                 viewBox: "0 0 24 24",
                 fill: "none",
                 strokeWidth: "2.4",
                 strokeLinecap: "round",
-                children: /* @__PURE__ */ jsx2("path", {
+                children: /* @__PURE__ */ 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",
@@ -187,38 +198,36 @@ var Spinner = function(param) {
             })
         ]
     });
-};
-var SpinnerCentered = function(props) {
+}, "Spinner");
+var SpinnerCentered = /* @__PURE__ */ __name(function(props) {
     if (props.visible === false) return null;
-    return /* @__PURE__ */ jsx2("div", {
+    return /* @__PURE__ */ jsx("div", {
         className: "w-full flex justify-center items-center",
-        children: /* @__PURE__ */ jsx2(Spinner, _object_spread({}, props))
+        children: /* @__PURE__ */ jsx(Spinner, _object_spread({}, props))
     });
-};
+}, "SpinnerCentered");
 Spinner.displayName = "Spinner";
 SpinnerCentered.displayName = "Spinner.Centered";
 Spinner.Centered = SpinnerCentered;
 var Spinner_default = Spinner;
-// src/Common/NoResults.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "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__ */ jsxs2("div", {
+    return /* @__PURE__ */ jsxs("div", {
         className: "relative w-full flex justify-center items-center",
         children: [
-            /* @__PURE__ */ jsxs2("div", {
+            /* @__PURE__ */ 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__ */ jsx3("div", {
+                    /* @__PURE__ */ 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__ */ jsx3("div", {
+                    /* @__PURE__ */ jsx("div", {
                         style: {
                             width: "calc(".concat(WIDTH, "px + 1rem)"),
                             height: 320
@@ -227,11 +236,11 @@ var NoResults = function(param) {
                     })
                 ]
             }),
-            !loading && /* @__PURE__ */ jsx3("div", {
+            !loading && /* @__PURE__ */ jsx("div", {
                 className: "absolute w-full h-full flex justify-center items-center m-auto",
-                children: /* @__PURE__ */ jsx3("div", {
+                children: /* @__PURE__ */ jsx("div", {
                     className: "p-4 rounded-lg bg-white dark:bg-slate-700 shadow-xl",
-                    children: /* @__PURE__ */ jsx3("p", {
+                    children: /* @__PURE__ */ jsx("p", {
                         className: "font-semibold text-lg text-gray-700 dark:text-gray-300",
                         children: message || "No results"
                     })
@@ -239,13 +248,11 @@ var NoResults = function(param) {
             })
         ]
     });
-};
+}, "NoResults");
 var NoResults_default = NoResults;
-// src/Common/Container.tsx
-import { jsx as jsx4 } from "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__ */ jsx4("div", {
+    return backgroundImage ? /* @__PURE__ */ jsx("div", {
         style: _object_spread({
             backgroundImage: backgroundImage,
             backgroundSize: "cover"
@@ -253,7 +260,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__ */ jsx4("div", {
+    }) : /* @__PURE__ */ 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 || {
@@ -261,39 +268,35 @@ var Container = function(param) {
         },
         children: children ? children : null
     });
-};
+}, "Container");
 var Container_default = Container;
-// src/Common/Pill.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Pill = function(param) {
+var Pill = /* @__PURE__ */ __name(function(param) {
     var text = param.text;
-    return /* @__PURE__ */ jsx5("span", {
+    return /* @__PURE__ */ 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
-import { jsx as jsx6, jsxs as jsxs3 } from "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__ */ jsx6("div", {
+    return /* @__PURE__ */ 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__ */ jsx6("div", {
+            return /* @__PURE__ */ jsx("div", {
                 className: "flex justify-center items-center space-x-2 w-full",
-                children: /* @__PURE__ */ jsx6("div", {
+                children: /* @__PURE__ */ jsx("div", {
                     className: "flex flex-col items-center w-full",
-                    children: /* @__PURE__ */ jsx6("button", {
+                    children: /* @__PURE__ */ 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__ */ jsxs3("p", {
+                        children: /* @__PURE__ */ jsxs("p", {
                             className: "font-medium truncate",
                             children: [
-                                /* @__PURE__ */ jsxs3("span", {
+                                /* @__PURE__ */ jsxs("span", {
                                     className: "text-semibold",
                                     children: [
                                         index + 1,
@@ -308,24 +311,20 @@ var StepsComponent = function(param) {
             }, "step_".concat(index, "_").concat(step.label));
         })
     });
-};
+}, "StepsComponent");
 var StepsComponent_default = StepsComponent;
-// src/Fade/Fade.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-var Fade = function(param) {
+var Fade = /* @__PURE__ */ __name(function(param) {
     var children = param.children, inProp = param.inProp;
-    return /* @__PURE__ */ jsx7("div", {
+    return /* @__PURE__ */ jsx("div", {
         className: "animate-fade-in",
         children: children
     });
-};
+}, "Fade");
 var Fade_default = Fade;
-// src/Backdrop/Backdrop.tsx
-import { jsx as jsx8 } from "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__ */ jsx8("div", {
+    return /* @__PURE__ */ jsx("div", {
         style: {
             opacity: opacity ? opacity : 90,
             zIndex: 21
@@ -333,11 +332,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
-import { jsx as jsx9 } from "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) {
@@ -347,17 +344,13 @@ var Breakpoint = function(param) {
     } else if (toSize) {
         className = "block ".concat(toSize, ":hidden");
     }
-    return /* @__PURE__ */ jsx9("div", {
+    return /* @__PURE__ */ jsx("div", {
         className: className,
         children: children
     });
-};
+}, "Breakpoint");
 var Breakpoint_default = Breakpoint;
-// src/Backdrop/Overlay.tsx
-import { useEffect, useState } from "react";
-import ReactDOM from "react-dom";
-import { jsx as jsx10 } from "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 _useState = _sliced_to_array(useState(null), 2), modalRoot = _useState[0], setModalRoot = _useState[1];
     useEffect(function() {
@@ -379,9 +372,9 @@ var Overlay = function(param) {
         visible
     ]);
     if (!visible || !modalRoot) return null;
-    return ReactDOM.createPortal(/* @__PURE__ */ jsx10("div", {
+    return ReactDOM.createPortal(/* @__PURE__ */ jsx("div", {
         className: "animate-fade-in",
-        children: withContainer ? /* @__PURE__ */ jsx10("div", {
+        children: withContainer ? /* @__PURE__ */ 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: {
@@ -391,14 +384,11 @@ var Overlay = function(param) {
             children: children
         }) : children
     }), modalRoot);
-};
+}, "Overlay");
 var Overlay_default = Overlay;
-// src/Button/Button.tsx
-import clsx from "clsx";
-import { jsx as jsx11 } from "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 clsx("bg-primary font-header text-white font-medium transition-all duration-75 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-black/10");
@@ -418,11 +408,9 @@ var Button = function(param) {
                 return clsx("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 clsx("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;
         }
-    };
-    var sized = function() {
+    }, "styled");
+    var sized = /* @__PURE__ */ __name(function() {
         switch(size){
             case "small":
                 return "p-1";
@@ -433,29 +421,25 @@ var Button = function(param) {
             default:
                 return "px-2 py-1";
         }
-    };
-    return /* @__PURE__ */ jsx11("button", {
+    }, "sized");
+    return /* @__PURE__ */ jsx("button", {
         type: type || "button",
         disabled: disabled,
         className: clsx("rounded-lg cursor-pointer focus:outline-none transition duration-100", styled(), sized()),
         onClick: onClick,
-        children: /* @__PURE__ */ jsx11("div", {
+        children: /* @__PURE__ */ jsx("div", {
             className: "w-full max-h-11",
-            children: loading ? /* @__PURE__ */ jsx11("div", {
+            children: loading ? /* @__PURE__ */ jsx("div", {
                 className: "flex w-full justify-center items-center",
-                children: /* @__PURE__ */ jsx11(Spinner_default, {
+                children: /* @__PURE__ */ jsx(Spinner_default, {
                     white: true
                 })
             }) : children
         })
     });
-};
+}, "Button");
 var Button_default = Button;
-// src/Button/FunButton.tsx
-import { useMemo } from "react";
-import { motion } from "framer-motion";
-import { jsx as jsx12 } from "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 _useMemo = useMemo(function() {
         switch(color){
@@ -533,7 +517,7 @@ var FunButton = function(param) {
         classStyle,
         disabled
     ]);
-    return /* @__PURE__ */ jsx12(motion.button, {
+    return /* @__PURE__ */ jsx(motion.button, {
         className: "".concat(computedClassName),
         style: {
             background: front,
@@ -548,7 +532,7 @@ var FunButton = function(param) {
             duration: 0.1,
             ease: "easeInOut"
         },
-        children: /* @__PURE__ */ jsx12(motion.span, {
+        children: /* @__PURE__ */ jsx(motion.span, {
             className: computedClassStyle,
             style: {
                 background: bottom,
@@ -567,9 +551,9 @@ var FunButton = function(param) {
                 duration: 0.1,
                 ease: "easeInOut"
             },
-            children: loading ? /* @__PURE__ */ jsx12("div", {
+            children: loading ? /* @__PURE__ */ jsx("div", {
                 className: size === "small" ? "min-h-6" : "min-h-10",
-                children: /* @__PURE__ */ jsx12(Spinner_default.Centered, {
+                children: /* @__PURE__ */ jsx(Spinner_default.Centered, {
                     visible: true,
                     size: size === "small" ? "small" : "base",
                     white: true
@@ -577,16 +561,11 @@ var FunButton = function(param) {
             }) : children
         })
     });
-};
+}, "FunButton");
 var FunButton_default = FunButton;
-// src/Button/FunRoundButton.tsx
-import { useMemo as useMemo2 } from "react";
-import { motion as motion2 } from "framer-motion";
-import clsx2 from "clsx";
-import { jsx as jsx13 } from "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 _useMemo2 = useMemo2(function() {
+    var _useMemo = useMemo(function() {
         switch(color){
             case "primary":
                 return {
@@ -627,9 +606,9 @@ var FunRoundButton = function(param) {
     }, [
         color,
         disabled
-    ]), front = _useMemo2.front, bottom = _useMemo2.bottom;
-    return /* @__PURE__ */ jsx13(motion2.button, {
-        className: clsx2(className || "border-none p-0 flex justify-center items-center cursor-pointer z-10", disabled ? "opacity-70 cursor-default" : "hover:opacity-95"),
+    ]), front = _useMemo.front, bottom = _useMemo.bottom;
+    return /* @__PURE__ */ jsx(motion.button, {
+        className: clsx(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,
@@ -646,7 +625,7 @@ var FunRoundButton = function(param) {
         whileTap: {
             y: disabled ? 0 : 2
         },
-        children: /* @__PURE__ */ jsx13(motion2.span, {
+        children: /* @__PURE__ */ jsx(motion.span, {
             className: "flex justify-center items-center z-10",
             style: {
                 background: bottom,
@@ -673,30 +652,25 @@ var FunRoundButton = function(param) {
             children: children
         })
     });
-};
+}, "FunRoundButton");
 var FunRoundButton_default = FunRoundButton;
-// src/Checkbox/Checkbox.tsx
-import { useMemo as useMemo3 } from "react";
-import { useField } from "formik";
-import clsx3 from "clsx";
-import { jsx as jsx14, jsxs as jsxs4 } from "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 _useField = _sliced_to_array(useField(name), 3), value = _useField[0].value, error = _useField[1].error, _useField_ = _useField[2], setValue = _useField_.setValue, setTouched = _useField_.setTouched;
-    var onCheck = function(e) {
+    var onCheck = /* @__PURE__ */ __name(function(e) {
         setTouched(true);
         setValue(!value, true);
-    };
-    var rand = useMemo3(function() {
+    }, "onCheck");
+    var rand = useMemo(function() {
         return Math.random();
     }, []);
-    return /* @__PURE__ */ jsxs4("div", {
+    return /* @__PURE__ */ jsxs("div", {
         className: "relative flex flex-col justify-center items-center",
         children: [
-            /* @__PURE__ */ jsxs4("div", {
+            /* @__PURE__ */ jsxs("div", {
                 className: "flex items-center",
                 children: [
-                    /* @__PURE__ */ jsx14("input", {
+                    /* @__PURE__ */ jsx("input", {
                         disabled: !!isDisabled,
                         onChange: function(e) {
                             onCheck(e);
@@ -707,30 +681,30 @@ var Checkbox = function(param) {
                         name: name,
                         type: "checkbox",
                         checked: !!value,
-                        className: clsx3("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
+                        className: clsx("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__ */ jsx14("label", {
+                    typeof labelText === "string" ? /* @__PURE__ */ jsx("label", {
                         htmlFor: "".concat(name).concat(rand),
                         className: "ml-2 block text-sm text-gray-800 dark:text-gray-200",
                         children: labelText
-                    }) : /* @__PURE__ */ jsx14("label", {
+                    }) : /* @__PURE__ */ jsx("label", {
                         htmlFor: "".concat(name).concat(rand),
                         children: labelText
                     })
                 ]
             }),
-            error && /* @__PURE__ */ jsx14(ErrorText_default, {
+            error && /* @__PURE__ */ 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 _useField = _sliced_to_array(useField(name), 3), value = _useField[0].value, ref = _object_destructuring_empty(_useField[1]), _useField_ = _useField[2], setValue = _useField_.setValue, setTouched = _useField_.setTouched;
     var _useField1 = _sliced_to_array(useField(allOptionsName), 3), _useField_1 = _useField1[0], optionsValue = _useField_1.value, _useField_2 = _useField1[2], setOptionsValue = _useField_2.setValue;
-    var onCheck = function(e) {
+    var onCheck = /* @__PURE__ */ __name(function(e) {
         setTouched(true);
         if (hasMultipleAnswers) {
             setValue(!value);
@@ -743,12 +717,12 @@ var MultiChoiceCheckBox = function(param) {
                 isCorrectAnswer: index === idx ? !el.isCorrectAnswer : false
             };
         }));
-    };
-    return /* @__PURE__ */ jsx14("div", {
+    }, "onCheck");
+    return /* @__PURE__ */ jsx("div", {
         className: "flex flex-col justify-center items-center",
-        children: /* @__PURE__ */ jsx14("div", {
+        children: /* @__PURE__ */ jsx("div", {
             className: "flex items-center",
-            children: /* @__PURE__ */ jsx14("input", {
+            children: /* @__PURE__ */ jsx("input", {
                 onChange: function(e) {
                     return onCheck(e);
                 },
@@ -757,24 +731,20 @@ var MultiChoiceCheckBox = function(param) {
                 id: name,
                 name: name,
                 type: "checkbox",
-                className: clsx3("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
+                className: clsx("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
-import clsx4 from "clsx";
-import { useField as useField2 } from "formik";
-import { jsx as jsx15, jsxs as jsxs5 } from "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 _useField2 = _sliced_to_array(useField2(name), 3), value = _useField2[0].value, ref = _object_destructuring_empty(_useField2[1]), setValue = _useField2[2].setValue;
-    return /* @__PURE__ */ jsxs5("div", {
+    var _useField = _sliced_to_array(useField(name), 3), value = _useField[0].value, ref = _object_destructuring_empty(_useField[1]), setValue = _useField[2].setValue;
+    return /* @__PURE__ */ jsxs("div", {
         className: "flex items-center",
         children: [
-            /* @__PURE__ */ jsx15("input", {
+            /* @__PURE__ */ jsx("input", {
                 onChange: function() {
                     setValue(option);
                     onSelect === null || onSelect === void 0 ? void 0 : onSelect();
@@ -784,55 +754,52 @@ var RadioOption = function(param) {
                 name: name,
                 type: "checkbox",
                 checked: value === option,
-                className: clsx4("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
+                className: clsx("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__ */ jsx15("label", {
+            typeof labelText === "string" ? /* @__PURE__ */ jsx("label", {
                 htmlFor: option,
                 className: "ml-2 block text-sm text-gray-900",
                 children: labelText
-            }) : /* @__PURE__ */ jsx15("label", {
+            }) : /* @__PURE__ */ jsx("label", {
                 htmlFor: option,
                 children: labelText
             })
         ]
     });
-};
+}, "RadioOption");
 var RadioOption_default = RadioOption;
-// src/Common/BottomAlert.tsx
-import ReactDOM2 from "react-dom";
-import { jsx as jsx16, jsxs as jsxs6 } from "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__ */ jsx16("div", {
+    }, "dismiss");
+    return /* @__PURE__ */ 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__ */ jsx16("div", {
+        children: /* @__PURE__ */ jsx("div", {
             className: "absolute top-0 w-full h-screen flex justify-center bg-gray-200/90 dark:bg-slate-800/50",
-            children: /* @__PURE__ */ jsx16("div", {
+            children: /* @__PURE__ */ 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__ */ jsxs6("div", {
+                children: /* @__PURE__ */ jsxs("div", {
                     style: {
                         borderColor: borderColor || "#0ea5e9"
                     },
                     children: [
-                        /* @__PURE__ */ jsx16("h3", {
+                        /* @__PURE__ */ jsx("h3", {
                             className: "font-semibold font-header text-gray-700 dark:text-gray-300 text-xl",
                             children: title
                         }),
-                        /* @__PURE__ */ jsx16("div", {
+                        /* @__PURE__ */ jsx("div", {
                             className: "mt-2 text-lg",
                             children: children
                         }),
-                        setDontShowAgain ? /* @__PURE__ */ jsxs6("div", {
+                        setDontShowAgain ? /* @__PURE__ */ jsxs("div", {
                             className: "flex items-center space-x-1",
                             children: [
-                                /* @__PURE__ */ jsx16("input", {
+                                /* @__PURE__ */ jsx("input", {
                                     onChange: function() {
                                         setDontShowAgain(function(s) {
                                             return !s;
@@ -843,16 +810,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__ */ jsx16("label", {
+                                /* @__PURE__ */ jsx("label", {
                                     htmlFor: "show_again_check",
                                     className: "dark:text-gray-200 text-gray-700",
                                     children: "Don't show again"
                                 })
                             ]
                         }) : null,
-                        /* @__PURE__ */ jsx16("div", {
+                        /* @__PURE__ */ jsx("div", {
                             className: "mt-4 flex items-center justify-end space-x-4 z-10",
-                            children: isSingleAction ? /* @__PURE__ */ jsx16(Button_default, {
+                            children: isSingleAction ? /* @__PURE__ */ jsx(Button_default, {
                                 type: "button",
                                 kind: buttonColor,
                                 onClick: function() {
@@ -860,12 +827,12 @@ var BottomAlert = function(param) {
                                     dismiss();
                                 },
                                 children: confirmText || "Okay"
-                            }) : /* @__PURE__ */ jsxs6("div", {
+                            }) : /* @__PURE__ */ jsxs("div", {
                                 className: "w-1/3 flex justify-end space-x-4",
                                 children: [
-                                    /* @__PURE__ */ jsx16("div", {
+                                    /* @__PURE__ */ jsx("div", {
                                         className: "w-full flex flex-col",
-                                        children: /* @__PURE__ */ jsx16(Button_default, {
+                                        children: /* @__PURE__ */ jsx(Button_default, {
                                             type: "button",
                                             kind: "secondary",
                                             onClick: function() {
@@ -875,9 +842,9 @@ var BottomAlert = function(param) {
                                             children: cancelText || "Cancel"
                                         })
                                     }),
-                                    /* @__PURE__ */ jsx16("div", {
+                                    /* @__PURE__ */ jsx("div", {
                                         className: "w-full flex flex-col",
-                                        children: /* @__PURE__ */ jsx16(Button_default, {
+                                        children: /* @__PURE__ */ jsx(Button_default, {
                                             type: "button",
                                             kind: buttonColor,
                                             onClick: function() {
@@ -895,24 +862,17 @@ var BottomAlert = function(param) {
             })
         })
     });
-};
-var BAWrapper = function(props) {
+}, "BottomAlert");
+var BAWrapper = /* @__PURE__ */ __name(function(props) {
     if (!props.isVisible) return null;
-    return ReactDOM2.createPortal(/* @__PURE__ */ jsx16(BottomAlert, _object_spread({}, props)), document.body);
-};
+    return ReactDOM.createPortal(/* @__PURE__ */ jsx(BottomAlert, _object_spread({}, props)), document.body);
+}, "BAWrapper");
 var BottomAlert_default = BAWrapper;
-// src/Common/IconInfo.tsx
-import clsx6 from "clsx";
-// src/Common/Tippy.tsx
-import { useState as useState2, useRef, useEffect as useEffect2 } from "react";
-import { useFloating, useInteractions, useHover, useRole, useDismiss, offset, flip, shift, arrow, FloatingArrow, FloatingPortal } from "@floating-ui/react";
-import clsx5 from "clsx";
-import { Fragment, jsx as jsx17, jsxs as jsxs7 } from "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 _useState2 = _sliced_to_array(useState2(false), 2), isOpen = _useState2[0], setIsOpen = _useState2[1];
+    var _useState = _sliced_to_array(useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
     var arrowRef = useRef(null);
-    useEffect2(function() {
+    useEffect(function() {
         if (visible) {
             setIsOpen(true);
         }
@@ -942,13 +902,13 @@ var Tippy = function(param) {
         dismiss,
         role
     ]), getReferenceProps = _useInteractions.getReferenceProps, getFloatingProps = _useInteractions.getFloatingProps;
-    return /* @__PURE__ */ jsxs7(Fragment, {
+    return /* @__PURE__ */ jsxs(Fragment, {
         children: [
-            isOpen && /* @__PURE__ */ jsxs7(FloatingPortal, {
+            isOpen && /* @__PURE__ */ jsxs(FloatingPortal, {
                 children: [
-                    /* @__PURE__ */ jsx17("div", _object_spread_props(_object_spread({
+                    /* @__PURE__ */ jsx("div", _object_spread_props(_object_spread({
                         ref: refs.setFloating,
-                        className: clsx5("".concat(className || tippyClassname))
+                        className: clsx("".concat(className || tippyClassname))
                     }, getFloatingProps()), {
                         style: {
                             position: strategy,
@@ -959,7 +919,7 @@ var Tippy = function(param) {
                         },
                         children: content
                     })),
-                    useArrow && /* @__PURE__ */ jsx17(FloatingArrow, {
+                    useArrow && /* @__PURE__ */ jsx(FloatingArrow, {
                         ref: arrowRef,
                         context: context,
                         className: "fill-gray-900",
@@ -967,7 +927,7 @@ var Tippy = function(param) {
                     })
                 ]
             }),
-            /* @__PURE__ */ jsx17("div", _object_spread_props(_object_spread({
+            /* @__PURE__ */ jsx("div", _object_spread_props(_object_spread({
                 ref: refs.setReference
             }, getReferenceProps()), {
                 className: wrapperClassname,
@@ -975,52 +935,45 @@ var Tippy = function(param) {
             }))
         ]
     });
-};
+}, "Tippy");
 var Tippy_default = Tippy;
-// src/Common/IconInfo.tsx
-import { jsx as jsx18, jsxs as jsxs8 } from "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__ */ jsx18("div", {
+    return /* @__PURE__ */ 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__ */ jsx18(Tippy_default, {
+        children: /* @__PURE__ */ jsx(Tippy_default, {
             className: tippyClassname,
             content: content,
-            children: /* @__PURE__ */ jsxs8("div", {
+            children: /* @__PURE__ */ jsxs("div", {
                 className: "relative",
                 children: [
                     icon,
-                    /* @__PURE__ */ jsx18("p", {
-                        className: clsx6("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__ */ jsx("p", {
+                        className: clsx("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
-import { jsx as jsx19 } from "react/jsx-runtime";
-var XIcon = function(param) {
+var XIcon = /* @__PURE__ */ __name(function(param) {
     var className = param.className;
-    return /* @__PURE__ */ jsx19("svg", {
+    return /* @__PURE__ */ jsx("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         className: className || "h-5 w-5",
         viewBox: "0 0 20 20",
         fill: "currentColor",
-        children: /* @__PURE__ */ jsx19("path", {
+        children: /* @__PURE__ */ 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
-import clsx7 from "clsx";
-import { jsx as jsx20, jsxs as jsxs9 } from "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",
@@ -1034,37 +987,37 @@ var Modal = function(_param) {
         "style"
     ]);
     if (!visible) return null;
-    return /* @__PURE__ */ jsx20(Overlay_default, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ jsx(Overlay_default, _object_spread_props(_object_spread({
         visible: visible,
         onClick: dismissOnBackdropClick ? onDismissed : void 0,
         isDark: displayDark,
         withContainer: true
     }, props), {
-        children: /* @__PURE__ */ jsx20("div", {
-            className: clsx7(displayDark && "dark", "bg-slate-900/20 fixed inset-0 flex items-center justify-center"),
+        children: /* @__PURE__ */ jsx("div", {
+            className: clsx(displayDark && "dark", "bg-slate-900/20 fixed inset-0 flex items-center justify-center"),
             style: {
                 zIndex: 1e4
             },
-            children: /* @__PURE__ */ jsxs9("div", {
-                className: clsx7("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__ */ jsxs("div", {
+                className: clsx("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__ */ jsx20("a", {
+                    dismissLink ? /* @__PURE__ */ jsx("a", {
                         href: dismissLink,
-                        children: /* @__PURE__ */ jsx20("div", {
+                        children: /* @__PURE__ */ jsx("div", {
                             onClick: onDismissed,
-                            children: /* @__PURE__ */ jsx20(XIcon_default, {
+                            children: /* @__PURE__ */ 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__ */ jsx20("button", {
+                    }) : dismissable ? /* @__PURE__ */ 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__ */ jsx20(XIcon_default, {
+                        children: /* @__PURE__ */ jsx(XIcon_default, {
                             className: "h-5 w-5"
                         })
                     }) : null,
-                    /* @__PURE__ */ jsx20("div", {
+                    /* @__PURE__ */ 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();
@@ -1072,9 +1025,9 @@ var Modal = function(_param) {
                         style: _object_spread({
                             maxHeight: "calc(100vh - 6rem)"
                         }, style),
-                        children: /* @__PURE__ */ jsx20("div", {
+                        children: /* @__PURE__ */ jsx("div", {
                             className: "p-4 sm:p-10",
-                            children: /* @__PURE__ */ jsx20("div", {
+                            children: /* @__PURE__ */ jsx("div", {
                                 className: "mt-8 sm:mt-0",
                                 children: children
                             })
@@ -1084,15 +1037,12 @@ var Modal = function(_param) {
             })
         })
     }));
-};
+}, "Modal");
 var Modal_default = Modal;
-// src/Common/NoticeBox.tsx
-import { useEffect as useEffect3, useMemo as useMemo4, useState as useState3 } from "react";
-import { jsx as jsx21, jsxs as jsxs10 } from "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 _useState3 = _sliced_to_array(useState3(true), 2), visible = _useState3[0], setVisible = _useState3[1];
-    var styles = useMemo4(function() {
+    var _useState = _sliced_to_array(useState(true), 2), visible = _useState[0], setVisible = _useState[1];
+    var styles = useMemo(function() {
         var base = "relative text-base rounded-md p-2 ";
         if (!visible) return "hidden";
         switch(type){
@@ -1109,21 +1059,21 @@ var NoticeBox = function(param) {
         type,
         visible
     ]);
-    useEffect3(function() {
+    useEffect(function() {
         setVisible(isVisible);
     }, [
         isVisible
     ]);
     if (!isVisible) return null;
-    return /* @__PURE__ */ jsx21("div", {
+    return /* @__PURE__ */ jsx("div", {
         style: {
             zIndex: 100
         },
         className: styles,
-        children: /* @__PURE__ */ jsxs10("div", {
+        children: /* @__PURE__ */ jsxs("div", {
             className: "relative",
             children: [
-                isDismissible && /* @__PURE__ */ jsx21("button", {
+                isDismissible && /* @__PURE__ */ jsx("button", {
                     type: "button",
                     onClick: function() {
                         setVisible(function(s) {
@@ -1132,7 +1082,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__ */ jsx21(XIcon_default, {
+                    children: /* @__PURE__ */ jsx(XIcon_default, {
                         className: "h-5 w-5"
                     })
                 }),
@@ -1140,59 +1090,53 @@ var NoticeBox = function(param) {
             ]
         })
     });
-};
+}, "NoticeBox");
 var NoticeBox_default = NoticeBox;
-// src/Icons/StarIcon.tsx
-import { jsx as jsx22, jsxs as jsxs11 } from "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__ */ jsxs11("svg", {
+    return /* @__PURE__ */ jsxs("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         className: className || "h-5 w-5",
         viewBox: "0 0 20 20",
         fill: "currentColor",
         children: [
-            /* @__PURE__ */ jsx22("defs", {
-                children: /* @__PURE__ */ jsxs11("linearGradient", {
+            /* @__PURE__ */ jsx("defs", {
+                children: /* @__PURE__ */ jsxs("linearGradient", {
                     id: "grad",
                     children: [
-                        /* @__PURE__ */ jsx22("stop", {
+                        /* @__PURE__ */ jsx("stop", {
                             offset: "".concat((percentage || 0.5) * 100, "%"),
                             "stop-color": color ? color : "#4b5563"
                         }),
-                        /* @__PURE__ */ jsx22("stop", {
+                        /* @__PURE__ */ jsx("stop", {
                             offset: "".concat(100 - (percentage || 0.5) * 100, "%"),
                             "stop-color": "white"
                         })
                     ]
                 })
             }),
-            /* @__PURE__ */ jsx22("path", {
+            /* @__PURE__ */ 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
-import { jsx as jsx23 } from "react/jsx-runtime";
-var StartIconSolid = function(param) {
+var StartIconSolid = /* @__PURE__ */ __name(function(param) {
     var className = param.className;
-    return /* @__PURE__ */ jsx23("svg", {
+    return /* @__PURE__ */ jsx("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         className: className || "h-5 w-5",
         viewBox: "0 0 20 20",
         fill: "currentColor",
-        children: /* @__PURE__ */ jsx23("path", {
+        children: /* @__PURE__ */ 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
-import { jsx as jsx24 } from "react/jsx-runtime";
-var RatingStars = function(param) {
+var RatingStars = /* @__PURE__ */ __name(function(param) {
     var avgRating = param.avgRating, large = param.large;
     var icons = [
         1,
@@ -1202,52 +1146,48 @@ var RatingStars = function(param) {
         5
     ].map(function(el) {
         if (avgRating === 0) {
-            return /* @__PURE__ */ jsx24(StarIconSolid_default, {
+            return /* @__PURE__ */ 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__ */ jsx24(StarIconSolid_default, {
+                return /* @__PURE__ */ jsx(StarIconSolid_default, {
                     className: "".concat(large ? "h-5 w-5" : "h-3 w-3", " text-blue-500")
                 }, "rating_star_".concat(el));
             }
-            return /* @__PURE__ */ jsx24(StarIconSolid_default, {
+            return /* @__PURE__ */ 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__ */ jsx24(StarIconSolid_default, {
+            return /* @__PURE__ */ jsx(StarIconSolid_default, {
                 className: "".concat(large ? "h-5 w-5" : "h-3 w-3", " text-blue-500")
             }, "rating_star_".concat(el));
         }
-        return /* @__PURE__ */ jsx24(StarIcon_default, {
+        return /* @__PURE__ */ 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__ */ jsx24(Tippy_default, {
+    return /* @__PURE__ */ 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__ */ jsx24("div", {
+        children: /* @__PURE__ */ jsx("div", {
             className: "flex items-center space-x-0 justify-start",
             children: icons
         })
     });
-};
+}, "RatingStars");
 var RatingStars_default = RatingStars;
-// src/Common/Slider.tsx
-import { useState as useState4 } from "react";
-import { useDebouncedCallback } from "use-debounce";
-import { jsx as jsx25 } from "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__ */ jsx25("input", {
+    }, "handleChange");
+    return /* @__PURE__ */ jsx("input", {
         type: "range",
         min: min,
         max: max,
@@ -1256,17 +1196,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 _useState4 = _sliced_to_array(useState4(initialValue), 2), value = _useState4[0], setValue = _useState4[1];
+    var _useState = _sliced_to_array(useState(initialValue), 2), value = _useState[0], setValue = _useState[1];
     var debouncedUpdate = useDebouncedCallback(function(v) {
         handleUpdate(v);
     }, 120, {
         trailing: true,
         leading: false
     });
-    return /* @__PURE__ */ jsx25(Slider, {
+    return /* @__PURE__ */ jsx(Slider, {
         min: min,
         max: max,
         step: 1,
@@ -1276,35 +1216,30 @@ var DebouncedSlider = function(param) {
             debouncedUpdate(v);
         }
     });
-};
+}, "DebouncedSlider");
 Slider.Debounced = DebouncedSlider;
 var Slider_default = Slider;
-// src/Common/ToggleSwitch.tsx
-import { useField as useField3 } from "formik";
-import { motion as motion3 } from "framer-motion";
-import clsx8 from "clsx";
-import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
-var Formik = function(param) {
+var Formik = /* @__PURE__ */ __name(function(param) {
     var label = param.label, name = param.name;
-    var _useField3 = _sliced_to_array(useField3(name), 3), value = _useField3[0].value, setValue = _useField3[2].setValue;
-    var handleChange = function(e) {
+    var _useField = _sliced_to_array(useField(name), 3), value = _useField[0].value, setValue = _useField[2].setValue;
+    var handleChange = /* @__PURE__ */ __name(function(e) {
         setValue(e.target.checked);
-    };
-    return /* @__PURE__ */ jsxs12("label", {
+    }, "handleChange");
+    return /* @__PURE__ */ jsxs("label", {
         className: "flex items-center space-x-2 cursor-pointer",
         children: [
-            /* @__PURE__ */ jsxs12("div", {
+            /* @__PURE__ */ jsxs("div", {
                 className: "relative",
                 children: [
-                    /* @__PURE__ */ jsx26("input", {
+                    /* @__PURE__ */ jsx("input", {
                         type: "checkbox",
                         className: "opacity-0 absolute",
                         checked: value,
                         onChange: handleChange
                     }),
-                    /* @__PURE__ */ jsx26("div", {
-                        className: clsx8("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-[#00b4d8]" : "bg-[#64748b]"),
-                        children: /* @__PURE__ */ jsx26(motion3.div, {
+                    /* @__PURE__ */ jsx("div", {
+                        className: clsx("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-[#00b4d8]" : "bg-[#64748b]"),
+                        children: /* @__PURE__ */ jsx(motion.div, {
                             className: "w-4 h-4 bg-white rounded-full absolute top-1",
                             initial: false,
                             animate: {
@@ -1319,33 +1254,33 @@ var Formik = function(param) {
                     })
                 ]
             }),
-            /* @__PURE__ */ jsx26("span", {
+            /* @__PURE__ */ 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__ */ jsxs12("label", {
+    }, "handleChange");
+    return /* @__PURE__ */ jsxs("label", {
         className: "flex items-center space-x-2 cursor-pointer",
         children: [
-            /* @__PURE__ */ jsxs12("div", {
+            /* @__PURE__ */ jsxs("div", {
                 className: "relative",
                 children: [
-                    /* @__PURE__ */ jsx26("input", {
+                    /* @__PURE__ */ jsx("input", {
                         type: "checkbox",
                         className: "opacity-0 absolute",
                         checked: value,
                         onChange: handleChange
                     }),
-                    /* @__PURE__ */ jsx26("div", {
-                        className: clsx8("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-[#00b4d8]" : "bg-[#64748b]"),
-                        children: /* @__PURE__ */ jsx26(motion3.div, {
+                    /* @__PURE__ */ jsx("div", {
+                        className: clsx("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-[#00b4d8]" : "bg-[#64748b]"),
+                        children: /* @__PURE__ */ jsx(motion.div, {
                             className: "w-4 h-4 bg-white rounded-full absolute top-1",
                             initial: false,
                             animate: {
@@ -1360,64 +1295,55 @@ var ToggleSwitch = function(param) {
                     })
                 ]
             }),
-            /* @__PURE__ */ jsx26("span", {
+            /* @__PURE__ */ 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
-import { motion as motion4 } from "framer-motion";
-// src/Icons/PlusCircleIcon.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
-var PlusCircleIcon = function(param) {
+var PlusCircleIcon = /* @__PURE__ */ __name(function(param) {
     var className = param.className;
-    return /* @__PURE__ */ jsx27("svg", {
+    return /* @__PURE__ */ 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__ */ jsx27("path", {
+        children: /* @__PURE__ */ 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
-import { jsx as jsx28 } from "react/jsx-runtime";
-var StartIconSolid2 = function(param) {
+var StartIconSolid2 = /* @__PURE__ */ __name(function(param) {
     var className = param.className;
-    return /* @__PURE__ */ jsx28("svg", {
+    return /* @__PURE__ */ 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__ */ jsx28("path", {
+        children: /* @__PURE__ */ 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
-import clsx9 from "clsx";
-import { jsx as jsx29, jsxs as jsxs13 } from "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__ */ jsxs13("div", {
+    return /* @__PURE__ */ 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__ */ jsx29(motion4.div, {
+            /* @__PURE__ */ jsx(motion.div, {
                 className: "absolute w-1/2 h-11 rounded-md bg-white dark:bg-slate-600",
                 animate: {
                     x: galleryMode === title1.toLowerCase() ? "1%" : "99%"
@@ -1428,52 +1354,52 @@ var UserContentSwitcher = function(param) {
                     stiffness: 200
                 }
             }),
-            /* @__PURE__ */ jsxs13("button", {
+            /* @__PURE__ */ 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__ */ jsx29("span", {
-                        className: clsx9("truncate", {
+                    /* @__PURE__ */ jsx("span", {
+                        className: clsx("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__ */ jsx29(Icon1, {
-                        className: clsx9("h-5 w-5", {
+                    Icon1 ? /* @__PURE__ */ jsx(Icon1, {
+                        className: clsx("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__ */ jsx29(PlusCircleIcon_default, {
-                        className: clsx9("h-5 w-5", {
+                    }) : /* @__PURE__ */ jsx(PlusCircleIcon_default, {
+                        className: clsx("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__ */ jsxs13("button", {
+            /* @__PURE__ */ 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__ */ jsx29("span", {
-                        className: clsx9("truncate", {
+                    /* @__PURE__ */ jsx("span", {
+                        className: clsx("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__ */ jsx29(Icon2, {
-                        className: clsx9("h-5 w-5", {
+                    Icon2 ? /* @__PURE__ */ jsx(Icon2, {
+                        className: clsx("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__ */ jsx29(ArrowCircleRight_default, {
-                        className: clsx9("h-5 w-5", {
+                    }) : /* @__PURE__ */ jsx(ArrowCircleRight_default, {
+                        className: clsx("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()
                         })
@@ -1482,22 +1408,20 @@ var UserContentSwitcher = function(param) {
             })
         ]
     });
-};
+}, "UserContentSwitcher");
 var UserContentSwitcher_default = UserContentSwitcher;
-// src/ProgressBar/ProgressBarSimple.tsx
-import { jsx as jsx30 } from "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__ */ jsx30("div", {
+    return /* @__PURE__ */ jsx("div", {
         className: "w-full",
-        children: /* @__PURE__ */ jsx30("div", {
+        children: /* @__PURE__ */ 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__ */ jsx30("div", {
+            children: /* @__PURE__ */ jsx("div", {
                 className: "transition-all duration-150 ease-in-out",
                 style: {
                     width: "".concat(progress, "%"),
@@ -1508,20 +1432,17 @@ var ProgressBarSimple = function(param) {
             })
         })
     });
-};
+}, "ProgressBarSimple");
 var ProgressBarSimple_default = ProgressBarSimple;
-// src/ProgressBar/ProgressBar.tsx
-import clsx10 from "clsx";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var ProgressBar = function(param) {
+var ProgressBar = /* @__PURE__ */ __name(function(param) {
     var progress = param.progress;
-    return /* @__PURE__ */ jsx31("div", {
-        children: /* @__PURE__ */ jsx31("div", {
+    return /* @__PURE__ */ jsx("div", {
+        children: /* @__PURE__ */ jsx("div", {
             className: "-mt-2 mb-6",
-            children: /* @__PURE__ */ jsx31("div", {
+            children: /* @__PURE__ */ jsx("div", {
                 className: "bg-gray-100 rounded-full h-2",
-                children: /* @__PURE__ */ jsx31("div", {
-                    className: clsx10("rounded-full h-2", progress === 100 ? "bg-green-400" : "bg-gray-100"),
+                children: /* @__PURE__ */ jsx("div", {
+                    className: clsx("rounded-full h-2", progress === 100 ? "bg-green-400" : "bg-gray-100"),
                     style: {
                         width: "".concat(progress, "%"),
                         minWidth: "100%",
@@ -1531,26 +1452,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__ */ jsx31("div", {
+    return /* @__PURE__ */ jsx("div", {
         className: "flex w-full items-center space-x-0.5 -mt-1 overflow-hidden",
         children: steps.map(function(el, i) {
-            return /* @__PURE__ */ jsx31("div", {
+            return /* @__PURE__ */ jsx("div", {
                 className: "flex-1 relative",
-                children: /* @__PURE__ */ jsx31(Tippy_default, {
+                children: /* @__PURE__ */ jsx(Tippy_default, {
                     content: el.label,
                     className: tippyClassname,
-                    children: /* @__PURE__ */ jsx31("div", {
+                    children: /* @__PURE__ */ jsx("div", {
                         className: "mb-4",
-                        children: /* @__PURE__ */ jsx31("div", {
+                        children: /* @__PURE__ */ 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__ */ jsx31("div", {
-                                className: clsx10("cursor-pointer rounded-full h-2", stepIndex >= i ? "bg-green-400" : "bg-gray-100"),
+                            children: /* @__PURE__ */ jsx("div", {
+                                className: clsx("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"
@@ -1562,12 +1483,10 @@ var ProgressStepBar = function(param) {
             }, "index_progress_".concat(el.label));
         })
     });
-};
+}, "ProgressStepBar");
 ProgressBar.Step = ProgressStepBar;
 var ProgressBar_default = ProgressBar;
-// src/ProgressBar/CircleProgress.tsx
-import { jsx as jsx32, jsxs as jsxs14 } from "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%";
@@ -1575,16 +1494,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__ */ jsx32("div", {
+    return /* @__PURE__ */ jsx("div", {
         style: {
             height: size,
             width: size
         },
-        children: /* @__PURE__ */ jsxs14("svg", {
+        children: /* @__PURE__ */ jsxs("svg", {
             viewBox: "0 0 ".concat(size, " ").concat(size),
             className: "-rotate-90",
             children: [
-                /* @__PURE__ */ jsx32("circle", {
+                /* @__PURE__ */ jsx("circle", {
                     className: "text-white/50 dark:text-slate-200/50",
                     strokeWidth: strokeWidthCalc - 0.5,
                     stroke: "currentColor",
@@ -1593,7 +1512,7 @@ var CircleProgress = function(param) {
                     cx: cx,
                     cy: cy
                 }),
-                /* @__PURE__ */ jsx32("circle", {
+                /* @__PURE__ */ jsx("circle", {
                     strokeDasharray: 2 * Math.PI * r,
                     strokeDashoffset: 2 * Math.PI * r - percentage / 100 * 2 * Math.PI * r,
                     stroke: twColor || "white/50",
@@ -1607,12 +1526,10 @@ var CircleProgress = function(param) {
             ]
         })
     });
-};
+}, "CircleProgress");
 var CircleProgress_default = CircleProgress;
-// src/ProgressBar/CourseProgress.tsx
-import { jsx as jsx33, jsxs as jsxs15 } from "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%";
@@ -1621,16 +1538,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__ */ jsxs15("div", {
+    return /* @__PURE__ */ jsxs("div", {
         className: "flex items-center flex-col justify-center space-y-0  dark:bg-inherit dark:text-gray-300",
         children: [
-            /* @__PURE__ */ jsxs15("div", {
+            /* @__PURE__ */ jsxs("div", {
                 className: "relative flex items-center justify-center -my-2 -mt-1 overflow-hidden rounded-full",
                 children: [
-                    /* @__PURE__ */ jsxs15("svg", {
+                    /* @__PURE__ */ jsxs("svg", {
                         className: "-rotate-90",
                         children: [
-                            /* @__PURE__ */ jsx33("circle", {
+                            /* @__PURE__ */ jsx("circle", {
                                 className: "text-gray-300",
                                 strokeWidth: strokeWidth,
                                 stroke: "currentColor",
@@ -1639,14 +1556,12 @@ var CourseProgress = function(param) {
                                 cx: cx,
                                 cy: cy
                             }),
-                            /* @__PURE__ */ jsx33("circle", {
+                            /* @__PURE__ */ jsx("circle", {
                                 style: {
                                     strokeDashoffset: strokeDashoffset
                                 },
                                 color: twColor || PRIMARY_COLOR2,
-                                ref: function(ref) {
-                                    if (ref) {}
-                                },
+                                ref: function(ref) {},
                                 strokeWidth: strokeWidth,
                                 strokeLinecap: "round",
                                 stroke: "currentColor",
@@ -1659,35 +1574,35 @@ var CourseProgress = function(param) {
                             })
                         ]
                     }),
-                    /* @__PURE__ */ jsx33("span", {
+                    /* @__PURE__ */ jsx("span", {
                         className: "absolute top-[".concat(50 / 2, "] text-xl leading-none font-medium font-header hidden sm:block"),
                         children: percentage.toString() + "%"
                     })
                 ]
             }),
-            /* @__PURE__ */ jsx33("p", {
+            /* @__PURE__ */ 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__ */ jsxs15("div", {
+    return /* @__PURE__ */ jsxs("div", {
         className: "flex items-center space-x-2 rounded-full bg-transparent border-2 border-slate-100 w-full",
         children: [
-            /* @__PURE__ */ jsx33("div", {
+            /* @__PURE__ */ jsx("div", {
                 className: "flex items-center justify-center overflow-hidden",
-                children: /* @__PURE__ */ jsxs15("svg", {
+                children: /* @__PURE__ */ jsxs("svg", {
                     className: "w-10 h-11 transform translate-x-1 translate-y-1",
                     children: [
-                        /* @__PURE__ */ jsx33("circle", {
+                        /* @__PURE__ */ jsx("circle", {
                             className: "text-gray-300",
                             strokeWidth: strokeWidth,
                             stroke: "currentColor",
@@ -1696,14 +1611,12 @@ var Small = function(param) {
                             cx: cx,
                             cy: cy
                         }),
-                        /* @__PURE__ */ jsx33("circle", {
+                        /* @__PURE__ */ jsx("circle", {
                             style: {
                                 strokeDashoffset: strokeDashoffset
                             },
                             className: twColor || "text-blue-500",
-                            ref: function(ref) {
-                                if (ref) {}
-                            },
+                            ref: function(ref) {},
                             strokeWidth: strokeWidth,
                             strokeLinecap: "round",
                             stroke: "currentColor",
@@ -1715,7 +1628,7 @@ var Small = function(param) {
                     ]
                 })
             }),
-            /* @__PURE__ */ jsxs15("p", {
+            /* @__PURE__ */ jsxs("p", {
                 className: "font-medium dark:text-gray-300 text-gray-600 text-sm font-header mt-1",
                 children: [
                     label,
@@ -1725,29 +1638,26 @@ var Small = function(param) {
             })
         ]
     });
-};
+}, "Small");
 CourseProgress.Small = Small;
 var CourseProgress_default = CourseProgress;
-// src/ProgressBar/ScrollProgress.tsx
-import { useEffect as useEffect4, useState as useState5 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
 var PRIMARY_COLOR3 = "#00b4d8";
-var ScrollProgress = function() {
-    var _useState5 = _sliced_to_array(useState5(0), 2), scrollPercentage = _useState5[0], setScrollPercentage = _useState5[1];
-    useEffect4(function() {
-        var handleScroll = function() {
+var ScrollProgress = /* @__PURE__ */ __name(function() {
+    var _useState = _sliced_to_array(useState(0), 2), scrollPercentage = _useState[0], setScrollPercentage = _useState[1];
+    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__ */ jsx34("div", {
+    return /* @__PURE__ */ jsx("div", {
         style: {
             height: "4px",
             borderRadius: 2,
@@ -1758,7 +1668,7 @@ var ScrollProgress = function() {
             left: "0px",
             right: "0px"
         },
-        children: /* @__PURE__ */ jsx34("div", {
+        children: /* @__PURE__ */ jsx("div", {
             style: {
                 height: "100%",
                 backgroundColor: PRIMARY_COLOR3,
@@ -1767,26 +1677,23 @@ var ScrollProgress = function() {
             }
         })
     });
-};
+}, "ScrollProgress");
 var ScrollProgress_default = ScrollProgress;
-// src/Icons/AnimateLogo.tsx
-import { useEffect as useEffect5, useState as useState6 } from "react";
-import { jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
-var AnimateLogo = function() {
-    var _useState6 = _sliced_to_array(useState6(false), 2), isFirefox = _useState6[0], setIsFirefox = _useState6[1];
-    useEffect5(function() {
+var AnimateLogo = /* @__PURE__ */ __name(function() {
+    var _useState = _sliced_to_array(useState(false), 2), isFirefox = _useState[0], setIsFirefox = _useState[1];
+    useEffect(function() {
         var userAgent = window.navigator.userAgent;
         setIsFirefox(userAgent.indexOf("Firefox") > -1);
     }, []);
     if (isFirefox) {
-        return /* @__PURE__ */ jsx35("svg", {
+        return /* @__PURE__ */ jsx("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             className: "animate-spin",
             viewBox: "0 0 600 600",
-            children: /* @__PURE__ */ jsx35("g", {
+            children: /* @__PURE__ */ jsx("g", {
                 height: 176,
                 width: 176,
-                children: /* @__PURE__ */ jsxs16("path", {
+                children: /* @__PURE__ */ jsxs("path", {
                     className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
                     stroke: "currentColor",
                     fill: "none",
@@ -1796,7 +1703,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__ */ jsx35("animate", {
+                        /* @__PURE__ */ jsx("animate", {
                             attributeName: "stroke-dashoffset",
                             to: "0",
                             from: "1600",
@@ -1808,7 +1715,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__ */ jsx35("animateTransform", {
+                        /* @__PURE__ */ jsx("animateTransform", {
                             attributeName: "transform",
                             type: "rotate",
                             from: "0 300 300",
@@ -1826,10 +1733,10 @@ var AnimateLogo = function() {
             })
         });
     }
-    return /* @__PURE__ */ jsx35("svg", {
+    return /* @__PURE__ */ jsx("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 600 600",
-        children: /* @__PURE__ */ jsxs16("g", {
+        children: /* @__PURE__ */ jsxs("g", {
             style: {
                 transformOrigin: "center"
             },
@@ -1837,7 +1744,7 @@ var AnimateLogo = function() {
             height: 176,
             width: 176,
             children: [
-                /* @__PURE__ */ jsx35("path", {
+                /* @__PURE__ */ jsx("path", {
                     className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
                     stroke: "currentColor",
                     id: "motionPath",
@@ -1852,7 +1759,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__ */ jsx35("animate", {
+                    children: /* @__PURE__ */ jsx("animate", {
                         attributeName: "stroke-dashoffset",
                         to: "0",
                         from: "1600",
@@ -1865,7 +1772,7 @@ var AnimateLogo = function() {
                         values: "1600;0;0;1600;1600"
                     })
                 }),
-                /* @__PURE__ */ jsx35("animateTransform", {
+                /* @__PURE__ */ jsx("animateTransform", {
                     attributeName: "transform",
                     type: "rotate",
                     from: "0",
@@ -1881,16 +1788,12 @@ var AnimateLogo = function() {
             ]
         })
     });
-};
+}, "AnimateLogo");
 var AnimateLogo_default = AnimateLogo;
-// src/Spinners/OverlaySpinner.tsx
-import { useEffect as useEffect6, useState as useState7 } from "react";
-import { createPortal } from "react-dom";
-import { jsx as jsx36 } from "react/jsx-runtime";
-var OverlaySpinner = function(param) {
+var OverlaySpinner = /* @__PURE__ */ __name(function(param) {
     var visible = param.visible;
-    var _useState7 = _sliced_to_array(useState7(null), 2), modalRoot = _useState7[0], setModalRoot = _useState7[1];
-    useEffect6(function() {
+    var _useState = _sliced_to_array(useState(null), 2), modalRoot = _useState[0], setModalRoot = _useState[1];
+    useEffect(function() {
         var root = document.getElementById("spinner-root");
         if (!root) {
             root = document.createElement("div");
@@ -1910,21 +1813,21 @@ var OverlaySpinner = function(param) {
     if (!visible || !modalRoot) {
         return null;
     }
-    return createPortal(/* @__PURE__ */ jsx36("div", {
+    return createPortal(/* @__PURE__ */ jsx("div", {
         style: {
             zIndex: 11e3
         },
-        children: /* @__PURE__ */ jsx36("div", {
+        children: /* @__PURE__ */ 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__ */ jsx36("div", {
+            children: /* @__PURE__ */ jsx("div", {
                 className: "h-44 w-44 overflow-visible",
-                children: /* @__PURE__ */ jsx36(AnimateLogo_default, {})
+                children: /* @__PURE__ */ jsx(AnimateLogo_default, {})
             })
         })
     }), modalRoot);
-};
+}, "OverlaySpinner");
 var OverlaySpinner_default = OverlaySpinner;
 export { AnimateLogo_default as AnimateLogo, Backdrop_default as Backdrop, BottomAlert_default as BottomAlert, Breakpoint_default as Breakpoint, Button_default as Button, Checkbox_default as Checkbox, CircleProgress_default as CircleProgress, Container_default as Container, CourseProgress_default as CourseProgress, ErrorText_default as ErrorText, Fade_default as Fade, FunButton_default as FunButton, FunRoundButton_default as FunRoundButton, IconInfo_default as IconInfo, Modal_default as Modal, NoResults_default as NoResults, NoticeBox_default as NoticeBox, Overlay_default as Overlay, OverlaySpinner_default as OverlaySpinner, PRIMARY_COLOR, Pill_default as Pill, ProgressBar_default as ProgressBar, ProgressBarSimple_default as ProgressBarSimple, RadioOption_default as RadioOption, RatingStars_default as RatingStars, ScrollProgress_default as ScrollProgress, Slider_default as Slider, Spinner_default as Spinner, StepsComponent_default as StepsComponent, Tippy_default as Tippy, ToggleSwitch_default as ToggleSwitch, UserContentSwitcher_default as UserContentSwitcher, baseFieldStyle, createExerciseElementStyle, exerciseDeleteButton, exerciseEditButton, headerButtonClass, headerTippyClass, tippyClassname, xIconButton };