flowbite-svelte 2.0.0-next.2 → 2.0.0-next.3

package/dist/carousel/CarouselIndicators.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { IndicatorsProps } from "..";
   import Indicator from "../indicator/Indicator.svelte";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import clsx from "clsx";
   import { getCarouselContext } from "../context";
   import { carouselIndicators } from "./theme";
@@ -38,7 +38,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L480)
+[IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L482)
 ## Props
 @prop children
 @prop position = "bottom"

package/dist/carousel/CarouselIndicators.svelte.d.ts

@@ -2,7 +2,7 @@ import type { IndicatorsProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L480)
+ * [IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L482)
  * ## Props
  * @prop children
  * @prop position = "bottom"

package/dist/carousel/ControlButton.svelte

@@ -2,7 +2,7 @@
   import { controlButton } from "./theme";
   import clsx from "clsx";
   import type { ControlButtonProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { children, forward, name, class: className, classes, ...restProps }: ControlButtonProps = $props();
 
@@ -37,7 +37,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L487)
+[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L489)
 ## Props
 @prop children
 @prop forward

package/dist/carousel/ControlButton.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ControlButtonProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L487)
+ * [ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L489)
  * ## Props
  * @prop children
  * @prop forward

package/dist/carousel/Controls.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ControlsProps } from "..";
   import ControlButton from "./ControlButton.svelte";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import clsx from "clsx";
   import { getCarouselContext } from "../context";
 
@@ -29,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L493)
+[ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L495)
 ## Props
 @prop children
 @prop class: className

package/dist/carousel/Controls.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ControlsProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L493)
+ * [ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L495)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/carousel/Slide.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import type { SlideProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import clsx from "clsx";
   import { getCarouselContext } from "../context";
   import { fly } from "svelte/transition";
+  import { prefersReducedMotion } from "svelte/motion";
   import { slide } from "./theme";
 
   const _state = getCarouselContext();
@@ -12,12 +13,15 @@
 
   const theme = $derived(getTheme("slide"));
 
+  // Check if running in browser to avoid SSR issues
+  const isBrowser = typeof window !== "undefined";
+
   let transitionSlideIn = $derived({
     x: _state?.forward ? "100%" : "-100%",
     opacity: 1,
     width: "100%",
     height: "100%",
-    duration: _state?.slideDuration ?? 1000
+    duration: isBrowser && prefersReducedMotion.current ? 0 : (_state?.slideDuration ?? 1000)
   });
 
   let transitionSlideOut = $derived({
@@ -25,7 +29,7 @@
     opacity: 0.9,
     width: "100%",
     height: "100%",
-    duration: _state?.slideDuration ?? 1000
+    duration: isBrowser && prefersReducedMotion.current ? 0 : (_state?.slideDuration ?? 1000)
   });
 
   let imgClass = $derived(slide({ fit, class: clsx(theme, className) }));
@@ -45,7 +49,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L509)
+[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L511)
 ## Props
 @prop image
 @prop transition

package/dist/carousel/Slide.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SlideProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L509)
+ * [SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L511)
  * ## Props
  * @prop image
  * @prop transition

package/dist/carousel/Thumbnail.svelte

@@ -2,7 +2,7 @@
   import { thumbnail } from "./theme";
   import type { ThumbnailProps } from "..";
   import clsx from "clsx";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { selected, class: className, ...restProps }: ThumbnailProps = $props();
 
@@ -15,7 +15,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L497)
+[ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L499)
 ## Props
 @prop selected
 @prop class: className

package/dist/carousel/Thumbnail.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ThumbnailProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L497)
+ * [ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L499)
  * ## Props
  * @prop selected
  * @prop class: className

package/dist/carousel/Thumbnails.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ThumbnailsProps } from "..";
   import Thumbnail from "./Thumbnail.svelte";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import clsx from "clsx";
   import { thumbnails } from "./theme";
 
@@ -48,7 +48,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L501)
+[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L503)
 ## Props
 @prop children
 @prop images = []

