evelearn-theme 2.0.37 → 2.0.39

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.
Files changed (3) hide show
  1. package/dist/index.js +40 -32
  2. package/dist/index.mjs +40 -32
  3. package/package.json +2 -1
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');
@@ -422,7 +423,7 @@ var Pagination = /* @__PURE__ */ __name(function(param) {
422
423
  breakLabel: "...",
423
424
  containerClassName: "w-full flex space-x-2 items-center",
424
425
  pageClassName: "bg-slate-50 dark:bg-slate-800 dark:hover:bg-slate-700 hover:bg-white rounded-md",
425
- activeLinkClassName: "bg-sky-500 rounded-md",
426
+ activeLinkClassName: "bg-sky-500 rounded-md text-white dark:text-inherit",
426
427
  pageLinkClassName: "h-9 w-9 flex justify-center items-center",
427
428
  previousClassName: "text-gray-700 dark:text-gray-200",
428
429
  previousLinkClassName: "p-2",
@@ -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 flex items-center justify-center md:mx-0 md:w-full lg:w-full");
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 w-full flex flex-col justify-center");
1082
1090
  var modalPanelStyle = fullscreen ? _object_spread({
1083
1091
  height: "100vh",
1084
1092
  width: "100vw",
@@ -1095,7 +1103,7 @@ var Modal = /* @__PURE__ */ __name(function(_param) {
1095
1103
  withContainer: true
1096
1104
  }, props), {
1097
1105
  children: /* @__PURE__ */ jsxRuntime.jsx("div", {
1098
- className: clsx__default.default(displayDark && "dark", "bg-slate-900/20 fixed inset-0 flex items-center justify-center"),
1106
+ className: tw(displayDark && "dark", "bg-slate-900/20 fixed inset-0 flex items-center justify-center"),
1099
1107
  style: {
1100
1108
  zIndex: 1e4
1101
1109
  },
@@ -1142,13 +1150,13 @@ var NoticeBox = /* @__PURE__ */ __name(function(param) {
1142
1150
  var children = param.children, type = param.type, isDismissible = param.isDismissible, isVisible = param.isVisible, onDismiss = param.onDismiss;
1143
1151
  var _react_useState = _sliced_to_array(react.useState(true), 2), visible = _react_useState[0], setVisible = _react_useState[1];
1144
1152
  var styles = react.useMemo(function() {
1145
- var base = "relative text-base rounded-md p-2 ";
1153
+ var base = "relative text-base bg-slate-50 dark:bg-slate-800 rounded-md p-2 ";
1146
1154
  if (!visible) return "hidden";
1147
1155
  switch(type){
1148
1156
  case "error":
1149
1157
  return base.concat("w-full absolute top-50 text-red-500 border-red-400 border-2");
1150
1158
  case "info":
1151
- return base.concat("text-green-800 border-green-400 bg-green-100");
1159
+ return base.concat("text-gray-800 dark:text-gray-300 border-green-400");
1152
1160
  case "warning":
1153
1161
  return base.concat("text-orange-500 border border-orange-400 bg-white");
1154
1162
  default:
@@ -1337,7 +1345,7 @@ var Formik = /* @__PURE__ */ __name(function(param) {
1337
1345
  onChange: handleChange
1338
1346
  }),
1339
1347
  /* @__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"),
1348
+ 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
1349
  children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, {
1342
1350
  className: "w-4 h-4 bg-white rounded-full absolute top-1",
1343
1351
  initial: false,
@@ -1378,7 +1386,7 @@ var ToggleSwitch = /* @__PURE__ */ __name(function(param) {
1378
1386
  onChange: handleChange
1379
1387
  }),
1380
1388
  /* @__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"),
1389
+ 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
1390
  children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, {
1383
1391
  className: "w-4 h-4 bg-white rounded-full absolute top-1",
1384
1392
  initial: false,
@@ -1460,19 +1468,19 @@ var UserContentSwitcher = /* @__PURE__ */ __name(function(param) {
1460
1468
  className: "py-2 flex flex-row w-1/2 justify-center items-center gap-1 z-10",
1461
1469
  children: [
1462
1470
  /* @__PURE__ */ jsxRuntime.jsx("span", {
1463
- className: clsx__default.default("truncate", {
1471
+ className: tw("truncate", {
1464
1472
  "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
1465
1473
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
1466
1474
  }),
1467
1475
  children: title1.toLocaleUpperCase()
1468
1476
  }),
1469
1477
  Icon1 ? /* @__PURE__ */ jsxRuntime.jsx(Icon1, {
1470
- className: clsx__default.default("h-5 w-5", {
1478
+ className: tw("h-5 w-5", {
1471
1479
  "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
1472
1480
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
1473
1481
  })
1474
1482
  }) : /* @__PURE__ */ jsxRuntime.jsx(PlusCircleIcon_default, {
1475
- className: clsx__default.default("h-5 w-5", {
1483
+ className: tw("h-5 w-5", {
1476
1484
  "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
1477
1485
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
1478
1486
  })
@@ -1486,19 +1494,19 @@ var UserContentSwitcher = /* @__PURE__ */ __name(function(param) {
1486
1494
  className: "py-2 flex flex-row w-1/2 justify-center items-center gap-1 z-10",
1487
1495
  children: [
1488
1496
  /* @__PURE__ */ jsxRuntime.jsx("span", {
1489
- className: clsx__default.default("truncate", {
1497
+ className: tw("truncate", {
1490
1498
  "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
1491
1499
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
1492
1500
  }),
1493
1501
  children: title2.toLocaleUpperCase()
1494
1502
  }),
1495
1503
  Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(Icon2, {
1496
- className: clsx__default.default("h-5 w-5", {
1504
+ className: tw("h-5 w-5", {
1497
1505
  "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
1498
1506
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
1499
1507
  })
1500
1508
  }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowCircleRight_default, {
1501
- className: clsx__default.default("h-5 w-5", {
1509
+ className: tw("h-5 w-5", {
1502
1510
  "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
1503
1511
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
1504
1512
  })
@@ -1541,7 +1549,7 @@ var ProgressBar = /* @__PURE__ */ __name(function(param) {
1541
1549
  children: /* @__PURE__ */ jsxRuntime.jsx("div", {
1542
1550
  className: "bg-gray-100 rounded-full h-2",
1543
1551
  children: /* @__PURE__ */ jsxRuntime.jsx("div", {
1544
- className: clsx__default.default("rounded-full h-2", progress === 100 ? "bg-green-400" : "bg-gray-100"),
1552
+ className: tw("rounded-full h-2", progress === 100 ? "bg-green-400" : "bg-gray-100"),
1545
1553
  style: {
1546
1554
  width: "".concat(progress, "%"),
1547
1555
  minWidth: "100%",
@@ -1570,7 +1578,7 @@ var ProgressStepBar = /* @__PURE__ */ __name(function(param) {
1570
1578
  },
1571
1579
  className: "cursor-pointer bg-gray-100 rounded-full h-2 overflow-hidden",
1572
1580
  children: /* @__PURE__ */ jsxRuntime.jsx("div", {
1573
- className: clsx__default.default("cursor-pointer rounded-full h-2", stepIndex >= i ? "bg-green-400" : "bg-gray-100"),
1581
+ className: tw("cursor-pointer rounded-full h-2", stepIndex >= i ? "bg-green-400" : "bg-gray-100"),
1574
1582
  style: {
1575
1583
  width: "".concat(stepIndex >= i ? 100 : 0, "%"),
1576
1584
  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';
@@ -413,7 +414,7 @@ var Pagination = /* @__PURE__ */ __name(function(param) {
413
414
  breakLabel: "...",
414
415
  containerClassName: "w-full flex space-x-2 items-center",
415
416
  pageClassName: "bg-slate-50 dark:bg-slate-800 dark:hover:bg-slate-700 hover:bg-white rounded-md",
416
- activeLinkClassName: "bg-sky-500 rounded-md",
417
+ activeLinkClassName: "bg-sky-500 rounded-md text-white dark:text-inherit",
417
418
  pageLinkClassName: "h-9 w-9 flex justify-center items-center",
418
419
  previousClassName: "text-gray-700 dark:text-gray-200",
419
420
  previousLinkClassName: "p-2",
@@ -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 flex items-center justify-center md:mx-0 md:w-full lg:w-full");
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 w-full flex flex-col justify-center");
1073
1081
  var modalPanelStyle = fullscreen ? _object_spread({
1074
1082
  height: "100vh",
1075
1083
  width: "100vw",
@@ -1086,7 +1094,7 @@ var Modal = /* @__PURE__ */ __name(function(_param) {
1086
1094
  withContainer: true
1087
1095
  }, props), {
1088
1096
  children: /* @__PURE__ */ jsx("div", {
1089
- className: clsx(displayDark && "dark", "bg-slate-900/20 fixed inset-0 flex items-center justify-center"),
1097
+ className: tw(displayDark && "dark", "bg-slate-900/20 fixed inset-0 flex items-center justify-center"),
1090
1098
  style: {
1091
1099
  zIndex: 1e4
1092
1100
  },
@@ -1133,13 +1141,13 @@ var NoticeBox = /* @__PURE__ */ __name(function(param) {
1133
1141
  var children = param.children, type = param.type, isDismissible = param.isDismissible, isVisible = param.isVisible, onDismiss = param.onDismiss;
1134
1142
  var _useState = _sliced_to_array(useState(true), 2), visible = _useState[0], setVisible = _useState[1];
1135
1143
  var styles = useMemo(function() {
1136
- var base = "relative text-base rounded-md p-2 ";
1144
+ var base = "relative text-base bg-slate-50 dark:bg-slate-800 rounded-md p-2 ";
1137
1145
  if (!visible) return "hidden";
1138
1146
  switch(type){
1139
1147
  case "error":
1140
1148
  return base.concat("w-full absolute top-50 text-red-500 border-red-400 border-2");
1141
1149
  case "info":
1142
- return base.concat("text-green-800 border-green-400 bg-green-100");
1150
+ return base.concat("text-gray-800 dark:text-gray-300 border-green-400");
1143
1151
  case "warning":
1144
1152
  return base.concat("text-orange-500 border border-orange-400 bg-white");
1145
1153
  default:
@@ -1328,7 +1336,7 @@ var Formik = /* @__PURE__ */ __name(function(param) {
1328
1336
  onChange: handleChange
1329
1337
  }),
1330
1338
  /* @__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"),
1339
+ 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
1340
  children: /* @__PURE__ */ jsx(motion.div, {
1333
1341
  className: "w-4 h-4 bg-white rounded-full absolute top-1",
1334
1342
  initial: false,
@@ -1369,7 +1377,7 @@ var ToggleSwitch = /* @__PURE__ */ __name(function(param) {
1369
1377
  onChange: handleChange
1370
1378
  }),
1371
1379
  /* @__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"),
1380
+ 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
1381
  children: /* @__PURE__ */ jsx(motion.div, {
1374
1382
  className: "w-4 h-4 bg-white rounded-full absolute top-1",
1375
1383
  initial: false,
@@ -1451,19 +1459,19 @@ var UserContentSwitcher = /* @__PURE__ */ __name(function(param) {
1451
1459
  className: "py-2 flex flex-row w-1/2 justify-center items-center gap-1 z-10",
1452
1460
  children: [
1453
1461
  /* @__PURE__ */ jsx("span", {
1454
- className: clsx("truncate", {
1462
+ className: tw("truncate", {
1455
1463
  "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
1456
1464
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
1457
1465
  }),
1458
1466
  children: title1.toLocaleUpperCase()
1459
1467
  }),
1460
1468
  Icon1 ? /* @__PURE__ */ jsx(Icon1, {
1461
- className: clsx("h-5 w-5", {
1469
+ className: tw("h-5 w-5", {
1462
1470
  "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
1463
1471
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
1464
1472
  })
1465
1473
  }) : /* @__PURE__ */ jsx(PlusCircleIcon_default, {
1466
- className: clsx("h-5 w-5", {
1474
+ className: tw("h-5 w-5", {
1467
1475
  "text-primary dark:text-blue-400": galleryMode === title1.toLowerCase(),
1468
1476
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title1.toLowerCase()
1469
1477
  })
@@ -1477,19 +1485,19 @@ var UserContentSwitcher = /* @__PURE__ */ __name(function(param) {
1477
1485
  className: "py-2 flex flex-row w-1/2 justify-center items-center gap-1 z-10",
1478
1486
  children: [
1479
1487
  /* @__PURE__ */ jsx("span", {
1480
- className: clsx("truncate", {
1488
+ className: tw("truncate", {
1481
1489
  "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
1482
1490
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
1483
1491
  }),
1484
1492
  children: title2.toLocaleUpperCase()
1485
1493
  }),
1486
1494
  Icon2 ? /* @__PURE__ */ jsx(Icon2, {
1487
- className: clsx("h-5 w-5", {
1495
+ className: tw("h-5 w-5", {
1488
1496
  "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
1489
1497
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
1490
1498
  })
1491
1499
  }) : /* @__PURE__ */ jsx(ArrowCircleRight_default, {
1492
- className: clsx("h-5 w-5", {
1500
+ className: tw("h-5 w-5", {
1493
1501
  "text-primary dark:text-blue-400": galleryMode === title2.toLowerCase(),
1494
1502
  "text-slate-500 dark:text-slate-400 opacity-90": galleryMode !== title2.toLowerCase()
1495
1503
  })
@@ -1532,7 +1540,7 @@ var ProgressBar = /* @__PURE__ */ __name(function(param) {
1532
1540
  children: /* @__PURE__ */ jsx("div", {
1533
1541
  className: "bg-gray-100 rounded-full h-2",
1534
1542
  children: /* @__PURE__ */ jsx("div", {
1535
- className: clsx("rounded-full h-2", progress === 100 ? "bg-green-400" : "bg-gray-100"),
1543
+ className: tw("rounded-full h-2", progress === 100 ? "bg-green-400" : "bg-gray-100"),
1536
1544
  style: {
1537
1545
  width: "".concat(progress, "%"),
1538
1546
  minWidth: "100%",
@@ -1561,7 +1569,7 @@ var ProgressStepBar = /* @__PURE__ */ __name(function(param) {
1561
1569
  },
1562
1570
  className: "cursor-pointer bg-gray-100 rounded-full h-2 overflow-hidden",
1563
1571
  children: /* @__PURE__ */ jsx("div", {
1564
- className: clsx("cursor-pointer rounded-full h-2", stepIndex >= i ? "bg-green-400" : "bg-gray-100"),
1572
+ className: tw("cursor-pointer rounded-full h-2", stepIndex >= i ? "bg-green-400" : "bg-gray-100"),
1565
1573
  style: {
1566
1574
  width: "".concat(stepIndex >= i ? 100 : 0, "%"),
1567
1575
  transition: "width 0.3s ease"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "evelearn-theme",
3
- "version": "2.0.37",
3
+ "version": "2.0.39",
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
  }