@traefik-labs/faency 12.0.7

package/dist/styles/cssProps.cjs

@@ -0,0 +1,315 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function processToken(value) {
+  return value.startsWith("$") ? value.slice(1) : value;
+}
+function getSpaceValue(key) {
+  const spaceMap = {
+    "1": "4px",
+    "2": "8px",
+    "3": "16px",
+    "4": "20px",
+    "5": "24px",
+    "6": "32px",
+    "7": "48px",
+    "8": "64px",
+    "9": "80px"
+  };
+  return spaceMap[key] || "0px";
+}
+function getSizeValue(key) {
+  const sizeMap = {
+    "1": "4px",
+    "2": "8px",
+    "3": "16px",
+    "4": "20px",
+    "5": "24px",
+    "6": "32px",
+    "7": "40px",
+    "8": "48px",
+    "9": "64px",
+    "10": "80px"
+  };
+  return sizeMap[key] || key;
+}
+function getRadiiValue(key) {
+  const radiiMap = {
+    "1": "4px",
+    "2": "6px",
+    "3": "8px",
+    "4": "12px",
+    round: "50%",
+    pill: "9999px"
+  };
+  return radiiMap[key] || "0px";
+}
+function getFontSizeValue(key) {
+  const fontSizeMap = {
+    "0": "11px",
+    "1": "12px",
+    "2": "13px",
+    "3": "14px",
+    "4": "16px",
+    "5": "18px",
+    "6": "20px",
+    "7": "22px",
+    "8": "24px",
+    "9": "26px",
+    "10": "28px",
+    "11": "32px",
+    "12": "38px"
+  };
+  return fontSizeMap[key] || "16px";
+}
+function getFontWeightValue(key) {
+  const fontWeightMap = {
+    light: "300",
+    regular: "400",
+    medium: "500",
+    semiBold: "600",
+    bold: "700"
+  };
+  return fontWeightMap[key] || "400";
+}
+function applySpacing(style, property, value) {
+  if (typeof value === "string" && value.startsWith("$")) {
+    const tokenValue = processToken(value);
+    const spaceValue = getSpaceValue(tokenValue);
+    if (spaceValue !== "0px") {
+      style[property] = spaceValue;
+    }
+  } else {
+    style[property] = value;
+  }
+}
+function applyRadii(style, property, value) {
+  if (typeof value === "string" && value.startsWith("$")) {
+    const tokenValue = processToken(value);
+    const radiiValue = getRadiiValue(tokenValue);
+    if (radiiValue !== "0px") {
+      style[property] = radiiValue;
+    }
+  } else {
+    style[property] = value;
+  }
+}
+function applyColor(style, property, value, colors) {
+  if (typeof value === "string" && value.startsWith("$")) {
+    const colorToken = value.slice(1);
+    if (colors && colorToken in colors) {
+      style[property] = colors[colorToken];
+    } else {
+      style[property] = value;
+    }
+  } else {
+    style[property] = value;
+  }
+}
+function applySize(style, property, value) {
+  if (typeof value === "string" && value.startsWith("$")) {
+    const tokenValue = processToken(value);
+    const sizeValue = getSizeValue(tokenValue);
+    style[property] = sizeValue;
+  } else {
+    style[property] = value;
+  }
+}
+function processCSSProp(css = {}, colors) {
+  const style = {};
+  const vars = {};
+  Object.entries(css).forEach(([key, value]) => {
+    switch (key) {
+      case "p":
+      case "padding":
+        applySpacing(style, "padding", value);
+        break;
+      case "pt":
+      case "paddingTop":
+        applySpacing(style, "paddingTop", value);
+        break;
+      case "pr":
+      case "paddingRight":
+        applySpacing(style, "paddingRight", value);
+        break;
+      case "pb":
+      case "paddingBottom":
+        applySpacing(style, "paddingBottom", value);
+        break;
+      case "pl":
+      case "paddingLeft":
+        applySpacing(style, "paddingLeft", value);
+        break;
+      case "px":
+        applySpacing(style, "paddingLeft", value);
+        applySpacing(style, "paddingRight", value);
+        break;
+      case "py":
+        applySpacing(style, "paddingTop", value);
+        applySpacing(style, "paddingBottom", value);
+        break;
+      case "m":
+      case "margin":
+        applySpacing(style, "margin", value);
+        break;
+      case "mt":
+      case "marginTop":
+        applySpacing(style, "marginTop", value);
+        break;
+      case "mr":
+      case "marginRight":
+        applySpacing(style, "marginRight", value);
+        break;
+      case "mb":
+      case "marginBottom":
+        applySpacing(style, "marginBottom", value);
+        break;
+      case "ml":
+      case "marginLeft":
+        applySpacing(style, "marginLeft", value);
+        break;
+      case "mx":
+        applySpacing(style, "marginLeft", value);
+        applySpacing(style, "marginRight", value);
+        break;
+      case "my":
+        applySpacing(style, "marginTop", value);
+        applySpacing(style, "marginBottom", value);
+        break;
+      case "ta":
+        style.textAlign = value;
+        break;
+      case "fd":
+        style.flexDirection = value;
+        break;
+      case "fw":
+        style.flexWrap = value;
+        break;
+      case "ai":
+        style.alignItems = value;
+        break;
+      case "ac":
+        style.alignContent = value;
+        break;
+      case "jc":
+        style.justifyContent = value;
+        break;
+      case "as":
+        style.alignSelf = value;
+        break;
+      case "fg":
+        style.flexGrow = value;
+        break;
+      case "fs":
+        style.flexShrink = value;
+        break;
+      case "fb":
+        applySize(style, "flexBasis", value);
+        break;
+      case "bc":
+      case "backgroundColor":
+        applyColor(style, "backgroundColor", value, colors);
+        break;
+      case "br":
+      case "borderRadius":
+        applyRadii(style, "borderRadius", value);
+        break;
+      case "btrr":
+      case "borderTopRightRadius":
+        applyRadii(style, "borderTopRightRadius", value);
+        break;
+      case "bbrr":
+      case "borderBottomRightRadius":
+        applyRadii(style, "borderBottomRightRadius", value);
+        break;
+      case "bblr":
+      case "borderBottomLeftRadius":
+        applyRadii(style, "borderBottomLeftRadius", value);
+        break;
+      case "btlr":
+      case "borderTopLeftRadius":
+        applyRadii(style, "borderTopLeftRadius", value);
+        break;
+      case "bs":
+      case "boxShadow":
+        style.boxShadow = value;
+        break;
+      case "c":
+      case "color":
+        applyColor(style, "color", value, colors);
+        break;
+      case "fontSize":
+        if (typeof value === "string") {
+          const fontSizeValue = getFontSizeValue(value);
+          if (fontSizeValue !== "16px") {
+            style.fontSize = fontSizeValue;
+          }
+        }
+        break;
+      case "fontWeight":
+        if (typeof value === "string") {
+          const fontWeightValue = getFontWeightValue(value);
+          if (fontWeightValue !== "400") {
+            style.fontWeight = fontWeightValue;
+          }
+        }
+        break;
+      case "lh":
+        style.lineHeight = value;
+        break;
+      case "width":
+      case "w":
+        applySize(style, "width", value);
+        break;
+      case "height":
+      case "h":
+        applySize(style, "height", value);
+        break;
+      case "size":
+        applySize(style, "width", value);
+        applySize(style, "height", value);
+        break;
+      case "ox":
+        style.overflowX = value;
+        break;
+      case "oy":
+        style.overflowY = value;
+        break;
+      case "pe":
+        style.pointerEvents = value;
+        break;
+      case "us":
+        style.userSelect = value;
+        break;
+      default:
+        if (typeof value === "string" && value.startsWith("$")) {
+          const tokenValue = processToken(value);
+          const spaceValue = getSpaceValue(tokenValue);
+          if (spaceValue !== "0px") {
+            style[key] = spaceValue;
+            break;
+          }
+          const sizeValue = getSizeValue(tokenValue);
+          if (sizeValue !== tokenValue) {
+            style[key] = sizeValue;
+            break;
+          }
+          const radiiValue = getRadiiValue(tokenValue);
+          if (radiiValue !== "0px") {
+            style[key] = radiiValue;
+            break;
+          }
+          if (colors && tokenValue in colors) {
+            style[key] = colors[tokenValue];
+            break;
+          }
+          style[key] = value;
+        } else {
+          style[key] = value;
+        }
+        break;
+    }
+  });
+  return { style, vars };
+}
+exports.processCSSProp = processCSSProp;
+//# sourceMappingURL=cssProps.cjs.map

