evelearn-theme 2.0.2 → 2.0.4

package/dist/index.js

@@ -1,144 +1,336 @@
 "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];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_destructuring_empty(o) {
+    if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
+    return o;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+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);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    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 __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
+var __export = function(target, all) {
+    for(var name in all)__defProp(target, name, {
+        get: all[name],
+        enumerable: true
+    });
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
+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 target;
+    return to;
 };
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+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 __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
+var __toCommonJS = function(mod) {
+    return __copyProps(__defProp({}, "__esModule", {
+        value: true
+    }), mod);
 };
-var __toESM = (mod, isNodeMode, target) => (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 = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  AnimateLogo: () => AnimateLogo_default,
-  Backdrop: () => Backdrop_default,
-  BottomAlert: () => BottomAlert_default,
-  Breakpoint: () => Breakpoint_default,
-  Button: () => Button_default,
-  Checkbox: () => Checkbox_default,
-  CircleProgress: () => CircleProgress_default,
-  Container: () => Container_default,
-  CourseProgress: () => CourseProgress_default,
-  ErrorText: () => ErrorText_default,
-  Fade: () => Fade_default,
-  FunButton: () => FunButton_default,
-  FunRoundButton: () => FunRoundButton_default,
-  IconInfo: () => IconInfo_default,
-  Modal: () => Modal_default,
-  NoResults: () => NoResults_default,
-  NoticeBox: () => NoticeBox_default,
-  Overlay: () => Overlay_default,
-  OverlaySpinner: () => OverlaySpinner_default,
-  PRIMARY_COLOR: () => PRIMARY_COLOR,
-  Pill: () => Pill_default,
-  ProgressBar: () => ProgressBar_default,
-  ProgressBarSimple: () => ProgressBarSimple_default,
-  RadioOption: () => RadioOption_default,
-  RatingStars: () => RatingStars_default,
-  ScrollProgress: () => ScrollProgress_default,
-  Slider: () => Slider_default,
-  Spinner: () => Spinner_default,
-  StepsComponent: () => StepsComponent_default,
-  Tippy: () => Tippy_default,
-  ToggleSwitch: () => ToggleSwitch_default,
-  UserContentSwitcher: () => UserContentSwitcher_default,
-  baseFieldStyle: () => baseFieldStyle,
-  createExerciseElementStyle: () => createExerciseElementStyle,
-  exerciseDeleteButton: () => exerciseDeleteButton,
-  exerciseEditButton: () => exerciseEditButton,
-  headerButtonClass: () => headerButtonClass,
-  headerTippyClass: () => headerTippyClass,
-  tippyClassname: () => tippyClassname,
-  toolbarExerciseButton: () => toolbarExerciseButton,
-  xIconButton: () => xIconButton
+    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;
+    },
+    toolbarExerciseButton: function() {
+        return toolbarExerciseButton;
+    },
+    xIconButton: function() {
+        return xIconButton;
+    }
 });
 module.exports = __toCommonJS(index_exports);
-
 // src/constants.tsx
 var PRIMARY_COLOR = "#00b4d8";
-
-// src/Common/Container.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Container = ({ backgroundImage, style, children, onClick }) => {
-  return backgroundImage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      style: __spreadValues({
-        backgroundImage,
-        backgroundSize: "cover"
-      }, style),
-      className: "w-full md:min-h-screen dark:bg-slate-950 mx-auto overflow-y-auto overflow-x-clip px-0 md:px-2 sm:py-4 py-1 relative",
-      onClick,
-      children: children ? children : null
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      className: `w-full dark:bg-slate-950 mx-auto overflow-y-auto overflow-x-clip px-0 sm:px-16 relative pt-20`,
-      onClick,
-      style: style || { minHeight: "100vh" },
-      children: children ? children : null
-    }
-  );
-};
-var Container_default = Container;
-
 // src/Common/ErrorText.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ErrorText = ({ text, style, classNames }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: classNames ? classNames : "text-red-500 font-semibold text-wrap py-auto", style, children: text });
+var import_jsx_runtime = require("react/jsx-runtime");
+var ErrorText = function(param) {
+    var text = param.text, style = param.style, classNames = param.classNames;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+        className: classNames ? classNames : "text-red-500 font-semibold text-wrap py-auto",
+        style: style,
+        children: text
+    });
 };
 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-800 dark:text-gray-200 text-gray-700 dark:placeholder-gray-400 placeholder-gray-400 rounded-md  px-2 py-1 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50";
 var createExerciseElementStyle = "flex flex-col justify-between space-y-2 w-full p-4 bg-white dark:bg-slate-800 rounded-xl text-gray-800 dark:text-gray-200 border-2 border-slate-200 dark:border-slate-400 overflow-hidden transition-all";
@@ -149,1446 +341,1776 @@ var tippyClassname = "p-2 bg-slate-600 dark:bg-slate-900 opacity-90 text-white f
 var headerTippyClass = "rounded-lg p-2 bg-slate-950 opacity-95 text-white font-medium";
 var headerButtonClass = "w-10 h-10 rounded-full dark:hover:bg-slate-600 hover:bg-slate-200 bg-transparent flex justify-center items-center flex justify-center items-center text-slate-600 dark:text-slate-100 hover:text-primary dark:hover:text-primary transition-colors duration-50";
 var toolbarExerciseButton = "flex bg-gray-50/90 items-center sm:justify-between p-4 shadow-sm w-full rounded-xl border-4 border-transparent hover:border-white text-gray-700 hover:text-white hover:bg-indigo-500 transition-colors duration-75";
-
 // src/Spinners/Spinner.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Spinner = ({ visible = true, size, white, isDark }) => {
-  if (visible === false) return null;
-  const isWhite = white || isDark;
-  const color = isWhite ? "stroke-white/90" : "stroke-slate-600/80";
-  const bgColor = isWhite ? "stroke-white/20" : "stroke-slate-500/20";
-  const dimensions = size === "small" ? "w-5 h-5" : "w-8 h-8";
-  const spinnerClasses = `
-        absolute
-        top-0
-        animate-spin
-        ${dimensions}
-    `;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative h-8 w-8 flex justify-center items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "svg",
-      {
-        className: `absolute top-0 ${dimensions} ${bgColor}`,
-        viewBox: "0 0 24 24",
-        fill: "none",
-        strokeWidth: "2.4",
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "svg",
-      {
-        className: spinnerClasses,
-        viewBox: "0 0 24 24",
-        fill: "none",
-        strokeWidth: "2.4",
-        strokeLinecap: "round",
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "path",
-          {
-            d: `
-                        M 12 2 
-                        A 10 10 0 0 1 22 12 
-                        A 10 10 0 0 1 12 22 
-                        A 10 10 0 0 1 2 12 
-                        A 10 10 0 0 1 12 2
-                    `,
-            strokeDasharray: "13 18.4",
-            stroke: "inherit",
-            className: color
-          }
-        )
-      }
-    )
-  ] });
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Spinner = function(param) {
+    var _param_visible = param.visible, visible = _param_visible === void 0 ? true : _param_visible, size = param.size, white = param.white, isDark = param.isDark;
+    if (visible === false) return null;
+    var isWhite = white || isDark;
+    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", {
+        className: "relative h-8 w-8 flex justify-center items-center",
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.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", {
+                    cx: "12",
+                    cy: "12",
+                    r: "10"
+                })
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", {
+                className: spinnerClasses,
+                viewBox: "0 0 24 24",
+                fill: "none",
+                strokeWidth: "2.4",
+                strokeLinecap: "round",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.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",
+                    className: color
+                })
+            })
+        ]
+    });
 };
-var SpinnerCentered = (props) => {
-  if (props.visible === false) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-full flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, __spreadValues({}, props)) });
+var SpinnerCentered = function(props) {
+    if (props.visible === false) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
+        className: "w-full flex justify-center items-center",
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, _object_spread({}, props))
+    });
 };
 Spinner.displayName = "Spinner";
 SpinnerCentered.displayName = "Spinner.Centered";
 Spinner.Centered = SpinnerCentered;
 var Spinner_default = Spinner;
-
 // src/Common/NoResults.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var HEIGHT = 160;
 var WIDTH = HEIGHT * (16 / 9);
-var NoResults = ({ loading, message }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative w-full flex justify-center items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex justify-start w-full space-x-2 py-3 p-4 bg-slate-100 dark:bg-slate-800 rounded-md", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: `calc(${WIDTH}px + 1rem)`, height: 320 }, className: "rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition-shadow duration-150 px-2 pt-2 bg-slate-200 dark:bg-slate-700 animate-pulse" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: `calc(${WIDTH}px + 1rem)`, height: 320 }, className: "rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition-shadow duration-150 px-2 pt-2 bg-slate-200 dark:bg-slate-700 animate-pulse" })
-    ] }),
-    !loading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute w-full h-full flex justify-center items-center m-auto", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "p-4 rounded-lg bg-white dark:bg-slate-700 shadow-xl", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "font-semibold text-lg text-gray-700 dark:text-gray-300", children: message || "No results" }) }) })
-  ] });
+var NoResults = function(param) {
+    var loading = param.loading, message = param.message;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", {
+        className: "relative w-full flex justify-center items-center",
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.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", {
+                        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", {
+                        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"
+                    })
+                ]
+            }),
+            !loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {
+                className: "absolute w-full h-full flex justify-center items-center m-auto",
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {
+                    className: "p-4 rounded-lg bg-white dark:bg-slate-700 shadow-xl",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", {
+                        className: "font-semibold text-lg text-gray-700 dark:text-gray-300",
+                        children: message || "No results"
+                    })
+                })
+            })
+        ]
+    });
 };
 var NoResults_default = NoResults;
-
+// src/Common/Container.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Container = function(param) {
+    var backgroundImage = param.backgroundImage, style = param.style, children = param.children, onClick = param.onClick;
+    return backgroundImage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", {
+        style: _object_spread({
+            backgroundImage: backgroundImage,
+            backgroundSize: "cover"
+        }, style),
+        className: "w-full md:min-h-screen dark:bg-slate-950 mx-auto overflow-y-auto overflow-x-clip px-0 md:px-2 sm:py-4 py-1 relative",
+        onClick: onClick,
+        children: children ? children : null
+    }) : /* @__PURE__ */ (0, import_jsx_runtime4.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 || {
+            minHeight: "100vh"
+        },
+        children: children ? children : null
+    });
+};
+var Container_default = Container;
 // src/Common/Pill.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Pill = ({ text }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "rounded-full px-3 py-1 text-sm font-header font-medium bg-white dark:bg-slate-900 text-gray-700 dark:text-gray-300 mr-2 mb-2", children: text });
+var Pill = function(param) {
+    var text = param.text;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", {
+        className: "rounded-full px-3 py-1 text-sm font-header font-medium bg-white dark:bg-slate-900 text-gray-700 dark:text-gray-300 mr-2 mb-2",
+        children: text
+    });
 };
 var Pill_default = Pill;
