@bysages/svelte 0.3.0 → 0.4.0

package/dist/StepsRoot-Dg_3-lRb.mjs

@@ -1,37 +0,0 @@
-import { injectComponentStyle } from "@bysages/core";
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
-import { Steps } from "@ark-ui/svelte/steps";
-//#region src/components/steps/StepsRoot.svelte
-var rest_excludes = /* @__PURE__ */ new Set([
-	"$$slots",
-	"$$events",
-	"$$legacy",
-	"size",
-	"children"
-]);
-function StepsRoot($$anchor, $$props) {
-	$.push($$props, true);
-	injectComponentStyle("steps");
-	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
-	var fragment = $.comment();
-	var node = $.first_child(fragment);
-	$.component(node, () => Steps.Root, ($$anchor, ArkSteps_Root) => {
-		ArkSteps_Root($$anchor, $.spread_props(() => rest, {
-			get "data-size"() {
-				return size();
-			},
-			children: ($$anchor, $$slotProps) => {
-				var fragment_1 = $.comment();
-				var node_1 = $.first_child(fragment_1);
-				$.snippet(node_1, () => $$props.children ?? $.noop);
-				$.append($$anchor, fragment_1);
-			},
-			$$slots: { default: true }
-		}));
-	});
-	$.append($$anchor, fragment);
-	$.pop();
-}
-//#endregion
-export { StepsRoot as t };

package/dist/SwitchRoot-C7rPmjEA.mjs

@@ -1,37 +0,0 @@
-import { injectComponentStyle } from "@bysages/core";
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
-import { Switch } from "@ark-ui/svelte/switch";
-//#region src/components/switch/SwitchRoot.svelte
-var rest_excludes = /* @__PURE__ */ new Set([
-	"$$slots",
-	"$$events",
-	"$$legacy",
-	"size",
-	"children"
-]);
-function SwitchRoot($$anchor, $$props) {
-	$.push($$props, true);
-	injectComponentStyle("switch");
-	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
-	var fragment = $.comment();
-	var node = $.first_child(fragment);
-	$.component(node, () => Switch.Root, ($$anchor, ArkSwitch_Root) => {
-		ArkSwitch_Root($$anchor, $.spread_props(() => rest, {
-			get "data-size"() {
-				return size();
-			},
-			children: ($$anchor, $$slotProps) => {
-				var fragment_1 = $.comment();
-				var node_1 = $.first_child(fragment_1);
-				$.snippet(node_1, () => $$props.children ?? $.noop);
-				$.append($$anchor, fragment_1);
-			},
-			$$slots: { default: true }
-		}));
-	});
-	$.append($$anchor, fragment);
-	$.pop();
-}
-//#endregion
-export { SwitchRoot as t };

package/dist/TabsRoot-DXd41HqW.mjs

@@ -1,41 +0,0 @@
-import { injectComponentStyle } from "@bysages/core";
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
-import { Tabs } from "@ark-ui/svelte/tabs";
-//#region src/components/tabs/TabsRoot.svelte
-var rest_excludes = /* @__PURE__ */ new Set([
-	"$$slots",
-	"$$events",
-	"$$legacy",
-	"size",
-	"variant",
-	"children"
-]);
-function TabsRoot($$anchor, $$props) {
-	$.push($$props, true);
-	injectComponentStyle("tabs");
-	let size = $.prop($$props, "size", 3, "md"), variant = $.prop($$props, "variant", 3, "line"), rest = $.rest_props($$props, rest_excludes);
-	var fragment = $.comment();
-	var node = $.first_child(fragment);
-	$.component(node, () => Tabs.Root, ($$anchor, ArkTabs_Root) => {
-		ArkTabs_Root($$anchor, $.spread_props(() => rest, {
-			get "data-size"() {
-				return size();
-			},
-			get "data-variant"() {
-				return variant();
-			},
-			children: ($$anchor, $$slotProps) => {
-				var fragment_1 = $.comment();
-				var node_1 = $.first_child(fragment_1);
-				$.snippet(node_1, () => $$props.children ?? $.noop);
-				$.append($$anchor, fragment_1);
-			},
-			$$slots: { default: true }
-		}));
-	});
-	$.append($$anchor, fragment);
-	$.pop();
-}
-//#endregion
-export { TabsRoot as t };

