@r2digisolutions/components 0.1.6 → 0.2.0

package/dist/components/molecules/CanvasInspector/CanvasInspector.svelte.d.ts

@@ -0,0 +1,28 @@
+import { type CanvasAlign, type CanvasDocument, type CanvasLayer, type CanvasWidgetDefinition } from '../../../utils/canvasDocument.js';
+import type { Component } from 'svelte';
+interface CanvasInspectorProps {
+    document?: CanvasDocument | null;
+    layer?: CanvasLayer | null;
+    selectionCount?: number;
+    /** When editing inside a User Widget definition — enables eye toggles. */
+    widgetDefinition?: CanvasWidgetDefinition | null;
+    class?: string;
+    ondocumentchange?: (doc: CanvasDocument) => void;
+    onchange?: (layer: CanvasLayer) => void;
+    onalign?: (align: CanvasAlign) => void;
+    onexpose?: (payload: {
+        layerId: string;
+        field: string;
+        exposed: boolean;
+        label: string;
+    }) => void;
+    onoverride?: (payload: {
+        propId: string;
+        value: unknown;
+    }) => void;
+    oneditwidget?: (definitionId: string) => void;
+    onbreakwidget?: () => void;
+}
+declare const CanvasInspector: Component<CanvasInspectorProps, {}, "">;
+type CanvasInspector = ReturnType<typeof CanvasInspector>;
+export default CanvasInspector;

package/dist/components/molecules/CanvasInspector/CanvasInspectorStory.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import CanvasInspector from './CanvasInspector.svelte';
+	import { createCanvasLayer, emptyCanvasDocument } from '../../../utils/canvasDocument.js';
+
+	let layer = $state(
+		createCanvasLayer('text', { name: 'Title', text: 'Hello', rect: { x: 10, y: 20, w: 200, h: 60 } })
+	);
+	let doc = $state(emptyCanvasDocument());
+</script>
+
+<div class="w-72 rounded-lg border border-border bg-surface-elevated">
+	<CanvasInspector
+		document={doc}
+		{layer}
+		ondocumentchange={(d) => (doc = d)}
+		onchange={(l) => {
+			layer = l;
+		}}
+	/>
+</div>

package/dist/components/molecules/CanvasInspector/CanvasInspectorStory.svelte.d.ts

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

package/dist/components/molecules/CodeEditor/CodeEditor.svelte