-
 // src/Common/StepsComponent.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var StepsComponent = ({ steps, activeStep, onStepPress }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex justify-between items-center w-full p-1 mb-2", children: steps.map((step, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex justify-center items-center space-x-2 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      "button",
-      {
-        type: "button",
-        onClick: () => onStepPress(index),
-        className: `flex items-center space-x-2 px-4 py-2 rounded-lg min-w-10 md:min-w-20 sm:min-w-40 font-header transition-all duration-150
-                                        ${activeStep === index ? "bg-primary text-white shadow-lg scale-110 border-2 border-primary" : "bg-gray-100 dark:bg-slate-800 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-slate-700 border-2 border-transparent hover:border-primary/30"}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "font-medium truncate", children: [
-          index + 1,
-          ".   ",
-          step.label
-        ] })
-      }
-    ) }) }, `step_${index}_${step.label}`);
-  }) });
+var StepsComponent = function(param) {
+    var steps = param.steps, activeStep = param.activeStep, onStepPress = param.onStepPress;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
+        className: "flex justify-between items-center w-full p-1 mb-2",
+        children: steps.map(function(step, index) {
+            return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
+                className: "flex justify-center items-center space-x-2 w-full",
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
+                    className: "flex flex-col items-center",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", {
+                        type: "button",
+                        onClick: function() {
+                            return onStepPress(index);
+                        },
+                        className: "flex items-center space-x-2 px-4 py-2 rounded-lg min-w-10 md:min-w-20 sm:min-w-40 font-header transition-all duration-150\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)("span", {
+                            className: "font-medium truncate",
+                            children: [
+                                index + 1,
+                                ".   ",
+                                step.label
+                            ]
+                        })
+                    })
+                })
+            }, "step_".concat(index, "_").concat(step.label));
+        })
+    });
 };
 var StepsComponent_default = StepsComponent;
-
 // src/Fade/Fade.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Fade = ({ children, inProp }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "animate-fade-in", children });
+var Fade = function(param) {
+    var children = param.children, inProp = param.inProp;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {
+        className: "animate-fade-in",
+        children: children
+    });
 };
 var Fade_default = Fade;
-
 // src/Backdrop/Backdrop.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Backdrop = ({ visible, onClick, opacity }) => {
-  if (!visible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    "div",
-    {
-      style: {
-        opacity: opacity ? opacity : 90,
-        zIndex: 21
-      },
-      className: `fixed top-0 left-0 w-full h-screen bg-gray-100 dark:bg-slate-900`,
-      onClick
-    }
-  );
+var Backdrop = function(param) {
+    var visible = param.visible, onClick = param.onClick, opacity = param.opacity;
+    if (!visible) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", {
+        style: {
+            opacity: opacity ? opacity : 90,
+            zIndex: 21
+        },
+        className: "fixed top-0 left-0 w-full h-screen bg-gray-100 dark:bg-slate-900",
+        onClick: onClick
+    });
 };
 var Backdrop_default = Backdrop;
-
 // src/Breakpoint/Breakpoint.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Breakpoint = ({ children, fromSize, toSize }) => {
-  let className = "";
-  if (fromSize && toSize) {
-    className = `hidden ${fromSize}:block ${toSize}:hidden`;
-  } else if (fromSize) {
-    className = `hidden ${fromSize}:block`;
-  } else if (toSize) {
-    className = `block ${toSize}:hidden`;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className, children });
+var Breakpoint = function(param) {
+    var children = param.children, fromSize = param.fromSize, toSize = param.toSize;
+    var className = "";
+    if (fromSize && toSize) {
+        className = "hidden ".concat(fromSize, ":block ").concat(toSize, ":hidden");
+    } else if (fromSize) {
+        className = "hidden ".concat(fromSize, ":block");
+    } else if (toSize) {
+        className = "block ".concat(toSize, ":hidden");
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", {
+        className: className,
+        children: children
+    });
 };
 var Breakpoint_default = Breakpoint;
-
 // src/Backdrop/Overlay.tsx
 var import_react = require("react");
 var import_react_dom = __toESM(require("react-dom"));
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Overlay = ({ visible, onDismissed, onClick, zIndex, isDark, children, opacity, withContainer = true }) => {
-  const [modalRoot, setModalRoot] = (0, import_react.useState)(null);
-  (0, import_react.useEffect)(() => {
-    let root = document.getElementById("modal-root");
-    if (!root) {
-      root = document.createElement("div");
-      root.id = "modal-root";
-      document.body.appendChild(root);
-    }
-    setModalRoot(root);
-    return () => {
-      const root2 = document.getElementById("modal-root");
-      if (root2) {
-        document.body.removeChild(root2);
-      }
-    };
-  }, [visible]);
-  if (!visible || !modalRoot) return null;
-  return import_react_dom.default.createPortal(
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "animate-fade-in", children: withContainer ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "div",
-      {
-        onClick: onDismissed || onClick,
-        className: `top-0 left-0 fixed w-full h-screen flex items-center justify-center`,
-        style: {
-          background: isDark ? `rgba(0, 0, 0, ${opacity || "0.7"})` : `rgba(255, 255, 255, ${opacity || "0.6"})`,
-          zIndex: zIndex || 9999
-        },
-        children
-      }
-    ) : children }),
-    modalRoot
-  );
+var Overlay = 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 root = document.getElementById("modal-root");
+        if (!root) {
+            root = document.createElement("div");
+            root.id = "modal-root";
+            document.body.appendChild(root);
+        }
+        setModalRoot(root);
+        return function() {
+            var root2 = document.getElementById("modal-root");
+            if (root2) {
+                document.body.removeChild(root2);
+            }
+        };
+    }, [
+        visible
+    ]);
+    if (!visible || !modalRoot) return null;
+    return import_react_dom.default.createPortal(/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {
+        className: "animate-fade-in",
+        children: withContainer ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {
+            onClick: onDismissed || onClick,
+            className: "top-0 left-0 fixed w-full h-screen flex items-center justify-center",
+            style: {
+                background: isDark ? "rgba(0, 0, 0, ".concat(opacity || "0.7", ")") : "rgba(255, 255, 255, ".concat(opacity || "0.6", ")"),
+                zIndex: zIndex || 9999
+            },
+            children: children
+        }) : children
+    }), modalRoot);
 };
 var Overlay_default = Overlay;
-
 // src/Button/Button.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var Button = ({ disabled = false, loading, onClick, kind = "primary", size = "small", type = "button", children }) => {
-  const styled = () => {
-    switch (kind) {
-      case "primary":
-        return `bg-primary font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-white/50" : "hover:bg-black/10"}`;
-      case "indigo":
-        return `bg-indigo-500 font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-white/50" : "hover:bg-black/10"}`;
-      case "green":
-        return `bg-green-500 font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-white/50" : "hover:bg-black/10"}`;
-      case "teal":
-        return `bg-teal-500 font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-white/50" : "hover:bg-black/10"}`;
-      case "secondary":
-        return "bg-secondary text-white font-header font-medium hover:bg-black/10 transition-all duration-75";
-      case "base":
-        return "bg-white border-1 font-header border-gray-200 dark:bg-slate-600 dark:text-gray-100 dark:hover:bg-slate-400 hover:bg-slate-100 transition-all duration-75";
-      case "gray":
-        return "bg-slate-400 dark:bg-slate-700 font-header text-white border-1 font-medium hover:bg-black/10 transition-opacity duration-75";
-      case "alert":
-        return "bg-amber-500 font-header text-white transition-all hover:bg-black/10 duration-75";
-      case "warning":
-        return "bg-red-500 font-header text-white font-medium hover:bg-black/10 transition-opacity duration-100";
-      default:
-        break;
-    }
-  };
-  const sized = () => {
-    switch (size) {
-      case "small":
-        return "p-1";
-      case "fixed":
-        return "box-border w-32 h-11";
-      case "large":
-        return "px-2 h-11";
-      default:
-        return "px-2 py-1";
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: type || "button", disabled, className: `rounded-lg focus:outline-none transition duration-100 ${styled()} ${sized()}`, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-full max-h-11", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex w-full justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner_default, { white: true }) }) : children }) });
+var Button = 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() {
+        switch(kind){
+            case "primary":
+                return "bg-primary font-header text-white font-medium transition-all duration-75 ".concat(disabled ? "bg-white/50" : "hover:bg-black/10");
+            case "indigo":
+                return "bg-indigo-500 font-header text-white font-medium transition-all duration-75 ".concat(disabled ? "bg-white/50" : "hover:bg-black/10");
+            case "green":
+                return "bg-green-500 font-header text-white font-medium transition-all duration-75 ".concat(disabled ? "bg-white/50" : "hover:bg-black/10");
+            case "teal":
+                return "bg-teal-500 font-header text-white font-medium transition-all duration-75 ".concat(disabled ? "bg-white/50" : "hover:bg-black/10");
+            case "secondary":
+                return "bg-secondary text-white font-header font-medium hover:bg-black/10 transition-all duration-75";
+            case "base":
+                return "bg-white border-1 font-header border-gray-200 dark:bg-slate-600 dark:text-gray-100 dark:hover:bg-slate-400 hover:bg-slate-100 transition-all duration-75";
+            case "gray":
+                return "bg-slate-400 dark:bg-slate-700 font-header text-white border-1 font-medium hover:bg-black/10 transition-opacity duration-75";
+            case "alert":
+                return "bg-amber-500 font-header text-white transition-all hover:bg-black/10 duration-75";
+            case "warning":
+                return "bg-red-500 font-header text-white font-medium hover:bg-black/10 transition-opacity duration-100";
+            default:
+                break;
+        }
+    };
+    var sized = function() {
+        switch(size){
+            case "small":
+                return "p-1";
+            case "fixed":
+                return "box-border w-32 h-11";
+            case "large":
+                return "px-2 h-11";
+            default:
+                return "px-2 py-1";
+        }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", {
+        type: type || "button",
+        disabled: disabled,
+        className: "rounded-lg focus:outline-none transition duration-100 ".concat(styled(), " ").concat(sized()),
+        onClick: onClick,
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {
+            className: "w-full max-h-11",
+            children: loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {
+                className: "flex w-full justify-center items-center",
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner_default, {
+                    white: true
+                })
+            }) : children
+        })
+    });
 };
 var Button_default = Button;
