evelearn-theme 1.0.1 → 1.0.3

package/dist/index.d.mts

@@ -4,12 +4,12 @@ import React__default, { CSSProperties, ReactNode } from 'react';
 import { Placement } from '@floating-ui/react';
 import * as next_dist_compiled__next_font from 'next/dist/compiled/@next/font';
 
-type Props$g = {
+type Props$h = {
     visible: boolean;
     onClick: () => void;
     opacity?: number;
 };
-declare const Backdrop: ({ visible, onClick, opacity }: Props$g) => react_jsx_runtime.JSX.Element | null;
+declare const Backdrop: ({ visible, onClick, opacity }: Props$h) => react_jsx_runtime.JSX.Element | null;
 
 interface BaseModalProps {
     visible: boolean;
@@ -44,7 +44,7 @@ declare const Breakpoint: React__default.FC<{
     children: React__default.ReactNode;
 }>;
 
-interface Props$f {
+interface Props$g {
     disabled?: boolean;
     kind?: 'primary' | 'secondary' | 'base' | 'warning' | 'alert' | 'gray' | 'green' | 'teal' | 'indigo';
     size?: 'small' | 'fixed' | 'large';
@@ -53,9 +53,9 @@ interface Props$f {
     children: React__default.ReactNode;
     onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
 }
-declare const Button: ({ disabled, loading, onClick, kind, size, type, children }: Props$f) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ disabled, loading, onClick, kind, size, type, children }: Props$g) => react_jsx_runtime.JSX.Element;
 
-interface Props$e {
+interface Props$f {
     disabled?: boolean;
     color?: 'primary' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'cyan';
     type?: 'button' | 'submit';
@@ -66,9 +66,9 @@ interface Props$e {
     size?: 'big' | 'base' | 'small' | 'square';
     onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
 }
-declare const FunButton: React__default.FC<Props$e>;
+declare const FunButton: React__default.FC<Props$f>;
 
-interface Props$d {
+interface Props$e {
     disabled?: boolean;
     color?: 'primary' | 'red' | 'green' | 'purple' | 'teal' | 'yellow';
     type?: 'button' | 'submit';
@@ -78,9 +78,9 @@ interface Props$d {
     size?: number;
     onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
 }
-declare const FunRoundButton: ({ onClick, disabled, type, children, color, active, className, size }: Props$d) => react_jsx_runtime.JSX.Element;
+declare const FunRoundButton: ({ onClick, disabled, type, children, color, active, className, size }: Props$e) => react_jsx_runtime.JSX.Element;
 
-type Props$c = {
+type Props$d = {
     name: string;
     labelText: React__default.ReactNode;
     onChange?: (value: boolean) => void;
@@ -88,7 +88,7 @@ type Props$c = {
     isDisabled?: boolean;
 };
 declare const Checkbox: {
-    ({ name, labelText, isLarge, onChange, isDisabled }: Props$c): react_jsx_runtime.JSX.Element;
+    ({ name, labelText, isLarge, onChange, isDisabled }: Props$d): react_jsx_runtime.JSX.Element;
     Multi: ({ name, hasMultipleAnswers, index, isLarge, allOptionsName }: MultiChoiceCheckBoxProps) => react_jsx_runtime.JSX.Element;
 };
 type MultiChoiceCheckBoxProps = {
@@ -99,16 +99,16 @@ type MultiChoiceCheckBoxProps = {
     isLarge?: boolean;
 };
 
-type Props$b = {
+type Props$c = {
     name: string;
     isLarge?: boolean;
     labelText?: string;
     option: string;
     onSelect?: () => void;
 };
-declare const RadioOption: ({ name, isLarge, labelText, option, onSelect }: Props$b) => react_jsx_runtime.JSX.Element;
+declare const RadioOption: ({ name, isLarge, labelText, option, onSelect }: Props$c) => react_jsx_runtime.JSX.Element;
 
-interface Props$a {
+interface Props$b {
     title: string;
     cancelText?: string;
     isVisible: boolean;
@@ -124,7 +124,7 @@ interface Props$a {
     isDark?: boolean;
     children?: React__default.ReactNode;
 }
-declare const BAWrapper: React__default.FC<Props$a>;
+declare const BAWrapper: React__default.FC<Props$b>;
 
 interface ContainerProps {
     backgroundColor?: string;
@@ -136,12 +136,12 @@ interface ContainerProps {
 }
 declare const Container: React__default.FC<ContainerProps>;
 
-type Props$9 = {
+type Props$a = {
     text: string;
     style?: CSSProperties | undefined;
     classNames?: string;
 };
-declare const ErrorText: ({ text, style, classNames }: Props$9) => react_jsx_runtime.JSX.Element;
+declare const ErrorText: ({ text, style, classNames }: Props$a) => react_jsx_runtime.JSX.Element;
 
 declare const baseFieldStyle = "font-sans form-input h-11 w-full bg-white border-gray-200 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-200 text-gray-700 dark:placeholder-gray-400 placeholder-gray-400 rounded-md  px-2 py-1 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50";
 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";
@@ -151,7 +151,7 @@ declare const exerciseEditButton = "w-6 h-6 flex justify-center text-gray-700 da
 declare const tippyClassname = "p-2 bg-slate-600 dark:bg-slate-900 opacity-90 text-white font-medium font-header rounded-lg";
 declare const headerTippyClass = "rounded-lg p-2 bg-slate-950 opacity-95 text-white font-medium";
 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";
-declare const toolbarExerciseButton = "flex bg-gray-50 bg-opacity-95 items-center sm:justify-between p-4 shadow-sm w-full rounded-xl border-4 border-transparent hover:border-white text-gray-700 hover:text-white hover:bg-indigo-500 transition-colors duration-75";
+declare const toolbarExerciseButton = "flex bg-gray-50/90 items-center sm:justify-between p-4 shadow-sm w-full rounded-xl border-4 border-transparent hover:border-white text-gray-700 hover:text-white hover:bg-indigo-500 transition-colors duration-75";
 
 type IconInfoProps = {
     content: string;
@@ -161,29 +161,29 @@ type IconInfoProps = {
 };
 declare const IconInfo: ({ content, icon, number, color }: IconInfoProps) => react_jsx_runtime.JSX.Element;
 
-type Props$8 = {
+type Props$9 = {
     loading: boolean;
     message?: string;
 };
-declare const NoResults: ({ loading, message }: Props$8) => react_jsx_runtime.JSX.Element;
+declare const NoResults: ({ loading, message }: Props$9) => react_jsx_runtime.JSX.Element;
 
-interface Props$7 {
+interface Props$8 {
     type?: 'error' | 'warning' | 'info';
     isDismissible?: boolean;
     onDismiss?: () => void;
     isVisible: boolean;
 }
-declare const NoticeBox: React__default.FC<Props$7 & React__default.HTMLAttributes<HTMLDivElement>>;
+declare const NoticeBox: React__default.FC<Props$8 & React__default.HTMLAttributes<HTMLDivElement>>;
 
 declare const Pill: ({ text }: {
     text: string;
 }) => react_jsx_runtime.JSX.Element;
 
-type Props$6 = {
+type Props$7 = {
     avgRating: number;
     large?: boolean;
 };
-declare const RatingStars: ({ avgRating, large }: Props$6) => react_jsx_runtime.JSX.Element;
+declare const RatingStars: ({ avgRating, large }: Props$7) => react_jsx_runtime.JSX.Element;
 
 interface SliderProps {
     min: number;
@@ -207,12 +207,12 @@ type DebouncedSliderProps = {
 type Step = {
     label: ReactNode;
 };
-type Props$5 = {
+type Props$6 = {
     steps: Step[];
     activeStep: number;
     onStepPress: (s: number) => void;
 };
-declare const StepsComponent: ({ steps, activeStep, onStepPress }: Props$5) => react_jsx_runtime.JSX.Element;
+declare const StepsComponent: ({ steps, activeStep, onStepPress }: Props$6) => react_jsx_runtime.JSX.Element;
 
 interface TippyProps {
     children: ReactNode;
@@ -230,13 +230,13 @@ type FormikProps = {
     label: string;
     name: string;
 };
-type Props$4 = {
+type Props$5 = {
     label: string;
     onChange: (bool: boolean) => void;
     value: boolean;
 };
 declare const ToggleSwitch: {
-    ({ label, onChange, value }: Props$4): react_jsx_runtime.JSX.Element;
+    ({ label, onChange, value }: Props$5): react_jsx_runtime.JSX.Element;
     Formik: ({ label, name }: FormikProps) => react_jsx_runtime.JSX.Element;
 };
 
@@ -250,11 +250,11 @@ type ModeProps = {
 };
 declare const UserContentSwitcher: ({ icon1: Icon1, icon2: Icon2, setGalleryMode, galleryMode, title1, title2 }: ModeProps) => react_jsx_runtime.JSX.Element;
 
-type Props$3 = {
+type Props$4 = {
     inProp: boolean;
     children: React__default.ReactNode;
 };
-declare const Fade: ({ children, inProp }: Props$3) => react_jsx_runtime.JSX.Element;
+declare const Fade: ({ children, inProp }: Props$4) => react_jsx_runtime.JSX.Element;
 
 declare const openSans: next_dist_compiled__next_font.NextFontWithVariable;
 declare const ubuntu: next_dist_compiled__next_font.NextFontWithVariable;
@@ -273,9 +273,9 @@ declare const ProgressBar: {
     ({ progress }: {
         progress: number;
     }): react_jsx_runtime.JSX.Element;
-    Step: ({ steps, stepIndex, onStepClick, color }: Props$2) => react_jsx_runtime.JSX.Element;
+    Step: ({ steps, stepIndex, onStepClick, color }: Props$3) => react_jsx_runtime.JSX.Element;
 };
-type Props$2 = {
+type Props$3 = {
     steps: {
         label: string;
     }[];
@@ -284,14 +284,24 @@ type Props$2 = {
     onStepClick?: (i: number) => void;
 };
 
-type Props$1 = {
+type Props$2 = {
     twColor?: string;
     percentage: number;
     radius: number;
     fill?: string;
     strokeWidth?: number;
 };
-declare const CircleProgress: ({ twColor, percentage, radius, fill, strokeWidth }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const CircleProgress: ({ twColor, percentage, radius, fill, strokeWidth }: Props$2) => react_jsx_runtime.JSX.Element;
+
+type Props$1 = {
+    twColor?: string;
+    percentage: number;
+    label: string;
+};
+declare const CourseProgress: {
+    ({ twColor, percentage, label }: Props$1): react_jsx_runtime.JSX.Element;
+    Small: ({ twColor, percentage, label }: Props$1) => react_jsx_runtime.JSX.Element;
+};
 
 declare const ScrollProgress: () => react_jsx_runtime.JSX.Element;
 
@@ -319,4 +329,4 @@ declare const AnimateLogo: () => react_jsx_runtime.JSX.Element;
 
 declare const PRIMARY_COLOR = "#00b4d8";
 
-export { AnimateLogo, Backdrop, BAWrapper as BottomAlert, Breakpoint, Button, Checkbox, CircleProgress, Container, ErrorText, Fade, FunButton, FunRoundButton, IconInfo, Modal, NoResults, NoticeBox, Overlay, OverlaySpinner, PRIMARY_COLOR, Pill, ProgressBar, ProgressBarSimple, RadioOption, RatingStars, ScrollProgress, Slider, Spinner, StepsComponent, Tippy, ToggleSwitch, UserContentSwitcher, balsamicSans, baseFieldStyle, createExerciseElementStyle, exerciseDeleteButton, exerciseEditButton, headerButtonClass, headerTippyClass, openSans, parkinsans, tippyClassname, toolbarExerciseButton, ubuntu, xIconButton };
+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, balsamicSans, baseFieldStyle, createExerciseElementStyle, exerciseDeleteButton, exerciseEditButton, headerButtonClass, headerTippyClass, openSans, parkinsans, tippyClassname, toolbarExerciseButton, ubuntu, xIconButton };

package/dist/index.d.ts

@@ -4,12 +4,12 @@ import React__default, { CSSProperties, ReactNode } from 'react';
 import { Placement } from '@floating-ui/react';
 import * as next_dist_compiled__next_font from 'next/dist/compiled/@next/font';
 
-type Props$g = {
+type Props$h = {
     visible: boolean;
     onClick: () => void;
     opacity?: number;
 };
-declare const Backdrop: ({ visible, onClick, opacity }: Props$g) => react_jsx_runtime.JSX.Element | null;
+declare const Backdrop: ({ visible, onClick, opacity }: Props$h) => react_jsx_runtime.JSX.Element | null;
 
 interface BaseModalProps {
     visible: boolean;
@@ -44,7 +44,7 @@ declare const Breakpoint: React__default.FC<{
     children: React__default.ReactNode;
 }>;
 
-interface Props$f {
+interface Props$g {
     disabled?: boolean;
     kind?: 'primary' | 'secondary' | 'base' | 'warning' | 'alert' | 'gray' | 'green' | 'teal' | 'indigo';
     size?: 'small' | 'fixed' | 'large';
@@ -53,9 +53,9 @@ interface Props$f {
     children: React__default.ReactNode;
     onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
 }
-declare const Button: ({ disabled, loading, onClick, kind, size, type, children }: Props$f) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ disabled, loading, onClick, kind, size, type, children }: Props$g) => react_jsx_runtime.JSX.Element;
 
-interface Props$e {
+interface Props$f {
     disabled?: boolean;
     color?: 'primary' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'cyan';
     type?: 'button' | 'submit';
@@ -66,9 +66,9 @@ interface Props$e {
     size?: 'big' | 'base' | 'small' | 'square';
     onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
 }
-declare const FunButton: React__default.FC<Props$e>;
+declare const FunButton: React__default.FC<Props$f>;
 
-interface Props$d {
+interface Props$e {
     disabled?: boolean;
     color?: 'primary' | 'red' | 'green' | 'purple' | 'teal' | 'yellow';
     type?: 'button' | 'submit';
@@ -78,9 +78,9 @@ interface Props$d {
     size?: number;
     onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
 }
-declare const FunRoundButton: ({ onClick, disabled, type, children, color, active, className, size }: Props$d) => react_jsx_runtime.JSX.Element;
+declare const FunRoundButton: ({ onClick, disabled, type, children, color, active, className, size }: Props$e) => react_jsx_runtime.JSX.Element;
 
-type Props$c = {
+type Props$d = {
     name: string;
     labelText: React__default.ReactNode;
     onChange?: (value: boolean) => void;
@@ -88,7 +88,7 @@ type Props$c = {
     isDisabled?: boolean;
 };
 declare const Checkbox: {
-    ({ name, labelText, isLarge, onChange, isDisabled }: Props$c): react_jsx_runtime.JSX.Element;
+    ({ name, labelText, isLarge, onChange, isDisabled }: Props$d): react_jsx_runtime.JSX.Element;
     Multi: ({ name, hasMultipleAnswers, index, isLarge, allOptionsName }: MultiChoiceCheckBoxProps) => react_jsx_runtime.JSX.Element;
 };
 type MultiChoiceCheckBoxProps = {
@@ -99,16 +99,16 @@ type MultiChoiceCheckBoxProps = {
     isLarge?: boolean;
 };
 
-type Props$b = {
+type Props$c = {
     name: string;
     isLarge?: boolean;
     labelText?: string;
     option: string;
     onSelect?: () => void;
 };
-declare const RadioOption: ({ name, isLarge, labelText, option, onSelect }: Props$b) => react_jsx_runtime.JSX.Element;
+declare const RadioOption: ({ name, isLarge, labelText, option, onSelect }: Props$c) => react_jsx_runtime.JSX.Element;
 
-interface Props$a {
+interface Props$b {
     title: string;
     cancelText?: string;
     isVisible: boolean;
@@ -124,7 +124,7 @@ interface Props$a {
     isDark?: boolean;
     children?: React__default.ReactNode;
 }
-declare const BAWrapper: React__default.FC<Props$a>;
+declare const BAWrapper: React__default.FC<Props$b>;
 
 interface ContainerProps {
     backgroundColor?: string;
@@ -136,12 +136,12 @@ interface ContainerProps {
 }
 declare const Container: React__default.FC<ContainerProps>;
 
-type Props$9 = {
+type Props$a = {
     text: string;
     style?: CSSProperties | undefined;
     classNames?: string;
 };
-declare const ErrorText: ({ text, style, classNames }: Props$9) => react_jsx_runtime.JSX.Element;
+declare const ErrorText: ({ text, style, classNames }: Props$a) => react_jsx_runtime.JSX.Element;
 
 declare const baseFieldStyle = "font-sans form-input h-11 w-full bg-white border-gray-200 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-200 text-gray-700 dark:placeholder-gray-400 placeholder-gray-400 rounded-md  px-2 py-1 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50";
 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";
@@ -151,7 +151,7 @@ declare const exerciseEditButton = "w-6 h-6 flex justify-center text-gray-700 da
 declare const tippyClassname = "p-2 bg-slate-600 dark:bg-slate-900 opacity-90 text-white font-medium font-header rounded-lg";
 declare const headerTippyClass = "rounded-lg p-2 bg-slate-950 opacity-95 text-white font-medium";
 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";
-declare const toolbarExerciseButton = "flex bg-gray-50 bg-opacity-95 items-center sm:justify-between p-4 shadow-sm w-full rounded-xl border-4 border-transparent hover:border-white text-gray-700 hover:text-white hover:bg-indigo-500 transition-colors duration-75";
+declare const toolbarExerciseButton = "flex bg-gray-50/90 items-center sm:justify-between p-4 shadow-sm w-full rounded-xl border-4 border-transparent hover:border-white text-gray-700 hover:text-white hover:bg-indigo-500 transition-colors duration-75";
 
 type IconInfoProps = {
     content: string;
@@ -161,29 +161,29 @@ type IconInfoProps = {
 };
 declare const IconInfo: ({ content, icon, number, color }: IconInfoProps) => react_jsx_runtime.JSX.Element;
 
-type Props$8 = {
+type Props$9 = {
     loading: boolean;
     message?: string;
 };
-declare const NoResults: ({ loading, message }: Props$8) => react_jsx_runtime.JSX.Element;
+declare const NoResults: ({ loading, message }: Props$9) => react_jsx_runtime.JSX.Element;
 
-interface Props$7 {
+interface Props$8 {
     type?: 'error' | 'warning' | 'info';
     isDismissible?: boolean;
     onDismiss?: () => void;
     isVisible: boolean;
 }
-declare const NoticeBox: React__default.FC<Props$7 & React__default.HTMLAttributes<HTMLDivElement>>;
+declare const NoticeBox: React__default.FC<Props$8 & React__default.HTMLAttributes<HTMLDivElement>>;
 
 declare const Pill: ({ text }: {
     text: string;
 }) => react_jsx_runtime.JSX.Element;
 
-type Props$6 = {
+type Props$7 = {
     avgRating: number;
     large?: boolean;
 };
-declare const RatingStars: ({ avgRating, large }: Props$6) => react_jsx_runtime.JSX.Element;
+declare const RatingStars: ({ avgRating, large }: Props$7) => react_jsx_runtime.JSX.Element;
 
 interface SliderProps {
     min: number;
@@ -207,12 +207,12 @@ type DebouncedSliderProps = {
 type Step = {
     label: ReactNode;
 };
-type Props$5 = {
+type Props$6 = {
     steps: Step[];
     activeStep: number;
     onStepPress: (s: number) => void;
 };
-declare const StepsComponent: ({ steps, activeStep, onStepPress }: Props$5) => react_jsx_runtime.JSX.Element;
+declare const StepsComponent: ({ steps, activeStep, onStepPress }: Props$6) => react_jsx_runtime.JSX.Element;
 
 interface TippyProps {
     children: ReactNode;
@@ -230,13 +230,13 @@ type FormikProps = {
     label: string;
     name: string;
 };
-type Props$4 = {
+type Props$5 = {
     label: string;
     onChange: (bool: boolean) => void;
     value: boolean;
 };
 declare const ToggleSwitch: {
-    ({ label, onChange, value }: Props$4): react_jsx_runtime.JSX.Element;
+    ({ label, onChange, value }: Props$5): react_jsx_runtime.JSX.Element;
     Formik: ({ label, name }: FormikProps) => react_jsx_runtime.JSX.Element;
 };
 
@@ -250,11 +250,11 @@ type ModeProps = {
 };
 declare const UserContentSwitcher: ({ icon1: Icon1, icon2: Icon2, setGalleryMode, galleryMode, title1, title2 }: ModeProps) => react_jsx_runtime.JSX.Element;
 
-type Props$3 = {
+type Props$4 = {
     inProp: boolean;
     children: React__default.ReactNode;
 };
-declare const Fade: ({ children, inProp }: Props$3) => react_jsx_runtime.JSX.Element;
+declare const Fade: ({ children, inProp }: Props$4) => react_jsx_runtime.JSX.Element;
 
 declare const openSans: next_dist_compiled__next_font.NextFontWithVariable;
 declare const ubuntu: next_dist_compiled__next_font.NextFontWithVariable;
@@ -273,9 +273,9 @@ declare const ProgressBar: {
     ({ progress }: {
         progress: number;
     }): react_jsx_runtime.JSX.Element;
-    Step: ({ steps, stepIndex, onStepClick, color }: Props$2) => react_jsx_runtime.JSX.Element;
+    Step: ({ steps, stepIndex, onStepClick, color }: Props$3) => react_jsx_runtime.JSX.Element;
 };
-type Props$2 = {
+type Props$3 = {
     steps: {
         label: string;
     }[];
@@ -284,14 +284,24 @@ type Props$2 = {
     onStepClick?: (i: number) => void;
 };
 
-type Props$1 = {
+type Props$2 = {
     twColor?: string;
     percentage: number;
     radius: number;
     fill?: string;
     strokeWidth?: number;
 };
-declare const CircleProgress: ({ twColor, percentage, radius, fill, strokeWidth }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const CircleProgress: ({ twColor, percentage, radius, fill, strokeWidth }: Props$2) => react_jsx_runtime.JSX.Element;
+
+type Props$1 = {
+    twColor?: string;
+    percentage: number;
+    label: string;
+};
+declare const CourseProgress: {
+    ({ twColor, percentage, label }: Props$1): react_jsx_runtime.JSX.Element;
+    Small: ({ twColor, percentage, label }: Props$1) => react_jsx_runtime.JSX.Element;
+};
 
 declare const ScrollProgress: () => react_jsx_runtime.JSX.Element;
 
@@ -319,4 +329,4 @@ declare const AnimateLogo: () => react_jsx_runtime.JSX.Element;
 
 declare const PRIMARY_COLOR = "#00b4d8";
 
-export { AnimateLogo, Backdrop, BAWrapper as BottomAlert, Breakpoint, Button, Checkbox, CircleProgress, Container, ErrorText, Fade, FunButton, FunRoundButton, IconInfo, Modal, NoResults, NoticeBox, Overlay, OverlaySpinner, PRIMARY_COLOR, Pill, ProgressBar, ProgressBarSimple, RadioOption, RatingStars, ScrollProgress, Slider, Spinner, StepsComponent, Tippy, ToggleSwitch, UserContentSwitcher, balsamicSans, baseFieldStyle, createExerciseElementStyle, exerciseDeleteButton, exerciseEditButton, headerButtonClass, headerTippyClass, openSans, parkinsans, tippyClassname, toolbarExerciseButton, ubuntu, xIconButton };
+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, balsamicSans, baseFieldStyle, createExerciseElementStyle, exerciseDeleteButton, exerciseEditButton, headerButtonClass, headerTippyClass, openSans, parkinsans, tippyClassname, toolbarExerciseButton, ubuntu, xIconButton };

package/dist/index.js

@@ -67,6 +67,7 @@ __export(index_exports, {
   Checkbox: () => Checkbox_default,
   CircleProgress: () => CircleProgress_default,
   Container: () => Container_default,
+  CourseProgress: () => CourseProgress_default,
   ErrorText: () => ErrorText_default,
   Fade: () => Fade_default,
   FunButton: () => FunButton_default,
@@ -77,7 +78,7 @@ __export(index_exports, {
   NoticeBox: () => NoticeBox_default,
   Overlay: () => Overlay_default,
   OverlaySpinner: () => OverlaySpinner_default,
-  PRIMARY_COLOR: () => PRIMARY_COLOR2,
+  PRIMARY_COLOR: () => PRIMARY_COLOR3,
   Pill: () => Pill_default,
   ProgressBar: () => ProgressBar_default,
   ProgressBarSimple: () => ProgressBarSimple_default,
@@ -280,23 +281,23 @@ var Button = ({ disabled = false, loading, onClick, kind = "primary", size = "sm
   const styled = () => {
     switch (kind) {
       case "primary":
-        return `bg-primary font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-opacity-50" : "hover:bg-opacity-90"}`;
+        return `bg-primary font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-white/50" : "hover:bg-black/10"}`;
       case "indigo":
-        return `bg-indigo-500 font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-opacity-50" : "hover:bg-opacity-90"}`;
+        return `bg-indigo-500 font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-white/50" : "hover:bg-black/10"}`;
       case "green":
-        return `bg-green-500 font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-opacity-50" : "hover:bg-opacity-90"}`;
+        return `bg-green-500 font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-white/50" : "hover:bg-black/10"}`;
       case "teal":
-        return `bg-teal-500 font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-opacity-50" : "hover:bg-opacity-90"}`;
+        return `bg-teal-500 font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-white/50" : "hover:bg-black/10"}`;
       case "secondary":
-        return "bg-secondary text-white font-header font-medium hover:bg-opacity-90 transition-all duration-75";
+        return "bg-secondary text-white font-header font-medium hover:bg-black/10 transition-all duration-75";
       case "base":
         return "bg-white border-1 font-header border-gray-200 dark:bg-slate-600 dark:text-gray-100 dark:hover:bg-slate-400 hover:bg-slate-100 transition-all duration-75";
       case "gray":
-        return "bg-slate-400 dark:bg-slate-700 font-header text-white border-1 font-medium hover:bg-opacity-90 transition-opacity duration-75";
+        return "bg-slate-400 dark:bg-slate-700 font-header text-white border-1 font-medium hover:bg-black/10 transition-opacity duration-75";
       case "alert":
-        return "bg-amber-500 font-header text-white transition-all hover:bg-opacity-90 duration-75";
+        return "bg-amber-500 font-header text-white transition-all hover:bg-black/10 duration-75";
       case "warning":
-        return "bg-red-500 font-header text-white font-medium hover:bg-opacity-90 transition-opacity duration-100";
+        return "bg-red-500 font-header text-white font-medium hover:bg-black/10 transition-opacity duration-100";
       default:
         break;
     }
@@ -356,24 +357,24 @@ var FunButton = ({
   const classStyle = (0, import_react2.useMemo)(() => {
     switch (size) {
       case "base":
-        return "relative block px-8 py-3 rounded-lg text-lg text-white font-medium font-header hover:bg-opacity-90";
+        return "relative block px-8 py-3 rounded-lg text-lg text-white font-medium font-header hover:bg-slate-900/20";
       case "big":
-        return "relative block px-12 py-4 rounded-lg text-lg text-white font-medium font-header hover:bg-opacity-90";
+        return "relative block px-12 py-4 rounded-lg text-lg text-white font-medium font-header hover:bg-slate-900/20";
       case "small":
-        return "relative block px-6 py-1 rounded-lg text-lg text-white font-medium font-header hover:bg-opacity-90";
+        return "relative block px-6 py-1 rounded-lg text-lg text-white font-medium font-header hover:bg-slate-900/20";
       case "square":
-        return "relative block h-12 w-12 rounded text-lg flex items-center justify-center text-white font-medium font-header hover:bg-opacity-90";
+        return "relative block h-12 w-12 rounded text-lg flex items-center justify-center text-white font-medium font-header hover:bg-slate-900/20";
       default:
-        return "relative block px-8 py-3 rounded-lg text-lg text-white font-medium font-header hover:bg-opacity-90";
+        return "relative block px-8 py-3 rounded-lg text-lg text-white font-medium font-header hover:bg-slate-900/20";
     }
   }, [size]);
   const computedClassName = (0, import_react2.useMemo)(() => {
-    const cName = className + " rounded-lg border-none p-0 cursor-pointer opacity-90 hover:bg-opacity-90 transition-opacity";
+    const cName = className + " rounded-lg border-none p-0 cursor-pointer opacity-90 hover:bg-black/30 transition-opacity";
     return cName + (disabled ? " opacity-70 cursor-default" : "");
   }, [className, disabled]);
   const computedClassStyle = (0, import_react2.useMemo)(() => {
     const cName = classStyle;
-    return cName + (disabled ? " opacity-70 cursor-default hover:bg-opacity-70" : "");
+    return cName + (disabled ? " opacity-70 cursor-default hover:bg-black/70" : "");
   }, [classStyle, disabled]);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_framer_motion.motion.button,
@@ -581,7 +582,7 @@ var BottomAlert = ({ isDark, setDontShowAgain, dontShowAgain, title, borderColor
         background: isDark ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.1)",
         zIndex: 9999
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute top-0 w-full h-screen flex justify-center bg-gray-200 dark:bg-slate-800 dark:bg-opacity-50 bg-opacity-80", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute sm:w-1/2 w-full mx-auto shadow-xl rounded-md p-6 flex z-50 flex-col top-24 bg-white dark:bg-slate-900 overflow-clip rounded-bl-lg rounded-br-lg border-b-8 border-b-blue-500", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { borderColor: borderColor || import_colors3.default.sky["500"] }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute top-0 w-full h-screen flex justify-center bg-gray-200/90 dark:bg-slate-800/50", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute sm:w-1/2 w-full mx-auto shadow-xl rounded-md p-6 flex z-50 flex-col top-24 bg-white dark:bg-slate-900 overflow-clip rounded-bl-lg rounded-br-lg border-b-8 border-b-blue-500", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { borderColor: borderColor || import_colors3.default.sky["500"] }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "font-semibold font-header text-gray-700 dark:text-gray-300 text-xl", children: title }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mt-2 text-lg", children }),
         setDontShowAgain ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center space-x-1", children: [
@@ -695,7 +696,7 @@ var exerciseEditButton = "w-6 h-6 flex justify-center text-gray-700 dark:text-gr
 var tippyClassname = "p-2 bg-slate-600 dark:bg-slate-900 opacity-90 text-white font-medium font-header rounded-lg";
 var headerTippyClass = "rounded-lg p-2 bg-slate-950 opacity-95 text-white font-medium";
 var headerButtonClass = "w-10 h-10 rounded-full dark:hover:bg-slate-600 hover:bg-slate-200 bg-transparent flex justify-center items-center flex justify-center items-center text-slate-600 dark:text-slate-100 hover:text-primary dark:hover:text-primary transition-colors duration-50";
-var toolbarExerciseButton = "flex bg-gray-50 bg-opacity-95 items-center sm:justify-between p-4 shadow-sm w-full rounded-xl border-4 border-transparent hover:border-white text-gray-700 hover:text-white hover:bg-indigo-500 transition-colors duration-75";
+var toolbarExerciseButton = "flex bg-gray-50/90 items-center sm:justify-between p-4 shadow-sm w-full rounded-xl border-4 border-transparent hover:border-white text-gray-700 hover:text-white hover:bg-indigo-500 transition-colors duration-75";
 
 // src/Common/Tippy.tsx
 var import_react6 = require("react");
@@ -1310,10 +1311,111 @@ var CircleProgress = ({ twColor, percentage, radius, fill, strokeWidth }) => {
 };
 var CircleProgress_default = CircleProgress;
 
-// src/ProgressBar/ScrollProgress.tsx
-var import_react10 = require("react");
+// src/ProgressBar/CourseProgress.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var PRIMARY_COLOR = "#00b4d8";
+var CourseProgress = ({ twColor, percentage, label }) => {
+  const cx = "50%";
+  const cy = "50%";
+  const r = 50;
+  const strokeWidth = 10;
+  const fullLength = 2 * Math.PI * r;
+  const length = fullLength * (percentage < 1 ? 1 - percentage : 0.01);
+  const strokeDashoffset = 2 * Math.PI * r - percentage / 100 * 2 * Math.PI * r;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center flex-col justify-center space-y-0  dark:bg-inherit dark:text-gray-300", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: `relative flex items-center justify-center -my-2 -mt-1 overflow-hidden rounded-full`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", { className: `-rotate-90`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "circle",
+          {
+            className: "text-gray-300",
+            strokeWidth,
+            stroke: "currentColor",
+            fill: "transparent",
+            r,
+            cx,
+            cy
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "circle",
+          {
+            style: { strokeDashoffset },
+            color: twColor || PRIMARY_COLOR,
+            ref: (ref) => {
+              if (ref) {
+              }
+            },
+            strokeWidth,
+            strokeLinecap: "round",
+            stroke: "currentColor",
+            fill: "transparent",
+            r,
+            cx,
+            cy,
+            strokeDasharray: fullLength,
+            strokeDashoffset: length
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: `absolute top-[${50 / 2}] text-xl leading-none font-medium font-header hidden sm:block`, children: percentage.toString() + "%" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "font-medium sm:text-xl font-header text-center w-full", children: label })
+  ] });
+};
+var Small = ({ twColor, percentage, label }) => {
+  const cx = 18;
+  const cy = 18;
+  const r = 14;
+  const strokeWidth = 4;
+  const strokeDashoffset = 2 * Math.PI * r - percentage / 100 * 2 * Math.PI * r;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center space-x-2 rounded-full bg-transparent border-2 border-slate-100 w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: `flex items-center justify-center overflow-hidden`, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", { className: `w-10 h-11 transform translate-x-1 translate-y-1`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "circle",
+        {
+          className: "text-gray-300",
+          strokeWidth,
+          stroke: "currentColor",
+          fill: "transparent",
+          r,
+          cx,
+          cy
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "circle",
+        {
+          style: { strokeDashoffset },
+          className: twColor || "text-blue-500",
+          ref: (ref) => {
+            if (ref) {
+            }
+          },
+          strokeWidth,
+          strokeLinecap: "round",
+          stroke: "currentColor",
+          fill: "transparent",
+          r,
+          cx,
+          cy
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("p", { className: "font-medium dark:text-gray-300 text-gray-600 text-sm font-header mt-1", children: [
+      label,
+      " ",
+      percentage.toString() + "%"
+    ] })
+  ] });
+};
+CourseProgress.Small = Small;
+var CourseProgress_default = CourseProgress;
+
+// src/ProgressBar/ScrollProgress.tsx
+var import_react10 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var PRIMARY_COLOR2 = "#00b4d8";
 var ScrollProgress = () => {
   const [scrollPercentage, setScrollPercentage] = (0, import_react10.useState)(0);
   (0, import_react10.useEffect)(() => {
@@ -1329,7 +1431,7 @@ var ScrollProgress = () => {
       window.removeEventListener("scroll", handleScroll);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "div",
     {
       style: {
@@ -1342,12 +1444,12 @@ var ScrollProgress = () => {
         left: "0px",
         right: "0px"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "div",
         {
           style: {
             height: "100%",
-            backgroundColor: PRIMARY_COLOR,
+            backgroundColor: PRIMARY_COLOR2,
             borderRadius: 2,
             width: `${scrollPercentage}%`
           }
@@ -1360,7 +1462,7 @@ var ScrollProgress_default = ScrollProgress;
 
 // src/Icons/AnimateLogo.tsx
 var import_react11 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var AnimateLogo = () => {
   const [isFirefox, setIsFirefox] = (0, import_react11.useState)(false);
   (0, import_react11.useEffect)(() => {
@@ -1368,7 +1470,7 @@ var AnimateLogo = () => {
     setIsFirefox(userAgent.indexOf("Firefox") > -1);
   }, []);
   if (isFirefox) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "animate-pulse", viewBox: "0 0 600 600", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "animate-pulse", viewBox: "0 0 600 600", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "path",
       {
         className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
@@ -1380,7 +1482,7 @@ var AnimateLogo = () => {
         strokeDasharray: "1600",
         d: "M466.49 164.79c17.79 34.76 25.48 75.66 19.08 118.96-11.28 76.36-67.11 139.06-141.89 158.25-127.11 32.61-243.49-61.27-245.86-184.81C95.79 150.86 182.9 60.52 289.23 58.56c33.95-.63 66.08 7.48 94.22 22.29 0 0 15.68 6.34 10.14 23.19 0 0-68.52 219.82-352.61 268.06",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "animate",
             {
               attributeName: "stroke-dashoffset",
@@ -1395,7 +1497,7 @@ var AnimateLogo = () => {
               values: "1600;0;0;1600;1600"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "animateTransform",
             {
               attributeName: "transform",
@@ -1415,7 +1517,7 @@ var AnimateLogo = () => {
       }
     ) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "g",
     {
       style: {
@@ -1425,7 +1527,7 @@ var AnimateLogo = () => {
       height: 176,
       width: 176,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "path",
           {
             className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
@@ -1442,7 +1544,7 @@ var AnimateLogo = () => {
             strokeWidth: "82",
             strokeDasharray: "1600",
             d: "M466.49 164.79c17.79 34.76 25.48 75.66 19.08 118.96-11.28 76.36-67.11 139.06-141.89 158.25-127.11 32.61-243.49-61.27-245.86-184.81C95.79 150.86 182.9 60.52 289.23 58.56c33.95-.63 66.08 7.48 94.22 22.29 0 0 15.68 6.34 10.14 23.19 0 0-68.52 219.82-352.61 268.06",
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               "animate",
               {
                 attributeName: "stroke-dashoffset",
@@ -1459,7 +1561,7 @@ var AnimateLogo = () => {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "animateTransform",
           {
             attributeName: "transform",
@@ -1484,14 +1586,14 @@ var AnimateLogo_default = AnimateLogo;
 // src/Spinners/OverlaySpinner.tsx
 var import_react12 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var OverlaySpinner = ({ visible }) => {
   const [mounted, setMounted] = (0, import_react12.useState)(false);
   (0, import_react12.useEffect)(() => setMounted(true), []);
   if (!mounted) return null;
   if (!visible) return null;
   return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "animate-fade-in", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "fixed top-0 left-0 w-full h-screen flex items-center justify-center z-50 dark:bg-black/70 bg-white/60", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-44 w-44 overflow-visible", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AnimateLogo_default, {}) }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "animate-fade-in", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "fixed top-0 left-0 w-full h-screen flex items-center justify-center z-50 dark:bg-black/70 bg-white/60", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "h-44 w-44 overflow-visible", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AnimateLogo_default, {}) }) }) }),
     typeof window !== "undefined" ? document.body : {},
     "spinner"
   );
@@ -1499,7 +1601,7 @@ var OverlaySpinner = ({ visible }) => {
 var OverlaySpinner_default = OverlaySpinner;
 
 // src/constants.tsx
-var PRIMARY_COLOR2 = "#00b4d8";
+var PRIMARY_COLOR3 = "#00b4d8";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnimateLogo,
@@ -1510,6 +1612,7 @@ var PRIMARY_COLOR2 = "#00b4d8";
   Checkbox,
   CircleProgress,
   Container,
+  CourseProgress,
   ErrorText,
   Fade,
   FunButton,

package/dist/index.mjs

@@ -204,23 +204,23 @@ var Button = ({ disabled = false, loading, onClick, kind = "primary", size = "sm
   const styled = () => {
     switch (kind) {
       case "primary":
-        return `bg-primary font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-opacity-50" : "hover:bg-opacity-90"}`;
+        return `bg-primary font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-white/50" : "hover:bg-black/10"}`;
       case "indigo":
-        return `bg-indigo-500 font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-opacity-50" : "hover:bg-opacity-90"}`;
+        return `bg-indigo-500 font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-white/50" : "hover:bg-black/10"}`;
       case "green":
-        return `bg-green-500 font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-opacity-50" : "hover:bg-opacity-90"}`;
+        return `bg-green-500 font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-white/50" : "hover:bg-black/10"}`;
       case "teal":
-        return `bg-teal-500 font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-opacity-50" : "hover:bg-opacity-90"}`;
+        return `bg-teal-500 font-header text-white font-medium transition-all duration-75 ${disabled ? "bg-white/50" : "hover:bg-black/10"}`;
       case "secondary":
-        return "bg-secondary text-white font-header font-medium hover:bg-opacity-90 transition-all duration-75";
+        return "bg-secondary text-white font-header font-medium hover:bg-black/10 transition-all duration-75";
       case "base":
         return "bg-white border-1 font-header border-gray-200 dark:bg-slate-600 dark:text-gray-100 dark:hover:bg-slate-400 hover:bg-slate-100 transition-all duration-75";
       case "gray":
-        return "bg-slate-400 dark:bg-slate-700 font-header text-white border-1 font-medium hover:bg-opacity-90 transition-opacity duration-75";
+        return "bg-slate-400 dark:bg-slate-700 font-header text-white border-1 font-medium hover:bg-black/10 transition-opacity duration-75";
       case "alert":
-        return "bg-amber-500 font-header text-white transition-all hover:bg-opacity-90 duration-75";
+        return "bg-amber-500 font-header text-white transition-all hover:bg-black/10 duration-75";
       case "warning":
-        return "bg-red-500 font-header text-white font-medium hover:bg-opacity-90 transition-opacity duration-100";
+        return "bg-red-500 font-header text-white font-medium hover:bg-black/10 transition-opacity duration-100";
       default:
         break;
     }
@@ -280,24 +280,24 @@ var FunButton = ({
   const classStyle = useMemo(() => {
     switch (size) {
       case "base":
-        return "relative block px-8 py-3 rounded-lg text-lg text-white font-medium font-header hover:bg-opacity-90";
+        return "relative block px-8 py-3 rounded-lg text-lg text-white font-medium font-header hover:bg-slate-900/20";
       case "big":
-        return "relative block px-12 py-4 rounded-lg text-lg text-white font-medium font-header hover:bg-opacity-90";
+        return "relative block px-12 py-4 rounded-lg text-lg text-white font-medium font-header hover:bg-slate-900/20";
       case "small":
-        return "relative block px-6 py-1 rounded-lg text-lg text-white font-medium font-header hover:bg-opacity-90";
+        return "relative block px-6 py-1 rounded-lg text-lg text-white font-medium font-header hover:bg-slate-900/20";
       case "square":
-        return "relative block h-12 w-12 rounded text-lg flex items-center justify-center text-white font-medium font-header hover:bg-opacity-90";
+        return "relative block h-12 w-12 rounded text-lg flex items-center justify-center text-white font-medium font-header hover:bg-slate-900/20";
       default:
-        return "relative block px-8 py-3 rounded-lg text-lg text-white font-medium font-header hover:bg-opacity-90";
+        return "relative block px-8 py-3 rounded-lg text-lg text-white font-medium font-header hover:bg-slate-900/20";
     }
   }, [size]);
   const computedClassName = useMemo(() => {
-    const cName = className + " rounded-lg border-none p-0 cursor-pointer opacity-90 hover:bg-opacity-90 transition-opacity";
+    const cName = className + " rounded-lg border-none p-0 cursor-pointer opacity-90 hover:bg-black/30 transition-opacity";
     return cName + (disabled ? " opacity-70 cursor-default" : "");
   }, [className, disabled]);
   const computedClassStyle = useMemo(() => {
     const cName = classStyle;
-    return cName + (disabled ? " opacity-70 cursor-default hover:bg-opacity-70" : "");
+    return cName + (disabled ? " opacity-70 cursor-default hover:bg-black/70" : "");
   }, [classStyle, disabled]);
   return /* @__PURE__ */ jsx6(
     motion.button,
@@ -505,7 +505,7 @@ var BottomAlert = ({ isDark, setDontShowAgain, dontShowAgain, title, borderColor
         background: isDark ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.1)",
         zIndex: 9999
       },
-      children: /* @__PURE__ */ jsx11("div", { className: "absolute top-0 w-full h-screen flex justify-center bg-gray-200 dark:bg-slate-800 dark:bg-opacity-50 bg-opacity-80", children: /* @__PURE__ */ jsx11("div", { className: "absolute sm:w-1/2 w-full mx-auto shadow-xl rounded-md p-6 flex z-50 flex-col top-24 bg-white dark:bg-slate-900 overflow-clip rounded-bl-lg rounded-br-lg border-b-8 border-b-blue-500", children: /* @__PURE__ */ jsxs4("div", { style: { borderColor: borderColor || colors3.sky["500"] }, children: [
+      children: /* @__PURE__ */ jsx11("div", { className: "absolute top-0 w-full h-screen flex justify-center bg-gray-200/90 dark:bg-slate-800/50", children: /* @__PURE__ */ jsx11("div", { className: "absolute sm:w-1/2 w-full mx-auto shadow-xl rounded-md p-6 flex z-50 flex-col top-24 bg-white dark:bg-slate-900 overflow-clip rounded-bl-lg rounded-br-lg border-b-8 border-b-blue-500", children: /* @__PURE__ */ jsxs4("div", { style: { borderColor: borderColor || colors3.sky["500"] }, children: [
         /* @__PURE__ */ jsx11("h3", { className: "font-semibold font-header text-gray-700 dark:text-gray-300 text-xl", children: title }),
         /* @__PURE__ */ jsx11("div", { className: "mt-2 text-lg", children }),
         setDontShowAgain ? /* @__PURE__ */ jsxs4("div", { className: "flex items-center space-x-1", children: [
@@ -619,7 +619,7 @@ var exerciseEditButton = "w-6 h-6 flex justify-center text-gray-700 dark:text-gr
 var tippyClassname = "p-2 bg-slate-600 dark:bg-slate-900 opacity-90 text-white font-medium font-header rounded-lg";
 var headerTippyClass = "rounded-lg p-2 bg-slate-950 opacity-95 text-white font-medium";
 var headerButtonClass = "w-10 h-10 rounded-full dark:hover:bg-slate-600 hover:bg-slate-200 bg-transparent flex justify-center items-center flex justify-center items-center text-slate-600 dark:text-slate-100 hover:text-primary dark:hover:text-primary transition-colors duration-50";
-var toolbarExerciseButton = "flex bg-gray-50 bg-opacity-95 items-center sm:justify-between p-4 shadow-sm w-full rounded-xl border-4 border-transparent hover:border-white text-gray-700 hover:text-white hover:bg-indigo-500 transition-colors duration-75";
+var toolbarExerciseButton = "flex bg-gray-50/90 items-center sm:justify-between p-4 shadow-sm w-full rounded-xl border-4 border-transparent hover:border-white text-gray-700 hover:text-white hover:bg-indigo-500 transition-colors duration-75";
 
 // src/Common/Tippy.tsx
 import { useState as useState2, useRef, useEffect as useEffect3 } from "react";
@@ -1246,10 +1246,111 @@ var CircleProgress = ({ twColor, percentage, radius, fill, strokeWidth }) => {
 };
 var CircleProgress_default = CircleProgress;
 
+// src/ProgressBar/CourseProgress.tsx
+import { jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
+var PRIMARY_COLOR = "#00b4d8";
+var CourseProgress = ({ twColor, percentage, label }) => {
+  const cx = "50%";
+  const cy = "50%";
+  const r = 50;
+  const strokeWidth = 10;
+  const fullLength = 2 * Math.PI * r;
+  const length = fullLength * (percentage < 1 ? 1 - percentage : 0.01);
+  const strokeDashoffset = 2 * Math.PI * r - percentage / 100 * 2 * Math.PI * r;
+  return /* @__PURE__ */ jsxs15("div", { className: "flex items-center flex-col justify-center space-y-0  dark:bg-inherit dark:text-gray-300", children: [
+    /* @__PURE__ */ jsxs15("div", { className: `relative flex items-center justify-center -my-2 -mt-1 overflow-hidden rounded-full`, children: [
+      /* @__PURE__ */ jsxs15("svg", { className: `-rotate-90`, children: [
+        /* @__PURE__ */ jsx33(
+          "circle",
+          {
+            className: "text-gray-300",
+            strokeWidth,
+            stroke: "currentColor",
+            fill: "transparent",
+            r,
+            cx,
+            cy
+          }
+        ),
+        /* @__PURE__ */ jsx33(
+          "circle",
+          {
+            style: { strokeDashoffset },
+            color: twColor || PRIMARY_COLOR,
+            ref: (ref) => {
+              if (ref) {
+              }
+            },
+            strokeWidth,
+            strokeLinecap: "round",
+            stroke: "currentColor",
+            fill: "transparent",
+            r,
+            cx,
+            cy,
+            strokeDasharray: fullLength,
+            strokeDashoffset: length
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx33("span", { className: `absolute top-[${50 / 2}] text-xl leading-none font-medium font-header hidden sm:block`, children: percentage.toString() + "%" })
+    ] }),
+    /* @__PURE__ */ jsx33("p", { className: "font-medium sm:text-xl font-header text-center w-full", children: label })
+  ] });
+};
+var Small = ({ twColor, percentage, label }) => {
+  const cx = 18;
+  const cy = 18;
+  const r = 14;
+  const strokeWidth = 4;
+  const strokeDashoffset = 2 * Math.PI * r - percentage / 100 * 2 * Math.PI * r;
+  return /* @__PURE__ */ jsxs15("div", { className: "flex items-center space-x-2 rounded-full bg-transparent border-2 border-slate-100 w-full", children: [
+    /* @__PURE__ */ jsx33("div", { className: `flex items-center justify-center overflow-hidden`, children: /* @__PURE__ */ jsxs15("svg", { className: `w-10 h-11 transform translate-x-1 translate-y-1`, children: [
+      /* @__PURE__ */ jsx33(
+        "circle",
+        {
+          className: "text-gray-300",
+          strokeWidth,
+          stroke: "currentColor",
+          fill: "transparent",
+          r,
+          cx,
+          cy
+        }
+      ),
+      /* @__PURE__ */ jsx33(
+        "circle",
+        {
+          style: { strokeDashoffset },
+          className: twColor || "text-blue-500",
+          ref: (ref) => {
+            if (ref) {
+            }
+          },
+          strokeWidth,
+          strokeLinecap: "round",
+          stroke: "currentColor",
+          fill: "transparent",
+          r,
+          cx,
+          cy
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs15("p", { className: "font-medium dark:text-gray-300 text-gray-600 text-sm font-header mt-1", children: [
+      label,
+      " ",
+      percentage.toString() + "%"
+    ] })
+  ] });
+};
+CourseProgress.Small = Small;
+var CourseProgress_default = CourseProgress;
+
 // src/ProgressBar/ScrollProgress.tsx
 import { useEffect as useEffect5, useState as useState5 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var PRIMARY_COLOR = "#00b4d8";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var PRIMARY_COLOR2 = "#00b4d8";
 var ScrollProgress = () => {
   const [scrollPercentage, setScrollPercentage] = useState5(0);
   useEffect5(() => {
@@ -1265,7 +1366,7 @@ var ScrollProgress = () => {
       window.removeEventListener("scroll", handleScroll);
     };
   }, []);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       style: {
@@ -1278,12 +1379,12 @@ var ScrollProgress = () => {
         left: "0px",
         right: "0px"
       },
-      children: /* @__PURE__ */ jsx33(
+      children: /* @__PURE__ */ jsx34(
         "div",
         {
           style: {
             height: "100%",
-            backgroundColor: PRIMARY_COLOR,
+            backgroundColor: PRIMARY_COLOR2,
             borderRadius: 2,
             width: `${scrollPercentage}%`
           }
@@ -1296,7 +1397,7 @@ var ScrollProgress_default = ScrollProgress;
 
 // src/Icons/AnimateLogo.tsx
 import { useEffect as useEffect6, useState as useState6 } from "react";
-import { jsx as jsx34, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
 var AnimateLogo = () => {
   const [isFirefox, setIsFirefox] = useState6(false);
   useEffect6(() => {
@@ -1304,7 +1405,7 @@ var AnimateLogo = () => {
     setIsFirefox(userAgent.indexOf("Firefox") > -1);
   }, []);
   if (isFirefox) {
-    return /* @__PURE__ */ jsx34("svg", { xmlns: "http://www.w3.org/2000/svg", className: "animate-pulse", viewBox: "0 0 600 600", children: /* @__PURE__ */ jsx34("g", { children: /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsx35("svg", { xmlns: "http://www.w3.org/2000/svg", className: "animate-pulse", viewBox: "0 0 600 600", children: /* @__PURE__ */ jsx35("g", { children: /* @__PURE__ */ jsxs16(
       "path",
       {
         className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
@@ -1316,7 +1417,7 @@ var AnimateLogo = () => {
         strokeDasharray: "1600",
         d: "M466.49 164.79c17.79 34.76 25.48 75.66 19.08 118.96-11.28 76.36-67.11 139.06-141.89 158.25-127.11 32.61-243.49-61.27-245.86-184.81C95.79 150.86 182.9 60.52 289.23 58.56c33.95-.63 66.08 7.48 94.22 22.29 0 0 15.68 6.34 10.14 23.19 0 0-68.52 219.82-352.61 268.06",
         children: [
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             "animate",
             {
               attributeName: "stroke-dashoffset",
@@ -1331,7 +1432,7 @@ var AnimateLogo = () => {
               values: "1600;0;0;1600;1600"
             }
           ),
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             "animateTransform",
             {
               attributeName: "transform",
@@ -1351,7 +1452,7 @@ var AnimateLogo = () => {
       }
     ) }) });
   }
-  return /* @__PURE__ */ jsx34("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", children: /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsx35("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", children: /* @__PURE__ */ jsxs16(
     "g",
     {
       style: {
@@ -1361,7 +1462,7 @@ var AnimateLogo = () => {
       height: 176,
       width: 176,
       children: [
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           "path",
           {
             className: "stroke-black dark:stroke-white text-gray-900 dark:text-gray-50",
@@ -1378,7 +1479,7 @@ var AnimateLogo = () => {
             strokeWidth: "82",
             strokeDasharray: "1600",
             d: "M466.49 164.79c17.79 34.76 25.48 75.66 19.08 118.96-11.28 76.36-67.11 139.06-141.89 158.25-127.11 32.61-243.49-61.27-245.86-184.81C95.79 150.86 182.9 60.52 289.23 58.56c33.95-.63 66.08 7.48 94.22 22.29 0 0 15.68 6.34 10.14 23.19 0 0-68.52 219.82-352.61 268.06",
-            children: /* @__PURE__ */ jsx34(
+            children: /* @__PURE__ */ jsx35(
               "animate",
               {
                 attributeName: "stroke-dashoffset",
@@ -1395,7 +1496,7 @@ var AnimateLogo = () => {
             )
           }
         ),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           "animateTransform",
           {
             attributeName: "transform",
@@ -1420,14 +1521,14 @@ var AnimateLogo_default = AnimateLogo;
 // src/Spinners/OverlaySpinner.tsx
 import { useEffect as useEffect7, useState as useState7 } from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var OverlaySpinner = ({ visible }) => {
   const [mounted, setMounted] = useState7(false);
   useEffect7(() => setMounted(true), []);
   if (!mounted) return null;
   if (!visible) return null;
   return createPortal(
-    /* @__PURE__ */ jsx35("div", { className: "animate-fade-in", children: /* @__PURE__ */ jsx35("div", { className: "fixed top-0 left-0 w-full h-screen flex items-center justify-center z-50 dark:bg-black/70 bg-white/60", children: /* @__PURE__ */ jsx35("div", { className: "h-44 w-44 overflow-visible", children: /* @__PURE__ */ jsx35(AnimateLogo_default, {}) }) }) }),
+    /* @__PURE__ */ jsx36("div", { className: "animate-fade-in", children: /* @__PURE__ */ jsx36("div", { className: "fixed top-0 left-0 w-full h-screen flex items-center justify-center z-50 dark:bg-black/70 bg-white/60", children: /* @__PURE__ */ jsx36("div", { className: "h-44 w-44 overflow-visible", children: /* @__PURE__ */ jsx36(AnimateLogo_default, {}) }) }) }),
     typeof window !== "undefined" ? document.body : {},
     "spinner"
   );
@@ -1435,7 +1536,7 @@ var OverlaySpinner = ({ visible }) => {
 var OverlaySpinner_default = OverlaySpinner;
 
 // src/constants.tsx
-var PRIMARY_COLOR2 = "#00b4d8";
+var PRIMARY_COLOR3 = "#00b4d8";
 export {
   AnimateLogo_default as AnimateLogo,
   Backdrop_default as Backdrop,
@@ -1445,6 +1546,7 @@ export {
   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,
@@ -1455,7 +1557,7 @@ export {
   NoticeBox_default as NoticeBox,
   Overlay_default as Overlay,
   OverlaySpinner_default as OverlaySpinner,
-  PRIMARY_COLOR2 as PRIMARY_COLOR,
+  PRIMARY_COLOR3 as PRIMARY_COLOR,
   Pill_default as Pill,
   ProgressBar_default as ProgressBar,
   ProgressBarSimple_default as ProgressBarSimple,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evelearn-theme",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",