package/dist/carousel/Thumbnails.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ThumbnailsProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L501)
+ * [ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L503)
  * ## Props
  * @prop children
  * @prop images = []

package/dist/carousel/theme.d.ts

@@ -1,4 +1,4 @@
-import type { Classes } from "../theme/themeUtils";
+import type { Classes } from "../theme-provider/themeUtils";
 import { type VariantProps } from "tailwind-variants";
 export type CarouselVariants = VariantProps<typeof carousel> & Classes<typeof carousel>;
 export type CarouselIndicatorsVariants = VariantProps<typeof carouselIndicators> & Classes<typeof carouselIndicators>;

package/dist/clipboard/Clipboard.svelte

@@ -4,7 +4,7 @@
   import type { ClipboardProps } from "..";
   import { clipboard } from "./theme";
   import type { MouseEventHandler } from "svelte/elements";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { children, embedded = false, value = $bindable(""), success = $bindable(false), onclick, class: className = "", ...restProps }: ClipboardProps = $props();
 
@@ -46,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L521)
+[ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L523)
 ## Props
 @prop children
 @prop embedded = false

package/dist/clipboard/Clipboard.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ClipboardProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L521)
+ * [ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L523)
  * ## Props
  * @prop children
  * @prop embedded = false

package/dist/context.d.ts

@@ -1,6 +1,6 @@
 import type { AccordionContextType, BottomNavContextType, CarouselContextType, DrawerContextType, DropdownContextType, PaginationContextType, ButtonToggleContextType, ListContextType, ToolbarContextType, ListGroupContextType, ButtonGroupContextType, NavbarState, NavbarBreakpoint, SidebarContextType, TableContextType, TabsContextType, SpeedCtxType } from "./types";
 import type { SplitPaneContext } from "./types";
-import type { ThemeConfig } from "./theme";
+import type { ThemeConfig } from "./theme-provider";
 declare const getAccordionContext: () => AccordionContextType | undefined, setAccordionContext: (context: AccordionContextType) => AccordionContextType;
 export { getAccordionContext, setAccordionContext };
 declare const getBottomNavContext: () => BottomNavContextType | undefined, setBottomNavContext: (context: BottomNavContextType) => BottomNavContextType;

package/dist/darkmode/DarkMode.svelte

@@ -2,7 +2,7 @@
   import { darkmode } from "./theme";
   import clsx from "clsx";
   import type { DarkmodeProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   // const THEME_PREFERENCE_KEY = 'color-theme';
   let { class: className, lightIcon, darkIcon, size = "sm", ariaLabel = "Dark mode", ...restProps }: DarkmodeProps = $props();
@@ -71,7 +71,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L530)
+[DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L532)
 ## Props
 @prop class: className
 @prop lightIcon

package/dist/darkmode/DarkMode.svelte.d.ts

@@ -2,7 +2,7 @@ import type { DarkmodeProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L530)
+ * [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L532)
  * ## Props
  * @prop class: className
  * @prop lightIcon

package/dist/darkmode/theme.d.ts

@@ -1 +1 @@
-export declare const darkmode: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "inline-flex hover:text-heading items-center justify-center text-body w-10 h-10 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "inline-flex hover:text-heading items-center justify-center text-body w-10 h-10 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2", unknown, unknown, undefined>>;
+export declare const darkmode: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "inline-flex hover:text-heading items-center justify-center text-body w-8 h-8 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-base text-sm p-2", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "inline-flex hover:text-heading items-center justify-center text-body w-8 h-8 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-base text-sm p-2", unknown, unknown, undefined>>;

package/dist/darkmode/theme.js

@@ -1,4 +1,4 @@
 import { tv } from "tailwind-variants";
 export const darkmode = tv({
-    base: "inline-flex hover:text-heading items-center justify-center text-body w-10 h-10 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2"
+    base: "inline-flex hover:text-heading items-center justify-center text-body w-8 h-8 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-base text-sm p-2"
 });

