flowbite-svelte 0.26.0 → 0.26.1

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.26.1](https://github.com/themesberg/flowbite-svelte/compare/v0.26.0...v0.26.1) (2022-08-29)
+
+
+### Features
+
+* new tab components and page ([7c53437](https://github.com/themesberg/flowbite-svelte/commit/7c534377c31384b609774db19b0bace7fee3d5cb))
+* working on Tabs ([201c124](https://github.com/themesberg/flowbite-svelte/commit/201c124e33bed0d1b13cfe2e3f6ba5ea0bfc6c1c))
+
+
+### Bug Fixes
+
+* fixing the tab page layout problem ([bc3b7bf](https://github.com/themesberg/flowbite-svelte/commit/bc3b7bf32100abbbab3fede7fa6a912ff81d00f6))
+* remove heros from cards page ([c46f0b3](https://github.com/themesberg/flowbite-svelte/commit/c46f0b3f9a16793f12d68fd3d1b9e973dd1f7b4a))
+* remove heros from megamenu and list-group page ([9980b7d](https://github.com/themesberg/flowbite-svelte/commit/9980b7d98668c0356217dd3aac810c52cd5e0e51))
+* remove heros from popover page ([eeff79f](https://github.com/themesberg/flowbite-svelte/commit/eeff79f53733a8f5cbb480eead692f111f96b07c))
+* remove heros from sidebars page ([a3981a0](https://github.com/themesberg/flowbite-svelte/commit/a3981a09b6b36dcbcb90cfad789bee6a10dae9a1))
+* remove heros icons from select and toggle pages ([fba7660](https://github.com/themesberg/flowbite-svelte/commit/fba7660c1bf08c47a9d0200db545f0b1fce457a9))
+* remove unused icon prop ([10e8c81](https://github.com/themesberg/flowbite-svelte/commit/10e8c81dae9e0470ef875fc95dd7d89decdae732))
+* Review component and review in the ratings page ([afe6972](https://github.com/themesberg/flowbite-svelte/commit/afe69726d08a3cad7de7f29db131909816bc9c3e))
+
 ## [0.26.0](https://github.com/themesberg/flowbite-svelte/compare/v0.25.24...v0.26.0) (2022-08-29)
 
 

package/index.d.ts

@@ -98,6 +98,10 @@ export { default as IconTabs } from './tabs/IconTabs.svelte';
 export { default as PillTabs } from './tabs/PillTabs.svelte';
 export { default as TabContent } from './tabs/TabContent.svelte';
 export { default as UnderlineTabs } from './tabs/UnderlineTabs.svelte';
+export { default as TabHead } from './tabs/TabHead.svelte';
+export { default as TabHeadItem } from './tabs/TabHeadItem.svelte';
+export { default as TabContentItem } from './tabs/TabContentItem.svelte';
+export { default as TabWrapper } from './tabs/TabWrapper.svelte';
 export { default as Group } from './timelines/Group.svelte';
 export { default as GroupItem } from './timelines/GroupItem.svelte';
 export { default as Activity } from './timelines/Activity.svelte';
@@ -128,3 +132,5 @@ export { default as ChevronDown } from './utils/ChevronDown.svelte';
 export { default as ChevronLeft } from './utils/ChevronLeft.svelte';
 export { default as ChevronRight } from './utils/ChevronRight.svelte';
 export { default as ChevronUp } from './utils/ChevronUp.svelte';
+export { default as InformationCircle } from './utils/InformationCircle.svelte';
+export { default as UserCircle } from './utils/UserCircle.svelte';

package/index.js

@@ -126,6 +126,11 @@ export { default as IconTabs } from './tabs/IconTabs.svelte';
 export { default as PillTabs } from './tabs/PillTabs.svelte';
 export { default as TabContent } from './tabs/TabContent.svelte';
 export { default as UnderlineTabs } from './tabs/UnderlineTabs.svelte';
+// Tabs new
+export { default as TabHead } from './tabs/TabHead.svelte';
+export { default as TabHeadItem } from './tabs/TabHeadItem.svelte';
+export { default as TabContentItem } from './tabs/TabContentItem.svelte';
+export { default as TabWrapper } from './tabs/TabWrapper.svelte';
 // Timeline
 export { default as Group } from './timelines/Group.svelte';
 export { default as GroupItem } from './timelines/GroupItem.svelte';
@@ -162,3 +167,5 @@ export { default as ChevronDown } from './utils/ChevronDown.svelte';
 export { default as ChevronLeft } from './utils/ChevronLeft.svelte';
 export { default as ChevronRight } from './utils/ChevronRight.svelte';
 export { default as ChevronUp } from './utils/ChevronUp.svelte';
+export { default as InformationCircle } from './utils/InformationCircle.svelte';
+export { default as UserCircle } from './utils/UserCircle.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.26.0",
+  "version": "0.26.1",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -207,6 +207,11 @@
     "./tabs/InteractiveTabs.svelte": "./tabs/InteractiveTabs.svelte",
     "./tabs/PillTabs.svelte": "./tabs/PillTabs.svelte",
     "./tabs/TabContent.svelte": "./tabs/TabContent.svelte",
+    "./tabs/TabContentItem.svelte": "./tabs/TabContentItem.svelte",
+    "./tabs/TabContentWrapper.svelte": "./tabs/TabContentWrapper.svelte",
+    "./tabs/TabHead.svelte": "./tabs/TabHead.svelte",
+    "./tabs/TabHeadItem.svelte": "./tabs/TabHeadItem.svelte",
+    "./tabs/TabWrapper.svelte": "./tabs/TabWrapper.svelte",
     "./tabs/Tabs.svelte": "./tabs/Tabs.svelte",
     "./tabs/UnderlineTabs.svelte": "./tabs/UnderlineTabs.svelte",
     "./tabs/tabStores": "./tabs/tabStores.js",
@@ -241,7 +246,9 @@
     "./utils/ChevronRight.svelte": "./utils/ChevronRight.svelte",
     "./utils/ChevronUp.svelte": "./utils/ChevronUp.svelte",
     "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
+    "./utils/InformationCircle.svelte": "./utils/InformationCircle.svelte",
     "./utils/Popper.svelte": "./utils/Popper.svelte",
+    "./utils/UserCircle.svelte": "./utils/UserCircle.svelte",
     "./utils/Wrapper.svelte": "./utils/Wrapper.svelte",
     "./utils/clickOutside": "./utils/clickOutside.js",
     "./utils/createEventDispatcher": "./utils/createEventDispatcher.js",

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/tabs/Tabs.svelte

@@ -87,13 +87,11 @@ const handleClick = (tabValue) => () => (activeTabValue = tabValue);
 					type="button"
 					role="tab"
 					aria-controls={name}
-					{disabled}
-				>
+					{disabled}>
 					{#if icon}
 						<svelte:component this={icon} size={iconSize} class={iconClass} />
 					{/if}
-					{name}</button
-				>
+					{name}</button>
 			</li>
 		{/each}
 	</ul>

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/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>

package/utils/InformationCircle.svelte.d.ts

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

package/utils/UserCircle.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="M17.9815 18.7248C16.6121 16.9175 14.4424 15.75 12 15.75C9.55761 15.75 7.38789 16.9175 6.01846 18.7248M17.9815 18.7248C19.8335 17.0763 21 14.6744 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 14.6744 4.1665 17.0763 6.01846 18.7248M17.9815 18.7248C16.3915 20.1401 14.2962 21 12 21C9.70383 21 7.60851 20.1401 6.01846 18.7248M15 9.75C15 11.4069 13.6569 12.75 12 12.75C10.3431 12.75 9 11.4069 9 9.75C9 8.09315 10.3431 6.75 12 6.75C13.6569 6.75 15 8.09315 15 9.75Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6854 19.0971C20.5721 17.3191 21.75 14.7971 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 14.7971 3.42785 17.3191 5.31463 19.0971C7.06012 20.7419 9.41234 21.75 12 21.75C14.5877 21.75 16.9399 20.7419 18.6854 19.0971ZM6.14512 17.8123C7.51961 16.0978 9.63161 15 12 15C14.3684 15 16.4804 16.0978 17.8549 17.8123C16.3603 19.3178 14.289 20.25 12 20.25C9.711 20.25 7.63973 19.3178 6.14512 17.8123ZM15.75 9C15.75 11.0711 14.0711 12.75 12 12.75C9.92893 12.75 8.25 11.0711 8.25 9C8.25 6.92893 9.92893 5.25 12 5.25C14.0711 5.25 15.75 6.92893 15.75 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 = 'user 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>

package/utils/UserCircle.svelte.d.ts

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