flowbite-svelte 0.25.13 → 0.25.14

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.25.14](https://github.com/themesberg/flowbite-svelte/compare/v0.25.13...v0.25.14) (2022-08-25)
+
+
+### Features
+
+* add icon components rather than import a library ([9dffb40](https://github.com/themesberg/flowbite-svelte/commit/9dffb400607d8bb4dd98e877e466956157016ff7))
+* add Img component, images, and page ([b2aec04](https://github.com/themesberg/flowbite-svelte/commit/b2aec047694aab0bbcbc58d93af8c021e27d4f96))
+* add Img page and examples ([ed3d83f](https://github.com/themesberg/flowbite-svelte/commit/ed3d83f34e195d67e3c7a334d1226d0876441f47))
+* add PaperAirplane icon ([90d2543](https://github.com/themesberg/flowbite-svelte/commit/90d25435eb9cc68b38febaba41b5782efb755981))
+* textarea ([47d51be](https://github.com/themesberg/flowbite-svelte/commit/47d51be427b056793cf64e4089cf4a4a7ba310d7))
+* textarea / fix ([93cdb01](https://github.com/themesberg/flowbite-svelte/commit/93cdb019326ebcaddd3482c5e41c8a635461ac67))
+
+
+### Bug Fixes
+
+* avatar dot alignment ([2273c0c](https://github.com/themesberg/flowbite-svelte/commit/2273c0ceb82cc634558e7e88aff295c722d73c9f))
+* buttongroup divider ([f5bedaf](https://github.com/themesberg/flowbite-svelte/commit/f5bedafa9a0b36f4a42a54e8c37593d7ee9d8916))
+* Htwo for typography pages ([0921539](https://github.com/themesberg/flowbite-svelte/commit/0921539d06e54f89d9e9dd52c70cdbc81b62dd3e))
+
 ### [0.25.13](https://github.com/themesberg/flowbite-svelte/compare/v0.25.12...v0.25.13) (2022-08-23)
 
 

package/alerts/Alert.svelte

@@ -28,7 +28,7 @@ const bgClasses = {
     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-100 dark:bg-gray-700',
+    dark: 'bg-gray-50 dark:bg-gray-700',
     custom: customBgClass
 };
 const borderAccentClasses = {
@@ -56,21 +56,20 @@ const textColors = {
     custom: customTextColor
 };
 let divClass;
-$: divClass = classNames('flex flex-col p-4 mb-4 gap-2 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', bgClasses[color] ?? bgClasses.blue, accent && (borderAccentClasses[color] ?? borderAccentClasses.blue), rounded && 'rounded-lg ', accent && 'border-t-4 ', textColors[color], $$props.class);
 </script>
 
 <div id={$$props.id} class:hidden class={divClass} role="alert">
-	<div class="flex items-center">
+	<div class="flex items-center whitespace-pre-wrap">
 		{#if icon}
 			<svelte:component this={icon} class="flex-shrink-0 w-5 h-5 mr-3" />
 		{/if}
 
-		<div>
-			<slot />
-		</div>
+		<slot />
 
 		{#if dismissable}
 			<CloseButton
+				class="-mx-1.5 -my-1.5"
 				{color}
 				on:click={handleHide}
 				on:click={handleAlert}

package/avatar/Avatar.svelte

@@ -20,7 +20,7 @@ let avatarClass;
 $: avatarClass = classNames(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500', sizes[size], stacked && 'border-2 -ml-4 border-white dark:border-gray-800', 'bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300', $$props.class);
 </script>
 
-<Dot show={$$props.dot} {rounded} {...dot} {size}>
+<Dot show={$$props.dot} {rounded} {...dot} {size} class={sizes[size]}>
 	{#if src}
 		<img class={avatarClass} {alt} {src} />
 	{:else if $$slots.default}

package/avatar/Dot.svelte

@@ -20,10 +20,12 @@ const offsets = {
 };
 let dotClass;
 $: dotClass = classNames('absolute rounded-full border-white dark:border-gray-800 border-2', sizes[size], offsets[size][+rounded], top ? 'top-0' : 'bottom-0', rounded && top && 'transform -translate-y-1/2', rounded && !top && 'transform translate-y-1/4', color);
+let divClass;
+$: divClass = classNames('relative flex-shrink-0', $$props.class);
 </script>
 
 {#if show}
-	<div class="relative flex-shrink-0">
+	<div class={divClass}>
 		<slot />
 		<span class={dotClass} />
 	</div>

package/avatar/Dot.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         show?: boolean;
         top?: boolean;
         color?: string;

package/buttons/Button.svelte

@@ -86,7 +86,7 @@ $: buttonClass = btnClass
         color === 'dark' &&
         (background
             ? 'dark:text-white dark:border-white'
-            : 'dark:text-gray-400 dark:border-gray-700'), hasBorder() && group && 'border-l-0 border-r-0 first:border last:border', rounded(false), shadow && coloredShadowClasses[shadow], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
+            : 'dark:text-gray-400 dark:border-gray-700'), hasBorder() && group && 'border-l-0 first:border-l', rounded(false), shadow && coloredShadowClasses[shadow], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
 let gradientOutlineClass;
 $: gradientOutlineClass = classNames('inline-flex items-center justify-center', sizeClasses[size], rounded(true), 'bg-white text-gray-900 dark:bg-gray-900 dark:text-white', // this is limitation - no transparency
 'transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit');

package/forms/Textarea.svelte

@@ -1,36 +1,48 @@
-<script>import generateId from '../utils/generateId.js';
+<script>import classNames from 'classnames';
+import { getContext } from 'svelte';
+import Wrapper from '../utils/Wrapper.svelte';
+const background = getContext('background');
 export let value = '';
-export let id = generateId();
-export let name = 'message';
-export let label = 'Your message';
-export let rows = 4;
-export let placeholder = 'Leave a comment...';
-export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400';
-export let textareaClass = 'block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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 helper = '';
-export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
+let wrapped;
+$: wrapped = $$slots.header || $$slots.footer;
+let wrapperClass;
+$: wrapperClass = classNames('w-full rounded-lg', background ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-700', 'text-gray-900 dark:placeholder-gray-400 dark:text-white ', 'border border-gray-200 dark:border-gray-600', $$props.class);
+let textareaClass;
+$: textareaClass = wrapped
+    ? classNames('block w-full', 'text-sm', 'border-0 px-0', 'bg-inherit dark:bg-inherit', 'focus:outline-none focus:ring-0')
+    : classNames(wrapperClass, 'p-2.5 text-sm', 'focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500');
+const headerClass = (header) => classNames(header ? 'border-b' : 'border-t', 'py-2 px-3 border-gray-200 dark:border-gray-600');
+let innerWrapperClass;
+$: innerWrapperClass = classNames('py-2 px-4 bg-white dark:bg-gray-800', $$slots.footer || 'rounded-b-lg', $$slots.header || 'rounded-t-lg');
 </script>
 
-<label for={id} class={labelClass}>{label}</label>
-<textarea
-	bind:value
-	on:blur
-	on:change
-	on:click
-	on:focus
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseenter
-	on:mouseleave
-	on:mouseover
-	on:paste
-	{id}
-	{name}
-	{rows}
-	class={textareaClass}
-	{placeholder}
-/>
-{#if helper}
-	<p class={helperClass}>{@html helper}</p>
-{/if}
+<Wrapper show={wrapped} class={wrapperClass}>
+	{#if $$slots.header}
+		<div class={headerClass(true)}>
+			<slot name="header" />
+		</div>
+	{/if}
+	<Wrapper show={wrapped} class={innerWrapperClass}>
+		<textarea
+			bind:value
+			on:blur
+			on:change
+			on:click
+			on:focus
+			on:keydown
+			on:keypress
+			on:keyup
+			on:mouseenter
+			on:mouseleave
+			on:mouseover
+			on:paste
+			{...$$restProps}
+			class={textareaClass}
+		/>
+	</Wrapper>
+	{#if $$slots.footer}
+		<div class={headerClass(false)}>
+			<slot name="footer" />
+		</div>
+	{/if}
+</Wrapper>

package/forms/Textarea.svelte.d.ts

@@ -1,16 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         value?: string;
-        id?: string;
-        name?: string;
-        label?: string;
-        rows?: number;
-        placeholder?: string;
-        labelClass?: string;
-        textareaClass?: string;
-        helper?: string;
-        helperClass?: string;
     };
     events: {
         blur: FocusEvent;
@@ -27,7 +19,10 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        header: {};
+        footer: {};
+    };
 };
 export declare type TextareaProps = typeof __propDef.props;
 export declare type TextareaEvents = typeof __propDef.events;

package/icons/CodeBracket.svelte

@@ -0,0 +1,38 @@
+<script>// https://github.com/shinokada/svelte-heros-v2
+export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M17.25 6.75L22.5 12L17.25 17.25M6.75 17.25L1.5 12L6.75 6.75M14.25 3.75L9.75 20.25" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4473 3.02662C14.847 3.1356 15.0826 3.54791 14.9736 3.94753L10.4736 20.4475C10.3646 20.8471 9.95228 21.0827 9.55266 20.9738C9.15304 20.8648 8.91744 20.4525 9.02643 20.0529L13.5264 3.55285C13.6354 3.15323 14.0477 2.91763 14.4473 3.02662ZM16.7197 6.21986C17.0126 5.92696 17.4874 5.92696 17.7803 6.21986L23.0303 11.4699C23.3232 11.7628 23.3232 12.2376 23.0303 12.5305L17.7803 17.7805C17.4874 18.0734 17.0126 18.0734 16.7197 17.7805C16.4268 17.4876 16.4268 17.0128 16.7197 16.7199L21.4393 12.0002L16.7197 7.28052C16.4268 6.98762 16.4268 6.51275 16.7197 6.21986ZM7.28033 6.21986C7.57322 6.51275 7.57322 6.98763 7.28033 7.28052L2.56066 12.0002L7.28033 16.7199C7.57322 17.0128 7.57322 17.4876 7.28033 17.7805C6.98744 18.0734 6.51256 18.0734 6.21967 17.7805L0.96967 12.5305C0.676777 12.2376 0.676777 11.7628 0.96967 11.4699L6.21967 6.21986C6.51256 5.92697 6.98744 5.92697 7.28033 6.21986Z" 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 = 'code bracket';
+</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/icons/CodeBracket.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 CodeBracketProps = typeof __propDef.props;
+export declare type CodeBracketEvents = typeof __propDef.events;
+export declare type CodeBracketSlots = typeof __propDef.slots;
+export default class CodeBracket extends SvelteComponentTyped<CodeBracketProps, CodeBracketEvents, CodeBracketSlots> {
+}
+export {};

package/icons/FaceSmile.svelte

@@ -0,0 +1,38 @@
+<script>// https://github.com/shinokada/svelte-heros-v2
+export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M15.182 15.182C13.4246 16.9393 10.5754 16.9393 8.81802 15.182M21 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 12ZM9.75 9.75C9.75 10.1642 9.58211 10.5 9.375 10.5C9.16789 10.5 9 10.1642 9 9.75C9 9.33579 9.16789 9 9.375 9C9.58211 9 9.75 9.33579 9.75 9.75ZM9.375 9.75H9.3825V9.765H9.375V9.75ZM15 9.75C15 10.1642 14.8321 10.5 14.625 10.5C14.4179 10.5 14.25 10.1642 14.25 9.75C14.25 9.33579 14.4179 9 14.625 9C14.8321 9 15 9.33579 15 9.75ZM14.625 9.75H14.6325V9.765H14.625V9.75Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25ZM9.375 8.25C8.83433 8.25 8.54674 8.66881 8.43901 8.88426C8.30886 9.14457 8.25 9.45171 8.25 9.75C8.25 10.0483 8.30886 10.3554 8.43901 10.6157C8.54674 10.8312 8.83433 11.25 9.375 11.25C9.91567 11.25 10.2033 10.8312 10.311 10.6157C10.4411 10.3554 10.5 10.0483 10.5 9.75C10.5 9.45171 10.4411 9.14457 10.311 8.88426C10.2033 8.66881 9.91567 8.25 9.375 8.25ZM13.689 8.88426C13.7967 8.66881 14.0843 8.25 14.625 8.25C15.1657 8.25 15.4533 8.66881 15.561 8.88426C15.6911 9.14457 15.75 9.45171 15.75 9.75C15.75 10.0483 15.6911 10.3554 15.561 10.6157C15.4533 10.8312 15.1657 11.25 14.625 11.25C14.0843 11.25 13.7967 10.8312 13.689 10.6157C13.5589 10.3554 13.5 10.0483 13.5 9.75C13.5 9.45171 13.5589 9.14457 13.689 8.88426ZM15.7123 15.7123C16.0052 15.4194 16.0052 14.9446 15.7123 14.6517C15.4194 14.3588 14.9445 14.3588 14.6517 14.6517C13.1872 16.1161 10.8128 16.1161 9.34835 14.6517C9.05546 14.3588 8.58058 14.3588 8.28769 14.6517C7.9948 14.9446 7.9948 15.4194 8.28769 15.7123C10.3379 17.7626 13.6621 17.7626 15.7123 15.7123Z" 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 = 'face smile';
+</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/icons/FaceSmile.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 FaceSmileProps = typeof __propDef.props;
+export declare type FaceSmileEvents = typeof __propDef.events;
+export declare type FaceSmileSlots = typeof __propDef.slots;
+export default class FaceSmile extends SvelteComponentTyped<FaceSmileProps, FaceSmileEvents, FaceSmileSlots> {
+}
+export {};

package/icons/Map.svelte

@@ -0,0 +1,38 @@
+<script>// https://github.com/shinokada/svelte-heros-v2
+export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M9 6.75002V15M15 9.00002V17.25M15.5031 20.7485L20.3781 18.311C20.7592 18.1204 21 17.7309 21 17.3047V4.82031C21 3.98401 20.1199 3.44007 19.3719 3.81408L15.5031 5.74847C15.1864 5.90683 14.8136 5.90683 14.4969 5.74847L9.50312 3.25158C9.1864 3.09322 8.8136 3.09322 8.49688 3.25158L3.62188 5.68908C3.24075 5.87965 3 6.26919 3 6.69531V19.1797C3 20.016 3.8801 20.56 4.62811 20.186L8.49688 18.2516C8.8136 18.0932 9.1864 18.0932 9.50312 18.2516L14.4969 20.7485C14.8136 20.9068 15.1864 20.9068 15.5031 20.7485Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M8.16147 2.58076C8.68934 2.31683 9.31066 2.31683 9.83853 2.58076L14.8323 5.07765C14.9379 5.13043 15.0621 5.13043 15.1677 5.07765L19.0365 3.14326C20.2832 2.51992 21.75 3.42647 21.75 4.82031V17.3047C21.75 18.0149 21.3487 18.6642 20.7135 18.9818L15.8385 21.4193C15.3107 21.6832 14.6893 21.6832 14.1615 21.4193L9.16771 18.9224C9.06213 18.8696 8.93787 18.8696 8.8323 18.9224L4.96353 20.8568C3.71683 21.4801 2.25 20.5736 2.25 19.1797V6.69531C2.25 5.98512 2.65125 5.33587 3.28647 5.01826L8.16147 2.58076ZM9 6.00002C9.41421 6.00002 9.75 6.3358 9.75 6.75002V15C9.75 15.4142 9.41421 15.75 9 15.75C8.58579 15.75 8.25 15.4142 8.25 15V6.75002C8.25 6.3358 8.58579 6.00002 9 6.00002ZM15.75 9.00002C15.75 8.5858 15.4142 8.25002 15 8.25002C14.5858 8.25002 14.25 8.5858 14.25 9.00002V17.25C14.25 17.6642 14.5858 18 15 18C15.4142 18 15.75 17.6642 15.75 17.25V9.00002Z" 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 = 'map';
+</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/icons/Map.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 MapProps = typeof __propDef.props;
+export declare type MapEvents = typeof __propDef.events;
+export declare type MapSlots = typeof __propDef.slots;
+export default class Map extends SvelteComponentTyped<MapProps, MapEvents, MapSlots> {
+}
+export {};

package/icons/MapPin.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="M15 10.5C15 12.1569 13.6569 13.5 12 13.5C10.3431 13.5 9 12.1569 9 10.5C9 8.84315 10.3431 7.5 12 7.5C13.6569 7.5 15 8.84315 15 10.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M19.5 10.5C19.5 17.6421 12 21.75 12 21.75C12 21.75 4.5 17.6421 4.5 10.5C4.5 6.35786 7.85786 3 12 3C16.1421 3 19.5 6.35786 19.5 10.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5397 22.351C11.57 22.3686 11.5937 22.3821 11.6105 22.3915L11.6384 22.4071C11.8613 22.5294 12.1378 22.5285 12.3608 22.4075L12.3895 22.3915C12.4063 22.3821 12.43 22.3686 12.4603 22.351C12.5207 22.316 12.607 22.265 12.7155 22.1982C12.9325 22.0646 13.2388 21.8676 13.6046 21.6091C14.3351 21.0931 15.3097 20.3274 16.2865 19.3273C18.2307 17.3368 20.25 14.3462 20.25 10.5C20.25 5.94365 16.5563 2.25 12 2.25C7.44365 2.25 3.75 5.94365 3.75 10.5C3.75 14.3462 5.76932 17.3368 7.71346 19.3273C8.69025 20.3274 9.66491 21.0931 10.3954 21.6091C10.7612 21.8676 11.0675 22.0646 11.2845 22.1982C11.393 22.265 11.4793 22.316 11.5397 22.351ZM12 13.5C13.6569 13.5 15 12.1569 15 10.5C15 8.84315 13.6569 7.5 12 7.5C10.3431 7.5 9 8.84315 9 10.5C9 12.1569 10.3431 13.5 12 13.5Z" 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 = 'map pin';
+</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/icons/MapPin.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 MapPinProps = typeof __propDef.props;
+export declare type MapPinEvents = typeof __propDef.events;
+export declare type MapPinSlots = typeof __propDef.slots;
+export default class MapPin extends SvelteComponentTyped<MapPinProps, MapPinEvents, MapPinSlots> {
+}
+export {};

package/icons/PaperAirplane.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="M5.99972 12.0005L3.2688 3.125C9.88393 5.04665 16.0276 8.07649 21.4855 12.0002C16.0276 15.924 9.884 18.9539 3.26889 20.8757L5.99972 12.0005ZM5.99972 12.0005L13.5 12.0005" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path d="M3.47804 2.40479C3.2133 2.32789 2.92771 2.40242 2.73432 2.59889C2.54093 2.79536 2.47091 3.08209 2.55198 3.34558L4.98426 11.2505H13.5C13.9142 11.2505 14.25 11.5863 14.25 12.0005C14.25 12.4147 13.9142 12.7505 13.5 12.7505H4.98427L2.55207 20.6551C2.471 20.9186 2.54102 21.2054 2.73441 21.4018C2.92781 21.5983 3.2134 21.6728 3.47814 21.5959C10.1767 19.6499 16.3974 16.5819 21.9233 12.6092C22.1193 12.4683 22.2355 12.2416 22.2355 12.0002C22.2355 11.7588 22.1193 11.5322 21.9233 11.3913C16.3974 7.41866 10.1767 4.3507 3.47804 2.40479Z" 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 = 'paper airplane';
+</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/icons/PaperAirplane.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 PaperAirplaneProps = typeof __propDef.props;
+export declare type PaperAirplaneEvents = typeof __propDef.events;
+export declare type PaperAirplaneSlots = typeof __propDef.slots;
+export default class PaperAirplane extends SvelteComponentTyped<PaperAirplaneProps, PaperAirplaneEvents, PaperAirplaneSlots> {
+}
+export {};

package/icons/PaperClip.svelte

@@ -0,0 +1,38 @@
+<script>// https://github.com/shinokada/svelte-heros-v2
+export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M18.375 12.739L10.682 20.432C8.92462 22.1893 6.07538 22.1893 4.31802 20.432C2.56066 18.6746 2.56066 15.8254 4.31802 14.068L15.2573 3.12868C16.4289 1.95711 18.3283 1.95711 19.4999 3.12868C20.6715 4.30025 20.6715 6.19975 19.4999 7.37132L8.55158 18.3197M8.56066 18.3107C8.55764 18.3137 8.55462 18.3167 8.55158 18.3197M14.2498 8.37865L6.43934 16.1893C5.85355 16.7751 5.85355 17.7249 6.43934 18.3107C7.02211 18.8934 7.9651 18.8964 8.55158 18.3197" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9696 3.65901C18.0909 2.78033 16.6663 2.78033 15.7876 3.65901L4.84835 14.5983C3.38388 16.0628 3.38388 18.4372 4.84835 19.9016C6.31282 21.3661 8.68718 21.3661 10.1517 19.9016L17.8446 12.2087C18.1375 11.9158 18.6124 11.9158 18.9053 12.2087C19.1982 12.5015 19.1982 12.9764 18.9053 13.2693L11.2123 20.9623C9.16206 23.0126 5.83794 23.0126 3.78769 20.9623C1.73744 18.9121 1.73744 15.5879 3.78769 13.5377L14.7269 2.59835C16.1914 1.13388 18.5658 1.13388 20.0302 2.59835C21.4947 4.06281 21.4947 6.43718 20.0302 7.90165L9.09735 18.8346C9.09452 18.8374 9.09167 18.8403 9.08878 18.8432L9.08191 18.85L9.07971 18.8522L9.07747 18.8544C8.19765 19.7196 6.78319 19.7152 5.90901 18.841C5.03033 17.9623 5.03033 16.5377 5.90901 15.659L13.7195 7.84833C14.0124 7.55543 14.4873 7.55542 14.7802 7.84831C15.0731 8.1412 15.0731 8.61608 14.7802 8.90897L6.96968 16.7197C6.67678 17.0125 6.67678 17.4874 6.96967 17.7803C7.26041 18.0711 7.73056 18.0732 8.02383 17.7867L18.9696 6.84099C19.8483 5.96231 19.8483 4.53769 18.9696 3.65901Z" 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 = 'paper clip';
+</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/icons/PaperClip.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 PaperClipProps = typeof __propDef.props;
+export declare type PaperClipEvents = typeof __propDef.events;
+export declare type PaperClipSlots = typeof __propDef.slots;
+export default class PaperClip extends SvelteComponentTyped<PaperClipProps, PaperClipEvents, PaperClipSlots> {
+}
+export {};

package/icons/Photo.svelte

@@ -0,0 +1,38 @@
+<script>// https://github.com/shinokada/svelte-heros-v2
+export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M2.25 15.75L7.40901 10.591C8.28769 9.71231 9.71231 9.71231 10.591 10.591L15.75 15.75M14.25 14.25L15.659 12.841C16.5377 11.9623 17.9623 11.9623 18.841 12.841L21.75 15.75M3.75 19.5H20.25C21.0784 19.5 21.75 18.8284 21.75 18V6C21.75 5.17157 21.0784 4.5 20.25 4.5H3.75C2.92157 4.5 2.25 5.17157 2.25 6V18C2.25 18.8284 2.92157 19.5 3.75 19.5ZM14.25 8.25H14.2575V8.2575H14.25V8.25ZM14.625 8.25C14.625 8.45711 14.4571 8.625 14.25 8.625C14.0429 8.625 13.875 8.45711 13.875 8.25C13.875 8.04289 14.0429 7.875 14.25 7.875C14.4571 7.875 14.625 8.04289 14.625 8.25Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 6C1.5 4.75736 2.50736 3.75 3.75 3.75H20.25C21.4926 3.75 22.5 4.75736 22.5 6V18C22.5 19.2426 21.4926 20.25 20.25 20.25H3.75C2.50736 20.25 1.5 19.2426 1.5 18V6ZM3 16.0607V18C3 18.4142 3.33579 18.75 3.75 18.75H20.25C20.6642 18.75 21 18.4142 21 18V16.0607L18.3107 13.3713C17.7249 12.7855 16.7751 12.7855 16.1893 13.3713L15.3107 14.25L16.2803 15.2197C16.5732 15.5126 16.5732 15.9874 16.2803 16.2803C15.9874 16.5732 15.5126 16.5732 15.2197 16.2803L10.0607 11.1213C9.47487 10.5355 8.52513 10.5355 7.93934 11.1213L3 16.0607ZM13.125 8.25C13.125 7.62868 13.6287 7.125 14.25 7.125C14.8713 7.125 15.375 7.62868 15.375 8.25C15.375 8.87132 14.8713 9.375 14.25 9.375C13.6287 9.375 13.125 8.87132 13.125 8.25Z" 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 = 'photo';
+</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/icons/Photo.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 PhotoProps = typeof __propDef.props;
+export declare type PhotoEvents = typeof __propDef.events;
+export declare type PhotoSlots = typeof __propDef.slots;
+export default class Photo extends SvelteComponentTyped<PhotoProps, PhotoEvents, PhotoSlots> {
+}
+export {};

package/index.d.ts

@@ -40,8 +40,15 @@ export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
 export { default as Textarea } from './forms/Textarea.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
 export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
-export { default as QuoteLeft } from './icons/QuoteLeft.svelte';
+export { default as CodeBracket } from './icons/CodeBracket.svelte';
+export { default as FaceSmile } from './icons/FaceSmile.svelte';
 export { default as Figma } from './icons/Figma.svelte';
+export { default as Map } from './icons/Map.svelte';
+export { default as MapPin } from './icons/MapPin.svelte';
+export { default as PaperAirplane } from './icons/PaperAirplane.svelte';
+export { default as PaperClip } from './icons/PaperClip.svelte';
+export { default as Photo } from './icons/Photo.svelte';
+export { default as QuoteLeft } from './icons/QuoteLeft.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
 export { default as ArrowKeyLeft } from './kbd/ArrowKeyLeft.svelte';
@@ -118,6 +125,7 @@ export { default as Blockquote } from './typography/Blockquote.svelte';
 export { default as Heading } from './typography/Heading.svelte';
 export { default as Highlight } from './typography/Highlight.svelte';
 export { default as Hr } from './typography/Hr.svelte';
+export { default as Img } from './typography/Img.svelte';
 export { default as Mark } from './typography/Mark.svelte';
 export { default as P } from './typography/P.svelte';
 export { default as Secondary } from './typography/Secondary.svelte';

package/index.js

@@ -56,8 +56,15 @@ export { default as Textarea } from './forms/Textarea.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
 export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
 // Icons
-export { default as QuoteLeft } from './icons/QuoteLeft.svelte';
+export { default as CodeBracket } from './icons/CodeBracket.svelte';
+export { default as FaceSmile } from './icons/FaceSmile.svelte';
 export { default as Figma } from './icons/Figma.svelte';
+export { default as Map } from './icons/Map.svelte';
+export { default as MapPin } from './icons/MapPin.svelte';
+export { default as PaperAirplane } from './icons/PaperAirplane.svelte';
+export { default as PaperClip } from './icons/PaperClip.svelte';
+export { default as Photo } from './icons/Photo.svelte';
+export { default as QuoteLeft } from './icons/QuoteLeft.svelte';
 // Kbd
 export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
@@ -152,6 +159,7 @@ export { default as Blockquote } from './typography/Blockquote.svelte';
 export { default as Heading } from './typography/Heading.svelte';
 export { default as Highlight } from './typography/Highlight.svelte';
 export { default as Hr } from './typography/Hr.svelte';
+export { default as Img } from './typography/Img.svelte';
 export { default as Mark } from './typography/Mark.svelte';
 export { default as P } from './typography/P.svelte';
 export { default as Secondary } from './typography/Secondary.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.25.13",
+  "version": "0.25.14",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -149,7 +149,14 @@
     "./forms/Textarea.svelte": "./forms/Textarea.svelte",
     "./forms/Toggle.svelte": "./forms/Toggle.svelte",
     "./forms/VoiceSearch.svelte": "./forms/VoiceSearch.svelte",
+    "./icons/CodeBracket.svelte": "./icons/CodeBracket.svelte",
+    "./icons/FaceSmile.svelte": "./icons/FaceSmile.svelte",
     "./icons/Figma.svelte": "./icons/Figma.svelte",
+    "./icons/Map.svelte": "./icons/Map.svelte",
+    "./icons/MapPin.svelte": "./icons/MapPin.svelte",
+    "./icons/PaperAirplane.svelte": "./icons/PaperAirplane.svelte",
+    "./icons/PaperClip.svelte": "./icons/PaperClip.svelte",
+    "./icons/Photo.svelte": "./icons/Photo.svelte",
     "./icons/QuoteLeft.svelte": "./icons/QuoteLeft.svelte",
     ".": "./index.js",
     "./kbd/ArrowKeyDown.svelte": "./kbd/ArrowKeyDown.svelte",
@@ -229,6 +236,7 @@
     "./typography/Heading.svelte": "./typography/Heading.svelte",
     "./typography/Highlight.svelte": "./typography/Highlight.svelte",
     "./typography/Hr.svelte": "./typography/Hr.svelte",
+    "./typography/Img.svelte": "./typography/Img.svelte",
     "./typography/Mark.svelte": "./typography/Mark.svelte",
     "./typography/P.svelte": "./typography/P.svelte",
     "./typography/Secondary.svelte": "./typography/Secondary.svelte",
@@ -236,6 +244,7 @@
     "./typography/Underline.svelte": "./typography/Underline.svelte",
     "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
     "./utils/Popper.svelte": "./utils/Popper.svelte",
+    "./utils/Wrapper.svelte": "./utils/Wrapper.svelte",
     "./utils/clickOutside": "./utils/clickOutside.js",
     "./utils/focusTrap": "./utils/focusTrap.js",
     "./utils/generateId": "./utils/generateId.js"

package/typography/Img.svelte

@@ -0,0 +1,26 @@
+<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 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;
+        alignment?: string;
+        imgClass?: string;
+        figClass?: string;
+        alt?: string;
+        effect?: string;
+        captionClass?: string;
+    };
+    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/utils/CloseButton.svelte

@@ -5,6 +5,7 @@ export let color = 'default';
 export let name = 'Close';
 export let size = 'md';
 const colors = {
+    dark: 'hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600',
     gray: 'focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-300',
     red: 'focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-300',
     yellow: 'focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-300',
@@ -18,10 +19,10 @@ const colors = {
 const sizing = {
     xs: 'm-0.5 rounded focus:ring-1 p-0.5',
     sm: 'm-0.5 rounded focus:ring-1 p-0.5',
-    md: '-mx-1 -my-1.5 rounded-lg focus:ring-2 p-1.5'
+    md: 'rounded-lg focus:ring-2 p-1.5'
 };
 let buttonClass = '';
-$: buttonClass = classNames('ml-auto focus:outline-none', sizing[size], colors[color], color === 'default' &&
+$: buttonClass = classNames('ml-auto focus:outline-none whitespace-normal', sizing[size], colors[color], color === 'default' &&
     (background
         ? 'hover:bg-gray-100 dark:hover:bg-gray-600'
         : 'hover:bg-gray-100 dark:hover:bg-gray-700'), $$props.class);

package/utils/Wrapper.svelte

@@ -0,0 +1,8 @@
+<script>export let show;
+</script>
+
+{#if show}
+	<div {...$$restProps}><slot /></div>
+{:else}
+	<slot />
+{/if}

package/utils/Wrapper.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        show: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type WrapperProps = typeof __propDef.props;
+export declare type WrapperEvents = typeof __propDef.events;
+export declare type WrapperSlots = typeof __propDef.slots;
+export default class Wrapper extends SvelteComponentTyped<WrapperProps, WrapperEvents, WrapperSlots> {
+}
+export {};