flowbite-svelte 0.44.10 → 0.44.12

package/src/lib/typography/Li.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-
-  export let icon: boolean = false;
-  export let liClass: string = '';
-  let classLi: string = twMerge(liClass, icon && 'flex items-center', $$props.class);
-</script>
-
-<li {...$$restProps} class={classLi}>
-  <slot />
-</li>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let icon: boolean = false;
-@prop export let liClass: string = '';
--->

package/src/lib/typography/List.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-
-  export let tag: 'ul' | 'ol' | 'dl' = 'ul';
-  export let list: 'disc' | 'none' | 'decimal' | undefined = undefined;
-  export let position: 'inside' | 'outside' = 'inside';
-
-  let lists = {
-    disc: 'list-disc',
-    none: 'list-none',
-    decimal: 'list-decimal'
-  };
-
-  let positions = {
-    inside: 'list-inside',
-    outside: 'list-outside'
-  };
-
-  let classList = twMerge(lists[list ?? (tag === 'ul' ? 'disc' : 'ol' ? 'decimal' : 'none')], positions[position], $$props.class);
-</script>
-
-<svelte:element this={tag} {...$$restProps} class={classList}>
-  <slot />
-</svelte:element>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let tag: 'ul' | 'ol' | 'dl' = 'ul';
-@prop export let list: 'disc' | 'none' | 'decimal' | undefined = undefined;
-@prop export let position: 'inside' | 'outside' = 'inside';
--->

package/src/lib/typography/Mark.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-
-  export let color: string = 'text-white dark:bg-blue-500';
-  export let bgColor: string = 'bg-blue-600';
-  export let markClass: string = 'px-2 rounded';
-</script>
-
-<mark {...$$restProps} class={twMerge(markClass, bgColor, color, $$props.class)}>
-  <slot />
-</mark>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let color: string = 'text-white dark:bg-blue-500';
-@prop export let bgColor: string = 'bg-blue-600';
-@prop export let markClass: string = 'px-2 rounded';
--->

package/src/lib/typography/P.svelte

@@ -1,102 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import type { PsizeType, PweightType } from '../types';
-
-  export let color: string = 'text-gray-900 dark:text-white';
-  export let height: 'normal' | 'relaxed' | 'loose' = 'normal';
-  export let align: 'left' | 'center' | 'right' = 'left';
-  export let justify: boolean = false;
-  export let italic: boolean = false;
-  export let firstupper: boolean = false;
-  export let upperClass: string = 'first-line:uppercase first-line:tracking-widest first-letter:text-7xl first-letter:font-bold first-letter:text-gray-900 dark:first-letter:text-gray-100 first-letter:mr-3 first-letter:float-left';
-  export let opacity: number | undefined = undefined;
-  export let whitespace: 'normal' | 'nowrap' | 'pre' | 'preline' | 'prewrap' = 'normal';
-  export let size: PsizeType = 'base';
-  export let space: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | undefined = undefined;
-  export let weight: PweightType = 'normal';
-
-  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'
-  };
-  const weights = {
-    thin: 'font-thin',
-    extralight: 'font-extralight',
-    light: 'font-light',
-    normal: 'font-normal',
-    medium: 'font-medium',
-    semibold: 'font-semibold',
-    bold: 'font-bold',
-    extrabold: 'font-extrabold',
-    black: 'font-black'
-  };
-  const spaces = {
-    tighter: 'tracking-tighter',
-    tight: 'tracking-tight',
-    normal: 'tracking-normal',
-    wide: 'tracking-wide',
-    wider: 'tracking-wider',
-    widest: 'tracking-widest'
-  };
-
-  const heights = {
-    normal: 'leading-normal',
-    relaxed: 'leading-relaxed',
-    loose: 'leading-loose'
-  };
-
-  const aligns = {
-    left: 'text-left',
-    center: 'text-center',
-    right: 'text-right'
-  };
-
-  const whitespaces = {
-    normal: 'whitespace-normal',
-    nowrap: 'whitespace-nowrap',
-    pre: 'whitespace-pre',
-    preline: 'whitespace-pre-line',
-    prewrap: 'whitespace-pre-wrap'
-  };
-
-  let colorAndopacity = color
-    .split(' ')
-    .map((element) => element.trim())
-    .map((element) => element + '/' + String(opacity))
-    .join(' ');
-
-  let classP = twMerge(size && sizes[size], (opacity && colorAndopacity) || (color && color), height && heights[height], weight && weights[weight], space && spaces[space], align && aligns[align], justify && 'text-justify', italic && 'italic', firstupper && upperClass, whitespace && whitespaces[whitespace], $$props.class);
-</script>
-
-<p {...$$restProps} class={classP}>
-  <slot />
-</p>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let color: string = 'text-gray-900 dark:text-white';
-@prop export let height: 'normal' | 'relaxed' | 'loose' = 'normal';
-@prop export let align: 'left' | 'center' | 'right' = 'left';
-@prop export let justify: boolean = false;
-@prop export let italic: boolean = false;
-@prop export let firstupper: boolean = false;
-@prop export let upperClass: string = 'first-line:uppercase first-line:tracking-widest first-letter:text-7xl first-letter:font-bold first-letter:text-gray-900 dark:first-letter:text-gray-100 first-letter:mr-3 first-letter:float-left';
-@prop export let opacity: number | undefined = undefined;
-@prop export let whitespace: 'normal' | 'nowrap' | 'pre' | 'preline' | 'prewrap' = 'normal';
-@prop export let size: PsizeType = 'base';
-@prop export let space: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | undefined = undefined;
-@prop export let weight: PweightType = 'normal';
--->

