flowbite-svelte 0.26.0 → 0.26.3

package/ratings/Review.svelte

@@ -15,29 +15,26 @@ export let liClass = 'flex items-center';
 				<p>{review.name}</p>
 				{#if review.address}
 					<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
-						{#if review.addressIcon}
-							<svelte:component this={review.addressIcon} size="16" class="mr-2" />
-						{/if}
-						{review.address}
+						<slot name="address" />
 					</div>
 				{/if}
 			</div>
 		</div>
-		{#if $$slots.item || $$slots.option1 || $$slots.option2}
+		{#if $$slots.item1 || $$slots.item2 || $$slots.item3}
 			<ul class={classNames(ulClass, $$props.classUl)}>
-				{#if $$slots.item}
+				{#if $$slots.item1}
 					<li class={classNames(liClass, $$props.classLi)}>
-						<slot name="item" />
+						<slot name="item1" />
 					</li>
 				{/if}
-				{#if $$slots.option1}
+				{#if $$slots.item2}
 					<li class={classNames(liClass, $$props.classLi)}>
-						<slot name="option1" />
+						<slot name="item2" />
 					</li>
 				{/if}
-				{#if $$slots.option2}
+				{#if $$slots.item3}
 					<li class={classNames(liClass, $$props.classLi)}>
-						<slot name="option2" />
+						<slot name="item3" />
 					</li>
 				{/if}
 			</ul>
@@ -58,8 +55,7 @@ export let liClass = 'flex items-center';
 				</h4>
 			</div>
 			<p
-				class="bg-blue-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded"
-			>
+				class="bg-blue-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded">
 				{review.rating}
 			</p>
 		</div>

package/ratings/Review.svelte.d.ts

@@ -14,9 +14,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        item: {};
-        option1: {};
-        option2: {};
+        address: {};
+        item1: {};
+        item2: {};
+        item3: {};
         default: {};
     };
 };

package/sidebars/SidebarDropdownWrapper.svelte

@@ -6,7 +6,6 @@ export let btnClass = 'flex items-center p-2 w-full text-base font-normal text-g
 export let label = '';
 export let spanClass = 'flex-1 ml-3 text-left whitespace-nowrap';
 export let ulClass = 'py-2 space-y-2';
-export let icon;
 let isOpen = false;
 const handleDropdown = () => {
     isOpen = !isOpen;
@@ -20,11 +19,7 @@ const handleDropdown = () => {
 		type="button"
 		class={classNames(btnClass, $$props.class)}
 		aria-controls="sidebar-dropdown">
-		<svelte:component
-			this={icon.name}
-			size={icon.size}
-			color={icon.color}
-			class="mr-2 {icon.class}" />
+		<slot name="icon" />
 		<span class={spanClass} sidebar-toggle-item>{label}</span>
 		<ChevronDown />
 	</button>

package/sidebars/SidebarDropdownWrapper.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import type { IconType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -7,12 +6,12 @@ declare const __propDef: {
         label?: string;
         spanClass?: string;
         ulClass?: string;
-        icon: IconType;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        icon: {};
         default: {};
     };
 };

package/sidebars/SidebarItem.svelte

@@ -3,7 +3,6 @@ export let aClass = 'flex items-center p-2 text-base font-normal text-gray-900 r
 export let href = '';
 export let label = '';
 export let spanClass = 'ml-3';
-export let icon;
 </script>
 
 <li>
@@ -19,14 +18,8 @@ export let icon;
 		on:mouseenter
 		on:mouseleave
 		on:mouseover
-		class={classNames(aClass, $$props.class)}
-	>
-		<svelte:component
-			this={icon.name}
-			size={icon.size}
-			color={icon.color}
-			class="mr-2 {icon.class}"
-		/>
+		class={classNames(aClass, $$props.class)}>
+		<slot name="icon" />
 		<span class={spanClass}>{label}</span>
 		{#if $$slots.subtext}
 			<slot name="subtext" />

package/sidebars/SidebarItem.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import type { IconType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -7,7 +6,6 @@ declare const __propDef: {
         href?: string;
         label?: string;
         spanClass?: string;
-        icon: IconType;
     };
     events: {
         blur: FocusEvent;
@@ -23,6 +21,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        icon: {};
         subtext: {};
     };
 };

package/tabs/TabContentItem.svelte

@@ -0,0 +1,10 @@
+<script>export let activeTabValue;
+export let id;
+export let contentDivClass = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800';
+</script>
+
+{#if activeTabValue === id}
+	<div class={contentDivClass} id="{id}-tabitem" role="tabpanel" aria-labelledby="{id}-tab">
+		<slot />
+	</div>
+{/if}

package/tabs/TabContentItem.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        activeTabValue: number;
+        id: number;
+        contentDivClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TabContentItemProps = typeof __propDef.props;
+export declare type TabContentItemEvents = typeof __propDef.events;
+export declare type TabContentItemSlots = typeof __propDef.slots;
+export default class TabContentItem extends SvelteComponentTyped<TabContentItemProps, TabContentItemEvents, TabContentItemSlots> {
+}
+export {};

package/tabs/TabContentWrapper.svelte

@@ -0,0 +1,8 @@
+<script>import { getContext } from 'svelte';
+let tabId;
+tabId = getContext('tabId');
+</script>
+
+<div id="{tabId}-content">
+	<slot />
+</div>

package/tabs/TabContentWrapper.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TabContentWrapperProps = typeof __propDef.props;
+export declare type TabContentWrapperEvents = typeof __propDef.events;
+export declare type TabContentWrapperSlots = typeof __propDef.slots;
+export default class TabContentWrapper extends SvelteComponentTyped<TabContentWrapperProps, TabContentWrapperEvents, TabContentWrapperSlots> {
+}
+export {};

package/tabs/TabHead.svelte

@@ -0,0 +1,27 @@
+<script>export let tabStyle;
+export let tabId;
+export let customDivClass = '';
+export let customUlClass = '';
+const divClasses = {
+    default: 'mb-4 border-b border-gray-200 dark:border-gray-700',
+    full: 'mb-4',
+    icon: 'mb-4 border-b border-gray-200 dark:border-gray-700',
+    pill: 'mb-4 ',
+    underline: 'mb-4 text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700',
+    custom: customDivClass
+};
+const ulClasses = {
+    default: 'flex flex-wrap -mb-px',
+    full: 'hidden text-sm font-medium text-center text-gray-500 rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 dark:text-gray-400 mb-1',
+    icon: 'flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400',
+    pill: 'flex flex-wrap',
+    underline: 'flex flex-wrap -mb-px',
+    custom: customUlClass
+};
+</script>
+
+<div class={divClasses[tabStyle]}>
+	<ul class={ulClasses[tabStyle]} id={tabId} role="tablist">
+		<slot />
+	</ul>
+</div>

package/tabs/TabHead.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        tabStyle: any;
+        tabId: any;
+        customDivClass?: string;
+        customUlClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TabHeadProps = typeof __propDef.props;
+export declare type TabHeadEvents = typeof __propDef.events;
+export declare type TabHeadSlots = typeof __propDef.slots;
+export default class TabHead extends SvelteComponentTyped<TabHeadProps, TabHeadEvents, TabHeadSlots> {
+}
+export {};

package/tabs/TabHeadItem.svelte

@@ -0,0 +1,54 @@
+<script>import classNames from 'classnames';
+export let id;
+export let tabStyle;
+export let activeTabValue;
+export let customActiveClass = '';
+export let customInActiveClass = '';
+export let customLiClass = '';
+const activeClasses = {
+    default: 'inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500',
+    full: 'inline-block p-4 w-full text-gray-900 bg-gray-100 focus:ring-4 focus:ring-blue-300 active focus:outline-none dark:bg-gray-700 dark:text-white',
+    icon: 'inline-flex p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500 group',
+    pill: 'active inline-block py-3 px-4 text-sm font-medium text-center text-white bg-blue-600 rounded-lg',
+    underline: 'inline-block p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500',
+    custom: customActiveClass
+};
+const inactiveClasses = {
+    default: 'inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300',
+    full: 'inline-block p-4 w-full bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700',
+    icon: 'inline-flex p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group ',
+    pill: 'inline-block py-3 px-4 text-sm font-medium text-center text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white',
+    underline: 'inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300',
+    custom: customInActiveClass
+};
+const liClasses = {
+    default: 'mr-2',
+    full: 'w-full',
+    icon: 'mr-2',
+    pill: 'mr-2',
+    underline: 'mr-2',
+    custom: customLiClass
+};
+</script>
+
+<li class={liClasses[tabStyle]} role="presentation">
+	<button
+		{...$$restProps}
+		on:click
+		on:blur
+		on:click
+		on:focus
+		on:keydown
+		on:keypress
+		on:keyup
+		on:mouseenter
+		on:mouseleave
+		on:mouseover
+		class={classNames(activeTabValue === id ? activeClasses[tabStyle] : inactiveClasses[tabStyle])}
+		id="{id}-tabhead"
+		type="button"
+		role="tab"
+		{...$$restProps}>
+		<slot />
+	</button>
+</li>

package/tabs/TabHeadItem.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id: number;
+        tabStyle: string;
+        activeTabValue: number;
+        customActiveClass?: string;
+        customInActiveClass?: string;
+        customLiClass?: string;
+    };
+    events: {
+        click: MouseEvent;
+        blur: FocusEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TabHeadItemProps = typeof __propDef.props;
+export declare type TabHeadItemEvents = typeof __propDef.events;
+export declare type TabHeadItemSlots = typeof __propDef.slots;
+export default class TabHeadItem extends SvelteComponentTyped<TabHeadItemProps, TabHeadItemEvents, TabHeadItemSlots> {
+}
+export {};

package/tabs/TabWrapper.svelte

@@ -0,0 +1,10 @@
+<script>import classNames from 'classnames';
+export let divClass = 'w-full';
+export let tabStyle = 'default';
+let tabId;
+export let activeTabValue;
+</script>
+
+<div class={classNames(divClass, $$props.class)}>
+	<slot {tabStyle} {tabId} {activeTabValue} />
+</div>

package/tabs/TabWrapper.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        divClass?: string;
+        tabStyle?: 'default' | 'full' | 'icon' | 'pill' | 'underline' | 'custom';
+        activeTabValue: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            tabStyle: "default" | "custom" | "full" | "icon" | "pill" | "underline";
+            tabId: number;
+            activeTabValue: number;
+        };
+    };
+};
+export declare type TabWrapperProps = typeof __propDef.props;
+export declare type TabWrapperEvents = typeof __propDef.events;
+export declare type TabWrapperSlots = typeof __propDef.slots;
+export default class TabWrapper extends SvelteComponentTyped<TabWrapperProps, TabWrapperEvents, TabWrapperSlots> {
+}
+export {};

package/toasts/Toast.svelte

@@ -1,29 +1,12 @@
-<script>import classNames from 'classnames';
-import * as transitions from 'svelte/transition';
+<script>import Frame from '../utils/Frame.svelte';
+import classNames from 'classnames';
 import CloseButton from '../utils/CloseButton.svelte';
 export let color = 'blue';
 export let simple = false;
-// Export a prop through which you can set a desired transition
-export let transition = 'fade';
-// Pass in extra transition params
-export let params = {};
 // Absolute position
 export let position = undefined; // default not set
 export let visible = true;
-export let divClass = 'w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800';
-const colors = {
-    blue: 'text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200',
-    green: 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200',
-    red: 'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200',
-    gray: 'text-gray-500 bg-gray-100 dark:bg-gray-800 dark:text-gray-200',
-    purple: 'text-purple-500 bg-purple-100 dark:bg-purple-800 dark:text-purple-200',
-    indigo: 'text-indigo-500 bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200',
-    yellow: 'text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200',
-    pink: 'text-pink-500 bg-pink-100 dark:bg-pink-800 dark:text-pink-200'
-};
-// have a custom transition function that returns the desired transition
-let transitionFunc;
-$: transitionFunc = transitions[transition] ?? transitions.fade;
+export let divClass = 'w-full max-w-xs p-4';
 $: classDiv = classNames(divClass, {
     'absolute top-5 left-5': position == 'tl',
     'absolute top-5 right-5': position == 'tr',
@@ -31,14 +14,14 @@ $: classDiv = classNames(divClass, {
     'absolute bottom-5 right-5': position == 'br'
 }, $$props.class);
 let iconClass;
-$: iconClass = classNames('inline-flex items-center justify-center flex-shrink-0 rounded-lg w-8 h-8 mr-3', colors[color]);
+$: iconClass = classNames('inline-flex items-center justify-center flex-shrink-0 w-8 h-8 mr-3');
 </script>
 
 {#if visible}
-	<div transition:transitionFunc={params} class={classDiv} role="alert">
+	<Frame rounded border transition="fade" {...$$restProps} class={classDiv} role="alert">
 		<div class="flex {$$slots.extra ? 'items-start' : 'items-center'}">
 			{#if $$slots.icon}
-				<div class={iconClass}><slot name="icon" /></div>
+				<Frame {color} rounded class={iconClass}><slot name="icon" /></Frame>
 			{/if}
 
 			<div class="text-sm font-normal w-full">
@@ -49,5 +32,5 @@ $: iconClass = classNames('inline-flex items-center justify-center flex-shrink-0
 				<CloseButton on:click={() => (visible = false)} />
 			{/if}
 		</div>
-	</div>
+	</Frame>
 {/if}

package/toasts/Toast.svelte.d.ts

@@ -1,12 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Colors, TransitionTypes, TransitionParamTypes } from '../types';
+import type { Colors } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
         color?: Colors;
         simple?: boolean;
-        transition?: TransitionTypes;
-        params?: TransitionParamTypes;
         position?: 'tl' | 'tr' | 'bl' | 'br';
         visible?: boolean;
         divClass?: string;

package/types.d.ts

@@ -157,16 +157,12 @@ export declare type ReviewType = {
     imgSrc: string;
     imgAlt: string;
     address: string | undefined;
-    addressIcon: typeof SvelteComponent | undefined;
     reviewDate: string | undefined;
     title: string;
     rating: number;
-    item: string | undefined;
-    itemIcon: typeof SvelteComponent | undefined;
-    option1: string | undefined;
-    option1Icon: typeof SvelteComponent | undefined;
-    option2: string | undefined;
-    option2Icon: typeof SvelteComponent | undefined;
+    item1: string | undefined;
+    item2: string | undefined;
+    item3: string | undefined;
 };
 export declare type SelectOptionType = {
     name: string;

package/typography/A.svelte

@@ -1,9 +1,10 @@
 <script>import classNames from 'classnames';
 export let href = '#';
 export let textColor = 'text-blue-600 dark:text-blue-500';
-export let aClass = 'inline-flex items-center text-lg  hover:underline';
+export let aClass = 'inline-flex items-center hover:underline';
+export let textSize = 'text-lg';
 </script>
 
-<a {href} class={classNames(aClass, textColor, $$props.class)}>
-	<slot />
+<a {href} class={classNames(aClass, textColor, textSize, $$props.class)}>
+  <slot />
 </a>

package/typography/A.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         href?: string;
         textColor?: string;
         aClass?: string;
+        textSize?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/utils/Frame.svelte

@@ -0,0 +1,73 @@
+<script>import classNames from 'classnames';
+import { setContext } from 'svelte';
+import * as transitions from 'svelte/transition';
+setContext('background', true);
+$: setContext('color', color);
+export let tag = 'div';
+export let color = 'default';
+export let rounded = false;
+export let border = false;
+export let shadow = false;
+// Export a prop through which you can set a desired transition
+export let transition = undefined;
+// Pass in extra transition params
+export let params = {};
+// your script goes here
+const bgColors = {
+    gray: 'bg-gray-100 dark:bg-gray-200 ',
+    red: 'bg-red-100 dark:bg-red-200',
+    yellow: 'bg-yellow-100 dark:bg-yellow-200 ',
+    green: 'bg-green-100 dark:bg-green-200 ',
+    indigo: 'bg-indigo-100 dark:bg-indigo-200 ',
+    purple: 'bg-purple-100 dark:bg-purple-200 ',
+    pink: 'bg-pink-100 dark:bg-pink-200 ',
+    blue: 'bg-blue-100 dark:bg-blue-200 ',
+    light: 'bg-gray-50 dark:bg-gray-700',
+    dark: 'bg-gray-100 dark:bg-gray-700',
+    default: 'bg-white dark:bg-gray-800',
+    none: ''
+};
+const textColors = {
+    gray: 'text-gray-700 dark:text-gray-800',
+    red: 'text-red-700 dark:text-red-800',
+    yellow: 'text-yellow-700 dark:text-yellow-800',
+    green: 'text-green-700 dark:text-green-800',
+    indigo: 'text-indigo-700 dark:text-indigo-800',
+    purple: 'text-purple-700 dark:text-purple-800',
+    pink: 'text-pink-700 dark:text-pink-800',
+    blue: 'text-blue-700 dark:text-blue-800',
+    light: 'text-gray-700 dark:text-gray-300',
+    dark: 'text-gray-700 dark:text-gray-300',
+    default: 'text-gray-500 dark:text-gray-400',
+    none: ''
+};
+const borderColors = {
+    gray: 'border-gray-500 dark:bg-gray-200 ',
+    red: 'border-red-500 dark:bg-red-200 ',
+    yellow: 'border-yellow-500 dark:bg-tellow-200 ',
+    green: 'border-green-500 dark:bg-green-200 ',
+    indigo: 'border-indigo-500 dark:bg-indigo-200 ',
+    purple: 'border-purple-500 dark:bg-purple-200 ',
+    pink: 'border-pink-500 dark:bg-pink-200 ',
+    blue: 'border-blue-500 dark:bg-blue-200 ',
+    light: 'border-gray-500',
+    dark: 'border-gray-500',
+    default: 'border-gray-200 dark:border-gray-700',
+    none: ''
+};
+// have a custom transition function that returns the desired transition
+let transitionFunc;
+$: transitionFunc = transitions[transition];
+let divClass;
+$: divClass = classNames(bgColors[color], textColors[color], rounded && 'rounded-lg ', border && 'border', borderColors[color], shadow && 'shadow-md', $$props.class);
+</script>
+
+{#if transitionFunc}
+	<svelte:element this={tag} transition:transitionFunc={params} {...$$restProps} class={divClass}>
+		<slot />
+	</svelte:element>
+{:else}
+	<svelte:element this={tag} {...$$restProps} class={divClass}>
+		<slot />
+	</svelte:element>
+{/if}

package/utils/Frame.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TransitionTypes, TransitionParamTypes } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        tag?: string;
+        color?: string;
+        rounded?: boolean;
+        border?: boolean;
+        shadow?: boolean;
+        transition?: TransitionTypes;
+        params?: TransitionParamTypes;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type FrameProps = typeof __propDef.props;
+export declare type FrameEvents = typeof __propDef.events;
+export declare type FrameSlots = typeof __propDef.slots;
+export default class Frame extends SvelteComponentTyped<FrameProps, FrameEvents, FrameSlots> {
+}
+export {};

package/utils/InformationCircle.svelte

@@ -0,0 +1,37 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M11.25 11.25L11.2915 11.2293C11.8646 10.9427 12.5099 11.4603 12.3545 12.082L11.6455 14.918C11.4901 15.5397 12.1354 16.0573 12.7085 15.7707L12.75 15.75M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM12 8.25H12.0075V8.2575H12V8.25Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM10.9562 10.5584C12.1025 9.98533 13.3931 11.0206 13.0823 12.2639L12.3733 15.0999L12.4148 15.0792C12.7852 14.894 13.2357 15.0441 13.421 15.4146C13.6062 15.7851 13.4561 16.2356 13.0856 16.4208L13.0441 16.4416C11.8979 17.0147 10.6072 15.9794 10.9181 14.7361L11.6271 11.9001L11.5856 11.9208C11.2151 12.1061 10.7646 11.9559 10.5793 11.5854C10.3941 11.2149 10.5443 10.7644 10.9148 10.5792L10.9562 10.5584ZM12 9C12.4142 9 12.75 8.66421 12.75 8.25C12.75 7.83579 12.4142 7.5 12 7.5C11.5858 7.5 11.25 7.83579 11.25 8.25C11.25 8.66421 11.5858 9 12 9Z" 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 = 'information circle';
+</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>