@bamboocss/preset-base 1.11.1 → 1.11.3

package/dist/index.cjs

@@ -0,0 +1,3293 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+//#region src/conditions.ts
+const conditions = {
+	hover: "&:is(:hover, [data-hover])",
+	focus: "&:is(:focus, [data-focus])",
+	focusWithin: "&:focus-within",
+	focusVisible: "&:is(:focus-visible, [data-focus-visible])",
+	disabled: "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])",
+	active: "&:is(:active, [data-active])",
+	visited: "&:visited",
+	target: "&:target",
+	readOnly: "&:is(:read-only, [data-read-only], [aria-readonly=true])",
+	readWrite: "&:read-write",
+	empty: "&:is(:empty, [data-empty])",
+	checked: "&:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"])",
+	enabled: "&:enabled",
+	expanded: "&:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"])",
+	highlighted: "&[data-highlighted]",
+	complete: "&[data-complete]",
+	incomplete: "&[data-incomplete]",
+	dragging: "&[data-dragging]",
+	before: "&::before",
+	after: "&::after",
+	firstLetter: "&::first-letter",
+	firstLine: "&::first-line",
+	marker: "&::marker, &::-webkit-details-marker",
+	selection: "&::selection",
+	file: "&::file-selector-button",
+	backdrop: "&::backdrop",
+	first: "&:first-child",
+	last: "&:last-child",
+	only: "&:only-child",
+	even: "&:nth-child(even)",
+	odd: "&:nth-child(odd)",
+	firstOfType: "&:first-of-type",
+	lastOfType: "&:last-of-type",
+	onlyOfType: "&:only-of-type",
+	peerFocus: ".peer:is(:focus, [data-focus]) ~ &",
+	peerHover: ".peer:is(:hover, [data-hover]) ~ &",
+	peerActive: ".peer:is(:active, [data-active]) ~ &",
+	peerFocusWithin: ".peer:focus-within ~ &",
+	peerFocusVisible: ".peer:is(:focus-visible, [data-focus-visible]) ~ &",
+	peerDisabled: ".peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &",
+	peerChecked: ".peer:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) ~ &",
+	peerInvalid: ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
+	peerExpanded: ".peer:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) ~ &",
+	peerPlaceholderShown: ".peer:placeholder-shown ~ &",
+	groupFocus: ".group:is(:focus, [data-focus]) &",
+	groupHover: ".group:is(:hover, [data-hover]) &",
+	groupActive: ".group:is(:active, [data-active]) &",
+	groupFocusWithin: ".group:focus-within &",
+	groupFocusVisible: ".group:is(:focus-visible, [data-focus-visible]) &",
+	groupDisabled: ".group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &",
+	groupChecked: ".group:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) &",
+	groupExpanded: ".group:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) &",
+	groupInvalid: ".group:is(:invalid, [data-invalid], [aria-invalid=true]) &",
+	indeterminate: "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=\"indeterminate\"])",
+	required: "&:is(:required, [data-required], [aria-required=true])",
+	valid: "&:is(:valid, [data-valid])",
+	invalid: "&:is(:invalid, [data-invalid], [aria-invalid=true])",
+	autofill: "&:autofill",
+	inRange: "&:is(:in-range, [data-in-range])",
+	outOfRange: "&:is(:out-of-range, [data-outside-range])",
+	placeholder: "&::placeholder, &[data-placeholder]",
+	placeholderShown: "&:is(:placeholder-shown, [data-placeholder-shown])",
+	pressed: "&:is([aria-pressed=true], [data-pressed])",
+	selected: "&:is([aria-selected=true], [data-selected])",
+	grabbed: "&:is([aria-grabbed=true], [data-grabbed])",
+	underValue: "&[data-state=under-value]",
+	overValue: "&[data-state=over-value]",
+	atValue: "&[data-state=at-value]",
+	default: "&:default",
+	optional: "&:optional",
+	open: "&:is([open], [data-open], [data-state=\"open\"], :popover-open)",
+	closed: "&:is([closed], [data-closed], [data-state=\"closed\"])",
+	fullscreen: "&:is(:fullscreen, [data-fullscreen])",
+	loading: "&:is([data-loading], [aria-busy=true])",
+	hidden: "&:is([hidden], [data-hidden])",
+	current: "&:is([aria-current=true], [data-current])",
+	currentPage: "&[aria-current=page]",
+	currentStep: "&[aria-current=step]",
+	today: "&[data-today]",
+	unavailable: "&[data-unavailable]",
+	rangeStart: "&[data-range-start]",
+	rangeEnd: "&[data-range-end]",
+	now: "&[data-now]",
+	topmost: "&[data-topmost]",
+	motionReduce: "@media (prefers-reduced-motion: reduce)",
+	motionSafe: "@media (prefers-reduced-motion: no-preference)",
+	print: "@media print",
+	landscape: "@media (orientation: landscape)",
+	portrait: "@media (orientation: portrait)",
+	dark: ".dark &",
+	light: ".light &",
+	osDark: "@media (prefers-color-scheme: dark)",
+	osLight: "@media (prefers-color-scheme: light)",
+	highContrast: "@media (forced-colors: active)",
+	lessContrast: "@media (prefers-contrast: less)",
+	moreContrast: "@media (prefers-contrast: more)",
+	ltr: ":where([dir=ltr], :dir(ltr)) &",
+	rtl: ":where([dir=rtl], :dir(rtl)) &",
+	scrollbar: "&::-webkit-scrollbar",
+	scrollbarThumb: "&::-webkit-scrollbar-thumb",
+	scrollbarTrack: "&::-webkit-scrollbar-track",
+	horizontal: "&[data-orientation=horizontal]",
+	vertical: "&[data-orientation=vertical]",
+	icon: "& :where(svg)",
+	starting: "@starting-style",
+	noscript: "@media (scripting: none)",
+	invertedColors: "@media (inverted-colors: inverted)"
+};
+//#endregion
+//#region src/global-css.ts
+const EMPTY = "/*-*/ /*-*/";
+const globalCss = { "*, ::before, ::after, ::backdrop": {
+	"--blur": EMPTY,
+	"--brightness": EMPTY,
+	"--contrast": EMPTY,
+	"--grayscale": EMPTY,
+	"--hue-rotate": EMPTY,
+	"--invert": EMPTY,
+	"--saturate": EMPTY,
+	"--sepia": EMPTY,
+	"--drop-shadow": EMPTY,
+	"--backdrop-blur": EMPTY,
+	"--backdrop-brightness": EMPTY,
+	"--backdrop-contrast": EMPTY,
+	"--backdrop-grayscale": EMPTY,
+	"--backdrop-hue-rotate": EMPTY,
+	"--backdrop-invert": EMPTY,
+	"--backdrop-opacity": EMPTY,
+	"--backdrop-saturate": EMPTY,
+	"--backdrop-sepia": EMPTY,
+	"--gradient-from-position": EMPTY,
+	"--gradient-to-position": EMPTY,
+	"--gradient-via-position": EMPTY,
+	"--scroll-snap-strictness": "proximity",
+	"--border-spacing-x": 0,
+	"--border-spacing-y": 0,
+	"--translate-x": 0,
+	"--translate-y": 0,
+	"--rotate": 0,
+	"--rotate-x": 0,
+	"--rotate-y": 0,
+	"--skew-x": 0,
+	"--skew-y": 0,
+	"--scale-x": 1,
+	"--scale-y": 1
+} };
+//#endregion
+//#region src/patterns.ts
+function definePattern(config) {
+	return config;
+}
+const box = definePattern({ transform(props) {
+	return props;
+} });
+const flex = definePattern({
+	properties: {
+		align: {
+			type: "property",
+			value: "alignItems"
+		},
+		justify: {
+			type: "property",
+			value: "justifyContent"
+		},
+		direction: {
+			type: "property",
+			value: "flexDirection"
+		},
+		wrap: {
+			type: "property",
+			value: "flexWrap"
+		},
+		basis: {
+			type: "property",
+			value: "flexBasis"
+		},
+		grow: {
+			type: "property",
+			value: "flexGrow"
+		},
+		shrink: {
+			type: "property",
+			value: "flexShrink"
+		}
+	},
+	transform(props) {
+		const { direction, align, justify, wrap, basis, grow, shrink, ...rest } = props;
+		return {
+			display: "flex",
+			flexDirection: direction,
+			alignItems: align,
+			justifyContent: justify,
+			flexWrap: wrap,
+			flexBasis: basis,
+			flexGrow: grow,
+			flexShrink: shrink,
+			...rest
+		};
+	}
+});
+const stack = definePattern({
+	properties: {
+		align: {
+			type: "property",
+			value: "alignItems"
+		},
+		justify: {
+			type: "property",
+			value: "justifyContent"
+		},
+		direction: {
+			type: "property",
+			value: "flexDirection"
+		},
+		gap: {
+			type: "property",
+			value: "gap"
+		}
+	},
+	defaultValues: {
+		direction: "column",
+		gap: "8px"
+	},
+	transform(props) {
+		const { align, justify, direction, gap, ...rest } = props;
+		return {
+			display: "flex",
+			flexDirection: direction,
+			alignItems: align,
+			justifyContent: justify,
+			gap,
+			...rest
+		};
+	}
+});
+const vstack = definePattern({
+	jsxName: "VStack",
+	properties: {
+		justify: {
+			type: "property",
+			value: "justifyContent"
+		},
+		gap: {
+			type: "property",
+			value: "gap"
+		}
+	},
+	defaultValues: { gap: "8px" },
+	transform(props) {
+		const { justify, gap, ...rest } = props;
+		return {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: justify,
+			gap,
+			flexDirection: "column",
+			...rest
+		};
+	}
+});
+const hstack = definePattern({
+	jsxName: "HStack",
+	properties: {
+		justify: {
+			type: "property",
+			value: "justifyContent"
+		},
+		gap: {
+			type: "property",
+			value: "gap"
+		}
+	},
+	defaultValues: { gap: "8px" },
+	transform(props) {
+		const { justify, gap, ...rest } = props;
+		return {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: justify,
+			gap,
+			flexDirection: "row",
+			...rest
+		};
+	}
+});
+const spacer = definePattern({
+	properties: { size: {
+		type: "token",
+		value: "spacing"
+	} },
+	transform(props, { map, isCssUnit, isCssVar }) {
+		const { size, ...rest } = props;
+		return {
+			alignSelf: "stretch",
+			justifySelf: "stretch",
+			flex: map(size, (v) => {
+				if (v == null) return "1";
+				return `0 0 ${isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`}`;
+			}),
+			...rest
+		};
+	}
+});
+const circle = definePattern({
+	properties: { size: {
+		type: "property",
+		value: "width"
+	} },
+	transform(props) {
+		const { size, ...rest } = props;
+		return {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flex: "0 0 auto",
+			width: size,
+			height: size,
+			borderRadius: "9999px",
+			...rest
+		};
+	}
+});
+const square = definePattern({
+	properties: { size: {
+		type: "property",
+		value: "width"
+	} },
+	transform(props) {
+		const { size, ...rest } = props;
+		return {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flex: "0 0 auto",
+			width: size,
+			height: size,
+			...rest
+		};
+	}
+});
+const grid = definePattern({
+	properties: {
+		gap: {
+			type: "property",
+			value: "gap"
+		},
+		columnGap: {
+			type: "property",
+			value: "gap"
+		},
+		rowGap: {
+			type: "property",
+			value: "gap"
+		},
+		columns: { type: "number" },
+		minChildWidth: {
+			type: "token",
+			value: "sizes",
+			property: "width"
+		}
+	},
+	defaultValues(props) {
+		return { gap: props.columnGap || props.rowGap ? void 0 : "8px" };
+	},
+	transform(props, { map, isCssUnit }) {
+		const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
+		const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
+		return {
+			display: "grid",
+			gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
+			gap,
+			columnGap,
+			rowGap,
+			...rest
+		};
+	}
+});
+const gridItem = definePattern({
+	properties: {
+		colSpan: { type: "number" },
+		rowSpan: { type: "number" },
+		colStart: { type: "number" },
+		rowStart: { type: "number" },
+		colEnd: { type: "number" },
+		rowEnd: { type: "number" }
+	},
+	transform(props, { map }) {
+		const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
+		const spanFn = (v) => v === "auto" ? v : `span ${v}`;
+		return {
+			gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
+			gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
+			gridColumnStart: colStart,
+			gridColumnEnd: colEnd,
+			gridRowStart: rowStart,
+			gridRowEnd: rowEnd,
+			...rest
+		};
+	}
+});
+const wrap = definePattern({
+	properties: {
+		gap: {
+			type: "property",
+			value: "gap"
+		},
+		rowGap: {
+			type: "property",
+			value: "gap"
+		},
+		columnGap: {
+			type: "property",
+			value: "gap"
+		},
+		align: {
+			type: "property",
+			value: "alignItems"
+		},
+		justify: {
+			type: "property",
+			value: "justifyContent"
+		}
+	},
+	transform(props) {
+		const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "8px", align, justify, ...rest } = props;
+		return {
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: align,
+			justifyContent: justify,
+			gap,
+			columnGap,
+			rowGap,
+			...rest
+		};
+	}
+});
+const container$1 = definePattern({ transform(props) {
+	return {
+		position: "relative",
+		maxWidth: "8xl",
+		mx: "auto",
+		px: {
+			base: "4",
+			md: "6",
+			lg: "8"
+		},
+		...props
+	};
+} });
+const center = definePattern({
+	properties: { inline: { type: "boolean" } },
+	transform(props) {
+		const { inline, ...rest } = props;
+		return {
+			display: inline ? "inline-flex" : "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			...rest
+		};
+	}
+});
+const aspectRatio = definePattern({
+	properties: { ratio: { type: "number" } },
+	blocklist: ["aspectRatio"],
+	transform(props, { map }) {
+		const { ratio = 4 / 3, ...rest } = props;
+		return {
+			position: "relative",
+			_before: {
+				content: `""`,
+				display: "block",
+				height: "0",
+				paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
+			},
+			"&>*": {
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+				overflow: "hidden",
+				position: "absolute",
+				inset: "0",
+				width: "100%",
+				height: "100%"
+			},
+			"&>img, &>video": { objectFit: "cover" },
+			...rest
+		};
+	}
+});
+const divider = definePattern({
+	properties: {
+		orientation: {
+			type: "enum",
+			value: ["horizontal", "vertical"]
+		},
+		thickness: {
+			type: "token",
+			value: "sizes",
+			property: "borderWidth"
+		},
+		color: {
+			type: "token",
+			value: "colors",
+			property: "borderColor"
+		}
+	},
+	defaultValues: {
+		orientation: "horizontal",
+		thickness: "1px"
+	},
+	transform(props, { map }) {
+		const { orientation, thickness, color, ...rest } = props;
+		return {
+			"--thickness": thickness,
+			width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
+			height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
+			borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
+			borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
+			borderColor: color,
+			...rest
+		};
+	}
+});
+const patterns = {
+	box,
+	flex,
+	stack,
+	vstack,
+	hstack,
+	spacer,
+	square,
+	circle,
+	center,
+	linkOverlay: definePattern({
+		jsxElement: "a",
+		transform(props) {
+			return {
+				_before: {
+					content: "\"\"",
+					position: "absolute",
+					inset: "0",
+					zIndex: "0",
+					...props["_before"]
+				},
+				...props
+			};
+		}
+	}),
+	aspectRatio,
+	grid,
+	gridItem,
+	wrap,
+	container: container$1,
+	divider,
+	float: definePattern({
+		properties: {
+			offsetX: {
+				type: "token",
+				value: "spacing",
+				property: "left"
+			},
+			offsetY: {
+				type: "token",
+				value: "spacing",
+				property: "top"
+			},
+			offset: {
+				type: "token",
+				value: "spacing",
+				property: "top"
+			},
+			placement: {
+				type: "enum",
+				value: [
+					"bottom-end",
+					"bottom-start",
+					"top-end",
+					"top-start",
+					"bottom-center",
+					"top-center",
+					"middle-center",
+					"middle-end",
+					"middle-start"
+				]
+			}
+		},
+		defaultValues(props) {
+			const offset = props.offset || "0";
+			return {
+				offset,
+				offsetX: offset,
+				offsetY: offset,
+				placement: "top-end"
+			};
+		},
+		transform(props, { map }) {
+			const { offset, offsetX, offsetY, placement, ...rest } = props;
+			return {
+				display: "inline-flex",
+				justifyContent: "center",
+				alignItems: "center",
+				position: "absolute",
+				insetBlockStart: map(placement, (v) => {
+					const [side] = v.split("-");
+					return {
+						top: offsetY,
+						middle: "50%",
+						bottom: "auto"
+					}[side];
+				}),
+				insetBlockEnd: map(placement, (v) => {
+					const [side] = v.split("-");
+					return {
+						top: "auto",
+						middle: "50%",
+						bottom: offsetY
+					}[side];
+				}),
+				insetInlineStart: map(placement, (v) => {
+					const [, align] = v.split("-");
+					return {
+						start: offsetX,
+						center: "50%",
+						end: "auto"
+					}[align];
+				}),
+				insetInlineEnd: map(placement, (v) => {
+					const [, align] = v.split("-");
+					return {
+						start: "auto",
+						center: "50%",
+						end: offsetX
+					}[align];
+				}),
+				translate: map(placement, (v) => {
+					const [side, align] = v.split("-");
+					return `${{
+						start: "-50%",
+						center: "-50%",
+						end: "50%"
+					}[align]} ${{
+						top: "-50%",
+						middle: "-50%",
+						bottom: "50%"
+					}[side]}`;
+				}),
+				...rest
+			};
+		}
+	}),
+	bleed: definePattern({
+		properties: {
+			inline: {
+				type: "property",
+				value: "marginInline"
+			},
+			block: {
+				type: "property",
+				value: "marginBlock"
+			}
+		},
+		defaultValues: {
+			inline: "0",
+			block: "0"
+		},
+		transform(props, { map, isCssUnit, isCssVar }) {
+			const { inline, block, ...rest } = props;
+			const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
+			return {
+				"--bleed-x": map(inline, valueFn),
+				"--bleed-y": map(block, valueFn),
+				marginInline: "calc(var(--bleed-x, 0) * -1)",
+				marginBlock: "calc(var(--bleed-y, 0) * -1)",
+				...rest
+			};
+		}
+	}),
+	visuallyHidden: definePattern({ transform(props) {
+		return {
+			srOnly: true,
+			...props
+		};
+	} }),
+	cq: definePattern({
+		properties: {
+			name: {
+				type: "token",
+				value: "containerNames",
+				property: "containerName"
+			},
+			type: {
+				type: "property",
+				value: "containerType"
+			}
+		},
+		defaultValues: { type: "inline-size" },
+		transform(props) {
+			const { name, type, ...rest } = props;
+			return {
+				containerType: type,
+				containerName: name,
+				...rest
+			};
+		}
+	})
+};
+//#endregion
+//#region src/color-mix-transform.ts
+const createColorMixTransform = (prop) => (value, args) => {
+	const mix = args.utils.colorMix(value);
+	if (mix.invalid) return { [prop]: value };
+	const cssVar = "--mix-" + prop;
+	return {
+		[cssVar]: mix.value,
+		[prop]: `var(${cssVar}, ${mix.color})`
+	};
+};
+//#endregion
+//#region src/utilities/background.ts
+const background = {
+	backgroundPosition: {
+		shorthand: "bgPosition",
+		className: "bg-p",
+		group: "Background"
+	},
+	backgroundPositionX: {
+		shorthand: "bgPositionX",
+		className: "bg-p-x",
+		group: "Background"
+	},
+	backgroundPositionY: {
+		shorthand: "bgPositionY",
+		className: "bg-p-y",
+		group: "Background"
+	},
+	backgroundAttachment: {
+		shorthand: "bgAttachment",
+		className: "bg-a",
+		group: "Background"
+	},
+	backgroundClip: {
+		shorthand: "bgClip",
+		className: "bg-cp",
+		group: "Background",
+		transform(value) {
+			return {
+				backgroundClip: value,
+				WebkitBackgroundClip: value
+			};
+		}
+	},
+	background: {
+		shorthand: "bg",
+		className: "bg",
+		values: "colors",
+		group: "Background",
+		transform: createColorMixTransform("background")
+	},
+	backgroundColor: {
+		shorthand: "bgColor",
+		className: "bg-c",
+		values: "colors",
+		group: "Background",
+		transform: createColorMixTransform("backgroundColor")
+	},
+	backgroundOrigin: {
+		shorthand: "bgOrigin",
+		className: "bg-o",
+		group: "Background"
+	},
+	backgroundImage: {
+		shorthand: "bgImage",
+		className: "bg-i",
+		values: "assets",
+		group: "Background"
+	},
+	backgroundRepeat: {
+		shorthand: "bgRepeat",
+		className: "bg-r",
+		group: "Background"
+	},
+	backgroundBlendMode: {
+		shorthand: "bgBlendMode",
+		className: "bg-bm",
+		group: "Background"
+	},
+	backgroundSize: {
+		shorthand: "bgSize",
+		className: "bg-s",
+		group: "Background"
+	}
+};
+//#endregion
+//#region src/utilities/border.ts
+const border = {
+	borderRadius: {
+		className: "bdr",
+		shorthand: "rounded",
+		values: "radii",
+		group: "Border Radius"
+	},
+	borderTopLeftRadius: {
+		className: "bdr-tl",
+		shorthand: "roundedTopLeft",
+		values: "radii",
+		group: "Border Radius"
+	},
+	borderTopRightRadius: {
+		className: "bdr-tr",
+		shorthand: "roundedTopRight",
+		values: "radii",
+		group: "Border Radius"
+	},
+	borderBottomRightRadius: {
+		className: "bdr-br",
+		shorthand: "roundedBottomRight",
+		values: "radii",
+		group: "Border Radius"
+	},
+	borderBottomLeftRadius: {
+		className: "bdr-bl",
+		shorthand: "roundedBottomLeft",
+		values: "radii",
+		group: "Border Radius"
+	},
+	borderTopRadius: {
+		className: "bdr-t",
+		shorthand: "roundedTop",
+		property: "borderRadius",
+		values: "radii",
+		group: "Border Radius",
+		transform(value) {
+			return {
+				borderTopLeftRadius: value,
+				borderTopRightRadius: value
+			};
+		}
+	},
+	borderRightRadius: {
+		className: "bdr-r",
+		shorthand: "roundedRight",
+		property: "borderRadius",
+		values: "radii",
+		group: "Border Radius",
+		transform(value) {
+			return {
+				borderTopRightRadius: value,
+				borderBottomRightRadius: value
+			};
+		}
+	},
+	borderBottomRadius: {
+		className: "bdr-b",
+		shorthand: "roundedBottom",
+		property: "borderRadius",
+		values: "radii",
+		group: "Border Radius",
+		transform(value) {
+			return {
+				borderBottomLeftRadius: value,
+				borderBottomRightRadius: value
+			};
+		}
+	},
+	borderLeftRadius: {
+		className: "bdr-l",
+		shorthand: "roundedLeft",
+		values: "radii",
+		property: "borderRadius",
+		group: "Border Radius",
+		transform(value) {
+			return {
+				borderTopLeftRadius: value,
+				borderBottomLeftRadius: value
+			};
+		}
+	},
+	borderStartStartRadius: {
+		className: "bdr-ss",
+		shorthand: "roundedStartStart",
+		values: "radii",
+		group: "Border Radius"
+	},
+	borderStartEndRadius: {
+		className: "bdr-se",
+		shorthand: "roundedStartEnd",
+		values: "radii",
+		group: "Border Radius"
+	},
+	borderStartRadius: {
+		className: "bdr-s",
+		values: "radii",
+		property: "borderRadius",
+		shorthand: "roundedStart",
+		group: "Border Radius",
+		transform(value) {
+			return {
+				borderStartStartRadius: value,
+				borderEndStartRadius: value
+			};
+		}
+	},
+	borderEndStartRadius: {
+		className: "bdr-es",
+		shorthand: "roundedEndStart",
+		values: "radii",
+		group: "Border Radius"
+	},
+	borderEndEndRadius: {
+		className: "bdr-ee",
+		shorthand: "roundedEndEnd",
+		values: "radii",
+		group: "Border Radius"
+	},
+	borderEndRadius: {
+		className: "bdr-e",
+		shorthand: "roundedEnd",
+		property: "borderRadius",
+		values: "radii",
+		group: "Border Radius",
+		transform(value) {
+			return {
+				borderStartEndRadius: value,
+				borderEndEndRadius: value
+			};
+		}
+	},
+	border: {
+		className: "bd",
+		values: "borders",
+		group: "Border"
+	},
+	borderWidth: {
+		className: "bd-w",
+		values: "borderWidths",
+		group: "Border Radius"
+	},
+	borderTopWidth: {
+		className: "bd-t-w",
+		values: "borderWidths",
+		group: "Border"
+	},
+	borderLeftWidth: {
+		className: "bd-l-w",
+		values: "borderWidths",
+		group: "Border"
+	},
+	borderRightWidth: {
+		className: "bd-r-w",
+		values: "borderWidths",
+		group: "Border"
+	},
+	borderBottomWidth: {
+		className: "bd-b-w",
+		values: "borderWidths",
+		group: "Border"
+	},
+	borderBlockStartWidth: {
+		className: "bd-bs-w",
+		values: "borderWidths",
+		group: "Border Radius"
+	},
+	borderBlockEndWidth: {
+		className: "bd-be-w",
+		values: "borderWidths",
+		group: "Border Radius"
+	},
+	borderColor: {
+		className: "bd-c",
+		values: "colors",
+		group: "Border",
+		transform: createColorMixTransform("borderColor")
+	},
+	borderInline: {
+		className: "bd-x",
+		values: "borders",
+		group: "Border",
+		shorthand: "borderX"
+	},
+	borderInlineWidth: {
+		className: "bd-x-w",
+		values: "borderWidths",
+		group: "Border",
+		shorthand: "borderXWidth"
+	},
+	borderInlineColor: {
+		className: "bd-x-c",
+		values: "colors",
+		group: "Border",
+		shorthand: "borderXColor",
+		transform: createColorMixTransform("borderInlineColor")
+	},
+	borderBlock: {
+		className: "bd-y",
+		values: "borders",
+		group: "Border",
+		shorthand: "borderY"
+	},
+	borderBlockWidth: {
+		className: "bd-y-w",
+		values: "borderWidths",
+		group: "Border",
+		shorthand: "borderYWidth"
+	},
+	borderBlockColor: {
+		className: "bd-y-c",
+		values: "colors",
+		group: "Border",
+		shorthand: "borderYColor",
+		transform: createColorMixTransform("borderBlockColor")
+	},
+	borderLeft: {
+		className: "bd-l",
+		values: "borders",
+		group: "Border"
+	},
+	borderLeftColor: {
+		className: "bd-l-c",
+		values: "colors",
+		group: "Border",
+		transform: createColorMixTransform("borderLeftColor")
+	},
+	borderInlineStart: {
+		className: "bd-s",
+		values: "borders",
+		group: "Border",
+		shorthand: "borderStart"
+	},
+	borderInlineStartWidth: {
+		className: "bd-s-w",
+		values: "borderWidths",
+		group: "Border",
+		shorthand: "borderStartWidth"
+	},
+	borderInlineStartColor: {
+		className: "bd-s-c",
+		values: "colors",
+		group: "Border",
+		shorthand: "borderStartColor",
+		transform: createColorMixTransform("borderInlineStartColor")
+	},
+	borderRight: {
+		className: "bd-r",
+		values: "borders",
+		group: "Border"
+	},
+	borderRightColor: {
+		className: "bd-r-c",
+		values: "colors",
+		group: "Border",
+		transform: createColorMixTransform("borderRightColor")
+	},
+	borderInlineEnd: {
+		className: "bd-e",
+		values: "borders",
+		group: "Border",
+		shorthand: "borderEnd"
+	},
+	borderInlineEndWidth: {
+		className: "bd-e-w",
+		values: "borderWidths",
+		group: "Border",
+		shorthand: "borderEndWidth"
+	},
+	borderInlineEndColor: {
+		className: "bd-e-c",
+		values: "colors",
+		group: "Border",
+		shorthand: "borderEndColor",
+		transform: createColorMixTransform("borderInlineEndColor")
+	},
+	borderTop: {
+		className: "bd-t",
+		values: "borders",
+		group: "Border"
+	},
+	borderTopColor: {
+		className: "bd-t-c",
+		values: "colors",
+		group: "Border",
+		transform: createColorMixTransform("borderTopColor")
+	},
+	borderBottom: {
+		className: "bd-b",
+		values: "borders",
+		group: "Border"
+	},
+	borderBottomColor: {
+		className: "bd-b-c",
+		values: "colors",
+		group: "Border",
+		transform: createColorMixTransform("borderBottomColor")
+	},
+	borderBlockEnd: {
+		className: "bd-be",
+		values: "borders",
+		group: "Border"
+	},
+	borderBlockEndColor: {
+		className: "bd-be-c",
+		values: "colors",
+		group: "Border",
+		transform: createColorMixTransform("borderBlockEndColor")
+	},
+	borderBlockStart: {
+		className: "bd-bs",
+		values: "borders",
+		group: "Border"
+	},
+	borderBlockStartColor: {
+		className: "bd-bs-c",
+		values: "colors",
+		group: "Border",
+		transform: createColorMixTransform("borderBlockStartColor")
+	}
+};
+//#endregion
+//#region src/utilities/container.ts
+const container = {
+	container: {
+		className: "cq",
+		group: "Container"
+	},
+	containerName: {
+		className: "cq-n",
+		property: "containerName",
+		values: "containerNames",
+		group: "Container"
+	},
+	containerType: {
+		className: "cq-t",
+		group: "Container"
+	}
+};
+//#endregion
+//#region src/utilities/cursor.ts
+const cursor = { cursor: {
+	className: "cursor",
+	values: "cursor",
+	group: "System"
+} };
+//#endregion
+//#region src/utilities/display.ts
+const display = {
+	display: {
+		className: "d",
+		group: "Display"
+	},
+	hideFrom: {
+		className: "hide",
+		values: "breakpoints",
+		group: "Display",
+		transform(value, { raw, token }) {
+			return { [token.raw(`breakpoints.${raw}`) ? `@breakpoint ${raw}` : `@media screen and (min-width: ${value})`]: { display: "none" } };
+		}
+	},
+	hideBelow: {
+		className: "show",
+		values: "breakpoints",
+		group: "Display",
+		transform(value, { raw, token }) {
+			return { [token.raw(`breakpoints.${raw}`) ? `@breakpoint ${raw}Down` : `@media screen and (max-width: ${value})`]: { display: "none" } };
+		}
+	}
+};
+//#endregion
+//#region src/utilities/divide.ts
+const divideColor = createColorMixTransform("borderColor");
+const divide = {
+	divideX: {
+		className: "dvd-x",
+		values: "borderWidths",
+		group: "Border",
+		transform(value) {
+			return { "& > :not([hidden]) ~ :not([hidden])": {
+				borderInlineStartWidth: value,
+				borderInlineEndWidth: "0px"
+			} };
+		}
+	},
+	divideY: {
+		className: "dvd-y",
+		values: "borderWidths",
+		group: "Border",
+		transform(value) {
+			return { "& > :not([hidden]) ~ :not([hidden])": {
+				borderTopWidth: value,
+				borderBottomWidth: "0px"
+			} };
+		}
+	},
+	divideColor: {
+		className: "dvd-c",
+		values: "colors",
+		group: "Border",
+		transform(value, args) {
+			return { "& > :not([hidden]) ~ :not([hidden])": divideColor(value, args) };
+		}
+	},
+	divideStyle: {
+		className: "dvd-s",
+		property: "borderStyle",
+		group: "Border",
+		transform(value) {
+			return { "& > :not([hidden]) ~ :not([hidden])": { borderStyle: value } };
+		}
+	}
+};
+//#endregion
+//#region src/utilities/effects.ts
+const effects = {
+	opacity: {
+		className: "op",
+		values: "opacity",
+		group: "Background"
+	},
+	boxShadow: {
+		shorthand: "shadow",
+		className: "bx-sh",
+		values: "shadows",
+		group: "Shadow"
+	},
+	boxShadowColor: {
+		shorthand: "shadowColor",
+		className: "bx-sh-c",
+		values: "colors",
+		transform: createColorMixTransform("--shadow-color"),
+		group: "Color"
+	},
+	mixBlendMode: {
+		className: "mix-bm",
+		group: "Effect"
+	},
+	filter: {
+		className: "filter",
+		group: "Effect",
+		values: { auto: "var(--blur, ) var(--brightness, ) var(--contrast, ) var(--grayscale, ) var(--hue-rotate, ) var(--invert, ) var(--saturate, ) var(--sepia, ) var(--drop-shadow, )" }
+	},
+	brightness: {
+		className: "brightness",
+		group: "Effect",
+		transform(value) {
+			return { "--brightness": `brightness(${value})` };
+		}
+	},
+	contrast: {
+		className: "contrast",
+		group: "Effect",
+		transform(value) {
+			return { "--contrast": `contrast(${value})` };
+		}
+	},
+	grayscale: {
+		className: "grayscale",
+		group: "Effect",
+		transform(value) {
+			return { "--grayscale": `grayscale(${value})` };
+		}
+	},
+	hueRotate: {
+		className: "hue-rotate",
+		group: "Effect",
+		transform(value) {
+			return { "--hue-rotate": `hue-rotate(${value})` };
+		}
+	},
+	invert: {
+		className: "invert",
+		group: "Effect",
+		transform(value) {
+			return { "--invert": `invert(${value})` };
+		}
+	},
+	saturate: {
+		className: "saturate",
+		group: "Effect",
+		transform(value) {
+			return { "--saturate": `saturate(${value})` };
+		}
+	},
+	sepia: {
+		className: "sepia",
+		group: "Effect",
+		transform(value) {
+			return { "--sepia": `sepia(${value})` };
+		}
+	},
+	dropShadow: {
+		className: "drop-shadow",
+		group: "Effect",
+		values: "dropShadows",
+		transform(value) {
+			return { "--drop-shadow": value };
+		}
+	},
+	blur: {
+		className: "blur",
+		group: "Effect",
+		values: "blurs",
+		transform(value) {
+			return { "--blur": `blur(${value})` };
+		}
+	},
+	backdropFilter: {
+		className: "bkdp",
+		group: "Effect",
+		values: { auto: "var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, )" },
+		transform(value) {
+			return {
+				backdropFilter: value,
+				WebkitBackdropFilter: value
+			};
+		}
+	},
+	backdropBlur: {
+		className: "bkdp-blur",
+		group: "Effect",
+		values: "blurs",
+		transform(value) {
+			return { "--backdrop-blur": `blur(${value})` };
+		}
+	},
+	backdropBrightness: {
+		className: "bkdp-brightness",
+		group: "Effect",
+		transform(value) {
+			return { "--backdrop-brightness": `brightness(${value})` };
+		}
+	},
+	backdropContrast: {
+		className: "bkdp-contrast",
+		group: "Effect",
+		transform(value) {
+			return { "--backdrop-contrast": `contrast(${value})` };
+		}
+	},
+	backdropGrayscale: {
+		className: "bkdp-grayscale",
+		group: "Effect",
+		transform(value) {
+			return { "--backdrop-grayscale": `grayscale(${value})` };
+		}
+	},
+	backdropHueRotate: {
+		className: "bkdp-hue-rotate",
+		group: "Effect",
+		transform(value) {
+			return { "--backdrop-hue-rotate": `hue-rotate(${value})` };
+		}
+	},
+	backdropInvert: {
+		className: "bkdp-invert",
+		group: "Effect",
+		transform(value) {
+			return { "--backdrop-invert": `invert(${value})` };
+		}
+	},
+	backdropOpacity: {
+		className: "bkdp-opacity",
+		group: "Effect",
+		transform(value) {
+			return { "--backdrop-opacity": value };
+		}
+	},
+	backdropSaturate: {
+		className: "bkdp-saturate",
+		group: "Effect",
+		transform(value) {
+			return { "--backdrop-saturate": `saturate(${value})` };
+		}
+	},
+	backdropSepia: {
+		className: "bkdp-sepia",
+		group: "Effect",
+		transform(value) {
+			return { "--backdrop-sepia": `sepia(${value})` };
+		}
+	}
+};
+//#endregion
+//#region src/utilities/flex-and-grid.ts
+const flexGrid = {
+	flexBasis: {
+		className: "flex-b",
+		group: "Flex Layout",
+		values(theme) {
+			return {
+				...theme("sizes"),
+				"1/2": "50%",
+				"1/3": "33.333333%",
+				"2/3": "66.666667%",
+				"1/4": "25%",
+				"2/4": "50%",
+				"3/4": "75%",
+				"1/5": "20%",
+				"2/5": "40%",
+				"3/5": "60%",
+				"4/5": "80%",
+				"1/6": "16.666667%",
+				"2/6": "33.333333%",
+				"3/6": "50%",
+				"4/6": "66.666667%",
+				"5/6": "83.333333%",
+				"1/12": "8.333333%",
+				"2/12": "16.666667%",
+				"3/12": "25%",
+				"4/12": "33.333333%",
+				"5/12": "41.666667%",
+				"6/12": "50%",
+				"7/12": "58.333333%",
+				"8/12": "66.666667%",
+				"9/12": "75%",
+				"10/12": "83.333333%",
+				"11/12": "91.666667%",
+				full: "100%"
+			};
+		}
+	},
+	flex: {
+		className: "flex",
+		group: "Flex Layout",
+		values: {
+			"1": "1 1 0%",
+			auto: "1 1 auto",
+			initial: "0 1 auto",
+			none: "none"
+		}
+	},
+	flexDirection: {
+		className: "flex-d",
+		group: "Flex Layout",
+		shorthand: "flexDir"
+	},
+	flexGrow: {
+		className: "flex-g",
+		group: "Flex Layout"
+	},
+	flexShrink: {
+		className: "flex-sh",
+		group: "Flex Layout"
+	},
+	gridTemplateColumns: {
+		className: "grid-tc",
+		group: "Grid Layout"
+	},
+	gridTemplateRows: {
+		className: "grid-tr",
+		group: "Grid Layout"
+	},
+	gridColumn: {
+		className: "grid-c",
+		group: "Grid Layout"
+	},
+	gridRow: {
+		className: "grid-r",
+		group: "Grid Layout"
+	},
+	gridColumnStart: {
+		className: "grid-cs",
+		group: "Grid Layout"
+	},
+	gridColumnEnd: {
+		className: "grid-ce",
+		group: "Grid Layout"
+	},
+	gridAutoFlow: {
+		className: "grid-af",
+		group: "Grid Layout"
+	},
+	gridAutoColumns: {
+		className: "grid-ac",
+		group: "Grid Layout",
+		values: {
+			min: "min-content",
+			max: "max-content",
+			fr: "minmax(0, 1fr)"
+		}
+	},
+	gridAutoRows: {
+		className: "grid-ar",
+		group: "Grid Layout",
+		values: {
+			min: "min-content",
+			max: "max-content",
+			fr: "minmax(0, 1fr)"
+		}
+	},
+	gap: {
+		className: "gap",
+		group: "Flex Layout",
+		values: "spacing"
+	},
+	gridGap: {
+		className: "grid-g",
+		group: "Grid Layout",
+		values: "spacing"
+	},
+	gridRowGap: {
+		className: "grid-rg",
+		group: "Grid Layout",
+		values: "spacing"
+	},
+	gridColumnGap: {
+		className: "grid-cg",
+		group: "Grid Layout",
+		values: "spacing"
+	},
+	rowGap: {
+		className: "rg",
+		group: "Grid Layout",
+		values: "spacing"
+	},
+	columnGap: {
+		className: "cg",
+		group: "Grid Layout",
+		values: "spacing"
+	},
+	justifyContent: {
+		className: "jc",
+		group: "Flex Layout"
+	},
+	alignContent: {
+		className: "ac",
+		group: "Flex Layout"
+	},
+	alignItems: {
+		className: "ai",
+		group: "Flex Layout"
+	},
+	alignSelf: {
+		className: "as",
+		group: "Flex Layout"
+	}
+};
+//#endregion
+//#region src/utilities/focus-ring.ts
+function createFocusRing(selector, className) {
+	return {
+		className,
+		group: "Focus Ring",
+		values: [
+			"outside",
+			"inside",
+			"mixed",
+			"none"
+		],
+		transform(value) {
+			const focusRingColor = `var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC))`;
+			switch (value) {
+				case "inside": return {
+					"--focus-ring-color": focusRingColor,
+					[selector]: {
+						outlineOffset: "0px",
+						outlineWidth: "var(--focus-ring-width, 1px)",
+						outlineColor: "var(--focus-ring-color)",
+						outlineStyle: "var(--focus-ring-style, solid)",
+						borderColor: "var(--focus-ring-color)"
+					}
+				};
+				case "outside": return {
+					"--focus-ring-color": focusRingColor,
+					[selector]: {
+						outlineWidth: "var(--focus-ring-width, 2px)",
+						outlineOffset: "var(--focus-ring-offset, 2px)",
+						outlineStyle: "var(--focus-ring-style, solid)",
+						outlineColor: "var(--focus-ring-color)"
+					}
+				};
+				case "mixed": return {
+					"--focus-ring-color": focusRingColor,
+					[selector]: {
+						outlineOffset: "0px",
+						outlineWidth: "var(--focus-ring-width, 3px)",
+						outlineStyle: "var(--focus-ring-style, solid)",
+						outlineColor: "color-mix(in srgb, var(--focus-ring-color), transparent 60%)",
+						borderColor: "var(--focus-ring-color)"
+					}
+				};
+				case "none": return {
+					"--focus-ring-color": focusRingColor,
+					[selector]: { outline: "none" }
+				};
+				default: return {};
+			}
+		}
+	};
+}
+const focusRing = {
+	focusRing: createFocusRing("&:is(:focus, [data-focus])", "focus-ring"),
+	focusVisibleRing: createFocusRing("&:is(:focus-visible, [data-focus-visible])", "focus-v-ring"),
+	focusRingColor: {
+		className: "focus-ring-c",
+		values: "colors",
+		group: "Focus Ring",
+		transform(value, { utils }) {
+			const prop = "--focus-ring-color-prop";
+			const mix = utils.colorMix(value);
+			if (mix.invalid) return { [prop]: value };
+			const cssVar = "--mix-" + prop;
+			return {
+				[cssVar]: mix.value,
+				[prop]: `var(${cssVar}, ${mix.color})`
+			};
+		}
+	},
+	focusRingOffset: {
+		className: "focus-ring-o",
+		values: "spacing",
+		group: "Focus Ring",
+		transform: (v) => ({ "--focus-ring-offset": v })
+	},
+	focusRingWidth: {
+		className: "focus-ring-w",
+		values: "borderWidths",
+		property: "outlineWidth",
+		group: "Focus Ring",
+		transform: (v) => ({ "--focus-ring-width": v })
+	},
+	focusRingStyle: {
+		className: "focus-ring-s",
+		values: "borderStyles",
+		property: "outlineStyle",
+		group: "Focus Ring",
+		transform: (v) => ({ "--focus-ring-style": v })
+	}
+};
+//#endregion
+//#region src/utilities/gradient.ts
+const gradientVia = createColorMixTransform("--gradient-via");
+const linearGradientDirectionMap = new Map([
+	["to-t", "to top"],
+	["to-tr", "to top right"],
+	["to-r", "to right"],
+	["to-br", "to bottom right"],
+	["to-b", "to bottom"],
+	["to-bl", "to bottom left"],
+	["to-l", "to left"],
+	["to-tl", "to top left"]
+]);
+const isGradientShortcut = (value) => linearGradientDirectionMap.has(value);
+const linearGradientValues = (theme) => {
+	return {
+		...theme("gradients"),
+		...Object.fromEntries(linearGradientDirectionMap.entries())
+	};
+};
+const gradientStops = "var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))";
+const gradientViaStops = "var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)";
+const backgroundGradients = {
+	backgroundGradient: {
+		shorthand: "bgGradient",
+		className: "bg-grad",
+		group: "Background Gradient",
+		values: linearGradientValues,
+		transform(value, { raw, token }) {
+			const tokenValue = token(`gradients.${raw}`);
+			if (tokenValue) return { backgroundImage: tokenValue };
+			if (!isGradientShortcut(raw)) return { backgroundImage: value };
+			return {
+				"--gradient-stops": gradientStops,
+				"--gradient-position": linearGradientDirectionMap.get(raw),
+				backgroundImage: `linear-gradient(var(--gradient-stops))`
+			};
+		}
+	},
+	backgroundLinear: {
+		shorthand: "bgLinear",
+		className: "bg-linear",
+		group: "Background Gradient",
+		values: linearGradientValues,
+		transform(value, { raw, token }) {
+			const tokenValue = token(`gradients.${raw}`);
+			if (tokenValue) return { backgroundImage: tokenValue };
+			if (!isGradientShortcut(raw)) return { backgroundImage: value };
+			return {
+				"--gradient-stops": gradientStops,
+				"--gradient-position": linearGradientDirectionMap.get(raw),
+				backgroundImage: `linear-gradient(var(--gradient-stops))`
+			};
+		}
+	},
+	backgroundRadial: {
+		shorthand: "bgRadial",
+		className: "bg-radial",
+		group: "Background Gradient",
+		values: "gradients",
+		transform(value, { raw, token }) {
+			const tokenValue = token(`gradients.${raw}`);
+			if (tokenValue) return { backgroundImage: tokenValue };
+			return {
+				"--gradient-stops": gradientStops,
+				"--gradient-position": value,
+				backgroundImage: `radial-gradient(var(--gradient-stops,${value}))`
+			};
+		}
+	},
+	backgroundConic: {
+		shorthand: "bgConic",
+		className: "bg-conic",
+		group: "Background Gradient",
+		transform(value) {
+			return {
+				"--gradient-stops": gradientStops,
+				"--gradient-position": value,
+				backgroundImage: `conic-gradient(var(--gradient-stops))`
+			};
+		}
+	},
+	textGradient: {
+		className: "txt-grad",
+		group: "Background Gradient",
+		values: linearGradientValues,
+		transform(value, { raw, token }) {
+			const tokenValue = token(`gradients.${raw}`);
+			if (tokenValue) return {
+				backgroundImage: tokenValue,
+				WebkitBackgroundClip: "text",
+				color: "transparent"
+			};
+			if (!isGradientShortcut(raw)) return {
+				backgroundImage: value,
+				WebkitBackgroundClip: "text",
+				color: "transparent"
+			};
+			return {
+				"--gradient-stops": gradientStops,
+				"--gradient-position": linearGradientDirectionMap.get(raw),
+				backgroundImage: `linear-gradient(var(--gradient-stops))`,
+				WebkitBackgroundClip: "text",
+				color: "transparent"
+			};
+		}
+	},
+	gradientFromPosition: {
+		className: "grad-from-pos",
+		group: "Background Gradient",
+		transform(value) {
+			return { "--gradient-from-position": value };
+		}
+	},
+	gradientToPosition: {
+		className: "grad-to-pos",
+		group: "Background Gradient",
+		transform(value) {
+			return { "--gradient-to-position": value };
+		}
+	},
+	gradientFrom: {
+		className: "grad-from",
+		values: "colors",
+		group: "Background Gradient",
+		transform: createColorMixTransform("--gradient-from")
+	},
+	gradientTo: {
+		className: "grad-to",
+		values: "colors",
+		group: "Background Gradient",
+		transform: createColorMixTransform("--gradient-to")
+	},
+	gradientVia: {
+		className: "grad-via",
+		values: "colors",
+		group: "Background Gradient",
+		transform(value, args) {
+			return {
+				...gradientVia(value, args),
+				"--gradient-stops": "var(--gradient-via-stops)",
+				"--gradient-via-stops": gradientViaStops
+			};
+		}
+	},
+	gradientViaPosition: {
+		className: "grad-via-pos",
+		group: "Background Gradient",
+		transform(value) {
+			return { "--gradient-via-position": value };
+		}
+	}
+};
+//#endregion
+//#region src/utilities/helpers.ts
+const srMapping = {
+	true: {
+		position: "absolute",
+		width: "1px",
+		height: "1px",
+		padding: "0",
+		margin: "-1px",
+		overflow: "hidden",
+		clip: "rect(0, 0, 0, 0)",
+		whiteSpace: "nowrap",
+		borderWidth: "0"
+	},
+	false: {
+		position: "static",
+		width: "auto",
+		height: "auto",
+		padding: "0",
+		margin: "0",
+		overflow: "visible",
+		clip: "auto",
+		whiteSpace: "normal"
+	}
+};
+const helpers = {
+	srOnly: {
+		className: "sr",
+		values: { type: "boolean" },
+		group: "Other",
+		transform(value) {
+			return srMapping[value] || {};
+		}
+	},
+	debug: {
+		className: "debug",
+		values: { type: "boolean" },
+		group: "Other",
+		transform(value) {
+			if (!value) return {};
+			return {
+				outline: "1px solid blue !important",
+				"&>*": { outline: "1px solid red !important" }
+			};
+		}
+	}
+};
+//#endregion
+//#region src/utilities/interactivity.ts
+const interactivity = {
+	accentColor: {
+		className: "ac-c",
+		values: "colors",
+		transform: createColorMixTransform("accentColor"),
+		group: "Color"
+	},
+	caretColor: {
+		className: "ca-c",
+		values: "colors",
+		group: "Color",
+		transform: createColorMixTransform("caretColor")
+	},
+	scrollBehavior: {
+		className: "scr-bhv",
+		group: "Scroll"
+	},
+	scrollbar: {
+		className: "scr-bar",
+		values: ["visible", "hidden"],
+		group: "Scroll",
+		transform(value) {
+			if (value === "visible") return {
+				msOverflowStyle: "auto",
+				scrollbarWidth: "auto",
+				"&::-webkit-scrollbar": { display: "block" }
+			};
+			if (value === "hidden") return {
+				msOverflowStyle: "none",
+				scrollbarWidth: "none",
+				"&::-webkit-scrollbar": { display: "none" }
+			};
+		}
+	},
+	scrollbarColor: {
+		className: "scr-bar-c",
+		values: "colors",
+		group: "Scroll",
+		transform: createColorMixTransform("scrollbarColor")
+	},
+	scrollbarGutter: {
+		className: "scr-bar-g",
+		group: "Scroll"
+	},
+	scrollbarWidth: {
+		className: "scr-bar-w",
+		values: "sizes",
+		group: "Scroll"
+	},
+	scrollMargin: {
+		className: "scr-m",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollMarginLeft: {
+		className: "scr-ml",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollMarginRight: {
+		className: "scr-mr",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollMarginTop: {
+		className: "scr-mt",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollMarginBottom: {
+		className: "scr-mb",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollMarginBlock: {
+		className: "scr-my",
+		values: "spacing",
+		group: "Scroll",
+		shorthand: ["scrollMarginY"]
+	},
+	scrollMarginBlockEnd: {
+		className: "scr-mbe",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollMarginBlockStart: {
+		className: "scr-mbt",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollMarginInline: {
+		className: "scr-mx",
+		values: "spacing",
+		group: "Scroll",
+		shorthand: ["scrollMarginX"]
+	},
+	scrollMarginInlineEnd: {
+		className: "scr-me",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollMarginInlineStart: {
+		className: "scr-ms",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollPadding: {
+		className: "scr-p",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollPaddingBlock: {
+		className: "scr-py",
+		values: "spacing",
+		group: "Scroll",
+		shorthand: ["scrollPaddingY"]
+	},
+	scrollPaddingBlockStart: {
+		className: "scr-pbs",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollPaddingBlockEnd: {
+		className: "scr-pbe",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollPaddingInline: {
+		className: "scr-px",
+		values: "spacing",
+		group: "Scroll",
+		shorthand: ["scrollPaddingX"]
+	},
+	scrollPaddingInlineEnd: {
+		className: "scr-pe",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollPaddingInlineStart: {
+		className: "scr-ps",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollPaddingLeft: {
+		className: "scr-pl",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollPaddingRight: {
+		className: "scr-pr",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollPaddingTop: {
+		className: "scr-pt",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollPaddingBottom: {
+		className: "scr-pb",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollSnapAlign: {
+		className: "scr-sa",
+		group: "Scroll"
+	},
+	scrollSnapStop: {
+		className: "scrs-s",
+		group: "Scroll"
+	},
+	scrollSnapType: {
+		className: "scrs-t",
+		group: "Scroll",
+		values: {
+			none: "none",
+			x: "x var(--scroll-snap-strictness)",
+			y: "y var(--scroll-snap-strictness)",
+			both: "both var(--scroll-snap-strictness)"
+		}
+	},
+	scrollSnapStrictness: {
+		className: "scrs-strt",
+		values: ["mandatory", "proximity"],
+		group: "Scroll",
+		transform(value) {
+			return { "--scroll-snap-strictness": value };
+		}
+	},
+	scrollSnapMargin: {
+		className: "scrs-m",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollSnapMarginTop: {
+		className: "scrs-mt",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollSnapMarginBottom: {
+		className: "scrs-mb",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollSnapMarginLeft: {
+		className: "scrs-ml",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollSnapMarginRight: {
+		className: "scrs-mr",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollSnapCoordinate: {
+		className: "scrs-c",
+		group: "Scroll"
+	},
+	scrollSnapDestination: {
+		className: "scrs-d",
+		group: "Scroll"
+	},
+	scrollSnapPointsX: {
+		className: "scrs-px",
+		group: "Scroll"
+	},
+	scrollSnapPointsY: {
+		className: "scrs-py",
+		group: "Scroll"
+	},
+	scrollSnapTypeX: {
+		className: "scrs-tx",
+		group: "Scroll"
+	},
+	scrollSnapTypeY: {
+		className: "scrs-ty",
+		group: "Scroll"
+	},
+	scrollTimeline: {
+		className: "scrtl",
+		group: "Scroll"
+	},
+	scrollTimelineAxis: {
+		className: "scrtl-a",
+		group: "Scroll"
+	},
+	scrollTimelineName: {
+		className: "scrtl-n",
+		group: "Scroll"
+	},
+	touchAction: {
+		className: "tch-a",
+		group: "Interactivity"
+	},
+	userSelect: {
+		className: "us",
+		group: "Interactivity",
+		transform(value) {
+			return {
+				WebkitUserSelect: value,
+				userSelect: value
+			};
+		}
+	},
+	overflow: {
+		className: "ov",
+		group: "Scroll"
+	},
+	overflowWrap: {
+		className: "ov-wrap",
+		group: "Scroll"
+	},
+	overflowX: {
+		className: "ov-x",
+		group: "Scroll"
+	},
+	overflowY: {
+		className: "ov-y",
+		group: "Scroll"
+	},
+	overflowAnchor: {
+		className: "ov-a",
+		group: "Scroll"
+	},
+	overflowBlock: {
+		className: "ov-b",
+		group: "Scroll"
+	},
+	overflowInline: {
+		className: "ov-i",
+		group: "Scroll"
+	},
+	overflowClipBox: {
+		className: "ovcp-bx",
+		group: "Scroll"
+	},
+	overflowClipMargin: {
+		className: "ovcp-m",
+		group: "Scroll"
+	},
+	overscrollBehavior: {
+		className: "ovs-b",
+		group: "Scroll"
+	},
+	overscrollBehaviorX: {
+		className: "ovs-bx",
+		group: "Scroll"
+	},
+	overscrollBehaviorY: {
+		className: "ovs-by",
+		group: "Scroll"
+	},
+	overscrollBehaviorBlock: {
+		className: "ovs-bb",
+		group: "Scroll"
+	},
+	overscrollBehaviorInline: {
+		className: "ovs-bi",
+		group: "Scroll"
+	}
+};
+//#endregion
+//#region src/utilities/layout.ts
+const layout = {
+	aspectRatio: {
+		className: "asp",
+		values: "aspectRatios",
+		group: "Layout"
+	},
+	boxDecorationBreak: {
+		className: "bx-db",
+		group: "Layout",
+		transform(value) {
+			return {
+				boxDecorationBreak: value,
+				WebkitBoxDecorationBreak: value
+			};
+		}
+	},
+	zIndex: {
+		className: "z",
+		values: "zIndex",
+		group: "Visibility"
+	},
+	boxSizing: {
+		className: "bx-s",
+		group: "System"
+	},
+	objectPosition: {
+		className: "obj-p",
+		group: "Layout"
+	},
+	objectFit: {
+		className: "obj-f",
+		group: "Layout"
+	},
+	overscrollBehavior: {
+		className: "ovscl",
+		group: "Scroll"
+	},
+	overscrollBehaviorX: {
+		className: "ovscl-x",
+		group: "Scroll"
+	},
+	overscrollBehaviorY: {
+		className: "ovscl-y",
+		group: "Scroll"
+	},
+	position: {
+		className: "pos",
+		shorthand: "pos",
+		group: "Position"
+	},
+	top: {
+		className: "top",
+		values: "spacing",
+		group: "Position"
+	},
+	left: {
+		className: "left",
+		values: "spacing",
+		group: "Position"
+	},
+	inset: {
+		className: "inset",
+		group: "Position",
+		values: (theme) => ({
+			auto: "auto",
+			...theme("spacing")
+		})
+	},
+	insetInline: {
+		className: "inset-x",
+		values: "spacing",
+		group: "Position",
+		shorthand: ["insetX"]
+	},
+	insetBlock: {
+		className: "inset-y",
+		values: "spacing",
+		group: "Position",
+		shorthand: ["insetY"]
+	},
+	insetBlockEnd: {
+		className: "inset-be",
+		values: "spacing",
+		group: "Position"
+	},
+	insetBlockStart: {
+		className: "inset-bs",
+		values: "spacing",
+		group: "Position"
+	},
+	insetInlineEnd: {
+		className: "inset-e",
+		values: "spacing",
+		group: "Position",
+		shorthand: ["insetEnd", "end"]
+	},
+	insetInlineStart: {
+		className: "inset-s",
+		values: "spacing",
+		group: "Position",
+		shorthand: ["insetStart", "start"]
+	},
+	right: {
+		className: "right",
+		values: "spacing",
+		group: "Position"
+	},
+	bottom: {
+		className: "bottom",
+		values: "spacing",
+		group: "Position"
+	},
+	float: {
+		className: "float",
+		values: ["start", "end"],
+		property: "float",
+		group: "Position",
+		transform(value) {
+			if (value === "start") return {
+				float: "left",
+				"[dir=\"rtl\"] &": { float: "right" }
+			};
+			if (value === "end") return {
+				float: "right",
+				"[dir=\"rtl\"] &": { float: "left" }
+			};
+			return { float: value };
+		}
+	},
+	visibility: {
+		className: "vis",
+		group: "Visibility"
+	}
+};
+//#endregion
+//#region src/utilities/list.ts
+const list = {
+	listStyleType: {
+		className: "li-t",
+		group: "List"
+	},
+	listStylePosition: {
+		className: "li-pos",
+		group: "List"
+	},
+	listStyleImage: {
+		className: "li-img",
+		group: "List",
+		values: "assets"
+	},
+	listStyle: {
+		className: "li-s",
+		group: "List"
+	}
+};
+//#endregion
+//#region src/utilities/outline.ts
+const outline = {
+	outlineWidth: {
+		className: "ring-w",
+		shorthand: "ringWidth",
+		values: "borderWidths",
+		group: "Border"
+	},
+	outlineColor: {
+		className: "ring-c",
+		values: "colors",
+		group: "Color",
+		shorthand: "ringColor",
+		transform: createColorMixTransform("outlineColor")
+	},
+	outline: {
+		className: "ring",
+		shorthand: "ring",
+		values: "borders",
+		group: "Border",
+		transform(value) {
+			if (value === "none") return {
+				outline: "2px solid transparent",
+				outlineOffset: "2px"
+			};
+			return { outline: value };
+		}
+	},
+	outlineOffset: {
+		className: "ring-o",
+		shorthand: "ringOffset",
+		values: "spacing",
+		group: "Border"
+	}
+};
+//#endregion
+//#region src/utilities/polyfill.ts
+const polyfill = {
+	appearance: {
+		className: "ap",
+		group: "Visibility",
+		transform(value) {
+			return {
+				appearance: value,
+				WebkitAppearance: value
+			};
+		}
+	},
+	backfaceVisibility: {
+		className: "bfv",
+		group: "Visibility",
+		transform(value) {
+			return {
+				backfaceVisibility: value,
+				WebkitBackfaceVisibility: value
+			};
+		}
+	},
+	clipPath: {
+		className: "cp-path",
+		group: "Other",
+		transform(value) {
+			return {
+				clipPath: value,
+				WebkitClipPath: value
+			};
+		}
+	},
+	hyphens: {
+		className: "hy",
+		group: "Other",
+		transform(value) {
+			return {
+				hyphens: value,
+				WebkitHyphens: value
+			};
+		}
+	},
+	mask: {
+		className: "msk",
+		group: "Other",
+		transform(value) {
+			return {
+				mask: value,
+				WebkitMask: value
+			};
+		}
+	},
+	maskImage: {
+		className: "msk-i",
+		group: "Other",
+		transform(value) {
+			return {
+				maskImage: value,
+				WebkitMaskImage: value
+			};
+		}
+	},
+	maskSize: {
+		className: "msk-s",
+		group: "Other",
+		transform(value) {
+			return {
+				maskSize: value,
+				WebkitMaskSize: value
+			};
+		}
+	},
+	textSizeAdjust: {
+		className: "txt-adj",
+		group: "Typography",
+		transform(value) {
+			return {
+				textSizeAdjust: value,
+				WebkitTextSizeAdjust: value
+			};
+		}
+	}
+};
+//#endregion
+//#region src/utilities/sizing.ts
+const widthValues = (theme) => ({
+	auto: "auto",
+	...theme("sizes"),
+	"1/2": "50%",
+	"1/3": "33.333333%",
+	"2/3": "66.666667%",
+	"1/4": "25%",
+	"2/4": "50%",
+	"3/4": "75%",
+	"1/5": "20%",
+	"2/5": "40%",
+	"3/5": "60%",
+	"4/5": "80%",
+	"1/6": "16.666667%",
+	"2/6": "33.333333%",
+	"3/6": "50%",
+	"4/6": "66.666667%",
+	"5/6": "83.333333%",
+	"1/12": "8.333333%",
+	"2/12": "16.666667%",
+	"3/12": "25%",
+	"4/12": "33.333333%",
+	"5/12": "41.666667%",
+	"6/12": "50%",
+	"7/12": "58.333333%",
+	"8/12": "66.666667%",
+	"9/12": "75%",
+	"10/12": "83.333333%",
+	"11/12": "91.666667%",
+	screen: "100vw"
+});
+const heightValues = (theme) => ({
+	auto: "auto",
+	...theme("sizes"),
+	svh: "100svh",
+	lvh: "100lvh",
+	dvh: "100dvh",
+	screen: "100vh",
+	"1/2": "50%",
+	"1/3": "33.333333%",
+	"2/3": "66.666667%",
+	"1/4": "25%",
+	"2/4": "50%",
+	"3/4": "75%",
+	"1/5": "20%",
+	"2/5": "40%",
+	"3/5": "60%",
+	"4/5": "80%",
+	"1/6": "16.666667%",
+	"2/6": "33.333333%",
+	"3/6": "50%",
+	"4/6": "66.666667%",
+	"5/6": "83.333333%"
+});
+const sizing = {
+	width: {
+		shorthand: "w",
+		className: "w",
+		group: "Width",
+		values: widthValues
+	},
+	inlineSize: {
+		className: "w-is",
+		group: "Width",
+		values: widthValues
+	},
+	minWidth: {
+		shorthand: "minW",
+		className: "min-w",
+		group: "Width",
+		values: widthValues
+	},
+	minInlineSize: {
+		className: "min-w-is",
+		group: "Width",
+		values: widthValues
+	},
+	maxWidth: {
+		shorthand: "maxW",
+		className: "max-w",
+		group: "Width",
+		values: widthValues
+	},
+	maxInlineSize: {
+		className: "max-w-is",
+		group: "Width",
+		values: widthValues
+	},
+	height: {
+		shorthand: "h",
+		className: "h",
+		group: "Height",
+		values: heightValues
+	},
+	blockSize: {
+		className: "h-bs",
+		group: "Height",
+		values: heightValues
+	},
+	minHeight: {
+		shorthand: "minH",
+		className: "min-h",
+		group: "Height",
+		values: heightValues
+	},
+	minBlockSize: {
+		className: "min-h-bs",
+		group: "Height",
+		values: heightValues
+	},
+	maxHeight: {
+		shorthand: "maxH",
+		className: "max-h",
+		group: "Height",
+		values: heightValues
+	},
+	maxBlockSize: {
+		className: "max-b",
+		group: "Height",
+		values: heightValues
+	},
+	boxSize: {
+		className: "size",
+		group: "Width",
+		values: widthValues,
+		transform(value) {
+			return {
+				width: value,
+				height: value
+			};
+		}
+	}
+};
+//#endregion
+//#region src/utilities/spacing.ts
+const marginValues = (theme) => ({
+	auto: "auto",
+	...theme("spacing")
+});
+const spacing = {
+	padding: {
+		className: "p",
+		shorthand: "p",
+		values: "spacing",
+		group: "Padding"
+	},
+	paddingLeft: {
+		className: "pl",
+		shorthand: "pl",
+		values: "spacing",
+		group: "Padding"
+	},
+	paddingRight: {
+		className: "pr",
+		shorthand: "pr",
+		values: "spacing",
+		group: "Padding"
+	},
+	paddingTop: {
+		className: "pt",
+		shorthand: "pt",
+		values: "spacing",
+		group: "Padding"
+	},
+	paddingBottom: {
+		className: "pb",
+		shorthand: "pb",
+		values: "spacing",
+		group: "Padding"
+	},
+	paddingBlock: {
+		className: "py",
+		values: "spacing",
+		group: "Padding",
+		shorthand: ["py", "paddingY"]
+	},
+	paddingBlockEnd: {
+		className: "pbe",
+		values: "spacing",
+		group: "Padding"
+	},
+	paddingBlockStart: {
+		className: "pbs",
+		values: "spacing",
+		group: "Padding"
+	},
+	paddingInline: {
+		className: "px",
+		values: "spacing",
+		group: "Padding",
+		shorthand: ["paddingX", "px"]
+	},
+	paddingInlineEnd: {
+		className: "pe",
+		shorthand: ["pe", "paddingEnd"],
+		values: "spacing",
+		group: "Padding"
+	},
+	paddingInlineStart: {
+		className: "ps",
+		shorthand: ["ps", "paddingStart"],
+		values: "spacing",
+		group: "Padding"
+	},
+	marginLeft: {
+		className: "ml",
+		shorthand: "ml",
+		values: marginValues,
+		group: "Margin"
+	},
+	marginRight: {
+		className: "mr",
+		shorthand: "mr",
+		values: marginValues,
+		group: "Margin"
+	},
+	marginTop: {
+		className: "mt",
+		shorthand: "mt",
+		values: marginValues,
+		group: "Margin"
+	},
+	marginBottom: {
+		className: "mb",
+		shorthand: "mb",
+		values: marginValues,
+		group: "Margin"
+	},
+	margin: {
+		className: "m",
+		shorthand: "m",
+		values: marginValues,
+		group: "Margin"
+	},
+	marginBlock: {
+		className: "my",
+		values: marginValues,
+		group: "Margin",
+		shorthand: ["my", "marginY"]
+	},
+	marginBlockEnd: {
+		className: "mbe",
+		values: marginValues,
+		group: "Margin"
+	},
+	marginBlockStart: {
+		className: "mbs",
+		values: marginValues,
+		group: "Margin"
+	},
+	marginInline: {
+		className: "mx",
+		values: marginValues,
+		group: "Margin",
+		shorthand: ["mx", "marginX"]
+	},
+	marginInlineEnd: {
+		className: "me",
+		shorthand: ["me", "marginEnd"],
+		values: marginValues,
+		group: "Margin"
+	},
+	marginInlineStart: {
+		className: "ms",
+		shorthand: ["ms", "marginStart"],
+		values: marginValues,
+		group: "Margin"
+	},
+	spaceX: {
+		className: "sx",
+		values: marginValues,
+		property: "marginInlineStart",
+		group: "Margin",
+		transform(value) {
+			return { "& > :not([hidden]) ~ :not([hidden])": {
+				marginInlineStart: value,
+				marginInlineEnd: "0px"
+			} };
+		}
+	},
+	spaceY: {
+		className: "sy",
+		values: marginValues,
+		property: "marginBlockStart",
+		group: "Margin",
+		transform(value) {
+			return { "& > :not([hidden]) ~ :not([hidden])": {
+				marginTop: value,
+				marginBottom: "0px"
+			} };
+		}
+	}
+};
+//#endregion
+//#region src/utilities/svg.ts
+const svg = {
+	fill: {
+		className: "fill",
+		values: "colors",
+		group: "Color",
+		transform: createColorMixTransform("fill")
+	},
+	stroke: {
+		className: "stk",
+		values: "colors",
+		group: "Color",
+		transform: createColorMixTransform("stroke")
+	},
+	strokeWidth: {
+		className: "stk-w",
+		values: "borderWidths",
+		group: "Border"
+	},
+	strokeDasharray: {
+		className: "stk-dsh",
+		group: "Border"
+	},
+	strokeDashoffset: {
+		className: "stk-do",
+		group: "Border"
+	},
+	strokeLinecap: {
+		className: "stk-lc",
+		group: "Border"
+	},
+	strokeLinejoin: {
+		className: "stk-lj",
+		group: "Border"
+	},
+	strokeMiterlimit: {
+		className: "stk-ml",
+		group: "Border"
+	},
+	strokeOpacity: {
+		className: "stk-op",
+		group: "Border"
+	}
+};
+//#endregion
+//#region src/utilities/tables.ts
+const tables = {
+	borderCollapse: {
+		className: "bd-cl",
+		group: "Table"
+	},
+	borderSpacing: {
+		className: "bd-sp",
+		group: "Table",
+		values(theme) {
+			return {
+				...theme("spacing"),
+				auto: "var(--border-spacing-x) var(--border-spacing-y)"
+			};
+		}
+	},
+	borderSpacingX: {
+		className: "bd-sx",
+		values: "spacing",
+		group: "Table",
+		transform(value) {
+			return { "--border-spacing-x": value };
+		}
+	},
+	borderSpacingY: {
+		className: "bd-sy",
+		values: "spacing",
+		group: "Table",
+		transform(value) {
+			return { "--border-spacing-y": value };
+		}
+	},
+	tableLayout: {
+		className: "tbl",
+		group: "Table"
+	}
+};
+//#endregion
+//#region src/utilities/transforms.ts
+const positiveFractions = {
+	"1/2": "50%",
+	"1/3": "33.333333%",
+	"2/3": "66.666667%",
+	"1/4": "25%",
+	"2/4": "50%",
+	"3/4": "75%",
+	full: "100%"
+};
+const negativeFractions = Object.fromEntries(Object.entries(positiveFractions).map(([key, value]) => [`-${key}`, `-${value}`]));
+const fractions = {
+	...positiveFractions,
+	...negativeFractions
+};
+const transforms = {
+	transformOrigin: {
+		className: "trf-o",
+		group: "Transform"
+	},
+	transformBox: {
+		className: "trf-b",
+		group: "Transform"
+	},
+	transformStyle: {
+		className: "trf-s",
+		group: "Transform"
+	},
+	transform: {
+		className: "trf",
+		group: "Transform"
+	},
+	rotate: {
+		className: "rotate",
+		group: "Transform",
+		property: "rotate",
+		values: {
+			auto: "var(--rotate-x) var(--rotate-y)",
+			"auto-3d": "var(--rotate-x) var(--rotate-y) var(--rotate-z)"
+		}
+	},
+	rotateX: {
+		className: "rotate-x",
+		group: "Transform",
+		property: "rotate",
+		transform(value) {
+			return { "--rotate-x": value };
+		}
+	},
+	rotateY: {
+		className: "rotate-y",
+		group: "Transform",
+		property: "rotate",
+		transform(value) {
+			return { "--rotate-y": value };
+		}
+	},
+	rotateZ: {
+		className: "rotate-z",
+		group: "Transform",
+		property: "rotate",
+		transform(value) {
+			return { "--rotate-z": value };
+		}
+	},
+	scale: {
+		className: "scale",
+		group: "Transform",
+		property: "scale",
+		values: { auto: "var(--scale-x) var(--scale-y)" }
+	},
+	scaleX: {
+		className: "scale-x",
+		group: "Transform",
+		transform(value) {
+			return { "--scale-x": value };
+		}
+	},
+	scaleY: {
+		className: "scale-y",
+		group: "Transform",
+		transform(value) {
+			return { "--scale-y": value };
+		}
+	},
+	translate: {
+		className: "translate",
+		group: "Transform",
+		property: "translate",
+		values: {
+			auto: "var(--translate-x) var(--translate-y)",
+			"auto-3d": "var(--translate-x) var(--translate-y) var(--translate-z)"
+		}
+	},
+	translateX: {
+		shorthand: "x",
+		className: "translate-x",
+		group: "Transform",
+		values(theme) {
+			return {
+				...theme("spacing"),
+				...fractions
+			};
+		},
+		transform(value) {
+			return { "--translate-x": value };
+		}
+	},
+	translateY: {
+		shorthand: "y",
+		className: "translate-y",
+		group: "Transform",
+		values(theme) {
+			return {
+				...theme("spacing"),
+				...fractions
+			};
+		},
+		transform(value) {
+			return { "--translate-y": value };
+		}
+	},
+	translateZ: {
+		shorthand: "z",
+		className: "translate-z",
+		group: "Transform",
+		values(theme) {
+			return {
+				...theme("spacing"),
+				...fractions
+			};
+		},
+		transform(value) {
+			return { "--translate-z": value };
+		}
+	}
+};
+//#endregion
+//#region src/utilities/transitions.ts
+const createTransition = (value) => ({
+	transitionProperty: `var(--transition-prop, ${value})`,
+	transitionTimingFunction: "var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1))",
+	transitionDuration: "var(--transition-duration, 150ms)"
+});
+const transitionMap = {
+	all: createTransition("all"),
+	common: createTransition("color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter"),
+	size: createTransition("width, height, min-width, max-width, min-height, max-height"),
+	position: createTransition("left, right, top, bottom, inset, inset-inline, inset-block"),
+	background: createTransition("background, background-color, background-image, background-position"),
+	colors: createTransition("color, background-color, border-color, outline-color, text-decoration-color, fill, stroke"),
+	opacity: createTransition("opacity"),
+	shadow: createTransition("box-shadow"),
+	transform: createTransition("transform")
+};
+const transitions = {
+	transitionTimingFunction: {
+		className: "trs-tmf",
+		values: "easings",
+		group: "Transition",
+		transform(value) {
+			return {
+				"--transition-easing": value,
+				transitionTimingFunction: value
+			};
+		}
+	},
+	transitionDelay: {
+		className: "trs-dly",
+		values: "durations",
+		group: "Transition"
+	},
+	transitionDuration: {
+		className: "trs-dur",
+		values: "durations",
+		group: "Transition",
+		transform(value) {
+			return {
+				"--transition-duration": value,
+				transitionDuration: value
+			};
+		}
+	},
+	transitionProperty: {
+		className: "trs-prop",
+		group: "Transition",
+		values: {
+			common: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+			colors: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke",
+			size: "width, height, min-width, max-width, min-height, max-height",
+			position: "left, right, top, bottom, inset, inset-inline, inset-block",
+			background: "background, background-color, background-image, background-position"
+		},
+		transform(value) {
+			return {
+				"--transition-prop": value,
+				transitionProperty: value
+			};
+		}
+	},
+	transition: {
+		className: "trs",
+		values: Object.keys(transitionMap),
+		group: "Transition",
+		transform(value) {
+			return transitionMap[value] ?? { transition: value };
+		}
+	},
+	animation: {
+		className: "anim",
+		values: "animations",
+		group: "Animation"
+	},
+	animationName: {
+		className: "anim-n",
+		values: "keyframes",
+		group: "Animation"
+	},
+	animationTimingFunction: {
+		className: "anim-tmf",
+		values: "easings",
+		group: "Animation"
+	},
+	animationDuration: {
+		className: "anim-dur",
+		values: "durations",
+		group: "Animation"
+	},
+	animationDelay: {
+		className: "anim-dly",
+		values: "durations",
+		group: "Animation"
+	},
+	animationPlayState: {
+		className: "anim-ps",
+		group: "Animation"
+	},
+	animationComposition: {
+		className: "anim-comp",
+		group: "Animation"
+	},
+	animationFillMode: {
+		className: "anim-fm",
+		group: "Animation"
+	},
+	animationDirection: {
+		className: "anim-dir",
+		group: "Animation"
+	},
+	animationIterationCount: {
+		className: "anim-ic",
+		group: "Animation"
+	},
+	animationRange: {
+		className: "anim-r",
+		group: "Animation"
+	},
+	animationState: {
+		className: "anim-s",
+		group: "Animation"
+	},
+	animationRangeStart: {
+		className: "anim-rs",
+		group: "Animation"
+	},
+	animationRangeEnd: {
+		className: "anim-re",
+		group: "Animation"
+	},
+	animationTimeline: {
+		className: "anim-tl",
+		group: "Animation"
+	}
+};
+//#endregion
+//#region src/utilities/typography.ts
+const typography = {
+	color: {
+		className: "c",
+		values: "colors",
+		group: "Color",
+		transform: createColorMixTransform("color")
+	},
+	fontFamily: {
+		className: "ff",
+		values: "fonts",
+		group: "Typography"
+	},
+	fontSize: {
+		className: "fs",
+		values: "fontSizes",
+		group: "Typography"
+	},
+	fontSizeAdjust: {
+		className: "fs-a",
+		group: "Typography"
+	},
+	fontPalette: {
+		className: "fp",
+		group: "Typography"
+	},
+	fontKerning: {
+		className: "fk",
+		group: "Typography"
+	},
+	fontFeatureSettings: {
+		className: "ff-s",
+		group: "Typography"
+	},
+	fontWeight: {
+		className: "fw",
+		values: "fontWeights",
+		group: "Typography"
+	},
+	fontSmoothing: {
+		className: "fsmt",
+		group: "Typography",
+		values: {
+			antialiased: "antialiased",
+			"subpixel-antialiased": "auto"
+		},
+		transform(value) {
+			return { WebkitFontSmoothing: value };
+		}
+	},
+	fontVariant: {
+		className: "fv",
+		group: "Typography"
+	},
+	fontVariantAlternates: {
+		className: "fv-alt",
+		group: "Typography"
+	},
+	fontVariantCaps: {
+		className: "fv-caps",
+		group: "Typography"
+	},
+	fontVariationSettings: {
+		className: "fv-s",
+		group: "Typography"
+	},
+	fontVariantNumeric: {
+		className: "fv-num",
+		group: "Typography"
+	},
+	letterSpacing: {
+		className: "ls",
+		values: "letterSpacings",
+		group: "Typography"
+	},
+	lineHeight: {
+		className: "lh",
+		values: "lineHeights",
+		group: "Typography"
+	},
+	textAlign: {
+		className: "ta",
+		group: "Typography"
+	},
+	textDecoration: {
+		className: "td",
+		group: "Typography"
+	},
+	textDecorationColor: {
+		className: "td-c",
+		values: "colors",
+		transform: createColorMixTransform("textDecorationColor"),
+		group: "Typography"
+	},
+	textEmphasisColor: {
+		className: "te-c",
+		values: "colors",
+		transform: createColorMixTransform("textEmphasisColor"),
+		group: "Typography"
+	},
+	textDecorationStyle: {
+		className: "td-s",
+		group: "Typography"
+	},
+	textDecorationThickness: {
+		className: "td-t",
+		group: "Typography"
+	},
+	textUnderlineOffset: {
+		className: "tu-o",
+		group: "Typography"
+	},
+	textTransform: {
+		className: "tt",
+		group: "Typography"
+	},
+	textIndent: {
+		className: "ti",
+		group: "Typography",
+		values: "spacing"
+	},
+	textShadow: {
+		className: "tsh",
+		values: "shadows",
+		group: "Typography"
+	},
+	textShadowColor: {
+		shorthand: "textShadowColor",
+		className: "tsh-c",
+		values: "colors",
+		transform: createColorMixTransform("--text-shadow-color"),
+		group: "Typography"
+	},
+	WebkitTextFillColor: {
+		className: "wktf-c",
+		values: "colors",
+		transform: createColorMixTransform("WebkitTextFillColor"),
+		group: "Typography"
+	},
+	textOverflow: {
+		className: "tov",
+		group: "Typography"
+	},
+	verticalAlign: {
+		className: "va",
+		group: "Typography"
+	},
+	wordBreak: {
+		className: "wb",
+		group: "Typography"
+	},
+	textWrap: {
+		className: "tw",
+		values: [
+			"wrap",
+			"balance",
+			"nowrap"
+		],
+		group: "Typography",
+		transform(value) {
+			return { textWrap: value };
+		}
+	},
+	truncate: {
+		className: "trunc",
+		values: { type: "boolean" },
+		group: "Typography",
+		transform(value) {
+			if (!value) return {};
+			return {
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			};
+		}
+	},
+	lineClamp: {
+		className: "lc",
+		group: "Typography",
+		transform(value) {
+			if (value === "none") return { WebkitLineClamp: "unset" };
+			return {
+				overflow: "hidden",
+				display: "-webkit-box",
+				WebkitLineClamp: value,
+				WebkitBoxOrient: "vertical"
+			};
+		}
+	}
+};
+//#endregion
+//#region src/utilities/index.ts
+const utilities = Object.assign({}, layout, display, flexGrid, spacing, outline, focusRing, divide, sizing, typography, list, background, backgroundGradients, border, effects, tables, transitions, transforms, interactivity, svg, helpers, polyfill, container, cursor);
+//#endregion
+//#region src/index.ts
+const definePreset = (preset) => preset;
+const preset = definePreset({
+	name: "@bamboocss/preset-base",
+	conditions,
+	utilities,
+	patterns,
+	globalCss
+});
+//#endregion
+exports.default = preset;
+exports.preset = preset;