package/dist/datepicker/Datepicker.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { fade } from "svelte/transition";
+  import { prefersReducedMotion } from "svelte/motion";
   import clsx from "clsx";
   import type { DatepickerProps } from "..";
   import Button from "../buttons/Button.svelte";
   import ToolbarButton from "../toolbar/ToolbarButton.svelte";
   import { datepicker } from "./theme";
   import { parse, isValid, addDays, startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, isSameDay, isWithinInterval } from "date-fns";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let {
     value = $bindable(),
@@ -452,7 +453,14 @@
   {/if}
 
   {#if isOpen || inline}
-    <div bind:this={calendarRef} id="datepicker-dropdown" class={base({ inline, class: clsx(theme?.base, className) })} transition:fade={{ duration: 100 }} role="dialog" aria-label="Calendar">
+    <div
+      bind:this={calendarRef}
+      id="datepicker-dropdown"
+      class={base({ inline, class: clsx(theme?.base, className) })}
+      transition:fade={{ duration: typeof window !== "undefined" && prefersReducedMotion.current ? 0 : 100 }}
+      role="dialog"
+      aria-label="Calendar"
+    >
       {#if title}
         <h2 class={titleVariant({ class: clsx(theme?.titleVariant, styling?.titleVariant) })}>{title}</h2>
       {/if}

package/dist/datepicker/theme.d.ts

@@ -1,4 +1,4 @@
-import type { Classes } from "../theme/themeUtils";
+import type { Classes } from "../theme-provider/themeUtils";
 import { type VariantProps } from "tailwind-variants";
 export type DatepickerVariants = VariantProps<typeof datepicker> & Classes<typeof datepicker>;
 export declare const datepicker: import("tailwind-variants").TVReturnType<{

package/dist/device-mockups/Android.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { AndroidProps } from "..";
   import clsx from "clsx";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import { android } from "./theme";
 
   let { children, class: className, classes, ...restProps }: AndroidProps = $props();
@@ -29,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L599)
+[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L601)
 ## Props
 @prop children
 @prop class: className

package/dist/device-mockups/Android.svelte.d.ts

@@ -2,7 +2,7 @@ import type { AndroidProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L599)
+ * [AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L601)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/device-mockups/DefaultMockup.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { DefaultMockupProps } from "..";
   import clsx from "clsx";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import { defaultMockup } from "./theme";
 
   let { children, class: className, classes, ...restProps }: DefaultMockupProps = $props();
@@ -27,7 +27,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L603)
+[DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L605)
 ## Props
 @prop children
 @prop class: className

package/dist/device-mockups/DefaultMockup.svelte.d.ts

@@ -2,7 +2,7 @@ import type { DefaultMockupProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L603)
+ * [DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L605)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/device-mockups/Desktop.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { DesktopProps } from "..";
   import clsx from "clsx";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import { desktop } from "./theme";
 
   let { children, class: className, classes, ...restProps }: DesktopProps = $props();
@@ -26,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DesktopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L583)
+[DesktopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L585)
 ## Props
 @prop children
 @prop class: className

package/dist/device-mockups/Desktop.svelte.d.ts

@@ -2,7 +2,7 @@ import type { DesktopProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DesktopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L583)
+ * [DesktopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L585)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/device-mockups/DeviceMockup.svelte

@@ -32,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L578)
+[DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L580)
 ## Props
 @prop children
 @prop device = "default"

package/dist/device-mockups/DeviceMockup.svelte.d.ts

@@ -3,7 +3,7 @@ import type { DeviceMockupProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L578)
+ * [DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L580)
  * ## Props
  * @prop children
  * @prop device = "default"

package/dist/device-mockups/Ios.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { ios } from "./theme";
   import type { IosProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import clsx from "clsx";
 
   let { children, class: className, classes, ...restProps }: IosProps = $props();
@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L607)
+[IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L609)
 ## Props
 @prop children
 @prop class: className

package/dist/device-mockups/Ios.svelte.d.ts

