flowbite-svelte 0.25.13 → 0.25.16

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/icons/QrCode.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="M3.75 4.875C3.75 4.25368 4.25368 3.75 4.875 3.75H9.375C9.99632 3.75 10.5 4.25368 10.5 4.875V9.375C10.5 9.99632 9.99632 10.5 9.375 10.5H4.875C4.25368 10.5 3.75 9.99632 3.75 9.375V4.875Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3.75 14.625C3.75 14.0037 4.25368 13.5 4.875 13.5H9.375C9.99632 13.5 10.5 14.0037 10.5 14.625V19.125C10.5 19.7463 9.99632 20.25 9.375 20.25H4.875C4.25368 20.25 3.75 19.7463 3.75 19.125V14.625Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.5 4.875C13.5 4.25368 14.0037 3.75 14.625 3.75H19.125C19.7463 3.75 20.25 4.25368 20.25 4.875V9.375C20.25 9.99632 19.7463 10.5 19.125 10.5H14.625C14.0037 10.5 13.5 9.99632 13.5 9.375V4.875Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6.75 6.75H7.5V7.5H6.75V6.75Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6.75 16.5H7.5V17.25H6.75V16.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.5 6.75H17.25V7.5H16.5V6.75Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.5 13.5H14.25V14.25H13.5V13.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.5 19.5H14.25V20.25H13.5V19.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M19.5 13.5H20.25V14.25H19.5V13.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M19.5 19.5H20.25V20.25H19.5V19.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.5 16.5H17.25V17.25H16.5V16.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 4.875C3 3.83947 3.83947 3 4.875 3H9.375C10.4105 3 11.25 3.83947 11.25 4.875V9.375C11.25 10.4105 10.4105 11.25 9.375 11.25H4.875C3.83947 11.25 3 10.4105 3 9.375V4.875ZM4.875 4.5C4.66789 4.5 4.5 4.66789 4.5 4.875V9.375C4.5 9.58211 4.66789 9.75 4.875 9.75H9.375C9.58211 9.75 9.75 9.58211 9.75 9.375V4.875C9.75 4.66789 9.58211 4.5 9.375 4.5H4.875ZM12.75 4.875C12.75 3.83947 13.5895 3 14.625 3H19.125C20.1605 3 21 3.83947 21 4.875V9.375C21 10.4105 20.1605 11.25 19.125 11.25H14.625C13.5895 11.25 12.75 10.4105 12.75 9.375V4.875ZM14.625 4.5C14.4179 4.5 14.25 4.66789 14.25 4.875V9.375C14.25 9.58211 14.4179 9.75 14.625 9.75H19.125C19.3321 9.75 19.5 9.58211 19.5 9.375V4.875C19.5 4.66789 19.3321 4.5 19.125 4.5H14.625ZM6 6.75C6 6.33579 6.33579 6 6.75 6H7.5C7.91421 6 8.25 6.33579 8.25 6.75V7.5C8.25 7.91421 7.91421 8.25 7.5 8.25H6.75C6.33579 8.25 6 7.91421 6 7.5V6.75ZM15.75 6.75C15.75 6.33579 16.0858 6 16.5 6H17.25C17.6642 6 18 6.33579 18 6.75V7.5C18 7.91421 17.6642 8.25 17.25 8.25H16.5C16.0858 8.25 15.75 7.91421 15.75 7.5V6.75ZM3 14.625C3 13.5895 3.83947 12.75 4.875 12.75H9.375C10.4105 12.75 11.25 13.5895 11.25 14.625V19.125C11.25 20.1605 10.4105 21 9.375 21H4.875C3.83947 21 3 20.1605 3 19.125V14.625ZM4.875 14.25C4.66789 14.25 4.5 14.4179 4.5 14.625V19.125C4.5 19.3321 4.66789 19.5 4.875 19.5H9.375C9.58211 19.5 9.75 19.3321 9.75 19.125V14.625C9.75 14.4179 9.58211 14.25 9.375 14.25H4.875ZM12.75 13.5C12.75 13.0858 13.0858 12.75 13.5 12.75H14.25C14.6642 12.75 15 13.0858 15 13.5V14.25C15 14.6642 14.6642 15 14.25 15H13.5C13.0858 15 12.75 14.6642 12.75 14.25V13.5ZM18.75 13.5C18.75 13.0858 19.0858 12.75 19.5 12.75H20.25C20.6642 12.75 21 13.0858 21 13.5V14.25C21 14.6642 20.6642 15 20.25 15H19.5C19.0858 15 18.75 14.6642 18.75 14.25V13.5ZM6 16.5C6 16.0858 6.33579 15.75 6.75 15.75H7.5C7.91421 15.75 8.25 16.0858 8.25 16.5V17.25C8.25 17.6642 7.91421 18 7.5 18H6.75C6.33579 18 6 17.6642 6 17.25V16.5ZM15.75 16.5C15.75 16.0858 16.0858 15.75 16.5 15.75H17.25C17.6642 15.75 18 16.0858 18 16.5V17.25C18 17.6642 17.6642 18 17.25 18H16.5C16.0858 18 15.75 17.6642 15.75 17.25V16.5ZM12.75 19.5C12.75 19.0858 13.0858 18.75 13.5 18.75H14.25C14.6642 18.75 15 19.0858 15 19.5V20.25C15 20.6642 14.6642 21 14.25 21H13.5C13.0858 21 12.75 20.6642 12.75 20.25V19.5ZM18.75 19.5C18.75 19.0858 19.0858 18.75 19.5 18.75H20.25C20.6642 18.75 21 19.0858 21 19.5V20.25C21 20.6642 20.6642 21 20.25 21H19.5C19.0858 21 18.75 20.6642 18.75 20.25V19.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 = 'qr code';
+</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/QrCode.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 QrCodeProps = typeof __propDef.props;
+export declare type QrCodeEvents = typeof __propDef.events;
+export declare type QrCodeSlots = typeof __propDef.slots;
+export default class QrCode extends SvelteComponentTyped<QrCodeProps, QrCodeEvents, QrCodeSlots> {
+}
+export {};

