@soroush.tech/design-system 2.0.0-rc.1 → 2.0.0-rc.2

package/dist/catalog.mjs

@@ -0,0 +1,4109 @@
+import { n as baseTheme } from "./themes-L-dE7_ck.mjs";
+import { background, border, color, flexbox, grid, layout, position, shadow, space, typography } from "@soroush.tech/styled-system";
+//#region ../docs-content/src/kebabCase.ts
+/** PascalCase or camelCase to kebab-case: `TextInput` -> `text-input`. */
+const kebabCase = (name) => name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+//#endregion
+//#region ../docs-content/src/registry.ts
+/** `nested` marks container folders whose README sits one level down (Table/Table/README.md). */
+const component = (name, nested = false, pkg = "design-system") => ({
+	pkg,
+	name,
+	slug: kebabCase(name),
+	readmePath: nested ? `${name}/${name}/README.md` : `${name}/README.md`
+});
+const markdownComponent = (name) => component(name, false, "markdown");
+/**
+* The component taxonomy of the design-system README's inventory, driving the docs
+* sidebar, the components index grid, and the MCP server's component tools.
+* `registry.test.ts` guards it against the actual README files on disk.
+*/
+const componentCategories = [
+	{
+		label: "Layout & surfaces",
+		items: [
+			component("View"),
+			component("Flex"),
+			component("Grid"),
+			component("Paper"),
+			component("Card"),
+			component("Quote"),
+			component("AppBar"),
+			component("Drawer"),
+			component("Sidebar", true)
+		]
+	},
+	{
+		label: "Content & data display",
+		items: [
+			component("Typography"),
+			component("Link"),
+			component("Icon"),
+			component("Image"),
+			component("Avatar"),
+			component("Table", true)
+		]
+	},
+	{
+		label: "Inputs & forms",
+		items: [
+			component("Button"),
+			component("ButtonGroup"),
+			component("ToggleButton", true),
+			component("TextInput"),
+			component("Checkbox"),
+			component("Radio"),
+			component("Switch"),
+			component("NativeSelect"),
+			component("Select"),
+			component("MenuItem"),
+			component("Form"),
+			component("FormControl"),
+			component("FormLabel"),
+			component("FormHelperText"),
+			component("Pagination")
+		]
+	},
+	{
+		label: "Navigation & menus",
+		items: [
+			component("Breadcrumbs"),
+			component("Menu", true),
+			component("Tabs", true)
+		]
+	},
+	{
+		label: "Feedback",
+		items: [
+			component("CircularProgress"),
+			component("LinearProgress"),
+			component("Skeleton"),
+			component("Backdrop")
+		]
+	},
+	{
+		label: "Overlay & behavior",
+		items: [
+			component("Portal"),
+			component("FocusTrap"),
+			component("Modal"),
+			component("Popover"),
+			component("Pressable")
+		]
+	}
+];
+const allComponents = componentCategories.flatMap((category) => category.items);
+/** Every family member, in its family's order. */
+const memberComponents = Object.entries({
+	Menu: [
+		"ContextMenu",
+		"MenuDivider",
+		"MenuItems",
+		"MenuList"
+	],
+	Pagination: ["PaginationItem"],
+	Sidebar: ["SidebarItem"],
+	Table: [
+		"TableBody",
+		"TableCell",
+		"TableContainer",
+		"TableControl",
+		"TableFooter",
+		"TableHead",
+		"TablePagination",
+		"TablePaginationActions",
+		"TableRow",
+		"TableSortLabel"
+	],
+	Tabs: [
+		"Tab",
+		"TabContext",
+		"TabList",
+		"TabPanel",
+		"TabScrollButton"
+	],
+	ToggleButton: ["ToggleButtonGroup"]
+}).flatMap(([family, names]) => names.map((name) => ({
+	pkg: "design-system",
+	name,
+	slug: kebabCase(name),
+	readmePath: `${family}/${name}/README.md`,
+	family
+})));
+/** A family's members; none for a component that isn't one. */
+const membersOf = (item) => memberComponents.filter((member) => member.family === item.name);
+/** The markdown package's component library - flat, no categories. */
+const markdownComponents = [
+	markdownComponent("Preview"),
+	markdownComponent("Editor"),
+	markdownComponent("LiveEdit"),
+	markdownComponent("Control"),
+	markdownComponent("Toolbar"),
+	markdownComponent("CodeBlock"),
+	markdownComponent("Mermaid")
+];
+/** Every documented component, family members included, across packages. Slugs are globally unique. */
+const allDocComponents = [...allComponents.flatMap((item) => [item, ...membersOf(item)]), ...markdownComponents];
+new Map(allDocComponents.map((item) => [item.slug, item]));
+//#endregion
+//#region src/catalog/defineCatalogEntry.ts
+/**
+* Types a component's catalog entry against its props: `defineCatalogEntry<ButtonProps>()({
+* ... })`. Curried, so the props are named and the entry is still inferred.
+*/
+const defineCatalogEntry = () => (entry) => entry;
+/** A nested node, for brevity: `node('MenuItem', { value: 'web' }, ['Web'])`. */
+const node = (component, props = {}, children = []) => ({
+	component,
+	props,
+	children
+});
+//#endregion
+//#region src/AppBar/AppBar.catalog.ts
+const appBarPositionValues = [
+	"static",
+	"relative",
+	"absolute",
+	"fixed",
+	"sticky"
+];
+const pictured$2 = [
+	"paper",
+	"primary",
+	"secondary",
+	"modal"
+];
+const colorLabels$5 = {
+	paper: "Paper",
+	primary: "Primary",
+	secondary: "Secondary",
+	modal: "Modal"
+};
+const appBarCatalog = defineCatalogEntry()({
+	summary: "A full-width header bar for an app title, navigation and actions.",
+	isPlaceable: true,
+	example: {
+		component: "AppBar",
+		props: { color: "paper" },
+		children: ["Application Header"]
+	},
+	variants: pictured$2.map((color) => ({
+		name: color,
+		label: colorLabels$5[color],
+		example: {
+			component: "AppBar",
+			props: { color },
+			children: ["Application Header"]
+		}
+	})),
+	options: {
+		color: { scale: "background" },
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		elevation: {
+			values: [
+				0,
+				4,
+				8,
+				12,
+				16,
+				24
+			],
+			default: 4
+		},
+		position: {
+			values: appBarPositionValues,
+			default: "static"
+		},
+		blur: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: { children: "children" },
+	preview: { width: 480 }
+});
+//#endregion
+//#region src/Avatar/Avatar.catalog.ts
+const avatarVariantValues = [
+	"circular",
+	"rounded",
+	"square"
+];
+const variantLabels$16 = {
+	circular: "Circular",
+	rounded: "Rounded",
+	square: "Square"
+};
+const initials = {
+	size: "md",
+	bg: "secondary"
+};
+const avatarCatalog = defineCatalogEntry()({
+	summary: "A person or entity shown as an image, or as initials when there is no image.",
+	isPlaceable: true,
+	example: {
+		component: "Avatar",
+		props: {
+			...initials,
+			variant: "circular"
+		},
+		children: ["MS"]
+	},
+	variants: avatarVariantValues.map((variant) => ({
+		name: variant,
+		label: variantLabels$16[variant],
+		example: {
+			component: "Avatar",
+			props: {
+				...initials,
+				variant
+			},
+			children: ["MS"]
+		}
+	})),
+	options: {
+		variant: {
+			values: avatarVariantValues,
+			default: "circular"
+		},
+		size: {
+			scale: "avatar",
+			default: "md"
+		},
+		bg: { scale: "background" },
+		ring: {
+			values: [true, false],
+			default: false
+		},
+		ringColor: {
+			scale: "border",
+			default: "primary"
+		},
+		ringWidth: {
+			scale: "borderWidths",
+			default: "thin"
+		}
+	},
+	content: { children: "children" }
+});
+//#endregion
+//#region src/Backdrop/Backdrop.catalog.ts
+const backdropCatalog = defineCatalogEntry()({
+	summary: "The dimmed full-viewport scrim a modal draws behind its content.",
+	isPlaceable: false,
+	example: {
+		component: "Backdrop",
+		props: {},
+		children: []
+	},
+	variants: [],
+	options: { bg: {
+		scale: "background",
+		default: "backdrop"
+	} },
+	content: {},
+	preview: {
+		width: 320,
+		height: 200
+	}
+});
+//#endregion
+//#region src/Breadcrumbs/Breadcrumbs.catalog.ts
+const breadcrumbsSeparatorValues = [
+	"/",
+	"›",
+	"-",
+	"·"
+];
+const crumbs = [
+	node("Link", {
+		href: "#",
+		underline: "hover",
+		color: "inherit"
+	}, ["Home"]),
+	node("Link", {
+		href: "#",
+		underline: "hover",
+		color: "inherit"
+	}, ["Catalog"]),
+	node("Typography", {
+		color: "primary",
+		"aria-current": "page"
+	}, ["Accessories"])
+];
+const breadcrumbsCatalog = defineCatalogEntry()({
+	summary: "The trail of links from a site's root to the current page.",
+	isPlaceable: true,
+	example: {
+		component: "Breadcrumbs",
+		props: {
+			"aria-label": "Breadcrumb",
+			expandLabel: "Show path"
+		},
+		children: crumbs
+	},
+	variants: breadcrumbsSeparatorValues.map((separator) => ({
+		name: separator,
+		label: `Separated by ${separator}`,
+		example: {
+			component: "Breadcrumbs",
+			props: {
+				"aria-label": "Breadcrumb",
+				separator
+			},
+			children: crumbs
+		}
+	})),
+	options: {
+		separator: {
+			values: breadcrumbsSeparatorValues,
+			default: "/"
+		},
+		maxItems: {
+			values: [
+				2,
+				3,
+				4,
+				8
+			],
+			default: 8
+		},
+		itemsBeforeCollapse: {
+			values: [
+				0,
+				1,
+				2
+			],
+			default: 1
+		},
+		itemsAfterCollapse: {
+			values: [1, 2],
+			default: 1
+		},
+		color: {
+			scale: "text",
+			default: "secondary"
+		},
+		typography: {
+			scale: "typography",
+			default: "body1"
+		}
+	},
+	content: { children: "children" }
+});
+//#endregion
+//#region src/Button/Button.catalog.ts
+const buttonVariantValues = [
+	"contained",
+	"outlined",
+	"text"
+];
+const buttonShapeValues = [
+	"square",
+	"rounded",
+	"pill"
+];
+const buttonLoadingPositionValues = [
+	"start",
+	"end",
+	"center"
+];
+const variantLabels$15 = {
+	contained: "Contained",
+	outlined: "Outlined",
+	text: "Text"
+};
+const buttonCatalog = defineCatalogEntry()({
+	summary: "An action - filled, stroked or plain, in any palette color, or a link with `href`.",
+	isPlaceable: true,
+	example: {
+		component: "Button",
+		props: { variant: "contained" },
+		children: ["Button"]
+	},
+	variants: buttonVariantValues.map((variant) => ({
+		name: variant,
+		label: variantLabels$15[variant],
+		example: {
+			component: "Button",
+			props: { variant },
+			children: ["Button"]
+		}
+	})),
+	options: {
+		variant: {
+			values: buttonVariantValues,
+			default: "contained"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		shape: {
+			values: buttonShapeValues,
+			default: "square"
+		},
+		fullWidth: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		loading: {
+			values: [true, false],
+			default: false
+		},
+		loadingPosition: {
+			values: buttonLoadingPositionValues,
+			default: "center"
+		}
+	},
+	content: {
+		children: "children",
+		startIcon: "child",
+		endIcon: "child",
+		loadingIndicator: "child"
+	},
+	domEvents: ["onClick"]
+});
+//#endregion
+//#region src/ButtonGroup/ButtonGroup.catalog.ts
+const buttonGroupVariantValues = [
+	"contained",
+	"outlined",
+	"text"
+];
+const buttonGroupOrientationValues = ["horizontal", "vertical"];
+const variantLabels$14 = {
+	contained: "Contained",
+	outlined: "Outlined",
+	text: "Text"
+};
+const buttons = [
+	node("Button", {}, ["One"]),
+	node("Button", {}, ["Two"]),
+	node("Button", {}, ["Three"])
+];
+const buttonGroupCatalog = defineCatalogEntry()({
+	summary: "A row or column of related buttons joined into one cluster that share a style.",
+	isPlaceable: true,
+	example: {
+		component: "ButtonGroup",
+		props: { "aria-label": "Basic button group" },
+		children: buttons
+	},
+	variants: buttonGroupVariantValues.map((variant) => ({
+		name: variant,
+		label: variantLabels$14[variant],
+		example: {
+			component: "ButtonGroup",
+			props: {
+				variant,
+				"aria-label": "Basic button group"
+			},
+			children: buttons
+		}
+	})),
+	options: {
+		variant: {
+			values: buttonGroupVariantValues,
+			default: "outlined"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		orientation: {
+			values: buttonGroupOrientationValues,
+			default: "horizontal"
+		},
+		borderRadius: {
+			scale: "radii",
+			default: "md"
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		fullWidth: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: { children: "children" }
+});
+//#endregion
+//#region src/Card/Card.catalog.ts
+const cardVariantValues = [
+	"paper",
+	"bracketBox",
+	"interactive"
+];
+const variantLabels$13 = {
+	paper: "Paper",
+	bracketBox: "Bracket box",
+	interactive: "Interactive"
+};
+const content$2 = {
+	title: "Component",
+	caption: "A flexible card surface with paper and bracketBox variants.",
+	p: 3
+};
+const cardCatalog = defineCatalogEntry()({
+	summary: "A surface with an optional icon, title and caption over its own content.",
+	isPlaceable: true,
+	example: {
+		component: "Card",
+		props: content$2,
+		children: []
+	},
+	variants: cardVariantValues.map((variant) => ({
+		name: variant,
+		label: variantLabels$13[variant],
+		example: {
+			component: "Card",
+			props: {
+				...content$2,
+				variant
+			},
+			children: []
+		}
+	})),
+	options: {
+		variant: {
+			values: cardVariantValues,
+			default: "paper"
+		},
+		elevation: {
+			values: [
+				0,
+				1,
+				2,
+				4,
+				8,
+				16,
+				24
+			],
+			default: 1
+		}
+	},
+	content: {
+		children: "children",
+		title: "text",
+		caption: "text"
+	},
+	preview: { width: 280 }
+});
+//#endregion
+//#region src/Checkbox/Checkbox.catalog.ts
+const colorLabels$4 = {
+	default: "Default",
+	primary: "Primary",
+	secondary: "Secondary",
+	success: "Success",
+	error: "Error",
+	info: "Info",
+	warning: "Warning"
+};
+const colors$3 = Object.keys(colorLabels$4);
+const checkboxCatalog = defineCatalogEntry()({
+	summary: "A box that is checked or not, with an optional label and an indeterminate state.",
+	isPlaceable: true,
+	example: {
+		component: "Checkbox",
+		props: {},
+		children: ["Accept terms and conditions"]
+	},
+	variants: colors$3.map((color) => ({
+		name: color,
+		label: colorLabels$4[color],
+		example: {
+			component: "Checkbox",
+			props: {
+				color,
+				checked: true
+			},
+			children: ["Accept terms and conditions"]
+		}
+	})),
+	options: {
+		color: {
+			scale: "palette",
+			default: "default"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		indeterminate: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		required: {
+			values: [true, false],
+			default: false
+		},
+		fullWidth: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {
+		children: "children",
+		icon: "child",
+		checkedIcon: "child"
+	},
+	twoWay: {
+		prop: "checked",
+		event: "onChange",
+		read: "target.checked"
+	}
+});
+//#endregion
+//#region src/Menu/ContextMenu/ContextMenu.catalog.ts
+const contextMenuCatalog = defineCatalogEntry()({
+	summary: "A `MenuList` opened by a right-click over its `target`, at the pointer.",
+	isPlaceable: false,
+	example: {
+		component: "ContextMenu",
+		props: { "aria-label": "Canvas" },
+		children: [
+			node("MenuItem", {
+				value: "cut",
+				shortcut: "Control+X"
+			}, ["Cut"]),
+			node("MenuItem", {
+				value: "copy",
+				shortcut: "Control+C"
+			}, ["Copy"]),
+			node("MenuItem", {
+				value: "paste",
+				shortcut: "Control+V",
+				disabled: true,
+				note: "The clipboard is empty"
+			}, ["Paste"])
+		]
+	},
+	variants: [],
+	options: {
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		textColor: { scale: "text" },
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		dense: {
+			values: [true, false],
+			default: false
+		},
+		elevation: {
+			values: [
+				0,
+				1,
+				2,
+				4,
+				8,
+				16,
+				24
+			],
+			default: 8
+		},
+		layer: { scale: "zOrder" },
+		marginThreshold: { scale: "space" }
+	},
+	content: {
+		children: "children",
+		target: "child",
+		emptyLabel: "text",
+		items: "none"
+	},
+	domEvents: ["onSelect", "onClose"]
+});
+//#endregion
+//#region src/CircularProgress/CircularProgress.catalog.ts
+const circularProgressVariantValues = ["indeterminate", "determinate"];
+const circularProgressEasingValues = [
+	"linear",
+	"ease",
+	"ease-in",
+	"ease-out",
+	"ease-in-out"
+];
+const variantLabels$12 = {
+	indeterminate: "Indeterminate",
+	determinate: "Determinate"
+};
+const variantProps$1 = {
+	indeterminate: { variant: "indeterminate" },
+	determinate: {
+		variant: "determinate",
+		value: 70
+	}
+};
+const circularProgressCatalog = defineCatalogEntry()({
+	summary: "A circular loading indicator - a looping spinner, or an arc that shows a `value`.",
+	isPlaceable: true,
+	example: {
+		component: "CircularProgress",
+		props: {
+			variant: "indeterminate",
+			color: "primary",
+			size: 40
+		},
+		children: []
+	},
+	variants: circularProgressVariantValues.map((variant) => ({
+		name: variant,
+		label: variantLabels$12[variant],
+		example: {
+			component: "CircularProgress",
+			props: {
+				...variantProps$1[variant],
+				color: "primary",
+				size: 40
+			},
+			children: []
+		}
+	})),
+	options: {
+		variant: {
+			values: circularProgressVariantValues,
+			default: "indeterminate"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		size: { default: 40 },
+		thickness: { default: 3.6 },
+		min: { default: 0 },
+		max: { default: 100 },
+		disableShrink: {
+			values: [true, false],
+			default: false
+		},
+		spinning: {
+			values: [true, false],
+			default: false
+		},
+		easing: {
+			values: circularProgressEasingValues,
+			default: "linear"
+		},
+		showTrack: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {}
+});
+//#endregion
+//#region src/Drawer/Drawer.catalog.ts
+const drawerAnchorValues = [
+	"left",
+	"right",
+	"top",
+	"bottom"
+];
+const anchorLabels = {
+	left: "Left",
+	right: "Right",
+	top: "Top",
+	bottom: "Bottom"
+};
+const body = (anchor) => [node("Flex", {
+	flexDirection: "column",
+	gap: 3,
+	p: 4,
+	width: anchor === "top" || anchor === "bottom" ? "100%" : "260px"
+}, [node("Typography", {
+	variant: "h6",
+	m: 0
+}, ["Drawer"]), node("Typography", {
+	variant: "body2",
+	color: "secondary",
+	m: 0
+}, ["Press Escape or click outside to close."])])];
+const drawerCatalog = defineCatalogEntry()({
+	summary: "A panel that slides in from a screen edge, opened by a `DrawerToggle` with the same `id`.",
+	isPlaceable: true,
+	example: {
+		component: "Drawer",
+		props: {
+			id: "drawer",
+			isOpen: true,
+			anchor: "left"
+		},
+		children: body("left")
+	},
+	variants: drawerAnchorValues.map((anchor) => ({
+		name: anchor,
+		label: anchorLabels[anchor],
+		example: {
+			component: "Drawer",
+			props: {
+				id: "drawer",
+				isOpen: true,
+				anchor
+			},
+			children: body(anchor)
+		}
+	})),
+	options: {
+		anchor: {
+			values: drawerAnchorValues,
+			default: "left"
+		},
+		elevation: {
+			values: [
+				0,
+				1,
+				2,
+				4,
+				8,
+				16,
+				24
+			],
+			default: 16
+		},
+		transitionDuration: { default: 225 },
+		hasBackdrop: {
+			values: [true, false],
+			default: true
+		},
+		shouldLockScroll: {
+			values: [true, false],
+			default: true
+		},
+		shouldAutoFocus: {
+			values: [true, false],
+			default: true
+		},
+		shouldTrapFocus: {
+			values: [true, false],
+			default: true
+		},
+		shouldRestoreFocus: {
+			values: [true, false],
+			default: true
+		}
+	},
+	content: { children: "children" },
+	domEvents: ["onClose"],
+	preview: {
+		width: 480,
+		height: 320
+	}
+});
+const drawerToggleCatalog = defineCatalogEntry()({
+	summary: "The button that opens, closes or toggles the `Drawer` whose `id` it names in `drawer`.",
+	isPlaceable: false,
+	example: {
+		component: "DrawerToggle",
+		props: {
+			drawer: "drawer",
+			action: "toggle"
+		},
+		children: ["Open drawer"]
+	},
+	variants: [],
+	options: {
+		action: {
+			values: [
+				"toggle",
+				"show",
+				"hide"
+			],
+			default: "toggle"
+		},
+		variant: {
+			values: [
+				"contained",
+				"outlined",
+				"text"
+			],
+			default: "contained"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {
+		children: "children",
+		startIcon: "child",
+		endIcon: "child",
+		loadingIndicator: "child"
+	},
+	domEvents: ["onClick"]
+});
+//#endregion
+//#region src/Flex/Flex.catalog.ts
+const flexDirectionValues = [
+	"row",
+	"row-reverse",
+	"column",
+	"column-reverse"
+];
+const flexJustifyContentValues = [
+	"flex-start",
+	"flex-end",
+	"center",
+	"space-between",
+	"space-around",
+	"space-evenly"
+];
+const flexAlignItemsValues = [
+	"stretch",
+	"flex-start",
+	"flex-end",
+	"center",
+	"baseline"
+];
+const flexAlignContentValues = [
+	"normal",
+	"flex-start",
+	"flex-end",
+	"center",
+	"stretch",
+	"space-between",
+	"space-around",
+	"space-evenly"
+];
+const flexWrapValues = [
+	"nowrap",
+	"wrap",
+	"wrap-reverse"
+];
+const box = {
+	gap: 2,
+	p: 2,
+	width: "360px",
+	height: "280px",
+	bg: "secondary",
+	borderRadius: "sm"
+};
+const items$1 = [
+	"A",
+	"B",
+	"C"
+].map((label) => node("View", {
+	p: 2,
+	bg: "primary",
+	borderRadius: "sm"
+}, [label]));
+const directions = {
+	column: "Column",
+	row: "Row"
+};
+const flexCatalog = defineCatalogEntry()({
+	summary: "A flexbox container that lays its children out in a column or a row.",
+	isPlaceable: true,
+	example: {
+		component: "Flex",
+		props: {
+			...box,
+			flexDirection: "column"
+		},
+		children: items$1
+	},
+	variants: ["column", "row"].map((flexDirection) => ({
+		name: flexDirection,
+		label: directions[flexDirection],
+		example: {
+			component: "Flex",
+			props: {
+				...box,
+				flexDirection
+			},
+			children: items$1
+		}
+	})),
+	options: {
+		flexDirection: {
+			values: flexDirectionValues,
+			default: "column"
+		},
+		justifyContent: { values: flexJustifyContentValues },
+		alignItems: { values: flexAlignItemsValues },
+		alignContent: { values: flexAlignContentValues },
+		flexWrap: {
+			values: flexWrapValues,
+			default: "nowrap"
+		},
+		gap: { scale: "space" },
+		bg: { scale: "background" }
+	},
+	content: { children: "children" }
+});
+//#endregion
+//#region src/FocusTrap/FocusTrap.catalog.ts
+const focusTrapCatalog = defineCatalogEntry()({
+	summary: "Keeps keyboard focus within its children while it is enabled.",
+	isPlaceable: false,
+	example: {
+		component: "FocusTrap",
+		props: { isEnabled: true },
+		children: [node("View", { p: 3 }, ["Trapped content"])]
+	},
+	variants: [],
+	options: {
+		isEnabled: {
+			values: [true, false],
+			default: true
+		},
+		shouldAutoFocus: {
+			values: [true, false],
+			default: true
+		},
+		shouldTrapFocus: {
+			values: [true, false],
+			default: true
+		},
+		shouldEnforceFocus: {
+			values: [true, false],
+			default: true
+		},
+		shouldRestoreFocus: {
+			values: [true, false],
+			default: true
+		}
+	},
+	content: { children: "children" }
+});
+//#endregion
+//#region src/Form/Form.catalog.ts
+const nameField = node("FormControl", {}, [node("Flex", {
+	flexDirection: "column",
+	gap: 1,
+	alignItems: "flex-start"
+}, [node("FormLabel", {}, ["Name"]), node("TextInput", {
+	variant: "outlined",
+	placeholder: "John Smith"
+})])]);
+const formCatalog = defineCatalogEntry()({
+	summary: "A `<form>` that gives every field inside it a default size, color and state.",
+	isPlaceable: false,
+	example: {
+		component: "Form",
+		props: { fullWidth: true },
+		children: [node("Flex", {
+			flexDirection: "column",
+			gap: 4,
+			alignItems: "flex-start"
+		}, [nameField, node("Button", { type: "submit" }, ["Submit"])])]
+	},
+	variants: [],
+	options: {
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		textColor: { scale: "text" },
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		fullWidth: {
+			values: [true, false],
+			default: false
+		},
+		noValidate: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: { children: "children" },
+	domEvents: ["onSubmit"],
+	preview: { width: 360 }
+});
+//#endregion
+//#region src/FormControl/FormControl.catalog.ts
+const formControlCatalog = defineCatalogEntry()({
+	summary: "One form field - a label, a control and helper text, wired together by a shared id.",
+	isPlaceable: true,
+	example: {
+		component: "FormControl",
+		props: {
+			required: true,
+			fullWidth: true
+		},
+		children: [node("Flex", {
+			flexDirection: "column",
+			gap: 1,
+			alignItems: "flex-start"
+		}, [
+			node("FormLabel", {}, ["Email"]),
+			node("TextInput", {
+				variant: "outlined",
+				placeholder: "me@example.com"
+			}),
+			node("FormHelperText", {}, ["We'll never share it."])
+		])]
+	},
+	variants: [],
+	options: {
+		error: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		required: {
+			values: [true, false],
+			default: false
+		},
+		fullWidth: {
+			values: [true, false],
+			default: false
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		textColor: { scale: "text" }
+	},
+	content: { children: "children" },
+	preview: { width: 320 }
+});
+//#endregion
+//#region src/FormHelperText/FormHelperText.catalog.ts
+const formHelperTextCatalog = defineCatalogEntry()({
+	summary: "Hint or error text under a field, read by assistive tech as the control's description.",
+	isPlaceable: false,
+	example: {
+		component: "FormHelperText",
+		props: {},
+		children: ["We'll never share it."]
+	},
+	variants: [],
+	options: {
+		error: {
+			values: [true, false],
+			default: false
+		},
+		color: {
+			scale: "text",
+			default: "secondary"
+		}
+	},
+	content: { children: "children" }
+});
+//#endregion
+//#region src/FormLabel/FormLabel.catalog.ts
+const formLabelCatalog = defineCatalogEntry()({
+	summary: "A field's label, linked to its control - and marked required - through `FormControl`.",
+	isPlaceable: false,
+	example: {
+		component: "FormLabel",
+		props: {},
+		children: ["Email"]
+	},
+	variants: [],
+	options: {
+		required: {
+			values: [true, false],
+			default: false
+		},
+		color: { scale: "text" }
+	},
+	content: { children: "children" }
+});
+//#endregion
+//#region src/Grid/Grid.catalog.ts
+const gridAutoFlowValues = [
+	"row",
+	"column",
+	"dense",
+	"row dense",
+	"column dense"
+];
+const gridJustifyContentValues = [
+	"normal",
+	"start",
+	"end",
+	"center",
+	"stretch",
+	"space-between",
+	"space-around",
+	"space-evenly"
+];
+const gridAlignItemsValues = [
+	"normal",
+	"start",
+	"end",
+	"center",
+	"stretch",
+	"baseline"
+];
+const gridAlignContentValues = [
+	"normal",
+	"start",
+	"end",
+	"center",
+	"stretch",
+	"space-between",
+	"space-around",
+	"space-evenly"
+];
+const gridJustifyItemsValues = [
+	"normal",
+	"start",
+	"end",
+	"center",
+	"stretch"
+];
+const cells = [
+	"A",
+	"B",
+	"C",
+	"D"
+].map((label) => node("Flex", {
+	p: 2,
+	bg: "secondary",
+	borderRadius: "sm",
+	alignItems: "center",
+	justifyContent: "center"
+}, [label]));
+const gridCatalog = defineCatalogEntry()({
+	summary: "A CSS grid container - columns and rows from raw track strings, gaps from the theme.",
+	isPlaceable: true,
+	example: {
+		component: "Grid",
+		props: {
+			gridTemplateColumns: "1fr 1fr",
+			gap: 2
+		},
+		children: cells
+	},
+	variants: [],
+	options: {
+		gridAutoFlow: {
+			values: gridAutoFlowValues,
+			default: "row"
+		},
+		justifyContent: { values: gridJustifyContentValues },
+		alignItems: { values: gridAlignItemsValues },
+		alignContent: { values: gridAlignContentValues },
+		justifyItems: { values: gridJustifyItemsValues },
+		gap: { scale: "space" },
+		columnGap: { scale: "space" },
+		rowGap: { scale: "space" }
+	},
+	content: { children: "children" },
+	preview: { width: 320 }
+});
+//#endregion
+//#region src/Icon/Icon.catalog.ts
+const iconNameValues = [
+	"hub",
+	"code",
+	"terminal",
+	"database",
+	"psychology",
+	"smart_toy",
+	"account_tree",
+	"analytics",
+	"check",
+	"close",
+	"menu",
+	"warning"
+];
+const pictured$1 = [
+	"primary",
+	"secondary",
+	"initial"
+];
+const colorLabels$3 = {
+	primary: "Primary",
+	secondary: "Secondary",
+	initial: "Initial"
+};
+const iconCatalog = defineCatalogEntry()({
+	summary: "A square SVG icon from the registry, colored from the theme text tokens.",
+	isPlaceable: true,
+	example: {
+		component: "Icon",
+		props: {
+			name: "hub",
+			color: "primary",
+			size: "3rem"
+		},
+		children: []
+	},
+	variants: pictured$1.map((color) => ({
+		name: color,
+		label: colorLabels$3[color],
+		example: {
+			component: "Icon",
+			props: {
+				name: "hub",
+				color,
+				size: "3rem"
+			},
+			children: []
+		}
+	})),
+	options: {
+		name: { values: iconNameValues },
+		color: {
+			scale: "text",
+			default: "primary"
+		},
+		size: { default: "1.5rem" }
+	},
+	content: {}
+});
+//#endregion
+//#region src/Image/Image.catalog.ts
+const imageObjectFitValues = [
+	"cover",
+	"contain",
+	"fill",
+	"none",
+	"scale-down"
+];
+const fitLabels = {
+	cover: "Cover",
+	contain: "Contain",
+	fill: "Fill",
+	none: "None",
+	"scale-down": "Scale down"
+};
+const picture = {
+	src: "/soroush.svg",
+	alt: "Logo",
+	width: "200px",
+	height: "200px"
+};
+const imageCatalog = defineCatalogEntry()({
+	summary: "An image with an optional fallback source, sized and fitted through props.",
+	isPlaceable: true,
+	example: {
+		component: "Image",
+		props: {
+			...picture,
+			objectFit: "contain"
+		},
+		children: []
+	},
+	variants: imageObjectFitValues.map((objectFit) => ({
+		name: objectFit,
+		label: fitLabels[objectFit],
+		example: {
+			component: "Image",
+			props: {
+				...picture,
+				objectFit
+			},
+			children: []
+		}
+	})),
+	options: {
+		objectFit: { values: imageObjectFitValues },
+		borderRadius: { scale: "radii" }
+	},
+	content: {}
+});
+//#endregion
+//#region src/LinearProgress/LinearProgress.catalog.ts
+const linearProgressVariantValues = [
+	"indeterminate",
+	"determinate",
+	"query"
+];
+const linearProgressEasingValues = [
+	"linear",
+	"ease",
+	"ease-in",
+	"ease-out",
+	"ease-in-out"
+];
+const variantLabels$11 = {
+	indeterminate: "Indeterminate",
+	determinate: "Determinate",
+	query: "Query"
+};
+const variantProps = {
+	indeterminate: { variant: "indeterminate" },
+	determinate: {
+		variant: "determinate",
+		value: 70
+	},
+	query: { variant: "query" }
+};
+const linearProgressCatalog = defineCatalogEntry()({
+	summary: "A horizontal loading bar - looping, driven by a `value`, or with a buffer behind it.",
+	isPlaceable: true,
+	example: {
+		component: "LinearProgress",
+		props: {
+			variant: "indeterminate",
+			color: "primary"
+		},
+		children: []
+	},
+	variants: linearProgressVariantValues.map((variant) => ({
+		name: variant,
+		label: variantLabels$11[variant],
+		example: {
+			component: "LinearProgress",
+			props: {
+				...variantProps[variant],
+				color: "primary"
+			},
+			children: []
+		}
+	})),
+	options: {
+		variant: {
+			values: linearProgressVariantValues,
+			default: "indeterminate"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		thickness: { default: 4 },
+		buffer: {
+			values: [true, false],
+			default: false
+		},
+		min: { default: 0 },
+		max: { default: 100 },
+		spinning: {
+			values: [true, false],
+			default: false
+		},
+		easing: {
+			values: linearProgressEasingValues,
+			default: "linear"
+		},
+		showTrack: {
+			values: [true, false],
+			default: true
+		},
+		round: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {},
+	preview: { width: 240 }
+});
+//#endregion
+//#region src/Link/Link.catalog.ts
+const linkUnderlineValues = [
+	"always",
+	"hover",
+	"none"
+];
+const linkTargetValues = [
+	"_self",
+	"_blank",
+	"_parent",
+	"_top",
+	"_unfencedTop"
+];
+const underlineLabels = {
+	always: "Underlined",
+	hover: "Underline on hover",
+	none: "No underline"
+};
+const label = "Visit the design system docs";
+const linkCatalog = defineCatalogEntry()({
+	summary: "A text link to a URL, underlined always, on hover or never.",
+	isPlaceable: true,
+	example: {
+		component: "Link",
+		props: { href: "#" },
+		children: [label]
+	},
+	variants: linkUnderlineValues.map((underline) => ({
+		name: underline,
+		label: underlineLabels[underline],
+		example: {
+			component: "Link",
+			props: {
+				href: "#",
+				underline
+			},
+			children: [label]
+		}
+	})),
+	options: {
+		underline: {
+			values: linkUnderlineValues,
+			default: "always"
+		},
+		color: {
+			scale: "text",
+			default: "primary"
+		},
+		variant: {
+			scale: "typography",
+			default: "inherit"
+		},
+		target: {
+			values: linkTargetValues,
+			default: "_self"
+		}
+	},
+	content: { children: "children" },
+	domEvents: ["onClick"]
+});
+const menuCatalog = defineCatalogEntry()({
+	summary: "A trigger and the `MenuList` of commands it opens - not modal, placed by the trigger.",
+	isPlaceable: false,
+	example: {
+		component: "Menu",
+		props: {},
+		children: [
+			node("MenuItem", { value: "new" }, ["New branch..."]),
+			node("MenuItem", {
+				value: "checkout",
+				disabled: true,
+				note: "Coming later"
+			}, ["Checkout tag or revision..."]),
+			node("MenuDivider"),
+			node("MenuItem", { value: "rename" }, ["Rename..."]),
+			node("MenuItem", { value: "delete" }, ["Delete"])
+		]
+	},
+	variants: [],
+	options: {
+		align: {
+			values: ["start", "end"],
+			default: "start"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		textColor: { scale: "text" },
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		dense: {
+			values: [true, false],
+			default: false
+		},
+		elevation: {
+			values: [
+				0,
+				1,
+				2,
+				4,
+				8,
+				16,
+				24
+			],
+			default: 8
+		},
+		layer: { scale: "zOrder" },
+		marginThreshold: { scale: "space" },
+		defaultOpen: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {
+		children: "children",
+		trigger: "child",
+		emptyLabel: "text",
+		items: "none"
+	},
+	domEvents: ["onSelect", "onClose"]
+});
+//#endregion
+//#region src/Menu/MenuDivider/MenuDivider.catalog.ts
+const menuDividerCatalog = defineCatalogEntry()({
+	summary: "A line between groups of rows in a `MenuList`.",
+	isPlaceable: false,
+	example: {
+		component: "MenuDivider",
+		props: {},
+		children: []
+	},
+	variants: [],
+	options: {},
+	content: {}
+});
+const menuItemCatalog = defineCatalogEntry()({
+	summary: "One row - an option of a `Select`'s list, or a command of a `MenuList` with an icon, a shortcut and a submenu.",
+	isPlaceable: false,
+	example: {
+		component: "MenuItem",
+		props: { value: "web" },
+		children: ["Web"]
+	},
+	variants: [],
+	options: {
+		role: {
+			values: [
+				"menuitem",
+				"menuitemradio",
+				"menuitemcheckbox"
+			],
+			default: "menuitem"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		textColor: { scale: "text" },
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		selected: {
+			values: [true, false],
+			default: false
+		},
+		highlighted: {
+			values: [true, false],
+			default: false
+		},
+		multiple: {
+			values: [true, false],
+			default: false
+		},
+		dense: {
+			values: [true, false],
+			default: false
+		},
+		disableGutters: {
+			values: [true, false],
+			default: false
+		},
+		divider: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {
+		children: "children",
+		startIcon: "child",
+		shortcut: "text",
+		note: "text",
+		submenu: "children"
+	},
+	domEvents: ["onClick"]
+});
+//#endregion
+//#region src/Menu/MenuItems/MenuItems.catalog.ts
+const menuItemsCatalog = defineCatalogEntry()({
+	summary: "A `MenuList`'s rows from data - rows, dividers and submenus as entries.",
+	isPlaceable: false,
+	example: {
+		component: "MenuItems",
+		props: {},
+		children: []
+	},
+	variants: [],
+	options: {},
+	content: {}
+});
+//#endregion
+//#region src/Menu/MenuList/MenuList.catalog.ts
+const menuListCatalog = defineCatalogEntry()({
+	summary: "A `role=\"menu\"` list of `MenuItem` commands that owns the keyboard.",
+	isPlaceable: true,
+	example: {
+		component: "MenuList",
+		props: { "aria-label": "Branch" },
+		children: [
+			node("MenuItem", { value: "new" }, ["New branch..."]),
+			node("MenuItem", {
+				value: "checkout",
+				disabled: true,
+				note: "Coming later"
+			}, ["Checkout tag or revision..."]),
+			node("MenuDivider"),
+			node("MenuItem", { value: "rename" }, ["Rename..."]),
+			node("MenuItem", { value: "delete" }, ["Delete"])
+		]
+	},
+	variants: [],
+	options: {
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		textColor: { scale: "text" },
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		dense: {
+			values: [true, false],
+			default: false
+		},
+		shouldWrap: {
+			values: [true, false],
+			default: true
+		},
+		shouldAutoFocus: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: { children: "children" },
+	domEvents: ["onSelect"],
+	preview: { width: 220 }
+});
+//#endregion
+//#region src/Modal/Modal.catalog.ts
+const modalScrollValues = ["paper", "body"];
+const dialog = node("Paper", {
+	role: "dialog",
+	"aria-modal": "true",
+	"aria-label": "Example dialog",
+	p: 4,
+	width: "320px"
+}, [node("Flex", {
+	flexDirection: "column",
+	gap: 3
+}, [node("Typography", {
+	variant: "h5",
+	m: 0
+}, ["Modal title"]), node("Typography", {
+	variant: "body2",
+	color: "secondary",
+	m: 0
+}, ["Press Escape or click the backdrop to close."])])]);
+const modalCatalog = defineCatalogEntry()({
+	summary: "An overlay that dims the page, holds focus inside its content and closes on Escape or a backdrop click.",
+	isPlaceable: true,
+	example: {
+		component: "Modal",
+		props: { isOpen: true },
+		children: [dialog]
+	},
+	variants: [],
+	options: {
+		isOpen: { values: [true, false] },
+		scroll: {
+			values: modalScrollValues,
+			default: "paper"
+		},
+		layer: {
+			scale: "zOrder",
+			default: "modal"
+		},
+		hasBackdrop: {
+			values: [true, false],
+			default: true
+		},
+		shouldKeepMounted: {
+			values: [true, false],
+			default: false
+		},
+		shouldUsePortal: {
+			values: [true, false],
+			default: true
+		},
+		shouldLockScroll: {
+			values: [true, false],
+			default: true
+		},
+		disableAriaHidden: {
+			values: [true, false],
+			default: false
+		},
+		shouldAutoFocus: {
+			values: [true, false],
+			default: true
+		},
+		shouldTrapFocus: {
+			values: [true, false],
+			default: true
+		},
+		shouldEnforceFocus: {
+			values: [true, false],
+			default: true
+		},
+		shouldRestoreFocus: {
+			values: [true, false],
+			default: true
+		}
+	},
+	content: { children: "children" },
+	domEvents: ["onClose"],
+	preview: {
+		width: 480,
+		height: 320
+	}
+});
+//#endregion
+//#region src/NativeSelect/NativeSelect.catalog.ts
+const nativeSelectVariantValues = [
+	"default",
+	"outlined",
+	"text",
+	"underline"
+];
+const variantLabels$10 = {
+	default: "Filled",
+	outlined: "Outlined",
+	text: "Text",
+	underline: "Underline"
+};
+const platforms$2 = [
+	{
+		label: "Web",
+		value: "web"
+	},
+	{
+		label: "Android",
+		value: "android"
+	},
+	{
+		label: "iOS",
+		value: "ios"
+	}
+];
+const nativeSelectCatalog = defineCatalogEntry()({
+	summary: "The platform select picker, its choices given as an `options` list of labels and values.",
+	isPlaceable: true,
+	example: {
+		component: "NativeSelect",
+		props: {
+			options: platforms$2,
+			placeholder: "Pick a platform",
+			variant: "outlined"
+		},
+		children: []
+	},
+	variants: nativeSelectVariantValues.map((variant) => ({
+		name: variant,
+		label: variantLabels$10[variant],
+		example: {
+			component: "NativeSelect",
+			props: {
+				options: platforms$2,
+				placeholder: "Pick a platform",
+				variant
+			},
+			children: []
+		}
+	})),
+	options: {
+		variant: {
+			values: nativeSelectVariantValues,
+			default: "default"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		textColor: {
+			scale: "text",
+			default: "primary"
+		},
+		bg: {
+			scale: "background",
+			default: "terminal"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		borderRadius: { scale: "radii" },
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		error: {
+			values: [true, false],
+			default: false
+		},
+		required: {
+			values: [true, false],
+			default: false
+		},
+		fullWidth: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: { placeholder: "text" },
+	twoWay: {
+		prop: "value",
+		event: "onChange",
+		read: "argument"
+	},
+	preview: { width: 220 }
+});
+//#endregion
+//#region src/Pagination/Pagination.catalog.ts
+const paginationVariantValues = ["text", "outlined"];
+const paginationShapeValues = ["circular", "rounded"];
+const variantLabels$9 = {
+	text: "Text",
+	outlined: "Outlined"
+};
+const paginationCatalog = defineCatalogEntry()({
+	summary: "Page numbers with previous and next controls, for moving through paged content.",
+	isPlaceable: true,
+	example: {
+		component: "Pagination",
+		props: { count: 10 },
+		children: []
+	},
+	variants: paginationVariantValues.map((variant) => ({
+		name: variant,
+		label: variantLabels$9[variant],
+		example: {
+			component: "Pagination",
+			props: {
+				count: 10,
+				variant
+			},
+			children: []
+		}
+	})),
+	options: {
+		variant: {
+			values: paginationVariantValues,
+			default: "text"
+		},
+		shape: {
+			values: paginationShapeValues,
+			default: "circular"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		shouldShowFirstButton: {
+			values: [true, false],
+			default: false
+		},
+		shouldShowLastButton: {
+			values: [true, false],
+			default: false
+		},
+		shouldHidePrevButton: {
+			values: [true, false],
+			default: false
+		},
+		shouldHideNextButton: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: { getItemAriaLabel: "none" },
+	twoWay: {
+		prop: "page",
+		event: "onChange",
+		read: "argument"
+	}
+});
+const paginationItemCatalog = defineCatalogEntry()({
+	summary: "One item of a `Pagination` - a page number, a previous/next/first/last control or an ellipsis.",
+	isPlaceable: false,
+	example: {
+		component: "PaginationItem",
+		props: {
+			type: "page",
+			page: 1
+		},
+		children: []
+	},
+	variants: [],
+	options: {
+		type: {
+			values: [
+				"page",
+				"first",
+				"previous",
+				"next",
+				"last",
+				"start-ellipsis",
+				"end-ellipsis"
+			],
+			default: "page"
+		},
+		isSelected: {
+			values: [true, false],
+			default: false
+		},
+		variant: {
+			values: ["text", "outlined"],
+			default: "text"
+		},
+		shape: {
+			values: ["circular", "rounded"],
+			default: "circular"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: { page: "text" },
+	domEvents: ["onClick"]
+});
+//#endregion
+//#region src/Paper/Paper.catalog.ts
+const paperCatalog = defineCatalogEntry()({
+	summary: "A plain raised surface with a theme shadow, background and radius.",
+	isPlaceable: true,
+	example: {
+		component: "Paper",
+		props: {
+			elevation: 1,
+			p: 3,
+			width: "320px"
+		},
+		children: ["A surface with default elevation, background, and border radius."]
+	},
+	variants: [],
+	options: {
+		elevation: {
+			values: [
+				0,
+				1,
+				2,
+				4,
+				8,
+				16,
+				24
+			],
+			default: 1
+		},
+		bg: {
+			scale: "background",
+			default: "paper"
+		},
+		borderRadius: {
+			scale: "radii",
+			default: "sq"
+		},
+		borderColor: { scale: "border" },
+		borderWidth: { scale: "borderWidths" },
+		p: {
+			scale: "space",
+			default: 2
+		}
+	},
+	content: { children: "children" }
+});
+const popoverCatalog = defineCatalogEntry()({
+	summary: "A surface shown next to an anchor element, closed on Escape or a click outside.",
+	isPlaceable: false,
+	example: {
+		component: "Popover",
+		props: { open: false },
+		children: [node("View", { p: 3 }, [node("Typography", { variant: "body2" }, ["Popover content"])])]
+	},
+	variants: [],
+	options: {
+		open: { values: [true, false] },
+		anchorReference: {
+			values: [
+				"anchorEl",
+				"anchorPosition",
+				"none"
+			],
+			default: "anchorEl"
+		},
+		elevation: {
+			values: [
+				0,
+				1,
+				2,
+				4,
+				8,
+				16,
+				24
+			],
+			default: 8
+		},
+		marginThreshold: {
+			scale: "space",
+			default: 2
+		},
+		layer: {
+			scale: "zOrder",
+			default: "modal"
+		},
+		hasBackdrop: {
+			values: [true, false],
+			default: false
+		},
+		disableScrollLock: {
+			values: [true, false],
+			default: false
+		},
+		disableAriaHidden: {
+			values: [true, false],
+			default: false
+		},
+		shouldAutoFocus: {
+			values: [true, false],
+			default: true
+		},
+		shouldTrapFocus: {
+			values: [true, false],
+			default: true
+		},
+		shouldEnforceFocus: {
+			values: [true, false],
+			default: true
+		},
+		shouldRestoreFocus: {
+			values: [true, false],
+			default: true
+		},
+		shouldKeepMounted: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: { children: "children" },
+	domEvents: ["onClose"]
+});
+//#endregion
+//#region src/Portal/Portal.catalog.ts
+const portalCatalog = defineCatalogEntry()({
+	summary: "Renders its children into another DOM node - the document body by default.",
+	isPlaceable: false,
+	example: {
+		component: "Portal",
+		props: {},
+		children: [node("View", { p: 3 }, ["Portaled content"])]
+	},
+	variants: [],
+	options: {},
+	content: { children: "children" }
+});
+const pressableCatalog = defineCatalogEntry()({
+	summary: "An unstyled clickable surface - button semantics around any content, with no looks of its own.",
+	isPlaceable: true,
+	example: {
+		component: "Pressable",
+		props: {},
+		children: ["Press me"]
+	},
+	variants: [],
+	options: {
+		as: {
+			values: [
+				"div",
+				"button",
+				"span"
+			],
+			default: "div"
+		},
+		feedback: {
+			values: [
+				"none",
+				"opacity",
+				"highlight"
+			],
+			default: "none"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		activeOpacity: { default: .7 },
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		borderRadius: { scale: "radii" }
+	},
+	content: { children: "children" },
+	domEvents: ["onClick"]
+});
+//#endregion
+//#region src/Quote/Quote.catalog.ts
+const quoteCatalog = defineCatalogEntry()({
+	summary: "A block set off by a primary left border, for quotes and terminal readouts.",
+	isPlaceable: true,
+	example: {
+		component: "Quote",
+		props: {
+			bg: "terminal",
+			p: 3
+		},
+		children: [node("Typography", {
+			variant: "body1",
+			color: "secondary",
+			m: 0
+		}, ["A View with a 2px primary left border - for terminal readouts and markdown blockquotes."])]
+	},
+	variants: [],
+	options: {
+		bg: { scale: "background" },
+		borderRadius: { scale: "radii" }
+	},
+	content: { children: "children" },
+	preview: { width: 360 }
+});
+//#endregion
+//#region src/Radio/Radio.catalog.ts
+const colorLabels$2 = {
+	default: "Default",
+	primary: "Primary",
+	secondary: "Secondary",
+	success: "Success",
+	error: "Error",
+	info: "Info",
+	warning: "Warning"
+};
+const colors$2 = Object.keys(colorLabels$2);
+const radioCatalog = defineCatalogEntry()({
+	summary: "One choice of a set - radios that share a `name` allow only one to be selected.",
+	isPlaceable: true,
+	example: {
+		component: "Radio",
+		props: {
+			name: "option",
+			value: "a"
+		},
+		children: ["Option A"]
+	},
+	variants: colors$2.map((color) => ({
+		name: color,
+		label: colorLabels$2[color],
+		example: {
+			component: "Radio",
+			props: {
+				name: "option",
+				value: "a",
+				color,
+				checked: true
+			},
+			children: ["Option A"]
+		}
+	})),
+	options: {
+		color: {
+			scale: "palette",
+			default: "default"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		required: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {
+		children: "children",
+		icon: "child",
+		checkedIcon: "child"
+	},
+	twoWay: {
+		prop: "checked",
+		event: "onChange",
+		read: "target.checked"
+	}
+});
+//#endregion
+//#region src/Select/Select.catalog.ts
+const selectVariantValues = [
+	"default",
+	"outlined",
+	"text",
+	"underline"
+];
+const variantLabels$8 = {
+	default: "Filled",
+	outlined: "Outlined",
+	text: "Text",
+	underline: "Underline"
+};
+const platforms$1 = [
+	node("MenuItem", { value: "web" }, ["Web"]),
+	node("MenuItem", { value: "android" }, ["Android"]),
+	node("MenuItem", { value: "ios" }, ["iOS"])
+];
+const selectCatalog = defineCatalogEntry()({
+	summary: "The select to use - a custom listbox of `MenuItem` options, or `native` for the platform picker.",
+	isPlaceable: true,
+	example: {
+		component: "Select",
+		props: {
+			placeholder: "Pick a platform",
+			variant: "outlined"
+		},
+		children: platforms$1
+	},
+	variants: selectVariantValues.map((variant) => ({
+		name: variant,
+		label: variantLabels$8[variant],
+		example: {
+			component: "Select",
+			props: {
+				placeholder: "Pick a platform",
+				variant
+			},
+			children: platforms$1
+		}
+	})),
+	options: {
+		variant: {
+			values: selectVariantValues,
+			default: "default"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		textColor: { scale: "text" },
+		bg: { scale: "background" },
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		borderRadius: { scale: "radii" },
+		native: {
+			values: [true, false],
+			default: false
+		},
+		multiple: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		error: {
+			values: [true, false],
+			default: false
+		},
+		required: {
+			values: [true, false],
+			default: false
+		},
+		fullWidth: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {
+		children: "children",
+		placeholder: "text",
+		renderValue: "none"
+	},
+	twoWay: {
+		prop: "value",
+		event: "onChange",
+		read: "argument"
+	},
+	preview: { width: 220 }
+});
+//#endregion
+//#region src/Sidebar/Sidebar/Sidebar.catalog.ts
+const sidebarAnchorValues = ["left", "right"];
+const sidebarVariantValues = [
+	"text",
+	"outlined",
+	"plain"
+];
+const variantLabels$7 = {
+	text: "Text",
+	outlined: "Outlined",
+	plain: "Plain"
+};
+const items = [
+	node("SidebarItem", {
+		icon: "folder",
+		label: "Directory",
+		isSelected: true
+	}),
+	node("SidebarItem", {
+		icon: "history",
+		label: "Gist history"
+	}),
+	node("SidebarItem", {
+		icon: "edit_note",
+		label: "Drafts"
+	}),
+	node("SidebarItem", {
+		icon: "terminal",
+		label: "Terminal console"
+	})
+];
+const content$1 = {
+	isOpen: false,
+	anchor: "left",
+	"aria-label": "Editor panels"
+};
+const sidebarCatalog = defineCatalogEntry()({
+	summary: "A collapsible navigation rail of `SidebarItem`s - icons only when closed, icons and labels when open.",
+	isPlaceable: true,
+	example: {
+		component: "Sidebar",
+		props: content$1,
+		children: items
+	},
+	variants: sidebarVariantValues.map((variant) => ({
+		name: variant,
+		label: variantLabels$7[variant],
+		example: {
+			component: "Sidebar",
+			props: {
+				...content$1,
+				variant
+			},
+			children: items
+		}
+	})),
+	options: {
+		isOpen: { values: [true, false] },
+		anchor: {
+			values: sidebarAnchorValues,
+			default: "left"
+		},
+		variant: {
+			values: sidebarVariantValues,
+			default: "text"
+		},
+		expandedWidth: { default: "14rem" },
+		collapsedWidth: { default: "3.5rem" },
+		hasPanel: {
+			values: [true, false],
+			default: false
+		},
+		panelWidth: { default: "18rem" },
+		bg: { scale: "background" }
+	},
+	content: { children: "children" }
+});
+//#endregion
+//#region src/Sidebar/SidebarItem/SidebarItem.catalog.ts
+const sidebarItemVariantValues = [
+	"text",
+	"outlined",
+	"plain"
+];
+const variantLabels$6 = {
+	text: "Text",
+	outlined: "Outlined",
+	plain: "Plain"
+};
+const content = {
+	icon: "folder",
+	label: "Directory"
+};
+const sidebarItemCatalog = defineCatalogEntry()({
+	summary: "One entry of a `Sidebar` - an icon, with its label shown while the rail is open.",
+	isPlaceable: false,
+	example: {
+		component: "SidebarItem",
+		props: {
+			...content,
+			variant: "text"
+		},
+		children: []
+	},
+	variants: sidebarItemVariantValues.map((variant) => ({
+		name: variant,
+		label: variantLabels$6[variant],
+		example: {
+			component: "SidebarItem",
+			props: {
+				...content,
+				variant
+			},
+			children: []
+		}
+	})),
+	options: {
+		variant: {
+			values: sidebarItemVariantValues,
+			default: "text"
+		},
+		size: {
+			scale: "sizes",
+			default: "sm"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		isSelected: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {
+		children: "children",
+		label: "text"
+	},
+	domEvents: ["onSelect", "onClick"]
+});
+//#endregion
+//#region src/Skeleton/Skeleton.catalog.ts
+const skeletonVariantValues = [
+	"text",
+	"circular",
+	"rectangular"
+];
+const skeletonAnimationValues = [
+	"pulse",
+	"wave",
+	false
+];
+const variantLabels$5 = {
+	text: "Text",
+	circular: "Circular",
+	rectangular: "Rectangular"
+};
+const shapes = {
+	text: { width: 240 },
+	circular: {
+		width: 64,
+		height: 64
+	},
+	rectangular: {
+		width: 240,
+		height: 64
+	}
+};
+const skeletonCatalog = defineCatalogEntry()({
+	summary: "A placeholder shape shown while content loads - a text line, a circle or a block.",
+	isPlaceable: true,
+	example: {
+		component: "Skeleton",
+		props: {
+			variant: "text",
+			animation: "pulse",
+			width: 240
+		},
+		children: []
+	},
+	variants: skeletonVariantValues.map((variant) => ({
+		name: variant,
+		label: variantLabels$5[variant],
+		example: {
+			component: "Skeleton",
+			props: {
+				variant,
+				...shapes[variant]
+			},
+			children: []
+		}
+	})),
+	options: {
+		variant: {
+			values: skeletonVariantValues,
+			default: "text"
+		},
+		animation: {
+			values: skeletonAnimationValues,
+			default: "pulse"
+		},
+		borderRadius: { scale: "radii" }
+	},
+	content: { children: "children" },
+	preview: {
+		width: 280,
+		height: 80
+	}
+});
+//#endregion
+//#region src/Switch/Switch.catalog.ts
+const switchVariantValues = ["outside", "inside"];
+const switchEdgeValues = [
+	"start",
+	"end",
+	false
+];
+const variantLabels$4 = {
+	outside: "Outside thumb",
+	inside: "Inside thumb"
+};
+const switchCatalog = defineCatalogEntry()({
+	summary: "An on/off toggle with an optional label, its thumb over or inside the track.",
+	isPlaceable: true,
+	example: {
+		component: "Switch",
+		props: {},
+		children: ["Enable dark mode"]
+	},
+	variants: switchVariantValues.map((variant) => ({
+		name: variant,
+		label: variantLabels$4[variant],
+		example: {
+			component: "Switch",
+			props: { variant },
+			children: ["Enable dark mode"]
+		}
+	})),
+	options: {
+		variant: {
+			values: switchVariantValues,
+			default: "outside"
+		},
+		color: {
+			scale: "palette",
+			default: "default"
+		},
+		bg: {
+			scale: "background",
+			default: "default"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		marked: {
+			values: [true, false],
+			default: false
+		},
+		edge: {
+			values: switchEdgeValues,
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		required: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {
+		children: "children",
+		icon: "child",
+		checkedIcon: "child"
+	},
+	twoWay: {
+		prop: "checked",
+		event: "onChange",
+		read: "target.checked"
+	}
+});
+//#endregion
+//#region src/Tabs/TabPanel/TabPanel.catalog.ts
+const tabPanelCatalog = defineCatalogEntry()({
+	summary: "The content a tab shows - inside a `TabContext`, shown while its tab is selected.",
+	isPlaceable: false,
+	example: {
+		component: "TabPanel",
+		props: { value: "layers" },
+		children: [node("Typography", {}, ["Layers of the page."])]
+	},
+	variants: [],
+	options: {
+		shouldKeepMounted: {
+			values: [true, false],
+			default: false
+		},
+		bg: { scale: "background" },
+		borderRadius: { scale: "radii" }
+	},
+	content: { children: "children" }
+});
+const tabCatalog = defineCatalogEntry()({
+	summary: "One tab of a `Tabs` row - a label, an icon on any side, and an optional close button.",
+	isPlaceable: false,
+	example: {
+		component: "Tab",
+		props: {
+			value: "canvas",
+			label: "Canvas"
+		},
+		children: []
+	},
+	variants: [],
+	options: {
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		isWrapped: {
+			values: [true, false],
+			default: false
+		},
+		iconPosition: {
+			values: [
+				"top",
+				"start",
+				"end",
+				"bottom"
+			],
+			default: "top"
+		},
+		color: { scale: "palette" },
+		textColor: { scale: "text" },
+		size: { scale: "sizes" },
+		bg: { scale: "background" },
+		selectedBg: { scale: "background" },
+		borderRadius: { scale: "radii" }
+	},
+	content: {
+		label: "text",
+		icon: "child",
+		secondaryAction: "child"
+	},
+	domEvents: ["onClick"]
+});
+//#endregion
+//#region src/Tabs/Tabs/Tabs.catalog.ts
+const tabsVariantValues = [
+	"underline",
+	"boxed",
+	"enclosed"
+];
+const tabsOrientationValues = ["horizontal", "vertical"];
+const tabsOverflowBehaviorValues = [
+	"scroll",
+	"menu",
+	"none"
+];
+const tabsScrollButtonsValues = [
+	"auto",
+	"always",
+	"never"
+];
+const variantLabels$3 = {
+	underline: "Underline",
+	boxed: "Boxed",
+	enclosed: "Enclosed"
+};
+const views = [
+	node("Tab", {
+		value: "canvas",
+		label: "Canvas"
+	}),
+	node("Tab", {
+		value: "system",
+		label: "Design system"
+	}),
+	node("Tab", {
+		value: "common",
+		label: "Common components"
+	})
+];
+const tabsCatalog = defineCatalogEntry()({
+	summary: "A row of `Tab`s - a tablist, or with `as=\"nav\"` a navigation.",
+	isPlaceable: true,
+	example: {
+		component: "Tabs",
+		props: {
+			defaultValue: "canvas",
+			"aria-label": "Views"
+		},
+		children: views
+	},
+	variants: tabsVariantValues.map((variant) => ({
+		name: variant,
+		label: variantLabels$3[variant],
+		example: {
+			component: "Tabs",
+			props: {
+				defaultValue: "canvas",
+				variant,
+				"aria-label": "Views"
+			},
+			children: views
+		}
+	})),
+	options: {
+		variant: {
+			values: tabsVariantValues,
+			default: "underline"
+		},
+		orientation: {
+			values: tabsOrientationValues,
+			default: "horizontal"
+		},
+		as: {
+			values: ["div", "nav"],
+			default: "div"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		textColor: { scale: "text" },
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		fullWidth: {
+			values: [true, false],
+			default: false
+		},
+		isCentered: {
+			values: [true, false],
+			default: false
+		},
+		shouldSelectOnFocus: {
+			values: [true, false],
+			default: false
+		},
+		overflowBehavior: {
+			values: tabsOverflowBehaviorValues,
+			default: "none"
+		},
+		scrollButtons: {
+			values: tabsScrollButtonsValues,
+			default: "auto"
+		},
+		shouldShowScrollButtonsOnMobile: {
+			values: [true, false],
+			default: false
+		},
+		hasVisibleScrollbar: {
+			values: [true, false],
+			default: false
+		},
+		hasDivider: { values: [true, false] },
+		bg: { scale: "background" },
+		selectedBg: { scale: "background" }
+	},
+	content: {
+		children: "children",
+		startContent: "children",
+		endContent: "children",
+		slots: "none"
+	},
+	twoWay: {
+		prop: "value",
+		event: "onChange",
+		read: "argument"
+	},
+	domEvents: ["onTabClose"],
+	preview: { width: 360 }
+});
+//#endregion
+//#region src/Tabs/TabContext/TabContext.catalog.ts
+const tabContextCatalog = defineCatalogEntry()({
+	summary: "Holds the selected value for a `TabList` and the `TabPanel`s beside it, wherever they sit.",
+	isPlaceable: false,
+	example: {
+		component: "TabContext",
+		props: { defaultValue: "layers" },
+		children: [
+			node("TabList", { "aria-label": "Left panel" }, [node("Tab", {
+				value: "layers",
+				label: "Layers"
+			}), node("Tab", {
+				value: "assets",
+				label: "Assets"
+			})]),
+			node("TabPanel", {
+				value: "layers",
+				p: 2
+			}, [node("Typography", {}, ["Layers of the page."])]),
+			node("TabPanel", {
+				value: "assets",
+				p: 2
+			}, [node("Typography", {}, ["The page's assets."])])
+		]
+	},
+	variants: [],
+	options: {},
+	content: { children: "children" },
+	twoWay: {
+		prop: "value",
+		event: "onChange",
+		read: "argument"
+	}
+});
+//#endregion
+//#region src/Tabs/TabList/TabList.catalog.ts
+const tabListCatalog = defineCatalogEntry()({
+	summary: "The `Tabs` of a `TabContext` - it shows the context's value and links each tab to its panel.",
+	isPlaceable: false,
+	example: {
+		component: "TabList",
+		props: { "aria-label": "Left panel" },
+		children: [node("Tab", {
+			value: "layers",
+			label: "Layers"
+		}), node("Tab", {
+			value: "assets",
+			label: "Assets"
+		})]
+	},
+	variants: [],
+	options: {},
+	content: {
+		children: "children",
+		startContent: "children",
+		endContent: "children"
+	},
+	domEvents: ["onChange", "onTabClose"]
+});
+const tabScrollButtonCatalog = defineCatalogEntry()({
+	summary: "The button that scrolls a row of tabs - a `Tabs` shows one at each end while they overflow.",
+	isPlaceable: false,
+	example: {
+		component: "TabScrollButton",
+		props: { direction: "end" },
+		children: []
+	},
+	variants: [],
+	options: {
+		direction: { values: ["start", "end"] },
+		orientation: {
+			values: ["horizontal", "vertical"],
+			default: "horizontal"
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		isHidden: {
+			values: [true, false],
+			default: false
+		},
+		color: { scale: "palette" },
+		textColor: { scale: "text" }
+	},
+	content: { children: "children" },
+	domEvents: ["onClick"]
+});
+//#endregion
+//#region src/Table/Table/Table.catalog.ts
+const tableSizeValues = [
+	"sm",
+	"md",
+	"lg"
+];
+const tableCellPaddingValues = ["normal", "none"];
+const tableAlignValues = [
+	"left",
+	"right",
+	"center",
+	"justify"
+];
+const sizeLabels = {
+	sm: "Dense",
+	md: "Default",
+	lg: "Roomy"
+};
+const deployments = [node("TableHead", {}, [node("TableRow", {}, [
+	node("TableCell", {}, ["Service"]),
+	node("TableCell", {}, ["Region"]),
+	node("TableCell", { align: "right" }, ["Latency (ms)"])
+])]), node("TableBody", {}, [node("TableRow", { isHoverable: true }, [
+	node("TableCell", {}, ["web"]),
+	node("TableCell", {}, ["fra1"]),
+	node("TableCell", { align: "right" }, ["42"])
+]), node("TableRow", { isHoverable: true }, [
+	node("TableCell", {}, ["api"]),
+	node("TableCell", {}, ["fra1"]),
+	node("TableCell", { align: "right" }, ["87"])
+])])];
+const tableCatalog = defineCatalogEntry()({
+	summary: "A data table - `TableHead`, `TableBody` and `TableFooter` sections of `TableRow`s and `TableCell`s, with density and padding set once for every cell.",
+	isPlaceable: true,
+	example: {
+		component: "Table",
+		props: {},
+		children: deployments
+	},
+	variants: tableSizeValues.map((size) => ({
+		name: size,
+		label: sizeLabels[size],
+		example: {
+			component: "Table",
+			props: { size },
+			children: deployments
+		}
+	})),
+	options: {
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		cellPadding: {
+			values: tableCellPaddingValues,
+			default: "normal"
+		},
+		align: { values: tableAlignValues },
+		color: { scale: "palette" },
+		bg: { scale: "background" },
+		borderColor: {
+			scale: "border",
+			default: "light"
+		},
+		borderRadius: { scale: "radii" },
+		hasStickyHeader: {
+			values: [true, false],
+			default: false
+		},
+		shouldHideSortIcon: {
+			values: [true, false],
+			default: true
+		},
+		hasEllipsis: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: { children: "children" },
+	preview: { width: 360 }
+});
+//#endregion
+//#region src/Table/TableBody/TableBody.catalog.ts
+const tableBodyCatalog = defineCatalogEntry()({
+	summary: "The body section of a `Table` - its data rows, with cells rendered as `<td>`.",
+	isPlaceable: false,
+	example: {
+		component: "TableBody",
+		props: {},
+		children: [node("TableRow", { isHoverable: true }, [
+			node("TableCell", {}, ["web"]),
+			node("TableCell", {}, ["fra1"]),
+			node("TableCell", { align: "right" }, ["42"])
+		]), node("TableRow", { isHoverable: true }, [
+			node("TableCell", {}, ["api"]),
+			node("TableCell", {}, ["fra1"]),
+			node("TableCell", { align: "right" }, ["87"])
+		])]
+	},
+	variants: [],
+	options: {
+		color: { scale: "text" },
+		bg: { scale: "background" },
+		borderColor: { scale: "border" }
+	},
+	content: { children: "children" }
+});
+//#endregion
+//#region src/Table/TableCell/TableCell.catalog.ts
+const tableCellVariantValues = [
+	"head",
+	"body",
+	"footer"
+];
+const tableCellAlignValues = [
+	"inherit",
+	"left",
+	"right",
+	"center",
+	"justify"
+];
+const tableCellSortDirectionValues = ["asc", "desc"];
+const cellPaddingValues$1 = ["normal", "none"];
+const variantLabels$2 = {
+	head: "Head",
+	body: "Body",
+	footer: "Footer"
+};
+const tableCellCatalog = defineCatalogEntry()({
+	summary: "One cell of a `TableRow` - a header `<th>` or a data `<td>`, taken from its section unless `variant` says otherwise.",
+	isPlaceable: false,
+	example: {
+		component: "TableCell",
+		props: {},
+		children: ["web"]
+	},
+	variants: tableCellVariantValues.map((variant) => ({
+		name: variant,
+		label: variantLabels$2[variant],
+		example: {
+			component: "TableCell",
+			props: { variant },
+			children: ["web"]
+		}
+	})),
+	options: {
+		variant: { values: tableCellVariantValues },
+		align: {
+			values: tableCellAlignValues,
+			default: "inherit"
+		},
+		size: { scale: "sizes" },
+		cellPadding: { values: cellPaddingValues$1 },
+		sortDirection: { values: tableCellSortDirectionValues },
+		hasEllipsis: { values: [true, false] },
+		color: { scale: "text" },
+		bg: { scale: "background" },
+		borderColor: { scale: "border" }
+	},
+	content: { children: "children" }
+});
+//#endregion
+//#region src/Table/TableContainer/TableContainer.catalog.ts
+const tableContainerCatalog = defineCatalogEntry()({
+	summary: "A scroll wrapper for a `Table` - a wide table scrolls sideways inside it, and a bounded height lets `hasStickyHeader` stick.",
+	isPlaceable: false,
+	example: {
+		component: "TableContainer",
+		props: {},
+		children: [node("Table", {}, [node("TableHead", {}, [node("TableRow", {}, [
+			node("TableCell", {}, ["Service"]),
+			node("TableCell", {}, ["Region"]),
+			node("TableCell", { align: "right" }, ["Latency (ms)"])
+		])]), node("TableBody", {}, [node("TableRow", {}, [
+			node("TableCell", {}, ["web"]),
+			node("TableCell", {}, ["fra1"]),
+			node("TableCell", { align: "right" }, ["42"])
+		]), node("TableRow", {}, [
+			node("TableCell", {}, ["api"]),
+			node("TableCell", {}, ["fra1"]),
+			node("TableCell", { align: "right" }, ["87"])
+		])])])]
+	},
+	variants: [],
+	options: {
+		bg: { scale: "background" },
+		borderColor: { scale: "border" },
+		borderWidth: { scale: "borderWidths" },
+		borderRadius: { scale: "radii" }
+	},
+	content: { children: "children" },
+	preview: { width: 360 }
+});
+//#endregion
+//#region src/Table/TableControl/TableControl.catalog.ts
+const tableControlCatalog = defineCatalogEntry()({
+	summary: "Renders the visible rows of a dataset inside `TableBody` - sorted by `useTableSort` and sliced by `useTablePagination`, through a row render function.",
+	isPlaceable: false,
+	example: {
+		component: "TableControl",
+		props: {},
+		children: []
+	},
+	variants: [],
+	options: {},
+	content: { children: "none" }
+});
+//#endregion
+//#region src/Table/TableFooter/TableFooter.catalog.ts
+const tableFooterCatalog = defineCatalogEntry()({
+	summary: "The footer section of a `Table` - totals or a `TablePagination` row below the body.",
+	isPlaceable: false,
+	example: {
+		component: "TableFooter",
+		props: {},
+		children: [node("TableRow", {}, [node("TableCell", { colSpan: 2 }, ["Total services"]), node("TableCell", { align: "right" }, ["3"])])]
+	},
+	variants: [],
+	options: {
+		color: { scale: "text" },
+		bg: { scale: "background" },
+		borderColor: { scale: "border" }
+	},
+	content: { children: "children" }
+});
+//#endregion
+//#region src/Table/TableHead/TableHead.catalog.ts
+const tableHeadCatalog = defineCatalogEntry()({
+	summary: "The header section of a `Table` - its column-title row, with cells rendered as `<th scope=\"col\">`.",
+	isPlaceable: false,
+	example: {
+		component: "TableHead",
+		props: {},
+		children: [node("TableRow", {}, [
+			node("TableCell", {}, ["Service"]),
+			node("TableCell", {}, ["Region"]),
+			node("TableCell", { align: "right" }, ["Latency (ms)"])
+		])]
+	},
+	variants: [],
+	options: {
+		color: { scale: "text" },
+		bg: { scale: "background" },
+		borderColor: { scale: "border" }
+	},
+	content: { children: "children" }
+});
+const tablePaginationCatalog = defineCatalogEntry()({
+	summary: "A pagination cell for `TableFooter > TableRow` - a rows-per-page picker, the shown range and previous/next buttons for a controlled page.",
+	isPlaceable: false,
+	example: {
+		component: "TablePagination",
+		props: {
+			count: 100,
+			page: 2,
+			rowsPerPage: 10
+		},
+		children: []
+	},
+	variants: [],
+	options: {
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		shouldShowFirstButton: {
+			values: [true, false],
+			default: false
+		},
+		shouldShowLastButton: {
+			values: [true, false],
+			default: false
+		},
+		size: { scale: "sizes" },
+		cellPadding: { values: ["normal", "none"] },
+		color: { scale: "text" },
+		bg: { scale: "background" }
+	},
+	content: {
+		rowsPerPageLabel: "text",
+		displayedRowsLabel: "none"
+	},
+	twoWay: {
+		prop: "page",
+		event: "onPageChange",
+		read: "argument"
+	},
+	preview: { width: 480 }
+});
+//#endregion
+//#region src/Table/TablePaginationActions/TablePaginationActions.catalog.ts
+const tablePaginationActionsCatalog = defineCatalogEntry()({
+	summary: "The first, previous, next and last page buttons inside `TablePagination`, disabled at the bounds of `count`.",
+	isPlaceable: false,
+	example: {
+		component: "TablePaginationActions",
+		props: {
+			count: 100,
+			page: 2,
+			rowsPerPage: 10
+		},
+		children: []
+	},
+	variants: [],
+	options: {
+		size: {
+			scale: "sizes",
+			default: "sm"
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		shouldShowFirstButton: {
+			values: [true, false],
+			default: false
+		},
+		shouldShowLastButton: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {},
+	twoWay: {
+		prop: "page",
+		event: "onPageChange",
+		read: "argument"
+	}
+});
+//#endregion
+//#region src/Table/TableRow/TableRow.catalog.ts
+const tableRowCatalog = defineCatalogEntry()({
+	summary: "One row of a `Table` section - its `TableCell`s, optionally shaded on hover or when selected.",
+	isPlaceable: false,
+	example: {
+		component: "TableRow",
+		props: { isHoverable: true },
+		children: [
+			node("TableCell", {}, ["web"]),
+			node("TableCell", {}, ["fra1"]),
+			node("TableCell", { align: "right" }, ["42"])
+		]
+	},
+	variants: [],
+	options: {
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		bg: { scale: "background" },
+		borderColor: { scale: "border" },
+		isHoverable: {
+			values: [true, false],
+			default: false
+		},
+		isSelected: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: { children: "children" },
+	domEvents: ["onClick"]
+});
+const tableSortLabelCatalog = defineCatalogEntry()({
+	summary: "A sortable column title for a header `TableCell` - a button with an arrow showing the sort direction.",
+	isPlaceable: false,
+	example: {
+		component: "TableSortLabel",
+		props: {
+			isActive: true,
+			direction: "asc"
+		},
+		children: ["Name"]
+	},
+	variants: [],
+	options: {
+		isActive: {
+			values: [true, false],
+			default: false
+		},
+		direction: {
+			values: ["asc", "desc"],
+			default: "asc"
+		},
+		shouldHideSortIcon: {
+			values: [true, false],
+			default: true
+		}
+	},
+	content: { children: "children" },
+	domEvents: ["onClick"]
+});
+//#endregion
+//#region src/TextInput/TextInput.catalog.ts
+const textInputVariantValues = [
+	"default",
+	"outlined",
+	"text",
+	"underline"
+];
+const variantLabels$1 = {
+	default: "Filled",
+	outlined: "Outlined",
+	text: "Text",
+	underline: "Underline"
+};
+const textInputCatalog = defineCatalogEntry()({
+	summary: "A text field - one line, or a `multiline` textarea that can grow with its content.",
+	isPlaceable: true,
+	example: {
+		component: "TextInput",
+		props: { placeholder: "Enter a value..." },
+		children: []
+	},
+	variants: textInputVariantValues.map((variant) => ({
+		name: variant,
+		label: variantLabels$1[variant],
+		example: {
+			component: "TextInput",
+			props: {
+				placeholder: "Enter a value...",
+				variant
+			},
+			children: []
+		}
+	})),
+	options: {
+		variant: {
+			values: textInputVariantValues,
+			default: "default"
+		},
+		color: {
+			scale: "palette",
+			default: "primary"
+		},
+		textColor: {
+			scale: "text",
+			default: "primary"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		borderRadius: { scale: "radii" },
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		error: {
+			values: [true, false],
+			default: false
+		},
+		readOnly: {
+			values: [true, false],
+			default: false
+		},
+		required: {
+			values: [true, false],
+			default: false
+		},
+		fullWidth: {
+			values: [true, false],
+			default: false
+		},
+		multiline: {
+			values: [true, false],
+			default: false
+		},
+		resize: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: { placeholder: "text" },
+	twoWay: {
+		prop: "value",
+		event: "onChange",
+		read: "target.value"
+	}
+});
+//#endregion
+//#region src/ToggleButton/ToggleButton/ToggleButton.catalog.ts
+const colorLabels$1 = {
+	default: "Default",
+	primary: "Primary",
+	secondary: "Secondary",
+	success: "Success",
+	error: "Error",
+	info: "Info",
+	warning: "Warning"
+};
+const colors$1 = Object.keys(colorLabels$1);
+const toggleButtonCatalog = defineCatalogEntry()({
+	summary: "A button that stays pressed or not - on its own, or one choice of a `ToggleButtonGroup`.",
+	isPlaceable: true,
+	example: {
+		component: "ToggleButton",
+		props: { value: "check" },
+		children: ["Check"]
+	},
+	variants: colors$1.map((color) => ({
+		name: color,
+		label: colorLabels$1[color],
+		example: {
+			component: "ToggleButton",
+			props: {
+				value: "check",
+				color,
+				isSelected: true
+			},
+			children: ["Check"]
+		}
+	})),
+	options: {
+		color: {
+			scale: "palette",
+			default: "default"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		isSelected: { values: [true, false] },
+		fullWidth: {
+			values: [true, false],
+			default: false
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		loading: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: {
+		children: "children",
+		startIcon: "child",
+		endIcon: "child",
+		loadingIndicator: "child"
+	},
+	domEvents: ["onClick", "onChange"]
+});
+//#endregion
+//#region src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.catalog.ts
+const toggleButtonGroupOrientationValues = ["horizontal", "vertical"];
+const colorLabels = {
+	default: "Default",
+	primary: "Primary",
+	secondary: "Secondary",
+	success: "Success",
+	error: "Error",
+	info: "Info",
+	warning: "Warning"
+};
+const colors = Object.keys(colorLabels);
+const platforms = [
+	node("ToggleButton", { value: "web" }, ["Web"]),
+	node("ToggleButton", { value: "android" }, ["Android"]),
+	node("ToggleButton", { value: "ios" }, ["iOS"])
+];
+const props = {
+	isExclusive: true,
+	value: "web",
+	"aria-label": "Platform"
+};
+const toggleButtonGroupCatalog = defineCatalogEntry()({
+	summary: "A joined row of `ToggleButton`s where one (`isExclusive`) or several values can be selected.",
+	isPlaceable: true,
+	example: {
+		component: "ToggleButtonGroup",
+		props: {
+			...props,
+			color: "primary"
+		},
+		children: platforms
+	},
+	variants: colors.map((color) => ({
+		name: color,
+		label: colorLabels[color],
+		example: {
+			component: "ToggleButtonGroup",
+			props: {
+				...props,
+				color
+			},
+			children: platforms
+		}
+	})),
+	options: {
+		isExclusive: {
+			values: [true, false],
+			default: false
+		},
+		color: {
+			scale: "palette",
+			default: "default"
+		},
+		size: {
+			scale: "sizes",
+			default: "md"
+		},
+		orientation: {
+			values: toggleButtonGroupOrientationValues,
+			default: "horizontal"
+		},
+		borderRadius: {
+			scale: "radii",
+			default: "md"
+		},
+		disabled: {
+			values: [true, false],
+			default: false
+		},
+		fullWidth: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: { children: "children" },
+	twoWay: {
+		prop: "value",
+		event: "onChange",
+		read: "argument"
+	}
+});
+//#endregion
+//#region src/Typography/Typography.catalog.ts
+const typographyAlignValues = [
+	"left",
+	"center",
+	"right",
+	"justify",
+	"inherit"
+];
+const pictured = [
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"subtitle1",
+	"subtitle2",
+	"body1",
+	"body2",
+	"caption",
+	"overline",
+	"button"
+];
+const variantLabels = {
+	h1: "Heading 1",
+	h2: "Heading 2",
+	h3: "Heading 3",
+	h4: "Heading 4",
+	h5: "Heading 5",
+	h6: "Heading 6",
+	subtitle1: "Subtitle 1",
+	subtitle2: "Subtitle 2",
+	body1: "Body 1",
+	body2: "Body 2",
+	caption: "Caption",
+	overline: "Overline",
+	button: "Button"
+};
+const typographyCatalog = defineCatalogEntry()({
+	summary: "Text in one of the theme typography variants, rendered as its semantic element.",
+	isPlaceable: true,
+	example: {
+		component: "Typography",
+		props: { variant: "body1" },
+		children: ["Great products are built through clarity, consistency, and attention to detail."]
+	},
+	variants: pictured.map((variant) => ({
+		name: variant,
+		label: variantLabels[variant],
+		example: {
+			component: "Typography",
+			props: { variant },
+			children: ["The quick brown fox"]
+		}
+	})),
+	options: {
+		variant: {
+			scale: "typography",
+			default: "body1"
+		},
+		color: { scale: "text" },
+		bg: { scale: "background" },
+		align: { values: typographyAlignValues },
+		gutterBottom: {
+			values: [true, false],
+			default: false
+		},
+		noWrap: {
+			values: [true, false],
+			default: false
+		}
+	},
+	content: { children: "children" }
+});
+//#endregion
+//#region src/View/View.catalog.ts
+const viewCatalog = defineCatalogEntry()({
+	summary: "The base box - a div styled through theme tokens for space, color, borders and position.",
+	isPlaceable: true,
+	example: {
+		component: "View",
+		props: {},
+		children: ["View content"]
+	},
+	variants: [],
+	options: {
+		bg: { scale: "background" },
+		borderColor: { scale: "border" },
+		borderWidth: { scale: "borderWidths" },
+		borderRadius: { scale: "radii" }
+	},
+	content: { children: "children" }
+});
+//#endregion
+//#region src/catalog/sources.ts
+/** Every component, keyed by its export name. */
+const catalogSources = {
+	AppBar: {
+		entry: appBarCatalog,
+		folder: "AppBar"
+	},
+	Avatar: {
+		entry: avatarCatalog,
+		folder: "Avatar"
+	},
+	Backdrop: {
+		entry: backdropCatalog,
+		folder: "Backdrop"
+	},
+	Breadcrumbs: {
+		entry: breadcrumbsCatalog,
+		folder: "Breadcrumbs"
+	},
+	Button: {
+		entry: buttonCatalog,
+		folder: "Button"
+	},
+	ButtonGroup: {
+		entry: buttonGroupCatalog,
+		folder: "ButtonGroup"
+	},
+	Card: {
+		entry: cardCatalog,
+		folder: "Card"
+	},
+	Checkbox: {
+		entry: checkboxCatalog,
+		folder: "Checkbox"
+	},
+	ContextMenu: {
+		entry: contextMenuCatalog,
+		folder: "Menu",
+		family: "Menu"
+	},
+	CircularProgress: {
+		entry: circularProgressCatalog,
+		folder: "CircularProgress"
+	},
+	Drawer: {
+		entry: drawerCatalog,
+		folder: "Drawer"
+	},
+	DrawerToggle: {
+		entry: drawerToggleCatalog,
+		folder: "Drawer",
+		family: "Drawer"
+	},
+	Flex: {
+		entry: flexCatalog,
+		folder: "Flex"
+	},
+	FocusTrap: {
+		entry: focusTrapCatalog,
+		folder: "FocusTrap"
+	},
+	Form: {
+		entry: formCatalog,
+		folder: "Form"
+	},
+	FormControl: {
+		entry: formControlCatalog,
+		folder: "FormControl"
+	},
+	FormHelperText: {
+		entry: formHelperTextCatalog,
+		folder: "FormHelperText"
+	},
+	FormLabel: {
+		entry: formLabelCatalog,
+		folder: "FormLabel"
+	},
+	Grid: {
+		entry: gridCatalog,
+		folder: "Grid"
+	},
+	Icon: {
+		entry: iconCatalog,
+		folder: "Icon"
+	},
+	Image: {
+		entry: imageCatalog,
+		folder: "Image"
+	},
+	LinearProgress: {
+		entry: linearProgressCatalog,
+		folder: "LinearProgress"
+	},
+	Link: {
+		entry: linkCatalog,
+		folder: "Link"
+	},
+	Menu: {
+		entry: menuCatalog,
+		folder: "Menu"
+	},
+	MenuDivider: {
+		entry: menuDividerCatalog,
+		folder: "Menu",
+		family: "Menu"
+	},
+	MenuItem: {
+		entry: menuItemCatalog,
+		folder: "MenuItem"
+	},
+	MenuItems: {
+		entry: menuItemsCatalog,
+		folder: "Menu",
+		family: "Menu"
+	},
+	MenuList: {
+		entry: menuListCatalog,
+		folder: "Menu",
+		family: "Menu"
+	},
+	Modal: {
+		entry: modalCatalog,
+		folder: "Modal"
+	},
+	NativeSelect: {
+		entry: nativeSelectCatalog,
+		folder: "NativeSelect"
+	},
+	Pagination: {
+		entry: paginationCatalog,
+		folder: "Pagination"
+	},
+	PaginationItem: {
+		entry: paginationItemCatalog,
+		folder: "Pagination",
+		family: "Pagination"
+	},
+	Paper: {
+		entry: paperCatalog,
+		folder: "Paper"
+	},
+	Popover: {
+		entry: popoverCatalog,
+		folder: "Popover"
+	},
+	Portal: {
+		entry: portalCatalog,
+		folder: "Portal"
+	},
+	Pressable: {
+		entry: pressableCatalog,
+		folder: "Pressable"
+	},
+	Quote: {
+		entry: quoteCatalog,
+		folder: "Quote"
+	},
+	Radio: {
+		entry: radioCatalog,
+		folder: "Radio"
+	},
+	Select: {
+		entry: selectCatalog,
+		folder: "Select"
+	},
+	Sidebar: {
+		entry: sidebarCatalog,
+		folder: "Sidebar"
+	},
+	SidebarItem: {
+		entry: sidebarItemCatalog,
+		folder: "Sidebar",
+		family: "Sidebar"
+	},
+	Skeleton: {
+		entry: skeletonCatalog,
+		folder: "Skeleton"
+	},
+	Switch: {
+		entry: switchCatalog,
+		folder: "Switch"
+	},
+	Tab: {
+		entry: tabCatalog,
+		folder: "Tabs",
+		family: "Tabs"
+	},
+	TabPanel: {
+		entry: tabPanelCatalog,
+		folder: "Tabs",
+		family: "Tabs"
+	},
+	Tabs: {
+		entry: tabsCatalog,
+		folder: "Tabs"
+	},
+	TabContext: {
+		entry: tabContextCatalog,
+		folder: "Tabs",
+		family: "Tabs"
+	},
+	TabList: {
+		entry: tabListCatalog,
+		folder: "Tabs",
+		family: "Tabs"
+	},
+	TabScrollButton: {
+		entry: tabScrollButtonCatalog,
+		folder: "Tabs",
+		family: "Tabs"
+	},
+	Table: {
+		entry: tableCatalog,
+		folder: "Table"
+	},
+	TableBody: {
+		entry: tableBodyCatalog,
+		folder: "Table",
+		family: "Table"
+	},
+	TableCell: {
+		entry: tableCellCatalog,
+		folder: "Table",
+		family: "Table"
+	},
+	TableContainer: {
+		entry: tableContainerCatalog,
+		folder: "Table",
+		family: "Table"
+	},
+	TableControl: {
+		entry: tableControlCatalog,
+		folder: "Table",
+		family: "Table"
+	},
+	TableFooter: {
+		entry: tableFooterCatalog,
+		folder: "Table",
+		family: "Table"
+	},
+	TableHead: {
+		entry: tableHeadCatalog,
+		folder: "Table",
+		family: "Table"
+	},
+	TablePagination: {
+		entry: tablePaginationCatalog,
+		folder: "Table",
+		family: "Table"
+	},
+	TablePaginationActions: {
+		entry: tablePaginationActionsCatalog,
+		folder: "Table",
+		family: "Table"
+	},
+	TableRow: {
+		entry: tableRowCatalog,
+		folder: "Table",
+		family: "Table"
+	},
+	TableSortLabel: {
+		entry: tableSortLabelCatalog,
+		folder: "Table",
+		family: "Table"
+	},
+	TextInput: {
+		entry: textInputCatalog,
+		folder: "TextInput"
+	},
+	ToggleButton: {
+		entry: toggleButtonCatalog,
+		folder: "ToggleButton"
+	},
+	ToggleButtonGroup: {
+		entry: toggleButtonGroupCatalog,
+		folder: "ToggleButton",
+		family: "ToggleButton"
+	},
+	Typography: {
+		entry: typographyCatalog,
+		folder: "Typography"
+	},
+	View: {
+		entry: viewCatalog,
+		folder: "View"
+	}
+};
+//#endregion
+//#region src/catalog/styleScales.ts
+const DESIGN_SYSTEM_SCALES = {
+	color: "text",
+	bg: "background",
+	backgroundColor: "background",
+	borderColor: "border"
+};
+const parsers = [
+	space,
+	layout,
+	typography,
+	color,
+	border,
+	flexbox,
+	position,
+	background,
+	shadow,
+	grid
+];
+/**
+* Each styled-system prop that resolves against a theme scale, and that scale - read from
+* the parsers' own configs, so it can't drift from what the props do. A parser's scale the
+* theme doesn't have (`display`, `overflow`) is left out: there are no values to offer.
+*/
+function readStyleScales() {
+	const scales = {};
+	for (const parser of parsers) for (const [prop, config] of Object.entries(parser.config)) {
+		const { scale } = config;
+		if (scale && scale in baseTheme) scales[prop] = scale;
+	}
+	return {
+		...scales,
+		...DESIGN_SYSTEM_SCALES
+	};
+}
+//#endregion
+//#region src/catalog/index.ts
+const designSystemCategories = componentCategories.map((category) => ({
+	label: category.label,
+	components: category.items.filter((item) => item.pkg === "design-system").map((item) => item.name)
+}));
+const categoryOf = (name) => designSystemCategories.find((category) => category.components.includes(name)).label;
+const components = Object.fromEntries(Object.entries(catalogSources).map(([name, { entry, folder, family }]) => [name, {
+	...entry,
+	name,
+	module: `@soroush.tech/design-system/${folder}`,
+	category: categoryOf(family ?? name)
+}]));
+/**
+* @description Every component of the design system as data a tool can read - its
+* category, where it is imported from, what a freshly placed one is, its looks as
+* pictures, the props a picker offers and their theme scales, and how its node props and
+* two-way props are written. Pure data: it loads in Node with no DOM, React or Emotion.
+*/
+const catalog = {
+	categories: designSystemCategories,
+	styleScales: readStyleScales(),
+	components
+};
+//#endregion
+export { catalog };