-
 // src/Button/FunButton.tsx
 var import_react2 = require("react");
 var import_framer_motion = require("framer-motion");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var FunButton = ({
-  onClick,
-  disabled,
-  type,
-  children,
-  color = "primary",
-  loading,
-  active,
-  className,
-  size = "base"
-}) => {
-  const { front, bottom } = (0, import_react2.useMemo)(() => {
-    switch (color) {
-      case "primary":
-        return { bottom: "#00b4d8", front: "#0284c7" };
-      case "red":
-        return { bottom: "#f00f0f", front: "#b91c1c" };
-      case "green":
-        return { bottom: "#22c55e", front: "#16a34a" };
-      case "purple":
-        return { bottom: "#6366f1", front: "#4f46e5" };
-      case "teal":
-        return { bottom: "#14b8a6", front: "#0d9488" };
-      case "cyan":
-        return { bottom: "#06b6d4", front: "#0891b2" };
-      case "yellow":
-        return { bottom: "#eab308", front: "#ca8a04" };
-      default:
-        return { bottom: "#00b4d8", front: "#0369a1" };
-    }
-  }, [color]);
-  const classStyle = (0, import_react2.useMemo)(() => {
-    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";
-      case "big":
-        return "relative block px-12 py-4 rounded-lg text-lg text-white font-medium font-header hover:bg-slate-900/20";
-      case "small":
-        return "relative block px-6 py-1 rounded-lg text-lg text-white font-medium font-header hover:bg-slate-900/20";
-      case "square":
-        return "relative block h-12 w-12 rounded text-lg flex items-center justify-center text-white font-medium font-header hover:bg-slate-900/20";
-      default:
-        return "relative block px-8 py-3 rounded-lg text-lg text-white font-medium font-header hover:bg-slate-900/20";
-    }
-  }, [size]);
-  const computedClassName = (0, import_react2.useMemo)(() => {
-    const 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]);
-  const computedClassStyle = (0, import_react2.useMemo)(() => {
-    const 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,
-    {
-      className: `${computedClassName}`,
-      style: { background: front, outlineOffset: "4px" },
-      type,
-      onMouseDown: onClick,
-      whileTap: { y: disabled ? 0 : 2 },
-      transition: { duration: 0.1, ease: "easeInOut" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        import_framer_motion.motion.span,
-        {
-          className: computedClassStyle,
-          style: {
-            background: bottom,
-            opacity: 1
-          },
-          initial: { y: active ? 0 : -6 },
-          animate: { y: active ? 0 : -6 },
-          whileTap: { y: disabled ? -6 : 0 },
-          transition: { duration: 0.1, ease: "easeInOut" },
-          children: loading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: size === "small" ? "min-h-6" : "min-h-10", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Spinner_default.Centered, { visible: true, size: size === "small" ? "small" : "base", white: true }) }) : children
+var FunButton = 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() {
+        switch(color){
+            case "primary":
+                return {
+                    bottom: "#00b4d8",
+                    front: "#0284c7"
+                };
+            case "red":
+                return {
+                    bottom: "#f00f0f",
+                    front: "#b91c1c"
+                };
+            case "green":
+                return {
+                    bottom: "#22c55e",
+                    front: "#16a34a"
+                };
+            case "purple":
+                return {
+                    bottom: "#6366f1",
+                    front: "#4f46e5"
+                };
+            case "teal":
+                return {
+                    bottom: "#14b8a6",
+                    front: "#0d9488"
+                };
+            case "cyan":
+                return {
+                    bottom: "#06b6d4",
+                    front: "#0891b2"
+                };
+            case "yellow":
+                return {
+                    bottom: "#eab308",
+                    front: "#ca8a04"
+                };
+            default:
+                return {
+                    bottom: "#00b4d8",
+                    front: "#0369a1"
+                };
         }
-      )
-    }
-  );
+    }, [
+        color
+    ]), front = _ref.front, bottom = _ref.bottom;
+    var classStyle = (0, import_react2.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";
+            case "big":
+                return "relative block px-12 py-4 rounded-lg text-lg text-white font-medium font-header hover:bg-slate-900/20";
+            case "small":
+                return "relative block px-6 py-1 rounded-lg text-lg text-white font-medium font-header hover:bg-slate-900/20";
+            case "square":
+                return "relative block h-12 w-12 rounded text-lg flex items-center justify-center text-white font-medium font-header hover:bg-slate-900/20";
+            default:
+                return "relative block px-8 py-3 rounded-lg text-lg text-white font-medium font-header hover:bg-slate-900/20";
+        }
+    }, [
+        size
+    ]);
+    var computedClassName = (0, import_react2.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 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, {
+        className: "".concat(computedClassName),
+        style: {
+            background: front,
+            outlineOffset: "4px"
+        },
+        type: type,
+        onMouseDown: onClick,
+        whileTap: {
+            y: disabled ? 0 : 2
+        },
+        transition: {
+            duration: 0.1,
+            ease: "easeInOut"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_framer_motion.motion.span, {
+            className: computedClassStyle,
+            style: {
+                background: bottom,
+                opacity: 1
+            },
+            initial: {
+                y: active ? 0 : -6
+            },
+            animate: {
+                y: active ? 0 : -6
+            },
+            whileTap: {
+                y: disabled ? -6 : 0
+            },
+            transition: {
+                duration: 0.1,
+                ease: "easeInOut"
+            },
+            children: loading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", {
+                className: size === "small" ? "min-h-6" : "min-h-10",
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Spinner_default.Centered, {
+                    visible: true,
+                    size: size === "small" ? "small" : "base",
+                    white: true
+                })
+            }) : children
+        })
+    });
 };
 var FunButton_default = FunButton;
-
 // src/Button/FunRoundButton.tsx
 var import_react3 = require("react");
 var import_framer_motion2 = require("framer-motion");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var FunRoundButton = ({ onClick, disabled, type, children, color, active, className, size = 44 }) => {
-  const { front, bottom } = (0, import_react3.useMemo)(() => {
-    switch (color) {
-      case "primary":
-        return { bottom: "#00b4d8", front: "#0284c7" };
-      case "red":
-        return { bottom: disabled ? "hsl(340deg 100% 42%)" : "hsl(345deg 100% 47%)", front: disabled ? "hsl(340deg 100% 52%)" : "hsl(340deg 100% 32%)" };
-      case "green":
-        return { bottom: disabled ? "#86efac" : "#22c55e", front: disabled ? "#4ade80" : "#16a34a" };
-      case "purple":
-        return { bottom: disabled ? "#a5b4fc" : "#6366f1", front: disabled ? "#818cf8" : "#4f46e5" };
-      case "teal":
-        return { bottom: disabled ? "#5eead4" : "#14b8a6", front: disabled ? "#2dd4bf" : "#0d9488" };
-      case "yellow":
-        return { bottom: disabled ? "#fde047" : "#eab308", front: disabled ? "#facc15" : "#ca8a04" };
-      default:
-        return { bottom: disabled ? "#d1d5db" : "#00b4d8", front: disabled ? "#38bdf8" : "#0369a1" };
-    }
-  }, [color, disabled]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_framer_motion2.motion.button,
-    {
-      className: `${className || "border-none p-0 flex justify-center items-center cursor-pointer z-10"} ${disabled ? "opacity-70 cursor-default" : "hover:opacity-95"}`,
-      style: {
-        background: front,
-        height: size,
-        width: size + 2,
-        borderRadius: (size + 2) / 2,
-        outlineOffset: 0
-      },
-      type,
-      disabled,
-      onClick,
-      whileHover: { opacity: 0.95 },
-      whileTap: { y: disabled ? 0 : 2 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        import_framer_motion2.motion.span,
-        {
-          className: "flex justify-center items-center z-10",
-          style: {
-            background: bottom,
+var FunRoundButton = 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() {
+        switch(color){
+            case "primary":
+                return {
+                    bottom: "#00b4d8",
+                    front: "#0284c7"
+                };
+            case "red":
+                return {
+                    bottom: disabled ? "hsl(340deg 100% 42%)" : "hsl(345deg 100% 47%)",
+                    front: disabled ? "hsl(340deg 100% 52%)" : "hsl(340deg 100% 32%)"
+                };
+            case "green":
+                return {
+                    bottom: disabled ? "#86efac" : "#22c55e",
+                    front: disabled ? "#4ade80" : "#16a34a"
+                };
+            case "purple":
+                return {
+                    bottom: disabled ? "#a5b4fc" : "#6366f1",
+                    front: disabled ? "#818cf8" : "#4f46e5"
+                };
+            case "teal":
+                return {
+                    bottom: disabled ? "#5eead4" : "#14b8a6",
+                    front: disabled ? "#2dd4bf" : "#0d9488"
+                };
+            case "yellow":
+                return {
+                    bottom: disabled ? "#fde047" : "#eab308",
+                    front: disabled ? "#facc15" : "#ca8a04"
+                };
+            default:
+                return {
+                    bottom: disabled ? "#d1d5db" : "#00b4d8",
+                    front: disabled ? "#38bdf8" : "#0369a1"
+                };
+        }
+    }, [
+        color,
+        disabled
+    ]), front = _ref.front, bottom = _ref.bottom;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_framer_motion2.motion.button, {
+        className: "".concat(className || "border-none p-0 flex justify-center items-center cursor-pointer z-10", " ").concat(disabled ? "opacity-70 cursor-default" : "hover:opacity-95"),
+        style: {
+            background: front,
             height: size,
             width: size + 2,
-            borderRadius: (size + 2) / 2
-          },
-          initial: { y: active ? 0 : -6 },
-          animate: { y: active ? 0 : -6 },
-          transition: { duration: 0.1, ease: "easeInOut" },
-          whileHover: { opacity: 0.95 },
-          whileTap: { y: disabled ? active ? 0 : -6 : 0 },
-          children
-        }
-      )
-    }
-  );
+            borderRadius: (size + 2) / 2,
+            outlineOffset: 0
+        },
+        type: type,
+        disabled: disabled,
+        onClick: onClick,
+        whileHover: {
+            opacity: 0.95
+        },
+        whileTap: {
+            y: disabled ? 0 : 2
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_framer_motion2.motion.span, {
+            className: "flex justify-center items-center z-10",
+            style: {
+                background: bottom,
+                height: size,
+                width: size + 2,
+                borderRadius: (size + 2) / 2
+            },
+            initial: {
+                y: active ? 0 : -6
+            },
+            animate: {
+                y: active ? 0 : -6
+            },
+            transition: {
+                duration: 0.1,
+                ease: "easeInOut"
+            },
+            whileHover: {
+                opacity: 0.95
+            },
+            whileTap: {
+                y: disabled ? active ? 0 : -6 : 0
+            },
+            children: children
+        })
+    });
 };
 var FunRoundButton_default = FunRoundButton;
