evelearn-theme 2.0.0 → 2.0.1

package/dist/chunk-XLPRFXMF.mjs

@@ -0,0 +1,248 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/constants.tsx
+var PRIMARY_COLOR = "#00b4d8";
+
+// src/Common/Container.tsx
+import { jsx } from "react/jsx-runtime";
+var Container = ({ backgroundImage, style, children, onClick }) => {
+  return backgroundImage ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: __spreadValues({
+        backgroundImage,
+        backgroundSize: "cover"
+      }, style),
+      className: "w-full md:min-h-screen dark:bg-slate-950 mx-auto overflow-y-auto overflow-x-clip px-0 md:px-2 sm:py-4 py-1 relative",
+      onClick,
+      children: children ? children : null
+    }
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `w-full dark:bg-slate-950 mx-auto overflow-y-auto overflow-x-clip px-0 sm:px-16 relative pt-20`,
+      onClick,
+      style: style || { minHeight: "100vh" },
+      children: children ? children : null
+    }
+  );
+};
+var Container_default = Container;
+
+// src/Common/ErrorText.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ErrorText = ({ text, style, classNames }) => {
+  return /* @__PURE__ */ jsx2("p", { className: classNames ? classNames : "text-red-500 font-semibold text-wrap py-auto", style, children: text });
+};
+var ErrorText_default = ErrorText;
+
+// src/Common/fieldStyle.ts
+var 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";
+var 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";
+var exerciseDeleteButton = "w-6 h-6 flex justify-center text-gray-700 dark:text-gray-200 hover:text-red-600 dark:hover:text-red-500 transition-all duration-150 hover:scale-125";
+var xIconButton = "w-6 h-6 flex justify-center text-gray-700 dark:text-gray-200 hover:text-gray-950 dark:hover:text-gray-100 transition-all duration-150 hover:scale-125";
+var exerciseEditButton = "w-6 h-6 flex justify-center text-gray-700 dark:text-gray-200 hover:text-red-600 dark:hover:text-green-500 transition-all duration-150 hover:scale-125";
+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/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/Spinners/Spinner.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var Spinner = ({ visible = true, size, white, isDark }) => {
+  if (visible === false) return null;
+  const isWhite = white || isDark;
+  const color = isWhite ? "stroke-white/90" : "stroke-slate-600/80";
+  const bgColor = isWhite ? "stroke-white/20" : "stroke-slate-500/20";
+  const dimensions = size === "small" ? "w-5 h-5" : "w-8 h-8";
+  const spinnerClasses = `
+        absolute
+        top-0
+        animate-spin
+        ${dimensions}
+    `;
+  return /* @__PURE__ */ jsxs("div", { className: "relative h-8 w-8 flex justify-center items-center", children: [
+    /* @__PURE__ */ jsx3(
+      "svg",
+      {
+        className: `absolute top-0 ${dimensions} ${bgColor}`,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        strokeWidth: "2.4",
+        children: /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10" })
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "svg",
+      {
+        className: spinnerClasses,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        strokeWidth: "2.4",
+        strokeLinecap: "round",
+        children: /* @__PURE__ */ jsx3(
+          "path",
+          {
+            d: `
+                        M 12 2 
+                        A 10 10 0 0 1 22 12 
+                        A 10 10 0 0 1 12 22 
+                        A 10 10 0 0 1 2 12 
+                        A 10 10 0 0 1 12 2
+                    `,
+            strokeDasharray: "13 18.4",
+            stroke: "inherit",
+            className: color
+          }
+        )
+      }
+    )
+  ] });
+};
+var SpinnerCentered = (props) => {
+  if (props.visible === false) return null;
+  return /* @__PURE__ */ jsx3("div", { className: "w-full flex justify-center items-center", children: /* @__PURE__ */ jsx3(Spinner, __spreadValues({}, props)) });
+};
+Spinner.displayName = "Spinner";
+SpinnerCentered.displayName = "Spinner.Centered";
+Spinner.Centered = SpinnerCentered;
+var Spinner_default = Spinner;
+
+// src/Common/NoResults.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var HEIGHT = 160;
+var WIDTH = HEIGHT * (16 / 9);
+var NoResults = ({ loading, message }) => {
+  return /* @__PURE__ */ jsxs2("div", { className: "relative w-full flex justify-center items-center", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex justify-start w-full space-x-2 py-3 p-4 bg-slate-100 dark:bg-slate-800 rounded-md", children: [
+      /* @__PURE__ */ jsx4("div", { style: { width: `calc(${WIDTH}px + 1rem)`, height: 320 }, className: "rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition-shadow duration-150 px-2 pt-2 bg-slate-200 dark:bg-slate-700 animate-pulse" }),
+      /* @__PURE__ */ jsx4("div", { style: { width: `calc(${WIDTH}px + 1rem)`, height: 320 }, className: "rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition-shadow duration-150 px-2 pt-2 bg-slate-200 dark:bg-slate-700 animate-pulse" })
+    ] }),
+    !loading && /* @__PURE__ */ jsx4("div", { className: "absolute w-full h-full flex justify-center items-center m-auto", children: /* @__PURE__ */ jsx4("div", { className: "p-4 rounded-lg bg-white dark:bg-slate-700 shadow-xl", children: /* @__PURE__ */ jsx4("p", { className: "font-semibold text-lg text-gray-700 dark:text-gray-300", children: message || "No results" }) }) })
+  ] });
+};
+var NoResults_default = NoResults;
+
+// src/Common/Pill.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Pill = ({ text }) => {
+  return /* @__PURE__ */ jsx5("span", { className: "rounded-full px-3 py-1 text-sm font-header font-medium bg-white dark:bg-slate-900 text-gray-700 dark:text-gray-300 mr-2 mb-2", children: text });
+};
+var Pill_default = Pill;
+
+// src/Common/StepsComponent.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var StepsComponent = ({ steps, activeStep, onStepPress }) => {
+  return /* @__PURE__ */ jsx6("div", { className: "flex justify-between items-center w-full p-1 mb-2", children: steps.map((step, index) => {
+    return /* @__PURE__ */ jsx6("div", { className: "flex justify-center items-center space-x-2 w-full", children: /* @__PURE__ */ jsx6("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        onClick: () => onStepPress(index),
+        className: `flex items-center space-x-2 px-4 py-2 rounded-lg min-w-10 md:min-w-20 sm:min-w-40 font-header transition-all duration-150
+                                        ${activeStep === index ? "bg-primary text-white shadow-lg scale-110 border-2 border-primary" : "bg-gray-100 dark:bg-slate-800 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-slate-700 border-2 border-transparent hover:border-primary/30"}`,
+        children: /* @__PURE__ */ jsxs3("span", { className: "font-medium truncate", children: [
+          index + 1,
+          ".   ",
+          step.label
+        ] })
+      }
+    ) }) }, `step_${index}_${step.label}`);
+  }) });
+};
+var StepsComponent_default = StepsComponent;
+
+// src/Fade/Fade.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Fade = ({ children, inProp }) => {
+  return /* @__PURE__ */ jsx7("div", { className: "animate-fade-in", children });
+};
+var Fade_default = Fade;
+
+// src/Backdrop/Backdrop.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Backdrop = ({ visible, onClick, opacity }) => {
+  if (!visible) return null;
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      style: {
+        opacity: opacity ? opacity : 90,
+        zIndex: 21
+      },
+      className: `fixed top-0 left-0 w-full h-screen bg-gray-100 dark:bg-slate-900`,
+      onClick
+    }
+  );
+};
+var Backdrop_default = Backdrop;
+
+// src/Breakpoint/Breakpoint.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Breakpoint = ({ children, fromSize, toSize }) => {
+  let className = "";
+  if (fromSize && toSize) {
+    className = `hidden ${fromSize}:block ${toSize}:hidden`;
+  } else if (fromSize) {
+    className = `hidden ${fromSize}:block`;
+  } else if (toSize) {
+    className = `block ${toSize}:hidden`;
+  }
+  return /* @__PURE__ */ jsx9("div", { className, children });
+};
+var Breakpoint_default = Breakpoint;
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __objRest,
+  PRIMARY_COLOR,
+  Container_default,
+  ErrorText_default,
+  baseFieldStyle,
+  createExerciseElementStyle,
+  exerciseDeleteButton,
+  xIconButton,
+  exerciseEditButton,
+  tippyClassname,
+  headerTippyClass,
+  headerButtonClass,
+  toolbarExerciseButton,
+  Spinner_default,
+  NoResults_default,
+  Pill_default,
+  StepsComponent_default,
+  Fade_default,
+  Backdrop_default,
+  Breakpoint_default
+};

