@yamada-ui/react/dist/esm/core/css/styles.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { pipe } from "./utils.js";
import { transforms } from "./config.js";

//#region src/core/css/styles.ts
const standardStyles = {
	accentColor: {
		properties: ["accentColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	alignContent: true,
	alignItems: true,
	alignmentBaseline: true,
	alignSelf: true,
	all: true,
	anchorName: true,
	anchorScope: true,
	animation: {
		properties: ["animation"],
		token: "animations",
		transform: pipe(transforms.token("animations"), transforms.animation)
	},
	animationComposition: true,
	animationDelay: true,
	animationDirection: true,
	animationDuration: {
		properties: ["animationDuration"],
		token: "durations",
		transform: transforms.token("durations")
	},
	animationFillMode: true,
	animationIterationCount: true,
	animationName: {
		properties: ["animationName"],
		token: "keyframes",
		transform: transforms.token("keyframes")
	},
	animationPlayState: true,
	animationRange: true,
	animationRangeEnd: true,
	animationRangeStart: true,
	animationTimeline: true,
	animationTimingFunction: {
		properties: ["animationTimingFunction"],
		token: "easings",
		transform: transforms.token("easings")
	},
	appearance: true,
	aspectRatio: {
		properties: ["aspectRatio"],
		token: "aspectRatios",
		transform: transforms.token("aspectRatios")
	},
	backdropBlur: {
		properties: ["--backdrop-blur"],
		token: "blurs",
		transform: pipe(transforms.token("blurs"), transforms.function("blur"), transforms.filter("backdropFilter"))
	},
	backdropBrightness: {
		properties: ["--backdrop-brightness"],
		transform: pipe(transforms.function("brightness"), transforms.filter("backdropFilter"))
	},
	backdropContrast: {
		properties: ["--backdrop-contrast"],
		transform: pipe(transforms.function("contrast"), transforms.filter("backdropFilter"))
	},
	backdropDropShadow: {
		properties: ["--backdrop-drop-shadow"],
		token: "shadows",
		transform: pipe(transforms.token("shadows"), transforms.function("drop-shadow"), transforms.filter("backdropFilter"))
	},
	backdropFilter: true,
	backdropGrayscale: {
		properties: ["--backdrop-grayscale"],
		transform: pipe(transforms.function("grayscale"), transforms.filter("backdropFilter"))
	},
	backdropHueRotate: {
		properties: ["--backdrop-hue-rotate"],
		transform: pipe(transforms.deg, transforms.function("hue-rotate"), transforms.filter("backdropFilter"))
	},
	backdropInvert: {
		properties: ["--backdrop-invert"],
		transform: pipe(transforms.function("invert"), transforms.filter("backdropFilter"))
	},
	backdropSaturate: {
		properties: ["--backdrop-saturate"],
		transform: pipe(transforms.function("saturate"), transforms.filter("backdropFilter"))
	},
	backdropSepia: {
		properties: ["--backdrop-sepia"],
		transform: pipe(transforms.function("sepia"), transforms.filter("backdropFilter"))
	},
	backfaceVisibility: {
		properties: ["backfaceVisibility"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	background: {
		properties: ["background"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	backgroundAttachment: true,
	backgroundBlendMode: true,
	backgroundClip: {
		properties: ["backgroundClip"],
		transform: transforms.bgClip
	},
	backgroundColor: {
		properties: ["backgroundColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	backgroundImage: {
		properties: ["backgroundImage"],
		token: "gradients",
		transform: pipe(transforms.token("gradients"), transforms.gradient)
	},
	backgroundOrigin: true,
	backgroundPosition: true,
	backgroundPositionX: true,
	backgroundPositionY: true,
	backgroundRepeat: true,
	backgroundRepeatX: true,
	backgroundRepeatY: true,
	backgroundSize: true,
	baselineShift: true,
	baselineSource: true,
	blockSize: {
		properties: ["blockSize"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	blur: {
		properties: ["--blur"],
		token: "blurs",
		transform: pipe(transforms.token("blurs"), transforms.function("blur"), transforms.filter())
	},
	border: {
		properties: ["border"],
		token: "borders",
		transform: pipe(transforms.token("borders"), transforms.px)
	},
	borderBlock: {
		properties: ["borderBlock"],
		token: "borders",
		transform: pipe(transforms.token("borders"), transforms.px)
	},
	borderBlockColor: {
		properties: ["borderBlockColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	borderBlockEnd: {
		properties: ["borderBlockEnd"],
		token: "borders",
		transform: pipe(transforms.token("borders"), transforms.px)
	},
	borderBlockEndColor: {
		properties: ["borderBlockEndColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	borderBlockEndStyle: true,
	borderBlockEndWidth: {
		properties: ["borderBlockEndWidth"],
		transform: transforms.px
	},
	borderBlockStart: {
		properties: ["borderBlockStart"],
		token: "borders",
		transform: pipe(transforms.token("borders"), transforms.px)
	},
	borderBlockStartColor: {
		properties: ["borderBlockStartColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	borderBlockStartStyle: true,
	borderBlockStartWidth: {
		properties: ["borderBlockStartWidth"],
		transform: transforms.px
	},
	borderBlockStyle: true,
	borderBlockWidth: {
		properties: ["borderBlockWidth"],
		transform: transforms.px
	},
	borderBottom: {
		properties: ["borderBottom"],
		token: "borders",
		transform: pipe(transforms.token("borders"), transforms.px)
	},
	borderBottomColor: {
		properties: ["borderBottomColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	borderBottomLeftRadius: {
		properties: ["borderBottomLeftRadius"],
		token: "radii",
		transform: pipe(transforms.token("radii"), transforms.px, transforms.calc("radii"))
	},
	borderBottomRadius: {
		properties: ["borderBottomLeftRadius", "borderBottomRightRadius"],
		token: "radii",
		transform: pipe(transforms.token("radii"), transforms.px, transforms.calc("radii"))
	},
	borderBottomRightRadius: {
		properties: ["borderBottomRightRadius"],
		token: "radii",
		transform: pipe(transforms.token("radii"), transforms.px, transforms.calc("radii"))
	},
	borderBottomStyle: true,
	borderBottomWidth: {
		properties: ["borderBottomWidth"],
		transform: transforms.px
	},
	borderCollapse: true,
	borderColor: {
		properties: ["borderColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	borderEndEndRadius: {
		properties: ["borderEndEndRadius"],
		token: "radii",
		transform: pipe(transforms.token("radii"), transforms.px, transforms.calc("radii"))
	},
	borderEndStartRadius: {
		properties: ["borderEndStartRadius"],
		token: "radii",
		transform: pipe(transforms.token("radii"), transforms.px, transforms.calc("radii"))
	},
	borderImage: {
		properties: ["borderImage"],
		token: "borders",
		transform: pipe(transforms.token("borders"), transforms.px)
	},
	borderImageOutset: true,
	borderImageRepeat: true,
	borderImageSlice: true,
	borderImageSource: {
		properties: ["borderImageSource"],
		token: "gradients",
		transform: pipe(transforms.token("gradients"), transforms.gradient)
	},
	borderImageWidth: {
		properties: ["borderImageWidth"],
		transform: transforms.px
	},
	borderInline: {
		properties: ["borderInline"],
		token: "borders",
		transform: pipe(transforms.token("borders"), transforms.px)
	},
	borderInlineColor: {
		properties: ["borderInlineColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	borderInlineEnd: {
		properties: ["borderInlineEnd"],
		token: "borders",
		transform: pipe(transforms.token("borders"), transforms.px)
	},
	borderInlineEndColor: {
		properties: ["borderInlineEndColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	borderInlineEndRadius: {
		properties: ["borderEndStartRadius", "borderEndEndRadius"],
		token: "radii",
		transform: pipe(transforms.token("radii"), transforms.px, transforms.calc("radii"))
	},
	borderInlineEndStyle: true,
	borderInlineEndWidth: {
		properties: ["borderInlineEndWidth"],
		transform: transforms.px
	},
	borderInlineStart: {
		properties: ["borderInlineStart"],
		token: "borders",
		transform: pipe(transforms.token("borders"), transforms.px)
	},
	borderInlineStartColor: {
		properties: ["borderInlineStartColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	borderInlineStartRadius: {
		properties: ["borderStartStartRadius", "borderStartEndRadius"],
		token: "radii",
		transform: pipe(transforms.token("radii"), transforms.px, transforms.calc("radii"))
	},
	borderInlineStartStyle: true,
	borderInlineStartWidth: {
		properties: ["borderInlineStartWidth"],
		transform: transforms.px
	},
	borderInlineStyle: true,
	borderInlineWidth: {
		properties: ["borderInlineWidth"],
		transform: transforms.px
	},
	borderLeft: {
		properties: ["borderLeft"],
		token: "borders",
		transform: pipe(transforms.token("borders"), transforms.px)
	},
	borderLeftColor: {
		properties: ["borderLeftColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	borderLeftRadius: {
		properties: ["borderTopLeftRadius", "borderBottomLeftRadius"],
		token: "radii",
		transform: pipe(transforms.token("radii"), transforms.px, transforms.calc("radii"))
	},
	borderLeftStyle: true,
	borderLeftWidth: {
		properties: ["borderLeftWidth"],
		transform: transforms.px
	},
	borderRadius: {
		properties: ["borderRadius"],
		token: "radii",
		transform: pipe(transforms.token("radii"), transforms.px, transforms.calc("radii"))
	},
	borderRight: {
		properties: ["borderRight"],
		token: "borders",
		transform: pipe(transforms.token("borders"), transforms.px)
	},
	borderRightColor: {
		properties: ["borderRightColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	borderRightRadius: {
		properties: ["borderTopRightRadius", "borderBottomRightRadius"],
		token: "radii",
		transform: pipe(transforms.token("radii"), transforms.px, transforms.calc("radii"))
	},
	borderRightStyle: true,
	borderRightWidth: {
		properties: ["borderRightWidth"],
		transform: transforms.px
	},
	borderSpacing: true,
	borderStartEndRadius: {
		properties: ["borderStartEndRadius"],
		token: "radii",
		transform: pipe(transforms.token("radii"), transforms.px, transforms.calc("radii"))
	},
	borderStartStartRadius: {
		properties: ["borderStartStartRadius"],
		token: "radii",
		transform: pipe(transforms.token("radii"), transforms.px, transforms.calc("radii"))
	},
	borderStyle: true,
	borderTop: {
		properties: ["borderTop"],
		token: "borders",
		transform: pipe(transforms.token("borders"), transforms.px)
	},
	borderTopColor: {
		properties: ["borderTopColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	borderTopLeftRadius: {
		properties: ["borderTopLeftRadius"],
		token: "radii",
		transform: pipe(transforms.token("radii"), transforms.px, transforms.calc("radii"))
	},
	borderTopRadius: {
		properties: ["borderTopLeftRadius", "borderTopRightRadius"],
		token: "radii",
		transform: pipe(transforms.token("radii"), transforms.px, transforms.calc("radii"))
	},
	borderTopRightRadius: {
		properties: ["borderTopRightRadius"],
		token: "radii",
		transform: pipe(transforms.token("radii"), transforms.px, transforms.calc("radii"))
	},
	borderTopStyle: true,
	borderTopWidth: {
		properties: ["borderTopWidth"],
		transform: transforms.px
	},
	borderWidth: {
		properties: ["borderWidth"],
		transform: transforms.px
	},
	borderX: {
		properties: ["borderLeft", "borderRight"],
		token: "borders",
		transform: pipe(transforms.token("borders"), transforms.px)
	},
	borderY: {
		properties: ["borderTop", "borderBottom"],
		token: "borders",
		transform: pipe(transforms.token("borders"), transforms.px)
	},
	bottom: {
		properties: ["bottom"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	boxAlign: true,
	boxDecorationBreak: true,
	boxDirection: true,
	boxFlex: true,
	boxFlexGroup: true,
	boxLines: true,
	boxOrdinalGroup: true,
	boxOrient: true,
	boxPack: true,
	boxShadow: {
		properties: ["boxShadow"],
		token: "shadows",
		transform: transforms.token("shadows")
	},
	boxSize: {
		properties: ["width", "height"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	boxSizing: true,
	breakAfter: true,
	breakBefore: true,
	breakInside: true,
	brightness: {
		properties: ["--brightness"],
		transform: pipe(transforms.function("brightness"), transforms.filter())
	},
	captionSide: true,
	caretAnimation: true,
	caretColor: {
		properties: ["caretColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	caretShape: true,
	clear: true,
	clip: true,
	clipPath: true,
	clipRule: true,
	color: {
		properties: ["color"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	colorAdjust: true,
	colorInterpolation: true,
	colorInterpolationFilters: true,
	colorMode: { properties: ["colorScheme"] },
	columnCount: true,
	columnFill: true,
	columnGap: {
		properties: ["columnGap"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	columnRule: {
		properties: ["columnRule"],
		transform: transforms.px
	},
	columnRuleColor: {
		properties: ["columnRuleColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	columnRuleStyle: true,
	columnRuleWidth: {
		properties: ["columnRuleWidth"],
		transform: transforms.px
	},
	columns: true,
	columnSpan: true,
	columnWidth: {
		properties: ["columnWidth"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	contain: true,
	container: true,
	containerName: true,
	containerType: true,
	containIntrinsicBlockSize: true,
	containIntrinsicHeight: true,
	containIntrinsicInlineSize: true,
	containIntrinsicSize: true,
	containIntrinsicWidth: {
		properties: ["containIntrinsicWidth"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	content: true,
	contentVisibility: true,
	contrast: {
		properties: ["--contrast"],
		transform: pipe(transforms.function("contrast"), transforms.filter())
	},
	cornerBlockEndShape: true,
	cornerBlockStartShape: true,
	cornerBottomLeftShape: true,
	cornerBottomRightShape: true,
	cornerBottomShape: true,
	cornerEndEndShape: true,
	cornerEndStartShape: true,
	cornerInlineEndShape: true,
	cornerInlineStartShape: true,
	cornerLeftShape: true,
	cornerRightShape: true,
	cornerShape: true,
	cornerStartEndShape: true,
	cornerStartStartShape: true,
	cornerTopLeftShape: true,
	cornerTopRightShape: true,
	cornerTopShape: true,
	counterIncrement: true,
	counterReset: true,
	counterSet: true,
	cursor: true,
	cx: true,
	cy: true,
	d: true,
	direction: true,
	display: { transform: transforms.display },
	dominantBaseline: true,
	dropShadow: {
		properties: ["--drop-shadow"],
		token: "shadows",
		transform: pipe(transforms.token("shadows"), transforms.function("drop-shadow"), transforms.filter())
	},
	dynamicRangeLimit: true,
	emptyCells: true,
	fieldSizing: true,
	fill: {
		properties: ["fill"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	fillOpacity: true,
	fillRule: true,
	filter: true,
	flex: true,
	flexBasis: {
		properties: ["flexBasis"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	flexDirection: true,
	flexFlow: true,
	flexGrow: true,
	flexShrink: true,
	flexWrap: true,
	float: true,
	floodColor: {
		properties: ["floodColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	floodOpacity: true,
	focusRing: { transform: transforms.focusRing("&:is(:focus, [data-focus])") },
	focusRingColor: {
		properties: ["--focus-ring-color"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	focusRingOffset: {
		properties: ["--focus-ring-offset"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	focusRingStyle: { properties: ["--focus-ring-style"] },
	focusRingWidth: { properties: ["--focus-ring-width"] },
	focusVisibleRing: { transform: transforms.focusRing("&:is(:focus-visible, [data-focus-visible])") },
	font: true,
	fontFamily: {
		properties: ["fontFamily"],
		token: "fonts",
		transform: transforms.token("fonts")
	},
	fontFeatureSettings: true,
	fontKerning: true,
	fontLanguageOverride: true,
	fontOpticalSizing: true,
	fontPalette: true,
	fontSize: {
		properties: ["fontSize"],
		token: "fontSizes",
		transform: pipe(transforms.token("fontSizes"), transforms.px, transforms.calc("fontSizes"))
	},
	fontSizeAdjust: true,
	fontSmooth: true,
	fontStretch: true,
	fontStyle: true,
	fontSynthesis: true,
	fontSynthesisPosition: true,
	fontSynthesisSmallCaps: true,
	fontSynthesisStyle: true,
	fontSynthesisWeight: true,
	fontVariant: true,
	fontVariantAlternates: true,
	fontVariantCaps: true,
	fontVariantEastAsian: true,
	fontVariantEmoji: true,
	fontVariantLigatures: true,
	fontVariantNumeric: true,
	fontVariantPosition: true,
	fontVariationSettings: true,
	fontWeight: {
		properties: ["fontWeight"],
		token: "fontWeights",
		transform: transforms.token("fontWeights")
	},
	fontWidth: true,
	forcedColorAdjust: true,
	gap: {
		properties: ["gap"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	glyphOrientationHorizontal: true,
	glyphOrientationVertical: true,
	grayscale: {
		properties: ["--grayscale"],
		transform: pipe(transforms.function("grayscale"), transforms.filter())
	},
	grid: true,
	gridArea: true,
	gridAutoColumns: {
		properties: ["gridAutoColumns"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.grid)
	},
	gridAutoFlow: true,
	gridAutoRows: {
		properties: ["gridAutoRows"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.grid)
	},
	gridColumn: true,
	gridColumnEnd: true,
	gridColumnStart: true,
	gridRow: true,
	gridRowEnd: true,
	gridRowStart: true,
	gridTemplate: true,
	gridTemplateAreas: true,
	gridTemplateColumns: {
		properties: ["gridTemplateColumns"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.grid)
	},
	gridTemplateRows: {
		properties: ["gridTemplateRows"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.grid)
	},
	hangingPunctuation: true,
	height: {
		properties: ["height"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	hueRotate: {
		properties: ["--hue-rotate"],
		transform: pipe(transforms.deg, transforms.function("hue-rotate"), transforms.filter())
	},
	hyphenateCharacter: true,
	hyphenateLimitChars: true,
	hyphens: true,
	imageOrientation: true,
	imageRendering: true,
	imeMode: true,
	initialLetter: true,
	inlineSize: {
		properties: ["inlineSize"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	inset: {
		properties: ["inset"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	insetBlock: {
		properties: ["insetBlock"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	insetBlockEnd: {
		properties: ["insetBlockEnd"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	insetBlockStart: {
		properties: ["insetBlockStart"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	insetInline: {
		properties: ["insetInline"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	insetInlineEnd: {
		properties: ["insetInlineEnd"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	insetInlineStart: {
		properties: ["insetInlineStart"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	insetX: {
		properties: ["left", "right"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	insetY: {
		properties: ["top", "bottom"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	interactivity: true,
	interestDelay: true,
	interestDelayEnd: true,
	interestDelayStart: true,
	interpolateSize: true,
	invert: {
		properties: ["--invert"],
		transform: pipe(transforms.function("invert"), transforms.filter())
	},
	isolation: true,
	justifyContent: true,
	justifyItems: true,
	justifySelf: true,
	left: {
		properties: ["left"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	letterSpacing: {
		properties: ["letterSpacing"],
		token: "letterSpacings",
		transform: transforms.token("letterSpacings")
	},
	lightingColor: {
		properties: ["lightingColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	lineBreak: true,
	lineHeight: {
		properties: ["lineHeight"],
		token: "lineHeights",
		transform: transforms.token("lineHeights")
	},
	listStyle: true,
	listStyleImage: {
		properties: ["listStyleImage"],
		token: "gradients",
		transform: pipe(transforms.token("gradients"), transforms.gradient)
	},
	listStylePosition: true,
	listStyleType: true,
	margin: {
		properties: ["margin"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	marginBlock: {
		properties: ["marginBlock"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	marginBlockEnd: {
		properties: ["marginBlockEnd"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	marginBlockStart: {
		properties: ["marginBlockStart"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	marginBottom: {
		properties: ["marginBottom"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	marginInline: {
		properties: ["marginInline"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	marginInlineEnd: {
		properties: ["marginInlineEnd"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	marginInlineStart: {
		properties: ["marginInlineStart"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	marginLeft: {
		properties: ["marginLeft"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	marginRight: {
		properties: ["marginRight"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	marginTop: {
		properties: ["marginTop"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	marginTrim: true,
	marginX: {
		properties: ["marginInlineStart", "marginInlineEnd"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	marginY: {
		properties: ["marginTop", "marginBottom"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	marker: true,
	markerEnd: true,
	markerMid: true,
	markerStart: true,
	mask: true,
	maskBorder: true,
	maskBorderOutset: true,
	maskBorderRepeat: true,
	maskBorderSlice: true,
	maskBorderSource: true,
	maskBorderWidth: {
		properties: ["maskBorderWidth"],
		transform: transforms.px
	},
	maskClip: true,
	maskComposite: true,
	maskImage: {
		properties: ["maskImage"],
		token: "gradients",
		transform: pipe(transforms.token("gradients"), transforms.gradient)
	},
	maskMode: true,
	maskOrigin: true,
	maskPosition: true,
	maskRepeat: true,
	maskSize: true,
	maskType: true,
	mathDepth: true,
	mathShift: true,
	mathStyle: true,
	maxBlockSize: {
		properties: ["maxBlockSize"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	maxBoxSize: {
		properties: ["maxWidth", "maxHeight"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	maxHeight: {
		properties: ["maxHeight"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	maxInlineSize: {
		properties: ["maxInlineSize"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	maxWidth: {
		properties: ["maxWidth"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	minBlockSize: {
		properties: ["minBlockSize"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	minBoxSize: {
		properties: ["minWidth", "minHeight"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	minHeight: {
		properties: ["minHeight"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	minInlineSize: {
		properties: ["minInlineSize"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	minWidth: {
		properties: ["minWidth"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	mixBlendMode: true,
	objectFit: true,
	objectPosition: true,
	objectViewBox: true,
	offset: true,
	offsetAnchor: true,
	offsetDistance: true,
	offsetPath: true,
	offsetPosition: true,
	offsetRotate: true,
	opacity: true,
	order: true,
	orphans: true,
	outline: true,
	outlineColor: {
		properties: ["outlineColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	outlineOffset: true,
	outlineStyle: true,
	outlineWidth: {
		properties: ["outlineWidth"],
		transform: transforms.px
	},
	overflow: true,
	overflowAnchor: true,
	overflowBlock: true,
	overflowClipMargin: true,
	overflowInline: true,
	overflowWrap: true,
	overflowX: true,
	overflowY: true,
	overlay: true,
	overscrollBehavior: true,
	overscrollBehaviorBlock: true,
	overscrollBehaviorInline: true,
	overscrollBehaviorX: true,
	overscrollBehaviorY: true,
	padding: {
		properties: ["padding"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	paddingBlock: {
		properties: ["paddingBlock"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	paddingBlockEnd: {
		properties: ["paddingBlockEnd"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	paddingBlockStart: {
		properties: ["paddingBlockStart"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	paddingBottom: {
		properties: ["paddingBottom"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	paddingInline: {
		properties: ["paddingInline"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	paddingInlineEnd: {
		properties: ["paddingInlineEnd"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	paddingInlineStart: {
		properties: ["paddingInlineStart"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	paddingLeft: {
		properties: ["paddingLeft"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	paddingRight: {
		properties: ["paddingRight"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	paddingTop: {
		properties: ["paddingTop"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	paddingX: {
		properties: ["paddingInlineStart", "paddingInlineEnd"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	paddingY: {
		properties: ["paddingTop", "paddingBottom"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	page: true,
	pageBreakAfter: true,
	pageBreakBefore: true,
	pageBreakInside: true,
	paintOrder: true,
	perspective: true,
	perspectiveOrigin: true,
	placeContent: true,
	placeItems: true,
	placeSelf: true,
	pointerEvents: true,
	position: true,
	positionAnchor: true,
	positionArea: true,
	positionTry: true,
	positionTryFallbacks: true,
	positionTryOrder: true,
	positionVisibility: true,
	printColorAdjust: true,
	quotes: true,
	r: true,
	readingFlow: true,
	readingOrder: true,
	resize: true,
	right: {
		properties: ["right"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	rotate: {
		properties: ["rotate"],
		transform: transforms.deg
	},
	rotateX: {
		properties: ["--rotate-x"],
		transform: pipe(transforms.deg, transforms.function("rotateX"), transforms.transform)
	},
	rotateY: {
		properties: ["--rotate-y"],
		transform: pipe(transforms.deg, transforms.function("rotateY"), transforms.transform)
	},
	rotateZ: {
		properties: ["--rotate-z"],
		transform: pipe(transforms.deg, transforms.function("rotateZ"), transforms.transform)
	},
	rowGap: {
		properties: ["rowGap"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	rubyAlign: true,
	rubyOverhang: true,
	rubyPosition: true,
	rx: true,
	ry: true,
	saturate: {
		properties: ["--saturate"],
		transform: pipe(transforms.function("saturate"), transforms.filter())
	},
	scale: true,
	scaleX: {
		properties: ["--scale-x"],
		transform: pipe(transforms.function("scaleX"), transforms.transform)
	},
	scaleY: {
		properties: ["--scale-y"],
		transform: pipe(transforms.function("scaleY"), transforms.transform)
	},
	scaleZ: {
		properties: ["--scale-z"],
		transform: pipe(transforms.function("scaleZ"), transforms.transform)
	},
	scrollbarColor: {
		properties: ["scrollbarColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	scrollbarGutter: true,
	scrollbarWidth: {
		properties: ["scrollbarWidth"],
		transform: transforms.px
	},
	scrollBehavior: true,
	scrollInitialTarget: true,
	scrollMargin: {
		properties: ["scrollMargin"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	scrollMarginBlock: true,
	scrollMarginBlockEnd: true,
	scrollMarginBlockStart: true,
	scrollMarginBottom: {
		properties: ["scrollMarginBottom"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	scrollMarginInline: true,
	scrollMarginInlineEnd: true,
	scrollMarginInlineStart: true,
	scrollMarginLeft: {
		properties: ["scrollMarginLeft"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	scrollMarginRight: {
		properties: ["scrollMarginRight"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	scrollMarginTop: {
		properties: ["scrollMarginTop"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	scrollMarginX: {
		properties: ["scrollMarginLeft", "scrollMarginRight"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	scrollMarginY: {
		properties: ["scrollMarginTop", "scrollMarginBottom"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	scrollMarkerGroup: true,
	scrollPadding: {
		properties: ["scrollPadding"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	scrollPaddingBlock: true,
	scrollPaddingBlockEnd: true,
	scrollPaddingBlockStart: true,
	scrollPaddingBottom: {
		properties: ["scrollPaddingBottom"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	scrollPaddingInline: true,
	scrollPaddingInlineEnd: true,
	scrollPaddingInlineStart: true,
	scrollPaddingLeft: {
		properties: ["scrollPaddingLeft"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	scrollPaddingRight: {
		properties: ["scrollPaddingRight"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	scrollPaddingTop: {
		properties: ["scrollPaddingTop"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	scrollPaddingX: {
		properties: ["scrollPaddingLeft", "scrollPaddingRight"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	scrollPaddingY: {
		properties: ["scrollPaddingTop", "scrollPaddingBottom"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	scrollSnapAlign: true,
	scrollSnapStop: true,
	scrollSnapType: true,
	scrollTargetGroup: true,
	scrollTimeline: true,
	scrollTimelineAxis: true,
	scrollTimelineName: true,
	sepia: {
		properties: ["--sepia"],
		transform: pipe(transforms.function("sepia"), transforms.filter())
	},
	shapeImageThreshold: true,
	shapeMargin: true,
	shapeOutside: true,
	shapeRendering: true,
	skewX: {
		properties: ["--skew-x"],
		transform: pipe(transforms.deg, transforms.function("skewX"), transforms.transform)
	},
	skewY: {
		properties: ["--skew-y"],
		transform: pipe(transforms.deg, transforms.function("skewY"), transforms.transform)
	},
	speak: true,
	speakAs: true,
	stopColor: true,
	stopOpacity: true,
	stroke: {
		properties: ["stroke"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	strokeColor: true,
	strokeDasharray: true,
	strokeDashoffset: true,
	strokeLinecap: true,
	strokeLinejoin: true,
	strokeMiterlimit: true,
	strokeOpacity: true,
	strokeWidth: {
		properties: ["strokeWidth"],
		transform: transforms.px
	},
	tableLayout: true,
	tabSize: true,
	textAlign: true,
	textAlignLast: true,
	textAnchor: true,
	textAutospace: true,
	textBox: true,
	textBoxEdge: true,
	textBoxTrim: true,
	textCombineUpright: true,
	textDecoration: true,
	textDecorationColor: {
		properties: ["textDecorationColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	textDecorationInset: true,
	textDecorationLine: true,
	textDecorationSkip: true,
	textDecorationSkipInk: true,
	textDecorationStyle: true,
	textDecorationThickness: true,
	textEmphasis: true,
	textEmphasisColor: {
		properties: ["textEmphasisColor"],
		token: "colors",
		transform: pipe(transforms.token("colors"), transforms.colorMix)
	},
	textEmphasisPosition: true,
	textEmphasisStyle: true,
	textIndent: true,
	textJustify: true,
	textOrientation: true,
	textOverflow: true,
	textRendering: true,
	textShadow: {
		properties: ["textShadow"],
		token: "shadows",
		transform: transforms.token("shadows")
	},
	textSizeAdjust: true,
	textSpacingTrim: true,
	textTransform: true,
	textUnderlineOffset: true,
	textUnderlinePosition: true,
	textWrap: true,
	textWrapMode: true,
	textWrapStyle: true,
	timelineScope: true,
	top: {
		properties: ["top"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.calc("spaces"))
	},
	touchAction: true,
	transform: true,
	transformBox: true,
	transformOrigin: true,
	transformStyle: true,
	transition: { transform: transforms.transition() },
	transitionBehavior: true,
	transitionDelay: true,
	transitionDuration: {
		properties: ["transitionDuration"],
		token: "durations",
		transform: transforms.token("durations")
	},
	transitionProperty: { transform: transforms.transition("property") },
	transitionTimingFunction: {
		properties: ["transitionTimingFunction"],
		token: "easings",
		transform: transforms.token("easings")
	},
	translateX: {
		properties: ["--translate-x"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.function("translateX"), transforms.calc("spaces"), transforms.transform)
	},
	translateY: {
		properties: ["--translate-y"],
		token: "spaces",
		transform: pipe(transforms.token("spaces"), transforms.px, transforms.function("translateY"), transforms.calc("spaces"), transforms.transform)
	},
	translateZ: {
		properties: ["--translate-z"],
		transform: pipe(transforms.function("translateZ"), transforms.transform)
	},
	unicodeBidi: true,
	userModify: true,
	userSelect: true,
	vectorEffect: true,
	verticalAlign: true,
	viewTimeline: true,
	viewTimelineAxis: true,
	viewTimelineInset: true,
	viewTimelineName: true,
	viewTransitionClass: true,
	viewTransitionGroup: true,
	viewTransitionName: true,
	visibility: true,
	whiteSpace: true,
	whiteSpaceCollapse: true,
	widows: true,
	width: {
		properties: ["width"],
		token: "sizes",
		transform: pipe(transforms.token("sizes"), transforms.fraction, transforms.px, transforms.calc("sizes"))
	},
	willChange: true,
	wordBreak: true,
	wordSpacing: true,
	writingMode: true,
	x: true,
	y: true,
	zIndex: {
		properties: ["zIndex"],
		token: "zIndices",
		transform: transforms.token("zIndices")
	},
	zoom: true
};
const shorthandStyles = {
	accent: standardStyles.accentColor,
	bg: standardStyles.background,
	bgAttachment: { properties: ["backgroundAttachment"] },
	bgBlendMode: { properties: ["backgroundBlendMode"] },
	bgClip: standardStyles.backgroundClip,
	bgColor: standardStyles.backgroundColor,
	bgGradient: standardStyles.backgroundImage,
	bgImage: standardStyles.backgroundImage,
	bgImg: standardStyles.backgroundImage,
	bgOrigin: { properties: ["backgroundOrigin"] },
	bgPosition: { properties: ["backgroundPosition"] },
	bgPositionX: { properties: ["backgroundPositionX"] },
	bgPositionY: { properties: ["backgroundPositionY"] },
	bgPosX: { properties: ["backgroundPositionX"] },
	bgPosY: { properties: ["backgroundPositionY"] },
	bgRepeat: { properties: ["backgroundRepeat"] },
	bgSize: { properties: ["backgroundSize"] },
	blendMode: { properties: ["mixBlendMode"] },
	borderBottomEndRadius: standardStyles.borderEndEndRadius,
	borderBottomStartRadius: standardStyles.borderEndStartRadius,
	borderEnd: standardStyles.borderInlineEnd,
	borderEndColor: standardStyles.borderInlineEndColor,
	borderEndRadius: standardStyles.borderInlineEndRadius,
	borderEndStyle: { properties: ["borderInlineEndStyle"] },
	borderEndWidth: standardStyles.borderInlineEndWidth,
	borderStart: standardStyles.borderInlineStart,
	borderStartColor: standardStyles.borderInlineStartColor,
	borderStartRadius: standardStyles.borderInlineStartRadius,
	borderStartStyle: { properties: ["borderInlineStartStyle"] },
	borderStartWidth: standardStyles.borderInlineStartWidth,
	borderTopEndRadius: standardStyles.borderStartEndRadius,
	borderTopStartRadius: standardStyles.borderStartStartRadius,
	caret: standardStyles.caretColor,
	flexDir: { properties: ["flexDirection"] },
	g: standardStyles.gap,
	gapX: standardStyles.columnGap,
	gapY: standardStyles.rowGap,
	gx: standardStyles.columnGap,
	gy: standardStyles.rowGap,
	h: standardStyles.height,
	insetEnd: standardStyles.insetInlineEnd,
	insetStart: standardStyles.insetInlineStart,
	leading: standardStyles.lineHeight,
	listStyleImg: standardStyles.listStyleImage,
	listStylePos: { properties: ["listStylePosition"] },
	m: standardStyles.margin,
	marginEnd: standardStyles.marginInlineEnd,
	marginStart: standardStyles.marginInlineStart,
	maxH: standardStyles.maxHeight,
	maxW: standardStyles.maxWidth,
	mb: standardStyles.marginBottom,
	me: standardStyles.marginInlineEnd,
	minH: standardStyles.minHeight,
	minW: standardStyles.minWidth,
	ml: standardStyles.marginLeft,
	mr: standardStyles.marginRight,
	ms: standardStyles.marginInlineStart,
	mt: standardStyles.marginTop,
	mx: standardStyles.marginX,
	my: standardStyles.marginY,
	overscroll: { properties: ["overscrollBehavior"] },
	overscrollX: { properties: ["overscrollBehaviorX"] },
	overscrollY: { properties: ["overscrollBehaviorY"] },
	p: standardStyles.padding,
	paddingEnd: standardStyles.paddingInlineEnd,
	paddingStart: standardStyles.paddingInlineStart,
	pb: standardStyles.paddingBottom,
	pe: standardStyles.paddingInlineEnd,
	pl: standardStyles.paddingLeft,
	pos: { properties: ["position"] },
	pr: standardStyles.paddingRight,
	ps: standardStyles.paddingInlineStart,
	pt: standardStyles.paddingTop,
	px: standardStyles.paddingX,
	py: standardStyles.paddingY,
	rounded: standardStyles.borderRadius,
	roundedBottom: standardStyles.borderBottomRadius,
	roundedBottomEnd: standardStyles.borderEndEndRadius,
	roundedBottomLeft: standardStyles.borderBottomLeftRadius,
	roundedBottomRight: standardStyles.borderBottomRightRadius,
	roundedBottomStart: standardStyles.borderEndStartRadius,
	roundedEnd: standardStyles.borderInlineEndRadius,
	roundedLeft: standardStyles.borderLeftRadius,
	roundedRight: standardStyles.borderRightRadius,
	roundedStart: standardStyles.borderInlineStartRadius,
	roundedTop: standardStyles.borderTopRadius,
	roundedTopEnd: standardStyles.borderStartEndRadius,
	roundedTopLeft: standardStyles.borderTopLeftRadius,
	roundedTopRight: standardStyles.borderTopRightRadius,
	roundedTopStart: standardStyles.borderStartStartRadius,
	shadow: standardStyles.boxShadow,
	text: standardStyles.fontSize,
	textColor: standardStyles.color,
	textDecor: { properties: ["textDecoration"] },
	tracking: standardStyles.letterSpacing,
	w: standardStyles.width,
	z: standardStyles.zIndex
};
const pseudoStyles = {
	"&::after": {
		properties: ["&::after"],
		transform: transforms.content
	},
	"&::before": {
		properties: ["&::before"],
		transform: transforms.content
	}
};
const styledStyles = {
	apply: {
		important: true,
		transform: transforms.style()
	},
	layerStyle: {
		important: true,
		transform: transforms.style("layerStyles")
	},
	textStyle: {
		important: true,
		transform: transforms.style("textStyles")
	},
	colorScheme: {
		important: true,
		transform: transforms.colorScheme
	},
	lineClamp: {
		properties: ["--line-clamp"],
		static: {
			display: "-webkit-box",
			overflow: "hidden",
			textOverflow: "ellipsis",
			WebkitBoxOrient: "vertical",
			WebkitLineClamp: "var(--line-clamp)"
		}
	},
	truncated: { transform: transforms.truncated }
};
const atRuleStyles = {
	_container: { transform: transforms.container },
	_keyframes: {
		properties: ["animationName"],
		token: "keyframes",
		transform: pipe(transforms.token("keyframes"), transforms.keyframes)
	},
	_landscape: { properties: ["@media (orientation: landscape)"] },
	_media: { transform: transforms.media },
	_mediaDark: { properties: ["@media (prefers-color-scheme: dark)"] },
	_mediaLight: { properties: ["@media (prefers-color-scheme: light)"] },
	_mediaReduceMotion: { properties: ["@media (prefers-reduced-motion: reduce)"] },
	_portrait: { properties: ["@media (orientation: portrait)"] },
	_print: { properties: ["@media print"] },
	_supports: { transform: transforms.supports }
};
const styles = {
	...standardStyles,
	...shorthandStyles,
	...pseudoStyles,
	...styledStyles,
	...atRuleStyles
};
const styleProperties = Object.keys(styles);
const variableLengthProperties = [
	"_container",
	"_media",
	"_supports"
];
const sizeProperties = [
	"backfaceVisibility",
	"blockSize",
	"columnWidth",
	"containIntrinsicWidth",
	"flexBasis",
	"gridAutoColumns",
	"gridAutoRows",
	"gridTemplateColumns",
	"gridTemplateRows",
	"height",
	"h",
	"inlineSize",
	"maxBlockSize",
	"maxHeight",
	"maxH",
	"maxInlineSize",
	"maxWidth",
	"maxW",
	"minBlockSize",
	"minHeight",
	"minH",
	"minInlineSize",
	"minWidth",
	"minW",
	"width",
	"w",
	"boxSize",
	"maxBoxSize",
	"minBoxSize"
];
const animationProperties = ["animation"];
const aspectRatioProperties = ["aspectRatio"];
const blurProperties = ["blur", "backdropBlur"];
const borderProperties = [
	"border",
	"borderBlock",
	"borderBlockEnd",
	"borderBlockStart",
	"borderBottom",
	"borderImage",
	"borderInline",
	"borderInlineEnd",
	"borderEnd",
	"borderInlineStart",
	"borderStart",
	"borderLeft",
	"borderRight",
	"borderTop",
	"borderX",
	"borderY"
];
const colorProperties = [
	"color",
	"textColor",
	"floodColor",
	"lightingColor",
	"stroke",
	"accentColor",
	"accent",
	"background",
	"bg",
	"backgroundColor",
	"bgColor",
	"borderBlockColor",
	"borderBlockEndColor",
	"borderBlockStartColor",
	"borderBottomColor",
	"borderColor",
	"borderInlineColor",
	"borderInlineEndColor",
	"borderEndColor",
	"borderInlineStartColor",
	"borderStartColor",
	"borderLeftColor",
	"borderRightColor",
	"borderTopColor",
	"caretColor",
	"caret",
	"columnRuleColor",
	"fill",
	"outlineColor",
	"scrollbarColor",
	"textDecorationColor",
	"textEmphasisColor",
	"focusRingColor"
];
const durationProperties = ["animationDuration", "transitionDuration"];
const easingProperties = ["animationTimingFunction", "transitionTimingFunction"];
const fontProperties = [
	"fontFamily",
	"fontSize",
	"text",
	"fontWeight",
	"lineHeight",
	"leading",
	"letterSpacing",
	"tracking"
];
const gradientProperties = [
	"backgroundImage",
	"bgImage",
	"bgImg",
	"bgGradient",
	"borderImageSource",
	"listStyleImage",
	"listStyleImg",
	"maskImage"
];
const keyframeProperties = ["animationName", "_keyframes"];
const radiusProperties = [
	"borderBottomLeftRadius",
	"roundedBottomLeft",
	"borderBottomRightRadius",
	"roundedBottomRight",
	"borderEndEndRadius",
	"borderBottomEndRadius",
	"roundedBottomEnd",
	"borderEndStartRadius",
	"borderBottomStartRadius",
	"roundedBottomStart",
	"borderRadius",
	"rounded",
	"borderStartEndRadius",
	"borderTopEndRadius",
	"roundedTopEnd",
	"borderStartStartRadius",
	"borderTopStartRadius",
	"roundedTopStart",
	"borderTopLeftRadius",
	"roundedTopLeft",
	"borderTopRightRadius",
	"roundedTopRight",
	"borderBottomRadius",
	"roundedBottom",
	"borderInlineEndRadius",
	"borderEndRadius",
	"roundedEnd",
	"borderInlineStartRadius",
	"borderStartRadius",
	"roundedStart",
	"borderLeftRadius",
	"roundedLeft",
	"borderRightRadius",
	"roundedRight",
	"borderTopRadius",
	"roundedTop"
];
const shadowProperties = [
	"boxShadow",
	"shadow",
	"textShadow",
	"dropShadow",
	"backdropDropShadow"
];
const spaceProperties = [
	"bottom",
	"columnGap",
	"gx",
	"gapX",
	"gap",
	"g",
	"inset",
	"insetBlock",
	"insetBlockEnd",
	"insetBlockStart",
	"insetInline",
	"insetInlineEnd",
	"insetEnd",
	"insetInlineStart",
	"insetStart",
	"left",
	"margin",
	"m",
	"marginBlock",
	"marginBlockEnd",
	"marginBlockStart",
	"marginBottom",
	"mb",
	"marginInline",
	"marginInlineEnd",
	"me",
	"marginEnd",
	"marginInlineStart",
	"ms",
	"marginStart",
	"marginLeft",
	"ml",
	"marginRight",
	"mr",
	"marginTop",
	"mt",
	"padding",
	"p",
	"paddingBlock",
	"paddingBlockEnd",
	"paddingBlockStart",
	"paddingBottom",
	"pb",
	"paddingInline",
	"paddingInlineEnd",
	"pe",
	"paddingEnd",
	"paddingInlineStart",
	"ps",
	"paddingStart",
	"paddingLeft",
	"pl",
	"paddingRight",
	"pr",
	"paddingTop",
	"pt",
	"right",
	"rowGap",
	"gy",
	"gapY",
	"scrollMargin",
	"scrollMarginBottom",
	"scrollMarginLeft",
	"scrollMarginRight",
	"scrollMarginTop",
	"scrollPadding",
	"scrollPaddingBottom",
	"scrollPaddingLeft",
	"scrollPaddingRight",
	"scrollPaddingTop",
	"top",
	"insetX",
	"insetY",
	"marginX",
	"mx",
	"marginY",
	"my",
	"paddingX",
	"px",
	"paddingY",
	"py",
	"scrollMarginX",
	"scrollMarginY",
	"scrollPaddingX",
	"scrollPaddingY",
	"focusRingOffset",
	"translateX",
	"translateY"
];
const zIndexProperties = ["zIndex", "z"];

//#endregion
export { animationProperties, aspectRatioProperties, atRuleStyles, blurProperties, borderProperties, colorProperties, durationProperties, easingProperties, fontProperties, gradientProperties, keyframeProperties, pseudoStyles, radiusProperties, shadowProperties, shorthandStyles, sizeProperties, spaceProperties, standardStyles, styleProperties, styledStyles, styles, variableLengthProperties, zIndexProperties };
//# sourceMappingURL=styles.js.map