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

package/dist/rating/CustomIcon.svelte

@@ -11,15 +11,15 @@
     iconIndex = 0,
     groupId = "custom",
     role = "img",
-    svgClass,
     pathd = "M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z",
+    class: className,
     ...restProps
   }: RatingIconProps = $props();
 
   const uniqueId = $derived(`${groupId}-${iconIndex}`);
 </script>
 
-<svg width={size} height={size} class={clsx(svgClass)} {...restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5">
+<svg width={size} height={size} class={clsx(className)} {...restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5">
   <defs>
     <linearGradient id={uniqueId} x1="0%" y1="0%" x2="100%" y2="0%">
       {#if fillPercent !== 100}
@@ -41,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1370)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1297)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#00ff00"
@@ -51,7 +51,7 @@
 @prop iconIndex = 0
 @prop groupId = "custom"
 @prop role = "img"
-@prop svgClass
 @prop pathd = "M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
+@prop class: className
 @prop ...restProps
 -->

package/dist/rating/CustomIcon.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1370)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1297)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#00ff00"
@@ -12,8 +12,8 @@ import type { RatingIconProps } from "../types";
  * @prop iconIndex = 0
  * @prop groupId = "custom"
  * @prop role = "img"
- * @prop svgClass
  * @prop pathd = "M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
+ * @prop class: className
  * @prop ...restProps
  */
 declare const CustomIcon: import("svelte").Component<RatingIconProps, {}, "">;

package/dist/rating/Heart.svelte

@@ -11,14 +11,14 @@
     iconIndex = 0,
     groupId = "star",
     role = "img",
-    svgClass,
+    class: className,
     ...restProps
   }: RatingIconProps = $props();
 
   const uniqueId = $derived(`${groupId}-${iconIndex}`);
 </script>
 
-<svg width={size} height={size} class={clsx(svgClass)} {...restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none">
+<svg width={size} height={size} class={clsx(className)} {...restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none">
   <defs>
     <linearGradient id={uniqueId}>
       {#if fillPercent !== 100}
@@ -45,7 +45,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1370)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1297)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#ff0000"
@@ -55,6 +55,6 @@
 @prop iconIndex = 0
 @prop groupId = "star"
 @prop role = "img"
-@prop svgClass
+@prop class: className
 @prop ...restProps
 -->

package/dist/rating/Heart.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1370)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1297)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#ff0000"
@@ -12,7 +12,7 @@ import type { RatingIconProps } from "../types";
  * @prop iconIndex = 0
  * @prop groupId = "star"
  * @prop role = "img"
- * @prop svgClass
+ * @prop class: className
  * @prop ...restProps
  */
 declare const Heart: import("svelte").Component<RatingIconProps, {}, "">;

package/dist/rating/Rating.svelte

@@ -3,18 +3,11 @@
   import Star from "./Star.svelte";
   import { rating as ratingVariants } from "./theme";
   import type { RatingProps } from "../types";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
-  import { untrack } from "svelte";
+  import { getTheme } from "../theme/themeUtils";
 
-  let { children, text, class: className, classes, size = 24, total = 5, rating = 4, icon: Icon = Star, count = false, pClass, ...restProps }: RatingProps = $props();
+  let { children, text, class: className, classes, size = 24, total = 5, rating = 4, icon: Icon = Star, count = false, ...restProps }: RatingProps = $props();
 
-  warnThemeDeprecation(
-    "Rating",
-    untrack(() => ({ pClass })),
-    { pClass: "p" }
-  );
-
-  const styling = $derived(classes ?? { p: pClass });
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("rating"));
 
@@ -30,7 +23,7 @@
 <div {...restProps} class={base({ class: clsx(theme?.base, className) })}>
   {#if count && children}
     <Icon fillPercent={100} {size} iconIndex={0} groupId={ratingGroupId} />
-    <p class={p({ class: clsx(theme?.p, styling.p) })}>{rating}</p>
+    <p class={p({ class: clsx(theme?.p, styling?.p) })}>{rating}</p>
     {@render children()}
   {:else}
     <!-- eslint-disable @typescript-eslint/no-unused-vars-->
@@ -54,7 +47,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1296)
+[RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1231)
 ## Props
 @prop children
 @prop text
