flowbite-svelte 0.44.10 → 0.44.12

package/src/routes/docs/components/accordion.md

@@ -1,315 +0,0 @@
----
-layout: componentLayout
-title: Svelte Accordion - Flowbite
-breadcrumb_title: Svelte Accordion
-component_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
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer} from '../../utils'
-  import { P, A } from '$lib'; 
-  const components = 'Accordion, AccordionItem'
-</script>
-
-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.
-
-## Setup
-
-```svelte example hideOutput
-<script>
-  import { AccordionItem, Accordion } from 'flowbite-svelte';
-</script>
-```
-
-## 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
-<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>
-```
-
-## Always open
-
-Use the `open` prop to make an item open on mount.
-
-```svelte example
-<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>
-```
-
-## Color option
-
-You can control the look and feel of `AccordionItems` by overwriting the `activeClass` and `inactiveClass` properties. You can define them in `Accordion` so that they will apply to all children or set them individually on each `AccordionItem`.
-
-```svelte example
-<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>
-```
-
-## Flush accordion
-
-Use `flush` prop to remove the rounded borders.
-
-```svelte example
-<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>
-```
-
-## Arrow style
-
-Use the `arrowup` and `arrowdown` slots to set up and down icons.
-
-```svelte example
-<script>
-  import { AccordionItem, Accordion } from 'flowbite-svelte';
-  import { ChevronDoubleUpOutline, ChevronDoubleDownOutline } from 'flowbite-svelte-icons';
-</script>
-
-<Accordion>
-  <AccordionItem>
-    <span slot="header">Header 2-1</span>
-    <div slot="arrowup">
-      <ChevronDoubleUpOutline class="h-3 w-3 -mr-0.5" />
-    </div>
-    <span slot="arrowdown">
-      <ChevronDoubleDownOutline class="h-3 w-3 -mr-0.5" />
-    </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">
-      <ChevronDoubleUpOutline class="h-3 w-3 -mr-0.5" />
-    </div>
-    <span slot="arrowdown">
-      <ChevronDoubleDownOutline class="h-3 w-3 -mr-0.5" />
-    </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>
-```
-
-## Icon Accordion
-
-```svelte example
-<script>
-  import { AccordionItem, Accordion } from 'flowbite-svelte';
-  import { ShoppingCartSolid, CogOutline } from 'flowbite-svelte-icons';
-</script>
-
-<Accordion>
-  <AccordionItem>
-    <span slot="header" class="text-base flex gap-2">
-      <ShoppingCartSolid class="mt-0.5" />
-      <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">
-      <CogOutline class="mt-0.5" />
-      <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>
-```
-
-## 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>
-```
-
-## 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` prop to make custom transitions.
-
-```svelte example
-<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>
-```
-
-## Nesting accordians
-
-Accordions can be nested. All of the mentioned options are supported.
-
-```svelte example hideScript
-<script>
-  import { AccordionItem, Accordion } from 'flowbite-svelte';
-</script>
-
-<Accordion>
-  <AccordionItem open>
-    <span slot="header">My Header 1</span>
-    <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>
-  </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>
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### Accordion styling
-
-- Use the `class` prop to overwrite `defaultClass`.
-- Use the `classActive` prop to overwrite `activeClass`.
-- Use the `classInactive` prop to overwrite `inactiveClass`.
-
-### AccordionItem styling
-
-- Use the `class` prop to overwrite `defaultClass`.
-
-<CompoAttributesViewer {components}/>
-
-## References
-
-- [Flowbite Accordion](https://flowbite.com/docs/components/accordion/)

package/src/routes/docs/components/alert.md

@@ -1,342 +0,0 @@
----
-layout: componentLayout
-title: Svelte Alert - Flowbite
-breadcrumb_title: Svelte Alert
-component_title: Alert
-dir: Components
-description: Show contextual information to your users using alert elements based on Tailwind CSS
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer, DocBadgeList } from '../../utils'
-  const components = 'Alert, Frame'
-</script>
-
-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.
-
-## Set up
-
-Import Alert and set variables in the script tag.
-
-```svelte example hideOutput
-<script>
-  import { Alert } from 'flowbite-svelte';
-</script>
-```
-
-## 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">Default alert!</span>
-  Change a few things up and try submitting again.
-</Alert>
-<Alert color="blue">
-  <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>
-```
-
-## 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"
-<script>
-  import { Alert } from 'flowbite-svelte';
-  import { InfoCircleSolid } from 'flowbite-svelte-icons';
-</script>
-
-<Alert>
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  <span class="font-medium">Default alert!</span>
-  Change a few things up and try submitting again.
-</Alert>
-<Alert color="blue">
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  <span class="font-medium">Info alert!</span>
-  Change a few things up and try submitting again.
-</Alert>
-<Alert color="red">
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  <span class="font-medium">Danger alert!</span>
-  Change a few things up and try submitting again.
-</Alert>
-<Alert color="green">
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  <span class="font-medium">Success alert!</span>
-  Change a few things up and try submitting again.
-</Alert>
-<Alert color="yellow">
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  <span class="font-medium">Warning alert!</span>
-  Change a few things up and try submitting again.
-</Alert>
-<Alert color="dark">
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  <span class="font-medium">Dark alert!</span>
-  Change a few things up and try submitting again.
-</Alert>
-```
-
-## Bordered alerts
-
-Use this example to add a border accent to the alert component instead of just a plain background.
-
-```svelte example class="flex flex-col gap-4"
-<script>
-  import { Alert } from 'flowbite-svelte';
-  import { InfoCircleSolid } from 'flowbite-svelte-icons';
-</script>
-
-<Alert border>
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  <span class="font-medium">Default alert!</span>
-  Change a few things up and try submitting again.
-</Alert>
-<Alert border color="blue">
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  <span class="font-medium">Info alert!</span>
-  Change a few things up and try submitting again.
-</Alert>
-<Alert border color="red">
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  <span class="font-medium">Danger alert!</span>
-  Change a few things up and try submitting again.
-</Alert>
-<Alert border color="green">
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  <span class="font-medium">Success alert!</span>
-  Change a few things up and try submitting again.
-</Alert>
-<Alert border color="yellow">
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  <span class="font-medium">Warning alert!</span>
-  Change a few things up and try submitting again.
-</Alert>
-<Alert border color="dark">
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  <span class="font-medium">Dark alert!</span>
-  Change a few things up and try submitting again.
-</Alert>
-```
-
-## 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"
-<script>
-  import { Alert, Li, List } from 'flowbite-svelte';
-  import { InfoCircleSolid } from 'flowbite-svelte-icons';
-</script>
-
-<Alert class="!items-start">
-  <span slot="icon">
-    <InfoCircleSolid slot="icon" class="w-4 h-4" />
-    <span class="sr-only">Info</span>
-  </span>
-  <p class="font-medium">Ensure that these requirements are met:</p>
-  <ul class="mt-1.5 ml-4 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="blue" class="!items-start">
-  <span slot="icon">
-    <InfoCircleSolid slot="icon" class="w-4 h-4" />
-    <span class="sr-only">Info</span>
-  </span>
-  <p class="font-medium">Ensure that these requirements are met:</p>
-  <List class="mt-1.5 ml-4">
-    <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>
-  </List>
-</Alert>
-```
-
-## Dismissable alerts
-
-Use the following alert elements that are also dismissable.
-
-As `Alert` inhertits from the `Frame` component you can attach the `transition` and `params` prop to control the dissimal animation. By default `fade` svelte function is used. See the example below.
-
-You can use `slot="close"` to override the default close button. That slot exposes `close` function that makes the alert dismissed when triggered. See the last example.
-
-```svelte example class="flex flex-col gap-4"
-<script>
-  import { Alert, Button } from 'flowbite-svelte';
-  import { InfoCircleSolid } from 'flowbite-svelte-icons';
-  import { fly } from 'svelte/transition';
-</script>
-
-<Alert dismissable>
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  A simple default 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="blue" dismissable>
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  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>
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  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>
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  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 transition={fly} params={{ x: 200 }}>
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  An alert with non default animation - fly away.
-</Alert>
-<Alert color="dark" dismissable>
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  An alert with the custom dismissal button.
-  <Button slot="close-button" size="xs" let:close on:click={close} class="ml-auto">Dissmiss</Button>
-</Alert>
-```
-
-## Border accent
-
-Use the following alert components with a border accent as an alternative style.
-
-```svelte example class="flex flex-col gap-4"
-<script>
-  import { Alert } from 'flowbite-svelte';
-  import { InfoCircleSolid } from 'flowbite-svelte-icons';
-</script>
-
-<Alert rounded={false} class="border-t-4">
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  <span class="font-medium">Info alert!</span>
-  Change a few things up and try submitting again.
-</Alert>
-<Alert color="red" rounded={false} class="border-t-4">
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  <span class="font-medium">Danger alert!</span>
-  Change a few things up and try submitting again.
-</Alert>
-<Alert color="green" rounded={false} class="border-t-4">
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  <span class="font-medium">Success alert!</span>
-  Change a few things up and try submitting again.
-</Alert>
-<Alert color="yellow" rounded={false} class="border-t-4">
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  <span class="font-medium">Warning alert!</span>
-  Change a few things up and try submitting again.
-</Alert>
-<Alert color="dark" rounded={false} class="border-t-4 flex-row-reverse">
-  <InfoCircleSolid slot="icon" class="w-4 h-4" />
-  <span class="font-medium">Dark alert!</span>
-  Change a few things up and try submitting again.
-</Alert>
-```
-
-## 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"
-<script>
-  import { Alert, Button } from 'flowbite-svelte';
-  import { InfoCircleSolid, EyeSolid } from 'flowbite-svelte-icons';
-</script>
-
-<Alert>
-  <div class="flex items-center gap-3">
-    <InfoCircleSolid slot="icon" class="w-4 h-4" />
-    <span class="text-lg font-medium">This is a info alert</span>
-  </div>
-  <p 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.</p>
-  <div class="flex gap-2">
-    <Button size="xs"><EyeSolid class="w-4 h-4 mr-2" />View more</Button>
-    <Button size="xs" outline class="dark:!text-primary-800">Go to Home</Button>
-  </div>
-</Alert>
-<Alert color="green">
-  <div class="flex items-center gap-3">
-    <InfoCircleSolid slot="icon" class="w-4 h-4" />
-    <span class="text-lg font-medium">This is a info alert</span>
-  </div>
-  <p 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.</p>
-  <div class="flex gap-2">
-    <Button size="xs" color="green"><EyeSolid class="w-4 h-4 mr-2" />View more</Button>
-    <Button size="xs" outline color="green" class="dark:text-green-800">Go to Home</Button>
-  </div>
-</Alert>
-```
-
-## 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-white">Your content</Alert>
-```
-
-## Events
-
-Use the `close` event with `dismissable` prop.
-
-```svelte example class="flex flex-col gap-4"
-<script>
-  import { Alert } from 'flowbite-svelte';
-  const closeAlert = () => {
-    alert('Clicked closeAlert.');
-  };
-</script>
-
-<Alert dismissable on:close={closeAlert}>Close me</Alert>
-```
-
-## Component data
-
-### Alert styling
-
-- Use the `class` prop to overwrite `defaultClass`.
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-<CompoAttributesViewer {components}/>
-
-## References
-
-- [Flowbite Alerts](https://flowbite.com/docs/components/alerts/)