flowbite-svelte 0.27.15 → 0.27.16

package/src/routes/utilities/toolbar.md

@@ -1,186 +0,0 @@
----
-layout: utilitiesLayout
-title: Svelte Toolbar - Flowbite
-breadcrumb_title: Toolbar
-dir: Utilities
-description: Use the following Tailwind CSS powered toolbars to show groups of tool buttons
----
-
-
-<MetaTag {breadcrumb_title} {title} {dir} {description}/>
-
-<script>
-  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow , MetaTag } from '../utils'
-  
-  import { Toolbar, ToolbarButton, ToolbarGroup, Avatar, Button, Textarea, Breadcrumb, BreadcrumbItem, Heading, A } from '$lib'
-  import { props as items1 } from '../props/Toolbar.json'
-  import { props as items2 } from '../props/ToolbarButton.json'
-  let propHeader = ['Name', 'Type', 'Default']
-  let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
-  let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
-  
-</script>
-
-<Breadcrumb class="pt-16 py-8">
-  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
-  <BreadcrumbItem>{dir}</BreadcrumbItem>
-  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
-</Breadcrumb>
-
-<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
-
-<CompoDescription>{description}</CompoDescription>
-
-<ExampleDiv>
-<GitHubSource href="toolbar/Toolbar.svelte">Toolbar</GitHubSource>
-<GitHubSource href="toolbar/ToolbarButton.svelte">ToolbarButton</GitHubSource>
-<GitHubSource href="toolbar/ToolbarGroup.svelte">ToolbarGroup</GitHubSource>
-</ExampleDiv>
-
-
-<Htwo label="Setup" />
-
-```html
-<script>
-  import { Toolbar, ToolbarButton, ToolbarGroup } from 'flowbite-svelte';
-</script>
-```
-
-<Htwo label="Default toolbar" />
-
-```svelte example
-<script>
-  import { Toolbar, ToolbarButton, ToolbarGroup } from 'flowbite-svelte';
-</script>
-
-<Toolbar>
-  <ToolbarButton><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg></ToolbarButton>
-  <ToolbarButton><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z" /></svg></ToolbarButton>
-  <ToolbarButton><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg></ToolbarButton>
-</Toolbar>
-```
-
-<Htwo label="Colored toolbars" />
-
-```svelte example class="space-y-4"
-<script>
-  import { Toolbar, ToolbarButton, ToolbarGroup } from 'flowbite-svelte';
-</script>
-
-<Toolbar color="red">
-  <ToolbarButton color="red"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg></ToolbarButton>
-  <ToolbarButton color="red"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z" /></svg></ToolbarButton>
-  <ToolbarButton color="red"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg></ToolbarButton>
-</Toolbar>
-<Toolbar color="blue">
-  <ToolbarButton color="blue"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg></ToolbarButton>
-  <ToolbarButton color="blue"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z" /></svg></ToolbarButton>
-  <ToolbarButton color="blue"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg></ToolbarButton>
-</Toolbar>
-```
-
-<Htwo label="Toolbar with groups" />
-
-```svelte example
-<script>
-  import { Toolbar, ToolbarButton, ToolbarGroup } from 'flowbite-svelte';
-</script>
-
-<Toolbar color="green">
-  <ToolbarGroup>
-    <ToolbarButton color="green">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
-    </ToolbarButton>
-    <ToolbarButton color="green">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z" /></svg>
-    </ToolbarButton>
-    <ToolbarButton color="green">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg>
-    </ToolbarButton>
-  </ToolbarGroup>
-  <ToolbarGroup>
-    <ToolbarButton color="green">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
-    </ToolbarButton>
-    <ToolbarButton color="green">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z" /></svg>
-    </ToolbarButton>
-    <ToolbarButton color="green">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg>
-    </ToolbarButton>
-  </ToolbarGroup>
-  <ToolbarButton slot="end" color="green">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
-  </ToolbarButton>
-</Toolbar>
-```
-
-<Htwo label="WYSIWYG Editor" />
-
-If you want to add other actions as buttons alongside your textarea component, such as with a WYSIWYG editor, then you can use the example below.
-
-```svelte example
-<script>
-  import { Toolbar, ToolbarButton, ToolbarGroup, Textarea, Button } from 'flowbite-svelte';
-</script>
-
-<form>
-  <label for="editor" class="sr-only">Publish post</label>
-  <Textarea id="editor" rows="8" class="mb-4" placeholder="Write a comment">
-    <Toolbar slot="header" embedded>
-      <ToolbarGroup>
-        <ToolbarButton name="Attach file"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" /></svg></ToolbarButton>
-        <ToolbarButton name="Embed map"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /></svg></ToolbarButton>
-        <ToolbarButton name="Upload image"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /></svg></ToolbarButton>
-      </ToolbarGroup>
-      <ToolbarGroup>
-        <ToolbarButton name="Format code"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" /></svg></ToolbarButton>
-        <ToolbarButton name="Add emoji"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" /></svg></ToolbarButton>
-      </ToolbarGroup>
-      <ToolbarButton name="send" slot="end"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" /></svg></ToolbarButton>
-    </Toolbar>
-  </Textarea>
-  <Button>Publish post</Button>
-</form>
-```
-<Htwo label="Comment box" />
-
-Most often the textarea component is used as the main text field input element in comment sections. Use this example to also apply a helper text and buttons below the textarea itself.
-
-```svelte example class="space-y-4"
-<script>
-  import { Toolbar, ToolbarButton, ToolbarGroup, Textarea, Button } from 'flowbite-svelte';
-</script>
-
-<form>
-  <Textarea class="mb-4" placeholder="Write a comment">
-    <div slot="footer" class="flex items-center justify-between">
-    <Button type="submit">Post comment</Button>
-    <Toolbar embedded>
-      <ToolbarButton name="Attach file"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" /></svg></ToolbarButton>
-      <ToolbarButton name="Set location"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /></svg></ToolbarButton>
-      <ToolbarButton name="Upload image"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /></svg></ToolbarButton>
-    </Toolbar>
-    </div>
-  </Textarea>
-</form>
-<p class="ml-auto text-xs text-gray-500 dark:text-gray-400">Remember, contributions to this topic should follow our <a href="/" class="text-blue-600 dark:text-blue-500 hover:underline">Community Guidelines</a>.</p>
-```
-
-<Htwo label="Props" />
-
-The component has the following props, type, and default values. 
-See <A class="hover:underline" href="/pages/types">the types page</A>
-for type information.
-
-<Heading tag="h3" customSize="text-xl font-semibold" class="mb-4 mt-8">Toolbar</Heading>
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={items1} rowState='hover' />
-</TableProp>
-
-<Heading tag="h3" customSize="text-xl font-semibold" class="mb-4 mt-8">ToolbarButton</Heading>
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={items2} rowState='hover' />
-</TableProp>

