flowbite-svelte 0.27.4 → 0.27.6

package/forms/Checkbox.svelte

@@ -7,7 +7,7 @@ export let custom = false;
 export let inline = false;
 export let group = [];
 export let value = '';
-export let checked = undefined;
+export let checked = false;
 // tinted if put in component having its own background
 let background = getContext('background');
 $: {
@@ -33,21 +33,20 @@ $: {
 </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 />
+  <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/FloatingLabelInput.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         style?: "filled" | "outlined" | "standard" | undefined;
         type?: InputType | undefined;
         size?: "default" | "small" | undefined;
-        color?: "green" | "red" | "base" | undefined;
+        color?: "red" | "green" | "base" | undefined;
         value?: string | undefined;
         label?: string | undefined;
     };

package/forms/Helper.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         helperClass?: string | undefined;
-        color?: "green" | "red" | "gray" | "disabled" | undefined;
+        color?: "gray" | "red" | "green" | "disabled" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/Input.svelte

@@ -1,50 +1,82 @@
-<script>import classNames from 'classnames';
+<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 = 'md';
-export let inputClass = 'block w-full border disabled:cursor-not-allowed disabled:opacity-50 rounded-lg';
+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 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
-    green: 'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500',
-    red: 'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500'
+    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) => {
-    node.type = type;
+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>
 
-<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
-  class={classNames(
-    inputClass,
-    colorClasses[color],
-    color === 'base' &&
-      (background
-        ? 'dark:bg-gray-600 dark:border-gray-500'
-        : 'dark:bg-gray-700 dark:border-gray-600'),
-    {
-      'p-2 sm:text-xs': size === 'sm',
-      'p-2.5 text-sm': size === 'md',
-      'sm:text-md p-4': size === 'lg'
-    },
-    $$props.class
-  )} />
+<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>

package/forms/Input.svelte.d.ts

@@ -1,13 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
+import type { SizeType, FormSizeType } from '../types';
+export declare function clampSize(s: SizeType): "sm" | "md" | "lg";
 import type { InputType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
         type?: InputType | undefined;
-        value?: string | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
-        inputClass?: string | undefined;
-        color?: "green" | "red" | "base" | undefined;
+        value?: string | number | undefined;
+        size?: FormSizeType | undefined;
+        defaultClass?: string | undefined;
+        color?: "red" | "green" | "base" | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -25,7 +27,15 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        left: {};
+        default: {
+            props: {
+                class: string;
+            };
+        };
+        right: {};
+    };
 };
 export declare type InputProps = typeof __propDef.props;
 export declare type InputEvents = typeof __propDef.events;

package/forms/InputAddon.svelte

@@ -0,0 +1,29 @@
+<script>import classNames from 'classnames';
+import { getContext } from 'svelte';
+import { clampSize } from './Input.svelte';
+export let size = undefined;
+// tinted if put in component having its own background
+let background = getContext('background');
+let group = getContext('group');
+const borderClasses = {
+    base: 'border-gray-300 dark:border-gray-600',
+    tinted: 'border-gray-300 dark:border-gray-500'
+};
+const darkBgClasses = {
+    base: 'dark:bg-gray-600 dark:text-gray-400',
+    tinted: 'dark:bg-gray-500 dark:text-gray-300'
+};
+const divider = {
+    base: 'dark:border-r-gray-700 dark:last:border-r-gray-600',
+    tinted: 'dark:border-r-gray-600 dark:last:border-r-gray-500'
+};
+const textSizes = { sm: 'sm:text-xs', md: 'text-sm', lg: 'sm:text-base' };
+const prefixPadding = { sm: 'px-2', md: 'px-3', lg: 'px-4' };
+// size: explicit, inherited, default
+$: _size = size || clampSize(group?.size) || 'md';
+$: divClass = classNames(textSizes[_size], prefixPadding[_size], background ? borderClasses['tinted'] : borderClasses['base'], 'text-gray-500 bg-gray-200', background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, 'inline-flex items-center border-t border-b first:border-l border-r', 'first:rounded-l-lg last:rounded-r-lg', $$props.class);
+</script>
+
+<div {...$$restProps} class={divClass}>
+  <slot />
+</div>