@@ -65,6 +58,5 @@
 @prop rating = 4
 @prop icon: Icon = Star
 @prop count = false
-@prop pClass
 @prop ...restProps
 -->

package/dist/rating/Rating.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1296)
+ * [RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1231)
  * ## Props
  * @prop children
  * @prop text
@@ -13,7 +13,6 @@ import type { RatingProps } from "../types";
  * @prop rating = 4
  * @prop icon: Icon = Star
  * @prop count = false
- * @prop pClass
  * @prop ...restProps
  */
 declare const Rating: import("svelte").Component<RatingProps, {}, "">;

package/dist/rating/RatingComment.svelte

@@ -63,7 +63,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingCommentProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1307)
+[RatingCommentProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1241)
 ## Props
 @prop children
 @prop evaluation

package/dist/rating/RatingComment.svelte.d.ts

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

package/dist/rating/Review.svelte

@@ -2,28 +2,11 @@
   import clsx from "clsx";
   import { review as reviewVariants } from "./theme";
   import type { ReviewProps } from "../types";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
-  import { untrack } from "svelte";
+  import { getTheme } from "../theme/themeUtils";
 
-  let { children, address, item1, item2, item3, review, classes, articleClass, divClass, div2Class, div3Class, imgClass, ulClass, liClass }: ReviewProps = $props();
+  let { children, address, item1, item2, item3, review, classes }: ReviewProps = $props();
 
-  warnThemeDeprecation(
-    "Review",
-    untrack(() => ({ articleClass, divClass, div2Class, div3Class, imgClass, ulClass, liClass })),
-    { articleClass: "article", divClass: "div", div2Class: "div2", div3Class: "div3", imgClass: "img", ulClass: "ul", liClass: "li" }
-  );
-
-  const styling = $derived(
-    classes ?? {
-      article: articleClass,
-      div: divClass,
-      div2: div2Class,
-      div3: div3Class,
-      img: imgClass,
-      ul: ulClass,
-      li: liClass
-    }
-  );
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("review"));
 
