@mochi-css/vanilla 3.0.0 → 4.0.0

package/dist/src-CGK_rB-l.js

@@ -0,0 +1,2011 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let clsx = require("clsx");
+clsx = __toESM(clsx);
+
+//#region src/token.ts
+/**
+* Represents a CSS custom property (design token) with type information.
+* Provides convenient access to both the variable name and its `var()` reference.
+* @template T - The expected value type of the token (for type checking)
+* @example
+* const primaryColor = new Token<string>('primary-color')
+* primaryColor.variable // '--primary-color'
+* primaryColor.value    // 'var(--primary-color)'
+*/
+var Token = class {
+	/**
+	* Creates a new CSS token.
+	* @param name - The token name (without the `--` prefix)
+	*/
+	constructor(name) {
+		this.name = name;
+	}
+	/**
+	* Gets the CSS custom property name (with `--` prefix).
+	* Use this when defining the variable.
+	*/
+	get variable() {
+		return `--${this.name}`;
+	}
+	/**
+	* Gets the CSS `var()` reference to this token.
+	* Use this when consuming the variable value.
+	*/
+	get value() {
+		return `var(${this.variable})`;
+	}
+	/**
+	* Returns the variable name for string coercion.
+	*/
+	toString() {
+		return this.variable;
+	}
+};
+/**
+* Creates a new CSS design token.
+* @template T - The expected value type of the token
+* @param name - The token name (without the `--` prefix)
+* @returns A new Token instance
+* @example
+* const spacing = createToken<number>('spacing-md')
+* // Use in styles: { gap: spacing.value }
+*/
+function createToken(name) {
+	return new Token(name);
+}
+
+//#endregion
+//#region src/propertyUnits.generated.ts
+const propertyUnits = {
+	animation: "ms",
+	animationDelay: "ms",
+	animationDuration: "ms",
+	animationRange: "px",
+	animationRangeCenter: "px",
+	animationRangeEnd: "px",
+	animationRangeStart: "px",
+	background: "px",
+	backgroundPosition: "px",
+	backgroundPositionBlock: "px",
+	backgroundPositionInline: "px",
+	backgroundPositionX: "px",
+	backgroundPositionY: "px",
+	backgroundSize: "px",
+	backgroundTbd: "px",
+	baselineShift: "px",
+	blockSize: "px",
+	blockStep: "px",
+	blockStepSize: "px",
+	border: "px",
+	borderBlock: "px",
+	borderBlockClip: "px",
+	borderBlockEnd: "px",
+	borderBlockEndClip: "px",
+	borderBlockEndRadius: "px",
+	borderBlockEndWidth: "px",
+	borderBlockStart: "px",
+	borderBlockStartClip: "px",
+	borderBlockStartRadius: "px",
+	borderBlockStartWidth: "px",
+	borderBlockWidth: "px",
+	borderBottom: "px",
+	borderBottomClip: "px",
+	borderBottomLeftRadius: "px",
+	borderBottomRadius: "px",
+	borderBottomRightRadius: "px",
+	borderBottomWidth: "px",
+	borderClip: "px",
+	borderEndEndRadius: "px",
+	borderEndStartRadius: "px",
+	borderImage: "%",
+	borderImageOutset: "px",
+	borderImageSlice: "%",
+	borderImageWidth: "px",
+	borderInline: "px",
+	borderInlineClip: "px",
+	borderInlineEnd: "px",
+	borderInlineEndClip: "px",
+	borderInlineEndRadius: "px",
+	borderInlineEndWidth: "px",
+	borderInlineStart: "px",
+	borderInlineStartClip: "px",
+	borderInlineStartRadius: "px",
+	borderInlineStartWidth: "px",
+	borderInlineWidth: "px",
+	borderLeft: "px",
+	borderLeftClip: "px",
+	borderLeftRadius: "px",
+	borderLeftWidth: "px",
+	borderLimit: "px",
+	borderRadius: "px",
+	borderRight: "px",
+	borderRightClip: "px",
+	borderRightRadius: "px",
+	borderRightWidth: "px",
+	borderSpacing: "px",
+	borderStartEndRadius: "px",
+	borderStartStartRadius: "px",
+	borderTop: "px",
+	borderTopClip: "px",
+	borderTopLeftRadius: "px",
+	borderTopRadius: "px",
+	borderTopRightRadius: "px",
+	borderTopWidth: "px",
+	borderWidth: "px",
+	bottom: "px",
+	boxShadow: "px",
+	boxShadowBlur: "px",
+	boxShadowOffset: "px",
+	boxShadowSpread: "px",
+	columnGap: "px",
+	columnHeight: "px",
+	columnRule: "px",
+	columnRuleEdgeInset: "px",
+	columnRuleEdgeInsetEnd: "px",
+	columnRuleEdgeInsetStart: "px",
+	columnRuleInset: "px",
+	columnRuleInsetEnd: "px",
+	columnRuleInsetStart: "px",
+	columnRuleInteriorInset: "px",
+	columnRuleInteriorInsetEnd: "px",
+	columnRuleInteriorInsetStart: "px",
+	columnRuleWidth: "px",
+	columns: "px",
+	columnWidth: "px",
+	containIntrinsicBlockSize: "px",
+	containIntrinsicHeight: "px",
+	containIntrinsicInlineSize: "px",
+	containIntrinsicSize: "px",
+	containIntrinsicWidth: "px",
+	corner: "px",
+	cornerBlockEnd: "px",
+	cornerBlockStart: "px",
+	cornerBottom: "px",
+	cornerBottomLeft: "px",
+	cornerBottomRight: "px",
+	cornerEndEnd: "px",
+	cornerEndStart: "px",
+	cornerInlineEnd: "px",
+	cornerInlineStart: "px",
+	cornerLeft: "px",
+	cornerRight: "px",
+	cornerStartEnd: "px",
+	cornerStartStart: "px",
+	cornerTop: "px",
+	cornerTopLeft: "px",
+	cornerTopRight: "px",
+	cx: "px",
+	cy: "px",
+	fillOpacity: "%",
+	fillPosition: "px",
+	fillSize: "px",
+	flex: "px",
+	flexBasis: "px",
+	floatOffset: "px",
+	floodOpacity: "%",
+	flowTolerance: "px",
+	font: "deg",
+	fontSize: "px",
+	fontStretch: "%",
+	fontStyle: "deg",
+	fontWidth: "%",
+	gap: "px",
+	grid: "px",
+	gridAutoColumns: "px",
+	gridAutoRows: "px",
+	gridColumnGap: "px",
+	gridGap: "px",
+	gridRowGap: "px",
+	gridTemplate: "px",
+	gridTemplateColumns: "px",
+	gridTemplateRows: "px",
+	height: "px",
+	hyphenateLimitZone: "px",
+	imageOrientation: "deg",
+	imageResolution: "dppx",
+	initialLetterWrap: "px",
+	inlineSize: "px",
+	inset: "px",
+	insetBlock: "px",
+	insetBlockEnd: "px",
+	insetBlockStart: "px",
+	insetInline: "px",
+	insetInlineEnd: "px",
+	insetInlineStart: "px",
+	interestDelay: "ms",
+	interestDelayEnd: "ms",
+	interestDelayStart: "ms",
+	left: "px",
+	letterSpacing: "px",
+	lineHeight: "px",
+	lineHeightStep: "px",
+	linePadding: "px",
+	margin: "px",
+	marginBlock: "px",
+	marginBlockEnd: "px",
+	marginBlockStart: "px",
+	marginBottom: "px",
+	marginInline: "px",
+	marginInlineEnd: "px",
+	marginInlineStart: "px",
+	marginLeft: "px",
+	marginRight: "px",
+	marginTop: "px",
+	mask: "px",
+	maskBorder: "%",
+	maskBorderOutset: "px",
+	maskBorderSlice: "%",
+	maskBorderWidth: "px",
+	maskPosition: "px",
+	maskSize: "px",
+	maxBlockSize: "px",
+	maxHeight: "px",
+	maxInlineSize: "px",
+	maxWidth: "px",
+	minBlockSize: "px",
+	minHeight: "px",
+	minInlineSize: "px",
+	minWidth: "px",
+	objectPosition: "px",
+	offset: "px",
+	offsetAnchor: "px",
+	offsetDistance: "px",
+	offsetPosition: "px",
+	offsetRotate: "deg",
+	opacity: "%",
+	outline: "px",
+	outlineOffset: "px",
+	outlineWidth: "px",
+	overflowClipMargin: "px",
+	overflowClipMarginBlock: "px",
+	overflowClipMarginBlockEnd: "px",
+	overflowClipMarginBlockStart: "px",
+	overflowClipMarginBottom: "px",
+	overflowClipMarginInline: "px",
+	overflowClipMarginInlineEnd: "px",
+	overflowClipMarginInlineStart: "px",
+	overflowClipMarginLeft: "px",
+	overflowClipMarginRight: "px",
+	overflowClipMarginTop: "px",
+	padding: "px",
+	paddingBlock: "px",
+	paddingBlockEnd: "px",
+	paddingBlockStart: "px",
+	paddingBottom: "px",
+	paddingInline: "px",
+	paddingInlineEnd: "px",
+	paddingInlineStart: "px",
+	paddingLeft: "px",
+	paddingRight: "px",
+	paddingTop: "px",
+	pause: "ms",
+	pauseAfter: "ms",
+	pauseBefore: "ms",
+	perspective: "px",
+	perspectiveOrigin: "px",
+	r: "px",
+	rest: "ms",
+	restAfter: "ms",
+	restBefore: "ms",
+	right: "px",
+	rotate: "deg",
+	rowGap: "px",
+	rowRule: "px",
+	rowRuleEdgeInset: "px",
+	rowRuleEdgeInsetEnd: "px",
+	rowRuleEdgeInsetStart: "px",
+	rowRuleInset: "px",
+	rowRuleInsetEnd: "px",
+	rowRuleInsetStart: "px",
+	rowRuleInteriorInset: "px",
+	rowRuleInteriorInsetEnd: "px",
+	rowRuleInteriorInsetStart: "px",
+	rowRuleWidth: "px",
+	rule: "px",
+	ruleEdgeInset: "px",
+	ruleInset: "px",
+	ruleInsetEnd: "px",
+	ruleInsetStart: "px",
+	ruleInteriorInset: "px",
+	ruleWidth: "px",
+	rx: "px",
+	ry: "px",
+	scale: "%",
+	scrollMargin: "px",
+	scrollMarginBlock: "px",
+	scrollMarginBlockEnd: "px",
+	scrollMarginBlockStart: "px",
+	scrollMarginBottom: "px",
+	scrollMarginInline: "px",
+	scrollMarginInlineEnd: "px",
+	scrollMarginInlineStart: "px",
+	scrollMarginLeft: "px",
+	scrollMarginRight: "px",
+	scrollMarginTop: "px",
+	scrollPadding: "px",
+	scrollPaddingBlock: "px",
+	scrollPaddingBlockEnd: "px",
+	scrollPaddingBlockStart: "px",
+	scrollPaddingBottom: "px",
+	scrollPaddingInline: "px",
+	scrollPaddingInlineEnd: "px",
+	scrollPaddingInlineStart: "px",
+	scrollPaddingLeft: "px",
+	scrollPaddingRight: "px",
+	scrollPaddingTop: "px",
+	shapeImageThreshold: "%",
+	shapeMargin: "px",
+	shapePadding: "px",
+	stopOpacity: "%",
+	strokeDasharray: "px",
+	strokeDashcorner: "px",
+	strokeDashCorner: "px",
+	strokeDashoffset: "px",
+	strokeOpacity: "%",
+	strokePosition: "px",
+	strokeSize: "px",
+	strokeWidth: "px",
+	tabSize: "px",
+	textDecoration: "px",
+	textDecorationInset: "px",
+	textDecorationThickness: "px",
+	textIndent: "px",
+	textShadow: "px",
+	textSizeAdjust: "%",
+	textUnderlineOffset: "px",
+	timelineTrigger: "px",
+	timelineTriggerActivationRange: "px",
+	timelineTriggerActivationRangeEnd: "px",
+	timelineTriggerActivationRangeStart: "px",
+	timelineTriggerActiveRange: "px",
+	timelineTriggerActiveRangeEnd: "px",
+	timelineTriggerActiveRangeStart: "px",
+	top: "px",
+	transformOrigin: "px",
+	transition: "ms",
+	transitionDelay: "ms",
+	transitionDuration: "ms",
+	translate: "px",
+	verticalAlign: "px",
+	viewTimeline: "px",
+	viewTimelineInset: "px",
+	voiceDuration: "ms",
+	voicePitch: "Hz",
+	voiceRange: "Hz",
+	voiceRate: "%",
+	width: "px",
+	wordSpacing: "px",
+	x: "px",
+	y: "px",
+	zoom: "%"
+};
+
+//#endregion
+//#region src/knownProperties.generated.ts
+const knownPropertyNames = new Set([
+	"accentColor",
+	"alignContent",
+	"alignItems",
+	"alignSelf",
+	"alignmentBaseline",
+	"all",
+	"anchorName",
+	"anchorScope",
+	"animation",
+	"animationComposition",
+	"animationDelay",
+	"animationDirection",
+	"animationDuration",
+	"animationFillMode",
+	"animationIterationCount",
+	"animationName",
+	"animationPlayState",
+	"animationRange",
+	"animationRangeCenter",
+	"animationRangeEnd",
+	"animationRangeStart",
+	"animationTimeline",
+	"animationTimingFunction",
+	"animationTrigger",
+	"appearance",
+	"aspectRatio",
+	"backdropFilter",
+	"backfaceVisibility",
+	"background",
+	"backgroundAttachment",
+	"backgroundBlendMode",
+	"backgroundClip",
+	"backgroundColor",
+	"backgroundImage",
+	"backgroundOrigin",
+	"backgroundPosition",
+	"backgroundPositionBlock",
+	"backgroundPositionInline",
+	"backgroundPositionX",
+	"backgroundPositionY",
+	"backgroundRepeat",
+	"backgroundRepeatBlock",
+	"backgroundRepeatInline",
+	"backgroundRepeatX",
+	"backgroundRepeatY",
+	"backgroundSize",
+	"backgroundTbd",
+	"baselineShift",
+	"baselineSource",
+	"blockEllipsis",
+	"blockSize",
+	"blockStep",
+	"blockStepAlign",
+	"blockStepInsert",
+	"blockStepRound",
+	"blockStepSize",
+	"bookmarkLabel",
+	"bookmarkLevel",
+	"bookmarkState",
+	"border",
+	"borderBlock",
+	"borderBlockClip",
+	"borderBlockColor",
+	"borderBlockEnd",
+	"borderBlockEndClip",
+	"borderBlockEndColor",
+	"borderBlockEndRadius",
+	"borderBlockEndStyle",
+	"borderBlockEndWidth",
+	"borderBlockStart",
+	"borderBlockStartClip",
+	"borderBlockStartColor",
+	"borderBlockStartRadius",
+	"borderBlockStartStyle",
+	"borderBlockStartWidth",
+	"borderBlockStyle",
+	"borderBlockWidth",
+	"borderBottom",
+	"borderBottomClip",
+	"borderBottomColor",
+	"borderBottomLeftRadius",
+	"borderBottomRadius",
+	"borderBottomRightRadius",
+	"borderBottomStyle",
+	"borderBottomWidth",
+	"borderBoundary",
+	"borderClip",
+	"borderCollapse",
+	"borderColor",
+	"borderEndEndRadius",
+	"borderEndStartRadius",
+	"borderImage",
+	"borderImageOutset",
+	"borderImageRepeat",
+	"borderImageSlice",
+	"borderImageSource",
+	"borderImageWidth",
+	"borderInline",
+	"borderInlineClip",
+	"borderInlineColor",
+	"borderInlineEnd",
+	"borderInlineEndClip",
+	"borderInlineEndColor",
+	"borderInlineEndRadius",
+	"borderInlineEndStyle",
+	"borderInlineEndWidth",
+	"borderInlineStart",
+	"borderInlineStartClip",
+	"borderInlineStartColor",
+	"borderInlineStartRadius",
+	"borderInlineStartStyle",
+	"borderInlineStartWidth",
+	"borderInlineStyle",
+	"borderInlineWidth",
+	"borderLeft",
+	"borderLeftClip",
+	"borderLeftColor",
+	"borderLeftRadius",
+	"borderLeftStyle",
+	"borderLeftWidth",
+	"borderLimit",
+	"borderRadius",
+	"borderRight",
+	"borderRightClip",
+	"borderRightColor",
+	"borderRightRadius",
+	"borderRightStyle",
+	"borderRightWidth",
+	"borderShape",
+	"borderSpacing",
+	"borderStartEndRadius",
+	"borderStartStartRadius",
+	"borderStyle",
+	"borderTop",
+	"borderTopClip",
+	"borderTopColor",
+	"borderTopLeftRadius",
+	"borderTopRadius",
+	"borderTopRightRadius",
+	"borderTopStyle",
+	"borderTopWidth",
+	"borderWidth",
+	"bottom",
+	"boxDecorationBreak",
+	"boxShadow",
+	"boxShadowBlur",
+	"boxShadowColor",
+	"boxShadowOffset",
+	"boxShadowPosition",
+	"boxShadowSpread",
+	"boxSizing",
+	"boxSnap",
+	"breakAfter",
+	"breakBefore",
+	"breakInside",
+	"captionSide",
+	"caret",
+	"caretAnimation",
+	"caretColor",
+	"caretShape",
+	"clear",
+	"clip",
+	"clipPath",
+	"clipRule",
+	"color",
+	"colorAdjust",
+	"colorInterpolation",
+	"colorInterpolationFilters",
+	"colorScheme",
+	"columnCount",
+	"columnFill",
+	"columnGap",
+	"columnHeight",
+	"columnRule",
+	"columnRuleBreak",
+	"columnRuleColor",
+	"columnRuleEdgeInset",
+	"columnRuleEdgeInsetEnd",
+	"columnRuleEdgeInsetStart",
+	"columnRuleInset",
+	"columnRuleInsetEnd",
+	"columnRuleInsetStart",
+	"columnRuleInteriorInset",
+	"columnRuleInteriorInsetEnd",
+	"columnRuleInteriorInsetStart",
+	"columnRuleStyle",
+	"columnRuleVisibilityItems",
+	"columnRuleWidth",
+	"columnSpan",
+	"columnWidth",
+	"columnWrap",
+	"columns",
+	"contain",
+	"containIntrinsicBlockSize",
+	"containIntrinsicHeight",
+	"containIntrinsicInlineSize",
+	"containIntrinsicSize",
+	"containIntrinsicWidth",
+	"container",
+	"containerName",
+	"containerType",
+	"content",
+	"contentVisibility",
+	"continue",
+	"copyInto",
+	"corner",
+	"cornerBlockEnd",
+	"cornerBlockEndShape",
+	"cornerBlockStart",
+	"cornerBlockStartShape",
+	"cornerBottom",
+	"cornerBottomLeft",
+	"cornerBottomLeftShape",
+	"cornerBottomRight",
+	"cornerBottomRightShape",
+	"cornerBottomShape",
+	"cornerEndEnd",
+	"cornerEndEndShape",
+	"cornerEndStart",
+	"cornerEndStartShape",
+	"cornerInlineEnd",
+	"cornerInlineEndShape",
+	"cornerInlineStart",
+	"cornerInlineStartShape",
+	"cornerLeft",
+	"cornerLeftShape",
+	"cornerRight",
+	"cornerRightShape",
+	"cornerShape",
+	"cornerStartEnd",
+	"cornerStartEndShape",
+	"cornerStartStart",
+	"cornerStartStartShape",
+	"cornerTop",
+	"cornerTopLeft",
+	"cornerTopLeftShape",
+	"cornerTopRight",
+	"cornerTopRightShape",
+	"cornerTopShape",
+	"counterIncrement",
+	"counterReset",
+	"counterSet",
+	"cue",
+	"cueAfter",
+	"cueBefore",
+	"cursor",
+	"cx",
+	"cy",
+	"d",
+	"direction",
+	"display",
+	"dominantBaseline",
+	"dynamicRangeLimit",
+	"emptyCells",
+	"eventTrigger",
+	"eventTriggerName",
+	"eventTriggerSource",
+	"fieldSizing",
+	"fill",
+	"fillBreak",
+	"fillColor",
+	"fillImage",
+	"fillOpacity",
+	"fillOrigin",
+	"fillPosition",
+	"fillRepeat",
+	"fillRule",
+	"fillSize",
+	"filter",
+	"flex",
+	"flexBasis",
+	"flexDirection",
+	"flexFlow",
+	"flexGrow",
+	"flexShrink",
+	"flexWrap",
+	"float",
+	"floatDefer",
+	"floatOffset",
+	"floatReference",
+	"floodColor",
+	"floodOpacity",
+	"flowFrom",
+	"flowInto",
+	"flowTolerance",
+	"font",
+	"fontFamily",
+	"fontFeatureSettings",
+	"fontKerning",
+	"fontLanguageOverride",
+	"fontOpticalSizing",
+	"fontPalette",
+	"fontSize",
+	"fontSizeAdjust",
+	"fontStretch",
+	"fontStyle",
+	"fontSynthesis",
+	"fontSynthesisPosition",
+	"fontSynthesisSmallCaps",
+	"fontSynthesisStyle",
+	"fontSynthesisWeight",
+	"fontVariant",
+	"fontVariantAlternates",
+	"fontVariantCaps",
+	"fontVariantEastAsian",
+	"fontVariantEmoji",
+	"fontVariantLigatures",
+	"fontVariantNumeric",
+	"fontVariantPosition",
+	"fontVariationSettings",
+	"fontWeight",
+	"fontWidth",
+	"footnoteDisplay",
+	"footnotePolicy",
+	"forcedColorAdjust",
+	"frameSizing",
+	"gap",
+	"glyphOrientationVertical",
+	"grid",
+	"gridArea",
+	"gridAutoColumns",
+	"gridAutoFlow",
+	"gridAutoRows",
+	"gridColumn",
+	"gridColumnEnd",
+	"gridColumnGap",
+	"gridColumnStart",
+	"gridGap",
+	"gridRow",
+	"gridRowEnd",
+	"gridRowGap",
+	"gridRowStart",
+	"gridTemplate",
+	"gridTemplateAreas",
+	"gridTemplateColumns",
+	"gridTemplateRows",
+	"hangingPunctuation",
+	"height",
+	"hyphenateCharacter",
+	"hyphenateLimitChars",
+	"hyphenateLimitLast",
+	"hyphenateLimitLines",
+	"hyphenateLimitZone",
+	"hyphens",
+	"imageAnimation",
+	"imageOrientation",
+	"imageRendering",
+	"imageResolution",
+	"initialLetter",
+	"initialLetterAlign",
+	"initialLetterWrap",
+	"inlineSize",
+	"inlineSizing",
+	"inputSecurity",
+	"inset",
+	"insetBlock",
+	"insetBlockEnd",
+	"insetBlockStart",
+	"insetInline",
+	"insetInlineEnd",
+	"insetInlineStart",
+	"interactivity",
+	"interestDelay",
+	"interestDelayEnd",
+	"interestDelayStart",
+	"interpolateSize",
+	"isolation",
+	"justifyContent",
+	"justifyItems",
+	"justifySelf",
+	"left",
+	"letterSpacing",
+	"lightingColor",
+	"lineBreak",
+	"lineClamp",
+	"lineFitEdge",
+	"lineGrid",
+	"lineHeight",
+	"lineHeightStep",
+	"linePadding",
+	"lineSnap",
+	"linkParameters",
+	"listStyle",
+	"listStyleImage",
+	"listStylePosition",
+	"listStyleType",
+	"margin",
+	"marginBlock",
+	"marginBlockEnd",
+	"marginBlockStart",
+	"marginBottom",
+	"marginBreak",
+	"marginInline",
+	"marginInlineEnd",
+	"marginInlineStart",
+	"marginLeft",
+	"marginRight",
+	"marginTop",
+	"marginTrim",
+	"marker",
+	"markerEnd",
+	"markerMid",
+	"markerSide",
+	"markerStart",
+	"mask",
+	"maskBorder",
+	"maskBorderMode",
+	"maskBorderOutset",
+	"maskBorderRepeat",
+	"maskBorderSlice",
+	"maskBorderSource",
+	"maskBorderWidth",
+	"maskClip",
+	"maskComposite",
+	"maskImage",
+	"maskMode",
+	"maskOrigin",
+	"maskPosition",
+	"maskRepeat",
+	"maskSize",
+	"maskType",
+	"mathDepth",
+	"mathShift",
+	"mathStyle",
+	"maxBlockSize",
+	"maxHeight",
+	"maxInlineSize",
+	"maxLines",
+	"maxWidth",
+	"minBlockSize",
+	"minHeight",
+	"minInlineSize",
+	"minIntrinsicSizing",
+	"minWidth",
+	"mixBlendMode",
+	"navDown",
+	"navLeft",
+	"navRight",
+	"navUp",
+	"objectFit",
+	"objectPosition",
+	"objectViewBox",
+	"offset",
+	"offsetAnchor",
+	"offsetDistance",
+	"offsetPath",
+	"offsetPosition",
+	"offsetRotate",
+	"opacity",
+	"order",
+	"orphans",
+	"outline",
+	"outlineColor",
+	"outlineOffset",
+	"outlineStyle",
+	"outlineWidth",
+	"overflow",
+	"overflowAnchor",
+	"overflowBlock",
+	"overflowClipMargin",
+	"overflowClipMarginBlock",
+	"overflowClipMarginBlockEnd",
+	"overflowClipMarginBlockStart",
+	"overflowClipMarginBottom",
+	"overflowClipMarginInline",
+	"overflowClipMarginInlineEnd",
+	"overflowClipMarginInlineStart",
+	"overflowClipMarginLeft",
+	"overflowClipMarginRight",
+	"overflowClipMarginTop",
+	"overflowInline",
+	"overflowWrap",
+	"overflowX",
+	"overflowY",
+	"overlay",
+	"overscrollBehavior",
+	"overscrollBehaviorBlock",
+	"overscrollBehaviorInline",
+	"overscrollBehaviorX",
+	"overscrollBehaviorY",
+	"padding",
+	"paddingBlock",
+	"paddingBlockEnd",
+	"paddingBlockStart",
+	"paddingBottom",
+	"paddingInline",
+	"paddingInlineEnd",
+	"paddingInlineStart",
+	"paddingLeft",
+	"paddingRight",
+	"paddingTop",
+	"page",
+	"pageBreakAfter",
+	"pageBreakBefore",
+	"pageBreakInside",
+	"paintOrder",
+	"pause",
+	"pauseAfter",
+	"pauseBefore",
+	"perspective",
+	"perspectiveOrigin",
+	"placeContent",
+	"placeItems",
+	"placeSelf",
+	"pointerEvents",
+	"pointerTimeline",
+	"pointerTimelineAxis",
+	"pointerTimelineName",
+	"position",
+	"positionAnchor",
+	"positionArea",
+	"positionTry",
+	"positionTryFallbacks",
+	"positionTryOrder",
+	"positionVisibility",
+	"printColorAdjust",
+	"quotes",
+	"r",
+	"readingFlow",
+	"readingOrder",
+	"regionFragment",
+	"resize",
+	"rest",
+	"restAfter",
+	"restBefore",
+	"right",
+	"rotate",
+	"rowGap",
+	"rowRule",
+	"rowRuleBreak",
+	"rowRuleColor",
+	"rowRuleEdgeInset",
+	"rowRuleEdgeInsetEnd",
+	"rowRuleEdgeInsetStart",
+	"rowRuleInset",
+	"rowRuleInsetEnd",
+	"rowRuleInsetStart",
+	"rowRuleInteriorInset",
+	"rowRuleInteriorInsetEnd",
+	"rowRuleInteriorInsetStart",
+	"rowRuleStyle",
+	"rowRuleVisibilityItems",
+	"rowRuleWidth",
+	"rubyAlign",
+	"rubyMerge",
+	"rubyOverhang",
+	"rubyPosition",
+	"rule",
+	"ruleBreak",
+	"ruleColor",
+	"ruleEdgeInset",
+	"ruleInset",
+	"ruleInsetEnd",
+	"ruleInsetStart",
+	"ruleInteriorInset",
+	"ruleOverlap",
+	"ruleStyle",
+	"ruleVisibilityItems",
+	"ruleWidth",
+	"rx",
+	"ry",
+	"scale",
+	"scrollBehavior",
+	"scrollInitialTarget",
+	"scrollMargin",
+	"scrollMarginBlock",
+	"scrollMarginBlockEnd",
+	"scrollMarginBlockStart",
+	"scrollMarginBottom",
+	"scrollMarginInline",
+	"scrollMarginInlineEnd",
+	"scrollMarginInlineStart",
+	"scrollMarginLeft",
+	"scrollMarginRight",
+	"scrollMarginTop",
+	"scrollMarkerGroup",
+	"scrollPadding",
+	"scrollPaddingBlock",
+	"scrollPaddingBlockEnd",
+	"scrollPaddingBlockStart",
+	"scrollPaddingBottom",
+	"scrollPaddingInline",
+	"scrollPaddingInlineEnd",
+	"scrollPaddingInlineStart",
+	"scrollPaddingLeft",
+	"scrollPaddingRight",
+	"scrollPaddingTop",
+	"scrollSnapAlign",
+	"scrollSnapStop",
+	"scrollSnapType",
+	"scrollTargetGroup",
+	"scrollTimeline",
+	"scrollTimelineAxis",
+	"scrollTimelineName",
+	"scrollbarColor",
+	"scrollbarGutter",
+	"scrollbarWidth",
+	"shapeImageThreshold",
+	"shapeInside",
+	"shapeMargin",
+	"shapeOutside",
+	"shapePadding",
+	"shapeRendering",
+	"shapeSubtract",
+	"sliderOrientation",
+	"spatialNavigationAction",
+	"spatialNavigationContain",
+	"spatialNavigationFunction",
+	"speak",
+	"speakAs",
+	"stopColor",
+	"stopOpacity",
+	"stringSet",
+	"stroke",
+	"strokeAlign",
+	"strokeAlignment",
+	"strokeBreak",
+	"strokeColor",
+	"strokeDashCorner",
+	"strokeDashJustify",
+	"strokeDashadjust",
+	"strokeDasharray",
+	"strokeDashcorner",
+	"strokeDashoffset",
+	"strokeImage",
+	"strokeLinecap",
+	"strokeLinejoin",
+	"strokeMiterlimit",
+	"strokeOpacity",
+	"strokeOrigin",
+	"strokePosition",
+	"strokeRepeat",
+	"strokeSize",
+	"strokeWidth",
+	"tabSize",
+	"tableLayout",
+	"textAlign",
+	"textAlignAll",
+	"textAlignLast",
+	"textAnchor",
+	"textAutospace",
+	"textBox",
+	"textBoxEdge",
+	"textBoxTrim",
+	"textCombineUpright",
+	"textDecoration",
+	"textDecorationColor",
+	"textDecorationInset",
+	"textDecorationLine",
+	"textDecorationSkip",
+	"textDecorationSkipBox",
+	"textDecorationSkipInk",
+	"textDecorationSkipSelf",
+	"textDecorationSkipSpaces",
+	"textDecorationStyle",
+	"textDecorationThickness",
+	"textEmphasis",
+	"textEmphasisColor",
+	"textEmphasisPosition",
+	"textEmphasisSkip",
+	"textEmphasisStyle",
+	"textGroupAlign",
+	"textIndent",
+	"textJustify",
+	"textOrientation",
+	"textOverflow",
+	"textRendering",
+	"textShadow",
+	"textSizeAdjust",
+	"textSpacing",
+	"textSpacingTrim",
+	"textTransform",
+	"textUnderlineOffset",
+	"textUnderlinePosition",
+	"textWrap",
+	"textWrapMode",
+	"textWrapStyle",
+	"timelineScope",
+	"timelineTrigger",
+	"timelineTriggerActivationRange",
+	"timelineTriggerActivationRangeEnd",
+	"timelineTriggerActivationRangeStart",
+	"timelineTriggerActiveRange",
+	"timelineTriggerActiveRangeEnd",
+	"timelineTriggerActiveRangeStart",
+	"timelineTriggerName",
+	"timelineTriggerSource",
+	"top",
+	"touchAction",
+	"transform",
+	"transformBox",
+	"transformOrigin",
+	"transformStyle",
+	"transition",
+	"transitionBehavior",
+	"transitionDelay",
+	"transitionDuration",
+	"transitionProperty",
+	"transitionTimingFunction",
+	"translate",
+	"triggerScope",
+	"unicodeBidi",
+	"userSelect",
+	"vectorEffect",
+	"verticalAlign",
+	"viewTimeline",
+	"viewTimelineAxis",
+	"viewTimelineInset",
+	"viewTimelineName",
+	"viewTransitionClass",
+	"viewTransitionGroup",
+	"viewTransitionName",
+	"viewTransitionScope",
+	"visibility",
+	"voiceBalance",
+	"voiceDuration",
+	"voiceFamily",
+	"voicePitch",
+	"voiceRange",
+	"voiceRate",
+	"voiceStress",
+	"voiceVolume",
+	"whiteSpace",
+	"whiteSpaceCollapse",
+	"whiteSpaceTrim",
+	"widows",
+	"width",
+	"willChange",
+	"wordBreak",
+	"wordSpaceTransform",
+	"wordSpacing",
+	"wordWrap",
+	"wrapAfter",
+	"wrapBefore",
+	"wrapFlow",
+	"wrapInside",
+	"wrapThrough",
+	"writingMode",
+	"x",
+	"y",
+	"zIndex",
+	"zoom"
+]);
+
+//#endregion
+//#region src/props.ts
+/**
+* Converts a kebab-case string to camelCase.
+*/
+function kebabToCamel(str) {
+	return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+/**
+* Converts a camelCase string to kebab-case.
+*/
+function camelToKebab(str) {
+	return str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
+}
+function getUnitForProperty(propertyName) {
+	return propertyName in propertyUnits ? propertyUnits[propertyName] : void 0;
+}
+/**
+* Converts a CSS-like value to its string representation.
+* For properties with known units, numbers are automatically suffixed.
+*/
+function formatValue(value, propertyName, maxDepth = 10) {
+	if (maxDepth <= 0) return "";
+	if (typeof value === "string") return value;
+	if (typeof value === "number") {
+		const unit = getUnitForProperty(propertyName);
+		if (unit === "%") return `${value * 100}${unit}`;
+		if (value === 0) return "0";
+		return unit ? `${value}${unit}` : value.toString();
+	}
+	return formatValue(value.value, propertyName, maxDepth - 1);
+}
+/**
+* Checks if a property name is a CSS custom property (variable).
+*/
+function isCssVariableName(key) {
+	return key.startsWith("--");
+}
+/**
+* Converts a CSS-like value to a string for use as a CSS variable value.
+* @param value - The value to convert (string, number, or wrapped value)
+* @param maxDepth - Maximum recursion depth for evaluating the value
+* @returns The string representation
+*/
+function asVar(value, maxDepth = 10) {
+	if (maxDepth <= 0) return "";
+	switch (typeof value) {
+		case "string": return value;
+		case "number": return value.toString();
+		default: return asVar(value.value, maxDepth - 1);
+	}
+}
+/**
+* Checks if a property name is a known CSS property.
+*/
+function isKnownPropertyName(key) {
+	return knownPropertyNames.has(key);
+}
+/**
+* Converts a value to a CSS property string.
+* Automatically appends units to numeric values for properties that require them.
+* @param value - The value to convert
+* @param key - The CSS property name
+* @returns The formatted CSS value string
+*/
+function asKnownProp(value, key) {
+	return formatValue(value, key);
+}
+/**
+* Checks if a key represents a nested CSS selector.
+*/
+function isNestedSelector(key) {
+	return key.includes("&");
+}
+/** Known at-rule prefixes that mochi-css recognizes */
+const AT_RULE_PREFIXES = [
+	"@media ",
+	"@container ",
+	"@supports ",
+	"@layer "
+];
+/**
+* Checks if a key represents a CSS at-rule (media, container, supports, layer).
+*/
+function isAtRuleKey(key) {
+	return AT_RULE_PREFIXES.some((p) => key.startsWith(p));
+}
+/**
+* Converts a SimpleStyleProps object to a CSS properties record.
+* Transforms camelCase property names to kebab-case and applies value converters.
+* @param props - The style properties object
+* @returns A record of CSS property names (kebab-case) to string values
+* @example
+* cssFromProps({ backgroundColor: 'blue', padding: 16 })
+* // { 'background-color': 'blue', 'padding': '16px' }
+*/
+function cssFromProps(props) {
+	return Object.fromEntries(Object.entries(props).map(([key, value]) => {
+		if (value === void 0) return void 0;
+		if (isCssVariableName(key)) return [key, asVar(value)];
+		if (isKnownPropertyName(key)) return [camelToKebab(key), asKnownProp(value, key)];
+	}).filter((v) => v !== void 0));
+}
+
+//#endregion
+//#region src/selector.ts
+/**
+* Immutable CSS selector builder that handles nested selectors and CSS at-rules.
+* Uses the `&` character as a placeholder for parent selector substitution.
+*
+* @example
+* const selector = new MochiSelector(['.button'])
+* selector.extend('&:hover').cssSelector // '.button:hover'
+* selector.wrap('@media (min-width: 768px)').atRules // ['@media (min-width: 768px)']
+*/
+var MochiSelector = class MochiSelector {
+	/**
+	* Creates a new MochiSelector instance.
+	* @param cssSelectors - Array of CSS selectors (may contain `&` placeholders)
+	* @param atRules - Array of full CSS at-rule strings e.g. `"@media (min-width: 768px)"`
+	*/
+	constructor(cssSelectors = [], atRules = []) {
+		this.cssSelectors = cssSelectors;
+		this.atRules = atRules;
+	}
+	/**
+	* Gets the combined CSS selector string.
+	* Multiple selectors are joined with commas.
+	* @returns The CSS selector, or "*" if no selectors are defined
+	*/
+	get cssSelector() {
+		if (this.cssSelectors.length === 0) return "*";
+		return this.cssSelectors.join(", ");
+	}
+	/**
+	* Substitutes all `&` placeholders with the given root selector.
+	* @param root - The selector to replace `&` with
+	* @returns A new MochiSelector with substituted selectors
+	*/
+	substitute(root) {
+		return new MochiSelector(this.cssSelectors.map((selector) => selector.replace(/&/g, root)), this.atRules);
+	}
+	/**
+	* Extends this selector by nesting a child selector.
+	* The `&` in the child selector is replaced with each parent selector.
+	* @param child - The child selector pattern (must contain `&`)
+	* @returns A new MochiSelector with the extended selectors
+	* @example
+	* new MochiSelector(['.btn']).extend('&:hover') // '.btn:hover'
+	* new MochiSelector(['.btn']).extend('& .icon') // '.btn .icon'
+	*/
+	extend(child) {
+		if (!isNestedSelector(child)) return this;
+		const children = MochiSelector.split(child);
+		return new MochiSelector(this.cssSelectors.flatMap((parentSelector) => children.map((childSelector) => {
+			return childSelector.replace(/&/g, parentSelector);
+		})), this.atRules);
+	}
+	/**
+	* Wraps this selector with a CSS at-rule.
+	* @param atRule - The full at-rule string (e.g. `"@media (min-width: 768px)"`)
+	* @returns A new MochiSelector with the added at-rule, or unchanged if not a known at-rule
+	* @example
+	* selector.wrap('@media (min-width: 768px)') // Adds media query
+	* selector.wrap('@container sidebar (min-width: 300px)') // Adds container query
+	*/
+	wrap(atRule) {
+		if (!isAtRuleKey(atRule)) return this;
+		return new MochiSelector(this.cssSelectors, [...this.atRules, atRule]);
+	}
+	/**
+	* Splits a comma-separated selector string into individual selectors.
+	* @param selector - The selector string to split
+	* @returns Array of individual selector strings
+	*/
+	static split(selector) {
+		return [selector];
+	}
+};
+
+//#endregion
+//#region ../core/dist/index.mjs
+const hashBase = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_";
+const base = 64;
+function numberToBase62(num, maxLength) {
+	let out = "";
+	while (num > 0 && out.length < (maxLength ?? Infinity)) {
+		out = hashBase[num % base] + out;
+		num = Math.floor(num / base);
+	}
+	return out.length > 0 ? out : "0";
+}
+function shortHash(input, length = 8) {
+	let h = 5381;
+	for (let i = 0; i < input.length; i++) h = h * 33 ^ input.charCodeAt(i);
+	h >>>= 0;
+	return numberToBase62(h, length);
+}
+
+//#endregion
+//#region src/compare.ts
+/**
+* String comparison utilities for deterministic sorting.
+* Used internally to ensure consistent CSS output order.
+* @module compare
+*/
+/**
+* Compares two strings lexicographically.
+*/
+function compareString(a, b) {
+	return a < b ? -1 : a === b ? 0 : 1;
+}
+/**
+* Compares two tuples by their first element (string key).
+* Useful for sorting Object.entries() results.
+*/
+function compareStringKey(a, b) {
+	return compareString(a[0], b[0]);
+}
+/**
+* Creates a comparator function for objects with a specific string property.
+* @param name - The property name to compare by
+* @returns A comparator function that compares objects by the specified property
+* @example
+* const items = [{ key: 'b' }, { key: 'a' }]
+* items.sort(stringPropComparator('key')) // [{ key: 'a' }, { key: 'b' }]
+*/
+function stringPropComparator(name) {
+	return (a, b) => compareString(a[name], b[name]);
+}
+
+//#endregion
+//#region src/cssObject.ts
+/**
+* Represents a single CSS rule block with properties and a selector.
+* Handles conversion to CSS string format and hash generation.
+*/
+var CssObjectSubBlock = class CssObjectSubBlock {
+	/**
+	* Creates a new CSS sub-block.
+	* @param cssProps - Map of CSS property names (kebab-case) to values
+	* @param selector - The selector this block applies to
+	*/
+	constructor(cssProps, selector) {
+		this.cssProps = cssProps;
+		this.selector = selector;
+	}
+	/**
+	* Computes a deterministic hash of this block's CSS content.
+	* Used for generating unique class names.
+	*/
+	get hash() {
+		return shortHash(this.asCssString("&"));
+	}
+	/**
+	* Converts this block to a CSS string.
+	* Handles at-rule wrapping (media, container, supports, layer) if present.
+	* Multiple at-rules are nested in order.
+	* @param root - The root selector to substitute for `&`
+	* @returns Formatted CSS string
+	*/
+	asCssString(root) {
+		const selector = this.selector.substitute(root);
+		const atRules = selector.atRules;
+		const innerIndent = "    ".repeat(atRules.length);
+		const props = Object.entries(this.cssProps).toSorted(compareStringKey).map(([k, v]) => `${innerIndent}    ${k}: ${v};\n`).join("");
+		let result = `${innerIndent}${selector.cssSelector} {\n${props}${innerIndent}}`;
+		for (let i = atRules.length - 1; i >= 0; i--) {
+			const outerIndent = "    ".repeat(i);
+			result = `${outerIndent}${atRules[i]} {\n${result}\n${outerIndent}}`;
+		}
+		return result;
+	}
+	/**
+	* Parses StyleProps into an array of CSS sub-blocks.
+	* Recursively processes nested selectors and media queries.
+	* Output order is deterministic for consistent hash generation.
+	*
+	* @param props - The style properties to parse
+	* @param selector - The parent selector context (defaults to `&`)
+	* @returns Non-empty array of sub-blocks (main block first, then nested)
+	*/
+	static fromProps(props, selector) {
+		selector ??= new MochiSelector(["&"]);
+		const cssProps = {};
+		const propsToProcess = [];
+		for (const [key, value] of Object.entries(props)) {
+			if (value === void 0) continue;
+			if (isCssVariableName(key)) {
+				cssProps[key] = asVar(value);
+				continue;
+			}
+			if (isKnownPropertyName(key)) {
+				cssProps[camelToKebab(key)] = asKnownProp(value, key);
+				continue;
+			}
+			if (isNestedSelector(key)) {
+				propsToProcess.push({
+					key,
+					props: value,
+					selector: selector.extend(key)
+				});
+				continue;
+			}
+			if (isAtRuleKey(key)) {
+				propsToProcess.push({
+					key,
+					props: value,
+					selector: selector.wrap(key)
+				});
+				continue;
+			}
+			if (process.env["NODE_ENV"] !== "production") console.warn(`[mochi-css] Unknown style property "${key}" will be ignored`);
+		}
+		return [new CssObjectSubBlock(cssProps, selector), ...propsToProcess.toSorted(stringPropComparator("key")).flatMap(({ props: props$1, selector: selector$1 }) => CssObjectSubBlock.fromProps(props$1, selector$1))];
+	}
+};
+/**
+* Represents an abstract CSS block definition.
+* Contains one or more sub-blocks for nested selectors and media queries.
+*/
+var CssObjectBlock = class {
+	/** The generated unique class name for this block */
+	className;
+	/** All sub-blocks (main styles and nested/media rules) */
+	subBlocks = [];
+	/**
+	* Creates a new CSS block from style properties.
+	* Generates a unique class name based on the content hash, or uses the provided class name.
+	* @param styles - The style properties to compile
+	* @param className - Optional stable class name; if omitted, a content-hash-based name is generated
+	*/
+	constructor(styles, className) {
+		const blocks = CssObjectSubBlock.fromProps(styles);
+		this.className = className ?? "c" + shortHash(blocks.map((b) => b.hash).join("+"));
+		this.subBlocks = blocks;
+	}
+	/**
+	* Gets the CSS class selector for this block.
+	*/
+	get selector() {
+		return `.${this.className}`;
+	}
+	/**
+	* Converts style block to a CSS string.
+	* @param root - The root selector to scope styles to
+	* @returns Complete CSS string for this block
+	*/
+	asCssString(root) {
+		return this.subBlocks.map((b) => b.asCssString(new MochiSelector([root]).extend(`&.${this.className}`).cssSelector)).join("\n\n");
+	}
+};
+/**
+* Complete CSS object representation with main and variant styles.
+*
+* @template V - The variant definitions type
+*
+* @example
+* const obj = new CSSObject({
+*   color: 'blue',
+*   variants: {
+*     size: {
+*       small: { fontSize: 12 },
+*       large: { fontSize: 18 }
+*     }
+*   },
+*   defaultVariants: { size: 'small' }
+* })
+* obj.asCssString() // Returns complete CSS with all variants
+*/
+var CSSObject = class {
+	/** The main style block (non-variant styles) */
+	mainBlock;
+	/** Compiled blocks for each variant option */
+	variantBlocks;
+	/** Default variant selections */
+	variantDefaults;
+	/** Compound variant conditions and their parsed sub-blocks */
+	compoundVariants;
+	/**
+	* Creates a new CSSObject from style props.
+	* Compiles main styles and all variant options into CSS blocks.
+	* @param props - Base style props plus variant definitions
+	* @param props.variants - Named variant groups, each mapping variant values to style props
+	* @param props.defaultVariants - Default value for each variant when none is provided at runtime
+	* @param props.compoundVariants - Style props applied when a specific combination of variants is active
+	* @param className - Optional stable class name for the main block
+	*/
+	constructor({ variants, defaultVariants, compoundVariants,...props }, className) {
+		this.mainBlock = new CssObjectBlock(props, className);
+		this.variantBlocks = {};
+		this.variantDefaults = defaultVariants ?? {};
+		this.compoundVariants = [];
+		if (variants) for (const variantGroupName in variants) {
+			this.variantBlocks[variantGroupName] = {};
+			const variantGroup = variants[variantGroupName];
+			for (const variantItemName in variantGroup) this.variantBlocks[variantGroupName][variantItemName] = new CssObjectBlock(variantGroup[variantItemName] ?? {});
+		}
+		if (compoundVariants) for (const compound of compoundVariants) {
+			const { css: styles,...conditions } = compound;
+			this.compoundVariants.push({
+				conditions,
+				subBlocks: CssObjectSubBlock.fromProps(styles)
+			});
+		}
+	}
+	/**
+	* Serializes the entire CSS object to a CSS string.
+	* Outputs the main block first, then all variant blocks in sorted order.
+	* @returns Complete CSS string ready for injection into a stylesheet
+	*/
+	asCssString() {
+		return [
+			this.mainBlock.asCssString(""),
+			...Object.entries(this.variantBlocks).toSorted(compareStringKey).flatMap(([_, b]) => Object.entries(b).toSorted(compareStringKey)).map(([_, b]) => b.asCssString(this.mainBlock.selector)),
+			...this.compoundVariants.flatMap(({ conditions, subBlocks }) => {
+				const selectorParts = [];
+				for (const [variantName, optionName] of Object.entries(conditions).toSorted(compareStringKey)) {
+					const selector = this.variantBlocks[variantName]?.[optionName]?.selector;
+					if (selector === void 0) return [];
+					selectorParts.push(selector);
+				}
+				const combinedSelector = `${this.mainBlock.selector}${selectorParts.join("")}`;
+				return subBlocks.map((b) => b.asCssString(combinedSelector));
+			})
+		].join("\n\n");
+	}
+};
+
+//#endregion
+//#region src/css.ts
+const MOCHI_CSS_TYPEOF = Symbol.for("mochi-css.MochiCSS");
+function isMochiCSS(value) {
+	return typeof value === "object" && value !== null && value["$$typeof"] === MOCHI_CSS_TYPEOF;
+}
+/**
+* Runtime representation of a CSS style definition with variant support.
+* Holds generated class names and provides methods to compute the final
+* className string based on selected variants.
+*
+* @template V - The variant definitions type mapping variant names to their options
+*
+* @example
+* const styles = MochiCSS.from(new CSSObject({
+*   color: 'blue',
+*   variants: { size: { small: { fontSize: 12 }, large: { fontSize: 18 } } }
+* }))
+* styles.variant({ size: 'large' }) // Returns combined class names
+*/
+var MochiCSS = class MochiCSS {
+	$$typeof = MOCHI_CSS_TYPEOF;
+	/**
+	* Creates a new MochiCSS instance.
+	* @param classNames - Base class names to always include
+	* @param variantClassNames - Mapping of variant names to option class names
+	* @param defaultVariants - Default variant selections when not specified
+	*/
+	constructor(classNames, variantClassNames, defaultVariants) {
+		this.classNames = classNames;
+		this.variantClassNames = variantClassNames;
+		this.defaultVariants = defaultVariants;
+	}
+	/**
+	* Computes the final className string based on variant selections.
+	* Compound variants are handled purely via CSS combined selectors,
+	* so no runtime matching is needed here.
+	* @param props - Variant selections
+	* @returns Combined className string for use in components
+	*/
+	variant(props) {
+		const keys = new Set([...Object.keys(props), ...Object.keys(this.defaultVariants)].filter((k) => k in this.variantClassNames));
+		return (0, clsx.default)(this.classNames, ...keys.values().map((k) => {
+			const variantGroup = this.variantClassNames[k];
+			if (!variantGroup) return false;
+			const variantKey = ((k in props ? props[k] : void 0) ?? this.defaultVariants[k])?.toString();
+			if (variantKey == null) return false;
+			const selectedClassname = variantGroup[variantKey];
+			if (selectedClassname !== void 0) return selectedClassname;
+			const defaultKey = this.defaultVariants[k];
+			if (defaultKey == null) return false;
+			return variantGroup[defaultKey.toString()];
+		}));
+	}
+	/**
+	* Returns the CSS selector for this style (e.g. `.abc123`).
+	* Useful for targeting this component from another style.
+	*/
+	get selector() {
+		return this.classNames.map((n) => `.${n}`).join();
+	}
+	toString() {
+		return this.selector;
+	}
+	/**
+	* Creates a MochiCSS instance from a CSSObject.
+	* Extracts class names from the compiled CSS blocks.
+	* @template V - The variant definitions type
+	* @param object - The compiled CSSObject to extract from
+	* @returns A new MochiCSS instance with the extracted class names
+	*/
+	static from(object) {
+		return new MochiCSS([object.mainBlock.className], Object.fromEntries(Object.entries(object.variantBlocks).map(([key, variantOptions]) => {
+			return [key, Object.fromEntries(Object.entries(variantOptions).map(([optionKey, block]) => {
+				return [optionKey, block.className];
+			}))];
+		})), object.variantDefaults);
+	}
+};
+/**
+* Creates a CSS style definition.
+* The primary API for defining styles in Mochi-CSS.
+*
+* @template V - Tuple of variant definition types
+* @param props - One or more style objects or existing MochiCSS instances to merge
+* @returns A MochiCSS instance with all styles and variants combined
+*
+* @example
+* // Simple usage
+* const button = css({ padding: 8, borderRadius: 4 })
+*
+* @example
+* // With variants
+* const button = css({
+*   padding: 8,
+*   variants: {
+*     size: {
+*       small: { padding: 4 },
+*       large: { padding: 16 }
+*     }
+*   },
+*   defaultVariants: { size: 'small' }
+* })
+* button.variant({ size: 'large' }) // Get class names for large size
+*
+* @example
+* // Merging multiple styles
+* const combined = css(baseStyles, additionalStyles)
+*/
+const emptyMochiCSS = new MochiCSS([], {}, {});
+/**
+* Merges multiple MochiCSS instances into a single one, combining their
+* class names, variant class names, and default variants.
+* @param instances - The MochiCSS instances to merge
+* @returns A new MochiCSS instance with all styles combined
+*/
+function mergeMochiCss(instances) {
+	if (instances.length === 0) return emptyMochiCSS;
+	return new MochiCSS(instances.flatMap((c) => c.classNames), instances.reduce((a, b) => Object.assign(a, b.variantClassNames), {}), instances.reduce((a, b) => Object.assign(a, b.defaultVariants), {}));
+}
+function css(...props) {
+	const cssToMerge = [];
+	for (const p of props) {
+		if (p == null) continue;
+		if (typeof p === "string") {
+			cssToMerge.push(new MochiCSS([p], {}, {}));
+			continue;
+		}
+		if (typeof p !== "object") continue;
+		if (p instanceof MochiCSS) cssToMerge.push(p);
+		else cssToMerge.push(MochiCSS.from(new CSSObject(p)));
+	}
+	return mergeMochiCss(cssToMerge);
+}
+
+//#endregion
+//#region src/keyframesObject.ts
+var KeyframesObject = class KeyframesObject {
+	name;
+	body;
+	constructor(stops) {
+		this.body = KeyframesObject.generateBody(stops);
+		this.name = "kf" + shortHash(this.body);
+	}
+	asCssString() {
+		return `@keyframes ${this.name} {\n${this.body}\n}`;
+	}
+	static generateBody(stops) {
+		return Object.entries(stops).toSorted(compareStringKey).map(([stopKey, props]) => {
+			const cssProps = cssFromProps(props);
+			return `    ${stopKey} {\n${Object.entries(cssProps).toSorted(compareStringKey).map(([k, v]) => `        ${k}: ${v};`).join("\n")}\n    }`;
+		}).join("\n\n");
+	}
+};
+
+//#endregion
+//#region src/keyframes.ts
+var MochiKeyframes = class MochiKeyframes {
+	constructor(name) {
+		this.name = name;
+	}
+	toString() {
+		return this.name;
+	}
+	get value() {
+		return this.name;
+	}
+	static from(object) {
+		return new MochiKeyframes(object.name);
+	}
+};
+function keyframes(stops) {
+	return MochiKeyframes.from(new KeyframesObject(stops));
+}
+
+//#endregion
+//#region src/globalCssObject.ts
+/**
+* CSS object model for global (non-scoped) styles.
+* Accepts a map of CSS selectors to style objects and serializes them
+* as plain CSS rules without class name scoping.
+*
+* @example
+* const obj = new GlobalCssObject({
+*   body: { margin: 0 },
+*   'h1': { fontSize: 32 },
+* })
+* obj.asCssString() // "body {\n    margin: 0;\n}\n\nh1 {\n    font-size: 32px;\n}"
+*/
+var GlobalCssObject = class {
+	rules;
+	constructor(styles) {
+		this.rules = Object.entries(styles).toSorted(compareStringKey).map(([selector, props]) => ({
+			selector,
+			subBlocks: [...CssObjectSubBlock.fromProps(props)]
+		}));
+	}
+	asCssString() {
+		return this.rules.flatMap(({ selector, subBlocks }) => subBlocks.map((b) => b.asCssString(selector))).join("\n\n");
+	}
+};
+
+//#endregion
+//#region src/globalCss.ts
+/**
+* Creates a global CSS definition.
+* Styles are not scoped to any class — they apply to all matching elements.
+*
+* @param styles - Map of CSS selectors to style objects
+*
+* @example
+* globalCss({
+*   'body': { margin: 0, padding: 0 },
+*   '*, *::before, *::after': { boxSizing: 'border-box' },
+* })
+*/
+function globalCss(styles) {}
+
+//#endregion
+//#region src/query.ts
+/**
+* Wraps a condition in parentheses if not already wrapped.
+*/
+function wrapParens(condition) {
+	const trimmed = condition.trim();
+	if (trimmed.startsWith("(") && trimmed.endsWith(")")) return trimmed;
+	return `(${trimmed})`;
+}
+function mediaFn(condition) {
+	return `@media ${wrapParens(condition)}`;
+}
+mediaFn.and = function(...conditions) {
+	return `@media ${conditions.map(wrapParens).join(" and ")}`;
+};
+mediaFn.or = function(...conditions) {
+	return `@media ${conditions.map(wrapParens).join(", ")}`;
+};
+Object.defineProperties(mediaFn, {
+	dark: {
+		get: () => "@media (prefers-color-scheme: dark)",
+		enumerable: true
+	},
+	light: {
+		get: () => "@media (prefers-color-scheme: light)",
+		enumerable: true
+	},
+	motion: {
+		get: () => "@media (prefers-reduced-motion: no-preference)",
+		enumerable: true
+	},
+	print: {
+		get: () => "@media print",
+		enumerable: true
+	}
+});
+/** Helper for constructing `@media` at-rule keys. */
+const media = mediaFn;
+function containerFn(condition) {
+	return `@container ${wrapParens(condition)}`;
+}
+containerFn.named = function(name, condition) {
+	return `@container ${name} ${wrapParens(condition)}`;
+};
+/** Helper for constructing `@container` at-rule keys. */
+const container = containerFn;
+function supportsFn(condition) {
+	return `@supports ${wrapParens(condition)}`;
+}
+supportsFn.not = function(condition) {
+	return `@supports not ${wrapParens(condition)}`;
+};
+supportsFn.and = function(...conditions) {
+	return `@supports ${conditions.map(wrapParens).join(" and ")}`;
+};
+supportsFn.or = function(...conditions) {
+	return `@supports ${conditions.map(wrapParens).join(" or ")}`;
+};
+/** Helper for constructing `@supports` at-rule keys. */
+const supports = supportsFn;
+
+//#endregion
+Object.defineProperty(exports, 'CSSObject', {
+  enumerable: true,
+  get: function () {
+    return CSSObject;
+  }
+});
+Object.defineProperty(exports, 'CssObjectBlock', {
+  enumerable: true,
+  get: function () {
+    return CssObjectBlock;
+  }
+});
+Object.defineProperty(exports, 'CssObjectSubBlock', {
+  enumerable: true,
+  get: function () {
+    return CssObjectSubBlock;
+  }
+});
+Object.defineProperty(exports, 'GlobalCssObject', {
+  enumerable: true,
+  get: function () {
+    return GlobalCssObject;
+  }
+});
+Object.defineProperty(exports, 'KeyframesObject', {
+  enumerable: true,
+  get: function () {
+    return KeyframesObject;
+  }
+});
+Object.defineProperty(exports, 'MochiCSS', {
+  enumerable: true,
+  get: function () {
+    return MochiCSS;
+  }
+});
+Object.defineProperty(exports, 'MochiKeyframes', {
+  enumerable: true,
+  get: function () {
+    return MochiKeyframes;
+  }
+});
+Object.defineProperty(exports, 'MochiSelector', {
+  enumerable: true,
+  get: function () {
+    return MochiSelector;
+  }
+});
+Object.defineProperty(exports, 'Token', {
+  enumerable: true,
+  get: function () {
+    return Token;
+  }
+});
+Object.defineProperty(exports, '__toESM', {
+  enumerable: true,
+  get: function () {
+    return __toESM;
+  }
+});
+Object.defineProperty(exports, 'camelToKebab', {
+  enumerable: true,
+  get: function () {
+    return camelToKebab;
+  }
+});
+Object.defineProperty(exports, 'container', {
+  enumerable: true,
+  get: function () {
+    return container;
+  }
+});
+Object.defineProperty(exports, 'createToken', {
+  enumerable: true,
+  get: function () {
+    return createToken;
+  }
+});
+Object.defineProperty(exports, 'css', {
+  enumerable: true,
+  get: function () {
+    return css;
+  }
+});
+Object.defineProperty(exports, 'cssFromProps', {
+  enumerable: true,
+  get: function () {
+    return cssFromProps;
+  }
+});
+Object.defineProperty(exports, 'globalCss', {
+  enumerable: true,
+  get: function () {
+    return globalCss;
+  }
+});
+Object.defineProperty(exports, 'isAtRuleKey', {
+  enumerable: true,
+  get: function () {
+    return isAtRuleKey;
+  }
+});
+Object.defineProperty(exports, 'isMochiCSS', {
+  enumerable: true,
+  get: function () {
+    return isMochiCSS;
+  }
+});
+Object.defineProperty(exports, 'kebabToCamel', {
+  enumerable: true,
+  get: function () {
+    return kebabToCamel;
+  }
+});
+Object.defineProperty(exports, 'keyframes', {
+  enumerable: true,
+  get: function () {
+    return keyframes;
+  }
+});
+Object.defineProperty(exports, 'media', {
+  enumerable: true,
+  get: function () {
+    return media;
+  }
+});
+Object.defineProperty(exports, 'mergeMochiCss', {
+  enumerable: true,
+  get: function () {
+    return mergeMochiCss;
+  }
+});
+Object.defineProperty(exports, 'numberToBase62', {
+  enumerable: true,
+  get: function () {
+    return numberToBase62;
+  }
+});
+Object.defineProperty(exports, 'shortHash', {
+  enumerable: true,
+  get: function () {
+    return shortHash;
+  }
+});
+Object.defineProperty(exports, 'supports', {
+  enumerable: true,
+  get: function () {
+    return supports;
+  }
+});