@monimesl/dot-renderer-react 0.1.0-alpha.4 → 0.1.0-alpha.40

package/dist/components/prose.js

@@ -0,0 +1,67 @@
+import { useTheme } from "../theme.js";
+import { FONT_SIZE, SELECTABLE } from "./tokens.js";
+import { paddingStyle } from "./padding.js";
+import { InsideProse } from "./prose-context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/prose.tsx
+const READING_WIDTH = 680;
+const Prose = ({ children, ...padding }) => /* @__PURE__ */ jsx("div", {
+	className: "dot-prose",
+	style: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 12,
+		width: "100%",
+		maxWidth: READING_WIDTH,
+		marginInline: "auto",
+		...SELECTABLE,
+		...paddingStyle(padding)
+	},
+	children: /* @__PURE__ */ jsx(InsideProse.Provider, {
+		value: true,
+		children
+	})
+});
+const Quote = ({ cite, children }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsxs("blockquote", {
+		className: "dot-quote",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 6,
+			margin: 0,
+			paddingInlineStart: 14,
+			borderInlineStart: `3px solid ${colors.subtle}`,
+			fontStyle: "italic"
+		},
+		children: [children, cite && /* @__PURE__ */ jsxs("span", {
+			style: {
+				fontSize: FONT_SIZE.caption,
+				fontStyle: "normal",
+				color: colors.subtle
+			},
+			children: ["— ", cite]
+		})]
+	});
+};
+const BulletList = ({ ordered, children }) => {
+	return /* @__PURE__ */ jsx(ordered ? "ol" : "ul", {
+		className: "dot-bullets",
+		style: {
+			display: "grid",
+			gap: 6,
+			margin: 0,
+			paddingInlineStart: 22,
+			listStyleType: ordered ? "decimal" : "disc"
+		},
+		children
+	});
+};
+const Bullet = ({ children }) => /* @__PURE__ */ jsx("li", {
+	className: "dot-bullet",
+	style: { display: "list-item" },
+	children
+});
+//#endregion
+export { Bullet, BulletList, Prose, Quote };

package/dist/components/qr-code.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { QRCode } from "@monimesl/dot-core";
+//#region src/components/qr-code.d.ts
+declare const QRCode$1: ReactComponent<typeof QRCode>;
+//#endregion
+export { QRCode$1 as QRCode };

package/dist/components/qr-code.js

@@ -0,0 +1,58 @@
+import { useTheme } from "../theme.js";
+import { encode } from "../vendor/uqr/dist/index.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/qr-code.tsx
+const DARK = "#000000";
+const LIGHT = "#ffffff";
+const QUIET_ZONE = 2;
+const QRCode = ({ value, size = 200, label }) => {
+	const { radius } = useTheme();
+	const drawing = useMemo(() => value ? drawCode(value) : null, [value]);
+	return /* @__PURE__ */ jsxs("svg", {
+		className: "dot-qr-code",
+		role: "img",
+		"aria-label": label ?? value,
+		width: size,
+		height: size,
+		viewBox: drawing ? `0 0 ${drawing.size} ${drawing.size}` : "0 0 1 1",
+		shapeRendering: "crispEdges",
+		style: {
+			display: "block",
+			flexShrink: 0,
+			overflow: "hidden",
+			borderRadius: radius
+		},
+		children: [/* @__PURE__ */ jsx("rect", {
+			width: "100%",
+			height: "100%",
+			fill: LIGHT
+		}), drawing ? /* @__PURE__ */ jsx("path", {
+			d: drawing.path,
+			fill: DARK
+		}) : null]
+	});
+};
+function drawCode(value) {
+	let modules;
+	try {
+		modules = encode(value, {
+			ecc: "M",
+			border: QUIET_ZONE
+		}).data;
+	} catch {
+		return null;
+	}
+	const squares = [];
+	modules.forEach((row, y) => {
+		row.forEach((dark, x) => {
+			if (dark) squares.push(`M${x} ${y}h1v1h-1z`);
+		});
+	});
+	return {
+		size: modules.length,
+		path: squares.join("")
+	};
+}
+//#endregion
+export { QRCode };

package/dist/components/rich-text.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { RichText } from "@monimesl/dot-core";
+//#region src/components/rich-text.d.ts
+declare const RichText$1: ReactComponent<typeof RichText>;
+//#endregion
+export { RichText$1 as RichText };

package/dist/components/rich-text.js