package/index.d.ts

@@ -12,7 +12,6 @@ export { default as Carousel } from './carousels/Carousel.svelte';
 export { default as CarouselTransition } from './carousels/CarouselTransition.svelte';
 export { default as DarkMode } from './darkmode/DarkMode.svelte';
 export { default as Datepicker } from './datepicker/Datepicker.svelte';
-export { default as Drawer } from './drawers/Drawer.svelte';
 export { default as Dropdown } from './dropdowns/Dropdown.svelte';
 export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
 export { default as DropdownHeader } from './dropdowns/DropdownHeader.svelte';
@@ -40,8 +39,18 @@ 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 Envelope } from './icons/Envelope.svelte';
+export { default as FaceSmile } from './icons/FaceSmile.svelte';
 export { default as Figma } from './icons/Figma.svelte';
+export { default as Home } from './icons/Home.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 QrCode } from './icons/QrCode.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';
@@ -112,12 +121,16 @@ export { default as TimelineHorizontal } from './timelines/TimelineHorizontal.sv
 export { default as TimelineItemHorizontal } from './timelines/TimelineItemHorizontal.svelte';
 export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte';
 export { default as Toast } from './toasts/Toast.svelte';
+export { default as Toolbar } from './toolbar/Toolbar.svelte';
+export { default as ToolbarButton } from './toolbar/ToolbarButton.svelte';
+export { default as ToolbarGroup } from './toolbar/ToolbarGroup.svelte';
 export { default as Tooltip } from './tooltips/Tooltip.svelte';
 export { default as A } from './typography/A.svelte';
 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

@@ -23,8 +23,6 @@ export { default as CarouselTransition } from './carousels/CarouselTransition.sv
 export { default as DarkMode } from './darkmode/DarkMode.svelte';
 // Datepicker
 export { default as Datepicker } from './datepicker/Datepicker.svelte';
-// Drawer
-export { default as Drawer } from './drawers/Drawer.svelte';
 // Dropdown
 export { default as Dropdown } from './dropdowns/Dropdown.svelte';
 export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
