createRenderer = (config, internals, sheet, { shouldForwardStitchesProp }) => {
	const [
		baseClassName,
		baseClassNames,
		prefilledVariants,
		undefinedVariants
	] = getPreparedDataFromComposers(internals.composers)

	const deferredInjector = typeof internals.type === 'function' || !!internals.type.$$typeof ? createRulesInjectionDeferrer(sheet) : null
	const injectionTarget = (deferredInjector || sheet).rules

	const selector = `.${baseClassName}${baseClassNames.length > 1 ? `:where(.${baseClassNames.slice(1).join('.')})` : ``}`

	const render = (props) => {
		props = typeof props === 'object' && props || empty

		// 1. we cannot mutate `props`
		// 2. we delete variant props
		// 3. we delete `css` prop
		// therefore: we must create a new props & css variables
		const { ...forwardProps } = props

		const variantProps = {}

		for (const name in prefilledVariants) {
			if (name in props) {
				if (!shouldForwardStitchesProp?.(name)) delete forwardProps[name]
				let data = props[name]

				if (typeof data === 'object' && data) {
					variantProps[name] = {
						'@initial': prefilledVariants[name],
						...data,
					}
				} else {
					data = String(data)

					variantProps[name] = (
						data === 'undefined' && !undefinedVariants.has(name)
							? prefilledVariants[name]
						: data
					)
				}
			} else {
				variantProps[name] = prefilledVariants[name]
			}
		}

		const classSet = new Set([ ...baseClassNames ])

		// 1. builds up the variants (fills in defaults, calculates @initial on responsive, etc.)
		// 2. iterates composers
		// 2.1. add their base class
		// 2.2. iterate their variants, add their variant classes
		// 2.2.1. orders regular variants before responsive variants
		// 2.3. iterate their compound variants, add their compound variant classes

		for (const [composerBaseClass, composerBaseStyle, singularVariants, compoundVariants] of internals.composers) {
			if (!sheet.rules.styled.cache.has(composerBaseClass)) {
				sheet.rules.styled.cache.add(composerBaseClass)

				toCssRules(composerBaseStyle, [`.${composerBaseClass}`], [], config, (cssText) => {
					injectionTarget.styled.apply(cssText)
				})
			}

			const singularVariantsToAdd = getTargetVariantsToAdd(singularVariants, variantProps, config.media)
			const compoundVariantsToAdd = getTargetVariantsToAdd(compoundVariants, variantProps, config.media, true)

			for (const variantToAdd of singularVariantsToAdd) {
				if (variantToAdd === undefined) continue

				for (const [vClass, vStyle, isResponsive] of variantToAdd) {
					const variantClassName = `${composerBaseClass}-${toHash(vStyle)}-${vClass}`

					classSet.add(variantClassName)

					const groupCache = (isResponsive ? sheet.rules.resonevar : sheet.rules.onevar ).cache
					/* 
					 * make sure that normal variants are injected before responsive ones
					 * @see {@link https://github.com/stitchesjs/stitches/issues/737|github}
					 */
					const targetInjectionGroup = isResponsive ? injectionTarget.resonevar : injectionTarget.onevar

					if (!groupCache.has(variantClassName)) {
						groupCache.add(variantClassName)
						toCssRules(vStyle, [`.${variantClassName}`], [], config, (cssText) => {
							targetInjectionGroup.apply(cssText)
						})
					}
				}
			}

			for (const variantToAdd of compoundVariantsToAdd) {
				if (variantToAdd === undefined) continue

				for (const [vClass, vStyle] of variantToAdd) {
					const variantClassName = `${composerBaseClass}-${toHash(vStyle)}-${vClass}`

					classSet.add(variantClassName)

					if (!sheet.rules.allvar.cache.has(variantClassName)) {
						sheet.rules.allvar.cache.add(variantClassName)

						toCssRules(vStyle, [`.${variantClassName}`], [], config, (cssText) => {
							injectionTarget.allvar.apply(cssText)
						})
					}
				}
			}
		}

		// apply css property styles
		const css = forwardProps.css
		if (typeof css === 'object' && css) {
			if (!shouldForwardStitchesProp?.('css')) delete forwardProps.css 
			/** @type {string} Inline Class Unique Identifier. @see `{COMPOSER_UUID}-i{VARIANT_UUID}-css` */
			const iClass = `${baseClassName}-i${toHash(css)}-css`

			classSet.add(iClass)

			if (!sheet.rules.inline.cache.has(iClass)) {
				sheet.rules.inline.cache.add(iClass)

				toCssRules(css, [`.${iClass}`], [], config, (cssText) => {
					injectionTarget.inline.apply(cssText)
				})
			}
		}

		for (const propClassName of String(props.className || '').trim().split(/\s+/)) {
			if (propClassName) classSet.add(propClassName)
		}

		const renderedClassName = forwardProps.className = [ ...classSet ].join(' ')

		const renderedToString = () => renderedClassName

		return {
			type: internals.type,
			className: renderedClassName,
			selector,
			props: forwardProps,
			toString: renderedToString,
			deferredInjector,
		}
	}

	const toString = () => {
		if (!sheet.rules.styled.cache.has(baseClassName)) render()

		return baseClassName
	}

	return define(render, {
		className: baseClassName,
		selector,
		[internal]: internals,
		toString,
	})
}
@type {string} Composer Unique Identifier. @see `{CONFIG_PREFIX}-?c-{STYLE_HASH}`