flowbite-svelte 0.9.0 → 0.9.3

package/accordions/AccordionDefault.svelte

@@ -1,26 +1,25 @@
-<script>
-  import { onDestroy } from "svelte";
-  import { setContext } from "svelte";
-  import { createEventDispatcher } from "svelte";
-  import { writable } from "svelte/store";
-  export let duration = 0.2;
-  export let easing = "ease";
-  export let id = null;
-  const dispatch = createEventDispatcher();
-  // create a store for the children to access
-  const store = writable({ id, duration, easing });
-  // when the store changes, update the id prop
-  const unsubscribe = store.subscribe((s) => {
+<script >import { onDestroy } from 'svelte';
+import { setContext } from 'svelte';
+import { createEventDispatcher } from 'svelte';
+import { writable } from 'svelte/store';
+export let duration = 0.2;
+export let easing = 'ease';
+export let id = undefined;
+const dispatch = createEventDispatcher();
+// create a store for the children to access
+const store = writable({ id, duration, easing });
+// when the store changes, update the id prop
+const unsubscribe = store.subscribe((s) => {
     id = s.id;
-    dispatch("change", { id });
-  });
-  // when the id prop changes, update the store
-  $: store.update((s) => Object.assign(s, { id }));
-  // make the store available to children
-  setContext("svelte-collapsible-accordion", store);
-  onDestroy(unsubscribe);
+    dispatch('change', { id });
+});
+// when the id prop changes, update the store
+$: store.update((s) => Object.assign(s, { id }));
+// make the store available to children
+setContext('svelte-collapsible-accordion', store);
+onDestroy(unsubscribe);
 </script>
 
 <div>
-  <slot />
+	<slot />
 </div>

package/accordions/AccordionDefault.svelte.d.ts

@@ -1,27 +1,9 @@
-/** @typedef {typeof __propDef.props}  AccordionDefaultProps */
-/** @typedef {typeof __propDef.events}  AccordionDefaultEvents */
-/** @typedef {typeof __propDef.slots}  AccordionDefaultSlots */
-export default class AccordionDefault extends SvelteComponentTyped<{
-    id?: any;
-    duration?: number;
-    easing?: string;
-}, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type AccordionDefaultProps = typeof __propDef.props;
-export type AccordionDefaultEvents = typeof __propDef.events;
-export type AccordionDefaultSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: any;
         duration?: number;
         easing?: string;
