styled-proper/dist/index.mjs.map

A styled-components utility to apply dynamic styles via props with support for pseudo-classes, media queries, and more.

{"version":3,"sources":["../src/main.ts","../src/constants/sizes.ts","../src/constants/pseudo-props.ts","../src/constants/options.ts","../src/utils/units-generator.ts","../src/constants/css-props.ts","../src/constants/pseudo-styles.ts","../src/utils/object.ts","../src/components.ts","../src/index.ts"],"sourcesContent":["import { default as st } from 'styled-components';\r\nimport shouldForwardProp from '@styled-system/should-forward-prop';\r\nimport { CSS_PROPS, MEDIA, PSEUDO_PROPS, PSEUDOS } from './constants';\r\nimport { isEmptyObject, mergeObjectDeep } from './utils/object';\r\n\r\nfunction getObjectStyle(alias: string, value: string): object {\r\n    const isPreset = CSS_PROPS[alias]?.isPreset;\r\n    const option = CSS_PROPS[alias]?.options?.[value];\r\n    const _value = !option && isPreset ? value?.split(',') : value;\r\n    return CSS_PROPS[alias]?.getStyles(option ?? _value);\r\n}\r\n\r\nfunction getPseudoStyles(pseudoList: string[], rule: object): object {\r\n    let rules = {};\r\n\r\n    if (pseudoList?.length > 0) {\r\n        const ITEMS = [...pseudoList].reverse();\r\n        for (let e in ITEMS) {\r\n            const ITEM = ITEMS[e];\r\n            const pseudoRegex = /([a-zA-Z]+)\\(([^)]+)\\)/;\r\n            const combinatorsRegex = /^(&.{0,1})\\s*(.*)$/;\r\n            const pseudo = pseudoRegex.exec(ITEM);\r\n            const combinator = combinatorsRegex.exec(ITEM);\r\n\r\n            const keyStyle = pseudo?.[1] ?? combinator?.[1] ?? ITEM;\r\n            const param = pseudo?.[2] ?? combinator?.[2];\r\n            const styleFunction = PSEUDOS[keyStyle];\r\n\r\n            if (e === '0' && styleFunction) {\r\n                const pseudoRule = styleFunction(rule, param);\r\n                rules = { ...rules, ...pseudoRule };\r\n                continue;\r\n            }\r\n\r\n            if (styleFunction) {\r\n                const pseudoRule = styleFunction(rules, param);\r\n                rules = { ...pseudoRule };\r\n            }\r\n        }\r\n    }\r\n\r\n    return rules;\r\n}\r\n\r\nfunction parseValue(str: string): {\r\n    pseudoList: string[];\r\n    aliasMedia: string;\r\n    propValue: string;\r\n} {\r\n    const pseudoRegex = /(::?\\w+(?:\\([^()]*\\))?)|(&\\s*[+~> ]\\s*\\w+)/g;\r\n    const mediaRegex = /@(\\w+)/;\r\n    const bracketRegex = /\\[([^[\\]]+)\\]/; // Captura lo que hay dentro de [ ]\r\n    const valueRegex = /=([^=]*)$/;\r\n\r\n    const pseudoList = Array.from(str.matchAll(pseudoRegex)).map((match) => match[0]?.replace(/^:+/, ''));\r\n    const mediaMatch = mediaRegex.exec(str);\r\n    const aliasMedia = mediaMatch ? mediaMatch[1] : '';\r\n\r\n    const bracketMatch = bracketRegex.exec(str);\r\n    let propValue;\r\n\r\n    if (bracketMatch) {\r\n        // Si hay corchetes, devolver el contenido dentro de ellos\r\n        propValue = bracketMatch[1];\r\n    } else {\r\n        const valueMatch = valueRegex.exec(str);\r\n        if (valueMatch) {\r\n            // Si no hay corchetes, devolver el valor después de `=`\r\n            propValue = valueMatch[1];\r\n        } else if (pseudoList.length > 0 || aliasMedia) {\r\n            propValue = '';\r\n        } else {\r\n            propValue = str;\r\n        }\r\n    }\r\n\r\n    return { pseudoList, aliasMedia, propValue };\r\n}\r\n\r\nfunction getPropRules(alias: string, values: string[]) {\r\n    const rules = values.reduce((acc, value) => {\r\n        const { pseudoList, aliasMedia, propValue } = parseValue(value);\r\n        const rule = getObjectStyle(alias, propValue);\r\n        const pseudoRules = getPseudoStyles(pseudoList, rule);\r\n        let rules = isEmptyObject(pseudoRules) ? rule : pseudoRules;\r\n\r\n        if (aliasMedia) {\r\n            const media = MEDIA[aliasMedia];\r\n            const result = { [media]: rules };\r\n            acc = mergeObjectDeep(acc, result);\r\n            return acc;\r\n        }\r\n\r\n        acc = mergeObjectDeep(acc, rules);\r\n\r\n        return acc;\r\n    }, {});\r\n\r\n    return rules;\r\n}\r\n\r\nfunction getStyles(props: object): Record<string, string | number> {\r\n    const PROPS = Object.entries(props).filter(([alias]) => CSS_PROPS[alias]);\r\n    const PSEUDOPROPS = Object.entries(props).filter(([alias]) => PSEUDO_PROPS[alias]);\r\n\r\n    const processValues = (alias: string, input: string, pseudoParam?: string) => {\r\n        const values = input.split('|');\r\n\r\n        return values.reduce((acc, value) => {\r\n            const { pseudoList, aliasMedia, propValue } = parseValue(value);\r\n\r\n            let rules = propValue.split(';').reduce((acc, prop) => {\r\n                const [aliasProp, propValue] = prop.split('=');\r\n                const rule = getObjectStyle(aliasProp, propValue);\r\n                return mergeObjectDeep(acc, rule);\r\n            }, {});\r\n\r\n            const pseudoRules = getPseudoStyles(pseudoList, rules);\r\n\r\n            rules = isEmptyObject(pseudoRules) ? rules : pseudoRules;\r\n            rules = PSEUDO_PROPS[alias](rules, pseudoParam);\r\n\r\n            if (aliasMedia) {\r\n                const media = MEDIA[aliasMedia];\r\n                return mergeObjectDeep(acc, { [media]: rules });\r\n            }\r\n\r\n            return mergeObjectDeep(acc, rules);\r\n        }, {});\r\n    };\r\n\r\n    const propStyles = PROPS.reduce((acc, [alias, input]) => {\r\n        if (!input) {\r\n            console.error(`The prop ${alias} has no content`);\r\n            return acc;\r\n        }\r\n\r\n        const values = input.split('|');\r\n        const rules = getPropRules(alias, values);\r\n        return mergeObjectDeep(acc, rules);\r\n    }, {});\r\n\r\n    const pseudoStyles = PSEUDOPROPS.reduce((acc, [alias, input]) => {\r\n        if (!input) {\r\n            console.error(`The prop ${alias} has no content`);\r\n            return acc;\r\n        }\r\n\r\n        if (typeof input === 'string') {\r\n            const rules = processValues(alias, input);\r\n            return mergeObjectDeep(acc, rules);\r\n        }\r\n\r\n        if (Array.isArray(input)) {\r\n            const [pseudoParam, propValue] = input;\r\n            const rules = processValues(alias, propValue, pseudoParam);\r\n            return mergeObjectDeep(acc, rules);\r\n        }\r\n\r\n        return acc;\r\n    }, {});\r\n\r\n    return { ...propStyles, ...pseudoStyles };\r\n}\r\n\r\nconst styled = (c: keyof JSX.IntrinsicElements | React.ComponentType<any>) => st(c).withConfig({ shouldForwardProp });\r\n\r\nconst Proper = (el: keyof JSX.IntrinsicElements | React.ComponentType<any>) => styled(el)((props) => getStyles(props));\r\n\r\nexport default Proper;\r\n","export const MEDIA: Record<string, string> = {\r\n    sm: '@media (min-width: 640px)',\r\n    md: '@media (min-width: 768px)',\r\n    lg: '@media (min-width: 1024px)',\r\n    xl: '@media (min-width: 1280px)',\r\n    '2xl': '@media (min-width: 1536px)',\r\n};\r\n","interface Pseudos {\r\n    [key: string]: (rule: object, param?: string) => object;\r\n}\r\n\r\nconst PSEUDO_ELEMENTS_PROPS: Pseudos = {\r\n    before: (rule) => ({ '&::before': rule }),\r\n    after: (rule) => ({ '&::after': rule }),\r\n    firstLetter: (rule) => ({ '&::first-letter': rule }),\r\n    firstLine: (rule) => ({ '&::first-line': rule }),\r\n    selection: (rule) => ({ '&::selection': rule }),\r\n    marker: (rule) => ({ '&::marker': rule }),\r\n    placeholder: (rule) => ({ '&::placeholder': rule }),\r\n    backdrop: (rule) => ({ '&::backdrop': rule }),\r\n};\r\n\r\nconst PSEUDO_CLASSES_PROPS: Pseudos = {\r\n    hover: (rule) => ({ '&:hover': rule }),\r\n    focus: (rule) => ({ '&:focus': rule }),\r\n    active: (rule) => ({ '&:active': rule }),\r\n    lastChild: (rule) => ({ '&:last-child': rule }),\r\n    firstChild: (rule) => ({ '&:first-child': rule }),\r\n    nthChild: (rule, param) => ({ [`&:nth-child(${param})`]: rule }),\r\n    nthOfType: (rule, param) => ({ [`&:nth-of-type(${param})`]: rule }),\r\n    lastOfType: (rule) => ({ '&:last-of-type': rule }),\r\n    firstOfType: (rule) => ({ '&:first-of-type': rule }),\r\n    not: (rule, param) => ({ [`&:not(${param})`]: rule }),\r\n    empty: (rule) => ({ '&:empty': rule }),\r\n    checked: (rule) => ({ '&:checked': rule }),\r\n    disabled: (rule) => ({ '&:disabled': rule }),\r\n    enabled: (rule) => ({ '&:enabled': rule }),\r\n    visited: (rule) => ({ '&:visited': rule }),\r\n    link: (rule) => ({ '&:link': rule }),\r\n    target: (rule) => ({ '&:target': rule }),\r\n    focusWithin: (rule) => ({ '&:focus-within': rule }),\r\n    focusVisible: (rule) => ({ '&:focus-visible': rule }),\r\n    onlyChild: (rule) => ({ '&:only-child': rule }),\r\n    onlyOfType: (rule) => ({ '&:only-of-type': rule }),\r\n    readOnly: (rule) => ({ '&:read-only': rule }),\r\n    readWrite: (rule) => ({ '&:read-write': rule }),\r\n    placeholderShown: (rule) => ({ '&:placeholder-shown': rule }),\r\n};\r\n\r\nconst COMBINATORS_PROPS: Pseudos = {\r\n    descendant: (rule, param) => ({ [`& ${param}`]: rule }),\r\n    directChild: (rule, param) => ({ [`& > ${param}`]: rule }),\r\n    adjacentSibling: (rule, param) => ({ [`& + ${param}`]: rule }),\r\n    generalSibling: (rule, param) => ({ [`& ~ ${param}`]: rule }),\r\n};\r\n\r\nexport const PSEUDO_PROPS = {\r\n    ...PSEUDO_ELEMENTS_PROPS,\r\n    ...PSEUDO_CLASSES_PROPS,\r\n    ...COMBINATORS_PROPS,\r\n};\r\n","export const OPTIONS_FLEX_DIRECTION: Record<string, string> = {\r\n    row: 'row', // Alinea los elementos en una fila de izquierda a derecha (o según el flujo de texto)\r\n    rowReverse: 'row-reverse', // Alinea los elementos en una fila de derecha a izquierda\r\n    col: 'column', // Alinea los elementos en una columna de arriba hacia abajo\r\n    colReverse: 'column-reverse', // Alinea los elementos en una columna de abajo hacia arriba\r\n    initial: 'initial', // Restaura al valor por defecto de CSS\r\n    inherit: 'inherit', // Hereda el valor de `flex-direction` del elemento padre\r\n    unset: 'unset', // Resetea el valor al definido en CSS o hereda si es posible\r\n};\r\n\r\nexport const OPTIONS_FLEX_JUSTIFY_CONTENT: Record<string, string> = {\r\n    default: 'flex-start', // Valor por defecto en Flexbox y Grid\r\n    flexStart: 'flex-start',\r\n    flexEnd: 'flex-end',\r\n    center: 'center',\r\n    between: 'space-between',\r\n    around: 'space-around',\r\n    evenly: 'space-evenly',\r\n    start: 'start', // Solo en CSS Grid\r\n    end: 'end', // Solo en CSS Grid\r\n    left: 'left', // Solo en CSS Grid\r\n    right: 'right', // Solo en CSS Grid\r\n    initial: 'initial', // Restaura al valor por defecto de CSS\r\n    auto: 'auto', // Usa el comportamiento del navegador o contenedor\r\n};\r\n\r\nexport const OPTIONS_FLEX_ALIGN_ITEMS: Record<string, string> = {\r\n    default: 'stretch', // Valor por defecto\r\n    stretch: 'stretch', // Estira los elementos para llenar el contenedor en el eje cruzado\r\n    flexStart: 'flex-start', // Alinea los elementos al inicio del contenedor en el eje cruzado\r\n    flexEnd: 'flex-end', // Alinea los elementos al final del contenedor en el eje cruzado\r\n    center: 'center', // Alinea los elementos en el centro del contenedor en el eje cruzado\r\n    baseline: 'baseline', // Alinea los elementos según su línea base de texto\r\n    start: 'start', // Alinea al inicio según el writing mode (CSS Grid)\r\n    end: 'end', // Alinea al final según el writing mode (CSS Grid)\r\n    initial: 'initial', // Restaura al valor por defecto de CSS\r\n    auto: 'auto', // Usa el comportamiento predeterminado del contenedor o navegador\r\n};\r\n","export const REM_CASES: Record<string, string> = Object.fromEntries(Array.from({ length: 100 }, (_, i) => (i === 0 ? ['0', '0px'] : [String(i), `${i * 0.125}rem`])));\r\nexport const FRACTION_CASES: Record<string, string> = {\r\n    '1/2': '50%',\r\n    '1/3': '33.3333%',\r\n    '2/3': '66.6667%',\r\n    '1/4': '25%',\r\n    '2/4': '50%',\r\n    '3/4': '75%',\r\n    '1/5': '20%',\r\n    '2/5': '40%',\r\n    '3/5': '60%',\r\n    '4/5': '80%',\r\n    '1/6': '16.6667%',\r\n    '2/6': '33.3333%',\r\n    '3/6': '50%',\r\n    '4/6': '66.6667%',\r\n    '5/6': '83.3333%',\r\n    '1/12': '8.3333%',\r\n    '2/12': '16.6667%',\r\n    '3/12': '25%',\r\n    '4/12': '33.3333%',\r\n    '5/12': '41.6667%',\r\n    '6/12': '50%',\r\n    '7/12': '58.3333%',\r\n    '8/12': '66.6667%',\r\n    '9/12': '75%',\r\n    '10/12': '83.3333%',\r\n    '11/12': '91.6667%',\r\n    full: '100%',\r\n};\r\n\r\nexport const COLOR_CASES: Record<string, string> = {\r\n    'blue-100': '#bfdbfe;',\r\n    'blue-200': '#93c5fd;',\r\n    'blue-300': '#60a5fa;',\r\n    'blue-400': '#3b82f6;',\r\n    'blue-500': '#2563eb;',\r\n    'blue-600': '#1d4ed8;',\r\n    'blue-700': '#1e40af;',\r\n    'blue-800': '#1e3a8a;',\r\n    'blue-900': '#1e3a73;',\r\n\r\n    // Indigo\r\n    'indigo-100': '#e0e7ff;',\r\n    'indigo-200': '#c7d2fe;',\r\n    'indigo-300': '#a5b4fc;',\r\n    'indigo-400': '#818cf8;',\r\n    'indigo-500': '#6366f1;',\r\n    'indigo-600': '#4f46e5;',\r\n    'indigo-700': '#4338ca;',\r\n    'indigo-800': '#3730a3;',\r\n    'indigo-900': '#312e81;',\r\n\r\n    // Purple\r\n    'purple-100': '#f3e8ff;',\r\n    'purple-200': '#e9d5ff;',\r\n    'purple-300': '#d8b4fe;',\r\n    'purple-400': '#c084fc;',\r\n    'purple-500': '#a855f7;',\r\n    'purple-600': '#9333ea;',\r\n    'purple-700': '#7e22ce;',\r\n    'purple-800': '#6b21a8;',\r\n    'purple-900': '#581c87;',\r\n\r\n    // Pink\r\n    'pink-100': '#fbcfe8;',\r\n    'pink-200': '#f9a8d4;',\r\n    'pink-300': '#f472b6;',\r\n    'pink-400': '#ec4899;',\r\n    'pink-500': '#db2777;',\r\n    'pink-600': '#be185d;',\r\n    'pink-700': '#9d174d;',\r\n    'pink-800': '#831843;',\r\n    'pink-900': '#701a3c;',\r\n\r\n    // Red\r\n    'red-100': '#fee2e2;',\r\n    'red-200': '#fecaca;',\r\n    'red-300': '#fca5a5;',\r\n    'red-400': '#f87171;',\r\n    'red-500': '#ef4444;',\r\n    'red-600': '#dc2626;',\r\n    'red-700': '#b91c1c;',\r\n    'red-800': '#991b1b;',\r\n    'red-900': '#7f1d1d;',\r\n\r\n    // Orange\r\n    'orange-100': '#ffedd5;',\r\n    'orange-200': '#fed7aa;',\r\n    'orange-300': '#fdba74;',\r\n    'orange-400': '#fb923c;',\r\n    'orange-500': '#f97316;',\r\n    'orange-600': '#ea580c;',\r\n    'orange-700': '#c2410c;',\r\n    'orange-800': '#9a3412;',\r\n    'orange-900': '#7c2d12;',\r\n\r\n    // Yellow\r\n    'yellow-100': '#fef9c3;',\r\n    'yellow-200': '#fef08a;',\r\n    'yellow-300': '#fde047;',\r\n    'yellow-400': '#facc15;',\r\n    'yellow-500': '#eab308;',\r\n    'yellow-600': '#ca8a04;',\r\n    'yellow-700': '#a16207;',\r\n    'yellow-800': '#854d0e;',\r\n    'yellow-900': '#713f12;',\r\n\r\n    // Green\r\n    'green-100': '#d1fae5;',\r\n    'green-200': '#a7f3d0;',\r\n    'green-300': '#6ee7b7;',\r\n    'green-400': '#34d399;',\r\n    'green-500': '#10b981;',\r\n    'green-600': '#059669;',\r\n    'green-700': '#047857;',\r\n    'green-800': '#065f46;',\r\n    'green-900': '#064e3b;',\r\n\r\n    // Teal\r\n    'teal-100': '#ccfbf1;',\r\n    'teal-200': '#99f6e4;',\r\n    'teal-300': '#5eead4;',\r\n    'teal-400': '#2dd4bf;',\r\n    'teal-500': '#14b8a6;',\r\n    'teal-600': '#0d9488;',\r\n    'teal-700': '#0f766e;',\r\n    'teal-800': '#115e59;',\r\n    'teal-900': '#134e4a;',\r\n\r\n    // Cyan\r\n    'cyan-100': '#cffafe;',\r\n    'cyan-200': '#a5f3fc;',\r\n    'cyan-300': '#67e8f9;',\r\n    'cyan-400': '#22d3ee;',\r\n    'cyan-500': '#06b6d4;',\r\n    'cyan-600': '#0891b2;',\r\n    'cyan-700': '#0e7490;',\r\n    'cyan-800': '#155e75;',\r\n    'cyan-900': '#164e63;',\r\n\r\n    // Gray\r\n    'gray-100': '#f3f4f6;',\r\n    'gray-200': '#e5e7eb;',\r\n    'gray-300': '#d1d5db;',\r\n    'gray-400': '#9ca3af;',\r\n    'gray-500': '#6b7280;',\r\n    'gray-600': '#4b5563;',\r\n    'gray-700': '#374151;',\r\n    'gray-800': '#1f2937;',\r\n    'gray-900': '#111827;',\r\n\r\n    // Gray-Dark\r\n    'gray-dark-100': '#d3d3d3;',\r\n    'gray-dark-200': '#bababa;',\r\n    'gray-dark-300': '#9f9f9f;',\r\n    'gray-dark-400': '#7f7f7f;',\r\n    'gray-dark-500': '#666666;',\r\n    'gray-dark-600': '#4c4c4c;',\r\n    'gray-dark-700': '#333333;',\r\n    'gray-dark-800': '#1a1a1a;',\r\n    'gray-dark-900': '#0d0d0d;',\r\n\r\n    // Error\r\n    'error-100': '#f9d4d9',\r\n    'error-200': '#f3a9b2',\r\n    'error-300': '#ec7d8b',\r\n    'error-400': '#e65363',\r\n    'error-500': '#a6192e',\r\n    'error-600': '#850f22',\r\n    'error-700': '#660818',\r\n    'error-800': '#48040f',\r\n    'error-900': '#2f0209',\r\n\r\n    // Warning\r\n    'warning-100': '#fff4d4',\r\n    'warning-200': '#ffe9a9',\r\n    'warning-300': '#ffde7d',\r\n    'warning-400': '#ffd353',\r\n    'warning-500': '#ff9900',\r\n    'warning-600': '#cc7a00',\r\n    'warning-700': '#995c00',\r\n    'warning-800': '#663d00',\r\n    'warning-900': '#331f00',\r\n\r\n    // Success\r\n    'success-100': '#d2f7dd',\r\n    'success-200': '#a6efba',\r\n    'success-300': '#79e798',\r\n    'success-400': '#4cdf75',\r\n    'success-500': '#04b34f',\r\n    'success-600': '#038f3e',\r\n    'success-700': '#026b2e',\r\n    'success-800': '#01471d',\r\n    'success-900': '#00230d',\r\n\r\n    // Information\r\n    'info-100': '#d4e6f9',\r\n    'info-200': '#a9cdf3',\r\n    'info-300': '#7db5ec',\r\n    'info-400': '#539ce6',\r\n    'info-500': '#0057b8',\r\n    'info-600': '#004490',\r\n    'info-700': '#003168',\r\n    'info-800': '#001e40',\r\n    'info-900': '#000b20',\r\n};\r\n","import { REM_CASES, FRACTION_CASES, COLOR_CASES } from '../utils/units-generator';\r\nimport { OPTIONS_FLEX_DIRECTION, OPTIONS_FLEX_JUSTIFY_CONTENT, OPTIONS_FLEX_ALIGN_ITEMS } from './options';\r\n\r\ninterface PropInterface {\r\n    [key: string]: {\r\n        getStyles: (value: string | string[]) => object;\r\n        options?: {\r\n            [key: string]: string;\r\n        };\r\n        isPreset?: boolean;\r\n    };\r\n}\r\n\r\nconst LAYOUT_PROPS: PropInterface = {\r\n    aspect: {\r\n        getStyles: (value) => ({ 'aspect-ratio': value }),\r\n        options: {\r\n            auto: 'auto',\r\n            square: '1 / 1',\r\n            widescreen: '16 / 9',\r\n            standard: '4 / 3',\r\n            photo: '3 / 2',\r\n            cinema: '2.39 / 1',\r\n            ultrawide: '21 / 9',\r\n            vertical: '9 / 16',\r\n        },\r\n    },\r\n    columns: {\r\n        getStyles: (value) => ({ columns: value }),\r\n    },\r\n    columnCount: {\r\n        getStyles: (value) => ({ 'column-count': value }),\r\n    },\r\n    columnFill: {\r\n        getStyles: (value) => ({ 'column-fill': value }),\r\n    },\r\n    columnsGap: {\r\n        getStyles: (value) => ({ 'column-gap': value }),\r\n    },\r\n    columnRule: {\r\n        getStyles: (value) => ({ 'column-rule': value }),\r\n    },\r\n    columnRuleColor: {\r\n        getStyles: (value) => ({ 'column-rule-color': value }),\r\n    },\r\n    columnRuleStyle: {\r\n        getStyles: (value) => ({ 'column-rule-style': value }),\r\n    },\r\n    columnRuleWidth: {\r\n        getStyles: (value) => ({ 'column-rule-width': value }),\r\n    },\r\n    columnSpan: {\r\n        getStyles: (value) => ({ 'column-span': value }),\r\n    },\r\n    columnWidth: {\r\n        getStyles: (value) => ({ 'column-width': value }),\r\n    },\r\n    breakAfter: {\r\n        getStyles: (value) => ({ 'break-after': value }),\r\n        options: {\r\n            auto: 'auto',\r\n            avoid: 'avoid',\r\n            all: 'all',\r\n            avoidPage: 'avoid-page',\r\n            page: 'page',\r\n            left: 'left',\r\n            right: 'right',\r\n            column: 'column',\r\n        },\r\n    },\r\n    breakBefore: {\r\n        getStyles: (value) => ({ 'break-before': value }),\r\n        options: {\r\n            auto: 'auto',\r\n            avoid: 'avoid',\r\n            all: 'all',\r\n            avoidPage: 'avoid-page',\r\n            page: 'page',\r\n            left: 'left',\r\n            right: 'right',\r\n            column: 'column',\r\n        },\r\n    },\r\n    breakInside: {\r\n        getStyles: (value) => ({ 'break-inside': value }),\r\n        options: {\r\n            auto: 'auto',\r\n            avoid: 'avoid',\r\n            avoidPage: 'avoid-page',\r\n            avoidColumn: 'avoid-column',\r\n        },\r\n    },\r\n    boxDecorationBreak: {\r\n        getStyles: (value) => ({ 'box-decoration-break': value }),\r\n        options: {\r\n            slice: 'slice',\r\n            clone: 'clone',\r\n        },\r\n    },\r\n    boxSizing: {\r\n        getStyles: (value) => ({ 'box-sizing': value }),\r\n        options: {\r\n            border: 'border-box',\r\n            content: 'content-box',\r\n        },\r\n    },\r\n    display: {\r\n        getStyles: (value) => ({ display: value }),\r\n        options: {\r\n            hidden: 'none',\r\n            block: 'block',\r\n            inline: 'inline',\r\n            flex: 'flex',\r\n            grid: 'grid',\r\n            table: 'table',\r\n            inlineBlock: 'inline-block',\r\n            inlineFlex: 'inline-flex',\r\n            inlineGrid: 'inline-grid',\r\n            inlineTable: 'inline-table',\r\n            tableCaption: 'table-caption',\r\n            tableCell: 'table-cell',\r\n            tableColumn: 'table-column',\r\n            tableRowGroup: 'table-row-group',\r\n            tableRow: 'table-row',\r\n            flowRoot: 'flow-root',\r\n            contents: 'contents',\r\n            listItem: 'list-item',\r\n            tableColumnGroup: 'table-column-group',\r\n            tableFooterGroup: 'table-footer-group',\r\n            tableHeaderGroup: 'table-header-group',\r\n        },\r\n    },\r\n    float: {\r\n        getStyles: (value) => ({ float: value }),\r\n        options: {\r\n            start: 'inline-start',\r\n            end: 'inline-end',\r\n            left: 'left',\r\n            right: 'right',\r\n            none: 'none',\r\n        },\r\n    },\r\n    clear: {\r\n        getStyles: (value) => ({ clear: value }),\r\n        options: {\r\n            none: 'none',\r\n            start: 'inline-start',\r\n            end: 'inline-end',\r\n            left: 'left',\r\n            right: 'right',\r\n            both: 'both',\r\n        },\r\n    },\r\n    isolation: {\r\n        getStyles: (value) => ({ isolation: value }),\r\n        options: {\r\n            auto: 'auto',\r\n            isolate: 'isolate',\r\n        },\r\n    },\r\n    objectFit: {\r\n        getStyles: (value) => ({ 'object-fit': value }),\r\n        options: {\r\n            contain: 'contain',\r\n            cover: 'cover',\r\n            fill: 'fill',\r\n            none: 'none',\r\n            scaleDown: 'scale-down',\r\n        },\r\n    },\r\n    objectPosition: {\r\n        getStyles: (value) => ({ 'object-position': value }),\r\n        options: {\r\n            bottom: 'bottom',\r\n            center: 'center',\r\n            left: 'left',\r\n            leftBottom: 'left bottom',\r\n            leftTop: 'left top',\r\n            right: 'right',\r\n            rightBottom: 'right bottom',\r\n            rightTop: 'right top',\r\n            top: 'top',\r\n        },\r\n    },\r\n    overflow: {\r\n        getStyles: (value) => ({ overflow: value }),\r\n        options: {\r\n            auto: 'auto',\r\n            hidden: 'hidden',\r\n            clip: 'clip',\r\n            visible: 'visible',\r\n            scroll: 'scroll',\r\n        },\r\n    },\r\n    overflowX: {\r\n        getStyles: (value) => ({ 'overflow-x': value }),\r\n        options: {\r\n            auto: 'auto',\r\n            hidden: 'hidden',\r\n            clip: 'clip',\r\n            visible: 'visible',\r\n            scroll: 'scroll',\r\n        },\r\n    },\r\n    overflowY: {\r\n        getStyles: (value) => ({ 'overflow-y': value }),\r\n        options: {\r\n            auto: 'auto',\r\n            hidden: 'hidden',\r\n            clip: 'clip',\r\n            visible: 'visible',\r\n            scroll: 'scroll',\r\n        },\r\n    },\r\n    overflowWrap: {\r\n        getStyles: (value) => ({ 'overflow-wrap': value }),\r\n        options: {\r\n            normal: 'normal',\r\n            breakWord: 'break-word',\r\n            anywhere: 'anywhere',\r\n        },\r\n    },\r\n    overscrollBehavior: {\r\n        getStyles: (value) => ({ 'overscroll-behavior': value }),\r\n        options: {\r\n            auto: 'auto',\r\n            contain: 'contain',\r\n            none: 'none',\r\n        },\r\n    },\r\n    overscrollBehaviorX: {\r\n        getStyles: (value) => ({ 'overscroll-behavior-x': value }),\r\n        options: {\r\n            auto: 'auto',\r\n            contain: 'contain',\r\n            none: 'none',\r\n        },\r\n    },\r\n    overscrollBehaviorY: {\r\n        getStyles: (value) => ({ 'overscroll-behavior-y': value }),\r\n        options: {\r\n            auto: 'auto',\r\n            contain: 'contain',\r\n            none: 'none',\r\n        },\r\n    },\r\n    position: {\r\n        getStyles: (value) => ({ position: value }),\r\n        options: {\r\n            static: 'static',\r\n            relative: 'relative',\r\n            absolute: 'absolute',\r\n            fixed: 'fixed',\r\n            sticky: 'sticky',\r\n        },\r\n    },\r\n    top: {\r\n        getStyles: (value) => ({ top: value }),\r\n        options: { ...REM_CASES },\r\n    },\r\n    right: {\r\n        getStyles: (value) => ({ right: value }),\r\n        options: { ...REM_CASES },\r\n    },\r\n    bottom: {\r\n        getStyles: (value) => ({ bottom: value }),\r\n        options: { ...REM_CASES },\r\n    },\r\n    left: {\r\n        getStyles: (value) => ({ left: value }),\r\n        options: { ...REM_CASES },\r\n    },\r\n    inset: {\r\n        getStyles: (value) => ({ inset: value }),\r\n        options: { ...REM_CASES },\r\n    },\r\n    visibility: {\r\n        getStyles: (value) => ({ visibility: value }),\r\n        options: {\r\n            visible: 'visible',\r\n            hidden: 'hidden',\r\n            collapse: 'collapse',\r\n        },\r\n    },\r\n    zIndex: {\r\n        getStyles: (value) => ({ 'z-index': value }),\r\n    },\r\n};\r\n\r\nconst FLEXBOX_AND_GRID_PROPS: PropInterface = {\r\n    basis: {\r\n        getStyles: (value) => ({ 'flex-basis': value }),\r\n        options: {\r\n            auto: 'auto',\r\n            ...REM_CASES,\r\n            ...FRACTION_CASES,\r\n        },\r\n    },\r\n    flexDirection: {\r\n        getStyles: (value) => ({ 'flex-direction': value }),\r\n        options: {\r\n            row: 'row',\r\n            rowReverse: 'row-reverse',\r\n            column: 'column',\r\n            columnReverse: 'column-reverse',\r\n        },\r\n    },\r\n    flexWrap: {\r\n        getStyles: (value) => ({ 'flex-wrap': value }),\r\n        options: {\r\n            nowrap: 'nowrap',\r\n            wrap: 'wrap',\r\n            wrapReverse: 'wrap-reverse',\r\n        },\r\n    },\r\n    flex: {\r\n        getStyles: (value) => ({ flex: value }),\r\n        options: {\r\n            1: '1 1 0%',\r\n            auto: '1 1 auto',\r\n            initial: '0 1 auto',\r\n            none: 'none',\r\n        },\r\n    },\r\n    flexGrow: {\r\n        getStyles: (value) => ({ 'flex-grow': value }),\r\n    },\r\n    flexShrink: {\r\n        getStyles: (value) => ({ 'flex-shrink': value }),\r\n    },\r\n    order: {\r\n        getStyles: (value) => ({ order: value }),\r\n        options: {\r\n            first: '-9999',\r\n            last: '9999',\r\n        },\r\n    },\r\n    cols: {\r\n        getStyles: (value) => ({ 'grid-template-columns': value }),\r\n        options: {\r\n            none: 'none',\r\n            subgrid: 'subgrid',\r\n            1: 'repeat(1, minmax(0, 1fr))',\r\n            2: 'repeat(2, minmax(0, 1fr))',\r\n            3: 'repeat(3, minmax(0, 1fr))',\r\n            4: 'repeat(4, minmax(0, 1fr))',\r\n            5: 'repeat(5, minmax(0, 1fr))',\r\n            6: 'repeat(6, minmax(0, 1fr))',\r\n            7: 'repeat(7, minmax(0, 1fr))',\r\n            8: 'repeat(8, minmax(0, 1fr))',\r\n            9: 'repeat(9, minmax(0, 1fr))',\r\n            10: 'repeat(10, minmax(0, 1fr))',\r\n            11: 'repeat(11, minmax(0, 1fr))',\r\n            12: 'repeat(12, minmax(0, 1fr))',\r\n        },\r\n    },\r\n    colStart: {\r\n        getStyles: (value) => ({ 'grid-column-start': value }),\r\n        options: {\r\n            auto: 'auto',\r\n        },\r\n    },\r\n    colEnd: {\r\n        getStyles: (value) => ({ 'grid-column-end': value }),\r\n        options: {\r\n            auto: 'auto',\r\n        },\r\n    },\r\n    col: {\r\n        getStyles: (value) => ({ 'grid-column': value }),\r\n        options: {\r\n            auto: 'auto',\r\n            span1: 'span 1 / span 1',\r\n            span2: 'span 2 / span 2',\r\n            span3: 'span 3 / span 3',\r\n            span4: 'span 4 / span 4',\r\n            span5: 'span 5 / span 5',\r\n            span6: 'span 6 / span 6',\r\n            span7: 'span 7 / span 7',\r\n            span8: 'span 8 / span 8',\r\n            span9: 'span 9 / span 9',\r\n            span10: 'span 10 / span 10',\r\n            span11: 'span 11 / span 11',\r\n            span12: 'span 12 / span 12',\r\n            spanFull: 'span 1 / -1',\r\n        },\r\n    },\r\n    rows: {\r\n        getStyles: (value) => ({ 'grid-template-rows': value }),\r\n        options: {\r\n            none: 'none',\r\n            subgrid: 'subgrid',\r\n            1: 'repeat(1, minmax(0, 1fr))',\r\n            2: 'repeat(2, minmax(0, 1fr))',\r\n            3: 'repeat(3, minmax(0, 1fr))',\r\n            4: 'repeat(4, minmax(0, 1fr))',\r\n            5: 'repeat(5, minmax(0, 1fr))',\r\n            6: 'repeat(6, minmax(0, 1fr))',\r\n            7: 'repeat(7, minmax(0, 1fr))',\r\n            8: 'repeat(8, minmax(0, 1fr))',\r\n            9: 'repeat(9, minmax(0, 1fr))',\r\n            10: 'repeat(10, minmax(0, 1fr))',\r\n            11: 'repeat(11, minmax(0, 1fr))',\r\n            12: 'repeat(12, minmax(0, 1fr))',\r\n        },\r\n    },\r\n    rowStart: {\r\n        getStyles: (value) => ({ 'grid-row-start': value }),\r\n        options: {\r\n            auto: 'auto',\r\n        },\r\n    },\r\n    rowEnd: {\r\n        getStyles: (value) => ({ 'grid-row-end': value }),\r\n        options: {\r\n            auto: 'auto',\r\n        },\r\n    },\r\n    row: {\r\n        getStyles: (value) => ({ 'grid-row': value }),\r\n        options: {\r\n            auto: 'auto',\r\n            span1: 'span 1 / span 1',\r\n            span2: 'span 2 / span 2',\r\n            span3: 'span 3 / span 3',\r\n            span4: 'span 4 / span 4',\r\n            span5: 'span 5 / span 5',\r\n            span6: 'span 6 / span 6',\r\n            span7: 'span 7 / span 7',\r\n            span8: 'span 8 / span 8',\r\n            span9: 'span 9 / span 9',\r\n            span10: 'span 10 / span 10',\r\n            span11: 'span 11 / span 11',\r\n            span12: 'span 12 / span 12',\r\n            spanFull: 'span 1 / -1',\r\n        },\r\n    },\r\n    autoFlow: {\r\n        getStyles: (value) => ({ 'grid-auto-flow': value }),\r\n        options: {\r\n            row: 'row',\r\n            column: 'column',\r\n            rowDense: 'row dense',\r\n            columnDense: 'column dense',\r\n        },\r\n    },\r\n    autoCols: {\r\n        getStyles: (value) => ({ 'grid-auto-columns': value }),\r\n        options: {\r\n            auto: 'auto',\r\n            minContent: 'min-content',\r\n            maxContent: 'max-content',\r\n            fr: 'minmax(0, 1fr)',\r\n        },\r\n    },\r\n    autoRows: {\r\n        getStyles: (value) => ({ 'grid-auto-rows': value }),\r\n        options: {\r\n            auto: 'auto',\r\n            minContent: 'min-content',\r\n            maxContent: 'max-content',\r\n            fr: 'minmax(0, 1fr)',\r\n        },\r\n    },\r\n    gap: {\r\n        getStyles: (value) => ({ gap: value }),\r\n        options: {\r\n            ...REM_CASES,\r\n        },\r\n    },\r\n    gapX: {\r\n        getStyles: (value) => ({ 'column-gap': value }),\r\n        options: {\r\n            ...REM_CASES,\r\n        },\r\n    },\r\n    gapY: {\r\n        getStyles: (value) => ({ 'row-gap': value }),\r\n        options: {\r\n            ...REM_CASES,\r\n        },\r\n    },\r\n    justifyContent: {\r\n        getStyles: (value) => ({ 'justify-content': value }),\r\n        options: {\r\n            normal: 'normal',\r\n            start: 'start',\r\n            end: 'end',\r\n            flexStart: 'flex-start',\r\n            flexEnd: 'flex-end',\r\n            center: 'center',\r\n            between: 'space-between',\r\n            around: 'space-around',\r\n            evenly: 'space-evenly',\r\n            stretch: 'stretch',\r\n        },\r\n    },\r\n    justifyItems: {\r\n        getStyles: (value) => ({ 'justify-items': value }),\r\n        options: {\r\n            start: 'start',\r\n            end: 'end',\r\n            center: 'center',\r\n            stretch: 'stretch',\r\n            flexStart: 'flex-start',\r\n            flexEnd: 'flex-end',\r\n        },\r\n    },\r\n    justifySelf: {\r\n        getStyles: (value) => ({ 'justify-self': value }),\r\n        options: {\r\n            auto: 'auto',\r\n            start: 'start',\r\n            end: 'end',\r\n            center: 'center',\r\n            stretch: 'stretch',\r\n            flexStart: 'flex-start',\r\n            flexEnd: 'flex-end',\r\n        },\r\n    },\r\n    alignContent: {\r\n        getStyles: (value) => ({ 'align-content': value }),\r\n        options: {\r\n            normal: 'normal',\r\n            center: 'center',\r\n            start: 'start',\r\n            end: 'end',\r\n            flexStart: 'flex-start',\r\n            flexEnd: 'flex-end',\r\n            between: 'space-between',\r\n            around: 'space-around',\r\n            evenly: 'space-evenly',\r\n            stretch: 'stretch',\r\n            baseline: 'baseline',\r\n        },\r\n    },\r\n    alignItems: {\r\n        getStyles: (value) => ({ 'align-items': value }),\r\n        options: {\r\n            flexStart: 'flex-start',\r\n            flexEnd: 'flex-end',\r\n            start: 'start',\r\n            end: 'end',\r\n            center: 'center',\r\n            baseline: 'baseline',\r\n            stretch: 'stretch',\r\n        },\r\n    },\r\n    alignSelf: {\r\n        getStyles: (value) => ({ 'align-self': value }),\r\n        options: {\r\n            auto: 'auto',\r\n            flexStart: 'flex-start',\r\n            flexEnd: 'flex-end',\r\n            start: 'start',\r\n            end: 'end',\r\n            center: 'center',\r\n            baseline: 'baseline',\r\n            stretch: 'stretch',\r\n        },\r\n    },\r\n    placeContent: {\r\n        getStyles: (value) => ({ 'place-content': value }),\r\n    },\r\n    placeItems: {\r\n        getStyles: (value) => ({ 'place-items': value }),\r\n    },\r\n    placeSelf: {\r\n        getStyles: (value) => ({ 'place-self': value }),\r\n    },\r\n    flexXY: {\r\n        isPreset: true,\r\n        getStyles: (v) => ({\r\n            display: 'flex',\r\n            ...(v[0] && { justifyContent: OPTIONS_FLEX_JUSTIFY_CONTENT[v[0]] || v[0] }),\r\n            ...(v[1] && { alignItems: OPTIONS_FLEX_ALIGN_ITEMS[v[1]] || v[1] }),\r\n            ...(v[2] && { flexDirection: OPTIONS_FLEX_DIRECTION[v[2]] || v[2] }),\r\n        }),\r\n    },\r\n    flexRow: {\r\n        isPreset: true,\r\n        getStyles: (v) => ({ display: 'flex', ...(v[0] && { justifyContent: OPTIONS_FLEX_JUSTIFY_CONTENT[v[0]] || v[0] }), ...(v[1] && { alignItems: OPTIONS_FLEX_ALIGN_ITEMS[v[1]] || v[1] }) }),\r\n    },\r\n    flexRowReverse: {\r\n        isPreset: true,\r\n        getStyles: (v) => ({\r\n            display: 'flex',\r\n            flexDirection: 'row-reverse',\r\n            ...(v[0] && { justifyContent: OPTIONS_FLEX_JUSTIFY_CONTENT[v[0]] || v[0] }),\r\n            ...(v[1] && { alignItems: OPTIONS_FLEX_ALIGN_ITEMS[v[1]] || v[1] }),\r\n        }),\r\n    },\r\n    flexCol: {\r\n        isPreset: true,\r\n        getStyles: (v) => ({\r\n            display: 'flex',\r\n            flexDirection: 'column',\r\n            ...(v[0] && { justifyContent: OPTIONS_FLEX_JUSTIFY_CONTENT[v[0]] || v[0] }),\r\n            ...(v[1] && { alignItems: OPTIONS_FLEX_ALIGN_ITEMS[v[1]] || v[1] }),\r\n        }),\r\n    },\r\n    flexColReverse: {\r\n        isPreset: true,\r\n        getStyles: (v) => ({\r\n            display: 'flex',\r\n            flexDirection: 'column-reverse',\r\n            ...(v[0] && { justifyContent: OPTIONS_FLEX_JUSTIFY_CONTENT[v[0]] || v[0] }),\r\n            ...(v[1] && { alignItems: OPTIONS_FLEX_ALIGN_ITEMS[v[1]] || v[1] }),\r\n        }),\r\n    },\r\n};\r\n\r\nconst SPACING_PROPS: PropInterface = {\r\n    // Padding\r\n    p: {\r\n        getStyles: (value) => ({ padding: value }),\r\n        options: { ...REM_CASES },\r\n    },\r\n    pt: {\r\n        getStyles: (value) => ({ 'padding-top': value }),\r\n        options: { ...REM_CASES },\r\n    },\r\n    pr: {\r\n        getStyles: (value) => ({ 'padding-right': value }),\r\n        options: { ...REM_CASES },\r\n    },\r\n    pb: {\r\n        getStyles: (value) => ({ 'padding-bottom': value }),\r\n        options: { ...REM_CASES },\r\n    },\r\n    pl: {\r\n        getStyles: (value) => ({ 'padding-left': value }),\r\n        options: { ...REM_CASES },\r\n    },\r\n    py: {\r\n        getStyles: (value) => ({ 'padding-top': value, 'padding-bottom': value }),\r\n        options: { ...REM_CASES },\r\n    },\r\n    px: {\r\n        getStyles: (value) => ({ 'padding-left': value, 'padding-right': value }),\r\n        options: { ...REM_CASES },\r\n    },\r\n    // Margin\r\n    m: {\r\n        getStyles: (value) => ({ margin: value }),\r\n        options: { ...REM_CASES },\r\n    },\r\n    mt: {\r\n        getStyles: (value) => ({ 'margin-top': value }),\r\n        options: {\r\n            ...REM_CASES,\r\n        },\r\n    },\r\n    mr: {\r\n        getStyles: (value) => ({ 'margin-right': value }),\r\n        options: {\r\n            ...REM_CASES,\r\n        },\r\n    },\r\n    mb: {\r\n        getStyles: (value) => ({ 'margin-bottom': value }),\r\n        options: {\r\n            ...REM_CASES,\r\n        },\r\n    },\r\n    ml: {\r\n        getStyles: (value) => ({ 'margin-left': value }),\r\n        options: {\r\n            ...REM_CASES,\r\n        },\r\n    },\r\n    my: {\r\n        getStyles: (value) => ({ 'margin-top': value, 'margin-bottom': value }),\r\n        options: { ...REM_CASES },\r\n    },\r\n    mx: {\r\n        getStyles: (value) => ({ 'margin-left': value, 'margin-right': value }),\r\n        options: { ...REM_CASES },\r\n    },\r\n    // Size\r\n    w: {\r\n        getStyles: (value) => ({ width: value }),\r\n        options: {\r\n            ...REM_CASES,\r\n            ...FRACTION_CASES,\r\n            auto: 'auto',\r\n            full: '100%',\r\n            screen: '100vw',\r\n            min: 'min-content',\r\n            max: 'max-content',\r\n            fit: 'fit-content',\r\n        },\r\n    },\r\n    minW: {\r\n        getStyles: (value) => ({ 'min-width': value }),\r\n        options: {\r\n            ...REM_CASES,\r\n            ...FRACTION_CASES,\r\n            px: '1px',\r\n            min: 'min-content',\r\n            max: 'max-content',\r\n            full: '100%',\r\n            fit: 'fit-content',\r\n        },\r\n    },\r\n    maxW: {\r\n        getStyles: (value) => ({ 'max-width': value }),\r\n        options: {\r\n            ...REM_CASES,\r\n            ...FRACTION_CASES,\r\n            px: '1px',\r\n            min: 'min-content',\r\n            max: 'max-content',\r\n            full: '100%',\r\n            fit: 'fit-content',\r\n        },\r\n    },\r\n    h: {\r\n        getStyles: (value) => ({ height: value }),\r\n        options: {\r\n            ...REM_CASES,\r\n            ...FRACTION_CASES,\r\n            auto: 'auto',\r\n            full: '100%',\r\n            screen: '100vh', // Corregido de '100vw' a '100vh' para altura\r\n            min: 'min-content',\r\n            max: 'max-content',\r\n            fit: 'fit-content',\r\n        },\r\n    },\r\n    minH: {\r\n        getStyles: (value) => ({ 'min-height': value }),\r\n        options: {\r\n            ...REM_CASES,\r\n            ...FRACTION_CASES,\r\n            px: '1px',\r\n            min: 'min-content',\r\n            max: 'max-content',\r\n            full: '100%',\r\n            fit: 'fit-content',\r\n        },\r\n    },\r\n    maxH: {\r\n        getStyles: (value) => ({ 'max-height': value }),\r\n        options: {\r\n            ...REM_CASES,\r\n            ...FRACTION_CASES,\r\n            px: '1px',\r\n            min: 'min-content',\r\n            max: 'max-content',\r\n            full: '100%',\r\n            fit: 'fit-content',\r\n        },\r\n    },\r\n    size: {\r\n        getStyles: (value) => ({ width: value, height: value }),\r\n        options: {\r\n            ...REM_CASES,\r\n            ...FRACTION_CASES,\r\n            auto: 'auto',\r\n            full: '100%',\r\n            screen: '100vw',\r\n            min: 'min-content',\r\n            max: 'max-content',\r\n            fit: 'fit-content',\r\n        },\r\n    },\r\n};\r\n\r\nconst TYPOGRAPHY_PROPS: PropInterface = {\r\n    family: {\r\n        getStyles: (value) => ({ 'font-family': value }),\r\n        options: {\r\n            sans: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif',\r\n            serif: 'ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif',\r\n            mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\r\n        },\r\n    },\r\n    fs: {\r\n        getStyles: (value) => ({ 'font-size': value }),\r\n        options: {\r\n            xs: '0.625rem',\r\n            sm: '0.75rem',\r\n            base: '1rem',\r\n            lg: '1.125rem',\r\n            xl: '1.25rem',\r\n            '2xl': '1.5rem',\r\n            '3xl': '1.875rem',\r\n            '4xl': '2.25rem',\r\n            '5xl': '3rem',\r\n            '6xl': '3.75rem',\r\n            '7xl': '4.5rem',\r\n            '8xl': '6rem',\r\n            '9xl': '8rem',\r\n        },\r\n    },\r\n    fontSmoothing: {\r\n        getStyles: (value) => ({ '-webkit-font-smoothing': value }),\r\n        options: {\r\n            antialiased: 'antialiased',\r\n            subpixel: 'auto',\r\n        },\r\n    },\r\n    fontStyle: {\r\n        getStyles: (value) => ({ 'font-style': value }),\r\n        options: {\r\n            normal: 'normal',\r\n            italic: 'italic',\r\n        },\r\n    },\r\n    fw: {\r\n        getStyles: (value) => ({ 'font-weight': value }),\r\n        options: {\r\n            thin: '100',\r\n            extraLight: '200',\r\n            light: '300',\r\n            normal: '400',\r\n            medium: '500',\r\n            semiBold: '600',\r\n            bold: '700',\r\n            extraBold: '800',\r\n            black: '900',\r\n        },\r\n    },\r\n    fontVariant: {\r\n        getStyles: (value) => ({ 'font-variant': value }),\r\n    },\r\n    fontVariantAlternates: {\r\n        getStyles: (value) => ({ 'font-variant-alternates': value }),\r\n    },\r\n    fontVariantCaps: {\r\n        getStyles: (value) => ({ 'font-variant-caps': value }),\r\n    },\r\n    fontVariantEastAsian: {\r\n        getStyles: (value) => ({ 'font-variant-east-asian': value }),\r\n    },\r\n    fontVariantLigatures: {\r\n        getStyles: (value) => ({ 'font-variant-ligatures': value }),\r\n    },\r\n    fontVariantNumeric: {\r\n        getStyles: (value) => ({ 'font-variant-numeric': value }),\r\n    },\r\n    fontVariantPosition: {\r\n        getStyles: (value) => ({ 'font-variant-position': value }),\r\n    },\r\n    fontFeatureSettings: {\r\n        getStyles: (value) => ({ 'font-feature-settings': value }),\r\n    },\r\n    fontKerning: {\r\n        getStyles: (value) => ({ 'font-kerning': value }),\r\n    },\r\n    fontLanguageOverride: {\r\n        getStyles: (value) => ({ 'font-language-override': value }),\r\n    },\r\n    lh: {\r\n        getStyles: (value) => ({ 'line-height': value }),\r\n        options: {\r\n            xs: '1rem',\r\n            sm: '1.25rem',\r\n            base: '1.5rem',\r\n            lg: '1.75rem',\r\n            xl: '1.75',\r\n            '2xl': '2rem',\r\n            '3xl': '2.25rem',\r\n            '4xl': '2.5rem',\r\n            '5xl': '1',\r\n            '6xl': '1',\r\n            '7xl': '1',\r\n            '8xl': '1',\r\n            '9xl': '1',\r\n        },\r\n    },\r\n    letterSpacing: {\r\n        getStyles: (value) => ({ 'letter-spacing': value }),\r\n        options: {\r\n            ...REM_CASES,\r\n        },\r\n    },\r\n    wordSpacing: {\r\n        getStyles: (value) => ({ 'word-spacing': value }),\r\n        options: {\r\n            ...REM_CASES,\r\n        },\r\n    },\r\n    listStyle: {\r\n        getStyles: (value) => ({ 'list-style': value }),\r\n    },\r\n    listStyleType: {\r\n        getStyles: (value) => ({ 'list-style-type': value }),\r\n        options: {\r\n            none: 'none',\r\n            disc: 'disc',\r\n            decimal: 'decimal',\r\n        },\r\n    },\r\n    listStylePosition: {\r\n        getStyles: (value) => ({ 'list-style-position': value }),\r\n        options: {\r\n            inside: 'inside',\r\n            outside: 'outside',\r\n        },\r\n    },\r\n    listStyleImage: {\r\n        getStyles: (value) => ({ 'list-style-image': value }),\r\n        options: {\r\n            none: 'none',\r\n        },\r\n    },\r\n    textAlign: {\r\n        getStyles: (value) => ({ 'text-align': value }),\r\n        options: {\r\n            left: 'left',\r\n            right: 'right',\r\n            center: 'center',\r\n            justify: 'justify',\r\n        },\r\n    },\r\n    textAlignLast: {\r\n        getStyles: (value) => ({ 'text-align-last': value }),\r\n        options: {\r\n            left: 'left',\r\n            right: 'right',\r\n            center: 'center',\r\n            justify: 'justify',\r\n        },\r\n    },\r\n    color: {\r\n        getStyles: (value) => ({ color: value }),\r\n        options: {\r\n            ...COLOR_CASES,\r\n        },\r\n    },\r\n    textDecoration: {\r\n        getStyles: (value) => ({ 'text-decoration': value }),\r\n        options: {\r\n            none: 'none',\r\n            underline: 'underline',\r\n            overline: 'overline',\r\n            lineThrough: 'line-through',\r\n        },\r\n    },\r\n    textDecorationColor: {\r\n        getStyles: (value) => ({ 'text-decoration-color': value }),\r\n        options: {\r\n            current: 'currentColor',\r\n            transparent: 'transparent',\r\n            ...COLOR_CASES,\r\n        },\r\n    },\r\n    textDecorationLine: {\r\n        getStyles: (value) => ({ 'text-decoration-line': value }),\r\n        options: {\r\n            none: 'none',\r\n            underline: 'underline',\r\n            overline: 'overline',\r\n            lineThrough: 'line-through',\r\n            blink: 'blink',\r\n        },\r\n    },\r\n    textDecorationStyle: {\r\n        getStyles: (value) => ({ 'text-decoration-style': value }),\r\n        options: {\r\n            solid: 'solid',\r\n            double: 'double',\r\n            dotted: 'dotted',\r\n            dashed: 'dashed',\r\n            wavy: 'wavy',\r\n        },\r\n    },\r\n    textDecorationThickness: {\r\n        getStyles: (value) => ({ 'text-decoration-thickness': value }),\r\n        options: {\r\n            auto: 'auto',\r\n            fromFont: 'from-font',\r\n            1: '1px',\r\n            2: '2px',\r\n            3: '3px',\r\n            4: '4px',\r\n            5: '5px',\r\n            6: '6px',\r\n            7: '7px',\r\n            8: '8px',\r\n            9: '9px',\r\n            10: '10px',\r\n        },\r\n    },\r\n    textUnderlineOffset: {\r\n        getStyles: (value) => ({ 'text-underline-offset': value }),\r\n        options: {\r\n            auto: 'auto',\r\n            1: '1px',\r\n            2: '2px',\r\n            3: '3px',\r\n            4: '4px',\r\n            5: '5px',\r\n            6: '6px',\r\n            7: '7px',\r\n            8: '8px',\r\n            9: '9px',\r\n            10: '10px',\r\n        },\r\n    },\r\n    textTransform: {\r\n        getStyles: (value) => ({ 'text-transform': value }),\r\n        options: {\r\n            none: 'none',\r\n            capitalize: 'capitalize',\r\n            uppercase: 'uppercase',\r\n            lowercase: 'lowercase',\r\n        },\r\n    },\r\n    textOverflow: {\r\n        getStyles: (value) => ({ 'text-overflow': value }),\r\n        options: {\r\n            clip: 'clip',\r\n            ellipsis: 'ellipsis',\r\n        },\r\n    },\r\n    textEmphasis: {\r\n        getStyles: (value) => ({ 'text-emphasis': value }),\r\n    },\r\n    textEmphasisColor: {\r\n        getStyles: (value) => ({ 'text-emphasis-color': value }),\r\n        options: {\r\n            current: 'currentColor',\r\n            transparent: 'transparent',\r\n            ...COLOR_CASES,\r\n        },\r\n    },\r\n    textEmphasisPosition: {\r\n        getStyles: (value) => ({ 'text-emphasis-position': value }),\r\n        options: {\r\n            over: 'over',\r\n            under: 'under',\r\n            right: 'right',\r\n            left: 'left',\r\n        },\r\n    },\r\n    textEmphasisStyle: {\r\n        getStyles: (value) => ({ 'text-emphasis-style': value }),\r\n        options: {\r\n            filled: 'filled',\r\n            open: 'open',\r\n            dot: 'dot',\r\n            circle: 'circle',\r\n