evelearn-theme 2.0.30 → 2.0.32

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 (5) hide show
  1. package/dist/index.d.mts +56 -64
  2. package/dist/index.d.ts +56 -64
  3. package/dist/index.js +112 -187
  4. package/dist/index.mjs +114 -187
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -1,16 +1,15 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import * as React$1 from 'react';
3
- import React__default, { CSSProperties, ReactNode } from 'react';
2
+ import React$1, { CSSProperties, ReactNode } from 'react';
4
3
  import { Placement } from '@floating-ui/react';
5
4
 
6
5
  declare const PRIMARY_COLOR = "#00b4d8";
7
6
 
8
- type Props$h = {
7
+ type Props$g = {
9
8
  text: string;
10
9
  style?: CSSProperties | undefined;
11
10
  classNames?: string;
12
11
  };
13
- declare const ErrorText: ({ text, style, classNames }: Props$h) => react_jsx_runtime.JSX.Element;
12
+ declare const ErrorText: ({ text, style, classNames }: Props$g) => react_jsx_runtime.JSX.Element;
14
13
 
15
14
  declare const baseFieldStyle = "font-sans form-input h-11 w-full bg-white border-gray-200 dark:border-gray-500 dark:bg-slate-950 dark:text-gray-200 text-gray-700 dark:placeholder-gray-400 placeholder-gray-400 rounded-md px-2 py-1 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50";
16
15
  declare const createExerciseElementStyle = "flex flex-col justify-between space-y-2 w-full p-4 bg-white dark:bg-slate-800 rounded-xl text-gray-800 dark:text-gray-200 border-2 border-slate-200 dark:border-slate-400 overflow-hidden transition-all";
@@ -22,7 +21,7 @@ declare const headerTippyClass = "rounded-lg p-2 bg-slate-950 opacity-95 text-wh
22
21
  declare const headerButtonClass = "w-10 h-10 rounded-full dark:hover:bg-slate-600 hover:bg-slate-200 bg-transparent flex justify-center items-center flex justify-center items-center text-slate-600 dark:text-slate-100 hover:text-primary dark:hover:text-primary transition-colors duration-50";
23
22
 
24
23
  interface SpinnerProps {
25
- size?: 'base' | 'small';
24
+ size?: number | string;
26
25
  white?: boolean | string;
27
26
  visible?: boolean | string;
28
27
  }
@@ -35,21 +34,21 @@ declare const Spinner: {
35
34
  };
36
35
  };
37
36
 
