odj-svelte-ui 0.1.0 → 0.2.0

package/dist/{elements → _legacy}/list-group/ListgroupItem.svelte

@@ -9,7 +9,7 @@
   export let currentClass: string = 'text-white bg-primary-700 dark:text-white dark:bg-neutral-800';
   export let normalClass: string = '';
   export let disabledClass: string = 'text-neutral-900 bg-neutral-100 dark:bg-neutral-600 dark:text-neutral-400';
-  export let focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-neutral-500 dark:focus:text-white';
+  export let focusClass: string = 'focus:z-40 focus:outline-hidden focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-neutral-500 dark:focus:text-white';
   export let hoverClass: string = 'hover:bg-neutral-100 hover:text-primary-700 dark:hover:bg-neutral-600 dark:hover:text-white';
   export let itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
 
@@ -51,7 +51,7 @@
 @prop export let currentClass: string = 'text-white bg-primary-700 dark:text-white dark:bg-neutral-800';
 @prop export let normalClass: string = '';
 @prop export let disabledClass: string = 'text-neutral-900 bg-neutral-100 dark:bg-neutral-600 dark:text-neutral-400';
-@prop export let focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-neutral-500 dark:focus:text-white';
+@prop export let focusClass: string = 'focus:z-40 focus:outline-hidden focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-neutral-500 dark:focus:text-white';
 @prop export let hoverClass: string = 'hover:bg-neutral-100 hover:text-primary-700 dark:hover:bg-neutral-600 dark:hover:text-white';
 @prop export let itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
 -->

package/dist/{elements → _legacy}/list-group/ListgroupItem.svelte.d.ts

@@ -26,7 +26,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  * @prop export let currentClass: string = 'text-white bg-primary-700 dark:text-white dark:bg-neutral-800';
  * @prop export let normalClass: string = '';
  * @prop export let disabledClass: string = 'text-neutral-900 bg-neutral-100 dark:bg-neutral-600 dark:text-neutral-400';
- * @prop export let focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-neutral-500 dark:focus:text-white';
+ * @prop export let focusClass: string = 'focus:z-40 focus:outline-hidden focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-neutral-500 dark:focus:text-white';
  * @prop export let hoverClass: string = 'hover:bg-neutral-100 hover:text-primary-700 dark:hover:bg-neutral-600 dark:hover:text-white';
  * @prop export let itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
  */

package/dist/{elements → _legacy}/mega-menu/MegaMenu.svelte

@@ -27,7 +27,7 @@
 </script>
 
 <Popper color={full ? 'default' : 'dropdown'} border={!full} rounded={!full} activeContent arrow={false} trigger="click" placement="bottom" yOnly={full} {...$$restProps} class={wrapperClass} on:show bind:open>