@@ -57,23 +57,27 @@
 
 <div
 	class={[
-		'overflow-hidden rounded-xl border border-border bg-zinc-950 text-zinc-100 shadow-sm',
+		'flex flex-col overflow-hidden rounded-xl border border-border bg-surface-elevated text-primary shadow-sm',
 		className
 	]}
 >
 	{#if filename || language}
-		<div class="flex items-center justify-between border-b border-zinc-800 bg-zinc-900/80 px-3 py-1.5">
-			<span class="truncate font-mono text-[11px] text-zinc-400">{filename || language}</span>
-			<span class="rounded bg-zinc-800 px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wide text-zinc-500">
+		<div
+			class="flex shrink-0 items-center justify-between border-b border-border bg-surface-overlay/80 px-3 py-1.5"
+		>
+			<span class="truncate font-mono text-[11px] text-secondary">{filename || language}</span>
+			<span
+				class="rounded bg-surface-overlay px-1.5 py-0.5 font-mono text-[10px] tracking-wide text-muted uppercase"
+			>
 				{language}
 			</span>
 		</div>
 	{/if}
 
-	<div class="relative flex" style:min-height={`${minHeight}px`}>
+	<div class="relative flex min-h-0 flex-1" style:min-height={`${minHeight}px`}>
 		{#if showLineNumbers}
 			<div
-				class="select-none border-r border-zinc-800 bg-zinc-950/80 py-3 pl-3 pr-2 text-right font-mono text-[11px] leading-5 text-zinc-600"
+				class="select-none border-r border-border bg-surface-overlay/60 py-3 pr-2 pl-3 text-right font-mono text-[11px] leading-5 text-muted"
 				aria-hidden="true"
 			>
 				{#each lineNums as n (n)}
@@ -82,11 +86,10 @@
 			</div>
 		{/if}
 
-		<div class="relative min-w-0 flex-1">
+		<div class="relative min-h-0 min-w-0 flex-1">
 			<textarea
 				bind:this={textareaEl}
-				class="absolute inset-0 z-10 h-full w-full resize-none bg-transparent p-3 font-mono text-[12px] leading-5 text-transparent caret-zinc-100 outline-none selection:bg-brand-500/40"
-				style:min-height={`${minHeight}px`}
+				class="absolute inset-0 z-10 h-full w-full resize-none bg-transparent p-3 font-mono text-[12px] leading-5 text-transparent caret-[var(--text-primary)] outline-none selection:bg-brand-500/40"
 				{value}
 				{readonly}
 				{placeholder}
@@ -100,7 +103,7 @@
 			></textarea>
 			<pre
 				bind:this={preEl}
-				class="pointer-events-none absolute inset-0 overflow-auto whitespace-pre p-3 font-mono text-[12px] leading-5 text-zinc-200"
+				class="pointer-events-none absolute inset-0 overflow-auto whitespace-pre p-3 font-mono text-[12px] leading-5 text-primary"
 				aria-hidden="true"
 			><code>{value || ' '}</code></pre>
 		</div>

package/dist/components/molecules/ColorPicker/ColorPicker.svelte

@@ -45,6 +45,9 @@
 
 	let rootEl = $state<HTMLDivElement | null>(null);
 	let svEl = $state<HTMLDivElement | null>(null);
+	let triggerEl = $state<HTMLButtonElement | null>(null);
+	let panelEl = $state<HTMLDivElement | null>(null);
+	let panelStyle = $state('');
 
 	let hue = $state(250);
 	let sat = $state(0.72);
@@ -53,6 +56,8 @@
 	let dragging: 'sv' | 'hue' | 'alpha' | null = null;
 	let syncing = false;
 
+	const panelId = `color-picker-${Math.random().toString(36).slice(2, 9)}`;
+
 	const rgba = $derived(hsvToRgb(hue, sat, val));
 
 	const preview = $derived(
@@ -66,10 +71,11 @@
 		const parsed = parseColor(value);
 		if (!parsed) return;
 		const hsv = rgbToHsv(parsed.r, parsed.g, parsed.b);
-		hue = hsv.h;
-		sat = hsv.s;
-		val = hsv.v;
-		alp = alpha ? parsed.a : 1;
+		if (hue !== hsv.h) hue = hsv.h;
+		if (sat !== hsv.s) sat = hsv.s;
+		if (val !== hsv.v) val = hsv.v;
+		const nextAlp = alpha ? parsed.a : 1;
+		if (alp !== nextAlp) alp = nextAlp;
 	});
 
 	function commit() {
@@ -96,15 +102,11 @@
 		commit();
 	}
 
-	function onDocPointerDown(e: PointerEvent) {
-		if (!open || !rootEl) return;
-		const path = typeof e.composedPath === 'function' ? e.composedPath() : [];
-		if (path.includes(rootEl) || rootEl.contains(e.target as Node)) return;
-		open = false;
-	}
-
 	function onKey(e: KeyboardEvent) {
-		if (e.key === 'Escape' && open) open = false;
+		if (e.key === 'Escape' && open) {
+			open = false;
+			hidePanel();
+		}
 	}
 
 	function onPointer(e: PointerEvent) {
@@ -162,25 +164,77 @@
 			Math.abs(pa.a - pb.a) < 0.01
 		);
 	}
+
+	function positionPanel() {
+		if (!triggerEl) return;
+		const rect = triggerEl.getBoundingClientRect();
+		const gap = 8;
+		const panelW = 288;
+		const approxH = 340;
+		const spaceBelow = window.innerHeight - rect.bottom - gap;
+		const spaceAbove = rect.top - gap;
+		const openUp = spaceBelow < Math.min(approxH, 220) && spaceAbove > spaceBelow;
+		const left = Math.min(Math.max(8, rect.left), window.innerWidth - panelW - 8);
+		panelStyle = [
+			`top:${openUp ? 'auto' : `${rect.bottom + gap}px`}`,
+			`bottom:${openUp ? `${window.innerHeight - rect.top + gap}px` : 'auto'}`,
+			`left:${left}px`,
+			`width:${panelW}px`,
+			`margin:0`
+		].join(';');
+	}
+
+	function showPanel() {
+		if (disabled || !panelEl) return;
+		positionPanel();
+		if (!panelEl.matches(':popover-open')) panelEl.showPopover();
+	}
+
+	function hidePanel() {
+		if (panelEl?.matches(':popover-open')) panelEl.hidePopover();
+	}
+
+	function togglePanel() {
+		if (disabled) return;
+		if (panelEl?.matches(':popover-open')) hidePanel();
+		else showPanel();
+	}
+
+	function handleBeforeToggle(event: ToggleEvent) {
+		if (event.newState === 'open') {
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
+			positionPanel();
+		}
+	}
+
+	function handleToggle(event: ToggleEvent) {
+		open = event.newState === 'open';
+	}
 </script>
 
-<svelte:document
-	onpointerdown={onDocPointerDown}
-	onkeydown={onKey}
-	onpointermove={onPointer}
-	onpointerup={onPointerUp}
+<svelte:window
+	onscroll={() => open && positionPanel()}
+	onresize={() => open && positionPanel()}
 />
 
-<div class={['relative w-full max-w-xs', className]} bind:this={rootEl}>
+<svelte:document onkeydown={onKey} onpointermove={onPointer} onpointerup={onPointerUp} />
+
+<div class={['relative w-full min-w-0', className]} bind:this={rootEl}>
 	{#if label}
 		<span class="mb-1.5 block text-sm font-medium text-primary">{label}</span>
 	{/if}
 
 	<button
 		type="button"
+		bind:this={triggerEl}
 		{disabled}
 		aria-expanded={open}
-		onclick={() => !disabled && (open = !open)}
+		aria-controls={panelId}
+		aria-haspopup="dialog"
+		onclick={togglePanel}
 		class={[
 			'flex h-10 w-full items-center gap-2.5 rounded-xl border border-border bg-surface-elevated px-2.5 text-left transition-colors',
 			'hover:bg-surface-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/20',
@@ -197,99 +251,115 @@
 		</svg>
 	</button>
 
-	{#if open}
+	<div
+		bind:this={panelEl}
+		id={panelId}
+		popover="auto"
+		role="dialog"
+		aria-label="Color picker"
+		class="color-picker-panel z-50 rounded-2xl border border-border bg-surface-elevated p-3 shadow-xl"
+		style={panelStyle}
+		onbeforetoggle={handleBeforeToggle}
+		ontoggle={handleToggle}
+	>
 		<div
-			role="dialog"
-			aria-label="Color picker"
-			class="absolute left-0 z-50 mt-2 w-72 rounded-2xl border border-border bg-surface-elevated p-3 shadow-xl"
+			bind:this={svEl}
+			role="presentation"
+			class="relative h-36 w-full cursor-crosshair touch-none overflow-hidden rounded-xl"
+			style:background={`linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${hue} 100% 50%))`}
+			onpointerdown={startSv}
 		>
-			<!-- Saturation / Value -->
-			<div
-				bind:this={svEl}
-				role="presentation"
-				class="relative h-36 w-full cursor-crosshair touch-none overflow-hidden rounded-xl"
-				style:background={`linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${hue} 100% 50%))`}
-				onpointerdown={startSv}
-			>
-				<span
-					class="pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow"
-					style:left={`${sat * 100}%`}
-					style:top={`${(1 - val) * 100}%`}
-					style:background={preview}
-				></span>
-			</div>
+			<span
+				class="pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow"
+				style:left={`${sat * 100}%`}
+				style:top={`${(1 - val) * 100}%`}
+				style:background={preview}
+			></span>
+		</div>
 
-			<!-- Hue -->
-			<label class="mt-3 block">
-				<span class="sr-only">Hue</span>
+		<label class="mt-3 block">
+			<span class="sr-only">Hue</span>
+			<input
+				type="range"
+				min="0"
+				max="360"
+				step="1"
+				value={hue}
+				oninput={onHueInput}
+				class="cp-hue h-3 w-full cursor-pointer appearance-none rounded-full"
+			/>
+		</label>
+
+		{#if alpha}
+			<label class="mt-2 block">
+				<span class="sr-only">Opacity</span>
 				<input
 					type="range"
 					min="0"
-					max="360"
-					step="1"
-					value={hue}
-					oninput={onHueInput}
-					class="cp-hue h-3 w-full cursor-pointer appearance-none rounded-full"
+					max="1"
+					step="0.01"
+					value={alp}
+					oninput={onAlphaInput}
+					class="cp-alpha h-3 w-full cursor-pointer appearance-none rounded-full"
+					style:--cp-alpha-color={`rgba(${rgba.r},${rgba.g},${rgba.b},1)`}
 				/>
 			</label>
-
+		{/if}
+
+		<div class="mt-3 flex items-center gap-2">
+			<span class="cp-checker relative h-9 w-9 shrink-0 overflow-hidden rounded-lg border border-border">
+				<span class="absolute inset-0" style:background={preview}></span>
+			</span>
+			<input
+				type="text"
+				value={formatted}
+				onchange={onHexInput}
+				onkeydown={(e) => e.key === 'Enter' && onHexInput(e)}
+				class="h-9 min-w-0 flex-1 rounded-lg border border-border bg-surface px-2.5 font-mono text-xs text-primary outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20"
+				aria-label="Color value"
+			/>
 			{#if alpha}
-				<label class="mt-2 block">
-					<span class="sr-only">Opacity</span>
-					<input
-						type="range"
-						min="0"
-						max="1"
-						step="0.01"
-						value={alp}
-						oninput={onAlphaInput}
-						class="cp-alpha h-3 w-full cursor-pointer appearance-none rounded-full"
-						style:--cp-alpha-color={`rgb(${rgba.r},${rgba.g},${rgba.b},1)`}
-					/>
-				</label>
-			{/if}
-
-			<div class="mt-3 flex items-center gap-2">
-				<span class="cp-checker relative h-9 w-9 shrink-0 overflow-hidden rounded-lg border border-border">
-					<span class="absolute inset-0" style:background={preview}></span>
+				<span class="w-10 shrink-0 text-right font-mono text-[11px] text-muted">
+					{Math.round(alp * 100)}%
 				</span>
-				<input
-					type="text"
-					value={formatted}
-					onchange={onHexInput}
-					onkeydown={(e) => e.key === 'Enter' && onHexInput(e)}
-					class="h-9 min-w-0 flex-1 rounded-lg border border-border bg-surface px-2.5 font-mono text-xs text-primary outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20"
-					aria-label="Color value"
-				/>
-				{#if alpha}
-					<span class="w-10 shrink-0 text-right font-mono text-[11px] text-muted">
-						{Math.round(alp * 100)}%
-					</span>
-				{/if}
-			</div>
-
-			{#if showSwatches}
-				<div class="mt-3 flex flex-wrap gap-1.5">
-					{#each swatches as swatch (swatch)}
-						<button
-							type="button"
-							onclick={() => pickSwatch(swatch)}
-							class={[
-								'cp-checker relative h-7 w-7 overflow-hidden rounded-full border border-border transition-transform hover:scale-110',
-								sameColor(value, swatch) && 'ring-2 ring-brand-500 ring-offset-2 ring-offset-surface-elevated'
-							]}
-							aria-label={`Select ${swatch}`}
-						>
-							<span class="absolute inset-0" style:background={swatch}></span>
-						</button>
-					{/each}
-				</div>
 			{/if}
 		</div>
-	{/if}
+
+		{#if showSwatches}
+			<div class="mt-3 flex flex-wrap gap-1.5">
+				{#each swatches as swatch (swatch)}
+					<button
+						type="button"
+						onclick={() => pickSwatch(swatch)}
+						class={[
+							'cp-checker relative h-7 w-7 overflow-hidden rounded-full border border-border transition-transform hover:scale-110',
+							sameColor(value, swatch) &&
+								'ring-2 ring-brand-500 ring-offset-2 ring-offset-surface-elevated'
+						]}
+						aria-label={`Select ${swatch}`}
+					>
+						<span class="absolute inset-0" style:background={swatch}></span>
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
 </div>
 
 <style>
+
+	.color-picker-panel {
+		position: fixed;
+	}
+
+	.color-picker-panel:popover-open {
+		display: block;
+	}
+
+	.color-picker-panel:not(:popover-open) {
+		display: none;
+	}
+
 	.cp-checker {
 		background-color: #fff;
 		background-image:

package/dist/components/molecules/ColumnVisibilityMenu/ColumnVisibilityMenu.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<Record<string, never>, {}, "">;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/molecules/ColumnVisibilityMenu/ColumnVisibilityMenu.stories.js

@@ -0,0 +1,8 @@
+import ColumnVisibilityMenuStory from './ColumnVisibilityMenuStory.svelte';
+const meta = {
+    title: 'Molecules/ColumnVisibilityMenu',
+    component: ColumnVisibilityMenuStory,
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {};

package/dist/components/molecules/ColumnVisibilityMenu/ColumnVisibilityMenu.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import Checkbox from '../../atoms/Checkbox/Checkbox.svelte';
+	import Button from '../../atoms/Button/Button.svelte';
+
+	export interface ColumnVisibilityItem {
+		id: string;
+		label: string;
+		visible?: boolean;
+		locked?: boolean;
+	}
+
+	interface ColumnVisibilityMenuProps {
+		columns?: ColumnVisibilityItem[];
+		/** Alternative API: ids that are hidden */
+		hiddenIds?: string[];
+		title?: string;
+		class?: string;
+		onchange?: (columns: ColumnVisibilityItem[]) => void;
+		onhiddenchange?: (hiddenIds: string[]) => void;
+	}
+
+	let {
+		columns = $bindable<ColumnVisibilityItem[]>([]),
+		hiddenIds = $bindable<string[]>([]),
+		title = 'Columns',
+		class: className = '',
+		onchange,
+		onhiddenchange
+	}: ColumnVisibilityMenuProps = $props();
+
+	const items = $derived.by(() => {
+		if (columns.length) {
+			return columns.map((c) => ({
+				...c,
+				visible: hiddenIds.length
+					? !hiddenIds.includes(c.id)
+					: (c.visible ?? true)
+			}));
+		}
+		return [];
+	});
+
+	function emit(next: ColumnVisibilityItem[]) {
+		columns = next;
+		const hidden = next.filter((c) => c.visible === false).map((c) => c.id);
+		hiddenIds = hidden;
+		onchange?.(next);
+		onhiddenchange?.(hidden);
+	}
+
+	function toggle(id: string) {
+		const next = items.map((c) =>
+			c.id === id && !c.locked ? { ...c, visible: !(c.visible ?? true) } : c
+		);
+		emit(next);
+	}
+
+	function showAll() {
+		emit(items.map((c) => (c.locked ? c : { ...c, visible: true })));
+	}
+
+	function hideOptional() {
+		emit(items.map((c) => (c.locked ? c : { ...c, visible: false })));
+	}
+</script>
+
+<div
+	class={[
+		'w-56 overflow-hidden rounded-xl border border-border bg-surface-elevated shadow-lg',
+		className
+	]}
+	data-column-visibility-menu
+	role="group"
+	aria-label={title}
+>
+	<div class="flex items-center justify-between border-b border-border px-3 py-2">
+		<span class="text-xs font-semibold uppercase tracking-wide text-muted">{title}</span>
+		<div class="flex gap-1">
+			<Button size="sm" variant="ghost" onclick={showAll}>All</Button>
+			<Button size="sm" variant="ghost" onclick={hideOptional}>None</Button>
+		</div>
+	</div>
+	<ul class="max-h-64 overflow-auto p-1">
+		{#each items as col (col.id)}
+			<li>
+				<label
+					class={[
+						'flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-primary hover:bg-surface-overlay',
+						col.locked ? 'opacity-60' : ''
+					]}
+				>
+					<Checkbox
+						checked={col.visible !== false}
+						disabled={!!col.locked}
+						onchange={(checked) => {
+							if (checked === (col.visible !== false)) return;
+							toggle(col.id);
+						}}
+					/>
+					<span class="truncate">{col.label}</span>
+				</label>
+			</li>
+		{/each}
+		{#if !items.length}
+			<li class="px-2 py-4 text-center text-xs text-muted">No columns</li>
+		{/if}
+	</ul>
+</div>

package/dist/components/molecules/ColumnVisibilityMenu/ColumnVisibilityMenu.svelte.d.ts

@@ -0,0 +1,18 @@
+export interface ColumnVisibilityItem {
+    id: string;
+    label: string;
+    visible?: boolean;
+    locked?: boolean;
+}
+interface ColumnVisibilityMenuProps {
+    columns?: ColumnVisibilityItem[];
+    /** Alternative API: ids that are hidden */
+    hiddenIds?: string[];
+    title?: string;
+    class?: string;
+    onchange?: (columns: ColumnVisibilityItem[]) => void;
+    onhiddenchange?: (hiddenIds: string[]) => void;
+}
+declare const ColumnVisibilityMenu: import("svelte").Component<ColumnVisibilityMenuProps, {}, "columns" | "hiddenIds">;
+type ColumnVisibilityMenu = ReturnType<typeof ColumnVisibilityMenu>;
+export default ColumnVisibilityMenu;

package/dist/components/molecules/ColumnVisibilityMenu/ColumnVisibilityMenuStory.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import ColumnVisibilityMenu from './ColumnVisibilityMenu.svelte';
+	import type { ColumnVisibilityItem } from './ColumnVisibilityMenu.svelte';
+
+	let columns = $state<ColumnVisibilityItem[]>([
+		{ id: 'name', label: 'Name', locked: true },
+		{ id: 'email', label: 'Email', visible: true },
+		{ id: 'role', label: 'Role', visible: true },
+		{ id: 'created', label: 'Created', visible: false }
+	]);
+</script>
+
+<div class="p-6">
+	<ColumnVisibilityMenu bind:columns />
+</div>

package/dist/components/molecules/ColumnVisibilityMenu/ColumnVisibilityMenuStory.svelte.d.ts

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

package/dist/components/molecules/ConditionalFormatPanel/ConditionalFormatPanel.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<Record<string, never>, {}, "">;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/molecules/ConditionalFormatPanel/ConditionalFormatPanel.stories.js

@@ -0,0 +1,8 @@
+import ConditionalFormatPanelStory from './ConditionalFormatPanelStory.svelte';
+const meta = {
+    title: 'Molecules/ConditionalFormatPanel',
+    component: ConditionalFormatPanelStory,
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {};