flowbite-svelte 0.44.10 → 0.44.12

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

@@ -1,267 +0,0 @@
----
-layout: componentLayout
-title: Svelte Timeline - Flowbite
-breadcrumb_title: Svelte Timeline
-component_title: Timeline
-dir: Components
-description: Get started with the responsive timeline component to show data in a chronological order with support for multiple styles, sizes, and variants
-thumbnailSize: w-64
----
-
-<script lang="ts">
-  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
-  
-  const components = 'Timeline, TimelineItem, TimelineHorizontal, Activity, ActivityItem, Group, GroupItem, TimelineItemVertical, TimelineItemHorizontal'
-</script>
-
-The timeline component can be used to show series of data in a chronological order for use cases such as activity feeds, user actions, application updates, and more.
-
-## Setup
-
-```svelte example hideOutput
-<script>
-  import { Timeline, TimelineItem, TimelineItemVertical, TimelineItemHorizontal, TimelineHorizontal, Activity, ActivityItem, Group, GroupItem } from 'flowbite-svelte';
-</script>
-```
-
-## Default timeline
-
-```svelte example
-<script>
-  import { Timeline, TimelineItem, Button } from 'flowbite-svelte';
-  import { ArrowRightOutline } from 'flowbite-svelte-icons';
-</script>
-
-<Timeline>
-  <TimelineItem title="Application UI code in Tailwind CSS" date="February 2022">
-    <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.</p>
-    <Button color="alternative">Learn more<ArrowRightOutline class="ml-2 w-3 h-3" /></Button>
-  </TimelineItem>
-  <TimelineItem title="Application UI code in Tailwind CSS" date="March 2022">
-    <p class="text-base font-normal text-gray-500 dark:text-gray-400">All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.</p>
-  </TimelineItem>
-  <TimelineItem title="Application UI code in Tailwind CSS" date="April 2022">
-    <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements built on top of Tailwind CSS.</p>
-  </TimelineItem>
-</Timeline>
-```
-
-## Vertical Timeline
-
-Use this vertical timeline component with icons and badges to show a more advanced set of data.
-
-```svelte example
-<script>
-  import { Timeline, TimelineItem } from 'flowbite-svelte';
-  import { CalendarWeekSolid } from 'flowbite-svelte-icons';
-</script>
-
-<Timeline order="vertical">
-  <TimelineItem title="Flowbite Application UI v2.0.0" date="Released on January 13th, 2022">
-    <svelte:fragment slot="icon">
-      <span class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900">
-        <CalendarWeekSolid class="w-3 h-3 text-primary-600 dark:text-primary-400" />
-      </span>
-    </svelte:fragment>
-    <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.</p>
-  </TimelineItem>
-  <TimelineItem title="Flowbite Figma v1.3.0" date="Released on December 7th, 2021">
-    <svelte:fragment slot="icon">
-      <span class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900">
-        <CalendarWeekSolid class="w-3 h-3 text-primary-600 dark:text-primary-400" />
-      </span>
-    </svelte:fragment>
-    <p class="text-base font-normal text-gray-500 dark:text-gray-400">All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.</p>
-  </TimelineItem>
-  <TimelineItem title="Flowbite Library v1.2.2" date="Released on December 2nd, 2021">
-    <svelte:fragment slot="icon">
-      <span class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900">
-        <CalendarWeekSolid class="w-3 h-3 text-primary-600 dark:text-primary-400" />
-      </span>
-    </svelte:fragment>
-    <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements built on top of Tailwind CSS.</p>
-  </TimelineItem>
-</Timeline>
-```
-
-## Horizontal Timeline
-
-Use this horizontally aligned timeline component to show a series of data in a chronological order.
-
-```svelte example
-<script>
-  import { Timeline, TimelineItem } from 'flowbite-svelte';
-  import { CalendarWeekSolid } from 'flowbite-svelte-icons';
-</script>
-
-<Timeline order="horizontal">
-  <TimelineItem title="Flowbite Library v1.0.0" date="Released on December 2nd, 2021">
-    <svelte:fragment slot="icon">
-      <div class="flex items-center">
-        <div class="flex z-10 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-0 ring-white dark:bg-primary-900 sm:ring-8 dark:ring-gray-900 shrink-0">
-          <CalendarWeekSolid class="w-3 h-3 text-primary-600 dark:text-primary-400" />
-        </div>
-        <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
-      </div>
-    </svelte:fragment>
-    <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements.</p>
-  </TimelineItem>
-  <TimelineItem title="Flowbite Library v1.2.0" date="Released on December 23th, 2021">
-    <svelte:fragment slot="icon">
-      <div class="flex items-center">
-        <div class="flex z-10 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-0 ring-white dark:bg-primary-900 sm:ring-8 dark:ring-gray-900 shrink-0">
-          <CalendarWeekSolid class="w-3 h-3 text-primary-600 dark:text-primary-400" />
-        </div>
-        <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
-      </div>
-    </svelte:fragment>
-    <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements.</p>
-  </TimelineItem>
-  <TimelineItem title="Flowbite Library v1.3.0" date="Released on January 5th, 2021">
-    <svelte:fragment slot="icon">
-      <div class="flex items-center">
-        <div class="flex z-10 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-0 ring-white dark:bg-primary-900 sm:ring-8 dark:ring-gray-900 shrink-0">
-          <CalendarWeekSolid class="w-3 h-3 text-primary-600 dark:text-primary-400" />
-        </div>
-        <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
-      </div>
-    </svelte:fragment>
-    <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements.</p>
-  </TimelineItem>
-</Timeline>
-```
-
-## Activity Log
-
-This component can be used to show the timline of a user’s activity history inside your application by using an avatar, datetime, description, and links to specific pages.
-
-```svelte example
-<script>
-  import { Activity, ActivityItem } from 'flowbite-svelte';
-  let activities = [
-    {
-      title: 'Bonnie moved <a href="/" class="font-semibold text-primary-600 dark:text-primary-500 hover:underline">Jese Leos</a> to <span class="bg-gray-100 text-gray-800 text-xs font-normal mr-2 px-2.5 py-0.5 rounded dark:bg-gray-600 dark:text-gray-300">Funny Group</span>',
-      date: 'just now',
-      alt: 'image alt here',
-      src: '/images/profile-picture-2.webp'
-    },
-    {
-      title: 'We don’t serve their kind here! What? Your droids. ',
-      date: '2 hours ago',
-      alt: 'image alt here',
-      src: '/images/profile-picture-2.webp',
-      text: 'The approach will not be easy. You are required to maneuver straight down this trench and skim the surface to this point. The target area is only two meters wide. '
-    },
-    {
-      title: 'They’ll have to wait outside. We don’t want them here. ',
-      date: '1 day ago',
-      alt: 'image alt here',
-      src: '/images/profile-picture-3.webp'
-    }
-  ];
-</script>
-
-<Activity>
-  <ActivityItem {activities} />
-</Activity>
-```
-
-## Grouped timeline
-
-Use this component to group multiple data entries inside a single date and show elements like the avatar, title, description, tag and link to a relevant page.
-
-```svelte example
-<script>
-  import { Group, GroupItem } from 'flowbite-svelte';
-  let groupTimelines = [
-    {
-      title: '<span class="font-medium text-gray-900 dark:text-white">Jese Leos</span> likes <span class="font-medium text-gray-900 dark:text-white">Bonnie Green\'s</span> post in <span class="font-medium text-gray-900 dark:text-white"> How to start with Flowbite library</span>',
-      src: '/images/profile-picture-1.webp',
-      alt: 'alt here',
-      href: '/',
-      isPrivate: true,
-      comment: '"I wanted to share a webinar zeroheight."'
-    },
-    {
-      title: '<span class="font-medium text-gray-900 dark:text-white">Bonnie Green</span> react to <span class="font-medium text-gray-900 dark:text-white">Thomas Lean\'s</span> comment',
-      src: '/images/profile-picture-2.webp',
-      alt: 'alt here',
-      href: '/',
-      isPrivate: true,
-      comment: '"I wanted to share a webinar zeroheight."'
-    }
-  ];
-</script>
-
-<Group date="January 13th, 2022">
-  <GroupItem timelines={groupTimelines} />
-</Group>
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### Timeline styling
-
-- Use the `class` prop to overwrite the `ol` tag class.
-
-### TimelineItem styling
-
-- Use the `classLi` prop to overwrite the `li` tag class.
-- Use the `classDiv` prop to overwrite the `div` tag class.
-- Use the `classTime` prop to overwrite the `time` tag class.
-
-### TimelineHorizontal styling
-
-- Use the `liClass` prop to overwrite `classLi`.
-- Use the `divClass` prop to overwrite `classDiv`.
-- Use the `timeClass` prop to overwrite `classTime`.
-- Use the `pClass` prop to overwrite `classP`.
-- Use the `aClass` prop to overwrite `classA`.
-
-### Activity styling
-
-- Use the `class` prop to overwrite `olClass`.
-
-### ActivityItem styling
-
-- Use the `classLi` prop to overwrite `liClass`.
-- Use the `classSpan` prop to overwrite `spanClass`.
-- Use the `classImg` prop to overwrite `imgClass`.
-- Use the `classOuterDiv` prop to overwrite `outerDivClass`.
-- Use the `classInnerDiv` prop to overwrite `innerDivClass`.
-- Use the `classTime` prop to overwrite `timeClass`.
-- Use the `classTitle` prop to overwrite `titleClass`.
-- Use the `classText` prop to overwrite `textClass`.
-
-### Group styling
-
-- Use the `classDiv` prop to overwrite `divClass`.
-- Use the `classTime` prop to overwrite `timeClass`.
-- Use the `classOl` prop to overwrite `olClass`.
-
-### GroupItem styling
-
-- Use the `classA` prop to overwrite `aClass`.
-- Use the `classImg` prop to overwrite `imgClass`.
-- Use the `classDiv` prop to overwrite `divClass`.
-- Use the `classTitle` prop to overwrite `titleClass`.
-- Use the `classSpan` prop to overwrite `spanClass`.
-
-### TimelineItemVertical styling
-
-- Use the `classLi` prop to overwrite `liClass`.
-- Use the `classSpan` prop to overwrite `spanClass`.
-- Use the `classH3` prop to overwrite `h3Class`.
-- Use the `classTime` prop to overwrite `timeClass`.
-
-### TimelineItemHorizonal styling
-
-- Use the `class` prop to overwrite the `ol` tag class.
-
-<CompoAttributesViewer {components}/>
-
-## References
-
-- [Flowbite Timeline](https://flowbite.com/docs/components/timeline/)

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

@@ -1,362 +0,0 @@
----
-layout: componentLayout
-title: Svelte Toasts - Flowbite
-breadcrumb_title: Svelte Toast Notification
-component_title: Toast
-dir: Components
-description: Push notifications to your users using the toast component and choose from multiple sizes, colors, styles, and positions
-thumnailSize: w-64
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer  } from '../../utils'
-  import { P, A } from '$lib'
-
-  const components = 'Toast'
-</script>
-
-The toast component can be used to enhance your website’s interactivity by pushing notifications to your visitors. You can choose from multiple styles, colors, sizes, and positions and even dismiss the component.
-
-## Setup
-
-```svelte example hideOutput
-<script>
-  import { Toast } from 'flowbite-svelte';
-</script>
-```
-
-## Default toast
-
-Use this simple toast component with an icon, message, and dismissable close button to show alert messages to your website visitors.
-
-```svelte example class="flex justify-center"
-<script>
-  import { Toast } from 'flowbite-svelte';
-  import { FireOutline } from 'flowbite-svelte-icons';
-</script>
-
-<Toast>
-  <FireOutline slot="icon" class="w-5 h-5 text-primary-500 bg-primary-100 dark:bg-primary-800 dark:text-primary-200" />
-  Set yourself free.
-</Toast>
-```
-
-## Colors
-
-Use the `color` prop to easily change the colors of the icons. Set the `color` prop to `none` and use the `extraIconClass` prop to customize your desired icon styles.
-
-Usually, green, red, and orange are used to show success, danger, or warning alert messages to your users. See the first three examples below.
-
-```svelte example class="flex flex-col items-center gap-4"
-<script>
-  import { Toast } from 'flowbite-svelte';
-  import { CheckCircleSolid, ExclamationCircleSolid, FireOutline, CloseCircleSolid } from 'flowbite-svelte-icons';
-</script>
-
-<Toast color="green">
-  <svelte:fragment slot="icon">
-    <CheckCircleSolid class="w-5 h-5" />
-    <span class="sr-only">Check icon</span>
-  </svelte:fragment>
-  Item moved successfully.
-</Toast>
-
-<Toast color="red">
-  <svelte:fragment slot="icon">
-    <CloseCircleSolid class="w-5 h-5" />
-    <span class="sr-only">Error icon</span>
-  </svelte:fragment>
-  Item has been deleted.
-</Toast>
-
-<Toast color="orange">
-  <svelte:fragment slot="icon">
-    <ExclamationCircleSolid class="w-5 h-5" />
-    <span class="sr-only">Warning icon</span>
-  </svelte:fragment>
-  Improve password difficulty.
-</Toast>
-
-<Toast color="gray">
-  <FireOutline slot="icon" class="w-5 h-5" />
-  Gray
-</Toast>
-
-<Toast color="yellow">
-  <FireOutline slot="icon" class="w-5 h-5" />
-  Yellow
-</Toast>
-
-<Toast color="blue">
-  <FireOutline slot="icon" class="w-5 h-5" />
-  Blue
-</Toast>
-
-<Toast color="indigo">
-  <FireOutline slot="icon" class="w-5 h-5" />
-  Indigo
-</Toast>
-
-<Toast color="purple">
-  <FireOutline slot="icon" class="w-5 h-5" />
-  Purple
-</Toast>
-
-<Toast color="none" defaultIconClass="w-8 h-8 text-pink-500 bg-pink-100 dark:bg-pink-800 dark:text-pink-200">
-  <FireOutline slot="icon" class="w-5 h-5" />
-  Customize your colors.
-</Toast>
-```
-
-## Simple toast
-
-This component can be used to show simple messages and notifications without the use of a close button.
-
-```svelte example class="flex justify-center"
-<script>
-  import { Toast } from 'flowbite-svelte';
-  import { PapperPlaneOutline } from 'flowbite-svelte-icons';
-</script>
-
-<Toast dismissable={false} contentClass="flex space-x-4 divide-x divide-gray-200 dark:divide-gray-700">
-  <PapperPlaneOutline class="w-5 h-5 text-primary-600 dark:text-primary-500 rotate-45" />
-  <div class="pl-4 text-sm font-normal">Message sent successfully.</div>
-</Toast>
-```
-
-## Icons
-
-For the right positioning of the icon use: `slot="icon"`.
-
-You can use any [icon components](/icons).
-
-```svelte example class="flex flex-col items-center gap-4"
-<script>
-  import { Toast } from 'flowbite-svelte';
-  import { ImageOutline } from 'flowbite-svelte-icons';
-</script>
-
-<Toast>
-  <ImageOutline slot="icon" class="w-6 h-6" />
-  There is a box icon.
-</Toast>
-
-<Toast>No icon at all.</Toast>
-```
-
-## Autohide example
-
-```svelte example class="flex justify-center"
-<script>
-  import { Toast, Button } from 'flowbite-svelte';
-  import { slide } from 'svelte/transition';
-  import { CheckCircleSolid } from 'flowbite-svelte-icons';
-
-  let open = true;
-  let counter = 6;
-
-  function trigger() {
-    open = true;
-    counter = 6;
-    timeout();
-  }
-
-  function timeout() {
-    if (--counter > 0) return setTimeout(timeout, 1000);
-    open = false;
-  }
-</script>
-
-<div class="flex gap-10">
-  <Button on:click={trigger} class="my-3">Restart</Button>
-  <Toast dismissable={false} transition={slide} bind:open>
-    <CheckCircleSolid slot="icon" class="w-4 h-4" />
-    Autohide in {counter}s.
-  </Toast>
-</div>
-```
-
-## Transitions
-
-You can use one of <A href="https://svelte.dev/docs#run-time-svelte-easing" target="_blank" rel="noreferrer" >Svelte/easing</A>.
-
-```svelte example class="flex flex-col items-center"
-<script>
-  import { Toast } from 'flowbite-svelte';
-  import { slide } from 'svelte/transition';
-  import { quintOut, elasticOut } from 'svelte/easing';
-  import { CheckCircleSolid } from 'flowbite-svelte-icons';
-</script>
-
-<Toast transition={slide} class="mb-4">
-  <CheckCircleSolid slot="icon" class="w-5 h-5" />
-  Transition type: slide
-</Toast>
-
-<Toast transition={slide} params={{ delay: 250, duration: 300, easing: quintOut }} class="mb-4">
-  <CheckCircleSolid slot="icon" class="w-5 h-5" />
-  Transition type: slide, delay: 250, duration: 300, easing: quintOut
-</Toast>
-
-<Toast transition={slide} params={{ delay: 250, duration: 2000, easing: elasticOut }}>
-  <CheckCircleSolid slot="icon" class="w-5 h-5" />
-  Transition type: slide, delay: 250, duration: 2000, easing: elasticOut
-</Toast>
-```
-
-### Blur examples
-
-```svelte example class="flex flex-col items-center"
-<script>
-  import { Toast } from 'flowbite-svelte';
-  import { blur } from 'svelte/transition';
-  import { BellOutline } from 'flowbite-svelte-icons';
-</script>
-
-<Toast transition={blur} color="purple" params={{ amount: 10 }} class="mb-4">
-  <BellOutline slot="icon" class="w-5 h-5" />
-  Transition type: blur, amount: 10
-</Toast>
-
-<Toast transition={blur} color="purple" params={{ amount: 50, delay: 1000 }}>
-  <BellOutline slot="icon" class="w-5 h-5" />
-  Transition type: blur, amount: 50, delay 1000
-</Toast>
-```
-
-### Fly examples
-
-```svelte example class="flex flex-col items-center"
-<script>
-  import { Toast } from 'flowbite-svelte';
-  import { fly } from 'svelte/transition';
-  import { DownloadOutline } from 'flowbite-svelte-icons';
-</script>
-
-<Toast transition={fly} params={{ x: 200 }} color="green" class="mb-4">
-  <DownloadOutline slot="icon" class="w-5 h-5" />
-  Transition type: fly right
-</Toast>
-
-<Toast transition={fly} params={{ y: 200 }} color="green">
-  <DownloadOutline slot="icon" class="w-5 h-5" />
-  Transition type: fly down
-</Toast>
-```
-
-## Undo button
-
-Use this toast component to also show an “undo” button to reverse the action of the user.
-
-```svelte example class="flex justify-center" hideScript
-<script>
-  import { Toast } from 'flowbite-svelte';
-</script>
-
-<Toast contentClass="w-full text-sm font-normal flex items-center justify-between">
-  Conversation archived.
-  <a class="ml-auto font-medium text-primary-600 p-1.5 hover:bg-primary-100 rounded-lg dark:text-primary-500 dark:hover:bg-gray-700" href="/"> Undo </a>
-</Toast>
-```
-
-## Advanced examples
-
-If the toast content grows to multiple lines we need to switch off the `items-center` alignment. Notice how the examples below achieve that by setting `align={flase}` property.
-
-### Toast message
-
-This component can be used to show messages and a CTA button when receiving chat messages, comment notifications, and other use cases.
-
-```svelte example class="flex justify-center"
-<script>
-  import { Toast, Avatar, Button } from 'flowbite-svelte';
-</script>
-
-<Toast align={false} color="none" defaultIconClass="">
-  <Avatar slot="icon" src="/images/profile-picture-1.webp" />
-  <div class="ml-3 text-sm font-normal">
-    <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
-    <div class="mb-2 text-sm font-normal">Hi Neil, thanks for sharing your thoughts regarding Flowbite.</div>
-    <Button size="xs">Reply</Button>
-  </div>
-</Toast>
-```
-
-### Push notification
-
-This component can be used to show notifications for an action from another user such as posting a comment, receiving a like, being tagged. You can show an avatar, icon, message, and the time of the notification.
-
-```svelte example class="flex justify-center"
-<script>
-  import { Toast, Avatar } from 'flowbite-svelte';
-</script>
-
-<Toast align={false}>
-  <span class="font-semibold text-gray-900 dark:text-white">New notification</span>
-  <div class="flex items-center mt-3">
-    <Avatar src="/images/profile-picture-3.webp" />
-    <div class="ml-3">
-      <h4 class="text-sm font-semibold text-gray-900 dark:text-white">Bonnie Green</h4>
-      <div class="text-sm font-normal">commented on your photo</div>
-      <span class="text-xs font-medium text-primary-600 dark:text-primary-500">a few seconds ago</span>
-    </div>
-  </div>
-</Toast>
-```
-
-### Interactive toast
-
-Use this interactive toast component to encourage users to make a certain action such as updating to the latest software version. You can set an icon, message, and two CTA buttons.
-
-<p class="italic">This is an example with the icon and extra content at the same time.</p>
-
-```svelte example class="flex justify-center"
-<script>
-  import { Toast, Button } from 'flowbite-svelte';
-  import { CameraFotoOutline } from 'flowbite-svelte-icons';
-</script>
-
-<Toast align={false}>
-  <CameraFotoOutline slot="icon" class="w-5 h-5" />
-
-  <span class="font-semibold text-gray-900 dark:text-white">Update available</span>
-  <div class="mt-3">
-    <div class="mb-2 text-sm font-normal">A new software version is available for download.</div>
-    <div class="grid grid-cols-2 gap-2">
-      <Button size="xs" class="w-full">Update</Button>
-      <Button size="xs" class="w-full" color="dark">Not now</Button>
-    </div>
-  </div>
-</Toast>
-```
-
-## Positioning
-
-Use the position property to position these toast components relative to the main content wrapper element from your document.
-
-```svelte example hideScript
-<script>
-  import { Toast } from 'flowbite-svelte';
-</script>
-
-<div class="relative h-56">
-  <Toast dismissable={false} position="top-left">Top left positioning.</Toast>
-  <Toast dismissable={false} position="top-right">Top right positioning.</Toast>
-  <Toast dismissable={false} position="bottom-left">Bottom left positioning.</Toast>
-  <Toast dismissable={false} position="bottom-right">Bottom right positioning.</Toast>
-</div>
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### Toast styling
-
-- Use the `class` prop to overwrite `divClass`.
-
-<CompoAttributesViewer {components}/>
-
-## References
-
-- [Flowbite Toast](https://flowbite.com/docs/components/toast/)