-
 // src/Checkbox/Checkbox.tsx
 var import_react4 = require("react");
 var import_formik = require("formik");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var Checkbox = ({ name, labelText, isLarge, onChange, isDisabled }) => {
-  const [{ value }, { error }, { setValue, setTouched }] = (0, import_formik.useField)(name);
-  const onCheck = (e) => {
-    setTouched(true);
-    setValue(!value, true);
-  };
-  const rand = (0, import_react4.useMemo)(() => {
-    return Math.random();
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative flex flex-col justify-center items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        "input",
-        {
-          disabled: !!isDisabled,
-          onChange: (e) => {
-            onCheck(e);
-            onChange == null ? void 0 : onChange(Boolean(e.target.value));
-          },
-          value: value ? "true" : "false",
-          id: `${name}${rand}`,
-          name,
-          type: "checkbox",
-          checked: !!value,
-          className: `form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded ${isLarge ? "h-5 w-5" : "h-4 w-4"}`
-        }
-      ),
-      typeof labelText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { htmlFor: `${name}${rand}`, className: "ml-2 block text-sm text-gray-800 dark:text-gray-200", children: labelText }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { htmlFor: `${name}${rand}`, children: labelText })
-    ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ErrorText_default, { classNames: "absolute w-64 left-6 top-4 text-xs text-red-500", text: error })
-  ] });
+var Checkbox = 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) {
+        setTouched(true);
+        setValue(!value, true);
+    };
+    var rand = (0, import_react4.useMemo)(function() {
+        return Math.random();
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", {
+        className: "relative flex flex-col justify-center items-center",
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", {
+                className: "flex items-center",
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", {
+                        disabled: !!isDisabled,
+                        onChange: function(e) {
+                            onCheck(e);
+                            onChange === null || onChange === void 0 ? void 0 : onChange(Boolean(e.target.value));
+                        },
+                        value: value ? "true" : "false",
+                        id: "".concat(name).concat(rand),
+                        name: name,
+                        type: "checkbox",
+                        checked: !!value,
+                        className: "form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded ".concat(isLarge ? "h-5 w-5" : "h-4 w-4")
+                    }),
+                    typeof labelText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime14.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", {
+                        htmlFor: "".concat(name).concat(rand),
+                        children: labelText
+                    })
+                ]
+            }),
+            error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ErrorText_default, {
+                classNames: "absolute w-64 left-6 top-4 text-xs text-red-500",
+                text: error
+            })
+        ]
+    });
 };
-var MultiChoiceCheckBox = ({ name, hasMultipleAnswers, index, isLarge, allOptionsName }) => {
-  const [{ value }, {}, { setValue, setTouched }] = (0, import_formik.useField)(name);
-  const [{ value: optionsValue }, , { setValue: setOptionsValue }] = (0, import_formik.useField)(allOptionsName);
-  const onCheck = (e) => {
-    setTouched(true);
-    if (hasMultipleAnswers) {
-      setValue(!value);
-      return;
-    }
-    setOptionsValue(optionsValue == null ? void 0 : optionsValue.map((el, idx) => ({ option: el.option, id: el.id, isCorrectAnswer: index === idx ? !el.isCorrectAnswer : false })));
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    "input",
-    {
-      onChange: (e) => onCheck(e),
-      value: index,
-      checked: !!value,
-      id: name,
-      name,
-      type: "checkbox",
-      className: `form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded ${isLarge ? "h-5 w-5" : "h-4 w-4"}`
-    }
-  ) }) });
+var MultiChoiceCheckBox = 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) {
+        setTouched(true);
+        if (hasMultipleAnswers) {
+            setValue(!value);
+            return;
+        }
+        setOptionsValue(optionsValue === null || optionsValue === void 0 ? void 0 : optionsValue.map(function(el, idx) {
+            return {
+                option: el.option,
+                id: el.id,
+                isCorrectAnswer: index === idx ? !el.isCorrectAnswer : false
+            };
+        }));
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", {
+        className: "flex flex-col justify-center items-center",
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", {
+            className: "flex items-center",
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", {
+                onChange: function(e) {
+                    return onCheck(e);
+                },
+                value: index,
+                checked: !!value,
+                id: name,
+                name: name,
+                type: "checkbox",
+                className: "form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded ".concat(isLarge ? "h-5 w-5" : "h-4 w-4")
+            })
+        })
+    });
 };
 Checkbox.Multi = MultiChoiceCheckBox;
 var Checkbox_default = Checkbox;
-
 // src/Checkbox/RadioOption.tsx
 var import_formik2 = require("formik");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var RadioOption = ({ name, isLarge, labelText, option, onSelect }) => {
-  const [{ value }, {}, { setValue }] = (0, import_formik2.useField)(name);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      "input",
-      {
-        onChange: () => {
-          setValue(option);
-          onSelect == null ? void 0 : onSelect();
-        },
-        value: option,
-        id: option,
-        name,
-        type: "checkbox",
-        checked: value === option,
-        className: `form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded ${isLarge ? "h-5 w-5" : "h-4 w-4"}`
-      }
-    ),
-    typeof labelText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { htmlFor: option, className: "ml-2 block text-sm text-gray-900", children: labelText }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { htmlFor: option, children: labelText })
-  ] });
+var RadioOption = 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", {
+        className: "flex items-center",
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("input", {
+                onChange: function() {
+                    setValue(option);
+                    onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+                },
+                value: option,
+                id: option,
+                name: name,
+                type: "checkbox",
+                checked: value === option,
+                className: "form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded ".concat(isLarge ? "h-5 w-5" : "h-4 w-4")
+            }),
+            typeof labelText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", {
+                htmlFor: option,
+                className: "ml-2 block text-sm text-gray-900",
+                children: labelText
+            }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", {
+                htmlFor: option,
+                children: labelText
+            })
+        ]
+    });
 };
 var RadioOption_default = RadioOption;
-
 // src/Common/BottomAlert.tsx
 var import_react_dom2 = __toESM(require("react-dom"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var BottomAlert = ({ isDark, setDontShowAgain, dontShowAgain, title, borderColor, onDismissed, cancelText, confirmText, onConfirm, onCancel, isSingleAction, children, buttonColor }) => {
-  const dismiss = () => {
-    onDismissed == null ? void 0 : onDismissed();
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.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", { className: "absolute top-0 w-full h-screen flex justify-center bg-gray-200/90 dark:bg-slate-800/50", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute sm:w-1/2 w-full mx-auto shadow-xl rounded-md p-6 flex z-50 flex-col top-24 bg-white dark:bg-slate-900 overflow-clip rounded-bl-lg rounded-br-lg border-b-8 border-b-blue-500", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { borderColor: borderColor || "#0ea5e9" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "font-semibold font-header text-gray-700 dark:text-gray-300 text-xl", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mt-2 text-lg", children }),
-        setDontShowAgain ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center space-x-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            "input",
-            {
-              onChange: () => {
-                setDontShowAgain((s) => !s);
-              },
-              id: `show_again_check`,
-              checked: !!dontShowAgain,
-              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", { 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", { className: "mt-4 flex items-center justify-end space-x-4 z-10", children: isSingleAction ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          Button_default,
-          {
-            type: "button",
-            kind: buttonColor,
-            onClick: () => {
-              onConfirm(true);
-              dismiss();
-            },
-            children: confirmText || "Okay"
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "w-1/3 flex justify-end space-x-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-full flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            Button_default,
-            {
-              type: "button",
-              kind: "secondary",
-              onClick: () => {
-                onCancel == null ? void 0 : onCancel();
-                dismiss();
-              },
-              children: cancelText || "Cancel"
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-full flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            Button_default,
-            {
-              type: "button",
-              kind: buttonColor,
-              onClick: () => {
-                onConfirm(true);
-                dismiss();
-              },
-              children: confirmText || "Confirm"
-            }
-          ) })
-        ] }) })
-      ] }) }) })
-    }
-  );
+var BottomAlert = 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() {
+        onDismissed === null || onDismissed === void 0 ? void 0 : onDismissed();
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime16.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", {
+            className: "absolute top-0 w-full h-screen flex justify-center bg-gray-200/90 dark:bg-slate-800/50",
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", {
+                className: "absolute sm:w-1/2 w-full mx-auto shadow-xl rounded-md p-6 flex z-50 flex-col top-24 bg-white dark:bg-slate-900 overflow-clip rounded-bl-lg rounded-br-lg border-b-8 border-b-blue-500",
+                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", {
+                    style: {
+                        borderColor: borderColor || "#0ea5e9"
+                    },
+                    children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", {
+                            className: "font-semibold font-header text-gray-700 dark:text-gray-300 text-xl",
+                            children: title
+                        }),
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", {
+                            className: "mt-2 text-lg",
+                            children: children
+                        }),
+                        setDontShowAgain ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", {
+                            className: "flex items-center space-x-1",
+                            children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", {
+                                    onChange: function() {
+                                        setDontShowAgain(function(s) {
+                                            return !s;
+                                        });
+                                    },
+                                    id: "show_again_check",
+                                    checked: !!dontShowAgain,
+                                    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", {
+                                    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", {
+                            className: "mt-4 flex items-center justify-end space-x-4 z-10",
+                            children: isSingleAction ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button_default, {
+                                type: "button",
+                                kind: buttonColor,
+                                onClick: function() {
+                                    onConfirm(true);
+                                    dismiss();
+                                },
+                                children: confirmText || "Okay"
+                            }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", {
+                                className: "w-1/3 flex justify-end space-x-4",
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", {
+                                        className: "w-full flex flex-col",
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button_default, {
+                                            type: "button",
+                                            kind: "secondary",
+                                            onClick: function() {
+                                                onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+                                                dismiss();
+                                            },
+                                            children: cancelText || "Cancel"
+                                        })
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", {
+                                        className: "w-full flex flex-col",
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button_default, {
+                                            type: "button",
+                                            kind: buttonColor,
+                                            onClick: function() {
+                                                onConfirm(true);
+                                                dismiss();
+                                            },
+                                            children: confirmText || "Confirm"
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            })
+        })
+    });
 };
-var BAWrapper = (props) => {
-  if (!props.isVisible) return null;
-  return import_react_dom2.default.createPortal(
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BottomAlert, __spreadValues({}, props)),
-    document.body
-  );
+var BAWrapper = 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);
 };
 var BottomAlert_default = BAWrapper;
