flowbite-svelte 0.27.15 → 0.27.16

package/footer/FooterIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        href?: string | undefined;
+        ariaLabel?: string | undefined;
+        aClass?: string | undefined;
+        target?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type FooterIconProps = typeof __propDef.props;
+export declare type FooterIconEvents = typeof __propDef.events;
+export declare type FooterIconSlots = typeof __propDef.slots;
+export default class FooterIcon extends SvelteComponentTyped<FooterIconProps, FooterIconEvents, FooterIconSlots> {
+}
+export {};

package/footer/FooterLink.svelte

@@ -0,0 +1,13 @@
+<script>import A from '../typography/A.svelte';
+import classNames from 'classnames';
+export let liClass = 'mr-4 last:mr-0 md:mr-6';
+export let aClass = 'hover:underline';
+export let href = '';
+export let target = undefined;
+</script>
+
+<li class={classNames(liClass, $$props.class)}>
+  <a {...$$restProps} {href} class={aClass} {target}>
+    <slot />
+  </a>
+</li>

package/footer/FooterLink.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        liClass?: string | undefined;
+        aClass?: string | undefined;
+        href?: string | undefined;
+        target?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type FooterLinkProps = typeof __propDef.props;
+export declare type FooterLinkEvents = typeof __propDef.events;
+export declare type FooterLinkSlots = typeof __propDef.slots;
+export default class FooterLink extends SvelteComponentTyped<FooterLinkProps, FooterLinkEvents, FooterLinkSlots> {
+}
+export {};

package/footer/FooterLinkGroup.svelte

@@ -0,0 +1,7 @@
+<script>import classNames from 'classnames';
+export let ulClass = 'text-gray-600 dark:text-gray-400';
+</script>
+
+<ul class={classNames(ulClass, $$props.class)}>
+	<slot />
+</ul>

package/footer/FooterLinkGroup.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        ulClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type FooterLinkGroupProps = typeof __propDef.props;
+export declare type FooterLinkGroupEvents = typeof __propDef.events;
+export declare type FooterLinkGroupSlots = typeof __propDef.slots;
+export default class FooterLinkGroup extends SvelteComponentTyped<FooterLinkGroupProps, FooterLinkGroupEvents, FooterLinkGroupSlots> {
+}
+export {};

package/forms/Checkbox.svelte

@@ -0,0 +1,52 @@
+<script>import { getContext } from 'svelte';
+import Radio, { labelClass, inputClass } from './Radio.svelte';
+import Label from './Label.svelte';
+// properties forwarding
+export let color = 'blue';
+export let custom = false;
+export let inline = false;
+export let group = [];
+export let value = '';
+export let checked = false;
+// tinted if put in component having its own background
+let background = getContext('background');
+$: {
+    // There's a bug in Svelte and bind:group is not working with wrapped checkbox
+    // This workaround is taken from:
+    // https://svelte.dev/repl/de117399559f4e7e9e14e2fc9ab243cc?version=3.12.1
+    const index = group.indexOf(value);
+    if (checked === undefined)
+        checked = index >= 0;
+    if (checked) {
+        if (index < 0) {
+            group.push(value);
+            group = group;
+        }
+    }
+    else {
+        if (index >= 0) {
+            group.splice(index, 1);
+            group = group;
+        }
+    }
+}
+</script>
+
+<Label class={labelClass(inline, $$props.class)} show={!!$$slots.default}>
+  <input
+    type="checkbox"
+    bind:checked
+    on:keyup
+    on:keydown
+    on:keypress
+    on:focus
+    on:blur
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:paste
+    {value}
+    {...$$restProps}
+    class={inputClass(custom, color, true, background, $$slots.default || $$props.class)} /><slot />
+</Label>

package/forms/Checkbox.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FormColorType } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: FormColorType | undefined;
+        custom?: boolean | undefined;
+        inline?: boolean | undefined;
+        group?: string[] | undefined;
+        value?: string | undefined;
+        checked?: boolean | undefined;
+    };
+    events: {
+        keyup: KeyboardEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        click: MouseEvent;
+        mouseover: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        paste: ClipboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type CheckboxProps = typeof __propDef.props;
+export declare type CheckboxEvents = typeof __propDef.events;
+export declare type CheckboxSlots = typeof __propDef.slots;
+export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
+}
+export {};

package/forms/Dropzone.svelte

@@ -0,0 +1,26 @@
+<script>export let value = '';
+export let divClass = 'flex justify-center items-center w-full';
+export let labelClass = 'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';
+export let innerDivClass = 'flex flex-col justify-center items-center pt-5 pb-6';
+</script>
+
+<div class={divClass}>
+	<label for="dropzone-file" class={labelClass}>
+		<div class={innerDivClass}>
+			<slot />
+		</div>
+		<input
+			{...$$restProps}
+			bind:value
+			type="file"
+			class="hidden"
+			on:click
+			on:change
+			on:focus
+			on:blur
+			on:mouseenter
+			on:mouseleave
+			on:mouseover
+		/>
+	</label>
+</div>

package/forms/Dropzone.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: string | undefined;
+        divClass?: string | undefined;
+        labelClass?: string | undefined;
+        innerDivClass?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        change: Event;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type DropzoneProps = typeof __propDef.props;
+export declare type DropzoneEvents = typeof __propDef.events;
+export declare type DropzoneSlots = typeof __propDef.slots;
+export default class Dropzone extends SvelteComponentTyped<DropzoneProps, DropzoneEvents, DropzoneSlots> {
+}
+export {};

package/forms/Fileupload.svelte

@@ -0,0 +1,27 @@
+<script>import classNames from 'classnames';
+export let value = '';
+export let size = 'sm';
+export let inputClass = 'block w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400';
+</script>
+
+<input
+	{...$$restProps}
+	on:change
+	on:keyup
+	on:keydown
+	on:keypress
+	on:focus
+	on:blur
+	on:click
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
+	bind:value
+	class={classNames(inputClass, {
+		'mb-5 text-xs': size === 'xs',
+		'mb-5 text-sm': size === 'sm',
+		'text-lg': size === 'lg'
+	})}
+	type="file"
+/>

package/forms/Fileupload.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: string | undefined;
+        size?: "xs" | "sm" | "lg" | undefined;
+        inputClass?: string | undefined;
+    };
+    events: {
+        change: Event;
+        keyup: KeyboardEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        click: MouseEvent;
+        mouseover: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        paste: ClipboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FileuploadProps = typeof __propDef.props;
+export declare type FileuploadEvents = typeof __propDef.events;
+export declare type FileuploadSlots = typeof __propDef.slots;
+export default class Fileupload extends SvelteComponentTyped<FileuploadProps, FileuploadEvents, FileuploadSlots> {
+}
+export {};

package/forms/FloatingLabelInput.svelte

@@ -0,0 +1,106 @@
+<script>import classNames from 'classnames';
+import generateId from '../utils/generateId.js';
+export let id = generateId();
+export let style = 'standard';
+export let type = 'text';
+export let size = 'default';
+export let color = 'base';
+export let value = '';
+export let label = '';
+const divClasses = {
+    filled: 'relative',
+    outlined: 'relative',
+    standard: 'relative z-0'
+};
+const inputSizes = {
+    filled: {
+        small: 'px-2.5 pb-1.5 pt-4',
+        default: 'px-2.5 pb-2.5 pt-5'
+    },
+    outlined: {
+        small: 'px-2.5 pb-1.5 pt-3',
+        default: 'px-2.5 pb-2.5 pt-4'
+    },
+    standard: {
+        small: 'py-2 px-0',
+        default: 'py-2.5 px-0'
+    }
+};
+const labelSizes = {
+    filled: {
+        small: 'top-3',
+        default: 'top-4'
+    },
+    outlined: {
+        small: 'top-1',
+        default: 'top-2'
+    },
+    standard: {
+        small: 'top-3',
+        default: 'top-3'
+    }
+};
+const inputClasses = {
+    filled: 'block rounded-t-lg w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 appearance-none dark:text-white focus:outline-none focus:ring-0 peer',
+    outlined: 'block w-full text-sm text-gray-900 bg-transparent rounded-lg border-1 appearance-none dark:text-white  focus:outline-none focus:ring-0 peer',
+    standard: 'block w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 appearance-none dark:text-white  focus:outline-none focus:ring-0 peer'
+};
+const labelClasses = {
+    filled: 'absolute text-sm duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4',
+    outlined: 'absolute text-sm duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white dark:bg-gray-900 px-2 peer-focus:px-2  peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1',
+    standard: 'absolute text-sm duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6'
+};
+const inputColorClasses = {
+    base: 'border-gray-300 dark:border-gray-600 dark:focus:border-blue-500 focus:border-blue-600',
+    green: 'border-green-600 dark:border-green-500 dark:focus:border-green-500 focus:border-green-600',
+    red: 'border-red-600 dark:border-red-500 dark:focus:border-red-500  focus:border-red-600'
+};
+const labelColorClasses = {
+    base: 'text-gray-500 dark:text-gray-400 peer-focus:text-blue-600 peer-focus:dark:text-blue-500',
+    green: 'text-green-600 dark:text-green-500',
+    red: 'text-red-600 dark:text-red-500'
+};
+// you need to this to avoid 2-way binding
+function setType(node) {
+    node.type = type;
+}
+</script>
+
+<div class={divClasses[style]}>
+	<input
+		{id}
+		{...$$restProps}
+		bind:value
+		on:blur
+		on:change
+		on:click
+		on:focus
+		on:keydown
+		on:keypress
+		on:keyup
+		on:mouseenter
+		on:mouseleave
+		on:mouseover
+		on:paste
+		use:setType
+		placeholder=" "
+		class={classNames(
+			inputClasses[style],
+			inputColorClasses[color],
+			inputSizes[style][size],
+			$$props.class
+		)}
+	/>
+
+	<label
+		for={id}
+		class={classNames(
+			labelClasses[style],
+			labelColorClasses[color],
+			labelSizes[style][size],
+			$$props.labelClass
+		)}
+	>
+		{label}
+	</label>
+</div>

package/forms/FloatingLabelInput.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InputType } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id?: string | undefined;
+        style?: "filled" | "outlined" | "standard" | undefined;
+        type?: InputType | undefined;
+        size?: "default" | "small" | undefined;
+        color?: "red" | "green" | "base" | undefined;
+        value?: string | undefined;
+        label?: string | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        change: Event;
+        click: MouseEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
+        paste: ClipboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FloatingLabelInputProps = typeof __propDef.props;
+export declare type FloatingLabelInputEvents = typeof __propDef.events;
+export declare type FloatingLabelInputSlots = typeof __propDef.slots;
+export default class FloatingLabelInput extends SvelteComponentTyped<FloatingLabelInputProps, FloatingLabelInputEvents, FloatingLabelInputSlots> {
+}
+export {};

