flowbite-svelte 0.46.1 → 0.46.2

package/dist/typography/P.svelte

@@ -1,73 +1,69 @@
-<script>import { twMerge } from 'tailwind-merge';
-export let color = 'text-gray-900 dark:text-white';
-export let height = 'normal';
-export let align = 'left';
+<script>import { twMerge } from "tailwind-merge";
+export let color = "text-gray-900 dark:text-white";
+export let height = "normal";
+export let align = "left";
 export let justify = false;
 export let italic = false;
 export let firstupper = false;
-export let upperClass = '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:me-3 first-letter:float-left';
-export let opacity = undefined;
-export let whitespace = 'normal';
-export let size = 'base';
-export let space = undefined;
-export let weight = 'normal';
+export let upperClass = "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:me-3 first-letter:float-left";
+export let opacity = void 0;
+export let whitespace = "normal";
+export let size = "base";
+export let space = void 0;
+export let weight = "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'
+  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'
+  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'
+  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'
+  normal: "leading-normal",
+  relaxed: "leading-relaxed",
+  loose: "leading-loose"
 };
 const aligns = {
-    left: 'text-left',
-    center: 'text-center',
-    right: 'text-right'
+  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'
+  normal: "whitespace-normal",
+  nowrap: "whitespace-nowrap",
+  pre: "whitespace-pre",
+  preline: "whitespace-pre-line",
+  prewrap: "whitespace-pre-wrap"
 };
-$: colorAndopacity = color
-    .split(' ')
-    .map((element) => element.trim())
-    .map((element) => element + '/' + String(opacity))
-    .join(' ');
-$: 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);
+$: colorAndopacity = color.split(" ").map((element) => element.trim()).map((element) => element + "/" + String(opacity)).join(" ");
+$: 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}>

package/dist/typography/P.svelte.d.ts

@@ -45,4 +45,3 @@ export type PSlots = typeof __propDef.slots;
 export default class P extends SvelteComponentTyped<PProps, PEvents, PSlots> {
 }
 export {};
-//# sourceMappingURL=P.svelte.d.ts.map

package/dist/typography/Secondary.svelte

@@ -1,6 +1,6 @@
-<script>import { twMerge } from 'tailwind-merge';
-export let color = 'text-gray-500 dark:text-gray-400';
-export let secondaryClass = 'font-semibold';
+<script>import { twMerge } from "tailwind-merge";
+export let color = "text-gray-500 dark:text-gray-400";
+export let secondaryClass = "font-semibold";
 </script>
 
 <small {...$$restProps} class={twMerge(color, secondaryClass, $$props.class)}>

package/dist/typography/Secondary.svelte.d.ts

@@ -24,4 +24,3 @@ export type SecondarySlots = typeof __propDef.slots;
 export default class Secondary extends SvelteComponentTyped<SecondaryProps, SecondaryEvents, SecondarySlots> {
 }
 export {};
-//# sourceMappingURL=Secondary.svelte.d.ts.map

package/dist/typography/Span.svelte

@@ -1,15 +1,15 @@
-<script>import { twMerge } from 'tailwind-merge';
+<script>import { twMerge } from "tailwind-merge";
 export let italic = false;
 export let underline = false;
 export let linethrough = false;
 export let uppercase = false;
 export let gradient = false;
 export let highlight = false;
-export let highlightClass = 'text-blue-600 dark:text-blue-500';
-export let decorationClass = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
-export let gradientClass = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
-let underlineClass = twMerge('underline', decorationClass);
-let classSpan = twMerge(italic && 'italic', underline && underlineClass, linethrough && 'line-through', uppercase && 'uppercase', gradient ? gradientClass : 'font-semibold text-gray-900 dark:text-white', highlight && highlightClass, $$props.class);
+export let highlightClass = "text-blue-600 dark:text-blue-500";
+export let decorationClass = "decoration-2 decoration-blue-400 dark:decoration-blue-600";
+export let gradientClass = "text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400";
+let underlineClass = twMerge("underline", decorationClass);
+let classSpan = 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}>

package/dist/typography/Span.svelte.d.ts

@@ -38,4 +38,3 @@ export type SpanSlots = typeof __propDef.slots;
 export default class Span extends SvelteComponentTyped<SpanProps, SpanEvents, SpanSlots> {
 }
 export {};
-//# sourceMappingURL=Span.svelte.d.ts.map

package/dist/utils/CloseButton.svelte

@@ -1,6 +1,6 @@
-<script>import { twMerge } from 'tailwind-merge';
-import ToolbarButton from '../toolbar/ToolbarButton.svelte';
-export let name = 'Close';
+<script>import { twMerge } from "tailwind-merge";
+import ToolbarButton from "../toolbar/ToolbarButton.svelte";
+export let name = "Close";
 </script>
 
 <ToolbarButton on:click {name} {...$$restProps} class={twMerge('ms-auto', $$props.class)} let:svgSize>

package/dist/utils/CloseButton.svelte.d.ts

@@ -22,4 +22,3 @@ export type CloseButtonSlots = typeof __propDef.slots;
 export default class CloseButton extends SvelteComponentTyped<CloseButtonProps, CloseButtonEvents, CloseButtonSlots> {
 }
 export {};
-//# sourceMappingURL=CloseButton.svelte.d.ts.map

package/dist/utils/Frame.svelte

@@ -1,92 +1,88 @@
-<script>import { createEventDispatcher, setContext } from 'svelte';
-import { twMerge } from 'tailwind-merge';
-import {} from 'svelte/transition';
-const noop = () => { };
-setContext('background', true);
-export let tag = $$restProps.href ? 'a' : 'div';
-export let color = 'default';
+<script>import { createEventDispatcher, setContext } from "svelte";
+import { twMerge } from "tailwind-merge";
+import {} from "svelte/transition";
+const noop = () => {
+};
+setContext("background", true);
+export let tag = $$restProps.href ? "a" : "div";
+export let color = "default";
 export let rounded = false;
 export let border = false;
 export let shadow = false;
-// For components development
-export let node = undefined;
-// Action function and its params
+export let node = void 0;
 export let use = noop;
 export let options = {};
-export let role = undefined;
-// Export a prop through which you can set a desired svelte transition
-export let transition = undefined;
-// Pass in extra transition params
+export let role = void 0;
+export let transition = void 0;
 export let params = {};
 export let open = true;
 const dispatch = createEventDispatcher();
-$: dispatch(open ? 'open' : 'close');
-$: dispatch('show', open);
-$: color = color ?? 'default'; // for cases when undefined
-$: setContext('color', color);
-// your script goes here
+$: dispatch(open ? "open" : "close");
+$: dispatch("show", open);
+$: color = color ?? "default";
+$: setContext("color", color);
 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: ''