-
 // src/Common/Tippy.tsx
 var import_react5 = require("react");
 var import_react6 = require("@floating-ui/react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var Tippy = ({ children, content, placement = "top", className = "", wrapperClassname = "", disabled = false, arrow: useArrow = false, visible }) => {
-  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
-  const arrowRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
-    if (visible) {
-      setIsOpen(true);
-    }
-  }, [visible]);
-  const {
-    x,
-    y,
-    strategy,
-    refs,
-    context
-  } = (0, import_react6.useFloating)({
-    placement,
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    middleware: [
-      (0, import_react6.offset)(8),
-      (0, import_react6.flip)(),
-      (0, import_react6.shift)(),
-      (0, import_react6.arrow)({ element: arrowRef })
-    ]
-  });
-  const hover = (0, import_react6.useHover)(context, {
-    enabled: !disabled
-  });
-  const dismiss = (0, import_react6.useDismiss)(context);
-  const role = (0, import_react6.useRole)(context);
-  const { getReferenceProps, getFloatingProps } = (0, import_react6.useInteractions)([
-    hover,
-    dismiss,
-    role
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react6.FloatingPortal, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        "div",
-        __spreadProps(__spreadValues({
-          ref: refs.setFloating,
-          className: `z-[9999] ${className || tippyClassname}`
-        }, getFloatingProps()), {
-          style: {
-            position: strategy,
-            top: y != null ? y : 0,
-            left: x != null ? x : 0,
-            width: "max-content"
-          },
-          children: content
-        })
-      ),
-      useArrow && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        import_react6.FloatingArrow,
-        {
-          ref: arrowRef,
-          context,
-          className: "fill-gray-900",
-          tipRadius: 2
+var Tippy = 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() {
+        if (visible) {
+            setIsOpen(true);
         }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", __spreadProps(__spreadValues({ ref: refs.setReference }, getReferenceProps()), { className: wrapperClassname, children }))
-  ] });
+    }, [
+        visible
+    ]);
+    var _ref1 = (0, import_react6.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)({
+                element: arrowRef
+            })
+        ]
+    }), x = _ref1.x, y = _ref1.y, strategy = _ref1.strategy, refs = _ref1.refs, context = _ref1.context;
+    var hover = (0, import_react6.useHover)(context, {
+        enabled: !disabled
+    });
+    var dismiss = (0, import_react6.useDismiss)(context);
+    var role = (0, import_react6.useRole)(context);
+    var _ref2 = (0, import_react6.useInteractions)([
+        hover,
+        dismiss,
+        role
+    ]), getReferenceProps = _ref2.getReferenceProps, getFloatingProps = _ref2.getFloatingProps;
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, {
+        children: [
+            isOpen && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react6.FloatingPortal, {
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", _object_spread_props(_object_spread({
+                        ref: refs.setFloating,
+                        className: "z-[9999] ".concat(className || tippyClassname)
+                    }, getFloatingProps()), {
+                        style: {
+                            position: strategy,
+                            top: y !== null && y !== void 0 ? y : 0,
+                            left: x !== null && x !== void 0 ? x : 0,
+                            width: "max-content"
+                        },
+                        children: content
+                    })),
+                    useArrow && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react6.FloatingArrow, {
+                        ref: arrowRef,
+                        context: context,
+                        className: "fill-gray-900",
+                        tipRadius: 2
+                    })
+                ]
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", _object_spread_props(_object_spread({
+                ref: refs.setReference
+            }, getReferenceProps()), {
+                className: wrapperClassname,
+                children: children
+            }))
+        ]
+    });
 };
 var Tippy_default = Tippy;
-
 // src/Common/IconInfo.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var IconInfo = ({ content, icon, number, color }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-shrink-0 items-center justify-center w-8 h-8 rounded-full bg-slate-400 dark:bg-slate-600 dark:border dark:border-white", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    Tippy_default,
-    {
-      className: tippyClassname,
-      content,
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", children: [
-        icon,
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: `absolute -bottom-1 ${number > 9 ? number > 99 ? number > 999 ? "w-8 h-8 -right-6 -bottom-3" : "w-6 h-6 -right-5 -bottom-2" : "w-5 h-5 -right-3" : "w-4 -right-3"} flex justify-center items-center text-xs font-sans rounded-full text-white ${color || "bg-secondary"}`, children: number })
-      ] })
-    }
-  ) });
+var IconInfo = function(param) {
+    var content = param.content, icon = param.icon, number = param.number, color = param.color;
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", {
+        className: "flex flex-shrink-0 items-center justify-center w-8 h-8 rounded-full bg-slate-400 dark:bg-slate-600 dark:border dark:border-white",
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tippy_default, {
+            className: tippyClassname,
+            content: content,
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", {
+                className: "relative",
+                children: [
+                    icon,
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", {
+                        className: "absolute -bottom-1 ".concat(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 ").concat(color || "bg-secondary"),
+                        children: number
+                    })
+                ]
+            })
+        })
+    });
 };
 var IconInfo_default = IconInfo;
-
 // src/Common/Modal.tsx
 var import_link = __toESM(require("next/link"));
-
 // src/Icons/XIcon.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var XIcon = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) });
+var XIcon = function(param) {
+    var className = param.className;
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: className || "h-5 w-5",
+        viewBox: "0 0 20 20",
+        fill: "currentColor",
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", {
+            fillRule: "evenodd",
+            d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+            clipRule: "evenodd"
+        })
+    });
 };
 var XIcon_default = XIcon;
-
 // src/Common/Modal.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var Modal = (_a) => {
-  var _b = _a, { visible, children, fullscreen, displayDark, dismissLink, bgOpacity, onDismissed, dismissable = true, dismissOnBackdropClick = true, style } = _b, props = __objRest(_b, ["visible", "children", "fullscreen", "displayDark", "dismissLink", "bgOpacity", "onDismissed", "dismissable", "dismissOnBackdropClick", "style"]);
-  if (!visible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Overlay_default, __spreadProps(__spreadValues({ visible, onClick: dismissOnBackdropClick ? onDismissed : void 0, isDark: displayDark, withContainer: true }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    "div",
-    {
-      className: `${displayDark && "dark"} bg-slate-900/20 fixed inset-0 flex items-center justify-center`,
-      style: { zIndex: 1e4 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: ["relative mx-1 w-full md:mx-auto md:w-3/4 lg:w-1/2", fullscreen && `md:w-5/6 lg:w-5/6`].join(" "), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: dismissLink ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_link.default,
-          {
-            href: dismissLink,
-            scroll: false,
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { onClick: onDismissed, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(XIcon_default, { className: "absolute h-5 w-5 top-5 sm:top-20 right-4 transition-colors cursor-pointer duration-75 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-500" }) })
-          }
-        ) : dismissable ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          "button",
-          {
-            className: "absolute top-5 sm:top-20 right-4 transition-colors cursor-pointer duration-75 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-500",
-            type: "button",
-            onClick: onDismissed,
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              XIcon_default,
-              {
-                className: "h-5 w-5"
-              }
-            )
-          }
-        ) : null }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          "div",
-          {
-            className: "my-1 sm:mt-16 bg-white dark:bg-slate-900 shadow-lg border border-gray-100 dark:border-none rounded-xl overflow-x-visible overflow-y-visible no-scrollbar",
-            onClick: (e) => e.stopPropagation(),
-            style: __spreadValues({ maxHeight: "calc(100vh - 6rem)" }, style),
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "p-4 sm:p-10", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mt-8 sm:mt-0", children }) })
-          }
-        )
-      ] })
-    }
-  ) }));
+var Modal = 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",
+        "fullscreen",
+        "displayDark",
+        "dismissLink",
+        "bgOpacity",
+        "onDismissed",
+        "dismissable",
+        "dismissOnBackdropClick",
+        "style"
+    ]);
+    if (!visible) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.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: "".concat(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: [
+                    "relative mx-1 w-full md:mx-auto md:w-3/4 lg:w-1/2",
+                    fullscreen && "md:w-5/6 lg:w-5/6"
+                ].join(" "),
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {
+                        children: dismissLink ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_link.default, {
+                            href: dismissLink,
+                            scroll: false,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
+                                onClick: onDismissed,
+                                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(XIcon_default, {
+                                    className: "absolute h-5 w-5 top-5 sm:top-20 right-4 transition-colors cursor-pointer duration-75 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-500"
+                                })
+                            })
+                        }) : dismissable ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", {
+                            className: "absolute top-5 sm:top-20 right-4 transition-colors cursor-pointer duration-75 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-500",
+                            type: "button",
+                            onClick: onDismissed,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(XIcon_default, {
+                                className: "h-5 w-5"
+                            })
+                        }) : null
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
+                        className: "my-1 sm:mt-16 bg-white dark:bg-slate-900 shadow-lg border border-gray-100 dark:border-none rounded-xl overflow-x-visible overflow-y-visible no-scrollbar",
+                        onClick: function(e) {
+                            return e.stopPropagation();
+                        },
+                        style: _object_spread({
+                            maxHeight: "calc(100vh - 6rem)"
+                        }, style),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
+                            className: "p-4 sm:p-10",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
+                                className: "mt-8 sm:mt-0",
+                                children: children
+                            })
+                        })
+                    })
+                ]
+            })
+        })
+    }));
 };
 var Modal_default = Modal;
-
 // src/Common/NoticeBox.tsx
 var import_react7 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var NoticeBox = ({ children, type, isDismissible, isVisible, onDismiss }) => {
-  const [visible, setVisible] = (0, import_react7.useState)(true);
-  const styles = (0, import_react7.useMemo)(() => {
-    const base = "relative text-base rounded-md p-2 ";
-    if (!visible) return "hidden";
-    switch (type) {
-      case "error":
-        return base.concat("w-full absolute top-50 text-red-500 border-red-400 border-2");
-      case "info":
-        return base.concat("text-green-800 border-green-400 bg-green-100");
-      case "warning":
-        return base.concat("text-orange-500 border border-orange-400 bg-white");
-      default:
-        return base.concat("w-full absolute top-0 text-red-500 border-red-500 bg-white p-3 border-2");
-    }
-  }, [type, visible]);
-  (0, import_react7.useEffect)(() => {
-    setVisible(isVisible);
-  }, [isVisible]);
-  if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    "div",
-    {
-      style: {
-        zIndex: 100
-      },
-      className: styles,
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", children: [
-        isDismissible && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              setVisible((s) => !s);
-              onDismiss == null ? void 0 : onDismiss();
-            },
-            className: "absolute bottom-1 right-1 transition-colors cursor-pointer duration-75 hover:text-blue-500",
-            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(XIcon_default, { className: "h-5 w-5" })
-          }
-        ),
-        children
-      ] })
-    }
-  );
+var NoticeBox = 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 base = "relative text-base rounded-md p-2 ";
+        if (!visible) return "hidden";
+        switch(type){
+            case "error":
+                return base.concat("w-full absolute top-50 text-red-500 border-red-400 border-2");
+            case "info":
+                return base.concat("text-green-800 border-green-400 bg-green-100");
+            case "warning":
+                return base.concat("text-orange-500 border border-orange-400 bg-white");
+            default:
+                return base.concat("w-full absolute top-0 text-red-500 border-red-500 bg-white p-3 border-2");
+        }
+    }, [
+        type,
+        visible
+    ]);
+    (0, import_react7.useEffect)(function() {
+        setVisible(isVisible);
+    }, [
+        isVisible
+    ]);
+    if (!isVisible) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", {
+        style: {
+            zIndex: 100
+        },
+        className: styles,
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", {
+            className: "relative",
+            children: [
+                isDismissible && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", {
+                    type: "button",
+                    onClick: function() {
+                        setVisible(function(s) {
+                            return !s;
+                        });
+                        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, {
+                        className: "h-5 w-5"
+                    })
+                }),
+                children
+            ]
+        })
+    });
 };
 var NoticeBox_default = NoticeBox;
-
 // src/Icons/StarIcon.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var StarIcon = ({ className, percentage, color }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("linearGradient", { id: "grad", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("stop", { offset: `${(percentage || 0.5) * 100}%`, "stop-color": color ? color : "#4b5563" }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("stop", { offset: `${100 - (percentage || 0.5) * 100}%`, "stop-color": "white" })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { fill: "url(#grad)", d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