@@ -0,0 +1,73 @@
+import { useTheme } from "../theme.js";
+import { Divider } from "./divider.js";
+import { Image } from "./image.js";
+import { isHttps } from "./https.js";
+import { Link } from "./link.js";
+import { Bullet, BulletList, Prose, Quote } from "./prose.js";
+import { parseMarkdown } from "../markdown.js";
+import { Text } from "./text.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/rich-text.tsx
+const HEADING_TEXT = {
+	1: { variant: "title" },
+	2: { variant: "subtitle" },
+	3: { weight: "bold" }
+};
+const RichText = ({ markdown }) => {
+	const blocks = useMemo(() => parseMarkdown(markdown ?? ""), [markdown]);
+	return /* @__PURE__ */ jsx(Prose, { children: blocks.map(renderBlock) });
+};
+function renderBlock(block, key) {
+	switch (block.kind) {
+		case "heading": return /* @__PURE__ */ jsx(Text, {
+			...HEADING_TEXT[block.level],
+			children: block.content.map(renderInline)
+		}, key);
+		case "paragraph": return /* @__PURE__ */ jsx(Text, { children: block.content.map(renderInline) }, key);
+		case "list": return /* @__PURE__ */ jsx(BulletList, {
+			ordered: block.ordered,
+			children: block.items.map((item, itemKey) => /* @__PURE__ */ jsx(Bullet, { children: item.map(renderBlock) }, itemKey))
+		}, key);
+		case "quote": return /* @__PURE__ */ jsx(Quote, { children: block.blocks.map(renderBlock) }, key);
+		case "image": return /* @__PURE__ */ jsx(Image, {
+			src: block.src,
+			alt: block.alt
+		}, key);
+		case "rule": return /* @__PURE__ */ jsx(Divider, {}, key);
+	}
+}
+function renderInline(inline, key) {
+	switch (inline.kind) {
+		case "text": return inline.text;
+		case "strong": return /* @__PURE__ */ jsx(Text, {
+			weight: "bold",
+			children: inline.children.map(renderInline)
+		}, key);
+		case "emphasis": return /* @__PURE__ */ jsx(Text, {
+			italic: true,
+			children: inline.children.map(renderInline)
+		}, key);
+		case "code": return /* @__PURE__ */ jsx(Code, { text: inline.text }, key);
+		case "link": return isHttps(inline.href) ? /* @__PURE__ */ jsx(Link, {
+			href: inline.href,
+			children: inline.children.map(renderInline)
+		}, key) : inline.children.map(renderInline);
+		case "break": return /* @__PURE__ */ jsx("br", {}, key);
+	}
+}
+function Code({ text }) {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsx("code", {
+		style: {
+			padding: "1px 4px",
+			borderRadius: 4,
+			background: colors.muted,
+			fontFamily: "ui-monospace, monospace",
+			fontSize: "0.9em"
+		},
+		children: text
+	});
+}
+//#endregion
+export { RichText };

package/dist/components/scroll.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { Scroll } from "@monimesl/dot-core";
+//#region src/components/scroll.d.ts
+declare const Scroll$1: ReactComponent<typeof Scroll>;
+//#endregion
+export { Scroll$1 as Scroll };

package/dist/components/scroll.js

@@ -0,0 +1,57 @@
+import { SPACE } from "./tokens.js";
+import { paddingStyle } from "./padding.js";
+import { createEvent } from "@monimesl/dot-core";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/scroll.tsx
+const REST_DELAY_MS = 120;
+const Scroll$1 = ({ gap = "medium", snap = "none", index, onChange, children, ...padding }) => {
+	const rowRef = useRef(null);
+	const reportedIndex = useRef(void 0);
+	const restTimer = useRef(void 0);
+	const paddingCss = paddingStyle(padding);
+	const startPadding = Number(paddingCss.paddingInlineStart);
+	useEffect(() => {
+		const element = rowRef.current;
+		if (index === void 0 || index === reportedIndex.current || !element) return;
+		const child = element.children[index];
+		if (child) {
+			reportedIndex.current = index;
+			element.scrollTo?.({
+				left: child.offsetLeft - startPadding,
+				behavior: "smooth"
+			});
+		}
+	}, [index, startPadding]);
+	useEffect(() => {
+		return () => clearTimeout(restTimer.current);
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		ref: rowRef,
+		className: "dot-scroll",
+		onScroll: onChange ? () => {
+			clearTimeout(restTimer.current);
+			restTimer.current = setTimeout(() => {
+				const element = rowRef.current;
+				if (!element) return;
+				const visibleStart = element.scrollLeft + startPadding;
+				const firstShownIndex = [...element.children].findIndex((item) => item.offsetLeft + item.offsetWidth / 2 >= visibleStart);
+				if (firstShownIndex !== -1 && firstShownIndex !== reportedIndex.current) {
+					reportedIndex.current = firstShownIndex;
+					onChange(createEvent("change", { index: firstShownIndex }));
+				}
+			}, REST_DELAY_MS);
+		} : void 0,
+		style: {
+			gap: SPACE[gap],
+			...paddingCss,
+			scrollPaddingInlineStart: paddingCss.paddingInlineStart,
+			scrollPaddingInlineEnd: paddingCss.paddingInlineEnd,
+			scrollSnapType: snap === "none" ? void 0 : "x mandatory",
+			"--dot-scroll-snap": snap === "none" ? "none" : snap
+		},
+		children
+	});
+};
+//#endregion
+export { Scroll$1 as Scroll };

