@vaneui/ui 0.1.2 → 0.1.3

package/dist/index.esm.js

@@ -0,0 +1,4717 @@
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useMemo, useContext } from 'react';
+
+/**
+ * Base Theme class that all theme types will extend
+ */
+class BaseTheme {
+}
+
+const MODE_KEYS = ['base', 'hover', 'active'];
+const SIZE_KEYS = ['xs', 'sm', 'md', 'lg', 'xl'];
+const VARIANT_KEYS = ['filled', 'outline'];
+const APPEARANCE_KEYS = ['default', 'accent', 'primary', 'secondary', 'tertiary', 'success', 'danger', 'warning', 'info', 'transparent'];
+const TEXT_APPEARANCE_KEYS = [...APPEARANCE_KEYS, 'muted', 'link'];
+const FONT_FAMILY_KEYS = ['sans', 'serif', 'mono'];
+const FONT_WEIGHT_KEYS = ['thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black'];
+const FONT_STYLE_KEYS = ['italic', 'notItalic'];
+const TEXT_DECORATION_KEYS = ['underline', 'lineThrough', 'noUnderline', 'overline'];
+const TEXT_TRANSFORM_KEYS = ['uppercase', 'lowercase', 'capitalize', 'normalCase'];
+const TEXT_ALIGN_KEYS = ['textLeft', 'textCenter', 'textRight', 'textJustify'];
+const BORDER_KEYS = ['border', 'noBorder'];
+const SHADOW_KEYS = ['shadow', 'noShadow'];
+const RING_KEYS = ['ring', 'noRing'];
+const PADDING_KEYS = ['padding', 'noPadding'];
+const BREAKPOINT_KEYS = ['xsCol', 'smCol', 'mdCol', 'lgCol', 'xlCol'];
+const HIDE_KEYS = ['xsHide', 'smHide', 'mdHide', 'lgHide', 'xlHide'];
+const POSITION_KEYS = ['relative', 'absolute', 'fixed', 'sticky', 'static'];
+const DIRECTION_REVERSE_KEYS = ['reverse'];
+const GAP_KEYS = ['gap', 'noGap'];
+const PILL_KEYS = ['pill'];
+const SHARP_KEYS = ['sharp'];
+const ROUNDED_KEYS = ['rounded'];
+const SHAPE_KEYS = [...PILL_KEYS, ...SHARP_KEYS, ...ROUNDED_KEYS];
+const FLEX_DIRECTION_KEYS = ['row', 'column', 'rowReverse', 'columnReverse'];
+const ITEMS_KEYS = ['itemsStart', 'itemsEnd', 'itemsCenter', 'itemsBaseline', 'itemsStretch'];
+const JUSTIFY_KEYS = ['justifyStart', 'justifyEnd', 'justifyCenter', 'justifyBetween', 'justifyAround', 'justifyEvenly', 'justifyStretch', 'justifyBaseline'];
+const WRAP_KEYS = ['flexWrap', 'flexNoWrap', 'flexWrapReverse'];
+const DISPLAY_KEYS = ['inline', 'block', 'inlineBlock', 'flex', 'inlineFlex', 'grid', 'inlineGrid', 'contents', 'table', 'tableCell', 'hidden'];
+// A master list of all groups where only one key can be 'true' at a time.
+const EXCLUSIVE_KEY_GROUPS = [
+    MODE_KEYS,
+    SIZE_KEYS,
+    TEXT_APPEARANCE_KEYS,
+    VARIANT_KEYS,
+    FONT_FAMILY_KEYS,
+    FONT_WEIGHT_KEYS,
+    FONT_STYLE_KEYS,
+    TEXT_DECORATION_KEYS,
+    TEXT_TRANSFORM_KEYS,
+    TEXT_ALIGN_KEYS,
+    BORDER_KEYS,
+    SHADOW_KEYS,
+    RING_KEYS,
+    PADDING_KEYS,
+    BREAKPOINT_KEYS,
+    HIDE_KEYS,
+    POSITION_KEYS,
+    DIRECTION_REVERSE_KEYS,
+    GAP_KEYS,
+    SHAPE_KEYS,
+    FLEX_DIRECTION_KEYS,
+    ITEMS_KEYS,
+    JUSTIFY_KEYS,
+    WRAP_KEYS,
+    DISPLAY_KEYS,
+];
+// Base component keys
+const BASE_COMPONENT_KEYS = [
+    ...SIZE_KEYS,
+    ...HIDE_KEYS,
+    ...ITEMS_KEYS,
+    ...JUSTIFY_KEYS,
+    ...POSITION_KEYS,
+    ...DISPLAY_KEYS
+];
+// Font keys
+const FONT_KEYS = [
+    ...FONT_WEIGHT_KEYS,
+    ...FONT_STYLE_KEYS,
+    ...TEXT_DECORATION_KEYS,
+    ...TEXT_TRANSFORM_KEYS,
+    ...FONT_FAMILY_KEYS,
+    ...TEXT_APPEARANCE_KEYS,
+    ...TEXT_ALIGN_KEYS
+];
+// Typography component keys
+const TYPOGRAPHY_COMPONENT_KEYS = [
+    ...BASE_COMPONENT_KEYS,
+    ...FONT_KEYS
+];
+// Button keys
+const BUTTON_KEYS = [
+    ...TYPOGRAPHY_COMPONENT_KEYS,
+    ...SHAPE_KEYS,
+    ...BORDER_KEYS,
+    ...SHADOW_KEYS,
+    ...RING_KEYS,
+    ...GAP_KEYS,
+    ...PADDING_KEYS,
+    ...VARIANT_KEYS,
+    ...APPEARANCE_KEYS
+];
+// Grid keys
+const GRID_KEYS = [
+    ...BASE_COMPONENT_KEYS,
+    ...GAP_KEYS,
+    ...APPEARANCE_KEYS
+];
+// Row keys
+const ROW_KEYS = [
+    ...BASE_COMPONENT_KEYS,
+    ...WRAP_KEYS,
+    ...GAP_KEYS,
+    ...DIRECTION_REVERSE_KEYS,
+    ...BREAKPOINT_KEYS,
+    ...APPEARANCE_KEYS
+];
+// Col keys
+const COL_KEYS = [
+    ...BASE_COMPONENT_KEYS,
+    ...WRAP_KEYS,
+    ...GAP_KEYS,
+    ...DIRECTION_REVERSE_KEYS,
+    ...APPEARANCE_KEYS
+];
+// Card keys
+const CARD_KEYS = [
+    ...TYPOGRAPHY_COMPONENT_KEYS,
+    ...GAP_KEYS,
+    ...SHARP_KEYS,
+    ...ROUNDED_KEYS,
+    ...BREAKPOINT_KEYS,
+    ...APPEARANCE_KEYS,
+    ...BORDER_KEYS,
+    ...RING_KEYS,
+    ...SHADOW_KEYS,
+    ...PADDING_KEYS,
+    ...FLEX_DIRECTION_KEYS,
+    ...DIRECTION_REVERSE_KEYS,
+    ...WRAP_KEYS
+];
+// Stack keys
+const STACK_KEYS = [
+    ...BASE_COMPONENT_KEYS,
+    ...WRAP_KEYS,
+    ...GAP_KEYS,
+    ...DIRECTION_REVERSE_KEYS,
+    ...BREAKPOINT_KEYS,
+    ...APPEARANCE_KEYS,
+    ...FLEX_DIRECTION_KEYS,
+    ...PADDING_KEYS
+];
+// Badge keys
+const BADGE_KEYS = [
+    ...TYPOGRAPHY_COMPONENT_KEYS,
+    ...SHAPE_KEYS,
+    ...VARIANT_KEYS,
+    ...SHADOW_KEYS,
+    ...BORDER_KEYS,
+    ...RING_KEYS,
+    ...GAP_KEYS,
+    ...PADDING_KEYS,
+    ...APPEARANCE_KEYS
+];
+// Chip keys
+const CHIP_KEYS = [
+    ...TYPOGRAPHY_COMPONENT_KEYS,
+    ...SHAPE_KEYS,
+    ...VARIANT_KEYS,
+    ...SHADOW_KEYS,
+    ...BORDER_KEYS,
+    ...RING_KEYS,
+    ...GAP_KEYS,
+    ...PADDING_KEYS,
+    ...APPEARANCE_KEYS
+];
+// Divider keys
+const DIVIDER_KEYS = [
+    ...BASE_COMPONENT_KEYS,
+    ...APPEARANCE_KEYS
+];
+// Container keys
+const CONTAINER_KEYS = [
+    ...BASE_COMPONENT_KEYS,
+    ...APPEARANCE_KEYS,
+    ...BORDER_KEYS,
+    ...SHADOW_KEYS,
+    ...RING_KEYS,
+    ...GAP_KEYS,
+    ...SHAPE_KEYS
+];
+// Section keys
+const SECTION_KEYS = [
+    ...BASE_COMPONENT_KEYS,
+    ...FLEX_DIRECTION_KEYS,
+    ...APPEARANCE_KEYS,
+    ...PADDING_KEYS,
+    ...DIRECTION_REVERSE_KEYS,
+    ...WRAP_KEYS,
+    ...BREAKPOINT_KEYS,
+    ...GAP_KEYS,
+    ...BORDER_KEYS,
+    ...SHADOW_KEYS,
+    ...RING_KEYS,
+    ...SHAPE_KEYS,
+];
+
+/**
+ * Pick the first truthy key from props, then from defaults, then undefined.
+ */
+function pickFirstTruthyKey(props, defaults, keys) {
+    let falsyKeys = [];
+    for (const k of keys) {
+        const p = props[k];
+        if (p === true)
+            return k;
+        if (p === false)
+            falsyKeys.push(k);
+    }
+    for (const k of keys) {
+        const d = defaults[k];
+        if (d === true && !falsyKeys.includes(k))
+            return k;
+    }
+    return undefined;
+}
+
+class HideTheme extends BaseTheme {
+    constructor(initialConfig) {
+        super();
+        HIDE_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig[key]) !== null && _a !== void 0 ? _a : HideTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickFirstTruthyKey(props, defaults, HIDE_KEYS);
+        return [key ? this[key] : ''];
+    }
+}
+HideTheme.defaultClasses = {
+    xsHide: "max-xs:hidden",
+    smHide: "max-sm:hidden",
+    mdHide: "max-md:hidden",
+    lgHide: "max-lg:hidden",
+    xlHide: "max-xl:hidden"
+};
+
+class ItemsTheme extends BaseTheme {
+    constructor(initialConfig) {
+        super();
+        ITEMS_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig[key]) !== null && _a !== void 0 ? _a : ItemsTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const pickedKey = pickFirstTruthyKey(props, defaults, ITEMS_KEYS);
+        return [pickedKey && this[pickedKey] ? this[pickedKey] : ''];
+    }
+}
+ItemsTheme.defaultClasses = {
+    itemsStart: "items-start",
+    itemsEnd: "items-end",
+    itemsCenter: "items-center",
+    itemsBaseline: "items-baseline",
+    itemsStretch: "items-stretch",
+};
+
+class JustifyTheme extends BaseTheme {
+    constructor(initialConfig) {
+        super();
+        JUSTIFY_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig[key]) !== null && _a !== void 0 ? _a : JustifyTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickFirstTruthyKey(props, defaults, JUSTIFY_KEYS);
+        return [key ? this[key] : ''];
+    }
+}
+JustifyTheme.defaultClasses = {
+    justifyStart: "justify-start",
+    justifyEnd: "justify-end",
+    justifyCenter: "justify-center",
+    justifyBetween: "justify-between",
+    justifyAround: "justify-around",
+    justifyEvenly: "justify-evenly",
+    justifyStretch: "justify-stretch",
+    justifyBaseline: "justify-baseline",
+};
+
+class PositionTheme extends BaseTheme {
+    constructor(initialConfig) {
+        super();
+        POSITION_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig[key]) !== null && _a !== void 0 ? _a : PositionTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickFirstTruthyKey(props, defaults, POSITION_KEYS);
+        return [key ? this[key] : ''];
+    }
+}
+PositionTheme.defaultClasses = {
+    relative: "relative",
+    absolute: "absolute",
+    fixed: "fixed",
+    sticky: "sticky",
+    static: "static"
+};
+
+class FontStyleTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        FONT_STYLE_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : FontStyleTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickFirstTruthyKey(props, defaults, FONT_STYLE_KEYS);
+        return [key ? this[key] : '']; // No default for font style
+    }
+}
+FontStyleTheme.defaultClasses = {
+    italic: "italic",
+    notItalic: "not-italic",
+};
+
+class FontFamilyTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        FONT_FAMILY_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : FontFamilyTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickFirstTruthyKey(props, defaults, FONT_FAMILY_KEYS);
+        return [this[key !== null && key !== void 0 ? key : 'sans'] || ''];
+    }
+}
+FontFamilyTheme.defaultClasses = {
+    sans: "font-sans",
+    serif: "font-serif",
+    mono: "font-mono",
+};
+
+class FontWeightTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        FONT_WEIGHT_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : FontWeightTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickFirstTruthyKey(props, defaults, FONT_WEIGHT_KEYS);
+        return [this[key !== null && key !== void 0 ? key : 'normal'] || '']; // Default to 'normal' if no key is provided
+    }
+}
+FontWeightTheme.defaultClasses = {
+    thin: "font-thin",
+    extralight: "font-extralight",
+    light: "font-light",
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold",
+    extrabold: "font-extrabold",
+    black: "font-black",
+};
+
+class TextDecorationTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        TEXT_DECORATION_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : TextDecorationTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickFirstTruthyKey(props, defaults, TEXT_DECORATION_KEYS);
+        return [key ? this[key] : '']; // No default for text decoration
+    }
+}
+TextDecorationTheme.defaultClasses = {
+    underline: "underline",
+    lineThrough: "line-through",
+    noUnderline: "no-underline",
+    overline: "overline",
+};
+
+class TextTransformTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        TEXT_TRANSFORM_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : TextTransformTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickFirstTruthyKey(props, defaults, TEXT_TRANSFORM_KEYS);
+        return [key ? this[key] : '']; // No default for text transform
+    }
+}
+TextTransformTheme.defaultClasses = {
+    uppercase: "uppercase",
+    lowercase: "lowercase",
+    capitalize: "capitalize",
+    normalCase: "normal-case",
+};
+
+class TextAlignTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        TEXT_ALIGN_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : TextAlignTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickFirstTruthyKey(props, defaults, TEXT_ALIGN_KEYS);
+        return [key ? this[key] : '']; // No default for text align
+    }
+}
+TextAlignTheme.defaultClasses = {
+    textLeft: "text-left",
+    textCenter: "text-center",
+    textRight: "text-right",
+    textJustify: "text-justify",
+};
+
+const isObject = (item) => {
+    return item !== null && typeof item === 'object' && !Array.isArray(item);
+};
+const deepMerge = (target, source) => {
+    const output = Object.assign(Object.create(Object.getPrototypeOf(target)), target);
+    for (const key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+            const sourceValue = source[key];
+            const targetValue = output[key];
+            if (sourceValue === undefined) {
+                continue;
+            }
+            // Special case: If the key is 'defaults', use the contextual mergeDefaults function.
+            if (key === 'defaults' &&
+                isObject(targetValue) &&
+                isObject(sourceValue)) {
+                output[key] = mergeDefaults(targetValue, sourceValue);
+            }
+            // For all other objects, use the standard recursive deep merge.
+            else if (isObject(targetValue) && isObject(sourceValue)) {
+                output[key] = deepMerge(targetValue, sourceValue);
+            }
+            // For non-object values, just assign the value from the source.
+            else {
+                output[key] = sourceValue;
+            }
+        }
+    }
+    return output;
+};
+const deepClone = (source) => {
+    if (!isObject(source)) {
+        return source;
+    }
+    const output = Object.assign(Object.create(Object.getPrototypeOf(source)), source);
+    for (const key in output) {
+        if (Object.prototype.hasOwnProperty.call(output, key)) {
+            output[key] = deepClone(output[key]);
+        }
+    }
+    return output;
+};
+const findGroup = (key) => EXCLUSIVE_KEY_GROUPS.find(group => group.includes(key));
+const mergeDefaults = (baseDefaults, overrideDefaults) => {
+    const finalDefaults = { ...baseDefaults };
+    // Iterate over the override keys to apply them.
+    for (const key in overrideDefaults) {
+        if (Object.prototype.hasOwnProperty.call(overrideDefaults, key)) {
+            const overrideValue = overrideDefaults[key];
+            // If the override is setting a key to true...
+            if (overrideValue) {
+                // Find the exclusive group this key belongs to (e.g., SIZE_KEYS).
+                const group = findGroup(key);
+                // If the key is part of an exclusive group...
+                if (group) {
+                    // ...set all other keys in that group to false.
+                    group.forEach(groupKey => {
+                        if (groupKey !== key) {
+                            finalDefaults[groupKey] = false;
+                        }
+                    });
+                }
+            }
+            finalDefaults[key] = overrideValue;
+        }
+    }
+    return finalDefaults;
+};
+
+class DisplayTheme extends BaseTheme {
+    constructor(initialConfig) {
+        super();
+        DISPLAY_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig[key]) !== null && _a !== void 0 ? _a : DisplayTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const pickedKey = pickFirstTruthyKey(props, defaults, DISPLAY_KEYS);
+        return [pickedKey && this[pickedKey] ? this[pickedKey] : ''];
+    }
+}
+DisplayTheme.defaultClasses = {
+    inline: "inline",
+    block: "block",
+    inlineBlock: "inline-block",
+    flex: "flex",
+    inlineFlex: "inline-flex",
+    grid: "grid",
+    inlineGrid: "inline-grid",
+    contents: "contents",
+    table: "table",
+    tableCell: "table-cell",
+    hidden: "hidden"
+};
+
+const CLASS_PART_SEPARATOR = '-';
+const createClassGroupUtils = config => {
+  const classMap = createClassMap(config);
+  const {
+    conflictingClassGroups,
+    conflictingClassGroupModifiers
+  } = config;
+  const getClassGroupId = className => {
+    const classParts = className.split(CLASS_PART_SEPARATOR);
+    // Classes like `-inset-1` produce an empty string as first classPart. We assume that classes for negative values are used correctly and remove it from classParts.
+    if (classParts[0] === '' && classParts.length !== 1) {
+      classParts.shift();
+    }
+    return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
+  };
+  const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
+    const conflicts = conflictingClassGroups[classGroupId] || [];
+    if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
+      return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
+    }
+    return conflicts;
+  };
+  return {
+    getClassGroupId,
+    getConflictingClassGroupIds
+  };
+};
+const getGroupRecursive = (classParts, classPartObject) => {
+  if (classParts.length === 0) {
+    return classPartObject.classGroupId;
+  }
+  const currentClassPart = classParts[0];
+  const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
+  const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : undefined;
+  if (classGroupFromNextClassPart) {
+    return classGroupFromNextClassPart;
+  }
+  if (classPartObject.validators.length === 0) {
+    return undefined;
+  }
+  const classRest = classParts.join(CLASS_PART_SEPARATOR);
+  return classPartObject.validators.find(({
+    validator
+  }) => validator(classRest))?.classGroupId;
+};
+const arbitraryPropertyRegex = /^\[(.+)\]$/;
+const getGroupIdForArbitraryProperty = className => {
+  if (arbitraryPropertyRegex.test(className)) {
+    const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
+    const property = arbitraryPropertyClassName?.substring(0, arbitraryPropertyClassName.indexOf(':'));
+    if (property) {
+      // I use two dots here because one dot is used as prefix for class groups in plugins
+      return 'arbitrary..' + property;
+    }
+  }
+};
+/**
+ * Exported for testing only
+ */
+const createClassMap = config => {
+  const {
+    theme,
+    classGroups
+  } = config;
+  const classMap = {
+    nextPart: new Map(),
+    validators: []
+  };
+  for (const classGroupId in classGroups) {
+    processClassesRecursively(classGroups[classGroupId], classMap, classGroupId, theme);
+  }
+  return classMap;
+};
+const processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
+  classGroup.forEach(classDefinition => {
+    if (typeof classDefinition === 'string') {
+      const classPartObjectToEdit = classDefinition === '' ? classPartObject : getPart(classPartObject, classDefinition);
+      classPartObjectToEdit.classGroupId = classGroupId;
+      return;
+    }
+    if (typeof classDefinition === 'function') {
+      if (isThemeGetter(classDefinition)) {
+        processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
+        return;
+      }
+      classPartObject.validators.push({
+        validator: classDefinition,
+        classGroupId
+      });
+      return;
+    }
+    Object.entries(classDefinition).forEach(([key, classGroup]) => {
+      processClassesRecursively(classGroup, getPart(classPartObject, key), classGroupId, theme);
+    });
+  });
+};
+const getPart = (classPartObject, path) => {
+  let currentClassPartObject = classPartObject;
+  path.split(CLASS_PART_SEPARATOR).forEach(pathPart => {
+    if (!currentClassPartObject.nextPart.has(pathPart)) {
+      currentClassPartObject.nextPart.set(pathPart, {
+        nextPart: new Map(),
+        validators: []
+      });
+    }
+    currentClassPartObject = currentClassPartObject.nextPart.get(pathPart);
+  });
+  return currentClassPartObject;
+};
+const isThemeGetter = func => func.isThemeGetter;
+
+// LRU cache inspired from hashlru (https://github.com/dominictarr/hashlru/blob/v1.0.4/index.js) but object replaced with Map to improve performance
+const createLruCache = maxCacheSize => {
+  if (maxCacheSize < 1) {
+    return {
+      get: () => undefined,
+      set: () => {}
+    };
+  }
+  let cacheSize = 0;
+  let cache = new Map();
+  let previousCache = new Map();
+  const update = (key, value) => {
+    cache.set(key, value);
+    cacheSize++;
+    if (cacheSize > maxCacheSize) {
+      cacheSize = 0;
+      previousCache = cache;
+      cache = new Map();
+    }
+  };
+  return {
+    get(key) {
+      let value = cache.get(key);
+      if (value !== undefined) {
+        return value;
+      }
+      if ((value = previousCache.get(key)) !== undefined) {
+        update(key, value);
+        return value;
+      }
+    },
+    set(key, value) {
+      if (cache.has(key)) {
+        cache.set(key, value);
+      } else {
+        update(key, value);
+      }
+    }
+  };
+};
+const IMPORTANT_MODIFIER = '!';
+const MODIFIER_SEPARATOR = ':';
+const MODIFIER_SEPARATOR_LENGTH = MODIFIER_SEPARATOR.length;
+const createParseClassName = config => {
+  const {
+    prefix,
+    experimentalParseClassName
+  } = config;
+  /**
+   * Parse class name into parts.
+   *
+   * Inspired by `splitAtTopLevelOnly` used in Tailwind CSS
+   * @see https://github.com/tailwindlabs/tailwindcss/blob/v3.2.2/src/util/splitAtTopLevelOnly.js
+   */
+  let parseClassName = className => {
+    const modifiers = [];
+    let bracketDepth = 0;
+    let parenDepth = 0;
+    let modifierStart = 0;
+    let postfixModifierPosition;
+    for (let index = 0; index < className.length; index++) {
+      let currentCharacter = className[index];
+      if (bracketDepth === 0 && parenDepth === 0) {
+        if (currentCharacter === MODIFIER_SEPARATOR) {
+          modifiers.push(className.slice(modifierStart, index));
+          modifierStart = index + MODIFIER_SEPARATOR_LENGTH;
+          continue;
+        }
+        if (currentCharacter === '/') {
+          postfixModifierPosition = index;
+          continue;
+        }
+      }
+      if (currentCharacter === '[') {
+        bracketDepth++;
+      } else if (currentCharacter === ']') {
+        bracketDepth--;
+      } else if (currentCharacter === '(') {
+        parenDepth++;
+      } else if (currentCharacter === ')') {
+        parenDepth--;
+      }
+    }
+    const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.substring(modifierStart);
+    const baseClassName = stripImportantModifier(baseClassNameWithImportantModifier);
+    const hasImportantModifier = baseClassName !== baseClassNameWithImportantModifier;
+    const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : undefined;
+    return {
+      modifiers,
+      hasImportantModifier,
+      baseClassName,
+      maybePostfixModifierPosition
+    };
+  };
+  if (prefix) {
+    const fullPrefix = prefix + MODIFIER_SEPARATOR;
+    const parseClassNameOriginal = parseClassName;
+    parseClassName = className => className.startsWith(fullPrefix) ? parseClassNameOriginal(className.substring(fullPrefix.length)) : {
+      isExternal: true,
+      modifiers: [],
+      hasImportantModifier: false,
+      baseClassName: className,
+      maybePostfixModifierPosition: undefined
+    };
+  }
+  if (experimentalParseClassName) {
+    const parseClassNameOriginal = parseClassName;
+    parseClassName = className => experimentalParseClassName({
+      className,
+      parseClassName: parseClassNameOriginal
+    });
+  }
+  return parseClassName;
+};
+const stripImportantModifier = baseClassName => {
+  if (baseClassName.endsWith(IMPORTANT_MODIFIER)) {
+    return baseClassName.substring(0, baseClassName.length - 1);
+  }
+  /**
+   * In Tailwind CSS v3 the important modifier was at the start of the base class name. This is still supported for legacy reasons.
+   * @see https://github.com/dcastil/tailwind-merge/issues/513#issuecomment-2614029864
+   */
+  if (baseClassName.startsWith(IMPORTANT_MODIFIER)) {
+    return baseClassName.substring(1);
+  }
+  return baseClassName;
+};
+
+/**
+ * Sorts modifiers according to following schema:
+ * - Predefined modifiers are sorted alphabetically
+ * - When an arbitrary variant appears, it must be preserved which modifiers are before and after it
+ */
+const createSortModifiers = config => {
+  const orderSensitiveModifiers = Object.fromEntries(config.orderSensitiveModifiers.map(modifier => [modifier, true]));
+  const sortModifiers = modifiers => {
+    if (modifiers.length <= 1) {
+      return modifiers;
+    }
+    const sortedModifiers = [];
+    let unsortedModifiers = [];
+    modifiers.forEach(modifier => {
+      const isPositionSensitive = modifier[0] === '[' || orderSensitiveModifiers[modifier];
+      if (isPositionSensitive) {
+        sortedModifiers.push(...unsortedModifiers.sort(), modifier);
+        unsortedModifiers = [];
+      } else {
+        unsortedModifiers.push(modifier);
+      }
+    });
+    sortedModifiers.push(...unsortedModifiers.sort());
+    return sortedModifiers;
+  };
+  return sortModifiers;
+};
+const createConfigUtils = config => ({
+  cache: createLruCache(config.cacheSize),
+  parseClassName: createParseClassName(config),
+  sortModifiers: createSortModifiers(config),
+  ...createClassGroupUtils(config)
+});
+const SPLIT_CLASSES_REGEX = /\s+/;
+const mergeClassList = (classList, configUtils) => {
+  const {
+    parseClassName,
+    getClassGroupId,
+    getConflictingClassGroupIds,
+    sortModifiers
+  } = configUtils;
+  /**
+   * Set of classGroupIds in following format:
+   * `{importantModifier}{variantModifiers}{classGroupId}`
+   * @example 'float'
+   * @example 'hover:focus:bg-color'
+   * @example 'md:!pr'
+   */
+  const classGroupsInConflict = [];
+  const classNames = classList.trim().split(SPLIT_CLASSES_REGEX);
+  let result = '';
+  for (let index = classNames.length - 1; index >= 0; index -= 1) {
+    const originalClassName = classNames[index];
+    const {
+      isExternal,
+      modifiers,
+      hasImportantModifier,
+      baseClassName,
+      maybePostfixModifierPosition
+    } = parseClassName(originalClassName);
+    if (isExternal) {
+      result = originalClassName + (result.length > 0 ? ' ' + result : result);
+      continue;
+    }
+    let hasPostfixModifier = !!maybePostfixModifierPosition;
+    let classGroupId = getClassGroupId(hasPostfixModifier ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
+    if (!classGroupId) {
+      if (!hasPostfixModifier) {
+        // Not a Tailwind class
+        result = originalClassName + (result.length > 0 ? ' ' + result : result);
+        continue;
+      }
+      classGroupId = getClassGroupId(baseClassName);
+      if (!classGroupId) {
+        // Not a Tailwind class
+        result = originalClassName + (result.length > 0 ? ' ' + result : result);
+        continue;
+      }
+      hasPostfixModifier = false;
+    }
+    const variantModifier = sortModifiers(modifiers).join(':');
+    const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
+    const classId = modifierId + classGroupId;
+    if (classGroupsInConflict.includes(classId)) {
+      // Tailwind class omitted due to conflict
+      continue;
+    }
+    classGroupsInConflict.push(classId);
+    const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier);
+    for (let i = 0; i < conflictGroups.length; ++i) {
+      const group = conflictGroups[i];
+      classGroupsInConflict.push(modifierId + group);
+    }
+    // Tailwind class not in conflict
+    result = originalClassName + (result.length > 0 ? ' ' + result : result);
+  }
+  return result;
+};
+
+/**
+ * The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better.
+ *
+ * Specifically:
+ * - Runtime code from https://github.com/lukeed/clsx/blob/v1.2.1/src/index.js
+ * - TypeScript types from https://github.com/lukeed/clsx/blob/v1.2.1/clsx.d.ts
+ *
+ * Original code has MIT license: Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
+ */
+function twJoin() {
+  let index = 0;
+  let argument;
+  let resolvedValue;
+  let string = '';
+  while (index < arguments.length) {
+    if (argument = arguments[index++]) {
+      if (resolvedValue = toValue(argument)) {
+        string && (string += ' ');
+        string += resolvedValue;
+      }
+    }
+  }
+  return string;
+}
+const toValue = mix => {
+  if (typeof mix === 'string') {
+    return mix;
+  }
+  let resolvedValue;
+  let string = '';
+  for (let k = 0; k < mix.length; k++) {
+    if (mix[k]) {
+      if (resolvedValue = toValue(mix[k])) {
+        string && (string += ' ');
+        string += resolvedValue;
+      }
+    }
+  }
+  return string;
+};
+function createTailwindMerge(createConfigFirst, ...createConfigRest) {
+  let configUtils;
+  let cacheGet;
+  let cacheSet;
+  let functionToCall = initTailwindMerge;
+  function initTailwindMerge(classList) {
+    const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
+    configUtils = createConfigUtils(config);
+    cacheGet = configUtils.cache.get;
+    cacheSet = configUtils.cache.set;
+    functionToCall = tailwindMerge;
+    return tailwindMerge(classList);
+  }
+  function tailwindMerge(classList) {
+    const cachedResult = cacheGet(classList);
+    if (cachedResult) {
+      return cachedResult;
+    }
+    const result = mergeClassList(classList, configUtils);
+    cacheSet(classList, result);
+    return result;
+  }
+  return function callTailwindMerge() {
+    return functionToCall(twJoin.apply(null, arguments));
+  };
+}
+const fromTheme = key => {
+  const themeGetter = theme => theme[key] || [];
+  themeGetter.isThemeGetter = true;
+  return themeGetter;
+};
+const arbitraryValueRegex = /^\[(?:(\w[\w-]*):)?(.+)\]$/i;
+const arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
+const fractionRegex = /^\d+\/\d+$/;
+const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
+const lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
+const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/;
+// Shadow always begins with x and y offset separated by underscore optionally prepended by inset
+const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
+const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
+const isFraction = value => fractionRegex.test(value);
+const isNumber = value => Boolean(value) && !Number.isNaN(Number(value));
+const isInteger = value => Boolean(value) && Number.isInteger(Number(value));
+const isPercent = value => value.endsWith('%') && isNumber(value.slice(0, -1));
+const isTshirtSize = value => tshirtUnitRegex.test(value);
+const isAny = () => true;
+const isLengthOnly = value =>
+// `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
+// For example, `hsl(0 0% 0%)` would be classified as a length without this check.
+// I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
+lengthUnitRegex.test(value) && !colorFunctionRegex.test(value);
+const isNever = () => false;
+const isShadow = value => shadowRegex.test(value);
+const isImage = value => imageRegex.test(value);
+const isAnyNonArbitrary = value => !isArbitraryValue(value) && !isArbitraryVariable(value);
+const isArbitrarySize = value => getIsArbitraryValue(value, isLabelSize, isNever);
+const isArbitraryValue = value => arbitraryValueRegex.test(value);
+const isArbitraryLength = value => getIsArbitraryValue(value, isLabelLength, isLengthOnly);
+const isArbitraryNumber = value => getIsArbitraryValue(value, isLabelNumber, isNumber);
+const isArbitraryPosition = value => getIsArbitraryValue(value, isLabelPosition, isNever);
+const isArbitraryImage = value => getIsArbitraryValue(value, isLabelImage, isImage);
+const isArbitraryShadow = value => getIsArbitraryValue(value, isNever, isShadow);
+const isArbitraryVariable = value => arbitraryVariableRegex.test(value);
+const isArbitraryVariableLength = value => getIsArbitraryVariable(value, isLabelLength);
+const isArbitraryVariableFamilyName = value => getIsArbitraryVariable(value, isLabelFamilyName);
+const isArbitraryVariablePosition = value => getIsArbitraryVariable(value, isLabelPosition);
+const isArbitraryVariableSize = value => getIsArbitraryVariable(value, isLabelSize);
+const isArbitraryVariableImage = value => getIsArbitraryVariable(value, isLabelImage);
+const isArbitraryVariableShadow = value => getIsArbitraryVariable(value, isLabelShadow, true);
+// Helpers
+const getIsArbitraryValue = (value, testLabel, testValue) => {
+  const result = arbitraryValueRegex.exec(value);
+  if (result) {
+    if (result[1]) {
+      return testLabel(result[1]);
+    }
+    return testValue(result[2]);
+  }
+  return false;
+};
+const getIsArbitraryVariable = (value, testLabel, shouldMatchNoLabel = false) => {
+  const result = arbitraryVariableRegex.exec(value);
+  if (result) {
+    if (result[1]) {
+      return testLabel(result[1]);
+    }
+    return shouldMatchNoLabel;
+  }
+  return false;
+};
+// Labels
+const isLabelPosition = label => label === 'position';
+const imageLabels = /*#__PURE__*/new Set(['image', 'url']);
+const isLabelImage = label => imageLabels.has(label);
+const sizeLabels = /*#__PURE__*/new Set(['length', 'size', 'percentage']);
+const isLabelSize = label => sizeLabels.has(label);
+const isLabelLength = label => label === 'length';
+const isLabelNumber = label => label === 'number';
+const isLabelFamilyName = label => label === 'family-name';
+const isLabelShadow = label => label === 'shadow';
+const getDefaultConfig = () => {
+  /**
+   * Theme getters for theme variable namespaces
+   * @see https://tailwindcss.com/docs/theme#theme-variable-namespaces
+   */
+  /***/
+  const themeColor = fromTheme('color');
+  const themeFont = fromTheme('font');
+  const themeText = fromTheme('text');
+  const themeFontWeight = fromTheme('font-weight');
+  const themeTracking = fromTheme('tracking');
+  const themeLeading = fromTheme('leading');
+  const themeBreakpoint = fromTheme('breakpoint');
+  const themeContainer = fromTheme('container');
+  const themeSpacing = fromTheme('spacing');
+  const themeRadius = fromTheme('radius');
+  const themeShadow = fromTheme('shadow');
+  const themeInsetShadow = fromTheme('inset-shadow');
+  const themeDropShadow = fromTheme('drop-shadow');
+  const themeBlur = fromTheme('blur');
+  const themePerspective = fromTheme('perspective');
+  const themeAspect = fromTheme('aspect');
+  const themeEase = fromTheme('ease');
+  const themeAnimate = fromTheme('animate');
+  /**
+   * Helpers to avoid repeating the same scales
+   *
+   * We use functions that create a new array every time they're called instead of static arrays.
+   * This ensures that users who modify any scale by mutating the array (e.g. with `array.push(element)`) don't accidentally mutate arrays in other parts of the config.
+   */
+  /***/
+  const scaleBreak = () => ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'];
+  const scalePosition = () => ['bottom', 'center', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top'];
+  const scaleOverflow = () => ['auto', 'hidden', 'clip', 'visible', 'scroll'];
+  const scaleOverscroll = () => ['auto', 'contain', 'none'];
+  const scaleUnambiguousSpacing = () => [isArbitraryVariable, isArbitraryValue, themeSpacing];
+  const scaleInset = () => [isFraction, 'full', 'auto', ...scaleUnambiguousSpacing()];
+  const scaleGridTemplateColsRows = () => [isInteger, 'none', 'subgrid', isArbitraryVariable, isArbitraryValue];
+  const scaleGridColRowStartAndEnd = () => ['auto', {
+    span: ['full', isInteger, isArbitraryVariable, isArbitraryValue]
+  }, isInteger, isArbitraryVariable, isArbitraryValue];
+  const scaleGridColRowStartOrEnd = () => [isInteger, 'auto', isArbitraryVariable, isArbitraryValue];
+  const scaleGridAutoColsRows = () => ['auto', 'min', 'max', 'fr', isArbitraryVariable, isArbitraryValue];
+  const scaleAlignPrimaryAxis = () => ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch', 'baseline'];
+  const scaleAlignSecondaryAxis = () => ['start', 'end', 'center', 'stretch'];
+  const scaleMargin = () => ['auto', ...scaleUnambiguousSpacing()];
+  const scaleSizing = () => [isFraction, 'auto', 'full', 'dvw', 'dvh', 'lvw', 'lvh', 'svw', 'svh', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
+  const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
+  const scaleGradientStopPosition = () => [isPercent, isArbitraryVariableLength, isArbitraryLength];
+  const scaleRadius = () => [
+  // Deprecated since Tailwind CSS v4.0.0
+  '', 'none', 'full', themeRadius, isArbitraryVariable, isArbitraryValue];
+  const scaleBorderWidth = () => ['', isNumber, isArbitraryVariableLength, isArbitraryLength];
+  const scaleLineStyle = () => ['solid', 'dashed', 'dotted', 'double'];
+  const scaleBlendMode = () => ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'];
+  const scaleBlur = () => [
+  // Deprecated since Tailwind CSS v4.0.0
+  '', 'none', themeBlur, isArbitraryVariable, isArbitraryValue];
+  const scaleOrigin = () => ['center', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left', isArbitraryVariable, isArbitraryValue];
+  const scaleRotate = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue];
+  const scaleScale = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue];
+  const scaleSkew = () => [isNumber, isArbitraryVariable, isArbitraryValue];
+  const scaleTranslate = () => [isFraction, 'full', ...scaleUnambiguousSpacing()];
+  return {
+    cacheSize: 500,
+    theme: {
+      animate: ['spin', 'ping', 'pulse', 'bounce'],
+      aspect: ['video'],
+      blur: [isTshirtSize],
+      breakpoint: [isTshirtSize],
+      color: [isAny],
+      container: [isTshirtSize],
+      'drop-shadow': [isTshirtSize],
+      ease: ['in', 'out', 'in-out'],
+      font: [isAnyNonArbitrary],
+      'font-weight': ['thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black'],
+      'inset-shadow': [isTshirtSize],
+      leading: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose'],
+      perspective: ['dramatic', 'near', 'normal', 'midrange', 'distant', 'none'],
+      radius: [isTshirtSize],
+      shadow: [isTshirtSize],
+      spacing: ['px', isNumber],
+      text: [isTshirtSize],
+      tracking: ['tighter', 'tight', 'normal', 'wide', 'wider', 'widest']
+    },
+    classGroups: {
+      // --------------
+      // --- Layout ---
+      // --------------
+      /**
+       * Aspect Ratio
+       * @see https://tailwindcss.com/docs/aspect-ratio
+       */
+      aspect: [{
+        aspect: ['auto', 'square', isFraction, isArbitraryValue, isArbitraryVariable, themeAspect]
+      }],
+      /**
+       * Container
+       * @see https://tailwindcss.com/docs/container
+       * @deprecated since Tailwind CSS v4.0.0
+       */
+      container: ['container'],
+      /**
+       * Columns
+       * @see https://tailwindcss.com/docs/columns
+       */
+      columns: [{
+        columns: [isNumber, isArbitraryValue, isArbitraryVariable, themeContainer]
+      }],
+      /**
+       * Break After
+       * @see https://tailwindcss.com/docs/break-after
+       */
+      'break-after': [{
+        'break-after': scaleBreak()
+      }],
+      /**
+       * Break Before
+       * @see https://tailwindcss.com/docs/break-before
+       */
+      'break-before': [{
+        'break-before': scaleBreak()
+      }],
+      /**
+       * Break Inside
+       * @see https://tailwindcss.com/docs/break-inside
+       */
+      'break-inside': [{
+        'break-inside': ['auto', 'avoid', 'avoid-page', 'avoid-column']
+      }],
+      /**
+       * Box Decoration Break
+       * @see https://tailwindcss.com/docs/box-decoration-break
+       */
+      'box-decoration': [{
+        'box-decoration': ['slice', 'clone']
+      }],
+      /**
+       * Box Sizing
+       * @see https://tailwindcss.com/docs/box-sizing
+       */
+      box: [{
+        box: ['border', 'content']
+      }],
+      /**
+       * Display
+       * @see https://tailwindcss.com/docs/display
+       */
+      display: ['block', 'inline-block', 'inline', 'flex', 'inline-flex', 'table', 'inline-table', 'table-caption', 'table-cell', 'table-column', 'table-column-group', 'table-footer-group', 'table-header-group', 'table-row-group', 'table-row', 'flow-root', 'grid', 'inline-grid', 'contents', 'list-item', 'hidden'],
+      /**
+       * Screen Reader Only
+       * @see https://tailwindcss.com/docs/display#screen-reader-only
+       */
+      sr: ['sr-only', 'not-sr-only'],
+      /**
+       * Floats
+       * @see https://tailwindcss.com/docs/float
+       */
+      float: [{
+        float: ['right', 'left', 'none', 'start', 'end']
+      }],
+      /**
+       * Clear
+       * @see https://tailwindcss.com/docs/clear
+       */
+      clear: [{
+        clear: ['left', 'right', 'both', 'none', 'start', 'end']
+      }],
+      /**
+       * Isolation
+       * @see https://tailwindcss.com/docs/isolation
+       */
+      isolation: ['isolate', 'isolation-auto'],
+      /**
+       * Object Fit
+       * @see https://tailwindcss.com/docs/object-fit
+       */
+      'object-fit': [{
+        object: ['contain', 'cover', 'fill', 'none', 'scale-down']
+      }],
+      /**
+       * Object Position
+       * @see https://tailwindcss.com/docs/object-position
+       */
+      'object-position': [{
+        object: [...scalePosition(), isArbitraryValue, isArbitraryVariable]
+      }],
+      /**
+       * Overflow
+       * @see https://tailwindcss.com/docs/overflow
+       */
+      overflow: [{
+        overflow: scaleOverflow()
+      }],
+      /**
+       * Overflow X
+       * @see https://tailwindcss.com/docs/overflow
+       */
+      'overflow-x': [{
+        'overflow-x': scaleOverflow()
+      }],
+      /**
+       * Overflow Y
+       * @see https://tailwindcss.com/docs/overflow
+       */
+      'overflow-y': [{
+        'overflow-y': scaleOverflow()
+      }],
+      /**
+       * Overscroll Behavior
+       * @see https://tailwindcss.com/docs/overscroll-behavior
+       */
+      overscroll: [{
+        overscroll: scaleOverscroll()
+      }],
+      /**
+       * Overscroll Behavior X
+       * @see https://tailwindcss.com/docs/overscroll-behavior
+       */
+      'overscroll-x': [{
+        'overscroll-x': scaleOverscroll()
+      }],
+      /**
+       * Overscroll Behavior Y
+       * @see https://tailwindcss.com/docs/overscroll-behavior
+       */
+      'overscroll-y': [{
+        'overscroll-y': scaleOverscroll()
+      }],
+      /**
+       * Position
+       * @see https://tailwindcss.com/docs/position
+       */
+      position: ['static', 'fixed', 'absolute', 'relative', 'sticky'],
+      /**
+       * Top / Right / Bottom / Left
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      inset: [{
+        inset: scaleInset()
+      }],
+      /**
+       * Right / Left
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      'inset-x': [{
+        'inset-x': scaleInset()
+      }],
+      /**
+       * Top / Bottom
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      'inset-y': [{
+        'inset-y': scaleInset()
+      }],
+      /**
+       * Start
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      start: [{
+        start: scaleInset()
+      }],
+      /**
+       * End
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      end: [{
+        end: scaleInset()
+      }],
+      /**
+       * Top
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      top: [{
+        top: scaleInset()
+      }],
+      /**
+       * Right
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      right: [{
+        right: scaleInset()
+      }],
+      /**
+       * Bottom
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      bottom: [{
+        bottom: scaleInset()
+      }],
+      /**
+       * Left
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      left: [{
+        left: scaleInset()
+      }],
+      /**
+       * Visibility
+       * @see https://tailwindcss.com/docs/visibility
+       */
+      visibility: ['visible', 'invisible', 'collapse'],
+      /**
+       * Z-Index
+       * @see https://tailwindcss.com/docs/z-index
+       */
+      z: [{
+        z: [isInteger, 'auto', isArbitraryVariable, isArbitraryValue]
+      }],
+      // ------------------------
+      // --- Flexbox and Grid ---
+      // ------------------------
+      /**
+       * Flex Basis
+       * @see https://tailwindcss.com/docs/flex-basis
+       */
+      basis: [{
+        basis: [isFraction, 'full', 'auto', themeContainer, ...scaleUnambiguousSpacing()]
+      }],
+      /**
+       * Flex Direction
+       * @see https://tailwindcss.com/docs/flex-direction
+       */
+      'flex-direction': [{
+        flex: ['row', 'row-reverse', 'col', 'col-reverse']
+      }],
+      /**
+       * Flex Wrap
+       * @see https://tailwindcss.com/docs/flex-wrap
+       */
+      'flex-wrap': [{
+        flex: ['nowrap', 'wrap', 'wrap-reverse']
+      }],
+      /**
+       * Flex
+       * @see https://tailwindcss.com/docs/flex
+       */
+      flex: [{
+        flex: [isNumber, isFraction, 'auto', 'initial', 'none', isArbitraryValue]
+      }],
+      /**
+       * Flex Grow
+       * @see https://tailwindcss.com/docs/flex-grow
+       */
+      grow: [{
+        grow: ['', isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Flex Shrink
+       * @see https://tailwindcss.com/docs/flex-shrink
+       */
+      shrink: [{
+        shrink: ['', isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Order
+       * @see https://tailwindcss.com/docs/order
+       */
+      order: [{
+        order: [isInteger, 'first', 'last', 'none', isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Grid Template Columns
+       * @see https://tailwindcss.com/docs/grid-template-columns
+       */
+      'grid-cols': [{
+        'grid-cols': scaleGridTemplateColsRows()
+      }],
+      /**
+       * Grid Column Start / End
+       * @see https://tailwindcss.com/docs/grid-column
+       */
+      'col-start-end': [{
+        col: scaleGridColRowStartAndEnd()
+      }],
+      /**
+       * Grid Column Start
+       * @see https://tailwindcss.com/docs/grid-column
+       */
+      'col-start': [{
+        'col-start': scaleGridColRowStartOrEnd()
+      }],
+      /**
+       * Grid Column End
+       * @see https://tailwindcss.com/docs/grid-column
+       */
+      'col-end': [{
+        'col-end': scaleGridColRowStartOrEnd()
+      }],
+      /**
+       * Grid Template Rows
+       * @see https://tailwindcss.com/docs/grid-template-rows
+       */
+      'grid-rows': [{
+        'grid-rows': scaleGridTemplateColsRows()
+      }],
+      /**
+       * Grid Row Start / End
+       * @see https://tailwindcss.com/docs/grid-row
+       */
+      'row-start-end': [{
+        row: scaleGridColRowStartAndEnd()
+      }],
+      /**
+       * Grid Row Start
+       * @see https://tailwindcss.com/docs/grid-row
+       */
+      'row-start': [{
+        'row-start': scaleGridColRowStartOrEnd()
+      }],
+      /**
+       * Grid Row End
+       * @see https://tailwindcss.com/docs/grid-row
+       */
+      'row-end': [{
+        'row-end': scaleGridColRowStartOrEnd()
+      }],
+      /**
+       * Grid Auto Flow
+       * @see https://tailwindcss.com/docs/grid-auto-flow
+       */
+      'grid-flow': [{
+        'grid-flow': ['row', 'col', 'dense', 'row-dense', 'col-dense']
+      }],
+      /**
+       * Grid Auto Columns
+       * @see https://tailwindcss.com/docs/grid-auto-columns
+       */
+      'auto-cols': [{
+        'auto-cols': scaleGridAutoColsRows()
+      }],
+      /**
+       * Grid Auto Rows
+       * @see https://tailwindcss.com/docs/grid-auto-rows
+       */
+      'auto-rows': [{
+        'auto-rows': scaleGridAutoColsRows()
+      }],
+      /**
+       * Gap
+       * @see https://tailwindcss.com/docs/gap
+       */
+      gap: [{
+        gap: scaleUnambiguousSpacing()
+      }],
+      /**
+       * Gap X
+       * @see https://tailwindcss.com/docs/gap
+       */
+      'gap-x': [{
+        'gap-x': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Gap Y
+       * @see https://tailwindcss.com/docs/gap
+       */
+      'gap-y': [{
+        'gap-y': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Justify Content
+       * @see https://tailwindcss.com/docs/justify-content
+       */
+      'justify-content': [{
+        justify: [...scaleAlignPrimaryAxis(), 'normal']
+      }],
+      /**
+       * Justify Items
+       * @see https://tailwindcss.com/docs/justify-items
+       */
+      'justify-items': [{
+        'justify-items': [...scaleAlignSecondaryAxis(), 'normal']
+      }],
+      /**
+       * Justify Self
+       * @see https://tailwindcss.com/docs/justify-self
+       */
+      'justify-self': [{
+        'justify-self': ['auto', ...scaleAlignSecondaryAxis()]
+      }],
+      /**
+       * Align Content
+       * @see https://tailwindcss.com/docs/align-content
+       */
+      'align-content': [{
+        content: ['normal', ...scaleAlignPrimaryAxis()]
+      }],
+      /**
+       * Align Items
+       * @see https://tailwindcss.com/docs/align-items
+       */
+      'align-items': [{
+        items: [...scaleAlignSecondaryAxis(), 'baseline']
+      }],
+      /**
+       * Align Self
+       * @see https://tailwindcss.com/docs/align-self
+       */
+      'align-self': [{
+        self: ['auto', ...scaleAlignSecondaryAxis(), 'baseline']
+      }],
+      /**
+       * Place Content
+       * @see https://tailwindcss.com/docs/place-content
+       */
+      'place-content': [{
+        'place-content': scaleAlignPrimaryAxis()
+      }],
+      /**
+       * Place Items
+       * @see https://tailwindcss.com/docs/place-items
+       */
+      'place-items': [{
+        'place-items': [...scaleAlignSecondaryAxis(), 'baseline']
+      }],
+      /**
+       * Place Self
+       * @see https://tailwindcss.com/docs/place-self
+       */
+      'place-self': [{
+        'place-self': ['auto', ...scaleAlignSecondaryAxis()]
+      }],
+      // Spacing
+      /**
+       * Padding
+       * @see https://tailwindcss.com/docs/padding
+       */
+      p: [{
+        p: scaleUnambiguousSpacing()
+      }],
+      /**
+       * Padding X
+       * @see https://tailwindcss.com/docs/padding
+       */
+      px: [{
+        px: scaleUnambiguousSpacing()
+      }],
+      /**
+       * Padding Y
+       * @see https://tailwindcss.com/docs/padding
+       */
+      py: [{
+        py: scaleUnambiguousSpacing()
+      }],
+      /**
+       * Padding Start
+       * @see https://tailwindcss.com/docs/padding
+       */
+      ps: [{
+        ps: scaleUnambiguousSpacing()
+      }],
+      /**
+       * Padding End
+       * @see https://tailwindcss.com/docs/padding
+       */
+      pe: [{
+        pe: scaleUnambiguousSpacing()
+      }],
+      /**
+       * Padding Top
+       * @see https://tailwindcss.com/docs/padding
+       */
+      pt: [{
+        pt: scaleUnambiguousSpacing()
+      }],
+      /**
+       * Padding Right
+       * @see https://tailwindcss.com/docs/padding
+       */
+      pr: [{
+        pr: scaleUnambiguousSpacing()
+      }],
+      /**
+       * Padding Bottom
+       * @see https://tailwindcss.com/docs/padding
+       */
+      pb: [{
+        pb: scaleUnambiguousSpacing()
+      }],
+      /**
+       * Padding Left
+       * @see https://tailwindcss.com/docs/padding
+       */
+      pl: [{
+        pl: scaleUnambiguousSpacing()
+      }],
+      /**
+       * Margin
+       * @see https://tailwindcss.com/docs/margin
+       */
+      m: [{
+        m: scaleMargin()
+      }],
+      /**
+       * Margin X
+       * @see https://tailwindcss.com/docs/margin
+       */
+      mx: [{
+        mx: scaleMargin()
+      }],
+      /**
+       * Margin Y
+       * @see https://tailwindcss.com/docs/margin
+       */
+      my: [{
+        my: scaleMargin()
+      }],
+      /**
+       * Margin Start
+       * @see https://tailwindcss.com/docs/margin
+       */
+      ms: [{
+        ms: scaleMargin()
+      }],
+      /**
+       * Margin End
+       * @see https://tailwindcss.com/docs/margin
+       */
+      me: [{
+        me: scaleMargin()
+      }],
+      /**
+       * Margin Top
+       * @see https://tailwindcss.com/docs/margin
+       */
+      mt: [{
+        mt: scaleMargin()
+      }],
+      /**
+       * Margin Right
+       * @see https://tailwindcss.com/docs/margin
+       */
+      mr: [{
+        mr: scaleMargin()
+      }],
+      /**
+       * Margin Bottom
+       * @see https://tailwindcss.com/docs/margin
+       */
+      mb: [{
+        mb: scaleMargin()
+      }],
+      /**
+       * Margin Left
+       * @see https://tailwindcss.com/docs/margin
+       */
+      ml: [{
+        ml: scaleMargin()
+      }],
+      /**
+       * Space Between X
+       * @see https://tailwindcss.com/docs/margin#adding-space-between-children
+       */
+      'space-x': [{
+        'space-x': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Space Between X Reverse
+       * @see https://tailwindcss.com/docs/margin#adding-space-between-children
+       */
+      'space-x-reverse': ['space-x-reverse'],
+      /**
+       * Space Between Y
+       * @see https://tailwindcss.com/docs/margin#adding-space-between-children
+       */
+      'space-y': [{
+        'space-y': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Space Between Y Reverse
+       * @see https://tailwindcss.com/docs/margin#adding-space-between-children
+       */
+      'space-y-reverse': ['space-y-reverse'],
+      // --------------
+      // --- Sizing ---
+      // --------------
+      /**
+       * Size
+       * @see https://tailwindcss.com/docs/width#setting-both-width-and-height
+       */
+      size: [{
+        size: scaleSizing()
+      }],
+      /**
+       * Width
+       * @see https://tailwindcss.com/docs/width
+       */
+      w: [{
+        w: [themeContainer, 'screen', ...scaleSizing()]
+      }],
+      /**
+       * Min-Width
+       * @see https://tailwindcss.com/docs/min-width
+       */
+      'min-w': [{
+        'min-w': [themeContainer, 'screen', /** Deprecated. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
+        'none', ...scaleSizing()]
+      }],
+      /**
+       * Max-Width
+       * @see https://tailwindcss.com/docs/max-width
+       */
+      'max-w': [{
+        'max-w': [themeContainer, 'screen', 'none', /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
+        'prose', /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
+        {
+          screen: [themeBreakpoint]
+        }, ...scaleSizing()]
+      }],
+      /**
+       * Height
+       * @see https://tailwindcss.com/docs/height
+       */
+      h: [{
+        h: ['screen', ...scaleSizing()]
+      }],
+      /**
+       * Min-Height
+       * @see https://tailwindcss.com/docs/min-height
+       */
+      'min-h': [{
+        'min-h': ['screen', 'none', ...scaleSizing()]
+      }],
+      /**
+       * Max-Height
+       * @see https://tailwindcss.com/docs/max-height
+       */
+      'max-h': [{
+        'max-h': ['screen', ...scaleSizing()]
+      }],
+      // ------------------
+      // --- Typography ---
+      // ------------------
+      /**
+       * Font Size
+       * @see https://tailwindcss.com/docs/font-size
+       */
+      'font-size': [{
+        text: ['base', themeText, isArbitraryVariableLength, isArbitraryLength]
+      }],
+      /**
+       * Font Smoothing
+       * @see https://tailwindcss.com/docs/font-smoothing
+       */
+      'font-smoothing': ['antialiased', 'subpixel-antialiased'],
+      /**
+       * Font Style
+       * @see https://tailwindcss.com/docs/font-style
+       */
+      'font-style': ['italic', 'not-italic'],
+      /**
+       * Font Weight
+       * @see https://tailwindcss.com/docs/font-weight
+       */
+      'font-weight': [{
+        font: [themeFontWeight, isArbitraryVariable, isArbitraryNumber]
+      }],
+      /**
+       * Font Stretch
+       * @see https://tailwindcss.com/docs/font-stretch
+       */
+      'font-stretch': [{
+        'font-stretch': ['ultra-condensed', 'extra-condensed', 'condensed', 'semi-condensed', 'normal', 'semi-expanded', 'expanded', 'extra-expanded', 'ultra-expanded', isPercent, isArbitraryValue]
+      }],
+      /**
+       * Font Family
+       * @see https://tailwindcss.com/docs/font-family
+       */
+      'font-family': [{
+        font: [isArbitraryVariableFamilyName, isArbitraryValue, themeFont]
+      }],
+      /**
+       * Font Variant Numeric
+       * @see https://tailwindcss.com/docs/font-variant-numeric
+       */
+      'fvn-normal': ['normal-nums'],
+      /**
+       * Font Variant Numeric
+       * @see https://tailwindcss.com/docs/font-variant-numeric
+       */
+      'fvn-ordinal': ['ordinal'],
+      /**
+       * Font Variant Numeric
+       * @see https://tailwindcss.com/docs/font-variant-numeric
+       */
+      'fvn-slashed-zero': ['slashed-zero'],
+      /**
+       * Font Variant Numeric
+       * @see https://tailwindcss.com/docs/font-variant-numeric
+       */
+      'fvn-figure': ['lining-nums', 'oldstyle-nums'],
+      /**
+       * Font Variant Numeric
+       * @see https://tailwindcss.com/docs/font-variant-numeric
+       */
+      'fvn-spacing': ['proportional-nums', 'tabular-nums'],
+      /**
+       * Font Variant Numeric
+       * @see https://tailwindcss.com/docs/font-variant-numeric
+       */
+      'fvn-fraction': ['diagonal-fractions', 'stacked-fractions'],
+      /**
+       * Letter Spacing
+       * @see https://tailwindcss.com/docs/letter-spacing
+       */
+      tracking: [{
+        tracking: [themeTracking, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Line Clamp
+       * @see https://tailwindcss.com/docs/line-clamp
+       */
+      'line-clamp': [{
+        'line-clamp': [isNumber, 'none', isArbitraryVariable, isArbitraryNumber]
+      }],
+      /**
+       * Line Height
+       * @see https://tailwindcss.com/docs/line-height
+       */
+      leading: [{
+        leading: [/** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
+        themeLeading, ...scaleUnambiguousSpacing()]
+      }],
+      /**
+       * List Style Image
+       * @see https://tailwindcss.com/docs/list-style-image
+       */
+      'list-image': [{
+        'list-image': ['none', isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * List Style Position
+       * @see https://tailwindcss.com/docs/list-style-position
+       */
+      'list-style-position': [{
+        list: ['inside', 'outside']
+      }],
+      /**
+       * List Style Type
+       * @see https://tailwindcss.com/docs/list-style-type
+       */
+      'list-style-type': [{
+        list: ['disc', 'decimal', 'none', isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Text Alignment
+       * @see https://tailwindcss.com/docs/text-align
+       */
+      'text-alignment': [{
+        text: ['left', 'center', 'right', 'justify', 'start', 'end']
+      }],
+      /**
+       * Placeholder Color
+       * @deprecated since Tailwind CSS v3.0.0
+       * @see https://v3.tailwindcss.com/docs/placeholder-color
+       */
+      'placeholder-color': [{
+        placeholder: scaleColor()
+      }],
+      /**
+       * Text Color
+       * @see https://tailwindcss.com/docs/text-color
+       */
+      'text-color': [{
+        text: scaleColor()
+      }],
+      /**
+       * Text Decoration
+       * @see https://tailwindcss.com/docs/text-decoration
+       */
+      'text-decoration': ['underline', 'overline', 'line-through', 'no-underline'],
+      /**
+       * Text Decoration Style
+       * @see https://tailwindcss.com/docs/text-decoration-style
+       */
+      'text-decoration-style': [{
+        decoration: [...scaleLineStyle(), 'wavy']
+      }],
+      /**
+       * Text Decoration Thickness
+       * @see https://tailwindcss.com/docs/text-decoration-thickness
+       */
+      'text-decoration-thickness': [{
+        decoration: [isNumber, 'from-font', 'auto', isArbitraryVariable, isArbitraryLength]
+      }],
+      /**
+       * Text Decoration Color
+       * @see https://tailwindcss.com/docs/text-decoration-color
+       */
+      'text-decoration-color': [{
+        decoration: scaleColor()
+      }],
+      /**
+       * Text Underline Offset
+       * @see https://tailwindcss.com/docs/text-underline-offset
+       */
+      'underline-offset': [{
+        'underline-offset': [isNumber, 'auto', isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Text Transform
+       * @see https://tailwindcss.com/docs/text-transform
+       */
+      'text-transform': ['uppercase', 'lowercase', 'capitalize', 'normal-case'],
+      /**
+       * Text Overflow
+       * @see https://tailwindcss.com/docs/text-overflow
+       */
+      'text-overflow': ['truncate', 'text-ellipsis', 'text-clip'],
+      /**
+       * Text Wrap
+       * @see https://tailwindcss.com/docs/text-wrap
+       */
+      'text-wrap': [{
+        text: ['wrap', 'nowrap', 'balance', 'pretty']
+      }],
+      /**
+       * Text Indent
+       * @see https://tailwindcss.com/docs/text-indent
+       */
+      indent: [{
+        indent: scaleUnambiguousSpacing()
+      }],
+      /**
+       * Vertical Alignment
+       * @see https://tailwindcss.com/docs/vertical-align
+       */
+      'vertical-align': [{
+        align: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super', isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Whitespace
+       * @see https://tailwindcss.com/docs/whitespace
+       */
+      whitespace: [{
+        whitespace: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces']
+      }],
+      /**
+       * Word Break
+       * @see https://tailwindcss.com/docs/word-break
+       */
+      break: [{
+        break: ['normal', 'words', 'all', 'keep']
+      }],
+      /**
+       * Hyphens
+       * @see https://tailwindcss.com/docs/hyphens
+       */
+      hyphens: [{
+        hyphens: ['none', 'manual', 'auto']
+      }],
+      /**
+       * Content
+       * @see https://tailwindcss.com/docs/content
+       */
+      content: [{
+        content: ['none', isArbitraryVariable, isArbitraryValue]
+      }],
+      // -------------------
+      // --- Backgrounds ---
+      // -------------------
+      /**
+       * Background Attachment
+       * @see https://tailwindcss.com/docs/background-attachment
+       */
+      'bg-attachment': [{
+        bg: ['fixed', 'local', 'scroll']
+      }],
+      /**
+       * Background Clip
+       * @see https://tailwindcss.com/docs/background-clip
+       */
+      'bg-clip': [{
+        'bg-clip': ['border', 'padding', 'content', 'text']
+      }],
+      /**
+       * Background Origin
+       * @see https://tailwindcss.com/docs/background-origin
+       */
+      'bg-origin': [{
+        'bg-origin': ['border', 'padding', 'content']
+      }],
+      /**
+       * Background Position
+       * @see https://tailwindcss.com/docs/background-position
+       */
+      'bg-position': [{
+        bg: [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition]
+      }],
+      /**
+       * Background Repeat
+       * @see https://tailwindcss.com/docs/background-repeat
+       */
+      'bg-repeat': [{
+        bg: ['no-repeat', {
+          repeat: ['', 'x', 'y', 'space', 'round']
+        }]
+      }],
+      /**
+       * Background Size
+       * @see https://tailwindcss.com/docs/background-size
+       */
+      'bg-size': [{
+        bg: ['auto', 'cover', 'contain', isArbitraryVariableSize, isArbitrarySize]
+      }],
+      /**
+       * Background Image
+       * @see https://tailwindcss.com/docs/background-image
+       */
+      'bg-image': [{
+        bg: ['none', {
+          linear: [{
+            to: ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl']
+          }, isInteger, isArbitraryVariable, isArbitraryValue],
+          radial: ['', isArbitraryVariable, isArbitraryValue],
+          conic: [isInteger, isArbitraryVariable, isArbitraryValue]
+        }, isArbitraryVariableImage, isArbitraryImage]
+      }],
+      /**
+       * Background Color
+       * @see https://tailwindcss.com/docs/background-color
+       */
+      'bg-color': [{
+        bg: scaleColor()
+      }],
+      /**
+       * Gradient Color Stops From Position
+       * @see https://tailwindcss.com/docs/gradient-color-stops
+       */
+      'gradient-from-pos': [{
+        from: scaleGradientStopPosition()
+      }],
+      /**
+       * Gradient Color Stops Via Position
+       * @see https://tailwindcss.com/docs/gradient-color-stops
+       */
+      'gradient-via-pos': [{
+        via: scaleGradientStopPosition()
+      }],
+      /**
+       * Gradient Color Stops To Position
+       * @see https://tailwindcss.com/docs/gradient-color-stops
+       */
+      'gradient-to-pos': [{
+        to: scaleGradientStopPosition()
+      }],
+      /**
+       * Gradient Color Stops From
+       * @see https://tailwindcss.com/docs/gradient-color-stops
+       */
+      'gradient-from': [{
+        from: scaleColor()
+      }],
+      /**
+       * Gradient Color Stops Via
+       * @see https://tailwindcss.com/docs/gradient-color-stops
+       */
+      'gradient-via': [{
+        via: scaleColor()
+      }],
+      /**
+       * Gradient Color Stops To
+       * @see https://tailwindcss.com/docs/gradient-color-stops
+       */
+      'gradient-to': [{
+        to: scaleColor()
+      }],
+      // ---------------
+      // --- Borders ---
+      // ---------------
+      /**
+       * Border Radius
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      rounded: [{
+        rounded: scaleRadius()
+      }],
+      /**
+       * Border Radius Start
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      'rounded-s': [{
+        'rounded-s': scaleRadius()
+      }],
+      /**
+       * Border Radius End
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      'rounded-e': [{
+        'rounded-e': scaleRadius()
+      }],
+      /**
+       * Border Radius Top
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      'rounded-t': [{
+        'rounded-t': scaleRadius()
+      }],
+      /**
+       * Border Radius Right
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      'rounded-r': [{
+        'rounded-r': scaleRadius()
+      }],
+      /**
+       * Border Radius Bottom
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      'rounded-b': [{
+        'rounded-b': scaleRadius()
+      }],
+      /**
+       * Border Radius Left
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      'rounded-l': [{
+        'rounded-l': scaleRadius()
+      }],
+      /**
+       * Border Radius Start Start
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      'rounded-ss': [{
+        'rounded-ss': scaleRadius()
+      }],
+      /**
+       * Border Radius Start End
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      'rounded-se': [{
+        'rounded-se': scaleRadius()
+      }],
+      /**
+       * Border Radius End End
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      'rounded-ee': [{
+        'rounded-ee': scaleRadius()
+      }],
+      /**
+       * Border Radius End Start
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      'rounded-es': [{
+        'rounded-es': scaleRadius()
+      }],
+      /**
+       * Border Radius Top Left
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      'rounded-tl': [{
+        'rounded-tl': scaleRadius()
+      }],
+      /**
+       * Border Radius Top Right
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      'rounded-tr': [{
+        'rounded-tr': scaleRadius()
+      }],
+      /**
+       * Border Radius Bottom Right
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      'rounded-br': [{
+        'rounded-br': scaleRadius()
+      }],
+      /**
+       * Border Radius Bottom Left
+       * @see https://tailwindcss.com/docs/border-radius
+       */
+      'rounded-bl': [{
+        'rounded-bl': scaleRadius()
+      }],
+      /**
+       * Border Width
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      'border-w': [{
+        border: scaleBorderWidth()
+      }],
+      /**
+       * Border Width X
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      'border-w-x': [{
+        'border-x': scaleBorderWidth()
+      }],
+      /**
+       * Border Width Y
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      'border-w-y': [{
+        'border-y': scaleBorderWidth()
+      }],
+      /**
+       * Border Width Start
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      'border-w-s': [{
+        'border-s': scaleBorderWidth()
+      }],
+      /**
+       * Border Width End
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      'border-w-e': [{
+        'border-e': scaleBorderWidth()
+      }],
+      /**
+       * Border Width Top
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      'border-w-t': [{
+        'border-t': scaleBorderWidth()
+      }],
+      /**
+       * Border Width Right
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      'border-w-r': [{
+        'border-r': scaleBorderWidth()
+      }],
+      /**
+       * Border Width Bottom
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      'border-w-b': [{
+        'border-b': scaleBorderWidth()
+      }],
+      /**
+       * Border Width Left
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      'border-w-l': [{
+        'border-l': scaleBorderWidth()
+      }],
+      /**
+       * Divide Width X
+       * @see https://tailwindcss.com/docs/border-width#between-children
+       */
+      'divide-x': [{
+        'divide-x': scaleBorderWidth()
+      }],
+      /**
+       * Divide Width X Reverse
+       * @see https://tailwindcss.com/docs/border-width#between-children
+       */
+      'divide-x-reverse': ['divide-x-reverse'],
+      /**
+       * Divide Width Y
+       * @see https://tailwindcss.com/docs/border-width#between-children
+       */
+      'divide-y': [{
+        'divide-y': scaleBorderWidth()
+      }],
+      /**
+       * Divide Width Y Reverse
+       * @see https://tailwindcss.com/docs/border-width#between-children
+       */
+      'divide-y-reverse': ['divide-y-reverse'],
+      /**
+       * Border Style
+       * @see https://tailwindcss.com/docs/border-style
+       */
+      'border-style': [{
+        border: [...scaleLineStyle(), 'hidden', 'none']
+      }],
+      /**
+       * Divide Style
+       * @see https://tailwindcss.com/docs/border-style#setting-the-divider-style
+       */
+      'divide-style': [{
+        divide: [...scaleLineStyle(), 'hidden', 'none']
+      }],
+      /**
+       * Border Color
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      'border-color': [{
+        border: scaleColor()
+      }],
+      /**
+       * Border Color X
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      'border-color-x': [{
+        'border-x': scaleColor()
+      }],
+      /**
+       * Border Color Y
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      'border-color-y': [{
+        'border-y': scaleColor()
+      }],
+      /**
+       * Border Color S
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      'border-color-s': [{
+        'border-s': scaleColor()
+      }],
+      /**
+       * Border Color E
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      'border-color-e': [{
+        'border-e': scaleColor()
+      }],
+      /**
+       * Border Color Top
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      'border-color-t': [{
+        'border-t': scaleColor()
+      }],
+      /**
+       * Border Color Right
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      'border-color-r': [{
+        'border-r': scaleColor()
+      }],
+      /**
+       * Border Color Bottom
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      'border-color-b': [{
+        'border-b': scaleColor()
+      }],
+      /**
+       * Border Color Left
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      'border-color-l': [{
+        'border-l': scaleColor()
+      }],
+      /**
+       * Divide Color
+       * @see https://tailwindcss.com/docs/divide-color
+       */
+      'divide-color': [{
+        divide: scaleColor()
+      }],
+      /**
+       * Outline Style
+       * @see https://tailwindcss.com/docs/outline-style
+       */
+      'outline-style': [{
+        outline: [...scaleLineStyle(), 'none', 'hidden']
+      }],
+      /**
+       * Outline Offset
+       * @see https://tailwindcss.com/docs/outline-offset
+       */
+      'outline-offset': [{
+        'outline-offset': [isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Outline Width
+       * @see https://tailwindcss.com/docs/outline-width
+       */
+      'outline-w': [{
+        outline: ['', isNumber, isArbitraryVariableLength, isArbitraryLength]
+      }],
+      /**
+       * Outline Color
+       * @see https://tailwindcss.com/docs/outline-color
+       */
+      'outline-color': [{
+        outline: [themeColor]
+      }],
+      // ---------------
+      // --- Effects ---
+      // ---------------
+      /**
+       * Box Shadow
+       * @see https://tailwindcss.com/docs/box-shadow
+       */
+      shadow: [{
+        shadow: [
+        // Deprecated since Tailwind CSS v4.0.0
+        '', 'none', themeShadow, isArbitraryVariableShadow, isArbitraryShadow]
+      }],
+      /**
+       * Box Shadow Color
+       * @see https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color
+       */
+      'shadow-color': [{
+        shadow: scaleColor()
+      }],
+      /**
+       * Inset Box Shadow
+       * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
+       */
+      'inset-shadow': [{
+        'inset-shadow': ['none', isArbitraryVariable, isArbitraryValue, themeInsetShadow]
+      }],
+      /**
+       * Inset Box Shadow Color
+       * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color
+       */
+      'inset-shadow-color': [{
+        'inset-shadow': scaleColor()
+      }],
+      /**
+       * Ring Width
+       * @see https://tailwindcss.com/docs/box-shadow#adding-a-ring
+       */
+      'ring-w': [{
+        ring: scaleBorderWidth()
+      }],
+      /**
+       * Ring Width Inset
+       * @see https://v3.tailwindcss.com/docs/ring-width#inset-rings
+       * @deprecated since Tailwind CSS v4.0.0
+       * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
+       */
+      'ring-w-inset': ['ring-inset'],
+      /**
+       * Ring Color
+       * @see https://tailwindcss.com/docs/box-shadow#setting-the-ring-color
+       */
+      'ring-color': [{
+        ring: scaleColor()
+      }],
+      /**
+       * Ring Offset Width
+       * @see https://v3.tailwindcss.com/docs/ring-offset-width
+       * @deprecated since Tailwind CSS v4.0.0
+       * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
+       */
+      'ring-offset-w': [{
+        'ring-offset': [isNumber, isArbitraryLength]
+      }],
+      /**
+       * Ring Offset Color
+       * @see https://v3.tailwindcss.com/docs/ring-offset-color
+       * @deprecated since Tailwind CSS v4.0.0
+       * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
+       */
+      'ring-offset-color': [{
+        'ring-offset': scaleColor()
+      }],
+      /**
+       * Inset Ring Width
+       * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-ring
+       */
+      'inset-ring-w': [{
+        'inset-ring': scaleBorderWidth()
+      }],
+      /**
+       * Inset Ring Color
+       * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-ring-color
+       */
+      'inset-ring-color': [{
+        'inset-ring': scaleColor()
+      }],
+      /**
+       * Opacity
+       * @see https://tailwindcss.com/docs/opacity
+       */
+      opacity: [{
+        opacity: [isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Mix Blend Mode
+       * @see https://tailwindcss.com/docs/mix-blend-mode
+       */
+      'mix-blend': [{
+        'mix-blend': [...scaleBlendMode(), 'plus-darker', 'plus-lighter']
+      }],
+      /**
+       * Background Blend Mode
+       * @see https://tailwindcss.com/docs/background-blend-mode
+       */
+      'bg-blend': [{
+        'bg-blend': scaleBlendMode()
+      }],
+      // ---------------
+      // --- Filters ---
+      // ---------------
+      /**
+       * Filter
+       * @see https://tailwindcss.com/docs/filter
+       */
+      filter: [{
+        filter: [
+        // Deprecated since Tailwind CSS v3.0.0
+        '', 'none', isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Blur
+       * @see https://tailwindcss.com/docs/blur
+       */
+      blur: [{
+        blur: scaleBlur()
+      }],
+      /**
+       * Brightness
+       * @see https://tailwindcss.com/docs/brightness
+       */
+      brightness: [{
+        brightness: [isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Contrast
+       * @see https://tailwindcss.com/docs/contrast
+       */
+      contrast: [{
+        contrast: [isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Drop Shadow
+       * @see https://tailwindcss.com/docs/drop-shadow
+       */
+      'drop-shadow': [{
+        'drop-shadow': [
+        // Deprecated since Tailwind CSS v4.0.0
+        '', 'none', themeDropShadow, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Grayscale
+       * @see https://tailwindcss.com/docs/grayscale
+       */
+      grayscale: [{
+        grayscale: ['', isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Hue Rotate
+       * @see https://tailwindcss.com/docs/hue-rotate
+       */
+      'hue-rotate': [{
+        'hue-rotate': [isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Invert
+       * @see https://tailwindcss.com/docs/invert
+       */
+      invert: [{
+        invert: ['', isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Saturate
+       * @see https://tailwindcss.com/docs/saturate
+       */
+      saturate: [{
+        saturate: [isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Sepia
+       * @see https://tailwindcss.com/docs/sepia
+       */
+      sepia: [{
+        sepia: ['', isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Backdrop Filter
+       * @see https://tailwindcss.com/docs/backdrop-filter
+       */
+      'backdrop-filter': [{
+        'backdrop-filter': [
+        // Deprecated since Tailwind CSS v3.0.0
+        '', 'none', isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Backdrop Blur
+       * @see https://tailwindcss.com/docs/backdrop-blur
+       */
+      'backdrop-blur': [{
+        'backdrop-blur': scaleBlur()
+      }],
+      /**
+       * Backdrop Brightness
+       * @see https://tailwindcss.com/docs/backdrop-brightness
+       */
+      'backdrop-brightness': [{
+        'backdrop-brightness': [isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Backdrop Contrast
+       * @see https://tailwindcss.com/docs/backdrop-contrast
+       */
+      'backdrop-contrast': [{
+        'backdrop-contrast': [isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Backdrop Grayscale
+       * @see https://tailwindcss.com/docs/backdrop-grayscale
+       */
+      'backdrop-grayscale': [{
+        'backdrop-grayscale': ['', isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Backdrop Hue Rotate
+       * @see https://tailwindcss.com/docs/backdrop-hue-rotate
+       */
+      'backdrop-hue-rotate': [{
+        'backdrop-hue-rotate': [isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Backdrop Invert
+       * @see https://tailwindcss.com/docs/backdrop-invert
+       */
+      'backdrop-invert': [{
+        'backdrop-invert': ['', isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Backdrop Opacity
+       * @see https://tailwindcss.com/docs/backdrop-opacity
+       */
+      'backdrop-opacity': [{
+        'backdrop-opacity': [isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Backdrop Saturate
+       * @see https://tailwindcss.com/docs/backdrop-saturate
+       */
+      'backdrop-saturate': [{
+        'backdrop-saturate': [isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Backdrop Sepia
+       * @see https://tailwindcss.com/docs/backdrop-sepia
+       */
+      'backdrop-sepia': [{
+        'backdrop-sepia': ['', isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      // --------------
+      // --- Tables ---
+      // --------------
+      /**
+       * Border Collapse
+       * @see https://tailwindcss.com/docs/border-collapse
+       */
+      'border-collapse': [{
+        border: ['collapse', 'separate']
+      }],
+      /**
+       * Border Spacing
+       * @see https://tailwindcss.com/docs/border-spacing
+       */
+      'border-spacing': [{
+        'border-spacing': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Border Spacing X
+       * @see https://tailwindcss.com/docs/border-spacing
+       */
+      'border-spacing-x': [{
+        'border-spacing-x': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Border Spacing Y
+       * @see https://tailwindcss.com/docs/border-spacing
+       */
+      'border-spacing-y': [{
+        'border-spacing-y': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Table Layout
+       * @see https://tailwindcss.com/docs/table-layout
+       */
+      'table-layout': [{
+        table: ['auto', 'fixed']
+      }],
+      /**
+       * Caption Side
+       * @see https://tailwindcss.com/docs/caption-side
+       */
+      caption: [{
+        caption: ['top', 'bottom']
+      }],
+      // ---------------------------------
+      // --- Transitions and Animation ---
+      // ---------------------------------
+      /**
+       * Transition Property
+       * @see https://tailwindcss.com/docs/transition-property
+       */
+      transition: [{
+        transition: ['', 'all', 'colors', 'opacity', 'shadow', 'transform', 'none', isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Transition Behavior
+       * @see https://tailwindcss.com/docs/transition-behavior
+       */
+      'transition-behavior': [{
+        transition: ['normal', 'discrete']
+      }],
+      /**
+       * Transition Duration
+       * @see https://tailwindcss.com/docs/transition-duration
+       */
+      duration: [{
+        duration: [isNumber, 'initial', isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Transition Timing Function
+       * @see https://tailwindcss.com/docs/transition-timing-function
+       */
+      ease: [{
+        ease: ['linear', 'initial', themeEase, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Transition Delay
+       * @see https://tailwindcss.com/docs/transition-delay
+       */
+      delay: [{
+        delay: [isNumber, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Animation
+       * @see https://tailwindcss.com/docs/animation
+       */
+      animate: [{
+        animate: ['none', themeAnimate, isArbitraryVariable, isArbitraryValue]
+      }],
+      // ------------------
+      // --- Transforms ---
+      // ------------------
+      /**
+       * Backface Visibility
+       * @see https://tailwindcss.com/docs/backface-visibility
+       */
+      backface: [{
+        backface: ['hidden', 'visible']
+      }],
+      /**
+       * Perspective
+       * @see https://tailwindcss.com/docs/perspective
+       */
+      perspective: [{
+        perspective: [themePerspective, isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Perspective Origin
+       * @see https://tailwindcss.com/docs/perspective-origin
+       */
+      'perspective-origin': [{
+        'perspective-origin': scaleOrigin()
+      }],
+      /**
+       * Rotate
+       * @see https://tailwindcss.com/docs/rotate
+       */
+      rotate: [{
+        rotate: scaleRotate()
+      }],
+      /**
+       * Rotate X
+       * @see https://tailwindcss.com/docs/rotate
+       */
+      'rotate-x': [{
+        'rotate-x': scaleRotate()
+      }],
+      /**
+       * Rotate Y
+       * @see https://tailwindcss.com/docs/rotate
+       */
+      'rotate-y': [{
+        'rotate-y': scaleRotate()
+      }],
+      /**
+       * Rotate Z
+       * @see https://tailwindcss.com/docs/rotate
+       */
+      'rotate-z': [{
+        'rotate-z': scaleRotate()
+      }],
+      /**
+       * Scale
+       * @see https://tailwindcss.com/docs/scale
+       */
+      scale: [{
+        scale: scaleScale()
+      }],
+      /**
+       * Scale X
+       * @see https://tailwindcss.com/docs/scale
+       */
+      'scale-x': [{
+        'scale-x': scaleScale()
+      }],
+      /**
+       * Scale Y
+       * @see https://tailwindcss.com/docs/scale
+       */
+      'scale-y': [{
+        'scale-y': scaleScale()
+      }],
+      /**
+       * Scale Z
+       * @see https://tailwindcss.com/docs/scale
+       */
+      'scale-z': [{
+        'scale-z': scaleScale()
+      }],
+      /**
+       * Scale 3D
+       * @see https://tailwindcss.com/docs/scale
+       */
+      'scale-3d': ['scale-3d'],
+      /**
+       * Skew
+       * @see https://tailwindcss.com/docs/skew
+       */
+      skew: [{
+        skew: scaleSkew()
+      }],
+      /**
+       * Skew X
+       * @see https://tailwindcss.com/docs/skew
+       */
+      'skew-x': [{
+        'skew-x': scaleSkew()
+      }],
+      /**
+       * Skew Y
+       * @see https://tailwindcss.com/docs/skew
+       */
+      'skew-y': [{
+        'skew-y': scaleSkew()
+      }],
+      /**
+       * Transform
+       * @see https://tailwindcss.com/docs/transform
+       */
+      transform: [{
+        transform: [isArbitraryVariable, isArbitraryValue, '', 'none', 'gpu', 'cpu']
+      }],
+      /**
+       * Transform Origin
+       * @see https://tailwindcss.com/docs/transform-origin
+       */
+      'transform-origin': [{
+        origin: scaleOrigin()
+      }],
+      /**
+       * Transform Style
+       * @see https://tailwindcss.com/docs/transform-style
+       */
+      'transform-style': [{
+        transform: ['3d', 'flat']
+      }],
+      /**
+       * Translate
+       * @see https://tailwindcss.com/docs/translate
+       */
+      translate: [{
+        translate: scaleTranslate()
+      }],
+      /**
+       * Translate X
+       * @see https://tailwindcss.com/docs/translate
+       */
+      'translate-x': [{
+        'translate-x': scaleTranslate()
+      }],
+      /**
+       * Translate Y
+       * @see https://tailwindcss.com/docs/translate
+       */
+      'translate-y': [{
+        'translate-y': scaleTranslate()
+      }],
+      /**
+       * Translate Z
+       * @see https://tailwindcss.com/docs/translate
+       */
+      'translate-z': [{
+        'translate-z': scaleTranslate()
+      }],
+      /**
+       * Translate None
+       * @see https://tailwindcss.com/docs/translate
+       */
+      'translate-none': ['translate-none'],
+      // ---------------------
+      // --- Interactivity ---
+      // ---------------------
+      /**
+       * Accent Color
+       * @see https://tailwindcss.com/docs/accent-color
+       */
+      accent: [{
+        accent: scaleColor()
+      }],
+      /**
+       * Appearance
+       * @see https://tailwindcss.com/docs/appearance
+       */
+      appearance: [{
+        appearance: ['none', 'auto']
+      }],
+      /**
+       * Caret Color
+       * @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
+       */
+      'caret-color': [{
+        caret: scaleColor()
+      }],
+      /**
+       * Color Scheme
+       * @see https://tailwindcss.com/docs/color-scheme
+       */
+      'color-scheme': [{
+        scheme: ['normal', 'dark', 'light', 'light-dark', 'only-dark', 'only-light']
+      }],
+      /**
+       * Cursor
+       * @see https://tailwindcss.com/docs/cursor
+       */
+      cursor: [{
+        cursor: ['auto', 'default', 'pointer', 'wait', 'text', 'move', 'help', 'not-allowed', 'none', 'context-menu', 'progress', 'cell', 'crosshair', 'vertical-text', 'alias', 'copy', 'no-drop', 'grab', 'grabbing', 'all-scroll', 'col-resize', 'row-resize', 'n-resize', 'e-resize', 's-resize', 'w-resize', 'ne-resize', 'nw-resize', 'se-resize', 'sw-resize', 'ew-resize', 'ns-resize', 'nesw-resize', 'nwse-resize', 'zoom-in', 'zoom-out', isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Field Sizing
+       * @see https://tailwindcss.com/docs/field-sizing
+       */
+      'field-sizing': [{
+        'field-sizing': ['fixed', 'content']
+      }],
+      /**
+       * Pointer Events
+       * @see https://tailwindcss.com/docs/pointer-events
+       */
+      'pointer-events': [{
+        'pointer-events': ['auto', 'none']
+      }],
+      /**
+       * Resize
+       * @see https://tailwindcss.com/docs/resize
+       */
+      resize: [{
+        resize: ['none', '', 'y', 'x']
+      }],
+      /**
+       * Scroll Behavior
+       * @see https://tailwindcss.com/docs/scroll-behavior
+       */
+      'scroll-behavior': [{
+        scroll: ['auto', 'smooth']
+      }],
+      /**
+       * Scroll Margin
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-m': [{
+        'scroll-m': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Margin X
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-mx': [{
+        'scroll-mx': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Margin Y
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-my': [{
+        'scroll-my': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Margin Start
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-ms': [{
+        'scroll-ms': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Margin End
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-me': [{
+        'scroll-me': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Margin Top
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-mt': [{
+        'scroll-mt': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Margin Right
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-mr': [{
+        'scroll-mr': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Margin Bottom
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-mb': [{
+        'scroll-mb': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Margin Left
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-ml': [{
+        'scroll-ml': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Padding
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-p': [{
+        'scroll-p': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Padding X
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-px': [{
+        'scroll-px': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Padding Y
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-py': [{
+        'scroll-py': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Padding Start
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-ps': [{
+        'scroll-ps': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Padding End
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-pe': [{
+        'scroll-pe': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Padding Top
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-pt': [{
+        'scroll-pt': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Padding Right
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-pr': [{
+        'scroll-pr': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Padding Bottom
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-pb': [{
+        'scroll-pb': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Padding Left
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-pl': [{
+        'scroll-pl': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Snap Align
+       * @see https://tailwindcss.com/docs/scroll-snap-align
+       */
+      'snap-align': [{
+        snap: ['start', 'end', 'center', 'align-none']
+      }],
+      /**
+       * Scroll Snap Stop
+       * @see https://tailwindcss.com/docs/scroll-snap-stop
+       */
+      'snap-stop': [{
+        snap: ['normal', 'always']
+      }],
+      /**
+       * Scroll Snap Type
+       * @see https://tailwindcss.com/docs/scroll-snap-type
+       */
+      'snap-type': [{
+        snap: ['none', 'x', 'y', 'both']
+      }],
+      /**
+       * Scroll Snap Type Strictness
+       * @see https://tailwindcss.com/docs/scroll-snap-type
+       */
+      'snap-strictness': [{
+        snap: ['mandatory', 'proximity']
+      }],
+      /**
+       * Touch Action
+       * @see https://tailwindcss.com/docs/touch-action
+       */
+      touch: [{
+        touch: ['auto', 'none', 'manipulation']
+      }],
+      /**
+       * Touch Action X
+       * @see https://tailwindcss.com/docs/touch-action
+       */
+      'touch-x': [{
+        'touch-pan': ['x', 'left', 'right']
+      }],
+      /**
+       * Touch Action Y
+       * @see https://tailwindcss.com/docs/touch-action
+       */
+      'touch-y': [{
+        'touch-pan': ['y', 'up', 'down']
+      }],
+      /**
+       * Touch Action Pinch Zoom
+       * @see https://tailwindcss.com/docs/touch-action
+       */
+      'touch-pz': ['touch-pinch-zoom'],
+      /**
+       * User Select
+       * @see https://tailwindcss.com/docs/user-select
+       */
+      select: [{
+        select: ['none', 'text', 'all', 'auto']
+      }],
+      /**
+       * Will Change
+       * @see https://tailwindcss.com/docs/will-change
+       */
+      'will-change': [{
+        'will-change': ['auto', 'scroll', 'contents', 'transform', isArbitraryVariable, isArbitraryValue]
+      }],
+      // -----------
+      // --- SVG ---
+      // -----------
+      /**
+       * Fill
+       * @see https://tailwindcss.com/docs/fill
+       */
+      fill: [{
+        fill: ['none', ...scaleColor()]
+      }],
+      /**
+       * Stroke Width
+       * @see https://tailwindcss.com/docs/stroke-width
+       */
+      'stroke-w': [{
+        stroke: [isNumber, isArbitraryVariableLength, isArbitraryLength, isArbitraryNumber]
+      }],
+      /**
+       * Stroke
+       * @see https://tailwindcss.com/docs/stroke
+       */
+      stroke: [{
+        stroke: ['none', ...scaleColor()]
+      }],
+      // ---------------------
+      // --- Accessibility ---
+      // ---------------------
+      /**
+       * Forced Color Adjust
+       * @see https://tailwindcss.com/docs/forced-color-adjust
+       */
+      'forced-color-adjust': [{
+        'forced-color-adjust': ['auto', 'none']
+      }]
+    },
+    conflictingClassGroups: {
+      overflow: ['overflow-x', 'overflow-y'],
+      overscroll: ['overscroll-x', 'overscroll-y'],
+      inset: ['inset-x', 'inset-y', 'start', 'end', 'top', 'right', 'bottom', 'left'],
+      'inset-x': ['right', 'left'],
+      'inset-y': ['top', 'bottom'],
+      flex: ['basis', 'grow', 'shrink'],
+      gap: ['gap-x', 'gap-y'],
+      p: ['px', 'py', 'ps', 'pe', 'pt', 'pr', 'pb', 'pl'],
+      px: ['pr', 'pl'],
+      py: ['pt', 'pb'],
+      m: ['mx', 'my', 'ms', 'me', 'mt', 'mr', 'mb', 'ml'],
+      mx: ['mr', 'ml'],
+      my: ['mt', 'mb'],
+      size: ['w', 'h'],
+      'font-size': ['leading'],
+      'fvn-normal': ['fvn-ordinal', 'fvn-slashed-zero', 'fvn-figure', 'fvn-spacing', 'fvn-fraction'],
+      'fvn-ordinal': ['fvn-normal'],
+      'fvn-slashed-zero': ['fvn-normal'],
+      'fvn-figure': ['fvn-normal'],
+      'fvn-spacing': ['fvn-normal'],
+      'fvn-fraction': ['fvn-normal'],
+      'line-clamp': ['display', 'overflow'],
+      rounded: ['rounded-s', 'rounded-e', 'rounded-t', 'rounded-r', 'rounded-b', 'rounded-l', 'rounded-ss', 'rounded-se', 'rounded-ee', 'rounded-es', 'rounded-tl', 'rounded-tr', 'rounded-br', 'rounded-bl'],
+      'rounded-s': ['rounded-ss', 'rounded-es'],
+      'rounded-e': ['rounded-se', 'rounded-ee'],
+      'rounded-t': ['rounded-tl', 'rounded-tr'],
+      'rounded-r': ['rounded-tr', 'rounded-br'],
+      'rounded-b': ['rounded-br', 'rounded-bl'],
+      'rounded-l': ['rounded-tl', 'rounded-bl'],
+      'border-spacing': ['border-spacing-x', 'border-spacing-y'],
+      'border-w': ['border-w-s', 'border-w-e', 'border-w-t', 'border-w-r', 'border-w-b', 'border-w-l'],
+      'border-w-x': ['border-w-r', 'border-w-l'],
+      'border-w-y': ['border-w-t', 'border-w-b'],
+      'border-color': ['border-color-s', 'border-color-e', 'border-color-t', 'border-color-r', 'border-color-b', 'border-color-l'],
+      'border-color-x': ['border-color-r', 'border-color-l'],
+      'border-color-y': ['border-color-t', 'border-color-b'],
+      translate: ['translate-x', 'translate-y', 'translate-none'],
+      'translate-none': ['translate', 'translate-x', 'translate-y', 'translate-z'],
+      'scroll-m': ['scroll-mx', 'scroll-my', 'scroll-ms', 'scroll-me', 'scroll-mt', 'scroll-mr', 'scroll-mb', 'scroll-ml'],
+      'scroll-mx': ['scroll-mr', 'scroll-ml'],
+      'scroll-my': ['scroll-mt', 'scroll-mb'],
+      'scroll-p': ['scroll-px', 'scroll-py', 'scroll-ps', 'scroll-pe', 'scroll-pt', 'scroll-pr', 'scroll-pb', 'scroll-pl'],
+      'scroll-px': ['scroll-pr', 'scroll-pl'],
+      'scroll-py': ['scroll-pt', 'scroll-pb'],
+      touch: ['touch-x', 'touch-y', 'touch-pz'],
+      'touch-x': ['touch'],
+      'touch-y': ['touch'],
+      'touch-pz': ['touch']
+    },
+    conflictingClassGroupModifiers: {
+      'font-size': ['leading']
+    },
+    orderSensitiveModifiers: ['before', 'after', 'placeholder', 'file', 'marker', 'selection', 'first-line', 'first-letter', 'backdrop', '*', '**']
+  };
+};
+const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
+
+class ComponentTheme {
+    constructor(tag, base, subThemes, defaults = {}) {
+        this.tag = tag;
+        this.base = base;
+        this.defaults = defaults;
+        const defaultInternalThemes = {
+            layout: {
+                hide: new HideTheme(),
+                items: new ItemsTheme(),
+                justify: new JustifyTheme(),
+                position: new PositionTheme(),
+                display: new DisplayTheme()
+            },
+            typography: {
+                fontFamily: new FontFamilyTheme(),
+                fontWeight: new FontWeightTheme(),
+                fontStyle: new FontStyleTheme(),
+                textDecoration: new TextDecorationTheme(),
+                textTransform: new TextTransformTheme(),
+                textAlign: new TextAlignTheme()
+            }
+        };
+        this.themes = deepMerge(defaultInternalThemes, subThemes);
+    }
+    getClasses(props, defaults = this.defaults) {
+        const user = props;
+        const defs = defaults;
+        const classes = [];
+        if (this.base) {
+            classes.push(...this.base.split(/\s+/));
+        }
+        const walk = (map) => {
+            for (const key of Object.keys(map)) {
+                const node = map[key];
+                if (node instanceof BaseTheme) {
+                    classes.push(...node.getClasses(user, defs));
+                }
+                else if (node && typeof node === "object" && !Array.isArray(node)) {
+                    walk(node);
+                }
+            }
+        };
+        walk(this.themes);
+        return classes.filter(Boolean);
+    }
+    getComponentConfig(props, propsToOmit = []) {
+        var _a;
+        const cleanProps = { ...props };
+        for (const k of propsToOmit) {
+            delete cleanProps[k];
+        }
+        const { className, tag, ...other } = cleanProps;
+        const componentTag = (_a = tag !== null && tag !== void 0 ? tag : this.tag) !== null && _a !== void 0 ? _a : "div";
+        const themeGeneratedClasses = this.getClasses(props);
+        const finalClasses = twMerge(...themeGeneratedClasses, className);
+        return {
+            Tag: componentTag,
+            finalClasses,
+            finalProps: other,
+        };
+    }
+}
+
+class SizeTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        SIZE_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : SizeTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const size = pickFirstTruthyKey(props, defaults, SIZE_KEYS);
+        return [this[size !== null && size !== void 0 ? size : 'md'] || ''];
+    }
+}
+SizeTheme.defaultClasses = {
+    xs: '',
+    sm: '',
+    md: '',
+    lg: '',
+    xl: ''
+};
+
+class GapTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        GAP_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : GapTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const size = pickFirstTruthyKey(props, defaults, SIZE_KEYS) || 'md';
+        const key = pickFirstTruthyKey(props, defaults, GAP_KEYS) || 'noGap';
+        return [typeof this[key] === 'string' ? this[key] : this[key][size]];
+    }
+}
+GapTheme.defaultClasses = {
+    gap: {
+        xs: 'gap-2',
+        sm: 'gap-3',
+        md: 'gap-4',
+        lg: 'gap-5',
+        xl: 'gap-6',
+    },
+    noGap: "gap-0"
+};
+
+class RadiusTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        SHAPE_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : RadiusTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const size = pickFirstTruthyKey(props, defaults, SIZE_KEYS) || 'md';
+        const shape = pickFirstTruthyKey(props, defaults, SHAPE_KEYS) || 'rounded';
+        return [typeof this[shape] === 'string' ? this[shape] : this[shape][size]];
+    }
+}
+RadiusTheme.defaultClasses = {
+    pill: "rounded-full",
+    sharp: "rounded-none",
+    rounded: {
+        xs: "rounded-sm",
+        sm: "rounded-md",
+        md: "rounded-lg",
+        lg: "rounded-xl",
+        xl: "rounded-2xl",
+    }
+};
+
+class ShadowTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        SHADOW_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : ShadowTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const size = pickFirstTruthyKey(props, defaults, SIZE_KEYS) || 'md';
+        const key = pickFirstTruthyKey(props, defaults, SHADOW_KEYS);
+        if (key === undefined) {
+            return [];
+        }
+        const isModeStringMap = MODE_KEYS.every(m => typeof this[key][m] === "string");
+        return MODE_KEYS.map(mode => isModeStringMap
+            ? this[key][mode]
+            : this[key][mode][size]);
+    }
+}
+ShadowTheme.defaultClasses = {
+    shadow: {
+        base: {
+            xs: "shadow-2xs",
+            sm: "shadow-xs",
+            md: "shadow-sm",
+            lg: "shadow-md",
+            xl: "shadow-lg"
+        },
+        hover: {
+            xs: "hover:shadow-xs",
+            sm: "hover:shadow-sm",
+            md: "hover:shadow-md",
+            lg: "hover:shadow-lg",
+            xl: "hover:shadow-xl"
+        },
+        active: {
+            xs: "active:shadow-xs",
+            sm: "active:shadow-sm",
+            md: "active:shadow-md",
+            lg: "active:shadow-lg",
+            xl: "active:shadow-xl"
+        },
+    },
+    noShadow: {
+        base: "shadow-none",
+        hover: "hover:shadow-none",
+        active: "active:shadow-none",
+    }
+};
+
+class BorderTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        BORDER_KEYS.forEach((key) => {
+            this[key] = {
+                ...BorderTheme.defaultClasses[key],
+                ...((initial === null || initial === void 0 ? void 0 : initial[key]) || {}),
+            };
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickFirstTruthyKey(props, defaults, BORDER_KEYS);
+        if (!key || !this[key]) {
+            return MODE_KEYS.map(() => '');
+        }
+        return MODE_KEYS.map(mode => this[key][mode] || '');
+    }
+}
+BorderTheme.defaultClasses = {
+    border: {
+        base: "border",
+        hover: "hover:border",
+        active: "active:border",
+    },
+    noBorder: {
+        base: "",
+        hover: "",
+        active: "",
+    },
+    //noBorder: {
+    //  base: "border-none",
+    //  hover: "hover:border-none",
+    //  active: "active:border-none",
+    //},
+};
+
+class RingTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        RING_KEYS.forEach((key) => {
+            this[key] = {
+                ...RingTheme.defaultClasses[key],
+                ...((initial === null || initial === void 0 ? void 0 : initial[key]) || {}),
+            };
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickFirstTruthyKey(props, defaults, RING_KEYS);
+        if (!key || !this[key]) {
+            return MODE_KEYS.map(() => '');
+        }
+        return MODE_KEYS.map(mode => this[key][mode] || '');
+    }
+}
+RingTheme.defaultClasses = {
+    ring: {
+        base: "ring ring-inset",
+        hover: "hover:ring hover:ring-inset",
+        active: "active:ring active:ring-inset",
+    },
+    noRing: {
+        base: "ring-0",
+        hover: "hover:ring-0",
+        active: "active:ring-0",
+    },
+};
+
+class PxTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        PADDING_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : PxTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const size = pickFirstTruthyKey(props, defaults, SIZE_KEYS) || 'md';
+        const key = pickFirstTruthyKey(props, defaults, PADDING_KEYS) || 'noPadding';
+        return [typeof this[key] === 'string' ? this[key] : this[key][size]];
+    }
+}
+PxTheme.defaultClasses = {
+    padding: {
+        xs: "px-2",
+        sm: "px-4",
+        md: "px-6",
+        lg: "px-8",
+        xl: "px-10"
+    },
+    noPadding: "px-0"
+};
+
+class PyTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        PADDING_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : PyTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const size = pickFirstTruthyKey(props, defaults, SIZE_KEYS) || 'md';
+        const key = pickFirstTruthyKey(props, defaults, PADDING_KEYS) || 'noPadding';
+        return [typeof this[key] === 'string' ? this[key] : this[key][size]];
+    }
+}
+PyTheme.defaultClasses = {
+    padding: {
+        xs: "py-2",
+        sm: "py-4",
+        md: "py-6",
+        lg: "py-8",
+        xl: "py-10"
+    },
+    noPadding: "py-0"
+};
+
+// Text appearance classes for filled buttons (all white text)
+const filledTextAppearanceClasses = {
+    default: "text-white",
+    primary: "text-white",
+    secondary: "text-white",
+    tertiary: "text-white",
+    muted: "text-white",
+    link: "text-white",
+    accent: "text-white",
+    success: "text-white",
+    danger: "text-white",
+    warning: "text-white",
+    info: "text-white",
+    transparent: "text-transparent",
+};
+// Default text appearance classes (for non-button components)
+const textAppearanceClasses = {
+    default: "text-(--text-color-default)",
+    primary: "text-(--text-color-primary)",
+    secondary: "text-(--text-color-secondary)",
+    tertiary: "text-(--text-color-tertiary)",
+    muted: "text-(--text-color-muted)",
+    link: "text-(--text-color-link)",
+    accent: "text-(--text-color-accent)",
+    success: "text-(--text-color-success)",
+    danger: "text-(--text-color-danger)",
+    warning: "text-(--text-color-warning)",
+    info: "text-(--text-color-info)",
+    transparent: "text-transparent",
+};
+// Text size classes
+const textSizeClasses = {
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-lg",
+    xl: "text-xl",
+};
+
+class TextAppearanceTheme extends BaseTheme {
+    constructor(initialOverrides) {
+        super();
+        TEXT_APPEARANCE_KEYS.forEach((textKey) => {
+            const defaultModesForKey = TextAppearanceTheme.defaultFullConfig[textKey];
+            const overrideModesForKey = initialOverrides === null || initialOverrides === void 0 ? void 0 : initialOverrides[textKey];
+            this[textKey] = {
+                ...defaultModesForKey,
+                ...(overrideModesForKey || {}),
+            };
+        });
+    }
+    getClasses(props, defaults) {
+        const pickedAppearanceKey = pickFirstTruthyKey(props, defaults, TEXT_APPEARANCE_KEYS) || 'default';
+        const modesForAppearance = this[pickedAppearanceKey];
+        if (!modesForAppearance) {
+            return MODE_KEYS.map(() => '');
+        }
+        return MODE_KEYS.map(mode => modesForAppearance[mode] || '');
+    }
+    static createDefaultStyle(src = {}) {
+        const initialOverridesForConstructor = {};
+        TEXT_APPEARANCE_KEYS.forEach((textKey) => {
+            const modesForCurrentTextKey = {};
+            let keyHasDataInSrc = false;
+            MODE_KEYS.forEach((modeKey) => {
+                var _a;
+                const classValue = (_a = src[modeKey]) === null || _a === void 0 ? void 0 : _a[textKey];
+                if (classValue !== undefined) {
+                    modesForCurrentTextKey[modeKey] = classValue;
+                    keyHasDataInSrc = true;
+                }
+            });
+            if (keyHasDataInSrc) {
+                initialOverridesForConstructor[textKey] = modesForCurrentTextKey;
+            }
+        });
+        return new TextAppearanceTheme(initialOverridesForConstructor);
+    }
+}
+TextAppearanceTheme.defaultFullConfig = (() => {
+    const config = {};
+    TEXT_APPEARANCE_KEYS.forEach((key) => {
+        config[key] = {
+            base: textAppearanceClasses[key] || '',
+            hover: '',
+            active: '',
+        };
+    });
+    return config;
+})();
+
+// Background classes for filled buttons
+const filledBackgroundAppearanceClasses = {
+    default: "bg-(--filled-background-color-default)",
+    primary: "bg-(--filled-background-color-primary)",
+    secondary: "bg-(--filled-background-color-secondary)",
+    tertiary: "bg-(--filled-background-color-tertiary)",
+    accent: "bg-(--filled-background-color-accent)",
+    success: "bg-(--filled-background-color-success)",
+    danger: "bg-(--filled-background-color-danger)",
+    warning: "bg-(--filled-background-color-warning)",
+    info: "bg-(--filled-background-color-info)",
+    transparent: "bg-transparent",
+    muted: "bg-(--filled-background-color-muted)",
+    link: "bg-(--filled-background-color-link)",
+};
+// Hover background classes for filled buttons
+const filledHoverBackgroundAppearanceClasses = {
+    default: "hover:bg-(--filled-background-color-hover-default)",
+    primary: "hover:bg-(--filled-background-color-hover-primary)",
+    secondary: "hover:bg-(--filled-background-color-hover-secondary)",
+    tertiary: "hover:bg-(--filled-background-color-hover-tertiary)",
+    accent: "hover:bg-(--filled-background-color-hover-accent)",
+    success: "hover:bg-(--filled-background-color-hover-success)",
+    danger: "hover:bg-(--filled-background-color-hover-danger)",
+    warning: "hover:bg-(--filled-background-color-hover-warning)",
+    info: "hover:bg-(--filled-background-color-hover-info)",
+    transparent: "hover:bg-transparent",
+    muted: "hover:bg-(--filled-background-color-hover-muted)",
+    link: "hover:bg-(--filled-background-color-hover-link)",
+};
+// Active background classes for filled buttons
+const filledActiveBackgroundAppearanceClasses = {
+    default: "active:bg-(--filled-background-color-active-default)",
+    primary: "active:bg-(--filled-background-color-active-primary)",
+    secondary: "active:bg-(--filled-background-color-active-secondary)",
+    tertiary: "active:bg-(--filled-background-color-active-tertiary)",
+    accent: "active:bg-(--filled-background-color-active-accent)",
+    success: "active:bg-(--filled-background-color-active-success)",
+    danger: "active:bg-(--filled-background-color-active-danger)",
+    warning: "active:bg-(--filled-background-color-active-warning)",
+    info: "active:bg-(--filled-background-color-active-info)",
+    transparent: "active:bg-transparent",
+    muted: "active:bg-(--filled-background-color-active-muted)",
+    link: "active:bg-(--filled-background-color-active-link)",
+};
+// Default background appearance classes (for non-button components)
+const backgroundAppearanceClasses = {
+    default: "bg-(--background-color-default)",
+    primary: "bg-(--background-color-primary)",
+    secondary: "bg-(--background-color-secondary)",
+    tertiary: "bg-(--background-color-tertiary)",
+    accent: "bg-(--background-color-accent)",
+    success: "bg-(--background-color-success)",
+    danger: "bg-(--background-color-danger)",
+    warning: "bg-(--background-color-warning)",
+    info: "bg-(--background-color-info)",
+    transparent: "bg-transparent",
+    muted: "bg-(--background-color-muted)",
+    link: "bg-(--background-color-link)",
+};
+// Hover background appearance classes for outline buttons
+const hoverBackgroundAppearanceClasses = {
+    default: "hover:bg-(--background-color-hover-default)",
+    primary: "hover:bg-(--background-color-hover-primary)",
+    secondary: "hover:bg-(--background-color-hover-secondary)",
+    tertiary: "hover:bg-(--background-color-hover-tertiary)",
+    accent: "hover:bg-(--background-color-hover-accent)",
+    success: "hover:bg-(--background-color-hover-success)",
+    danger: "hover:bg-(--background-color-hover-danger)",
+    warning: "hover:bg-(--background-color-hover-warning)",
+    info: "hover:bg-(--background-color-hover-info)",
+    transparent: "hover:bg-transparent",
+    muted: "hover:bg-(--background-color-hover-muted)",
+    link: "hover:bg-(--background-color-hover-link)",
+};
+// Active background appearance classes for outline buttons
+const activeBackgroundAppearanceClasses = {
+    default: "active:bg-(--background-color-active-default)",
+    primary: "active:bg-(--background-color-active-primary)",
+    secondary: "active:bg-(--background-color-active-secondary)",
+    tertiary: "active:bg-(--background-color-active-tertiary)",
+    accent: "active:bg-(--background-color-active-accent)",
+    success: "active:bg-(--background-color-active-success)",
+    danger: "active:bg-(--background-color-active-danger)",
+    warning: "active:bg-(--background-color-active-warning)",
+    info: "active:bg-(--background-color-active-info)",
+    transparent: "active:bg-transparent",
+    muted: "active:bg-(--background-color-active-muted)",
+    link: "active:bg-(--background-color-active-link)",
+};
+const layoutBackgroundAppearanceClasses = {
+    default: "bg-(--layout-background-default)",
+    primary: "bg-(--layout-background-primary)",
+    secondary: "bg-(--layout-background-secondary)",
+    tertiary: "bg-(--layout-background-tertiary)",
+    accent: "bg-(--layout-background-accent)",
+    success: "bg-(--layout-background-success)",
+    danger: "bg-(--layout-background-danger)",
+    warning: "bg-(--layout-background-warning)",
+    info: "bg-(--layout-background-info)",
+    transparent: "bg-transparent",
+};
+const bgBorderAppearanceClasses = {
+    default: "bg-(--border-color-default)",
+    primary: "bg-(--border-color-primary)",
+    secondary: "bg-(--border-color-secondary)",
+    tertiary: "bg-(--border-color-tertiary)",
+    accent: "bg-(--border-color-accent)",
+    success: "bg-(--border-color-success)",
+    danger: "bg-(--border-color-danger)",
+    warning: "bg-(--border-color-warning)",
+    info: "bg-(--border-color-info)",
+    transparent: "bg-transparent",
+    muted: "bg-(--border-color-muted)",
+    link: "bg-(--border-color-link)",
+};
+const borderAppearanceClasses = {
+    default: "border-(--border-color-default)",
+    primary: "border-(--border-color-primary)",
+    secondary: "border-(--border-color-secondary)",
+    tertiary: "border-(--border-color-tertiary)",
+    accent: "border-(--border-color-accent)",
+    success: "border-(--border-color-success)",
+    danger: "border-(--border-color-danger)",
+    warning: "border-(--border-color-warning)",
+    info: "border-(--border-color-info)",
+    transparent: "border-transparent",
+    muted: "border-(--border-color-muted)",
+    link: "border-(--border-color-link)",
+};
+// Border classes for filled elements
+const filledBorderAppearanceClasses = {
+    default: "border-(--filled-border-color-default)",
+    primary: "border-(--filled-border-color-primary)",
+    secondary: "border-(--filled-border-color-secondary)",
+    tertiary: "border-(--filled-border-color-tertiary)",
+    accent: "border-(--filled-border-color-accent)",
+    success: "border-(--filled-border-color-success)",
+    danger: "border-(--filled-border-color-danger)",
+    warning: "border-(--filled-border-color-warning)",
+    info: "border-(--filled-border-color-info)",
+    transparent: "border-transparent",
+    muted: "border-(--filled-border-color-muted)",
+    link: "border-(--filled-border-color-link)",
+};
+const ringAppearanceClasses = {
+    default: "ring-(--border-color-default)",
+    primary: "ring-(--border-color-primary)",
+    secondary: "ring-(--border-color-secondary)",
+    tertiary: "ring-(--border-color-tertiary)",
+    accent: "ring-(--border-color-accent)",
+    success: "ring-(--border-color-success)",
+    danger: "ring-(--border-color-danger)",
+    warning: "ring-(--border-color-warning)",
+    info: "ring-(--border-color-info)",
+    transparent: "ring-transparent",
+    muted: "ring-(--border-color-muted)",
+    link: "ring-(--border-color-link)",
+};
+// Ring classes for filled elements
+const filledRingAppearanceClasses = {
+    default: "ring-(--filled-border-color-default)",
+    primary: "ring-(--filled-border-color-primary)",
+    secondary: "ring-(--filled-border-color-secondary)",
+    tertiary: "ring-(--filled-border-color-tertiary)",
+    accent: "ring-(--filled-border-color-accent)",
+    success: "ring-(--filled-border-color-success)",
+    danger: "ring-(--filled-border-color-danger)",
+    warning: "ring-(--filled-border-color-warning)",
+    info: "ring-(--filled-border-color-info)",
+    transparent: "ring-transparent",
+    muted: "ring-(--filled-border-color-muted)",
+    link: "ring-(--filled-border-color-link)",
+};
+
+class VariantTheme extends BaseTheme {
+    constructor(variantInstances = VariantTheme.defaultInstances) {
+        super();
+        VARIANT_KEYS.forEach((variantKey) => {
+            this[variantKey] = variantInstances[variantKey] || VariantTheme.defaultInstances[variantKey];
+        });
+    }
+    getClasses(props, defaults) {
+        const activeVariantKey = pickFirstTruthyKey(props, defaults, VARIANT_KEYS) || 'outline';
+        const activeTextAppearanceTheme = this[activeVariantKey];
+        if (!activeTextAppearanceTheme) {
+            return [];
+        }
+        return activeTextAppearanceTheme.getClasses(props, defaults);
+    }
+    static createDefault(initialInstances) {
+        const fullInitialInstances = {
+            ...VariantTheme.defaultInstances,
+            ...(initialInstances || {})
+        };
+        return new VariantTheme(fullInitialInstances);
+    }
+    static createDefaultBackground() {
+        return this.createDefault({
+            outline: TextAppearanceTheme.createDefaultStyle({
+                base: backgroundAppearanceClasses,
+                hover: hoverBackgroundAppearanceClasses,
+                active: activeBackgroundAppearanceClasses
+            }),
+            filled: TextAppearanceTheme.createDefaultStyle({
+                base: filledBackgroundAppearanceClasses,
+                hover: filledHoverBackgroundAppearanceClasses,
+                active: filledActiveBackgroundAppearanceClasses
+            })
+        });
+    }
+    static createDefaultText() {
+        return this.createDefault({
+            outline: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
+            filled: TextAppearanceTheme.createDefaultStyle({ base: filledTextAppearanceClasses })
+        });
+    }
+    static createDefaultBorder() {
+        return this.createDefault({
+            outline: TextAppearanceTheme.createDefaultStyle({ base: borderAppearanceClasses }),
+            filled: TextAppearanceTheme.createDefaultStyle({ base: filledBorderAppearanceClasses })
+        });
+    }
+    static createDefaultRing() {
+        return this.createDefault({
+            outline: TextAppearanceTheme.createDefaultStyle({ base: ringAppearanceClasses }),
+            filled: TextAppearanceTheme.createDefaultStyle({ base: filledRingAppearanceClasses })
+        });
+    }
+}
+VariantTheme.defaultInstances = Object.fromEntries(VARIANT_KEYS.map(variantKey => [
+    variantKey,
+    new TextAppearanceTheme()
+]));
+
+const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-pointer transition-all duration-200 whitespace-nowrap", {
+    size: {
+        px: new PxTheme({
+            padding: {
+                xs: 'px-2',
+                sm: 'px-3',
+                md: 'px-4',
+                lg: 'px-5',
+                xl: 'px-6',
+            }
+        }),
+        py: new PyTheme({
+            padding: {
+                xs: 'py-1',
+                sm: 'py-1.5',
+                md: 'py-2',
+                lg: 'py-2.5',
+                xl: 'py-3',
+            }
+        }),
+        gap: new GapTheme({
+            gap: {
+                xs: 'gap-1',
+                sm: 'gap-1.5',
+                md: 'gap-2',
+                lg: 'gap-2.5',
+                xl: 'gap-3',
+            }
+        }),
+        text: new SizeTheme({
+            xs: 'text-xs',
+            sm: 'text-sm',
+            md: 'text-base',
+            lg: 'text-lg',
+            xl: 'text-xl',
+        }),
+        shadow: new ShadowTheme(),
+    },
+    appearance: {
+        background: VariantTheme.createDefaultBackground(),
+        text: VariantTheme.createDefaultText(),
+        border: VariantTheme.createDefaultBorder(),
+        ring: VariantTheme.createDefaultRing(),
+    },
+    layout: {
+        border: new BorderTheme(),
+        ring: new RingTheme(),
+        radius: new RadiusTheme({
+            rounded: {
+                xs: 'rounded-sm',
+                sm: 'rounded-md',
+                md: 'rounded-md',
+                lg: 'rounded-lg',
+                xl: 'rounded-xl',
+            }
+        }),
+    },
+}, {
+    md: true,
+    inlineFlex: true,
+    itemsCenter: true,
+    justifyCenter: true,
+    outline: true,
+    default: true,
+    rounded: true,
+    sans: true,
+    semibold: true,
+    textCenter: true,
+    noBorder: true,
+    gap: true,
+    padding: true,
+    ring: true,
+    shadow: true,
+});
+
+const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all duration-200 whitespace-nowrap", {
+    size: {
+        px: new PxTheme({
+            padding: {
+                xs: "px-2",
+                sm: "px-3",
+                md: "px-4",
+                lg: "px-5",
+                xl: "px-6"
+            }
+        }),
+        py: new PyTheme({
+            padding: {
+                xs: 'py-1',
+                sm: 'py-1.5',
+                md: 'py-2',
+                lg: 'py-2.5',
+                xl: 'py-3',
+            }
+        }),
+        gap: new GapTheme({
+            gap: {
+                xs: 'gap-1',
+                sm: 'gap-1.5',
+                md: 'gap-2',
+                lg: 'gap-2.5',
+                xl: 'gap-3',
+            }
+        }),
+        text: new SizeTheme({
+            xs: 'text-xs',
+            sm: 'text-sm',
+            md: 'text-base',
+            lg: 'text-lg',
+            xl: 'text-xl',
+        }),
+        shadow: new ShadowTheme(),
+    },
+    appearance: {
+        background: VariantTheme.createDefault({
+            outline: TextAppearanceTheme.createDefaultStyle({
+                base: backgroundAppearanceClasses,
+            }),
+            filled: TextAppearanceTheme.createDefaultStyle({
+                base: filledBackgroundAppearanceClasses,
+            })
+        }),
+        text: VariantTheme.createDefaultText(),
+        border: VariantTheme.createDefaultBorder(),
+        ring: VariantTheme.createDefaultRing(),
+    },
+    layout: {
+        border: new BorderTheme(),
+        ring: new RingTheme(),
+        radius: new RadiusTheme({
+            rounded: {
+                xs: "rounded-xs",
+                sm: "rounded-sm",
+                md: "rounded-md",
+                lg: "rounded-lg",
+                xl: "rounded-xl"
+            }
+        }),
+    },
+}, {
+    md: true,
+    inlineFlex: true,
+    outline: true,
+    pill: true,
+    sans: true,
+    semibold: true,
+    uppercase: true,
+    noShadow: true,
+    itemsCenter: true,
+    padding: true,
+    gap: true,
+    ring: true,
+});
+
+const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all duration-200 whitespace-nowrap", {
+    size: {
+        px: new PxTheme({
+            padding: {
+                xs: 'px-2',
+                sm: 'px-2.5',
+                md: 'px-3',
+                lg: 'px-3.5',
+                xl: 'px-4',
+            }
+        }),
+        py: new PyTheme({
+            padding: {
+                xs: 'py-0.5',
+                sm: 'py-1',
+                md: 'py-1.5',
+                lg: 'py-2',
+                xl: 'py-2.5',
+            }
+        }),
+        text: new SizeTheme({
+            xs: 'text-xs',
+            sm: 'text-sm',
+            md: 'text-base',
+            lg: 'text-lg',
+            xl: 'text-xl',
+        }),
+        gap: new GapTheme({
+            gap: {
+                xs: 'gap-1',
+                sm: 'gap-1.5',
+                md: 'gap-2',
+                lg: 'gap-2.5',
+                xl: 'gap-3',
+            }
+        }),
+        shadow: new ShadowTheme(),
+    },
+    appearance: {
+        background: VariantTheme.createDefault({
+            outline: TextAppearanceTheme.createDefaultStyle({
+                base: backgroundAppearanceClasses,
+            }),
+            filled: TextAppearanceTheme.createDefaultStyle({
+                base: filledBackgroundAppearanceClasses,
+            })
+        }),
+        text: VariantTheme.createDefaultText(),
+        border: VariantTheme.createDefaultBorder(),
+        ring: VariantTheme.createDefaultRing(),
+    },
+    layout: {
+        radius: new RadiusTheme({
+            rounded: {
+                xs: 'rounded-sm',
+                sm: 'rounded-md',
+                md: 'rounded-lg',
+                lg: 'rounded-xl',
+                xl: 'rounded-2xl',
+            }
+        }),
+        border: new BorderTheme(),
+        ring: new RingTheme(),
+    },
+}, {
+    md: true,
+    inlineFlex: true,
+    itemsCenter: true,
+    outline: true,
+    secondary: true,
+    rounded: true,
+    mono: true,
+    normal: true,
+    noShadow: true,
+    padding: true,
+    gap: true,
+    ring: true,
+});
+
+const typographyThemeDefaults = {
+    md: true,
+    default: true,
+    sans: true,
+    normal: true,
+};
+const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap = textSizeClasses, defaults = typographyThemeDefaults) => {
+    return new ComponentTheme(tag, base, {
+        size: {
+            text: new SizeTheme(textSizeMap),
+        },
+        appearance: {
+            text: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
+        }
+    }, defaults);
+};
+// Page title specific theme
+const pageTitleTheme = createTypographyComponentTheme("h1", "text-balance tracking-tight w-fit", {
+    xs: "text-3xl max-lg:text-2xl max-md:text-xl",
+    sm: "text-4xl max-lg:text-3xl max-md:text-2xl",
+    md: "text-5xl max-lg:text-4xl max-md:text-3xl",
+    lg: "text-6xl max-lg:text-5xl max-md:text-4xl",
+    xl: "text-7xl max-lg:text-6xl max-md:text-5xl",
+}, mergeDefaults(typographyThemeDefaults, { semibold: true }));
+// Section title specific theme
+const sectionTitleTheme = createTypographyComponentTheme("h2", "text-balance w-fit", {
+    xs: "text-2xl max-lg:text-xl  max-md:text-lg",
+    sm: "text-3xl max-lg:text-2xl max-md:text-xl",
+    md: "text-4xl max-lg:text-3xl max-md:text-2xl",
+    lg: "text-5xl max-lg:text-4xl max-md:text-3xl",
+    xl: "text-6xl max-lg:text-5xl max-md:text-4xl",
+}, mergeDefaults(typographyThemeDefaults, { semibold: true }));
+// Title specific theme
+const titleTheme = createTypographyComponentTheme("h3", "text-balance w-fit", {
+    xs: "text-lg",
+    sm: "text-xl",
+    md: "text-2xl",
+    lg: "text-3xl",
+    xl: "text-4xl",
+}, mergeDefaults(typographyThemeDefaults, { semibold: true }));
+// Text specific theme
+const textTheme = createTypographyComponentTheme("p", "p-0 m-0 w-fit", textSizeClasses, mergeDefaults(typographyThemeDefaults, { secondary: true }));
+// Link specific theme
+const linkTheme = createTypographyComponentTheme("a", "hover:underline w-fit", textSizeClasses, mergeDefaults(typographyThemeDefaults, { link: true }));
+// List item specific theme
+const listItemTheme = createTypographyComponentTheme("li");
+// List specific theme
+const listTheme = createTypographyComponentTheme("ul", "list-disc list-inside");
+
+class DirectionTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        FLEX_DIRECTION_KEYS.forEach((key) => {
+            this[key] = (initial === null || initial === void 0 ? void 0 : initial[key]) || DirectionTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        let direction = pickFirstTruthyKey(props, defaults, FLEX_DIRECTION_KEYS) || 'column';
+        const reverse = pickFirstTruthyKey(props, defaults, DIRECTION_REVERSE_KEYS);
+        if (reverse) {
+            switch (direction) {
+                case "column":
+                    direction = "columnReverse";
+                    break;
+                case "row":
+                    direction = "rowReverse";
+                    break;
+            }
+        }
+        return direction ? [this[direction]] : [];
+    }
+}
+DirectionTheme.defaultClasses = {
+    row: "flex-row",
+    column: "flex-col",
+    rowReverse: "flex-row-reverse",
+    columnReverse: "flex-col-reverse",
+};
+
+class WrapTheme extends BaseTheme {
+    constructor(initialConfig) {
+        super();
+        WRAP_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig[key]) !== null && _a !== void 0 ? _a : WrapTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickFirstTruthyKey(props, defaults, WRAP_KEYS);
+        return key ? [this[key]] : [];
+    }
+}
+WrapTheme.defaultClasses = {
+    flexWrap: "flex-wrap",
+    flexNoWrap: "flex-nowrap",
+    flexWrapReverse: "flex-wrap-reverse"
+};
+
+const commonGaps = {
+    xs: 'gap-2',
+    sm: 'gap-3',
+    md: 'gap-4',
+    lg: 'gap-5',
+    xl: 'gap-6',
+};
+
+class LayoutAppearanceTheme extends BaseTheme {
+    constructor(initialOverrides) {
+        super();
+        APPEARANCE_KEYS.forEach((textKey) => {
+            const defaultModesForKey = LayoutAppearanceTheme.defaultFullConfig[textKey];
+            const overrideModesForKey = initialOverrides === null || initialOverrides === void 0 ? void 0 : initialOverrides[textKey];
+            this[textKey] = {
+                ...defaultModesForKey,
+                ...(overrideModesForKey || {}),
+            };
+        });
+    }
+    getClasses(props, defaults) {
+        const pickedAppearanceKey = pickFirstTruthyKey(props, defaults, APPEARANCE_KEYS) || 'default';
+        const modesForAppearance = this[pickedAppearanceKey];
+        if (!modesForAppearance) {
+            return MODE_KEYS.map(() => '');
+        }
+        return MODE_KEYS.map(mode => modesForAppearance[mode] || '');
+    }
+    static createDefaultStyle(src = {}) {
+        const initialOverridesForConstructor = {};
+        APPEARANCE_KEYS.forEach((textKey) => {
+            const modesForCurrentTextKey = {};
+            let keyHasDataInSrc = false;
+            MODE_KEYS.forEach((modeKey) => {
+                var _a;
+                const classValue = (_a = src[modeKey]) === null || _a === void 0 ? void 0 : _a[textKey];
+                if (classValue !== undefined) {
+                    modesForCurrentTextKey[modeKey] = classValue;
+                    keyHasDataInSrc = true;
+                }
+            });
+            if (keyHasDataInSrc) {
+                initialOverridesForConstructor[textKey] = modesForCurrentTextKey;
+            }
+        });
+        return new LayoutAppearanceTheme(initialOverridesForConstructor);
+    }
+}
+LayoutAppearanceTheme.defaultFullConfig = (() => {
+    const config = {};
+    APPEARANCE_KEYS.forEach((key) => {
+        config[key] = {
+            base: textAppearanceClasses[key] || '',
+            hover: '',
+            active: '',
+        };
+    });
+    return config;
+})();
+
+class BreakpointTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        BREAKPOINT_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : BreakpointTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickFirstTruthyKey(props, defaults, BREAKPOINT_KEYS);
+        if (!key)
+            return [];
+        return [this[key] || ''];
+    }
+}
+BreakpointTheme.defaultClasses = {
+    xsCol: "max-xs:flex-col",
+    smCol: "max-sm:flex-col",
+    mdCol: "max-md:flex-col",
+    lgCol: "max-lg:flex-col",
+    xlCol: "max-xl:flex-col"
+};
+
+const defaultCardTheme = new ComponentTheme("div", "overflow-hidden", {
+    size: {
+        px: new PxTheme({
+            padding: {
+                xs: 'px-3',
+                sm: 'px-4',
+                md: 'px-5',
+                lg: 'px-6',
+                xl: 'px-8',
+            }
+        }),
+        py: new PyTheme({
+            padding: {
+                xs: 'py-2',
+                sm: 'py-3',
+                md: 'py-4',
+                lg: 'py-5',
+                xl: 'py-6',
+            }
+        }),
+        gap: new GapTheme({ gap: commonGaps }),
+        shadow: new ShadowTheme(),
+    },
+    layout: {
+        border: new BorderTheme(),
+        ring: new RingTheme(),
+        radius: new RadiusTheme({
+            rounded: {
+                xs: "rounded-md",
+                sm: "rounded-lg",
+                md: "rounded-xl",
+                lg: "rounded-2xl",
+                xl: "rounded-3xl"
+            }
+        }),
+        wrap: new WrapTheme(),
+        direction: new DirectionTheme(),
+        breakpoint: new BreakpointTheme(),
+    },
+    appearance: {
+        background: LayoutAppearanceTheme.createDefaultStyle({
+            base: layoutBackgroundAppearanceClasses,
+        }),
+        text: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
+        border: TextAppearanceTheme.createDefaultStyle({ base: borderAppearanceClasses }),
+        ring: TextAppearanceTheme.createDefaultStyle({ base: ringAppearanceClasses }),
+    }
+}, {
+    md: true,
+    flex: true,
+    default: true,
+    rounded: true,
+    normal: true,
+    column: true,
+    border: true,
+    gap: true,
+    padding: true,
+});
+
+const defaultRowTheme = new ComponentTheme("div", "flex-row", {
+    size: {
+        gap: new GapTheme({ gap: commonGaps }),
+        breakpoint: new BreakpointTheme(),
+    },
+    layout: {
+        wrap: new WrapTheme(),
+    },
+}, {
+    md: true,
+    flex: true,
+    transparent: true,
+    itemsCenter: true,
+    gap: true,
+});
+
+const defaultDividerTheme = new ComponentTheme("div", "h-px w-full", {
+    appearance: {
+        background: TextAppearanceTheme.createDefaultStyle({
+            base: bgBorderAppearanceClasses,
+        }),
+    }
+}, {
+    md: true,
+    default: true,
+});
+
+const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full", {
+    size: {
+        gap: new GapTheme({
+            gap: {
+                xs: 'gap-2 max-lg:gap-1',
+                sm: 'gap-4 max-lg:gap-3 max-md:gap-2',
+                md: 'gap-6 max-lg:gap-5 max-md:gap-4',
+                lg: 'gap-8 max-lg:gap-7 max-md:gap-6',
+                xl: 'gap-10 max-lg:gap-9 max-md:gap-8',
+            }
+        }),
+        maxWidth: new SizeTheme({
+            xs: 'max-w-3xl',
+            sm: 'max-w-4xl',
+            md: 'max-w-5xl',
+            lg: 'max-w-6xl',
+            xl: 'max-w-7xl',
+        }),
+    },
+    layout: {
+        border: new BorderTheme(),
+        ring: new RingTheme(),
+        wrap: new WrapTheme(),
+        direction: new DirectionTheme(),
+        radius: new RadiusTheme({
+            rounded: {
+                xs: "rounded-md",
+                sm: "rounded-lg",
+                md: "rounded-xl",
+                lg: "rounded-2xl",
+                xl: "rounded-3xl"
+            }
+        }),
+    },
+    appearance: {
+        background: LayoutAppearanceTheme.createDefaultStyle({
+            base: layoutBackgroundAppearanceClasses,
+        }),
+        text: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
+        border: TextAppearanceTheme.createDefaultStyle({ base: borderAppearanceClasses }),
+        ring: TextAppearanceTheme.createDefaultStyle({ base: ringAppearanceClasses }),
+    }
+}, {
+    transparent: true,
+    noRing: true,
+    flex: true,
+    md: true,
+    itemsCenter: true,
+    gap: true,
+    sharp: true,
+});
+
+const defaultColTheme = new ComponentTheme("div", "flex-col", {
+    size: {
+        gap: new GapTheme({ gap: commonGaps }),
+    },
+    layout: {
+        wrap: new WrapTheme(),
+        direction: new DirectionTheme(),
+    },
+}, {
+    md: true,
+    flex: true,
+    transparent: true,
+    gap: true,
+});
+
+const defaultStackTheme = new ComponentTheme("div", "", {
+    size: {
+        px: new PxTheme({
+            padding: {
+                xs: 'px-2',
+                sm: 'px-3',
+                md: 'px-4',
+                lg: 'px-5',
+                xl: 'px-6',
+            }
+        }),
+        py: new PyTheme({
+            padding: {
+                xs: 'py-2',
+                sm: 'py-3',
+                md: 'py-4',
+                lg: 'py-5',
+                xl: 'py-6',
+            }
+        }),
+        gap: new GapTheme({
+            gap: commonGaps
+        }),
+    },
+    layout: {
+        wrap: new WrapTheme(),
+        direction: new DirectionTheme(),
+    },
+}, {
+    md: true,
+    flex: true,
+    transparent: true,
+    column: true,
+    flexWrap: true,
+    gap: true,
+    padding: true,
+});
+
+const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
+    size: {
+        px: new PxTheme({
+            padding: {
+                xs: 'px-5 max-lg:px-4 max-md:px-3',
+                sm: 'px-6 max-lg:px-5 max-md:px-4',
+                md: 'px-7 max-lg:px-6 max-md:px-5',
+                lg: 'px-8 max-lg:px-7 max-md:px-6',
+                xl: 'px-9 max-lg:px-8 max-md:px-7',
+            }
+        }),
+        py: new PyTheme({
+            padding: {
+                xs: 'py-4 max-md:py-3',
+                sm: 'py-8 max-md:py-6',
+                md: 'py-12 max-md:py-6',
+                lg: 'py-16 max-lg:py-14 max-md:py-12',
+                xl: 'py-20 max-lg:py-16 max-md:py-12',
+            }
+        }),
+        gap: new GapTheme({
+            gap: {
+                xs: 'gap-4',
+                sm: 'gap-6',
+                md: 'gap-8',
+                lg: 'gap-12',
+                xl: 'gap-16',
+            }
+        }),
+        shadow: new ShadowTheme(),
+    },
+    appearance: {
+        background: LayoutAppearanceTheme.createDefaultStyle({
+            base: layoutBackgroundAppearanceClasses,
+        }),
+        text: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
+        border: TextAppearanceTheme.createDefaultStyle({ base: borderAppearanceClasses }),
+        ring: TextAppearanceTheme.createDefaultStyle({ base: ringAppearanceClasses }),
+    },
+    layout: {
+        wrap: new WrapTheme(),
+        direction: new DirectionTheme(),
+        border: new BorderTheme(),
+        ring: new RingTheme(),
+        radius: new RadiusTheme({
+            rounded: {
+                xs: 'rounded-md',
+                sm: 'rounded-lg',
+                md: 'rounded-xl',
+                lg: 'rounded-2xl',
+                xl: 'rounded-3xl',
+            }
+        }),
+    },
+}, {
+    md: true,
+    flex: true,
+    default: true,
+    itemsStart: true,
+    gap: true,
+    padding: true,
+    noBorder: true,
+    noRing: true,
+    noShadow: true,
+    sharp: true,
+});
+
+const gridDefaults = {
+    md: true,
+    gap: true,
+    grid: true,
+};
+const gridSubThemes = {
+    size: {
+        gap: new GapTheme({
+            gap: {
+                xs: "gap-2",
+                sm: "gap-4  max-lg:gap-2",
+                md: "gap-6  max-lg:gap-4",
+                lg: "gap-8  max-lg:gap-6 max-md:gap-4",
+                xl: "gap-10 max-lg:gap-8 max-md:gap-6"
+            }
+        }),
+    },
+};
+const defaultGrid3Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-3", gridSubThemes, gridDefaults);
+const defaultGrid4Theme = new ComponentTheme("div", "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4", gridSubThemes, gridDefaults);
+
+const COMPONENT_KEYS = ['button', 'badge', 'chip', 'card', 'divider', 'row', 'col', 'stack', 'section',
+    'grid3', 'grid4', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem'];
+const defaultTheme = {
+    button: defaultButtonTheme,
+    badge: defaultBadgeTheme,
+    chip: defaultChipTheme,
+    card: defaultCardTheme,
+    divider: defaultDividerTheme,
+    container: defaultContainerTheme,
+    row: defaultRowTheme,
+    col: defaultColTheme,
+    stack: defaultStackTheme,
+    section: defaultSectionTheme,
+    grid3: defaultGrid3Theme,
+    grid4: defaultGrid4Theme,
+    pageTitle: pageTitleTheme,
+    sectionTitle: sectionTitleTheme,
+    title: titleTheme,
+    text: textTheme,
+    link: linkTheme,
+    listItem: listItemTheme,
+    list: listTheme,
+};
+const ThemeContext = createContext(defaultTheme);
+function ThemeProvider({ children, theme: themeObject = {}, themeDefaults, themeOverride }) {
+    const mergedTheme = useMemo(() => {
+        let finalTheme = themeObject
+            ? deepMerge(defaultTheme, themeObject)
+            : defaultTheme;
+        if (typeof themeOverride === 'function') {
+            const themeToModify = deepClone(finalTheme);
+            finalTheme = themeOverride(themeToModify);
+        }
+        if (themeDefaults !== undefined) {
+            for (const key in themeDefaults) {
+                const componentKey = key;
+                const componentTheme = finalTheme[componentKey];
+                const themeDefault = themeDefaults[componentKey];
+                if (themeDefault !== undefined) {
+                    finalTheme[componentKey].defaults =
+                        mergeDefaults(componentTheme.defaults, themeDefaults[componentKey]);
+                }
+            }
+        }
+        return finalTheme;
+    }, [themeObject, themeOverride]);
+    return (jsx(ThemeContext.Provider, { value: mergedTheme, children: children }));
+}
+function useTheme() {
+    return useContext(ThemeContext);
+}
+
+function ThemedComponent({ theme, propsToOmit, ...props }) {
+    const { Tag, finalClasses, finalProps } = useMemo(() => {
+        return theme.getComponentConfig(props, propsToOmit);
+    }, [theme, props, propsToOmit]);
+    return (jsx(Tag, { className: finalClasses, ...finalProps, children: props.children }));
+}
+
+const Button = (props) => {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.button, propsToOmit: BUTTON_KEYS, ...props });
+};
+
+const Badge = (props) => {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.badge, propsToOmit: BADGE_KEYS, ...props });
+};
+
+const Divider = (props) => {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.divider, propsToOmit: DIVIDER_KEYS, ...props });
+};
+
+const Chip = (props) => {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.chip, propsToOmit: CHIP_KEYS, ...props });
+};
+
+const Section = (props) => {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.section, propsToOmit: SECTION_KEYS, ...props });
+};
+
+const Container = (props) => {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.container, propsToOmit: CONTAINER_KEYS, ...props });
+};
+
+const Col = (props) => {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.col, propsToOmit: COL_KEYS, ...props });
+};
+
+const Row = (props) => {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.row, propsToOmit: ROW_KEYS, ...props });
+};
+
+const Grid3 = (props) => {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.grid3, propsToOmit: GRID_KEYS, ...props });
+};
+const Grid4 = (props) => {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.grid4, propsToOmit: GRID_KEYS, ...props });
+};
+
+const Card = (props) => {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.card, propsToOmit: CARD_KEYS, ...props });
+};
+
+const Stack = (props) => {
+    const theme = useTheme();
+    const stackTheme = theme.stack;
+    return jsx(ThemedComponent, { theme: stackTheme, propsToOmit: STACK_KEYS, ...props });
+};
+
+const PageTitle = (props) => {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.pageTitle, propsToOmit: TYPOGRAPHY_COMPONENT_KEYS, ...props });
+};
+const SectionTitle = (props) => {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.sectionTitle, propsToOmit: TYPOGRAPHY_COMPONENT_KEYS, ...props });
+};
+const Title = (props) => {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.title, propsToOmit: TYPOGRAPHY_COMPONENT_KEYS, ...props });
+};
+const Text = (props) => {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.text, propsToOmit: TYPOGRAPHY_COMPONENT_KEYS, ...props });
+};
+const Link = (props) => {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.link, propsToOmit: TYPOGRAPHY_COMPONENT_KEYS, ...props });
+};
+const ListItem = (props) => {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.listItem, propsToOmit: TYPOGRAPHY_COMPONENT_KEYS, ...props });
+};
+const List = (props) => {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.list, propsToOmit: TYPOGRAPHY_COMPONENT_KEYS, ...props });
+};
+
+export { APPEARANCE_KEYS, BADGE_KEYS, BASE_COMPONENT_KEYS, BORDER_KEYS, BREAKPOINT_KEYS, BUTTON_KEYS, Badge, Button, CARD_KEYS, CHIP_KEYS, COL_KEYS, COMPONENT_KEYS, CONTAINER_KEYS, Card, Chip, Col, Container, DIRECTION_REVERSE_KEYS, DISPLAY_KEYS, DIVIDER_KEYS, Divider, EXCLUSIVE_KEY_GROUPS, FLEX_DIRECTION_KEYS, FONT_FAMILY_KEYS, FONT_KEYS, FONT_STYLE_KEYS, FONT_WEIGHT_KEYS, GAP_KEYS, GRID_KEYS, Grid3, Grid4, HIDE_KEYS, ITEMS_KEYS, JUSTIFY_KEYS, Link, List, ListItem, MODE_KEYS, PADDING_KEYS, PILL_KEYS, POSITION_KEYS, PageTitle, RING_KEYS, ROUNDED_KEYS, ROW_KEYS, Row, SECTION_KEYS, SHADOW_KEYS, SHAPE_KEYS, SHARP_KEYS, SIZE_KEYS, STACK_KEYS, Section, SectionTitle, Stack, TEXT_ALIGN_KEYS, TEXT_APPEARANCE_KEYS, TEXT_DECORATION_KEYS, TEXT_TRANSFORM_KEYS, TYPOGRAPHY_COMPONENT_KEYS, Text, ThemeProvider, Title, VARIANT_KEYS, WRAP_KEYS, defaultTheme, useTheme };
+//# sourceMappingURL=index.esm.js.map