@svelte-atoms/core 1.0.0-alpha.25 → 1.0.0-alpha.27

package/dist/components/radio/radio.svelte.d.ts

@@ -1,37 +1,15 @@
-import { type Base } from '../atom';
-declare function $$render<B extends Base = Base>(): {
-    props: {
-        class?: string;
-        value?: any;
-        group?: any;
-        id?: any;
-        name?: any;
-        disabled?: boolean;
-        required?: boolean;
-        readonly?: boolean;
-        onchange?: any;
-        oninput?: any;
-        checkedContent?: any;
-    } & Record<string, any>;
-    exports: {};
-    bindings: "value" | "group";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<B extends Base = Base> {
-    props(): ReturnType<typeof $$render<B>>['props'];
-    events(): ReturnType<typeof $$render<B>>['events'];
-    slots(): ReturnType<typeof $$render<B>>['slots'];
-    bindings(): "value" | "group";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<B>['props']>, ReturnType<__sveltets_Render<B>['events']>, ReturnType<__sveltets_Render<B>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<B>['bindings']>;
-    } & ReturnType<__sveltets_Render<B>['exports']>;
-    <B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<B>['props']> & {}): ReturnType<__sveltets_Render<B>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Radio: $$IsomorphicComponent;
-type Radio<B extends Base = Base> = InstanceType<typeof Radio<B>>;
+declare const Radio: import("svelte").Component<{
+    class?: string;
+    value?: any;
+    group?: any;
+    id?: any;
+    name?: any;
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    onchange?: any;
+    oninput?: any;
+    checkedContent?: any;
+} & Record<string, any>, {}, "value" | "group">;
+type Radio = ReturnType<typeof Radio>;
 export default Radio;

package/dist/components/root/root.css

@@ -20,11 +20,12 @@
 	--border: oklch(0.922 0 0);
 	--input: oklch(0.922 0 0);
 	--ring: oklch(0.708 0 0);
-	--chart-1: oklch(0.81 0.1 252);
-	--chart-2: oklch(0.62 0.19 260);
-	--chart-3: oklch(0.55 0.22 263);
-	--chart-4: oklch(0.49 0.22 264);
-	--chart-5: oklch(0.42 0.18 266);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--radius: 0.625rem;
 	--sidebar: oklch(0.985 0 0);
 	--sidebar-foreground: oklch(0.145 0 0);
 	--sidebar-primary: oklch(0.205 0 0);
@@ -33,23 +34,13 @@
 	--sidebar-accent-foreground: oklch(0.205 0 0);
 	--sidebar-border: oklch(0.922 0 0);
 	--sidebar-ring: oklch(0.708 0 0);
-	--font-sans:
-		ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-		'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-		'Segoe UI Symbol', 'Noto Color Emoji';
-	--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
-	--font-mono:
-		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
-		monospace;
 	--radius: 0.625rem;
-	--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-	--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-	--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-	--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-	--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
-	--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
-	--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
-	--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+	--shadow-x: 0px;
+	--shadow-y: 1px;
+	--shadow-blur: 2px;
+	--shadow-spread: 0px;
+	--shadow-opacity: 0.18;
+	--shadow-color: hsl(0 0% 0%);
 	--tracking-normal: 0em;
 	--spacing: 0.25rem;
 }
@@ -59,7 +50,7 @@
 	--foreground: oklch(0.985 0 0);
 	--card: oklch(0.205 0 0);
 	--card-foreground: oklch(0.985 0 0);
-	--popover: oklch(0.269 0 0);
+	--popover: oklch(0.205 0 0);
 	--popover-foreground: oklch(0.985 0 0);
 	--primary: oklch(0.922 0 0);
 	--primary-foreground: oklch(0.205 0 0);
@@ -67,43 +58,27 @@
 	--secondary-foreground: oklch(0.985 0 0);
 	--muted: oklch(0.269 0 0);
 	--muted-foreground: oklch(0.708 0 0);
-	--accent: oklch(0.371 0 0);
+	--accent: oklch(0.269 0 0);
 	--accent-foreground: oklch(0.985 0 0);
 	--destructive: oklch(0.704 0.191 22.216);
 	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(0.275 0 0);
-	--input: oklch(0.325 0 0);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
 	--ring: oklch(0.556 0 0);
