evelearn-theme 2.0.10 → 2.0.12

package/dist/index.js

@@ -548,6 +548,7 @@ var Overlay = function(param) {
         if (!root) {
             root = document.createElement("div");
             root.id = "modal-root";
+            root.classList.add(document.documentElement.classList.contains("dark") ? "dark" : "light");
             document.body.appendChild(root);
         }
         setModalRoot(root);
@@ -576,6 +577,7 @@ var Overlay = function(param) {
 };
 var Overlay_default = Overlay;
 // src/Button/Button.tsx
+var import_clsx = __toESM(require("clsx"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Button = function(param) {
     var _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;
@@ -618,7 +620,7 @@ var Button = function(param) {
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", {
         type: type || "button",
         disabled: disabled,
-        className: "rounded-lg cursor-pointer focus:outline-none transition duration-100 ".concat(styled(), " ").concat(sized()),
+        className: (0, import_clsx.default)("rounded-lg cursor-pointer focus:outline-none transition duration-100", styled(), sized()),
         onClick: onClick,
         children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {
             className: "w-full max-h-11",
@@ -763,6 +765,7 @@ var FunButton_default = FunButton;
 // src/Button/FunRoundButton.tsx
 var import_react3 = require("react");
 var import_framer_motion2 = require("framer-motion");
+var import_clsx2 = __toESM(require("clsx"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var FunRoundButton = function(param) {
     var 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;
@@ -809,7 +812,7 @@ var FunRoundButton = function(param) {
         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"),
+        className: (0, import_clsx2.default)(className || "border-none p-0 flex justify-center items-center cursor-pointer z-10", disabled ? "opacity-70 cursor-default" : "hover:opacity-95"),
         style: {
             background: front,
             height: size,
@@ -858,6 +861,7 @@ var FunRoundButton_default = FunRoundButton;
 // src/Checkbox/Checkbox.tsx
 var import_react4 = require("react");
 var import_formik = require("formik");
+var import_clsx3 = __toESM(require("clsx"));
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var Checkbox = function(param) {
     var name = param.name, labelText = param.labelText, isLarge = param.isLarge, onChange = param.onChange, isDisabled = param.isDisabled;
@@ -886,7 +890,7 @@ var Checkbox = function(param) {
                         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")
+                        className: (0, import_clsx3.default)("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
                     }),
                     typeof labelText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", {
                         htmlFor: "".concat(name).concat(rand),
@@ -936,7 +940,7 @@ var MultiChoiceCheckBox = function(param) {
                 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")
+                className: (0, import_clsx3.default)("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
             })
         })
     });
@@ -944,6 +948,7 @@ var MultiChoiceCheckBox = function(param) {
 Checkbox.Multi = MultiChoiceCheckBox;
 var Checkbox_default = Checkbox;
 // src/Checkbox/RadioOption.tsx
+var import_clsx4 = __toESM(require("clsx"));
 var import_formik2 = require("formik");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var RadioOption = function(param) {
@@ -962,7 +967,7 @@ var RadioOption = function(param) {
                 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")
+                className: (0, import_clsx4.default)("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
             }),
             typeof labelText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", {
                 htmlFor: option,
@@ -1079,9 +1084,12 @@ var BAWrapper = function(props) {
     return import_react_dom2.default.createPortal(/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BottomAlert, _object_spread({}, props)), document.body);
 };
 var BottomAlert_default = BAWrapper;
+// src/Common/IconInfo.tsx
+var import_clsx6 = __toESM(require("clsx"));
 // src/Common/Tippy.tsx
 var import_react5 = require("react");
 var import_react6 = require("@floating-ui/react");
+var import_clsx5 = __toESM(require("clsx"));
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var Tippy = function(param) {
     var 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;
@@ -1123,12 +1131,13 @@ var Tippy = function(param) {
                 children: [
                     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", _object_spread_props(_object_spread({
                         ref: refs.setFloating,
-                        className: "z-[9999] ".concat(className || tippyClassname)
+                        className: (0, import_clsx5.default)("".concat(className || tippyClassname))
                     }, getFloatingProps()), {
                         style: {
                             position: strategy,
                             top: y !== null && y !== void 0 ? y : 0,
                             left: x !== null && x !== void 0 ? x : 0,
+                            zIndex: 9999,
                             width: "max-content"
                         },
                         children: content
@@ -1165,7 +1174,7 @@ var IconInfo = function(param) {
                 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"),
+                        className: (0, import_clsx6.default)("absolute -bottom-1", number > 9 ? number > 99 ? number > 999 ? "w-8 h-8 -right-6 -bottom-3" : "w-6 h-6 -right-5 -bottom-2" : "w-5 h-5 -right-3" : "w-4 -right-3", "flex justify-center items-center text-xs font-sans rounded-full text-white", color || "bg-secondary"),
                         children: number
                     })
                 ]
@@ -1194,6 +1203,7 @@ var XIcon = function(param) {
 };
 var XIcon_default = XIcon;
 // src/Common/Modal.tsx
+var import_clsx7 = __toESM(require("clsx"));
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var Modal = function(_param) {
     var 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, [
@@ -1216,15 +1226,12 @@ var Modal = function(_param) {
         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"),
+            className: (0, import_clsx7.default)(displayDark && "dark", "bg-slate-900/20 fixed inset-0 flex items-center justify-center"),
             style: {
                 zIndex: 1e4
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", {
-                className: [
-                    "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(" "),
+                className: (0, import_clsx7.default)("relative mx-1 w-full md:mx-auto md:w-3/4 lg:w-1/2", fullscreen && "md:w-5/6 lg:w-5/6"),
                 children: [
                     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {
                         children: dismissLink ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_link.default, {
@@ -1233,11 +1240,11 @@ var Modal = function(_param) {
                             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"
+                                    className: "absolute h-5 w-5 top-7 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",
+                            className: "absolute top-7 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, {
@@ -1463,6 +1470,7 @@ var Slider_default = Slider;
 // src/Common/ToggleSwitch.tsx
 var import_formik3 = require("formik");
 var import_framer_motion3 = require("framer-motion");
+var import_clsx8 = __toESM(require("clsx"));
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var Formik = function(param) {
     var label = param.label, name = param.name;
@@ -1483,7 +1491,7 @@ var Formik = function(param) {
                         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]"),
+                        className: (0, import_clsx8.default)("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-[#00b4d8]" : "bg-[#64748b]"),
                         children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_framer_motion3.motion.div, {
                             className: "w-4 h-4 bg-white rounded-full absolute top-1",
                             initial: false,
@@ -1524,7 +1532,7 @@ var ToggleSwitch = function(param) {
                         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]"),
+                        className: (0, import_clsx8.default)("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-[#00b4d8]" : "bg-[#64748b]"),
                         children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_framer_motion3.motion.div, {
                             className: "w-4 h-4 bg-white rounded-full absolute top-1",
                             initial: false,
@@ -1590,6 +1598,7 @@ var StartIconSolid2 = function(param) {
 };
 var ArrowCircleRight_default = StartIconSolid2;
 // src/Common/UserContentSwitcher.tsx
+var import_clsx9 = __toESM(require("clsx"));
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var UserContentSwitcher = function(param) {
     var Icon1 = param.icon1, Icon2 = param.icon2, setGalleryMode = param.setGalleryMode, galleryMode = param.galleryMode, title1 = param.title1, title2 = param.title2;
@@ -1614,13 +1623,22 @@ var UserContentSwitcher = function(param) {
                 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"),
+                        className: (0, import_clsx9.default)("truncate", {
+                            "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
+                            "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
+                        }),
                         children: title1.toLocaleUpperCase()
                     }),
                     Icon1 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon1, {
-                        className: "h-5 w-5 ".concat(galleryMode === title1.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90")
+                        className: (0, import_clsx9.default)("h-5 w-5", {
+                            "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
+                            "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
+                        })
                     }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PlusCircleIcon_default, {
-                        className: "h-5 w-5 ".concat(galleryMode === title1.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90")
+                        className: (0, import_clsx9.default)("h-5 w-5", {
+                            "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
+                            "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
+                        })
                     })
                 ]
             }),
@@ -1631,13 +1649,22 @@ var UserContentSwitcher = function(param) {
                 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"),
+                        className: (0, import_clsx9.default)("truncate", {
+                            "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
+                            "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
+                        }),
                         children: title2.toLocaleUpperCase()
                     }),
                     Icon2 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon2, {
-                        className: "h-5 w-5 ".concat(galleryMode === title2.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90")
+                        className: (0, import_clsx9.default)("h-5 w-5", {
+                            "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
+                            "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
+                        })
                     }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ArrowCircleRight_default, {
-                        className: "h-5 w-5 ".concat(galleryMode === title2.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90")
+                        className: (0, import_clsx9.default)("h-5 w-5", {
+                            "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
+                            "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
+                        })
                     })
                 ]
             })
@@ -1672,6 +1699,7 @@ var ProgressBarSimple = function(param) {
 };
 var ProgressBarSimple_default = ProgressBarSimple;
 // src/ProgressBar/ProgressBar.tsx
+var import_clsx10 = __toESM(require("clsx"));
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var ProgressBar = function(param) {
     var progress = param.progress;
@@ -1681,7 +1709,7 @@ var ProgressBar = function(param) {
             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"),
+                    className: (0, import_clsx10.default)("rounded-full h-2", progress === 100 ? "bg-green-400" : "bg-gray-100"),
                     style: {
                         width: "".concat(progress, "%"),
                         minWidth: "100%",
@@ -1710,7 +1738,7 @@ var ProgressStepBar = function(param) {
                             },
                             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"),
+                                className: (0, import_clsx10.default)("cursor-pointer rounded-full h-2", stepIndex >= i ? "bg-green-400" : "bg-gray-100"),
                                 style: {
                                     width: "".concat(stepIndex >= i ? 100 : 0, "%"),
                                     transition: "width 0.3s ease"

package/dist/index.mjs

@@ -360,6 +360,7 @@ var Overlay = function(param) {
         if (!root) {
             root = document.createElement("div");
             root.id = "modal-root";
+            root.classList.add(document.documentElement.classList.contains("dark") ? "dark" : "light");
             document.body.appendChild(root);
         }
         setModalRoot(root);
@@ -388,6 +389,7 @@ var Overlay = function(param) {
 };
 var Overlay_default = Overlay;
 // src/Button/Button.tsx
+import clsx from "clsx";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var Button = function(param) {
     var _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;
@@ -430,7 +432,7 @@ var Button = function(param) {
     return /* @__PURE__ */ jsx11("button", {
         type: type || "button",
         disabled: disabled,
-        className: "rounded-lg cursor-pointer focus:outline-none transition duration-100 ".concat(styled(), " ").concat(sized()),
+        className: clsx("rounded-lg cursor-pointer focus:outline-none transition duration-100", styled(), sized()),
         onClick: onClick,
         children: /* @__PURE__ */ jsx11("div", {
             className: "w-full max-h-11",
@@ -575,6 +577,7 @@ var FunButton_default = FunButton;
 // src/Button/FunRoundButton.tsx
 import { useMemo as useMemo2 } from "react";
 import { motion as motion2 } from "framer-motion";
+import clsx2 from "clsx";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var FunRoundButton = function(param) {
     var 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;
@@ -621,7 +624,7 @@ var FunRoundButton = function(param) {
         disabled
     ]), front = _useMemo2.front, bottom = _useMemo2.bottom;
     return /* @__PURE__ */ jsx13(motion2.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"),
+        className: clsx2(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,
@@ -670,6 +673,7 @@ var FunRoundButton_default = FunRoundButton;
 // src/Checkbox/Checkbox.tsx
 import { useMemo as useMemo3 } from "react";
 import { useField } from "formik";
+import clsx3 from "clsx";
 import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
 var Checkbox = function(param) {
     var name = param.name, labelText = param.labelText, isLarge = param.isLarge, onChange = param.onChange, isDisabled = param.isDisabled;
@@ -698,7 +702,7 @@ var Checkbox = function(param) {
                         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")
+                        className: clsx3("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
                     }),
                     typeof labelText === "string" ? /* @__PURE__ */ jsx14("label", {
                         htmlFor: "".concat(name).concat(rand),
@@ -748,7 +752,7 @@ var MultiChoiceCheckBox = function(param) {
                 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")
+                className: clsx3("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
             })
         })
     });
@@ -756,6 +760,7 @@ var MultiChoiceCheckBox = function(param) {
 Checkbox.Multi = MultiChoiceCheckBox;
 var Checkbox_default = Checkbox;
 // src/Checkbox/RadioOption.tsx
+import clsx4 from "clsx";
 import { useField as useField2 } from "formik";
 import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
 var RadioOption = function(param) {
@@ -774,7 +779,7 @@ var RadioOption = function(param) {
                 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")
+                className: clsx4("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
             }),
             typeof labelText === "string" ? /* @__PURE__ */ jsx15("label", {
                 htmlFor: option,
@@ -891,9 +896,12 @@ var BAWrapper = function(props) {
     return ReactDOM2.createPortal(/* @__PURE__ */ jsx16(BottomAlert, _object_spread({}, props)), document.body);
 };
 var BottomAlert_default = BAWrapper;
+// src/Common/IconInfo.tsx
+import clsx6 from "clsx";
 // src/Common/Tippy.tsx
 import { useState as useState2, useRef, useEffect as useEffect2 } from "react";
 import { useFloating, useInteractions, useHover, useRole, useDismiss, offset, flip, shift, arrow, FloatingArrow, FloatingPortal } from "@floating-ui/react";
+import clsx5 from "clsx";
 import { Fragment, jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
 var Tippy = function(param) {
     var 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;
@@ -935,12 +943,13 @@ var Tippy = function(param) {
                 children: [
                     /* @__PURE__ */ jsx17("div", _object_spread_props(_object_spread({
                         ref: refs.setFloating,
-                        className: "z-[9999] ".concat(className || tippyClassname)
+                        className: clsx5("".concat(className || tippyClassname))
                     }, getFloatingProps()), {
                         style: {
                             position: strategy,
                             top: y !== null && y !== void 0 ? y : 0,
                             left: x !== null && x !== void 0 ? x : 0,
+                            zIndex: 9999,
                             width: "max-content"
                         },
                         children: content
@@ -977,7 +986,7 @@ var IconInfo = function(param) {
                 children: [
                     icon,
                     /* @__PURE__ */ jsx18("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"),
+                        className: clsx6("absolute -bottom-1", number > 9 ? number > 99 ? number > 999 ? "w-8 h-8 -right-6 -bottom-3" : "w-6 h-6 -right-5 -bottom-2" : "w-5 h-5 -right-3" : "w-4 -right-3", "flex justify-center items-center text-xs font-sans rounded-full text-white", color || "bg-secondary"),
                         children: number
                     })
                 ]
@@ -1006,6 +1015,7 @@ var XIcon = function(param) {
 };
 var XIcon_default = XIcon;
 // src/Common/Modal.tsx
+import clsx7 from "clsx";
 import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 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, [
@@ -1028,15 +1038,12 @@ var Modal = function(_param) {
         withContainer: true
     }, props), {
         children: /* @__PURE__ */ jsx20("div", {
-            className: "".concat(displayDark && "dark", " bg-slate-900/20 fixed inset-0 flex items-center justify-center"),
+            className: clsx7(displayDark && "dark", "bg-slate-900/20 fixed inset-0 flex items-center justify-center"),
             style: {
                 zIndex: 1e4
             },
             children: /* @__PURE__ */ jsxs9("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(" "),
+                className: clsx7("relative mx-1 w-full md:mx-auto md:w-3/4 lg:w-1/2", fullscreen && "md:w-5/6 lg:w-5/6"),
                 children: [
                     /* @__PURE__ */ jsx20(Fragment2, {
                         children: dismissLink ? /* @__PURE__ */ jsx20(Link, {
@@ -1045,11 +1052,11 @@ var Modal = function(_param) {
                             children: /* @__PURE__ */ jsx20("div", {
                                 onClick: onDismissed,
                                 children: /* @__PURE__ */ jsx20(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"
+                                    className: "absolute h-5 w-5 top-7 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__ */ jsx20("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",
+                            className: "absolute top-7 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__ */ jsx20(XIcon_default, {
@@ -1275,6 +1282,7 @@ var Slider_default = Slider;
 // src/Common/ToggleSwitch.tsx
 import { useField as useField3 } from "formik";
 import { motion as motion3 } from "framer-motion";
+import clsx8 from "clsx";
 import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
 var Formik = function(param) {
     var label = param.label, name = param.name;
@@ -1295,7 +1303,7 @@ var Formik = function(param) {
                         onChange: handleChange
                     }),
                     /* @__PURE__ */ jsx26("div", {
-                        className: "w-10 h-6 rounded-full p-[4px] transition-colors duration-300 ".concat(value ? "bg-[#00b4d8]" : "bg-[#64748b]"),
+                        className: clsx8("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-[#00b4d8]" : "bg-[#64748b]"),
                         children: /* @__PURE__ */ jsx26(motion3.div, {
                             className: "w-4 h-4 bg-white rounded-full absolute top-1",
                             initial: false,
@@ -1336,7 +1344,7 @@ var ToggleSwitch = function(param) {
                         onChange: handleChange
                     }),
                     /* @__PURE__ */ jsx26("div", {
-                        className: "w-10 h-6 rounded-full p-[4px] transition-colors duration-300 ".concat(value ? "bg-[#00b4d8]" : "bg-[#64748b]"),
+                        className: clsx8("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-[#00b4d8]" : "bg-[#64748b]"),
                         children: /* @__PURE__ */ jsx26(motion3.div, {
                             className: "w-4 h-4 bg-white rounded-full absolute top-1",
                             initial: false,
@@ -1402,6 +1410,7 @@ var StartIconSolid2 = function(param) {
 };
 var ArrowCircleRight_default = StartIconSolid2;
 // src/Common/UserContentSwitcher.tsx
+import clsx9 from "clsx";
 import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
 var UserContentSwitcher = function(param) {
     var Icon1 = param.icon1, Icon2 = param.icon2, setGalleryMode = param.setGalleryMode, galleryMode = param.galleryMode, title1 = param.title1, title2 = param.title2;
@@ -1426,13 +1435,22 @@ var UserContentSwitcher = function(param) {
                 className: "py-2 flex flex-row w-1/2 justify-center items-center gap-1 z-10",
                 children: [
                     /* @__PURE__ */ jsx29("span", {
-                        className: "truncate ".concat(galleryMode === title1.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"),
+                        className: clsx9("truncate", {
+                            "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
+                            "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
+                        }),
                         children: title1.toLocaleUpperCase()
                     }),
                     Icon1 ? /* @__PURE__ */ jsx29(Icon1, {
-                        className: "h-5 w-5 ".concat(galleryMode === title1.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90")
+                        className: clsx9("h-5 w-5", {
+                            "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
+                            "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
+                        })
                     }) : /* @__PURE__ */ jsx29(PlusCircleIcon_default, {
-                        className: "h-5 w-5 ".concat(galleryMode === title1.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90")
+                        className: clsx9("h-5 w-5", {
+                            "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
+                            "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
+                        })
                     })
                 ]
             }),
@@ -1443,13 +1461,22 @@ var UserContentSwitcher = function(param) {
                 className: "py-2 flex flex-row w-1/2 justify-center items-center gap-1 z-10",
                 children: [
                     /* @__PURE__ */ jsx29("span", {
-                        className: "truncate ".concat(galleryMode === title2.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90"),
+                        className: clsx9("truncate", {
+                            "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
+                            "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
+                        }),
                         children: title2.toLocaleUpperCase()
                     }),
                     Icon2 ? /* @__PURE__ */ jsx29(Icon2, {
-                        className: "h-5 w-5 ".concat(galleryMode === title2.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90")
+                        className: clsx9("h-5 w-5", {
+                            "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
+                            "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
+                        })
                     }) : /* @__PURE__ */ jsx29(ArrowCircleRight_default, {
-                        className: "h-5 w-5 ".concat(galleryMode === title2.toLowerCase() ? "text-primary dark:text-blue-400" : "text-slate-500 dark:text-slate-400 opacity-90")
+                        className: clsx9("h-5 w-5", {
+                            "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
+                            "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
+                        })
                     })
                 ]
             })
@@ -1484,6 +1511,7 @@ var ProgressBarSimple = function(param) {
 };
 var ProgressBarSimple_default = ProgressBarSimple;
 // src/ProgressBar/ProgressBar.tsx
+import clsx10 from "clsx";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var ProgressBar = function(param) {
     var progress = param.progress;
@@ -1493,7 +1521,7 @@ var ProgressBar = function(param) {
             children: /* @__PURE__ */ jsx31("div", {
                 className: "bg-gray-100 rounded-full h-2",
                 children: /* @__PURE__ */ jsx31("div", {
-                    className: "rounded-full h-2 ".concat(progress === 100 ? "bg-green-400" : "bg-gray-100"),
+                    className: clsx10("rounded-full h-2", progress === 100 ? "bg-green-400" : "bg-gray-100"),
                     style: {
                         width: "".concat(progress, "%"),
                         minWidth: "100%",
@@ -1522,7 +1550,7 @@ var ProgressStepBar = function(param) {
                             },
                             className: "cursor-pointer bg-gray-100 rounded-full h-2 overflow-hidden",
                             children: /* @__PURE__ */ jsx31("div", {
-                                className: "cursor-pointer rounded-full h-2 ".concat(stepIndex >= i ? "bg-green-400" : "bg-gray-100"),
+                                className: clsx10("cursor-pointer rounded-full h-2", stepIndex >= i ? "bg-green-400" : "bg-gray-100"),
                                 style: {
                                     width: "".concat(stepIndex >= i ? 100 : 0, "%"),
                                     transition: "width 0.3s ease"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evelearn-theme",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -42,5 +42,8 @@
     "react-dom": "^19.1.0",
     "tailwindcss": "^4.0.0",
     "use-debounce": "^10.0.4"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
   }
 }