flowbite-svelte 0.44.11 → 0.44.12

package/src/lib/cards/Card.svelte

@@ -1,70 +0,0 @@
-<script lang="ts">
-  import type { SizeType } from '$lib/types';
-  import { twMerge } from 'tailwind-merge';
-  import type { ComponentProps } from 'svelte';
-  import Frame from '../utils/Frame.svelte';
-
-  export let href: string | null | undefined = undefined;
-  export let horizontal: boolean = false;
-  export let reverse: boolean = false;
-  export let img: string | undefined = undefined;
-  export let padding: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'lg';
-  export let size: SizeType = 'sm';
-
-  // propagate props type from underlying Frame
-  interface $$Props extends ComponentProps<Frame> {
-    horizontal?: boolean;
-    reverse?: boolean;
-    img?: string;
-    padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-    size?: SizeType;
-  }
-
-  const paddings = {
-    none: 'p-0',
-    sm: 'p-4 sm:p-6 md:p-8',
-    md: 'p-4 sm:p-5',
-    lg: 'p-4 sm:p-6',
-    xl: 'p-4 sm:p-8'
-  };
-
-  const sizes = {
-    xs: 'max-w-xs',
-    sm: 'max-w-sm',
-    md: 'max-w-lg',
-    lg: 'max-w-2xl',
-    xl: 'max-w-screen-xl'
-  };
-
-  let inneraPdding: string;
-  $: innerPadding = paddings[padding];
-
-  let cardClass: string;
-  $: cardClass = twMerge('flex', sizes[size], reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse md:max-w-xl' : 'md:flex-row md:max-w-xl'), href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPadding, $$props.class);
-
-  let imgClass: string;
-  $: imgClass = twMerge(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none', horizontal && (reverse ? 'md:rounded-r-lg' : 'md:rounded-l-lg'));
-</script>
-
-<Frame tag={href ? 'a' : 'div'} rounded shadow border on:click on:focusin on:focusout on:mouseenter on:mouseleave {href} {...$$restProps} class={cardClass}>
-  {#if img}
-    <img class={imgClass} src={img} alt="" />
-    <div class={innerPadding}>
-      <slot />
-    </div>
-  {:else}
-    <slot />
-  {/if}
-</Frame>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let href: string | null | undefined = undefined;
-@prop export let horizontal: boolean = false;
-@prop export let reverse: boolean = false;
-@prop export let img: string | undefined = undefined;
-@prop export let padding: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'lg';
-@prop export let size: SizeType = 'sm';
--->

package/src/lib/carousels/Carousel.svelte

@@ -1,166 +0,0 @@
-<script lang="ts" context="module">
-  export type State = {
-    images: HTMLImgAttributes[];
-    index: number;
-  };
-</script>
-
-<script lang="ts">
-  import { createEventDispatcher, onMount, setContext } from 'svelte';
-  import { quintOut } from 'svelte/easing';
-  import type { HTMLImgAttributes } from 'svelte/elements';
-  import { writable } from 'svelte/store';
-  import { fade, type TransitionConfig } from 'svelte/transition';
-  import { twMerge } from 'tailwind-merge';
-  import Controls from './Controls.svelte';
-  import Indicators from './Indicators.svelte';
-
-  type TransitionFunc = (node: HTMLElement, params: any) => TransitionConfig;
-
-  export let images: HTMLImgAttributes[];
-  export let index: number = 0;
-  export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
-  export let duration: number = 0;
-
-  // Carousel
-  let divClass: string = 'overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96';
-
-  const dispatch = createEventDispatcher();
-
-  const { set, subscribe, update } = writable<State>({ images, index });
-
-  const state = { set: (s: State) => set({ index: ((s.index % images.length) + images.length) % images.length, images: s.images }), subscribe, update };
-
-  setContext('state', state);
-
-  subscribe((s) => {
-    index = s.index;
-    dispatch('change', images[index]);
-  });
-
-  onMount(() => dispatch('change', images[index]));
-
-  $: state.set({ images, index });
-
-  const nextSlide = () => (index += 1);
-  const prevSlide = () => (index -= 1);
-
-  const loop = (node: HTMLElement, duration: number) => {
-    carouselDiv = node; // used by DragStart
-
-    // loop timer
-    let intervalId: any;
-
-    if (duration > 0) intervalId = setInterval(nextSlide, duration);
-
-    return {
-      update: (duration: number) => {
-        clearInterval(intervalId);
-        if (duration > 0) intervalId = setInterval(nextSlide, duration);
-      },
-      destroy: () => clearInterval(intervalId)
-    };
-  };
-
-  type ActiveDragGesture = {
-    start: number;
-    position: number;
-    width: number;
-    timestamp: number;
-  };
-
-  let activeDragGesture: ActiveDragGesture | undefined;
-
-  let carouselDiv: HTMLElement;
-  let percentOffset: number = 0;
-  let touchEvent: MouseEvent | TouchEvent | null = null;
-
-  const getPositionFromEvent = (evt: MouseEvent | TouchEvent) => {
-    const mousePos = (evt as MouseEvent)?.clientX;
-    if (mousePos) return mousePos;
-
-    let touchEvt = evt as TouchEvent;
-    if (/^touch/.test(touchEvt?.type)) {
-      return touchEvt.touches[0].clientX;
-    }
-  };
-
-  const onDragStart = (evt: MouseEvent | TouchEvent) => {
-    touchEvent = evt;
-    evt.preventDefault();
-    const start = getPositionFromEvent(evt);
-    const width = carouselDiv.getBoundingClientRect().width;
-    if (start === undefined || width === undefined) return;
-    activeDragGesture = {
-      start,
-      position: start,
-      width,
-      timestamp: Date.now()
-    };
-  };
-
-  $: onDragMove =
-    activeDragGesture === undefined
-      ? undefined
-      : (evt: MouseEvent | TouchEvent) => {
-          const position = getPositionFromEvent(evt);
-          if (!activeDragGesture || position === undefined) return;
-          const { start, width } = activeDragGesture;
-          percentOffset = Math.min(100, Math.max(-100, ((position - start) / width) * 100));
-          activeDragGesture.position = position;
-        };
-
-  $: onDragStop =
-    activeDragGesture === undefined
-      ? undefined
-      : (evt: MouseEvent | TouchEvent) => {
-          // These might be exposed one day, keep them safely tucked away as constants.
-          const SWIPE_MAX_DURATION = 250;
-          const SWIPE_MIN_DISTANCE = 30;
-          const DRAG_MIN_PERCENT = 50;
-
-          if (activeDragGesture) {
-            const { timestamp, position, start } = activeDragGesture;
-            const duration = Date.now() - timestamp;
-            const distance = position - start;
-
-            if (Math.abs(distance) >= SWIPE_MIN_DISTANCE && duration <= SWIPE_MAX_DURATION && duration > 0) {
-              if (distance > 0) prevSlide();
-              else nextSlide();
-            } else if (percentOffset > DRAG_MIN_PERCENT) prevSlide();
-            else if (percentOffset < -DRAG_MIN_PERCENT) nextSlide();
-            else {
-              // The gesture is a tap not drag, so manually issue a click event to trigger tap click gestures lost via preventDefault
-              touchEvent?.target?.dispatchEvent(
-                new Event('click', {
-                  bubbles: true
-                })
-              );
-            }
-          }
-          percentOffset = 0;
-          activeDragGesture = undefined;
-          touchEvent = null;
-        };
-</script>
-
-<!-- The move listeners go here, so things keep working if the touch strays out of the element. -->
-<svelte:document on:mousemove={onDragMove} on:mouseup={onDragStop} on:touchmove={onDragMove} on:touchend={onDragStop} />
-<div bind:this={carouselDiv} class="relative" on:mousedown={onDragStart} on:touchstart={onDragStart} role="button" aria-label="Draggable Carousel" tabindex="0">
-  <div style={`transform: translateX(${percentOffset}%)`} {...$$restProps} class={twMerge(divClass, activeDragGesture === undefined ? 'transition-transform' : '', $$props.class)} use:loop={duration}>
-    {#key images[index]}
-      <img alt="..." {...images[index]} transition:transition={{}} class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 object-cover" />
-    {/key}
-  </div>
-  <slot {index} {Controls} {Indicators} />
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let images: HTMLImgAttributes[];
-@prop export let index: number = 0;
-@prop export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
-@prop export let duration: number = 0;
--->

package/src/lib/carousels/ControlButton.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-
-  export let forward: boolean;
-  export let name: string;
-
-  let buttonCls: string;
-  $: buttonCls = twMerge('flex absolute top-0 z-30 justify-center items-center px-4 h-full group focus:outline-none text-white dark:text-gray-300', forward ? 'right-0' : 'left-0', $$props.class);
-</script>
-
-<button on:click type="button" class={buttonCls}>
-  <slot>
-    <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">
-      {#if forward}
-        <svg aria-hidden="true" class="w-5 h-5 sm:w-6 sm:h-6" 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>
-      {:else}
-        <svg aria-hidden="true" class="w-5 h-5 sm:w-6 sm:h-6" 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="sr-only">{name}</span>
-    </span>
-  </slot>
-</button>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let forward: boolean;
-@prop export let name: string;
--->

package/src/lib/carousels/Controls.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-  import { getContext } from 'svelte';
-  import type { Writable } from 'svelte/store';
-  import type { State } from './Carousel.svelte';
-  import ControlButton from './ControlButton.svelte';
-  import { twJoin } from 'tailwind-merge';
-
-  const state = getContext<Writable<State>>('state');
-
-  function changeSlide(forward: boolean) {
-    return function (ev: Event) {
-      if (ev.isTrusted) $state.index = forward ? $state.index + 1 : $state.index - 1;
-    };
-  }
-</script>
-
-<!-- Slider controls -->
-<slot {ControlButton} {changeSlide}>
-  <ControlButton name="Previous" forward={false} on:click={changeSlide(false)} class={twJoin($$props.class)} />
-  <ControlButton name="Next" forward={true} on:click={changeSlide(true)} class={twJoin($$props.class)} />
-</slot>

package/src/lib/carousels/Indicators.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-  import Indicator from '$lib/indicators/Indicator.svelte';
-  import { getContext } from 'svelte';
-  import type { Writable } from 'svelte/store';
-  import { twMerge } from 'tailwind-merge';
-  import type { State } from './Carousel.svelte';
-
-  export let activeClass = 'opacity-100';
-  export let inactiveClass = 'opacity-60';
-
-  const state = getContext<Writable<State>>('state');
-</script>
-
-<div class={twMerge('flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2', $$props.class)}>
-  {#each $state.images as _, idx}
-    {@const selected = $state.index === idx}
-    <button on:click={() => ($state.index = idx)}>
-      <slot {Indicator} {selected} index={idx}>
-        <Indicator class={twMerge('bg-gray-100 hover:bg-gray-300', selected ? activeClass : inactiveClass)} />
-      </slot>
-    </button>
-  {/each}
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let activeClass = 'opacity-100';
-@prop export let inactiveClass = 'opacity-60';
--->

package/src/lib/carousels/Thumbnail.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import type { HTMLImgAttributes } from 'svelte/elements';
-  import { twMerge } from 'tailwind-merge';
-
-  export let selected: boolean = false;
-
-  export let activeClass = 'opacity-100';
-  export let inactiveClass = 'opacity-60';
-</script>
-
-<img alt="..." {...$$restProps} class={twMerge(selected ? activeClass : inactiveClass, $$props.class)} />
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let selected: boolean = false;
-@prop export let activeClass = 'opacity-100';
-@prop export let inactiveClass = 'opacity-60';
--->

package/src/lib/carousels/Thumbnails.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-  import type { HTMLImgAttributes } from 'svelte/elements';
-  import { twMerge } from 'tailwind-merge';
-  import Thumbnail from './Thumbnail.svelte';
-
-  export let images: HTMLImgAttributes[] = [];
-  export let index: number = 0;
-
-  $: index = (index + images.length) % images.length;
-</script>
-
-<div class={twMerge('flex flex-row justify-center bg-gray-100 w-full', $$props.class)}>
-  {#each images as image, idx}
-    {@const selected = index === idx}
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <button on:click={() => (index = idx)} aria-label="Click to view image">
-      <slot {Thumbnail} {image} {selected}>
-        <Thumbnail {...image} {selected} />
-      </slot>
-    </button>
-  {/each}
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let images: HTMLImgAttributes[] = [];
-@prop export let index: number = 0;
--->

package/src/lib/charts/Chart.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-  import type { ApexOptions } from 'apexcharts';
-
-  export let options: ApexOptions;
-
-  function initChart(node: HTMLElement, options: ApexOptions) {
-    let chart: ApexCharts;
-
-    async function asyncInitChart() {
-      const ApexCharts = (await import('apexcharts')).default;
-      chart = new ApexCharts(node, options);
-      chart.render();
-    }
-
-    asyncInitChart();
-
-    return {
-      update(options: ApexOptions) {
-        chart && chart.updateOptions(options);
-      },
-      destroy() {
-        chart && chart.destroy();
-      }
-    };
-  }
-</script>
-
-<div use:initChart={options} class={$$props.class} />
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let options: ApexOptions;
--->

package/src/lib/darkmode/DarkMode.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-
-  export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
-  export let size: 'sm' | 'md' | 'lg' = 'md';
-
-  const sizes = {
-    sm: 'w-4 h-4',
-    md: 'w-5 h-5',
-    lg: 'w-6 h-6'
-  };
-
-  const toggleTheme = () => {
-    const isDark = window.document.documentElement.classList.toggle('dark');
-    localStorage.setItem('color-theme', isDark ? 'dark' : 'light');
-  };
-</script>
-
-<svelte:head>
-  <script>
-    if ('color-theme' in localStorage) {
-      // explicit preference - overrides author's choice
-      localStorage.getItem('color-theme') === 'dark' ? window.document.documentElement.classList.add('dark') : window.document.documentElement.classList.remove('dark');
-    } else {
-      // browser preference - does not overrides
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches) window.document.documentElement.classList.add('dark');
-    }
-  </script>
-</svelte:head>
-
-<button on:click={toggleTheme} aria-label="Dark mode" type="button" {...$$restProps} class={twMerge(btnClass, $$props.class)}>
-  <span class="hidden dark:block">
-    <slot name="lightIcon">
-      <svg class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1
-  0 100-2H3a1 1 0 000 2h1z"
-          fill-rule="evenodd"
-          clip-rule="evenodd" />
-      </svg>
-    </slot>
-  </span>
-  <span class="block dark:hidden">
-    <slot name="darkIcon">
-      <svg class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-      </svg>
-    </slot>
-  </span>
-</button>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
-@prop export let size: 'sm' | 'md' | 'lg' = 'md';
--->

package/src/lib/datepicker/Calender.svelte

@@ -1,3 +0,0 @@
-<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
-</svg>

package/src/lib/datepicker/Datepicker.svelte

@@ -1,66 +0,0 @@
-<script lang="ts">
-  import Calendar from './Calender.svelte';
-
-  export let range: boolean = false;
-  // autoHide not working
-  // export let autoHide: boolean = false;
-  export let datepickerButtons: boolean = false;
-  export let datepickerFormat: string = 'mm/dd/yyyy';
-  export let datepickerOrientation: string = 'bottom';
-  export let datepickerTitle: string = 'Flowbite datepicker';
-  export let attribute: string = '';
-  export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  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';
-
-  $: setAttribute = (node: HTMLElement, params: any) => {
-    node.setAttribute(params, '');
-  };
-</script>
-
-<svelte:head>
-  <link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.1/dist/flowbite.min.css" />
-  <script src="https://unpkg.com/flowbite@1.5.1/dist/datepicker.js"></script>
-</svelte:head>
-
-{#if range}
-  <div date-rangepicker class="flex items-center">
-    <div class="relative">
-      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-        <Calendar />
-      </div>
-      <input name="start" type="text" class={inputClass} placeholder="Select date start" />
-    </div>
-    <span class="mx-4 text-gray-500">to</span>
-    <div class="relative">
-      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-        <Calendar />
-      </div>
-      <input name="end" type="text" class={inputClass} placeholder="Select date end" />
-    </div>
-  </div>
-{:else}
-  <div class="relative">
-    <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-      <Calendar />
-    </div>
-    {#if datepickerButtons}
-      <input {...$$restProps} datepicker datepicker-buttons datepicker-format={datepickerFormat} datepicker-orientation={datepickerOrientation} datepicker-title={datepickerTitle} use:setAttribute={attribute} type="text" class={inputClass} placeholder="Select date" />
-    {:else}
-      <input {...$$restProps} datepicker datepicker-format={datepickerFormat} datepicker-orientation={datepickerOrientation} datepicker-title={datepickerTitle} use:setAttribute={attribute} type="text" class={inputClass} placeholder="Select date" />
-    {/if}
-    <slot />
-  </div>
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let range: boolean = false;
-@prop export let autoHide: boolean = false;
-@prop export let datepickerButtons: boolean = false;
-@prop export let datepickerFormat: string = 'mm/dd/yyyy';
-@prop export let datepickerOrientation: string = 'bottom';
-@prop export let datepickerTitle: string = 'Flowbite datepicker';
-@prop export let attribute: string = '';
-@prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  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';
--->

package/src/lib/device-mockup/Android.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-  export let androidTop: string;
-  export let androidLeftTop: string;
-  export let androidLeftMid: string;
-  export let androidLeftBot: string;
-  export let androidRight: string;
-</script>
-
-<div class={androidTop} />
-<div class={androidLeftTop} />
-<div class={androidLeftMid} />
-<div class={androidLeftBot} />
-<div class={androidRight} />
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let androidTop: string;
-@prop export let androidLeftTop: string;
-@prop export let androidLeftMid: string;
-@prop export let androidLeftBot: string;
-@prop export let androidRight: string;
--->

package/src/lib/device-mockup/DefaultMockup.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-  export let defaultTop: string;
-  export let defaultLeftTop: string;
-  export let defaultLeftBot: string;
-  export let defaultRight: string;
-</script>
-
-<div class={defaultTop} />
-<div class={defaultLeftTop} />
-<div class={defaultLeftBot} />
-<div class={defaultRight} />
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let defaultTop: string;
-@prop export let defaultLeftTop: string;
-@prop export let defaultLeftBot: string;
-@prop export let defaultRight: string;
--->