flowbite-svelte 0.27.15 → 0.27.16

package/src/routes/forms/radio.md

@@ -1,330 +0,0 @@
----
-layout: formLayout
-title: Svelte Radio - Flowbite
-breadcrumb_title: Radio
-dir: Forms
-description: Get started with the radio component to let the user choose a single option from multiple options in the form of a circle based on multiple styles and colors
----
-
-<MetaTag {breadcrumb_title} {title} {dir} {description}/>
-
-<script>
-  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
-
-  import { Breadcrumb, BreadcrumbItem, Badge, Heading, A } from '$lib'
-  import { props as items } from '../props/Radio.json'
-  import { props as items2 } from '../props/Label.json'
-  import { props as items3 } from '../props/Helper.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="forms/Radio.svelte">Radio</GitHubSource>
-</ExampleDiv>
-
-The radio component can be used to allow the user to choose a single option from one or more available options coded with the utility classes from Tailwind CSS and available in multiple styles, variants, and colors and support dark mode.
-
-<Htwo label="Setup" />
-
-```html
-<script>
-  import { Radio } from 'flowbite-svelte'
-</script>
-```
-
-<Htwo label="Radio examples" />
-
-Use the default example of a radio component with the checked and unchecked state.
-
-```svelte example class="flex flex-col gap-4" hideScript
-<script>
-  import { Radio } from 'flowbite-svelte'
-</script>
-
-<Radio name="example">Default radio</Radio>
-<Radio name="example">Checked state</Radio>
-```
-
-<Htwo label="Disabled state" />
-
-Apply the `disabled` attribute to the radio component to disallow the selection for the user.
-
-This example can be used for the disabled state of the radio component by applying the disabled attribute to the input element.
-
-```svelte example class="flex flex-col gap-4" hideScript
-<script>
-  import { Radio } from 'flowbite-svelte'
-</script>
-
-<Radio name="disabled-state" disabled>Disabled radio</Radio>
-<Radio name="disabled-state" disabled>Disabled checked</Radio>
-```
-
-<Htwo label="Alternative syntax" />
-
-If you need separate control over the label and the radio you can use the verbose syntax, but then you need to take care about aligning manually.
-
-```svelte example class="flex flex-col gap-4" hideScript
-<script>
-  import { Radio, Table, TableHead, TableHeadCell, TableBody, TableBodyCell, TableBodyRow, Label } from 'flowbite-svelte'
-</script>
-
-<Table>
-  <TableHead>
-    <TableHeadCell>Left column</TableHeadCell>
-    <TableHeadCell>Right column</TableHeadCell>
-  </TableHead>
-  <TableBody class="divide-y dark:divide-gray-700">
-    <TableBodyRow class="divide-x dark:divide-gray-700">
-      <TableBodyCell><Label for="radio1">Default radio</Label></TableBodyCell>
-      <TableBodyCell><Label for="radio2">Disabled radio</Label></TableBodyCell>
-    </TableBodyRow>
-    <TableBodyRow class="divide-x dark:divide-gray-700">
-      <TableBodyCell><Radio name="separate" id="radio1" /></TableBodyCell>
-      <TableBodyCell><Radio name="separate" id="radio2" disabled/></TableBodyCell>
-    </TableBodyRow>
-  </TableBody>
-</Table>
-
-<Label color='red' class="mt-4 flex items-center font-bold italic">
-  Label on the other side <Radio name="separate" class="ml-2"/>
-</Label>
-```
-
-<Htwo label="Radio with a link" />
-
-Use this example if you want to add an anchor link inside the label of the radio component.
-
-```svelte example hideScript
-<script>
-  import { Radio } from 'flowbite-svelte'
-</script>
-
-<Radio name="with-link">I agree with the <a href="/" class="text-blue-600 dark:text-blue-500 hover:underline ml-1">terms and conditions</a>.</Radio>
-```
-
-<Htwo label="Helper text" />
-
-Get started with this example if you want to add a secondary helper text for the radio component.
-
-```svelte example
-<script>
-  import { Radio, Helper } from 'flowbite-svelte'
-</script>
-
-<Radio aria-describedby="helper-checkbox-text">Free shipping via Flowbite</Radio>
-<Helper id="helper-checkbox-text" class="pl-6">For orders shipped from $25 in books or $29 in other categories</Helper>
-```
-
-<Htwo label="Bordered" />
-
-Use this example of a radio inside a card element to enable a larger area of clicking activation.
-
-```svelte example hideScript
-<script>
-  import { Radio } from 'flowbite-svelte'
-</script>
-
-<div class="grid grid-cols-2 gap-6">
-  <div class="rounded border border-gray-200 dark:border-gray-700">
-    <Radio name="bordered" class="w-full p-4">Default radio</Radio>
-  </div>
-  <div class="rounded border border-gray-200 dark:border-gray-700">
-    <Radio name="bordered" class="w-full p-4">Checked state</Radio>
-  </div>
-</div>
-```
-
-<Htwo label="Radio list group" />
-
-Use this example to show a list of radio items grouped inside a card.
-
-```svelte example hideScript
-<script>
-  import { Radio } from 'flowbite-svelte'
-  let technology = 'svelte';
-</script>
-
-<p class="mb-4 font-semibold text-gray-900 dark:text-white">Technology <span class="capitalize">{technology}</span></p>
-<ul class="w-48 bg-white rounded-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-600 divide-y divide-gray-200 dark:divide-gray-600">
-    <li><Radio class="p-3" bind:group={technology} value="svelte">Svelte</Radio></li>
-    <li><Radio class="p-3" bind:group={technology} value="vue js">Vue JS</Radio></li>
-    <li><Radio class="p-3" bind:group={technology} value="react">React</Radio></li>
-    <li><Radio class="p-3" bind:group={technology} value="angular">Angular</Radio></li>
-</ul>
-```
-
-<Htwo label="Horizontal list group" />
-
-Use this example to show a list of radio items inside a card horizontally.
-
-```svelte example hideScript
-<script>
-  import { Radio } from 'flowbite-svelte'
-</script>
-
-<p class="mb-4 font-semibold text-gray-900 dark:text-white">Identification</p>
-<ul class="items-center w-full rounded-lg border border-gray-200 sm:flex dark:bg-gray-800 dark:border-gray-600 divide-x divide-gray-200 dark:divide-gray-600">
-  <li class="w-full"><Radio name="hor-list" class="p-3">Svelte</Radio></li>
-  <li class="w-full"><Radio name="hor-list" class="p-3">Vue JS</Radio></li>
-  <li class="w-full"><Radio name="hor-list" class="p-3">React</Radio></li>
-  <li class="w-full"><Radio name="hor-list" class="p-3">Angular</Radio></li>
-</ul>
-```
-
-<Htwo label="Radio in dropdown" />
-
-Here’s an example of a list group that you can use right away.
-
-```svelte example hideScript class="flex justify-center items-start h-80"
-<script>
-  import { Radio, Dropdown, Button, Chevron, Helper } from 'flowbite-svelte'
-  let group3=2;
-</script>
-
-<Button><Chevron>Dropdown radio</Chevron></Button>
-<Dropdown class="w-60 p-3 space-y-1">
-  <li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
-    <Radio name="group3" bind:group={group3} value={1}>Enable notifications</Radio>
-    <Helper class="pl-6">Some helpful instruction goes over here.</Helper>
-  </li>
-  <li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
-    <Radio name="group3" bind:group={group3} value={2}>Enable 2FA auth</Radio>
-    <Helper class="pl-6">Some helpful instruction goes over here.</Helper>
-  </li>
-  <li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
-    <Radio name="group3" bind:group={group3} value={3}>Subscribe newsletter</Radio>
-    <Helper class="pl-6">Some helpful instruction goes over here.</Helper>
-  </li>
-</Dropdown>
-```
-
-<Htwo label="Inline layout" />
-
-You can align the radio elements horizontally by using a wrapper tag and applying the flex class.
-
-```svelte example
-<script>
-  import { Radio } from 'flowbite-svelte'
-  let inline1 = 'second';
-</script>
-
-<div class="flex gap-3">
-  <Radio group={inline1} value="first">Inline 1</Radio>
-  <Radio group={inline1} value="second">Inline 2 checked</Radio>
-  <Radio group={inline1} value="third">Inline 3</Radio>
-  <Radio group={inline1} value="fourth" disabled>Inline disabled</Radio>
-</div>
-```
-
-You can use the property `inline` as the alternative.
-
-```svelte example
-<script>
-  import { Radio } from 'flowbite-svelte'
-  let inline2 = 'third';
-</script>
-
-<Radio group={inline2} inline value="first" class="mr-2">Inline 1</Radio>
-<Radio group={inline2} inline value="second" class="mr-2">Inline 2</Radio>
-<Radio group={inline2} inline value="third" class="mr-2">Inline checked</Radio>
-<Radio group={inline2} inline value="fourth" class="mr-2" disabled>Inline disabled</Radio>
-```
-
-<Htwo label="Colors" />
-
-```svelte example
-<script>
-  import { Radio } from 'flowbite-svelte'
-  let colors;
-</script>
-
-<p class="mb-4 font-semibold {colors}">Select color</p>
-<div class="flex gap-4">
-  <Radio bind:group={colors} color='red' value='text-red-500' >Red</Radio>
-  <Radio bind:group={colors} color='green' value='text-green-500' >Green</Radio>
-  <Radio bind:group={colors} color='purple' value='text-purple-500' >Purple</Radio>
-  <Radio bind:group={colors} color='teal' value='text-teal-500' >Teal</Radio>
-  <Radio bind:group={colors} color='yellow' value='text-yellow-500' >Yellow</Radio>
-  <Radio bind:group={colors} color='orange' value='text-orange-500' >Orange</Radio>
-</div>
-```
-
-<Htwo label="Advanced layout" />
-
-Use this example of an advanced layout of radio elements where the label parent element can be styled when the radio is checked.
-
-```svelte example hideScript
-<script>
-  import { Radio } from 'flowbite-svelte'
-</script>
-
-<p class="mb-5 text-lg font-medium text-gray-900 dark:text-white">Choose technology:</p>
-<div class="grid gap-6 w-full md:grid-cols-2">
-  <Radio name="custom" custom>
-    <div class="inline-flex justify-between items-center p-5 w-full text-gray-500 bg-white rounded-lg border border-gray-200 cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
-      <div>
-        <div class="w-full text-lg font-semibold">0-50 MB</div>
-        <div class="w-full">Good for small websites</div>
-      </div>
-      <svg aria-hidden="true" class="ml-3 w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-    </div>
-  </Radio>
-  <Radio name="custom" custom>
-    <div for="hosting-big" class="inline-flex justify-between items-center p-5 w-full text-gray-500 bg-white rounded-lg border border-gray-200 cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
-        <div class="block">
-          <div class="w-full text-lg font-semibold">500-1000 MB</div>
-          <div class="w-full">Good for large websites</div>
-        </div>
-        <svg aria-hidden="true" class="ml-3 w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-    </div>
-  </Radio>
-</div>
-```
-
-<Htwo label="Props" />
-
-The component has the following props, type, and default values. See <a href="/pages/types">types
-page</a> for type information.
-
-All attributes of the `input` element like: name, id, autofocus, etc, can be set directly as component props.
-
-<h3 class='text-xl w-full dark:text-white py-4'>Radio</h3>
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-<TableDefaultRow items={items} rowState='hover' />
-</TableProp>
-
-<h3 class='text-xl w-full dark:text-white py-4'>Helper</h3>
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-<TableDefaultRow items={items3} rowState='hover' />
-</TableProp>
-
-<Htwo label="Forwarded Events" />
-
-<div class="flex flex-wrap gap-2">
-<Badge large={true}>on:blur</Badge>
-<Badge large={true}>on:change</Badge>
-<Badge large={true}>on:click</Badge>
-<Badge large={true}>on:focus</Badge>
-<Badge large={true}>on:keydown</Badge>
-<Badge large={true}>on:keypress</Badge>
-<Badge large={true}>on:keyup</Badge>
-<Badge large={true}>on:mouseenter</Badge>
-<Badge large={true}>on:mouseleave</Badge>
-<Badge large={true}>on:mouseover</Badge>
-<Badge large={true}>on:paste</Badge>
-</div>