package/src/routes/utils/CompoDescription.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	export let pClass: string = 'mb-4 text-lg text-gray-500 dark:text-gray-400';
-</script>
-
-<p class={pClass}>
-	<slot />
-</p>

package/src/routes/utils/ExampleDiv.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-  export let tag: 'div' | 'pre' = 'div';
-  export let divClass =
-    'rounded-xl w-full my-4 mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-2 sm:p-6';
-</script>
-
-<svelte:element this={tag} class={classNames(divClass, $$props.class)}>
-  <slot />
-</svelte:element>

package/src/routes/utils/ExampleWrapper.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-  export let divClass =
-    'rounded-xl w-full my-4 mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-2 sm:p-6';
-
-  // the source of the example, if you want it
-  //   export let src;
-
-  // all meta tags of the code block
-  export let meta;
-
-  function hack(node: HTMLElement) {
-    node.parentElement.classList.add('w-full');
-  }
-</script>
-
-<div use:hack class={classNames(divClass, meta.class)}>
-  <slot name="example" />
-</div>
-<div class="code">
-  <pre class="language-svelte"><slot name="code" /></pre>
-</div>

package/src/routes/utils/GitHubSource.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-  export let pClass = 'text-gray-700 dark:text-white mb-1';
-  export let href = '';
-</script>
-
-<p class={pClass}>
-  <svg class="w-5 h-5 inline" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"
-    ><path
-      fill-rule="evenodd"
-      d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-      clip-rule="evenodd" /></svg>
-  <a
-    href="https://github.com/themesberg/flowbite-svelte/tree/main/src/lib/{href}"
-    target="_blank"
-    rel="noreferrer"
-    class="hover:underline hover:text-blue-500">
-    <slot />: View Source Code</a>
-</p>