package/forms/InputAddon.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: 'sm' | 'md' | 'lg' | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type InputAddonProps = typeof __propDef.props;
+export declare type InputAddonEvents = typeof __propDef.events;
+export declare type InputAddonSlots = typeof __propDef.slots;
+export default class InputAddon extends SvelteComponentTyped<InputAddonProps, InputAddonEvents, InputAddonSlots> {
+}
+export {};

package/forms/Label.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: "green" | "red" | "gray" | "disabled" | undefined;
+        color?: "gray" | "red" | "green" | "disabled" | undefined;
         defaultClass?: string | undefined;
         show?: boolean | undefined;
     };

package/forms/NumberInput.svelte

@@ -0,0 +1,7 @@
+<script>import Input from './Input.svelte';
+export let value = 0;
+</script>
+
+<Input let:props>
+  <input {...props} type="number" bind:value />
+</Input>

package/forms/NumberInput.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type NumberInputProps = typeof __propDef.props;
+export declare type NumberInputEvents = typeof __propDef.events;
+export declare type NumberInputSlots = typeof __propDef.slots;
+export default class NumberInput extends SvelteComponentTyped<NumberInputProps, NumberInputEvents, NumberInputSlots> {
+}
+export {};

package/forms/Radio.svelte

@@ -1,29 +1,16 @@
-<script context="module">
-	// this part is shared between Radio and Checkbox
-	import classNames from 'classnames';
-
-	const colorClasses = {
-		red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
-		green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
-		purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
-		teal: 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600',
-		yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600',
-		orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
-		blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
-	};
-
-	export const labelClass = (inline, extraClass) =>
-		classNames(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
-
-	export const inputClass = (custom, color, rounded, tinted, extraClass) =>
-		classNames(
-			'w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 mr-2',
-			tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600',
-			custom && 'sr-only peer',
-			rounded && 'rounded',
-			colorClasses[color],
-			extraClass
-		);
+<script context="module">// this part is shared between Radio and Checkbox
+import classNames from 'classnames';
+const colorClasses = {
+    red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
+    green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
+    purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
+    teal: 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600',
+    yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600',
+    orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
+    blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
+};
+export const labelClass = (inline, extraClass) => classNames(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
+export const inputClass = (custom, color, rounded, tinted, extraClass) => classNames('w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2', extraClass === true && 'mr-2', tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', custom && 'sr-only peer', rounded && 'rounded', colorClasses[color], extraClass);
 </script>
 
 <script>import { getContext } from 'svelte';
@@ -38,21 +25,21 @@ let background = getContext('background');
 </script>
 
 <Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
-	<input
-		type="radio"
-		bind:group
-		on:blur
-		on:change
-		on:click
-		on:focus
-		on:keydown
-		on:keypress
-		on:keyup
-		on:mouseenter
-		on:mouseleave
-		on:mouseover
-		on:paste
-		{value}
-		{...$$restProps}
-		class={inputClass(custom, color, false, background, $$slots.default || $$props.class)} /><slot />
+  <input
+    type="radio"
+    bind:group
+    on:blur
+    on:change
+    on:click
+    on:focus
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseenter
+    on:mouseleave
+    on:mouseover
+    on:paste
+    {value}
+    {...$$restProps}
+    class={inputClass(custom, color, false, background, $$slots.default || $$props.class)} /><slot />
 </Label>

package/forms/Radio.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-export declare const labelClass: (inline: any, extraClass: any) => string;
-export declare const inputClass: (custom: any, color: any, rounded: any, tinted: any, extraClass: any) => string;
+export declare const labelClass: (inline: boolean, extraClass: string) => string;
+export declare const inputClass: (custom: boolean, color: FormColorType, rounded: boolean, tinted: boolean, extraClass: string | boolean) => string;
 import type { FormColorType } from '../types';
 declare const __propDef: {
     props: {

package/forms/Search.svelte

@@ -1,46 +1,54 @@
-<script>export let id = '';
-export let labelClass = 'mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300';
-export let inputClass = 'block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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 btnClass = 'text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+<script>import Wrapper from '../utils/Wrapper.svelte';
+import Input from './Input.svelte';
+export let size = 'lg';
 export let placeholder = 'Search';
+const sizes = {
+    sm: 'w-3.5 h-3.5',
+    md: 'w-5 h-5',
+    lg: 'w-6 h-6'
+};
 </script>
 
-<form on:submit>
-	<label for={id} class={labelClass}>Search</label>
-	<div class="relative">
-		<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-			<svg
-				class="w-5 h-5 text-gray-500 dark:text-gray-400"
-				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
-			>
-		</div>
-		<input
-			{...$$restProps}
-			on:blur
-			on:change
-			on:click
-			on:focus
-			on:keydown
-			on:keypress
-			on:keyup
-			on:mouseenter
-			on:mouseleave
-			on:mouseover
-			on:paste
-			type="search"
-			{id}
-			class={inputClass}
-			{placeholder}
-		/>
-		<button type="submit" class={btnClass}>Search</button>
-	</div>
-</form>
+<Wrapper class="relative w-full" show={$$slots.default}>
+  <Input
+    on:blur
+    on:change
+    on:click
+    on:focus
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseenter
+    on:mouseleave
+    on:mouseover
+    on:paste
+    type="search"
+    {placeholder}
+    {size}
+    {...$$restProps}
+    class={$$props.class}>
+    <svg
+      slot="left"
+      class={sizes[size]}
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill-rule="evenodd"
+        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+        clip-rule="evenodd" />
+    </svg>
+    <!-- We can use it here. See below. This will trigger right padding
+      <slot slot="right" />
+    -->
+  </Input>
+  <!-- This slot should be within Input as a slot='right'
+    Svelete has an issue with forwarded slots and even empty slot here will appear as existing slot in Input.
+    Due to that we need the below slot and Wrapper around
+  -->
+  {#if $$slots.default}
+    <div class="flex absolute inset-y-0 right-0 items-center pr-3 text-gray-500 dark:text-gray-400">
+      <slot />
+    </div>
+  {/if}
+</Wrapper>

package/forms/Search.svelte.d.ts

@@ -1,15 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import type { FormSizeType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id?: string | undefined;
-        labelClass?: string | undefined;
-        inputClass?: string | undefined;
-        btnClass?: string | undefined;
+        size?: FormSizeType | undefined;
         placeholder?: string | undefined;
     };
     events: {
-        submit: SubmitEvent;
         blur: FocusEvent;
         change: Event;
         click: MouseEvent;
@@ -24,7 +21,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type SearchProps = typeof __propDef.props;
 export declare type SearchEvents = typeof __propDef.events;

package/forms/SimpleSearch.svelte

@@ -1,65 +1,20 @@
-<script>import { getContext } from 'svelte';
-export let id = '';
-export let labelClass = 'sr-only';
-export let iconClass = 'w-5 h-5 text-gray-500 dark:text-gray-400';
-export let iconDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
-export let inputClass = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
-export let btnClass = 'p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-export let placeholder = 'Search';
-// tainted if put in component having its own background
-let background = getContext('background');
+<script>import Search from './Search.svelte';
+import Button from '../buttons/Button.svelte';
 </script>
 
-<form class="flex items-center" on:submit>
-	<label for={id} class={labelClass}>Search</label>
-	<div class="relative w-full">
-		<div class={iconDivClass}>
-			<svg
-				class={iconClass}
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-					clip-rule="evenodd"
-				/></svg
-			>
-		</div>
-		<input
-			on:blur
-			on:change
-			on:click
-			on:focus
-			on:keydown
-			on:keypress
-			on:keyup
-			on:mouseenter
-			on:mouseleave
-			on:mouseover
-			on:paste
-			{...$$restProps}
-			type="text"
-			{id}
-			class="{background
-				? 'dark:bg-gray-600 dark:border-gray-500'
-				: ' dark:bg-gray-700 dark:border-gray-600'} {inputClass}"
-			{placeholder}
-		/>
-	</div>
-	<button type="submit" class={btnClass}
-		><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 class="flex gap-2" on:submit>
+  <Search size="md" {...$$restProps} />
+  <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>

package/forms/SimpleSearch.svelte.d.ts

@@ -2,27 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id?: string | undefined;
-        labelClass?: string | undefined;
-        iconClass?: string | undefined;
-        iconDivClass?: string | undefined;
-        inputClass?: string | undefined;
-        btnClass?: string | undefined;
-        placeholder?: string | undefined;
     };
     events: {
         submit: SubmitEvent;
-        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>;
     };