evelearn-theme 1.0.0

package/dist/index.js

@@ -0,0 +1,1549 @@
+"use strict";
+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 __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];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __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.tsx
+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,
+  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_COLOR2,
+  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,
+  balsamicSans: () => balsamicSans,
+  baseFieldStyle: () => baseFieldStyle,
+  createExerciseElementStyle: () => createExerciseElementStyle,
+  exerciseDeleteButton: () => exerciseDeleteButton,
+  exerciseEditButton: () => exerciseEditButton,
+  headerButtonClass: () => headerButtonClass,
+  headerTippyClass: () => headerTippyClass,
+  openSans: () => openSans,
+  parkinsans: () => parkinsans,
+  tippyClassname: () => tippyClassname,
+  toolbarExerciseButton: () => toolbarExerciseButton,
+  ubuntu: () => ubuntu,
+  xIconButton: () => xIconButton
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Backdrop/Backdrop.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Backdrop = ({ visible, onClick, opacity }) => {
+  if (!visible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        opacity: opacity ? opacity : 90,
+        zIndex: 21
+      },
+      className: `fixed top-0 left-0 w-full h-screen bg-gray-100 dark:bg-slate-900`,
+      onClick
+    }
+  );
+};
+var Backdrop_default = Backdrop;
+
+// src/Backdrop/Overlay.tsx
+var import_react = require("react");
+var import_react_dom = __toESM(require("react-dom"));
+
+// src/fonts/index.tsx
+var import_google = require("next/font/google");
+var openSans = (0, import_google.Open_Sans)({
+  preload: true,
+  display: "swap",
+  subsets: ["cyrillic", "cyrillic-ext", "greek", "greek-ext", "latin", "latin-ext", "vietnamese", "hebrew"],
+  variable: "--font-sans"
+});
+var ubuntu = (0, import_google.Ubuntu)({
+  preload: true,
+  weight: ["300", "400", "500", "700"],
+  display: "auto",
+  subsets: ["cyrillic", "cyrillic-ext", "greek", "greek-ext", "latin", "latin-ext"],
+  variable: "--font-fallback"
+});
+var parkinsans = (0, import_google.Parkinsans)({
+  preload: true,
+  weight: ["300", "400", "500", "700"],
+  display: "swap",
+  adjustFontFallback: false,
+  subsets: ["latin", "latin-ext"],
+  // fallback: ['--font-fallback'],
+  variable: "--font-header"
+});
+var balsamicSans = (0, import_google.Balsamiq_Sans)({
+  preload: false,
+  display: "swap",
+  weight: ["400", "700"],
+  subsets: ["cyrillic", "cyrillic-ext", "latin", "latin-ext"],
+  variable: "--font-fun"
+});
+
+// src/Backdrop/Overlay.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Overlay = ({ visible, onDismissed, onClick, zIndex, isDark, children, opacity, withContainer = true }) => {
+  const [modalRoot, setModalRoot] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    let root = document.getElementById("modal-root");
+    if (!root) {
+      root = document.createElement("div");
+      root.id = "modal-root";
+      document.body.appendChild(root);
+    }
+    setModalRoot(root);
+    return () => {
+      const root2 = document.getElementById("modal-root");
+      if (root2) {
+        document.body.removeChild(root2);
+      }
+    };
+  }, [visible]);
+  if (!visible || !modalRoot) return null;
+  return import_react_dom.default.createPortal(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "animate-fade-in", children: withContainer ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        onClick: onDismissed || onClick,
+        className: `top-0 left-0 fixed w-full h-screen flex items-center justify-center ${parkinsans.variable} ${ubuntu.variable} ${openSans.variable}`,
+        style: {
+          background: isDark ? `rgba(0, 0, 0, ${opacity || "0.7"})` : `rgba(255, 255, 255, ${opacity || "0.6"})`,
+          zIndex: zIndex || 9999
+        },
+        children
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `${ubuntu.variable} ${parkinsans.variable} ${openSans.variable}`, children }) }),
+    modalRoot
+  );
+};
+var Overlay_default = Overlay;
+
+// src/Breakpoint/Breakpoint.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Breakpoint = ({ children, fromSize, toSize }) => {
+  let className = "";
+  if (fromSize && toSize) {
+    className = `hidden ${fromSize}:block ${toSize}:hidden`;
+  } else if (fromSize) {
+    className = `hidden ${fromSize}:block`;
+  } else if (toSize) {
+    className = `block ${toSize}:hidden`;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children });
+};
+var Breakpoint_default = Breakpoint;
+
+// src/Spinners/Spinner.tsx
+var import_jsx_runtime4 = 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_runtime4.jsxs)("div", { className: "relative h-8 w-8 flex justify-center items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "svg",
+      {
+        className: `absolute top-0 ${dimensions} ${bgColor}`,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        strokeWidth: "2.4",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "svg",
+      {
+        className: spinnerClasses,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        strokeWidth: "2.4",
+        strokeLinecap: "round",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.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 SpinnerCentered = (props) => {
+  if (props.visible === false) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-full flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, __spreadValues({}, props)) });
+};
+Spinner.displayName = "Spinner";
+SpinnerCentered.displayName = "Spinner.Centered";
+Spinner.Centered = SpinnerCentered;
+var Spinner_default = Spinner;
+
+// src/Button/Button.tsx
+var import_jsx_runtime5 = 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-opacity-50" : "hover:bg-opacity-90"}`;
+      case "indigo":
+        return `bg-indigo-500 font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-opacity-50" : "hover:bg-opacity-90"}`;
+      case "green":
+        return `bg-green-500 font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-opacity-50" : "hover:bg-opacity-90"}`;
+      case "teal":
+        return `bg-teal-500 font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-opacity-50" : "hover:bg-opacity-90"}`;
+      case "secondary":
+        return "bg-secondary text-white font-header font-medium hover:bg-opacity-90 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-opacity-90 transition-opacity duration-75";
+      case "alert":
+        return "bg-amber-500 font-header text-white transition-all hover:bg-opacity-90 duration-75";
+      case "warning":
+        return "bg-red-500 font-header text-white font-medium hover:bg-opacity-90 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_runtime5.jsx)("button", { type: type || "button", disabled, className: `rounded-lg focus:outline-none transition duration-100 ${styled()} ${sized()}`, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-full max-h-11", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex w-full justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spinner_default, { white: true }) }) : children }) });
+};
+var Button_default = Button;
+
+// src/Button/FunButton.tsx
+var import_react2 = require("react");
+var import_colors = __toESM(require("tailwindcss/dist/colors"));
+var import_framer_motion = require("framer-motion");
+var import_jsx_runtime6 = 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: import_colors.default.sky["600"] };
+      case "red":
+        return { bottom: "#f00f0f", front: import_colors.default.red["700"] };
+      case "green":
+        return { bottom: import_colors.default.green["500"], front: import_colors.default.green["600"] };
+      case "purple":
+        return { bottom: import_colors.default.indigo["500"], front: import_colors.default.indigo["600"] };
+      case "teal":
+        return { bottom: import_colors.default.teal["500"], front: import_colors.default.teal["600"] };
+      case "cyan":
+        return { bottom: import_colors.default.cyan["500"], front: import_colors.default.cyan["600"] };
+      case "yellow":
+        return { bottom: import_colors.default.yellow["500"], front: import_colors.default.yellow["600"] };
+      default:
+        return { bottom: "#00b4d8", front: import_colors.default.sky["700"] };
+    }
+  }, [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-opacity-90";
+      case "big":
+        return "relative block px-12 py-4 rounded-lg text-lg text-white font-medium font-header hover:bg-opacity-90";
+      case "small":
+        return "relative block px-6 py-1 rounded-lg text-lg text-white font-medium font-header hover:bg-opacity-90";
+      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-opacity-90";
+      default:
+        return "relative block px-8 py-3 rounded-lg text-lg text-white font-medium font-header hover:bg-opacity-90";
+    }
+  }, [size]);
+  const computedClassName = (0, import_react2.useMemo)(() => {
+    const cName = className + " rounded-lg border-none p-0 cursor-pointer opacity-90 hover:bg-opacity-90 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-opacity-70" : "");
+  }, [classStyle, disabled]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.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_runtime6.jsx)("div", { className: size === "small" ? "min-h-6" : "min-h-10", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Spinner_default.Centered, { visible: true, size: size === "small" ? "small" : "base", white: true }) }) : children
+        }
+      )
+    }
+  );
+};
+var FunButton_default = FunButton;
+
+// src/Button/FunRoundButton.tsx
+var import_react3 = require("react");
+var import_colors2 = __toESM(require("tailwindcss/dist/colors"));
+var import_framer_motion2 = require("framer-motion");
+var import_jsx_runtime7 = 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: import_colors2.default.sky["600"] };
+      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 ? import_colors2.default.green["300"] : import_colors2.default.green["500"], front: disabled ? import_colors2.default.green["400"] : import_colors2.default.green["600"] };
+      case "purple":
+        return { bottom: disabled ? import_colors2.default.indigo["300"] : import_colors2.default.indigo["500"], front: disabled ? import_colors2.default.indigo["400"] : import_colors2.default.indigo["600"] };
+      case "teal":
+        return { bottom: disabled ? import_colors2.default.teal["300"] : import_colors2.default.teal["500"], front: disabled ? import_colors2.default.teal["400"] : import_colors2.default.teal["600"] };
+      case "yellow":
+        return { bottom: disabled ? import_colors2.default.yellow["300"] : import_colors2.default.yellow["500"], front: disabled ? import_colors2.default.yellow["400"] : import_colors2.default.yellow["600"] };
+      default:
+        return { bottom: disabled ? import_colors2.default.gray["300"] : "#00b4d8", front: disabled ? import_colors2.default.sky["400"] : import_colors2.default.sky["700"] };
+    }
+  }, [color, disabled]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.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
+        }
+      )
+    }
+  );
+};
+var FunRoundButton_default = FunRoundButton;
+
+// src/Checkbox/Checkbox.tsx
+var import_react4 = require("react");
+var import_formik = require("formik");
+
+// src/Common/ErrorText.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ErrorText = ({ text, style, classNames }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: classNames ? classNames : "text-red-500 font-semibold text-wrap py-auto", style, children: text });
+};
+var ErrorText_default = ErrorText;
+
+// src/Checkbox/Checkbox.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var 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_runtime9.jsxs)("div", { className: "relative flex flex-col justify-center items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "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_runtime9.jsx)("label", { htmlFor: `${name}${rand}`, className: "ml-2 block text-sm text-gray-800 dark:text-gray-200", children: labelText }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { htmlFor: `${name}${rand}`, children: labelText })
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)("div", { className: "flex flex-col justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "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"}`
+    }
+  ) }) });
+};
+Checkbox.Multi = MultiChoiceCheckBox;
+var Checkbox_default = Checkbox;
+
+// src/Checkbox/RadioOption.tsx
+var import_formik2 = require("formik");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var RadioOption = ({ name, isLarge, labelText, option, onSelect }) => {
+  const [{ value }, {}, { setValue }] = (0, import_formik2.useField)(name);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "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_runtime10.jsx)("label", { htmlFor: option, className: "ml-2 block text-sm text-gray-900", children: labelText }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: option, children: labelText })
+  ] });
+};
+var RadioOption_default = RadioOption;
+
+// src/Common/BottomAlert.tsx
+var import_colors3 = __toESM(require("tailwindcss/dist/colors"));
+var import_react_dom2 = __toESM(require("react-dom"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var BottomAlert = ({ isDark, setDontShowAgain, dontShowAgain, title, borderColor, onDismissed, cancelText, confirmText, onConfirm, onCancel, isSingleAction, children, buttonColor }) => {
+  const dismiss = () => {
+    onDismissed == null ? void 0 : onDismissed();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "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_runtime11.jsx)("div", { className: "absolute top-0 w-full h-screen flex justify-center bg-gray-200 dark:bg-slate-800 dark:bg-opacity-50 bg-opacity-80", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute sm:w-1/2 w-full mx-auto shadow-xl rounded-md p-6 flex z-50 flex-col top-24 bg-white dark:bg-slate-900 overflow-clip rounded-bl-lg rounded-br-lg border-b-8 border-b-blue-500", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { borderColor: borderColor || import_colors3.default.sky["500"] }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "font-semibold font-header text-gray-700 dark:text-gray-300 text-xl", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mt-2 text-lg", children }),
+        setDontShowAgain ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center space-x-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "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_runtime11.jsx)("label", { htmlFor: "show_again_check", className: "dark:text-gray-200 text-gray-700", children: "Don't show again" })
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mt-4 flex items-center justify-end space-x-4 z-10", children: isSingleAction ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          Button_default,
+          {
+            type: "button",
+            kind: buttonColor,
+            onClick: () => {
+              onConfirm(true);
+              dismiss();
+            },
+            children: confirmText || "Okay"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "w-1/3 flex justify-end space-x-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-full flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            Button_default,
+            {
+              type: "button",
+              kind: "secondary",
+              onClick: () => {
+                onCancel == null ? void 0 : onCancel();
+                dismiss();
+              },
+              children: cancelText || "Cancel"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-full flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            Button_default,
+            {
+              type: "button",
+              kind: buttonColor,
+              onClick: () => {
+                onConfirm(true);
+                dismiss();
+              },
+              children: confirmText || "Confirm"
+            }
+          ) })
+        ] }) })
+      ] }) }) })
+    }
+  );
+};
+var BAWrapper = (props) => {
+  if (!props.isVisible) return null;
+  return import_react_dom2.default.createPortal(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BottomAlert, __spreadValues({}, props)),
+    document.body
+  );
+};
+var BottomAlert_default = BAWrapper;
+
+// src/Common/Container.tsx
+var import_react5 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Container = ({ backgroundColor, backgroundImage, style, children, onClick }) => {
+  (0, import_react5.useEffect)(() => {
+    if (backgroundColor) {
+      document.body.style.background = backgroundColor;
+    } else {
+      document.body.style.background = "";
+    }
+    return () => {
+      document.body.style.background = "";
+    };
+  }, [backgroundColor]);
+  return backgroundImage ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "div",
+    {
+      style: __spreadValues({
+        backgroundImage,
+        backgroundSize: "cover"
+      }, style),
+      className: "w-full md:min-h-screen dark:bg-slate-950 mx-auto overflow-y-auto overflow-x-clip px-0 md:px-2 sm:py-4 py-1 relative",
+      onClick,
+      children: children ? children : null
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "div",
+    {
+      className: `w-full dark:bg-slate-950 mx-auto overflow-y-auto overflow-x-clip px-0 sm:px-16 relative pt-20`,
+      onClick,
+      style: style || { minHeight: "100vh" },
+      children: children ? children : null
+    }
+  );
+};
+var Container_default = Container;
+
+// src/Common/fieldStyle.ts
+var baseFieldStyle = "font-sans form-input h-11 w-full bg-white border-gray-200 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-200 text-gray-700 dark:placeholder-gray-400 placeholder-gray-400 rounded-md  px-2 py-1 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50";
+var createExerciseElementStyle = "flex flex-col justify-between space-y-2 w-full p-4 bg-white dark:bg-slate-800 rounded-xl text-gray-800 dark:text-gray-200 border-2 border-slate-200 dark:border-slate-400 overflow-hidden transition-all";
+var exerciseDeleteButton = "w-6 h-6 flex justify-center text-gray-700 dark:text-gray-200 hover:text-red-600 dark:hover:text-red-500 transition-all duration-150 hover:scale-125";
+var xIconButton = "w-6 h-6 flex justify-center text-gray-700 dark:text-gray-200 hover:text-gray-950 dark:hover:text-gray-100 transition-all duration-150 hover:scale-125";
+var exerciseEditButton = "w-6 h-6 flex justify-center text-gray-700 dark:text-gray-200 hover:text-red-600 dark:hover:text-green-500 transition-all duration-150 hover:scale-125";
+var tippyClassname = "p-2 bg-slate-600 dark:bg-slate-900 opacity-90 text-white font-medium font-header rounded-lg";
+var headerTippyClass = "rounded-lg p-2 bg-slate-950 opacity-95 text-white font-medium";
+var headerButtonClass = "w-10 h-10 rounded-full dark:hover:bg-slate-600 hover:bg-slate-200 bg-transparent flex justify-center items-center flex justify-center items-center text-slate-600 dark:text-slate-100 hover:text-primary dark:hover:text-primary transition-colors duration-50";
+var toolbarExerciseButton = "flex bg-gray-50 bg-opacity-95 items-center sm:justify-between p-4 shadow-sm w-full rounded-xl border-4 border-transparent hover:border-white text-gray-700 hover:text-white hover:bg-indigo-500 transition-colors duration-75";
+
+// src/Common/Tippy.tsx
+var import_react6 = require("react");
+var import_react7 = require("@floating-ui/react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Tippy = ({ children, content, placement = "top", className = "", wrapperClassname = "", disabled = false, arrow: useArrow = false, visible }) => {
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
+  const arrowRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
+    if (visible) {
+      setIsOpen(true);
+    }
+  }, [visible]);
+  const {
+    x,
+    y,
+    strategy,
+    refs,
+    context
+  } = (0, import_react7.useFloating)({
+    placement,
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [
+      (0, import_react7.offset)(8),
+      (0, import_react7.flip)(),
+      (0, import_react7.shift)(),
+      (0, import_react7.arrow)({ element: arrowRef })
+    ]
+  });
+  const hover = (0, import_react7.useHover)(context, {
+    enabled: !disabled
+  });
+  const dismiss = (0, import_react7.useDismiss)(context);
+  const role = (0, import_react7.useRole)(context);
+  const { getReferenceProps, getFloatingProps } = (0, import_react7.useInteractions)([
+    hover,
+    dismiss,
+    role
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react7.FloatingPortal, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)(
+        import_react7.FloatingArrow,
+        {
+          ref: arrowRef,
+          context,
+          className: "fill-gray-900",
+          tipRadius: 2
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", __spreadProps(__spreadValues({ ref: refs.setReference }, getReferenceProps()), { className: wrapperClassname, children }))
+  ] });
+};
+var Tippy_default = Tippy;
+
+// src/Common/IconInfo.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var IconInfo = ({ content, icon, number, color }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-shrink-0 items-center justify-center w-8 h-8 rounded-full bg-slate-400 dark:bg-slate-600 dark:border dark:border-white", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    Tippy_default,
+    {
+      className: tippyClassname,
+      content,
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative", children: [
+        icon,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: `absolute -bottom-1 ${number > 9 ? number > 99 ? number > 999 ? "w-8 h-8 -right-6 -bottom-3" : "w-6 h-6 -right-5 -bottom-2" : "w-5 h-5 -right-3" : "w-4 -right-3"} flex justify-center items-center text-xs font-sans rounded-full text-white ${color || "bg-secondary"}`, children: number })
+      ] })
+    }
+  ) });
+};
+var IconInfo_default = IconInfo;
+
+// src/Common/Modal.tsx
+var import_link = __toESM(require("next/link"));
+
+// src/Icons/XIcon.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var XIcon = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) });
+};
+var XIcon_default = XIcon;
+
+// src/Common/Modal.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Modal = (_a) => {
+  var _b = _a, { visible, children, fullscreen, displayDark, dismissLink, bgOpacity, onDismissed, dismissable = true, dismissOnBackdropClick = true, style } = _b, props = __objRest(_b, ["visible", "children", "fullscreen", "displayDark", "dismissLink", "bgOpacity", "onDismissed", "dismissable", "dismissOnBackdropClick", "style"]);
+  if (!visible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Overlay_default, __spreadProps(__spreadValues({ visible, onClick: dismissOnBackdropClick ? onDismissed : void 0, isDark: displayDark, withContainer: true }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    {
+      className: `${displayDark && "dark"} bg-slate-900/20 fixed inset-0 flex items-center justify-center`,
+      style: { zIndex: 1e4 },
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: ["relative mx-1 w-full md:mx-auto md:w-3/4 lg:w-1/2", fullscreen && `md:w-5/6 lg:w-5/6`].join(" "), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: dismissLink ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_link.default,
+          {
+            href: dismissLink,
+            scroll: false,
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { onClick: onDismissed, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(XIcon_default, { className: "absolute h-5 w-5 top-5 sm:top-20 right-4 transition-colors cursor-pointer duration-75 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-500" }) })
+          }
+        ) : dismissable ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "button",
+          {
+            className: "absolute top-5 sm:top-20 right-4 transition-colors cursor-pointer duration-75 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-500",
+            type: "button",
+            onClick: onDismissed,
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              XIcon_default,
+              {
+                className: "h-5 w-5"
+              }
+            )
+          }
+        ) : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            className: "my-1 sm:mt-16 bg-white dark:bg-slate-900 shadow-lg border border-gray-100 dark:border-none rounded-xl overflow-x-visible overflow-y-visible no-scrollbar",
+            onClick: (e) => e.stopPropagation(),
+            style: __spreadValues({ maxHeight: "calc(100vh - 6rem)" }, style),
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "p-4 sm:p-10", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mt-8 sm:mt-0", children }) })
+          }
+        )
+      ] })
+    }
+  ) }));
+};
+var Modal_default = Modal;
+
+// src/Common/NoResults.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var HEIGHT = 160;
+var WIDTH = HEIGHT * (16 / 9);
+var NoResults = ({ loading, message }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative w-full flex justify-center items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex justify-start w-full space-x-2 py-3 p-4 bg-slate-100 dark:bg-slate-800 rounded-md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { width: `calc(${WIDTH}px + 1rem)`, height: 320 }, className: "rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition-shadow duration-150 px-2 pt-2 bg-slate-200 dark:bg-slate-700 animate-pulse" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { width: `calc(${WIDTH}px + 1rem)`, height: 320 }, className: "rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition-shadow duration-150 px-2 pt-2 bg-slate-200 dark:bg-slate-700 animate-pulse" })
+    ] }),
+    !loading && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "absolute w-full h-full flex justify-center items-center m-auto", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "p-4 rounded-lg bg-white dark:bg-slate-700 shadow-xl", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "font-semibold text-lg text-gray-700 dark:text-gray-300", children: message || "No results" }) }) })
+  ] });
+};
+var NoResults_default = NoResults;
+
+// src/Common/NoticeBox.tsx
+var import_react8 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var NoticeBox = ({ children, type, isDismissible, isVisible, onDismiss }) => {
+  const [visible, setVisible] = (0, import_react8.useState)(true);
+  const styles = (0, import_react8.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_react8.useEffect)(() => {
+    setVisible(isVisible);
+  }, [isVisible]);
+  if (!isVisible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "div",
+    {
+      style: {
+        zIndex: 100
+      },
+      className: styles,
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", children: [
+        isDismissible && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "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_runtime18.jsx)(XIcon_default, { className: "h-5 w-5" })
+          }
+        ),
+        children
+      ] })
+    }
+  );
+};
+var NoticeBox_default = NoticeBox;
+
+// src/Common/Pill.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Pill = ({ text }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "rounded-full px-3 py-1 text-sm font-header font-medium bg-white dark:bg-slate-900 text-gray-700 dark:text-gray-300 mr-2 mb-2", children: text });
+};
+var Pill_default = Pill;
+
+// src/Icons/StarIcon.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var StarIcon = ({ className, percentage, color }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("linearGradient", { id: "grad", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("stop", { offset: `${(percentage || 0.5) * 100}%`, "stop-color": color ? color : "#4b5563" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("stop", { offset: `${100 - (percentage || 0.5) * 100}%`, "stop-color": "white" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { fill: "url(#grad)", d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
+  ] });
+};
+var StarIcon_default = StarIcon;
+
+// src/Icons/StarIconSolid.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var StartIconSolid = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
+};
+var StarIconSolid_default = StartIconSolid;
+
+// src/Common/RatingStars.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var RatingStars = ({ avgRating, large }) => {
+  const icons = [1, 2, 3, 4, 5].map((el) => {
+    if (avgRating === 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StarIconSolid_default, { className: `${large ? "h-5 w-5" : "h-3 w-3"} text-gray-200 dark:text-gray-400` }, `rating_star_${el}`);
+    }
+    if (Number.isInteger(avgRating)) {
+      if (el <= avgRating) {
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StarIconSolid_default, { className: `${large ? "h-5 w-5" : "h-3 w-3"} text-blue-500` }, `rating_star_${el}`);
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StarIconSolid_default, { className: `${large ? "h-5 w-5" : "h-3 w-3"} text-gray-200 dark:text-gray-400` }, `rating_star_${el}`);
+    }
+    const whole = Math.floor(avgRating);
+    if (el <= whole) {
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StarIconSolid_default, { className: `${large ? "h-5 w-5" : "h-3 w-3"} text-blue-500` }, `rating_star_${el}`);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StarIcon_default, { percentage: avgRating - whole, color: "#00b4d8", className: `${large ? "h-5 w-5" : "h-3 w-3"}` }, `rating_star_${el}`);
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    Tippy_default,
+    {
+      content: avgRating === 0 ? "No ratings" : "Average Rating " + avgRating,
+      className: "bg-gray-800 opacity-90 text-white rounded-md px-2 py-1 cursor-pointer h-fit",
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center space-x-0 justify-start", children: icons })
+    }
+  );
+};
+var RatingStars_default = RatingStars;
+
+// src/Common/Slider.tsx
+var import_react9 = require("react");
+var import_use_debounce = require("use-debounce");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Slider = ({ min, max, step, value, onChange }) => {
+  const handleChange = (event) => {
+    onChange(parseFloat(event.target.value));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "input",
+    {
+      type: "range",
+      min,
+      max,
+      step,
+      value,
+      onChange: handleChange,
+      className: `w-full h-2 rounded-lg range-input`
+    }
+  );
+};
+var DebouncedSlider = ({ min, max, handleUpdate, initialValue }) => {
+  const [value, setValue] = (0, import_react9.useState)(initialValue);
+  const debouncedUpdate = (0, import_use_debounce.useDebouncedCallback)((v) => {
+    handleUpdate(v);
+  }, 120, { trailing: true, leading: false });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    Slider,
+    {
+      min,
+      max,
+      step: 1,
+      value,
+      onChange: (v) => {
+        setValue(v);
+        debouncedUpdate(v);
+      }
+    }
+  );
+};
+Slider.Debounced = DebouncedSlider;
+var Slider_default = Slider;
+
+// src/Common/StepsComponent.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var StepsComponent = ({ steps, activeStep, onStepPress }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex justify-between items-center w-full p-1 mb-2", children: steps.map((step, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex justify-center items-center space-x-2 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => onStepPress(index),
+        className: `flex items-center space-x-2 px-4 py-2 rounded-lg min-w-10 md:min-w-20 sm:min-w-40 font-header transition-all duration-150
+                                        ${activeStep === index ? "bg-primary text-white shadow-lg scale-110 border-2 border-primary" : "bg-gray-100 dark:bg-slate-800 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-slate-700 border-2 border-transparent hover:border-primary/30"}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "font-medium truncate", children: [
+          index + 1,
+          ".   ",
+          step.label
+        ] })
+      }
+    ) }) }, `step_${index}_${step.label}`);
+  }) });
+};
+var StepsComponent_default = StepsComponent;
+
+// src/Common/ToggleSwitch.tsx
+var import_formik3 = require("formik");
+var import_framer_motion3 = require("framer-motion");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Formik = ({ label, name }) => {
+  const [{ value }, , { setValue }] = (0, import_formik3.useField)(name);
+  const handleChange = (e) => {
+    setValue(e.target.checked);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          className: "opacity-0 absolute",
+          checked: value,
+          onChange: handleChange
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `w-10 h-6 rounded-full p-[4px] transition-colors duration-300 ${value ? "bg-[#00b4d8]" : "bg-[#64748b]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        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_runtime25.jsx)("span", { className: "text-sm font-medium text-gray-800 dark:text-gray-200", children: label })
+  ] });
+};
+var ToggleSwitch = ({ label, onChange, value }) => {
+  const handleChange = (e) => {
+    onChange(e.target.checked);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          className: "opacity-0 absolute",
+          checked: value,
+          onChange: handleChange
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `w-10 h-6 rounded-full p-[4px] transition-colors duration-300 ${value ? "bg-[#00b4d8]" : "bg-[#64748b]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        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_runtime25.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_runtime26 = require("react/jsx-runtime");
+var PlusCircleIcon = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" }) });
+};
+var PlusCircleIcon_default = PlusCircleIcon;
+
+// src/Icons/ArrowCircleRight.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var StartIconSolid2 = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className || "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" }) });
+};
+var ArrowCircleRight_default = StartIconSolid2;
+
+// src/Common/UserContentSwitcher.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var UserContentSwitcher = ({ icon1: Icon1, icon2: Icon2, setGalleryMode, galleryMode, title1, title2 }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative flex flex-row items-center my-2 bg-slate-100 dark:bg-slate-900 w-full h-14 rounded-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      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_runtime28.jsxs)(
+      "button",
+      {
+        onClick: () => setGalleryMode(title1.toLowerCase()),
+        className: "py-2 flex flex-row w-1/2 justify-center items-center gap-1 z-10",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            "span",
+            {
+              className: `truncate ${galleryMode === title1.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"}`,
+              children: title1.toLocaleUpperCase()
+            }
+          ),
+          Icon1 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            Icon1,
+            {
+              className: `h-5 w-5 ${galleryMode === title1.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"}`
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            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_runtime28.jsxs)(
+      "button",
+      {
+        onClick: () => setGalleryMode(title2.toLowerCase()),
+        className: "py-2 flex flex-row w-1/2 justify-center items-center gap-1 z-10",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            "span",
+            {
+              className: `truncate ${galleryMode === title2.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"}`,
+              children: title2.toLocaleUpperCase()
+            }
+          ),
+          Icon2 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            Icon2,
+            {
+              className: `h-5 w-5 ${galleryMode === title2.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"}`
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            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"}`
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+var UserContentSwitcher_default = UserContentSwitcher;
+
+// src/Fade/Fade.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Fade = ({ children, inProp }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "animate-fade-in", children });
+};
+var Fade_default = Fade;
+
+// src/ProgressBar/ProgressBarSimple.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var ProgressBarSimple = ({ progress, color, height = 10, backgroundColor = "#ccc" }) => {
+  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_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}`);
+  }) });
+};
+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_default = CircleProgress;
+
+// src/ProgressBar/ScrollProgress.tsx
+var import_react10 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var PRIMARY_COLOR = "#00b4d8";
+var ScrollProgress = () => {
+  const [scrollPercentage, setScrollPercentage] = (0, import_react10.useState)(0);
+  (0, import_react10.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_runtime33.jsx)(
+    "div",
+    {
+      style: {
+        height: "4px",
+        borderRadius: 2,
+        width: "100%",
+        // backgroundColor: '#d1dced',
+        position: "fixed",
+        top: "62px",
+        left: "0px",
+        right: "0px"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "div",
+        {
+          style: {
+            height: "100%",
+            backgroundColor: PRIMARY_COLOR,
+            borderRadius: 2,
+            width: `${scrollPercentage}%`
+          }
+        }
+      )
+    }
+  );
+};
+var ScrollProgress_default = ScrollProgress;
+
+// src/Icons/AnimateLogo.tsx
+var import_react11 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var AnimateLogo = () => {
+  const [isFirefox, setIsFirefox] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
+    const userAgent = window.navigator.userAgent;
+    setIsFirefox(userAgent.indexOf("Firefox") > -1);
+  }, []);
+  if (isFirefox) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "animate-pulse", viewBox: "0 0 600 600", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.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_runtime34.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_runtime34.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    "g",
+    {
+      style: {
+        transformOrigin: "center"
+      },
+      transform: "translate(300 300) rotate(0)",
+      height: 176,
+      width: 176,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.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_runtime34.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_react12 = require("react");
+var import_react_dom3 = require("react-dom");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var OverlaySpinner = ({ visible }) => {
+  const [mounted, setMounted] = (0, import_react12.useState)(false);
+  (0, import_react12.useEffect)(() => setMounted(true), []);
+  if (!mounted) return null;
+  if (!visible) return null;
+  return (0, import_react_dom3.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "animate-fade-in", children: /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime35.jsx)("div", { className: "h-44 w-44 overflow-visible", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AnimateLogo_default, {}) }) }) }),
+    typeof window !== "undefined" ? document.body : {},
+    "spinner"
+  );
+};
+var OverlaySpinner_default = OverlaySpinner;
+
+// src/constants.tsx
+var PRIMARY_COLOR2 = "#00b4d8";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnimateLogo,
+  Backdrop,
+  BottomAlert,
+  Breakpoint,
+  Button,
+  Checkbox,
+  CircleProgress,
+  Container,
+  ErrorText,
+  Fade,
+  FunButton,
+  FunRoundButton,
+  IconInfo,
+  Modal,
+  NoResults,
+  NoticeBox,
+  Overlay,
+  OverlaySpinner,
+  PRIMARY_COLOR,
+  Pill,
+  ProgressBar,
+  ProgressBarSimple,
+  RadioOption,
+  RatingStars,
+  ScrollProgress,
+  Slider,
+  Spinner,
+  StepsComponent,
+  Tippy,
+  ToggleSwitch,
+  UserContentSwitcher,
+  balsamicSans,
+  baseFieldStyle,
+  createExerciseElementStyle,
+  exerciseDeleteButton,
+  exerciseEditButton,
+  headerButtonClass,
+  headerTippyClass,
+  openSans,
+  parkinsans,
+  tippyClassname,
+  toolbarExerciseButton,
+  ubuntu,
+  xIconButton
+});