flowbite-svelte 0.12.5 → 0.13.3

package/modals/SmallModal.svelte

@@ -31,161 +31,125 @@ if (textColor === 'blue') {
     divClass = 'relative bg-white rounded-lg shadow dark:bg-blue-700';
     headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-blue-600';
     h3Class = 'text-xl font-medium text-blue-900 dark:text-white';
-    buttonClass =
-        'text-blue-400 bg-transparent hover:bg-blue-200 hover:text-blue-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-blue-600 dark:hover:text-white';
+    buttonClass = 'text-blue-400 bg-transparent hover:bg-blue-200 hover:text-blue-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-blue-600 dark:hover:text-white';
     pClass = 'text-base leading-relaxed text-blue-500 dark:text-blue-400';
-    footerClass =
-        'flex items-center p-6 space-x-2 rounded-b border-t border-blue-200 dark:border-blue-600';
-    btn2Class =
-        'text-blue-500 bg-white hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 rounded-lg border border-blue-200 text-sm font-medium px-5 py-2.5 hover:text-blue-900 focus:z-10 dark:bg-blue-700 dark:text-blue-300 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-600';
+    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-blue-200 dark:border-blue-600';
+    btn2Class = 'text-blue-500 bg-white hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 rounded-lg border border-blue-200 text-sm font-medium px-5 py-2.5 hover:text-blue-900 focus:z-10 dark:bg-blue-700 dark:text-blue-300 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-600';
 }
 else if (textColor === 'gray') {
     divClass = 'relative bg-white rounded-lg shadow dark:bg-gray-700';
     headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-gray-600';
     h3Class = 'text-xl font-medium text-gray-900 dark:text-white';
-    buttonClass =
-        'text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white';
+    buttonClass = 'text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white';
     pClass = 'text-base leading-relaxed text-gray-500 dark:text-gray-400';
-    footerClass =
-        'flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600';
-    btn2Class =
-        'text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600';
+    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600';
+    btn2Class = 'text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600';
 }
 else if (textColor === 'red') {
     divClass = 'relative bg-white rounded-lg shadow dark:bg-red-700';
     headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-red-600';
     h3Class = 'text-xl font-medium text-red-900 dark:text-white';
-    buttonClass =
-        'text-red-400 bg-transparent hover:bg-red-200 hover:text-red-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-red-600 dark:hover:text-white';
+    buttonClass = 'text-red-400 bg-transparent hover:bg-red-200 hover:text-red-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-red-600 dark:hover:text-white';
     pClass = 'text-base leading-relaxed text-red-500 dark:text-red-400';
-    footerClass =
-        'flex items-center p-6 space-x-2 rounded-b border-t border-red-200 dark:border-red-600';
-    btn2Class =
-        'text-red-500 bg-white hover:bg-red-100 focus:ring-4 focus:ring-red-300 rounded-lg border border-red-200 text-sm font-medium px-5 py-2.5 hover:text-red-900 focus:z-10 dark:bg-red-700 dark:text-red-300 dark:border-red-500 dark:hover:text-white dark:hover:bg-red-600';
+    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-red-200 dark:border-red-600';
+    btn2Class = 'text-red-500 bg-white hover:bg-red-100 focus:ring-4 focus:ring-red-300 rounded-lg border border-red-200 text-sm font-medium px-5 py-2.5 hover:text-red-900 focus:z-10 dark:bg-red-700 dark:text-red-300 dark:border-red-500 dark:hover:text-white dark:hover:bg-red-600';
 }
 else if (textColor === 'yellow') {
     divClass = 'relative bg-white rounded-lg shadow dark:bg-yellow-700';
-    headDivClass =
-        'flex justify-between items-center p-5 rounded-t border-b dark:border-yellow-600';
+    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-yellow-600';
     h3Class = 'text-xl font-medium text-yellow-900 dark:text-white';
-    buttonClass =
-        'text-yellow-400 bg-transparent hover:bg-yellow-200 hover:text-yellow-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-yellow-600 dark:hover:text-white';
+    buttonClass = 'text-yellow-400 bg-transparent hover:bg-yellow-200 hover:text-yellow-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-yellow-600 dark:hover:text-white';
     pClass = 'text-base leading-relaxed text-yellow-500 dark:text-yellow-400';
-    footerClass =
-        'flex items-center p-6 space-x-2 rounded-b border-t border-yellow-200 dark:border-yellow-600';
-    btn2Class =
-        'text-yellow-500 bg-white hover:bg-yellow-100 focus:ring-4 focus:ring-yellow-300 rounded-lg border border-yellow-200 text-sm font-medium px-5 py-2.5 hover:text-yellow-900 focus:z-10 dark:bg-yellow-700 dark:text-yellow-300 dark:border-yellow-500 dark:hover:text-white dark:hover:bg-yellow-600';
+    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-yellow-200 dark:border-yellow-600';
+    btn2Class = 'text-yellow-500 bg-white hover:bg-yellow-100 focus:ring-4 focus:ring-yellow-300 rounded-lg border border-yellow-200 text-sm font-medium px-5 py-2.5 hover:text-yellow-900 focus:z-10 dark:bg-yellow-700 dark:text-yellow-300 dark:border-yellow-500 dark:hover:text-white dark:hover:bg-yellow-600';
 }
 else if (textColor === 'green') {
     divClass = 'relative bg-white rounded-lg shadow dark:bg-green-700';
     headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-green-600';
     h3Class = 'text-xl font-medium text-green-900 dark:text-white';
-    buttonClass =
-        'text-green-400 bg-transparent hover:bg-green-200 hover:text-green-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-green-600 dark:hover:text-white';
+    buttonClass = 'text-green-400 bg-transparent hover:bg-green-200 hover:text-green-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-green-600 dark:hover:text-white';
     pClass = 'text-base leading-relaxed text-green-500 dark:text-green-400';
-    footerClass =
-        'flex items-center p-6 space-x-2 rounded-b border-t border-green-200 dark:border-green-600';
-    btn2Class =
-        'text-green-500 bg-white hover:bg-green-100 focus:ring-4 focus:ring-green-300 rounded-lg border border-green-200 text-sm font-medium px-5 py-2.5 hover:text-green-900 focus:z-10 dark:bg-green-700 dark:text-green-300 dark:border-green-500 dark:hover:text-white dark:hover:bg-green-600';
+    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-green-200 dark:border-green-600';
+    btn2Class = 'text-green-500 bg-white hover:bg-green-100 focus:ring-4 focus:ring-green-300 rounded-lg border border-green-200 text-sm font-medium px-5 py-2.5 hover:text-green-900 focus:z-10 dark:bg-green-700 dark:text-green-300 dark:border-green-500 dark:hover:text-white dark:hover:bg-green-600';
 }
 else if (textColor === 'indigo') {
     divClass = 'relative bg-white rounded-lg shadow dark:bg-indigo-700';
-    headDivClass =
-        'flex justify-between items-center p-5 rounded-t border-b dark:border-indigo-600';
+    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-indigo-600';
     h3Class = 'text-xl font-medium text-indigo-900 dark:text-white';
-    buttonClass =
-        'text-indigo-400 bg-transparent hover:bg-indigo-200 hover:text-indigo-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-indigo-600 dark:hover:text-white';
+    buttonClass = 'text-indigo-400 bg-transparent hover:bg-indigo-200 hover:text-indigo-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-indigo-600 dark:hover:text-white';
     pClass = 'text-base leading-relaxed text-indigo-500 dark:text-indigo-400';
-    footerClass =
-        'flex items-center p-6 space-x-2 rounded-b border-t border-indigo-200 dark:border-indigo-600';
-    btn2Class =
-        'text-indigo-500 bg-white hover:bg-indigo-100 focus:ring-4 focus:ring-indigo-300 rounded-lg border border-indigo-200 text-sm font-medium px-5 py-2.5 hover:text-indigo-900 focus:z-10 dark:bg-indigo-700 dark:text-indigo-300 dark:border-indigo-500 dark:hover:text-white dark:hover:bg-indigo-600';
+    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-indigo-200 dark:border-indigo-600';
+    btn2Class = 'text-indigo-500 bg-white hover:bg-indigo-100 focus:ring-4 focus:ring-indigo-300 rounded-lg border border-indigo-200 text-sm font-medium px-5 py-2.5 hover:text-indigo-900 focus:z-10 dark:bg-indigo-700 dark:text-indigo-300 dark:border-indigo-500 dark:hover:text-white dark:hover:bg-indigo-600';
 }
 else if (textColor === 'purple') {
     divClass = 'relative bg-white rounded-lg shadow dark:bg-purple-700';
-    headDivClass =
-        'flex justify-between items-center p-5 rounded-t border-b dark:border-purple-600';
+    headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-purple-600';
     h3Class = 'text-xl font-medium text-purple-900 dark:text-white';
-    buttonClass =
-        'text-purple-400 bg-transparent hover:bg-purple-200 hover:text-purple-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-purple-600 dark:hover:text-white';
+    buttonClass = 'text-purple-400 bg-transparent hover:bg-purple-200 hover:text-purple-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-purple-600 dark:hover:text-white';
     pClass = 'text-base leading-relaxed text-purple-500 dark:text-purple-400';
-    footerClass =
-        'flex items-center p-6 space-x-2 rounded-b border-t border-purple-200 dark:border-purple-600';
-    btn2Class =
-        'text-purple-500 bg-white hover:bg-purple-100 focus:ring-4 focus:ring-purple-300 rounded-lg border border-purple-200 text-sm font-medium px-5 py-2.5 hover:text-purple-900 focus:z-10 dark:bg-purple-700 dark:text-purple-300 dark:border-purple-500 dark:hover:text-white dark:hover:bg-purple-600';
+    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-purple-200 dark:border-purple-600';
+    btn2Class = 'text-purple-500 bg-white hover:bg-purple-100 focus:ring-4 focus:ring-purple-300 rounded-lg border border-purple-200 text-sm font-medium px-5 py-2.5 hover:text-purple-900 focus:z-10 dark:bg-purple-700 dark:text-purple-300 dark:border-purple-500 dark:hover:text-white dark:hover:bg-purple-600';
 }
 else if (textColor === 'pink') {
     divClass = 'relative bg-white rounded-lg shadow dark:bg-pink-700';
     headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-pink-600';
     h3Class = 'text-xl font-medium text-pink-900 dark:text-white';
-    buttonClass =
-        'text-pink-400 bg-transparent hover:bg-pink-200 hover:text-pink-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-pink-600 dark:hover:text-white';
+    buttonClass = 'text-pink-400 bg-transparent hover:bg-pink-200 hover:text-pink-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-pink-600 dark:hover:text-white';
     pClass = 'text-base leading-relaxed text-pink-500 dark:text-pink-400';
-    footerClass =
-        'flex items-center p-6 space-x-2 rounded-b border-t border-pink-200 dark:border-pink-600';
-    btn2Class =
-        'text-pink-500 bg-white hover:bg-pink-100 focus:ring-4 focus:ring-pink-300 rounded-lg border border-pink-200 text-sm font-medium px-5 py-2.5 hover:text-pink-900 focus:z-10 dark:bg-pink-700 dark:text-pink-300 dark:border-pink-500 dark:hover:text-white dark:hover:bg-pink-600';
+    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-pink-200 dark:border-pink-600';
+    btn2Class = 'text-pink-500 bg-white hover:bg-pink-100 focus:ring-4 focus:ring-pink-300 rounded-lg border border-pink-200 text-sm font-medium px-5 py-2.5 hover:text-pink-900 focus:z-10 dark:bg-pink-700 dark:text-pink-300 dark:border-pink-500 dark:hover:text-white dark:hover:bg-pink-600';
 }
 else {
     divClass = 'relative bg-white rounded-lg shadow dark:bg-blue-700';
     headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-blue-600';
     h3Class = 'text-xl font-medium text-blue-900 dark:text-white';
-    buttonClass =
-        'text-blue-400 bg-transparent hover:bg-blue-200 hover:text-blue-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-blue-600 dark:hover:text-white';
+    buttonClass = 'text-blue-400 bg-transparent hover:bg-blue-200 hover:text-blue-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-blue-600 dark:hover:text-white';
     pClass = 'text-base leading-relaxed text-blue-500 dark:text-blue-400';
-    footerClass =
-        'flex items-center p-6 space-x-2 rounded-b border-t border-blue-200 dark:border-blue-600';
-    btn2Class =
-        'text-blue-500 bg-white hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 rounded-lg border border-blue-200 text-sm font-medium px-5 py-2.5 hover:text-blue-900 focus:z-10 dark:bg-blue-700 dark:text-blue-300 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-600';
+    footerClass = 'flex items-center p-6 space-x-2 rounded-b border-t border-blue-200 dark:border-blue-600';
+    btn2Class = 'text-blue-500 bg-white hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 rounded-lg border border-blue-200 text-sm font-medium px-5 py-2.5 hover:text-blue-900 focus:z-10 dark:bg-blue-700 dark:text-blue-300 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-600';
 }
 let button1Class;
 if (btnColor === 'blue') {
-    button1Class =
-        'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+    button1Class = 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 }
 else if (btnColor === 'gray') {
-    button1Class =
-        'text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
+    button1Class = 'text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
 }
 else if (btnColor === 'red') {
-    button1Class =
-        'text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
+    button1Class = 'text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
 }
 else if (btnColor === 'yellow') {
-    button1Class =
-        'text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
+    button1Class = 'text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
 }
 else if (btnColor === 'green') {
-    button1Class =
-        'text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
+    button1Class = 'text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
 }
 else if (btnColor === 'indigo') {
-    button1Class =
-        'text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
+    button1Class = 'text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
 }
 else if (btnColor === 'purple') {
-    button1Class =
-        'text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
+    button1Class = 'text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
 }
 else if (btnColor === 'pink') {
-    button1Class =
-        'text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
+    button1Class = 'text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
 }
 else {
-    button1Class =
-        'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+    button1Class = 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 }
 </script>
 
 {#if showModalId === id}
 	<!-- Small Modal Component -->
 	<div
-		{id}
-		role="dialog"
-		aria-modal="true"
-		class="flex overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-20 z-50 justify-center items-center"
+		on:click={closeModal}
+		class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full overflow-auto"
 	>
-		<div class="relative px-4 w-full max-w-md h-full md:h-auto">
+		<div
+			on:click|stopPropagation={() => {}}
+			role="dialog"
+			aria-modal="true"
+			class="mx-auto my-20 px-4 w-full max-w-md h-full md:h-auto"
+		>
 			<!-- Modal content -->
 			<div class={divClass}>
 				<!-- Modal header -->
@@ -194,17 +158,7 @@ else {
 						{title}
 					</h3>
 					<button type="button" class={buttonClass} on:click={closeModal}>
-						<svg
-							class="w-5 h-5"
-							fill="currentColor"
-							viewBox="0 0 20 20"
-							xmlns="http://www.w3.org/2000/svg"
-							><path
-								fill-rule="evenodd"
-								d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-								clip-rule="evenodd"
-							/></svg
-						>
+						<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
 					</button>
 				</div>
 				<!-- Modal body -->
@@ -225,9 +179,4 @@ else {
 			</div>
 		</div>
 	</div>
-
-	<div
-		on:click={closeModal}
-		class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full"
-	/>
 {/if}

package/navbar/DropdownNavbar.svelte

@@ -25,57 +25,19 @@ export let liButtonClass = `flex justify-between items-center py-2 pr-4 pl-3 w-f
 			<img src={logo} {alt} />
 			<span class={spanClass}>{sitename}</span>
 		</a>
-		<button
-			on:click={handleClickbtn}
-			type="button"
-			class={buttonClass}
-			aria-controls="mobile-menu-2"
-			aria-expanded="false"
-		>
+		<button on:click={handleClickbtn} type="button" class={buttonClass} aria-controls="mobile-menu-2" aria-expanded="false">
 			<span class="sr-only">Open main menu</span>
-			<svg
-				class="w-6 h-6"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-					clip-rule="evenodd"
-				/></svg
-			>
-			<svg
-				class="hidden w-6 h-6"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-					clip-rule="evenodd"
-				/></svg
-			>
+			<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg>
+			<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
 		</button>
 		<div class="w-full md:block md:w-auto" class:hidden={barHidden} id="mobile-menu">
 			<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
 				{#each menus as { name, href, rel, child }}
 					{#if child}
-						<NavDropdown
-							{liButtonClass}
-							{dropdownDiv}
-							{name}
-							{child}
-							{rel}
-							{dropdownLinkClassWithChild}
-						/>
+						<NavDropdown {liButtonClass} {dropdownDiv} {name} {child} {rel} {dropdownLinkClassWithChild} />
 					{:else}
 						<li>
-							<a
-								class:active={$page.url.pathname === href}
-								{href}
-								{rel}
-								class={dropdownLinkClassWithoutChild}>{name}</a
-							>
+							<a class:active={$page.url.pathname === href} {href} {rel} class={dropdownLinkClassWithoutChild}>{name}</a>
 						</li>
 					{/if}
 				{/each}

package/navbar/Navbar.svelte

@@ -21,43 +21,16 @@ export let liLinkClass = `block py-2 pr-4 pl-3  text-gray-700 border-b border-gr
 			<img src={logo} {alt} />
 			<span class={spanClass}>{name}</span>
 		</a>
-		<button
-			on:click={handleClickbtn}
-			type="button"
-			class={buttonClass}
-			aria-controls="mobile-menu-2"
-			aria-expanded="false"
-		>
+		<button on:click={handleClickbtn} type="button" class={buttonClass} aria-controls="mobile-menu-2" aria-expanded="false">
 			<span class="sr-only">Open main menu</span>
-			<svg
-				class="w-6 h-6"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-					clip-rule="evenodd"
-				/></svg
-			>
-			<svg
-				class="hidden w-6 h-6"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-					clip-rule="evenodd"
-				/></svg
-			>
+			<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg>
+			<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
 		</button>
 		<div class:hidden={barHidden} class="hidden w-full md:block md:w-auto" id="mobile-menu">
 			<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
 				{#each menus as { name, href, rel }}
 					<li>
-						<a class:active={$page.url.pathname === href} {href} {rel} class={liLinkClass}>{name}</a
-						>
+						<a class:active={$page.url.pathname === href} {href} {rel} class={liLinkClass}>{name}</a>
 					</li>
 				{/each}
 			</ul>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.12.5",
+  "version": "0.13.3",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -12,7 +12,7 @@
   "homepage": "https://github.com/shinokada/flowbite-svelte",
   "license": "MIT",
   "devDependencies": {
-    "@codewithshin/svelte-sidebar": "^0.4.2",
+    "@codewithshin/svelte-sidebar": "^0.4.5",
     "@codewithshin/svelte-simpleicons": "^0.2.2",
     "@codewithshin/svelte-utterances": "^0.1.2",
     "@playwright/test": "^1.19.1",
@@ -30,7 +30,6 @@
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.5.0",
     "prism-themes": "^1.9.0",
-    "prismjs": "^1.27.0",
     "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
     "svelte-preprocess": "^4.10.1",
@@ -137,6 +136,9 @@
     "./spinners/Spinner.svelte": "./spinners/Spinner.svelte",
     "./spinners/SpinnerButton.svelte": "./spinners/SpinnerButton.svelte",
     "./tables/Table.svelte": "./tables/Table.svelte",
+    "./tables/TableCheckbox.svelte": "./tables/TableCheckbox.svelte",
+    "./tables/TableCheckboxRow.svelte": "./tables/TableCheckboxRow.svelte",
+    "./tables/TableDefaultRow.svelte": "./tables/TableDefaultRow.svelte",
     "./tabs/DefaultTabs.svelte": "./tabs/DefaultTabs.svelte",
     "./tabs/FullWidthTabs.svelte": "./tabs/FullWidthTabs.svelte",
     "./tabs/IconTabs.svelte": "./tabs/IconTabs.svelte",
@@ -158,7 +160,8 @@
     "./toasts/Toast.svelte": "./toasts/Toast.svelte",
     "./tooltips/LightTooltip.svelte": "./tooltips/LightTooltip.svelte",
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
-    "./types": "./types.js"
+    "./types": "./types.js",
+    "./utils/generateId": "./utils/generateId.js"
   },
   "svelte": "./index.js"
 }

package/paginations/Next.svelte

@@ -13,16 +13,6 @@ if (!icon) {
 <a href="/" on:click|preventDefault={next} class={nextClass}>
 	Next
 	{#if icon}
-		<svg
-			class="ml-2 w-5 h-5"
-			fill="currentColor"
-			viewBox="0 0 20 20"
-			xmlns="http://www.w3.org/2000/svg"
-			><path
-				fill-rule="evenodd"
-				d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
-				clip-rule="evenodd"
-			/></svg
-		>
+		<svg class="ml-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
 	{/if}
 </a>

package/paginations/Pagination.svelte

@@ -22,17 +22,7 @@ export let iconNextClass = 'block py-2 px-3 leading-tight text-gray-500 bg-white
 			{#if icon}
 				<a href="/" on:click|preventDefault={previous} class={iconPreviousClass}>
 					<span class="sr-only">Previous</span>
-					<svg
-						class="w-5 h-5"
-						fill="currentColor"
-						viewBox="0 0 20 20"
-						xmlns="http://www.w3.org/2000/svg"
-						><path
-							fill-rule="evenodd"
-							d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-							clip-rule="evenodd"
-						/></svg
-					>
+					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
 				</a>
 			{:else}
 				<a href="/" on:click|preventDefault={previous} class={previousClass}>Previous</a>
@@ -47,17 +37,7 @@ export let iconNextClass = 'block py-2 px-3 leading-tight text-gray-500 bg-white
 			{#if icon}
 				<a href="/" on:click|preventDefault={next} class={iconNextClass}>
 					<span class="sr-only">Next</span>
-					<svg
-						class="w-5 h-5"
-						fill="currentColor"
-						viewBox="0 0 20 20"
-						xmlns="http://www.w3.org/2000/svg"
-						><path
-							fill-rule="evenodd"
-							d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-							clip-rule="evenodd"
-						/></svg
-					>
+					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg>
 				</a>
 			{:else}
 				<a href="/" on:click|preventDefault={next} class={nextClass}>Next</a>

package/paginations/Previous.svelte

@@ -12,17 +12,7 @@ if (icon) {
 
 <a href="/" on:click|preventDefault={previous} class={previousClass}>
 	{#if icon}
-		<svg
-			class="mr-2 w-5 h-5"
-			fill="currentColor"
-			viewBox="0 0 20 20"
-			xmlns="http://www.w3.org/2000/svg"
-			><path
-				fill-rule="evenodd"
-				d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
-				clip-rule="evenodd"
-			/></svg
-		>
+		<svg class="mr-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" /></svg>
 	{/if}
 	Previous
 </a>

package/progressbars/Progressbar.svelte

@@ -8,25 +8,25 @@ if (color === 'blue') {
     barColor = 'bg-blue-600';
 }
 else if (color === 'gray') {
-    barColor = 'bg-gray-600';
+    barColor = 'bg-gray-600 dark:bg-gray-300';
 }
 else if (color === 'red') {
-    barColor = 'bg-red-600';
+    barColor = 'bg-red-600 dark:bg-red-500';
 }
 else if (color === 'green') {
-    barColor = 'bg-green-600';
+    barColor = 'bg-green-600 dark:bg-green-500';
 }
 else if (color === 'yellow') {
-    barColor = 'bg-yellow-600';
+    barColor = 'bg-yellow-400 ';
 }
 else if (color === 'purple') {
-    barColor = 'bg-purple-600';
+    barColor = 'bg-purple-600 dark:bg-purple-500';
 }
 else if (color === 'indigo') {
-    barColor = 'bg-indigo-600';
+    barColor = 'bg-indigo-600 dark:bg-indigo-500';
 }
 else {
-    barColor = 'bg-blue-600';
+    barColor = 'bg-blue-600 dark:bg-blue-500';
 }
 </script>
 
@@ -38,10 +38,7 @@ else {
 {/if}
 <div class="w-full bg-gray-200 rounded-full {size} dark:bg-gray-700">
 	{#if labelInside}
-		<div
-			class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
-			style="width: {progress}%"
-		>
+		<div class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full" style="width: {progress}%">
 			{progress}%
 		</div>
 	{:else}

package/progressbars/Progressbar.svelte.d.ts

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Colors } from '../types';
 declare const __propDef: {
     props: {
         progress?: string;
         size?: string;
         labelInside?: boolean;
         labelOutside?: string;
-        color?: string;
+        color?: Colors;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/spinners/Spinner.svelte

@@ -31,17 +31,8 @@ else {
 
 {#if align}
 	<div class={align}>
-		<svg
-			role="status"
-			class="inline mr-2 {size} {bg} animate-spin dark:text-gray-600 {colorClass}"
-			viewBox="0 0 100 101"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-				fill="currentColor"
-			/>
+		<svg role="status" class="inline mr-2 {size} {bg} animate-spin dark:text-gray-600 {colorClass}" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor" />
 			<path
 				d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
 				fill="currentFill"
@@ -49,17 +40,8 @@ else {
 		</svg>
 	</div>
 {:else}
-	<svg
-		role="status"
-		class="inline mr-2 {size} {bg} animate-spin dark:text-gray-600 {colorClass}"
-		viewBox="0 0 100 101"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path
-			d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-			fill="currentColor"
-		/>
+	<svg role="status" class="inline mr-2 {size} {bg} animate-spin dark:text-gray-600 {colorClass}" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor" />
 		<path
 			d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
 			fill="currentFill"

package/tables/Table.svelte

@@ -1,4 +1,22 @@
-<script>
-  export let header = ["Name", "Color", "Category", "Price", "Edit"];
-  export let body = ["Apple MacBook Pro 17", "Silver", "Laptop", "$2222", "/"];
+<script >export let header;
+export let divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg';
+export let tableClass = 'w-full text-sm text-left text-gray-500 dark:text-gray-400';
+export let theadClass = 'text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400';
 </script>
+
+<div class={divClass}>
+  <table class={tableClass}>
+    <thead class={theadClass}>
+      <tr>
+        {#each header as column}
+          <th scope="col" class="px-6 py-3">
+            {column}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      <slot />
+    </tbody>
+  </table>
+</div>