flowbite-svelte 0.25.17 → 0.25.20

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 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.20](https://github.com/themesberg/flowbite-svelte/compare/v0.25.19...v0.25.20) (2022-08-27)
+
+
+### Bug Fixes
+
+* index page space ([6ab9a19](https://github.com/themesberg/flowbite-svelte/commit/6ab9a19e004fc19ba3bd696acedbc5bbc0ced966))
+* remove heros from: ([7055f4c](https://github.com/themesberg/flowbite-svelte/commit/7055f4c5ddaa91e15cabaf7d1112a149cf81374d))
+* remove heros icon from Carousel ([2c7d4c9](https://github.com/themesberg/flowbite-svelte/commit/2c7d4c9a6edc1a4dd4005e5dcf46fec8b5dc0a52))
+
+### [0.25.19](https://github.com/themesberg/flowbite-svelte/compare/v0.25.18...v0.25.19) (2022-08-27)
+
+
+### Bug Fixes
+
+* remove Home icons from all pages ([7ac0e7a](https://github.com/themesberg/flowbite-svelte/commit/7ac0e7aa3edc5486d597a61775a5694c76b4bb35))
+* removed Home icon from BreadcrumbItem ([66f00dd](https://github.com/themesberg/flowbite-svelte/commit/66f00dd9e024d97c2b9766e30b03b775f227c672))
+
+### [0.25.18](https://github.com/themesberg/flowbite-svelte/compare/v0.25.17...v0.25.18) (2022-08-27)
+
+
+### Bug Fixes
+
+* change BreadcrumbItem home for all pages ([f5f895f](https://github.com/themesberg/flowbite-svelte/commit/f5f895f6157b03e435975c5735329f8dfc984485))
+
 ### [0.25.17](https://github.com/themesberg/flowbite-svelte/compare/v0.25.16...v0.25.17) (2022-08-27)
 
 

package/breadcrumbs/Breadcrumb.svelte

@@ -1,9 +1,12 @@
 <script>import classNames from 'classnames';
+export let solid = false;
 export let navClass = 'flex';
+export let solidClass = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
 export let olClass = 'inline-flex items-center space-x-1 md:space-x-3';
+let classNav = solid ? solidClass : navClass;
 </script>
 
-<nav aria-label="Breadcrumb" {...$$restProps} class={classNames(navClass, $$props.class)}>
+<nav aria-label="Breadcrumb" {...$$restProps} class={classNames(classNav, $$props.class)}>
 	<ol class={classNames(olClass, $$props.classOl)}>
 		<slot />
 	</ol>

package/breadcrumbs/Breadcrumb.svelte.d.ts

@@ -2,7 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        solid?: boolean;
         navClass?: string;
+        solidClass?: string;
         olClass?: string;
     };
     events: {

package/breadcrumbs/BreadcrumbItem.svelte

@@ -1,43 +1,51 @@
-<script>import { ChevronRight } from 'svelte-heros';
-export let icon = null;
-export let variation = null;
-export let iconSize = 20;
-export let iconClass = 'mr-2';
+<script>export let home = false;
+export let linkClass = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
+export let spanClass = 'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400';
+export let homeClass = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
 </script>
 
-<li class="group flex items-center" {...$$props}>
-	<ChevronRight aria-hidden="true" class="mx-1 h-6 w-6 text-gray-400 group-first:hidden md:mx-2" />
-	{#if $$props.href}
-		<a
-			class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
-			href={$$props.href}
-		>
-			{#if icon}
-				<svelte:component
-					this={icon}
-					{variation}
-					size={iconSize}
-					aria-hidden="true"
-					class={iconClass}
-				/>
+<li class="inline-flex items-center" {...$$props}>
+	{#if home}
+		<a class={homeClass} href={$$props.href}>
+			{#if $$slots.icon}
+				<slot name="icon" />
+			{:else}
+				<svg
+					class="w-4 h-4 mr-2"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+					xmlns="http://www.w3.org/2000/svg"
+					><path
+						d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
+					/></svg
+				>
 			{/if}
 			<slot />
 		</a>
 	{:else}
-		<span
-			class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400"
-			data-testid="breadcrumb-item"
-		>
-			{#if icon}
-				<svelte:component
-					this={icon}
-					{variation}
-					size={iconSize}
-					aria-hidden="true"
-					class={iconClass}
-				/>
-			{/if}
-			<slot />
-		</span>
+		{#if $$slots.icon}
+			<slot name="icon" />
+		{:else}
+			<svg
+				class="w-6 h-6 text-gray-400"
+				fill="currentColor"
+				viewBox="0 0 20 20"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					fill-rule="evenodd"
+					d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+					clip-rule="evenodd"
+				/></svg
+			>
+		{/if}
+		{#if $$props.href}
+			<a class={linkClass} href={$$props.href}>
+				<slot />
+			</a>
+		{:else}
+			<span class={spanClass}>
+				<slot />
+			</span>
+		{/if}
 	{/if}
 </li>

package/breadcrumbs/BreadcrumbItem.svelte.d.ts

@@ -1,17 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SvelteComponent } from 'svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        icon?: typeof SvelteComponent | null;
-        variation?: 'solid' | null;
-        iconSize?: number;
-        iconClass?: string;
+        home?: boolean;
+        linkClass?: string;
+        spanClass?: string;
+        homeClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        icon: {};
         default: {};
     };
 };

package/carousels/Carousel.svelte

@@ -1,5 +1,4 @@
-<script>import { ChevronRight, ChevronLeft } from 'svelte-heros';
-import Slide from './Slide.svelte';
+<script>import Slide from './Slide.svelte';
 import Thumbnail from './Thumbnail.svelte';
 import Caption from './Caption.svelte';
 import Indicator from './Indicator.svelte';
@@ -10,12 +9,6 @@ export let images;
 export let slideControls = true;
 export let loop = false;
 export let duration = 2000;
-export let icons = {
-    next: ChevronRight,
-    prev: ChevronLeft
-};
-export let iconSize = 24;
-export let iconClass = 'text-white sm:w-6 sm:h-6 dark:text-gray-300';
 // Carousel
 export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
 export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
@@ -64,8 +57,7 @@ if (loop) {
 					{name}
 					selected={imageShowingIndex === id}
 					on:click={() => goToSlide(id)}
-					{indicatorClass}
-				/>
+					{indicatorClass} />
 			{/each}
 		</div>
 	{/if}
@@ -75,12 +67,25 @@ if (loop) {
 			on:click={prevSlide}
 			type="button"
 			class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
-			data-carousel-prev
-		>
+			data-carousel-prev>
 			<span
-				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
-			>
-				<svelte:component this={icons.prev} size={iconSize} class=" {iconClass}" />
+				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+				{#if $$slots.previous}
+					<slot name="previous" />
+				{:else}
+					<svg
+						aria-hidden="true"
+						class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 19l-7-7 7-7" /></svg>
+				{/if}
 				<span class="hidden">Previous</span>
 			</span>
 		</button>
@@ -88,12 +93,25 @@ if (loop) {
 			on:click={nextSlide}
 			type="button"
 			class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
-			data-carousel-next
-		>
+			data-carousel-next>
 			<span
-				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
-			>
-				<svelte:component this={icons.next} size={iconSize} class=" {iconClass}" />
+				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+				{#if $$slots.next}
+					<slot name="next" />
+				{:else}
+					<svg
+						aria-hidden="true"
+						class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 5l7 7-7 7" /></svg>
+				{/if}
 				<span class="hidden">Next</span>
 			</span>
 		</button>
@@ -114,8 +132,7 @@ if (loop) {
 				titleLink={attribution}
 				{id}
 				selected={imageShowingIndex === id}
-				on:click={() => goToSlide(id)}
-			/>
+				on:click={() => goToSlide(id)} />
 		{/each}
 	</div>
 {/if}

package/carousels/Carousel.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import type { CarouselIconType } from '../types';
 declare const __propDef: {
     props: {
         showIndicators?: boolean;
@@ -9,9 +8,6 @@ declare const __propDef: {
         slideControls?: boolean;
         loop?: boolean;
         duration?: number;
-        icons?: CarouselIconType;
-        iconSize?: number;
-        iconClass?: string;
         divClass?: string;
         indicatorDivClass?: string;
         captionClass?: string;
@@ -21,7 +17,10 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        previous: {};
+        next: {};
+    };
 };
 export declare type CarouselProps = typeof __propDef.props;
 export declare type CarouselEvents = typeof __propDef.events;

package/carousels/CarouselTransition.svelte

@@ -1,5 +1,4 @@
-<script>import { ChevronRight, ChevronLeft } from 'svelte-heros';
-import { fade, blur, fly, slide } from 'svelte/transition';
+<script>import { fade, blur, fly, slide } from 'svelte/transition';
 import Slide from './Slide.svelte';
 import Thumbnail from './Thumbnail.svelte';
 import Caption from './Caption.svelte';
@@ -16,13 +15,6 @@ export let duration = 2000;
 // Carousel
 export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
 export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
-// Slide controllers
-export let icons = {
-    next: ChevronRight,
-    prev: ChevronLeft
-};
-export let iconSize = 24;
-export let iconClass = 'text-white sm:w-6 sm:h-6 dark:text-gray-300';
 // Caption
 export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
 // Indicator
@@ -88,8 +80,7 @@ if (loop) {
 					{name}
 					selected={imageShowingIndex === id}
 					on:click={() => goToSlide(id)}
-					{indicatorClass}
-				/>
+					{indicatorClass} />
 			{/each}
 		</div>
 	{/if}
@@ -99,12 +90,25 @@ if (loop) {
 			on:click={prevSlide}
 			type="button"
 			class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
-			data-carousel-prev
-		>
+			data-carousel-prev>
 			<span
-				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
-			>
-				<svelte:component this={icons.prev} size={iconSize} class=" {iconClass}" />
+				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+				{#if $$slots.previous}
+					<slot name="previous" />
+				{:else}
+					<svg
+						aria-hidden="true"
+						class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 19l-7-7 7-7" /></svg>
+				{/if}
 				<span class="hidden">Previous</span>
 			</span>
 		</button>
@@ -112,12 +116,25 @@ if (loop) {
 			on:click={nextSlide}
 			type="button"
 			class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
-			data-carousel-next
-		>
+			data-carousel-next>
 			<span
-				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
-			>
-				<svelte:component this={icons.next} size={iconSize} class=" {iconClass}" />
+				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+				{#if $$slots.next}
+					<slot name="next" />
+				{:else}
+					<svg
+						aria-hidden="true"
+						class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 5l7 7-7 7" /></svg>
+				{/if}
 				<span class="hidden">Next</span>
 			</span>
 		</button>
@@ -138,8 +155,7 @@ if (loop) {
 				titleLink={attribution}
 				{id}
 				selected={imageShowingIndex === id}
-				on:click={() => goToSlide(id)}
-			/>
+				on:click={() => goToSlide(id)} />
 		{/each}
 	</div>
 {/if}

package/carousels/CarouselTransition.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import type { CarouselIconType } from '../types';
 import type { TransitionTypes, TransitionParamTypes } from '../types';
 declare const __propDef: {
     props: {
@@ -14,16 +13,16 @@ declare const __propDef: {
         duration?: number;
         divClass?: string;
         indicatorDivClass?: string;
-        icons?: CarouselIconType;
-        iconSize?: number;
-        iconClass?: string;
         captionClass?: string;
         indicatorClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        previous: {};
+        next: {};
+    };
 };
 export declare type CarouselTransitionProps = typeof __propDef.props;
 export declare type CarouselTransitionEvents = typeof __propDef.events;

package/index.d.ts

@@ -38,18 +38,6 @@ 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 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';

package/index.js

@@ -52,19 +52,6 @@ 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';
-// Icons
-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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.25.17",
+  "version": "0.25.20",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -147,18 +147,6 @@
     "./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",
     "./kbd/ArrowKeyLeft.svelte": "./kbd/ArrowKeyLeft.svelte",

package/toasts/Toast.svelte

@@ -18,7 +18,8 @@ const colors = {
     gray: 'text-gray-500 bg-gray-100 dark:bg-gray-800 dark:text-gray-200',
     purple: 'text-purple-500 bg-purple-100 dark:bg-purple-800 dark:text-purple-200',
     indigo: 'text-indigo-500 bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200',
-    yellow: 'text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200'
+    yellow: 'text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200',
+    pink: 'text-pink-500 bg-pink-100 dark:bg-pink-800 dark:text-pink-200'
 };
 // have a custom transition function that returns the desired transition
 let transitionFunc;

package/typography/Hr.svelte

@@ -1,27 +1,25 @@
 <script>import classNames from 'classnames';
-export let divClass = 'inline-flex justify-center items-center w-full';
-export let hrClass = 'bg-gray-200 rounded border-0 dark:bg-gray-700';
-// bg-gray-200 rounded border-0 dark:bg-gray-700
+export let icon = false;
 export let width = 'w-full';
 export let height = 'h-px';
-export let iconSize = 24;
-export let iconClass = 'text-gray-700 dark:text-gray-300';
-export let icon;
-export let text;
+export let divClass = 'inline-flex justify-center items-center w-full';
+export let hrClass = 'bg-gray-200 rounded border-0 dark:bg-gray-700';
 export let iconDivClass = 'absolute left-1/2 px-4 bg-white -translate-x-1/2 dark:bg-gray-900';
 export let textSpanClass = 'absolute left-1/2 px-3 font-medium text-gray-900 bg-white -translate-x-1/2 dark:text-white dark:bg-gray-900';
 let horizontalClass = classNames(hrClass, width, height, $$props.class);
 </script>
 
-{#if icon || text}
+{#if $$slots}
 	<div class={classNames(divClass, $$props.classDiv)}>
 		<hr class={horizontalClass} />
 		{#if icon}
 			<div class={iconDivClass}>
-				<svelte:component this={icon} size={iconSize} class={iconClass} />
+				<slot />
 			</div>
 		{:else}
-			<span class={textSpanClass}>or</span>
+			<span class={textSpanClass}>
+				<slot />
+			</span>
 		{/if}
 	</div>
 {:else}

package/typography/Hr.svelte.d.ts

@@ -1,23 +1,21 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SvelteComponent } from 'svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        divClass?: string;
-        hrClass?: string;
+        icon?: boolean;
         width?: string;
         height?: string;
-        iconSize?: number;
-        iconClass?: string;
-        icon: typeof SvelteComponent;
-        text: string;
+        divClass?: string;
+        hrClass?: string;
         iconDivClass?: string;
         textSpanClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type HrProps = typeof __propDef.props;
 export declare type HrEvents = typeof __propDef.events;

package/icons/CodeBracket.svelte

@@ -1,38 +0,0 @@
-<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

@@ -1,22 +0,0 @@
-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 {};