flowbite-svelte 0.26.0 → 0.26.3

package/CHANGELOG.md

@@ -2,6 +2,54 @@
 
 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.3](https://github.com/themesberg/flowbite-svelte/compare/v0.26.2...v0.26.3) (2022-09-01)
+
+
+### Features
+
+* frame abstraction ([47e4126](https://github.com/themesberg/flowbite-svelte/commit/47e4126fa02ff6b9c93d3ee7e17fee79195ac1d3))
+
+
+### Bug Fixes
+
+* docs fixes due to dropdown api change ([869f8d7](https://github.com/themesberg/flowbite-svelte/commit/869f8d7bdea3a7ba97702e31b52f0e33fce3c911))
+* remove flowbite-svelte-blocks page, add a link ([2b9e3d3](https://github.com/themesberg/flowbite-svelte/commit/2b9e3d3f72731ace8abb563e28e98309dbc58b3b))
+* remove heros icons from ([203f14c](https://github.com/themesberg/flowbite-svelte/commit/203f14c578e57429892e0df41452abbdef1b3a4e))
+* remove svelte-flag-icons from devDependencies ([8f48867](https://github.com/themesberg/flowbite-svelte/commit/8f488677958313a2debaa3f953314d6452a63013))
+* update svelte-sidebar-menu version ([1106d16](https://github.com/themesberg/flowbite-svelte/commit/1106d161d06244d5db61641babc7691d28388fbd))
+
+### [0.26.2](https://github.com/themesberg/flowbite-svelte/compare/v0.26.1...v0.26.2) (2022-08-30)
+
+
+### Bug Fixes
+
+* add icon page ([0f5c966](https://github.com/themesberg/flowbite-svelte/commit/0f5c96626954d4174d10b99f2934365628f2ec08))
+* Iconinput click handler example ([2f5afc7](https://github.com/themesberg/flowbite-svelte/commit/2f5afc7554a7bb43d231cc39001ea31b9deafd1c))
+* remove heros icons from buttons page ([ec81a39](https://github.com/themesberg/flowbite-svelte/commit/ec81a393f438e2285d36ed7fea787af956c6f128))
+* remove heros icons from checkbox page ([1ed983c](https://github.com/themesberg/flowbite-svelte/commit/1ed983c2b230e6309ae6882972176480f8060487))
+* remove old tab components ([a61dd72](https://github.com/themesberg/flowbite-svelte/commit/a61dd728d1eb01bdbfeb61ff3adf8f96d7a1fbde))
+* remove svelte:component from FooterIcon ([0406128](https://github.com/themesberg/flowbite-svelte/commit/04061286046845c7f5c34f56ef89013d4a610aee))
+
+### [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/alerts/Alert.svelte

@@ -1,64 +1,23 @@
-<script>import { setContext } from 'svelte';
-import classNames from 'classnames';
+<script>import classNames from 'classnames';
 import { createEventDispatcher } from 'svelte';
 import CloseButton from '../utils/CloseButton.svelte';
+import Frame from '../utils/Frame.svelte';
 const dispatch = createEventDispatcher();
-setContext('background', true);
 export let color = 'blue';
 export let dismissable = false;
 export let rounded = true;
 export let accent = false;
-export let customBgClass = '';
-export let customBorderAccentClass = '';
-export let customTextColor = '';
 let hidden = false;
-const handleAlert = () => {
-    dispatch('handleAlert');
-};
 const handleHide = () => {
     hidden = !hidden;
-};
-const bgClasses = {
-    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 ',
-    dark: 'bg-gray-50 dark:bg-gray-700',
-    custom: customBgClass
-};
-const borderAccentClasses = {
-    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 ',
-    dark: 'border-gray-500',
-    custom: customBorderAccentClass
-};
-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',
-    dark: 'text-gray-700  dark:text-gray-300',
-    custom: customTextColor
+    dispatch('handleAlert');
+    dispatch('close'); // preffered name
 };
 let divClass;
-$: divClass = classNames('p-4 text-sm', bgClasses[color] ?? bgClasses.blue, accent && (borderAccentClasses[color] ?? borderAccentClasses.blue), rounded && 'rounded-lg ', accent && 'border-t-4 ', textColors[color], $$props.class);
+$: divClass = classNames('p-4 text-sm', accent && 'border-t-4 ', hidden && 'hidden', $$props.class);
 </script>
 
-<div id={$$props.id} class:hidden class={divClass} role="alert">
+<Frame {color} {rounded} {...$$restProps} class={divClass} role="alert">
 	<div class="flex items-center whitespace-pre-wrap">
 		{#if $$slots.icon}
 			<slot name="icon" />
@@ -71,7 +30,6 @@ $: divClass = classNames('p-4 text-sm', bgClasses[color] ?? bgClasses.blue, acce
 				class="-mx-1.5 -my-1.5"
 				{color}
 				on:click={handleHide}
-				on:click={handleAlert}
 				on:click
 				on:change
 				on:keydown
@@ -83,4 +41,4 @@ $: divClass = classNames('p-4 text-sm', bgClasses[color] ?? bgClasses.blue, acce
 		{/if}
 	</div>
 	<slot name="extra" />
-</div>
+</Frame>

package/alerts/Alert.svelte.d.ts

@@ -6,9 +6,6 @@ declare const __propDef: {
         dismissable?: boolean;
         rounded?: boolean;
         accent?: boolean;
-        customBgClass?: string;
-        customBorderAccentClass?: string;
-        customTextColor?: string;
     };
     events: {
         click: MouseEvent;
@@ -20,6 +17,7 @@ declare const __propDef: {
         mouseenter: CustomEvent<any>;
         mouseleave: CustomEvent<any>;
         handleAlert: CustomEvent<any>;
+        close: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/cards/Card.svelte

@@ -1,12 +1,11 @@
 <script>import classNames from 'classnames';
-import { setContext } from 'svelte';
+import Frame from '../utils/Frame.svelte';
 export let href = undefined;
 export let horizontal = false;
 export let reverse = false;
 export let img = undefined;
 export let padding = 'lg';
 export let size = 'sm';
-setContext('background', true);
 const paddings = {
     none: 'p-0',
     sm: 'p-4',
@@ -24,12 +23,12 @@ const sizes = {
 let innerPdding;
 $: innerPdding = paddings[padding];
 let cardClass;
-$: cardClass = classNames('flex', sizes[size], reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse md:max-w-xl' : 'md:flex-row md:max-w-xl'), 'bg-white dark:bg-gray-800 shadow-md', 'text-gray-500 dark:text-gray-400', 'rounded-lg border border-gray-200 dark:border-gray-700', href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPdding, $$props.class);
+$: cardClass = classNames('flex', sizes[size], reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse md:max-w-xl' : 'md:flex-row md:max-w-xl'), href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPdding, $$props.class);
 let imgClass;
 $: imgClass = classNames(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none', horizontal && (reverse ? 'md:rounded-r-lg' : 'md:rounded-l-lg'));
 </script>
 
-<svelte:element this={href ? 'a' : 'div'} {href} class={cardClass}>
+<Frame tag={href ? 'a' : 'div'} rounded shadow border {href} class={cardClass}>
 	{#if img}
 		<img class={imgClass} src={img} alt="" />
 		<div class={innerPdding}>
@@ -38,4 +37,4 @@ $: imgClass = classNames(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal &
 	{:else}
 		<slot />
 	{/if}
-</svelte:element>
+</Frame>

package/dropdowns/Dropdown.svelte

@@ -1,5 +1,5 @@
-<script>import { setContext } from 'svelte';
-import Button from '../buttons/Button.svelte';
+<script>import Button from '../buttons/Button.svelte';
+import Frame from '../utils/Frame.svelte';
 import Popper from '../utils/Popper.svelte';
 import classNames from 'classnames';
 import ChevronUp from '../utils/ChevronUp.svelte';
@@ -15,7 +15,6 @@ export let placement = 'bottom';
 export let open = false;
 export let triggeredBy = undefined;
 let id = generateId();
-setContext('background', true);
 const icons = {
     top: ChevronUp,
     right: ChevronRight,
@@ -25,7 +24,7 @@ const icons = {
 // @ts-ignore
 $: icon = icons[placement.split('-')[0]];
 let popoverClass;
-$: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800', 'text-gray-500 dark:text-gray-400', 'border border-gray-200 dark:border-gray-700', 'outline-none', $$props.class);
+$: popoverClass = classNames('outline-none', $$props.class);
 </script>
 
 {#if label}
@@ -56,15 +55,15 @@ $: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800'
 	activeContent={true}
 	arrow={false}
 	{placement}
-	{...$$restProps}
-	class={popoverClass}
 	trigger="click"
 	on:show
 	bind:open
 	triggeredBy={triggeredBy ?? '#' + id}>
-	<slot name="content">
-		<ul class="py-1">
-			<slot />
-		</ul>
-	</slot>
+	<Frame class={popoverClass} rounded border shadow>
+		<slot name="content">
+			<ul class="py-1">
+				<slot />
+			</ul>
+		</slot>
+	</Frame>
 </Popper>

package/footer/FooterIcon.svelte

@@ -2,15 +2,12 @@
 export let href = '';
 export let ariaLabel = '';
 export let aClass = 'text-gray-500 hover:text-gray-900 dark:hover:text-white';
-export let icon = null;
-export let iconClass = 'h-5 w-5';
-export let size = '20';
 </script>
 
 {#if href}
 	<a {href} aria-label={ariaLabel} class={classNames(aClass, $$props.class)}>
-		<svelte:component this={icon} {size} class={iconClass} />
+		<slot />
 	</a>
 {:else}
-	<svelte:component this={icon} {size} class={iconClass} />
+	<slot />
 {/if}

package/footer/FooterIcon.svelte.d.ts

@@ -1,19 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SvelteComponent } from 'svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
         href?: string;
         ariaLabel?: string;
         aClass?: string;
-        icon?: typeof SvelteComponent | null;
-        iconClass?: string;
-        size?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type FooterIconProps = typeof __propDef.props;
 export declare type FooterIconEvents = typeof __propDef.events;

package/forms/Iconinput.svelte

@@ -1,21 +1,17 @@
 <script>import classNames from 'classnames';
-// import type { InputType } from '../types';
-// export let type: InputType = 'text';
 export let value = '';
 export let size = 'md';
-export let icon;
 export let noBorder = false;
 export let inputClass = 'rounded-none rounded-r-lg bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 export let spanClass = 'inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 rounded-l-md border border-r-0 border-gray-300 dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600';
-export let noBorderInputClass = 'bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10   dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+export let noBorderInputClass = 'bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full   dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 export let pointerEvent = false;
 export let noBorderDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3';
-export let iconClass = 'mr-2';
 </script>
 
 {#if noBorder}
 	<div class="relative">
-		<span
+		<div
 			class={classNames(
 				noBorderDivClass,
 				{
@@ -24,47 +20,27 @@ export let iconClass = 'mr-2';
 					'sm:text-md p-4': size === 'lg'
 				},
 				pointerEvent ? 'cursor-pointer' : 'pointer-events-none'
-			)}
-		>
-			<svelte:component
-				this={icon}
-				on:click
-				size={classNames({
-					16: size === 'sm',
-					18: size === 'md',
-					20: size === 'lg'
-				})}
-				class={iconClass}
-			/>
-		</span>
+			)}>
+			<slot />
+		</div>
 		<input
 			{...$$restProps}
 			bind:value
 			class={classNames(
 				noBorderInputClass,
 				{
-					'p-2 sm:text-xs': size === 'sm',
-					'p-2.5 text-sm': size === 'md',
-					'sm:text-md p-4': size === 'lg'
+					'p-2 sm:text-xs pl-9': size === 'sm',
+					'p-2.5 text-sm pl-10': size === 'md',
+					'sm:text-md p-4 pl-11': size === 'lg'
 				},
 				$$props.class
-			)}
-		/>
+			)} />
 	</div>
 {:else}
 	<div class="flex">
-		<div class={spanClass}>
-			<svelte:component
-				this={icon}
-				on:click
-				size={classNames({
-					16: size === 'sm',
-					18: size === 'md',
-					20: size === 'lg'
-				})}
-				class={classNames(iconClass, pointerEvent ? 'cursor-pointer' : 'pointer-events-none')}
-			/>
-		</div>
+		<span class={spanClass}>
+			<slot />
+		</span>
 		<input
 			{...$$restProps}
 			bind:value
@@ -76,7 +52,6 @@ export let iconClass = 'mr-2';
 					'sm:text-md p-4': size === 'lg'
 				},
 				$$props.class
-			)}
-		/>
+			)} />
 	</div>
 {/if}

package/forms/Iconinput.svelte.d.ts

@@ -1,25 +1,22 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SvelteComponent } from 'svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
         value?: string;
         size?: 'sm' | 'md' | 'lg';
-        icon: typeof SvelteComponent;
         noBorder?: boolean;
         inputClass?: string;
         spanClass?: string;
         noBorderInputClass?: string;
         pointerEvent?: boolean;
         noBorderDivClass?: string;
-        iconClass?: string;
     };
     events: {
-        click: any;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type IconinputProps = typeof __propDef.props;
 export declare type IconinputEvents = typeof __propDef.events;

package/forms/Input.svelte

@@ -46,5 +46,4 @@ const setType = (node) => {
 			'sm:text-md p-4': size === 'lg'
 		},
 		$$props.class
-	)}
-/>
+	)} />

package/index.d.ts

@@ -88,16 +88,10 @@ export { default as TableBodyRow } from './tables/TableBodyRow.svelte';
 export { default as TableHead } from './tables/TableHead.svelte';
 export { default as TableHeadCell } from './tables/TableHeadCell.svelte';
 export { default as TableSearch } from './tables/TableSearch.svelte';
-export { default as Tabs } from './tabs/Tabs.svelte';
-export { tabStore } from './tabs/tabStores.js';
-export { default as InteractiveTabHead } from './tabs/InteractiveTabHead.svelte';
-export { default as InteractiveTabs } from './tabs/InteractiveTabs.svelte';
-export { default as DefaultTabs } from './tabs/DefaultTabs.svelte';
-export { default as FullWidthTabs } from './tabs/FullWidthTabs.svelte';
-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 +122,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

@@ -116,16 +116,10 @@ export { default as TableHead } from './tables/TableHead.svelte';
 export { default as TableHeadCell } from './tables/TableHeadCell.svelte';
 export { default as TableSearch } from './tables/TableSearch.svelte';
 // Tabs
-export { default as Tabs } from './tabs/Tabs.svelte';
-export { tabStore } from './tabs/tabStores.js';
-export { default as InteractiveTabHead } from './tabs/InteractiveTabHead.svelte';
-export { default as InteractiveTabs } from './tabs/InteractiveTabs.svelte';
-export { default as DefaultTabs } from './tabs/DefaultTabs.svelte';
-export { default as FullWidthTabs } from './tabs/FullWidthTabs.svelte';
-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';
 // Timeline
 export { default as Group } from './timelines/Group.svelte';
 export { default as GroupItem } from './timelines/GroupItem.svelte';
@@ -162,3 +156,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/list-group/List.svelte

@@ -1,18 +1,18 @@
 <script>import { setContext } from 'svelte';
 import classNames from 'classnames';
 import ListItem from './ListItem.svelte';
+import Frame from '../utils/Frame.svelte';
 export let items = [];
 export let active = false;
-setContext('background', true);
 $: setContext('active', active);
 let groupClass;
-$: groupClass = classNames('text-gray-900 bg-white dark:text-gray-200 dark:bg-gray-700', 'rounded-lg border border-gray-200 dark:border-gray-600', 'divide-y divide-gray-200 dark:divide-gray-600', $$props.class);
+$: groupClass = classNames('divide-y divide-gray-200 dark:divide-gray-600', $$props.class);
 </script>
 
-<svelte:element this={active ? 'div' : 'ul'} class={groupClass}>
+<Frame tag={active ? 'div' : 'ul'} rounded border class={groupClass}>
 	{#each items as item, index}
 		<ListItem {active} {...item} {index} on:click><slot {item} {index} /></ListItem>
 	{:else}
 		<slot />
 	{/each}
-</svelte:element>
+</Frame>

package/modals/Modal.svelte

@@ -1,4 +1,5 @@
-<script>import { createEventDispatcher, setContext } from 'svelte';
+<script>import Frame from '../utils/Frame.svelte';
+import { createEventDispatcher } from 'svelte';
 import CloseButton from '../utils/CloseButton.svelte';
 import focusTrap from '../utils/focusTrap';
 export let open = false;
@@ -8,7 +9,6 @@ export let placement = 'center';
 export let autoclose = true;
 export let backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40';
 const dispatch = createEventDispatcher();
-setContext('background', true);
 const allPlacementClasses = [
     'justify-start',
     'justify-center',
@@ -110,13 +110,10 @@ const hide = () => {
 	role={open ? 'dialog' : undefined}
 	use:init={open}
 	use:focusTrap={open}
-	on:click={onButtonsClick}
->
+	on:click={onButtonsClick}>
 	<div class="relative p-4 w-full {sizes[size]} h-full md:h-auto">
 		<!-- Modal content -->
-		<div
-			class="relative bg-white rounded-lg shadow dark:bg-gray-700 text-gray-500 dark:text-gray-400"
-		>
+		<Frame rounded shadow class="relative">
 			<!-- Modal header -->
 			{#if $$slots.header || title}
 				<div class="flex justify-between items-center p-4 rounded-t border-b dark:border-gray-600">
@@ -136,12 +133,10 @@ const hide = () => {
 			</div>
 			<!-- Modal footer -->
 			{#if $$slots.footer}
-				<div
-					class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600"
-				>
+				<div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
 					<slot name="footer" />
 				</div>
 			{/if}
-		</div>
+		</Frame>
 	</div>
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.26.0",
+  "version": "0.26.3",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -31,9 +31,8 @@
     "prism-themes": "^1.9.0",
     "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
-    "svelte-flag-icons": "^0.1.1",
     "svelte-preprocess": "^4.10.7",
-    "svelte-sidebar-menu": "^0.8.11",
+    "svelte-sidebar-menu": "^0.9.11",
     "svelte2tsx": "^0.5.13",
     "tailwindcss": "^3.1.8",
     "tslib": "^2.4.0",
@@ -84,8 +83,7 @@
     "@floating-ui/dom": "^1.0.1",
     "@popperjs/core": "^2.11.6",
     "classnames": "^2.3.1",
-    "flowbite": "^1.5.2",
-    "svelte-heros": "^2.3.3"
+    "flowbite": "^1.5.2"
   },
   "engines": {
     "npm": ">=7.0.0",
@@ -200,16 +198,11 @@
     "./tables/TableHead.svelte": "./tables/TableHead.svelte",
     "./tables/TableHeadCell.svelte": "./tables/TableHeadCell.svelte",
     "./tables/TableSearch.svelte": "./tables/TableSearch.svelte",
-    "./tabs/DefaultTabs.svelte": "./tabs/DefaultTabs.svelte",
-    "./tabs/FullWidthTabs.svelte": "./tabs/FullWidthTabs.svelte",
-    "./tabs/IconTabs.svelte": "./tabs/IconTabs.svelte",
-    "./tabs/InteractiveTabHead.svelte": "./tabs/InteractiveTabHead.svelte",
-    "./tabs/InteractiveTabs.svelte": "./tabs/InteractiveTabs.svelte",
-    "./tabs/PillTabs.svelte": "./tabs/PillTabs.svelte",
-    "./tabs/TabContent.svelte": "./tabs/TabContent.svelte",
-    "./tabs/Tabs.svelte": "./tabs/Tabs.svelte",
-    "./tabs/UnderlineTabs.svelte": "./tabs/UnderlineTabs.svelte",
-    "./tabs/tabStores": "./tabs/tabStores.js",
+    "./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",
     "./timelines/Activity.svelte": "./timelines/Activity.svelte",
     "./timelines/ActivityItem.svelte": "./timelines/ActivityItem.svelte",
     "./timelines/Group.svelte": "./timelines/Group.svelte",
@@ -241,7 +234,10 @@
     "./utils/ChevronRight.svelte": "./utils/ChevronRight.svelte",
     "./utils/ChevronUp.svelte": "./utils/ChevronUp.svelte",
     "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
+    "./utils/Frame.svelte": "./utils/Frame.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/popover/Popover.svelte

@@ -7,7 +7,6 @@ $: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800'
 </script>
 
 <Popper activeContent={true} {triggeredBy} {...$$restProps} class={popoverClass} on:show>
-	<slot name="trigger" slot="trigger" />
 	{#if $$slots.title || title}
 		<div
 			class="py-2 px-3 bg-gray-100 rounded-t-lg border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700">

package/popover/Popover.svelte.d.ts

@@ -11,9 +11,6 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        trigger: {
-            slot: string;
-        };
         title: {};
         default: {};
     };