-  ] });
+var StarIcon = function(param) {
+    var className = param.className, percentage = param.percentage, color = param.color;
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: className || "h-5 w-5",
+        viewBox: "0 0 20 20",
+        fill: "currentColor",
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("defs", {
+                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("linearGradient", {
+                    id: "grad",
+                    children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("stop", {
+                            offset: "".concat((percentage || 0.5) * 100, "%"),
+                            "stop-color": color ? color : "#4b5563"
+                        }),
+                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("stop", {
+                            offset: "".concat(100 - (percentage || 0.5) * 100, "%"),
+                            "stop-color": "white"
+                        })
+                    ]
+                })
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", {
+                fill: "url(#grad)",
+                d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+            })
+        ]
+    });
 };
 var StarIcon_default = StarIcon;
-
 // src/Icons/StarIconSolid.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var StartIconSolid = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
+var StartIconSolid = function(param) {
+    var className = param.className;
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: className || "h-5 w-5",
+        viewBox: "0 0 20 20",
+        fill: "currentColor",
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", {
+            d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+        })
+    });
 };
 var StarIconSolid_default = StartIconSolid;
-
 // src/Common/RatingStars.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var RatingStars = ({ avgRating, large }) => {
-  const icons = [1, 2, 3, 4, 5].map((el) => {
-    if (avgRating === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StarIconSolid_default, { className: `${large ? "h-5 w-5" : "h-3 w-3"} text-gray-200 dark:text-gray-400` }, `rating_star_${el}`);
-    }
-    if (Number.isInteger(avgRating)) {
-      if (el <= avgRating) {
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StarIconSolid_default, { className: `${large ? "h-5 w-5" : "h-3 w-3"} text-blue-500` }, `rating_star_${el}`);
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StarIconSolid_default, { className: `${large ? "h-5 w-5" : "h-3 w-3"} text-gray-200 dark:text-gray-400` }, `rating_star_${el}`);
-    }
-    const whole = Math.floor(avgRating);
-    if (el <= whole) {
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StarIconSolid_default, { className: `${large ? "h-5 w-5" : "h-3 w-3"} text-blue-500` }, `rating_star_${el}`);
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StarIcon_default, { percentage: avgRating - whole, color: "#00b4d8", className: `${large ? "h-5 w-5" : "h-3 w-3"}` }, `rating_star_${el}`);
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    Tippy_default,
-    {
-      content: avgRating === 0 ? "No ratings" : "Average Rating " + avgRating,
-      className: "bg-gray-800 opacity-90 text-white rounded-md px-2 py-1 cursor-pointer h-fit",
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center space-x-0 justify-start", children: icons })
-    }
-  );
+var RatingStars = function(param) {
+    var avgRating = param.avgRating, large = param.large;
+    var icons = [
+        1,
+        2,
+        3,
+        4,
+        5
+    ].map(function(el) {
+        if (avgRating === 0) {
+            return /* @__PURE__ */ (0, import_jsx_runtime24.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, {
+                    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, {
+                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, {
+                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, {
+            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, {
+        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", {
+            className: "flex items-center space-x-0 justify-start",
+            children: icons
+        })
+    });
 };
 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 = ({ min, max, step, value, onChange }) => {
-  const handleChange = (event) => {
-    onChange(parseFloat(event.target.value));
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    "input",
-    {
-      type: "range",
-      min,
-      max,
-      step,
-      value,
-      onChange: handleChange,
-      className: `w-full h-2 rounded-lg range-input`
-    }
-  );
+var Slider = function(param) {
+    var min = param.min, max = param.max, step = param.step, value = param.value, onChange = param.onChange;
+    var handleChange = function(event) {
+        onChange(parseFloat(event.target.value));
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("input", {
+        type: "range",
+        min: min,
+        max: max,
+        step: step,
+        value: value,
+        onChange: handleChange,
+        className: "w-full h-2 rounded-lg range-input"
+    });
 };
-var DebouncedSlider = ({ min, max, handleUpdate, initialValue }) => {
-  const [value, setValue] = (0, import_react8.useState)(initialValue);
-  const debouncedUpdate = (0, import_use_debounce.useDebouncedCallback)((v) => {
-    handleUpdate(v);
-  }, 120, { trailing: true, leading: false });
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    Slider,
-    {
-      min,
-      max,
-      step: 1,
-      value,
-      onChange: (v) => {
-        setValue(v);
-        debouncedUpdate(v);
-      }
-    }
-  );
+var DebouncedSlider = 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) {
+        handleUpdate(v);
+    }, 120, {
+        trailing: true,
+        leading: false
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Slider, {
+        min: min,
+        max: max,
+        step: 1,
+        value: value,
+        onChange: function(v) {
+            setValue(v);
+            debouncedUpdate(v);
+        }
+    });
 };
 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_jsx_runtime26 = require("react/jsx-runtime");
-var Formik = ({ label, name }) => {
-  const [{ value }, , { setValue }] = (0, import_formik3.useField)(name);
-  const handleChange = (e) => {
-    setValue(e.target.checked);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        "input",
-        {
-          type: "checkbox",
-          className: "opacity-0 absolute",
-          checked: value,
-          onChange: handleChange
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `w-10 h-6 rounded-full p-[4px] transition-colors duration-300 ${value ? "bg-[#00b4d8]" : "bg-[#64748b]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        import_framer_motion3.motion.div,
-        {
-          className: "w-4 h-4 bg-white rounded-full absolute top-1",
-          initial: false,
-          animate: {
-            x: value ? 16 : 0
-          },
-          transition: { type: "spring", stiffness: 500, damping: 30 }
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-sm font-medium text-gray-800 dark:text-gray-200", children: label })
-  ] });
+var Formik = 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) {
+        setValue(e.target.checked);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", {
+        className: "flex items-center space-x-2 cursor-pointer",
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", {
+                className: "relative",
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("input", {
+                        type: "checkbox",
+                        className: "opacity-0 absolute",
+                        checked: value,
+                        onChange: handleChange
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", {
+                        className: "w-10 h-6 rounded-full p-[4px] transition-colors duration-300 ".concat(value ? "bg-[#00b4d8]" : "bg-[#64748b]"),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_framer_motion3.motion.div, {
+                            className: "w-4 h-4 bg-white rounded-full absolute top-1",
+                            initial: false,
+                            animate: {
+                                x: value ? 16 : 0
+                            },
+                            transition: {
+                                type: "spring",
+                                stiffness: 500,
+                                damping: 30
+                            }
+                        })
+                    })
+                ]
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", {
+                className: "text-sm font-medium text-gray-800 dark:text-gray-200",
+                children: label
+            })
+        ]
+    });
 };
-var ToggleSwitch = ({ label, onChange, value }) => {
-  const handleChange = (e) => {
-    onChange(e.target.checked);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        "input",
-        {
-          type: "checkbox",
-          className: "opacity-0 absolute",
-          checked: value,
-          onChange: handleChange
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `w-10 h-6 rounded-full p-[4px] transition-colors duration-300 ${value ? "bg-[#00b4d8]" : "bg-[#64748b]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        import_framer_motion3.motion.div,
-        {
-          className: "w-4 h-4 bg-white rounded-full absolute top-1",
-          initial: false,
-          animate: {
-            x: value ? 16 : 0
-          },
-          transition: { type: "spring", stiffness: 500, damping: 30 }
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-sm font-medium text-gray-800 dark:text-gray-200", children: label })
-  ] });
+var ToggleSwitch = function(param) {
+    var label = param.label, onChange = param.onChange, value = param.value;
+    var handleChange = function(e) {
+        onChange(e.target.checked);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", {
+        className: "flex items-center space-x-2 cursor-pointer",
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", {
+                className: "relative",
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("input", {
+                        type: "checkbox",
+                        className: "opacity-0 absolute",
+                        checked: value,
+                        onChange: handleChange
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", {
+                        className: "w-10 h-6 rounded-full p-[4px] transition-colors duration-300 ".concat(value ? "bg-[#00b4d8]" : "bg-[#64748b]"),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_framer_motion3.motion.div, {
+                            className: "w-4 h-4 bg-white rounded-full absolute top-1",
+                            initial: false,
+                            animate: {
+                                x: value ? 16 : 0
+                            },
+                            transition: {
+                                type: "spring",
+                                stiffness: 500,
+                                damping: 30
+                            }
+                        })
+                    })
+                ]
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", {
+                className: "text-sm font-medium text-gray-800 dark:text-gray-200",
+                children: label
+            })
+        ]
+    });
 };
 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 = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" }) });
+var PlusCircleIcon = function(param) {
+    var className = param.className;
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: className || "h-5 w-5",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+        })
+    });
 };
 var PlusCircleIcon_default = PlusCircleIcon;
-
 // src/Icons/ArrowCircleRight.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var StartIconSolid2 = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" }) });
+var StartIconSolid2 = function(param) {
+    var className = param.className;
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: className || "h-5 w-5",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+        })
+    });
 };
 var ArrowCircleRight_default = StartIconSolid2;
-
 // src/Common/UserContentSwitcher.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var UserContentSwitcher = ({ icon1: Icon1, icon2: Icon2, setGalleryMode, galleryMode, title1, title2 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "relative flex flex-row items-center my-2 bg-slate-100 dark:bg-slate-900 w-full h-14 rounded-lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-      import_framer_motion4.motion.div,
-      {
-        className: "absolute w-1/2 h-11 rounded-md bg-white dark:bg-slate-600",
-        animate: {
-          x: galleryMode === title1.toLowerCase() ? "1%" : "99%"
-        },
-        transition: {
-          type: "spring",
-          damping: 20,
-          stiffness: 200
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-      "button",
-      {
-        onClick: () => setGalleryMode(title1.toLowerCase()),
-        className: "py-2 flex flex-row w-1/2 justify-center items-center gap-1 z-10",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            "span",
-            {
-              className: `truncate ${galleryMode === title1.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"}`,
-              children: title1.toLocaleUpperCase()
-            }
-          ),
-          Icon1 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            Icon1,
-            {
-              className: `h-5 w-5 ${galleryMode === title1.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"}`
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            PlusCircleIcon_default,
-            {
-              className: `h-5 w-5 ${galleryMode === title1.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"}`
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-      "button",
-      {
-        onClick: () => setGalleryMode(title2.toLowerCase()),
-        className: "py-2 flex flex-row w-1/2 justify-center items-center gap-1 z-10",
+var UserContentSwitcher = 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", {
+        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)(
-            "span",
-            {
-              className: `truncate ${galleryMode === title2.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"}`,
-              children: title2.toLocaleUpperCase()
-            }
-          ),
-          Icon2 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            Icon2,
-            {
-              className: `h-5 w-5 ${galleryMode === title2.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"}`
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            ArrowCircleRight_default,
-            {
-              className: `h-5 w-5 ${galleryMode === title2.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"}`
-            }
-          )
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_framer_motion4.motion.div, {
+                className: "absolute w-1/2 h-11 rounded-md bg-white dark:bg-slate-600",
+                animate: {
+                    x: galleryMode === title1.toLowerCase() ? "1%" : "99%"
+                },
+                transition: {
+                    type: "spring",
+                    damping: 20,
+                    stiffness: 200
+                }
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.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: "truncate ".concat(galleryMode === title1.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"),
+                        children: title1.toLocaleUpperCase()
+                    }),
+                    Icon1 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon1, {
+                        className: "h-5 w-5 ".concat(galleryMode === title1.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90")
+                    }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PlusCircleIcon_default, {
+                        className: "h-5 w-5 ".concat(galleryMode === title1.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90")
+                    })
+                ]
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.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: "truncate ".concat(galleryMode === title2.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"),
+                        children: title2.toLocaleUpperCase()
+                    }),
+                    Icon2 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon2, {
+                        className: "h-5 w-5 ".concat(galleryMode === title2.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90")
+                    }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ArrowCircleRight_default, {
+                        className: "h-5 w-5 ".concat(galleryMode === title2.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90")
+                    })
+                ]
+            })
         ]
