flowbite-svelte 0.8.8 → 0.9.0

package/README.md

@@ -18,7 +18,11 @@
 
 [Badges](https://flowbite-svelte.vercel.app/badges)
 
-## Button component
+## Button group compnents
+
+[Button group](https://flowbite-svelte.vercel.app/button-groups)
+
+## Button components
 
 [Buttons](https://flowbite-svelte.vercel.app/buttons)
 
@@ -34,6 +38,10 @@
 
 [Dropdowns](https://flowbite-svelte.vercel.app/dropdowns)
 
+## Footer
+
+[Footer](https://flowbite-svelte.vercel.app/footer)
+
 ## Icons
 
 [Icons](https://flowbite-svelte.vercel.app/icons)

package/alerts/Alert.svelte

@@ -1,111 +1,105 @@
-<script>
-  import Button from "../buttons/Button.svelte";
-
-  // use blue (default), red, yellow, purple, green, indigo, gray, (no pink)
-  export let color = "blue";
-  export let alertId = "alert-1";
-  export let closeBtn = false;
-
-  let hidden = false;
-  const handleHide = () => {
+<script >// use blue (default), red, yellow, purple, green, indigo, gray, (no pink)
+export let color = 'blue';
+export let alertId = 'alert-1';
+export let closeBtn = false;
+let hidden = false;
+const handleHide = () => {
     hidden = !hidden;
-  };
-  let divClass;
-  let svgClass;
-  let slotClass;
-  let buttonClass;
-
-  if (color === "blue") {
-    divClass = "flex p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200";
-    svgClass = "flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800";
-    slotClass = "ml-3 text-sm font-medium text-blue-700 dark:text-blue-800";
+};
+let divClass;
+let svgClass;
+let slotClass;
+let buttonClass;
+if (color === 'blue') {
+    divClass = 'flex p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200';
+    svgClass = 'flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800';
+    slotClass = 'ml-3 text-sm font-medium text-blue-700 dark:text-blue-800';
     buttonClass =
-      "ml-auto -mx-1.5 -my-1.5 bg-blue-100 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300";
-  } else if (color === "gray") {
-    divClass = "flex p-4 mb-4 bg-gray-100 rounded-lg dark:bg-gray-200";
-    svgClass = "flex-shrink-0 w-5 h-5 text-gray-700 dark:text-gray-800";
-    slotClass = "ml-3 text-sm font-medium text-gray-700 dark:text-gray-800";
+        'ml-auto -mx-1.5 -my-1.5 bg-blue-100 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300';
+}
+else if (color === 'gray') {
+    divClass = 'flex p-4 mb-4 bg-gray-100 rounded-lg dark:bg-gray-200';
+    svgClass = 'flex-shrink-0 w-5 h-5 text-gray-700 dark:text-gray-800';
+    slotClass = 'ml-3 text-sm font-medium text-gray-700 dark:text-gray-800';
     buttonClass =
-      "ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300";
-  } else if (color === "red") {
-    divClass = "flex p-4 mb-4 bg-red-100 rounded-lg dark:bg-red-200";
-    svgClass = "flex-shrink-0 w-5 h-5 text-red-700 dark:text-red-800";
-    slotClass = "ml-3 text-sm font-medium text-red-700 dark:text-red-800";
+        'ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300';
+}
+else if (color === 'red') {
+    divClass = 'flex p-4 mb-4 bg-red-100 rounded-lg dark:bg-red-200';
+    svgClass = 'flex-shrink-0 w-5 h-5 text-red-700 dark:text-red-800';
+    slotClass = 'ml-3 text-sm font-medium text-red-700 dark:text-red-800';
     buttonClass =
-      "ml-auto -mx-1.5 -my-1.5 bg-red-100 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300";
-  } else if (color === "yellow") {
-    divClass = "flex p-4 mb-4 bg-yellow-100 rounded-lg dark:bg-yellow-200";
-    svgClass = "flex-shrink-0 w-5 h-5 text-yellow-700 dark:text-yellow-800";
-    slotClass = "ml-3 text-sm font-medium text-yellow-700 dark:text-yellow-800";
+        'ml-auto -mx-1.5 -my-1.5 bg-red-100 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300';
+}
+else if (color === 'yellow') {
+    divClass = 'flex p-4 mb-4 bg-yellow-100 rounded-lg dark:bg-yellow-200';
+    svgClass = 'flex-shrink-0 w-5 h-5 text-yellow-700 dark:text-yellow-800';
+    slotClass = 'ml-3 text-sm font-medium text-yellow-700 dark:text-yellow-800';
     buttonClass =
-      "ml-auto -mx-1.5 -my-1.5 bg-yellow-100 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex h-8 w-8 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300";
-  } else if (color === "green") {
-    divClass = "flex p-4 mb-4 bg-green-100 rounded-lg dark:bg-green-200";
-    svgClass = "flex-shrink-0 w-5 h-5 text-green-700 dark:text-green-800";
-    slotClass = "ml-3 text-sm font-medium text-green-700 dark:text-green-800";
+        'ml-auto -mx-1.5 -my-1.5 bg-yellow-100 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex h-8 w-8 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300';
+}
+else if (color === 'green') {
+    divClass = 'flex p-4 mb-4 bg-green-100 rounded-lg dark:bg-green-200';
+    svgClass = 'flex-shrink-0 w-5 h-5 text-green-700 dark:text-green-800';
+    slotClass = 'ml-3 text-sm font-medium text-green-700 dark:text-green-800';
     buttonClass =
-      "ml-auto -mx-1.5 -my-1.5 bg-green-100 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300";
-  } else if (color === "indigo") {
-    divClass = "flex p-4 mb-4 bg-indigo-100 rounded-lg dark:bg-indigo-200";
-    svgClass = "flex-shrink-0 w-5 h-5 text-indigo-700 dark:text-indigo-800";
-    slotClass = "ml-3 text-sm font-medium text-indigo-700 dark:text-indigo-800";
+        'ml-auto -mx-1.5 -my-1.5 bg-green-100 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300';
+}
+else if (color === 'indigo') {
+    divClass = 'flex p-4 mb-4 bg-indigo-100 rounded-lg dark:bg-indigo-200';
+    svgClass = 'flex-shrink-0 w-5 h-5 text-indigo-700 dark:text-indigo-800';
+    slotClass = 'ml-3 text-sm font-medium text-indigo-700 dark:text-indigo-800';
     buttonClass =
-      "ml-auto -mx-1.5 -my-1.5 bg-indigo-100 text-indigo-500 rounded-lg focus:ring-2 focus:ring-indigo-400 p-1.5 hover:bg-indigo-200 inline-flex h-8 w-8 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300";
-  } else if (color === "purple") {
-    divClass = "flex p-4 mb-4 bg-purple-100 rounded-lg dark:bg-purple-200";
-    svgClass = "flex-shrink-0 w-5 h-5 text-purple-700 dark:text-purple-800";
-    slotClass = "ml-3 text-sm font-medium text-purple-700 dark:text-purple-800";
+        'ml-auto -mx-1.5 -my-1.5 bg-indigo-100 text-indigo-500 rounded-lg focus:ring-2 focus:ring-indigo-400 p-1.5 hover:bg-indigo-200 inline-flex h-8 w-8 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300';
+}
+else if (color === 'purple') {
+    divClass = 'flex p-4 mb-4 bg-purple-100 rounded-lg dark:bg-purple-200';
+    svgClass = 'flex-shrink-0 w-5 h-5 text-purple-700 dark:text-purple-800';
+    slotClass = 'ml-3 text-sm font-medium text-purple-700 dark:text-purple-800';
     buttonClass =
-      "ml-auto -mx-1.5 -my-1.5 bg-purple-100 text-purple-500 rounded-lg focus:ring-2 focus:ring-purple-400 p-1.5 hover:bg-purple-200 inline-flex h-8 w-8 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300";
-  } else if (color === "pink") {
-    divClass = "flex p-4 mb-4 bg-pink-100 rounded-lg dark:bg-pink-200";
-    svgClass = "flex-shrink-0 w-5 h-5 text-pink-700 dark:text-pink-800";
-    slotClass = "ml-3 text-sm font-medium text-pink-700 dark:text-pink-800";
+        'ml-auto -mx-1.5 -my-1.5 bg-purple-100 text-purple-500 rounded-lg focus:ring-2 focus:ring-purple-400 p-1.5 hover:bg-purple-200 inline-flex h-8 w-8 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300';
+}
+else if (color === 'pink') {
+    divClass = 'flex p-4 mb-4 bg-pink-100 rounded-lg dark:bg-pink-200';
+    svgClass = 'flex-shrink-0 w-5 h-5 text-pink-700 dark:text-pink-800';
+    slotClass = 'ml-3 text-sm font-medium text-pink-700 dark:text-pink-800';
     buttonClass =
-      "ml-auto -mx-1.5 -my-1.5 bg-pink-100 text-pink-500 rounded-lg focus:ring-2 focus:ring-pink-400 p-1.5 hover:bg-pink-200 inline-flex h-8 w-8 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300";
-  } else {
-    divClass = "flex p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200";
-    svgClass = "flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800";
-    slotClass = "ml-3 text-sm font-medium text-blue-700 dark:text-blue-800";
+        'ml-auto -mx-1.5 -my-1.5 bg-pink-100 text-pink-500 rounded-lg focus:ring-2 focus:ring-pink-400 p-1.5 hover:bg-pink-200 inline-flex h-8 w-8 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300';
+}
+else {
+    divClass = 'flex p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200';
+    svgClass = 'flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800';
+    slotClass = 'ml-3 text-sm font-medium text-blue-700 dark:text-blue-800';
     buttonClass =
-      "ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300";
-  }
+        'ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300';
+}
 </script>
 
 <div id={alertId} class:hidden class={divClass} role="alert">
-  <svg
-    class={svgClass}
-    fill="currentColor"
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-    ><path
-      fill-rule="evenodd"
-      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-      clip-rule="evenodd"
-    /></svg
-  >
-  <div class={slotClass}>
-    <slot />
-  </div>
-  {#if closeBtn}
-    <button
-      on:click={handleHide}
-      type="button"
-      class={buttonClass}
-      aria-label="Close"
-    >
-      <span class="sr-only">Close</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="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>
-  {/if}
+	<svg class={svgClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+		><path
+			fill-rule="evenodd"
+			d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+			clip-rule="evenodd"
+		/></svg
+	>
+	<div class={slotClass}>
+		<slot />
+	</div>
+	{#if closeBtn}
+		<button on:click={handleHide} type="button" class={buttonClass} aria-label="Close">
+			<span class="sr-only">Close</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="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>
+	{/if}
 </div>

package/alerts/Alert.svelte.d.ts

@@ -1,19 +1,3 @@
-/** @typedef {typeof __propDef.props}  AlertProps */
-/** @typedef {typeof __propDef.events}  AlertEvents */
-/** @typedef {typeof __propDef.slots}  AlertSlots */
-export default class Alert extends SvelteComponentTyped<{
-    color?: string;
-    alertId?: string;
-    closeBtn?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type AlertProps = typeof __propDef.props;
-export type AlertEvents = typeof __propDef.events;
-export type AlertSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
@@ -28,4 +12,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export declare type AlertProps = typeof __propDef.props;
+export declare type AlertEvents = typeof __propDef.events;
+export declare type AlertSlots = typeof __propDef.slots;
+export default class Alert extends SvelteComponentTyped<AlertProps, AlertEvents, AlertSlots> {
+}
 export {};

package/alerts/BorderAlert.svelte

@@ -1,118 +1,105 @@
-<script>
-  // use blue (default), red, green, yellow, and gray
-  export let color = "blue";
-  export let alertId = "alert-border-1";
-  export let closeBtn = false;
-  let hidden = false;
-  const handleHide = () => {
+<script >// use blue (default), red, green, yellow, and gray
+export let color = 'blue';
+export let alertId = 'alert-border-1';
+export let closeBtn = false;
+let hidden = false;
+const handleHide = () => {
     hidden = !hidden;
-  };
-
-  let divClass;
-  let svgClass;
-  let slotClass;
-  let buttonClass;
-
-  if (color === "blue") {
-    divClass =
-      "flex p-4 mb-4 bg-blue-100 border-t-4 border-blue-500 dark:bg-blue-200";
-    svgClass = "flex-shrink-0 w-5 h-5 text-blue-700";
-    slotClass = "ml-3 text-sm font-medium text-blue-700";
+};
+let divClass;
+let svgClass;
+let slotClass;
+let buttonClass;
+if (color === 'blue') {
+    divClass = 'flex p-4 mb-4 bg-blue-100 border-t-4 border-blue-500 dark:bg-blue-200';
+    svgClass = 'flex-shrink-0 w-5 h-5 text-blue-700';
+    slotClass = 'ml-3 text-sm font-medium text-blue-700';
     buttonClass =
-      "ml-auto -mx-1.5 -my-1.5 bg-blue-100 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300";
-  } else if (color === "gray") {
-    divClass =
-      "flex p-4 mb-4 bg-gray-100 border-t-4 border-gray-500 dark:bg-gray-200";
-    svgClass = "flex-shrink-0 w-5 h-5 text-gray-700";
-    slotClass = "ml-3 text-sm font-medium text-gray-700";
+        'ml-auto -mx-1.5 -my-1.5 bg-blue-100 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300';
+}
+else if (color === 'gray') {
+    divClass = 'flex p-4 mb-4 bg-gray-100 border-t-4 border-gray-500 dark:bg-gray-200';
+    svgClass = 'flex-shrink-0 w-5 h-5 text-gray-700';
+    slotClass = 'ml-3 text-sm font-medium text-gray-700';
     buttonClass =
-      "ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300";
-  } else if (color === "red") {
-    divClass =
-      "flex p-4 mb-4 bg-red-100 border-t-4 border-red-500 dark:bg-red-200";
-    svgClass = "flex-shrink-0 w-5 h-5 text-red-700";
-    slotClass = "ml-3 text-sm font-medium text-red-700";
+        'ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300';
+}
+else if (color === 'red') {
+    divClass = 'flex p-4 mb-4 bg-red-100 border-t-4 border-red-500 dark:bg-red-200';
+    svgClass = 'flex-shrink-0 w-5 h-5 text-red-700';
+    slotClass = 'ml-3 text-sm font-medium text-red-700';
     buttonClass =
-      "ml-auto -mx-1.5 -my-1.5 bg-red-100 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300";
-  } else if (color === "yellow") {
-    divClass =
-      "flex p-4 mb-4 bg-yellow-100 border-t-4 border-yellow-500 dark:bg-yellow-200";
-    svgClass = "flex-shrink-0 w-5 h-5 text-yellow-700";
-    slotClass = "ml-3 text-sm font-medium text-yellow-700";
+        'ml-auto -mx-1.5 -my-1.5 bg-red-100 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300';
+}
+else if (color === 'yellow') {
+    divClass = 'flex p-4 mb-4 bg-yellow-100 border-t-4 border-yellow-500 dark:bg-yellow-200';
+    svgClass = 'flex-shrink-0 w-5 h-5 text-yellow-700';
+    slotClass = 'ml-3 text-sm font-medium text-yellow-700';
     buttonClass =
-      "ml-auto -mx-1.5 -my-1.5 bg-yellow-100 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex h-8 w-8 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300";
-  } else if (color === "green") {
-    divClass =
-      "flex p-4 mb-4 bg-green-100 border-t-4 border-green-500 dark:bg-green-200";
-    svgClass = "flex-shrink-0 w-5 h-5 text-green-700";
-    slotClass = "ml-3 text-sm font-medium text-green-700";
+        'ml-auto -mx-1.5 -my-1.5 bg-yellow-100 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex h-8 w-8 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300';
+}
+else if (color === 'green') {
+    divClass = 'flex p-4 mb-4 bg-green-100 border-t-4 border-green-500 dark:bg-green-200';
+    svgClass = 'flex-shrink-0 w-5 h-5 text-green-700';
+    slotClass = 'ml-3 text-sm font-medium text-green-700';
     buttonClass =
-      "ml-auto -mx-1.5 -my-1.5 bg-green-100 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300";
-  } else if (color === "indigo") {
-    divClass =
-      "flex p-4 mb-4 bg-indigo-100 border-t-4 border-indigo-500 dark:bg-indigo-200";
-    svgClass = "flex-shrink-0 w-5 h-5 text-indigo-700";
-    slotClass = "ml-3 text-sm font-medium text-indigo-700";
+        'ml-auto -mx-1.5 -my-1.5 bg-green-100 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300';
+}
+else if (color === 'indigo') {
+    divClass = 'flex p-4 mb-4 bg-indigo-100 border-t-4 border-indigo-500 dark:bg-indigo-200';
+    svgClass = 'flex-shrink-0 w-5 h-5 text-indigo-700';
+    slotClass = 'ml-3 text-sm font-medium text-indigo-700';
     buttonClass =
-      "ml-auto -mx-1.5 -my-1.5 bg-indigo-100 text-indigo-500 rounded-lg focus:ring-2 focus:ring-indigo-400 p-1.5 hover:bg-indigo-200 inline-flex h-8 w-8 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300";
-  } else if (color === "purple") {
-    divClass =
-      "flex p-4 mb-4 bg-purple-100 border-t-4 border-purple-500 dark:bg-purple-200";
-    svgClass = "flex-shrink-0 w-5 h-5 text-purple-700";
-    slotClass = "ml-3 text-sm font-medium text-purple-700";
+        'ml-auto -mx-1.5 -my-1.5 bg-indigo-100 text-indigo-500 rounded-lg focus:ring-2 focus:ring-indigo-400 p-1.5 hover:bg-indigo-200 inline-flex h-8 w-8 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300';
+}
+else if (color === 'purple') {
+    divClass = 'flex p-4 mb-4 bg-purple-100 border-t-4 border-purple-500 dark:bg-purple-200';
+    svgClass = 'flex-shrink-0 w-5 h-5 text-purple-700';
+    slotClass = 'ml-3 text-sm font-medium text-purple-700';
     buttonClass =
-      "ml-auto -mx-1.5 -my-1.5 bg-purple-100 text-purple-500 rounded-lg focus:ring-2 focus:ring-purple-400 p-1.5 hover:bg-purple-200 inline-flex h-8 w-8 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300";
-  } else if (color === "pink") {
-    divClass =
-      "flex p-4 mb-4 bg-pink-100 border-t-4 border-pink-500 dark:bg-pink-200";
-    svgClass = "flex-shrink-0 w-5 h-5 text-pink-700";
-    slotClass = "ml-3 text-sm font-medium text-pink-700";
+        'ml-auto -mx-1.5 -my-1.5 bg-purple-100 text-purple-500 rounded-lg focus:ring-2 focus:ring-purple-400 p-1.5 hover:bg-purple-200 inline-flex h-8 w-8 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300';
+}
+else if (color === 'pink') {
+    divClass = 'flex p-4 mb-4 bg-pink-100 border-t-4 border-pink-500 dark:bg-pink-200';
+    svgClass = 'flex-shrink-0 w-5 h-5 text-pink-700';
+    slotClass = 'ml-3 text-sm font-medium text-pink-700';
     buttonClass =
-      "ml-auto -mx-1.5 -my-1.5 bg-pink-100 text-pink-500 rounded-lg focus:ring-2 focus:ring-pink-400 p-1.5 hover:bg-pink-200 inline-flex h-8 w-8 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300";
-  } else {
-    divClass =
-      "flex p-4 mb-4 bg-blue-100 border-t-4 border-blue-500 dark:bg-blue-200";
-    svgClass = "flex-shrink-0 w-5 h-5 text-blue-700";
-    slotClass = "ml-3 text-sm font-medium text-blue-700";
+        'ml-auto -mx-1.5 -my-1.5 bg-pink-100 text-pink-500 rounded-lg focus:ring-2 focus:ring-pink-400 p-1.5 hover:bg-pink-200 inline-flex h-8 w-8 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300';
+}
+else {
+    divClass = 'flex p-4 mb-4 bg-blue-100 border-t-4 border-blue-500 dark:bg-blue-200';
+    svgClass = 'flex-shrink-0 w-5 h-5 text-blue-700';
+    slotClass = 'ml-3 text-sm font-medium text-blue-700';
     buttonClass =
-      "ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300";
-  }
+        'ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300';
+}
 </script>
 
 <div id={alertId} class:hidden class={divClass} role="alert">
-  <svg
-    class={svgClass}
-    fill="currentColor"
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-    ><path
-      fill-rule="evenodd"
-      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-      clip-rule="evenodd"
-    /></svg
-  >
-  <div class={slotClass}>
-    <slot />
-  </div>
-  {#if closeBtn}
-    <button
-      on:click={handleHide}
-      type="button"
-      class={buttonClass}
-      aria-label="Close"
-    >
-      <span class="sr-only">Dismiss</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="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>
-  {/if}
+	<svg class={svgClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+		><path
+			fill-rule="evenodd"
+			d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+			clip-rule="evenodd"
+		/></svg
+	>
+	<div class={slotClass}>
+		<slot />
+	</div>
+	{#if closeBtn}
+		<button on:click={handleHide} type="button" class={buttonClass} aria-label="Close">
+			<span class="sr-only">Dismiss</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="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>
+	{/if}
 </div>

package/alerts/BorderAlert.svelte.d.ts

@@ -1,19 +1,3 @@
-/** @typedef {typeof __propDef.props}  BorderAlertProps */
-/** @typedef {typeof __propDef.events}  BorderAlertEvents */
-/** @typedef {typeof __propDef.slots}  BorderAlertSlots */
-export default class BorderAlert extends SvelteComponentTyped<{
-    color?: string;
-    alertId?: string;
-    closeBtn?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type BorderAlertProps = typeof __propDef.props;
-export type BorderAlertEvents = typeof __propDef.events;
-export type BorderAlertSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
@@ -28,4 +12,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export declare type BorderAlertProps = typeof __propDef.props;
+export declare type BorderAlertEvents = typeof __propDef.events;
+export declare type BorderAlertSlots = typeof __propDef.slots;
+export default class BorderAlert extends SvelteComponentTyped<BorderAlertProps, BorderAlertEvents, BorderAlertSlots> {
+}
 export {};

package/alerts/InfoAlert.svelte

@@ -1,125 +1,121 @@
-<script>
-  // use blue (default), red, green, yellow, and gray
-  export let color = "blue";
-  export let alertId = "alert-additional-content-1";
-  export let infoLink = false;
-  export let closeBtn = false;
-  let hidden = false;
-  const handleHide = () => {
+<script >// use blue (default), red, green, yellow, and gray
+export let color = 'blue';
+export let alertId = 'alert-additional-content-1';
+export let infoLink = undefined;
+export let closeBtn = false;
+let hidden = false;
+const handleHide = () => {
     hidden = !hidden;
-  };
-
-  let divClass;
-  let svgClass;
-  let slotClass;
-  let buttonClass;
-
-  if (color === "blue") {
-    divClass = "p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200";
-    svgClass = "mr-2 w-5 h-5 text-blue-700 dark:text-blue-800";
-    slotClass = "mt-2 mb-4 text-sm text-blue-700 dark:text-blue-800";
+};
+let divClass;
+let svgClass;
+let slotClass;
+let buttonClass;
+if (color === 'blue') {
+    divClass = 'p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200';
+    svgClass = 'mr-2 w-5 h-5 text-blue-700 dark:text-blue-800';
+    slotClass = 'mt-2 mb-4 text-sm text-blue-700 dark:text-blue-800';
     buttonClass =
-      "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-800 dark:hover:bg-blue-900";
-  } else if (color === "gray") {
-    divClass = "p-4 mb-4 bg-gray-100 rounded-lg dark:bg-gray-200";
-    svgClass = "mr-2 w-5 h-5 text-gray-700 dark:text-gray-800";
-    slotClass = "mt-2 mb-4 text-sm text-gray-700 dark:text-gray-800";
+        'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-800 dark:hover:bg-blue-900';
+}
+else if (color === 'gray') {
+    divClass = 'p-4 mb-4 bg-gray-100 rounded-lg dark:bg-gray-200';
+    svgClass = 'mr-2 w-5 h-5 text-gray-700 dark:text-gray-800';
+    slotClass = 'mt-2 mb-4 text-sm text-gray-700 dark:text-gray-800';
     buttonClass =
-      "text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-gray-800 dark:hover:bg-gray-900";
-  } else if (color === "red") {
-    divClass = "p-4 mb-4 bg-red-100 rounded-lg dark:bg-red-200";
-    svgClass = "mr-2 w-5 h-5 text-red-700 dark:text-red-800";
-    slotClass = "mt-2 mb-4 text-sm text-red-700 dark:text-red-800";
+        'text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-gray-800 dark:hover:bg-gray-900';
+}
+else if (color === 'red') {
+    divClass = 'p-4 mb-4 bg-red-100 rounded-lg dark:bg-red-200';
+    svgClass = 'mr-2 w-5 h-5 text-red-700 dark:text-red-800';
+    slotClass = 'mt-2 mb-4 text-sm text-red-700 dark:text-red-800';
     buttonClass =
-      "text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-red-800 dark:hover:bg-red-900";
-  } else if (color === "yellow") {
-    divClass = "p-4 mb-4 bg-yellow-100 rounded-lg dark:bg-yellow-200";
-    svgClass = "mr-2 w-5 h-5 text-yellow-700 dark:text-yellow-800";
-    slotClass = "mt-2 mb-4 text-sm text-yellow-700 dark:text-yellow-800";
+        'text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-red-800 dark:hover:bg-red-900';
+}
+else if (color === 'yellow') {
+    divClass = 'p-4 mb-4 bg-yellow-100 rounded-lg dark:bg-yellow-200';
+    svgClass = 'mr-2 w-5 h-5 text-yellow-700 dark:text-yellow-800';
+    slotClass = 'mt-2 mb-4 text-sm text-yellow-700 dark:text-yellow-800';
     buttonClass =
-      "text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-yellow-800 dark:hover:bg-yellow-900";
-  } else if (color === "green") {
-    divClass = "p-4 mb-4 bg-green-100 rounded-lg dark:bg-green-200";
-    svgClass = "mr-2 w-5 h-5 text-green-700 dark:text-green-800";
-    slotClass = "mt-2 mb-4 text-sm text-green-700 dark:text-green-800";
+        'text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-yellow-800 dark:hover:bg-yellow-900';
+}
+else if (color === 'green') {
+    divClass = 'p-4 mb-4 bg-green-100 rounded-lg dark:bg-green-200';
+    svgClass = 'mr-2 w-5 h-5 text-green-700 dark:text-green-800';
+    slotClass = 'mt-2 mb-4 text-sm text-green-700 dark:text-green-800';
     buttonClass =
-      "text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-green-800 dark:hover:bg-green-900";
-  } else if (color === "indigo") {
-    divClass = "p-4 mb-4 bg-indigo-100 rounded-lg dark:bg-indigo-200";
-    svgClass = "mr-2 w-5 h-5 text-indigo-700 dark:text-indigo-800";
-    slotClass = "mt-2 mb-4 text-sm text-indigo-700 dark:text-indigo-800";
+        'text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-green-800 dark:hover:bg-green-900';
+}
+else if (color === 'indigo') {
+    divClass = 'p-4 mb-4 bg-indigo-100 rounded-lg dark:bg-indigo-200';
+    svgClass = 'mr-2 w-5 h-5 text-indigo-700 dark:text-indigo-800';
+    slotClass = 'mt-2 mb-4 text-sm text-indigo-700 dark:text-indigo-800';
     buttonClass =
-      "text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-indigo-800 dark:hover:bg-indigo-900";
-  } else if (color === "purple") {
-    divClass = "p-4 mb-4 bg-purple-100 rounded-lg dark:bg-purple-200";
-    svgClass = "mr-2 w-5 h-5 text-purple-700 dark:text-purple-800";
-    slotClass = "mt-2 mb-4 text-sm text-purple-700 dark:text-purple-800";
+        'text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-indigo-800 dark:hover:bg-indigo-900';
+}
+else if (color === 'purple') {
+    divClass = 'p-4 mb-4 bg-purple-100 rounded-lg dark:bg-purple-200';
+    svgClass = 'mr-2 w-5 h-5 text-purple-700 dark:text-purple-800';
+    slotClass = 'mt-2 mb-4 text-sm text-purple-700 dark:text-purple-800';
     buttonClass =
-      "text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-purple-800 dark:hover:bg-purple-900";
-  } else if (color === "pink") {
-    divClass = "p-4 mb-4 bg-pink-100 rounded-lg dark:bg-pink-200";
-    svgClass = "mr-2 w-5 h-5 text-pink-700 dark:text-pink-800";
-    slotClass = "mt-2 mb-4 text-sm text-pink-700 dark:text-pink-800";
+        'text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-purple-800 dark:hover:bg-purple-900';
+}
+else if (color === 'pink') {
+    divClass = 'p-4 mb-4 bg-pink-100 rounded-lg dark:bg-pink-200';
+    svgClass = 'mr-2 w-5 h-5 text-pink-700 dark:text-pink-800';
+    slotClass = 'mt-2 mb-4 text-sm text-pink-700 dark:text-pink-800';
     buttonClass =
-      "text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-pink-800 dark:hover:bg-pink-900";
-  } else {
-    divClass = "p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200";
-    svgClass = "mr-2 w-5 h-5 text-blue-700 dark:text-blue-800";
-    slotClass = "mt-2 mb-4 text-sm text-blue-700 dark:text-blue-800";
+        'text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-pink-800 dark:hover:bg-pink-900';
+}
+else {
+    divClass = 'p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200';
+    svgClass = 'mr-2 w-5 h-5 text-blue-700 dark:text-blue-800';
+    slotClass = 'mt-2 mb-4 text-sm text-blue-700 dark:text-blue-800';
     buttonClass =
-      "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-800 dark:hover:bg-blue-900";
-  }
+        'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-800 dark:hover:bg-blue-900';
+}
 </script>
 
 <div id={alertId} class:hidden class={divClass} role="alert">
-  <div class="flex items-center">
-    <svg
-      class={svgClass}
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-      ><path
-        fill-rule="evenodd"
-        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-        clip-rule="evenodd"
-      /></svg
-    >
-    <h3 class="text-lg font-medium text-{color}-700 dark:text-{color}-800">
-      <slot name="header">No header was provided</slot>
-    </h3>
-  </div>
-  <div class={slotClass}>
-    <slot>No content was provided.</slot>
-  </div>
-  <div class="flex">
-    {#if infoLink}
-      <button
-        type="button"
-        class="text-white bg-{color}-700 hover:bg-{color}-800 focus:ring-4 focus:ring-{color}-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-{color}-800 dark:hover:bg-{color}-900"
-      >
-        <svg
-          class="-ml-0.5 mr-2 h-4 w-4"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-          ><path d="M10 12a2 2 0 100-4 2 2 0 000 4z" /><path
-            fill-rule="evenodd"
-            d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
-            clip-rule="evenodd"
-          /></svg
-        >
-        <a href={infoLink} rel="external">View more</a>
-      </button>
-    {/if}
-    {#if closeBtn}
-      <button
-        on:click={handleHide}
-        type="button"
-        class="text-{color}-700 bg-transparent border border-{color}-700 hover:bg-{color}-800 hover:text-white focus:ring-4 focus:ring-{color}-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:border-{color}-800 dark:text-{color}-800 dark:hover:text-white"
-        aria-label="Close"
-      >
-        Dismiss
-      </button>
-    {/if}
-  </div>
+	<div class="flex items-center">
+		<svg class={svgClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+			><path
+				fill-rule="evenodd"
+				d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+				clip-rule="evenodd"
+			/></svg
+		>
+		<h3 class="text-lg font-medium text-{color}-700 dark:text-{color}-800">
+			<slot name="header">No header was provided</slot>
+		</h3>
+	</div>
+	<div class={slotClass}>
+		<slot>No content was provided.</slot>
+	</div>
+	<div class="flex">
+		{#if infoLink}
+			<button
+				type="button"
+				class="text-white bg-{color}-700 hover:bg-{color}-800 focus:ring-4 focus:ring-{color}-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-{color}-800 dark:hover:bg-{color}-900"
+			>
+				<svg
+					class="-ml-0.5 mr-2 h-4 w-4"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+					xmlns="http://www.w3.org/2000/svg"
+					><path d="M10 12a2 2 0 100-4 2 2 0 000 4z" /><path
+						fill-rule="evenodd"
+						d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
+						clip-rule="evenodd"
+					/></svg
+				>
+				<a href={infoLink} rel="external">View more</a>
+			</button>
+		{/if}
+		{#if closeBtn}
+			<button on:click={handleHide} type="button" class={buttonClass} aria-label="Close">
+				Dismiss
+			</button>
+		{/if}
+	</div>
 </div>

package/alerts/InfoAlert.svelte.d.ts

@@ -1,28 +1,10 @@
-/** @typedef {typeof __propDef.props}  InfoAlertProps */
-/** @typedef {typeof __propDef.events}  InfoAlertEvents */
-/** @typedef {typeof __propDef.slots}  InfoAlertSlots */
-export default class InfoAlert extends SvelteComponentTyped<{
-    color?: string;
-    alertId?: string;
-    closeBtn?: boolean;
-    infoLink?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    header: {};
-    default: {};
-}> {
-}
-export type InfoAlertProps = typeof __propDef.props;
-export type InfoAlertEvents = typeof __propDef.events;
-export type InfoAlertSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         color?: string;
         alertId?: string;
+        infoLink?: string;
         closeBtn?: boolean;
-        infoLink?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -32,4 +14,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export declare type InfoAlertProps = typeof __propDef.props;
+export declare type InfoAlertEvents = typeof __propDef.events;
+export declare type InfoAlertSlots = typeof __propDef.slots;
+export default class InfoAlert extends SvelteComponentTyped<InfoAlertProps, InfoAlertEvents, InfoAlertSlots> {
+}
 export {};

package/buttons/Button.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  ButtonEvents */
 /** @typedef {typeof __propDef.slots}  ButtonSlots */
 export default class Button extends SvelteComponentTyped<{
-    rounded?: boolean;
     textSize?: string;
     name?: string;
+    rounded?: boolean;
     type?: string;
 }, {
     click: MouseEvent;
@@ -18,9 +18,9 @@ export type ButtonSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        rounded?: boolean;
         textSize?: string;
         name?: string;
+        rounded?: boolean;
         type?: string;
     };
     events: {

package/dropdowns/DropdownDefault.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  DropdownDefaultEvents */
 /** @typedef {typeof __propDef.slots}  DropdownDefaultSlots */
 export default class DropdownDefault extends SvelteComponentTyped<{
-    rounded?: boolean;
     textSize?: string;
     color?: string;
+    rounded?: boolean;
     label?: string;
     items?: ({
         link: string;
@@ -27,9 +27,9 @@ export type DropdownDefaultSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        rounded?: boolean;
         textSize?: string;
         color?: string;
+        rounded?: boolean;
         label?: string;
         items?: ({
             link: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.8.8",
+  "version": "0.9.0",
   "description": "Flowbite components for Svelte",
   "author": {
     "name": "Shinichi Okada",
@@ -11,16 +11,27 @@
   "homepage": "https://github.com/shinokada/flowbite-svelte",
   "license": "MIT",
   "devDependencies": {
+    "@codewithshin/svelte-simpleicons": "^0.2.2",
+    "@playwright/test": "^1.19.1",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
+    "@typescript-eslint/eslint-plugin": "^5.10.1",
+    "@typescript-eslint/parser": "^5.10.1",
     "autoprefixer": "^10.4.2",
-    "flowbite-svelte": "^0.8.4",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-svelte3": "^3.2.1",
     "postcss": "^8.4.5",
     "postcss-load-config": "^3.1.1",
+    "prettier": "^2.5.1",
+    "prettier-plugin-svelte": "^2.5.0",
     "svelte": "^3.44.0",
-    "svelte-preprocess": "^4.10.2",
-    "svelte2tsx": "^0.4.14",
-    "tailwindcss": "^3.0.12"
+    "svelte-check": "^2.2.6",
+    "svelte-preprocess": "^4.10.1",
+    "svelte2tsx": "^0.5.5",
+    "tailwindcss": "^3.0.12",
+    "tslib": "^2.3.1",
+    "typescript": "~4.6.2"
   },
   "type": "module",
   "keywords": [
@@ -29,20 +40,26 @@
     "tailwindcss",
     "flowbite",
     "ui",
+    "accordion",
     "alert",
+    "badges",
     "buttons",
-    "modals",
     "cards",
+    "darkmode",
+    "footer",
+    "modals",
     "navbar",
-    "tabs"
+    "spinners",
+    "tabs",
+    "tooltip"
   ],
   "repository": {
     "type": "git",
     "url": "https://github.com/shinokada/flowbite-svelte"
   },
   "dependencies": {
-    "@codewithshin/svelte-heroicons": "^1.1.0",
-    "flowbite": "^1.3.2",
+    "@codewithshin/svelte-heroicons": "^1.1.3",
+    "flowbite": "^1.3.4",
     "svelte-collapse": "^0.0.4"
   },
   "exports": {