@yahoo/uds-create-config 2.45.0 → 3.0.1

package/dist/factories.js

@@ -1,475 +0,0 @@
-import { attachSourcePath, captureCallerPath } from "./captureCallerPath.js";
-import { composite, styleProp, tag, token } from "./refs.js";
-import { darken, lighten } from "./colorExpressions.js";
-import "./defineProvider.js";
-//#region src/factories.ts
-/** @internal Platform-neutral implementation behind web and native factories. */
-function defineTokenGroupValue(t) {
-	const out = {
-		tokens: t,
-		metadata(meta) {
-			if (meta.label !== void 0) out.label = meta.label;
-			if (meta.description !== void 0) out.description = meta.description;
-			return out;
-		}
-	};
-	attachSourcePath(out, captureCallerPath());
-	Object.defineProperty(out, "metadata", {
-		enumerable: false,
-		configurable: true,
-		writable: true,
-		value: out.metadata
-	});
-	return out;
-}
-function defineTokenGroup(t) {
-	return defineTokenGroupValue(t);
-}
-function defineModifier(t) {
-	return attachSourcePath(t, captureCallerPath());
-}
-function defineMode(t) {
-	return attachSourcePath(t, captureCallerPath());
-}
-function defineCompositeStyle(t) {
-	return attachSourcePath(t, captureCallerPath());
-}
-/**
-* Author a motion preset. Accepts the same `{ runtime, ... }` shape passed to
-* `.registerMotion({...})`. Author-side `label` / `description` attach via the
-* chained `.metadata({...})`, mirroring `defineTokenGroup`.
-*/
-function defineMotion(t) {
-	const out = attachSourcePath(t, captureCallerPath());
-	Object.defineProperty(out, "metadata", {
-		enumerable: false,
-		configurable: true,
-		writable: true,
-		value(meta) {
-			if (meta.label !== void 0) out.label = meta.label;
-			if (meta.description !== void 0) out.description = meta.description;
-			return out;
-		}
-	});
-	return out;
-}
-function defineComponentGroup(t) {
-	return attachSourcePath(t, captureCallerPath());
-}
-/**
-* Author a style-prop spec. `P` is inferred from `cssProperty` so the
-* `values` array narrows against the chosen CSS property's accepted
-* keyword union (`'transparent'` is OK for `border-color`, errors for
-* `padding`). For custom properties (`--foo`), `values` accepts open
-* strings — `cssType` constrains the runtime value space instead.
-*
-* Returns the spec with a non-enumerable `.metadata({...})` chain;
-* the chain merges the supplied bag into `spec.metadata` so multiple
-* `.metadata({...})` calls accumulate.
-*/
-function defineStyleProp(spec) {
-	const fieldMetadata = spec.metadata;
-	const attached = attachSourcePath(spec, captureCallerPath());
-	Object.defineProperty(attached, "metadata", {
-		enumerable: false,
-		configurable: true,
-		writable: true,
-		value(meta) {
-			attached.metadata = {
-				...attached.metadata ?? {},
-				...meta
-			};
-			return attached;
-		}
-	});
-	if (fieldMetadata && typeof fieldMetadata === "object") attached.metadata(fieldMetadata);
-	Object.defineProperty(attached, "withOpacity", {
-		enumerable: false,
-		configurable: true,
-		writable: true,
-		value(opacitySpec) {
-			attached.opacityPair = {
-				as: opacitySpec.as,
-				values: opacitySpec.values,
-				separator: opacitySpec.separator ?? "_",
-				ref: opacitySpec.as
-			};
-			return attached;
-		}
-	});
-	return attached;
-}
-function slot(pathOrOptions, options) {
-	let marker;
-	const openOptions = typeof pathOrOptions === "object" ? pathOrOptions : void 0;
-	const pathOrLayer = typeof pathOrOptions === "string" ? pathOrOptions : void 0;
-	const valueType = openOptions?.type ?? options?.type;
-	if (pathOrLayer === void 0) marker = { __kind: "slot" };
-	else if (options?.prop !== void 0) marker = {
-		__kind: "slot",
-		layer: pathOrLayer,
-		layerProp: options.prop
-	};
-	else {
-		const slash = pathOrLayer.indexOf("/");
-		marker = slash === -1 ? {
-			__kind: "slot",
-			layer: pathOrLayer,
-			layerProp: "children"
-		} : {
-			__kind: "slot",
-			layer: pathOrLayer.slice(0, slash),
-			layerProp: pathOrLayer.slice(slash + 1)
-		};
-	}
-	if (valueType !== void 0) Object.defineProperty(marker, "__valueType", {
-		enumerable: true,
-		configurable: true,
-		writable: true,
-		value: valueType
-	});
-	Object.defineProperty(marker, "required", {
-		enumerable: false,
-		configurable: true,
-		writable: true,
-		value() {
-			Object.defineProperty(marker, "__required", {
-				enumerable: true,
-				configurable: true,
-				writable: true,
-				value: true
-			});
-			return marker;
-		}
-	});
-	Object.defineProperty(marker, "accepts", {
-		enumerable: false,
-		configurable: true,
-		writable: true,
-		value(component) {
-			Object.defineProperty(marker, "__accepts", {
-				enumerable: true,
-				configurable: true,
-				writable: true,
-				value: Array.isArray(component) ? component : [component]
-			});
-			return marker;
-		}
-	});
-	Object.defineProperty(marker, "transform", {
-		enumerable: false,
-		configurable: true,
-		writable: true,
-		value(fn) {
-			Object.defineProperty(marker, "__transform", {
-				enumerable: true,
-				configurable: true,
-				writable: true,
-				value: fn
-			});
-			return marker;
-		}
-	});
-	return marker;
-}
-/**
-* Attach a chainable `.required()` method to a marker that flips
-* `__required: true` and returns the same marker reference (so further
-* chaining still works).
-*/
-function attachRequired(marker) {
-	Object.defineProperty(marker, "required", {
-		enumerable: false,
-		configurable: true,
-		writable: true,
-		value() {
-			Object.defineProperty(marker, "__required", {
-				enumerable: true,
-				configurable: true,
-				writable: true,
-				value: true
-			});
-			return marker;
-		}
-	});
-	return marker;
-}
-/**
-* Boolean-prop binding. Codegen emits the prop as `<name>?: boolean`
-* and routes presence/absence into a per-layer `data-${name}` attribute
-* the runtime selects on. Mirrors the old `@yahoo/uds-create-config` `helpers.boolean()`.
-*
-* The optional `values` argument carries per-state per-layer styles
-* (`{ true: { root: {...} }, false: { root: {...} } }`) — codegen emits
-* one variant CSS class per layer per state, same as `variant({...})`.
-*
-* `.required()` flips the prop to mandatory at JSX call sites.
-*/
-function boolean(values) {
-	return attachRequired(values === void 0 ? { __kind: "boolean" } : {
-		__kind: "boolean",
-		values
-	});
-}
-/**
-* `asChild()` — opt a **single-layer** component into the polymorphic-child
-* Slot pattern. Declare it as a prop (`props: { asChild: asChild() }`); when a
-* consumer passes `asChild`, the component merges its computed props (className,
-* style props, handlers) onto its single child element instead of rendering its
-* own tag — codegen wires the `_renderAsChild` Slot. Typed as a boolean prop
-* (`asChild?: boolean`), so no extra type plumbing.
-*
-* Opt-in only and single-layer only: multi-layer composites render multiple
-* children and can't slot a single child, so the codegen Slot branch is emitted
-* solely for inline single-layer FCs.
-*/
-function asChild() {
-	return {
-		__kind: "boolean",
-		__asChild: true
-	};
-}
-/**
-* Cross-layer style override — `_hover: layer('close', { opacity: 1 })`
-* declares "when this layer is hovered, apply these styles to the
-* named layer". Codegen emits a descendant-combinator rule pointing
-* from the source layer's selector to the target layer's selector.
-* Mirrors the old `@yahoo/uds-create-config` `helpers.layer()`.
-*/
-function layer(layerName, styles) {
-	return {
-		__kind: "layer",
-		layer: layerName,
-		styles
-	};
-}
-function variant(values, defaultValue) {
-	return attachRequired(defaultValue === void 0 ? {
-		__kind: "variant",
-		values
-	} : {
-		__kind: "variant",
-		values,
-		default: defaultValue
-	});
-}
-/**
-* Wide-string prop binding. Codegen emits the prop as `<name>?: string`
-* (or required when chained with `.required()`). No CSS effect — use
-* this for free-form text props (URLs, labels). When you want a
-* constrained list of accepted strings, reach for the array form of
-* `variant(...)` instead. Chain `.toggle()` when the prop reads as an on/off
-* feature (e.g. `tooltip`) — editors show a switch that reveals the field.
-*/
-function string() {
-	const marker = attachRequired({ __kind: "string" });
-	Object.defineProperty(marker, "toggle", {
-		enumerable: false,
-		configurable: true,
-		writable: true,
-		value() {
-			Object.defineProperty(marker, "__toggle", {
-				enumerable: true,
-				configurable: true,
-				writable: true,
-				value: true
-			});
-			return marker;
-		}
-	});
-	return marker;
-}
-/**
-* Wide-number prop binding. Codegen emits the prop as `<name>?: number`
-* (or required when chained with `.required()`). No CSS effect — use
-* this for free-form numeric props (tabIndex, count). When you want a
-* constrained list of accepted numbers, reach for the array form of
-* `variant(...)` instead.
-*/
-function number() {
-	return attachRequired({ __kind: "number" });
-}
-/**
-* JS-motion prop binding. Emits `<name>?: SlotMotion | MotionName` — either an
-* inline framer-motion config object (`{ initial, animate, whileHover,
-* transition, … }`) or the name of a `registerMotion({...})` preset
-* (`motion="fadeIn"`; `MotionName` narrows to the registered names in an
-* augmented config, else `string`). The loader routes both through
-* `_renderWithMotion` at runtime (preset name → registered JS/CSS motion;
-* object → inline config), so
-* it produces no CSS of its own — this is the JS-animation counterpart to the
-* CSS `animation`/`transition` style props, not a `styleProp`. Chain
-* `.required()` to force callers to pass it.
-*/
-function motion() {
-	return attachRequired({ __kind: "motion" });
-}
-/**
-* Axis marker for `.preview({ matrix: { columns, rows } })`. The
-* `kind` field discriminates between prop axes (varies a JSX prop
-* across the grid) and modifier axes (toggles a `_${name}` modifier
-* across the grid). Studio reads these to build the canvas preview;
-* codegen round-trips them verbatim through `Component.preview`.
-*
-* `.nest(child)` builds a 2-D nesting — the outer axis steps once
-* per child-axis sweep. Mirrors the old `@yahoo/uds-create-config` matrix shape.
-*/
-function makePreviewAxis(source, nested) {
-	return {
-		__kind: "previewAxis",
-		...source,
-		...nested !== void 0 ? { nested } : {},
-		nest(child) {
-			return makePreviewAxis(source, child);
-		}
-	};
-}
-const configHelpers = {
-	slot,
-	variant,
-	boolean,
-	asChild,
-	string,
-	number,
-	motion,
-	layer,
-	composite,
-	styleProp,
-	token,
-	darken,
-	lighten
-};
-/**
-* Normalize the `props()` argument to a rule list: a flat bag becomes a
-* single unconditional rule; a rule array passes through.
-*/
-function normalizePropsRules(arg) {
-	return Array.isArray(arg) ? arg : [{ props: arg }];
-}
-const previewHelpers = {
-	prop: (name) => makePreviewAxis({
-		kind: "prop",
-		prop: name
-	}),
-	modifier: (name) => makePreviewAxis({
-		kind: "modifier",
-		modifier: name
-	}),
-	props: (arg) => makePreviewAxis({
-		kind: "props",
-		rules: normalizePropsRules(arg)
-	}),
-	states: (values) => makePreviewAxis({
-		kind: "stateAxis",
-		states: values
-	})
-};
-/**
-* Fields merged shallowly when `.config(cb)` runs — each subkey from a
-* later call overlays the same subkey on the seed (so `defaultProps:
-* { as: 'path' }` doesn't drop Box's inherited defaults). Other fields
-* (`compoundProps`, `motion` scalar) overwrite.
-*/
-const MERGEABLE_NESTED_FIELDS = new Set([
-	"props",
-	"base",
-	"defaultProps",
-	"motion"
-]);
-function mergeConfigIntoSeed(seed, addition) {
-	for (const [key, value] of Object.entries(addition)) {
-		if (MERGEABLE_NESTED_FIELDS.has(key) && typeof value === "object" && value !== null) {
-			const existing = seed[key];
-			const base = typeof existing === "object" && existing !== null ? existing : {};
-			if (key === "base") {
-				const merged = { ...base };
-				for (const [layerName, layerStyles] of Object.entries(value)) {
-					const prevLayer = merged[layerName];
-					merged[layerName] = typeof prevLayer === "object" && prevLayer !== null && typeof layerStyles === "object" && layerStyles !== null ? {
-						...prevLayer,
-						...layerStyles
-					} : layerStyles;
-				}
-				seed[key] = merged;
-				continue;
-			}
-			seed[key] = {
-				...base,
-				...value
-			};
-			continue;
-		}
-		seed[key] = value;
-	}
-}
-function isComponentBuilderValue(value) {
-	return typeof value === "object" && value !== null && typeof value.config === "function";
-}
-function attachChainMethods(seed) {
-	const def = (key, value) => {
-		Object.defineProperty(seed, key, {
-			enumerable: false,
-			configurable: true,
-			writable: true,
-			value
-		});
-	};
-	def("config", function configMethod(cb) {
-		mergeConfigIntoSeed(seed, cb(configHelpers));
-		return seed;
-	});
-	def("render", function renderMethod(fn) {
-		def("__renderFn", fn);
-		def("__hasRenderFn", true);
-		return seed;
-	});
-	def("renderCanvas", function renderCanvasMethod(fn) {
-		def("__renderCanvasFn", fn);
-		def("__hasRenderCanvasFn", true);
-		return seed;
-	});
-	def("preview", function previewMethod(spec) {
-		def("__preview", typeof spec === "function" ? spec(previewHelpers) : spec);
-		return seed;
-	});
-	def("subcomponents", function subcomponentsMethod(children) {
-		for (const [childName, child] of Object.entries(children)) if (typeof child !== "object" || child === null || typeof child.layers !== "object") throw new Error(`subcomponents: entry "${childName}" is not a component definition`);
-		def("__subcomponents", children);
-		return seed;
-	});
-	def("metadata", function metadataMethod(meta) {
-		seed.metadata = {
-			...seed.metadata ?? {},
-			...meta
-		};
-		return seed;
-	});
-	return seed;
-}
-function defineComponentImpl(arg) {
-	let seed;
-	let extendsFromRef;
-	if (typeof arg === "string") seed = { layers: { root: tag(arg) } };
-	else if (isComponentBuilderValue(arg)) {
-		const source = arg;
-		seed = { ...source };
-		extendsFromRef = source;
-	} else seed = arg;
-	attachSourcePath(seed, captureCallerPath());
-	attachChainMethods(seed);
-	if (extendsFromRef !== void 0) Object.defineProperty(seed, "__extendsFrom", {
-		enumerable: false,
-		configurable: true,
-		writable: true,
-		value: extendsFromRef
-	});
-	return seed;
-}
-defineComponentImpl.layers = function layersEntry(layers) {
-	const seed = { layers };
-	attachSourcePath(seed, captureCallerPath());
-	return attachChainMethods(seed);
-};
-const defineComponent = defineComponentImpl;
-//#endregion
-export { asChild, boolean, defineComponent, defineComponentGroup, defineCompositeStyle, defineMode, defineModifier, defineMotion, defineStyleProp, defineTokenGroup, defineTokenGroupValue, motion, number, slot, string, variant };