-	--chart-1: oklch(0.81 0.1 252);
-	--chart-2: oklch(0.62 0.19 260);
-	--chart-3: oklch(0.55 0.22 263);
-	--chart-4: oklch(0.49 0.22 264);
-	--chart-5: oklch(0.42 0.18 266);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
 	--sidebar: oklch(0.205 0 0);
 	--sidebar-foreground: oklch(0.985 0 0);
 	--sidebar-primary: oklch(0.488 0.243 264.376);
 	--sidebar-primary-foreground: oklch(0.985 0 0);
 	--sidebar-accent: oklch(0.269 0 0);
 	--sidebar-accent-foreground: oklch(0.985 0 0);
-	--sidebar-border: oklch(0.275 0 0);
-	--sidebar-ring: oklch(0.439 0 0);
-	--font-sans:
-		ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-		'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-		'Segoe UI Symbol', 'Noto Color Emoji';
-	--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
-	--font-mono:
-		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
-		monospace;
-	--radius: 0.625rem;
-	--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-	--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-	--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-	--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-	--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
-	--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
-	--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
-	--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+	--shadow-color: hsl(0, 0%, 100%);
 }
 
 @theme inline {
@@ -140,22 +115,5 @@
 	--color-sidebar-border: var(--sidebar-border);
 	--color-sidebar-ring: var(--sidebar-ring);
 
-	--font-sans: var(--font-sans);
-	--font-mono: var(--font-mono);
-	--font-serif: var(--font-serif);
-
-	--radius-sm: calc(var(--radius) - 4px);
-	--radius-md: calc(var(--radius) - 2px);
-	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius) + 4px);
 	--radius-inherit: inherit;
-
-	--shadow-2xs: var(--shadow-2xs);
-	--shadow-xs: var(--shadow-xs);
-	--shadow-sm: var(--shadow-sm);
-	--shadow: var(--shadow);
-	--shadow-md: var(--shadow-md);
-	--shadow-lg: var(--shadow-lg);
-	--shadow-xl: var(--shadow-xl);
-	--shadow-2xl: var(--shadow-2xl);
 }

package/dist/components/root/root.svelte

