flowbite-svelte 0.27.15 → 0.27.16

package/typography/Hr.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        icon?: boolean | undefined;
+        width?: string | undefined;
+        height?: string | undefined;
+        divClass?: string | undefined;
+        hrClass?: string | undefined;
+        iconDivClass?: string | undefined;
+        textSpanClass?: string | undefined;
+        middleBgColor?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type HrProps = typeof __propDef.props;
+export declare type HrEvents = typeof __propDef.events;
+export declare type HrSlots = typeof __propDef.slots;
+export default class Hr extends SvelteComponentTyped<HrProps, HrEvents, HrSlots> {
+}
+export {};

package/typography/Img.svelte

@@ -0,0 +1,30 @@
+<script>import classNames from 'classnames';
+export let caption = undefined;
+export let src = undefined;
+export let srcset = undefined;
+export let size = 'max-w-full';
+export let alignment = '';
+export let imgClass = 'h-auto';
+export let figClass = 'max-w-lg';
+export let alt = '';
+export let effect = '';
+export let captionClass = 'mt-2 text-sm text-center text-gray-500 dark:text-gray-400';
+</script>
+
+{#if caption}
+  <figure class={figClass}>
+    <img
+      class={classNames(imgClass, size, alignment, effect, $$props.class)}
+      {src}
+      {srcset}
+      {alt} />
+    <figcaption class={captionClass}>{@html caption}</figcaption>
+  </figure>
+{:else}
+  <img
+    {...$$restProps}
+    class={classNames(imgClass, size, alignment, effect, $$props.class)}
+    {src}
+    {srcset}
+    {alt} />
+{/if}

package/typography/Img.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        caption?: string | undefined;
+        src?: string | undefined;
+        srcset?: string | undefined;
+        size?: string | undefined;
+        alignment?: string | undefined;
+        imgClass?: string | undefined;
+        figClass?: string | undefined;
+        alt?: string | undefined;
+        effect?: string | undefined;
+        captionClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ImgProps = typeof __propDef.props;
+export declare type ImgEvents = typeof __propDef.events;
+export declare type ImgSlots = typeof __propDef.slots;
+export default class Img extends SvelteComponentTyped<ImgProps, ImgEvents, ImgSlots> {
+}
+export {};

package/typography/Layout.svelte

@@ -0,0 +1,10 @@
+<script>import classNames from 'classnames';
+export let divClass = 'grid';
+export let cols = 'grid-cols-1 sm:grid-cols-2';
+export let gap;
+let classDiv = classNames(divClass, 'gap-' + String(gap), cols);
+</script>
+
+<div {...$$restProps} class={classDiv}>
+  <slot />
+</div>

package/typography/Layout.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        divClass?: string | undefined;
+        cols?: string | undefined;
+        gap: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type LayoutProps = typeof __propDef.props;
+export declare type LayoutEvents = typeof __propDef.events;
+export declare type LayoutSlots = typeof __propDef.slots;
+export default class Layout extends SvelteComponentTyped<LayoutProps, LayoutEvents, LayoutSlots> {
+}
+export {};

package/typography/Li.svelte

@@ -0,0 +1,9 @@
+<script>import classNames from 'classnames';
+export let icon = false;
+export let liClass = '';
+let classLi = classNames(liClass, icon && 'flex items-center', $$props.class);
+</script>
+
+<li {...$$restProps} class={classLi}>
+  <slot />
+</li>

package/typography/Li.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        icon?: boolean | undefined;
+        liClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type LiProps = typeof __propDef.props;
+export declare type LiEvents = typeof __propDef.events;
+export declare type LiSlots = typeof __propDef.slots;
+export default class Li extends SvelteComponentTyped<LiProps, LiEvents, LiSlots> {
+}
+export {};

package/typography/List.svelte

@@ -0,0 +1,23 @@
+<script>import classNames from 'classnames';
+export let tag = 'ul';
+export let list = 'disc';
+export let position = 'inside';
+export let color = 'text-gray-500 dark:text-gray-400';
+export let olClass = 'list-decimal list-inside';
+export let ulClass = 'max-w-md';
+export let dlClass = 'max-w-md divide-y divide-gray-200  dark:divide-gray-700';
+let lists = {
+    disc: 'list-disc',
+    none: 'list-none',
+    decimal: 'list-decimal'
+};
+let positions = {
+    inside: 'list-inside',
+    outside: 'list-outside'
+};
+let classList = classNames(color, tag === 'ul' ? ulClass : 'ol' ? olClass : dlClass, lists[list], positions[position], $$props.class);
+</script>
+
+<svelte:element this={tag} {...$$restProps} class={classList}>
+  <slot />
+</svelte:element>

package/typography/List.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        tag?: "dl" | "ol" | "ul" | undefined;
+        list?: "none" | "disc" | "decimal" | undefined;
+        position?: "inside" | "outside" | undefined;
+        color?: string | undefined;
+        olClass?: string | undefined;
+        ulClass?: string | undefined;
+        dlClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ListProps = typeof __propDef.props;
+export declare type ListEvents = typeof __propDef.events;
+export declare type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+}
+export {};