@@ -56,8 +54,18 @@ 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 Envelope } from './icons/Envelope.svelte';
+export { default as FaceSmile } from './icons/FaceSmile.svelte';
 export { default as Figma } from './icons/Figma.svelte';
+export { default as Home } from './icons/Home.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 QrCode } from './icons/QrCode.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';
@@ -144,6 +152,10 @@ export { default as TimelineItemHorizontal } from './timelines/TimelineItemHoriz
 export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte';
 // Toast
 export { default as Toast } from './toasts/Toast.svelte';
+// Toolbar
+export { default as Toolbar } from './toolbar/Toolbar.svelte';
+export { default as ToolbarButton } from './toolbar/ToolbarButton.svelte';
+export { default as ToolbarGroup } from './toolbar/ToolbarGroup.svelte';
 // Tooltips
 export { default as Tooltip } from './tooltips/Tooltip.svelte';
 // Typography
@@ -152,6 +164,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.16",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -121,7 +121,6 @@
     "./darkmode/DarkMode.svelte": "./darkmode/DarkMode.svelte",
     "./datepicker/Calender.svelte": "./datepicker/Calender.svelte",
     "./datepicker/Datepicker.svelte": "./datepicker/Datepicker.svelte",
-    "./drawers/Drawer.svelte": "./drawers/Drawer.svelte",
     "./dropdowns/Dropdown.svelte": "./dropdowns/Dropdown.svelte",
     "./dropdowns/DropdownDivider.svelte": "./dropdowns/DropdownDivider.svelte",
     "./dropdowns/DropdownHeader.svelte": "./dropdowns/DropdownHeader.svelte",
@@ -149,7 +148,17 @@
     "./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/Envelope.svelte": "./icons/Envelope.svelte",
+    "./icons/FaceSmile.svelte": "./icons/FaceSmile.svelte",
     "./icons/Figma.svelte": "./icons/Figma.svelte",
+    "./icons/Home.svelte": "./icons/Home.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/QrCode.svelte": "./icons/QrCode.svelte",
     "./icons/QuoteLeft.svelte": "./icons/QuoteLeft.svelte",
     ".": "./index.js",
     "./kbd/ArrowKeyDown.svelte": "./kbd/ArrowKeyDown.svelte",
@@ -222,6 +231,9 @@
     "./timelines/TimelineItemHorizontal.svelte": "./timelines/TimelineItemHorizontal.svelte",
     "./timelines/TimelineItemVertical.svelte": "./timelines/TimelineItemVertical.svelte",
     "./toasts/Toast.svelte": "./toasts/Toast.svelte",
+    "./toolbar/Toolbar.svelte": "./toolbar/Toolbar.svelte",
+    "./toolbar/ToolbarButton.svelte": "./toolbar/ToolbarButton.svelte",
+    "./toolbar/ToolbarGroup.svelte": "./toolbar/ToolbarGroup.svelte",
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
     "./types": "./types.js",
     "./typography/A.svelte": "./typography/A.svelte",
@@ -229,6 +241,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 +249,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/toolbar/Toolbar.svelte