package/src/routes/utils/Htwo.svelte

@@ -1,29 +0,0 @@
-<script>
-  export let label;
-  let modifiedLabel = label.replace(/\s/g, '_');
-  let hidden = true;
-  const handleMouseover = () => {
-    hidden = false;
-  };
-  const handleMouseout = () => {
-    hidden = true;
-  };
-</script>
-
-<h2
-  class="htwo group text-2xl w-full font-semibold dark:text-white mt-8 mb-4 scroll-mt-20"
-  on:mouseover={handleMouseover}
-  on:focus
-  on:mouseout={handleMouseout}
-  on:blur
-  id={modifiedLabel}>
-  {label}
-  <span class:hidden>
-    <a
-      href="#{modifiedLabel}"
-      class="ml-2 text-blue-700 opacity-0 transition-opacity dark:text-blue-500 group-hover:opacity-100"
-      aria-label={label}>
-      #
-    </a>
-  </span>
-</h2>

package/src/routes/utils/MetaTag.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-  import { MetaTags } from 'svelte-meta-tags';
-  export let breadcrumb_title: string = '';
-  export let description: string = '';
-  export let title: string = '';
-  export let dir: string = '';
-  let dirstring = dir.toLowerCase();
-  let breadcrumb = breadcrumb_title.toLowerCase().replaceAll(' ', '-');
-</script>
-
-<MetaTags
-  title={breadcrumb_title}
-  titleTemplate="%s | Flowbite-Svelte"
-  {description}
-  facebook={{
-    appId: '453670756870545'
-  }}
-  openGraph={{
-    type: 'website',
-    url: `https://flowbite-svelte.com/${dirstring}/${breadcrumb}`,
-    title: `${title}`,
-    description: `${description}`,
-    images: [
-      {
-        url: `https://open-graph-vercel.vercel.app/api/flowbite-svelte?title=${breadcrumb_title}`,
-        width: 1200,
-        height: 630,
-        alt: `${title}`
-      }
-    ],
-    site_name: 'Flowbite-Svelte'
-  }}
-  twitter={{
-    handle: '@shinokada',
-    cardType: 'summary_large_image',
-    title: `${title}`,
-    description: `${description}`,
-    image: `https://open-graph-vercel.vercel.app/api/flowbite-svelte?title=${breadcrumb_title}`,
-    imageAlt: `${title}`
-  }} />

