flowbite-svelte 0.27.15 → 0.27.16

package/src/routes/components/[slug]/+page.js

@@ -1,12 +0,0 @@
-// src/routes/components/[slug]/+page.js
-export async function load({ params }){
-  const post = await import(`../${params.slug}.md`)
-  const { title, dir } = post.metadata
-  const content = post.default
-
-  return {
-    content,
-    title,
-    dir
-  }
-}

package/src/routes/components/[slug]/+page.svelte

@@ -1,6 +0,0 @@
-<script lang="ts">
-  import type { PageData } from './$types';
-  export let data: PageData;
-</script>
-
-<svelte:component this={data.content} />

package/src/routes/components/accordion.md

@@ -1,300 +0,0 @@
----
-layout: componentLayout
-title: Svelte Accordion - Flowbite
-breadcrumb_title: Accordion
-dir: Components
-description: Use the accordion component to show hidden information based on the collapse and expand state of the child elements using data attribute options
----
-
-<MetaTag {breadcrumb_title} {title} {dir} {description}/>
-
-<script>
-  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
-  
-  import { Breadcrumb, BreadcrumbItem, Heading, P, A } from '$lib';
-  
-  // Props 
-  import {props as accordionProps} from '../props/Accordion.json'
-  import {props as accordionItemProps} from '../props/AccordionItem.json'
-	let propHeader = ['Name', 'Type', 'Default']
-  let slotHeader = ['Name', 'Description']
-  // Slots
-  let slotItems = [['default', 'Place for AccordionItems']]
-  let slotItems2 = [['default','Item body slot'],['header', 'Item header slot'],['arrowup', 'Icon to close an accordion item'],['arrowdown','Icon to open an accordion item']]
-
-	let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
-  let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
-</script>
-
-
-<Breadcrumb class="pt-16 py-8">
-  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
-  <BreadcrumbItem>{dir}</BreadcrumbItem>
-  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
-</Breadcrumb>
-
-<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
-
-<CompoDescription>{description}</CompoDescription>
-
-<ExampleDiv>
-<GitHubSource href="accordion/Accordion.svelte">Accordion</GitHubSource>
-<GitHubSource href="accordion/AccordionItem.svelte">AccordionItem</GitHubSource>
-</ExampleDiv>
-
-The accordion component is a collection of vertically collapsing header and body elements that can be used to show and hide information based on the Tailwind CSS utility classes and JavaScript from Flowbite.
-
-A popular use case would be the “Frequently Asked Questions” section of a website or page when you can show questions and answers for each child element.
-
-<Htwo label="Setup" />
-
-```html
-<script>
-  import { AccordionItem, Accordion } from 'flowbite-svelte'
-</script>
-```
-
-<Htwo label="Default accordion" />
-
-Accordion uses the single selection mode by default i.e. it collapses every other child element when expanding a one.
-
-To prevent that behavior set `multiple` property to `true`.
-
-```svelte example hideScript
-<script>
-  import {AccordionItem, Accordion} from 'flowbite-svelte'
-</script>
-<Accordion>
-  <AccordionItem>
-    <span slot="header">My Header 1</span>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
-    <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/" target="_blank" rel="noreferrer" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-  </AccordionItem>
-  <AccordionItem>
-    <span slot="header">My Header 2</span>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
-    <ul class="list-disc pl-5 dark:text-gray-400 text-gray-500">
-      <li><a href="/" target="_blank" rel="noreferrer" class="text-blue-600 dark:text-blue-500 hover:underline" >Lorem ipsum</a></li>
-      <li><a href="https://tailwindui.com/" rel="noreferrer" target="_blank"  class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
-    </ul>
-  </AccordionItem>
-</Accordion>
-```
-
-<Htwo label="Always open" />
-
-Use the `open` prop to make an item open on mount.
-
-```svelte example hideScript
-<script>
-  import {AccordionItem, Accordion} from 'flowbite-svelte'
-</script>
-
-<Accordion>
-  <AccordionItem open>
-    <span slot="header">Header 2-1</span>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
-  </AccordionItem>
-  <AccordionItem>
-    <span slot="header">Header 2-2</span>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
-  </AccordionItem>
-</Accordion>
-```
-
-<Htwo label="Color option" />
-
-You can control the look and feel of `AccordionItems` by overwriting the `acctiveClasses` and `inactiveClasses` properties. You can define them in `Accordion` so that they will apply to all children or set them individually on each `AccordionItem`.
-
-
-```svelte example hideScript
-<script>
-  import {AccordionItem, Accordion} from 'flowbite-svelte'
-</script>
-
-<Accordion
-  activeClasses="bg-blue-100 dark:bg-gray-800 text-blue-600 dark:text-white focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-800"
-  inactiveClasses="text-gray-500 dark:text-gray-400 hover:bg-blue-100 dark:hover:bg-gray-800">
-  <AccordionItem class="">
-    <span slot="header">Header 2-1</span>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
-  </AccordionItem>
-  <AccordionItem>
-    <span slot="header">Header 2-2</span>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
-  </AccordionItem>
-</Accordion>
-```
-
-<Htwo label="Flush accordion" />
-
-Use `flush` prop to remove the rounded borders.
-
-```svelte example hideScript
-<script>
-  import {AccordionItem, Accordion} from 'flowbite-svelte'
-</script>
-
-<Accordion flush>
-  <AccordionItem>
-    <span slot="header">Header 2-1</span>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
-  </AccordionItem>
-  <AccordionItem>
-    <span slot="header">Header 2-2</span>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
-  </AccordionItem>
-</Accordion>
-```
-
-<Htwo label="Arrow style" />
-
-Use the `arrowup` and `arrowdown` slots to set up and down icons.
-
-```svelte example hideScript
-<script>
-  import {AccordionItem, Accordion} from 'flowbite-svelte'
-</script>
-
-<Accordion>
-  <AccordionItem>
-    <span slot="header">Header 2-1</span>
-    <div slot="arrowup">
-      <svg class="w-6 h-6 shrink-0 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z"/></svg>
-    </div>
-    <span slot="arrowdown">
-      <svg class="w-6 h-6 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z"/></svg>
-    </span>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
-  </AccordionItem>
-  <AccordionItem>
-    <span slot="header">Header 2-2</span>
-    <div slot="arrowup">
-      <svg class="w-6 h-6 shrink-0 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z"/></svg>
-    </div>
-    <span slot="arrowdown">
-      <svg class="w-6 h-6 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z"/></svg>
-    </span>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
-  </AccordionItem>
-</Accordion>
-```
-
-<Htwo label="Icon Accordion" />
-
-```svelte example hideScript
-<script>
-  import {AccordionItem, Accordion} from 'flowbite-svelte'
-</script>
-
-<Accordion>
-  <AccordionItem>
-    <span slot="header" class="text-base flex gap-2">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/></svg>
-      <span> My Header 1</span>
-    </span>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo...</p>
-    <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/" target="_blank" rel="noreferrer" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start  websites even faster with components on top of Tailwind CSS.</p>
-  </AccordionItem>
-  <AccordionItem>
-    <span slot="header" class="text-base flex gap-2">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"/></svg>
-      <span> My Header 2</span>
-    </span>
-    <p class="mb-2 text-gray-500 dark:text-gray-400"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sintexplicabo...</p>
-  </AccordionItem>
-</Accordion>
-```
-
-<Htwo label="Multiple mode" />
-
-Example how to use the `multiple` option together with expand all behavior.
-
-```svelte example class="space-y-4"
-<script>
-  import {AccordionItem, Accordion, Button} from 'flowbite-svelte'
-  const items = Array(3);
- 
-  const open_all = () => items.forEach((_,i)=> items[i] = true)
-  const close_all= () => items.forEach((_,i)=> items[i] = false)
-</script>
-<Button on:click={open_all}>Open all</Button>
-<Button on:click={close_all}>Close all</Button>
-<Accordion multiple>
-  <AccordionItem bind:open={items[0]}>
-    <span slot="header">My Header 1</span>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
-    <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/" target="_blank" rel="noreferrer" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-  </AccordionItem>
-  <AccordionItem bind:open={items[1]}>
-    <div slot="header">My Header 2</div>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
-  </AccordionItem>
-  <AccordionItem bind:open={items[2]}>
-    <div slot="header">My Header 3</div>
-    <p>Something more</p>
-  </AccordionItem>
-</Accordion>
-```
-
-<Htwo label="Custom transitions" />
-
-The default transition of `AccordionItem`s is <A href="https://svelte.dev/docs#run-time-svelte-transition-slide">slide</A>. Use the `transitionType` and `transitionParams` props to make custom transitions.
-
-```svelte example hideScript
-<script>
-  import {AccordionItem, Accordion} from 'flowbite-svelte'
-</script>
-<Accordion>
-  <AccordionItem>
-    <span slot="header">My Header 1</span>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
-  </AccordionItem>
-  <AccordionItem transitionParams="{{ duration: 2000 }}">
-    <span slot="header">My Header 2</span>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
-  </AccordionItem>
-  <AccordionItem transitionType="fade" transitionParams="{{ duration: 1000 }}">
-    <span slot="header">My Header 3</span>
-    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
-  </AccordionItem>
-</Accordion>
-```
-
-<Htwo label="Props" />
-
-The component has the following props, type, and default values. See <A href="/pages/types">types page</A> for type information.
-
-<h3 class='text-xl w-full dark:text-white py-4'>Accordion</h3>
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={accordionProps} rowState='hover' />
-</TableProp>
-
-<h3 class='text-xl w-full dark:text-white py-4'>AccordionItem</h3>
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={accordionItemProps} rowState='hover' />
-</TableProp>
-
-<Htwo label="Slots" />
-
-<h3 class='text-xl w-full dark:text-white py-4'>Accordion</h3>
-
-<TableProp header={slotHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={slotItems} rowState='hover' />
-</TableProp>
-
-<h3 class='text-xl w-full dark:text-white py-4'>AccordionItem</h3>
-
-<TableProp header={slotHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={slotItems2} rowState='hover' />
-</TableProp>
-
-<Htwo label="References" />
-
-<P><A href="https://flowbite.com/docs/components/accordion/" target="_blank" rel="noreferrer" class="link">Flowbite Accordion</A></P>

package/src/routes/components/alert.md

@@ -1,324 +0,0 @@
----
-layout: componentLayout
-title: Svelte Alert - Flowbite
-breadcrumb_title: Alert
-dir: Components
-description: Show contextual information to your users using alert elements based on Tailwind CSS
----
-
-<MetaTag {breadcrumb_title} {title} {dir} {description}/>
-
-<script>
-  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
-  
-  import { Badge, Breadcrumb, BreadcrumbItem, Heading, P, A } from '$lib'
-  // Props table
-  import { props as frameProps} from '../props/Frame.json'
-  import { props as alertProps } from '../props/Alert.json'
-  let propHeader = ['Name', 'Type', 'Default']
-  let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
-  let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
-  // slots
-  let slotHeader = ['Name', 'Description']
-  let slotItems = [['default', 'The first slot.'],['extra','A slot after the default slot.']]
-</script>
-
-<Breadcrumb class="pt-16 py-8">
-  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
-  <BreadcrumbItem>{dir}</BreadcrumbItem>
-  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
-</Breadcrumb>
-
-<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
-
-<CompoDescription>{description}</CompoDescription>
-
-<ExampleDiv>
-<GitHubSource href="alerts/Alert.svelte">{title}</GitHubSource>
-</ExampleDiv>
-
-The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page. Flowbite also includes dismissable alerts which can be hidden by the users by clicking on the close icon.
-
-<Htwo label="Set up" />
-
-Import Alert and set variables in the script tag.
-
-```html
-<script>
-  import { Alert } from 'flowbite-svelte';
-</script>
-```
-
-<Htwo label="Default alert" />
-
-Use the following examples of alert components to show messages as feedback to your users.
-
-```svelte example class="flex flex-col gap-4"
-<script>
-  import {Alert} from "flowbite-svelte";
-</script>
-<Alert>
-  <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
-</Alert>
-<Alert color="red">
-  <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
-</Alert>
-<Alert color="green">
-  <span class="font-medium">Success alert!</span> Change a few things up and try submitting again.
-</Alert>
-<Alert color="yellow">
-  <span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.
-</Alert>
-<Alert color="dark">
-  <span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.
-</Alert>
-```
-
-<Htwo label="Alerts with icon" />
-
-You can also include a descriptive icon to complement the message inside the alert component with the following example.
-
-```svelte example class="flex flex-col gap-4" hideScript
-<script>
-  import {Alert} from "flowbite-svelte";
-</script>
-<Alert>
-  <span slot="icon">
-  <svg aria-hidden="true" class="w-5 h-5" 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"></path></svg>
-  </span>
-  <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
-</Alert>
-<Alert color="red">
-  <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg>
-  </span>
-  <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
-</Alert>
-<Alert color="green">
-  <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg>
-  </span>
-  <span class="font-medium">Success alert!</span> Change a few things up and try submitting again.
-</Alert>
-<Alert color="yellow">
-  <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg>
-  </span>
-  <span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.
-</Alert>
-<Alert color="dark">
-  <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg>
-  </span>
-  <span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.
-</Alert>
-```
-
-<Htwo label="Alerts with list" />
-
-Use this example to show a list and a description inside an alert component.
-
-```svelte example class="flex flex-col gap-4" hideScript
-<script>
-  import {Alert} from "flowbite-svelte";
-</script>
-<Alert>
-  <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg>
-  </span>
-  <span class="sr-only">Info</span>
-  <span class="font-medium">Ensure that these requirements are met:</span>
-  <ul slot="extra" class="mt-0 ml-8 list-disc list-inside">
-    <li>At least 10 characters (and up to 100 characters)</li>
-    <li>At least one lowercase character</li>
-    <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
-  </ul>
-</Alert>
-<Alert color="red">
-  <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg>
-  </span>
-  <span class="sr-only">Info</span>
-  <span class="font-medium">Ensure that these requirements are met:</span>
-  <ul slot="extra" class="mt-0 ml-8 list-disc list-inside">
-    <li>At least 10 characters (and up to 100 characters)</li>
-    <li>At least one lowercase character</li>
-    <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
-  </ul>
-</Alert>
-```
-
-<Htwo label="Dismissable alerts" />
-
-Use the following alert elements that are also dismissable.
-
-```svelte example class="flex flex-col gap-4" hideScript
-<script>
-  import {Alert} from "flowbite-svelte";
-</script>
-<Alert dismissable>
-    <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg>
-    </span>
-    A simple info alert with an <a href="/" class="font-semibold underline hover:text-blue-800 dark:hover:text-blue-900">example link</a>. Give it a click if you like.
-  </Alert>
-  <Alert color="red" dismissable>
-    <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg>
-    </span>
-    A simple info alert with an <a href="/" class="font-semibold underline hover:text-red-800 dark:hover:text-red-900">example link</a>. Give it a click if you like.
-  </Alert>
-  <Alert color="green" dismissable>
-    <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg>
-    </span>
-    A simple info alert with an <a href="/" class="font-semibold underline hover:text-green-800 dark:hover:text-green-900">example link</a>. Give it a click if you like.
-  </Alert>
-  <Alert color="yellow" dismissable>
-    <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg>
-    </span>
-    A simple info alert with an <a href="/" class="font-semibold underline hover:text-yellow-800 dark:hover:text-yellow-900">example link</a>. Give it a click if you like.
-  </Alert>
-  <Alert color="dark" dismissable>
-    <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg>
-    </span>
-    A simple info alert with an <a href="/" class="font-semibold underline hover:text-gray-800 dark:hover:text-white">example link</a>. Give it a click if you like.
-</Alert>
-```
-
-<Htwo label="Border accent" />
-
-Use the following alert components with a border accent as an alternative style.
-
-```svelte example class="flex flex-col gap-4" hideScript
-<script>
-  import {Alert} from "flowbite-svelte";
-</script>
-<Alert accent>
-  <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg></span>
-  <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
-</Alert>
-<Alert color="red" accent>
-  <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg></span>
-  <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
-</Alert>
-<Alert color="green" accent>
-  <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg></span>
-  <span class="font-medium">Success alert!</span> Change a few things up and try submitting again.
-</Alert>
-<Alert color="yellow" accent>
-  <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg></span>
-  <span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.
-</Alert>
-<Alert color="dark" accent>
-  <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg></span>
-  <span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.
-</Alert>
-```
-
-<Htwo label="Additional content" />
-
-The following alert components can be used if you wish to disclose more information inside the element.
-
-```svelte example class="flex flex-col gap-4" hideScript
-<script>
-  import {Alert, Button} from "flowbite-svelte";
-</script>
-<Alert color="blue">
-  <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg></span>
-  <span class="text-lg font-medium">This is a info alert</span>
-  <div slot="extra">
-    <div class="mt-2 mb-4 text-sm">More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</div>
-    <div class="flex gap-2">
-      <Button size="xs"><svg aria-hidden="true" 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><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"></path></svg>View more</Button>
-      <Button size="xs" outline color="blue" class="dark:!text-blue-800">Go to Home</Button>
-    </div>
-  </div>
-</Alert>
-<Alert color="red">
-  <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg></span>
-  <span class="text-lg font-medium">This is a info alert</span>
-  <div slot="extra">
-    <div class="mt-2 mb-4 text-sm">More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</div>
-    <div class="flex gap-2">
-      <Button size="xs" color="none" class="bg-red-700 dark:bg-red-800 text-white dark:text-white"><svg aria-hidden="true" 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><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"></path></svg>View more</Button>
-      <Button size="xs" outline color="red" class="dark:text-red-700">Go to Home</Button>
-    </div>
-  </div>
-</Alert>
-<Alert color="green">
-  <span slot="icon"><svg aria-hidden="true" class="w-5 h-5" 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"></path></svg></span>
-  <span class="text-lg font-medium">This is a info alert</span>
-  <div slot="extra">
-    <div class="mt-2 mb-4 text-sm">More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</div>
-    <div class="flex gap-2">
-      <Button size="xs" color="green"><svg aria-hidden="true" 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><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"></path></svg>View more</Button>
-      <Button size="xs" outline color="green" class="dark:text-green-800">Go to Home</Button>
-    </div>
-  </div>
-</Alert>
-```
-
-<Htwo label="Custom color" />
-
-Use `color='none'` to disable coloring. Then use `class` to add your custom colors classes.
-
-```svelte example class="flex flex-col gap-4" hideScript
-<script>
-  import {Alert} from "flowbite-svelte";
-</script>
-<Alert color='none' class='bg-sky-500 text-pink-700'>
-  Your content
-</Alert>
-```
-
-<Htwo label="Events" />
-
-Use the `close` event with `dismissable` prop.
-
-```svelte example class="flex flex-col gap-4" hideScript
-<script>
-  import {Alert} from "flowbite-svelte";
-  const closeAlert = ()=>{
-    alert('Clicked closeAlert.')
-  }
-</script>
-
-<Alert dismissable on:close={closeAlert}>Close me</Alert>
-```
-
-<Htwo label="Props" />
-
-<h3 class='text-xl w-full dark:text-white py-4'>Alert</h3>
-
-The component has the following props, type, and default values. See <A href="/pages/types">types page</A> for type information.
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-<TableDefaultRow items={alertProps} rowState='hover' />
-</TableProp>
-
-<h3 class='text-xl w-full dark:text-white py-4'>Frame</h3>
-
-The component inherits the following props, type, and default values from `Frame`. See <A href="/pages/types">types page</A> for type information.
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-<TableDefaultRow items={frameProps} rowState='hover' />
-</TableProp>
-
-<Htwo label="Slots" />
-
-<TableProp header={slotHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={slotItems} rowState='hover' />
-</TableProp>
-
-<Htwo label="Forwarded Events" />
-
-<div class="flex flex-wrap gap-2">
-<Badge large={true}>on:blur</Badge>
-<Badge large={true}>on:change</Badge>
-<Badge large={true}>on:click</Badge>
-<Badge large={true}>on:focus</Badge>
-<Badge large={true}>on:keydown</Badge>
-<Badge large={true}>on:keyup</Badge>
-<Badge large={true}>on:mouseenter</Badge>
-<Badge large={true}>on:mouseleave</Badge>
-</div>
-
-<Htwo label="References" />
-
-<P>
-  <A href="https://flowbite.com/docs/components/alerts/" target="_blank" rel="noreferrer" class="link">
-  Flowbite Alerts
-  </A>
-</P>