@functionalcms/svelte-components 3.5.16 → 3.5.18

package/dist/components/presentation/Card.svelte.d.ts

@@ -1,14 +1,18 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CardProps = typeof __propDef.props;
-export type CardEvents = typeof __propDef.events;
-export type CardSlots = typeof __propDef.slots;
-export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
+import type { Snippet } from 'svelte';
+import { Orientation } from '../Styling';
+interface Props {
+    children: Snippet;
+    isAnimated?: boolean;
+    isSkinned?: boolean;
+    isStacked?: boolean;
+    isShadow?: boolean;
+    isBorder?: boolean;
+    isRounded?: boolean;
+    noWrap?: boolean;
+    orientation?: Orientation;
+    type?: string;
+    css?: string;
 }
-export {};
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/presentation/Carousel/carousel-content.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import emblaCarouselSvelte from "embla-carousel-svelte";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "../../../utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+
+	const { orientation, options, plugins, onInit } = getEmblaContext("<Carousel.Content/>");
+</script>
+
+<div
+	class="overflow-hidden"
+	use:emblaCarouselSvelte={{
+		options: {
+			container: "[data-embla-container]",
+			slides: "[data-embla-slide]",
+			...$options,
+			axis: $orientation === "horizontal" ? "x" : "y",
+		},
+		plugins: $plugins,
+	}}
+	on:emblaInit={onInit}
+>
+	<div
+		class={cn("flex", $orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+		data-embla-container=""
+		{...$$restProps}
+	>
+		<slot />
+	</div>
+</div>

package/dist/components/presentation/Carousel/carousel-content.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from "svelte/elements";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const CarouselContent: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<HTMLAttributes<HTMLDivElement>, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type CarouselContent = InstanceType<typeof CarouselContent>;
+export default CarouselContent;

package/dist/components/presentation/Carousel/carousel-item.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "../../../utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+
+	const { orientation } = getEmblaContext("<Carousel.Item/>");
+</script>
+
+<div
+	role="group"
+	aria-roledescription="slide"
+	class={cn(
+		"min-w-0 shrink-0 grow-0 basis-full",
+		$orientation === "horizontal" ? "pl-4" : "pt-4",
+		className
+	)}
+	data-embla-slide=""
+	{...$$restProps}
+>
+	<slot />
+</div>

package/dist/components/presentation/Carousel/carousel-item.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from "svelte/elements";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const CarouselItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<HTMLAttributes<HTMLDivElement>, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type CarouselItem = InstanceType<typeof CarouselItem>;
+export default CarouselItem;

package/dist/components/presentation/Carousel/carousel-next.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import ArrowRight from "lucide-svelte/icons/arrow-right";
+	import type { VariantProps } from "tailwind-variants";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "../../../utils.js";
+	import {
+		Button,
+		type Props,
+		type buttonVariants,
+	} from "../../../registry/default/ui/button/index.js";
+
+	type $$Props = Props;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+	export let variant: VariantProps<typeof buttonVariants>["variant"] = "outline";
+	export let size: VariantProps<typeof buttonVariants>["size"] = "icon";
+	const { orientation, canScrollNext, scrollNext, handleKeyDown } =
+		getEmblaContext("<Carousel.Next/>");
+</script>
+
+<Button
+	{variant}
+	{size}
+	class={cn(
+		"absolute h-8 w-8 touch-manipulation rounded-full",
+		$orientation === "horizontal"
+			? "-right-12 top-1/2 -translate-y-1/2"
+			: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+		className
+	)}
+	disabled={!$canScrollNext}
+	on:click={scrollNext}
+	on:keydown={handleKeyDown}
+	{...$$restProps}
+>
+	<ArrowRight class="h-4 w-4" />
+	<span class="sr-only">Next slide</span>
+</Button>

package/dist/components/presentation/Carousel/carousel-next.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CarouselNext: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CarouselNext = InstanceType<typeof CarouselNext>;
+export default CarouselNext;

package/dist/components/presentation/Carousel/carousel-previous.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import ArrowLeft from "lucide-svelte/icons/arrow-left";
+	import type { VariantProps } from "tailwind-variants";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "../../../utils.js";
+	import {
+		Button,
+		type Props,
+		type buttonVariants,
+	} from "../../../registry/default/ui/button/index.js";
+
+	type $$Props = Props;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+	export let variant: VariantProps<typeof buttonVariants>["variant"] = "outline";
+	export let size: VariantProps<typeof buttonVariants>["size"] = "icon";
+
+	const { orientation, canScrollPrev, scrollPrev, handleKeyDown } =
+		getEmblaContext("<Carousel.Previous/>");
+</script>
+
+<Button
+	{variant}
+	{size}
+	class={cn(
+		"absolute h-8 w-8 touch-manipulation rounded-full",
+		$orientation === "horizontal"
+			? "-left-12 top-1/2 -translate-y-1/2"
+			: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+		className
+	)}
+	disabled={!$canScrollPrev}
+	on:click={scrollPrev}
+	on:keydown={handleKeyDown}
+	{...$$restProps}
+>
+	<ArrowLeft class="h-4 w-4" />
+	<span class="sr-only">Previous slide</span>
+</Button>

package/dist/components/presentation/Carousel/carousel-previous.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CarouselPrevious: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CarouselPrevious = InstanceType<typeof CarouselPrevious>;
+export default CarouselPrevious;

package/dist/components/presentation/Carousel/carousel.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { writable } from "svelte/store";
+	import { onDestroy } from "svelte";
+	import { type CarouselAPI, type CarouselProps, setEmblaContext } from "./context.js";
+	import { mergedClasses } from "../../CssHelper.js";
+
+	type $$Props = CarouselProps;
+
+	export let opts = {};
+	export let plugins: NonNullable<$$Props["plugins"]> = [];
+	export let api: $$Props["api"] = undefined;
+	export let orientation: NonNullable<$$Props["orientation"]> = "horizontal";
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+
+	const apiStore = writable<CarouselAPI | undefined>(undefined);
+	const orientationStore = writable(orientation);
+	const canScrollPrev = writable(false);
+	const canScrollNext = writable(false);
+	const optionsStore = writable(opts);
+	const pluginStore = writable(plugins);
+	const scrollSnapsStore = writable<number[]>([]);
+	const selectedIndexStore = writable(0);
+
+	$: orientationStore.set(orientation);
+	$: pluginStore.set(plugins);
+	$: optionsStore.set(opts);
+
+	function scrollPrev() {
+		api?.scrollPrev();
+	}
+	function scrollNext() {
+		api?.scrollNext();
+	}
+	function scrollTo(index: number, jump?: boolean) {
+		api?.scrollTo(index, jump);
+	}
+
+	function onSelect(api: CarouselAPI) {
+		if (!api) return;
+		canScrollPrev.set(api.canScrollPrev());
+		canScrollNext.set(api.canScrollNext());
+		selectedIndexStore.set(api.selectedScrollSnap());
+	}
+
+	$: if (api) {
+		onSelect(api);
+		api.on("select", onSelect);
+		api.on("reInit", onSelect);
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === "ArrowLeft") {
+			e.preventDefault();
+			scrollPrev();
+		} else if (e.key === "ArrowRight") {
+			e.preventDefault();
+			scrollNext();
+		}
+	}
+
+	setEmblaContext({
+		api: apiStore,
+		scrollPrev,
+		scrollNext,
+		orientation: orientationStore,
+		canScrollNext,
+		canScrollPrev,
+		handleKeyDown,
+		options: optionsStore,
+		plugins: pluginStore,
+		onInit,
+		scrollSnaps: scrollSnapsStore,
+		selectedIndex: selectedIndexStore,
+		scrollTo,
+	});
+
+	function onInit(event: CustomEvent<CarouselAPI>) {
+		api = event.detail;
+		apiStore.set(api);
+		scrollSnapsStore.set(api.scrollSnapList());
+	}
+
+	onDestroy(() => {
+		api?.off("select", onSelect);
+	});
+</script>
+
+<div
+	class={mergedClasses("relative", className)}
+	on:mouseenter
+	on:mouseleave
+	role="region"
+	aria-roledescription="carousel"
+	{...$$restProps}
+>
+	<slot />
+</div>

package/dist/components/presentation/Carousel/carousel.svelte.d.ts

@@ -0,0 +1,31 @@
+import { type CarouselProps } from "./context.js";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Carousel: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<CarouselProps, {
+    default: {};
+}>, {
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Carousel = InstanceType<typeof Carousel>;
+export default Carousel;

package/dist/components/presentation/Carousel/context.d.ts

@@ -0,0 +1,32 @@
+import type { EmblaCarouselSvelteType } from "embla-carousel-svelte";
+import type emblaCarouselSvelte from "embla-carousel-svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { Readable, Writable } from "svelte/store";
+export type CarouselAPI = NonNullable<NonNullable<EmblaCarouselSvelteType["$$_attributes"]>["on:emblaInit"]> extends (evt: CustomEvent<infer CarouselAPI>) => void ? CarouselAPI : never;
+type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;
+export type CarouselOptions = EmblaCarouselConfig["options"];
+export type CarouselPlugins = EmblaCarouselConfig["plugins"];
+export type CarouselProps = {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugins;
+    api?: CarouselAPI;
+    orientation?: "horizontal" | "vertical";
+} & HTMLAttributes<HTMLDivElement>;
+type EmblaContext = {
+    api: Writable<CarouselAPI | undefined>;
+    orientation: Writable<"horizontal" | "vertical">;
+    scrollNext: () => void;
+    scrollPrev: () => void;
+    canScrollNext: Readable<boolean>;
+    canScrollPrev: Readable<boolean>;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    options: Writable<CarouselOptions>;
+    plugins: Writable<CarouselPlugins>;
+    onInit: (e: CustomEvent<CarouselAPI>) => void;
+    scrollTo: (index: number, jump?: boolean) => void;
+    scrollSnaps: Readable<number[]>;
+    selectedIndex: Readable<number>;
+};
+export declare function setEmblaContext(config: EmblaContext): EmblaContext;
+export declare function getEmblaContext(name?: string): EmblaContext;
+export {};

package/dist/components/presentation/Carousel/context.js

@@ -0,0 +1,12 @@
+import { getContext, hasContext, setContext } from "svelte";
+const EMBLA_CAROUSEL_CONTEXT = Symbol("EMBLA_CAROUSEL_CONTEXT");
+export function setEmblaContext(config) {
+    setContext(EMBLA_CAROUSEL_CONTEXT, config);
+    return config;
+}
+export function getEmblaContext(name = "This component") {
+    if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
+        throw new Error(`${name} must be used within a <Carousel.Root> component`);
+    }
+    return getContext(EMBLA_CAROUSEL_CONTEXT);
+}

package/dist/components/presentation/Carousel.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<style></style>

package/dist/components/presentation/Carousel.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Carousel: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Carousel = InstanceType<typeof Carousel>;
+export default Carousel;

package/dist/components/presentation/Carusele.d.ts

@@ -1,4 +1,4 @@
-export declare class CaruseleItem {
+export declare class CarouselItem {
     text: string;
     image: string;
     link: string;

package/dist/components/presentation/Carusele.js

@@ -1,4 +1,4 @@
-export class CaruseleItem {
+export class CarouselItem {
     text = "";
     image = "";
     link = "";

package/dist/components/presentation/Gallery.svelte.d.ts

@@ -1,14 +1,15 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type GalleryProps = typeof __propDef.props;
-export type GalleryEvents = typeof __propDef.events;
-export type GallerySlots = typeof __propDef.slots;
-export default class Gallery extends SvelteComponentTyped<GalleryProps, GalleryEvents, GallerySlots> {
+import type { ShowItem } from './ShowItem.js';
+import { AlignItmes, Justify, Orientation } from '../Styling.js';
+import type { Snippet } from 'svelte';
+interface GaleryProps {
+    items: Array<ShowItem>;
+    renderItem: Snippet<[ShowItem]>;
+    justify: Justify;
+    alignItems: AlignItmes;
+    orientation: Orientation;
+    restProps: any;
+    css: string;
 }
-export {};
+declare const Gallery: import("svelte").Component<GaleryProps, {}, "">;
+type Gallery = ReturnType<typeof Gallery>;
+export default Gallery;

package/dist/components/presentation/ImageCompare.svelte

@@ -1,19 +1,17 @@
-<script>
+<script lang="ts">
 	let hideOnSlide = true,
 		imgOffset = null,
 		sliding = false,
 		contain = false,
 		overlay = true,
 		offset = 0.5,
-		before = "",
-		after = "",
+		before = '',
+		after = '',
 		lazyLoad = false,
 		img;
 
 	function resize(e) {
-		imgOffset = (
-			e.type === "load" ? e.target : img
-		).getBoundingClientRect();
+		imgOffset = (e.type === 'load' ? e.target : img).getBoundingClientRect();
 	}
 
 	function move(e) {
@@ -37,10 +35,8 @@
 	$: h = imgOffset && imgOffset.height;
 	$: x = w * offset;
 	$: opacity = hideOnSlide && sliding ? 0 : 1;
-	$: style = contain
-		? `width:100%;height:100%;`
-		: `width:${w}px;height:${h}px;`;
-	$: imageLoading = lazyLoad ? "lazy" : "eager";
+	$: style = contain ? `width:100%;height:100%;` : `width:${w}px;height:${h}px;`;
+	$: imageLoading = lazyLoad ? 'lazy' : 'eager';
 
 	export { before, after, offset, overlay, contain, lazyLoad, hideOnSlide };
 </script>
@@ -53,7 +49,14 @@
 	on:resize={resize}
 />
 
-<div class="container" {style} on:touchstart={start} on:mousedown={start} role="img" aria-roledescription="image slider">
+<div
+	class="container"
+	{style}
+	on:touchstart={start}
+	on:mousedown={start}
+	role="img"
+	aria-roledescription="image slider"
+>
 	<img
 		bind:this={img}
 		loading={imageLoading}
@@ -144,7 +147,7 @@
 	}
 	.handle:before,
 	.handle:after {
-		content: "";
+		content: '';
 		height: 9999px;
 		position: absolute;
 		left: calc(50% - 2px);

package/dist/components/presentation/ImageCompare.svelte.d.ts

@@ -1,14 +1,24 @@
-/** @typedef {typeof __propDef.props}  ImageCompareProps */
-/** @typedef {typeof __propDef.events}  ImageCompareEvents */
-/** @typedef {typeof __propDef.slots}  ImageCompareSlots */
-export default class ImageCompare extends SvelteComponentTyped<{
-    before?: string | undefined;
-    after?: string | undefined;
-    offset?: number | undefined;
-    overlay?: boolean | undefined;
-    contain?: boolean | undefined;
-    lazyLoad?: boolean | undefined;
-    hideOnSlide?: boolean | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ImageCompare: $$__sveltets_2_IsomorphicComponent<{
+    before?: string;
+    after?: string;
+    offset?: number;
+    overlay?: boolean;
+    contain?: boolean;
+    lazyLoad?: boolean;
+    hideOnSlide?: boolean;
 }, {
     mousedown: MouseEvent;
 } & {
@@ -16,30 +26,6 @@ export default class ImageCompare extends SvelteComponentTyped<{
 }, {
     before: {};
     after: {};
-}> {
-}
-export type ImageCompareProps = typeof __propDef.props;
-export type ImageCompareEvents = typeof __propDef.events;
-export type ImageCompareSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        before?: string | undefined;
-        after?: string | undefined;
-        offset?: number | undefined;
-        overlay?: boolean | undefined;
-        contain?: boolean | undefined;
-        lazyLoad?: boolean | undefined;
-        hideOnSlide?: boolean | undefined;
-    };
-    events: {
-        mousedown: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        before: {};
-        after: {};
-    };
-};
-export {};
+}, {}, string>;
+type ImageCompare = InstanceType<typeof ImageCompare>;
+export default ImageCompare;