flowbite-svelte 0.46.15 → 0.46.17

package/dist/device-mockups/Tablet.svelte.d.ts

@@ -2,12 +2,12 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        div?: string;
-        slot?: string;
-        leftTop?: string;
-        leftMid?: string;
-        leftBot?: string;
-        right?: string;
+        div?: string | undefined;
+        slot?: string | undefined;
+        leftTop?: string | undefined;
+        leftMid?: string | undefined;
+        leftBot?: string | undefined;
+        right?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/drawer/Drawer.svelte.d.ts

@@ -3,21 +3,21 @@ import type { drawerTransitionParamTypes, drawerTransitionTypes } from '../types
 declare const __propDef: {
     props: {
         [x: string]: any;
-        activateClickOutside?: boolean;
-        hidden?: boolean;
-        position?: "fixed" | "absolute";
-        leftOffset?: string;
-        rightOffset?: string;
-        topOffset?: string;
-        bottomOffset?: string;
-        width?: string;
-        backdrop?: boolean;
-        bgColor?: string;
-        bgOpacity?: string;
-        placement?: "left" | "right" | "top" | "bottom";
-        id?: string;
-        divClass?: string;
-        transitionParams?: drawerTransitionParamTypes;
+        activateClickOutside?: boolean | undefined;
+        hidden?: boolean | undefined;
+        position?: ("fixed" | "absolute") | undefined;
+        leftOffset?: string | undefined;
+        rightOffset?: string | undefined;
+        topOffset?: string | undefined;
+        bottomOffset?: string | undefined;
+        width?: string | undefined;
+        backdrop?: boolean | undefined;
+        bgColor?: string | undefined;
+        bgOpacity?: string | undefined;
+        placement?: ("left" | "right" | "top" | "bottom") | undefined;
+        id?: string | undefined;
+        divClass?: string | undefined;
+        transitionParams?: drawerTransitionParamTypes | undefined;
         transitionType?: drawerTransitionTypes;
     };
     events: {

package/dist/dropdown/Dropdown.svelte.d.ts

@@ -7,22 +7,22 @@ import type { FrameColor } from '../utils/Frame.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        activeUrl?: string;
-        open?: boolean;
-        containerClass?: string;
+        activeUrl?: string | undefined;
+        open?: boolean | undefined;
+        containerClass?: string | undefined;
         classContainer?: string | undefined;
-        headerClass?: string;
+        headerClass?: string | undefined;
         classHeader?: string | undefined;
-        footerClass?: string;
+        footerClass?: string | undefined;
         classFooter?: string | undefined;
-        activeClass?: string;
+        activeClass?: string | undefined;
         classActive?: string | undefined;
-        arrow?: boolean;
-        trigger?: "hover" | "click" | "focus";
-        placement?: Placement;
-        color?: FrameColor;
-        shadow?: boolean;
-        rounded?: boolean;
+        arrow?: boolean | undefined;
+        trigger?: ("hover" | "click" | "focus") | undefined;
+        placement?: Placement | undefined;
+        color?: FrameColor | undefined;
+        shadow?: boolean | undefined;
+        rounded?: boolean | undefined;
     };
     events: {
         show: CustomEvent<any>;

package/dist/dropdown/DropdownDivider.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        divClass?: string;
+        divClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/dropdown/DropdownHeader.svelte.d.ts

@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        divClass?: string;
-        divider?: boolean;
+        divClass?: string | undefined;
+        divider?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/dropdown/DropdownItem.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        defaultClass?: string;
+        defaultClass?: string | undefined;
         href?: string | undefined;
         activeClass?: string | undefined;
     };

package/dist/footer/FooterBrand.svelte.d.ts

@@ -2,13 +2,13 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        aClass?: string;
-        spanClass?: string;
-        imgClass?: string;
-        href?: string;
-        src?: string;
-        alt?: string;
-        name?: string;
+        aClass?: string | undefined;
+        spanClass?: string | undefined;
+        imgClass?: string | undefined;
+        href?: string | undefined;
+        src?: string | undefined;
+        alt?: string | undefined;
+        name?: string | undefined;
         target?: string | undefined;
     };
     events: {

package/dist/footer/FooterCopyright.svelte.d.ts

@@ -2,13 +2,13 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        spanClass?: string;
-        aClass?: string;
-        year?: number;
-        href?: string;
-        by?: string;
+        spanClass?: string | undefined;
+        aClass?: string | undefined;
+        year?: number | undefined;
+        href?: string | undefined;
+        by?: string | undefined;
         target?: string | undefined;
-        copyrightMessage?: string;
+        copyrightMessage?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/footer/FooterIcon.svelte.d.ts

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        href?: string;
-        ariaLabel?: string;
-        aClass?: string;
+        href?: string | undefined;
+        ariaLabel?: string | undefined;
+        aClass?: string | undefined;
         target?: string | undefined;
     };
     events: {

package/dist/footer/FooterLink.svelte.d.ts

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        liClass?: string;
-        aClass?: string;
-        href?: string;
+        liClass?: string | undefined;
+        aClass?: string | undefined;
+        href?: string | undefined;
         target?: string | undefined;
     };
     events: {

package/dist/footer/FooterLinkGroup.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        ulClass?: string;
+        ulClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/forms/Checkbox.svelte.d.ts

@@ -5,16 +5,16 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         name?: string | undefined;
-        color?: FormColorType;
-        custom?: boolean;
-        inline?: boolean;
-        group?: string[];
-        choices?: CheckboxItem[];
-        value?: string | number;
+        color?: FormColorType | undefined;
+        custom?: boolean | undefined;
+        inline?: boolean | undefined;
+        group?: string[] | undefined;
+        choices?: CheckboxItem[] | undefined;
+        value?: (string | number) | undefined;
         checked?: boolean | undefined;
-        spacing?: string;
-        groupLabelClass?: string;
-        groupInputClass?: string;
+        spacing?: string | undefined;
+        groupLabelClass?: string | undefined;
+        groupInputClass?: string | undefined;
     };
     events: {
         keyup: KeyboardEvent;

package/dist/forms/CheckboxButton.svelte.d.ts

@@ -3,15 +3,15 @@ import type { ButtonColorType, SizeType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        group?: (string | number)[];
-        value?: string | number;
+        group?: (string | number)[] | undefined;
+        value?: (string | number) | undefined;
         checked?: boolean | undefined;
-        inline?: boolean;
-        pill?: boolean;
-        outline?: boolean;
+        inline?: boolean | undefined;
+        pill?: boolean | undefined;
+        outline?: boolean | undefined;
         size?: SizeType | undefined;
         color?: ButtonColorType | undefined;
-        shadow?: boolean;
+        shadow?: boolean | undefined;
     };
     events: {
         keyup: KeyboardEvent;

package/dist/forms/Dropzone.svelte.d.ts

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value?: string;
+        value?: string | undefined;
         files?: FileList | undefined;
-        defaultClass?: string;
+        defaultClass?: string | undefined;
     };
     events: {
         focus: FocusEvent;

package/dist/forms/Fileupload.svelte.d.ts

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value?: string;
+        value?: string | undefined;
         files?: FileList | undefined;
-        inputClass?: string;
+        inputClass?: string | undefined;
     };
     events: {
         change: Event;

package/dist/forms/FloatingLabelInput.svelte

@@ -41,7 +41,7 @@ const labelSizes = {
 };
 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",
+  outlined: "block w-full text-sm text-gray-900 bg-transparent rounded-lg border 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 = {

package/dist/forms/FloatingLabelInput.svelte.d.ts

@@ -3,11 +3,11 @@ import type { InputType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id?: string;
-        style?: "filled" | "outlined" | "standard";
-        type?: InputType;
-        size?: "small" | "default";
-        color?: "base" | "green" | "red";
+        id?: string | undefined;
+        style?: ("filled" | "outlined" | "standard") | undefined;
+        type?: InputType | undefined;
+        size?: ("small" | "default") | undefined;
+        color?: ("base" | "green" | "red") | undefined;
         value?: any;
     };
     events: {

package/dist/forms/Helper.svelte.d.ts

@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        helperClass?: string;
-        color?: "gray" | "green" | "red" | "disabled";
+        helperClass?: string | undefined;
+        color?: ("gray" | "green" | "red" | "disabled") | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/forms/Input.svelte

@@ -5,10 +5,13 @@
 
 <script>import Wrapper from "../utils/Wrapper.svelte";
 import { twMerge } from "tailwind-merge";
-import { getContext } from "svelte";
+import { createEventDispatcher, getContext } from "svelte";
+import CloseButton from "../utils/CloseButton.svelte";
+const dispatcher = createEventDispatcher();
 export let type = "text";
 export let value = void 0;
 export let size = void 0;
+export let clearable = false;
 export let defaultClass = "block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right";
 export let color = "base";
 export let floatClass = "flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400";
@@ -39,11 +42,16 @@ $: _size = size || clampSize(group?.size) || "md";
 let inputClass;
 $: {
   const _color = color === "base" && background ? "tinted" : color;
-  inputClass = twMerge([defaultClass, inputPadding[_size], $$slots.left && leftPadding[_size] || $$slots.right && rightPadding[_size], ringClasses[color], colorClasses[_color], borderClasses[_color], textSizes[_size], group || "rounded-lg", group && "first:rounded-s-lg last:rounded-e-lg", group && "[&:not(:first-child)]:-ms-px", $$props.class]);
+  inputClass = twMerge([defaultClass, inputPadding[_size], $$slots.left && leftPadding[_size] || (clearable || $$slots.right) && rightPadding[_size], ringClasses[color], colorClasses[_color], borderClasses[_color], textSizes[_size], group || "rounded-lg", group && "first:rounded-s-lg last:rounded-e-lg", group && "[&:not(:first-child)]:-ms-px", $$props.class]);
 }
+const clearAll = (e) => {
+  e.stopPropagation();
+  value = void 0;
+  dispatcher("change");
+};
 </script>
 
-<Wrapper class="relative w-full" show={$$slots.left || $$slots.right}>
+<Wrapper class="relative w-full" show>
   {#if $$slots.left}
     <div class="{twMerge(floatClass, $$props.classLeft)} start-0 ps-2.5 pointer-events-none">
       <slot name="left" />
@@ -52,9 +60,14 @@ $: {
   <slot props={{ ...$$restProps, class: inputClass }}>
     <input {...$$restProps} bind:value on:blur on:change on:click on:contextmenu on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste on:input {...{ type }} class={inputClass} />
   </slot>
-  {#if $$slots.right}
-    <div class="{twMerge(floatClass, $$props.classRight)} end-0 pe-2.5"><slot name="right" /></div>
-  {/if}
+  <div class="{twMerge(floatClass, $$props.classRight)} end-0 pe-2.5">
+    {#if $$slots.right}
+      <slot name="right"></slot>
+    {/if}
+    {#if clearable && value && `${value}`.length > 0}
+      <CloseButton {size} on:click={clearAll} color="none" class="p-0 focus:ring-gray-400 dark:text-white" />
+    {/if}
+  </div>
 </Wrapper>
 
 <!--
@@ -64,6 +77,7 @@ $: {
 @prop export let type: InputType = 'text';
 @prop export let value: any = undefined;
 @prop export let size: FormSizeType | undefined = undefined;
+@prop export let clearable = false;
 @prop export let defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right';
 @prop export let color: 'base' | 'green' | 'red' = 'base';
 @prop export let floatClass: string = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';

package/dist/forms/Input.svelte.d.ts

@@ -5,16 +5,17 @@ import type { InputType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        type?: InputType;
+        type?: InputType | undefined;
         value?: any;
         size?: FormSizeType | undefined;
-        defaultClass?: string;
-        color?: "base" | "green" | "red";
-        floatClass?: string;
+        clearable?: boolean | undefined;
+        defaultClass?: string | undefined;
+        color?: ("base" | "green" | "red") | undefined;
+        floatClass?: string | undefined;
     };
     events: {
         blur: FocusEvent;
-        change: Event;
+        change: CustomEvent<any>;
         click: MouseEvent;
         contextmenu: MouseEvent;
         focus: FocusEvent;
@@ -48,6 +49,7 @@ export type InputSlots = typeof __propDef.slots;
  * @prop export let type: InputType = 'text';
  * @prop export let value: any = undefined;
  * @prop export let size: FormSizeType | undefined = undefined;
+ * @prop export let clearable = false;
  * @prop export let defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right';
  * @prop export let color: 'base' | 'green' | 'red' = 'base';
  * @prop export let floatClass: string = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';

package/dist/forms/Label.svelte.d.ts

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: "gray" | "green" | "red" | "disabled";
-        defaultClass?: string;
-        show?: boolean;
+        color?: ("gray" | "green" | "red" | "disabled") | undefined;
+        defaultClass?: string | undefined;
+        show?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/forms/MultiSelect.svelte

@@ -97,7 +97,7 @@ function handleKeyDown(event) {
   {/each}
 </select>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div on:click={() => (show = !show)} on:focusout={() => (show = false)} on:keydown={handleKeyDown} tabindex="0" role="listbox" class={twMerge(multiSelectClass, sizes[size], $$props.class)}>
+<div on:click|self={() => (show = !show)} on:focusout={() => (show = false)} on:keydown={handleKeyDown} tabindex="0" role="listbox" class={twMerge(multiSelectClass, sizes[size], $$props.class)}>
   {#if !selectItems.length}
     <span class="text-gray-400">{placeholder}</span>
   {/if}
@@ -117,7 +117,7 @@ function handleKeyDown(event) {
       <CloseButton {size} on:click={clearAll} color="none" class="p-0 focus:ring-gray-400 dark:text-white" />
     {/if}
     <div class="w-[1px] bg-gray-300 dark:bg-gray-600"></div>
-    <svg class="cursor-pointer h-3 w-3 ms-1 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+    <svg on:click|self={() => (show = !show)} class="cursor-pointer h-3 w-3 ms-1 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={show ? 'm1 5 4-4 4 4' : 'm9 1-4 4-4-4'} />
     </svg>
   </div>

package/dist/forms/MultiSelect.svelte.d.ts

@@ -3,11 +3,11 @@ import type { FormSizeType, SelectOptionType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        items?: SelectOptionType<any>[];
-        value?: (string | number)[];
-        size?: FormSizeType;
-        dropdownClass?: string;
-        placeholder?: string;
+        items?: SelectOptionType<any>[] | undefined;
+        value?: (string | number)[] | undefined;
+        size?: FormSizeType | undefined;
+        dropdownClass?: string | undefined;
+        placeholder?: string | undefined;
     };
     events: {
         input: Event;

package/dist/forms/NumberInput.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value?: number;
+        value?: number | undefined;
     };
     events: {
         blur: FocusEvent;

package/dist/forms/Radio.svelte

@@ -22,7 +22,11 @@ export let inline = false;
 export let group = void 0;
 export let value = "";
 export let spacing = $$slots.default ? "me-2" : "";
+export let checked = false;
 let background = getContext("background");
+$: if (checked && group === void 0) {
+  group = value;
+}
 </script>
 
 <Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
@@ -40,4 +44,5 @@ let background = getContext("background");
 @prop export let group: number | string | undefined = undefined;
 @prop export let value: number | string = '';
 @prop export let spacing: string = $$slots.default ? 'me-2' : '';
+@prop export let checked: boolean = false;
 -->

package/dist/forms/Radio.svelte.d.ts

@@ -5,12 +5,13 @@ import type { FormColorType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: FormColorType;
-        custom?: boolean;
-        inline?: boolean;
+        color?: FormColorType | undefined;
+        custom?: boolean | undefined;
+        inline?: boolean | undefined;
         group?: number | string | undefined;
-        value?: number | string;
-        spacing?: string;
+        value?: (number | string) | undefined;
+        spacing?: string | undefined;
+        checked?: boolean | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -43,6 +44,7 @@ export type RadioSlots = typeof __propDef.slots;
  * @prop export let group: number | string | undefined = undefined;
  * @prop export let value: number | string = '';
  * @prop export let spacing: string = $$slots.default ? 'me-2' : '';
+ * @prop export let checked: boolean = false;
  */
 export default class Radio extends SvelteComponentTyped<RadioProps, RadioEvents, RadioSlots> {
 }

package/dist/forms/RadioButton.svelte.d.ts

@@ -3,14 +3,14 @@ import type { ButtonColorType, SizeType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        group?: string | number;
-        value?: string | number;
-        inline?: boolean;
-        pill?: boolean;
-        outline?: boolean;
+        group?: (string | number) | undefined;
+        value?: (string | number) | undefined;
+        inline?: boolean | undefined;
+        pill?: boolean | undefined;
+        outline?: boolean | undefined;
         size?: SizeType | undefined;
         color?: ButtonColorType | undefined;
-        shadow?: boolean;
+        shadow?: boolean | undefined;
     };
     events: {
         keyup: KeyboardEvent;

package/dist/forms/Range.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         value: number;
-        size?: "sm" | "md" | "lg";
+        size?: ("sm" | "md" | "lg") | undefined;
     };
     events: {
         change: Event;

package/dist/forms/Search.svelte.d.ts

@@ -3,13 +3,13 @@ import type { FormSizeType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        size?: FormSizeType;
-        placeholder?: string;
+        size?: FormSizeType | undefined;
+        placeholder?: string | undefined;
         value?: any;
     };
     events: {
         blur: FocusEvent;
-        change: Event;
+        change: CustomEvent<any>;
         input: Event;
         click: MouseEvent;
         focus: FocusEvent;

package/dist/forms/Select.svelte.d.ts

@@ -3,13 +3,13 @@ import type { SelectOptionType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        items?: SelectOptionType<any>[];
+        items?: SelectOptionType<any>[] | undefined;
         value?: any;
-        placeholder?: string;
-        underline?: boolean;
-        size?: "sm" | "md" | "lg";
-        defaultClass?: string;
-        underlineClass?: string;
+        placeholder?: string | undefined;
+        underline?: boolean | undefined;
+        size?: ("sm" | "md" | "lg") | undefined;
+        defaultClass?: string | undefined;
+        underlineClass?: string | undefined;
     };
     events: {
         change: Event;

package/dist/forms/Textarea.svelte.d.ts

@@ -3,11 +3,11 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         value?: any;
-        wrappedClass?: string;
-        unWrappedClass?: string;
-        innerWrappedClass?: string;
-        headerClass?: string;
-        footerClass?: string;
+        wrappedClass?: string | undefined;
+        unWrappedClass?: string | undefined;
+        innerWrappedClass?: string | undefined;
+        headerClass?: string | undefined;
+        footerClass?: string | undefined;
     };
     events: {
         blur: FocusEvent;

package/dist/forms/Toggle.svelte

@@ -26,10 +26,11 @@ const sizes = {
   custom: customSize
 };
 let divClass;
-$: divClass = twMerge(common, background ? "dark:bg-gray-600 dark:border-gray-500" : "dark:bg-gray-700 dark:border-gray-600", colors[$$restProps.color ?? "primary"], sizes[size], "relative", $$props.classDiv);
+$: divClass = twMerge(common, $$slots.offLabel ? "ms-3" : "", background ? "dark:bg-gray-600 dark:border-gray-500" : "dark:bg-gray-700 dark:border-gray-600", colors[$$restProps.color ?? "primary"], sizes[size], "relative", $$props.classDiv);
 </script>
 
 <Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click on:change>
+  <slot name="offLabel"></slot>
   <span class={divClass}></span>
   <slot></slot>
 </Checkbox>