+        id?: number;
     };
     events: {
         change: CustomEvent<any>;
@@ -32,4 +14,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export declare type AccordionDefaultProps = typeof __propDef.props;
+export declare type AccordionDefaultEvents = typeof __propDef.events;
+export declare type AccordionDefaultSlots = typeof __propDef.slots;
+export default class AccordionDefault extends SvelteComponentTyped<AccordionDefaultProps, AccordionDefaultEvents, AccordionDefaultSlots> {
+}
 export {};

package/accordions/AccordionItem.svelte

@@ -1,44 +1,41 @@
-<script>
-  import { getContext } from "svelte";
-  import collapse from "svelte-collapse";
-  import {
-    ChevronDownIconSolid,
-    ChevronUpIconSolid,
-  } from "@codewithshin/svelte-heroicons";
-  export let id;
-  const store = getContext("svelte-collapsible-accordion");
-  $: params = {
+<script >import { getContext } from 'svelte';
+import collapse from 'svelte-collapse';
+import { ChevronDownIconSolid, ChevronUpIconSolid } from '@codewithshin/svelte-heroicons';
+export let id;
+const store = getContext('svelte-collapsible-accordion');
+$: params = {
     open: $store.id === id,
     duration: $store.duration,
-    easing: $store.easing,
-  };
-  const handleToggle = () => {
+    easing: $store.easing
+};
+const handleToggle = () => {
     if (params.open) {
-      store.update((s) => Object.assign(s, { id: null }));
-    } else {
-      store.update((s) => Object.assign(s, { id }));
+        store.update((s) => Object.assign(s, { id: null }));
     }
-  };
+    else {
+        store.update((s) => Object.assign(s, { id }));
+    }
+};
 </script>
 
 <h2 aria-expanded={params.open}>
-  <button
-    on:click={handleToggle}
-    type="button"
-    class:rounded-t-xl={id === "1"}
-    class:border-t-0={id !== "1"}
-    class="flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
-  >
-    <span><slot name="header" /></span>
-    {#if params.open}
-      <ChevronUpIconSolid />
-    {:else}
-      <ChevronDownIconSolid />
-    {/if}
-  </button>
+	<button
+		on:click={handleToggle}
+		type="button"
+		class:rounded-t-xl={id === '1'}
+		class:border-t-0={id !== '1'}
+		class="flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+	>
+		<span><slot name="header" /></span>
+		{#if params.open}
+			<ChevronUpIconSolid />
+		{:else}
+			<ChevronDownIconSolid />
+		{/if}
+	</button>
 </h2>
 <div use:collapse={params}>
-  <div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
-    <slot name="body" />
-  </div>
+	<div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
+		<slot name="body" />
+	</div>
 </div>

package/accordions/AccordionItem.svelte.d.ts

@@ -1,22 +1,7 @@
-/** @typedef {typeof __propDef.props}  AccordionItemProps */
-/** @typedef {typeof __propDef.events}  AccordionItemEvents */
-/** @typedef {typeof __propDef.slots}  AccordionItemSlots */
-export default class AccordionItem extends SvelteComponentTyped<{
-    id: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    header: {};
-    body: {};
-}> {
-}
-export type AccordionItemProps = typeof __propDef.props;
-export type AccordionItemEvents = typeof __propDef.events;
-export type AccordionItemSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id: any;
+        id: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -26,4 +11,9 @@ declare const __propDef: {
         body: {};
     };
 };
+export declare type AccordionItemProps = typeof __propDef.props;
+export declare type AccordionItemEvents = typeof __propDef.events;
+export declare type AccordionItemSlots = typeof __propDef.slots;
+export default class AccordionItem extends SvelteComponentTyped<AccordionItemProps, AccordionItemEvents, AccordionItemSlots> {
+}
 export {};

package/alerts/Alert.svelte

@@ -1,5 +1,4 @@
-<script >// use blue (default), red, yellow, purple, green, indigo, gray, (no pink)
-export let color = 'blue';
+<script >export let color = 'blue';
 export let alertId = 'alert-1';
 export let closeBtn = false;
 let hidden = false;

package/alerts/Alert.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Colors } from '../types';
 declare const __propDef: {
     props: {
-        color?: string;
+        color?: Colors;
         alertId?: string;
         closeBtn?: boolean;
     };

package/alerts/BorderAlert.svelte

@@ -1,5 +1,4 @@
-<script >// use blue (default), red, green, yellow, and gray
-export let color = 'blue';
+<script >export let color = 'blue';
 export let alertId = 'alert-border-1';
 export let closeBtn = false;
 let hidden = false;

package/alerts/BorderAlert.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Colors } from '../types';
 declare const __propDef: {
     props: {
-        color?: string;
+        color?: Colors;
         alertId?: string;
         closeBtn?: boolean;
     };

package/alerts/InfoAlert.svelte

@@ -1,5 +1,4 @@
-<script >// use blue (default), red, green, yellow, and gray
-export let color = 'blue';
+<script >export let color = 'blue';
 export let alertId = 'alert-additional-content-1';
 export let infoLink = undefined;
 export let closeBtn = false;

package/alerts/InfoAlert.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Colors } from '../types';
 declare const __propDef: {
     props: {
-        color?: string;
+        color?: Colors;
         alertId?: string;
         infoLink?: string;
         closeBtn?: boolean;

package/badges/Badge.svelte

@@ -1,28 +1,34 @@
-<script>
-  export let textSize = "text-xs"; // text-sm
-  export let name = "Read more";
-  export let color = "blue";
-
-  let badgeClass;
-  if (color === "blue") {
+<script >export let textSize = 'text-xs';
+export let name = 'Read more';
+export let color = 'blue';
+let badgeClass;
+if (color === 'blue') {
     badgeClass = `bg-blue-100 text-blue-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800`;
-  } else if (color === "gray") {
+}
+else if (color === 'gray') {
     badgeClass = `bg-gray-100 text-gray-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300`;
-  } else if (color === "red") {
+}
+else if (color === 'red') {
     badgeClass = `bg-red-100 text-red-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-red-200 dark:text-red-900`;
-  } else if (color === "green") {
+}
+else if (color === 'green') {
     badgeClass = `bg-green-100 text-green-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-green-200 dark:text-green-900`;
-  } else if (color === "yellow") {
+}
+else if (color === 'yellow') {
     badgeClass = `bg-yellow-100 text-yellow-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-200 dark:text-yellow-900`;
-  } else if (color === "indigo") {
+}
+else if (color === 'indigo') {
     badgeClass = `bg-indigo-100 text-indigo-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-indigo-200 dark:text-indigo-900`;
-  } else if (color === "purple") {
+}
+else if (color === 'purple') {
     badgeClass = `bg-purple-100 text-purple-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-900`;
-  } else if (color === "pink") {
+}
+else if (color === 'pink') {
     badgeClass = `bg-pink-100 text-pink-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-pink-200 dark:text-pink-900`;
-  } else {
+}
+else {
     badgeClass = `bg-blue-100 text-blue-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800`;
-  }
+}
 </script>
 
 <span class={badgeClass}>{name}</span>

package/badges/Badge.svelte.d.ts

@@ -1,27 +1,19 @@
-/** @typedef {typeof __propDef.props}  BadgeProps */
-/** @typedef {typeof __propDef.events}  BadgeEvents */
-/** @typedef {typeof __propDef.slots}  BadgeSlots */
-export default class Badge extends SvelteComponentTyped<{
-    textSize?: string;
-    name?: string;
-    color?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type BadgeProps = typeof __propDef.props;
-export type BadgeEvents = typeof __propDef.events;
-export type BadgeSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { Colors, Textsize } from '../types';
 declare const __propDef: {
     props: {
-        textSize?: string;
+        textSize?: Textsize;
         name?: string;
-        color?: string;
+        color?: Colors;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type BadgeProps = typeof __propDef.props;
+export declare type BadgeEvents = typeof __propDef.events;
+export declare type BadgeSlots = typeof __propDef.slots;
+export default class Badge extends SvelteComponentTyped<BadgeProps, BadgeEvents, BadgeSlots> {
+}
 export {};

package/badges/BadgeIcon.svelte

@@ -1,31 +1,37 @@
-<script>
-  export let textSize = "text-xs"; // text-sm
-  export let name = "Read more";
-  export let color = "blue";
-
-  let badgeClass;
-  if (color === "blue") {
+<script >export let textSize = 'text-xs';
+export let name = 'Read more';
+export let color = 'blue';
+let badgeClass;
+if (color === 'blue') {
     badgeClass = `bg-blue-100 text-blue-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-blue-700 dark:text-blue-300`;
-  } else if (color === "gray") {
+}
+else if (color === 'gray') {
     badgeClass = `bg-gray-100 text-gray-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-gray-700 dark:text-gray-300`;
-  } else if (color === "red") {
+}
+else if (color === 'red') {
     badgeClass = `bg-red-100 text-red-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-red-700 dark:text-red-300`;
-  } else if (color === "green") {
+}
+else if (color === 'green') {
     badgeClass = `bg-green-100 text-green-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-green-700 dark:text-green-300`;
-  } else if (color === "yellow") {
+}
+else if (color === 'yellow') {
     badgeClass = `bg-yellow-100 text-yellow-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-yellow-700 dark:text-yellow-300`;
-  } else if (color === "indigo") {
+}
+else if (color === 'indigo') {
     badgeClass = `bg-indigo-100 text-indigo-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-indigo-700 dark:text-indigo-300`;
-  } else if (color === "purple") {
+}
+else if (color === 'purple') {
     badgeClass = `bg-purple-100 text-purple-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-purple-700 dark:text-purple-300`;
-  } else if (color === "pink") {
+}
+else if (color === 'pink') {
     badgeClass = `bg-pink-100 text-pink-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-pink-700 dark:text-pink-300`;
-  } else {
+}
+else {
     badgeClass = `bg-blue-100 text-blue-800 ${textSize} font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-blue-700 dark:text-blue-300`;
-  }
+}
 </script>
 
 <span class={badgeClass}>
-  <slot />
-  {name}
+	<slot />
+	{name}
 </span>

package/badges/BadgeIcon.svelte.d.ts

@@ -1,25 +1,10 @@
-/** @typedef {typeof __propDef.props}  BadgeIconProps */
-/** @typedef {typeof __propDef.events}  BadgeIconEvents */
-/** @typedef {typeof __propDef.slots}  BadgeIconSlots */
-export default class BadgeIcon extends SvelteComponentTyped<{
-    textSize?: string;
-    name?: string;
-    color?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type BadgeIconProps = typeof __propDef.props;
-export type BadgeIconEvents = typeof __propDef.events;
-export type BadgeIconSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { Colors, Textsize } from '../types';
 declare const __propDef: {
     props: {
-        textSize?: string;
+        textSize?: Textsize;
         name?: string;
-        color?: string;
+        color?: Colors;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -28,4 +13,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export declare type BadgeIconProps = typeof __propDef.props;
+export declare type BadgeIconEvents = typeof __propDef.events;
+export declare type BadgeIconSlots = typeof __propDef.slots;
+export default class BadgeIcon extends SvelteComponentTyped<BadgeIconProps, BadgeIconEvents, BadgeIconSlots> {
+}
 export {};

package/badges/BadgeLink.svelte

@@ -1,29 +1,35 @@
-<script>
-  export let textSize = "text-xs"; // text-sm
-  export let name = "Read more";
-  export let color = "blue";
-  export let link = "/";
-
-  let badgeClass;
-  if (color === "blue") {
+<script >export let textSize = 'text-xs';
+export let name = 'Read more';
+export let color = 'blue';
+export let link = '/';
+let badgeClass;
+if (color === 'blue') {
     badgeClass = `bg-blue-100 hover:bg-blue-200 text-blue-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 dark:hover:bg-blue-300`;
-  } else if (color === "gray") {
+}
+else if (color === 'gray') {
     badgeClass = `bg-gray-100 hover:bg-gray-200 text-gray-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300`;
-  } else if (color === "red") {
+}
+else if (color === 'red') {
     badgeClass = `bg-red-100 hover:bg-red-200 text-red-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-red-200 dark:text-red-800 dark:hover:bg-red-300`;
-  } else if (color === "green") {
+}
+else if (color === 'green') {
     badgeClass = `bg-green-100 hover:bg-green-200 text-green-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-green-200 dark:text-green-800 dark:hover:bg-green-300`;
-  } else if (color === "yellow") {
+}
+else if (color === 'yellow') {
     badgeClass = `bg-yellow-100 hover:bg-yellow-200 text-yellow-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-200 dark:text-yellow-800 dark:hover:bg-yellow-300`;
-  } else if (color === "indigo") {
+}
+else if (color === 'indigo') {
     badgeClass = `bg-indigo-100 hover:bg-indigo-200 text-indigo-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-indigo-200 dark:text-indigo-800 dark:hover:bg-indigo-300`;
-  } else if (color === "purple") {
+}
+else if (color === 'purple') {
     badgeClass = `bg-purple-100 hover:bg-purple-200 text-purple-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-800 dark:hover:bg-purple-300`;
-  } else if (color === "pink") {
+}
+else if (color === 'pink') {
     badgeClass = `bg-pink-100 hover:bg-pink-200 text-pink-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-pink-200 dark:text-pink-800 dark:hover:bg-pink-300`;
-  } else {
+}
+else {
     badgeClass = `bg-blue-100 hover:bg-blue-200 text-blue-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 dark:hover:bg-blue-300`;
-  }
+}
 </script>
 
 <a href={link} class={badgeClass}>{name}</a>

package/badges/BadgeLink.svelte.d.ts

@@ -1,29 +1,20 @@
-/** @typedef {typeof __propDef.props}  BadgeLinkProps */
-/** @typedef {typeof __propDef.events}  BadgeLinkEvents */
-/** @typedef {typeof __propDef.slots}  BadgeLinkSlots */
-export default class BadgeLink extends SvelteComponentTyped<{
-    link?: string;
-    textSize?: string;
-    name?: string;
-    color?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type BadgeLinkProps = typeof __propDef.props;
-export type BadgeLinkEvents = typeof __propDef.events;
-export type BadgeLinkSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { Colors, Textsize } from '../types';
 declare const __propDef: {
     props: {
-        link?: string;
-        textSize?: string;
+        textSize?: Textsize;
         name?: string;
-        color?: string;
+        color?: Colors;
+        link?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type BadgeLinkProps = typeof __propDef.props;
+export declare type BadgeLinkEvents = typeof __propDef.events;
+export declare type BadgeLinkSlots = typeof __propDef.slots;
+export default class BadgeLink extends SvelteComponentTyped<BadgeLinkProps, BadgeLinkEvents, BadgeLinkSlots> {
+}
 export {};

package/buttongroups/ButtonGroup.svelte

@@ -1,68 +1,45 @@
-<script>
-  export let buttons = [
-    {
-      name: "Profile",
-      link: "/",
-      rel: "",
-      icon: "",
-    },
-    {
-      name: "Settings",
-      link: "/",
-      rel: "",
-      icon: "",
-    },
-    {
-      name: "Messages",
-      link: "/",
-      rel: "",
-      icon: "",
-    },
-  ];
-  let btnLength = buttons.length;
-  let classFirst =
-    "inline-flex relative items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-l-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white";
-  let classMiddle =
-    "inline-flex relative items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white";
-  let classLast =
-    "inline-flex relative items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-r-md border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white";
+<script >export let buttons;
+let btnLength = buttons.length;
+let classFirst = 'inline-flex relative items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-l-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white';
+let classMiddle = 'inline-flex relative items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white';
+let classLast = 'inline-flex relative items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-r-md border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white';
 </script>
 
 <div class="inline-flex rounded-md shadow-sm" role="group">
-  {#each buttons as { name, icon, link, rel }, i}
-    {#if i === 0}
-      <button type="button" class={classFirst}>
-        {#if icon}
-          <svelte:component this={icon} className="h-4 w-4 mr-2" />
-        {/if}
-        {#if link}
-          <a href={link} {rel}>{name}</a>
-        {:else}
-          {name}
-        {/if}
-      </button>
-    {:else if i === btnLength - 1}
-      <button type="button" class={classLast}>
-        {#if icon}
-          <svelte:component this={icon} className="h-4 w-4 mr-2" />
-        {/if}
-        {#if link}
-          <a href={link} {rel}>{name}</a>
-        {:else}
-          {name}
-        {/if}
-      </button>
-    {:else}
-      <button type="button" class={classMiddle}>
-        {#if icon}
-          <svelte:component this={icon} className="h-4 w-4 mr-2" />
-        {/if}
-        {#if link}
-          <a href={link} {rel}>{name}</a>
-        {:else}
-          {name}
-        {/if}
-      </button>
-    {/if}
-  {/each}
+	{#each buttons as { name, icon, link, rel }, i}
+		{#if i === 0}
+			<button type="button" class={classFirst}>
+				{#if icon}
+					<svelte:component this={icon} className="h-4 w-4 mr-2" />
+				{/if}
+				{#if link}
+					<a href={link} {rel}>{name}</a>
+				{:else}
+					{name}
+				{/if}
+			</button>
+		{:else if i === btnLength - 1}
+			<button type="button" class={classLast}>
+				{#if icon}
+					<svelte:component this={icon} className="h-4 w-4 mr-2" />
+				{/if}
+				{#if link}
+					<a href={link} {rel}>{name}</a>
+				{:else}
+					{name}
+				{/if}
+			</button>
+		{:else}
+			<button type="button" class={classMiddle}>
+				{#if icon}
+					<svelte:component this={icon} className="h-4 w-4 mr-2" />
+				{/if}
+				{#if link}
+					<a href={link} {rel}>{name}</a>
+				{:else}
+					{name}
+				{/if}
+			</button>
+		{/if}
+	{/each}
 </div>