package/forms/Helper.svelte

@@ -0,0 +1,14 @@
+<script>import classNames from 'classnames';
+export let helperClass = 'text-xs font-normal text-gray-500 dark:text-gray-300';
+export let color = 'gray';
+const colorClasses = {
+    gray: 'text-gray-900 dark:text-gray-300',
+    green: 'text-green-700 dark:text-green-500',
+    red: 'text-red-700 dark:text-red-500',
+    disabled: 'text-gray-400 dark:text-gray-500'
+};
+</script>
+
+<p {...$$restProps} class={classNames(helperClass, colorClasses[color], $$props.class)}>
+	<slot />
+</p>

package/forms/Helper.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        helperClass?: string | undefined;
+        color?: "gray" | "red" | "green" | "disabled" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type HelperProps = typeof __propDef.props;
+export declare type HelperEvents = typeof __propDef.events;
+export declare type HelperSlots = typeof __propDef.slots;
+export default class Helper extends SvelteComponentTyped<HelperProps, HelperEvents, HelperSlots> {
+}
+export {};

package/forms/Iconinput.svelte

@@ -0,0 +1,81 @@
+<script>import classNames from 'classnames';
+export let value = '';
+export let size = 'md';
+export let noBorder = false;
+export let inputClass = 'rounded-none rounded-r-lg bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+export let spanClass = 'inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 rounded-l-md border border-r-0 border-gray-300 dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600';
+export let noBorderInputClass = 'bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full   dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+export let pointerEvent = false;
+export let noBorderDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3';
+</script>
+
+{#if noBorder}
+  <div class="relative">
+    <div
+      class={classNames(
+        noBorderDivClass,
+        {
+          'p-2 sm:text-xs': size === 'sm',
+          'p-2.5 text-sm': size === 'md',
+          'sm:text-md p-4': size === 'lg'
+        },
+        pointerEvent ? 'cursor-pointer' : 'pointer-events-none'
+      )}>
+      <slot />
+    </div>
+    <input
+      {...$$restProps}
+      bind:value
+      on:blur
+      on:change
+      on:click
+      on:focus
+      on:keydown
+      on:keypress
+      on:keyup
+      on:mouseover
+      on:mouseenter
+      on:mouseleave
+      on:paste
+      on:input
+      class={classNames(
+        noBorderInputClass,
+        {
+          'p-2 sm:text-xs pl-9': size === 'sm',
+          'p-2.5 text-sm pl-10': size === 'md',
+          'sm:text-md p-4 pl-11': size === 'lg'
+        },
+        $$props.class
+      )} />
+  </div>
+{:else}
+  <div class="flex">
+    <span class={spanClass}>
+      <slot />
+    </span>
+    <input
+      {...$$restProps}
+      bind:value
+      on:blur
+      on:change
+      on:click
+      on:focus
+      on:keydown
+      on:keypress
+      on:keyup
+      on:mouseover
+      on:mouseenter
+      on:mouseleave
+      on:paste
+      on:input
+      class={classNames(
+        inputClass,
+        {
+          'p-2 sm:text-xs': size === 'sm',
+          'p-2.5 text-sm': size === 'md',
+          'sm:text-md p-4': size === 'lg'
+        },
+        $$props.class
+      )} />
+  </div>
+{/if}

package/forms/Iconinput.svelte.d.ts

@@ -0,0 +1,39 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: string | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        noBorder?: boolean | undefined;
+        inputClass?: string | undefined;
+        spanClass?: string | undefined;
+        noBorderInputClass?: string | undefined;
+        pointerEvent?: boolean | undefined;
+        noBorderDivClass?: string | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        change: Event;
+        click: MouseEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseover: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        paste: ClipboardEvent;
+        input: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type IconinputProps = typeof __propDef.props;
+export declare type IconinputEvents = typeof __propDef.events;
+export declare type IconinputSlots = typeof __propDef.slots;
+export default class Iconinput extends SvelteComponentTyped<IconinputProps, IconinputEvents, IconinputSlots> {
+}
+export {};

package/forms/Input.svelte

@@ -0,0 +1,82 @@
+<script context="module">export function clampSize(s) {
+    return s && s === 'xs' ? 'sm' : s === 'xl' ? 'lg' : s;
+}
+</script>
+
+<script>import Wrapper from '../utils/Wrapper.svelte';
+import classNames from 'classnames';
+import { getContext } from 'svelte';
+export let type = 'text';
+export let value = '';
+export let size = undefined;
+export let defaultClass = 'block w-full disabled:cursor-not-allowed disabled:opacity-50';
+export let color = 'base';
+const borderClasses = {
+    base: 'border-gray-300 dark:border-gray-600',
+    tinted: 'border-gray-300 dark:border-gray-500',
+    green: 'border-green-500 dark:border-green-400',
+    red: 'border-red-500 dark:border-red-400'
+};
+const ringClasses = {
+    base: 'focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-500 dark:focus:ring-blue-500',
+    green: 'focus:ring-green-500 focus:border-green-500 dark:focus:border-green-500 dark:focus:ring-green-500',
+    red: 'focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500'
+};
+const colorClasses = {
+    base: 'bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400',
+    tinted: 'bg-gray-50 text-gray-900 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400',
+    green: 'bg-green-50 text-green-900 placeholder-green-700 dark:bg-gray-700',
+    red: 'bg-red-50 text-red-900 placeholder-red-700 dark:bg-gray-700'
+};
+// tinted if put in component having its own background
+let background = getContext('background');
+let group = getContext('group');
+// you need to this to avoid 2-way binding
+const setType = (node, _type) => {
+    node.type = _type;
+    return {
+        update(_type) {
+            node.type = _type;
+        }
+    };
+};
+const textSizes = { sm: 'sm:text-xs', md: 'text-sm', lg: 'sm:text-base' };
+const leftPadding = { sm: 'pl-9', md: 'pl-10', lg: 'pl-11' };
+const rightPadding = { sm: 'pr-9', md: 'pr-10', lg: 'pr-11' };
+const inputPadding = { sm: 'p-2', md: 'p-2.5', lg: 'p-4' };
+$: _size = size || clampSize(group?.size) || 'md';
+let inputClass;
+$: {
+    const _color = color === 'base' && background ? 'tinted' : color;
+    inputClass = classNames(defaultClass, $$slots.left && leftPadding[_size], $$slots.right && rightPadding[_size], ringClasses[color], colorClasses[_color], borderClasses[_color], inputPadding[_size], textSizes[_size], group || 'rounded-lg', group && 'first:rounded-l-lg last:rounded-r-lg', group && 'border-l-0 first:border-l last:border-r', $$props.class);
+}
+let floatClass = 'flex absolute inset-y-0 items-center pointer-events-none text-gray-500 dark:text-gray-400';
+</script>
+
+<Wrapper class="relative w-full" show={$$slots.left || $$slots.right}>
+  {#if $$slots.left}
+    <div class="{floatClass} left-0 pl-2.5"><slot name="left" /></div>
+  {/if}
+  <slot props={{ ...$$restProps, class: inputClass }}>
+    <input
+      {...$$restProps}
+      bind:value
+      on:blur
+      on:change
+      on:click
+      on:focus
+      on:keydown
+      on:keypress
+      on:keyup
+      on:mouseover
+      on:mouseenter
+      on:mouseleave
+      on:paste
+      on:input
+      use:setType={type}
+      class={inputClass} />
+  </slot>
+  {#if $$slots.right}
+    <div class="{floatClass} right-0 pr-2.5"><slot name="right" /></div>
+  {/if}
+</Wrapper>