package/dist/TagsInputRoot-COSQdHRz.mjs

@@ -1,37 +0,0 @@
-import { injectComponentStyle } from "@bysages/core";
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
-import { TagsInput } from "@ark-ui/svelte/tags-input";
-//#region src/components/tags-input/TagsInputRoot.svelte
-var rest_excludes = /* @__PURE__ */ new Set([
-	"$$slots",
-	"$$events",
-	"$$legacy",
-	"size",
-	"children"
-]);
-function TagsInputRoot($$anchor, $$props) {
-	$.push($$props, true);
-	injectComponentStyle("tags-input");
-	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
-	var fragment = $.comment();
-	var node = $.first_child(fragment);
-	$.component(node, () => TagsInput.Root, ($$anchor, ArkTagsInput_Root) => {
-		ArkTagsInput_Root($$anchor, $.spread_props(() => rest, {
-			get "data-size"() {
-				return size();
-			},
-			children: ($$anchor, $$slotProps) => {
-				var fragment_1 = $.comment();
-				var node_1 = $.first_child(fragment_1);
-				$.snippet(node_1, () => $$props.children ?? $.noop);
-				$.append($$anchor, fragment_1);
-			},
-			$$slots: { default: true }
-		}));
-	});
-	$.append($$anchor, fragment);
-	$.pop();
-}
-//#endregion
-export { TagsInputRoot as t };

package/dist/ToggleGroupRoot-D0ob9z4u.mjs

@@ -1,37 +0,0 @@
-import { injectComponentStyle } from "@bysages/core";
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
-import { ToggleGroup } from "@ark-ui/svelte/toggle-group";
-//#region src/components/toggle-group/ToggleGroupRoot.svelte
-var rest_excludes = /* @__PURE__ */ new Set([
-	"$$slots",
-	"$$events",
-	"$$legacy",
-	"size",
-	"children"
-]);
-function ToggleGroupRoot($$anchor, $$props) {
-	$.push($$props, true);
-	injectComponentStyle("toggle-group");
-	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
-	var fragment = $.comment();
-	var node = $.first_child(fragment);
-	$.component(node, () => ToggleGroup.Root, ($$anchor, ArkToggleGroup_Root) => {
-		ArkToggleGroup_Root($$anchor, $.spread_props(() => rest, {
-			get "data-size"() {
-				return size();
-			},
-			children: ($$anchor, $$slotProps) => {
-				var fragment_1 = $.comment();
-				var node_1 = $.first_child(fragment_1);
-				$.snippet(node_1, () => $$props.children ?? $.noop);
-				$.append($$anchor, fragment_1);
-			},
-			$$slots: { default: true }
-		}));
-	});
-	$.append($$anchor, fragment);
-	$.pop();
-}
-//#endregion
-export { ToggleGroupRoot as t };

package/dist/TreeViewRoot-ConQj9TX.mjs

@@ -1,37 +0,0 @@
-import { injectComponentStyle } from "@bysages/core";
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
-import { TreeView } from "@ark-ui/svelte/tree-view";
-//#region src/components/tree-view/TreeViewRoot.svelte
-var rest_excludes = /* @__PURE__ */ new Set([
-	"$$slots",
-	"$$events",
-	"$$legacy",
-	"size",
-	"children"
-]);
-function TreeViewRoot($$anchor, $$props) {
-	$.push($$props, true);
-	injectComponentStyle("tree-view");
-	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
-	var fragment = $.comment();
-	var node = $.first_child(fragment);
-	$.component(node, () => TreeView.Root, ($$anchor, ArkTreeView_Root) => {
-		ArkTreeView_Root($$anchor, $.spread_props(() => rest, {
-			get "data-size"() {
-				return size();
-			},
-			children: ($$anchor, $$slotProps) => {
-				var fragment_1 = $.comment();
-				var node_1 = $.first_child(fragment_1);
-				$.snippet(node_1, () => $$props.children ?? $.noop);
-				$.append($$anchor, fragment_1);
-			},
-			$$slots: { default: true }
-		}));
-	});
-	$.append($$anchor, fragment);
-	$.pop();
-}
-//#endregion
-export { TreeViewRoot as t };