package/src/lib/typography/Secondary.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-
-  export let color: string = 'text-gray-500 dark:text-gray-400';
-  export let secondaryClass: string = 'font-semibold';
-</script>
-
-<small {...$$restProps} class={twMerge(color, secondaryClass, $$props.class)}>
-  <slot />
-</small>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let color: string = 'text-gray-500 dark:text-gray-400';
-@prop export let secondaryClass: string = 'font-semibold';
--->

package/src/lib/typography/Span.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-
-  export let italic: boolean = false;
-  export let underline: boolean = false;
-  export let linethrough: boolean = false;
-  export let uppercase: boolean = false;
-  export let gradient: boolean = false;
-  export let highlight: boolean = false;
-  export let highlightClass: string = 'text-blue-600 dark:text-blue-500';
-  export let decorationClass: string = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
-  export let gradientClass: string = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
-
-  let underlineClass = twMerge('underline', decorationClass);
-  let classSpan: string = twMerge(italic && 'italic', underline && underlineClass, linethrough && 'line-through', uppercase && 'uppercase', gradient ? gradientClass : 'font-semibold text-gray-900 dark:text-white', highlight && highlightClass, $$props.class);
-</script>
-
-<span {...$$restProps} class={classSpan}>
-  <slot />
-</span>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let italic: boolean = false;
-@prop export let underline: boolean = false;
-@prop export let linethrough: boolean = false;
-@prop export let uppercase: boolean = false;
-@prop export let gradient: boolean = false;
-@prop export let highlight: boolean = false;
-@prop export let highlightClass: string = 'text-blue-600 dark:text-blue-500';
-@prop export let decorationClass: string = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
-@prop export let gradientClass: string = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
--->

package/src/lib/utils/CloseButton.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import ToolbarButton from '$lib/toolbar/ToolbarButton.svelte';
-
-  export let name: string = 'Close';
-</script>
-
-<ToolbarButton on:click {name} {...$$restProps} class={twMerge('ml-auto', $$props.class)} let:svgSize>
-  <svg class={svgSize} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
-  </svg>
-</ToolbarButton>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let name: string = 'Close';
--->

package/src/lib/utils/Frame.svelte