package/dist/components/select.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { Select } from "@monimesl/dot-core";
+//#region src/components/select.d.ts
+declare const Select$1: ReactComponent<typeof Select>;
+//#endregion
+export { Select$1 as Select };

package/dist/components/select.js

@@ -0,0 +1,93 @@
+import { useTheme } from "../theme.js";
+import { ICON_SIZE, SPACE } from "./tokens.js";
+import { Field } from "./field.js";
+import { useFieldBox, useFieldNote } from "./field-box.js";
+import { CHEVRON_DOWN_ARTWORK } from "./icon-artwork.js";
+import { IconSvg } from "./icon-svg.js";
+import { OptionPlaceContext } from "./option-place.js";
+import { SheetPanel } from "./sheet.js";
+import { createEvent } from "@monimesl/dot-core";
+import { useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/select.tsx
+const Select$1 = ({ value, label, placeholder, hint, error, disabled, onChange, children }) => {
+	const { colors } = useTheme();
+	const [open, setOpen] = useState(false);
+	const box = useFieldBox(error, disabled);
+	const { noteId, controlAttributes } = useFieldNote(hint, error);
+	const labelId = useId();
+	const valueId = useId();
+	const choose = (next) => {
+		setOpen(false);
+		onChange?.(createEvent("change", { value: next }));
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Field, {
+		label,
+		hint,
+		error,
+		labelId,
+		noteId,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "dot-select",
+			disabled,
+			"aria-haspopup": "listbox",
+			"aria-labelledby": label ? `${labelId} ${valueId}` : valueId,
+			...controlAttributes,
+			onClick: () => setOpen(true),
+			onFocus: box.onFocus,
+			onBlur: box.onBlur,
+			style: {
+				...box.style,
+				display: "flex",
+				alignItems: "center",
+				gap: SPACE.medium,
+				width: "100%",
+				padding: "12px 14px",
+				textAlign: "start",
+				cursor: disabled ? "default" : "pointer"
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				id: valueId,
+				style: { flexGrow: 1 },
+				children: value ? /* @__PURE__ */ jsx(OptionPlaceContext.Provider, {
+					value: {
+						inField: true,
+						value,
+						choose: void 0
+					},
+					children
+				}) : /* @__PURE__ */ jsx("span", {
+					style: { color: colors.subtle },
+					children: placeholder
+				})
+			}), /* @__PURE__ */ jsx(IconSvg, {
+				artwork: CHEVRON_DOWN_ARTWORK,
+				size: ICON_SIZE.small,
+				color: colors.subtle
+			})]
+		})
+	}), /* @__PURE__ */ jsx(SheetPanel, {
+		open,
+		title: label,
+		onClose: () => setOpen(false),
+		children: /* @__PURE__ */ jsx("div", {
+			role: "listbox",
+			"aria-label": label,
+			style: {
+				display: "flex",
+				flexDirection: "column"
+			},
+			children: /* @__PURE__ */ jsx(OptionPlaceContext.Provider, {
+				value: {
+					inField: false,
+					value,
+					choose
+				},
+				children
+			})
+		})
+	})] });
+};
+//#endregion
+export { Select$1 as Select };

package/dist/components/sheet.d.ts

@@ -0,0 +1,8 @@
+import { ReactComponent } from "../types.js";
+import "./padding.js";
+import { Sheet } from "@monimesl/dot-core";
+import { ReactNode } from "react";
+//#region src/components/sheet.d.ts
+declare const Sheet$1: ReactComponent<typeof Sheet>;
+//#endregion
+export { Sheet$1 as Sheet };

package/dist/components/sheet.js