package/src/routes/forms/range.md

@@ -1,134 +0,0 @@
----
-layout: formLayout
-title: Svelte Range - Flowbite
-breadcrumb_title: Range
-dir: Forms
-description: Get started with the range component to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options
----
-
-<MetaTag {breadcrumb_title} {title} {dir} {description}/>
-
-<script>
-  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
-  
-  import { Breadcrumb, BreadcrumbItem, Badge, Heading, A } from '$lib'
-  import { props as items } from '../props/Range.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'
-  let minmaxValue=5
-  
-</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="forms/Range.svelte">Range</GitHubSource>
-</ExampleDiv>
-
-The range component can be used as an input field to get a number from the user based on your custom selection (ie. from 1 to 100) by using a sliding animation.
-
-<Htwo label="Setup" />
-
-```html
-<script>
-  import { Range } from 'flowbite-svelte'
-</script>
-```
-
-<Htwo label="Range slider example" />
-
-```svelte example
-<script>
-  import { Range, Label } from 'flowbite-svelte'
-</script>
-
-<Label>Default range</Label>
-<Range id="range1" />
-```
-
-<Htwo label="Disabled state" />
-
-```svelte example hideScript
-<script>
-  import { Range, Label } from 'flowbite-svelte'
-</script>
-
-<Label>Default range</Label>
-<Range id="range-disabled" disabled/>
-```
-
-<Htwo label="Binding value" />
-
-Use bind:value to bind the range input value as seen the the following examples.
-
-<Htwo label="Min and max" />
-
-```svelte example
-<script>
-  import { Range, Label } from 'flowbite-svelte'
-  let minmaxValue=5
-</script>
-
-<Label>Min-max range</Label>
-<Range id="range-minmax" min="0" max="10" bind:value={minmaxValue}/>
-<p>Value: {minmaxValue}</p>
-```
-
-<Htwo label="Steps" />
-
-```svelte example
-<script>
-  import { Range, Label } from 'flowbite-svelte'
-  let stepValue=2.5
-</script>
-
-<Label>Range steps</Label>
-<Range id="range-steps" min="0" max="5" bind:value={stepValue} step="0.5"/>
-<p>Value: {stepValue}</p>
-```
-
-<Htwo label="Sizes" />
-
-```svelte example class="space-y-6" hideScript
-<script>
-  import { Range, Label } from 'flowbite-svelte'
-</script>
-
-<Label>Small range</Label>
-<Range id="small-range" size="sm" />
-<Label>Default range</Label>
-<Range id="default-range" size="md"/>
-<Label>Large range</Label>
-<Range id="large-range" size="lg" />
-```
-
-<Htwo label="Unknown attributes" />
-
-Since we added `$$restProps` to input field, you can contain the props which are not declared with export. It will pass down other unknown attributes to an element in a component.
-
-<Htwo label="Props" />
-
-The component has the following props, type, and default values. See <A href="/pages/types">types page</A> for type information.
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow {items} rowState='hover' />
-</TableProp>
-
-<Htwo label="Forwarded Events" />
-
-<div class="flex flex-wrap gap-2">
-<Badge large={true}>on:change</Badge>
-<Badge large={true}>on:click</Badge>
-<Badge large={true}>on:keydown</Badge>
-<Badge large={true}>on:keypress</Badge>
-<Badge large={true}>on:keyup</Badge>
-</div>