38
- type Props$g = {
37
+ type Props$f = {
39
38
  loading: boolean;
40
39
  message?: string;
41
40
  };
42
- declare const NoResults: ({ loading, message }: Props$g) => react_jsx_runtime.JSX.Element;
41
+ declare const NoResults: ({ loading, message }: Props$f) => react_jsx_runtime.JSX.Element;
43
42
 
44
43
  interface ContainerProps {
45
44
  backgroundColor?: string;
46
45
  backgroundImage?: string;
47
- style?: React__default.CSSProperties;
46
+ style?: React$1.CSSProperties;
48
47
  onClick?: () => void;
49
48
  isDark?: boolean;
50
- children?: React__default.ReactNode;
49
+ children?: React$1.ReactNode;
51
50
  }
52
- declare const Container: React__default.FC<ContainerProps>;
51
+ declare const Container: React$1.FC<ContainerProps>;
53
52
 
54
53
  declare const Pill: ({ text }: {
55
54
  text: string;
@@ -58,36 +57,36 @@ declare const Pill: ({ text }: {
58
57
  type Step = {
59
58
  label: ReactNode;
60
59
  };
61
- type Props$f = {
60
+ type Props$e = {
62
61
  steps: Step[];
63
62
  activeStep: number;
64
63
  onStepPress: (s: number) => void;
65
64
  };
66
- declare const StepsComponent: ({ steps, activeStep, onStepPress }: Props$f) => react_jsx_runtime.JSX.Element;
65
+ declare const StepsComponent: ({ steps, activeStep, onStepPress }: Props$e) => react_jsx_runtime.JSX.Element;
67
66
 
68
- type Props$e = {
67
+ type Props$d = {
69
68
  inProp: boolean;
70
- children: React__default.ReactNode;
69
+ children: React$1.ReactNode;
71
70
  };
72
- declare const Fade: ({ children, inProp }: Props$e) => react_jsx_runtime.JSX.Element;
71
+ declare const Fade: ({ children, inProp }: Props$d) => react_jsx_runtime.JSX.Element;
73
72
 
74
- type Props$d = {
73
+ type Props$c = {
75
74
  visible: boolean;
76
75
  onClick: () => void;
77
76
  opacity?: number;
78
77
  };
79
- declare const Backdrop: ({ visible, onClick, opacity }: Props$d) => react_jsx_runtime.JSX.Element | null;
78
+ declare const Backdrop: ({ visible, onClick, opacity }: Props$c) => react_jsx_runtime.JSX.Element | null;
80
79
 
81
80
  type Point = 'sm' | 'md' | 'lg' | 'xl';
82
- declare const Breakpoint: React__default.FC<{
81
+ declare const Breakpoint: React$1.FC<{
83
82
  fromSize?: Point;
84
83
  toSize?: Point;
85
- children: React__default.ReactNode;
84
+ children: React$1.ReactNode;
86
85
  }>;
87
86
 
88
87
  interface BaseModalProps {
89
88
  visible: boolean;
90
- children: React__default.ReactNode;
89
+ children: React$1.ReactNode;
91
90
  appear?: boolean;
92
91
  dismissable?: boolean;
93
92
  dismissOnBackdropClick?: boolean;
@@ -102,60 +101,60 @@ type ModalProps = BaseModalProps;
102
101
  declare const Modal: ({ visible, children, fullscreen, displayDark, dismissLink, bgOpacity, onDismissed, dismissable, dismissOnBackdropClick, style, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
103
102
 
104
103
  type OverlayProps = BaseModalProps & {
105
- children?: React__default.ReactNode;
104
+ children?: React$1.ReactNode;
106
105
  withContainer?: boolean;
107
106
  opacity?: number;
108
107
  isDark?: boolean;
109
108
  zIndex?: number;
110
109
  onClick?: () => void;
111
110
  };
112
- declare const Overlay: ({ visible, onDismissed, onClick, zIndex, isDark, children, opacity, withContainer, }: OverlayProps) => React__default.ReactPortal | null;
111
+ declare const Overlay: ({ visible, onDismissed, onClick, zIndex, isDark, children, opacity, withContainer, }: OverlayProps) => React$1.ReactPortal | null;
113
112
 
114
- interface Props$c {
113
+ interface Props$b {
115
114
  disabled?: boolean;
116
115
  kind?: 'primary' | 'secondary' | 'base' | 'warning' | 'alert' | 'gray' | 'green' | 'teal' | 'indigo';
117
116
  size?: 'small' | 'fixed' | 'large';
118
117
  type?: 'button' | 'submit';
119
118
  loading?: boolean;
120
- children: React__default.ReactNode;
121
- onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
119
+ children: React$1.ReactNode;
120
+ onClick?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
122
121
  }
123
- declare const Button: ({ disabled, loading, onClick, kind, size, type, children }: Props$c) => react_jsx_runtime.JSX.Element;
122
+ declare const Button: ({ disabled, loading, onClick, kind, size, type, children }: Props$b) => react_jsx_runtime.JSX.Element;
124
123
 
125
- interface Props$b {
124
+ interface Props$a {
126
125
  disabled?: boolean;
127
126
  color?: 'primary' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'cyan';
128
127
  type?: 'button' | 'submit';
129
128
  active?: boolean;
130
- children: React__default.ReactNode;
129
+ children: React$1.ReactNode;
131
130
  loading?: boolean;
132
131
  className?: string;
133
132
  size?: 'big' | 'base' | 'small' | 'square';
134
- onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
133
+ onClick?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
135
134
  }
136
- declare const FunButton: React__default.FC<Props$b>;
135
+ declare const FunButton: React$1.FC<Props$a>;
137
136
 
138
- interface Props$a {
137
+ interface Props$9 {
139
138
  disabled?: boolean;
140
139
  color?: 'primary' | 'red' | 'green' | 'purple' | 'teal' | 'yellow';
141
140
  type?: 'button' | 'submit';
142
141
  active?: boolean;
143
- children: React__default.ReactNode;
142
+ children: React$1.ReactNode;
144
143
  className?: string;
145
144
  size?: number;
146
- onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
145
+ onClick?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
147
146
  }
148
- declare const FunRoundButton: ({ onClick, disabled, type, children, color, active, className, size }: Props$a) => react_jsx_runtime.JSX.Element;
147
+ declare const FunRoundButton: ({ onClick, disabled, type, children, color, active, className, size }: Props$9) => react_jsx_runtime.JSX.Element;
149
148
 
150
- type Props$9 = {
149
+ type Props$8 = {
151
150
  name: string;
152
- labelText: React__default.ReactNode;
151
+ labelText: React$1.ReactNode;
153
152
  onChange?: (value: boolean) => void;
154
153
  isLarge?: boolean;
155
154
  isDisabled?: boolean;
156
155
  };
157
156
  declare const Checkbox: {
158
- ({ name, labelText, isLarge, onChange, isDisabled }: Props$9): react_jsx_runtime.JSX.Element;
157
+ ({ name, labelText, isLarge, onChange, isDisabled }: Props$8): react_jsx_runtime.JSX.Element;
159
158
  Multi: ({ name, hasMultipleAnswers, index, isLarge, allOptionsName }: MultiChoiceCheckBoxProps) => react_jsx_runtime.JSX.Element;
160
159
  };
161
160
  type MultiChoiceCheckBoxProps = {
@@ -166,22 +165,22 @@ type MultiChoiceCheckBoxProps = {
166
165
  isLarge?: boolean;
167
166
  };
168
167
 
169
- type Props$8 = {
168
+ type Props$7 = {
170
169
  name: string;
171
170
  isLarge?: boolean;
172
171
  labelText?: string;
173
172
  option: string;
174
173
  onSelect?: () => void;
175
174
  };
176
- declare const RadioOption: ({ name, isLarge, labelText, option, onSelect }: Props$8) => react_jsx_runtime.JSX.Element;
175
+ declare const RadioOption: ({ name, isLarge, labelText, option, onSelect }: Props$7) => react_jsx_runtime.JSX.Element;
177
176
 
178
- interface Props$7 {
177
+ interface Props$6 {
179
178
  title: string;
180
179
  cancelText?: string;
181
180
  isVisible: boolean;
182
181
  confirmText?: string;
183
182
  isSingleAction?: boolean;
184
- setDontShowAgain?: React__default.Dispatch<React__default.SetStateAction<boolean>>;
183
+ setDontShowAgain?: React$1.Dispatch<React$1.SetStateAction<boolean>>;
185
184
  dontShowAgain?: boolean;
186
185
  borderColor?: string;
187
186
  buttonColor?: 'base' | 'primary' | 'secondary' | 'warning' | 'alert' | 'gray' | undefined;
@@ -189,9 +188,9 @@ interface Props$7 {
189
188
  onDismissed?: () => void;
190
189
  onCancel?: () => void;
191
190
  isDark?: boolean;
192
- children?: React__default.ReactNode;
191
+ children?: React$1.ReactNode;
193
192
  }
194
- declare const BAWrapper: React__default.FC<Props$7>;
193
+ declare const BAWrapper: React$1.FC<Props$6>;
195
194
 
196
195
  type IconInfoProps = {
197
196
  content: string;
@@ -201,19 +200,19 @@ type IconInfoProps = {
201
200
  };
202
201
  declare const IconInfo: ({ content, icon, number, color }: IconInfoProps) => react_jsx_runtime.JSX.Element;
203
202
 
204
- interface Props$6 {
203
+ interface Props$5 {
205
204
  type?: 'error' | 'warning' | 'info';
206
205
  isDismissible?: boolean;
207
206
  onDismiss?: () => void;
208
207
  isVisible: boolean;
209
208
  }
210
- declare const NoticeBox: React__default.FC<Props$6 & React__default.HTMLAttributes<HTMLDivElement>>;
209
+ declare const NoticeBox: React$1.FC<Props$5 & React$1.HTMLAttributes<HTMLDivElement>>;
211
210
 
212
- type Props$5 = {
211
+ type Props$4 = {
213
212
  avgRating: number;
214
213
  large?: boolean;
215
214
  };
216
- declare const RatingStars: ({ avgRating, large }: Props$5) => react_jsx_runtime.JSX.Element;
215
+ declare const RatingStars: ({ avgRating, large }: Props$4) => react_jsx_runtime.JSX.Element;
217
216
 
218
217
  interface SliderProps {
219
218
  min: number;
@@ -250,13 +249,13 @@ type FormikProps = {
250
249
  label: string;
251
250
  name: string;
252
251
  };
253
- type Props$4 = {
252
+ type Props$3 = {
254
253
  label: string;
255
254
  onChange: (bool: boolean) => void;
256
255
  value: boolean;
257
256
  };
258
257
  declare const ToggleSwitch: {
259
- ({ label, onChange, value }: Props$4): react_jsx_runtime.JSX.Element;
258
+ ({ label, onChange, value }: Props$3): react_jsx_runtime.JSX.Element;
260
259
  Formik: ({ label, name }: FormikProps) => react_jsx_runtime.JSX.Element;
261
260
  };
262
261
 
@@ -282,9 +281,9 @@ declare const ProgressBar: {
282
281
  ({ progress }: {
283
282
  progress: number;
284
283
  }): react_jsx_runtime.JSX.Element;
285
- Step: ({ steps, stepIndex, onStepClick, color }: Props$3) => react_jsx_runtime.JSX.Element;
284
+ Step: ({ steps, stepIndex, onStepClick, color }: Props$2) => react_jsx_runtime.JSX.Element;
286
285
  };
287
- type Props$3 = {
286
+ type Props$2 = {
288
287
  steps: {
289
288
  label: string;
290
289
  }[];
@@ -293,32 +292,25 @@ type Props$3 = {
293
292
  onStepClick?: (i: number) => void;
294
293
  };
295
294
 
296
- type Props$2 = {
295
+ type Props$1 = {
297
296
  twColor?: string;
298
297
  percentage: number;
299
298
  radius: number;
300
299
  fill?: string;
301
300
  strokeWidth?: number;
302
301
  };
303
- declare const CircleProgress: ({ twColor, percentage, radius, fill, strokeWidth }: Props$2) => react_jsx_runtime.JSX.Element;
302
+ declare const CircleProgress: ({ twColor, percentage, radius, fill, strokeWidth }: Props$1) => react_jsx_runtime.JSX.Element;
304
303
 
305
- type Props$1 = {
304
+ type Props = {
306
305
  twColor?: string;
307
306
  percentage: number;
308
307
  label: string;
309
308
  };
310
309
  declare const CourseProgress: {
311
- ({ twColor, percentage, label }: Props$1): react_jsx_runtime.JSX.Element;
312
- Small: ({ twColor, percentage, label }: Props$1) => react_jsx_runtime.JSX.Element;
310
+ ({ twColor, percentage, label }: Props): react_jsx_runtime.JSX.Element;
311
+ Small: ({ twColor, percentage, label }: Props) => react_jsx_runtime.JSX.Element;
313
312
  };
314
313
 
315
314
  declare const ScrollProgress: () => react_jsx_runtime.JSX.Element;
316
315
 
317
- type Props = {
318
- visible: boolean;
319
- };
320
- declare const OverlaySpinner: ({ visible }: Props) => React$1.ReactPortal | null;
321
-
322
- declare const AnimateLogo: () => react_jsx_runtime.JSX.Element;
323
-
324
- export { AnimateLogo, Backdrop, BAWrapper as BottomAlert, Breakpoint, Button, Checkbox, CircleProgress, Container, CourseProgress, ErrorText, Fade, FunButton, FunRoundButton, IconInfo, Modal, NoResults, NoticeBox, Overlay, OverlaySpinner, PRIMARY_COLOR, Pill, ProgressBar, ProgressBarSimple, RadioOption, RatingStars, ScrollProgress, Slider, Spinner, StepsComponent, Tippy, ToggleSwitch, UserContentSwitcher, baseFieldStyle, createExerciseElementStyle, exerciseDeleteButton, exerciseEditButton, headerButtonClass, headerTippyClass, tippyClassname, xIconButton };
316
+ export { Backdrop, BAWrapper as BottomAlert, Breakpoint, Button, Checkbox, CircleProgress, Container, CourseProgress, ErrorText, Fade, FunButton, FunRoundButton, IconInfo, Modal, NoResults, NoticeBox, Overlay, PRIMARY_COLOR, Pill, ProgressBar, ProgressBarSimple, RadioOption, RatingStars, ScrollProgress, Slider, Spinner, StepsComponent, Tippy, ToggleSwitch, UserContentSwitcher, baseFieldStyle, createExerciseElementStyle, exerciseDeleteButton, exerciseEditButton, headerButtonClass, headerTippyClass, tippyClassname, xIconButton };
package/dist/index.d.ts CHANGED
@@ -1,16 +1,15 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import * as React$1 from 'react';
3
- import React__default, { CSSProperties, ReactNode } from 'react';
2
+ import React$1, { CSSProperties, ReactNode } from 'react';
4
3
  import { Placement } from '@floating-ui/react';
5
4
 
6
5
  declare const PRIMARY_COLOR = "#00b4d8";
7
6
 
8
- type Props$h = {
7
+ type Props$g = {
9
8
  text: string;
10
9
  style?: CSSProperties | undefined;
11
10
  classNames?: string;
12
11
  };
13
- declare const ErrorText: ({ text, style, classNames }: Props$h) => react_jsx_runtime.JSX.Element;
12
+ declare const ErrorText: ({ text, style, classNames }: Props$g) => react_jsx_runtime.JSX.Element;
14
13
 
15
14
  declare const baseFieldStyle = "font-sans form-input h-11 w-full bg-white border-gray-200 dark:border-gray-500 dark:bg-slate-950 dark:text-gray-200 text-gray-700 dark:placeholder-gray-400 placeholder-gray-400 rounded-md px-2 py-1 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50";
16
15
  declare const createExerciseElementStyle = "flex flex-col justify-between space-y-2 w-full p-4 bg-white dark:bg-slate-800 rounded-xl text-gray-800 dark:text-gray-200 border-2 border-slate-200 dark:border-slate-400 overflow-hidden transition-all";
@@ -22,7 +21,7 @@ declare const headerTippyClass = "rounded-lg p-2 bg-slate-950 opacity-95 text-wh
22
21
  declare const headerButtonClass = "w-10 h-10 rounded-full dark:hover:bg-slate-600 hover:bg-slate-200 bg-transparent flex justify-center items-center flex justify-center items-center text-slate-600 dark:text-slate-100 hover:text-primary dark:hover:text-primary transition-colors duration-50";
23
22
 
24
23
  interface SpinnerProps {
25
- size?: 'base' | 'small';
24
+ size?: number | string;
26
25
  white?: boolean | string;
27
26
  visible?: boolean | string;
28
27
  }
@@ -35,21 +34,21 @@ declare const Spinner: {
35
34
  };
36
35
  };
37
36
 
38
- type Props$g = {
37
+ type Props$f = {
39
38
  loading: boolean;
40
39
  message?: string;
41
40
  };
42
- declare const NoResults: ({ loading, message }: Props$g) => react_jsx_runtime.JSX.Element;
41
+ declare const NoResults: ({ loading, message }: Props$f) => react_jsx_runtime.JSX.Element;
43
42
 
44
43
  interface ContainerProps {
45
44
  backgroundColor?: string;
46
45
  backgroundImage?: string;
47
- style?: React__default.CSSProperties;
46
+ style?: React$1.CSSProperties;
48
47
  onClick?: () => void;
49
48
  isDark?: boolean;
50
- children?: React__default.ReactNode;
49
+ children?: React$1.ReactNode;
51
50
  }
52
- declare const Container: React__default.FC<ContainerProps>;
51
+ declare const Container: React$1.FC<ContainerProps>;
53
52
 
54
53
  declare const Pill: ({ text }: {
55
54
  text: string;
@@ -58,36 +57,36 @@ declare const Pill: ({ text }: {
58
57
  type Step = {
59
58
  label: ReactNode;
60
59
  };
61
- type Props$f = {
60
+ type Props$e = {
62
61
  steps: Step[];
63
62
  activeStep: number;
64
63
  onStepPress: (s: number) => void;
65
64
  };
66
- declare const StepsComponent: ({ steps, activeStep, onStepPress }: Props$f) => react_jsx_runtime.JSX.Element;
65
+ declare const StepsComponent: ({ steps, activeStep, onStepPress }: Props$e) => react_jsx_runtime.JSX.Element;
67
66
 
68
- type Props$e = {
67
+ type Props$d = {
69
68
  inProp: boolean;
70
- children: React__default.ReactNode;
69
+ children: React$1.ReactNode;
71
70
  };
72
- declare const Fade: ({ children, inProp }: Props$e) => react_jsx_runtime.JSX.Element;
71
+ declare const Fade: ({ children, inProp }: Props$d) => react_jsx_runtime.JSX.Element;
73
72
 
74
- type Props$d = {
73
+ type Props$c = {
75
74
  visible: boolean;
76
75
  onClick: () => void;
77
76
  opacity?: number;
78
77
  };
79
- declare const Backdrop: ({ visible, onClick, opacity }: Props$d) => react_jsx_runtime.JSX.Element | null;
78
+ declare const Backdrop: ({ visible, onClick, opacity }: Props$c) => react_jsx_runtime.JSX.Element | null;
80
79
 
81
80
  type Point = 'sm' | 'md' | 'lg' | 'xl';
82
- declare const Breakpoint: React__default.FC<{
81
+ declare const Breakpoint: React$1.FC<{
83
82
  fromSize?: Point;
84
83
  toSize?: Point;
85
- children: React__default.ReactNode;
84
+ children: React$1.ReactNode;
86
85
  }>;
87
86
 
88
87
  interface BaseModalProps {
89
88
  visible: boolean;
90
- children: React__default.ReactNode;
89
+ children: React$1.ReactNode;
91
90
  appear?: boolean;
92
91
  dismissable?: boolean;
93
92
  dismissOnBackdropClick?: boolean;
@@ -102,60 +101,60 @@ type ModalProps = BaseModalProps;
102
101
  declare const Modal: ({ visible, children, fullscreen, displayDark, dismissLink, bgOpacity, onDismissed, dismissable, dismissOnBackdropClick, style, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
103
102
 
104
103
  type OverlayProps = BaseModalProps & {
105
- children?: React__default.ReactNode;
104
+ children?: React$1.ReactNode;
106
105
  withContainer?: boolean;
107
106
  opacity?: number;
108
107
  isDark?: boolean;
109
108
  zIndex?: number;
110
109
  onClick?: () => void;
111
110
  };
112
- declare const Overlay: ({ visible, onDismissed, onClick, zIndex, isDark, children, opacity, withContainer, }: OverlayProps) => React__default.ReactPortal | null;
111
+ declare const Overlay: ({ visible, onDismissed, onClick, zIndex, isDark, children, opacity, withContainer, }: OverlayProps) => React$1.ReactPortal | null;
113
112
 
114
- interface Props$c {
113
+ interface Props$b {
115
114
  disabled?: boolean;
116
115
  kind?: 'primary' | 'secondary' | 'base' | 'warning' | 'alert' | 'gray' | 'green' | 'teal' | 'indigo';
117
116
  size?: 'small' | 'fixed' | 'large';
118
117
  type?: 'button' | 'submit';
119
118
  loading?: boolean;
120
- children: React__default.ReactNode;
121
- onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
119
+ children: React$1.ReactNode;
120
+ onClick?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
122
121
  }
123
- declare const Button: ({ disabled, loading, onClick, kind, size, type, children }: Props$c) => react_jsx_runtime.JSX.Element;
122
+ declare const Button: ({ disabled, loading, onClick, kind, size, type, children }: Props$b) => react_jsx_runtime.JSX.Element;
124
123
 
125
- interface Props$b {
124
+ interface Props$a {
126
125
  disabled?: boolean;
127
126
  color?: 'primary' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'cyan';
128
127
  type?: 'button' | 'submit';
129
128
  active?: boolean;
130
- children: React__default.ReactNode;
129
+ children: React$1.ReactNode;
131
130
  loading?: boolean;
132
131
  className?: string;
133
132
  size?: 'big' | 'base' | 'small' | 'square';
134
- onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
133
+ onClick?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
135
134
  }
136
- declare const FunButton: React__default.FC<Props$b>;
135
+ declare const FunButton: React$1.FC<Props$a>;
137
136
 
138
- interface Props$a {
137
+ interface Props$9 {
139
138
  disabled?: boolean;
140
139
  color?: 'primary' | 'red' | 'green' | 'purple' | 'teal' | 'yellow';
141
140
  type?: 'button' | 'submit';
142
141
  active?: boolean;
143
- children: React__default.ReactNode;
142
+ children: React$1.ReactNode;
144
143
  className?: string;
145
144
  size?: number;
146
- onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
145
+ onClick?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
147
146
  }
148
- declare const FunRoundButton: ({ onClick, disabled, type, children, color, active, className, size }: Props$a) => react_jsx_runtime.JSX.Element;
147
+ declare const FunRoundButton: ({ onClick, disabled, type, children, color, active, className, size }: Props$9) => react_jsx_runtime.JSX.Element;
149
148
 
150
- type Props$9 = {
149
+ type Props$8 = {
151
150
  name: string;
152
- labelText: React__default.ReactNode;
151
+ labelText: React$1.ReactNode;
153
152
  onChange?: (value: boolean) => void;
154
153
  isLarge?: boolean;
155
154
  isDisabled?: boolean;
156
155
  };
157
156
  declare const Checkbox: {
158
- ({ name, labelText, isLarge, onChange, isDisabled }: Props$9): react_jsx_runtime.JSX.Element;
157
+ ({ name, labelText, isLarge, onChange, isDisabled }: Props$8): react_jsx_runtime.JSX.Element;
159
158
  Multi: ({ name, hasMultipleAnswers, index, isLarge, allOptionsName }: MultiChoiceCheckBoxProps) => react_jsx_runtime.JSX.Element;
160
159
  };
161
160
  type MultiChoiceCheckBoxProps = {
@@ -166,22 +165,22 @@ type MultiChoiceCheckBoxProps = {
166
165
  isLarge?: boolean;
167
166
  };
168
167
 
169
- type Props$8 = {
168
+ type Props$7 = {
170
169
  name: string;
171
170
  isLarge?: boolean;
172
171
  labelText?: string;
173
172
  option: string;
174
173
  onSelect?: () => void;
175
174
  };
176
- declare const RadioOption: ({ name, isLarge, labelText, option, onSelect }: Props$8) => react_jsx_runtime.JSX.Element;
175
+ declare const RadioOption: ({ name, isLarge, labelText, option, onSelect }: Props$7) => react_jsx_runtime.JSX.Element;
177
176
 
178
- interface Props$7 {
177
+ interface Props$6 {
179
178
  title: string;
180
179
  cancelText?: string;
181
180
  isVisible: boolean;
182
181
  confirmText?: string;
183
182
  isSingleAction?: boolean;
184
- setDontShowAgain?: React__default.Dispatch<React__default.SetStateAction<boolean>>;
183
+ setDontShowAgain?: React$1.Dispatch<React$1.SetStateAction<boolean>>;
185
184
  dontShowAgain?: boolean;
186
185
  borderColor?: string;
187
186
  buttonColor?: 'base' | 'primary' | 'secondary' | 'warning' | 'alert' | 'gray' | undefined;
@@ -189,9 +188,9 @@ interface Props$7 {
189
188
  onDismissed?: () => void;
190
189
  onCancel?: () => void;
191
190
  isDark?: boolean;
192
- children?: React__default.ReactNode;
191
+ children?: React$1.ReactNode;
193
192
  }
194
- declare const BAWrapper: React__default.FC<Props$7>;
193
+ declare const BAWrapper: React$1.FC<Props$6>;
195
194
 
196
195
  type IconInfoProps = {
197
196
  content: string;
@@ -201,19 +200,19 @@ type IconInfoProps = {
201
200
  };
202
201
  declare const IconInfo: ({ content, icon, number, color }: IconInfoProps) => react_jsx_runtime.JSX.Element;
203
202
 
204
- interface Props$6 {
203
+ interface Props$5 {
205
204
  type?: 'error' | 'warning' | 'info';
206
205
  isDismissible?: boolean;
207
206
  onDismiss?: () => void;
208
207
  isVisible: boolean;
209
208
  }
210
- declare const NoticeBox: React__default.FC<Props$6 & React__default.HTMLAttributes<HTMLDivElement>>;
209
+ declare const NoticeBox: React$1.FC<Props$5 & React$1.HTMLAttributes<HTMLDivElement>>;
211
210
 
212
- type Props$5 = {
211
+ type Props$4 = {
213
212
  avgRating: number;
214
213
  large?: boolean;
215
214
  };
216
- declare const RatingStars: ({ avgRating, large }: Props$5) => react_jsx_runtime.JSX.Element;
215
+ declare const RatingStars: ({ avgRating, large }: Props$4) => react_jsx_runtime.JSX.Element;
217
216
 
218
217
  interface SliderProps {
219
218
  min: number;
@@ -250,13 +249,13 @@ type FormikProps = {
250
249
  label: string;
251
250
  name: string;
252
251
  };
253
- type Props$4 = {
252
+ type Props$3 = {
254
253
  label: string;
255
254
  onChange: (bool: boolean) => void;
256
255
  value: boolean;
257
256
  };
258
257
  declare const ToggleSwitch: {
259
- ({ label, onChange, value }: Props$4): react_jsx_runtime.JSX.Element;
258
+ ({ label, onChange, value }: Props$3): react_jsx_runtime.JSX.Element;
260
259
  Formik: ({ label, name }: FormikProps) => react_jsx_runtime.JSX.Element;
261
260
  };
262
261
 
@@ -282,9 +281,9 @@ declare const ProgressBar: {
282
281
  ({ progress }: {
283
282
  progress: number;
284
283
  }): react_jsx_runtime.JSX.Element;
285
- Step: ({ steps, stepIndex, onStepClick, color }: Props$3) => react_jsx_runtime.JSX.Element;
284
+ Step: ({ steps, stepIndex, onStepClick, color }: Props$2) => react_jsx_runtime.JSX.Element;
286
285
  };
287
- type Props$3 = {
286
+ type Props$2 = {
288
287
  steps: {
289
288
  label: string;
290
289
  }[];
@@ -293,32 +292,25 @@ type Props$3 = {
293
292
  onStepClick?: (i: number) => void;
294
293
  };
295
294
 
296
- type Props$2 = {
295
+ type Props$1 = {
297
296
  twColor?: string;
298
297
  percentage: number;
299
298
  radius: number;
300
299
  fill?: string;
301
300
  strokeWidth?: number;
302
301
  };
303
- declare const CircleProgress: ({ twColor, percentage, radius, fill, strokeWidth }: Props$2) => react_jsx_runtime.JSX.Element;
302
+ declare const CircleProgress: ({ twColor, percentage, radius, fill, strokeWidth }: Props$1) => react_jsx_runtime.JSX.Element;
304
303
 
305
- type Props$1 = {
304
+ type Props = {
306
305
  twColor?: string;
307
306
  percentage: number;
308
307
  label: string;
309
308
  };
310
309
  declare const CourseProgress: {
311
- ({ twColor, percentage, label }: Props$1): react_jsx_runtime.JSX.Element;
312
- Small: ({ twColor, percentage, label }: Props$1) => react_jsx_runtime.JSX.Element;
310
+ ({ twColor, percentage, label }: Props): react_jsx_runtime.JSX.Element;
311
+ Small: ({ twColor, percentage, label }: Props) => react_jsx_runtime.JSX.Element;
313
312
  };
314
313
 
315
314
  declare const ScrollProgress: () => react_jsx_runtime.JSX.Element;
316
315
 
317
- type Props = {
318
- visible: boolean;
319
- };
320
- declare const OverlaySpinner: ({ visible }: Props) => React$1.ReactPortal | null;
321
-
322
- declare const AnimateLogo: () => react_jsx_runtime.JSX.Element;
323
-
324
- export { AnimateLogo, Backdrop, BAWrapper as BottomAlert, Breakpoint, Button, Checkbox, CircleProgress, Container, CourseProgress, ErrorText, Fade, FunButton, FunRoundButton, IconInfo, Modal, NoResults, NoticeBox, Overlay, OverlaySpinner, PRIMARY_COLOR, Pill, ProgressBar, ProgressBarSimple, RadioOption, RatingStars, ScrollProgress, Slider, Spinner, StepsComponent, Tippy, ToggleSwitch, UserContentSwitcher, baseFieldStyle, createExerciseElementStyle, exerciseDeleteButton, exerciseEditButton, headerButtonClass, headerTippyClass, tippyClassname, xIconButton };
316
+ export { Backdrop, BAWrapper as BottomAlert, Breakpoint, Button, Checkbox, CircleProgress, Container, CourseProgress, ErrorText, Fade, FunButton, FunRoundButton, IconInfo, Modal, NoResults, NoticeBox, Overlay, PRIMARY_COLOR, Pill, ProgressBar, ProgressBarSimple, RadioOption, RatingStars, ScrollProgress, Slider, Spinner, StepsComponent, Tippy, ToggleSwitch, UserContentSwitcher, baseFieldStyle, createExerciseElementStyle, exerciseDeleteButton, exerciseEditButton, headerButtonClass, headerTippyClass, tippyClassname, xIconButton };
package/dist/index.js CHANGED
@@ -172,39 +172,95 @@ var headerTippyClass = "rounded-lg p-2 bg-slate-950 opacity-95 text-white font-m
172
172
  var headerButtonClass = "w-10 h-10 rounded-full dark:hover:bg-slate-600 hover:bg-slate-200 bg-transparent flex justify-center items-center flex justify-center items-center text-slate-600 dark:text-slate-100 hover:text-primary dark:hover:text-primary transition-colors duration-50";
173
173
  var Spinner = /* @__PURE__ */ __name(function(param) {
174
174
  var _param_visible = param.visible, visible = _param_visible === void 0 ? true : _param_visible, size = param.size, isWhite = param.white;
175
+ var newSize = 32;
176
+ if (typeof size === "string") {
177
+ if (size === "base") {
178
+ size = 32;
179
+ } else if (size === "large") {
180
+ size = 44;
181
+ }
182
+ }
175
183
  if (visible === false) return null;
176
- var color = isWhite ? "stroke-white/90" : "stroke-slate-600/80";
177
- var bgColor = isWhite ? "stroke-white/20" : "stroke-slate-500/20";
178
- var dimensions = size === "small" ? "w-5 h-5" : "w-8 h-8";
179
- var spinnerClasses = "\n absolute\n top-0\n animate-spin\n ".concat(dimensions, "\n ");
180
- return /* @__PURE__ */ jsxRuntime.jsxs("div", {
184
+ return /* @__PURE__ */ jsxRuntime.jsx("div", {
185
+ style: {
186
+ height: newSize + 2,
187
+ width: newSize + 2
188
+ },
181
189
  className: "relative h-8 w-8 flex justify-center items-center",
182
- children: [
183
- /* @__PURE__ */ jsxRuntime.jsx("svg", {
184
- className: "absolute top-0 ".concat(dimensions, " ").concat(bgColor),
185
- viewBox: "0 0 24 24",
186
- fill: "none",
187
- strokeWidth: "2.4",
188
- children: /* @__PURE__ */ jsxRuntime.jsx("circle", {
189
- cx: "12",
190
- cy: "12",
191
- r: "10"
192
- })
193
- }),
194
- /* @__PURE__ */ jsxRuntime.jsx("svg", {
195
- className: spinnerClasses,
196
- viewBox: "0 0 24 24",
197
- fill: "none",
198
- strokeWidth: "2.4",
199
- strokeLinecap: "round",
200
- children: /* @__PURE__ */ jsxRuntime.jsx("path", {
201
- d: "\n M 12 2 \n A 10 10 0 0 1 22 12 \n A 10 10 0 0 1 12 22 \n A 10 10 0 0 1 2 12 \n A 10 10 0 0 1 12 2\n ",
202
- strokeDasharray: "13 18.4",
203
- stroke: "inherit",
204
- className: color
190
+ children: /* @__PURE__ */ jsxRuntime.jsxs("svg", {
191
+ xmlns: "http://www.w3.org/2000/svg",
192
+ viewBox: "0 0 200 200",
193
+ width: newSize,
194
+ height: newSize,
195
+ children: [
196
+ /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", {
197
+ id: "a10",
198
+ cx: "0.66",
199
+ cy: "0.313",
200
+ fx: "0.66",
201
+ fy: "0.313",
202
+ gradientTransform: "scale(1.5)",
203
+ children: [
204
+ /* @__PURE__ */ jsxRuntime.jsx("stop", {
205
+ offset: "0",
206
+ stopColor: isWhite ? "#FFF" : PRIMARY_COLOR
207
+ }),
208
+ /* @__PURE__ */ jsxRuntime.jsx("stop", {
209
+ offset: "0.3",
210
+ stopColor: isWhite ? "#FFF" : PRIMARY_COLOR,
211
+ stopOpacity: "0.9"
212
+ }),
213
+ /* @__PURE__ */ jsxRuntime.jsx("stop", {
214
+ offset: "0.6",
215
+ stopColor: isWhite ? "#FFF" : PRIMARY_COLOR,
216
+ stopOpacity: "0.6"
217
+ }),
218
+ /* @__PURE__ */ jsxRuntime.jsx("stop", {
219
+ offset: "0.8",
220
+ stopColor: isWhite ? "#FFF" : PRIMARY_COLOR,
221
+ stopOpacity: "0.3"
222
+ }),
223
+ /* @__PURE__ */ jsxRuntime.jsx("stop", {
224
+ offset: "1",
225
+ stopColor: isWhite ? "#FFF" : PRIMARY_COLOR,
226
+ stopOpacity: "0"
227
+ })
228
+ ]
229
+ }),
230
+ /* @__PURE__ */ jsxRuntime.jsx("circle", {
231
+ cx: "100",
232
+ cy: "100",
233
+ r: "70",
234
+ fill: "none",
235
+ stroke: "url(#a10)",
236
+ strokeDasharray: "200 1000",
237
+ strokeLinecap: "round",
238
+ strokeWidth: "17",
239
+ transformOrigin: "center",
240
+ children: /* @__PURE__ */ jsxRuntime.jsx("animateTransform", {
241
+ attributeName: "transform",
242
+ calcMode: "spline",
243
+ dur: "1.8",
244
+ keySplines: "0 0 1 1",
245
+ keyTimes: "0;1",
246
+ repeatCount: "indefinite",
247
+ type: "rotate",
248
+ values: "360;0"
249
+ })
250
+ }),
251
+ /* @__PURE__ */ jsxRuntime.jsx("circle", {
252
+ cx: "100",
253
+ cy: "100",
254
+ r: "70",
255
+ fill: "none",
256
+ stroke: "#FFF",
257
+ strokeLinecap: "round",
258
+ strokeWidth: "17",
259
+ opacity: "0.5",
260
+ transformOrigin: "center"
205
261
  })
206
- })
207
- ]
262
+ ]
263
+ })
208
264
  });
209
265
  }, "Spinner");
210
266
  var SpinnerCentered = /* @__PURE__ */ __name(function(props) {
@@ -439,8 +495,30 @@ var Button = /* @__PURE__ */ __name(function(param) {
439
495
  className: "w-full max-h-11",
440
496
  children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", {
441
497
  className: "flex w-full justify-center items-center",
442
- children: /* @__PURE__ */ jsxRuntime.jsx(Spinner_default, {
443
- white: true
498
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", {
499
+ xmlns: "http://www.w3.org/2000/svg",
500
+ fill: "none",
501
+ stroke: "currentColor",
502
+ strokeLinecap: "round",
503
+ strokeLinejoin: "round",
504
+ strokeWidth: "2.5",
505
+ className: "size-10",
506
+ viewBox: "0 0 24 24",
507
+ children: /* @__PURE__ */ jsxRuntime.jsx("path", {
508
+ d: "M2 16s9-15 20-4C11 23 2 8 2 8",
509
+ strokeDasharray: "70",
510
+ strokeDashoffset: "70",
511
+ children: /* @__PURE__ */ jsxRuntime.jsx("animate", {
512
+ attributeName: "stroke-dashoffset",
513
+ calcMode: "spline",
514
+ dur: "2",
515
+ keySplines: "0 0 1 1",
516
+ repeatCount: "indefinite",
517
+ from: "70",
518
+ to: "-70",
519
+ fill: "freeze"
520
+ })
521
+ })
444
522
  })
445
523
  }) : children
446
524
  })
@@ -1246,7 +1324,7 @@ var Formik = /* @__PURE__ */ __name(function(param) {
1246
1324
  onChange: handleChange
1247
1325
  }),
1248
1326
  /* @__PURE__ */ jsxRuntime.jsx("div", {
1249
- className: clsx__default.default("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-[#00b4d8]" : "bg-[#64748b]"),
1327
+ 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"),
1250
1328
  children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, {
1251
1329
  className: "w-4 h-4 bg-white rounded-full absolute top-1",
1252
1330
  initial: false,
@@ -1287,7 +1365,7 @@ var ToggleSwitch = /* @__PURE__ */ __name(function(param) {
1287
1365
  onChange: handleChange
1288
1366
  }),
1289
1367
  /* @__PURE__ */ jsxRuntime.jsx("div", {
1290
- className: clsx__default.default("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-[#00b4d8]" : "bg-[#64748b]"),
1368
+ 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"),
1291
1369
  children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, {
1292
1370
  className: "w-4 h-4 bg-white rounded-full absolute top-1",
1293
1371
  initial: false,
@@ -1687,158 +1765,6 @@ var ScrollProgress = /* @__PURE__ */ __name(function() {
1687
1765
  });
1688
1766
  }, "ScrollProgress");
1689
1767
  var ScrollProgress_default = ScrollProgress;
1690
- var AnimateLogo = /* @__PURE__ */ __name(function() {
1691
- var _react_useState = _sliced_to_array(react.useState(false), 2), isFirefox = _react_useState[0], setIsFirefox = _react_useState[1];
1692
- react.useEffect(function() {
1693
- var userAgent = window.navigator.userAgent;
1694
- setIsFirefox(userAgent.indexOf("Firefox") > -1);
1695
- }, []);
1696
- if (isFirefox) {
1697
- return /* @__PURE__ */ jsxRuntime.jsx("svg", {
1698
- xmlns: "http://www.w3.org/2000/svg",
1699
- className: "animate-spin",
1700
- viewBox: "0 0 600 600",
1701
- children: /* @__PURE__ */ jsxRuntime.jsx("g", {
1702
- height: 176,
1703
- width: 176,
1704
- children: /* @__PURE__ */ jsxRuntime.jsxs("path", {
1705
- className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
1706
- stroke: "currentColor",
1707
- fill: "none",
1708
- strokeLinecap: "round",
1709
- strokeMiterlimit: "10",
1710
- strokeWidth: "82",
1711
- strokeDasharray: "1600",
1712
- d: "M466.49 164.79c17.79 34.76 25.48 75.66 19.08 118.96-11.28 76.36-67.11 139.06-141.89 158.25-127.11 32.61-243.49-61.27-245.86-184.81C95.79 150.86 182.9 60.52 289.23 58.56c33.95-.63 66.08 7.48 94.22 22.29 0 0 15.68 6.34 10.14 23.19 0 0-68.52 219.82-352.61 268.06",
1713
- children: [
1714
- /* @__PURE__ */ jsxRuntime.jsx("animate", {
1715
- attributeName: "stroke-dashoffset",
1716
- to: "0",
1717
- from: "1600",
1718
- dur: "4s",
1719
- fill: "freeze",
1720
- repeatCount: "indefinite",
1721
- calcMode: "cubic",
1722
- keyTimes: "0;0.375;0.5;0.875;1",
1723
- keySplines: "0 0.26 0 1;0 0.26 0 1;0 0.26 0 1;0 0.26 0 1",
1724
- values: "1600;0;0;1600;1600"
1725
- }),
1726
- /* @__PURE__ */ jsxRuntime.jsx("animateTransform", {
1727
- attributeName: "transform",
1728
- type: "rotate",
1729
- from: "0 300 300",
1730
- to: "360 300 300",
1731
- dur: "2s",
1732
- fill: "freeze",
1733
- repeatCount: "indefinite",
1734
- calcMode: "cubic",
1735
- keyTimes: "0;0.75;1",
1736
- keySplines: "0 0.26 0 1",
1737
- values: "0 300 300;360 300 300;360 300 300;"
1738
- })
1739
- ]
1740
- })
1741
- })
1742
- });
1743
- }
1744
- return /* @__PURE__ */ jsxRuntime.jsx("svg", {
1745
- xmlns: "http://www.w3.org/2000/svg",
1746
- viewBox: "0 0 600 600",
1747
- children: /* @__PURE__ */ jsxRuntime.jsxs("g", {
1748
- style: {
1749
- transformOrigin: "center"
1750
- },
1751
- transform: "translate(300 300) rotate(0)",
1752
- height: 176,
1753
- width: 176,
1754
- children: [
1755
- /* @__PURE__ */ jsxRuntime.jsx("path", {
1756
- className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
1757
- stroke: "currentColor",
1758
- id: "motionPath",
1759
- fill: "none",
1760
- strokeLinecap: "round",
1761
- height: 600,
1762
- width: 600,
1763
- style: {
1764
- transformOrigin: "center"
1765
- },
1766
- strokeMiterlimit: "10",
1767
- strokeWidth: "82",
1768
- strokeDasharray: "1600",
1769
- d: "M466.49 164.79c17.79 34.76 25.48 75.66 19.08 118.96-11.28 76.36-67.11 139.06-141.89 158.25-127.11 32.61-243.49-61.27-245.86-184.81C95.79 150.86 182.9 60.52 289.23 58.56c33.95-.63 66.08 7.48 94.22 22.29 0 0 15.68 6.34 10.14 23.19 0 0-68.52 219.82-352.61 268.06",
1770
- children: /* @__PURE__ */ jsxRuntime.jsx("animate", {
1771
- attributeName: "stroke-dashoffset",
1772
- to: "0",
1773
- from: "1600",
1774
- dur: "4s",
1775
- fill: "freeze",
1776
- repeatCount: "indefinite",
1777
- calcMode: "cubic",
1778
- keyTimes: "0;0.375;0.5;0.875;1",
1779
- keySplines: "0 0.26 0 1;0 0.26 0 1;0 0.26 0 1;0 0.26 0 1",
1780
- values: "1600;0;0;1600;1600"
1781
- })
1782
- }),
1783
- /* @__PURE__ */ jsxRuntime.jsx("animateTransform", {
1784
- attributeName: "transform",
1785
- type: "rotate",
1786
- from: "0",
1787
- to: "360",
1788
- dur: "2s",
1789
- fill: "freeze",
1790
- repeatCount: "indefinite",
1791
- calcMode: "cubic",
1792
- keyTimes: "0;0.75;1",
1793
- keySplines: "0 0.26 0 1",
1794
- values: "0;360;360;"
1795
- })
1796
- ]
1797
- })
1798
- });
1799
- }, "AnimateLogo");
1800
- var AnimateLogo_default = AnimateLogo;
1801
- var OverlaySpinner = /* @__PURE__ */ __name(function(param) {
1802
- var visible = param.visible;
1803
- var _react_useState = _sliced_to_array(react.useState(null), 2), modalRoot = _react_useState[0], setModalRoot = _react_useState[1];
1804
- react.useEffect(function() {
1805
- var root = document.getElementById("spinner-root");
1806
- if (!root) {
1807
- root = document.createElement("div");
1808
- root.id = "spinner-root";
1809
- document.body.appendChild(root);
1810
- }
1811
- setModalRoot(root);
1812
- return function() {
1813
- var root2 = document.getElementById("spinner-root");
1814
- if (root2) {
1815
- document.body.removeChild(root2);
1816
- }
1817
- };
1818
- }, [
1819
- visible
1820
- ]);
1821
- if (!visible || !modalRoot) {
1822
- return null;
1823
- }
1824
- return ReactDOM.createPortal(/* @__PURE__ */ jsxRuntime.jsx("div", {
1825
- style: {
1826
- zIndex: 11e3
1827
- },
1828
- children: /* @__PURE__ */ jsxRuntime.jsx("div", {
1829
- style: {
1830
- zIndex: 11001
1831
- },
1832
- className: "fixed shrink-0 top-0 left-0 w-full h-screen flex items-center justify-center dark:bg-black/70 bg-white/60",
1833
- children: /* @__PURE__ */ jsxRuntime.jsx("div", {
1834
- className: "h-44 w-44 overflow-visible",
1835
- children: /* @__PURE__ */ jsxRuntime.jsx(AnimateLogo_default, {})
1836
- })
1837
- })
1838
- }), modalRoot);
1839
- }, "OverlaySpinner");
1840
- var OverlaySpinner_default = OverlaySpinner;
1841
- exports.AnimateLogo = AnimateLogo_default;
1842
1768
  exports.Backdrop = Backdrop_default;
1843
1769
  exports.BottomAlert = BottomAlert_default;
1844
1770
  exports.Breakpoint = Breakpoint_default;
@@ -1856,7 +1782,6 @@ exports.Modal = Modal_default;
1856
1782
  exports.NoResults = NoResults_default;
1857
1783
  exports.NoticeBox = NoticeBox_default;
1858
1784
  exports.Overlay = Overlay_default;
1859
- exports.OverlaySpinner = OverlaySpinner_default;
1860
1785
  exports.PRIMARY_COLOR = PRIMARY_COLOR;
1861
1786
  exports.Pill = Pill_default;
1862
1787
  exports.ProgressBar = ProgressBar_default;
package/dist/index.mjs CHANGED
@@ -129,7 +129,7 @@ function _unsupported_iterable_to_array(o, minLen) {
129
129
  }
130
130
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
131
131
  import { useMemo, useState, useRef, useEffect } from 'react';
132
- import ReactDOM, { createPortal } from 'react-dom';
132
+ import ReactDOM from 'react-dom';
133
133
  import clsx from 'clsx';
134
134
  import { motion } from 'framer-motion';
135
135
  import { useField } from 'formik';
@@ -164,39 +164,95 @@ var headerTippyClass = "rounded-lg p-2 bg-slate-950 opacity-95 text-white font-m
164
164
  var headerButtonClass = "w-10 h-10 rounded-full dark:hover:bg-slate-600 hover:bg-slate-200 bg-transparent flex justify-center items-center flex justify-center items-center text-slate-600 dark:text-slate-100 hover:text-primary dark:hover:text-primary transition-colors duration-50";
165
165
  var Spinner = /* @__PURE__ */ __name(function(param) {
166
166
  var _param_visible = param.visible, visible = _param_visible === void 0 ? true : _param_visible, size = param.size, isWhite = param.white;
167
+ var newSize = 32;
168
+ if (typeof size === "string") {
169
+ if (size === "base") {
170
+ size = 32;
171
+ } else if (size === "large") {
172
+ size = 44;
173
+ }
174
+ }
167
175
  if (visible === false) return null;
168
- var color = isWhite ? "stroke-white/90" : "stroke-slate-600/80";
169
- var bgColor = isWhite ? "stroke-white/20" : "stroke-slate-500/20";
170
- var dimensions = size === "small" ? "w-5 h-5" : "w-8 h-8";
171
- var spinnerClasses = "\n absolute\n top-0\n animate-spin\n ".concat(dimensions, "\n ");
172
- return /* @__PURE__ */ jsxs("div", {
176
+ return /* @__PURE__ */ jsx("div", {
177
+ style: {
178
+ height: newSize + 2,
179
+ width: newSize + 2
180
+ },
173
181
  className: "relative h-8 w-8 flex justify-center items-center",
174
- children: [
175
- /* @__PURE__ */ jsx("svg", {
176
- className: "absolute top-0 ".concat(dimensions, " ").concat(bgColor),
177
- viewBox: "0 0 24 24",
178
- fill: "none",
179
- strokeWidth: "2.4",
180
- children: /* @__PURE__ */ jsx("circle", {
181
- cx: "12",
182
- cy: "12",
183
- r: "10"
184
- })
185
- }),
186
- /* @__PURE__ */ jsx("svg", {
187
- className: spinnerClasses,
188
- viewBox: "0 0 24 24",
189
- fill: "none",
190
- strokeWidth: "2.4",
191
- strokeLinecap: "round",
192
- children: /* @__PURE__ */ jsx("path", {
193
- d: "\n M 12 2 \n A 10 10 0 0 1 22 12 \n A 10 10 0 0 1 12 22 \n A 10 10 0 0 1 2 12 \n A 10 10 0 0 1 12 2\n ",
194
- strokeDasharray: "13 18.4",
195
- stroke: "inherit",
196
- className: color
182
+ children: /* @__PURE__ */ jsxs("svg", {
183
+ xmlns: "http://www.w3.org/2000/svg",
184
+ viewBox: "0 0 200 200",
185
+ width: newSize,
186
+ height: newSize,
187
+ children: [
188
+ /* @__PURE__ */ jsxs("radialGradient", {
189
+ id: "a10",
190
+ cx: "0.66",
191
+ cy: "0.313",
192
+ fx: "0.66",
193
+ fy: "0.313",
194
+ gradientTransform: "scale(1.5)",
195
+ children: [
196
+ /* @__PURE__ */ jsx("stop", {
197
+ offset: "0",
198
+ stopColor: isWhite ? "#FFF" : PRIMARY_COLOR
199
+ }),
200
+ /* @__PURE__ */ jsx("stop", {
201
+ offset: "0.3",
202
+ stopColor: isWhite ? "#FFF" : PRIMARY_COLOR,
203
+ stopOpacity: "0.9"
204
+ }),
205
+ /* @__PURE__ */ jsx("stop", {
206
+ offset: "0.6",
207
+ stopColor: isWhite ? "#FFF" : PRIMARY_COLOR,
208
+ stopOpacity: "0.6"
209
+ }),
210
+ /* @__PURE__ */ jsx("stop", {
211
+ offset: "0.8",
212
+ stopColor: isWhite ? "#FFF" : PRIMARY_COLOR,
213
+ stopOpacity: "0.3"
214
+ }),
215
+ /* @__PURE__ */ jsx("stop", {
216
+ offset: "1",
217
+ stopColor: isWhite ? "#FFF" : PRIMARY_COLOR,
218
+ stopOpacity: "0"
219
+ })
220
+ ]
221
+ }),
222
+ /* @__PURE__ */ jsx("circle", {
223
+ cx: "100",
224
+ cy: "100",
225
+ r: "70",
226
+ fill: "none",
227
+ stroke: "url(#a10)",
228
+ strokeDasharray: "200 1000",
229
+ strokeLinecap: "round",
230
+ strokeWidth: "17",
231
+ transformOrigin: "center",
232
+ children: /* @__PURE__ */ jsx("animateTransform", {
233
+ attributeName: "transform",
234
+ calcMode: "spline",
235
+ dur: "1.8",
236
+ keySplines: "0 0 1 1",
237
+ keyTimes: "0;1",
238
+ repeatCount: "indefinite",
239
+ type: "rotate",
240
+ values: "360;0"
241
+ })
242
+ }),
243
+ /* @__PURE__ */ jsx("circle", {
244
+ cx: "100",
245
+ cy: "100",
246
+ r: "70",
247
+ fill: "none",
248
+ stroke: "#FFF",
249
+ strokeLinecap: "round",
250
+ strokeWidth: "17",
251
+ opacity: "0.5",
252
+ transformOrigin: "center"
197
253
  })
198
- })
199
- ]
254
+ ]
255
+ })
200
256
  });
201
257
  }, "Spinner");
202
258
  var SpinnerCentered = /* @__PURE__ */ __name(function(props) {
@@ -431,8 +487,30 @@ var Button = /* @__PURE__ */ __name(function(param) {
431
487
  className: "w-full max-h-11",
432
488
  children: loading ? /* @__PURE__ */ jsx("div", {
433
489
  className: "flex w-full justify-center items-center",
434
- children: /* @__PURE__ */ jsx(Spinner_default, {
435
- white: true
490
+ children: /* @__PURE__ */ jsx("svg", {
491
+ xmlns: "http://www.w3.org/2000/svg",
492
+ fill: "none",
493
+ stroke: "currentColor",
494
+ strokeLinecap: "round",
495
+ strokeLinejoin: "round",
496
+ strokeWidth: "2.5",
497
+ className: "size-10",
498
+ viewBox: "0 0 24 24",
499
+ children: /* @__PURE__ */ jsx("path", {
500
+ d: "M2 16s9-15 20-4C11 23 2 8 2 8",
501
+ strokeDasharray: "70",
502
+ strokeDashoffset: "70",
503
+ children: /* @__PURE__ */ jsx("animate", {
504
+ attributeName: "stroke-dashoffset",
505
+ calcMode: "spline",
506
+ dur: "2",
507
+ keySplines: "0 0 1 1",
508
+ repeatCount: "indefinite",
509
+ from: "70",
510
+ to: "-70",
511
+ fill: "freeze"
512
+ })
513
+ })
436
514
  })
437
515
  }) : children
438
516
  })
@@ -1238,7 +1316,7 @@ var Formik = /* @__PURE__ */ __name(function(param) {
1238
1316
  onChange: handleChange
1239
1317
  }),
1240
1318
  /* @__PURE__ */ jsx("div", {
1241
- className: clsx("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-[#00b4d8]" : "bg-[#64748b]"),
1319
+ className: clsx("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-primary" : "dark:bg-slate-950 bg-stone-400"),
1242
1320
  children: /* @__PURE__ */ jsx(motion.div, {
1243
1321
  className: "w-4 h-4 bg-white rounded-full absolute top-1",
1244
1322
  initial: false,
@@ -1279,7 +1357,7 @@ var ToggleSwitch = /* @__PURE__ */ __name(function(param) {
1279
1357
  onChange: handleChange
1280
1358
  }),
1281
1359
  /* @__PURE__ */ jsx("div", {
1282
- className: clsx("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-[#00b4d8]" : "bg-[#64748b]"),
1360
+ className: clsx("w-10 h-6 rounded-full p-[4px] transition-colors duration-300", value ? "bg-primary" : "dark:bg-slate-950 bg-stone-400"),
1283
1361
  children: /* @__PURE__ */ jsx(motion.div, {
1284
1362
  className: "w-4 h-4 bg-white rounded-full absolute top-1",
1285
1363
  initial: false,
@@ -1679,155 +1757,4 @@ var ScrollProgress = /* @__PURE__ */ __name(function() {
1679
1757
  });
1680
1758
  }, "ScrollProgress");
1681
1759
  var ScrollProgress_default = ScrollProgress;
1682
- var AnimateLogo = /* @__PURE__ */ __name(function() {
1683
- var _useState = _sliced_to_array(useState(false), 2), isFirefox = _useState[0], setIsFirefox = _useState[1];
1684
- useEffect(function() {
1685
- var userAgent = window.navigator.userAgent;
1686
- setIsFirefox(userAgent.indexOf("Firefox") > -1);
1687
- }, []);
1688
- if (isFirefox) {
1689
- return /* @__PURE__ */ jsx("svg", {
1690
- xmlns: "http://www.w3.org/2000/svg",
1691
- className: "animate-spin",
1692
- viewBox: "0 0 600 600",
1693
- children: /* @__PURE__ */ jsx("g", {
1694
- height: 176,
1695
- width: 176,
1696
- children: /* @__PURE__ */ jsxs("path", {
1697
- className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
1698
- stroke: "currentColor",
1699
- fill: "none",
1700
- strokeLinecap: "round",
1701
- strokeMiterlimit: "10",
1702
- strokeWidth: "82",
1703
- strokeDasharray: "1600",
1704
- d: "M466.49 164.79c17.79 34.76 25.48 75.66 19.08 118.96-11.28 76.36-67.11 139.06-141.89 158.25-127.11 32.61-243.49-61.27-245.86-184.81C95.79 150.86 182.9 60.52 289.23 58.56c33.95-.63 66.08 7.48 94.22 22.29 0 0 15.68 6.34 10.14 23.19 0 0-68.52 219.82-352.61 268.06",
1705
- children: [
1706
- /* @__PURE__ */ jsx("animate", {
1707
- attributeName: "stroke-dashoffset",
1708
- to: "0",
1709
- from: "1600",
1710
- dur: "4s",
1711
- fill: "freeze",
1712
- repeatCount: "indefinite",
1713
- calcMode: "cubic",
1714
- keyTimes: "0;0.375;0.5;0.875;1",
1715
- keySplines: "0 0.26 0 1;0 0.26 0 1;0 0.26 0 1;0 0.26 0 1",
1716
- values: "1600;0;0;1600;1600"
1717
- }),
1718
- /* @__PURE__ */ jsx("animateTransform", {
1719
- attributeName: "transform",
1720
- type: "rotate",
1721
- from: "0 300 300",
1722
- to: "360 300 300",
1723
- dur: "2s",
1724
- fill: "freeze",
1725
- repeatCount: "indefinite",
1726
- calcMode: "cubic",
1727
- keyTimes: "0;0.75;1",
1728
- keySplines: "0 0.26 0 1",
1729
- values: "0 300 300;360 300 300;360 300 300;"
1730
- })
1731
- ]
1732
- })
1733
- })
1734
- });
1735
- }
1736
- return /* @__PURE__ */ jsx("svg", {
1737
- xmlns: "http://www.w3.org/2000/svg",
1738
- viewBox: "0 0 600 600",
1739
- children: /* @__PURE__ */ jsxs("g", {
1740
- style: {
1741
- transformOrigin: "center"
1742
- },
1743
- transform: "translate(300 300) rotate(0)",
1744
- height: 176,
1745
- width: 176,
1746
- children: [
1747
- /* @__PURE__ */ jsx("path", {
1748
- className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
1749
- stroke: "currentColor",
1750
- id: "motionPath",
1751
- fill: "none",
1752
- strokeLinecap: "round",
1753
- height: 600,
1754
- width: 600,
1755
- style: {
1756
- transformOrigin: "center"
1757
- },
1758
- strokeMiterlimit: "10",
1759
- strokeWidth: "82",
1760
- strokeDasharray: "1600",
1761
- d: "M466.49 164.79c17.79 34.76 25.48 75.66 19.08 118.96-11.28 76.36-67.11 139.06-141.89 158.25-127.11 32.61-243.49-61.27-245.86-184.81C95.79 150.86 182.9 60.52 289.23 58.56c33.95-.63 66.08 7.48 94.22 22.29 0 0 15.68 6.34 10.14 23.19 0 0-68.52 219.82-352.61 268.06",
1762
- children: /* @__PURE__ */ jsx("animate", {
1763
- attributeName: "stroke-dashoffset",
1764
- to: "0",
1765
- from: "1600",
1766
- dur: "4s",
1767
- fill: "freeze",
1768
- repeatCount: "indefinite",
1769
- calcMode: "cubic",
1770
- keyTimes: "0;0.375;0.5;0.875;1",
1771
- keySplines: "0 0.26 0 1;0 0.26 0 1;0 0.26 0 1;0 0.26 0 1",
1772
- values: "1600;0;0;1600;1600"
1773
- })
1774
- }),
1775
- /* @__PURE__ */ jsx("animateTransform", {
1776
- attributeName: "transform",
1777
- type: "rotate",
1778
- from: "0",
1779
- to: "360",
1780
- dur: "2s",
1781
- fill: "freeze",
1782
- repeatCount: "indefinite",
1783
- calcMode: "cubic",
1784
- keyTimes: "0;0.75;1",
1785
- keySplines: "0 0.26 0 1",
1786
- values: "0;360;360;"
1787
- })
1788
- ]
1789
- })
1790
- });
1791
- }, "AnimateLogo");
1792
- var AnimateLogo_default = AnimateLogo;
1793
- var OverlaySpinner = /* @__PURE__ */ __name(function(param) {
1794
- var visible = param.visible;
1795
- var _useState = _sliced_to_array(useState(null), 2), modalRoot = _useState[0], setModalRoot = _useState[1];
1796
- useEffect(function() {
1797
- var root = document.getElementById("spinner-root");
1798
- if (!root) {
1799
- root = document.createElement("div");
1800
- root.id = "spinner-root";
1801
- document.body.appendChild(root);
1802
- }
1803
- setModalRoot(root);
1804
- return function() {
1805
- var root2 = document.getElementById("spinner-root");
1806
- if (root2) {
1807
- document.body.removeChild(root2);
1808
- }
1809
- };
1810
- }, [
1811
- visible
1812
- ]);
1813
- if (!visible || !modalRoot) {
1814
- return null;
1815
- }
1816
- return createPortal(/* @__PURE__ */ jsx("div", {
1817
- style: {
1818
- zIndex: 11e3
1819
- },
1820
- children: /* @__PURE__ */ jsx("div", {
1821
- style: {
1822
- zIndex: 11001
1823
- },
1824
- className: "fixed shrink-0 top-0 left-0 w-full h-screen flex items-center justify-center dark:bg-black/70 bg-white/60",
1825
- children: /* @__PURE__ */ jsx("div", {
1826
- className: "h-44 w-44 overflow-visible",
1827
- children: /* @__PURE__ */ jsx(AnimateLogo_default, {})
1828
- })
1829
- })
1830
- }), modalRoot);
1831
- }, "OverlaySpinner");
1832
- var OverlaySpinner_default = OverlaySpinner;
1833
- export { AnimateLogo_default as AnimateLogo, Backdrop_default as Backdrop, BottomAlert_default as BottomAlert, Breakpoint_default as Breakpoint, Button_default as Button, Checkbox_default as Checkbox, CircleProgress_default as CircleProgress, Container_default as Container, CourseProgress_default as CourseProgress, ErrorText_default as ErrorText, Fade_default as Fade, FunButton_default as FunButton, FunRoundButton_default as FunRoundButton, IconInfo_default as IconInfo, Modal_default as Modal, NoResults_default as NoResults, NoticeBox_default as NoticeBox, Overlay_default as Overlay, OverlaySpinner_default as OverlaySpinner, PRIMARY_COLOR, Pill_default as Pill, ProgressBar_default as ProgressBar, ProgressBarSimple_default as ProgressBarSimple, RadioOption_default as RadioOption, RatingStars_default as RatingStars, ScrollProgress_default as ScrollProgress, Slider_default as Slider, Spinner_default as Spinner, StepsComponent_default as StepsComponent, Tippy_default as Tippy, ToggleSwitch_default as ToggleSwitch, UserContentSwitcher_default as UserContentSwitcher, baseFieldStyle, createExerciseElementStyle, exerciseDeleteButton, exerciseEditButton, headerButtonClass, headerTippyClass, tippyClassname, xIconButton };
1760
+ export { Backdrop_default as Backdrop, BottomAlert_default as BottomAlert, Breakpoint_default as Breakpoint, Button_default as Button, Checkbox_default as Checkbox, CircleProgress_default as CircleProgress, Container_default as Container, CourseProgress_default as CourseProgress, ErrorText_default as ErrorText, Fade_default as Fade, FunButton_default as FunButton, FunRoundButton_default as FunRoundButton, IconInfo_default as IconInfo, Modal_default as Modal, NoResults_default as NoResults, NoticeBox_default as NoticeBox, Overlay_default as Overlay, PRIMARY_COLOR, Pill_default as Pill, ProgressBar_default as ProgressBar, ProgressBarSimple_default as ProgressBarSimple, RadioOption_default as RadioOption, RatingStars_default as RatingStars, ScrollProgress_default as ScrollProgress, Slider_default as Slider, Spinner_default as Spinner, StepsComponent_default as StepsComponent, Tippy_default as Tippy, ToggleSwitch_default as ToggleSwitch, UserContentSwitcher_default as UserContentSwitcher, baseFieldStyle, createExerciseElementStyle, exerciseDeleteButton, exerciseEditButton, headerButtonClass, headerTippyClass, tippyClassname, xIconButton };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "evelearn-theme",
3
- "version": "2.0.30",
3
+ "version": "2.0.32",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",