@@ -31,15 +14,15 @@
 </script>
 
 {#if review}
-  <article class={article({ class: clsx(theme?.article, styling.article) })}>
+  <article class={article({ class: clsx(theme?.article, styling?.article) })}>
     <div>
-      <div class={div({ class: clsx(theme?.div, styling.div) })}>
-        <img class={img({ class: clsx(theme?.img, styling.img) })} src={review.imgSrc} alt={review.imgAlt} />
-        <div class={div2({ class: clsx(theme?.div2, styling.div2) })}>
+      <div class={div({ class: clsx(theme?.div, styling?.div) })}>
+        <img class={img({ class: clsx(theme?.img, styling?.img) })} src={review.imgSrc} alt={review.imgAlt} />
+        <div class={div2({ class: clsx(theme?.div2, styling?.div2) })}>
           <p>{review.name}</p>
           {#if review.address}
             {#if address}
-              <div class={div3({ class: clsx(theme?.div3, styling.div3) })}>
+              <div class={div3({ class: clsx(theme?.div3, styling?.div3) })}>
                 {@render address()}
               </div>
             {/if}
@@ -47,23 +30,23 @@
         </div>
       </div>
       {#if review.item1 || review.item2 || review.item3}
-        <ul class={ul({ class: clsx(theme?.ul, styling.ul) })}>
+        <ul class={ul({ class: clsx(theme?.ul, styling?.ul) })}>
           {#if review.item1}
-            <li class={li({ class: clsx(theme?.li, styling.li) })}>
+            <li class={li({ class: clsx(theme?.li, styling?.li) })}>
               {#if item1}
                 {@render item1()}
               {/if}
             </li>
           {/if}
           {#if review.item2}
-            <li class={clsx(styling.li)}>
+            <li class={clsx(styling?.li)}>
               {#if item2}
                 {@render item2()}
               {/if}
             </li>
           {/if}
           {#if review.item3}
-            <li class={clsx(styling.li)}>
+            <li class={clsx(styling?.li)}>
               {#if item3}
                 {@render item3()}
               {/if}
@@ -100,7 +83,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ReviewProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1343)
+[ReviewProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1277)
 ## Props
 @prop children
 @prop address
@@ -109,11 +92,4 @@
 @prop item3
 @prop review
 @prop classes
-@prop articleClass
-@prop divClass
-@prop div2Class
-@prop div3Class
-@prop imgClass
-@prop ulClass
-@prop liClass
 -->

package/dist/rating/Review.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ReviewProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ReviewProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1343)
+ * [ReviewProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1277)
  * ## Props
  * @prop children
  * @prop address
@@ -11,13 +11,6 @@ import type { ReviewProps } from "../types";
  * @prop item3
  * @prop review
  * @prop classes
- * @prop articleClass
- * @prop divClass
- * @prop div2Class
- * @prop div3Class
- * @prop imgClass
- * @prop ulClass
- * @prop liClass
  */
 declare const Review: import("svelte").Component<ReviewProps, {}, "">;
 type Review = ReturnType<typeof Review>;

package/dist/rating/ScoreRating.svelte

@@ -6,6 +6,7 @@
 
   let { ratings, ratings2, headerLabel, classes }: ScoreRatingProps = $props();
 
+  const styling = $derived(classes);
   const theme = $derived(getTheme("scoreRating"));
 
   const { desc1, desc2, desc3span, desc3p, link, bar } = $derived(scoreRating());
@@ -14,17 +15,17 @@
 <div class="mb-5 flex items-center">
   {#if headerLabel}
     {#if headerLabel.desc1}
-      <p class={desc1({ class: clsx(theme?.desc1, classes?.desc1) })}>{headerLabel.desc1}</p>
+      <p class={desc1({ class: clsx(theme?.desc1, styling?.desc1) })}>{headerLabel.desc1}</p>
     {/if}
     {#if headerLabel.desc2}
-      <p class={desc2({ class: clsx(theme?.desc2, classes?.desc2) })}>{headerLabel.desc2}</p>
+      <p class={desc2({ class: clsx(theme?.desc2, styling?.desc2) })}>{headerLabel.desc2}</p>
     {/if}
     {#if headerLabel.desc3}
-      <span class={desc3span({ class: clsx(theme?.desc3span, classes?.desc3span) })}></span>
-      <p class={desc3p({ class: clsx(theme?.desc3p, classes?.desc3p) })}>{headerLabel.desc3}</p>
+      <span class={desc3span({ class: clsx(theme?.desc3span, styling?.desc3span) })}></span>
+      <p class={desc3p({ class: clsx(theme?.desc3p, styling?.desc3p) })}>{headerLabel.desc3}</p>
     {/if}
     {#if headerLabel.link}
-      <a href={headerLabel.link.url} class={link({ class: clsx(theme?.link, classes?.link) })}>{headerLabel.link.label}</a>
+      <a href={headerLabel.link.url} class={link({ class: clsx(theme?.link, styling?.link) })}>{headerLabel.link.label}</a>
     {/if}
   {/if}
 </div>
@@ -38,7 +39,7 @@
           </dt>
           <dd class="mb-3 flex items-center">
             <div class="me-2 h-2.5 w-full rounded-sm bg-gray-200 dark:bg-gray-700">
-              <div class={bar({ class: clsx(theme?.bar, classes?.bar) })} style="width: {rating * 10}%"></div>
+              <div class={bar({ class: clsx(theme?.bar, styling?.bar) })} style="width: {rating * 10}%"></div>
             </div>
             <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
           </dd>
@@ -55,7 +56,7 @@
           </dt>
           <dd class="mb-3 flex items-center">
             <div class="me-2 h-2.5 w-full rounded-sm bg-gray-200 dark:bg-gray-700">
-              <div class={bar({ class: clsx(theme?.bar, classes?.bar) })} style="width: {rating * 10}%"></div>
+              <div class={bar({ class: clsx(theme?.bar, styling?.bar) })} style="width: {rating * 10}%"></div>
             </div>
             <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
           </dd>
@@ -69,7 +70,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ScoreRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1359)
+[ScoreRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1286)
 ## Props
 @prop ratings
 @prop ratings2

package/dist/rating/ScoreRating.svelte.d.ts

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

package/dist/rating/Star.svelte

@@ -11,14 +11,14 @@
     iconIndex = 0,
     groupId = "star",
     role = "img",
-    svgClass,
+    class: className,
     ...restProps
   }: RatingIconProps = $props();
 
   const uniqueId = $derived(`${groupId}-${iconIndex}`);
 </script>
 
-<svg width={size} height={size} {...restProps} class={clsx(svgClass)} aria-label={ariaLabel} viewBox="100 100 120 120" {role}>
+<svg width={size} height={size} {...restProps} class={clsx(className)} aria-label={ariaLabel} viewBox="100 100 120 120" {role}>
   <defs>
     <linearGradient id={uniqueId}>
       {#if fillPercent !== 100}
@@ -46,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1370)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1297)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#F5CA14"
@@ -56,6 +56,6 @@
 @prop iconIndex = 0
 @prop groupId = "star"
 @prop role = "img"
-@prop svgClass
+@prop class: className
 @prop ...restProps
 -->

package/dist/rating/Star.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1370)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1297)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#F5CA14"
@@ -12,7 +12,7 @@ import type { RatingIconProps } from "../types";
  * @prop iconIndex = 0
  * @prop groupId = "star"
  * @prop role = "img"
- * @prop svgClass
+ * @prop class: className
  * @prop ...restProps
  */
 declare const Star: import("svelte").Component<RatingIconProps, {}, "">;

package/dist/rating/Thumbup.svelte

@@ -11,14 +11,14 @@
     iconIndex = 0,
     groupId = "star",
     role = "img",
-    svgClass,
+    class: className,
     ...restProps
   }: RatingIconProps = $props();
 
   const uniqueId = $derived(`${groupId}-${iconIndex}`);
 </script>
 
-<svg width={size} height={size} {...restProps} class={clsx(svgClass)} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none">
+<svg width={size} height={size} {...restProps} class={clsx(className)} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none">
   <defs>
     <linearGradient id={uniqueId}>
       {#if fillPercent !== 100}
@@ -45,7 +45,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1370)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1297)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#00b500"
@@ -55,6 +55,6 @@
 @prop iconIndex = 0
 @prop groupId = "star"
 @prop role = "img"
-@prop svgClass
+@prop class: className
 @prop ...restProps
 -->

package/dist/rating/Thumbup.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1370)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1297)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#00b500"
@@ -12,7 +12,7 @@ import type { RatingIconProps } from "../types";
  * @prop iconIndex = 0
  * @prop groupId = "star"
  * @prop role = "img"
- * @prop svgClass
+ * @prop class: className
  * @prop ...restProps
  */
 declare const Thumbup: import("svelte").Component<RatingIconProps, {}, "">;

package/dist/scroll-spy/ScrollSpy.svelte

@@ -258,7 +258,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2268)
+[ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2134)
 ## Props
 @prop items
 @prop position = "top"

package/dist/scroll-spy/ScrollSpy.svelte.d.ts

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

package/dist/sidebar/Sidebar.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
   import type { SidebarContextType, SidebarProps } from "../types";
   import { trapFocus } from "../utils/actions";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
   import { setSidebarContext, setActiveUrlContext } from "../context";
   import { sineIn } from "svelte/easing";
   import { writable } from "svelte/store";
   import { fly } from "svelte/transition";
   import { sidebar } from "./theme";
-  import { untrack } from "svelte";
 
   let {
     children,
@@ -20,13 +19,9 @@
     position = "fixed",
     activateClickOutside = true,
     backdrop = true,
-    backdropClass,
     transition = fly,
     params,
-    divClass,
     ariaLabel,
-    nonActiveClass,
-    activeClass,
     activeUrl = "",
     class: className,
     classes,
@@ -34,20 +29,7 @@
     ...restProps
   }: SidebarProps = $props();
 
-  warnThemeDeprecation(
-    "Sidebar",
-    untrack(() => ({ backdropClass, divClass, nonActiveClass, activeClass })),
-    { backdropClass: "backdrop", divClass: "div", nonActiveClass: "nonactive", activeClass: "active" }
-  );
-
-  const styling = $derived(
-    classes ?? {
-      backdrop: backdropClass,
-      div: divClass,
-      nonactive: nonActiveClass,
-      active: activeClass
-    }
-  );
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("sidebar"));
 
@@ -81,10 +63,10 @@
       return closeSidebar;
     },
     get activeClass() {
-      return active({ class: clsx(theme?.active, styling.active) });
+      return active({ class: clsx(theme?.active, styling?.active) });
     },
     get nonActiveClass() {
-      return nonactive({ class: clsx(theme?.nonactive, styling.nonactive) });
+      return nonactive({ class: clsx(theme?.nonactive, styling?.nonactive) });
     },
     get isSingle() {
       return isSingle;
@@ -110,9 +92,9 @@
   {#if isOpen || isLargeScreen}
     {#if isOpen && !alwaysOpen}
       {#if backdrop && activateClickOutside}
-        <div role="presentation" class={backdropCls({ class: clsx(theme?.backdrop, styling.backdrop) })} onclick={closeSidebar}></div>
+        <div role="presentation" class={backdropCls({ class: clsx(theme?.backdrop, styling?.backdrop) })} onclick={closeSidebar}></div>
       {:else if backdrop && !activateClickOutside}
-        <div role="presentation" class={backdropCls({ class: clsx(theme?.backdrop, styling.backdrop) })}></div>
+        <div role="presentation" class={backdropCls({ class: clsx(theme?.backdrop, styling?.backdrop) })}></div>
       {:else if !backdrop && activateClickOutside}
         <div role="presentation" class="fixed start-0 top-0 z-50 h-full w-full" onclick={closeSidebar}></div>
       {:else if !backdrop && !activateClickOutside}
@@ -126,14 +108,14 @@
       class={base({ class: clsx(theme?.base, className) })}
       aria-label={ariaLabel}
     >
-      <div class={div({ class: clsx(theme?.base, styling.div) })}>
+      <div class={div({ class: clsx(theme?.div, styling?.div) })}>
         {@render children()}
       </div>
     </aside>
   {/if}
 {:else}
   <aside use:trapFocus={isOpen ? { onEscape: closeSidebar ? handleEscape : undefined } : null} {...restProps} class={base({ class: clsx(theme?.base, className) })} aria-label={ariaLabel}>
-    <div class={div({ class: clsx(theme?.base, styling.div) })}>
+    <div class={div({ class: clsx(theme?.div, styling?.div) })}>
       {@render children()}
     </div>
   </aside>
@@ -143,7 +125,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1393)
+[SidebarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1320)
 ## Props
 @prop children
 @prop isOpen = false
@@ -154,13 +136,9 @@
 @prop position = "fixed"
 @prop activateClickOutside = true
 @prop backdrop = true
-@prop backdropClass
 @prop transition = fly
 @prop params
-@prop divClass
 @prop ariaLabel
-@prop nonActiveClass
-@prop activeClass
 @prop activeUrl = ""
 @prop class: className
 @prop classes

package/dist/sidebar/Sidebar.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SidebarProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SidebarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1393)
+ * [SidebarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1320)
  * ## Props
  * @prop children
  * @prop isOpen = false
@@ -13,13 +13,9 @@ import type { SidebarProps } from "../types";
  * @prop position = "fixed"
  * @prop activateClickOutside = true
  * @prop backdrop = true
- * @prop backdropClass
  * @prop transition = fly
  * @prop params
- * @prop divClass
  * @prop ariaLabel
- * @prop nonActiveClass
- * @prop activeClass
  * @prop activeUrl = ""
  * @prop class: className
  * @prop classes