package/dist/checkbox-group-ARW_z7gp.mjs

@@ -1,130 +0,0 @@
-import { injectComponentStyle } from "@bysages/core";
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
-import { useFieldContext } from "@ark-ui/svelte/field";
-import { Checkbox } from "@ark-ui/svelte/checkbox";
-//#region src/components/checkbox-group/CheckboxGroup.svelte
-var rest_excludes = /* @__PURE__ */ new Set([
-	"$$slots",
-	"$$events",
-	"$$legacy",
-	"value",
-	"options",
-	"layout",
-	"size",
-	"invalid",
-	"disabled"
-]);
-var root = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12.5 5 5L19 7"></path></svg>`);
-var root_1 = $.from_html(`<!> <!> <!>`, 1);
-var root_2 = $.from_html(`<div></div>`);
-function CheckboxGroup$1($$anchor, $$props) {
-	const uid = $.props_id();
-	$.push($$props, true);
-	injectComponentStyle("checkbox-group");
-	let value = $.prop($$props, "value", 31, () => $.proxy([])), layout = $.prop($$props, "layout", 3, "vertical"), size = $.prop($$props, "size", 3, "md"), invalid = $.prop($$props, "invalid", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
-	const field = useFieldContext();
-	const selected = $.derived(() => new Set(value()));
-	const isInvalid = $.derived(() => invalid() || field?.()?.invalid === true);
-	const isDisabled = $.derived(() => disabled() || field?.()?.disabled === true);
-	function toggle(option) {
-		const next = new Set($.get(selected));
-		if (next.has(option)) next.delete(option);
-		else next.add(option);
-		value([...next]);
-	}
-	var div = root_2();
-	$.attribute_effect(div, () => ({
-		...rest,
-		role: "group",
-		"data-scope": "checkbox-group",
-		"data-part": "root",
-		"data-layout": layout(),
-		"data-invalid": $.get(isInvalid) ? "" : void 0
-	}));
-	$.each(div, 21, () => $$props.options, (option) => option.value, ($$anchor, option) => {
-		var fragment = $.comment();
-		var node = $.first_child(fragment);
-		{
-			let $0 = $.derived(() => ({
-				label: `${uid}:${$.get(option).value}:label`,
-				hiddenInput: `${uid}:${$.get(option).value}:input`
-			}));
-			let $1 = $.derived(() => $.get(selected).has($.get(option).value));
-			let $2 = $.derived(() => $.get(isDisabled) || $.get(option).disabled === true);
-			$.component(node, () => Checkbox.Root, ($$anchor, ArkCheckbox_Root) => {
-				ArkCheckbox_Root($$anchor, {
-					get ids() {
-						return $.get($0);
-					},
-					get checked() {
-						return $.get($1);
-					},
-					get invalid() {
-						return $.get(isInvalid);
-					},
-					get "data-size"() {
-						return size();
-					},
-					get disabled() {
-						return $.get($2);
-					},
-					onCheckedChange: () => toggle($.get(option).value),
-					children: ($$anchor, $$slotProps) => {
-						var fragment_1 = root_1();
-						var node_1 = $.first_child(fragment_1);
-						$.component(node_1, () => Checkbox.Control, ($$anchor, ArkCheckbox_Control) => {
-							ArkCheckbox_Control($$anchor, {
-								children: ($$anchor, $$slotProps) => {
-									var fragment_2 = $.comment();
-									var node_2 = $.first_child(fragment_2);
-									$.component(node_2, () => Checkbox.Indicator, ($$anchor, ArkCheckbox_Indicator) => {
-										ArkCheckbox_Indicator($$anchor, {
-											children: ($$anchor, $$slotProps) => {
-												var svg = root();
-												$.append($$anchor, svg);
-											},
-											$$slots: { default: true }
-										});
-									});
-									$.append($$anchor, fragment_2);
-								},
-								$$slots: { default: true }
-							});
-						});
-						var node_3 = $.sibling(node_1, 2);
-						$.component(node_3, () => Checkbox.Label, ($$anchor, ArkCheckbox_Label) => {
-							ArkCheckbox_Label($$anchor, {
-								children: ($$anchor, $$slotProps) => {
-									$.next();
-									var text = $.text();
-									$.template_effect(() => $.set_text(text, $.get(option).label));
-									$.append($$anchor, text);
-								},
-								$$slots: { default: true }
-							});
-						});
-						var node_4 = $.sibling(node_3, 2);
-						$.component(node_4, () => Checkbox.HiddenInput, ($$anchor, ArkCheckbox_HiddenInput) => {
-							ArkCheckbox_HiddenInput($$anchor, {});
-						});
-						$.append($$anchor, fragment_1);
-					},
-					$$slots: { default: true }
-				});
-			});
-		}
-		$.append($$anchor, fragment);
-	});
-	$.reset(div);
-	$.append($$anchor, div);
-	$.pop();
-}
-//#endregion
-//#region src/components/checkbox-group/index.ts
-/** One question, many answers: a labelled stack (or row) of the
-* seal-cut checkboxes bound to a single array. */
-const CheckboxGroup = CheckboxGroup$1;
-injectComponentStyle("checkbox");
-//#endregion
-export { CheckboxGroup as t };

package/dist/image-viewer-Dv3_Iyu8.mjs

@@ -1,186 +0,0 @@
-import { t as Button } from "./button-BCcX7lHq.mjs";
-import { t as ButtonGroup } from "./button-group-CVLqPMlR.mjs";
-import { injectComponentStyle } from "@bysages/core";
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
-import { Portal } from "@ark-ui/svelte/portal";
-import { Dialog } from "@ark-ui/svelte/dialog";
-//#region src/components/image-viewer/ImageViewer.svelte
-const tool = ($$anchor, label = $.noop, onclick = $.noop, glyph = $.noop) => {
-	Button($$anchor, {
-		variant: "ghost",
-		square: true,
-		size: "lg",
-		get "aria-label"() {
-			return label();
-		},
-		get onclick() {
-			return onclick();
-		},
-		children: ($$anchor, $$slotProps) => {
-			var svg = root();
-			var node = $.child(svg);
-			$.snippet(node, glyph);
-			$.reset(svg);
-			$.append($$anchor, svg);
-		},
-		$$slots: { default: true }
-	});
-};
-const zoomIn = ($$anchor) => {
-	var fragment_1 = root_1();
-	$.next(3);
-	$.append($$anchor, fragment_1);
-};
-const zoomOut = ($$anchor) => {
-	var fragment_2 = root_2();
-	$.next(2);
-	$.append($$anchor, fragment_2);
-};
-const turnGlyph = ($$anchor) => {
-	var fragment_3 = root_3();
-	$.next();
-	$.append($$anchor, fragment_3);
-};
-const closeGlyph = ($$anchor) => {
-	var fragment_4 = root_4();
-	$.next();
-	$.append($$anchor, fragment_4);
-};
-var root = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><!></svg>`);
-var root_1 = $.from_svg(`<circle cx="11" cy="11" r="7"></circle><path d="m16.2 16.2 4.8 4.8"></path><path d="M8 11h6"></path><path d="M11 8v6"></path>`, 1);
-var root_2 = $.from_svg(`<circle cx="11" cy="11" r="7"></circle><path d="m16.2 16.2 4.8 4.8"></path><path d="M8 11h6"></path>`, 1);
-var root_3 = $.from_svg(`<path d="M20.49 12A8.5 8.5 0 1 1 18 6.06"></path><path d="M20.5 3.5v4h-4"></path>`, 1);
-var root_4 = $.from_svg(`<path d="m6 6 12 12"></path><path d="M18 6 6 18"></path>`, 1);
-var root_5 = $.from_html(`<!> <!>`, 1);
-var root_6 = $.from_html(`<!> <!> <!>`, 1);
-var root_7 = $.from_html(`<img data-scope="image-viewer" data-part="viewport"/> <div data-scope="image-viewer" data-part="toolbar"><!></div>`, 1);
-function ImageViewer$1($$anchor, $$props) {
-	$.push($$props, true);
-	injectComponentStyle("image-viewer");
-	const MIN_SCALE = .5;
-	const MAX_SCALE = 3;
-	const SCALE_STEP = .25;
-	let alt = $.prop($$props, "alt", 3, ""), open = $.prop($$props, "open", 15, false), zoomable = $.prop($$props, "zoomable", 3, true);
-	let scale = $.state(1);
-	let rotation = $.state(0);
-	function setOpen(value) {
-		open(value);
-		$$props.onOpenChange?.(value);
-	}
-	$.user_effect(() => {
-		if (open()) {
-			$.set(scale, 1);
-			$.set(rotation, 0);
-		}
-	});
-	function zoom(step) {
-		$.set(scale, Math.min(MAX_SCALE, Math.max(MIN_SCALE, $.get(scale) + step)), true);
-	}
-	function turn() {
-		$.set(rotation, ($.get(rotation) + 90) % 360);
-	}
-	var fragment_5 = $.comment();
-	var node_1 = $.first_child(fragment_5);
-	$.component(node_1, () => Dialog.Root, ($$anchor, ArkDialog_Root) => {
-		ArkDialog_Root($$anchor, {
-			get open() {
-				return open();
-			},
-			onOpenChange: (details) => setOpen(details.open),
-			lazyMount: true,
-			unmountOnExit: true,
-			children: ($$anchor, $$slotProps) => {
-				Portal($$anchor, {
-					children: ($$anchor, $$slotProps) => {
-						var fragment_7 = root_5();
-						var node_2 = $.first_child(fragment_7);
-						$.component(node_2, () => Dialog.Backdrop, ($$anchor, ArkDialog_Backdrop) => {
-							ArkDialog_Backdrop($$anchor, { class: "bs-image-viewer-backdrop" });
-						});
-						var node_3 = $.sibling(node_2, 2);
-						$.component(node_3, () => Dialog.Positioner, ($$anchor, ArkDialog_Positioner) => {
-							ArkDialog_Positioner($$anchor, {
-								class: "bs-image-viewer-positioner",
-								children: ($$anchor, $$slotProps) => {
-									var fragment_8 = $.comment();
-									var node_4 = $.first_child(fragment_8);
-									{
-										let $0 = $.derived(() => alt() || "Image preview");
-										$.component(node_4, () => Dialog.Content, ($$anchor, ArkDialog_Content) => {
-											ArkDialog_Content($$anchor, {
-												class: "bs-image-viewer-content",
-												get "aria-label"() {
-													return $.get($0);
-												},
-												onclick: (event) => {
-													if (event.target === event.currentTarget) setOpen(false);
-												},
-												children: ($$anchor, $$slotProps) => {
-													var fragment_9 = root_7();
-													var img = $.first_child(fragment_9);
-													let styles;
-													var div = $.sibling(img, 2);
-													var node_5 = $.child(div);
-													ButtonGroup(node_5, {
-														children: ($$anchor, $$slotProps) => {
-															var fragment_10 = root_6();
-															var node_6 = $.first_child(fragment_10);
-															var consequent = ($$anchor) => {
-																var fragment_11 = root_5();
-																var node_7 = $.first_child(fragment_11);
-																tool(node_7, () => "Zoom in", () => () => zoom(SCALE_STEP), () => zoomIn);
-																var node_8 = $.sibling(node_7, 2);
-																tool(node_8, () => "Zoom out", () => () => zoom(-.25), () => zoomOut);
-																$.append($$anchor, fragment_11);
-															};
-															$.if(node_6, ($$render) => {
-																if (zoomable()) $$render(consequent);
-															});
-															var node_9 = $.sibling(node_6, 2);
-															tool(node_9, () => "Rotate 90 degrees", () => turn, () => turnGlyph);
-															var node_10 = $.sibling(node_9, 2);
-															tool(node_10, () => "Close", () => () => setOpen(false), () => closeGlyph);
-															$.append($$anchor, fragment_10);
-														},
-														$$slots: { default: true }
-													});
-													$.reset(div);
-													$.template_effect(() => {
-														$.set_attribute(img, "src", $$props.src);
-														$.set_attribute(img, "alt", alt());
-														styles = $.set_style(img, "", styles, { transform: `scale(${$.get(scale)}) rotate(${$.get(rotation)}deg)` });
-													});
-													$.append($$anchor, fragment_9);
-												},
-												$$slots: { default: true }
-											});
-										});
-									}
-									$.append($$anchor, fragment_8);
-								},
-								$$slots: { default: true }
-							});
-						});
-						$.append($$anchor, fragment_7);
-					},
-					$$slots: { default: true }
-				});
-			},
-			$$slots: { default: true }
-		});
-	});
-	$.append($$anchor, fragment_5);
-	$.pop();
-}
-//#endregion
-//#region src/components/image-viewer/index.ts
-/** A lightbox: the picture over a dimmed page, with a small toolbar
-* beneath it. Zoom is the reader's hand (half to three times,
-* clamped), a quarter turn at a time rotates, Escape and the scrim
-* close — the dialog machine carries the modal part. `open` may stay
-* with the caller (`bind:open`); left alone the viewer keeps it to
-* itself. */
-const ImageViewer = ImageViewer$1;
-//#endregion
-export { ImageViewer as t };

package/dist/index-CV1LSzq5.d.mts

@@ -1,25 +0,0 @@
-import { Avatar } from "@ark-ui/svelte/avatar";
-//#region src/components/avatar/props.d.ts
-type AvatarSize = "sm" | "md" | "lg";
-interface AvatarProps {
-  /** Seal diameter: the small, medium, or large control rung. The
-   * default (large) stands as tall as the biggest control so an avatar
-   * rides a row without stretching it. */
-  size?: AvatarSize;
-  /** The corner: round by default; square cuts it sharp, a stamp
-   * beside a round portrait. */
-  shape?: "circle" | "square";
-  children?: import("svelte").Snippet;
-}
-//#endregion
-//#region src/components/avatar/index.d.ts
-/** Avatar, dressed in the paper-and-ink system: a circular seal on
- * inset paper that holds initials until the image loads over them.
- * `size` picks a control-height rung for the seal — the core styles
- * re-point `--bs-avatar-size` per rung, and scenes can still retune the
- * variable directly. */
-declare const Avatar$1: typeof Avatar & {
-  Root: import("svelte").Component<AvatarProps, {}, "">;
-};
-//#endregion
-export { Avatar$1 as t };

package/dist/index-CiHanb4T.d.mts

@@ -1,22 +0,0 @@
-//#region src/components/image-viewer/props.d.ts
-interface ImageViewerProps {
-  src: string;
-  alt?: string;
-  /** Whether the lightbox is up. Bind it (`bind:open`) to control the
-   * viewer; left alone it keeps the state to itself. */
-  open?: boolean;
-  zoomable?: boolean;
-  /** The viewer's open state turned. */
-  onOpenChange?: (open: boolean) => void;
-}
-//#endregion
-//#region src/components/image-viewer/index.d.ts
-/** A lightbox: the picture over a dimmed page, with a small toolbar
- * beneath it. Zoom is the reader's hand (half to three times,
- * clamped), a quarter turn at a time rotates, Escape and the scrim
- * close — the dialog machine carries the modal part. `open` may stay
- * with the caller (`bind:open`); left alone the viewer keeps it to
- * itself. */
-declare const ImageViewer: import("svelte").Component<ImageViewerProps, {}, "open">;
-//#endregion
-export { ImageViewerProps as n, ImageViewer as t };