flowbite-svelte 0.44.11 → 0.44.12

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

@@ -1,230 +0,0 @@
----
-layout: componentLayout
-title: Svelte Gallery (Mansonry) - Flowbite
-breadcrumb_title: Svelte Gallery (Masonry)
-component_title: Gallery
-dir: Components
-description: Use the image gallery component based on a masonry grid layout using flex and grid classes from Tailwind CSS to show multiple pictures based on various styles
-thumnailSize: w-64
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer  } from '../../utils'
-  import { P, A } from '$lib'
-  const components = 'Gallery'
-</script>
-
-The gallery component can be used to show multiple images inside a masonry grid layout styles with the utility-first classes from Tailwind CSS to show a collection of pictures to your users based on various layouts, styles, sizes, and colors.
-
-This component is recommended for usage within marketing UI interfaces and website sections when you want to show pictures of your team members, office pictures, or even case study images.
-
-## Set up
-
-Import `Gallery` in the script tag.
-
-```svelte example hideOutput
-<script>
-  import { Gallery } from 'flowbite-svelte';
-</script>
-```
-
-## Default gallery
-
-Use this component to show a collection of images inside a gallery.
-
-Number of rows in the gallery is set by passing the `grid-cols-{n}` Tailwind class (including the reactive prefix). Spacing between images is set by `gap-{n}` class. If you don't set them it behaves like `grid-cols-1` and `gap:inherit`.
-
-Example below show a gallery with three pictures on a row.
-
-```svelte example class="flex flex-wrap gap-2"
-<script>
-  import { Gallery } from 'flowbite-svelte';
-  const images = [
-    { alt: 'erbology', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg' },
-    { alt: 'shoes', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg' },
-    { alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg' },
-    { alt: 'plants', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg' },
-    { alt: 'watch', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg' },
-    { alt: 'shoe', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg' },
-    { alt: 'cream', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-6.jpg' },
-    { alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-7.jpg' },
-    { alt: 'lamp', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-8.jpg' },
-    { alt: 'toiletbag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-9.jpg' },
-    { alt: 'playstation', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-10.jpg' },
-    { alt: 'bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-11.jpg' }
-  ];
-</script>
-
-<Gallery items={images} class="gap-4 grid-cols-2 md:grid-cols-3" />
-```
-
-## Masonry grid
-
-This example can be used to show the images inside a masongry grid layouts with four columns.
-
-```svelte example class="flex flex-wrap gap-2"
-<script>
-  import { Gallery } from 'flowbite-svelte';
-  const images1 = [
-    { alt: 'erbology', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image.jpg' },
-    { alt: 'shoes', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-1.jpg' },
-    { alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-2.jpg' }
-  ];
-  const images2 = [
-    { alt: 'plants', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-3.jpg' },
-    { alt: 'watch', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-4.jpg' },
-    { alt: 'shoe', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-5.jpg' }
-  ];
-  const images3 = [
-    { alt: 'cream', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-6.jpg' },
-    { alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-7.jpg' },
-    { alt: 'lamp', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-8.jpg' }
-  ];
-  const images4 = [
-    { alt: 'toiletbag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-9.jpg' },
-    { alt: 'playstation', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-10.jpg' },
-    { alt: 'bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-11.jpg' }
-  ];
-</script>
-
-<Gallery class="gap-4 grid-cols-2 md:grid-cols-4">
-  <Gallery items={images1} />
-  <Gallery items={images2} />
-  <Gallery items={images3} />
-  <Gallery items={images4} />
-</Gallery>
-```
-
-## Featured image
-
-This example can be used to feature the most important image and show a row of five pictures below.
-
-```svelte example class="flex flex-wrap gap-2"
-<script>
-  import { Gallery } from 'flowbite-svelte';
-  const image1 = {
-    alt: 'erbology',
-    src: 'https://flowbite.s3.amazonaws.com/docs/gallery/featured/image.jpg'
-  };
-  const images2 = [
-    { alt: 'shoes', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg' },
-    { alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg' },
-    { alt: 'plants', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg' },
-    { alt: 'watch', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg' },
-    { alt: 'shoe', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg' }
-  ];
-</script>
-
-<Gallery class="gap-4">
-  <img src={image1.src} alt={image1.alt} class="h-auto max-w-full rounded-lg" />
-  <Gallery class="grid-cols-5" items={images2} />
-</Gallery>
-```
-
-## Quad gallery
-
-Use this example to show four larger images with two items on a row.
-
-```svelte example class="flex flex-wrap gap-2"
-<script>
-  import { Gallery } from 'flowbite-svelte';
-
-  const images = [
-    { alt: 'shoes', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg' },
-    { alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg' },
-    { alt: 'plants', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg' },
-    { alt: 'watch', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg' }
-  ];
-</script>
-
-<Gallery class="gap-2 grid-cols-2" items={images} />
-```
-
-## Gallery with tag filters
-
-Use this example to show a list of tags and filter the images below based on the activately selected tag.
-
-```svelte example class="flex flex-wrap gap-2"
-<script>
-  import { Gallery, Button } from 'flowbite-svelte';
-  const images = [
-    { alt: 'erbology', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg' },
-    { alt: 'shoes', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg' },
-    { alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg' },
-    { alt: 'plants', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg' },
-    { alt: 'watch', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg' },
-    { alt: 'shoe', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg' },
-    { alt: 'cream', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-6.jpg' },
-    { alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-7.jpg' },
-    { alt: 'lamp', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-8.jpg' },
-    { alt: 'toiletbag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-9.jpg' },
-    { alt: 'playstation', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-10.jpg' },
-    { alt: 'bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-11.jpg' }
-  ];
-</script>
-
-<div class="flex items-center justify-center py-4 md:py-8 flex-wrap gap-3 mb-3 mx-auto">
-  <Button pill size="xl" outline>All categories</Button>
-  <Button pill size="xl" color="alternative">Shoes</Button>
-  <Button pill size="xl" color="alternative">Bags</Button>
-  <Button pill size="xl" color="alternative">Electronics</Button>
-  <Button pill size="xl" color="alternative">Gaming</Button>
-</div>
-
-<Gallery items={images} class="gap-4 grid-cols-2 md:grid-cols-3" />
-```
-
-## Heterogeneous gallery
-
-Gallery items don't have to be all the same but then you need to list them manually - don't set the `items` property.
-
-```svelte example class="flex flex-wrap gap-2" hideScript
-<script>
-  import { Gallery } from 'flowbite-svelte';
-</script>
-
-<Gallery class="gap-4 grid-cols-2">
-  <img src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg" alt="shoas" class="h-auto max-w- rounded-lg" />
-  <div class="h-auto max-w- rounded-lg flex items-center justify-center text-6xl font-extrabold bg-red-300">Sale</div>
-  <div class="h-auto max-w- rounded-lg flex items-center justify-center text-6xl font-extrabold bg-blue-300">Sale</div>
-  <img alt="plants" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg" class="h-auto max-w- rounded-lg" />
-</Gallery>
-```
-
-## Custom image rendering
-
-This example shows how to get a complete control over the gallery images look and feel.
-
-```svelte example class="flex flex-wrap gap-2"
-<script>
-  import { Gallery } from 'flowbite-svelte';
-  const images = [
-    { alt: 'shoes', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg' },
-    { alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg' },
-    { alt: 'plants', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg' },
-    { alt: 'watch', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg' },
-    { alt: 'shoe', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg' }
-  ];
-</script>
-
-<Gallery class="gap-4 grid-cols-3" items={images} let:item>
-  <div class="ring-4 ring-red-600 dark:ring-red-400 p-1">
-    <img src={item.src} alt={item.alt} class="h-auto max-w-full" />
-  </div>
-</Gallery>
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### Gallery styling
-
-- Use the `class` prop to overwrite the `div` tag.
-- Use the `classImg` prop to overwrite `imgClass`.
-
-<CompoAttributesViewer {components}/>
-
-## References
-
-- [Flowbite Gallery](https://flowbite.com/docs/components/forms/)

package/src/routes/docs/components/imageData/+server.js

@@ -1,43 +0,0 @@
-/** @type {import("svelte/elements").HTMLImgAttributes[]} */
-export const images = [
-  {
-    alt: 'Cosmic timetraveler',
-    src: '/images/carousel/cosmic-timetraveler-pYyOZ8q7AII-unsplash.webp',
-    title: 'cosmic-timetraveler-pYyOZ8q7AII-unsplash.com'
-  },
-  {
-    alt: 'Cristina Gottardi',
-    src: '/images/carousel/cristina-gottardi-CSpjU6hYo_0-unsplash.webp',
-    title: 'cristina-gottardi-CSpjU6hYo_0-unsplash.com'
-  },
-  {
-    alt: 'Johannes Plenio',
-    src: '/images/carousel/johannes-plenio-RwHv7LgeC7s-unsplash.webp',
-    title: 'johannes-plenio-RwHv7LgeC7s-unsplash.com'
-  },
-  {
-    alt: 'Jonatan Pie',
-    src: '/images/carousel/jonatan-pie-3l3RwQdHRHg-unsplash.webp',
-    title: 'jonatan-pie-3l3RwQdHRHg-unsplash.com'
-  },
-  {
-    alt: 'Mark Harpur',
-    src: '/images/carousel/mark-harpur-K2s_YE031CA-unsplash.webp',
-    title: 'mark-harpur-K2s_YE031CA-unsplash'
-  },
-  {
-    alt: 'Pietro De Grandi',
-    src: '/images/carousel/pietro-de-grandi-T7K4aEPoGGk-unsplash.webp',
-    title: 'pietro-de-grandi-T7K4aEPoGGk-unsplash'
-  },
-  {
-    alt: 'Sergey Pesterev',
-    src: '/images/carousel/sergey-pesterev-tMvuB9se2uQ-unsplash.webp',
-    title: 'sergey-pesterev-tMvuB9se2uQ-unsplash'
-  },
-  {
-    alt: 'Solo travel goals',
-    src: '/images/carousel/solotravelgoals-7kLufxYoqWk-unsplash.webp',
-    title: 'solotravelgoals-7kLufxYoqWk-unsplash'
-  }
-];

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

@@ -1,273 +0,0 @@
----
-layout: componentLayout
-title: Svelte Indicators - Flowbite
-breadcrumb_title: Svelte Indicators
-component_title: Indicators
-dir: Components
-description: Use the indicator component to show a number count, account status, or as a loading label positioned relative to the parent component coded with Tailwind CSS
-thumnailSize: w-64
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
-  import { P, A } from '$lib'
-  const components = 'Indicator'
-</script>
-
-The indicator component can be used as a small element positioned absolutely relative to another component such as a button or card and show a number count, account status (red for offline, green for online) and other useful information.
-
-## Setup
-
-```svelte example hideOutput
-<script>
-  import { Indicator } from 'flowbite-svelte';
-</script>
-```
-
-## Default indicator
-
-Use this example to create a simple indicator with multiple colors and position it anywhere on the website.
-
-```svelte example class="flex gap-2"
-<script>
-  import { Indicator } from 'flowbite-svelte';
-</script>
-
-<Indicator color="gray" />
-<Indicator color="dark" />
-<Indicator color="orange" />
-<Indicator color="blue" />
-<Indicator color="green" />
-<Indicator color="red" />
-<Indicator color="purple" />
-<Indicator color="indigo" />
-<Indicator color="yellow" />
-<Indicator color="teal" />
-```
-
-## Legend indicator
-
-This example can be used as a legend indicator for charts to also add a text next to the bullet point.
-
-```svelte example class="text-sm font-medium text-gray-900 dark:text-white flex gap-2"
-<script>
-  import { Indicator } from 'flowbite-svelte';
-</script>
-
-<span class="flex items-center"><Indicator size="sm" color="orange" class="mr-1.5" />Visitors</span>
-<span class="flex items-center"><Indicator size="sm" color="purple" class="mr-1.5" />Sessions</span>
-<span class="flex items-center"><Indicator size="sm" color="indigo" class="mr-1.5" />Customers</span>
-<span class="flex items-center"><Indicator size="sm" color="teal" class="mr-1.5" />Revenue</span>
-```
-
-## Indicator count
-
-This example can be used to show a number count inside the indicator and position it relative to a button component.
-
-```svelte example class="space-y-4"
-<script>
-  import { Indicator, Button } from 'flowbite-svelte';
-  import { EnvelopeSolid } from 'flowbite-svelte-icons';
-</script>
-
-<Button size="lg" class="relative">
-  <EnvelopeSolid class="w-4 h-4 mr-2 text-white dark:text-white" />
-  <span class="sr-only">Notifications</span>
-  Messages
-  <Indicator color="red" border size="xl" placement="top-right">
-    <span class="text-white text-xs font-bold">8</span>
-  </Indicator>
-</Button>
-```
-
-## Status indicator
-
-Use this example to show a status indicator for the currently logged in user by showing red for offline and green for online.
-
-`Avatar` component uses `Indicator` internally as parameter `dot`. You can pass all props accepted by `Indicator` component as an object.
-
-```svelte example class="flex gap-2"
-<script>
-  import { Indicator, Avatar } from 'flowbite-svelte';
-</script>
-
-<Avatar src="/images/profile-picture-5.webp" dot={{ color: 'green', size: 'lg', placement: 'top-right' }} />
-<Avatar src="/images/profile-picture-5.webp" dot={{ color: 'red', size: 'lg', placement: 'top-right' }} />
-```
-
-## Badge indicator
-
-This example can be used to add an indicator inside of a badge component.
-
-```svelte example class="flex gap-2"
-<script>
-  import { Indicator, Avatar, Badge } from 'flowbite-svelte';
-</script>
-
-<ul class="max-w-sm divide-y divide-gray-200 dark:divide-gray-700 w-full">
-  <li class="py-3 sm:py-4">
-    <div class="flex items-center space-x-3">
-      <Avatar src="/images/profile-picture-5.webp" alt="Neil image" />
-      <div class="flex-1 min-w-0">
-        <p class="text-sm font-semibold text-gray-900 truncate dark:text-white">Neil Sims</p>
-        <p class="text-sm text-gray-500 truncate dark:text-gray-400">email@flowbite.com</p>
-      </div>
-      <Badge color="green" rounded class="px-2.5 py-0.5">
-        <Indicator color="green" size="xs" class="mr-1" />Available
-      </Badge>
-    </div>
-  </li>
-  <li class="py-3 sm:py-4">
-    <div class="flex items-center space-x-3">
-      <div class="flex-shrink-0">
-        <Avatar src="/images/profile-picture-4.webp" alt="Bonnie image" />
-      </div>
-      <div class="flex-1 min-w-0">
-        <p class="text-sm font-semibold text-gray-900 truncate dark:text-white">Bonnie Green</p>
-        <p class="text-sm text-gray-500 truncate dark:text-gray-400">email@flowbite.com</p>
-      </div>
-      <Badge color="red" rounded class="px-2.5 py-0.5">
-        <Indicator color="red" size="xs" class="mr-1" />Unavailable
-      </Badge>
-    </div>
-  </li>
-</ul>
-```
-
-## Stepper indicator
-
-You can also use the indicators inside of a stepper component when completing a form element.
-
-```svelte example class="space-y-8"
-<script>
-  import { Indicator } from 'flowbite-svelte';
-  import { CheckCircleSolid } from 'flowbite-svelte-icons';
-</script>
-
-<ol class="flex items-center">
-  <li class="relative w-full mb-6">
-    <div class="flex items-center">
-      <Indicator size="xl" color="none" class="bg-primary-200 dark:bg-primary-900 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
-        <CheckCircleSolid class="w-6 h-6 text-primary-600 dark:text-primary-300" />
-      </Indicator>
-      <div class="flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
-    </div>
-    <div class="mt-3">
-      <h3 class="font-medium text-gray-900 dark:text-white">Step 1</h3>
-    </div>
-  </li>
-  <li class="relative w-full mb-6">
-    <div class="flex items-center">
-      <Indicator size="xl" color="none" class="bg-primary-200 dark:bg-primary-900 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
-        <CheckCircleSolid class="w-6 h-6 text-primary-600 dark:text-primary-300" />
-      </Indicator>
-      <div class="flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
-    </div>
-    <div class="mt-3">
-      <h3 class="font-medium text-gray-900 dark:text-white">Step 2</h3>
-    </div>
-  </li>
-  <li class="relative w-full mb-6">
-    <div class="flex items-center">
-      <Indicator size="xl" color="none" class="bg-primary-200 dark:bg-primary-900 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
-        <CheckCircleSolid class="w-6 h-6 text-primary-600 dark:text-primary-300" />
-      </Indicator>
-      <div class="flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
-    </div>
-    <div class="mt-3">
-      <h3 class="font-medium text-gray-900 dark:text-white">Step 2</h3>
-    </div>
-  </li>
-  <li class="relative w-full mb-6">
-    <div class="flex items-center">
-      <Indicator size="xl" color="gray" class="dark:bg-gray-700 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
-        <CheckCircleSolid class="w-6 h-6 text-gray-800 dark:text-gray-300" />
-      </Indicator>
-    </div>
-    <div class="mt-3">
-      <h3 class="font-medium text-gray-900 dark:text-white">Step 3</h3>
-    </div>
-  </li>
-</ol>
-<ol class="flex items-center">
-  <li class="relative w-full mb-6">
-    <div class="flex items-center">
-      <Indicator size="xl" color="none" class="bg-primary-200 dark:bg-primary-900 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
-        <Indicator color="orange" />
-      </Indicator>
-      <div class="flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
-    </div>
-    <div class="mt-3">
-      <h3 class="font-medium text-gray-900 dark:text-white">Step 1</h3>
-    </div>
-  </li>
-  <li class="relative w-full mb-6">
-    <div class="flex items-center">
-      <Indicator size="xl" color="none" class="bg-primary-200 dark:bg-primary-900 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
-        <Indicator color="orange" />
-      </Indicator>
-      <div class="flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
-    </div>
-    <div class="mt-3">
-      <h3 class="font-medium text-gray-900 dark:text-white">Step 2</h3>
-    </div>
-  </li>
-  <li class="relative w-full mb-6">
-    <div class="flex items-center">
-      <Indicator size="xl" color="none" class="bg-primary-200 dark:bg-primary-900 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
-        <Indicator color="orange" />
-      </Indicator>
-      <div class="flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
-    </div>
-    <div class="mt-3">
-      <h3 class="font-medium text-gray-900 dark:text-white">Step 2</h3>
-    </div>
-  </li>
-  <li class="relative w-full mb-6">
-    <div class="flex items-center">
-      <Indicator size="xl" color="gray" class="dark:bg-gray-700 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
-        <Indicator color="dark" class="dark:!bg-gray-300" />
-      </Indicator>
-    </div>
-    <div class="mt-3">
-      <h3 class="font-medium text-gray-900 dark:text-white">Step 3</h3>
-    </div>
-  </li>
-</ol>
-```
-
-## Indicator position
-
-Use these examples to position the indicator component anywhere relative to the parent element.
-
-```svelte example class="flex gap-4"
-<script>
-  import { Indicator } from 'flowbite-svelte';
-</script>
-
-<div class="w-56 h-56 relative bg-gray-100 borer border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
-  <Indicator placement="top-left" color="gray" />
-  <Indicator placement="top-center" color="dark" />
-  <Indicator placement="top-right" color="orange" />
-  <Indicator placement="center-left" color="green" />
-  <Indicator placement="center" color="red" />
-  <Indicator placement="center-right" color="purple" />
-  <Indicator placement="bottom-left" color="indigo" />
-  <Indicator placement="bottom-center" color="yellow" />
-  <Indicator placement="bottom-right" color="teal" />
-</div>
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### Indicator styling
-
-- Use the `class` prop to overwrite the `div` tag class.
-
-<CompoAttributesViewer {components}/>
-
-## References
-
-- [Flowbite Indicators](https://flowbite.com/docs/components/indicators/)