@@ -1,142 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import { setContext } from 'svelte';
-
-  import type { Action } from 'svelte/action';
-  import type { TransitionConfig } from 'svelte/transition';
-  import type { HTMLAnchorAttributes } from 'svelte/elements';
-
-  const null_transition = () => ({ duration: 0 });
-  const noop = () => {};
-
-  type TransitionFunc = (node: HTMLElement, params: any) => TransitionConfig;
-  type FrameColor = keyof typeof bgColors;
-
-  interface $$Props extends HTMLAnchorAttributes {
-    tag?: string;
-    color?: FrameColor;
-    rounded?: boolean;
-    border?: boolean;
-    shadow?: boolean;
-    transition?: TransitionFunc;
-    params?: object;
-    node?: HTMLElement | undefined;
-    use?: Action<HTMLElement, any>;
-    options?: object;
-    class?: string;
-    role?: string;
-  }
-
-  setContext('background', true);
-
-  export let tag: string = $$restProps.href ? 'a' : 'div';
-  export let color: FrameColor = 'default';
-  export let rounded: boolean = false;
-  export let border: boolean = false;
-  export let shadow: boolean = false;
-
-  // Export a prop through which you can set a desired svelte transition
-  export let transition: TransitionFunc = null_transition;
-  // Pass in extra transition params
-  export let params: object = {};
-
-  // For components development
-  export let node: HTMLElement | undefined = undefined;
-  // Action function and its params
-  export let use: Action<HTMLElement, any> = noop;
-  export let options = {};
-
-  export let role: string | undefined = undefined;
-
-  $: color = color ?? 'default'; // for cases when undefined
-  $: setContext('color', color);
-
-  // your script goes here
-  const bgColors = {
-    gray: 'bg-gray-50 dark:bg-gray-800',
-    red: 'bg-red-50 dark:bg-gray-800',
-    yellow: 'bg-yellow-50 dark:bg-gray-800 ',
-    green: 'bg-green-50 dark:bg-gray-800 ',
-    indigo: 'bg-indigo-50 dark:bg-gray-800 ',
-    purple: 'bg-purple-50 dark:bg-gray-800 ',
-    pink: 'bg-pink-50 dark:bg-gray-800 ',
-    blue: 'bg-blue-50 dark:bg-gray-800 ',
-    light: 'bg-gray-50 dark:bg-gray-700',
-    dark: 'bg-gray-50 dark:bg-gray-800',
-    default: 'bg-white dark:bg-gray-800',
-    dropdown: 'bg-white dark:bg-gray-700',
-    navbar: 'bg-white dark:bg-gray-900',
-    navbarUl: 'bg-gray-50 dark:bg-gray-800',
-    form: 'bg-gray-50 dark:bg-gray-700',
-    primary: 'bg-primary-50 dark:bg-gray-800 ',
-    orange: 'bg-orange-50 dark:bg-orange-800',
-    none: ''
-  };
-
-  const textColors = {
-    gray: 'text-gray-800 dark:text-gray-300',
-    red: 'text-red-800 dark:text-red-400',
-    yellow: 'text-yellow-800 dark:text-yellow-300',
-    green: 'text-green-800 dark:text-green-400',
-    indigo: 'text-indigo-800 dark:text-indigo-400',
-    purple: 'text-purple-800 dark:text-purple-400',
-    pink: 'text-pink-800 dark:text-pink-400',
-    blue: 'text-blue-800 dark:text-blue-400',
-    light: 'text-gray-700 dark:text-gray-300',
-    dark: 'text-gray-700 dark:text-gray-300',
-    default: 'text-gray-500 dark:text-gray-400',
-    dropdown: 'text-gray-700 dark:text-gray-200',
-    navbar: 'text-gray-700 dark:text-gray-200',
-    navbarUl: 'text-gray-700 dark:text-gray-400',
-    form: 'text-gray-900 dark:text-white',
-    primary: 'text-primary-800 dark:text-primary-400',
-    orange: 'text-orange-800 dark:text-orange-400',
-    none: ''
-  };
-
-  const borderColors = {
-    gray: 'border-gray-300 dark:border-gray-800 divide-gray-300 dark:divide-gray-800',
-    red: 'border-red-300 dark:border-red-800 divide-red-300 dark:divide-red-800',
-    yellow: 'border-yellow-300 dark:border-yellow-800 divide-yellow-300 dark:divide-yellow-800',
-    green: 'border-green-300 dark:border-green-800 divide-green-300 dark:divide-green-800',
-    indigo: 'border-indigo-300 dark:border-indigo-800 divide-indigo-300 dark:divide-indigo-800',
-    purple: 'border-purple-300 dark:border-purple-800 divide-purple-300 dark:divide-purple-800',
-    pink: 'border-pink-300 dark:border-pink-800 divide-pink-300 dark:divide-pink-800',
-    blue: 'border-blue-300 dark:border-blue-800 divide-blue-300 dark:divide-blue-800',
-    light: 'border-gray-500 divide-gray-500',
-    dark: 'border-gray-500 divide-gray-500',
-    default: 'border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700',
-    dropdown: 'border-gray-100 dark:border-gray-600 divide-gray-100 dark:divide-gray-600',
-    navbar: 'border-gray-100 dark:border-gray-700 divide-gray-100 dark:divide-gray-700',
-    navbarUl: 'border-gray-100 dark:border-gray-700 divide-gray-100 dark:divide-gray-700',
-    form: 'border-gray-300 dark:border-gray-700 divide-gray-300 dark:divide-gray-700',
-    primary: 'border-primary-500 dark:border-primary-200  divide-primary-500 dark:divide-primary-200 ',
-    orange: 'border-orange-300 dark:border-orange-800 divide-orange-300 dark:divide-orange-800',
-    none: ''
-  };
-
-  let divClass: string;
-
-  $: divClass = twMerge(bgColors[color], textColors[color], rounded && 'rounded-lg', border && 'border', borderColors[color], shadow && 'shadow-md', $$props.class);
-</script>
-
-<svelte:element this={tag} use:use={options} bind:this={node} transition:transition={params} {...$$restProps} class={divClass} on:click on:mouseenter on:mouseleave on:focusin on:focusout {role}>
-  <slot />
-</svelte:element>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let tag: string = $$restProps.href ? 'a' : 'div';
-@prop export let color: FrameColor = 'default';
-@prop export let rounded: boolean = false;
-@prop export let border: boolean = false;
-@prop export let shadow: boolean = false;
-@prop export let transition: TransitionFunc = null_transition;
-@prop export let params: object = {};
-@prop export let node: HTMLElement | undefined = undefined;
-@prop export let use: Action<HTMLElement, any> = noop;
-@prop export let options = {};
-@prop export let role: string | undefined = undefined;
--->