package/typography/Mark.svelte

@@ -0,0 +1,9 @@
+<script>import classNames from 'classnames';
+export let color = 'text-white dark:bg-blue-500';
+export let bgColor = 'bg-blue-600';
+export let markClass = 'px-2 rounded';
+</script>
+
+<mark {...$$restProps} class={classNames(markClass, bgColor, color, $$props.class)}>
+  <slot />
+</mark>

package/typography/Mark.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: string | undefined;
+        bgColor?: string | undefined;
+        markClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type MarkProps = typeof __propDef.props;
+export declare type MarkEvents = typeof __propDef.events;
+export declare type MarkSlots = typeof __propDef.slots;
+export default class Mark extends SvelteComponentTyped<MarkProps, MarkEvents, MarkSlots> {
+}
+export {};

package/typography/P.svelte

@@ -0,0 +1,75 @@
+<script>import classNames from 'classnames';
+export let color = 'text-gray-900 dark:text-white';
+export let height = 'normal';
+export let align = 'left';
+export let justify = false;
+export let italic = false;
+export let firstupper = false;
+export let upperClass = 'first-line:uppercase first-line:tracking-widest first-letter:text-7xl first-letter:font-bold first-letter:text-gray-900 dark:first-letter:text-gray-100 first-letter:mr-3 first-letter:float-left';
+export let opacity = undefined;
+export let whitespace = 'normal';
+export let size = 'base';
+export let space = undefined;
+export let weight = 'normal';
+const sizes = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+    '2xl': 'text-2xl',
+    '3xl': 'text-3xl',
+    '4xl': 'text-4xl',
+    '5xl': 'text-5xl',
+    '6xl': 'text-6xl',
+    '7xl': 'text-7xl',
+    '8xl': 'text-8xl',
+    '9xl': 'text-9xl'
+};
+const weights = {
+    thin: 'font-thin',
+    extralight: 'font-extralight',
+    light: 'font-light',
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+    extrabold: 'font-extrabold',
+    black: 'font-black'
+};
+const spaces = {
+    tighter: 'tracking-tighter',
+    tight: 'tracking-tight',
+    normal: 'tracking-normal',
+    wide: 'tracking-wide',
+    wider: 'tracking-wider',
+    widest: 'tracking-widest'
+};
+const heights = {
+    normal: 'leading-normal',
+    relaxed: 'leading-relaxed',
+    loose: 'leading-loose'
+};
+const aligns = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right'
+};
+const whitespaces = {
+    normal: 'whitespace-normal',
+    nowrap: 'whitespace-nowrap',
+    pre: 'whitespace-pre',
+    preline: 'whitespace-pre-line',
+    prewrap: 'whitespace-pre-wrap'
+};
+let colorAndopacity = color
+    .split(' ')
+    .map((element) => element.trim())
+    .map((element) => element + '/' + String(opacity))
+    .join(' ');
+let classP = classNames(size && sizes[size], (opacity && colorAndopacity) || (color && color), height && heights[height], weight && weights[weight], space && spaces[space], align && aligns[align], justify && 'text-justify', italic && 'italic', firstupper && upperClass, whitespace && whitespaces[whitespace], $$props.class);
+</script>
+
+<p {...$$restProps} class={classP}>
+  <slot />
+</p>

