@reshape-biotech/design-system 0.0.54 → 1.1.2

package/dist/components/select-new/components/Group.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { GroupProps as PrimitiveGroupProps } from '../types';
+interface Props extends PrimitiveGroupProps {
+    label?: string;
+    children: Snippet;
+    class?: string;
+    contentClass?: string;
+}
+declare const Group: import("svelte").Component<Props, {}, "">;
+type Group = ReturnType<typeof Group>;
+export default Group;

package/dist/components/select-new/components/MultiSelectTrigger.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import * as Select from '../index';
+	import { Icon, type IconName } from '../../icons';
+	import IconButton from '../../icon-button/IconButton.svelte';
+
+	type ItemType = {
+		value: string;
+		label: string;
+		iconName?: IconName | string;
+	};
+
+	interface Props {
+		selectedValues: string[];
+		items: ItemType[];
+		onRemoveItem: (itemValue: string) => void;
+		placeholder?: string;
+		class?: string;
+		[key: string]: any;
+	}
+
+	let {
+		selectedValues,
+		items,
+		onRemoveItem,
+		placeholder = 'Select items...',
+		class: className,
+		...restProps
+	}: Props = $props();
+</script>
+
+<Select.Trigger
+	class={'bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border border-input px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50' +
+		(className || '')}
+	{...restProps}
+>
+	{#if selectedValues.length === 0}
+		<span class="flex-grow px-2 text-tertiary">{placeholder}</span>
+	{:else}
+		<div class="flex flex-grow flex-wrap items-center gap-1">
+			{#each selectedValues as selectedVal (selectedVal)}
+				{@const item = items.find((i) => i.value === selectedVal)}
+				{#if item}
+					<div
+						class="flex w-fit items-center gap-1 rounded-sm bg-neutral px-1 py-0.5 text-sm"
+						aria-label={`Selected item ${item.label}`}
+					>
+						{#if item.iconName}
+							<Icon iconName={item.iconName as IconName} />
+						{/if}
+						<span>{item.label}</span>
+						<IconButton
+							type="button"
+							aria-label={`Remove ${item.label}`}
+							onclick={() => onRemoveItem(item.value)}
+							size="xs"
+							variant="transparent"
+							class="text-primary focus:outline-none"
+						>
+							<Icon iconName="X" />
+						</IconButton>
+					</div>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+</Select.Trigger>

package/dist/components/select-new/components/MultiSelectTrigger.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type IconName } from '../../icons';
+type ItemType = {
+    value: string;
+    label: string;
+    iconName?: IconName | string;
+};
+interface Props {
+    selectedValues: string[];
+    items: ItemType[];
+    onRemoveItem: (itemValue: string) => void;
+    placeholder?: string;
+    class?: string;
+    [key: string]: any;
+}
+declare const MultiSelectTrigger: import("svelte").Component<Props, {}, "">;
+type MultiSelectTrigger = ReturnType<typeof MultiSelectTrigger>;
+export default MultiSelectTrigger;

package/dist/components/select-new/components/SelectContent.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import type { ContentProps } from '../types';
+
+	import type { Snippet } from 'svelte';
+	import Icon from '../../icons/Icon.svelte';
+
+	interface Props extends ContentProps {
+		children: Snippet;
+		class?: string;
+		sideOffset?: number;
+	}
+
+	let { class: className = '', sideOffset = 4, children, ...restProps }: Props = $props();
+
+	const baseClasses = `
+		w-[var(--bits-select-anchor-width)] relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-surface text-surface-foreground shadow-md
+    `;
+</script>
+
+<SelectPrimitive.Portal>
+	<SelectPrimitive.Content {...restProps} {sideOffset} class={baseClasses + ' ' + className}>
+		<SelectPrimitive.ScrollUpButton class="flex justify-center">
+			<Icon iconName="CaretUp" />
+		</SelectPrimitive.ScrollUpButton>
+		<SelectPrimitive.Viewport class="p-1 ">
+			{@render children()}
+		</SelectPrimitive.Viewport>
+		<SelectPrimitive.ScrollDownButton class="flex justify-center">
+			<Icon iconName="CaretDown" />
+		</SelectPrimitive.ScrollDownButton>
+	</SelectPrimitive.Content>
+</SelectPrimitive.Portal>

package/dist/components/select-new/components/SelectContent.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ContentProps } from '../types';
+import type { Snippet } from 'svelte';
+interface Props extends ContentProps {
+    children: Snippet;
+    class?: string;
+    sideOffset?: number;
+}
+declare const SelectContent: import("svelte").Component<Props, {}, "">;
+type SelectContent = ReturnType<typeof SelectContent>;
+export default SelectContent;

package/dist/components/select-new/components/SelectGroupHeading.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import type { GroupHeadingProps } from '../types';
+
+	import type { Snippet } from 'svelte';
+
+	interface Props extends GroupHeadingProps {
+		children: Snippet;
+		class?: string;
+	}
+
+	let { class: className = '', children, ...restProps }: Props = $props();
+
+	const baseClasses = 'py-1.5 pl-2 pr-2 text-sm font-semibold text-muted-foreground';
+</script>
+
+<SelectPrimitive.GroupHeading {...restProps} class="{baseClasses} {className}">
+	{@render children()}
+</SelectPrimitive.GroupHeading>

package/dist/components/select-new/components/SelectGroupHeading.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { GroupHeadingProps } from '../types';
+import type { Snippet } from 'svelte';
+interface Props extends GroupHeadingProps {
+    children: Snippet;
+    class?: string;
+}
+declare const SelectGroupHeading: import("svelte").Component<Props, {}, "">;
+type SelectGroupHeading = ReturnType<typeof SelectGroupHeading>;
+export default SelectGroupHeading;

package/dist/components/select-new/components/SelectItem.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import type { ItemProps, ItemSlotProps } from '../types';
+
+	import type { Snippet } from 'svelte';
+	import Check from 'phosphor-svelte/lib/Check';
+
+	interface Props extends ItemProps {
+		children?: Snippet<[ItemSlotProps]>;
+		class?: string;
+	}
+
+	let { class: className = '', children, ...restProps }: Props = $props();
+
+	const baseClasses = `
+        relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none 
+        focus:bg-accent focus:text-accent-foreground 
+        data-[disabled]:pointer-events-none data-[disabled]:opacity-50
+        data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground
+    `;
+</script>
+
+<SelectPrimitive.Item {...restProps} class={baseClasses + ' ' + className}>
+	{#snippet children(params: ItemSlotProps)}
+		{#if children}
+			{@render children(params)}
+		{:else}
+			<span>
+				{restProps.label ??
+					(typeof restProps.value === 'string' || typeof restProps.value === 'number'
+						? restProps.value
+						: 'Item')}</span
+			>
+		{/if}
+		{#if params.selected}
+			<span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+				<Check class="h-4 w-4" />
+			</span>
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>

package/dist/components/select-new/components/SelectItem.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ItemProps, ItemSlotProps } from '../types';
+import type { Snippet } from 'svelte';
+interface Props extends ItemProps {
+    children?: Snippet<[ItemSlotProps]>;
+    class?: string;
+}
+declare const SelectItem: import("svelte").Component<Props, {}, "">;
+type SelectItem = ReturnType<typeof SelectItem>;
+export default SelectItem;

package/dist/components/select-new/components/SelectTrigger.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import type { TriggerProps, IconSnippet } from '../types';
+
+	import type { Snippet } from 'svelte';
+	import { Icon } from '../../icons';
+
+	interface Props extends TriggerProps {
+		TriggerIcon?: IconSnippet;
+		children?: Snippet;
+		class?: string;
+		placeholder?: string;
+		displayValue?: string;
+	}
+
+	let {
+		class: className = '',
+		TriggerIcon = undefined,
+		children,
+		placeholder = 'Select an option',
+		displayValue = undefined,
+		...restProps
+	}: Props = $props();
+
+	const baseClasses =
+		'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+</script>
+
+<SelectPrimitive.Trigger
+	{...restProps}
+	class={baseClasses + ' ' + className}
+	aria-label={placeholder}
+>
+	<div class="flex-1 truncate text-left">
+		{#if children}
+			{@render children()}
+		{:else if displayValue !== undefined}
+			{displayValue}
+		{:else}
+			<span class="text-tertiary">{placeholder}</span>
+		{/if}
+	</div>
+	{#if TriggerIcon}
+		{@render TriggerIcon()}
+	{:else}
+		<Icon iconName="CaretDown" class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+	{/if}
+</SelectPrimitive.Trigger>

package/dist/components/select-new/components/SelectTrigger.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { TriggerProps, IconSnippet } from '../types';
+import type { Snippet } from 'svelte';
+interface Props extends TriggerProps {
+    TriggerIcon?: IconSnippet;
+    children?: Snippet;
+    class?: string;
+    placeholder?: string;
+    displayValue?: string;
+}
+declare const SelectTrigger: import("svelte").Component<Props, {}, "">;
+type SelectTrigger = ReturnType<typeof SelectTrigger>;
+export default SelectTrigger;

package/dist/components/select-new/index.d.ts

@@ -0,0 +1,10 @@
+import Content from './components/SelectContent.svelte';
+import Item from './components/SelectItem.svelte';
+import GroupHeading from './components/SelectGroupHeading.svelte';
+import Trigger from './components/SelectTrigger.svelte';
+import MultiSelectTrigger from './components/MultiSelectTrigger.svelte';
+import Group from './components/Group.svelte';
+export declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "open" | "value">;
+export declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+export { Content, Item, Group, GroupHeading, Trigger, MultiSelectTrigger };
+export * from './types';

package/dist/components/select-new/index.js

@@ -0,0 +1,12 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+// Custom Svelte components
+import Content from './components/SelectContent.svelte';
+import Item from './components/SelectItem.svelte';
+import GroupHeading from './components/SelectGroupHeading.svelte';
+import Trigger from './components/SelectTrigger.svelte';
+import MultiSelectTrigger from './components/MultiSelectTrigger.svelte';
+import Group from './components/Group.svelte';
+export const Root = SelectPrimitive.Root;
+export const Portal = SelectPrimitive.Portal;
+export { Content, Item, Group, GroupHeading, Trigger, MultiSelectTrigger };
+export * from './types';

package/dist/components/select-new/types.d.ts

@@ -0,0 +1,25 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+export type Props = SelectPrimitive.RootProps;
+export type TriggerProps = SelectPrimitive.TriggerProps;
+export type TriggerAttributes = HTMLButtonAttributes;
+export type ContentProps = SelectPrimitive.ContentProps;
+export type ContentAttributes = HTMLAttributes<HTMLElement>;
+export type ItemProps = SelectPrimitive.ItemProps;
+export type ItemAttributes = HTMLAttributes<HTMLElement>;
+export type GroupProps = SelectPrimitive.GroupProps;
+export type GroupAttributes = HTMLAttributes<HTMLElement>;
+export type GroupHeadingProps = SelectPrimitive.GroupHeadingProps;
+export type GroupHeadingAttributes = HTMLAttributes<HTMLElement>;
+export type Option = {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+export type ItemSlotProps = {
+    selected: boolean;
+    highlighted: boolean;
+};
+export type IconSnippet = Snippet;

package/dist/components/select-new/types.js

@@ -0,0 +1 @@
+import { Select as SelectPrimitive } from 'bits-ui';

package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, inputAttributes } from '@sjsf/form';
+	import Input from '../input/Input.svelte';
+	import type { FocusEventHandler } from 'svelte/elements';
+
+	type Props = ComponentProps['numberWidget'];
+
+	let { value = $bindable(), config, handlers, errors }: Props = $props();
+
+	const ctx = getFormContext();
+
+	const derivedAttrs = $derived(
+		inputAttributes(ctx, config, 'number', handlers, {
+			type: 'number'
+		})
+	);
+	const placeholder = $derived(
+		config?.uiSchema?.['ui:placeholder'] ||
+			config?.schema?.description ||
+			(Array.isArray(config?.schema?.examples) && config.schema.examples.length > 0
+				? String(config.schema.examples[0]) // Ensure the example is also a string
+				: '') ||
+			''
+	);
+
+	const readonly = $derived(config?.schema?.readOnly ?? false);
+	const currentClass = $derived(derivedAttrs?.class ?? 'w-full');
+
+	const onBlurHandler = $derived(
+		derivedAttrs.onblur
+			? (event: FocusEvent) =>
+					(derivedAttrs.onblur as FocusEventHandler<HTMLInputElement>)(event as any)
+			: undefined
+	);
+
+	const onChangeHandler = $derived(
+		derivedAttrs.onchange
+			? (event: Event) =>
+					(derivedAttrs.onchange as FocusEventHandler<HTMLInputElement>)(event as any)
+			: undefined
+	);
+
+	const onInputHandler = $derived(
+		derivedAttrs.oninput
+			? (event: Event) =>
+					(derivedAttrs.oninput as FocusEventHandler<HTMLInputElement>)(event as any)
+			: undefined
+	);
+
+	const getStringValue = () => {
+		if (value === undefined || value === null || isNaN(value)) {
+			return '';
+		}
+		return String(value);
+	};
+
+	const setNumericValue = (newValueFromInput: unknown) => {
+		const stringifiedInput =
+			newValueFromInput === null || newValueFromInput === undefined
+				? ''
+				: String(newValueFromInput);
+
+		if (stringifiedInput.trim() === '') {
+			value = undefined;
+		} else {
+			const num = parseFloat(stringifiedInput);
+			value = isNaN(num) ? undefined : num;
+		}
+	};
+</script>
+
+<Input
+	bind:value={() => getStringValue(), (v) => setNumericValue(v)}
+	placeholder={String(placeholder)}
+	type={'number'}
+	{readonly}
+	id={String(derivedAttrs.id)}
+	name={String(derivedAttrs.name)}
+	disabled={derivedAttrs.disabled}
+	required={derivedAttrs.required}
+	step={config?.schema?.multipleOf ?? (config?.schema?.type === 'integer' ? 1 : 'any')}
+	min={config?.schema?.minimum ?? config?.schema?.exclusiveMinimum}
+	max={config?.schema?.maximum ?? config?.schema?.exclusiveMaximum}
+	aria-invalid={errors && errors.length > 0 ? true : undefined}
+	aria-describedby={errors && errors.length > 0 ? `${String(derivedAttrs.id)}-errors` : undefined}
+	class={String(currentClass)}
+	autocomplete="off"
+	oninput={onInputHandler}
+	onchange={onChangeHandler}
+	onblur={onBlurHandler}
+/>

package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SjsfNumberInputWrapper: import("svelte").Component<any, {}, "value">;
+type SjsfNumberInputWrapper = ReturnType<typeof SjsfNumberInputWrapper>;
+export default SjsfNumberInputWrapper;

package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, inputAttributes } from '@sjsf/form';
+	import Input from '../input/Input.svelte';
+	import type { FormEventHandler, FocusEventHandler } from 'svelte/elements';
+
+	type Props = ComponentProps['textWidget'];
+
+	let { value = $bindable(), config, handlers, errors }: Props = $props();
+
+	const ctx = getFormContext();
+
+	const derivedAttrs = $derived(
+		inputAttributes(ctx, config, 'text', handlers, {
+			type: 'text'
+		})
+	);
+
+	const placeholder = $derived(
+		config?.uiSchema?.['ui:placeholder'] ||
+			config?.schema?.description ||
+			(Array.isArray(config?.schema?.examples) && config.schema.examples.length > 0
+				? String(config.schema.examples[0])
+				: '') ||
+			''
+	);
+
+	const readonly = $derived(config?.schema?.readOnly ?? false);
+	const currentClass = $derived(derivedAttrs?.class ?? 'w-full');
+
+	const onInput = $derived(
+		derivedAttrs.oninput
+			? (event: Event) => (derivedAttrs.oninput as FormEventHandler<HTMLInputElement>)(event as any)
+			: undefined
+	);
+	const onChange = $derived(
+		derivedAttrs.onchange
+			? (event: Event) =>
+					(derivedAttrs.onchange as FormEventHandler<HTMLInputElement>)(event as any)
+			: undefined
+	);
+	const onBlur = $derived(
+		derivedAttrs.onblur
+			? (event: FocusEvent) =>
+					(derivedAttrs.onblur as FocusEventHandler<HTMLInputElement>)(event as any)
+			: undefined
+	);
+</script>
+
+<Input
+	bind:value
+	placeholder={String(placeholder)}
+	type="text"
+	{readonly}
+	id={String(derivedAttrs.id)}
+	name={String(derivedAttrs.name)}
+	disabled={derivedAttrs.disabled}
+	required={derivedAttrs.required}
+	oninput={onInput}
+	onchange={onChange}
+	onblur={onBlur}
+	aria-invalid={errors && errors.length > 0 ? true : undefined}
+	aria-describedby={errors && errors.length > 0 ? `${String(derivedAttrs.id)}-errors` : undefined}
+	class={String(currentClass)}
+/>

package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SjsfTextInputWrapper: import("svelte").Component<any, {}, "value">;
+type SjsfTextInputWrapper = ReturnType<typeof SjsfTextInputWrapper>;
+export default SjsfTextInputWrapper;

package/dist/components/sjsf-wrappers/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SjsfTextInputWrapper } from './SjsfTextInputWrapper.svelte';
+export { default as SjsfNumberInputWrapper } from './SjsfNumberInputWrapper.svelte';

package/dist/components/sjsf-wrappers/index.js

@@ -0,0 +1,2 @@
+export { default as SjsfTextInputWrapper } from './SjsfTextInputWrapper.svelte';
+export { default as SjsfNumberInputWrapper } from './SjsfNumberInputWrapper.svelte';

package/dist/components/sjsf-wrappers/sjsfCustomTheme.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from '@sjsf/form';
+export declare const sjsfCustomTheme: Theme;

package/dist/components/sjsf-wrappers/sjsfCustomTheme.js

@@ -0,0 +1,8 @@
+import { theme as BasicTheme } from '@sjsf/basic-theme';
+import { overrideByRecord } from '@sjsf/form/lib/resolver';
+import SjsfNumberInputWrapper from './SjsfNumberInputWrapper.svelte';
+import SjsfTextInputWrapper from './SjsfTextInputWrapper.svelte';
+export const sjsfCustomTheme = overrideByRecord(BasicTheme, {
+    numberWidget: SjsfNumberInputWrapper,
+    textWidget: SjsfTextInputWrapper
+});

package/dist/components/skeleton-loader/SkeletonLoader.stories.svelte

@@ -10,15 +10,15 @@
 	});
 </script>
 
-<Story name="Primary">
-	<SkeletonLoader class="h-[20px] w-[200px]">
+<Story name="Primary" asChild>
+	<SkeletonLoader class="h-[50px] w-[200px]">
 		{#snippet children({ Skeleton })}
 			<Skeleton class="h-full w-full" />
 		{/snippet}
 	</SkeletonLoader>
 </Story>
 
-<Story name="ImagePlaceholder">
+<Story name="ImagePlaceholder" asChild>
 	<SkeletonLoader class="h-[100px] w-[500px]">
 		{#snippet children({ Skeleton, SkeletonImage })}
 			<div class="flex h-full gap-2">
@@ -36,7 +36,7 @@
 	</SkeletonLoader>
 </Story>
 
-<Story name="StatCard">
+<Story name="StatCard" asChild>
 	<div class="flex w-[900px] gap-4">
 		<StatcardSkeleton />
 		<StatcardSkeleton />

package/dist/components/slider/Slider.stories.svelte

@@ -12,19 +12,19 @@
 	let value = 3;
 </script>
 
-<Story name="Default">
+<Story name="Default" asChild>
 	Value: {value + 1}
 	<Slider bind:value bind:buffer={value} max={4}></Slider>
 </Story>
-<Story name="Playback Controls Running Job">
+<Story name="Playback Controls Running Job" asChild>
 	Value: {value + 1}
 	<Slider bind:value buffer={35} max={49} bufferColorClass="bg-warning-inverse"></Slider>
 </Story>
-<Story name="Modern stepStyle">
+<Story name="Modern stepStyle" asChild>
 	Value: {value + 1}
 	<Slider bind:value bind:buffer={value} max={4} showSteps={true}></Slider>
 </Story>
-<Story name="Create Job Capture Interval">
+<Story name="Create Job Capture Interval" asChild>
 	Value: {value + 1}
 	<Slider
 		bind:value

package/dist/components/spinner/Spinner.stories.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Spinner from './Spinner.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Design System/Spinner',
+		component: Spinner,
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Base" />

package/dist/components/spinner/Spinner.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Spinner from './Spinner.svelte';
+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 Spinner: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Spinner = InstanceType<typeof Spinner>;
+export default Spinner;