package/src/routes/forms/search-input.md

@@ -1,131 +0,0 @@
----
-layout: formLayout
-title: Svelte Search Input - Flowbite
-breadcrumb_title: Search input
-dir: Forms
-description: Use the search input component as a text field to allow users to enter search queries and receive relevant page results available in multiple styles and sizes
----
-
-<MetaTag {breadcrumb_title} {title} {dir} {description}/>
-
-<script>
-  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
-  
-  import { Breadcrumb, BreadcrumbItem, Badge, Heading, A } from '$lib'
-  import { props as searchItems } from '../props/Search.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="forms/Range.svelte">Range</GitHubSource>
-</ExampleDiv>
-
-The search input component can be used to let your users search through your website using string queries and it comes in multiple styles, variants, and sizes built with the utility classes from Tailwind CSS.
-
-You will also find more advanced search components on this page including dropdown category selections, search buttons positioned inside the input field, voice search fields and more.
-
-<Htwo label="Setup" />
-
-```html
-<script>
-  import { Search } from 'flowbite-svelte'
-</script>
-```
-
-<Htwo label="Search bar example" />
-
-```svelte example hideScript class="flex flex-col gap-4"
-<script>
-  import { Search, Button } from 'flowbite-svelte'
-</script>
-
-<Search >
-  <Button>Search</Button>
-</Search>
-```
-
-<Htwo label="Simple search input" />
-
-Use the simplest form of a search input component with an icon and a search button next to the text field.
-
-```svelte example hideScript class="flex flex-col gap-4"
-<script>
-  import { Search, Button } from 'flowbite-svelte'
-</script>
-
-<form class="flex gap-2">
-  <Search size="md" />
-  <Button class="!p-2.5">
-    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
-  </Button>
-</form>
-```
-
-<Htwo label="Voice Search" />
-
-Get started with this example if you would like to enable voice search for your website and users.
-
-```svelte example class="space-y-4"
-<script>
-  import { Search, Button } from 'flowbite-svelte'
-  function handleVoiceBtn() {
-    alert('You clicked voice button');
-  }
-</script>
-
-<form class="flex gap-2">
-  <Search size='md' class="flex gap-2 items-center" placeholder="Search Mockups, Logos, Design Templates...">
-    <button type="button" on:click={handleVoiceBtn} class="outline-none">
-      <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"/></svg>
-    </button>
-  </Search>
-  <Button size='sm'>
-    <svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
-    Search
-  </Button>
-</form>
-```
-
-<Htwo label="Events" />
-
-```js
-on:submit
-```
-
-<Htwo label="Props" />
-
-The component has the following props, type, and default values. See <A href="/pages/types">types page</A> for type information.
-
-<h3 class='text-xl w-full dark:text-white py-4'>Search</h3>
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={searchItems} rowState='hover' />
-</TableProp>
-
-<Htwo label="Forwarded Events: Search" />
-
-<div class="flex flex-wrap gap-2">
-<Badge large={true}>on:blur</Badge>
-<Badge large={true}>on:change</Badge>
-<Badge large={true}>on:click</Badge>
-<Badge large={true}>on:focus</Badge>
-<Badge large={true}>on:keydown</Badge>
-<Badge large={true}>on:keypress</Badge>
-<Badge large={true}>on:keyup</Badge>
-<Badge large={true}>on:mouseenter</Badge>
-<Badge large={true}>on:mouseleave</Badge>
-<Badge large={true}>on:mouseover</Badge>
-<Badge large={true}>on:paste</Badge>
-</div>