package/typography/P.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: string | undefined;
+        height?: "normal" | "relaxed" | "loose" | undefined;
+        align?: "left" | "right" | "center" | undefined;
+        justify?: boolean | undefined;
+        italic?: boolean | undefined;
+        firstupper?: boolean | undefined;
+        upperClass?: string | undefined;
+        opacity?: number | undefined;
+        whitespace?: "pre" | "normal" | "nowrap" | "preline" | "prewrap" | undefined;
+        size?: "xs" | "sm" | "lg" | "xl" | "base" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
+        space?: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | undefined;
+        weight?: "light" | "bold" | "normal" | "thin" | "extralight" | "medium" | "semibold" | "extrabold" | "black" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type PProps = typeof __propDef.props;
+export declare type PEvents = typeof __propDef.events;
+export declare type PSlots = typeof __propDef.slots;
+export default class P extends SvelteComponentTyped<PProps, PEvents, PSlots> {
+}
+export {};

package/typography/Secondary.svelte

@@ -0,0 +1,8 @@
+<script>import classNames from 'classnames';
+export let color = 'text-gray-500 dark:text-gray-400';
+export let secondaryClass = 'font-semibold';
+</script>
+
+<small {...$$restProps} class={classNames(color, secondaryClass, $$props.class)}>
+  <slot />
+</small>

package/typography/Secondary.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: string | undefined;
+        secondaryClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type SecondaryProps = typeof __propDef.props;
+export declare type SecondaryEvents = typeof __propDef.events;
+export declare type SecondarySlots = typeof __propDef.slots;
+export default class Secondary extends SvelteComponentTyped<SecondaryProps, SecondaryEvents, SecondarySlots> {
+}
+export {};

package/typography/Span.svelte

@@ -0,0 +1,17 @@
+<script>import classNames from 'classnames';
+export let italic = false;
+export let underline = false;
+export let linethrough = false;
+export let uppercase = false;
+export let gradient = false;
+export let highlight = false;
+export let highlightClass = 'text-blue-600 dark:text-blue-500';
+export let decorationClass = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
+export let gradientClass = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+let underlineClass = classNames('underline', decorationClass);
+let classSpan = classNames(italic && 'italic', underline && underlineClass, linethrough && 'line-through', uppercase && 'uppercase', gradient ? gradientClass : 'font-semibold text-gray-900 dark:text-white', highlight && highlightClass, $$props.class);
+</script>
+
+<span {...$$restProps} class={classSpan}>
+  <slot />
+</span>

package/typography/Span.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        italic?: boolean | undefined;
+        underline?: boolean | undefined;
+        linethrough?: boolean | undefined;
+        uppercase?: boolean | undefined;
+        gradient?: boolean | undefined;
+        highlight?: boolean | undefined;
+        highlightClass?: string | undefined;
+        decorationClass?: string | undefined;
+        gradientClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type SpanProps = typeof __propDef.props;
+export declare type SpanEvents = typeof __propDef.events;
+export declare type SpanSlots = typeof __propDef.slots;
+export default class Span extends SvelteComponentTyped<SpanProps, SpanEvents, SpanSlots> {
+}
+export {};

package/typography/Ul.svelte

@@ -0,0 +1,20 @@
+<script>import classNames from 'classnames';
+export let list = 'disc';
+export let position = 'inside';
+export let ulClass = 'max-w-md text-gray-500 dark:text-gray-400';
+let lists = {
+    disc: 'list-disc',
+    none: 'list-none',
+    decimal: 'list-decimal'
+};
+let positions = {
+    inside: 'list-inside',
+    outside: 'list-outside'
+};
+let classUl = classNames(ulClass, lists[list], positions[position], $$props.class);
+console.log('list', list);
+</script>
+
+<ul {...$$restProps} class={classUl} {list}>
+  <slot />
+</ul>

package/typography/Ul.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        list?: "none" | "disc" | "decimal" | undefined;
+        position?: "inside" | "outside" | undefined;
+        ulClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type UlProps = typeof __propDef.props;
+export declare type UlEvents = typeof __propDef.events;
+export declare type UlSlots = typeof __propDef.slots;
+export default class Ul extends SvelteComponentTyped<UlProps, UlEvents, UlSlots> {
+}
+export {};

package/utils/Chevron.svelte