package/dist/styles/cssProps.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssProps.cjs","sources":["../../styles/cssProps.ts"],"sourcesContent":["import { FlexAlign, FlexJustify, SizeToken, SpacingToken } from './types';\n\nexport interface CSSProps {\n  css?: {\n    p?: SpacingToken;\n    pt?: SpacingToken;\n    pr?: SpacingToken;\n    pb?: SpacingToken;\n    pl?: SpacingToken;\n    px?: SpacingToken;\n    py?: SpacingToken;\n\n    m?: SpacingToken;\n    mt?: SpacingToken;\n    mr?: SpacingToken;\n    mb?: SpacingToken;\n    ml?: SpacingToken;\n    mx?: SpacingToken;\n    my?: SpacingToken;\n\n    ta?: 'left' | 'center' | 'right' | 'justify';\n    fd?: 'row' | 'column' | 'row-reverse' | 'column-reverse';\n    fw?: 'wrap' | 'nowrap' | 'wrap-reverse';\n    ai?: FlexAlign;\n    ac?: FlexAlign | 'space-between' | 'space-around' | 'space-evenly';\n    jc?: FlexJustify;\n    as?: 'auto' | FlexAlign;\n    fg?: 0 | 1;\n    fs?: 0 | 1;\n    fb?: SizeToken;\n\n    bc?: string;\n    br?: string;\n    btrr?: string;\n    bbrr?: string;\n    bblr?: string;\n    btlr?: string;\n    bs?: string;\n    c?: string;\n\n    width?: SizeToken;\n    height?: SizeToken;\n    size?: SizeToken;\n\n    ox?: 'visible' | 'hidden' | 'scroll' | 'auto';\n    oy?: 'visible' | 'hidden' | 'scroll' | 'auto';\n\n    pe?: 'auto' | 'none' | 'all';\n    us?: 'none' | 'auto' | 'text' | 'contain' | 'all';\n\n    fontSize?: string;\n    fontWeight?: string;\n    lh?: string | number;\n\n    [key: string]: any;\n  };\n}\n\n// HELPERS\nfunction processToken(value: string): string {\n  return value.startsWith('$') ? value.slice(1) : value;\n}\n\nfunction getSpaceValue(key: string): string {\n  const spaceMap: Record<string, string> = {\n    '1': '4px',\n    '2': '8px',\n    '3': '16px',\n    '4': '20px',\n    '5': '24px',\n    '6': '32px',\n    '7': '48px',\n    '8': '64px',\n    '9': '80px',\n  };\n  return spaceMap[key] || '0px';\n}\n\nfunction getSizeValue(key: string): string {\n  const sizeMap: Record<string, string> = {\n    '1': '4px',\n    '2': '8px',\n    '3': '16px',\n    '4': '20px',\n    '5': '24px',\n    '6': '32px',\n    '7': '40px',\n    '8': '48px',\n    '9': '64px',\n    '10': '80px',\n  };\n  return sizeMap[key] || key;\n}\n\nfunction getRadiiValue(key: string): string {\n  const radiiMap: Record<string, string> = {\n    '1': '4px',\n    '2': '6px',\n    '3': '8px',\n    '4': '12px',\n    round: '50%',\n    pill: '9999px',\n  };\n  return radiiMap[key] || '0px';\n}\n\nfunction getFontSizeValue(key: string): string {\n  const fontSizeMap: Record<string, string> = {\n    '0': '11px',\n    '1': '12px',\n    '2': '13px',\n    '3': '14px',\n    '4': '16px',\n    '5': '18px',\n    '6': '20px',\n    '7': '22px',\n    '8': '24px',\n    '9': '26px',\n    '10': '28px',\n    '11': '32px',\n    '12': '38px',\n  };\n  return fontSizeMap[key] || '16px';\n}\n\nfunction getFontWeightValue(key: string): string {\n  const fontWeightMap: Record<string, string> = {\n    light: '300',\n    regular: '400',\n    medium: '500',\n    semiBold: '600',\n    bold: '700',\n  };\n  return fontWeightMap[key] || '400';\n}\n\nfunction applySpacing(\n  style: React.CSSProperties,\n  property: keyof React.CSSProperties,\n  value: string,\n): void {\n  if (typeof value === 'string' && value.startsWith('$')) {\n    const tokenValue = processToken(value);\n    const spaceValue = getSpaceValue(tokenValue);\n    if (spaceValue !== '0px') {\n      (style as any)[property] = spaceValue;\n    }\n  } else {\n    (style as any)[property] = value;\n  }\n}\n\nfunction applyRadii(\n  style: React.CSSProperties,\n  property: keyof React.CSSProperties,\n  value: string,\n): void {\n  if (typeof value === 'string' && value.startsWith('$')) {\n    const tokenValue = processToken(value);\n    const radiiValue = getRadiiValue(tokenValue);\n    if (radiiValue !== '0px') {\n      (style as any)[property] = radiiValue;\n    }\n  } else {\n    (style as any)[property] = value;\n  }\n}\n\nfunction applyColor(\n  style: React.CSSProperties,\n  property: keyof React.CSSProperties,\n  value: string,\n  colors?: Record<string, any>,\n): void {\n  if (typeof value === 'string' && value.startsWith('$')) {\n    const colorToken = value.slice(1);\n    if (colors && colorToken in colors) {\n      (style as any)[property] = colors[colorToken];\n    } else {\n      (style as any)[property] = value;\n    }\n  } else {\n    (style as any)[property] = value;\n  }\n}\n\nfunction applySize(\n  style: React.CSSProperties,\n  property: keyof React.CSSProperties,\n  value: string,\n): void {\n  if (typeof value === 'string' && value.startsWith('$')) {\n    const tokenValue = processToken(value);\n    const sizeValue = getSizeValue(tokenValue);\n    (style as any)[property] = sizeValue;\n  } else {\n    (style as any)[property] = value;\n  }\n}\n\n// CSS PROCESSOR\nexport function processCSSProp(\n  css: CSSProps['css'] = {},\n  colors?: Record<string, any>,\n): {\n  style: React.CSSProperties;\n  vars: Record<string, string>;\n} {\n  const style: React.CSSProperties = {};\n  const vars: Record<string, string> = {};\n\n  Object.entries(css).forEach(([key, value]) => {\n    switch (key) {\n      case 'p':\n      case 'padding':\n        applySpacing(style, 'padding', value);\n        break;\n      case 'pt':\n      case 'paddingTop':\n        applySpacing(style, 'paddingTop', value);\n        break;\n      case 'pr':\n      case 'paddingRight':\n        applySpacing(style, 'paddingRight', value);\n        break;\n      case 'pb':\n      case 'paddingBottom':\n        applySpacing(style, 'paddingBottom', value);\n        break;\n      case 'pl':\n      case 'paddingLeft':\n        applySpacing(style, 'paddingLeft', value);\n        break;\n      case 'px':\n        applySpacing(style, 'paddingLeft', value);\n        applySpacing(style, 'paddingRight', value);\n        break;\n      case 'py':\n        applySpacing(style, 'paddingTop', value);\n        applySpacing(style, 'paddingBottom', value);\n        break;\n\n      case 'm':\n      case 'margin':\n        applySpacing(style, 'margin', value);\n        break;\n      case 'mt':\n      case 'marginTop':\n        applySpacing(style, 'marginTop', value);\n        break;\n      case 'mr':\n      case 'marginRight':\n        applySpacing(style, 'marginRight', value);\n        break;\n      case 'mb':\n      case 'marginBottom':\n        applySpacing(style, 'marginBottom', value);\n        break;\n      case 'ml':\n      case 'marginLeft':\n        applySpacing(style, 'marginLeft', value);\n        break;\n      case 'mx':\n        applySpacing(style, 'marginLeft', value);\n        applySpacing(style, 'marginRight', value);\n        break;\n      case 'my':\n        applySpacing(style, 'marginTop', value);\n        applySpacing(style, 'marginBottom', value);\n        break;\n\n      case 'ta':\n        style.textAlign = value as React.CSSProperties['textAlign'];\n        break;\n      case 'fd':\n        style.flexDirection = value as React.CSSProperties['flexDirection'];\n        break;\n      case 'fw':\n        style.flexWrap = value as React.CSSProperties['flexWrap'];\n        break;\n      case 'ai':\n        style.alignItems = value as React.CSSProperties['alignItems'];\n        break;\n      case 'ac':\n        style.alignContent = value as React.CSSProperties['alignContent'];\n        break;\n      case 'jc':\n        style.justifyContent = value as React.CSSProperties['justifyContent'];\n        break;\n      case 'as':\n        style.alignSelf = value as React.CSSProperties['alignSelf'];\n        break;\n      case 'fg':\n        style.flexGrow = value;\n        break;\n      case 'fs':\n        style.flexShrink = value;\n        break;\n      case 'fb':\n        applySize(style, 'flexBasis', value);\n        break;\n\n      case 'bc':\n      case 'backgroundColor':\n        applyColor(style, 'backgroundColor', value, colors);\n        break;\n      case 'br':\n      case 'borderRadius':\n        applyRadii(style, 'borderRadius', value);\n        break;\n      case 'btrr':\n      case 'borderTopRightRadius':\n        applyRadii(style, 'borderTopRightRadius', value);\n        break;\n      case 'bbrr':\n      case 'borderBottomRightRadius':\n        applyRadii(style, 'borderBottomRightRadius', value);\n        break;\n      case 'bblr':\n      case 'borderBottomLeftRadius':\n        applyRadii(style, 'borderBottomLeftRadius', value);\n        break;\n      case 'btlr':\n      case 'borderTopLeftRadius':\n        applyRadii(style, 'borderTopLeftRadius', value);\n        break;\n      case 'bs':\n      case 'boxShadow':\n        style.boxShadow = value;\n        break;\n      case 'c':\n      case 'color':\n        applyColor(style, 'color', value, colors);\n        break;\n\n      case 'fontSize':\n        if (typeof value === 'string') {\n          const fontSizeValue = getFontSizeValue(value);\n          if (fontSizeValue !== '16px') {\n            style.fontSize = fontSizeValue;\n          }\n        }\n        break;\n      case 'fontWeight':\n        if (typeof value === 'string') {\n          const fontWeightValue = getFontWeightValue(value);\n          if (fontWeightValue !== '400') {\n            style.fontWeight = fontWeightValue;\n          }\n        }\n        break;\n      case 'lh':\n        style.lineHeight = value;\n        break;\n\n      case 'width':\n      case 'w':\n        applySize(style, 'width', value);\n        break;\n      case 'height':\n      case 'h':\n        applySize(style, 'height', value);\n        break;\n\n      case 'size':\n        applySize(style, 'width', value);\n        applySize(style, 'height', value);\n        break;\n\n      case 'ox':\n        style.overflowX = value as React.CSSProperties['overflowX'];\n        break;\n      case 'oy':\n        style.overflowY = value as React.CSSProperties['overflowY'];\n        break;\n\n      case 'pe':\n        style.pointerEvents = value as React.CSSProperties['pointerEvents'];\n        break;\n      case 'us':\n        style.userSelect = value as React.CSSProperties['userSelect'];\n        break;\n\n      default:\n        // Handle token syntax for any property that falls through to default\n        if (typeof value === 'string' && value.startsWith('$')) {\n          const tokenValue = processToken(value);\n\n          // Try spacing tokens first (most common for gap, etc)\n          const spaceValue = getSpaceValue(tokenValue);\n          if (spaceValue !== '0px') {\n            (style as any)[key] = spaceValue;\n            break;\n          }\n\n          // Try size tokens\n          const sizeValue = getSizeValue(tokenValue);\n          if (sizeValue !== tokenValue) {\n            (style as any)[key] = sizeValue;\n            break;\n          }\n\n          // Try radii tokens\n          const radiiValue = getRadiiValue(tokenValue);\n          if (radiiValue !== '0px') {\n            (style as any)[key] = radiiValue;\n            break;\n          }\n\n          // Try color tokens\n          if (colors && tokenValue in colors) {\n            (style as any)[key] = colors[tokenValue];\n            break;\n          }\n\n          // If no token matches, pass through as-is\n          (style as any)[key] = value;\n        } else {\n          (style as any)[key] = value;\n        }\n        break;\n    }\n  });\n\n  return { style, vars };\n}\n"],"names":[],"mappings":"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"}

