evelearn-theme 2.0.38 → 2.0.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -133,6 +133,7 @@ var ReactPaginate = require('react-paginate');
133
133
  var react = require('react');
134
134
  var ReactDOM = require('react-dom');
135
135
  var clsx = require('clsx');
136
+ var tailwindMerge = require('tailwind-merge');
136
137
  var framerMotion = require('framer-motion');
137
138
  var formik = require('formik');
138
139
  var react$1 = require('@floating-ui/react');
@@ -475,28 +476,35 @@ var Overlay = /* @__PURE__ */ __name(function(param) {
475
476
  }), modalRoot);
476
477
  }, "Overlay");
477
478
  var Overlay_default = Overlay;
479
+ function tw() {
480
+ for(var _len = arguments.length, input = new Array(_len), _key = 0; _key < _len; _key++){
481
+ input[_key] = arguments[_key];
482
+ }
483
+ return tailwindMerge.twMerge(clsx__default.default(input));
484
+ }
485
+ __name(tw, "tw");
478
486
  var Button = /* @__PURE__ */ __name(function(param) {
479
487
  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;
480
488
  var styled = /* @__PURE__ */ __name(function() {
481
489
  switch(kind){
482
490
  case "primary":
483
- return clsx__default.default("bg-primary font-header text-white font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
491
+ return tw("bg-primary hover:bg-primary/95 shadow-xs hover:shadow-none dark:shadow-none dark:hover:bg-primary/90 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
484
492
  case "indigo":
485
- return clsx__default.default("bg-indigo-500 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
493
+ return tw("bg-indigo-500 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
486
494
  case "green":
487
- return clsx__default.default("bg-green-500 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
495
+ return tw("bg-green-500 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
488
496
  case "teal":
489
- return clsx__default.default("bg-teal-500 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
497
+ return tw("bg-teal-500 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
490
498
  case "secondary":
491
- return clsx__default.default("bg-secondary text-white font-header font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
499
+ return tw("bg-secondary text-white font-header font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
492
500
  case "base":
493
- return clsx__default.default("bg-white border-1 font-header border-gray-200 dark:bg-slate-600 dark:text-gray-100 transition-all duration-75 disabled:opacity-50 dark:hover:bg-slate-400 hover:bg-slate-100");
501
+ return tw("bg-white border-1 font-header border-gray-200 dark:bg-slate-600 dark:text-gray-100 transition-all duration-75 disabled:opacity-50 dark:hover:bg-slate-400 hover:bg-slate-100");
494
502
  case "gray":
495
- return clsx__default.default("bg-slate-400 dark:bg-slate-700 font-header text-white border-1 font-medium transition-opacity duration-75 disabled:opacity-50 hover:bg-black/10");
503
+ return tw("bg-slate-400 dark:bg-slate-700 font-header text-white border-1 font-medium transition-opacity duration-75 disabled:opacity-50 hover:bg-black/10");
496
504
  case "alert":
497
- return clsx__default.default("bg-amber-500 font-header text-white transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
505
+ return tw("bg-amber-500 font-header text-white transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
498
506
  case "warning":
499
- return clsx__default.default("bg-red-500 font-header text-white font-medium transition-opacity duration-75 disabled:opacity-50 hover:bg-black/10");
507
+ return tw("bg-red-500 font-header text-white font-medium transition-opacity duration-75 disabled:opacity-50 hover:bg-black/10");
500
508
  }
501
509
  }, "styled");
502
510
  var sized = /* @__PURE__ */ __name(function() {
@@ -514,7 +522,7 @@ var Button = /* @__PURE__ */ __name(function(param) {
514
522
  return /* @__PURE__ */ jsxRuntime.jsx("button", {
515
523
  type: type || "button",
516
524
  disabled: disabled,
517
- className: clsx__default.default("rounded-lg cursor-pointer focus:outline-none transition duration-100", styled(), sized()),
525
+ className: tw("rounded-lg cursor-pointer focus:outline-none transition duration-100", styled(), sized()),
518
526
  onClick: onClick,
519
527
  children: /* @__PURE__ */ jsxRuntime.jsx("div", {
520
528
  className: "w-full max-h-11",
@@ -698,7 +706,7 @@ var FunRoundButton = /* @__PURE__ */ __name(function(param) {
698
706
  disabled
699
707
  ]), front = _react_useMemo.front, bottom = _react_useMemo.bottom;
700
708
  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.button, {
701
- className: clsx__default.default(className || "border-none p-0 flex justify-center items-center cursor-pointer z-10", disabled ? "opacity-70 cursor-default" : "hover:opacity-95"),
709
+ className: tw(className || "border-none p-0 flex justify-center items-center cursor-pointer z-10", disabled ? "opacity-70 cursor-default" : "hover:opacity-95"),
702
710
  style: {
703
711
  background: front,
704
712
  height: size,
@@ -771,7 +779,7 @@ var Checkbox = /* @__PURE__ */ __name(function(param) {
771
779
  name: name,
772
780
  type: "checkbox",
773
781
  checked: !!value,
774
- className: clsx__default.default("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
782
+ className: tw("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
775
783
  }),
776
784
  typeof labelText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("label", {
777
785
  htmlFor: "".concat(name).concat(rand),
@@ -821,7 +829,7 @@ var MultiChoiceCheckBox = /* @__PURE__ */ __name(function(param) {
821
829
  id: name,
822
830
  name: name,
823
831
  type: "checkbox",
824
- className: clsx__default.default("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
832
+ className: tw("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
825
833
  })
826
834
  })
827
835
  });
@@ -844,7 +852,7 @@ var RadioOption = /* @__PURE__ */ __name(function(param) {
844
852
  name: name,
845
853
  type: "checkbox",
846
854
  checked: value === option,
847
- className: clsx__default.default("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
855
+ className: tw("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
848
856
  }),
849
857
  typeof labelText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("label", {
850
858
  htmlFor: option,
@@ -998,7 +1006,7 @@ var Tippy = /* @__PURE__ */ __name(function(param) {
998
1006
  children: [
999
1007
  /* @__PURE__ */ jsxRuntime.jsx("div", _object_spread_props(_object_spread({
1000
1008
  ref: refs.setFloating,
1001
- className: clsx__default.default("".concat(className || tippyClassname))
1009
+ className: tw("".concat(className || tippyClassname))
1002
1010
  }, getFloatingProps()), {
1003
1011
  style: {
1004
1012
  position: strategy,
@@ -1039,7 +1047,7 @@ var IconInfo = /* @__PURE__ */ __name(function(param) {
1039
1047
  children: [
1040
1048
  icon,
1041
1049
  /* @__PURE__ */ jsxRuntime.jsx("p", {
1042
- className: clsx__default.default("absolute -bottom-1", number > 9 ? number > 99 ? number > 999 ? "w-8 h-8 -right-6 -bottom-3" : "w-6 h-6 -right-5 -bottom-2" : "w-5 h-5 -right-3" : "w-4 -right-3", "flex justify-center items-center text-xs font-sans rounded-full text-white", color || "bg-secondary"),
1050
+ className: tw("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"),
1043
1051
  children: number
1044
1052
  })
1045
1053
  ]
@@ -1077,8 +1085,8 @@ var Modal = /* @__PURE__ */ __name(function(_param) {
1077
1085
  "style"
1078
1086
  ]);
1079
1087
  if (!visible) return null;
1080
- var modalWrapperClass = clsx__default.default("relative mx-1 w-full", !fullscreen && "md:mx-auto md:w-3/4 lg:w-1/2", fullscreen && "fixed inset-0 mx-0 w-full h-full flex items-center justify-center md:mx-0 md:w-full lg:w-full");
1081
- var modalPanelClass = clsx__default.default("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", fullscreen && "rounded-none sm:mt-0 h-full w-full flex flex-col justify-center");
1088
+ var modalWrapperClass = tw("relative mx-1 w-full", !fullscreen && "md:mx-auto md:w-3/4 lg:w-1/2", fullscreen && "fixed inset-0 mx-0 w-full h-full shrink-0 flex items-center justify-center");
1089
+ var modalPanelClass = tw("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", fullscreen && "rounded-none sm:mt-0 h-full shrink-0 w-full flex flex-col justify-center");
1082
1090
  var modalPanelStyle = fullscreen ? _object_spread({
1083
1091
  height: "100vh",
1084
1092
  width: "100vw",
@@ -1086,8 +1094,7 @@ var Modal = /* @__PURE__ */ __name(function(_param) {
1086
1094
  }, style) : _object_spread({
1087
1095
  maxHeight: "calc(100vh - 6rem)"
1088
1096
  }, style);
1089
- var innerPaddingClass = fullscreen ? "p-4 sm:p-10 flex-1 flex items-center justify-center" : "p-4 sm:p-10";
1090
- var contentMarginTopClass = fullscreen ? "" : "mt-8 sm:mt-0";
1097
+ var innerPaddingClass = fullscreen ? "p-4 sm:p-10 shrink-0 flex-1 flex items-center justify-center" : "p-4 sm:p-10 mt-8 sm:mt-0";
1091
1098
  return /* @__PURE__ */ jsxRuntime.jsx(Overlay_default, _object_spread_props(_object_spread({
1092
1099
  visible: visible,
1093
1100
  onClick: dismissOnBackdropClick ? onDismissed : void 0,
@@ -1095,7 +1102,7 @@ var Modal = /* @__PURE__ */ __name(function(_param) {
1095
1102
  withContainer: true
1096
1103
  }, props), {
1097
1104
  children: /* @__PURE__ */ jsxRuntime.jsx("div", {
1098
- className: clsx__default.default(displayDark && "dark", "bg-slate-900/20 fixed inset-0 flex items-center justify-center"),
1105
+ className: tw(displayDark && "dark", "bg-slate-900/20 fixed inset-0 flex items-center justify-center w-full h-full"),
1099
1106
  style: {
1100
1107
  zIndex: 1e4
1101
1108
  },
@@ -1126,10 +1133,7 @@ var Modal = /* @__PURE__ */ __name(function(_param) {
1126
1133
  style: modalPanelStyle,
1127
1134
  children: /* @__PURE__ */ jsxRuntime.jsx("div", {
1128
1135
  className: innerPaddingClass,
1129
- children: /* @__PURE__ */ jsxRuntime.jsx("div", {
1130
- className: contentMarginTopClass,
1131
- children: children
1132
- })
1136
+ children: children
1133
1137
  })
1134
1138
  })
1135
1139
  ]
@@ -1142,13 +1146,13 @@ var NoticeBox = /* @__PURE__ */ __name(function(param) {
1142
1146
  var children = param.children, type = param.type, isDismissible = param.isDismissible, isVisible = param.isVisible, onDismiss = param.onDismiss;
1143
1147
  var _react_useState = _sliced_to_array(react.useState(true), 2), visible = _react_useState[0], setVisible = _react_useState[1];
1144
1148
  var styles = react.useMemo(function() {
1145
- var base = "relative text-base rounded-md p-2 ";
1149
+ var base = "relative text-base bg-slate-50 dark:bg-slate-800 rounded-md p-2 ";
1146
1150
  if (!visible) return "hidden";
1147
1151
  switch(type){
1148
1152
  case "error":
1149
1153
  return base.concat("w-full absolute top-50 text-red-500 border-red-400 border-2");
1150
1154
  case "info":
1151
- return base.concat("text-green-800 border-green-400 bg-green-100");
1155
+ return base.concat("text-gray-800 dark:text-gray-300 border-green-400");
1152
1156
  case "warning":
1153
1157
  return base.concat("text-orange-500 border border-orange-400 bg-white");
1154
1158
  default:
@@ -1337,7 +1341,7 @@ var Formik = /* @__PURE__ */ __name(function(param) {
1337
1341
  onChange: handleChange
1338
1342
  }),
1339
1343
  /* @__PURE__ */ jsxRuntime.jsx("div", {
1340
- className: clsx__default.default("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-primary" : "dark:bg-slate-950 bg-stone-400"),
1344
+ className: tw("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-primary" : "dark:bg-slate-950 bg-stone-400"),
1341
1345
  children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, {
1342
1346
  className: "w-4 h-4 bg-white rounded-full absolute top-1",
1343
1347
  initial: false,
@@ -1378,7 +1382,7 @@ var ToggleSwitch = /* @__PURE__ */ __name(function(param) {
1378
1382
  onChange: handleChange
1379
1383
  }),
1380
1384
  /* @__PURE__ */ jsxRuntime.jsx("div", {
1381
- className: clsx__default.default("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-primary" : "dark:bg-slate-950 bg-stone-400"),
1385
+ className: tw("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-primary" : "dark:bg-slate-950 bg-stone-400"),
1382
1386
  children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, {
1383
1387
  className: "w-4 h-4 bg-white rounded-full absolute top-1",
1384
1388
  initial: false,
@@ -1460,19 +1464,19 @@ var UserContentSwitcher = /* @__PURE__ */ __name(function(param) {
1460
1464
  className: "py-2 flex flex-row w-1/2 justify-center items-center gap-1 z-10",
1461
1465
  children: [
1462
1466
  /* @__PURE__ */ jsxRuntime.jsx("span", {
1463
- className: clsx__default.default("truncate", {
1467
+ className: tw("truncate", {
1464
1468
  "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
1465
1469
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
1466
1470
  }),
1467
1471
  children: title1.toLocaleUpperCase()
1468
1472
  }),
1469
1473
  Icon1 ? /* @__PURE__ */ jsxRuntime.jsx(Icon1, {
1470
- className: clsx__default.default("h-5 w-5", {
1474
+ className: tw("h-5 w-5", {
1471
1475
  "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
1472
1476
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
1473
1477
  })
1474
1478
  }) : /* @__PURE__ */ jsxRuntime.jsx(PlusCircleIcon_default, {
1475
- className: clsx__default.default("h-5 w-5", {
1479
+ className: tw("h-5 w-5", {
1476
1480
  "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
1477
1481
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
1478
1482
  })
@@ -1486,19 +1490,19 @@ var UserContentSwitcher = /* @__PURE__ */ __name(function(param) {
1486
1490
  className: "py-2 flex flex-row w-1/2 justify-center items-center gap-1 z-10",
1487
1491
  children: [
1488
1492
  /* @__PURE__ */ jsxRuntime.jsx("span", {
1489
- className: clsx__default.default("truncate", {
1493
+ className: tw("truncate", {
1490
1494
  "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
1491
1495
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
1492
1496
  }),
1493
1497
  children: title2.toLocaleUpperCase()
1494
1498
  }),
1495
1499
  Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(Icon2, {
1496
- className: clsx__default.default("h-5 w-5", {
1500
+ className: tw("h-5 w-5", {
1497
1501
  "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
1498
1502
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
1499
1503
  })
1500
1504
  }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowCircleRight_default, {
1501
- className: clsx__default.default("h-5 w-5", {
1505
+ className: tw("h-5 w-5", {
1502
1506
  "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
1503
1507
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
1504
1508
  })
@@ -1541,7 +1545,7 @@ var ProgressBar = /* @__PURE__ */ __name(function(param) {
1541
1545
  children: /* @__PURE__ */ jsxRuntime.jsx("div", {
1542
1546
  className: "bg-gray-100 rounded-full h-2",
1543
1547
  children: /* @__PURE__ */ jsxRuntime.jsx("div", {
1544
- className: clsx__default.default("rounded-full h-2", progress === 100 ? "bg-green-400" : "bg-gray-100"),
1548
+ className: tw("rounded-full h-2", progress === 100 ? "bg-green-400" : "bg-gray-100"),
1545
1549
  style: {
1546
1550
  width: "".concat(progress, "%"),
1547
1551
  minWidth: "100%",
@@ -1570,7 +1574,7 @@ var ProgressStepBar = /* @__PURE__ */ __name(function(param) {
1570
1574
  },
1571
1575
  className: "cursor-pointer bg-gray-100 rounded-full h-2 overflow-hidden",
1572
1576
  children: /* @__PURE__ */ jsxRuntime.jsx("div", {
1573
- className: clsx__default.default("cursor-pointer rounded-full h-2", stepIndex >= i ? "bg-green-400" : "bg-gray-100"),
1577
+ className: tw("cursor-pointer rounded-full h-2", stepIndex >= i ? "bg-green-400" : "bg-gray-100"),
1574
1578
  style: {
1575
1579
  width: "".concat(stepIndex >= i ? 100 : 0, "%"),
1576
1580
  transition: "width 0.3s ease"
package/dist/index.mjs CHANGED
@@ -132,6 +132,7 @@ import ReactPaginate from 'react-paginate';
132
132
  import { useMemo, useState, useRef, useEffect } from 'react';
133
133
  import ReactDOM from 'react-dom';
134
134
  import clsx from 'clsx';
135
+ import { twMerge } from 'tailwind-merge';
135
136
  import { motion } from 'framer-motion';
136
137
  import { useField } from 'formik';
137
138
  import { useFloating, offset, flip, shift, arrow, useHover, useDismiss, useRole, useInteractions, FloatingPortal, FloatingArrow } from '@floating-ui/react';
@@ -466,28 +467,35 @@ var Overlay = /* @__PURE__ */ __name(function(param) {
466
467
  }), modalRoot);
467
468
  }, "Overlay");
468
469
  var Overlay_default = Overlay;
470
+ function tw() {
471
+ for(var _len = arguments.length, input = new Array(_len), _key = 0; _key < _len; _key++){
472
+ input[_key] = arguments[_key];
473
+ }
474
+ return twMerge(clsx(input));
475
+ }
476
+ __name(tw, "tw");
469
477
  var Button = /* @__PURE__ */ __name(function(param) {
470
478
  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;
471
479
  var styled = /* @__PURE__ */ __name(function() {
472
480
  switch(kind){
473
481
  case "primary":
474
- return clsx("bg-primary font-header text-white font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
482
+ return tw("bg-primary hover:bg-primary/95 shadow-xs hover:shadow-none dark:shadow-none dark:hover:bg-primary/90 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
475
483
  case "indigo":
476
- return clsx("bg-indigo-500 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
484
+ return tw("bg-indigo-500 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
477
485
  case "green":
478
- return clsx("bg-green-500 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
486
+ return tw("bg-green-500 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
479
487
  case "teal":
480
- return clsx("bg-teal-500 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
488
+ return tw("bg-teal-500 font-header text-white font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
481
489
  case "secondary":
482
- return clsx("bg-secondary text-white font-header font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
490
+ return tw("bg-secondary text-white font-header font-medium transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
483
491
  case "base":
484
- return clsx("bg-white border-1 font-header border-gray-200 dark:bg-slate-600 dark:text-gray-100 transition-all duration-75 disabled:opacity-50 dark:hover:bg-slate-400 hover:bg-slate-100");
492
+ return tw("bg-white border-1 font-header border-gray-200 dark:bg-slate-600 dark:text-gray-100 transition-all duration-75 disabled:opacity-50 dark:hover:bg-slate-400 hover:bg-slate-100");
485
493
  case "gray":
486
- return clsx("bg-slate-400 dark:bg-slate-700 font-header text-white border-1 font-medium transition-opacity duration-75 disabled:opacity-50 hover:bg-black/10");
494
+ return tw("bg-slate-400 dark:bg-slate-700 font-header text-white border-1 font-medium transition-opacity duration-75 disabled:opacity-50 hover:bg-black/10");
487
495
  case "alert":
488
- return clsx("bg-amber-500 font-header text-white transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
496
+ return tw("bg-amber-500 font-header text-white transition-all duration-75 disabled:opacity-50 hover:bg-black/10");
489
497
  case "warning":
490
- return clsx("bg-red-500 font-header text-white font-medium transition-opacity duration-75 disabled:opacity-50 hover:bg-black/10");
498
+ return tw("bg-red-500 font-header text-white font-medium transition-opacity duration-75 disabled:opacity-50 hover:bg-black/10");
491
499
  }
492
500
  }, "styled");
493
501
  var sized = /* @__PURE__ */ __name(function() {
@@ -505,7 +513,7 @@ var Button = /* @__PURE__ */ __name(function(param) {
505
513
  return /* @__PURE__ */ jsx("button", {
506
514
  type: type || "button",
507
515
  disabled: disabled,
508
- className: clsx("rounded-lg cursor-pointer focus:outline-none transition duration-100", styled(), sized()),
516
+ className: tw("rounded-lg cursor-pointer focus:outline-none transition duration-100", styled(), sized()),
509
517
  onClick: onClick,
510
518
  children: /* @__PURE__ */ jsx("div", {
511
519
  className: "w-full max-h-11",
@@ -689,7 +697,7 @@ var FunRoundButton = /* @__PURE__ */ __name(function(param) {
689
697
  disabled
690
698
  ]), front = _useMemo.front, bottom = _useMemo.bottom;
691
699
  return /* @__PURE__ */ jsx(motion.button, {
692
- className: clsx(className || "border-none p-0 flex justify-center items-center cursor-pointer z-10", disabled ? "opacity-70 cursor-default" : "hover:opacity-95"),
700
+ className: tw(className || "border-none p-0 flex justify-center items-center cursor-pointer z-10", disabled ? "opacity-70 cursor-default" : "hover:opacity-95"),
693
701
  style: {
694
702
  background: front,
695
703
  height: size,
@@ -762,7 +770,7 @@ var Checkbox = /* @__PURE__ */ __name(function(param) {
762
770
  name: name,
763
771
  type: "checkbox",
764
772
  checked: !!value,
765
- className: clsx("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
773
+ className: tw("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
766
774
  }),
767
775
  typeof labelText === "string" ? /* @__PURE__ */ jsx("label", {
768
776
  htmlFor: "".concat(name).concat(rand),
@@ -812,7 +820,7 @@ var MultiChoiceCheckBox = /* @__PURE__ */ __name(function(param) {
812
820
  id: name,
813
821
  name: name,
814
822
  type: "checkbox",
815
- className: clsx("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
823
+ className: tw("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
816
824
  })
817
825
  })
818
826
  });
@@ -835,7 +843,7 @@ var RadioOption = /* @__PURE__ */ __name(function(param) {
835
843
  name: name,
836
844
  type: "checkbox",
837
845
  checked: value === option,
838
- className: clsx("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
846
+ className: tw("form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded", isLarge ? "h-5 w-5" : "h-4 w-4")
839
847
  }),
840
848
  typeof labelText === "string" ? /* @__PURE__ */ jsx("label", {
841
849
  htmlFor: option,
@@ -989,7 +997,7 @@ var Tippy = /* @__PURE__ */ __name(function(param) {
989
997
  children: [
990
998
  /* @__PURE__ */ jsx("div", _object_spread_props(_object_spread({
991
999
  ref: refs.setFloating,
992
- className: clsx("".concat(className || tippyClassname))
1000
+ className: tw("".concat(className || tippyClassname))
993
1001
  }, getFloatingProps()), {
994
1002
  style: {
995
1003
  position: strategy,
@@ -1030,7 +1038,7 @@ var IconInfo = /* @__PURE__ */ __name(function(param) {
1030
1038
  children: [
1031
1039
  icon,
1032
1040
  /* @__PURE__ */ jsx("p", {
1033
- className: clsx("absolute -bottom-1", number > 9 ? number > 99 ? number > 999 ? "w-8 h-8 -right-6 -bottom-3" : "w-6 h-6 -right-5 -bottom-2" : "w-5 h-5 -right-3" : "w-4 -right-3", "flex justify-center items-center text-xs font-sans rounded-full text-white", color || "bg-secondary"),
1041
+ className: tw("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"),
1034
1042
  children: number
1035
1043
  })
1036
1044
  ]
@@ -1068,8 +1076,8 @@ var Modal = /* @__PURE__ */ __name(function(_param) {
1068
1076
  "style"
1069
1077
  ]);
1070
1078
  if (!visible) return null;
1071
- var modalWrapperClass = clsx("relative mx-1 w-full", !fullscreen && "md:mx-auto md:w-3/4 lg:w-1/2", fullscreen && "fixed inset-0 mx-0 w-full h-full flex items-center justify-center md:mx-0 md:w-full lg:w-full");
1072
- var modalPanelClass = clsx("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", fullscreen && "rounded-none sm:mt-0 h-full w-full flex flex-col justify-center");
1079
+ var modalWrapperClass = tw("relative mx-1 w-full", !fullscreen && "md:mx-auto md:w-3/4 lg:w-1/2", fullscreen && "fixed inset-0 mx-0 w-full h-full shrink-0 flex items-center justify-center");
1080
+ var modalPanelClass = tw("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", fullscreen && "rounded-none sm:mt-0 h-full shrink-0 w-full flex flex-col justify-center");
1073
1081
  var modalPanelStyle = fullscreen ? _object_spread({
1074
1082
  height: "100vh",
1075
1083
  width: "100vw",
@@ -1077,8 +1085,7 @@ var Modal = /* @__PURE__ */ __name(function(_param) {
1077
1085
  }, style) : _object_spread({
1078
1086
  maxHeight: "calc(100vh - 6rem)"
1079
1087
  }, style);
1080
- var innerPaddingClass = fullscreen ? "p-4 sm:p-10 flex-1 flex items-center justify-center" : "p-4 sm:p-10";
1081
- var contentMarginTopClass = fullscreen ? "" : "mt-8 sm:mt-0";
1088
+ var innerPaddingClass = fullscreen ? "p-4 sm:p-10 shrink-0 flex-1 flex items-center justify-center" : "p-4 sm:p-10 mt-8 sm:mt-0";
1082
1089
  return /* @__PURE__ */ jsx(Overlay_default, _object_spread_props(_object_spread({
1083
1090
  visible: visible,
1084
1091
  onClick: dismissOnBackdropClick ? onDismissed : void 0,
@@ -1086,7 +1093,7 @@ var Modal = /* @__PURE__ */ __name(function(_param) {
1086
1093
  withContainer: true
1087
1094
  }, props), {
1088
1095
  children: /* @__PURE__ */ jsx("div", {
1089
- className: clsx(displayDark && "dark", "bg-slate-900/20 fixed inset-0 flex items-center justify-center"),
1096
+ className: tw(displayDark && "dark", "bg-slate-900/20 fixed inset-0 flex items-center justify-center w-full h-full"),
1090
1097
  style: {
1091
1098
  zIndex: 1e4
1092
1099
  },
@@ -1117,10 +1124,7 @@ var Modal = /* @__PURE__ */ __name(function(_param) {
1117
1124
  style: modalPanelStyle,
1118
1125
  children: /* @__PURE__ */ jsx("div", {
1119
1126
  className: innerPaddingClass,
1120
- children: /* @__PURE__ */ jsx("div", {
1121
- className: contentMarginTopClass,
1122
- children: children
1123
- })
1127
+ children: children
1124
1128
  })
1125
1129
  })
1126
1130
  ]
@@ -1133,13 +1137,13 @@ var NoticeBox = /* @__PURE__ */ __name(function(param) {
1133
1137
  var children = param.children, type = param.type, isDismissible = param.isDismissible, isVisible = param.isVisible, onDismiss = param.onDismiss;
1134
1138
  var _useState = _sliced_to_array(useState(true), 2), visible = _useState[0], setVisible = _useState[1];
1135
1139
  var styles = useMemo(function() {
1136
- var base = "relative text-base rounded-md p-2 ";
1140
+ var base = "relative text-base bg-slate-50 dark:bg-slate-800 rounded-md p-2 ";
1137
1141
  if (!visible) return "hidden";
1138
1142
  switch(type){
1139
1143
  case "error":
1140
1144
  return base.concat("w-full absolute top-50 text-red-500 border-red-400 border-2");
1141
1145
  case "info":
1142
- return base.concat("text-green-800 border-green-400 bg-green-100");
1146
+ return base.concat("text-gray-800 dark:text-gray-300 border-green-400");
1143
1147
  case "warning":
1144
1148
  return base.concat("text-orange-500 border border-orange-400 bg-white");
1145
1149
  default:
@@ -1328,7 +1332,7 @@ var Formik = /* @__PURE__ */ __name(function(param) {
1328
1332
  onChange: handleChange
1329
1333
  }),
1330
1334
  /* @__PURE__ */ jsx("div", {
1331
- className: clsx("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-primary" : "dark:bg-slate-950 bg-stone-400"),
1335
+ className: tw("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-primary" : "dark:bg-slate-950 bg-stone-400"),
1332
1336
  children: /* @__PURE__ */ jsx(motion.div, {
1333
1337
  className: "w-4 h-4 bg-white rounded-full absolute top-1",
1334
1338
  initial: false,
@@ -1369,7 +1373,7 @@ var ToggleSwitch = /* @__PURE__ */ __name(function(param) {
1369
1373
  onChange: handleChange
1370
1374
  }),
1371
1375
  /* @__PURE__ */ jsx("div", {
1372
- className: clsx("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-primary" : "dark:bg-slate-950 bg-stone-400"),
1376
+ className: tw("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-primary" : "dark:bg-slate-950 bg-stone-400"),
1373
1377
  children: /* @__PURE__ */ jsx(motion.div, {
1374
1378
  className: "w-4 h-4 bg-white rounded-full absolute top-1",
1375
1379
  initial: false,
@@ -1451,19 +1455,19 @@ var UserContentSwitcher = /* @__PURE__ */ __name(function(param) {
1451
1455
  className: "py-2 flex flex-row w-1/2 justify-center items-center gap-1 z-10",
1452
1456
  children: [
1453
1457
  /* @__PURE__ */ jsx("span", {
1454
- className: clsx("truncate", {
1458
+ className: tw("truncate", {
1455
1459
  "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
1456
1460
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
1457
1461
  }),
1458
1462
  children: title1.toLocaleUpperCase()
1459
1463
  }),
1460
1464
  Icon1 ? /* @__PURE__ */ jsx(Icon1, {
1461
- className: clsx("h-5 w-5", {
1465
+ className: tw("h-5 w-5", {
1462
1466
  "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
1463
1467
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
1464
1468
  })
1465
1469
  }) : /* @__PURE__ */ jsx(PlusCircleIcon_default, {
1466
- className: clsx("h-5 w-5", {
1470
+ className: tw("h-5 w-5", {
1467
1471
  "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
1468
1472
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
1469
1473
  })
@@ -1477,19 +1481,19 @@ var UserContentSwitcher = /* @__PURE__ */ __name(function(param) {
1477
1481
  className: "py-2 flex flex-row w-1/2 justify-center items-center gap-1 z-10",
1478
1482
  children: [
1479
1483
  /* @__PURE__ */ jsx("span", {
1480
- className: clsx("truncate", {
1484
+ className: tw("truncate", {
1481
1485
  "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
1482
1486
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
1483
1487
  }),
1484
1488
  children: title2.toLocaleUpperCase()
1485
1489
  }),
1486
1490
  Icon2 ? /* @__PURE__ */ jsx(Icon2, {
1487
- className: clsx("h-5 w-5", {
1491
+ className: tw("h-5 w-5", {
1488
1492
  "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
1489
1493
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
1490
1494
  })
1491
1495
  }) : /* @__PURE__ */ jsx(ArrowCircleRight_default, {
1492
- className: clsx("h-5 w-5", {
1496
+ className: tw("h-5 w-5", {
1493
1497
  "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
1494
1498
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
1495
1499
  })
@@ -1532,7 +1536,7 @@ var ProgressBar = /* @__PURE__ */ __name(function(param) {
1532
1536
  children: /* @__PURE__ */ jsx("div", {
1533
1537
  className: "bg-gray-100 rounded-full h-2",
1534
1538
  children: /* @__PURE__ */ jsx("div", {
1535
- className: clsx("rounded-full h-2", progress === 100 ? "bg-green-400" : "bg-gray-100"),
1539
+ className: tw("rounded-full h-2", progress === 100 ? "bg-green-400" : "bg-gray-100"),
1536
1540
  style: {
1537
1541
  width: "".concat(progress, "%"),
1538
1542
  minWidth: "100%",
@@ -1561,7 +1565,7 @@ var ProgressStepBar = /* @__PURE__ */ __name(function(param) {
1561
1565
  },
1562
1566
  className: "cursor-pointer bg-gray-100 rounded-full h-2 overflow-hidden",
1563
1567
  children: /* @__PURE__ */ jsx("div", {
1564
- className: clsx("cursor-pointer rounded-full h-2", stepIndex >= i ? "bg-green-400" : "bg-gray-100"),
1568
+ className: tw("cursor-pointer rounded-full h-2", stepIndex >= i ? "bg-green-400" : "bg-gray-100"),
1565
1569
  style: {
1566
1570
  width: "".concat(stepIndex >= i ? 100 : 0, "%"),
1567
1571
  transition: "width 0.3s ease"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "evelearn-theme",
3
- "version": "2.0.38",
3
+ "version": "2.0.40",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -49,6 +49,7 @@
49
49
  "dependencies": {
50
50
  "clsx": "^2.1.1",
51
51
  "react-paginate": "^8.3.0",
52
+ "tailwind-merge": "^3.5.0",
52
53
  "tailwindcss-corner-shape": "^1.4.5"
53
54
  }
54
55
  }