@@ -0,0 +1,26 @@
+<script>import ChevronDown from './ChevronDown.svelte';
+import ChevronLeft from './ChevronLeft.svelte';
+import ChevronUp from './ChevronUp.svelte';
+import ChevronRight from './ChevronRight.svelte';
+import Wrapper from './Wrapper.svelte';
+export let placement = 'bottom';
+export let aligned = false;
+const icons = {
+    top: ChevronUp,
+    right: ChevronRight,
+    bottom: ChevronDown,
+    left: ChevronLeft
+};
+let icon;
+$: icon = icons[placement.split('-')[0]] ?? ChevronDown;
+</script>
+
+<Wrapper class="flex items-center justify-between" show={aligned}>
+  {#if placement.split('-')[0] === 'left'}
+    <ChevronLeft class="h-4 w-4 mr-2" />
+    <slot />
+  {:else}
+    <slot />
+    <svelte:component this={icon} class="h-4 w-4 ml-2" />
+  {/if}
+</Wrapper>

package/utils/Chevron.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Placement } from '@popperjs/core';
+declare const __propDef: {
+    props: {
+        placement?: Placement | undefined;
+        aligned?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ChevronProps = typeof __propDef.props;
+export declare type ChevronEvents = typeof __propDef.events;
+export declare type ChevronSlots = typeof __propDef.slots;
+export default class Chevron extends SvelteComponentTyped<ChevronProps, ChevronEvents, ChevronSlots> {
+}
+export {};

package/utils/ChevronDown.svelte

@@ -0,0 +1,36 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 16.2803C12.2374 16.5732 11.7626 16.5732 11.4697 16.2803L3.96967 8.78033C3.67678 8.48744 3.67678 8.01256 3.96967 7.71967C4.26256 7.42678 4.73744 7.42678 5.03033 7.71967L12 14.6893L18.9697 7.71967C19.2626 7.42678 19.7374 7.42678 20.0303 7.71967C20.3232 8.01256 20.3232 8.48744 20.0303 8.78033L12.5303 16.2803Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'chevron down';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>

package/utils/ChevronDown.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string | undefined;
+        color?: string | undefined;
+        variation?: "solid" | "outline" | undefined;
+        ariaLabel?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ChevronDownProps = typeof __propDef.props;
+export declare type ChevronDownEvents = typeof __propDef.events;
+export declare type ChevronDownSlots = typeof __propDef.slots;
+export default class ChevronDown extends SvelteComponentTyped<ChevronDownProps, ChevronDownEvents, ChevronDownSlots> {
+}
+export {};

package/utils/ChevronLeft.svelte

@@ -0,0 +1,36 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M15.75 19.5L8.25 12L15.75 4.5" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M7.71967 12.5303C7.42678 12.2374 7.42678 11.7626 7.71967 11.4697L15.2197 3.96967C15.5126 3.67678 15.9874 3.67678 16.2803 3.96967C16.5732 4.26256 16.5732 4.73744 16.2803 5.03033L9.31066 12L16.2803 18.9697C16.5732 19.2626 16.5732 19.7374 16.2803 20.0303C15.9874 20.3232 15.5126 20.3232 15.2197 20.0303L7.71967 12.5303Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'chevron left';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>

package/utils/ChevronLeft.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string | undefined;
+        color?: string | undefined;
+        variation?: "solid" | "outline" | undefined;
+        ariaLabel?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ChevronLeftProps = typeof __propDef.props;
+export declare type ChevronLeftEvents = typeof __propDef.events;
+export declare type ChevronLeftSlots = typeof __propDef.slots;
+export default class ChevronLeft extends SvelteComponentTyped<ChevronLeftProps, ChevronLeftEvents, ChevronLeftSlots> {
+}
+export {};

package/utils/ChevronRight.svelte

@@ -0,0 +1,36 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M8.25 4.5L15.75 12L8.25 19.5" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2803 11.4697C16.5732 11.7626 16.5732 12.2374 16.2803 12.5303L8.78033 20.0303C8.48744 20.3232 8.01256 20.3232 7.71967 20.0303C7.42678 19.7374 7.42678 19.2626 7.71967 18.9697L14.6893 12L7.71967 5.03033C7.42678 4.73744 7.42678 4.26256 7.71967 3.96967C8.01256 3.67678 8.48744 3.67678 8.78033 3.96967L16.2803 11.4697Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'chevron right';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>