flowbite-svelte 0.44.11 → 0.44.13

package/src/routes/docs/typography/list.md

@@ -1,358 +0,0 @@
----
-layout: componentLayout
-title: Svelte Lists - Flowbite
-breadcrumb_title: Svelte Lists
-component_title: List
-dir: Typography
-description: Use the list component to show an unordered or ordered list of items based on multiple styles, layouts, and variants built with Tailwind CSS and Flowbite
-thumnailSize: w-64
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
- 
-  const components = 'List, Li, DescriptionList'
-</script>
-
-Get started with a collection of list components built with Tailwind CSS for ordered and unordered lists with bullets, numbers, or icons and other styles and layouts to show a list of items inside an article or throughout your web page.
-
-## Setup
-
-```html
-<script>
-  import { List, Li } from 'flowbite-svelte';
-</script>
-```
-
-## Unordored list
-
-Use this example to create a default unordered list of items.
-
-```svelte example
-<script>
-  import { Li, List, Heading } from 'flowbite-svelte';
-</script>
-
-<Heading tag="h2" customSize="text-lg font-semibold" class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">Password requirements</Heading>
-<List tag="ul" class="space-y-1 text-gray-500 dark:text-gray-400">
-  <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>
-```
-
-### Icons
-
-This example can be used to apply custom icons instead of the default bullets for the list items.
-
-```svelte example
-<script>
-  import { List, Li, Heading } from 'flowbite-svelte';
-  import { CheckCircleSolid, CloseCircleSolid } from 'flowbite-svelte-icons';
-</script>
-
-<Heading tag="h2" customSize="text-lg font-semibold" class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">Password requirements</Heading>
-<List tag="ul" class="space-y-1 text-gray-500 dark:text-gray-400" list="none">
-  <Li icon>
-    <CheckCircleSolid class="w-3.5 h-3.5 mr-2 text-green-500 dark:text-green-400" />
-    At least 10 characters (and up to 100 characters)
-  </Li>
-  <Li icon>
-    <CheckCircleSolid class="w-3.5 h-3.5 mr-2 text-green-500 dark:text-green-400" />
-    At least one lowercase character
-  </Li>
-  <Li icon>
-    <CloseCircleSolid class="w-3.5 h-3.5 mr-2 text-gray-500 dark:text-gray-400" />
-    Inclusion of at least one special character, e.g., ! @ # ?
-  </Li>
-</List>
-```
-
-### Nested
-
-Use this example to nested another list of items inside the parent list element.
-
-```svelte example
-<script>
-  import { List, Li } from 'flowbite-svelte';
-</script>
-
-<List tag="ul" class="space-y-4 text-gray-500 dark:text-gray-400">
-  <Li>
-    List item one
-    <List tag="ol" class="pl-5 mt-2 space-y-1">
-      <Li>You might feel like you are being really "organized" o</Li>
-      <Li>Nested navigation in UIs is a bad idea too, keep things as flat as possible.</Li>
-      <Li>Nesting tons of folders in your source code is also not helpful.</Li>
-    </List>
-  </Li>
-  <Li>
-    List item two
-    <List tag="ol" class="pl-5 mt-2 space-y-1">
-      <Li>I'm not sure if we'll bother styling more than two levels deep.</Li>
-      <Li>Two is already too much, three is guaranteed to be a bad idea.</Li>
-      <Li>If you nest four levels deep you belong in prison.</Li>
-    </List>
-  </Li>
-  <Li>
-    List item three
-    <List tag="ol" class="pl-5 mt-2 space-y-1">
-      <Li>Again please don't nest lists if you want</Li>
-      <Li>Nobody wants to look at this.</Li>
-      <Li>I'm upset that we even have to bother styling this.</Li>
-    </List>
-  </Li>
-</List>
-```
-
-### Unstyled
-
-Use the `list="none"` prop to disable the list style bullets or numbers.
-
-```svelte example
-<script>
-  import { List, Li, Heading } from 'flowbite-svelte';
-</script>
-
-<Heading tag="h2" customSize="text-lg font-semibold" class="mb-2 text-lg font-semibold  text-gray-900 dark:text-white">Password requirements</Heading>
-<List tag="ul" class="space-y-1 text-gray-500 dark:text-gray-400" list="none">
-  <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>
-```
-
-## Ordered list
-
-Use the `tag="ol"` prop to create an ordered list of items with numbers.
-
-```svelte example
-<script>
-  import { List, Li, Span, Heading } from 'flowbite-svelte';
-</script>
-
-<Heading tag="h2" customSize="text-lg font-semibold" class="mb-2 text-lg font-semibold  text-gray-900 dark:text-white">Top students:</Heading>
-<List tag="ul" class="space-y-1 text-gray-500 dark:text-gray-400">
-  <Li><Span>Bonnie Green</Span> with <Span>70</Span> points</Li>
-  <Li><Span>Jese Leos</Span> with <Span>63</Span> points</Li>
-  <Li><Span>Leslie Livingston</Span> with <Span>57</Span> points</Li>
-</List>
-```
-
-### Nested
-
-This example can be used to nest multiple lists into each other.
-
-```svelte example
-<script>
-  import { List, Li } from 'flowbite-svelte';
-</script>
-
-<List tag="ol" list="decimal" class="text-gray-500 dark:text-gray-400">
-  <Li>
-    List item one
-    <List tag="ul" class="pl-5 mt-2 space-y-1">
-      <Li>You might feel like you are being really "organized" o</Li>
-      <Li>Nested navigation in UIs is a bad idea too, keep things as flat as possible.</Li>
-      <Li>Nesting tons of folders in your source code is also not helpful.</Li>
-    </List>
-  </Li>
-  <Li>
-    List item two
-    <List tag="ul" class="pl-5 mt-2 space-y-1">
-      <Li>I'm not sure if we'll bother styling more than two levels deep.</Li>
-      <Li>Two is already too much, three is guaranteed to be a bad idea.</Li>
-      <Li>If you nest four levels deep you belong in prison.</Li>
-    </List>
-  </Li>
-  <Li>
-    List item three
-    <List tag="ul" class="pl-5 mt-2 space-y-1 text-gray-500 dark:text-gray-400">
-      <Li>Again please don't nest lists if you want</Li>
-      <Li>Nobody wants to look at this.</Li>
-      <Li>I'm upset that we even have to bother styling this.</Li>
-    </List>
-  </Li>
-</List>
-```
-
-## Description List
-
-Create a description list by using the `tag="dl"` prop and set the term and name with the following example.
-
-```svelte example
-<script>
-  import { List, Li, DescriptionList } from 'flowbite-svelte';
-</script>
-
-<List tag="dl" class="text-gray-900 dark:text-white divide-y divide-gray-200  dark:divide-gray-700">
-  <div class="flex flex-col pb-3">
-    <DescriptionList tag="dt" class="mb-1">Email address</DescriptionList>
-    <DescriptionList tag="dd">yourname@flowbite.com</DescriptionList>
-  </div>
-  <div class="flex flex-col pb-3">
-    <DescriptionList tag="dt" class="mb-1">Home address</DescriptionList>
-    <DescriptionList tag="dd">92 Miles Drive, Newark, NJ 07103, California, USA</DescriptionList>
-  </div>
-  <div class="flex flex-col pb-3">
-    <DescriptionList tag="dt" class="mb-1">Phone number</DescriptionList>
-    <DescriptionList tag="dd">+00 123 456 789 / +12 345 678</DescriptionList>
-  </div>
-</List>
-```
-
-## List with icon
-
-Use this example to create a list of items with custom SVG icons instead of the default bullets.
-
-```svelte example
-<script>
-  import { List, Li, Span } from 'flowbite-svelte';
-  import { CheckOutline } from 'flowbite-svelte-icons';
-</script>
-
-<List tag="ul" class="mb-8 space-y-4 text-gray-500 dark:text-gray-400" list="none">
-  <Li icon class="gap-3">
-    <CheckOutline class="w-3.5 h-3.5 text-green-500 dark:text-green-400" />
-    Individual configuration
-  </Li>
-  <Li icon class="gap-3">
-    <CheckOutline class="w-3.5 h-3.5 text-green-500 dark:text-green-400" />
-    No setup, or hidden fees
-  </Li>
-  <Li icon class="gap-3">
-    <CheckOutline class="w-3.5 h-3.5 text-green-500 dark:text-green-400" />
-    <span>Team size: <Span>1 developer</Span></span>
-  </Li>
-  <Li icon class="gap-3">
-    <CheckOutline class="w-3.5 h-3.5 text-green-500 dark:text-green-400" />
-    <span>Premium support: <Span>6 months</Span></span>
-  </Li>
-  <Li icon class="gap-3">
-    <CheckOutline class="w-3.5 h-3.5 text-green-500 dark:text-green-400" />
-    <span>Free updates: <Span>6 months</Span></span>
-  </Li>
-</List>
-```
-
-## Advanced layout
-
-This example can be used to show more details for each list item such as the user’s name, email and profile picture.
-
-```svelte example
-<script>
-  import { List, Li } from 'flowbite-svelte';
-</script>
-
-<List tag="ul" list="none" class="max-w-md divide-y divide-gray-200 dark:divide-gray-700">
-  <Li class="pb-3 sm:pb-4">
-    <div class="flex items-center space-x-4">
-      <div class="flex-shrink-0">
-        <img class="w-8 h-8 rounded-full" src="/images/profile-picture-1.webp" alt="Neil profile" />
-      </div>
-      <div class="flex-1 min-w-0">
-        <p class="text-sm font-medium 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>
-      <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$320</div>
-    </div>
-  </Li>
-  <Li class="py-3 sm:py-4">
-    <div class="flex items-center space-x-4">
-      <div class="flex-shrink-0">
-        <img class="w-8 h-8 rounded-full" src="/images/profile-picture-2.webp" alt="Bonnie profile" />
-      </div>
-      <div class="flex-1 min-w-0">
-        <p class="text-sm font-medium 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>
-      <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$3467</div>
-    </div>
-  </Li>
-  <Li class="py-3 sm:py-4">
-    <div class="flex items-center space-x-4">
-      <div class="flex-shrink-0">
-        <img class="w-8 h-8 rounded-full" src="/images/profile-picture-3.webp" alt="Michael profile" />
-      </div>
-      <div class="flex-1 min-w-0">
-        <p class="text-sm font-medium text-gray-900 truncate dark:text-white">Michael Gough</p>
-        <p class="text-sm text-gray-500 truncate dark:text-gray-400">email@flowbite.com</p>
-      </div>
-      <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$67</div>
-    </div>
-  </Li>
-  <Li class="py-3 sm:py-4">
-    <div class="flex items-center space-x-4">
-      <div class="flex-shrink-0">
-        <img class="w-8 h-8 rounded-full" src="/images/profile-picture-4.webp" alt="Thomas profile" />
-      </div>
-      <div class="flex-1 min-w-0">
-        <p class="text-sm font-medium text-gray-900 truncate dark:text-white">Thomas Lean</p>
-        <p class="text-sm text-gray-500 truncate dark:text-gray-400">email@flowbite.com</p>
-      </div>
-      <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$2367</div>
-    </div>
-  </Li>
-  <Li class="py-3 sm:py-4">
-    <div class="flex items-center space-x-4">
-      <div class="flex-shrink-0">
-        <img class="w-8 h-8 rounded-full" src="/images/profile-picture-5.webp" alt="Lana profile" />
-      </div>
-      <div class="flex-1 min-w-0">
-        <p class="text-sm font-medium text-gray-900 truncate dark:text-white">Lana Byrd</p>
-        <p class="text-sm text-gray-500 truncate dark:text-gray-400">email@flowbite.com</p>
-      </div>
-      <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$367</div>
-    </div>
-  </Li>
-</List>
-```
-
-## Horizontal List
-
-Use this example to create a horizontally aligned list of items.
-
-```svelte example
-<script>
-  import { List, Li, A } from 'flowbite-svelte';
-</script>
-
-<List tag="ul" list="none" class="flex flex-wrap justify-center items-center mb-6">
-  <Li>
-    <A href="/" class="mr-4 hover:underline md:mr-6" textColor="text-gray-700 dark:text-white">About</A>
-  </Li>
-  <Li>
-    <A href="/" class="mr-4 hover:underline md:mr-6" textColor="text-gray-700 dark:text-white">Premium</A>
-  </Li>
-  <Li>
-    <A href="/" class="mr-4 hover:underline md:mr-6" textColor="text-gray-700 dark:text-white">Campaigns</A>
-  </Li>
-  <Li>
-    <A href="/" class="mr-4 hover:underline md:mr-6" textColor="text-gray-700 dark:text-white">Blog</A>
-  </Li>
-  <Li>
-    <A href="/" class="mr-4 hover:underline md:mr-6" textColor="text-gray-700 dark:text-white">Affiliate Program</A>
-  </Li>
-  <Li>
-    <A href="/" class="mr-4 hover:underline md:mr-6" textColor="text-gray-700 dark:text-white">FAQs</A>
-  </Li>
-</List>
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### List styling
-
-- Use the `class` prop to overwrite the list class.
-
-### Li styling
-
-- Use the `class` prop to overwrite the `li` tag class.
-
-### DescriptionList styling
-
-- Use the `class` prop to overwrite the `description` tag class.
-
-<CompoAttributesViewer {components}/>

package/src/routes/docs/typography/paragraph.md

@@ -1,265 +0,0 @@
----
-layout: componentLayout
-title: Svelte Paragraph - Flowbite
-breadcrumb_title: Svelte Paragraph
-component_title: Paragraph
-dir: Typography
-description: Use the paragraph component to create multiple blocks of text separated by blank lines and write content based on multiple layouts and styles
-thumnailSize: w-64
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils';
-  import { Layout, P, A, Heading } from '$lib';
-
-  const components = 'P, Layout'
-</script>
-
-The paragraph element is one of the most commonly used HTML tags on a document page because it is used to write longer blocks of text separated by a blank line and can massively improve the on-page SEO of the page when used correctly. Get started with a collection of paragraph components based on multiple styles, layouts, colors and sizes to use for your website.
-
-## Default paragraph
-
-Use this example of a paragraph element to use inside article content or a landing page.
-
-```svelte example
-<script>
-  import { P } from 'flowbite-svelte';
-</script>
-
-<P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
-<P weight="light" color="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</P>
-```
-
-## Leading paragraph
-
-The leading text can be used as the first paragraph inside an article content page.
-
-```svelte example
-<script>
-  import { P } from 'flowbite-svelte';
-</script>
-
-<P class="mb-3 md:text-xl" weight="light" size="lg" color="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work and deploy.</P>
-<P weight="light" color="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
-```
-
-## First letter
-
-Use `firstupper` prop to highlight the first letter of the paragraph, often used in e-books and PDF documents.
-
-```svelte example
-<script>
-  import { P } from 'flowbite-svelte';
-</script>
-
-<P class="mb-3" color="text-gray-500 dark:text-gray-400" firstupper>Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
-<P weight="light" color="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</P>
-```
-
-## Paragraph link
-
-This example can be used to add a custom styled link element inside the paragraph.
-
-```svelte example
-<script>
-  import { P, A } from 'flowbite-svelte';
-</script>
-
-<P weight="light" color="text-gray-500 dark:text-gray-400">
-  Track work across the enterprise through an open, collaborative platform. <A href="/">Link issues across Jira</A> and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
-</P>
-```
-
-## Paragraph bold
-
-Use this example to highlight a piece of text inside the paragraph by using a bolder font weight.
-
-```svelte example
-<script>
-  import { P } from 'flowbite-svelte';
-</script>
-
-<P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">
-  Track work across the enterprise through an open, collaborative platform. <strong class="font-semibold text-gray-900 dark:text-white"> Link issues across Jira </strong>
-  and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
-</P>
-```
-
-## Paragraph underline
-
-This example can be used to underline a certain part of the text inside the paragraph.
-
-```svelte example
-<script>
-  import { P } from 'flowbite-svelte';
-</script>
-
-<P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">
-  Track work across the enterprise through an open, collaborative platform. <u class="underline"> Link issues across Jira </u>
-  and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
-</P>
-```
-
-## Paragraph italic
-
-Use this example to make the font style of the text inside the paragraph italic.
-
-```svelte example
-<script>
-  import { P } from 'flowbite-svelte';
-</script>
-
-<P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">
-  Track work across the enterprise through an open, collaborative platform. <em class="font-italic"> Link issues across Jira </em>
-  and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
-</P>
-```
-
-## Paragraph popover
-
-Get started with this example to show a popover with extra information inside paragraph elements.
-
-```svelte example class="flex items-end h-96"
-<script>
-  import { Popover, P, A } from 'flowbite-svelte';
-  import { ChevronRightSolid } from 'flowbite-svelte-icons';
-</script>
-
-<P weight="font-light" color="text-gray-500 dark:text-gray-400">
-  Due to its central geographic location in Southern Europe, <A href="/" id="popover-image">Italy</A> has historically been home to myriad peoples and cultures. In addition to the various ancient peoples dispersed throughout what is now modern-day Italy, the most predominant being the Indo-European Italic peoples who gave the peninsula its name, beginning from the classical era, Phoenicians and Carthaginians founded colonies mostly in insular Italy
-</P>
-<Popover triggeredBy="#popover-image" class="w-96 text-sm font-light" defaultClass="">
-  <div class="grid grid-cols-5">
-    <div class="col-span-3 p-3">
-      <div class="space-y-2">
-        <h3 class="text-xl font-medium text-gray-900 dark:text-white">About Italy</h3>
-        <p class="text-gray-500 dark:text-gray-400">Italy is located in the middle of the Mediterranean Sea, in Southern Europe it is also considered part of Western Europe.</p>
-        <A href="/">Read more <ChevronRightSolid class="w-2 h-2 ml-1.5" /></A>
-      </div>
-    </div>
-    <img src="/images/image-1.webp" class="col-span-2 h-full rounded-r-lg" alt="Italy map" />
-  </div>
-</Popover>
-```
-
-## Layout
-
-Get started with examples of layouts for the paragraph component to separate content into multiple rows and columns.
-
-### One column
-
-Use this example to show multiple paragraphs on a single line.
-
-```svelte example
-<script>
-  import { P } from 'flowbite-svelte';
-</script>
-
-<P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
-<P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</P>
-```
-
-### Two columns even
-
-Use this example to separate paragraphs into two columns for better readability.
-
-```svelte example
-<script>
-  import { P, Layout } from 'flowbite-svelte';
-</script>
-
-<P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
-<Layout gap={6}>
-  <P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
-  <P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</P>
-</Layout>
-<P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</P>
-```
-
-### Three columns even
-
-This example can be used to separate paragraphs into three separate columns.
-
-```svelte example
-<script>
-  import { P, Layout } from 'flowbite-svelte';
-</script>
-
-<P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
-<Layout gap={6} cols="grid-cols-1 sm:grid-cols-3">
-  <P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
-  <P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</P>
-  <P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</P>
-</Layout>
-<P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</P>
-```
-
-### Two columns uneven
-
-Use this example to separate paragraphs into two uneven columns.
-
-```svelte example
-<script>
-  import { P, Layout } from 'flowbite-svelte';
-</script>
-
-<P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
-<Layout gap={6} cols="grid-cols-1 sm:grid-cols-3">
-  <div class="col-span-2">
-    <P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
-    <P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</P>
-  </div>
-  <P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</P>
-</Layout>
-<P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</P>
-```
-
-## Text alignment
-
-Align the paragraph component to the left (default), center or right side of the document page using the `text-left|center|right` utility class from Tailwind CSS.
-
-### Left
-
-The default alignment of the paragraph is to the left side and you can use the `align="left"` prop to align it manually.
-
-```svelte example
-<script>
-  import { P } from 'flowbite-svelte';
-</script>
-
-<P align="left">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
-```
-
-### Center
-
-Use the `align="center"` prop to align the paragraph text to the center.
-
-```svelte example
-<script>
-  import { P } from 'flowbite-svelte';
-</script>
-
-<P align="center">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
-```
-
-### Right
-
-Use the `align="right"` prop to align the paragraph text the right side of the page.
-
-```svelte example
-<script>
-  import { P } from 'flowbite-svelte';
-</script>
-
-<P align="right">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### P styling
-
-- Use the `class` prop to overwrite the `p` tag class.
-
-<CompoAttributesViewer {components}/>