@@ -2,7 +2,7 @@ import type { IosProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L607)
+ * [IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L609)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/device-mockups/Laptop.svelte

@@ -2,7 +2,7 @@
   import type { LaptopProps } from "..";
   import clsx from "clsx";
   import { laptop } from "./theme";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { children, class: className, classes, ...restProps }: LaptopProps = $props();
 
@@ -31,7 +31,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LaptopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L591)
+[LaptopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L593)
 ## Props
 @prop children
 @prop class: className

package/dist/device-mockups/Laptop.svelte.d.ts

@@ -2,7 +2,7 @@ import type { LaptopProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [LaptopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L591)
+ * [LaptopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L593)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/device-mockups/Smartwatch.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { SmartwatchProps } from "..";
   import clsx from "clsx";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import { smartwatch } from "./theme";
 
   let { children, class: className, classes, ...restProps }: SmartwatchProps = $props();
@@ -29,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L611)
+[SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L613)
 ## Props
 @prop children
 @prop class: className

package/dist/device-mockups/Smartwatch.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SmartwatchProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L611)
+ * [SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L613)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/device-mockups/Tablet.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { tablet } from "./theme";
   import type { TabletProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import clsx from "clsx";
 
   let { children, class: className, classes, ...restProps }: TabletProps = $props();
@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L615)
+[TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L617)
 ## Props
 @prop children
 @prop class: className

package/dist/device-mockups/Tablet.svelte.d.ts

@@ -2,7 +2,7 @@ import type { TabletProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L615)
+ * [TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L617)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/device-mockups/theme.d.ts

@@ -1,4 +1,4 @@
-import type { Classes } from "../theme/themeUtils";
+import type { Classes } from "../theme-provider/themeUtils";
 import { type VariantProps } from "tailwind-variants";
 export type AndroidVariants = VariantProps<typeof android> & Classes<typeof android>;
 declare const android: import("tailwind-variants").TVReturnType<{

package/dist/dialog/Dialog.svelte

@@ -6,6 +6,7 @@
   import clsx from "clsx";
   import { sineIn } from "svelte/easing";
   import { fade } from "svelte/transition";
+  import { prefersReducedMotion } from "svelte/motion";
   import { dialog } from "./theme";
 
   let {
@@ -29,7 +30,13 @@
     ...restProps
   }: DialogProps = $props();
 
-  const paramsOptions = $derived(transitionParams ?? { duration: 100, easing: sineIn });
+  // Check if running in browser to avoid SSR issues
+  const isBrowser = typeof window !== "undefined";
+
+  // Respect reduced motion preference by setting duration to 0
+  const effectiveParams = $derived(
+    isBrowser && prefersReducedMotion.current ? { ...(transitionParams ?? { duration: 100, easing: sineIn }), duration: 0 } : (transitionParams ?? { duration: 100, easing: sineIn })
+  );
 
   const styling = $derived(classes);
   let { base, form: formCls, close: closeCls } = $derived(dialog());
@@ -160,7 +167,7 @@
     oncancel={_oncancel}
     onclick={_onclick}
     ontoggle={_ontoggle}
-    transition:transition|global={paramsOptions as ParamsType}
+    transition:transition|global={effectiveParams as ParamsType}
     {...restProps}
     class={base({ class: clsx(className) })}
   >
@@ -178,7 +185,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DialogProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L621)
+[DialogProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L623)
 ## Props
 @prop children
 @prop onaction = ()

package/dist/dialog/Dialog.svelte.d.ts

@@ -2,7 +2,7 @@ import type { DialogProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DialogProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L621)
+ * [DialogProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L623)
  * ## Props
  * @prop children
  * @prop onaction = ()

package/dist/dialog/theme.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../theme/themeUtils";
+import type { Classes } from "../theme-provider/themeUtils";
 export type DialogVariants = VariantProps<typeof dialog> & Classes<typeof dialog>;
 export declare const dialog: import("tailwind-variants").TVReturnType<{}, {
     base: string;