-  <div class="flex flex-col md:flex-row p-4 max-w-screen-md justify-center mx-auto mt-2">
+  <div class="flex flex-col md:flex-row p-4 max-w-(--breakpoint-md) justify-center mx-auto mt-2">
     <ul class={ulCls}>
       {#each items as item, index}
         <li>

package/dist/{elements → _legacy}/modal/Modal.svelte

@@ -25,7 +25,7 @@
   export let placement: ModalPlacementType = 'center';
   export let autoclose: boolean = false;
   export let dismissable: boolean = true;
-  export let backdropClass: string = 'fixed inset-0 z-40 bg-neutral-900 bg-opacity-50 dark:bg-opacity-80';
+  export let backdropClass: string = 'fixed inset-0 z-40 bg-neutral-900/50 dark:bg-neutral-900/80';
   export let defaultClass: string = 'relative flex flex-col mx-auto';
   export let outsideclose: boolean = false;
   export let dialogClass: string = 'fixed top-0 left-0 right-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
@@ -155,7 +155,7 @@
 @prop export let placement: ModalPlacementType = 'center';
 @prop export let autoclose: boolean = false;
 @prop export let dismissable: boolean = true;
-@prop export let backdropClass: string = 'fixed inset-0 z-40 bg-neutral-900 bg-opacity-50 dark:bg-opacity-80';
+@prop export let backdropClass: string = 'fixed inset-0 z-40 bg-neutral-900/50 dark:bg-neutral-900/80';
 @prop export let defaultClass: string = 'relative flex flex-col mx-auto';
 @prop export let outsideclose: boolean = false;
 @prop export let dialogClass: string = 'fixed top-0 left-0 right-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';

package/dist/{elements → _legacy}/modal/Modal.svelte.d.ts

@@ -26,7 +26,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  * @prop export let placement: ModalPlacementType = 'center';
  * @prop export let autoclose: boolean = false;
  * @prop export let dismissable: boolean = true;
- * @prop export let backdropClass: string = 'fixed inset-0 z-40 bg-neutral-900 bg-opacity-50 dark:bg-opacity-80';
+ * @prop export let backdropClass: string = 'fixed inset-0 z-40 bg-neutral-900/50 dark:bg-neutral-900/80';
  * @prop export let defaultClass: string = 'relative flex flex-col mx-auto';
  * @prop export let outsideclose: boolean = false;
  * @prop export let dialogClass: string = 'fixed top-0 left-0 right-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';

package/dist/{elements → _legacy}/navbar/NavLi.svelte

@@ -17,7 +17,7 @@
 
   $: active = navUrl ? href === navUrl : false;
 
-  $: liClass = twMerge('block py-2 pr-4 pl-3 md:p-0 rounded md:border-0', active ? activeClass ?? context.activeClass : nonActiveClass ?? context.nonActiveClass, $$props.class);
+  $: liClass = twMerge('block py-2 pr-4 pl-3 md:p-0 rounded-sm md:border-0', active ? activeClass ?? context.activeClass : nonActiveClass ?? context.nonActiveClass, $$props.class);
   // $: console.log()
 </script>
 

package/dist/{elements → _legacy}/pagination/PaginationItem.svelte

@@ -15,7 +15,7 @@
   $: defaultClass = twMerge(
     'flex items-center font-medium',
     large ? 'h-10 px-4 text-base' : 'h-8 px-3 text-sm',
-    group ? '' : table ? 'rounded' : 'rounded-lg',
+    group ? '' : table ? 'rounded-sm' : 'rounded-lg',
     // table || 'border border-neutral-300 dark:border-neutral-700 dark:bg-neutral-800',
     table ? '' : 'border',
     active ? activeClass : normalClass,

package/dist/{elements → _legacy}/popover/Popover.svelte

@@ -12,7 +12,7 @@
   export let defaultClass: string = 'py-2 px-3';
 </script>
 
-<Popper activeContent border shadow rounded {...$$restProps} class="dark:!border-neutral-600 {$$props.class}" on:show>
+<Popper activeContent border shadow rounded {...$$restProps} class="dark:border-neutral-600! {$$props.class}" on:show>
   {#if $$slots.title || title}
     <div class="py-2 px-3 bg-neutral-100 rounded-t-md border-b border-neutral-200 dark:border-neutral-600 dark:bg-neutral-700">
       <slot name="title">

package/dist/{elements → _legacy}/rating/AdvancedRating.svelte

@@ -3,8 +3,8 @@
   export let ratings: { label: string; rating: number }[] = [];
   export let divClass: string = 'flex items-center mt-4';
   export let labelClass: string = 'text-sm font-medium text-neutral-600 dark:text-neutral-500';
-  export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-neutral-200 rounded dark:bg-neutral-700';
-  export let ratingClass: string = 'h-5 bg-yellow-400 rounded';
+  export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-neutral-200 rounded-sm dark:bg-neutral-700';
+  export let ratingClass: string = 'h-5 bg-yellow-400 rounded-sm';
   export let rightLabelClass: string = 'text-sm font-medium text-neutral-600 dark:text-neutral-500';
   export let unit: string = '%';
 
@@ -38,8 +38,8 @@
 @prop export let ratings: { label: string;
 @prop export let divClass: string = 'flex items-center mt-4';
 @prop export let labelClass: string = 'text-sm font-medium text-neutral-600 dark:text-neutral-500';
-@prop export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-neutral-200 rounded dark:bg-neutral-700';
-@prop export let ratingClass: string = 'h-5 bg-yellow-400 rounded';
+@prop export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-neutral-200 rounded-sm dark:bg-neutral-700';
+@prop export let ratingClass: string = 'h-5 bg-yellow-400 rounded-sm';
 @prop export let rightLabelClass: string = 'text-sm font-medium text-neutral-600 dark:text-neutral-500';
 @prop export let unit: string = '%';
 -->

package/dist/{elements → _legacy}/rating/AdvancedRating.svelte.d.ts

@@ -17,8 +17,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
  * @prop export let ratings: { label: string;
  * @prop export let divClass: string = 'flex items-center mt-4';
  * @prop export let labelClass: string = 'text-sm font-medium text-neutral-600 dark:text-neutral-500';
- * @prop export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-neutral-200 rounded dark:bg-neutral-700';
- * @prop export let ratingClass: string = 'h-5 bg-yellow-400 rounded';
+ * @prop export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-neutral-200 rounded-sm dark:bg-neutral-700';
+ * @prop export let ratingClass: string = 'h-5 bg-yellow-400 rounded-sm';
  * @prop export let rightLabelClass: string = 'text-sm font-medium text-neutral-600 dark:text-neutral-500';
  * @prop export let unit: string = '%';
  */

package/dist/{elements → _legacy}/rating/Review.svelte

@@ -57,7 +57,7 @@
           {review.title}
         </h4>
       </div>
-      <p class="bg-primary-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded">
+      <p class="bg-primary-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded-sm">
         {review.rating}
       </p>
     </div>

package/dist/{elements → _legacy}/rating/ScoreRating.svelte

@@ -7,12 +7,12 @@
     desc3: string;
     link: { label: string; url: string };
   };
-  export let desc1Class: string = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800';
+  export let desc1Class: string = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded-sm dark:bg-primary-200 dark:text-primary-800';
   export let desc2Class: string = 'ml-2 w-24 font-medium text-neutral-900 dark:text-white';
   export let desc3spanClass: string = 'mx-2 w-1 h-1 bg-neutral-900 rounded-full dark:bg-neutral-500';
   export let desc3pClass: string = 'text-sm  w-24 font-medium text-neutral-500 dark:text-neutral-400';
   export let linkClass: string = 'ml-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
-  export let barColor: string = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
+  export let barColor: string = 'bg-primary-600 h-2.5 rounded-sm dark:bg-primary-500';
 </script>
 
 <div class="flex items-center mb-5">
@@ -36,7 +36,7 @@
       <dl>
         <dt class="text-sm font-medium text-neutral-500 dark:text-neutral-400">{label}</dt>
         <dd class="flex items-center mb-3">
-          <div class="w-full bg-neutral-200 rounded h-2.5 dark:bg-neutral-700 mr-2">
+          <div class="w-full bg-neutral-200 rounded-sm h-2.5 dark:bg-neutral-700 mr-2">
             <div class={barColor} style="width: {rating * 10}%" />
           </div>
           <span class="text-sm font-medium text-neutral-500 dark:text-neutral-400">{rating}</span>
@@ -49,7 +49,7 @@
       <dl>
         <dt class="text-sm font-medium text-neutral-500 dark:text-neutral-400">{label}</dt>
         <dd class="flex items-center mb-3">
-          <div class="w-full bg-neutral-200 rounded h-2.5 dark:bg-neutral-700 mr-2">
+          <div class="w-full bg-neutral-200 rounded-sm h-2.5 dark:bg-neutral-700 mr-2">
             <div class={barColor} style="width: {rating * 10}%" />
           </div>
           <span class="text-sm font-medium text-neutral-500 dark:text-neutral-400">{rating}</span>
@@ -67,10 +67,10 @@
 @prop export let ratings2: { label: string;
 @prop export let headerLabel: {
     desc1: string;
-@prop export let desc1Class: string = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800';
+@prop export let desc1Class: string = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded-sm dark:bg-primary-200 dark:text-primary-800';
 @prop export let desc2Class: string = 'ml-2 w-24 font-medium text-neutral-900 dark:text-white';
 @prop export let desc3spanClass: string = 'mx-2 w-1 h-1 bg-neutral-900 rounded-full dark:bg-neutral-500';
 @prop export let desc3pClass: string = 'text-sm  w-24 font-medium text-neutral-500 dark:text-neutral-400';
 @prop export let linkClass: string = 'ml-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
-@prop export let barColor: string = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
+@prop export let barColor: string = 'bg-primary-600 h-2.5 rounded-sm dark:bg-primary-500';
 -->

package/dist/{elements → _legacy}/rating/ScoreRating.svelte.d.ts

@@ -18,12 +18,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
  * @prop export let ratings2: { label: string;
  * @prop export let headerLabel: {
  * desc1: string;
- * @prop export let desc1Class: string = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800';
+ * @prop export let desc1Class: string = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded-sm dark:bg-primary-200 dark:text-primary-800';
  * @prop export let desc2Class: string = 'ml-2 w-24 font-medium text-neutral-900 dark:text-white';
  * @prop export let desc3spanClass: string = 'mx-2 w-1 h-1 bg-neutral-900 rounded-full dark:bg-neutral-500';
  * @prop export let desc3pClass: string = 'text-sm  w-24 font-medium text-neutral-500 dark:text-neutral-400';
  * @prop export let linkClass: string = 'ml-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
- * @prop export let barColor: string = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
+ * @prop export let barColor: string = 'bg-primary-600 h-2.5 rounded-sm dark:bg-primary-500';
  */
 declare const ScoreRating: $$__sveltets_2_IsomorphicComponent<{
     ratings?: {

package/dist/{elements → _legacy}/sidebar/SidebarCta.svelte

@@ -3,7 +3,7 @@
 
   export let divWrapperClass: string = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
   export let divClass: string = 'flex items-center mb-3';
-  export let spanClass: string = 'bg-primary-100 text-primary-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
+  export let spanClass: string = 'bg-primary-100 text-primary-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded-sm dark:bg-primary-200 dark:text-primary-900';
   export let label: string = '';
 </script>
 
@@ -23,6 +23,6 @@
 ## Props
 @prop export let divWrapperClass: string = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
 @prop export let divClass: string = 'flex items-center mb-3';
-@prop export let spanClass: string = 'bg-primary-100 text-primary-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
+@prop export let spanClass: string = 'bg-primary-100 text-primary-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded-sm dark:bg-primary-200 dark:text-primary-900';
 @prop export let label: string = '';
 -->

package/dist/{elements → _legacy}/sidebar/SidebarCta.svelte.d.ts

@@ -21,7 +21,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  * ## Props
  * @prop export let divWrapperClass: string = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
  * @prop export let divClass: string = 'flex items-center mb-3';
- * @prop export let spanClass: string = 'bg-primary-100 text-primary-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
+ * @prop export let spanClass: string = 'bg-primary-100 text-primary-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded-sm dark:bg-primary-200 dark:text-primary-900';
  * @prop export let label: string = '';
  */
 declare const SidebarCta: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{

package/dist/{elements → _legacy}/sidebar/SidebarWrapper.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
 
-  export let divClass: string = 'overflow-y-auto p-2 bg-neutral-100 rounded dark:bg-neutral-850';
+  export let divClass: string = 'overflow-y-auto p-2 bg-neutral-100 rounded-sm dark:bg-neutral-850';
 </script>
 
 <div {...$$restProps} class={twMerge(divClass, $$props.class)}>
@@ -12,5 +12,5 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: string = 'overflow-y-auto py-4 px-3 bg-neutral-50 rounded dark:bg-neutral-800';
+@prop export let divClass: string = 'overflow-y-auto py-4 px-3 bg-neutral-50 rounded-sm dark:bg-neutral-800';
 -->

package/dist/{elements → _legacy}/sidebar/SidebarWrapper.svelte.d.ts

@@ -19,7 +19,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: string = 'overflow-y-auto py-4 px-3 bg-neutral-50 rounded dark:bg-neutral-800';
+ * @prop export let divClass: string = 'overflow-y-auto py-4 px-3 bg-neutral-50 rounded-sm dark:bg-neutral-800';
  */
 declare const SidebarWrapper: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     [x: string]: any;

package/dist/{elements → _legacy}/skeleton/CardPlaceholder.svelte

@@ -12,13 +12,13 @@
     xxl: 'max-w-2xl'
   };
 
-  export let divClass: string = 'p-4 rounded border border-neutral-200 shadow animate-pulse md:p-6 dark:border-neutral-700';
+  export let divClass: string = 'p-4 rounded-sm border border-neutral-200 shadow-sm animate-pulse md:p-6 dark:border-neutral-700';
   export let size: keyof Sizes = 'sm';
   $: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 </script>
 
 <div role="status" class={outDivclass}>
-  <div class="flex justify-center items-center mb-4 h-48 bg-neutral-300 rounded dark:bg-neutral-700">
+  <div class="flex justify-center items-center mb-4 h-48 bg-neutral-300 rounded-sm dark:bg-neutral-700">
     <svg width="48" height="48" class="text-neutral-200 dark:text-neutral-600" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" viewBox="0 0 640 512">
       <path d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z" />
     </svg>
@@ -43,6 +43,6 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: string = 'p-4 rounded border border-neutral-200 shadow animate-pulse md:p-6 dark:border-neutral-700';
+@prop export let divClass: string = 'p-4 rounded-sm border border-neutral-200 shadow-sm animate-pulse md:p-6 dark:border-neutral-700';
 @prop export let size: keyof Sizes = 'sm';
 -->

package/dist/{elements → _legacy}/skeleton/CardPlaceholder.svelte.d.ts

@@ -14,7 +14,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: string = 'p-4 rounded border border-neutral-200 shadow animate-pulse md:p-6 dark:border-neutral-700';
+ * @prop export let divClass: string = 'p-4 rounded-sm border border-neutral-200 shadow-sm animate-pulse md:p-6 dark:border-neutral-700';
  * @prop export let size: keyof Sizes = 'sm';
  */
 declare const CardPlaceholder: $$__sveltets_2_IsomorphicComponent<{

package/dist/{elements → _legacy}/skeleton/ImagePlaceholder.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <div role="status" class={twMerge(divClass, $$props.class)}>
-  <div class="flex justify-center items-center w-full h-{imgHeight} bg-neutral-300 rounded sm:w-96 dark:bg-neutral-700">
+  <div class="flex justify-center items-center w-full h-{imgHeight} bg-neutral-300 rounded-sm sm:w-96 dark:bg-neutral-700">
     <svg width="48" height="48" class="text-neutral-200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" viewBox="0 0 640 512">
       <path d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z" />
     </svg>

package/dist/{elements → _legacy}/skeleton/ListPlaceholder.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
-  export let divClass: string = 'p-4 space-y-4 max-w-md rounded border border-neutral-200 divide-y divide-neutral-200 shadow animate-pulse dark:divide-neutral-700 md:p-6 dark:border-neutral-700';
+  export let divClass: string = 'p-4 space-y-4 max-w-md rounded-sm border border-neutral-200 divide-y divide-neutral-200 shadow-sm animate-pulse dark:divide-neutral-700 md:p-6 dark:border-neutral-700';
 </script>
 
 <div role="status" class={twMerge(divClass, $$props.class)}>
@@ -46,5 +46,5 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: string = 'p-4 space-y-4 max-w-md rounded border border-neutral-200 divide-y divide-neutral-200 shadow animate-pulse dark:divide-neutral-700 md:p-6 dark:border-neutral-700';
+@prop export let divClass: string = 'p-4 space-y-4 max-w-md rounded-sm border border-neutral-200 divide-y divide-neutral-200 shadow-sm animate-pulse dark:divide-neutral-700 md:p-6 dark:border-neutral-700';
 -->

package/dist/{elements → _legacy}/skeleton/ListPlaceholder.svelte.d.ts

@@ -14,7 +14,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: string = 'p-4 space-y-4 max-w-md rounded border border-neutral-200 divide-y divide-neutral-200 shadow animate-pulse dark:divide-neutral-700 md:p-6 dark:border-neutral-700';
+ * @prop export let divClass: string = 'p-4 space-y-4 max-w-md rounded-sm border border-neutral-200 divide-y divide-neutral-200 shadow-sm animate-pulse dark:divide-neutral-700 md:p-6 dark:border-neutral-700';
  */
 declare const ListPlaceholder: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: any;

package/dist/{elements → _legacy}/skeleton/WidgetPlaceholder.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
-  export let divClass: string = 'p-4 max-w-sm rounded border border-neutral-200 shadow animate-pulse md:p-6 dark:border-neutral-700';
+  export let divClass: string = 'p-4 max-w-sm rounded-sm border border-neutral-200 shadow-sm animate-pulse md:p-6 dark:border-neutral-700';
 </script>
 
 <div role="status" class={twMerge(divClass, $$props.class)}>
@@ -22,5 +22,5 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: string = 'p-4 max-w-sm rounded border border-neutral-200 shadow animate-pulse md:p-6 dark:border-neutral-700';
+@prop export let divClass: string = 'p-4 max-w-sm rounded-sm border border-neutral-200 shadow-sm animate-pulse md:p-6 dark:border-neutral-700';
 -->

package/dist/{elements → _legacy}/skeleton/WidgetPlaceholder.svelte.d.ts

@@ -14,7 +14,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: string = 'p-4 max-w-sm rounded border border-neutral-200 shadow animate-pulse md:p-6 dark:border-neutral-700';
+ * @prop export let divClass: string = 'p-4 max-w-sm rounded-sm border border-neutral-200 shadow-sm animate-pulse md:p-6 dark:border-neutral-700';
  */
 declare const WidgetPlaceholder: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: any;

package/dist/{elements → _legacy}/speed-dial/SpeedDial.svelte

@@ -39,7 +39,7 @@
 
 <div class={divClass}>
   {#if gradient}
-    <GradientButton {pill} {name} aria-controls={id} aria-expanded={open} {...$$restProps} class="!p-3">
+    <GradientButton {pill} {name} aria-controls={id} aria-expanded={open} {...$$restProps} class="p-3!">
       <slot name="icon">
         <svg aria-hidden="true" class="w-8 h-8 transition-transform group-hover:rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
@@ -48,7 +48,7 @@
       <span class="sr-only">{name}</span>
     </GradientButton>
   {:else}
-    <Button {pill} {name} aria-controls={id} aria-expanded={open} {...$$restProps} class="!p-3">
+    <Button {pill} {name} aria-controls={id} aria-expanded={open} {...$$restProps} class="p-3!">
       <slot name="icon">
         <svg aria-hidden="true" class="w-8 h-8 transition-transform group-hover:rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />

package/dist/{elements → _legacy}/speed-dial/SpeedDialButton.svelte

@@ -8,7 +8,7 @@
 
   const context = getContext<SpeedCtxType>('speed-dial');
 
-  export let btnDefaultClass: string = 'w-[52px] h-[52px] shadow-sm !p-2';
+  export let btnDefaultClass: string = 'w-[52px] h-[52px] shadow-xs p-2!';
   export let name: string = '';
   export let tooltip: Placement | 'none' = context.tooltip;
   export let pill: boolean = context.pill;
@@ -39,7 +39,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let btnDefaultClass: string = 'w-[52px] h-[52px] shadow-sm !p-2';
+@prop export let btnDefaultClass: string = 'w-[52px] h-[52px] shadow-xs p-2!';
 @prop export let name: string = '';
 @prop export let tooltip: Placement | 'none' = context.tooltip;
 @prop export let pill: boolean = context.pill;

package/dist/{elements → _legacy}/speed-dial/SpeedDialButton.svelte.d.ts

@@ -20,7 +20,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let btnDefaultClass: string = 'w-[52px] h-[52px] shadow-sm !p-2';
+ * @prop export let btnDefaultClass: string = 'w-[52px] h-[52px] shadow-xs p-2!';
  * @prop export let name: string = '';
  * @prop export let tooltip: Placement | 'none' = context.tooltip;
  * @prop export let pill: boolean = context.pill;

package/dist/{elements → _legacy}/steps/StepIndicator.svelte

@@ -46,15 +46,15 @@
     {#each steps as step, i}
       {#if i === currentStep - 1}
         <div class="relative w-full h-full">
-          <div class={twJoin('relative w-full h-full rounded-sm', currentStepColors[color])} />
+          <div class={twJoin('relative w-full h-full rounded-xs', currentStepColors[color])} />
           {#if glow}
-            <div class={twJoin('absolute -inset-1 rounded-sm blur opacity-30 dark:opacity-25', currentStepColors[color])} />
+            <div class={twJoin('absolute -inset-1 rounded-xs blur-sm opacity-30 dark:opacity-25', currentStepColors[color])} />
           {/if}
         </div>
       {:else if i < currentStep - 1}
-        <div class={twJoin('w-full h-full rounded-sm', completedStepColors[color])} />
+        <div class={twJoin('w-full h-full rounded-xs', completedStepColors[color])} />
       {:else}
-        <div class="w-full h-full rounded-sm bg-neutral-200 dark:bg-neutral-700" />
+        <div class="w-full h-full rounded-xs bg-neutral-200 dark:bg-neutral-700" />
       {/if}
     {/each}
   </div>

package/dist/{elements → _legacy}/table/TableBodyRow.svelte

@@ -25,12 +25,12 @@
   };
 
   const stripColors = {
-    default: 'odd:bg-white even:bg-neutral-50 odd:dark:bg-neutral-800 even:dark:bg-neutral-700',
-    blue: 'odd:bg-blue-800 even:bg-blue-700 odd:dark:bg-blue-800 even:dark:bg-blue-700',
-    green: 'odd:bg-green-800 even:bg-green-700 odd:dark:bg-green-800 even:dark:bg-green-700',
-    red: 'odd:bg-red-800 even:bg-red-700 odd:dark:bg-red-800 even:dark:bg-red-700',
-    yellow: 'odd:bg-yellow-800 even:bg-yellow-700 odd:dark:bg-yellow-800 even:dark:bg-yellow-700',
-    purple: 'odd:bg-purple-800 even:bg-purple-700 odd:dark:bg-purple-800 even:dark:bg-purple-700',
+    default: 'odd:bg-white even:bg-neutral-50 dark:odd:bg-neutral-800 dark:even:bg-neutral-700',
+    blue: 'odd:bg-blue-800 even:bg-blue-700 dark:odd:bg-blue-800 dark:even:bg-blue-700',
+    green: 'odd:bg-green-800 even:bg-green-700 dark:odd:bg-green-800 dark:even:bg-green-700',
+    red: 'odd:bg-red-800 even:bg-red-700 dark:odd:bg-red-800 dark:even:bg-red-700',
+    yellow: 'odd:bg-yellow-800 even:bg-yellow-700 dark:odd:bg-yellow-800 dark:even:bg-yellow-700',
+    purple: 'odd:bg-purple-800 even:bg-purple-700 dark:odd:bg-purple-800 dark:even:bg-purple-700',
     custom: ''
   };
 

package/dist/{elements → _legacy}/tabs/Tabs.svelte

@@ -21,14 +21,14 @@
 
   // styles
   const styledActiveClasses = {
-    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-neutral-900 bg-neutral-100 focus:ring-4 focus:ring-primary-300 focus:outline-none dark:bg-neutral-700 dark:text-white',
+    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-neutral-900 bg-neutral-100 focus:ring-4 focus:ring-primary-300 focus:outline-hidden dark:bg-neutral-700 dark:text-white',
     pill: 'py-3 px-4 text-white bg-primary-600 rounded-lg',
     underline: 'p-4 text-primary-600 border-b-2 border-primary-600 dark:text-primary-500 dark:border-primary-500',
     none: ''
   };
 
   const styledInactiveClasses = {
-    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-neutral-500 dark:text-neutral-400 bg-white hover:text-neutral-700 hover:bg-neutral-50 focus:ring-4 focus:ring-primary-300 focus:outline-none dark:hover:text-white dark:bg-neutral-800 dark:hover:bg-neutral-700',
+    full: 'p-4 w-full group-first:rounded-l-lg group-last:rounded-r-lg text-neutral-500 dark:text-neutral-400 bg-white hover:text-neutral-700 hover:bg-neutral-50 focus:ring-4 focus:ring-primary-300 focus:outline-hidden dark:hover:text-white dark:bg-neutral-800 dark:hover:bg-neutral-700',
     pill: 'py-3 px-4 text-neutral-500 rounded-lg hover:text-neutral-900 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white',
     underline: 'p-4 border-b-2 border-transparent hover:text-neutral-600 hover:border-neutral-300 dark:hover:text-neutral-300 text-neutral-500 dark:text-neutral-400',
     none: ''

package/dist/{elements → _legacy}/timeline/ActivityItem.svelte

@@ -6,7 +6,7 @@
   export let liClass: string = 'mb-10 ml-6';
   export let spanClass: string = 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-neutral-900 dark:bg-blue-900';
   export let imgClass: string = 'rounded-full shadow-lg';
-  export let outerDivClass: string = 'p-4 bg-white rounded-lg border border-neutral-200 shadow-sm dark:bg-neutral-700 dark:border-neutral-600';
+  export let outerDivClass: string = 'p-4 bg-white rounded-lg border border-neutral-200 shadow-xs dark:bg-neutral-700 dark:border-neutral-600';
   export let innerDivClass: string = 'justify-between items-center mb-3 sm:flex';
   export let timeClass: string = 'mb-1 text-xs font-normal text-neutral-400 sm:order-last sm:mb-0';
   export let titleClass: string = 'text-sm font-normal text-neutral-500 lex dark:text-neutral-300';
@@ -51,7 +51,7 @@
 @prop export let liClass: string = 'mb-10 ml-6';
 @prop export let spanClass: string = 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-neutral-900 dark:bg-blue-900';
 @prop export let imgClass: string = 'rounded-full shadow-lg';
-@prop export let outerDivClass: string = 'p-4 bg-white rounded-lg border border-neutral-200 shadow-sm dark:bg-neutral-700 dark:border-neutral-600';
+@prop export let outerDivClass: string = 'p-4 bg-white rounded-lg border border-neutral-200 shadow-xs dark:bg-neutral-700 dark:border-neutral-600';
 @prop export let innerDivClass: string = 'justify-between items-center mb-3 sm:flex';
 @prop export let timeClass: string = 'mb-1 text-xs font-normal text-neutral-400 sm:order-last sm:mb-0';
 @prop export let titleClass: string = 'text-sm font-normal text-neutral-500 lex dark:text-neutral-300';

package/dist/{elements → _legacy}/timeline/ActivityItem.svelte.d.ts

@@ -19,7 +19,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
  * @prop export let liClass: string = 'mb-10 ml-6';
  * @prop export let spanClass: string = 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-neutral-900 dark:bg-blue-900';
  * @prop export let imgClass: string = 'rounded-full shadow-lg';
- * @prop export let outerDivClass: string = 'p-4 bg-white rounded-lg border border-neutral-200 shadow-sm dark:bg-neutral-700 dark:border-neutral-600';
+ * @prop export let outerDivClass: string = 'p-4 bg-white rounded-lg border border-neutral-200 shadow-xs dark:bg-neutral-700 dark:border-neutral-600';
  * @prop export let innerDivClass: string = 'justify-between items-center mb-3 sm:flex';
  * @prop export let timeClass: string = 'mb-1 text-xs font-normal text-neutral-400 sm:order-last sm:mb-0';
  * @prop export let titleClass: string = 'text-sm font-normal text-neutral-500 lex dark:text-neutral-300';

package/dist/{elements → _legacy}/toast/Toast.svelte

@@ -21,7 +21,7 @@
   export let color: 'primary' | 'neutral' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none' = 'primary';
   export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none' = 'none';
   export let open: boolean = true;
-  export let divClass: string = 'w-full max-w-xs p-4 text-neutral-500 bg-white shadow dark:text-neutral-400 dark:bg-neutral-800 gap-3';
+  export let divClass: string = 'w-full max-w-xs p-4 text-neutral-500 bg-white shadow-sm dark:text-neutral-400 dark:bg-neutral-800 gap-3';
   export let defaultIconClass: string = 'w-8 h-8';
   export let contentClass: string = 'w-full text-sm font-normal';
   export let align: boolean = true;
@@ -61,7 +61,7 @@
   let iconClass: string;
   $: iconClass = twMerge('inline-flex items-center justify-center shrink-0', colors[color], defaultIconClass);
 
-  const clsBtnExtraClass = '-mx-1.5 -my-1.5 text-neutral-400 hover:text-neutral-900 focus:!ring-neutral-300 hover:bg-neutral-100 dark:text-neutral-500 dark:hover:text-white dark:hover:bg-neutral-700';
+  const clsBtnExtraClass = '-mx-1.5 -my-1.5 text-neutral-400 hover:text-neutral-900 focus:ring-neutral-300! hover:bg-neutral-100 dark:text-neutral-500 dark:hover:text-white dark:hover:bg-neutral-700';
 </script>
 
 {#if open}
@@ -92,7 +92,7 @@
 @prop export let color: 'primary' | 'neutral' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none' = 'primary';
 @prop export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none' = 'none';
 @prop export let open: boolean = true;
-@prop export let divClass: string = 'w-full max-w-xs p-4 text-neutral-500 bg-white shadow dark:text-neutral-400 dark:bg-neutral-800 gap-3';
+@prop export let divClass: string = 'w-full max-w-xs p-4 text-neutral-500 bg-white shadow-sm dark:text-neutral-400 dark:bg-neutral-800 gap-3';
 @prop export let defaultIconClass: string = 'w-8 h-8';
 @prop export let contentClass: string = 'w-full text-sm font-normal';
 @prop export let align: boolean = true;

package/dist/{elements → _legacy}/toast/Toast.svelte.d.ts

@@ -24,7 +24,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  * @prop export let color: 'primary' | 'neutral' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none' = 'primary';
  * @prop export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none' = 'none';
  * @prop export let open: boolean = true;
- * @prop export let divClass: string = 'w-full max-w-xs p-4 text-neutral-500 bg-white shadow dark:text-neutral-400 dark:bg-neutral-800 gap-3';
+ * @prop export let divClass: string = 'w-full max-w-xs p-4 text-neutral-500 bg-white shadow-sm dark:text-neutral-400 dark:bg-neutral-800 gap-3';
  * @prop export let defaultIconClass: string = 'w-8 h-8';
  * @prop export let contentClass: string = 'w-full text-sm font-normal';
  * @prop export let align: boolean = true;

package/dist/{elements → _legacy}/toolbar/ToolbarButton.svelte

@@ -26,14 +26,14 @@
   };
 
   const sizing = {
-    xs: 'm-0.5 rounded-sm focus-visible:ring-1 p-0.5',
-    sm: 'm-0.5 rounded focus-visible:ring-1 p-0.5',
+    xs: 'm-0.5 rounded-xs focus-visible:ring-1 p-0.5',
+    sm: 'm-0.5 rounded-sm focus-visible:ring-1 p-0.5',
     md: 'm-0.5 rounded-lg focus-visible:ring-2 p-1.5',
     lg: 'm-0.5 rounded-lg focus-visible:ring-2 p-2.5'
   };
 
   let buttonClass: string;
-  $: buttonClass = twMerge('focus:outline-none whitespace-normal', sizing[size], colors[color], color === 'default' && (background ? 'hover:bg-neutral-100 dark:hover:bg-neutral-600' : 'hover:bg-neutral-100 dark:hover:bg-neutral-700'), $$props.class);
+  $: buttonClass = twMerge('focus:outline-hidden whitespace-normal', sizing[size], colors[color], color === 'default' && (background ? 'hover:bg-neutral-100 dark:hover:bg-neutral-600' : 'hover:bg-neutral-100 dark:hover:bg-neutral-700'), $$props.class);
 
   const svgSizes = {
     xs: 'w-3 h-3',

package/dist/{elements → _legacy}/toolbar/ToolbarGroup.svelte

@@ -2,7 +2,7 @@
   import { twMerge } from 'tailwind-merge';
   import type { Writable } from 'svelte/store';
   import { getContext } from 'svelte';
-  export let divClass: string = 'flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0';
+  export let divClass: string = 'flex items-center space-x-1 sm:pr-4 sm:pl-4 sm:first:pl-0 sm:last:pr-0';
 
   const options: Writable<boolean> = getContext('toolbar');
   if (options) $options = true;
@@ -16,5 +16,5 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: string = 'flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0';
+@prop export let divClass: string = 'flex items-center space-x-1 sm:pr-4 sm:pl-4 sm:first:pl-0 sm:last:pr-0';
 -->

package/dist/{elements → _legacy}/toolbar/ToolbarGroup.svelte.d.ts

@@ -19,7 +19,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: string = 'flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0';
+ * @prop export let divClass: string = 'flex items-center space-x-1 sm:pr-4 sm:pl-4 sm:first:pl-0 sm:last:pr-0';
  */
 declare const ToolbarGroup: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     [x: string]: any;

package/dist/{elements → _legacy}/typography/Mark.svelte

@@ -3,7 +3,7 @@
 
   export let color: string = 'text-white dark:bg-blue-500';
   export let bgColor: string = 'bg-blue-600';
-  export let markClass: string = 'px-2 rounded';
+  export let markClass: string = 'px-2 rounded-sm';
 </script>
 
 <mark {...$$restProps} class={twMerge(markClass, bgColor, color, $$props.class)}>
@@ -16,5 +16,5 @@
 ## Props
 @prop export let color: string = 'text-white dark:bg-blue-500';
 @prop export let bgColor: string = 'bg-blue-600';
-@prop export let markClass: string = 'px-2 rounded';
+@prop export let markClass: string = 'px-2 rounded-sm';
 -->