@@ -0,0 +1,57 @@
+<script>import { setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import classNames from 'classnames';
+const separators = writable(false);
+setContext('toolbar', separators);
+export let color = 'dark';
+export let embedded = false;
+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 ',
+    dark: 'bg-gray-50 dark:bg-gray-700'
+    // custom: customBgClass
+};
+const textColors = {
+    gray: 'text-gray-500 dark:text-gray-700',
+    red: 'text-red-500 dark:text-red-700',
+    yellow: 'text-yellow-500 dark:text-yellow-700',
+    green: 'text-green-500 dark:text-green-700',
+    indigo: 'text-indigo-500 dark:text-indigo-700',
+    purple: 'text-purple-500 dark:text-purple-700',
+    pink: 'text-pink-500 dark:text-pink-700',
+    blue: 'text-blue-500 dark:text-blue-700',
+    dark: 'text-gray-500 dark:text-gray-400'
+    // custom: customTextColor
+};
+let divClass;
+$: divClass = classNames('flex justify-between items-center', embedded || 'rounded-lg border border-gray-200 dark:border-gray-600 py-2 px-3', embedded || textColors[color], embedded || bgColors[color], $$props.class);
+const divideColors = {
+    gray: 'divide-gray-200 dark:divide-gray-700',
+    red: 'divide-red-200 dark:divide-red-700',
+    yellow: 'divide-yellow-200 dark:divide-yellow-700',
+    green: 'divide-green-200 dark:divide-green-700',
+    indigo: 'divide-indigo-200 dark:divide-indigo-700',
+    purple: 'divide-purple-200 dark:divide-purple-700',
+    pink: 'divide-pink-200 dark:divide-pink-700',
+    blue: 'divide-blue-200 dark:divide-blue-700',
+    dark: 'divide-gray-200 dark:divide-gray-600'
+    // custom: customTextColor
+};
+let separatorsClass;
+$: separatorsClass = classNames($separators && 'divide-gray-200 sm:divide-x', 
+//  dark:divide-gray-600'
+divideColors[color]);
+</script>
+
+<div class={divClass}>
+	<div class="flex flex-wrap items-center {separatorsClass}">
+		<slot />
+	</div>
+	<slot name="end" />
+</div>

package/toolbar/Toolbar.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: string;
+        embedded?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        end: {};
+    };
+};
+export declare type ToolbarProps = typeof __propDef.props;
+export declare type ToolbarEvents = typeof __propDef.events;
+export declare type ToolbarSlots = typeof __propDef.slots;
+export default class Toolbar extends SvelteComponentTyped<ToolbarProps, ToolbarEvents, ToolbarSlots> {
+}
+export {};

package/toolbar/ToolbarButton.svelte

@@ -0,0 +1,52 @@
+<script>import { getContext } from 'svelte';
+import classNames from 'classnames';
+const background = getContext('background');
+export let color = 'default';
+export let name = undefined;
+export let ariaLabel = undefined;
+export let size = 'md';
+const colors = {
+    default: 'hover:text-gray-900 hover:bg-gray-100 text-gray-500 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',
+    green: 'focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-300',
+    indigo: 'focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-300',
+    purple: 'focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-300',
+    pink: 'focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-300',
+    blue: 'focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-300'
+};
+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: 'rounded-lg focus:ring-2 p-1.5'
+};
+let buttonClass;
+$: buttonClass = classNames('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);
+const svgSizes = {
+    xs: 'w-3 h-3',
+    sm: 'w-3.5 h-3.5',
+    md: 'w-5 h-5'
+};
+</script>
+
+<button on:click type="button" class={buttonClass} aria-label={ariaLabel ?? name}>
+	{#if name}<span class="sr-only">{name}</span>{/if}
+	<slot>
+		<svg
+			class={svgSizes[size]}
+			fill="currentColor"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fill-rule="evenodd"
+				d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+	</slot>
+</button>

package/toolbar/ToolbarButton.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: string;
+        name?: string;
+        ariaLabel?: string;
+        size?: 'xs' | 'sm' | 'md';
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ToolbarButtonProps = typeof __propDef.props;
+export declare type ToolbarButtonEvents = typeof __propDef.events;
+export declare type ToolbarButtonSlots = typeof __propDef.slots;
+export default class ToolbarButton extends SvelteComponentTyped<ToolbarButtonProps, ToolbarButtonEvents, ToolbarButtonSlots> {
+}
+export {};

package/toolbar/ToolbarGroup.svelte

@@ -0,0 +1,9 @@
+<script>import { getContext } from 'svelte';
+const options = getContext('toolbar');
+if (options)
+    $options = true;
+</script>
+
+<div class="flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0">
+	<slot />
+</div>

package/toolbar/ToolbarGroup.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 ToolbarGroupProps = typeof __propDef.props;
+export declare type ToolbarGroupEvents = typeof __propDef.events;
+export declare type ToolbarGroupSlots = typeof __propDef.slots;
+export default class ToolbarGroup extends SvelteComponentTyped<ToolbarGroupProps, ToolbarGroupEvents, ToolbarGroupSlots> {
+}
+export {};

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 {};