Fix styled-components related performance issues

[kumar303]

There are still some cases where skeleton-kit references theme props in styles. We should make sure that for all of those cases, we return inline styles, such as this:

skeleton-kit/src/OpacityPulse.tsx

Lines 29 to 51 in c27e900

	const OpacityPulse = styled.span.attrs((props): { style: CSSProperties } => {
	const max = props.theme.skeletonKit.loopDurationMaxSec;
	const min = props.theme.skeletonKit.loopDurationMinSec;
	const range = max - min;
	if (range < 0) {
	throw new Error(
	`loopDurationMinSec (${min}) cannot be greater than loopDurationMax (${max})`
	);
	}
	const animationDuration = `${Math.random() * range + min}s`;
	return {
	style: {
	animationDuration,
	},
	};
	})`
	animation: ${pulseOpacity} infinite cubic-bezier(0.65, 0.05, 0.36, 1);
	@media (prefers-reduced-motion: reduce) {
	animation: none;
	}
	`;

Otherwise, styled-components will create new classes for the entire matrix of all possibilities (I think?). This was causing a warning for randomized values, which was the main problem up above in OpacityPulse.