package/src/lib/utils/Popper.svelte

@@ -1,206 +0,0 @@
-<script lang="ts">
-  import type { ComputePositionReturn, Middleware, Placement, Side } from '@floating-ui/dom';
-  import * as dom from '@floating-ui/dom';
-  import { onMount, type ComponentProps } from 'svelte';
-  import { twJoin } from 'tailwind-merge';
-  import Frame from './Frame.svelte';
-  import createEventDispatcher from './createEventDispatcher';
-
-  // propagate props type from underlying Frame
-  interface $$Props extends ComponentProps<Frame> {
-    activeContent?: boolean;
-    arrow?: boolean;
-    offset?: number;
-    placement?: Placement;
-    trigger?: 'hover' | 'click';
-    triggeredBy?: string;
-    reference?: string;
-    strategy?: 'absolute' | 'fixed';
-    open?: boolean;
-    yOnly?: boolean;
-  }
-
-  export let activeContent: boolean = false;
-  export let arrow: boolean = true;
-  export let offset: number = 8;
-  export let placement: Placement = 'top';
-  export let trigger: 'hover' | 'click' = 'hover';
-  export let triggeredBy: string | undefined = undefined;
-  export let reference: string | undefined = undefined;
-  export let strategy: 'absolute' | 'fixed' = 'absolute';
-  export let open: boolean = false;
-  export let yOnly: boolean = false;
-
-  const dispatch = createEventDispatcher();
-
-  let clickable: boolean;
-  $: clickable = trigger === 'click';
-
-  $: dispatch('show', referenceEl, open);
-  $: placement && (referenceEl = referenceEl);
-
-  let referenceEl: Element;
-  let floatingEl: HTMLElement;
-  let arrowEl: HTMLElement | null;
-  let contentEl: HTMLElement;
-  let triggerEls: HTMLElement[] = [];
-
-  let _blocked: boolean = false; // management of the race condition between focusin and click events
-  const block = () => ((_blocked = true), setTimeout(() => (_blocked = false), 250));
-
-  const showHandler = (ev: Event) => {
-    if (referenceEl === undefined) console.error('trigger undefined');
-    if (!reference && triggerEls.includes(ev.target as HTMLElement) && referenceEl !== ev.target) {
-      referenceEl = ev.target as HTMLElement;
-      block();
-    }
-    if (clickable && ev.type === 'focusin' && !open) block();
-    open = clickable && ev.type === 'click' && !_blocked ? !open : true;
-  };
-
-  const hasHover = (el: Element) => el.matches(':hover');
-  const hasFocus = (el: Element) => el.contains(document.activeElement);
-  const px = (n: number | undefined) => (n != null ? `${n}px` : '');
-
-  const hideHandler = (ev: Event) => {
-    if (activeContent) {
-      setTimeout(() => {
-        const elements = [referenceEl, floatingEl, ...triggerEls].filter(Boolean);
-        if (ev.type === 'mouseleave' && elements.some(hasHover)) return;
-        if (ev.type === 'focusout' && elements.some(hasFocus)) return;
-        open = false;
-      }, 100);
-    } else open = false;
-  };
-
-  let arrowSide: Side;
-  const oppositeSideMap: Record<Side, Side> = {
-    left: 'right',
-    right: 'left',
-    bottom: 'top',
-    top: 'bottom'
-  };
-
-  let middleware: (Middleware | null)[];
-  $: middleware = [dom.flip(), dom.shift(), dom.offset(+offset), arrowEl && dom.arrow({ element: arrowEl, padding: 10 })];
-
-  function updatePosition() {
-    dom.computePosition(referenceEl, floatingEl, { placement, strategy, middleware }).then(({ x, y, middlewareData, placement, strategy }: ComputePositionReturn) => {
-      floatingEl.style.position = strategy;
-      floatingEl.style.left = yOnly ? '0' : px(x);
-      floatingEl.style.top = px(y);
-
-      if (middlewareData.arrow && arrowEl instanceof HTMLDivElement) {
-        arrowEl.style.left = px(middlewareData.arrow.x);
-        arrowEl.style.top = px(middlewareData.arrow.y);
-
-        arrowSide = oppositeSideMap[placement.split('-')[0] as Side];
-        arrowEl.style[arrowSide] = px(-arrowEl.offsetWidth / 2 - ($$props.border ? 1 : 0));
-      }
-    });
-  }
-
-  function init(node: HTMLElement, _referenceEl: HTMLElement) {
-    floatingEl = node;
-    let cleanup = dom.autoUpdate(_referenceEl, floatingEl, updatePosition);
-
-    return {
-      update(_referenceEl: HTMLElement) {
-        cleanup();
-        cleanup = dom.autoUpdate(_referenceEl, floatingEl, updatePosition);
-      },
-      destroy() {
-        cleanup();
-      }
-    };
-  }
-
-  onMount(() => {
-    const events: [string, any, boolean][] = [
-      ['focusin', showHandler, true],
-      ['focusout', hideHandler, true],
-      ['click', showHandler, clickable],
-      ['mouseenter', showHandler, !clickable],
-      ['mouseleave', hideHandler, !clickable]
-    ];
-
-    if (triggeredBy) triggerEls = [...document.querySelectorAll<HTMLElement>(triggeredBy)];
-    else triggerEls = contentEl.previousElementSibling ? [contentEl.previousElementSibling as HTMLElement] : [];
-
-    if (!triggerEls.length) {
-      console.error('No triggers found.');
-    }
-
-    triggerEls.forEach((element: HTMLElement) => {
-      if (element.tabIndex < 0) element.tabIndex = 0; // trigger must be focusable
-      for (const [name, handler, cond] of events) if (cond) element.addEventListener(name, handler);
-    });
-
-    if (reference) {
-      referenceEl = document.querySelector(reference) ?? document.body;
-      if (referenceEl === document.body) {
-        console.error(`Popup reference not found: '${reference}'`);
-      } else {
-        referenceEl.addEventListener('focusout', hideHandler);
-        if (!clickable) referenceEl.addEventListener('mouseleave', hideHandler);
-      }
-    } else {
-      referenceEl = triggerEls[0];
-    }
-
-    return () => {
-      triggerEls.forEach((element: HTMLElement) => {
-        if (element) {
-          for (const [name, handler] of events) element.removeEventListener(name, handler);
-        }
-      });
-      if (referenceEl) {
-        referenceEl.addEventListener('focusout', hideHandler);
-        referenceEl.addEventListener('mouseleave', hideHandler);
-      }
-    };
-  });
-
-  function optional(pred: boolean, func: (ev: Event) => void) {
-    return pred ? func : () => undefined;
-  }
-
-  let arrowClass: string;
-  $: arrowClass = twJoin('absolute pointer-events-none block w-[10px] h-[10px] rotate-45 bg-inherit border-inherit', $$props.border && arrowSide === 'bottom' && 'border-b border-r', $$props.border && arrowSide === 'top' && 'border-t border-l ', $$props.border && arrowSide === 'right' && 'border-t border-r ', $$props.border && arrowSide === 'left' && 'border-b border-l ');
-
-  function initArrow(node: HTMLElement) {
-    arrowEl = node;
-    return {
-      destroy() {
-        arrowEl = null;
-      }
-    };
-  }
-</script>
-
-{#if !referenceEl}
-  <div bind:this={contentEl} />
-{/if}
-
-{#if open && referenceEl}
-  <Frame use={init} options={referenceEl} role="tooltip" tabindex={activeContent ? -1 : undefined} on:focusin={optional(activeContent, showHandler)} on:focusout={optional(activeContent, hideHandler)} on:mouseenter={optional(activeContent && !clickable, showHandler)} on:mouseleave={optional(activeContent && !clickable, hideHandler)} {...$$restProps}>
-    <slot />
-    {#if arrow}<div use:initArrow class={arrowClass} />{/if}
-  </Frame>
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let activeContent: boolean = false;
-@prop export let arrow: boolean = true;
-@prop export let offset: number = 8;
-@prop export let placement: Placement = 'top';
-@prop export let trigger: 'hover' | 'click' = 'hover';
-@prop export let triggeredBy: string | undefined = undefined;
-@prop export let reference: string | undefined = undefined;
-@prop export let strategy: 'absolute' | 'fixed' = 'absolute';
-@prop export let open: boolean = false;
-@prop export let yOnly: boolean = false;
--->

package/src/lib/utils/Wrapper.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-  import type { Action } from 'svelte/action';
-
-  export let tag: string = 'div';
-  export let show: boolean;
-  export let use: Action<HTMLElement, any> = () => {};
-</script>
-
-{#if show}
-  <svelte:element this={tag} use:use {...$$restProps}><slot /></svelte:element>
-{:else}
-  <slot />
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let tag: string = 'div';
-@prop export let show: boolean;
-@prop export let use: Action<HTMLElement, any> = () => {};
--->