1.2.6

lib/components/image/image-preview.tsx

@@ -2,7 +2,6 @@ import { AnimatePresence, motion } from "framer-motion";
 import { useEffect, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { twMerge } from "tailwind-merge";
-import { useComponentStyle } from "../../main";
 import { IImagePreview } from "./image.types";
 import { useImagePreview } from "./use-image-preview";
 import {
@@ -13,6 +12,7 @@ import {
   SearchZoomIn1,
   SearchZoomOut1,
 } from "iconsax-react";
+import { useComponentStyle } from "../../customization/styles/theme.context";
 
 export const ImagePreview = ({
   backdropClassName = "",

lib/components/image/image.tsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
 import { twMerge } from "tailwind-merge";
-import { useComponentStyle } from "../../main";
 import { ImagePreview } from "./image-preview";
 import { ImageComponent } from "./image.component";
 import { IImage } from "./image.types";
+import { useComponentStyle } from "../../customization/styles/theme.context";
 
 export const Image = ({
   isPreviewable = true,

lib/components/toast/toast.component.tsx

@@ -1,11 +1,11 @@
 import { Variants, motion, useIsPresent } from "framer-motion";
 import { memo, useEffect, useMemo, useState } from "react";
 import { twMerge } from "tailwind-merge";
-import { useComponentStyle } from "../../main";
 import { Alert } from "../alert/alert";
 import { ToastProviderProps } from "./toast.provider";
 import { ToastOptions } from "./toast.types";
 import { useTimeout } from "./toast.utils";
+import { useComponentStyle } from "../../customization/styles/theme.context";
 
 const toastMotionVariants: Variants = {
   initial: (props: ToastOptions) => {

lib/components/toast/toast.provider.tsx

@@ -2,10 +2,10 @@ import { AnimatePresence } from "framer-motion";
 import { createContext, useContext, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
 import { twMerge } from "tailwind-merge";
-import { useComponentStyle } from "../../main";
 import { ToastComponent } from "./toast.component";
 import { toastStore } from "./toast.store";
 import { CloseAllToastsOptions, ToastId, ToastOptions } from "./toast.types";
+import { useComponentStyle } from "../../customization/styles/theme.context";
 
 export interface ToastMethods {
   notify: (options?: ToastOptions) => ToastId;
@@ -48,7 +48,7 @@ export const useToastOptionContext = () => {
 
 export const ToastProvider = (props: ToastProviderProps) => {
   const theme = useComponentStyle("Toast");
-  const { toastSpacing = '6px' } = props;
+  const { toastSpacing = "6px" } = props;
   const state = useSyncExternalStore(
     toastStore.subscribe,
     toastStore.getState,

lib/providers/zeni-provider.tsx

@@ -1,7 +1,11 @@
 import { useEffect } from "react";
-import { ToastOptionProvider, ToastProvider, ToastProviderProps, applyTheme } from "../main";
+import {
+  ToastOptionProvider,
+  ToastProvider,
+  ToastProviderProps,
+} from "../main";
 import { ThemeType } from "../customization/theme";
-
+import { applyTheme } from "../customization/theme/utils";
 
 export const ZeniProvider = ({
   initialTheme,
@@ -12,7 +16,6 @@ export const ZeniProvider = ({
   children: React.ReactNode;
   toastOptions?: ToastProviderProps;
 }) => {
-
   useEffect(() => {
     const savedTheme = localStorage.getItem("theme");
     const defaultTheme =
@@ -23,7 +26,9 @@ export const ZeniProvider = ({
 
   return (
     <>
-      <ToastOptionProvider value={toastOptions?.defaultOptions}>{children}</ToastOptionProvider>
+      <ToastOptionProvider value={toastOptions?.defaultOptions}>
+        {children}
+      </ToastOptionProvider>
       <ToastProvider toastSpacing={toastOptions?.toastSpacing} />
     </>
   );