package/dist/styles/cssProps.js

@@ -0,0 +1,315 @@
+function processToken(value) {
+  return value.startsWith("$") ? value.slice(1) : value;
+}
+function getSpaceValue(key) {
+  const spaceMap = {
+    "1": "4px",
+    "2": "8px",
+    "3": "16px",
+    "4": "20px",
+    "5": "24px",
+    "6": "32px",
+    "7": "48px",
+    "8": "64px",
+    "9": "80px"
+  };
+  return spaceMap[key] || "0px";
+}
+function getSizeValue(key) {
+  const sizeMap = {
+    "1": "4px",
+    "2": "8px",
+    "3": "16px",
+    "4": "20px",
+    "5": "24px",
+    "6": "32px",
+    "7": "40px",
+    "8": "48px",
+    "9": "64px",
+    "10": "80px"
+  };
+  return sizeMap[key] || key;
+}
+function getRadiiValue(key) {
+  const radiiMap = {
+    "1": "4px",
+    "2": "6px",
+    "3": "8px",
+    "4": "12px",
+    round: "50%",
+    pill: "9999px"
+  };
+  return radiiMap[key] || "0px";
+}
+function getFontSizeValue(key) {
+  const fontSizeMap = {
+    "0": "11px",
+    "1": "12px",
+    "2": "13px",
+    "3": "14px",
+    "4": "16px",
+    "5": "18px",
+    "6": "20px",
+    "7": "22px",
+    "8": "24px",
+    "9": "26px",
+    "10": "28px",
+    "11": "32px",
+    "12": "38px"
+  };
+  return fontSizeMap[key] || "16px";
+}
+function getFontWeightValue(key) {
+  const fontWeightMap = {
+    light: "300",
+    regular: "400",
+    medium: "500",
+    semiBold: "600",
+    bold: "700"
+  };
+  return fontWeightMap[key] || "400";
+}
+function applySpacing(style, property, value) {
+  if (typeof value === "string" && value.startsWith("$")) {
+    const tokenValue = processToken(value);
+    const spaceValue = getSpaceValue(tokenValue);
+    if (spaceValue !== "0px") {
+      style[property] = spaceValue;
+    }
+  } else {
+    style[property] = value;
+  }
+}
+function applyRadii(style, property, value) {
+  if (typeof value === "string" && value.startsWith("$")) {
+    const tokenValue = processToken(value);
+    const radiiValue = getRadiiValue(tokenValue);
+    if (radiiValue !== "0px") {
+      style[property] = radiiValue;
+    }
+  } else {
+    style[property] = value;
+  }
+}
+function applyColor(style, property, value, colors) {
+  if (typeof value === "string" && value.startsWith("$")) {
+    const colorToken = value.slice(1);
+    if (colors && colorToken in colors) {
+      style[property] = colors[colorToken];
+    } else {
+      style[property] = value;
+    }
+  } else {
+    style[property] = value;
+  }
+}
+function applySize(style, property, value) {
+  if (typeof value === "string" && value.startsWith("$")) {
+    const tokenValue = processToken(value);
+    const sizeValue = getSizeValue(tokenValue);
+    style[property] = sizeValue;
+  } else {
+    style[property] = value;
+  }
+}
+function processCSSProp(css = {}, colors) {
+  const style = {};
+  const vars = {};
+  Object.entries(css).forEach(([key, value]) => {
+    switch (key) {
+      case "p":
+      case "padding":
+        applySpacing(style, "padding", value);
+        break;
+      case "pt":
+      case "paddingTop":
+        applySpacing(style, "paddingTop", value);
+        break;
+      case "pr":
+      case "paddingRight":
+        applySpacing(style, "paddingRight", value);
+        break;
+      case "pb":
+      case "paddingBottom":
+        applySpacing(style, "paddingBottom", value);
+        break;
+      case "pl":
+      case "paddingLeft":
+        applySpacing(style, "paddingLeft", value);
+        break;
+      case "px":
+        applySpacing(style, "paddingLeft", value);
+        applySpacing(style, "paddingRight", value);
+        break;
+      case "py":
+        applySpacing(style, "paddingTop", value);
+        applySpacing(style, "paddingBottom", value);
+        break;
+      case "m":
+      case "margin":
+        applySpacing(style, "margin", value);
+        break;
+      case "mt":
+      case "marginTop":
+        applySpacing(style, "marginTop", value);
+        break;
+      case "mr":
+      case "marginRight":
+        applySpacing(style, "marginRight", value);
+        break;
+      case "mb":
+      case "marginBottom":
+        applySpacing(style, "marginBottom", value);
+        break;
+      case "ml":
+      case "marginLeft":
+        applySpacing(style, "marginLeft", value);
+        break;
+      case "mx":
+        applySpacing(style, "marginLeft", value);
+        applySpacing(style, "marginRight", value);
+        break;
+      case "my":
+        applySpacing(style, "marginTop", value);
+        applySpacing(style, "marginBottom", value);
+        break;
+      case "ta":
+        style.textAlign = value;
+        break;
+      case "fd":
+        style.flexDirection = value;
+        break;
+      case "fw":
+        style.flexWrap = value;
+        break;
+      case "ai":
+        style.alignItems = value;
+        break;
+      case "ac":
+        style.alignContent = value;
+        break;
+      case "jc":
+        style.justifyContent = value;
+        break;
+      case "as":
+        style.alignSelf = value;
+        break;
+      case "fg":
+        style.flexGrow = value;
+        break;
+      case "fs":
+        style.flexShrink = value;
+        break;
+      case "fb":
+        applySize(style, "flexBasis", value);
+        break;
+      case "bc":
+      case "backgroundColor":
+        applyColor(style, "backgroundColor", value, colors);
+        break;
+      case "br":
+      case "borderRadius":
+        applyRadii(style, "borderRadius", value);
+        break;
+      case "btrr":
+      case "borderTopRightRadius":
+        applyRadii(style, "borderTopRightRadius", value);
+        break;
+      case "bbrr":
+      case "borderBottomRightRadius":
+        applyRadii(style, "borderBottomRightRadius", value);
+        break;
+      case "bblr":
+      case "borderBottomLeftRadius":
+        applyRadii(style, "borderBottomLeftRadius", value);
+        break;
+      case "btlr":
+      case "borderTopLeftRadius":
+        applyRadii(style, "borderTopLeftRadius", value);
+        break;
+      case "bs":
+      case "boxShadow":
+        style.boxShadow = value;
+        break;
+      case "c":
+      case "color":
+        applyColor(style, "color", value, colors);
+        break;
+      case "fontSize":
+        if (typeof value === "string") {
+          const fontSizeValue = getFontSizeValue(value);
+          if (fontSizeValue !== "16px") {
+            style.fontSize = fontSizeValue;
+          }
+        }
+        break;
+      case "fontWeight":
+        if (typeof value === "string") {
+          const fontWeightValue = getFontWeightValue(value);
+          if (fontWeightValue !== "400") {
+            style.fontWeight = fontWeightValue;
+          }
+        }
+        break;
+      case "lh":
+        style.lineHeight = value;
+        break;
+      case "width":
+      case "w":
+        applySize(style, "width", value);
+        break;
+      case "height":
+      case "h":
+        applySize(style, "height", value);
+        break;
+      case "size":
+        applySize(style, "width", value);
+        applySize(style, "height", value);
+        break;
+      case "ox":
+        style.overflowX = value;
+        break;
+      case "oy":
+        style.overflowY = value;
+        break;
+      case "pe":
+        style.pointerEvents = value;
+        break;
+      case "us":
+        style.userSelect = value;
+        break;
+      default:
+        if (typeof value === "string" && value.startsWith("$")) {
+          const tokenValue = processToken(value);
+          const spaceValue = getSpaceValue(tokenValue);
+          if (spaceValue !== "0px") {
+            style[key] = spaceValue;
+            break;
+          }
+          const sizeValue = getSizeValue(tokenValue);
+          if (sizeValue !== tokenValue) {
+            style[key] = sizeValue;
+            break;
+          }
+          const radiiValue = getRadiiValue(tokenValue);
+          if (radiiValue !== "0px") {
+            style[key] = radiiValue;
+            break;
+          }
+          if (colors && tokenValue in colors) {
+            style[key] = colors[tokenValue];
+            break;
+          }
+          style[key] = value;
+        } else {
+          style[key] = value;
+        }
+        break;
+    }
+  });
+  return { style, vars };
+}
+export {
+  processCSSProp
+};
+//# sourceMappingURL=cssProps.js.map