@@ -0,0 +1,106 @@
+import { FONT_FAMILY, useTheme } from "../theme.js";
+import { CARD_RADIUS_SCALE, FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
+import { CLOSE_ARTWORK } from "./icon-artwork.js";
+import { IconSvg } from "./icon-svg.js";
+import { pinnedPaddingStyle } from "./padding.js";
+import { DialogBackdrop } from "../vendor/@base-ui/react/dialog/backdrop/DialogBackdrop.js";
+import { DialogClose } from "../vendor/@base-ui/react/dialog/close/DialogClose.js";
+import { DialogPopup } from "../vendor/@base-ui/react/dialog/popup/DialogPopup.js";
+import { DialogPortal } from "../vendor/@base-ui/react/dialog/portal/DialogPortal.js";
+import { DialogRoot } from "../vendor/@base-ui/react/dialog/root/DialogRoot.js";
+import { DialogTitle } from "../vendor/@base-ui/react/dialog/title/DialogTitle.js";
+import { usePortalContainer } from "../portal.js";
+import { createEvent } from "@monimesl/dot-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/sheet.tsx
+const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...padding }) => {
+	const { colors, radius } = useTheme();
+	const container = usePortalContainer();
+	const cornerRadius = radius * CARD_RADIUS_SCALE;
+	return /* @__PURE__ */ jsx(DialogRoot, {
+		open,
+		onOpenChange: (next) => {
+			if (!next) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(DialogPortal, {
+			container,
+			children: [/* @__PURE__ */ jsx(DialogBackdrop, {
+				className: "dot-sheet-backdrop",
+				style: {
+					position: "fixed",
+					inset: 0,
+					zIndex: 100,
+					background: "rgba(0, 0, 0, 0.4)"
+				}
+			}), /* @__PURE__ */ jsxs(DialogPopup, {
+				className: "dot-sheet",
+				"aria-label": title,
+				style: {
+					position: "fixed",
+					insetInline: 0,
+					bottom: 0,
+					zIndex: 101,
+					display: "flex",
+					flexDirection: "column",
+					gap: SPACE.medium,
+					maxHeight: "85vh",
+					overflowY: "auto",
+					...pinnedPaddingStyle(padding, {
+						top: 16,
+						start: 16,
+						end: 16,
+						bottom: 24
+					}),
+					borderTopLeftRadius: cornerRadius,
+					borderTopRightRadius: cornerRadius,
+					background: colors.surface,
+					color: colors.text,
+					fontFamily: FONT_FAMILY,
+					outline: "none"
+				},
+				children: [
+					title ? /* @__PURE__ */ jsx(DialogTitle, {
+						style: {
+							margin: 0,
+							fontSize: FONT_SIZE.body,
+							fontWeight: WEIGHTS.bold,
+							lineHeight: "normal",
+							textAlign: "center"
+						},
+						children: title
+					}) : null,
+					showCloseIcon ? /* @__PURE__ */ jsx(DialogClose, {
+						"aria-label": "Close",
+						style: {
+							position: "absolute",
+							top: 10,
+							insetInlineEnd: 10,
+							display: "flex",
+							padding: 4,
+							border: "none",
+							borderRadius: "50%",
+							background: "transparent",
+							cursor: "pointer"
+						},
+						children: /* @__PURE__ */ jsx(IconSvg, {
+							artwork: CLOSE_ARTWORK,
+							size: ICON_SIZE.medium,
+							color: colors.subtle
+						})
+					}) : null,
+					children
+				]
+			})]
+		})
+	});
+};
+const Sheet$1 = ({ open = false, title, showCloseIcon = false, onClose, children, ...padding }) => /* @__PURE__ */ jsx(SheetPanel, {
+	...padding,
+	open,
+	title,
+	showCloseIcon,
+	onClose: () => onClose?.(createEvent("close")),
+	children
+});
+//#endregion
+export { Sheet$1 as Sheet, SheetPanel };

package/dist/components/skeleton.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { Skeleton } from "@monimesl/dot-core";
+//#region src/components/skeleton.d.ts
+declare const Skeleton$1: ReactComponent<typeof Skeleton>;
+//#endregion
+export { Skeleton$1 as Skeleton };

package/dist/components/skeleton.js

@@ -0,0 +1,55 @@
+import { useTheme } from "../theme.js";
+import { SPACE } from "./tokens.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/skeleton.tsx
+const LINE_HEIGHT = 12;
+function Bar({ style }) {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsx("div", { style: {
+		flexShrink: 0,
+		background: colors.muted,
+		animation: "dot-skeleton-pulse 1.2s linear infinite",
+		...style
+	} });
+}
+const Skeleton = ({ shape = "text", lines = 1, height }) => {
+	const { radius } = useTheme();
+	let content;
+	if (shape === "circle") {
+		const size = height ?? 40;
+		content = /* @__PURE__ */ jsx(Bar, { style: {
+			width: size,
+			height: size,
+			borderRadius: "50%"
+		} });
+	} else if (shape === "box") content = /* @__PURE__ */ jsx(Bar, { style: {
+		width: "100%",
+		height: height ?? 80,
+		borderRadius: radius
+	} });
+	else {
+		const count = Math.max(1, lines);
+		content = Array.from({ length: count }, (_, index) => {
+			const last = count > 1 && index === count - 1;
+			return /* @__PURE__ */ jsx(Bar, { style: {
+				width: last ? "60%" : "100%",
+				height: LINE_HEIGHT,
+				borderRadius: LINE_HEIGHT / 2
+			} }, index);
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-skeleton",
+		"aria-busy": "true",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: SPACE.medium,
+			width: shape === "circle" ? void 0 : "100%",
+			flexShrink: shape === "circle" ? 0 : 1
+		},
+		children: content
+	});
+};
+//#endregion
+export { Skeleton };

package/dist/components/slider.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { Slider } from "@monimesl/dot-core";
+//#region src/components/slider.d.ts
+declare const Slider$1: ReactComponent<typeof Slider>;
+//#endregion
+export { Slider$1 as Slider };

package/dist/components/slider.js

@@ -0,0 +1,57 @@
+import { useTheme } from "../theme.js";
+import { DISABLED_OPACITY, FONT_SIZE } from "./tokens.js";
+import { Field, FieldLabel } from "./field.js";
+import { useFieldNote } from "./field-box.js";
+import { useTypedText } from "./typed-text.js";
+import { createEvent } from "@monimesl/dot-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/slider.tsx
+const Slider$1 = ({ value, min = 0, max = 100, step = 1, showValue, label, hint, disabled, onChange }) => {
+	const { colors } = useTheme();
+	const [positionText, showPosition] = useTypedText(value === void 0 ? void 0 : String(value), onChange !== void 0);
+	const { noteId, controlAttributes } = useFieldNote(hint, void 0);
+	const shownValue = positionText === "" ? String(min) : positionText;
+	return /* @__PURE__ */ jsxs(Field, {
+		label: void 0,
+		hint,
+		error: void 0,
+		noteId,
+		children: [label || showValue ? /* @__PURE__ */ jsxs("span", {
+			style: {
+				display: "flex",
+				justifyContent: "space-between"
+			},
+			children: [/* @__PURE__ */ jsx(FieldLabel, { children: label }), showValue ? /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: FONT_SIZE.caption,
+					color: colors.subtle,
+					fontVariantNumeric: "tabular-nums"
+				},
+				children: shownValue
+			}) : null]
+		}) : null, /* @__PURE__ */ jsx("input", {
+			className: "dot-slider",
+			type: "range",
+			min,
+			max,
+			step,
+			value: shownValue,
+			disabled,
+			"aria-label": label,
+			...controlAttributes,
+			onChange: (event) => {
+				const next = event.currentTarget.value;
+				showPosition(next);
+				onChange?.(createEvent("change", { value: Number(next) }));
+			},
+			style: {
+				width: "100%",
+				margin: 0,
+				accentColor: colors.primary,
+				opacity: disabled ? DISABLED_OPACITY : 1
+			}
+		})]
+	});
+};
+//#endregion
+export { Slider$1 as Slider };

