flowbite-svelte 0.27.15 → 0.27.16

package/src/lib/cards/Card.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-  import type { SizeType } from '$lib/types';
-  import classNames from 'classnames';
-  import Frame from '../utils/Frame.svelte';
-
-  export let href: string | 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';
-
-  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 innerPdding: string;
-  $: innerPdding = paddings[padding];
-
-  let cardClass: string;
-  $: cardClass = classNames(
-    '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 && innerPdding,
-    $$props.class
-  );
-
-  let imgClass: string;
-  $: imgClass = classNames(
-    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 {href} {...$$restProps} class={cardClass}>
-  {#if img}
-    <img class={imgClass} src={img} alt="" />
-    <div class={innerPdding}>
-      <slot />
-    </div>
-  {:else}
-    <slot />
-  {/if}
-</Frame>

package/src/lib/carousels/Caption.svelte

@@ -1,8 +0,0 @@
-<script lang="ts">
-  export let caption: string = '';
-  export let captionClass: string = '';
-</script>
-
-<div class={captionClass}>
-  <p id="caption" class="text-gray-900 dark:text-white">{caption}</p>
-</div>

package/src/lib/carousels/Carousel.svelte

@@ -1,147 +0,0 @@
-<script lang="ts">
-	import Slide from './Slide.svelte';
-	import Thumbnail from './Thumbnail.svelte';
-	import Caption from './Caption.svelte';
-	import Indicator from './Indicator.svelte';
-
-	export let showIndicators: boolean = true;
-	export let showCaptions: boolean = true;
-	export let showThumbs: boolean = true;
-	export let images: any[];
-	export let slideControls: boolean = true;
-	export let loop: boolean = false;
-	export let duration: number = 2000;
-
-	// Carousel
-	export let divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
-	export let indicatorDivClass: string =
-		'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
-	// Caption
-	export let captionClass: string =
-		'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
-	// Indicator
-	export let indicatorClass: string =
-		'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
-	// Slide
-	export let slideClass: string = '';
-
-	let imageShowingIndex: number = 0;
-	$: image = images[imageShowingIndex];
-
-	const nextSlide = () => {
-		if (imageShowingIndex === images.length - 1) {
-			imageShowingIndex = 0;
-		} else {
-			imageShowingIndex += 1;
-		}
-	};
-
-	const prevSlide = () => {
-		if (imageShowingIndex === 0) {
-			imageShowingIndex = images.length - 1;
-		} else {
-			imageShowingIndex -= 1;
-		}
-	};
-
-	const goToSlide = (number) => (imageShowingIndex = number);
-	let thumbWidth = 100 / images.length;
-
-	if (loop) {
-		setInterval(() => {
-			nextSlide();
-		}, duration);
-	}
-</script>
-
-<div id="default-carousel" class="relative">
-	<div class={divClass}>
-		<Slide image={image.imgurl} altTag={image.name} attr={image.attribution} {slideClass} />
-	</div>
-	{#if showIndicators}
-		<!-- Slider indicators -->
-		<div class={indicatorDivClass}>
-			{#each images as { id, imgurl, name, attribution }}
-				<Indicator
-					{name}
-					selected={imageShowingIndex === id}
-					on:click={() => goToSlide(id)}
-					{indicatorClass} />
-			{/each}
-		</div>
-	{/if}
-	{#if slideControls}
-		<!-- Slider controls -->
-		<button
-			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>
-			<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 $$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>
-		<button
-			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>
-			<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 $$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>
-	{/if}
-</div>
-
-{#if showCaptions}
-	<Caption caption={images[imageShowingIndex].name} {captionClass} />
-{/if}
-
-{#if showThumbs}
-	<div class="flex flex-row justify-center bg-gray-100">
-		{#each images as { id, imgurl, name, attribution }}
-			<Thumbnail
-				{thumbWidth}
-				thumbImg={imgurl}
-				altTag={name}
-				titleLink={attribution}
-				{id}
-				selected={imageShowingIndex === id}
-				on:click={() => goToSlide(id)} />
-		{/each}
-	</div>
-{/if}

package/src/lib/carousels/CarouselTransition.svelte

@@ -1,167 +0,0 @@
-<script lang="ts">
-  import { fade, blur, fly, slide } from 'svelte/transition';
-  import type { TransitionTypes, TransitionParamTypes } from '../types';
-  import Slide from './Slide.svelte';
-  import Thumbnail from './Thumbnail.svelte';
-  import Caption from './Caption.svelte';
-  import Indicator from './Indicator.svelte';
-
-  export let showIndicators: boolean = true;
-  export let showCaptions: boolean = true;
-  export let showThumbs: boolean = true;
-  export let images: any[];
-  export let slideControls: boolean = true;
-  export let transitionType: TransitionTypes = 'fade';
-  export let transitionParams: TransitionParamTypes = {};
-  export let loop: boolean = false;
-  export let duration: number = 2000;
-
-  // Carousel
-  export let divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
-  export let indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
-
-  // Caption
-  export let captionClass: string = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
-
-  // Indicator
-  export let indicatorClass: string = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
-
-  // have a custom transition function that returns the desired transition
-  const multiple = (node: HTMLElement, params: any) => {
-    switch (transitionType) {
-      case 'slide':
-        return slide(node, params);
-      case 'blur':
-        return blur(node, params);
-      case 'fly':
-        return fly(node, params);
-      default:
-        return fade(node, params);
-    }
-  };
-  // Slide
-  // export let slideClass: string = 'hidden';
-
-  let imageShowingIndex: number = 0;
-  // $: image = images[imageShowingIndex];
-
-  const nextSlide = () => {
-    if (imageShowingIndex === images.length - 1) {
-      imageShowingIndex = 0;
-    } else {
-      imageShowingIndex += 1;
-    }
-  };
-
-  const prevSlide = () => {
-    if (imageShowingIndex === 0) {
-      imageShowingIndex = images.length - 1;
-    } else {
-      imageShowingIndex -= 1;
-    }
-  };
-
-  const goToSlide = (number: number) => (imageShowingIndex = number);
-  let thumbWidth = 100 / images.length;
-
-  if (loop) {
-    setInterval(() => {
-      nextSlide();
-    }, duration);
-  }
-</script>
-
-<div id="default-carousel" class="relative">
-  <div class={divClass}>
-    {#each images as { id, imgurl, name, attribution }}
-      {#if imageShowingIndex === id}
-        <div transition:multiple={transitionParams}>
-          <Slide image={imgurl} altTag={name} attr={attribution} />
-        </div>
-      {/if}
-    {/each}
-  </div>
-
-  {#if showIndicators}
-    <!-- Slider indicators -->
-    <div class={indicatorDivClass}>
-      {#each images as { id, imgurl, name, attribution }}
-        <Indicator
-          {name}
-          selected={imageShowingIndex === id}
-          on:click={() => goToSlide(id)}
-          {indicatorClass} />
-      {/each}
-    </div>
-  {/if}
-  {#if slideControls}
-    <!-- Slider controls -->
-    <button
-      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>
-      <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 $$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>
-    <button
-      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>
-      <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 $$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>
-  {/if}
-</div>
-
-{#if showCaptions}
-  <Caption caption={images[imageShowingIndex].name} {captionClass} />
-{/if}
-
-{#if showThumbs}
-  <div class="flex flex-row justify-center bg-gray-100">
-    {#each images as { id, imgurl, name, attribution }}
-      <Thumbnail
-        {thumbWidth}
-        thumbImg={imgurl}
-        altTag={name}
-        titleLink={attribution}
-        {id}
-        selected={imageShowingIndex === id}
-        on:click={() => goToSlide(id)} />
-    {/each}
-  </div>
-{/if}

package/src/lib/carousels/Indicator.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-  export let name: string = '';
-  export let selected: boolean = false;
-  export let indicatorClass: string = '';
-</script>
-
-<button type="button" class={indicatorClass} class:active={selected} aria-label={name} on:click />
-
-<style>
-  .active {
-    opacity: 1;
-  }
-</style>

package/src/lib/carousels/Slide.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-  export let image: string = '';
-  export let altTag: string = '';
-  export let attr: string = '';
-  export let slideClass: string = '';
-</script>
-
-<div class={slideClass}>
-  <img src={image} alt={altTag} title={attr} />
-</div>

package/src/lib/carousels/Thumbnail.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-  export let thumbImg: string = '';
-  export let altTag: string = '';
-  export let titleLink: string = '';
-  export let id: number;
-  export let thumbWidth: number;
-  export let selected: boolean = false;
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<img
-  class="opacity-40"
-  class:active={selected}
-  id={id.toString()}
-  src={thumbImg}
-  alt={altTag}
-  title="Image from {titleLink}"
-  on:click
-  width="{thumbWidth}%" />
-
-<style>
-  .active {
-    opacity: 1;
-  }
-</style>

package/src/lib/darkmode/DarkMode.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-  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 fixed left-0 top-8 z-50';
-  const toggleTheme = () => {
-    const isDark = window.document.documentElement.classList.toggle('dark');
-    localStorage.setItem('color-theme', isDark ? 'dark' : 'light');
-  };
-</script>
-
-<svelte:head>
-  <script>
-    if (window) {
-      localStorage.getItem('color-theme') === 'dark' ||
-      (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
-        ? window.document.documentElement.classList.add('dark')
-        : window.document.documentElement.classList.remove('dark');
-    }
-  </script>
-</svelte:head>
-
-<button on:click={toggleTheme} aria-label="Dark mode" type="button" class={btnClass}>
-  <span class="hidden dark:block">
-    <svg class="w-5 h-5" 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>
-  </span>
-  <span class="dark:hidden">
-    <svg class="w-5 h-5" 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>
-  </span>
-</button>

package/src/lib/datepicker/Datepicker.svelte

@@ -1,74 +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, params) => {
-		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}

package/src/lib/drawer/Drawer.svelte

@@ -1,85 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-  import type { drawerTransitionParamTypes, drawerTransitionTypes } from '../types';
-  import { fly, slide, blur, fade } from 'svelte/transition';
-  import { clickOutside } from '../utils/clickOutside';
-  export let activateClickOutside: boolean = true;
-  export let hidden: boolean = true;
-  export let position: 'fixed' | 'absolute' = 'fixed';
-  export let leftOffset: string = 'inset-y-0 left-0';
-  export let rightOffset: string = 'inset-y-0 right-0';
-  export let topOffset: string = 'inset-x-0 top-0';
-  export let bottomOffset: string = 'inset-x-0 bottom-0';
-  export let width: string = 'w-80';
-  export let backdrop: boolean = true;
-  export let bgColor: string = 'bg-gray-900';
-  export let bgOpacity: string = 'bg-opacity-75';
-  export let placement: 'left' | 'right' | 'top' | 'bottom' = 'left';
-  export let id: string = 'drawer-example';
-  export let divClass: string = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
-
-  export let transitionParams: drawerTransitionParamTypes = {};
-  export let transitionType: drawerTransitionTypes = 'fly';
-
-  function multiple(node: HTMLElement, params: any) {
-    switch (transitionType) {
-      case 'slide':
-        return slide(node, params);
-      case 'blur':
-        return blur(node, params);
-      case 'fade':
-        return fade(node, params);
-      default:
-        return fly(node, params);
-    }
-  }
-
-  const placements = {
-    left: leftOffset,
-    right: rightOffset,
-    top: topOffset,
-    bottom: bottomOffset
-  };
-
-  const handleDrawer = () => {
-    hidden = !hidden;
-  };
-
-  let backdropDivClass = classNames(
-    'fixed top-0 left-0 z-50 w-full h-full',
-    backdrop && bgColor,
-    backdrop && bgOpacity
-  );
-</script>
-
-{#if !hidden}
-  {#if backdrop && activateClickOutside}
-    <div role="presentation" class={backdropDivClass} on:click={() => !hidden && handleDrawer()} />
-  {:else if backdrop && !activateClickOutside}
-    <div role="presentation" class={backdropDivClass} />
-  {/if}
-  {#if activateClickOutside}
-    <div
-      use:clickOutside={() => !hidden && handleDrawer()}
-      {id}
-      {...$$restProps}
-      class={classNames(divClass, width, position, placements[placement], $$props.class)}
-      transition:multiple={transitionParams}
-      tabindex="-1"
-      aria-controls={id}
-      aria-labelledby={id}>
-      <slot {hidden} />
-    </div>
-  {:else}
-    <div
-      {id}
-      {...$$restProps}
-      class={classNames(divClass, width, position, placements[placement], $$props.class)}
-      transition:multiple={transitionParams}
-      tabindex="-1"
-      aria-controls={id}
-      aria-labelledby={id}>
-      <slot {hidden} />
-    </div>
-  {/if}
-{/if}

package/src/lib/dropdowns/Dropdown.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-  import Popper from '$lib/utils/Popper.svelte';
-
-  export let open: boolean = false;
-  export let frameClass: string = '';
-
-  $: {
-    // set default values
-    $$restProps.arrow = $$restProps.arrow ?? false;
-    $$restProps.trigger = $$restProps.trigger ?? 'click';
-    $$restProps.placement = $$restProps.placement ?? 'bottom';
-    $$restProps.color = $$restProps.color ?? 'dropdown';
-    $$restProps.shadow = $$restProps.shadow ?? true;
-    $$restProps.rounded = $$restProps.rounded ?? true;
-  }
-
-  let popoverClass: string;
-  $: popoverClass = classNames('divide-y divide-gray-100 dark:divide-gray-600', frameClass);
-</script>
-
-<Popper activeContent {...$$restProps} class={popoverClass} on:show bind:open>
-  {#if $$slots.header}
-    <div class="py-1 overflow-hidden rounded-t">
-      <slot name="header" />
-    </div>
-  {/if}
-  <ul class={$$props.class ?? 'py-1 w-44'}>
-    <slot />
-  </ul>
-  {#if $$slots.footer}
-    <div class="py-1  overflow-hidden rounded-b">
-      <slot name="footer" />
-    </div>
-  {/if}
-</Popper>

package/src/lib/dropdowns/DropdownDivider.svelte

@@ -1,6 +0,0 @@
-<script lang="ts">
-	import classNames from 'classnames';
-	export let divClass: string = 'my-1 h-px bg-gray-100 dark:bg-gray-600';
-</script>
-
-<div {...$$restProps} class={classNames(divClass, $$props.class)} />