package/src/routes/utils/TableDefaultRow.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-	export let items: Array<Array<string>>;
-	export let html: boolean = false;
-	export let rowState: 'striped' | 'hover' | undefined = undefined;
-	let trClass: string;
-	let trLastClass: string;
-	if (rowState === 'striped') {
-		trClass =
-			'border-b dark:bg-gray-800 dark:border-gray-700 odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700';
-		trLastClass = 'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700';
-	} else if (rowState === 'hover') {
-		trClass =
-			'bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600';
-		trLastClass = 'bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600';
-	} else {
-		trClass = 'bg-white border-b dark:bg-gray-800 dark:border-gray-700';
-		trLastClass = 'bg-white dark:bg-gray-800';
-	}
-</script>
-
-{#each items as item, i}
-	{#if i === items.length - 1}
-		<tr class={trLastClass}>
-			{#each item as cell, j}
-				{#if j === 0}
-					<th
-						scope="row"
-						class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
-					>
-						{#if html}
-							{@html cell}
-						{:else}
-							{cell}
-						{/if}
-					</th>
-				{:else}
-					<td class="px-6 py-4">
-						{#if html}
-							{@html cell}
-						{:else}
-							{cell}
-						{/if}
-					</td>
-				{/if}
-			{/each}
-		</tr>
-	{:else}
-		<tr class={trClass}>
-			{#each item as cell, j}
-				{#if j === 0}
-					<th
-						scope="row"
-						class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
-					>
-						{#if html}
-							{@html cell}
-						{:else}
-							{cell}
-						{/if}
-					</th>
-				{:else}
-					<td class="px-6 py-4">
-						{#if html}
-							{@html cell}
-						{:else}
-							{cell}
-						{/if}
-					</td>
-				{/if}
-			{/each}
-		</tr>
-	{/if}
-{/each}

package/src/routes/utils/TableProp.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-	export let header: Array<string>;
-	export let divClass: string = 'relative overflow-x-auto shadow-md sm:rounded-lg';
-	export let tableClass: string = 'w-full text-sm text-left text-gray-500 dark:text-gray-400';
-	export let theadClass: string =
-		'text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400';
-	export let thClass: string = 'px-6 py-3';
-</script>
-
-<div class={divClass}>
-	<table class={tableClass}>
-		<thead class={theadClass}>
-			<tr>
-				{#each header as column}
-					<th scope="col" class={thClass}>
-						{column}
-					</th>
-				{/each}
-			</tr>
-		</thead>
-		<tbody>
-			<slot />
-		</tbody>
-	</table>
-</div>

package/src/routes/utils/index.ts

@@ -1,91 +0,0 @@
-export { default as CompoDescription } from './CompoDescription.svelte';
-export { default as ExampleDiv } from './ExampleDiv.svelte';
-export { default as GitHubSource } from './GitHubSource.svelte';
-export { default as Htwo } from './Htwo.svelte';
-export { default as MetaTag } from './MetaTag.svelte'
-export { default as TableDefaultRow } from './TableDefaultRow.svelte';
-export { default as TableProp } from './TableProp.svelte';
-
-export const fetchMarkdownPosts = async () => {
-  const componentFiles = import.meta.glob('/src/routes/components/*.md')
-  const formFiles = import.meta.glob('/src/routes/forms/*.md')
-  const typographyFiles = import.meta.glob('/src/routes/typography/*.md')
-  const utilFiles = import.meta.glob('/src/routes/utilities/*.md')
-  const pageFiles = import.meta.glob('/src/routes/pages/*.md')
-  const extendFiles = import.meta.glob('/src/routes/extend/*.md')
-  // returns an array of files
-  const iterableComponentFiles = Object.entries(componentFiles)
-  const iterableFormFiles = Object.entries(formFiles)
-  const iterableTypographyFiles = Object.entries(typographyFiles)
-  const iterableUtilFiles = Object.entries(utilFiles)
-  const iterablePageFiles = Object.entries(pageFiles)
-  const iterableExtendFiles = Object.entries(extendFiles)
-
-  const allComponents = await Promise.all(
-    iterableComponentFiles.map(async ([path, resolver]) => {
-      const { metadata } = await resolver()
-      const filePath = path.slice(22, -3)
-      return {
-        meta: metadata,
-        path: filePath,
-      }
-    })
-  )
-  // returns an array of paths, /radio from /src/routes/forms/radio.md
-  const allForms = await Promise.all(
-    iterableFormFiles.map(async ([path, resolver]) => {
-      const { metadata } = await resolver()
-      const filePath = path.slice(17, -3)
-      return {
-        meta: metadata,
-        path: filePath,
-      }
-    })
-  )
-  // returns an array of paths, /hr from /src/routes/typography/hr.md
-  const allTypographys = await Promise.all(
-    iterableTypographyFiles.map(async ([path, resolver]) => {
-      const { metadata } = await resolver()
-      const filePath = path.slice(22, -3)
-      return {
-        meta: metadata,
-        path: filePath,
-      }
-    })
-  )
-  // returns an array of paths, /closebutton from /src/routes/utilities/closebutton.md
-  const allUtils = await Promise.all(
-    iterableUtilFiles.map(async ([path, resolver]) => {
-      const { metadata } = await resolver()
-      const filePath = path.slice(21, -3)
-      return {
-        meta: metadata,
-        path: filePath,
-      }
-    })
-  )
-  // returns an array of paths, /about from /src/routes/pages/about.md
-  const allPages = await Promise.all(
-    iterablePageFiles.map(async ([path, resolver]) => {
-      const { metadata } = await resolver()
-      const filePath = path.slice(17, -3)
-      return {
-        meta: metadata,
-        path: filePath,
-      }
-    })
-  )
-  // returns an array of paths, /icons from /src/routes/extend/icons.md
-  const allExtends = await Promise.all(
-    iterableExtendFiles.map(async ([path, resolver]) => {
-      const { metadata } = await resolver()
-      const filePath = path.slice(18, -3)
-      return {
-        meta: metadata,
-        path: filePath,
-      }
-    })
-  )
-
-  return { components: allComponents, extend: allExtends, forms: allForms, pages: allPages, typography: allTypographys, utils: allUtils }
-}

package/static/images/carousel-1.svg

@@ -1,4 +0,0 @@
-<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="800" height="800" rx="4" fill="#374151"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M435.728 374.699C442.49 374.699 447.972 369.17 447.972 362.349C447.972 355.529 442.49 350 435.728 350C428.966 350 423.484 355.529 423.484 362.349C423.484 369.17 428.966 374.699 435.728 374.699ZM401.84 449.481H323.72C322.935 449.481 322.456 448.618 322.871 447.952L377.41 360.384C377.796 359.765 378.685 359.743 379.086 360.351C383.293 366.72 402.278 395.489 418.118 419.866L435.099 392.44C435.476 391.832 436.35 391.805 436.765 392.387L476.23 447.899C476.699 448.557 476.237 449.47 475.429 449.478L437.22 449.854L401.84 449.481Z" fill="#6B7280"/>
-</svg>

package/static/images/carousel-2.svg

@@ -1,4 +0,0 @@
-<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="800" height="800" rx="4" fill="#4B5563"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M400 392C406.365 392 412.47 389.471 416.971 384.971C421.471 380.47 424 374.365 424 368C424 361.635 421.471 355.53 416.971 351.029C412.47 346.529 406.365 344 400 344C393.635 344 387.53 346.529 383.029 351.029C378.529 355.53 376 361.635 376 368C376 374.365 378.529 380.47 383.029 384.971C387.53 389.471 393.635 392 400 392V392ZM344 464C344 456.646 345.448 449.364 348.263 442.57C351.077 435.776 355.202 429.602 360.402 424.402C365.602 419.202 371.775 415.077 378.57 412.263C385.364 409.449 392.646 408 400 408C407.354 408 414.636 409.449 421.43 412.263C428.225 415.077 434.398 419.202 439.598 424.402C444.798 429.602 448.923 435.776 451.737 442.57C454.552 449.364 456 456.646 456 464H344Z" fill="#6B7280"/>
-</svg>

package/static/images/carousel-3.svg

@@ -1,4 +0,0 @@
-<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="800" height="800" rx="4" fill="#374151"/>
-<path d="M349.625 345.75C343.207 345.75 338 350.957 338 357.375V442.625C338 449.043 343.207 454.25 349.625 454.25H450.375C456.793 454.25 462 449.043 462 442.625V357.375C462 350.957 456.793 345.75 450.375 345.75H349.625ZM349.625 353.5H375.297C376.096 353.5 376.75 354.154 376.75 354.953V359.797C376.75 360.596 376.096 361.25 375.297 361.25H347.203C346.404 361.25 345.75 360.596 345.75 359.797V357.375C345.75 355.244 347.494 353.5 349.625 353.5ZM452.797 376.75H347.203C346.404 376.75 345.75 376.096 345.75 375.297V366.578C345.75 365.779 346.404 365.125 347.203 365.125H380.625L387.939 354.154C388.205 353.742 388.666 353.5 389.15 353.5H450.375C452.506 353.5 454.25 355.244 454.25 357.375V375.297C454.25 376.096 453.596 376.75 452.797 376.75ZM400 440.688C383.967 440.688 370.938 427.658 370.938 411.625C370.938 395.592 383.967 382.562 400 382.562C416.033 382.562 429.062 395.592 429.062 411.625C429.062 427.658 416.033 440.688 400 440.688ZM400 390.312C388.254 390.312 378.688 399.879 378.688 411.625C378.688 423.371 388.254 432.938 400 432.938C411.746 432.938 421.312 423.371 421.312 411.625C421.312 399.879 411.746 390.312 400 390.312ZM388.375 415.5C386.244 415.5 384.5 413.756 384.5 411.625C384.5 403.076 391.451 396.125 400 396.125C402.131 396.125 403.875 397.869 403.875 400C403.875 402.131 402.131 403.875 400 403.875C395.737 403.875 392.25 407.362 392.25 411.625C392.25 413.756 390.506 415.5 388.375 415.5Z" fill="#6B7280"/>
-</svg>

package/static/images/carousel-4.svg

@@ -1,4 +0,0 @@
-<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="800" height="800" rx="4" fill="#4B5563"/>
-<path d="M457.42 413.283C457.465 412.855 457.6 412.45 457.6 412.023C457.6 404.08 451.142 397.623 443.2 397.623C440.365 397.623 437.755 398.478 435.527 399.873C431.567 391.143 422.815 385.023 412.6 385.023C398.695 385.023 387.4 396.295 387.4 410.223C387.4 410.898 387.557 411.528 387.602 412.18C376.442 413.013 367.6 422.238 367.6 433.623C367.6 445.548 377.275 455.222 389.2 455.222H450.4C462.325 455.222 472 445.548 472 433.623C472 424.15 465.88 416.208 457.42 413.283V413.283ZM360.58 408.198C350.747 398.365 350.747 382.39 360.58 372.58C370.412 362.748 386.388 362.748 396.22 372.58C398.403 374.763 400.022 377.283 401.237 379.938C403.442 379.105 405.76 378.588 408.145 378.25L414.85 358.248C415.75 355.57 413.207 353.05 410.53 353.928L390.775 360.52L381.437 341.89C380.2 339.37 376.6 339.37 375.34 341.89L366.025 360.52L346.247 353.928C343.592 353.05 341.05 355.593 341.927 358.248L348.52 378.003L329.89 387.34C327.37 388.6 327.37 392.178 329.89 393.438L348.52 402.753L341.927 422.508C341.027 425.185 343.57 427.705 346.247 426.828L363.37 421.135C364.742 418.345 366.52 415.803 368.68 413.598C365.732 412.383 362.965 410.583 360.58 408.198V408.198ZM359.5 390.378C359.5 399.558 366.092 407.208 374.777 408.895C376.577 407.838 378.445 406.915 380.447 406.263C381.662 396.295 387.422 387.7 395.612 382.638C392.642 376.09 386.05 371.5 378.4 371.5C367.982 371.5 359.5 379.96 359.5 390.378V390.378Z" fill="#6B7280"/>
-</svg>

package/static/images/carousel-5.svg

@@ -1,4 +0,0 @@
-<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="800" height="800" rx="4" fill="#374151"/>
-<path d="M400 338.583C383.811 338.583 370.688 351.707 370.688 367.896C370.688 380.984 389.845 404.839 397.185 413.498C398.672 415.252 401.331 415.252 402.815 413.498C410.155 404.839 429.313 380.984 429.313 367.896C429.313 351.707 416.189 338.583 400 338.583ZM400 377.667C394.603 377.667 390.229 373.293 390.229 367.896C390.229 362.499 394.603 358.125 400 358.125C405.397 358.125 409.771 362.499 409.771 367.896C409.771 373.293 405.397 377.667 400 377.667ZM337.681 388.822C336.299 389.374 335.115 390.328 334.281 391.56C333.446 392.792 333 394.246 333 395.734V453.968C333 456.601 335.659 458.402 338.104 457.425L370.222 442.806V388.582C368.166 384.865 366.484 381.245 365.279 377.783L337.681 388.822ZM400 422.257C396.727 422.257 393.63 420.819 391.506 418.311C386.933 412.914 382.068 406.768 377.667 400.463V442.803L422.333 457.692V400.465C417.932 406.768 413.07 412.916 408.494 418.313C406.37 420.819 403.273 422.257 400 422.257ZM461.896 376.076L429.778 390.695V457.695L462.319 444.678C463.701 444.126 464.885 443.172 465.72 441.94C466.554 440.708 467 439.255 467 437.767V379.533C467 376.899 464.341 375.098 461.896 376.076Z" fill="#6B7280"/>
-</svg>

package/static/images/components/accordion-dark.svg

@@ -1,40 +0,0 @@
-<svg width="398" height="200" viewBox="0 0 398 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_dd_2407_3180)">
-<g clip-path="url(#clip0_2407_3180)">
-<rect x="6" y="2" width="386" height="188" rx="8" fill="#374151"/>
-<rect x="27" y="19.5" width="140" height="8" rx="2" fill="#9CA3AF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M363.501 25.801C363.342 25.9603 363.125 26.0498 362.9 26.0498C362.675 26.0498 362.459 25.9603 362.299 25.801L359.5 23.0019L356.701 25.801C356.541 25.9558 356.326 26.0415 356.103 26.0395C355.88 26.0376 355.667 25.9482 355.509 25.7906C355.352 25.633 355.262 25.4198 355.261 25.197C355.259 24.9741 355.344 24.7594 355.499 24.5991L358.899 21.1991C359.059 21.0397 359.275 20.9502 359.5 20.9502C359.725 20.9502 359.942 21.0397 360.101 21.1991L363.501 24.5991C363.66 24.7585 363.75 24.9746 363.75 25.2C363.75 25.4254 363.66 25.6416 363.501 25.801Z" fill="#9CA3AF"/>
-<rect x="27" y="52" width="331" height="6" rx="1" fill="#6B7280"/>
-<rect x="27" y="63" width="300.688" height="6" rx="1" fill="#6B7280"/>
-<rect x="27" y="74" width="315.297" height="6" rx="1" fill="#6B7280"/>
-<rect x="27" y="85" width="157.066" height="6" rx="1" fill="#6B7280"/>
-<line x1="6" y1="103.5" x2="392" y2="103.5" stroke="#4B5563"/>
-<rect x="27" y="121.5" width="99" height="8" rx="2" fill="#9CA3AF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M355.499 123.199C355.658 123.04 355.875 122.95 356.1 122.95C356.325 122.95 356.541 123.04 356.701 123.199L359.5 125.998L362.299 123.199C362.377 123.118 362.471 123.053 362.575 123.008C362.679 122.964 362.79 122.94 362.903 122.939C363.016 122.939 363.128 122.96 363.232 123.003C363.337 123.045 363.432 123.109 363.511 123.188C363.591 123.268 363.654 123.363 363.697 123.468C363.74 123.572 363.761 123.684 363.76 123.797C363.759 123.91 363.736 124.021 363.691 124.125C363.647 124.229 363.582 124.322 363.501 124.401L360.101 127.801C359.941 127.96 359.725 128.05 359.5 128.05C359.275 128.05 359.058 127.96 358.899 127.801L355.499 124.401C355.34 124.241 355.25 124.025 355.25 123.8C355.25 123.575 355.34 123.358 355.499 123.199Z" fill="#9CA3AF"/>
-<line x1="6" y1="146.5" x2="392" y2="146.5" stroke="#4B5563"/>
-<line x1="6" y1="146.5" x2="392" y2="146.5" stroke="#4B5563"/>
-<rect x="27" y="164.5" width="115" height="8" rx="2" fill="#9CA3AF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M355.499 166.199C355.658 166.04 355.875 165.95 356.1 165.95C356.325 165.95 356.541 166.04 356.701 166.199L359.5 168.998L362.299 166.199C362.377 166.118 362.471 166.053 362.575 166.008C362.679 165.964 362.79 165.94 362.903 165.939C363.016 165.939 363.128 165.96 363.232 166.003C363.337 166.045 363.432 166.109 363.511 166.188C363.591 166.268 363.654 166.363 363.697 166.468C363.74 166.572 363.761 166.684 363.76 166.797C363.759 166.91 363.736 167.021 363.691 167.125C363.647 167.229 363.582 167.322 363.501 167.401L360.101 170.801C359.941 170.96 359.725 171.05 359.5 171.05C359.275 171.05 359.058 170.96 358.899 170.801L355.499 167.401C355.34 167.241 355.25 167.025 355.25 166.8C355.25 166.575 355.34 166.358 355.499 166.199Z" fill="#9CA3AF"/>
-</g>
-<rect x="6.5" y="2.5" width="385" height="187" rx="7.5" stroke="#4B5563"/>
-</g>
-<defs>
-<filter id="filter0_dd_2407_3180" x="0" y="0" width="398" height="200" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="3"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2407_3180"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="2"/>
-<feGaussianBlur stdDeviation="2"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
-<feBlend mode="normal" in2="effect1_dropShadow_2407_3180" result="effect2_dropShadow_2407_3180"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2407_3180" result="shape"/>
-</filter>
-<clipPath id="clip0_2407_3180">
-<rect x="6" y="2" width="386" height="188" rx="8" fill="white"/>
-</clipPath>
-</defs>
-</svg>