+  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: ''
+  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: ''
+  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;
-$: divClass = twMerge(bgColors[color], textColors[color], rounded && 'rounded-lg', border && 'border', borderColors[color], shadow && 'shadow-md', $$props.class);
+$: divClass = twMerge(bgColors[color], textColors[color], rounded && "rounded-lg", border && "border", borderColors[color], shadow && "shadow-md", $$props.class);
 </script>
 
 {#if transition && open}

package/dist/utils/Frame.svelte.d.ts

@@ -54,4 +54,3 @@ export type FrameSlots = typeof __propDef.slots;
 export default class Frame extends SvelteComponentTyped<FrameProps, FrameEvents, FrameSlots> {
 }
 export {};
-//# sourceMappingURL=Frame.svelte.d.ts.map

package/dist/utils/Popper.svelte

@@ -1,157 +1,140 @@
-<script>import * as dom from '@floating-ui/dom';
-import { onMount, createEventDispatcher } from 'svelte';
-import { twJoin } from 'tailwind-merge';
-import Frame from './Frame.svelte';
+<script>import * as dom from "@floating-ui/dom";
+import { onMount, createEventDispatcher } from "svelte";
+import { twJoin } from "tailwind-merge";
+import Frame from "./Frame.svelte";
 export let activeContent = false;
 export let arrow = true;
 export let offset = 8;
-export let placement = 'top';
-export let trigger = 'hover';
-export let triggeredBy = undefined;
-export let reference = undefined;
-export let strategy = 'absolute';
+export let placement = "top";
+export let trigger = "hover";
+export let triggeredBy = void 0;
+export let reference = void 0;
+export let strategy = "absolute";
 export let open = false;
 export let yOnly = false;
-// extra floating UI middleware list
 export let middlewares = [dom.flip(), dom.shift()];
 const dispatch = createEventDispatcher();
 let clickable;
-$: clickable = trigger === 'click';
+$: clickable = trigger === "click";
 let hoverable;
-$: hoverable = trigger === 'hover';
-$: dispatch('show', open);
+$: hoverable = trigger === "hover";
+$: dispatch("show", open);
 $: placement && (referenceEl = referenceEl);
 let referenceEl;
 let floatingEl;
 let arrowEl;
 let contentEl;
 let triggerEls = [];
-let _blocked = false; // management of the race condition between focusin and click events
-const block = () => ((_blocked = true), setTimeout(() => (_blocked = false), 250));
+let _blocked = false;
+const block = () => (_blocked = true, setTimeout(() => _blocked = false, 250));
 const showHandler = (ev) => {
-    if (referenceEl === undefined)
-        console.error('trigger undefined');
-    if (!reference && triggerEls.includes(ev.target) && referenceEl !== ev.target) {
-        referenceEl = ev.target;
-        block();
-    }
-    if (clickable && ev.type === 'focusin' && !open)
-        block();
-    open = clickable && ev.type === 'click' && !_blocked ? !open : true;
+  if (referenceEl === void 0) console.error("trigger undefined");
+  if (!reference && triggerEls.includes(ev.target) && referenceEl !== ev.target) {
+    referenceEl = ev.target;
+    block();
+  }
+  if (clickable && ev.type === "focusin" && !open) block();
+  open = clickable && ev.type === "click" && !_blocked ? !open : true;
 };
-const hasHover = (el) => el.matches(':hover');
+const hasHover = (el) => el.matches(":hover");
 const hasFocus = (el) => el.contains(document.activeElement);
-const px = (n) => (n != null ? `${n}px` : '');
+const px = (n) => n != null ? `${n}px` : "";
 const hideHandler = (ev) => {
-    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;
+  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;
 const oppositeSideMap = {
-    left: 'right',
-    right: 'left',
-    bottom: 'top',
-    top: 'bottom'
+  left: "right",
+  right: "left",
+  bottom: "top",
+  top: "bottom"
 };
 $: middleware = [...middlewares, 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 }) => {
-        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]];
-            arrowEl.style[arrowSide] = px(-arrowEl.offsetWidth / 2 - ($$props.border ? 1 : 0));
-        }
-    });
+  dom.computePosition(referenceEl, floatingEl, { placement, strategy, middleware }).then(({ x, y, middlewareData, placement: placement2, strategy: strategy2 }) => {
+    floatingEl.style.position = strategy2;
+    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[placement2.split("-")[0]];
+      arrowEl.style[arrowSide] = px(-arrowEl.offsetWidth / 2 - ($$props.border ? 1 : 0));
+    }
+  });
 }
 function init(node, _referenceEl) {
-    floatingEl = node;
-    let cleanup = dom.autoUpdate(_referenceEl, floatingEl, updatePosition);
-    return {
-        update(_referenceEl) {
-            cleanup();
-            cleanup = dom.autoUpdate(_referenceEl, floatingEl, updatePosition);
-        },
-        destroy() {
-            cleanup();
-        }
-    };
+  floatingEl = node;
+  let cleanup = dom.autoUpdate(_referenceEl, floatingEl, updatePosition);
+  return {
+    update(_referenceEl2) {
+      cleanup();
+      cleanup = dom.autoUpdate(_referenceEl2, floatingEl, updatePosition);
+    },
+    destroy() {
+      cleanup();
+    }
+  };
 }
 onMount(() => {
-    const events = [
-        ['focusin', showHandler, true],
-        ['focusout', hideHandler, true],
-        ['click', showHandler, clickable],
-        ['mouseenter', showHandler, hoverable],
-        ['mouseleave', hideHandler, hoverable]
-    ];
-    if (triggeredBy)
-        triggerEls = [...document.querySelectorAll(triggeredBy)];
-    else
-        triggerEls = contentEl.previousElementSibling ? [contentEl.previousElementSibling] : [];
-    if (!triggerEls.length) {
-        console.error('No triggers found.');
+  const events = [
+    ["focusin", showHandler, true],
+    ["focusout", hideHandler, true],
+    ["click", showHandler, clickable],
+    ["mouseenter", showHandler, hoverable],
+    ["mouseleave", hideHandler, hoverable]
+  ];
+  if (triggeredBy) triggerEls = [...document.querySelectorAll(triggeredBy)];
+  else triggerEls = contentEl.previousElementSibling ? [contentEl.previousElementSibling] : [];
+  if (!triggerEls.length) {
+    console.error("No triggers found.");
+  }
+  triggerEls.forEach((element) => {
+    if (element.tabIndex < 0) element.tabIndex = 0;
+    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 (hoverable) referenceEl.addEventListener("mouseleave", hideHandler);
     }
+  } else {
+    referenceEl = triggerEls[0];
+  }
+  return () => {
     triggerEls.forEach((element) => {
-        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 (element) {
+        for (const [name, handler] of events) element.removeEventListener(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 (hoverable)
-                referenceEl.addEventListener('mouseleave', hideHandler);
-        }
-    }
-    else {
-        referenceEl = triggerEls[0];
+    if (referenceEl) {
+      referenceEl.removeEventListener("focusout", hideHandler);
+      referenceEl.removeEventListener("mouseleave", hideHandler);
     }
-    return () => {
-        // This is onDestroy function
-        triggerEls.forEach((element) => {
-            if (element) {
-                for (const [name, handler] of events)
-                    element.removeEventListener(name, handler);
-            }
-        });
-        if (referenceEl) {
-            referenceEl.removeEventListener('focusout', hideHandler);
-            referenceEl.removeEventListener('mouseleave', hideHandler);
-        }
-    };
+  };
 });
 function optional(pred, func) {
-    return pred ? func : () => undefined;
+  return pred ? func : () => void 0;
 }
 let arrowClass;
-$: arrowClass = twJoin('absolute pointer-events-none block w-[10px] h-[10px] rotate-45 bg-inherit border-inherit', $$props.border && arrowSide === 'bottom' && 'border-b border-e', $$props.border && arrowSide === 'top' && 'border-t border-s ', $$props.border && arrowSide === 'right' && 'border-t border-e ', $$props.border && arrowSide === 'left' && 'border-b border-s ');
+$: arrowClass = twJoin("absolute pointer-events-none block w-[10px] h-[10px] rotate-45 bg-inherit border-inherit", $$props.border && arrowSide === "bottom" && "border-b border-e", $$props.border && arrowSide === "top" && "border-t border-s ", $$props.border && arrowSide === "right" && "border-t border-e ", $$props.border && arrowSide === "left" && "border-b border-s ");
 function initArrow(node) {
-    arrowEl = node;
-    return {
-        destroy() {
-            arrowEl = null;
-        }
-    };
+  arrowEl = node;
+  return {
+    destroy() {
+      arrowEl = null;
+    }
+  };
 }
 </script>