-      }
-    )
-  ] });
+    });
 };
 var UserContentSwitcher_default = UserContentSwitcher;
-
 // src/ProgressBar/ProgressBarSimple.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var ProgressBarSimple = ({ progress, color, height = 10, backgroundColor = "#ccc" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    "div",
-    {
-      className: "w-full overflow-hidden transition-all duration-150 ease-in-out",
-      style: {
-        backgroundColor,
-        height: `${height}px`,
-        borderRadius: `${height / 2}px`
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        "div",
-        {
-          className: "transition-all duration-150 ease-in-out",
-          style: {
-            width: `${progress}%`,
-            backgroundColor: color,
-            height: `${height}px`,
-            borderRadius: `${height / 2}px`
-          }
-        }
-      )
-    }
-  ) });
+var ProgressBarSimple = 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", {
+        className: "w-full",
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.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", {
+                className: "transition-all duration-150 ease-in-out",
+                style: {
+                    width: "".concat(progress, "%"),
+                    backgroundColor: color,
+                    height: "".concat(height, "px"),
+                    borderRadius: "".concat(height / 2, "px")
+                }
+            })
+        })
+    });
 };
 var ProgressBarSimple_default = ProgressBarSimple;
-
 // src/ProgressBar/ProgressBar.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var ProgressBar = ({ progress }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "-mt-2 mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "bg-gray-100 rounded-full h-2", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-  "div",
-  {
-    className: `rounded-full h-2 ${progress === 100 ? "bg-green-400" : "bg-gray-100"}`,
-    style: {
-      width: `${progress}%`,
-      minWidth: "100%",
-      position: "absolute"
-    }
-  }
-) }) }) });
-var ProgressStepBar = ({ steps, stepIndex, onStepClick, color }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex w-full items-center space-x-0.5 -mt-1 overflow-hidden", children: steps.map((el, i) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-1 relative", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      Tippy_default,
-      {
-        content: el.label,
-        className: tippyClassname,
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          "div",
-          {
-            onClick: () => onStepClick == null ? 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: `cursor-pointer rounded-full h-2 ${stepIndex >= i ? "bg-green-400" : "bg-gray-100"}`,
-                style: {
-                  width: `${stepIndex >= i ? 100 : 0}%`,
-                  transition: "width 0.3s ease"
-                }
-              }
-            )
-          }
-        ) })
-      }
-    ) }, `index_progress_${el.label}`);
-  }) });
+var ProgressBar = function(param) {
+    var progress = param.progress;
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+            className: "-mt-2 mb-6",
+            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                className: "bg-gray-100 rounded-full h-2",
+                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                    className: "rounded-full h-2 ".concat(progress === 100 ? "bg-green-400" : "bg-gray-100"),
+                    style: {
+                        width: "".concat(progress, "%"),
+                        minWidth: "100%",
+                        position: "absolute"
+                    }
+                })
+            })
+        })
+    });
+};
+var ProgressStepBar = function(param) {
+    var steps = param.steps, stepIndex = param.stepIndex, onStepClick = param.onStepClick, color = param.color;
+    return /* @__PURE__ */ (0, import_jsx_runtime31.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", {
+                className: "flex-1 relative",
+                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Tippy_default, {
+                    content: el.label,
+                    className: tippyClassname,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {
+                        className: "mb-4",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime31.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: "cursor-pointer rounded-full h-2 ".concat(stepIndex >= i ? "bg-green-400" : "bg-gray-100"),
+                                style: {
+                                    width: "".concat(stepIndex >= i ? 100 : 0, "%"),
+                                    transition: "width 0.3s ease"
+                                }
+                            })
+                        })
+                    })
+                })
+            }, "index_progress_".concat(el.label));
+        })
+    });
 };
 ProgressBar.Step = ProgressStepBar;
 var ProgressBar_default = ProgressBar;
-
 // src/ProgressBar/CircleProgress.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var CircleProgress = ({ twColor, percentage, radius, fill, strokeWidth }) => {
-  const r = radius;
-  const cx = "50%";
-  const cy = "50%";
-  const w = Math.round(radius / 16);
-  const strokeWidthCalc = strokeWidth ? strokeWidth : w < 8 ? 8 : w;
-  const size = radius * 2 + strokeWidthCalc;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { height: size, width: size }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("svg", { viewBox: `0 0 ${size} ${size}`, className: "-rotate-90", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      "circle",
-      {
-        className: "text-white/50 dark:text-slate-200/50",
-        strokeWidth: strokeWidthCalc - 0.5,
-        stroke: "currentColor",
-        fill: fill || "transparent",
-        r,
-        cx,
-        cy
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      "circle",
-      {
-        strokeDasharray: 2 * Math.PI * r,
-        strokeDashoffset: 2 * Math.PI * r - percentage / 100 * 2 * Math.PI * r,
-        stroke: twColor || "white/50",
-        strokeWidth: strokeWidthCalc,
-        strokeLinecap: "round",
-        fill: "transparent",
-        r,
-        cx,
-        cy
-      }
-    )
-  ] }) });
+var CircleProgress = function(param) {
+    var twColor = param.twColor, percentage = param.percentage, radius = param.radius, fill = param.fill, strokeWidth = param.strokeWidth;
+    var r = radius;
+    var cx = "50%";
+    var cy = "50%";
+    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", {
+        style: {
+            height: size,
+            width: size
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("svg", {
+            viewBox: "0 0 ".concat(size, " ").concat(size),
+            className: "-rotate-90",
+            children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", {
+                    className: "text-white/50 dark:text-slate-200/50",
+                    strokeWidth: strokeWidthCalc - 0.5,
+                    stroke: "currentColor",
+                    fill: fill || "transparent",
+                    r: r,
+                    cx: cx,
+                    cy: cy
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", {
+                    strokeDasharray: 2 * Math.PI * r,
+                    strokeDashoffset: 2 * Math.PI * r - percentage / 100 * 2 * Math.PI * r,
+                    stroke: twColor || "white/50",
+                    strokeWidth: strokeWidthCalc,
+                    strokeLinecap: "round",
+                    fill: "transparent",
+                    r: r,
+                    cx: cx,
+                    cy: cy
+                })
+            ]
+        })
+    });
 };
 var CircleProgress_default = CircleProgress;
-
 // src/ProgressBar/CourseProgress.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var PRIMARY_COLOR2 = "#00b4d8";
-var CourseProgress = ({ twColor, percentage, label }) => {
-  const cx = "50%";
-  const cy = "50%";
-  const r = 50;
-  const strokeWidth = 10;
-  const fullLength = 2 * Math.PI * r;
-  const length = fullLength * (percentage < 1 ? 1 - percentage : 0.01);
-  const strokeDashoffset = 2 * Math.PI * r - percentage / 100 * 2 * Math.PI * r;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.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", { className: `relative flex items-center justify-center -my-2 -mt-1 overflow-hidden rounded-full`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", { className: `-rotate-90`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          "circle",
-          {
-            className: "text-gray-300",
-            strokeWidth,
-            stroke: "currentColor",
-            fill: "transparent",
-            r,
-            cx,
-            cy
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          "circle",
-          {
-            style: { strokeDashoffset },
-            color: twColor || PRIMARY_COLOR2,
-            ref: (ref) => {
-              if (ref) {
-              }
-            },
-            strokeWidth,
-            strokeLinecap: "round",
-            stroke: "currentColor",
-            fill: "transparent",
-            r,
-            cx,
-            cy,
-            strokeDasharray: fullLength,
-            strokeDashoffset: length
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: `absolute top-[${50 / 2}] text-xl leading-none font-medium font-header hidden sm:block`, children: percentage.toString() + "%" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "font-medium sm:text-xl font-header text-center w-full", children: label })
-  ] });
+var CourseProgress = function(param) {
+    var twColor = param.twColor, percentage = param.percentage, label = param.label;
+    var cx = "50%";
+    var cy = "50%";
+    var r = 50;
+    var strokeWidth = 10;
+    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", {
+        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", {
+                className: "relative flex items-center justify-center -my-2 -mt-1 overflow-hidden rounded-full",
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", {
+                        className: "-rotate-90",
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", {
+                                className: "text-gray-300",
+                                strokeWidth: strokeWidth,
+                                stroke: "currentColor",
+                                fill: "transparent",
+                                r: r,
+                                cx: cx,
+                                cy: cy
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", {
+                                style: {
+                                    strokeDashoffset: strokeDashoffset
+                                },
+                                color: twColor || PRIMARY_COLOR2,
+                                ref: function(ref) {
+                                    if (ref) {}
+                                },
+                                strokeWidth: strokeWidth,
+                                strokeLinecap: "round",
+                                stroke: "currentColor",
+                                fill: "transparent",
+                                r: r,
+                                cx: cx,
+                                cy: cy,
+                                strokeDasharray: fullLength,
+                                strokeDashoffset: length
+                            })
+                        ]
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime33.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", {
+                className: "font-medium sm:text-xl font-header text-center w-full",
+                children: label
+            })
+        ]
+    });
 };