package/dist/font-face.d.ts

@@ -1,25 +0,0 @@
-import { FontAssetMember } from "./types.js";
-import { Config } from "./Config.js";
-
-//#region src/font-face.d.ts
-/**
- * Derive the `@font-face` block(s) for one font member — one block per
- * declaration. Declarations missing a URL are skipped. Returns an empty
- * string when the member yields no usable faces.
- */
-declare function deriveFontFaceCss(member: FontAssetMember): string;
-/**
- * Family names already declared via `@font-face` in the config's raw CSS
- * (`includeCss`). Used to enforce the single-path invariant: a family loaded
- * that way must not be re-declared from the asset-group path.
- */
-declare function familiesInRawCss(rawCss: readonly string[]): Set<string>;
-/**
- * Derive the `@font-face` stylesheet for every registered font member across
- * all font-class asset groups, excluding any family already declared in the
- * config's raw CSS (single-path invariant). Returns the stylesheet body, or an
- * empty string when there's nothing to inject.
- */
-declare function collectFontFaceCss(config: Config): string;
-//#endregion
-export { collectFontFaceCss, deriveFontFaceCss, familiesInRawCss };

package/dist/font-face.js

@@ -1,72 +0,0 @@
-//#region src/font-face.ts
-function str(value) {
-	return typeof value === "string" ? value : "";
-}
-/** The declaration's font file URL — real data uses `url`, older fixtures `src`. */
-function declarationUrl(declaration) {
-	return str(declaration.url) || str(declaration.src);
-}
-function srcValue(url, format, isVariableFont) {
-	return isVariableFont ? `url('${url}') format("woff2 supports variations"), url('${url}') format('woff2-variations')` : `url('${url}') format('${format}')`;
-}
-/**
-* Derive the `@font-face` block(s) for one font member — one block per
-* declaration. Declarations missing a URL are skipped. Returns an empty
-* string when the member yields no usable faces.
-*/
-function deriveFontFaceCss(member) {
-	const isVariableFont = member.isVariableFont === true;
-	const blocks = [];
-	for (const declaration of member.declarations) {
-		const url = declarationUrl(declaration);
-		if (!url) continue;
-		const lines = [`  font-family: "${member.fontFamily}";`];
-		const style = str(declaration.style);
-		if (style) lines.push(`  font-style: ${style};`);
-		const weight = declaration.weight;
-		if (typeof weight === "string" || typeof weight === "number") lines.push(`  font-weight: ${weight};`);
-		lines.push("  font-display: swap;");
-		const format = str(declaration.format) || "woff2";
-		lines.push(`  src: ${srcValue(url, format, isVariableFont)};`);
-		blocks.push(`@font-face {\n${lines.join("\n")}\n}`);
-	}
-	return blocks.join("\n\n");
-}
-const FONT_FACE_BLOCK = /@font-face\s*\{([^}]*)\}/g;
-const FONT_FAMILY_DECL = /font-family\s*:\s*["']?([^;"']+)/;
-/**
-* Family names already declared via `@font-face` in the config's raw CSS
-* (`includeCss`). Used to enforce the single-path invariant: a family loaded
-* that way must not be re-declared from the asset-group path.
-*/
-function familiesInRawCss(rawCss) {
-	const families = /* @__PURE__ */ new Set();
-	const joined = rawCss.join("\n");
-	for (const [, body] of joined.matchAll(FONT_FACE_BLOCK)) {
-		const family = body.match(FONT_FAMILY_DECL)?.[1]?.trim();
-		if (family) families.add(family);
-	}
-	return families;
-}
-/**
-* Derive the `@font-face` stylesheet for every registered font member across
-* all font-class asset groups, excluding any family already declared in the
-* config's raw CSS (single-path invariant). Returns the stylesheet body, or an
-* empty string when there's nothing to inject.
-*/
-function collectFontFaceCss(config) {
-	const excluded = familiesInRawCss(config.rawCss);
-	const blocks = [];
-	for (const group of config.assetGroups.values()) {
-		if (group.assetKind !== "font" || !group.members) continue;
-		for (const member of Object.values(group.members)) {
-			const font = member;
-			if (excluded.has(font.fontFamily)) continue;
-			const css = deriveFontFaceCss(font);
-			if (css) blocks.push(css);
-		}
-	}
-	return blocks.join("\n\n");
-}
-//#endregion
-export { collectFontFaceCss, deriveFontFaceCss, familiesInRawCss };

package/dist/foreign-component-name.d.ts

@@ -1,21 +0,0 @@
-/**
- * Reserved registry namespace for third-party leaf components — the prefix in a
- * `foreign:<displayName>` key. Not a peer design-system namespace (those are
- * meaningful disambiguation); it marks "not a UDS component," so display
- * surfaces strip it to the bare name.
- */
-export declare const FOREIGN_NAMESPACE = "foreign";
-/**
- * Display name for a `forwardRef`/`memo` component object — preferring its own
- * `displayName`, then the wrapped function's name. Returns `null` for anything
- * that isn't one of those wrappers, and for an anonymous wrapper with no
- * resolvable name (so the JSX runtime can keep it as a pending ref instead).
- */
-export declare function foreignComponentName(type: unknown): string | null;
-/**
- * Registry key for a foreign component: `foreign:<displayName>`. The
- * `foreign:` namespace keeps a third-party component (e.g. an icon named
- * `Button`) from clobbering a registered UDS component of the same name.
- * Returns `null` when the component has no resolvable foreign name.
- */
-export declare function foreignRegistryKey(type: unknown): string | null;

package/dist/foreign-component-name.js

@@ -1,42 +0,0 @@
-//#region src/foreign-component-name.ts
-/**
-* Reserved registry namespace for third-party leaf components — the prefix in a
-* `foreign:<displayName>` key. Not a peer design-system namespace (those are
-* meaningful disambiguation); it marks "not a UDS component," so display
-* surfaces strip it to the bare name.
-*/
-const FOREIGN_NAMESPACE = "foreign";
-const FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
-const MEMO_TYPE = Symbol.for("react.memo");
-function nameOf(value) {
-	if (typeof value !== "object" && typeof value !== "function") return null;
-	const named = value;
-	if (typeof named.displayName === "string" && named.displayName.length > 0) return named.displayName;
-	if (typeof named.name === "string" && named.name.length > 0) return named.name;
-	return null;
-}
-/**
-* Display name for a `forwardRef`/`memo` component object — preferring its own
-* `displayName`, then the wrapped function's name. Returns `null` for anything
-* that isn't one of those wrappers, and for an anonymous wrapper with no
-* resolvable name (so the JSX runtime can keep it as a pending ref instead).
-*/
-function foreignComponentName(type) {
-	if (type === null || typeof type !== "object") return null;
-	const wrapper = type;
-	if (wrapper.$$typeof === FORWARD_REF_TYPE) return nameOf(type) ?? nameOf(wrapper.render);
-	if (wrapper.$$typeof === MEMO_TYPE) return nameOf(type) ?? nameOf(wrapper.type);
-	return null;
-}
-/**
-* Registry key for a foreign component: `foreign:<displayName>`. The
-* `foreign:` namespace keeps a third-party component (e.g. an icon named
-* `Button`) from clobbering a registered UDS component of the same name.
-* Returns `null` when the component has no resolvable foreign name.
-*/
-function foreignRegistryKey(type) {
-	const name = foreignComponentName(type);
-	return name === null ? null : `${FOREIGN_NAMESPACE}:${name}`;
-}
-//#endregion
-export { FOREIGN_NAMESPACE, foreignComponentName, foreignRegistryKey };

package/dist/interpolate.d.ts

@@ -1,20 +0,0 @@
-//#region src/interpolate.d.ts
-/**
- * Motion interpolation marker — used inside `JsMotionDefinition`
- * keyframes to declare an index-based interpolation (e.g. stagger).
- *
- * Codegen's `motion-transform.ts` detects `{ __type: 'interpolate' }`
- * shapes on keyframe values and lifts them into the renderer's
- * `useTransform`-style interpolation.
- */
-interface InterpolateMarker {
-  readonly __type: 'interpolate';
-  readonly output: readonly number[];
-  readonly extrapolate: 'clamp' | 'extend' | 'identity';
-}
-declare function interpolate(config: {
-  output: readonly number[];
-  extrapolate?: 'clamp' | 'extend' | 'identity';
-}): InterpolateMarker;
-//#endregion
-export { interpolate };

package/dist/interpolate.js

@@ -1,10 +0,0 @@
-//#region src/interpolate.ts
-function interpolate(config) {
-	return {
-		__type: "interpolate",
-		output: config.output,
-		extrapolate: config.extrapolate ?? "extend"
-	};
-}
-//#endregion
-export { interpolate };

package/dist/jsx/__fixtures__/cross-component-preview.d.ts

@@ -1,3 +0,0 @@
-import { Config } from '../../index';
-declare const config: Config;
-export default config;

package/dist/jsx/__fixtures__/cross-component-preview.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// Fixture for the `jsx-runtime` Bun.build integration test.
-//
-// Bundled with `jsx: { runtime: 'automatic', importSource: '@yahoo/uds-create-config/jsx' }`
-// so the JSX expression below compiles into calls against our custom JSX
-// runtime instead of React. Exercises the cross-component preview reference
-// timing — `<Icon />` evaluates inside Button's `.preview(...)` callback,
-// BEFORE `registerComponents` stamps `__componentName` on Icon.
-import { Config, defineComponent } from '../../index';
-const Icon = defineComponent('span');
-const Button = defineComponent('button').preview({
-    defaultProps: { children: _jsx(Icon, {}) },
-});
-const config = new Config().registerComponents({ Button, Icon });
-export default config;