@@ -1,121 +1,121 @@
-<script module lang="ts">
-	export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
-</script>
-
-<script lang="ts">
-	import { cn, defineState, defineProperty } from '../../utils';
-	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
-	import { Portal, ActivePortal, Portals } from '../portal';
-	import { Stack } from '../stack';
-	import { HtmlAtom } from '../atom';
-	import { HtmlElement, MathmlElement, SvgElement } from '../element';
-
-	let {
-		class: klass = '',
-		base = undefined,
-		children = undefined,
-		portals = undefined,
-		...restProps
-	} = $props();
-
-	let html: typeof HtmlElement | undefined = HtmlElement;
-	let svg: typeof SvgElement | undefined = undefined;
-	let mathml: typeof MathmlElement | undefined = undefined;
-
-	type Renderers = {
-		html?: typeof HtmlElement;
-		svg?: typeof SvgElement;
-		mathml?: typeof MathmlElement;
-	};
-
-	const renderers = defineState<Renderers>([
-		defineProperty('html', () => {
-			if (!html) {
-				import('../element/html-element.svelte').then((mod) => {
-					html = mod.default;
-				});
-			}
-
-			return html;
-		}),
-		defineProperty('svg', () => {
-			if (!svg) {
-				import('../element/svg-element.svelte').then((mod) => {
-					svg = mod.default;
-				});
-			}
-
-			return svg;
-		}),
-		defineProperty('mathml', () => {
-			if (!mathml) {
-				import('../element/mathml-element.svelte').then((mod) => {
-					mathml = mod.default;
-				});
-			}
-
-			return mathml;
-		})
-	]);
-
-	const bondProps = defineState<RootStateProps>([defineProperty('renderers', () => renderers)]);
-
-	const bondState = new RootBondState(() => bondProps);
-	const bond = new RootBond(bondState).share();
-</script>
-
-<Portals id="root">
-	<HtmlAtom
-		{@attach (node) => {
-			bond.rootElement = node;
-		}}
-		{base}
-		preset="root"
-		class={cn(
-			'atom-root bg-background text-foreground relative flex w-full flex-1 flex-col items-start font-sans',
-			'$preset',
-			klass
-		)}
-		{...restProps}
-	>
-		{#if portals}
-			{@render portals?.()}
-		{:else}
-			<Portal.Outer
-				base={Stack.Item}
-				id="root.l0"
-				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
-			>
-				<Portal.Inner />
-			</Portal.Outer>
-
-			<Portal.Outer
-				base={Stack.Item}
-				id="root.l1"
-				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
-			>
-				<Portal.Inner />
-			</Portal.Outer>
-
-			<Portal.Outer
-				base={Stack.Item}
-				id="root.l2"
-				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
-			>
-				<Portal.Inner />
-			</Portal.Outer>
-
-			<Portal.Outer
-				base={Stack.Item}
-				id="root.l3"
-				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
-			>
-				<Portal.Inner />
-			</Portal.Outer>
-		{/if}
-
-		<ActivePortal id="root.l0">
-			{@render children?.()}
-		</ActivePortal>
-	</HtmlAtom>
-</Portals>
+<script module lang="ts">
+	export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
+</script>
+
+<script lang="ts">
+	import { cn, defineState, defineProperty } from '../../utils';
+	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
+	import { Portal, ActivePortal, Portals } from '../portal';
+	import { Stack } from '../stack';
+	import { HtmlAtom } from '../atom';
+	import { HtmlElement, MathmlElement, SvgElement } from '../element';
+
+	let {
+		class: klass = '',
+		base = undefined,
+		children = undefined,
+		portals = undefined,
+		...restProps
+	} = $props();
+
+	let html: typeof HtmlElement | undefined = HtmlElement;
+	let svg: typeof SvgElement | undefined = undefined;
+	let mathml: typeof MathmlElement | undefined = undefined;
+
+	type Renderers = {
+		html?: typeof HtmlElement;
+		svg?: typeof SvgElement;
+		mathml?: typeof MathmlElement;
+	};
+
+	const renderers = defineState<Renderers>([
+		defineProperty('html', () => {
+			if (!html) {
+				import('../element/html-element.svelte').then((mod) => {
+					html = mod.default;
+				});
+			}
+
+			return html;
+		}),
+		defineProperty('svg', () => {
+			if (!svg) {
+				import('../element/svg-element.svelte').then((mod) => {
+					svg = mod.default;
+				});
+			}
+
+			return svg;
+		}),
+		defineProperty('mathml', () => {
+			if (!mathml) {
+				import('../element/mathml-element.svelte').then((mod) => {
+					mathml = mod.default;
+				});
+			}
+
+			return mathml;
+		})
+	]);
+
+	const bondProps = defineState<RootStateProps>([defineProperty('renderers', () => renderers)]);
+
+	const bondState = new RootBondState(() => bondProps);
+	const bond = new RootBond(bondState).share();
+</script>
+
+<Portals id="root">
+	<HtmlAtom
+		{@attach (node) => {
+			bond.rootElement = node;
+		}}
+		{base}
+		preset="root"
+		class={cn(
+			'atom-root bg-background text-foreground relative flex w-full flex-1 flex-col items-start font-sans',
+			'$preset',
+			klass
+		)}
+		{...restProps}
+	>
+		{#if portals}
+			{@render portals?.()}
+		{:else}
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l0"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l1"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l2"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l3"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+		{/if}
+
+		<ActivePortal portal="root.l0">
+			{@render children?.()}
+		</ActivePortal>
+	</HtmlAtom>
+</Portals>

package/dist/components/root/types.d.ts

@@ -0,0 +1,8 @@
+import type { HtmlAtomProps, Base } from '../atom';
+/**
+ * Extend this interface to add custom root properties in your application.
+ */
+export interface RootExtendProps {
+}
+export interface RootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, RootExtendProps {
+}

package/dist/components/root/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/scrollable/index.d.ts

@@ -5,3 +5,4 @@ export type * from './scrollable-track.svelte';
 export type * from './scrollable-thumb.svelte';
 export { ScrollableBond, type ScrollableDomElements, ScrollableState, type ScrollableStateProps } from './bond.svelte';
 export { scrollable } from './attachments.svelte';
+export * from './types';

package/dist/components/scrollable/index.js

@@ -1,3 +1,4 @@
 export * as Scrollable from './atoms';
 export { ScrollableBond, ScrollableState } from './bond.svelte';
 export { scrollable } from './attachments.svelte';
+export * from './types';

package/dist/components/scrollable/scrollable-container.svelte

@@ -1,89 +1,82 @@
-<script module lang="ts">
-	export type ScrollableContainerProps<T extends keyof HTMLElementTagNameMap> = Override<
-		HtmlAtomProps<T>,
-		{
-			children?: Snippet;
-		}
-	>;
-</script>
-
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { Snippet } from 'svelte';
-	import { ScrollableBond } from './bond.svelte';
-	import type { Override } from '../../types';
-	import { resizeObserver } from '../../attachments/resize-observer.svelte';
-	import { HtmlAtom, type HtmlAtomProps } from '../atom';
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: ScrollableContainerProps<T> = $props();
-
-	const bond = ScrollableBond.get();
-
-	if (!bond) {
-		throw new Error('ScrollableContainer must be used within a ScrollableRoot');
-	}
-</script>
-
-<HtmlAtom
-	{@attach (node) => {
-		if (!bond) return;
-
-		return resizeObserver(() => {
-			bond.state.props.clientWidth = node.clientWidth;
-			bond.state.props.clientHeight = node.clientHeight;
-			bond.state.props.scrollWidth = node.scrollWidth;
-			bond.state.props.scrollHeight = node.scrollHeight;
-		})(node);
-	}}
-	{bond}
-	preset="scrollable.container"
-	class={[
-		'scrollable-container border-border h-full max-h-full w-full overflow-auto',
-		'$preset',
-		klass
-	]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...bond.container()}
-	{...restProps}
->
-	{#if children}
-		{@render children()}
-	{/if}
-</HtmlAtom>
-
-<style>
-	:global(.scrollable-container) {
-		scrollbar-width: none; /* Firefox */
-		-ms-overflow-style: none; /* Internet Explorer 10+ */
-	}
-
-	:global(.scrollable-container::-webkit-scrollbar) {
-		display: none; /* WebKit */
-	}
-
-	:global(.scrollable-container[data-hide-scrollbar='true']) {
-		--scrollbar-width: 0px;
-	}
-
-	:global(.scrollable-container[data-hide-scrollbar='false']) {
-		--scrollbar-width: 16px;
-		/* margin-right: calc(-1 * var(--scrollbar-width, 16px));
-		margin-bottom: calc(-1 * var(--scrollbar-width, 16px));
-		padding-right: var(--scrollbar-width, 16px);
-		padding-bottom: var(--scrollbar-width, 16px); */
-	}
-</style>
+<script module lang="ts">
+	export type { ScrollableContainerProps } from './types';
+</script>
+
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
+	import type { ScrollableContainerProps } from './types';
+	import { ScrollableBond } from './bond.svelte';
+	import { resizeObserver } from '../../attachments/resize-observer.svelte';
+	import { HtmlAtom } from '../atom';
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: ScrollableContainerProps<T> = $props();
+
+	const bond = ScrollableBond.get();
+
+	if (!bond) {
+		throw new Error('ScrollableContainer must be used within a ScrollableRoot');
+	}
+</script>
+
+<HtmlAtom
+	{@attach (node) => {
+		if (!bond) return;
+
+		return resizeObserver(() => {
+			bond.state.props.clientWidth = node.clientWidth;
+			bond.state.props.clientHeight = node.clientHeight;
+			bond.state.props.scrollWidth = node.scrollWidth;
+			bond.state.props.scrollHeight = node.scrollHeight;
+		})(node);
+	}}
+	{bond}
+	preset="scrollable.container"
+	class={[
+		'scrollable-container border-border h-full max-h-full w-full overflow-auto',
+		'$preset',
+		klass
+	]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...bond.container()}
+	{...restProps}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</HtmlAtom>
+
+<style>
+	:global(.scrollable-container) {
+		scrollbar-width: none; /* Firefox */
+		-ms-overflow-style: none; /* Internet Explorer 10+ */
+	}
+
+	:global(.scrollable-container::-webkit-scrollbar) {
+		display: none; /* WebKit */
+	}
+
+	:global(.scrollable-container[data-hide-scrollbar='true']) {
+		--scrollbar-width: 0px;
+	}
+
+	:global(.scrollable-container[data-hide-scrollbar='false']) {
+		--scrollbar-width: 16px;
+		/* margin-right: calc(-1 * var(--scrollbar-width, 16px));
+		margin-bottom: calc(-1 * var(--scrollbar-width, 16px));
+		padding-right: var(--scrollbar-width, 16px);
+		padding-bottom: var(--scrollbar-width, 16px); */
+	}
+</style>

package/dist/components/scrollable/scrollable-container.svelte.d.ts

@@ -1,9 +1,5 @@
-export type ScrollableContainerProps<T extends keyof HTMLElementTagNameMap> = Override<HtmlAtomProps<T>, {
-    children?: Snippet;
-}>;
-import type { Snippet } from 'svelte';
-import type { Override } from '../../types';
-import { type HtmlAtomProps } from '../atom';
+export type { ScrollableContainerProps } from './types';
+import type { ScrollableContainerProps } from './types';
 declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
     props: ScrollableContainerProps<T>;
     exports: {};