-var Small = ({ twColor, percentage, label }) => {
-  const cx = 18;
-  const cy = 18;
-  const r = 14;
-  const strokeWidth = 4;
-  const strokeDashoffset = 2 * Math.PI * r - percentage / 100 * 2 * Math.PI * r;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.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", { className: `flex items-center justify-center overflow-hidden`, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", { className: `w-10 h-11 transform translate-x-1 translate-y-1`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        "circle",
-        {
-          className: "text-gray-300",
-          strokeWidth,
-          stroke: "currentColor",
-          fill: "transparent",
-          r,
-          cx,
-          cy
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        "circle",
-        {
-          style: { strokeDashoffset },
-          className: twColor || "text-blue-500",
-          ref: (ref) => {
-            if (ref) {
-            }
-          },
-          strokeWidth,
-          strokeLinecap: "round",
-          stroke: "currentColor",
-          fill: "transparent",
-          r,
-          cx,
-          cy
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("p", { className: "font-medium dark:text-gray-300 text-gray-600 text-sm font-header mt-1", children: [
-      label,
-      " ",
-      percentage.toString() + "%"
-    ] })
-  ] });
+var Small = 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", {
+        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", {
+                className: "flex items-center justify-center overflow-hidden",
+                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", {
+                    className: "w-10 h-11 transform translate-x-1 translate-y-1",
+                    children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", {
+                            className: "text-gray-300",
+                            strokeWidth: strokeWidth,
+                            stroke: "currentColor",
+                            fill: "transparent",
+                            r: r,
+                            cx: cx,
+                            cy: cy
+                        }),
+                        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", {
+                            style: {
+                                strokeDashoffset: strokeDashoffset
+                            },
+                            className: twColor || "text-blue-500",
+                            ref: function(ref) {
+                                if (ref) {}
+                            },
+                            strokeWidth: strokeWidth,
+                            strokeLinecap: "round",
+                            stroke: "currentColor",
+                            fill: "transparent",
+                            r: r,
+                            cx: cx,
+                            cy: cy
+                        })
+                    ]
+                })
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("p", {
+                className: "font-medium dark:text-gray-300 text-gray-600 text-sm font-header mt-1",
+                children: [
+                    label,
+                    " ",
+                    percentage.toString() + "%"
+                ]
+            })
+        ]
+    });
 };
 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 = () => {
-  const [scrollPercentage, setScrollPercentage] = (0, import_react9.useState)(0);
-  (0, import_react9.useEffect)(() => {
-    const handleScroll = () => {
-      const windowHeight = window.innerHeight;
-      const documentHeight = document.documentElement.scrollHeight;
-      const scrollY = window.scrollY;
-      const scrollPercent = scrollY / (documentHeight - windowHeight) * 100;
-      setScrollPercentage(scrollPercent);
-    };
-    window.addEventListener("scroll", handleScroll);
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    "div",
-    {
-      style: {
-        height: "4px",
-        borderRadius: 2,
-        width: "100%",
-        // backgroundColor: '#d1dced',
-        position: "fixed",
-        top: "62px",
-        left: "0px",
-        right: "0px"
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-        "div",
-        {
-          style: {
-            height: "100%",
-            backgroundColor: PRIMARY_COLOR3,
+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 windowHeight = window.innerHeight;
+            var documentHeight = document.documentElement.scrollHeight;
+            var scrollY = window.scrollY;
+            var scrollPercent = scrollY / (documentHeight - windowHeight) * 100;
+            setScrollPercentage(scrollPercent);
+        };
+        window.addEventListener("scroll", handleScroll);
+        return function() {
+            window.removeEventListener("scroll", handleScroll);
+        };
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {
+        style: {
+            height: "4px",
             borderRadius: 2,
-            width: `${scrollPercentage}%`
-          }
-        }
-      )
-    }
-  );
+            width: "100%",
+            // backgroundColor: '#d1dced',
+            position: "fixed",
+            top: "62px",
+            left: "0px",
+            right: "0px"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {
+            style: {
+                height: "100%",
+                backgroundColor: PRIMARY_COLOR3,
+                borderRadius: 2,
+                width: "".concat(scrollPercentage, "%")
+            }
+        })
+    });
 };
 var ScrollProgress_default = ScrollProgress;
-
 // src/Icons/AnimateLogo.tsx
 var import_react10 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var AnimateLogo = () => {
-  const [isFirefox, setIsFirefox] = (0, import_react10.useState)(false);
-  (0, import_react10.useEffect)(() => {
-    const userAgent = window.navigator.userAgent;
-    setIsFirefox(userAgent.indexOf("Firefox") > -1);
-  }, []);
-  if (isFirefox) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "animate-pulse", viewBox: "0 0 600 600", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-      "path",
-      {
-        className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
-        stroke: "currentColor",
-        fill: "none",
-        strokeLinecap: "round",
-        strokeMiterlimit: "10",
-        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",
-            {
-              attributeName: "stroke-dashoffset",
-              to: "0",
-              from: "1600",
-              dur: "4s",
-              fill: "freeze",
-              repeatCount: "indefinite",
-              calcMode: "cubic",
-              keyTimes: "0;0.375;0.5;0.875;1",
-              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",
-            {
-              attributeName: "transform",
-              type: "rotate",
-              from: "0 300 300",
-              to: "360 300 300",
-              dur: "2s",
-              fill: "freeze",
-              repeatCount: "indefinite",
-              calcMode: "cubic",
-              keyTimes: "0;0.75;1",
-              keySplines: "0 0.26 0 1",
-              values: "0 300 300;360 300 300;360 300 300;"
-            }
-          )
-        ]
-      }
-    ) }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-    "g",
-    {
-      style: {
-        transformOrigin: "center"
-      },
-      transform: "translate(300 300) rotate(0)",
-      height: 176,
-      width: 176,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-          "path",
-          {
-            className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
-            stroke: "currentColor",
-            id: "motionPath",
-            fill: "none",
-            strokeLinecap: "round",
-            height: 600,
-            width: 600,
+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 userAgent = window.navigator.userAgent;
+        setIsFirefox(userAgent.indexOf("Firefox") > -1);
+    }, []);
+    if (isFirefox) {
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            className: "animate-pulse",
+            viewBox: "0 0 600 600",
+            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("g", {
+                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("path", {
+                    className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
+                    stroke: "currentColor",
+                    fill: "none",
+                    strokeLinecap: "round",
+                    strokeMiterlimit: "10",
+                    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", {
+                            attributeName: "stroke-dashoffset",
+                            to: "0",
+                            from: "1600",
+                            dur: "4s",
+                            fill: "freeze",
+                            repeatCount: "indefinite",
+                            calcMode: "cubic",
+                            keyTimes: "0;0.375;0.5;0.875;1",
+                            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", {
+                            attributeName: "transform",
+                            type: "rotate",
+                            from: "0 300 300",
+                            to: "360 300 300",
+                            dur: "2s",
+                            fill: "freeze",
+                            repeatCount: "indefinite",
+                            calcMode: "cubic",
+                            keyTimes: "0;0.75;1",
+                            keySplines: "0 0.26 0 1",
+                            values: "0 300 300;360 300 300;360 300 300;"
+                        })
+                    ]
+                })
+            })
+        });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 600 600",
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("g", {
             style: {
-              transformOrigin: "center"
+                transformOrigin: "center"
             },
-            strokeMiterlimit: "10",
-            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",
-              {
-                attributeName: "stroke-dashoffset",
-                to: "0",
-                from: "1600",
-                dur: "4s",
-                fill: "freeze",
-                repeatCount: "indefinite",
-                calcMode: "cubic",
-                keyTimes: "0;0.375;0.5;0.875;1",
-                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",
-          {
-            attributeName: "transform",
-            type: "rotate",
-            from: "0",
-            to: "360",
-            dur: "2s",
-            fill: "freeze",
-            repeatCount: "indefinite",
-            calcMode: "cubic",
-            keyTimes: "0;0.75;1",
-            keySplines: "0 0.26 0 1",
-            values: "0;360;360;"
-          }
-        )
-      ]
-    }
-  ) });
+            transform: "translate(300 300) rotate(0)",
+            height: 176,
+            width: 176,
+            children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", {
+                    className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
+                    stroke: "currentColor",
+                    id: "motionPath",
+                    fill: "none",
+                    strokeLinecap: "round",
+                    height: 600,
+                    width: 600,
+                    style: {
+                        transformOrigin: "center"
+                    },
+                    strokeMiterlimit: "10",
+                    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", {
+                        attributeName: "stroke-dashoffset",
+                        to: "0",
+                        from: "1600",
+                        dur: "4s",
+                        fill: "freeze",
+                        repeatCount: "indefinite",
+                        calcMode: "cubic",
+                        keyTimes: "0;0.375;0.5;0.875;1",
+                        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", {
+                    attributeName: "transform",
+                    type: "rotate",
+                    from: "0",
+                    to: "360",
+                    dur: "2s",
+                    fill: "freeze",
+                    repeatCount: "indefinite",
+                    calcMode: "cubic",
+                    keyTimes: "0;0.75;1",
+                    keySplines: "0 0.26 0 1",
+                    values: "0;360;360;"
+                })
+            ]
+        })
+    });
 };
 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 = ({ visible }) => {
-  const [mounted, setMounted] = (0, import_react11.useState)(false);
-  (0, import_react11.useEffect)(() => setMounted(true), []);
-  if (!mounted) return null;
-  if (!visible) return null;
-  return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "animate-fade-in", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "fixed top-0 left-0 w-full h-screen flex items-center justify-center z-50 dark:bg-black/70 bg-white/60", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "h-44 w-44 overflow-visible", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AnimateLogo_default, {}) }) }) }),
-    typeof window !== "undefined" ? document.body : {},
-    "spinner"
-  );
+var OverlaySpinner = function(param) {
+    var visible = param.visible;
+    var _ref = _sliced_to_array((0, import_react11.useState)(false), 2), mounted = _ref[0], setMounted = _ref[1];
+    (0, import_react11.useEffect)(function() {
+        return setMounted(true);
+    }, []);
+    if (!mounted) return null;
+    if (!visible) return null;
+    return (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", {
+        className: "animate-fade-in",
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", {
+            className: "fixed top-0 left-0 w-full h-screen flex items-center justify-center z-50 dark:bg-black/70 bg-white/60",
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", {
+                className: "h-44 w-44 overflow-visible",
+                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AnimateLogo_default, {})
+            })
+        })
+    }), typeof window !== "undefined" ? document.body : {}, "spinner");
 };
 var OverlaySpinner_default = OverlaySpinner;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  AnimateLogo,
-  Backdrop,
-  BottomAlert,
-  Breakpoint,
-  Button,
-  Checkbox,
-  CircleProgress,
-  Container,
-  CourseProgress,
-  ErrorText,
-  Fade,
-  FunButton,
-  FunRoundButton,
-  IconInfo,
-  Modal,
-  NoResults,
-  NoticeBox,
-  Overlay,
-  OverlaySpinner,
-  PRIMARY_COLOR,
-  Pill,
-  ProgressBar,
-  ProgressBarSimple,
-  RadioOption,
-  RatingStars,
-  ScrollProgress,
-  Slider,
-  Spinner,
-  StepsComponent,
-  Tippy,
-  ToggleSwitch,
-  UserContentSwitcher,
-  baseFieldStyle,
-  createExerciseElementStyle,
-  exerciseDeleteButton,
-  exerciseEditButton,
-  headerButtonClass,
-  headerTippyClass,
-  tippyClassname,
-  toolbarExerciseButton,
-  xIconButton
+    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,
+    toolbarExerciseButton: toolbarExerciseButton,
+    xIconButton: xIconButton
 });