package/dist/components/spinner.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { Spinner } from "@monimesl/dot-core";
+//#region src/components/spinner.d.ts
+declare const Spinner$1: ReactComponent<typeof Spinner>;
+//#endregion
+export { Spinner$1 as Spinner };

package/dist/components/spinner.js

@@ -0,0 +1,48 @@
+import { useTheme } from "../theme.js";
+import { ICON_SIZE } from "./tokens.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/spinner.tsx
+function LoadingIcon({ size }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		className: "dot-spinner",
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 3,
+		role: "progressbar",
+		"aria-label": "Loading",
+		style: { flexShrink: 0 },
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9",
+			strokeOpacity: .25
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M21 12a9 9 0 0 0-9-9",
+			strokeLinecap: "round",
+			children: /* @__PURE__ */ jsx("animateTransform", {
+				attributeName: "transform",
+				type: "rotate",
+				from: "0 12 12",
+				to: "360 12 12",
+				dur: "0.8s",
+				repeatCount: "indefinite"
+			})
+		})]
+	});
+}
+const Spinner = ({ size = "medium" }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsx("span", {
+		style: {
+			display: "inline-flex",
+			alignSelf: "center",
+			color: colors.primary
+		},
+		children: /* @__PURE__ */ jsx(LoadingIcon, { size: ICON_SIZE[size] })
+	});
+};
+//#endregion
+export { LoadingIcon, Spinner };