package/dist/index.d.mts

@@ -1,88 +1,243 @@
-import React, { CSSProperties, ReactNode } from 'react';
+export { Backdrop, Breakpoint, Container, ErrorText, Fade, NoResults, PRIMARY_COLOR, Pill, Spinner, StepsComponent, baseFieldStyle, createExerciseElementStyle, exerciseDeleteButton, exerciseEditButton, headerButtonClass, headerTippyClass, tippyClassname, toolbarExerciseButton, xIconButton } from './server.mjs';
+import * as React$1 from 'react';
+import React__default, { CSSProperties, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Placement } from '@floating-ui/react';
 
-declare const PRIMARY_COLOR = "#00b4d8";
+interface BaseModalProps {
+    visible: boolean;
+    children: React__default.ReactNode;
+    appear?: boolean;
+    dismissable?: boolean;
+    dismissOnBackdropClick?: boolean;
+    onDismissed?: () => void;
+    style?: CSSProperties;
+    fullscreen?: boolean;
+    dismissLink?: string;
+    bgOpacity?: number;
+    displayDark?: boolean;
+}
+type ModalProps = BaseModalProps;
+declare const Modal: ({ visible, children, fullscreen, displayDark, dismissLink, bgOpacity, onDismissed, dismissable, dismissOnBackdropClick, style, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
 
-interface ContainerProps {
-    backgroundColor?: string;
-    backgroundImage?: string;
-    style?: React.CSSProperties;
-    onClick?: () => void;
+type OverlayProps = BaseModalProps & {
+    children?: React__default.ReactNode;
+    withContainer?: boolean;
+    opacity?: number;
     isDark?: boolean;
-    children?: React.ReactNode;
+    zIndex?: number;
+    onClick?: () => void;
+};
+declare const Overlay: ({ visible, onDismissed, onClick, zIndex, isDark, children, opacity, withContainer, }: OverlayProps) => React__default.ReactPortal | null;
+
+interface Props$c {
+    disabled?: boolean;
+    kind?: 'primary' | 'secondary' | 'base' | 'warning' | 'alert' | 'gray' | 'green' | 'teal' | 'indigo';
+    size?: 'small' | 'fixed' | 'large';
+    type?: 'button' | 'submit';
+    loading?: boolean;
+    children: React__default.ReactNode;
+    onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
 }
-declare const Container: React.FC<ContainerProps>;
+declare const Button: ({ disabled, loading, onClick, kind, size, type, children }: Props$c) => react_jsx_runtime.JSX.Element;
 
-type Props$4 = {
-    text: string;
-    style?: CSSProperties | undefined;
-    classNames?: string;
-};
-declare const ErrorText: ({ text, style, classNames }: Props$4) => 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";
-declare const exerciseDeleteButton = "w-6 h-6 flex justify-center text-gray-700 dark:text-gray-200 hover:text-red-600 dark:hover:text-red-500 transition-all duration-150 hover:scale-125";
-declare const xIconButton = "w-6 h-6 flex justify-center text-gray-700 dark:text-gray-200 hover:text-gray-950 dark:hover:text-gray-100 transition-all duration-150 hover:scale-125";
-declare const exerciseEditButton = "w-6 h-6 flex justify-center text-gray-700 dark:text-gray-200 hover:text-red-600 dark:hover:text-green-500 transition-all duration-150 hover:scale-125";
-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/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";
-
-interface SpinnerProps {
-    size?: 'base' | 'small';
-    white?: boolean | string;
-    visible?: boolean | string;
+interface Props$b {
+    disabled?: boolean;
+    color?: 'primary' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'cyan';
+    type?: 'button' | 'submit';
+    active?: boolean;
+    children: React__default.ReactNode;
+    loading?: boolean;
+    className?: string;
+    size?: 'big' | 'base' | 'small' | 'square';
+    onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
+}
+declare const FunButton: React__default.FC<Props$b>;
+
+interface Props$a {
+    disabled?: boolean;
+    color?: 'primary' | 'red' | 'green' | 'purple' | 'teal' | 'yellow';
+    type?: 'button' | 'submit';
+    active?: boolean;
+    children: React__default.ReactNode;
+    className?: string;
+    size?: number;
+    onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
+}
+declare const FunRoundButton: ({ onClick, disabled, type, children, color, active, className, size }: Props$a) => react_jsx_runtime.JSX.Element;
+
+type Props$9 = {
+    name: string;
+    labelText: React__default.ReactNode;
+    onChange?: (value: boolean) => void;
+    isLarge?: boolean;
+    isDisabled?: boolean;
+};
+declare const Checkbox: {
+    ({ name, labelText, isLarge, onChange, isDisabled }: Props$9): react_jsx_runtime.JSX.Element;
+    Multi: ({ name, hasMultipleAnswers, index, isLarge, allOptionsName }: MultiChoiceCheckBoxProps) => react_jsx_runtime.JSX.Element;
+};
+type MultiChoiceCheckBoxProps = {
+    name: string;
+    allOptionsName: string;
+    hasMultipleAnswers: boolean;
+    index: number;
+    isLarge?: boolean;
+};
+
+type Props$8 = {
+    name: string;
+    isLarge?: boolean;
+    labelText?: string;
+    option: string;
+    onSelect?: () => void;
+};
+declare const RadioOption: ({ name, isLarge, labelText, option, onSelect }: Props$8) => react_jsx_runtime.JSX.Element;
+
+interface Props$7 {
+    title: string;
+    cancelText?: string;
+    isVisible: boolean;
+    confirmText?: string;
+    isSingleAction?: boolean;
+    setDontShowAgain?: React__default.Dispatch<React__default.SetStateAction<boolean>>;
+    dontShowAgain?: boolean;
+    borderColor?: string;
+    buttonColor?: 'base' | 'primary' | 'secondary' | 'warning' | 'alert' | 'gray' | undefined;
+    onConfirm: (confirmed: boolean) => void;
+    onDismissed?: () => void;
+    onCancel?: () => void;
     isDark?: boolean;
+    children?: React__default.ReactNode;
 }
-declare const Spinner: {
-    ({ visible, size, white, isDark }: SpinnerProps): react_jsx_runtime.JSX.Element | null;
-    displayName: string;
-    Centered: {
-        (props: SpinnerProps): react_jsx_runtime.JSX.Element | null;
-        displayName: string;
-    };
+declare const BAWrapper: React__default.FC<Props$7>;
+
+type IconInfoProps = {
+    content: string;
+    icon: React.ReactNode;
+    number: number;
+    color?: string;
 };
+declare const IconInfo: ({ content, icon, number, color }: IconInfoProps) => react_jsx_runtime.JSX.Element;
 
-type Props$3 = {
-    loading: boolean;
-    message?: string;
+interface Props$6 {
+    type?: 'error' | 'warning' | 'info';
+    isDismissible?: boolean;
+    onDismiss?: () => void;
+    isVisible: boolean;
+}
+declare const NoticeBox: React__default.FC<Props$6 & React__default.HTMLAttributes<HTMLDivElement>>;
+
+type Props$5 = {
+    avgRating: number;
+    large?: boolean;
+};
+declare const RatingStars: ({ avgRating, large }: Props$5) => react_jsx_runtime.JSX.Element;
+
+interface SliderProps {
+    min: number;
+    max: number;
+    step: number;
+    value: number;
+    sliderColor?: string;
+    onChange: (value: number) => void;
+}
+declare const Slider: {
+    ({ min, max, step, value, onChange }: SliderProps): react_jsx_runtime.JSX.Element;
+    Debounced: ({ min, max, handleUpdate, initialValue }: DebouncedSliderProps) => react_jsx_runtime.JSX.Element;
+};
+type DebouncedSliderProps = {
+    min: number;
+    max: number;
+    handleUpdate: (n: number) => void;
+    initialValue: number;
+};
+
+interface TippyProps {
+    children: ReactNode;
+    content: ReactNode;
+    placement?: Placement;
+    className?: string;
+    disabled?: boolean;
+    arrow?: boolean;
+    visible?: boolean;
+    wrapperClassname?: string;
+}
+declare const Tippy: ({ children, content, placement, className, wrapperClassname, disabled, arrow: useArrow, visible }: TippyProps) => react_jsx_runtime.JSX.Element;
+
+type FormikProps = {
+    label: string;
+    name: string;
+};
+type Props$4 = {
+    label: string;
+    onChange: (bool: boolean) => void;
+    value: boolean;
 };
-declare const NoResults: ({ loading, message }: Props$3) => react_jsx_runtime.JSX.Element;
+declare const ToggleSwitch: {
+    ({ label, onChange, value }: Props$4): react_jsx_runtime.JSX.Element;
+    Formik: ({ label, name }: FormikProps) => react_jsx_runtime.JSX.Element;
+};
+
+type ModeProps = {
+    setGalleryMode: React.Dispatch<React.SetStateAction<string>>;
+    galleryMode: string;
+    title1: string;
+    title2: string;
+    icon1?: React.ComponentType<React.ComponentProps<"svg">>;
+    icon2?: React.ComponentType<React.ComponentProps<"svg">>;
+};
+declare const UserContentSwitcher: ({ icon1: Icon1, icon2: Icon2, setGalleryMode, galleryMode, title1, title2 }: ModeProps) => react_jsx_runtime.JSX.Element;
 
-declare const Pill: ({ text }: {
-    text: string;
-}) => react_jsx_runtime.JSX.Element;
+type ProgressBarProps = {
+    progress: number;
+    height?: number;
+    backgroundColor?: string;
+    color: string;
+};
+declare const ProgressBarSimple: ({ progress, color, height, backgroundColor }: ProgressBarProps) => react_jsx_runtime.JSX.Element;
 
-type Step = {
-    label: ReactNode;
+declare const ProgressBar: {
+    ({ progress }: {
+        progress: number;
+    }): react_jsx_runtime.JSX.Element;
+    Step: ({ steps, stepIndex, onStepClick, color }: Props$3) => react_jsx_runtime.JSX.Element;
 };
+type Props$3 = {
+    steps: {
+        label: string;
+    }[];
+    stepIndex: number;
+    color?: string;
+    onStepClick?: (i: number) => void;
+};
+
 type Props$2 = {
-    steps: Step[];
-    activeStep: number;
-    onStepPress: (s: number) => void;
+    twColor?: string;
+    percentage: number;
+    radius: number;
+    fill?: string;
+    strokeWidth?: number;
 };
-declare const StepsComponent: ({ steps, activeStep, onStepPress }: Props$2) => react_jsx_runtime.JSX.Element;
+declare const CircleProgress: ({ twColor, percentage, radius, fill, strokeWidth }: Props$2) => react_jsx_runtime.JSX.Element;
 
 type Props$1 = {
-    inProp: boolean;
-    children: React.ReactNode;
+    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 Fade: ({ children, inProp }: Props$1) => react_jsx_runtime.JSX.Element;
+
+declare const ScrollProgress: () => react_jsx_runtime.JSX.Element;
 
 type Props = {
     visible: boolean;
-    onClick: () => void;
-    opacity?: number;
 };
-declare const Backdrop: ({ visible, onClick, opacity }: Props) => react_jsx_runtime.JSX.Element | null;
+declare const OverlaySpinner: ({ visible }: Props) => React$1.ReactPortal | null;
 
-type Point = 'sm' | 'md' | 'lg' | 'xl';
-declare const Breakpoint: React.FC<{
-    fromSize?: Point;
-    toSize?: Point;
-    children: React.ReactNode;
-}>;
+declare const AnimateLogo: () => react_jsx_runtime.JSX.Element;
 
-export { Backdrop, Breakpoint, Container, ErrorText, Fade, NoResults, PRIMARY_COLOR, Pill, Spinner, StepsComponent, baseFieldStyle, createExerciseElementStyle, exerciseDeleteButton, exerciseEditButton, headerButtonClass, headerTippyClass, tippyClassname, toolbarExerciseButton, xIconButton };
+export { AnimateLogo, BAWrapper as BottomAlert, Button, Checkbox, CircleProgress, CourseProgress, FunButton, FunRoundButton, IconInfo, Modal, NoticeBox, Overlay, OverlaySpinner, ProgressBar, ProgressBarSimple, RadioOption, RatingStars, ScrollProgress, Slider, Tippy, ToggleSwitch, UserContentSwitcher };