@yamada-ui/react/dist/cjs/core/css/styles.cjs.map

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

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