flowbite-svelte 0.44.11 → 0.44.13

package/src/lib/toasts/Toast.svelte

@@ -1,99 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher, type ComponentProps } from 'svelte';
-  import Frame from '../utils/Frame.svelte';
-  import { twMerge } from 'tailwind-merge';
-  import CloseButton from '../utils/CloseButton.svelte';
-  import { fade } from 'svelte/transition';
-  import type { Dismissable } from '$lib/types';
-
-  // propagate props type from underying Frame
-  interface $$Props extends ComponentProps<Frame>, Dismissable {
-    color?: 'primary' | 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none';
-    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none';
-    open?: boolean;
-    divClass?: string;
-    defaultIconClass?: string;
-    extraIconClass?: string;
-    contentClass?: string;
-  }
-
-  export let dismissable: boolean = true;
-  export let color: 'primary' | 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none' = 'primary';
-  export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none' = 'none';
-  export let open: boolean = true;
-  export let divClass: string = 'w-full max-w-xs p-4 text-gray-500 bg-white shadow dark:text-gray-400 dark:bg-gray-800 gap-3';
-  export let defaultIconClass: string = 'w-8 h-8';
-  export let contentClass: string = 'w-full text-sm font-normal';
-  export let align: boolean = true;
-
-  const dispatch = createEventDispatcher();
-  $: dispatch(open ? 'open' : 'close');
-
-  const positions = {
-    'top-left': 'absolute top-5 left-5',
-    'top-right': 'absolute top-5 right-5',
-    'bottom-left': 'absolute bottom-5 left-5',
-    'bottom-right': 'absolute bottom-5 right-5',
-    none: ''
-  };
-
-  function close(e: MouseEvent) {
-    e.stopPropagation();
-    open = false;
-  }
-
-  let finalDivClass: string;
-  $: finalDivClass = twMerge('flex', align ? 'items-center' : 'items-start', divClass, positions[position], $$props.class);
-
-  const colors = {
-    primary: 'text-primary-500 bg-primary-100 dark:bg-primary-800 dark:text-primary-200',
-    gray: 'text-gray-500 bg-gray-100 dark:bg-gray-700 dark:text-gray-200',
-    red: 'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200',
-    yellow: 'text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200',
-    green: 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200',
-    blue: 'text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200',
-    indigo: 'text-indigo-500 bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200',
-    purple: 'text-purple-500 bg-purple-100 dark:bg-purple-800 dark:text-purple-200',
-    orange: 'text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200',
-    none: ''
-  };
-
-  let iconClass: string;
-  $: iconClass = twMerge('inline-flex items-center justify-center shrink-0', colors[color], defaultIconClass);
-
-  const clsBtnExtraClass = '-mx-1.5 -my-1.5 text-gray-400 hover:text-gray-900 focus:!ring-gray-300 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-white dark:hover:bg-gray-700';
-</script>
-
-{#if open}
-  <Frame rounded transition={fade} color="none" {...$$restProps} class={finalDivClass} role="alert">
-    {#if $$slots.icon}
-      <Frame rounded color="none" class={iconClass}>
-        <slot name="icon" />
-      </Frame>
-    {/if}
-
-    <div class={contentClass}>
-      <slot />
-    </div>
-
-    {#if dismissable}
-      <slot name="close-button" {close}>
-        <CloseButton class={clsBtnExtraClass} on:click={close} />
-      </slot>
-    {/if}
-  </Frame>
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let dismissable: boolean = true;
-@prop export let color: 'primary' | 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none' = 'primary';
-@prop export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none' = 'none';
-@prop export let open: boolean = true;
-@prop export let divClass: string = 'w-full max-w-xs p-4 text-gray-500 bg-white shadow dark:text-gray-400 dark:bg-gray-800 gap-3';
-@prop export let defaultIconClass: string = 'w-8 h-8';
-@prop export let contentClass: string = 'w-full text-sm font-normal';
-@prop export let align: boolean = true;
--->

package/src/lib/toolbar/Toolbar.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-  import type { ToolbarColorType } from '../types';
-  import { setContext, type ComponentProps } from 'svelte';
-  import { writable } from 'svelte/store';
-  import { twMerge, twJoin } from 'tailwind-merge';
-  import Frame from '$lib/utils/Frame.svelte';
-
-  interface $$Props extends ComponentProps<Frame> {
-    color: 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'dark' | 'none';
-    embedded: boolean;
-  }
-
-  const separators = writable(false);
-  setContext('toolbar', separators);
-
-  export let color: ToolbarColorType = 'dark';
-  export let embedded: boolean = false;
-
-  let divClass: string;
-  $: divClass = twMerge('flex justify-between items-center', embedded || 'p-2', $$props.class);
-
-  const divideColors = {
-    gray: 'divide-gray-400 dark:divide-gray-700',
-    red: 'divide-red-400 dark:divide-red-700',
-    yellow: 'divide-yellow-400 dark:divide-yellow-700',
-    green: 'divide-green-400 dark:divide-green-700',
-    indigo: 'divide-indigo-400 dark:divide-indigo-700',
-    purple: 'divide-purple-400 dark:divide-purple-700',
-    pink: 'divide-pink-400 dark:divide-pink-700',
-    blue: 'divide-blue-400 dark:divide-blue-700',
-    dark: 'divide-gray-400 dark:divide-gray-600',
-    none: ''
-  };
-
-  let separatorsClass: string;
-  $: separatorsClass = twJoin($separators && 'sm:divide-x', divideColors[color]);
-</script>
-
-<Frame {...$$restProps} class={divClass} color={embedded ? 'none' : color} rounded={!embedded}>
-  <div class="flex flex-wrap items-center {separatorsClass}">
-    <slot />
-  </div>
-  <slot name="end" />
-</Frame>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let color: ToolbarColorType = 'dark';
-@prop export let embedded: boolean = false;
--->

package/src/lib/toolbar/ToolbarButton.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-  import type { ToolbarButtonType } from '../types';
-  import { getContext } from 'svelte';
-  import { twMerge } from 'tailwind-merge';
-
-  const background = getContext('background');
-
-  export let color: ToolbarButtonType = 'default';
-  export let name: string | undefined = undefined;
-  export let ariaLabel: string | undefined = undefined;
-  export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
-  export let href: string | undefined = undefined;
-
-  const colors = {
-    dark: 'text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600',
-    gray: 'text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-300',
-    red: 'text-red-500 focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-800 dark:hover:text-red-300',
-    yellow: 'text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-300',
-    green: 'text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-800 dark:hover:text-green-300',
-    indigo: 'text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-800 dark:hover:text-indigo-300',
-    purple: 'text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-800 dark:hover:text-purple-300',
-    pink: 'text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-800 dark:hover:text-pink-300',
-    blue: 'text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 dark:hover:text-blue-300',
-    primary: 'text-primary-500 focus:ring-primary-400 hover:bg-primary-200 dark:hover:bg-primary-800 dark:hover:text-primary-300',
-    default: 'focus:ring-gray-400'
-  };
-
-  const sizing = {
-    xs: 'm-0.5 rounded-sm focus:ring-1 p-0.5',
-    sm: 'm-0.5 rounded focus:ring-1 p-0.5',
-    md: 'm-0.5 rounded-lg focus:ring-2 p-1.5',
-    lg: 'm-0.5 rounded-lg focus:ring-2 p-2.5'
-  };
-
-  let buttonClass: string;
-  $: buttonClass = twMerge('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',
-    lg: 'w-5 h-5'
-  };
-</script>
-
-{#if href}
-  <a {href} {...$$restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
-    {#if name}<span class="sr-only">{name}</span>{/if}
-    <slot svgSize={svgSizes[size]} />
-  </a>
-{:else}
-  <button on:click type="button" {...$$restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
-    {#if name}<span class="sr-only">{name}</span>{/if}
-    <slot svgSize={svgSizes[size]} />
-  </button>
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let color: ToolbarButtonType = 'default';
-@prop export let name: string | undefined = undefined;
-@prop export let ariaLabel: string | undefined = undefined;
-@prop export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
-@prop export let href: string | undefined = undefined;
--->

package/src/lib/toolbar/ToolbarGroup.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import type { Writable } from 'svelte/store';
-  import { getContext } from 'svelte';
-  export let divClass: string = 'flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0';
-
-  const options: Writable<boolean> = getContext('toolbar');
-  if (options) $options = true;
-</script>
-
-<div class={twMerge(divClass, $$props.class)}>
-  <slot />
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let divClass: string = 'flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0';
--->

package/src/lib/tooltips/Tooltip.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-  import type { ComponentProps } from 'svelte';
-  import Popper from '../utils/Popper.svelte';
-  import { twMerge } from 'tailwind-merge';
-
-  // propagate props type from underlying Frame
-  interface $$Props extends ComponentProps<Popper> {
-    type?: 'dark' | 'light' | 'auto' | 'custom';
-    defaultClass?: string;
-  }
-
-  export let type: 'dark' | 'light' | 'auto' | 'custom' = 'dark';
-  export let defaultClass: string = 'py-2 px-3 text-sm font-medium';
-
-  const types = {
-    dark: 'bg-gray-900 text-white dark:bg-gray-700',
-    light: 'border-gray-200 bg-white text-gray-900',
-    auto: ' bg-white text-gray-900 dark:bg-gray-700 dark:text-white border-gray-200 dark:border-gray-700',
-    custom: ''
-  };
-
-  let toolTipClass: string;
-  $: {
-    if ($$restProps.color) type = 'custom';
-    else $$restProps.color = 'none';
-
-    if (['light', 'auto'].includes(type)) $$restProps.border = true;
-    toolTipClass = twMerge('tooltip', defaultClass, types[type], $$props.class);
-  }
-</script>
-
-<Popper rounded shadow {...$$restProps} class={toolTipClass} on:show>
-  <slot />
-</Popper>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let type: 'dark' | 'light' | 'auto' | 'custom' = 'dark';
-@prop export let defaultClass: string = 'py-2 px-3 text-sm font-medium';
--->

package/src/lib/types.ts

@@ -1,163 +0,0 @@
-import type { SvelteComponent } from 'svelte';
-
-export type BlockQuoteType = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
-
-export type ButtonType = 'button' | 'submit' | 'reset';
-
-export type ButtonColorType = 'alternative' | 'blue' | 'cyan' | 'dark' | 'light' | 'lime' | 'green' | 'pink' | 'primary' | 'red' | 'teal' | 'yellow' | 'purple' | 'purpleToBlue' | 'cyanToBlue' | 'greenToBlue' | 'purpleToPink' | 'pinkToOrange' | 'tealToLime' | 'redToYellow';
-
-export type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink' | 'white' | 'custom' | 'primary' | 'secondary';
-
-export type ImgType = {
-  src: string;
-  alt?: string;
-};
-
-export type IndicatorColorType = 'gray' | 'dark' | 'blue' | 'green' | 'red' | 'purple' | 'indigo' | 'yellow' | 'teal' | 'none';
-
-export type IndicatorPlacementType = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | undefined;
-
-export type InputType = 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'reset' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | 'search';
-
-export type drawerTransitionTypes = 'fade' | 'fly' | 'slide' | 'blur' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur' | undefined;
-
-export type FormColorType = 'blue' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'orange' | 'primary' | 'secondary';
-
-export type ModalPlacementType = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-
-export type PsizeType = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
-
-export type PweightType = 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
-
-export type TableColorType = 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'indigo' | 'pink' | 'default' | 'custom';
-
-export type ToolbarColorType = 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'dark' | 'none';
-
-export type ToolbarButtonType = 'dark' | 'default' | 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue';
-
-export declare const xs = 'xs';
-export declare const sm = 'sm';
-export declare const md = 'md';
-export declare const lg = 'lg';
-export declare const xl = 'xl';
-export declare type SizeType = typeof xs | typeof sm | typeof md | typeof lg | typeof xl;
-
-export declare type FormSizeType = typeof sm | typeof md | typeof lg;
-
-export type ReviewType = {
-  name: string;
-  imgSrc: string;
-  imgAlt: string;
-  address: string | undefined;
-  reviewDate: string | undefined;
-  title: string;
-  rating: number;
-  item1: string | undefined;
-  item2: string | undefined;
-  item3: string | undefined;
-};
-
-export type SelectOptionType = {
-  name: string | number;
-  value: string | number;
-};
-
-export type TransitionTypes = 'fade' | 'fly' | 'slide' | 'blur' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur';
-
-export interface ActivityType {
-  title: HTMLElement | string;
-  date: Date | string;
-  src: string;
-  alt: string;
-  text?: HTMLElement | string;
-}
-
-export interface drawerTransitionParamTypes {
-  amount?: number;
-  delay?: number;
-  duration?: number;
-  easing?: (t: number) => number;
-  opacity?: number;
-  x?: number;
-  y?: number;
-}
-
-export interface Dismissable {
-  dismissable?: boolean;
-}
-
-export interface GroupTimelineType {
-  title: string | HTMLElement;
-  src: string;
-  alt: string;
-  href?: string;
-  isPrivate?: boolean;
-  comment?: string | HTMLElement;
-}
-
-export interface ListGroupItemType {
-  current?: boolean;
-  disabled?: boolean;
-  href?: string;
-  [propName: string]: any;
-}
-
-export interface LinkType {
-  name: string;
-  href?: string;
-  rel?: string;
-  active?: boolean;
-}
-
-export interface NavbarType {
-  name: string;
-  href: string;
-  rel?: string;
-  child?: NavbarType[];
-}
-
-export interface SiteType {
-  name: string;
-  href: string;
-  img?: string;
-}
-
-export interface TimelineItemVerticalType {
-  date: Date | string;
-  title: string;
-  icon?: typeof SvelteComponent<any>;
-  iconSize?: number;
-  iconClass?: string;
-  href?: string;
-  linkname?: string;
-  text?: HTMLElement | string;
-}
-
-export interface TimelineItemHorizontalType {
-  date: Date | string;
-  title: string;
-  icon?: typeof SvelteComponent<any>;
-  iconSize?: number;
-  iconClass?: string;
-  text?: HTMLElement | string;
-}
-
-export interface TransitionParamTypes {
-  delay?: number;
-  duration?: number;
-  easing?: (t: number) => number;
-  css?: (t: number, u: number) => string;
-  tick?: (t: number, u: number) => void;
-}
-
-export interface ButtonClassesTypes {
-  default?: string;
-  border?: string;
-  application?: string;
-  pagination?: string;
-  group?: string;
-  card?: string;
-  meeting?: string;
-  video?: string;
-  custom?: string;
-}

package/src/lib/typography/A.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-
-  export let href: string = '#';
-  export let color: string = 'text-primary-600 dark:text-primary-500';
-  export let aClass: string = 'inline-flex items-center hover:underline';
-</script>
-
-<a {...$$restProps} {href} class={twMerge(aClass, color, $$props.class)} on:click>
-  <slot />
-</a>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let href: string = '#';
-@prop export let color: string = 'text-primary-600 dark:text-primary-500';
-@prop export let aClass: string = 'inline-flex items-center hover:underline';
--->

package/src/lib/typography/Blockquote.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import type { BlockQuoteType } from '../types';
-
-  export let border: boolean = false;
-  export let italic: boolean = true;
-  export let borderClass: string = 'border-l-4 border-gray-300 dark:border-gray-500';
-  export let bgClass: string = 'bg-gray-50 dark:bg-gray-800';
-  export let bg: boolean = false;
-  export let baseClass: string = 'font-semibold text-gray-900 dark:text-white';
-  export let alignment: 'left' | 'center' | 'right' = 'left';
-  export let size: BlockQuoteType = 'lg';
-  let alignmentClasses = {
-    left: 'text-left',
-    center: 'text-center',
-    right: 'text-right'
-  };
-  const sizes = {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    base: 'text-base',
-    lg: 'text-lg',
-    xl: 'text-xl',
-    '2xl': 'text-2xl',
-    '3xl': 'text-3xl',
-    '4xl': 'text-4xl',
-    '5xl': 'text-5xl',
-    '6xl': 'text-6xl',
-    '7xl': 'text-7xl',
-    '8xl': 'text-8xl',
-    '9xl': 'text-9xl'
-  };
-</script>
-
-<blockquote {...$$restProps} class={twMerge(baseClass, alignmentClasses[alignment], sizes[size], bg && bgClass, border && borderClass, italic && 'italic', $$props.class)}>
-  <slot />
-</blockquote>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let border: boolean = false;
-@prop export let italic: boolean = true;
-@prop export let borderClass: string = 'border-l-4 border-gray-300 dark:border-gray-500';
-@prop export let bgClass: string = 'bg-gray-50 dark:bg-gray-800';
-@prop export let bg: boolean = false;
-@prop export let baseClass: string = 'font-semibold text-gray-900 dark:text-white';
-@prop export let alignment: 'left' | 'center' | 'right' = 'left';
-@prop export let size: BlockQuoteType = 'lg';
--->

package/src/lib/typography/DescriptionList.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-
-  export let tag: 'dt' | 'dd';
-  export let dtClass: string = 'text-gray-500 md:text-lg dark:text-gray-400';
-  export let ddClass: string = 'text-lg font-semibold';
-
-  let classDesc = twMerge(tag === 'dt' ? dtClass : ddClass, $$props.class);
-</script>
-
-<svelte:element this={tag} {...$$restProps} class={classDesc}>
-  <slot />
-</svelte:element>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let tag: 'dt' | 'dd';
-@prop export let dtClass: string = 'text-gray-500 md:text-lg dark:text-gray-400';
-@prop export let ddClass: string = 'text-lg font-semibold';
--->

package/src/lib/typography/Heading.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-
-  export let tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h1';
-  export let color: string = 'text-gray-900 dark:text-white';
-  export let customSize: string = '';
-  const textSizes = {
-    h1: 'text-5xl font-extrabold',
-    h2: 'text-4xl font-bold',
-    h3: 'text-3xl font-bold',
-    h4: 'text-2xl font-bold',
-    h5: 'text-xl font-bold',
-    h6: 'text-lg font-bold'
-  };
-</script>
-
-<svelte:element this={tag} {...$$restProps} class={twMerge(customSize ? customSize : textSizes[tag], color, 'w-full', $$props.class)}>
-  <slot />
-</svelte:element>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h1';
-@prop export let color: string = 'text-gray-900 dark:text-white';
-@prop export let customSize: string = '';
--->

package/src/lib/typography/Hr.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-
-  export let icon: boolean = false;
-  export let divClass: string = 'inline-flex items-center justify-center w-full';
-  export let hrClass: string = 'h-px my-8 bg-gray-200 border-0 dark:bg-gray-700';
-  export let iconDivClass: string = 'absolute left-1/2 px-4 bg-white -translate-x-1/2 ';
-  export let textSpanClass: string = 'absolute px-3 font-medium text-gray-900 -translate-x-1/2 bg-white left-1/2 dark:text-white dark:bg-gray-900 ';
-  export let innerDivClass: string = 'absolute px-4 -translate-x-1/2 bg-white left-1/2 dark:bg-gray-900';
-
-  let horizontalCls: string = twMerge(hrClass, $$props.classHr);
-  let divCls = twMerge(divClass, $$slots && 'relative', $$props.classDiv);
-  let innerDivCls = twMerge(innerDivClass, icon ? iconDivClass : textSpanClass, $$props.classInnerDiv);
-</script>
-
-{#if $$slots.default}
-  <div {...$$restProps} class={divCls}>
-    <hr class={horizontalCls} />
-    <div class={innerDivCls}>
-      <slot />
-    </div>
-  </div>
-{:else}
-  <hr class={horizontalCls} />
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let icon: boolean = false;
-@prop export let divClass: string = 'inline-flex items-center justify-center w-full';
-@prop export let hrClass: string = 'h-px my-8 bg-gray-200 border-0 dark:bg-gray-700';
-@prop export let iconDivClass: string = 'absolute left-1/2 px-4 bg-white -translate-x-1/2 ';
-@prop export let textSpanClass: string = 'absolute px-3 font-medium text-gray-900 -translate-x-1/2 bg-white left-1/2 dark:text-white dark:bg-gray-900 ';
-@prop export let innerDivClass: string = 'absolute px-4 -translate-x-1/2 bg-white left-1/2 dark:bg-gray-900';
--->

package/src/lib/typography/Img.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-
-  export let caption: string | undefined = undefined;
-  export let src: string | undefined = undefined;
-  export let srcset: string | undefined = undefined;
-  export let size: string = 'max-w-full';
-  export let alignment: string = '';
-  export let imgClass: string = 'h-auto';
-  export let figClass: string = 'max-w-lg';
-  export let alt: string = '';
-  export let effect: string = '';
-  export let captionClass: string = 'mt-2 text-sm text-center text-gray-500 dark:text-gray-400';
-</script>
-
-{#if caption}
-  <figure class={figClass}>
-    <img class={twMerge(imgClass, size, alignment, effect, $$props.class)} {src} {srcset} {alt} />
-    <figcaption class={captionClass}>{@html caption}</figcaption>
-  </figure>
-{:else}
-  <img {...$$restProps} class={twMerge(imgClass, size, alignment, effect, $$props.class)} {src} {srcset} {alt} />
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let caption: string | undefined = undefined;
-@prop export let src: string | undefined = undefined;
-@prop export let srcset: string | undefined = undefined;
-@prop export let size: string = 'max-w-full';
-@prop export let alignment: string = '';
-@prop export let imgClass: string = 'h-auto';
-@prop export let figClass: string = 'max-w-lg';
-@prop export let alt: string = '';
-@prop export let effect: string = '';
-@prop export let captionClass: string = 'mt-2 text-sm text-center text-gray-500 dark:text-gray-400';
--->

package/src/lib/typography/Layout.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-
-  export let divClass: string = 'grid';
-  export let cols: string = 'grid-cols-1 sm:grid-cols-2';
-  export let gap: number;
-  let classDiv = twMerge(divClass, 'gap-' + String(gap), cols);
-</script>
-
-<div {...$$restProps} class={classDiv}>
-  <slot />
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let divClass: string = 'grid';
-@prop export let cols: string = 'grid-cols-1 sm:grid-cols-2';
-@prop export let gap: number;
--->