bianic-ui 2.10.0-beta.1 → 2.10.1

package/dist/cjs/index.js

@@ -101,6 +101,8 @@ function TbCircleFilled (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"},"child":[]},{"tag":"path","attr":{"d":"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"},"child":[]}]})(props);
 }function TbPlaystationX (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M12 21a9 9 0 0 0 9 -9a9 9 0 0 0 -9 -9a9 9 0 0 0 -9 9a9 9 0 0 0 9 9z"},"child":[]},{"tag":"path","attr":{"d":"M8.5 8.5l7 7"},"child":[]},{"tag":"path","attr":{"d":"M8.5 15.5l7 -7"},"child":[]}]})(props);
+}function TbMinus (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M5 12l14 0"},"child":[]}]})(props);
 }function TbLoader2 (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M12 3a9 9 0 1 0 9 9"},"child":[]}]})(props);
 }function TbEye (props) {
@@ -115,6 +117,8 @@ function TbCircleFilled (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M7 7l5 5l-5 5"},"child":[]},{"tag":"path","attr":{"d":"M13 7l5 5l-5 5"},"child":[]}]})(props);
 }function TbChevronsLeft (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M11 7l-5 5l5 5"},"child":[]},{"tag":"path","attr":{"d":"M17 7l-5 5l5 5"},"child":[]}]})(props);
+}function TbChevronsDown (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M7 7l5 5l5 -5"},"child":[]},{"tag":"path","attr":{"d":"M7 13l5 5l5 -5"},"child":[]}]})(props);
 }function TbChevronUp (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M6 15l6 -6l6 6"},"child":[]}]})(props);
 }function TbChevronRight (props) {
@@ -271,6 +275,13 @@ var childrenElement = function (element) {
     // if (typeof element === 'object') return '';
     return element;
 };
+var cn = function () {
+    var classes = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        classes[_i] = arguments[_i];
+    }
+    return classes.filter(Boolean).join(' ');
+};
 var validUnion = function (value, union) {
     return union.includes(value) ? value : union[0];
 };
@@ -456,7 +467,7 @@ var radiusConfig$1 = {
         tn: 'rounded-radius-full focus-visible:rounded-radius-full',
     },
 };
-var sizeConfig$d = {
+var sizeConfig$e = {
     lg: 'py-[10.5px] h-[48px] flex items-center justify-center gap-[10px] text-size-md ',
     md: 'py-[9px] h-[40px] flex items-center justify-center gap-[5px] text-size-base ',
     sm: 'py-[6px] h-[30px] flex items-center justify-center gap-[5px] text-size-sm ',
@@ -540,10 +551,10 @@ var Button = React.forwardRef(function (_a, ref) {
     }
     var sizingRules;
     if (variant.includes('link')) {
-        sizingRules = "".concat(sizeConfig$d[validatedSize]);
+        sizingRules = "".concat(sizeConfig$e[validatedSize]);
     }
     else {
-        sizingRules = "".concat(sizeConfig$d[validatedSize], " ").concat(sidePaddingConfig[validatedSize]);
+        sizingRules = "".concat(sizeConfig$e[validatedSize], " ").concat(sidePaddingConfig[validatedSize]);
     }
     var hasDoubleIcon = iconRight && iconLeft;
     var isVariantLink = variant.includes('link')
@@ -723,6 +734,37 @@ Banner.defaultProps = {
     variant: 'black',
 };
 
+var sizeConfig$d = {
+    md: 'h-[16px] text-[11px]',
+    sm: 'h-[14px] text-[9px]',
+};
+var colorConfig$3 = {
+    blue: 'bg-bia-blue-light-90 text-bia-blue-dark-10',
+    brown: 'bg-bia-brown-light-90 text-bia-brown-dark-10',
+    grey: 'bg-bia-coolgrey-light-80 text-bia-black', //
+    crayola: 'bg-bia-crayola-light-90 text-bia-crayola-dark-10',
+    green: 'bg-bia-green-light-90 text-bia-green-dark-10',
+    marguirette: 'bg-bia-margueriteblue-light-90 text-bia-margueriteblue-dark-10',
+    orange: 'bg-bia-orange-light-90 text-bia-orange-dark-10',
+    pink: 'bg-bia-pink-light-90 text-bia-pink-dark-10',
+    red: 'bg-bia-red-light-90 text-bia-red-dark-10',
+    sky: 'bg-bia-sky-light-90 text-bia-sky-dark-10',
+    teal: 'bg-bia-teal-light-90 text-bia-teal-dark-10',
+    verdant: 'bg-bia-verdantgreen-light-90 text-bia-verdantgreen-dark-10',
+    yellow: 'bg-bia-yellow-light-90 text-bia-yellow-dark-10',
+    black: 'bg-bia-black text-bia-white',
+    white: 'bg-bia-white text-bia-black border border-bia-grey',
+};
+
+var MonospaceBadge = function (_a) {
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.color, color = _c === void 0 ? 'blue' : _c;
+    var sizeClass = sizeConfig$d[size];
+    var colorClass = colorConfig$3[color];
+    var variantClass = "".concat(sizeClass, " ").concat(colorClass);
+    return (React.createElement("div", { className: "relative -top-[1px] inline-flex w-fit items-center justify-center rounded-[2px] px-[3px] ".concat(variantClass) },
+        React.createElement("div", { className: "font-sans-code leading-[0px]" }, text)));
+};
+
 function Biaenergi$6() {
     return (React.createElement("div", { className: "" },
         React.createElement("svg", { width: "235", height: "74", viewBox: "0 0 235 74", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -1703,3294 +1745,6 @@ function Color() {
             }))));
 }
 
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
-
-/**
- * Concatenates two arrays faster than the array spread operator.
- */
-const concatArrays = (array1, array2) => {
-  // Pre-allocate for better V8 optimization
-  const combinedArray = new Array(array1.length + array2.length);
-  for (let i = 0; i < array1.length; i++) {
-    combinedArray[i] = array1[i];
-  }
-  for (let i = 0; i < array2.length; i++) {
-    combinedArray[array1.length + i] = array2[i];
-  }
-  return combinedArray;
-};
-
-// Factory function ensures consistent object shapes
-const createClassValidatorObject = (classGroupId, validator) => ({
-  classGroupId,
-  validator
-});
-// Factory ensures consistent ClassPartObject shape
-const createClassPartObject = (nextPart = new Map(), validators = null, classGroupId) => ({
-  nextPart,
-  validators,
-  classGroupId
-});
-const CLASS_PART_SEPARATOR = '-';
-const EMPTY_CONFLICTS = [];
-// I use two dots here because one dot is used as prefix for class groups in plugins
-const ARBITRARY_PROPERTY_PREFIX = 'arbitrary..';
-const createClassGroupUtils = config => {
-  const classMap = createClassMap(config);
-  const {
-    conflictingClassGroups,
-    conflictingClassGroupModifiers
-  } = config;
-  const getClassGroupId = className => {
-    if (className.startsWith('[') && className.endsWith(']')) {
-      return getGroupIdForArbitraryProperty(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 skip it.
-    const startIndex = classParts[0] === '' && classParts.length > 1 ? 1 : 0;
-    return getGroupRecursive(classParts, startIndex, classMap);
-  };
-  const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
-    if (hasPostfixModifier) {
-      const modifierConflicts = conflictingClassGroupModifiers[classGroupId];
-      const baseConflicts = conflictingClassGroups[classGroupId];
-      if (modifierConflicts) {
-        if (baseConflicts) {
-          // Merge base conflicts with modifier conflicts
-          return concatArrays(baseConflicts, modifierConflicts);
-        }
-        // Only modifier conflicts
-        return modifierConflicts;
-      }
-      // Fall back to without postfix if no modifier conflicts
-      return baseConflicts || EMPTY_CONFLICTS;
-    }
-    return conflictingClassGroups[classGroupId] || EMPTY_CONFLICTS;
-  };
-  return {
-    getClassGroupId,
-    getConflictingClassGroupIds
-  };
-};
-const getGroupRecursive = (classParts, startIndex, classPartObject) => {
-  const classPathsLength = classParts.length - startIndex;
-  if (classPathsLength === 0) {
-    return classPartObject.classGroupId;
-  }
-  const currentClassPart = classParts[startIndex];
-  const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
-  if (nextClassPartObject) {
-    const result = getGroupRecursive(classParts, startIndex + 1, nextClassPartObject);
-    if (result) return result;
-  }
-  const validators = classPartObject.validators;
-  if (validators === null) {
-    return undefined;
-  }
-  // Build classRest string efficiently by joining from startIndex onwards
-  const classRest = startIndex === 0 ? classParts.join(CLASS_PART_SEPARATOR) : classParts.slice(startIndex).join(CLASS_PART_SEPARATOR);
-  const validatorsLength = validators.length;
-  for (let i = 0; i < validatorsLength; i++) {
-    const validatorObj = validators[i];
-    if (validatorObj.validator(classRest)) {
-      return validatorObj.classGroupId;
-    }
-  }
-  return undefined;
-};
-/**
- * Get the class group ID for an arbitrary property.
- *
- * @param className - The class name to get the group ID for. Is expected to be string starting with `[` and ending with `]`.
- */
-const getGroupIdForArbitraryProperty = className => className.slice(1, -1).indexOf(':') === -1 ? undefined : (() => {
-  const content = className.slice(1, -1);
-  const colonIndex = content.indexOf(':');
-  const property = content.slice(0, colonIndex);
-  return property ? ARBITRARY_PROPERTY_PREFIX + property : undefined;
-})();
-/**
- * Exported for testing only
- */
-const createClassMap = config => {
-  const {
-    theme,
-    classGroups
-  } = config;
-  return processClassGroups(classGroups, theme);
-};
-// Split into separate functions to maintain monomorphic call sites
-const processClassGroups = (classGroups, theme) => {
-  const classMap = createClassPartObject();
-  for (const classGroupId in classGroups) {
-    const group = classGroups[classGroupId];
-    processClassesRecursively(group, classMap, classGroupId, theme);
-  }
-  return classMap;
-};
-const processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
-  const len = classGroup.length;
-  for (let i = 0; i < len; i++) {
-    const classDefinition = classGroup[i];
-    processClassDefinition(classDefinition, classPartObject, classGroupId, theme);
-  }
-};
-// Split into separate functions for each type to maintain monomorphic call sites
-const processClassDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
-  if (typeof classDefinition === 'string') {
-    processStringDefinition(classDefinition, classPartObject, classGroupId);
-    return;
-  }
-  if (typeof classDefinition === 'function') {
-    processFunctionDefinition(classDefinition, classPartObject, classGroupId, theme);
-    return;
-  }
-  processObjectDefinition(classDefinition, classPartObject, classGroupId, theme);
-};
-const processStringDefinition = (classDefinition, classPartObject, classGroupId) => {
-  const classPartObjectToEdit = classDefinition === '' ? classPartObject : getPart(classPartObject, classDefinition);
-  classPartObjectToEdit.classGroupId = classGroupId;
-};
-const processFunctionDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
-  if (isThemeGetter(classDefinition)) {
-    processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
-    return;
-  }
-  if (classPartObject.validators === null) {
-    classPartObject.validators = [];
-  }
-  classPartObject.validators.push(createClassValidatorObject(classGroupId, classDefinition));
-};
-const processObjectDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
-  const entries = Object.entries(classDefinition);
-  const len = entries.length;
-  for (let i = 0; i < len; i++) {
-    const [key, value] = entries[i];
-    processClassesRecursively(value, getPart(classPartObject, key), classGroupId, theme);
-  }
-};
-const getPart = (classPartObject, path) => {
-  let current = classPartObject;
-  const parts = path.split(CLASS_PART_SEPARATOR);
-  const len = parts.length;
-  for (let i = 0; i < len; i++) {
-    const part = parts[i];
-    let next = current.nextPart.get(part);
-    if (!next) {
-      next = createClassPartObject();
-      current.nextPart.set(part, next);
-    }
-    current = next;
-  }
-  return current;
-};
-// Type guard maintains monomorphic check
-const isThemeGetter = func => 'isThemeGetter' in func && func.isThemeGetter === true;
-
-// LRU cache implementation using plain objects for simplicity
-const createLruCache = maxCacheSize => {
-  if (maxCacheSize < 1) {
-    return {
-      get: () => undefined,
-      set: () => {}
-    };
-  }
-  let cacheSize = 0;
-  let cache = Object.create(null);
-  let previousCache = Object.create(null);
-  const update = (key, value) => {
-    cache[key] = value;
-    cacheSize++;
-    if (cacheSize > maxCacheSize) {
-      cacheSize = 0;
-      previousCache = cache;
-      cache = Object.create(null);
-    }
-  };
-  return {
-    get(key) {
-      let value = cache[key];
-      if (value !== undefined) {
-        return value;
-      }
-      if ((value = previousCache[key]) !== undefined) {
-        update(key, value);
-        return value;
-      }
-    },
-    set(key, value) {
-      if (key in cache) {
-        cache[key] = value;
-      } else {
-        update(key, value);
-      }
-    }
-  };
-};
-const IMPORTANT_MODIFIER = '!';
-const MODIFIER_SEPARATOR = ':';
-const EMPTY_MODIFIERS = [];
-// Pre-allocated result object shape for consistency
-const createResultObject = (modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition, isExternal) => ({
-  modifiers,
-  hasImportantModifier,
-  baseClassName,
-  maybePostfixModifierPosition,
-  isExternal
-});
-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 => {
-    // Use simple array with push for better performance
-    const modifiers = [];
-    let bracketDepth = 0;
-    let parenDepth = 0;
-    let modifierStart = 0;
-    let postfixModifierPosition;
-    const len = className.length;
-    for (let index = 0; index < len; index++) {
-      const currentCharacter = className[index];
-      if (bracketDepth === 0 && parenDepth === 0) {
-        if (currentCharacter === MODIFIER_SEPARATOR) {
-          modifiers.push(className.slice(modifierStart, index));
-          modifierStart = index + 1;
-          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.slice(modifierStart);
-    // Inline important modifier check
-    let baseClassName = baseClassNameWithImportantModifier;
-    let hasImportantModifier = false;
-    if (baseClassNameWithImportantModifier.endsWith(IMPORTANT_MODIFIER)) {
-      baseClassName = baseClassNameWithImportantModifier.slice(0, -1);
-      hasImportantModifier = true;
-    } else if (
-    /**
-     * 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
-     */
-    baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER)) {
-      baseClassName = baseClassNameWithImportantModifier.slice(1);
-      hasImportantModifier = true;
-    }
-    const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : undefined;
-    return createResultObject(modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition);
-  };
-  if (prefix) {
-    const fullPrefix = prefix + MODIFIER_SEPARATOR;
-    const parseClassNameOriginal = parseClassName;
-    parseClassName = className => className.startsWith(fullPrefix) ? parseClassNameOriginal(className.slice(fullPrefix.length)) : createResultObject(EMPTY_MODIFIERS, false, className, undefined, true);
-  }
-  if (experimentalParseClassName) {
-    const parseClassNameOriginal = parseClassName;
-    parseClassName = className => experimentalParseClassName({
-      className,
-      parseClassName: parseClassNameOriginal
-    });
-  }
-  return parseClassName;
-};
-
-/**
- * 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 => {
-  // Pre-compute weights for all known modifiers for O(1) comparison
-  const modifierWeights = new Map();
-  // Assign weights to sensitive modifiers (highest priority, but preserve order)
-  config.orderSensitiveModifiers.forEach((mod, index) => {
-    modifierWeights.set(mod, 1000000 + index); // High weights for sensitive mods
-  });
-  return modifiers => {
-    const result = [];
-    let currentSegment = [];
-    // Process modifiers in one pass
-    for (let i = 0; i < modifiers.length; i++) {
-      const modifier = modifiers[i];
-      // Check if modifier is sensitive (starts with '[' or in orderSensitiveModifiers)
-      const isArbitrary = modifier[0] === '[';
-      const isOrderSensitive = modifierWeights.has(modifier);
-      if (isArbitrary || isOrderSensitive) {
-        // Sort and flush current segment alphabetically
-        if (currentSegment.length > 0) {
-          currentSegment.sort();
-          result.push(...currentSegment);
-          currentSegment = [];
-        }
-        result.push(modifier);
-      } else {
-        // Regular modifier - add to current segment for batch sorting
-        currentSegment.push(modifier);
-      }
-    }
-    // Sort and add any remaining segment items
-    if (currentSegment.length > 0) {
-      currentSegment.sort();
-      result.push(...currentSegment);
-    }
-    return result;
-  };
-};
-const createConfigUtils = config => ({
-  cache: createLruCache(config.cacheSize),
-  parseClassName: createParseClassName(config),
-  sortModifiers: createSortModifiers(config),
-  postfixLookupClassGroupIds: createPostfixLookupClassGroupIds(config),
-  ...createClassGroupUtils(config)
-});
-const createPostfixLookupClassGroupIds = config => {
-  const lookup = Object.create(null);
-  const classGroupIds = config.postfixLookupClassGroups;
-  if (classGroupIds) {
-    for (let i = 0; i < classGroupIds.length; i++) {
-      lookup[classGroupIds[i]] = true;
-    }
-  }
-  return lookup;
-};
-const SPLIT_CLASSES_REGEX = /\s+/;
-const mergeClassList = (classList, configUtils) => {
-  const {
-    parseClassName,
-    getClassGroupId,
-    getConflictingClassGroupIds,
-    sortModifiers,
-    postfixLookupClassGroupIds
-  } = 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;
-    if (hasPostfixModifier) {
-      const baseClassNameWithoutPostfix = baseClassName.substring(0, maybePostfixModifierPosition);
-      classGroupId = getClassGroupId(baseClassNameWithoutPostfix);
-      const classGroupIdWithPostfix = classGroupId && postfixLookupClassGroupIds[classGroupId] ? getClassGroupId(baseClassName) : undefined;
-      if (classGroupIdWithPostfix && classGroupIdWithPostfix !== classGroupId) {
-        classGroupId = classGroupIdWithPostfix;
-        hasPostfixModifier = false;
-      }
-    } else {
-      classGroupId = getClassGroupId(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;
-    }
-    // Fast path: skip sorting for empty or single modifier
-    const variantModifier = modifiers.length === 0 ? '' : modifiers.length === 1 ? modifiers[0] : sortModifiers(modifiers).join(':');
-    const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
-    const classId = modifierId + classGroupId;
-    if (classGroupsInConflict.indexOf(classId) > -1) {
-      // 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)
- */
-const twJoin = (...classLists) => {
-  let index = 0;
-  let argument;
-  let resolvedValue;
-  let string = '';
-  while (index < classLists.length) {
-    if (argument = classLists[index++]) {
-      if (resolvedValue = toValue(argument)) {
-        string && (string += ' ');
-        string += resolvedValue;
-      }
-    }
-  }
-  return string;
-};
-const toValue = mix => {
-  // Fast path for strings
-  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;
-};
-const createTailwindMerge = (createConfigFirst, ...createConfigRest) => {
-  let configUtils;
-  let cacheGet;
-  let cacheSet;
-  let functionToCall;
-  const 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);
-  };
-  const tailwindMerge = classList => {
-    const cachedResult = cacheGet(classList);
-    if (cachedResult) {
-      return cachedResult;
-    }
-    const result = mergeClassList(classList, configUtils);
-    cacheSet(classList, result);
-    return result;
-  };
-  functionToCall = initTailwindMerge;
-  return (...args) => functionToCall(twJoin(...args));
-};
-const fallbackThemeArr = [];
-const fromTheme = key => {
-  const themeGetter = theme => theme[key] || fallbackThemeArr;
-  themeGetter.isThemeGetter = true;
-  return themeGetter;
-};
-const arbitraryValueRegex = /^\[(?:(\w[\w-]*):)?(.+)\]$/i;
-const arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
-const fractionRegex = /^\d+(?:\.\d+)?\/\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)|color-mix)\(.+\)$/;
-// 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 => !!value && !Number.isNaN(Number(value));
-const isInteger = value => !!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 isNamedContainerQuery = value => value.startsWith('@container') && (value[10] === '/' && value[11] !== undefined || value[11] === 's' && value[16] !== undefined && value.startsWith('-size/', 10) || value[11] === 'n' && value[18] !== undefined && value.startsWith('-normal/', 10));
-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 isArbitraryWeight = value => getIsArbitraryValue(value, isLabelWeight, isAny);
-const isArbitraryFamilyName = value => getIsArbitraryValue(value, isLabelFamilyName, isNever);
-const isArbitraryPosition = value => getIsArbitraryValue(value, isLabelPosition, isNever);
-const isArbitraryImage = value => getIsArbitraryValue(value, isLabelImage, isImage);
-const isArbitraryShadow = value => getIsArbitraryValue(value, isLabelShadow, 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);
-const isArbitraryVariableWeight = value => getIsArbitraryVariable(value, isLabelWeight, 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' || label === 'percentage';
-const isLabelImage = label => label === 'image' || label === 'url';
-const isLabelSize = label => label === 'length' || label === 'size' || label === 'bg-size';
-const isLabelLength = label => label === 'length';
-const isLabelNumber = label => label === 'number';
-const isLabelFamilyName = label => label === 'family-name';
-const isLabelWeight = label => label === 'number' || label === 'weight';
-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 themeTextShadow = fromTheme('text-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 = () => ['center', 'top', 'bottom', 'left', 'right', 'top-left',
-  // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
-  'left-top', 'top-right',
-  // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
-  'right-top', 'bottom-right',
-  // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
-  'right-bottom', 'bottom-left',
-  // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
-  'left-bottom'];
-  const scalePositionWithArbitrary = () => [...scalePosition(), isArbitraryVariable, isArbitraryValue];
-  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', 'center-safe', 'end-safe'];
-  const scaleAlignSecondaryAxis = () => ['start', 'end', 'center', 'stretch', 'center-safe', 'end-safe'];
-  const scaleMargin = () => ['auto', ...scaleUnambiguousSpacing()];
-  const scaleSizing = () => [isFraction, 'auto', 'full', 'dvw', 'dvh', 'lvw', 'lvh', 'svw', 'svh', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
-  const scaleSizingInline = () => [isFraction, 'screen', 'full', 'dvw', 'lvw', 'svw', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
-  const scaleSizingBlock = () => [isFraction, 'screen', 'full', 'lh', 'dvh', 'lvh', 'svh', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
-  const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
-  const scaleBgPosition = () => [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition, {
-    position: [isArbitraryVariable, isArbitraryValue]
-  }];
-  const scaleBgRepeat = () => ['no-repeat', {
-    repeat: ['', 'x', 'y', 'space', 'round']
-  }];
-  const scaleBgSize = () => ['auto', 'cover', 'contain', isArbitraryVariableSize, isArbitrarySize, {
-    size: [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 scaleMaskImagePosition = () => [isNumber, isPercent, isArbitraryVariablePosition, isArbitraryPosition];
-  const scaleBlur = () => [
-  // Deprecated since Tailwind CSS v4.0.0
-  '', 'none', themeBlur, 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],
-      'text-shadow': [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'],
-      /**
-       * Container Type
-       * @see https://tailwindcss.com/docs/responsive-design#container-queries
-       */
-      'container-type': [{
-        '@container': ['', 'normal', 'size', isArbitraryVariable, isArbitraryValue]
-      }],
-      /**
-       * Container Name
-       * @see https://tailwindcss.com/docs/responsive-design#named-containers
-       */
-      'container-named': [isNamedContainerQuery],
-      /**
-       * 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: scalePositionWithArbitrary()
-      }],
-      /**
-       * 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'],
-      /**
-       * Inset
-       * @see https://tailwindcss.com/docs/top-right-bottom-left
-       */
-      inset: [{
-        inset: scaleInset()
-      }],
-      /**
-       * Inset Inline
-       * @see https://tailwindcss.com/docs/top-right-bottom-left
-       */
-      'inset-x': [{
-        'inset-x': scaleInset()
-      }],
-      /**
-       * Inset Block
-       * @see https://tailwindcss.com/docs/top-right-bottom-left
-       */
-      'inset-y': [{
-        'inset-y': scaleInset()
-      }],
-      /**
-       * Inset Inline Start
-       * @see https://tailwindcss.com/docs/top-right-bottom-left
-       * @todo class group will be renamed to `inset-s` in next major release
-       */
-      start: [{
-        'inset-s': scaleInset(),
-        /**
-         * @deprecated since Tailwind CSS v4.2.0 in favor of `inset-s-*` utilities.
-         * @see https://github.com/tailwindlabs/tailwindcss/pull/19613
-         */
-        start: scaleInset()
-      }],
-      /**
-       * Inset Inline End
-       * @see https://tailwindcss.com/docs/top-right-bottom-left
-       * @todo class group will be renamed to `inset-e` in next major release
-       */
-      end: [{
-        'inset-e': scaleInset(),
-        /**
-         * @deprecated since Tailwind CSS v4.2.0 in favor of `inset-e-*` utilities.
-         * @see https://github.com/tailwindlabs/tailwindcss/pull/19613
-         */
-        end: scaleInset()
-      }],
-      /**
-       * Inset Block Start
-       * @see https://tailwindcss.com/docs/top-right-bottom-left
-       */
-      'inset-bs': [{
-        'inset-bs': scaleInset()
-      }],
-      /**
-       * Inset Block End
-       * @see https://tailwindcss.com/docs/top-right-bottom-left
-       */
-      'inset-be': [{
-        'inset-be': 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: ['', 'last']
-        }]
-      }],
-      /**
-       * Align Self
-       * @see https://tailwindcss.com/docs/align-self
-       */
-      'align-self': [{
-        self: ['auto', ...scaleAlignSecondaryAxis(), {
-          baseline: ['', 'last']
-        }]
-      }],
-      /**
-       * 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 Inline
-       * @see https://tailwindcss.com/docs/padding
-       */
-      px: [{
-        px: scaleUnambiguousSpacing()
-      }],
-      /**
-       * Padding Block
-       * @see https://tailwindcss.com/docs/padding
-       */
-      py: [{
-        py: scaleUnambiguousSpacing()
-      }],
-      /**
-       * Padding Inline Start
-       * @see https://tailwindcss.com/docs/padding
-       */
-      ps: [{
-        ps: scaleUnambiguousSpacing()
-      }],
-      /**
-       * Padding Inline End
-       * @see https://tailwindcss.com/docs/padding
-       */
-      pe: [{
-        pe: scaleUnambiguousSpacing()
-      }],
-      /**
-       * Padding Block Start
-       * @see https://tailwindcss.com/docs/padding
-       */
-      pbs: [{
-        pbs: scaleUnambiguousSpacing()
-      }],
-      /**
-       * Padding Block End
-       * @see https://tailwindcss.com/docs/padding
-       */
-      pbe: [{
-        pbe: 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 Inline
-       * @see https://tailwindcss.com/docs/margin
-       */
-      mx: [{
-        mx: scaleMargin()
-      }],
-      /**
-       * Margin Block
-       * @see https://tailwindcss.com/docs/margin
-       */
-      my: [{
-        my: scaleMargin()
-      }],
-      /**
-       * Margin Inline Start
-       * @see https://tailwindcss.com/docs/margin
-       */
-      ms: [{
-        ms: scaleMargin()
-      }],
-      /**
-       * Margin Inline End
-       * @see https://tailwindcss.com/docs/margin
-       */
-      me: [{
-        me: scaleMargin()
-      }],
-      /**
-       * Margin Block Start
-       * @see https://tailwindcss.com/docs/margin
-       */
-      mbs: [{
-        mbs: scaleMargin()
-      }],
-      /**
-       * Margin Block End
-       * @see https://tailwindcss.com/docs/margin
-       */
-      mbe: [{
-        mbe: 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()
-      }],
-      /**
-       * Inline Size
-       * @see https://tailwindcss.com/docs/width
-       */
-      'inline-size': [{
-        inline: ['auto', ...scaleSizingInline()]
-      }],
-      /**
-       * Min-Inline Size
-       * @see https://tailwindcss.com/docs/min-width
-       */
-      'min-inline-size': [{
-        'min-inline': ['auto', ...scaleSizingInline()]
-      }],
-      /**
-       * Max-Inline Size
-       * @see https://tailwindcss.com/docs/max-width
-       */
-      'max-inline-size': [{
-        'max-inline': ['none', ...scaleSizingInline()]
-      }],
-      /**
-       * Block Size
-       * @see https://tailwindcss.com/docs/height
-       */
-      'block-size': [{
-        block: ['auto', ...scaleSizingBlock()]
-      }],
-      /**
-       * Min-Block Size
-       * @see https://tailwindcss.com/docs/min-height
-       */
-      'min-block-size': [{
-        'min-block': ['auto', ...scaleSizingBlock()]
-      }],
-      /**
-       * Max-Block Size
-       * @see https://tailwindcss.com/docs/max-height
-       */
-      'max-block-size': [{
-        'max-block': ['none', ...scaleSizingBlock()]
-      }],
-      /**
-       * 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', 'lh', ...scaleSizing()]
-      }],
-      /**
-       * Min-Height
-       * @see https://tailwindcss.com/docs/min-height
-       */
-      'min-h': [{
-        'min-h': ['screen', 'lh', 'none', ...scaleSizing()]
-      }],
-      /**
-       * Max-Height
-       * @see https://tailwindcss.com/docs/max-height
-       */
-      'max-h': [{
-        'max-h': ['screen', 'lh', ...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, isArbitraryVariableWeight, isArbitraryWeight]
-      }],
-      /**
-       * 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, isArbitraryFamilyName, themeFont]
-      }],
-      /**
-       * Font Feature Settings
-       * @see https://tailwindcss.com/docs/font-feature-settings
-       */
-      'font-features': [{
-        'font-features': [isArbitraryValue]
-      }],
-      /**
-       * 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()
-      }],
-      /**
-       * Tab Size
-       * @see https://tailwindcss.com/docs/tab-size
-       */
-      'tab-size': [{
-        tab: [isInteger, isArbitraryVariable, isArbitraryValue]
-      }],
-      /**
-       * 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']
-      }],
-      /**
-       * Overflow Wrap
-       * @see https://tailwindcss.com/docs/overflow-wrap
-       */
-      wrap: [{
-        wrap: ['break-word', 'anywhere', 'normal']
-      }],
-      /**
-       * 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: scaleBgPosition()
-      }],
-      /**
-       * Background Repeat
-       * @see https://tailwindcss.com/docs/background-repeat
-       */
-      'bg-repeat': [{
-        bg: scaleBgRepeat()
-      }],
-      /**
-       * Background Size
-       * @see https://tailwindcss.com/docs/background-size
-       */
-      'bg-size': [{
-        bg: scaleBgSize()
-      }],
-      /**
-       * 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 Inline
-       * @see https://tailwindcss.com/docs/border-width
-       */
-      'border-w-x': [{
-        'border-x': scaleBorderWidth()
-      }],
-      /**
-       * Border Width Block
-       * @see https://tailwindcss.com/docs/border-width
-       */
-      'border-w-y': [{
-        'border-y': scaleBorderWidth()
-      }],
-      /**
-       * Border Width Inline Start
-       * @see https://tailwindcss.com/docs/border-width
-       */
-      'border-w-s': [{
-        'border-s': scaleBorderWidth()
-      }],
-      /**
-       * Border Width Inline End
-       * @see https://tailwindcss.com/docs/border-width
-       */
-      'border-w-e': [{
-        'border-e': scaleBorderWidth()
-      }],
-      /**
-       * Border Width Block Start
-       * @see https://tailwindcss.com/docs/border-width
-       */
-      'border-w-bs': [{
-        'border-bs': scaleBorderWidth()
-      }],
-      /**
-       * Border Width Block End
-       * @see https://tailwindcss.com/docs/border-width
-       */
-      'border-w-be': [{
-        'border-be': 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 Inline
-       * @see https://tailwindcss.com/docs/border-color
-       */
-      'border-color-x': [{
-        'border-x': scaleColor()
-      }],
-      /**
-       * Border Color Block
-       * @see https://tailwindcss.com/docs/border-color
-       */
-      'border-color-y': [{
-        'border-y': scaleColor()
-      }],
-      /**
-       * Border Color Inline Start
-       * @see https://tailwindcss.com/docs/border-color
-       */
-      'border-color-s': [{
-        'border-s': scaleColor()
-      }],
-      /**
-       * Border Color Inline End
-       * @see https://tailwindcss.com/docs/border-color
-       */
-      'border-color-e': [{
-        'border-e': scaleColor()
-      }],
-      /**
-       * Border Color Block Start
-       * @see https://tailwindcss.com/docs/border-color
-       */
-      'border-color-bs': [{
-        'border-bs': scaleColor()
-      }],
-      /**
-       * Border Color Block End
-       * @see https://tailwindcss.com/docs/border-color
-       */
-      'border-color-be': [{
-        'border-be': 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: scaleColor()
-      }],
-      // ---------------
-      // --- 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', themeInsetShadow, isArbitraryVariableShadow, isArbitraryShadow]
-      }],
-      /**
-       * 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()
-      }],
-      /**
-       * Text Shadow
-       * @see https://tailwindcss.com/docs/text-shadow
-       */
-      'text-shadow': [{
-        'text-shadow': ['none', themeTextShadow, isArbitraryVariableShadow, isArbitraryShadow]
-      }],
-      /**
-       * Text Shadow Color
-       * @see https://tailwindcss.com/docs/text-shadow#setting-the-shadow-color
-       */
-      'text-shadow-color': [{
-        'text-shadow': 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()
-      }],
-      /**
-       * Mask Clip
-       * @see https://tailwindcss.com/docs/mask-clip
-       */
-      'mask-clip': [{
-        'mask-clip': ['border', 'padding', 'content', 'fill', 'stroke', 'view']
-      }, 'mask-no-clip'],
-      /**
-       * Mask Composite
-       * @see https://tailwindcss.com/docs/mask-composite
-       */
-      'mask-composite': [{
-        mask: ['add', 'subtract', 'intersect', 'exclude']
-      }],
-      /**
-       * Mask Image
-       * @see https://tailwindcss.com/docs/mask-image
-       */
-      'mask-image-linear-pos': [{
-        'mask-linear': [isNumber]
-      }],
-      'mask-image-linear-from-pos': [{
-        'mask-linear-from': scaleMaskImagePosition()
-      }],
-      'mask-image-linear-to-pos': [{
-        'mask-linear-to': scaleMaskImagePosition()
-      }],
-      'mask-image-linear-from-color': [{
-        'mask-linear-from': scaleColor()
-      }],
-      'mask-image-linear-to-color': [{
-        'mask-linear-to': scaleColor()
-      }],
-      'mask-image-t-from-pos': [{
-        'mask-t-from': scaleMaskImagePosition()
-      }],
-      'mask-image-t-to-pos': [{
-        'mask-t-to': scaleMaskImagePosition()
-      }],
-      'mask-image-t-from-color': [{
-        'mask-t-from': scaleColor()
-      }],
-      'mask-image-t-to-color': [{
-        'mask-t-to': scaleColor()
-      }],
-      'mask-image-r-from-pos': [{
-        'mask-r-from': scaleMaskImagePosition()
-      }],
-      'mask-image-r-to-pos': [{
-        'mask-r-to': scaleMaskImagePosition()
-      }],
-      'mask-image-r-from-color': [{
-        'mask-r-from': scaleColor()
-      }],
-      'mask-image-r-to-color': [{
-        'mask-r-to': scaleColor()
-      }],
-      'mask-image-b-from-pos': [{
-        'mask-b-from': scaleMaskImagePosition()
-      }],
-      'mask-image-b-to-pos': [{
-        'mask-b-to': scaleMaskImagePosition()
-      }],
-      'mask-image-b-from-color': [{
-        'mask-b-from': scaleColor()
-      }],
-      'mask-image-b-to-color': [{
-        'mask-b-to': scaleColor()
-      }],
-      'mask-image-l-from-pos': [{
-        'mask-l-from': scaleMaskImagePosition()
-      }],
-      'mask-image-l-to-pos': [{
-        'mask-l-to': scaleMaskImagePosition()
-      }],
-      'mask-image-l-from-color': [{
-        'mask-l-from': scaleColor()
-      }],
-      'mask-image-l-to-color': [{
-        'mask-l-to': scaleColor()
-      }],
-      'mask-image-x-from-pos': [{
-        'mask-x-from': scaleMaskImagePosition()
-      }],
-      'mask-image-x-to-pos': [{
-        'mask-x-to': scaleMaskImagePosition()
-      }],
-      'mask-image-x-from-color': [{
-        'mask-x-from': scaleColor()
-      }],
-      'mask-image-x-to-color': [{
-        'mask-x-to': scaleColor()
-      }],
-      'mask-image-y-from-pos': [{
-        'mask-y-from': scaleMaskImagePosition()
-      }],
-      'mask-image-y-to-pos': [{
-        'mask-y-to': scaleMaskImagePosition()
-      }],
-      'mask-image-y-from-color': [{
-        'mask-y-from': scaleColor()
-      }],
-      'mask-image-y-to-color': [{
-        'mask-y-to': scaleColor()
-      }],
-      'mask-image-radial': [{
-        'mask-radial': [isArbitraryVariable, isArbitraryValue]
-      }],
-      'mask-image-radial-from-pos': [{
-        'mask-radial-from': scaleMaskImagePosition()
-      }],
-      'mask-image-radial-to-pos': [{
-        'mask-radial-to': scaleMaskImagePosition()
-      }],
-      'mask-image-radial-from-color': [{
-        'mask-radial-from': scaleColor()
-      }],
-      'mask-image-radial-to-color': [{
-        'mask-radial-to': scaleColor()
-      }],
-      'mask-image-radial-shape': [{
-        'mask-radial': ['circle', 'ellipse']
-      }],
-      'mask-image-radial-size': [{
-        'mask-radial': [{
-          closest: ['side', 'corner'],
-          farthest: ['side', 'corner']
-        }]
-      }],
-      'mask-image-radial-pos': [{
-        'mask-radial-at': scalePosition()
-      }],
-      'mask-image-conic-pos': [{
-        'mask-conic': [isNumber]
-      }],
-      'mask-image-conic-from-pos': [{
-        'mask-conic-from': scaleMaskImagePosition()
-      }],
-      'mask-image-conic-to-pos': [{
-        'mask-conic-to': scaleMaskImagePosition()
-      }],
-      'mask-image-conic-from-color': [{
-        'mask-conic-from': scaleColor()
-      }],
-      'mask-image-conic-to-color': [{
-        'mask-conic-to': scaleColor()
-      }],
-      /**
-       * Mask Mode
-       * @see https://tailwindcss.com/docs/mask-mode
-       */
-      'mask-mode': [{
-        mask: ['alpha', 'luminance', 'match']
-      }],
-      /**
-       * Mask Origin
-       * @see https://tailwindcss.com/docs/mask-origin
-       */
-      'mask-origin': [{
-        'mask-origin': ['border', 'padding', 'content', 'fill', 'stroke', 'view']
-      }],
-      /**
-       * Mask Position
-       * @see https://tailwindcss.com/docs/mask-position
-       */
-      'mask-position': [{
-        mask: scaleBgPosition()
-      }],
-      /**
-       * Mask Repeat
-       * @see https://tailwindcss.com/docs/mask-repeat
-       */
-      'mask-repeat': [{
-        mask: scaleBgRepeat()
-      }],
-      /**
-       * Mask Size
-       * @see https://tailwindcss.com/docs/mask-size
-       */
-      'mask-size': [{
-        mask: scaleBgSize()
-      }],
-      /**
-       * Mask Type
-       * @see https://tailwindcss.com/docs/mask-type
-       */
-      'mask-type': [{
-        'mask-type': ['alpha', 'luminance']
-      }],
-      /**
-       * Mask Image
-       * @see https://tailwindcss.com/docs/mask-image
-       */
-      'mask-image': [{
-        mask: ['none', isArbitraryVariable, isArbitraryValue]
-      }],
-      // ---------------
-      // --- 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, isArbitraryVariableShadow, isArbitraryShadow]
-      }],
-      /**
-       * Drop Shadow Color
-       * @see https://tailwindcss.com/docs/filter-drop-shadow#setting-the-shadow-color
-       */
-      'drop-shadow-color': [{
-        'drop-shadow': scaleColor()
-      }],
-      /**
-       * 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': scalePositionWithArbitrary()
-      }],
-      /**
-       * 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: scalePositionWithArbitrary()
-      }],
-      /**
-       * 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'],
-      /**
-       * Zoom
-       * @see https://tailwindcss.com/docs/zoom
-       */
-      zoom: [{
-        zoom: [isInteger, isArbitraryVariable, isArbitraryValue]
-      }],
-      // ---------------------
-      // --- 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']
-      }],
-      /**
-       * Scrollbar Thumb Color
-       * @see https://tailwindcss.com/docs/scrollbar-color
-       */
-      'scrollbar-thumb-color': [{
-        'scrollbar-thumb': scaleColor()
-      }],
-      /**
-       * Scrollbar Track Color
-       * @see https://tailwindcss.com/docs/scrollbar-color
-       */
-      'scrollbar-track-color': [{
-        'scrollbar-track': scaleColor()
-      }],
-      /**
-       * Scrollbar Gutter
-       * @see https://tailwindcss.com/docs/scrollbar-gutter
-       */
-      'scrollbar-gutter': [{
-        'scrollbar-gutter': ['auto', 'stable', 'both']
-      }],
-      /**
-       * Scrollbar Width
-       * @see https://tailwindcss.com/docs/scrollbar-width
-       */
-      'scrollbar-w': [{
-        scrollbar: ['auto', 'thin', 'none']
-      }],
-      /**
-       * Scroll Margin
-       * @see https://tailwindcss.com/docs/scroll-margin
-       */
-      'scroll-m': [{
-        'scroll-m': scaleUnambiguousSpacing()
-      }],
-      /**
-       * Scroll Margin Inline
-       * @see https://tailwindcss.com/docs/scroll-margin
-       */
-      'scroll-mx': [{
-        'scroll-mx': scaleUnambiguousSpacing()
-      }],
-      /**
-       * Scroll Margin Block
-       * @see https://tailwindcss.com/docs/scroll-margin
-       */
-      'scroll-my': [{
-        'scroll-my': scaleUnambiguousSpacing()
-      }],
-      /**
-       * Scroll Margin Inline Start
-       * @see https://tailwindcss.com/docs/scroll-margin
-       */
-      'scroll-ms': [{
-        'scroll-ms': scaleUnambiguousSpacing()
-      }],
-      /**
-       * Scroll Margin Inline End
-       * @see https://tailwindcss.com/docs/scroll-margin
-       */
-      'scroll-me': [{
-        'scroll-me': scaleUnambiguousSpacing()
-      }],
-      /**
-       * Scroll Margin Block Start
-       * @see https://tailwindcss.com/docs/scroll-margin
-       */
-      'scroll-mbs': [{
-        'scroll-mbs': scaleUnambiguousSpacing()
-      }],
-      /**
-       * Scroll Margin Block End
-       * @see https://tailwindcss.com/docs/scroll-margin
-       */
-      'scroll-mbe': [{
-        'scroll-mbe': 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 Inline
-       * @see https://tailwindcss.com/docs/scroll-padding
-       */
-      'scroll-px': [{
-        'scroll-px': scaleUnambiguousSpacing()
-      }],
-      /**
-       * Scroll Padding Block
-       * @see https://tailwindcss.com/docs/scroll-padding
-       */
-      'scroll-py': [{
-        'scroll-py': scaleUnambiguousSpacing()
-      }],
-      /**
-       * Scroll Padding Inline Start
-       * @see https://tailwindcss.com/docs/scroll-padding
-       */
-      'scroll-ps': [{
-        'scroll-ps': scaleUnambiguousSpacing()
-      }],
-      /**
-       * Scroll Padding Inline End
-       * @see https://tailwindcss.com/docs/scroll-padding
-       */
-      'scroll-pe': [{
-        'scroll-pe': scaleUnambiguousSpacing()
-      }],
-      /**
-       * Scroll Padding Block Start
-       * @see https://tailwindcss.com/docs/scroll-padding
-       */
-      'scroll-pbs': [{
-        'scroll-pbs': scaleUnambiguousSpacing()
-      }],
-      /**
-       * Scroll Padding Block End
-       * @see https://tailwindcss.com/docs/scroll-padding
-       */
-      'scroll-pbe': [{
-        'scroll-pbe': 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: {
-      'container-named': ['container-type'],
-      overflow: ['overflow-x', 'overflow-y'],
-      overscroll: ['overscroll-x', 'overscroll-y'],
-      inset: ['inset-x', 'inset-y', 'inset-bs', 'inset-be', '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', 'pbs', 'pbe', 'pt', 'pr', 'pb', 'pl'],
-      px: ['pr', 'pl'],
-      py: ['pt', 'pb'],
-      m: ['mx', 'my', 'ms', 'me', 'mbs', 'mbe', '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-x', 'border-w-y', 'border-w-s', 'border-w-e', 'border-w-bs', 'border-w-be', '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-x', 'border-color-y', 'border-color-s', 'border-color-e', 'border-color-bs', 'border-color-be', '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-mbs', 'scroll-mbe', '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-pbs', 'scroll-pbe', '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']
-    },
-    postfixLookupClassGroups: ['container-type'],
-    orderSensitiveModifiers: ['*', '**', 'after', 'backdrop', 'before', 'details-content', 'file', 'first-letter', 'first-line', 'marker', 'placeholder', 'selection']
-  };
-};
-const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
-
-function cn() {
-    var inputs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        inputs[_i] = arguments[_i];
-    }
-    return twMerge(clsx(inputs));
-}
 var BORDER_COLOR = {
     countdown: 'border-bia-blue',
     success: 'border-bia-green',
@@ -5765,14 +2519,15 @@ var sizeConfig$9 = {
 
 var sizeUnion$3 = ['md', 'sm', 'tn'];
 function Checkbox(_a) {
-    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, props = __rest(_a, ["disabled", "id", "size", "label", "onChange"]);
-    var _e = sizeConfig$9[validUnion(size, sizeUnion$3)], checkClass = _e.checkClass, labelClass = _e.labelClass;
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, _e = _a.isIndeterminate, isIndeterminate = _e === void 0 ? false : _e, props = __rest(_a, ["disabled", "id", "size", "label", "onChange", "isIndeterminate"]);
+    var _f = sizeConfig$9[validUnion(size, sizeUnion$3)], checkClass = _f.checkClass, labelClass = _f.labelClass;
+    var isValidIndeterminate = isIndeterminate && props.checked && !disabled;
+    var backgroundClass = size === 'tn' && props.checked ? 'bg-bia-blue' : 'bg-bia-white';
+    var peerCheckedClass = size === 'tn' ? '' : 'peer-checked:border-2';
     return (React.createElement("div", { className: "flex items-center" },
-        React.createElement("div", { className: "relative flex flex-shrink-0 items-center justify-center rounded-full bg-white ".concat(checkClass) },
+        React.createElement("div", { className: "relative flex flex-shrink-0 items-center justify-center rounded-full ".concat(backgroundClass, " ").concat(checkClass) },
             React.createElement("input", __assign({ id: id, type: "checkbox", className: "checkbox peer absolute box-content h-full w-full cursor-pointer appearance-none rounded-full border-2 border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-bia-blue focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:border-bia-coolgrey-light-50 disabled:checked:border-bia-blue-light-50", onChange: function (e) { return onChange(e); }, disabled: disabled }, props)),
-            React.createElement("div", { className: "check-icon z-1 group flex h-full w-full justify-center rounded-full text-bia-grey outline-2 outline-bia-blue peer-checked:border-2 peer-checked:border-primary-white peer-checked:bg-bia-blue peer-checked:hover:border-bia-blue-hover peer-checked:hover:outline-bia-blue-hover peer-checked:peer-hover:bg-bia-blue-hover peer-disabled:bg-bia-grey-light-80 peer-disabled:peer-checked:bg-bia-blue-light-50 peer-disabled:peer-checked:outline-bia-blue-light-50" },
-                React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: " fill-bia-grey-dark-10 peer-checked:group-[]:fill-primary-white peer-hover:group-[]:fill-bia-blue-hover peer-checked:peer-hover:group-[]:fill-primary-white peer-disabled:group-[]:fill-bia-grey-dark-10 peer-disabled:peer-checked:group-[]:fill-primary-white", viewBox: "-5 -7 24 24", width: "24" },
-                    React.createElement("path", { d: "M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z" })))),
+            React.createElement("div", { className: "check-icon z-1 group flex h-full w-full items-center justify-center rounded-full text-bia-grey outline-2 outline-bia-blue peer-checked:border-primary-white peer-checked:bg-bia-blue peer-checked:hover:border-bia-blue-hover peer-checked:hover:outline-bia-blue-hover peer-checked:peer-hover:bg-bia-blue-hover peer-disabled:bg-bia-grey-light-80 peer-disabled:peer-checked:bg-bia-blue-light-50 peer-disabled:peer-checked:outline-bia-blue-light-50 ".concat(peerCheckedClass) }, isValidIndeterminate ? (React.createElement(TbMinus, { className: "stroke-[3px] text-bia-grey-dark-10 peer-checked:group-[]:text-bia-white peer-hover:group-[]:text-bia-blue-hover peer-checked:peer-hover:group-[]:text-bia-white peer-disabled:group-[]:text-bia-grey-dark-10 peer-disabled:peer-checked:group-[]:text-bia-white", size: 14 })) : (React.createElement(TbCheck, { className: "stroke-[3px] text-bia-grey-dark-10 peer-checked:group-[]:text-bia-white peer-hover:group-[]:text-bia-blue-hover peer-checked:peer-hover:group-[]:text-bia-white peer-disabled:group-[]:text-bia-grey-dark-10 peer-disabled:peer-checked:group-[]:text-bia-white", size: 14 })))),
         React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 text-primary-black ".concat(labelClass), style: { color: disabled ? '#8C8CA6' : '' } }, childrenElement(label))));
 }
 Checkbox.defaultProps = {
@@ -5942,7 +2697,7 @@ var sizeConfig$6 = {
     },
 };
 
-var containerSizeConfig = {
+var containerSizeConfig$1 = {
     sm: 'min-w-[72px]',
     md: 'min-w-[96px]',
 };
@@ -5958,7 +2713,7 @@ var fontConfig = {
 var DropdownElement = React.forwardRef(function (_a, ref) {
     var isTopFlat = _a.isTopFlat, children = _a.children, className = _a.className, size = _a.size, zIndex = _a.zIndex, style = _a.style, onClose = _a.onClose, onClickItem = _a.onClickItem, restProps = __rest(_a, ["isTopFlat", "children", "className", "size", "zIndex", "style", "onClose", "onClickItem"]);
     var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
-    var sizeClass = containerSizeConfig[size] || containerSizeConfig['md'];
+    var sizeClass = containerSizeConfig$1[size] || containerSizeConfig$1['md'];
     var containerClass = "".concat(sizeClass, " ").concat(radiusClass, " ").concat(className);
     var handleClickDrpdownItem = function (e, val) {
         onClickItem(e, val);
@@ -5977,8 +2732,6 @@ var DropdownElement = React.forwardRef(function (_a, ref) {
 });
 var DropdownContainer = function (propsComp) {
     var _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.size, size = _f === void 0 ? 'md' : _f, _g = propsComp.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, _h = propsComp.zIndex, zIndex = _h === void 0 ? 100 : _h, anchorRef = propsComp.anchorRef, matchAnchorWidth = propsComp.matchAnchorWidth, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex", "anchorRef", "matchAnchorWidth"]);
-    if (!open)
-        return null;
     var dropdownRef = React.useRef(null);
     var positionStyle = usePopupPosition(anchorRef, dropdownRef)[0];
     var newStyle = React.useMemo(function () {
@@ -6005,9 +2758,10 @@ var DropdownContainer = function (propsComp) {
         }
         return __assign(__assign({ zIndex: zIndex + 10 }, widthStyle), positionStyle);
     }, [positionStyle]);
-    var dropdownElement = (React.createElement(DropdownElement, __assign({ ref: dropdownRef, isTopFlat: isTopFlat, children: children, className: className, size: size, zIndex: zIndex, onClose: onClose, onClickItem: onClickItem, style: newStyle }, restProps)));
+    var displayClass = open ? 'block' : 'hidden';
+    var dropdownElement = (React.createElement(DropdownElement, __assign({ ref: dropdownRef, isTopFlat: isTopFlat, children: children, className: "".concat(className, " ").concat(displayClass), size: size, zIndex: zIndex, onClose: onClose, onClickItem: onClickItem, style: newStyle }, restProps)));
     return (React.createElement(React.Fragment, null,
-        isWithOverlay && (React.createElement("div", { className: "bianic-dropdown-overlay fixed left-0 top-0 h-screen w-screen", style: { zIndex: zIndex }, onClick: function () { return onClose(); } })),
+        isWithOverlay && (React.createElement("div", { className: "bianic-dropdown-overlay fixed left-0 top-0 h-screen w-screen ".concat(displayClass), style: { zIndex: zIndex }, onClick: function () { return onClose(); } })),
         (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
             ? reactDom.createPortal(dropdownElement, document.body)
             : dropdownElement));
@@ -6019,7 +2773,7 @@ DropdownContainer.defaultProps = {
 var DropdownContNoAnchor = React.forwardRef(function DropdownContNoAnchor(propsComp, ref) {
     var _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.size, size = _f === void 0 ? 'md' : _f, _g = propsComp.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, _h = propsComp.zIndex, zIndex = _h === void 0 ? 100 : _h, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex"]);
     var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
-    var sizeClass = containerSizeConfig[size] || containerSizeConfig['md'];
+    var sizeClass = containerSizeConfig$1[size] || containerSizeConfig$1['md'];
     var containerClass = "".concat(sizeClass, " ").concat(radiusClass, " ").concat(className);
     var handleClickDrpdownItem = function (e, val) {
         onClickItem(e, val);
@@ -7762,6 +4516,454 @@ ResizeableDiv.defaultProps = {
     position: 'left',
 };
 
+var containerSizeConfig = {
+    minimized: 'w-[60px] min-w-[60px]',
+    maximized: 'w-[285px] min-w-[285px]',
+};
+var itemConfig = {
+    minimized: 'px-[11px]',
+    maximized: 'pl-[30px] pr-[15px]',
+};
+var profileConfig = {
+    minimized: 'px-[5px]',
+    maximized: 'pl-[20px] pr-[15px]',
+};
+var overlaySizeConfig = {
+    minimized: 'w-[38px]',
+    maximized: 'w-full',
+};
+var buttonConfig = {
+    0: '',
+    1: 'pl-[30px]',
+    2: 'pl-[68px]',
+};
+
+var SidebarContainer = React.forwardRef(function (_a, ref) {
+    var _b = _a.color, color = _b === void 0 ? 'margueriteblue-dark-30' : _b, children = _a.children, _c = _a.isMinimized, isMinimized = _c === void 0 ? false : _c, _d = _a.activeId, activeId = _d === void 0 ? undefined : _d, _e = _a.setActiveId, setActiveId = _e === void 0 ? function () { } : _e, _f = _a.className, className = _f === void 0 ? '' : _f, restProps = __rest(_a, ["color", "children", "isMinimized", "activeId", "setActiveId", "className"]);
+    var minimizedState = isMinimized ? 'minimized' : 'maximized';
+    var containerClass = cn("bg-bia-".concat(color), containerSizeConfig[minimizedState]);
+    return (React.createElement("div", __assign({ ref: ref, className: cn('sidebar-container flex h-full flex-col justify-start py-[30px] overflow-hidden transition-[width,min-width] delay-200 ease-[cubic-bezier(0.68,-0.1,0.32,1.2)] duration-500', containerClass, className) }, restProps), React.Children.map(children, function (child) {
+        return React.isValidElement(child)
+            ? React.cloneElement(child, {
+                isMinimized: isMinimized,
+                activeId: activeId,
+                setActiveId: setActiveId,
+                color: color,
+            })
+            : child;
+    })));
+});
+SidebarContainer.displayName = 'SidebarContainer';
+
+var SidebarMenu = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? 'margueriteblue-dark-30' : _b, children = _a.children, _c = _a.isMinimized, isMinimized = _c === void 0 ? false : _c, _d = _a.activeId, activeId = _d === void 0 ? undefined : _d, _e = _a.setActiveId, setActiveId = _e === void 0 ? function () { } : _e;
+    var _f = React.useState(false), isAllExpanded = _f[0], setIsAllExpanded = _f[1];
+    var menuClass = "transition-sidebar-menu-menu h-[60px]";
+    var minimizedMenuClass = isMinimized
+        ? 'opacity-100 h-1 w-full delay-[600ms] duration-300 ease-[cubic-bezier(0.68,-0.1,0.32,2)]'
+        : 'opacity-0 w-0 duration-200';
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "relative flex w-full text-bia-white ".concat(menuClass) },
+            React.createElement("div", { className: "absolute left-0 top-[27.5px] px-[17px] ".concat(minimizedMenuClass) },
+                React.createElement("div", { className: "h-[1px] w-full bg-white" })),
+            React.createElement("div", { className: "absolute bottom-[11px] flex w-full justify-between pl-[78px] pr-[25px]" },
+                React.createElement(Text, { variant: "small-text", className: cn('truncate text-bia-white delay-[400ms]', isMinimized
+                        ? 'opacity-0 duration-300 ease-in-out'
+                        : 'opacity-75 delay-1000 duration-700 ease-in-out') }, "Menu"),
+                React.createElement(ContextualButton, { onClick: function () { return setIsAllExpanded(function (prev) { return !prev; }); }, icon: React.createElement(TbChevronsDown, { className: cn('truncate text-bia-white delay-[400ms]', isMinimized
+                            ? 'opacity-0 duration-300 ease-in-out'
+                            : 'opacity-100 delay-1000 duration-700 ease-in-out'), size: 18 }), className: "ml-auto opacity-50 hover:opacity-100 ".concat(isAllExpanded ? 'rotate-180' : '') }))),
+        React.Children.map(children, function (child) {
+            return React.isValidElement(child)
+                ? React.cloneElement(child, {
+                    isMinimized: isMinimized,
+                    activeId: activeId,
+                    setActiveId: setActiveId,
+                    color: color,
+                    isExpand: isAllExpanded,
+                })
+                : child;
+        })));
+};
+
+var colorConfig = {
+    default: 'bg-bia-grey-light-50 text-primary-black',
+    blue: 'bg-bia-blue text-primary-white',
+    teal: 'bg-bia-teal text-primary-white',
+    green: 'bg-bia-green text-primary-white',
+    // yellow: 'bg-bia-yellow text-primary-black',
+    orange: 'bg-bia-orange text-primary-white',
+    red: 'bg-bia-red text-primary-white',
+    black: 'bg-primary-black text-primary-white',
+    white: 'bg-primary-white text-primary-black border border-primary-black',
+};
+var sizeConfig$1 = {
+    md: 'px-[10px] py-[7px] h-[34px] text-size-base',
+    sm: 'px-[10px] py-[4px] h-[22px] text-size-sm',
+    tn: 'px-[8px] py-[2px] h-[18px] text-size-sm',
+};
+var iconOnlySizeConfig = {
+    md: 'p-[7px]',
+    sm: 'p-[4px]',
+    tn: 'p-[2px]',
+};
+var closeColorConfig = {
+    default: 'bg-bia-grey-dark-30 text-primary-white',
+    blue: 'bg-bia-white-transparent-50 text-bia-blue',
+    teal: 'bg-bia-white-transparent-50 text-bia-teal',
+    green: 'bg-bia-white-transparent-50 text-bia-green',
+    yellow: 'bg-bia-white-transparent-50 text-bia-yellow',
+    red: 'bg-bia-white-transparent-50 text-bia-red',
+    black: 'bg-bia-white-transparent-50 text-primary-black',
+    white: 'bg-bia-grey-dark-30 text-primary-white',
+};
+var closeSizeConfig = {
+    md: 'w-[18px] h-[18px] text-[14px]',
+    sm: 'w-[12px] h-[12px] text-[9.33px]',
+    tn: 'w-[12px] h-[12px] text-[9.33px]',
+};
+var rightPaddingConfig = {
+    md: 'pr-[8px]',
+    sm: 'pr-[5px]',
+    tn: 'pr-[3px]',
+};
+
+var colorUnion = [
+    'default',
+    'blue',
+    'teal',
+    'green',
+    'orange',
+    'red',
+    'black',
+    'white',
+    'custom',
+];
+var sizeUnion = ['md', 'sm', 'tn'];
+var variantUnion = ['label', 'icon', 'closeable', 'monospace'];
+var TagLabel = function (_a) {
+    var color = _a.color, _b = _a.size, size = _b === void 0 ? 'md' : _b, variant = _a.variant, closeHandler = _a.closeHandler, open = _a.open, text = _a.text, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon; _a.left; _a.right; var _c = _a.bgColor, bgColor = _c === void 0 ? 'grey-light-50' : _c, _d = _a.textColor, textColor = _d === void 0 ? 'black' : _d, outlineColor = _a.outlineColor, isBlock = _a.isBlock, maxWidth = _a.maxWidth, isDark = _a.isDark; _a.style; var props = __rest(_a, ["color", "size", "variant", "closeHandler", "open", "text", "leftIcon", "rightIcon", "left", "right", "bgColor", "textColor", "outlineColor", "isBlock", "maxWidth", "isDark", "style"]);
+    var validatedColor = validUnion(color, colorUnion);
+    var validatedSize = validUnion(size, sizeUnion);
+    var validatedVariant = validUnion(variant, variantUnion);
+    var containerRef = React.useRef(null);
+    var _e = React.useState(null), sizeCount = _e[0], setSizeCount = _e[1];
+    React.useEffect(function () {
+        if (variant === 'icon') {
+            // Get the size of the icon
+            // and set the size of the container
+            // to the one with the biggest size (width or height icon)
+            // in order to make the container square
+            var rect = containerRef.current.getBoundingClientRect();
+            var width = rect.width;
+            var height = rect.height;
+            if (width > height)
+                setSizeCount(width);
+            else
+                setSizeCount(height);
+        }
+    }, []);
+    var isCloseable = validatedVariant === 'closeable';
+    var defaultIconSize = validatedSize === 'md' ? 'text-xl' : 'text-sm';
+    var borderColorRules = outlineColor || bgColor;
+    var roundedClass = validatedVariant === 'icon' ? 'rounded-full' : 'rounded-[50px]';
+    var sizeClass = validatedVariant === 'icon'
+        ? iconOnlySizeConfig[validatedSize]
+        : sizeConfig$1[validatedSize];
+    var isCloseableClass = isCloseable && rightPaddingConfig[validatedSize];
+    var colorClass = validatedColor === 'custom'
+        ? "bg-bia-".concat(bgColor, " text-bia-").concat(textColor, " border border-bia-").concat(borderColorRules)
+        : colorConfig[validatedColor];
+    var blockclass = isBlock && validatedVariant !== 'icon' ? 'w-full' : "w-fit";
+    var maxWidthStyle = !isBlock ? maxWidth + 'px' : '';
+    var alignTextClass = isBlock ? 'text-center' : 'text-left';
+    var fontClass = validatedVariant === 'monospace' ? 'font-sans-code' : 'font-segoe pb-[1px]';
+    var textClass = "".concat(alignTextClass, " ").concat(fontClass);
+    var containerClass = "".concat(sizeClass, " ").concat(colorClass, " ").concat(roundedClass, " ").concat(isCloseableClass, " ").concat(blockclass);
+    var closeColor = validatedColor === 'custom'
+        ? isDark
+            ? "bg-bia-white-transparent-50 text-bia-".concat(bgColor)
+            : "bg-bia-grey-dark-30 text-bia-".concat(bgColor)
+        : closeColorConfig[validatedColor];
+    var closeClass = "".concat(closeColor, " ").concat(closeSizeConfig[validatedSize]);
+    var isOpen = isCloseable ? open : true;
+    return (isOpen && (React.createElement("div", __assign({ className: "tag-label flex items-center gap-x-[5px] text-size-base ".concat(containerClass), style: {
+            maxWidth: maxWidthStyle,
+        } }, props),
+        leftIcon && (React.createElement("div", { style: {
+                width: sizeCount + 'px',
+                height: sizeCount + 'px',
+            }, className: "flex items-center justify-center", ref: containerRef }, leftIcon ||
+            (validatedVariant === 'icon' && (React.createElement(TbCheck, { className: defaultIconSize }))))),
+        validatedVariant !== 'icon' && text && (React.createElement("span", { className: "w-full truncate ".concat(textClass) }, text)),
+        validatedVariant === 'label' && rightIcon && (React.createElement("div", { className: "block" },
+            " ",
+            rightIcon,
+            " ")),
+        isCloseable && (React.createElement("button", { type: "button", onClick: closeHandler, className: "flex aspect-square items-center justify-center rounded-full pt-[1px] ".concat(closeClass) },
+            React.createElement(TbX, null))))));
+};
+TagLabel.defaultProps = {
+    variant: 'default',
+    size: 'sm',
+    open: true,
+    closeHandler: function () { },
+    leftIcon: null,
+    rightIcon: null,
+    left: null,
+    right: null,
+    bgColor: 'grey-light-50',
+    textColor: 'black',
+    isBlock: false,
+    maxWidth: 300,
+    isDark: false,
+};
+
+var SidebarItem = React.forwardRef(function (_a, ref) {
+    var id = _a.id, title = _a.title, icon = _a.icon; _a.active; var onClick = _a.onClick, children = _a.children, _c = _a.isMinimized, isMinimized = _c === void 0 ? false : _c, _d = _a.isExpand, isExpand = _d === void 0 ? false : _d, notificationCount = _a.notificationCount, _e = _a.level, level = _e === void 0 ? 0 : _e, _f = _a.activeId, activeId = _f === void 0 ? null : _f, _g = _a.setActiveId, setActiveId = _g === void 0 ? function () { } : _g, _h = _a.className, className = _h === void 0 ? '' : _h, _j = _a.color, color = _j === void 0 ? 'blue' : _j, restProps = __rest(_a, ["id", "title", "icon", "active", "onClick", "children", "isMinimized", "isExpand", "notificationCount", "level", "activeId", "setActiveId", "className", "color"]);
+    var childDropdownRef = React.useRef(null);
+    var _k = React.useState(isExpand), isChildExpanded = _k[0], setIsChildExpanded = _k[1];
+    var childrenArray = React.Children.toArray(children);
+    var hasChildren = childrenArray.length > 0;
+    var nextLevel = Math.min(level + 1, 2);
+    var isActive = activeId === id;
+    var containerState = isMinimized ? 'minimized' : 'maximized';
+    React.useEffect(function () {
+        setIsChildExpanded(isExpand);
+    }, [isExpand]);
+    var isSidebarItemElement = function (node) {
+        return React.isValidElement(node) && typeof node.props === 'object';
+    };
+    var collectChildIds = function (nodes) {
+        return React.Children.toArray(nodes).reduce(function (result, node) {
+            if (!isSidebarItemElement(node))
+                return result;
+            if (node.props.id)
+                result.push(String(node.props.id));
+            if (node.props.children)
+                result.push.apply(result, collectChildIds(node.props.children));
+            return result;
+        }, []);
+    };
+    var sumNotificationCounts = function (nodes) {
+        return React.Children.toArray(nodes).reduce(function (sum, node) {
+            var _a;
+            if (!isSidebarItemElement(node))
+                return sum;
+            var childSum = sumNotificationCounts(node.props.children);
+            return sum + ((_a = node.props.notificationCount) !== null && _a !== void 0 ? _a : 0) + childSum;
+        }, 0);
+    };
+    var nestedIds = collectChildIds(children);
+    var isPathActive = nestedIds.some(function (nestedId) { return nestedId === activeId; });
+    var notificationLabel = notificationCount !== undefined
+        ? String(notificationCount)
+        : String(sumNotificationCounts(children));
+    var buttonIcon = React.isValidElement(icon)
+        ? React.cloneElement(icon, {
+            className: 'text-bia-white',
+            size: '18',
+        })
+        : icon;
+    var buttonClass = buttonConfig[level];
+    var chevronClass = hasChildren ? 'inline-block' : 'hidden';
+    var itemClass = cn(itemConfig[containerState], isActive || isPathActive ? 'opacity-100' : 'opacity-75 hover:opacity-100', 'transition-sidebar-item');
+    var overlayClass = cn(overlaySizeConfig[containerState], isActive ? 'opacity-15' : 'opacity-0 group-hover:opacity-[0.08]');
+    var colorClass = "bg-bia-".concat(color);
+    var renderChildren = function () {
+        return React.Children.map(children, function (child) {
+            return isSidebarItemElement(child)
+                ? React.cloneElement(child, {
+                    level: nextLevel,
+                    activeId: activeId,
+                    setActiveId: setActiveId,
+                    isExpand: isExpand,
+                })
+                : child;
+        });
+    };
+    var renderDropdownItems = function () {
+        return childrenArray.filter(isSidebarItemElement).map(function (child) {
+            var _a, _b, _c;
+            var grandChildren = React.Children.toArray(child.props.children).filter(isSidebarItemElement);
+            var childNotificationCount = grandChildren.length > 0
+                ? sumNotificationCounts(child.props.children)
+                : ((_a = child.props.notificationCount) !== null && _a !== void 0 ? _a : 0);
+            return (React.createElement(DropdownItem, { key: (_b = child.props.id) !== null && _b !== void 0 ? _b : String((_c = child.key) !== null && _c !== void 0 ? _c : ''), content: React.createElement("div", { className: "relative" },
+                    child.props.title,
+                    isMinimized && childNotificationCount > 0 && (React.createElement("div", { className: "absolute -right-[8px] top-[2px] h-[6px] w-[6px] rounded-radius-full ".concat(colorClass) }))) }, grandChildren.length > 0 &&
+                grandChildren.map(function (grandChild) {
+                    var _a, _b;
+                    return (React.createElement(DropdownItem, { key: (_a = grandChild.props.id) !== null && _a !== void 0 ? _a : String((_b = grandChild.key) !== null && _b !== void 0 ? _b : ''), content: React.createElement("div", { className: "flex justify-between gap-x-[11px]" },
+                            grandChild.props.title,
+                            grandChild.props.notificationCount ? (React.createElement(TagLabel, { text: String(grandChild.props.notificationCount), color: "custom", bgColor: color, textColor: "white", size: "tn" })) : null) }));
+                })));
+        });
+    };
+    return (React.createElement("div", { className: "relative" },
+        React.createElement("div", { className: "absolute left-[33px] top-[3px] flex h-5 w-5 items-center justify-center" },
+            React.createElement("div", { className: cn('rounded-radius-full bg-white', isMinimized && notificationCount === undefined
+                    ? sumNotificationCounts(children) > 0
+                        ? 'h-[6px] w-[6px] delay-[600ms] duration-300 ease-[cubic-bezier(0.68,-0.1,0.32,2)]'
+                        : 'h-0 w-0 duration-500 ease-[cubic-bezier(0.32,-1,0.68,1)]'
+                    : 'h-0 w-0 duration-500 ease-[cubic-bezier(0.32,-1,0.68,1)]') })),
+        React.createElement("div", { className: cn('sidebar-item relative flex h-fit items-center', itemClass) },
+            level === 2 && (React.createElement("div", { className: "relative left-[39px] h-full w-[1px] bg-bia-white" })),
+            React.createElement("div", { className: "group relative grow" },
+                React.createElement("button", __assign({ ref: ref }, restProps, { onClick: function () {
+                        if (hasChildren) {
+                            setIsChildExpanded(function (prev) { return !prev; });
+                        }
+                        else {
+                            onClick === null || onClick === void 0 ? void 0 : onClick();
+                            setActiveId(id);
+                        }
+                    }, className: cn('flex w-full items-center gap-x-5 p-2.5', buttonClass, className) }),
+                    level === 2 && (React.createElement("div", { className: "absolute left-[38px] h-full w-[1px] bg-bia-white" })),
+                    buttonIcon,
+                    React.createElement(Text, { variant: "normal-text", className: cn('truncate text-bia-white delay-[400ms]', isMinimized
+                            ? 'opacity-0 duration-300 ease-in-out'
+                            : 'opacity-100 delay-1000 duration-700 ease-in-out') }, title),
+                    React.createElement("div", { className: cn('ml-auto flex items-center gap-x-[5px]', isMinimized
+                            ? 'opacity-0 delay-200 duration-300 ease-in-out'
+                            : 'opacity-100 delay-[550ms] duration-500 ease-in-out') },
+                        (notificationCount !== undefined ||
+                            (!isChildExpanded &&
+                                sumNotificationCounts(children) > 0)) && (React.createElement(TagLabel, { text: notificationLabel, color: "white", size: "tn" })),
+                        React.createElement("div", { className: cn(chevronClass) },
+                            React.createElement(TbChevronRight, { className: cn('text-bia-white transition-transform duration-300 ease-in-out', isChildExpanded ? 'rotate-90' : ''), size: 18 })))),
+                React.createElement("div", { className: cn('pointer-events-none absolute inset-0 rounded-radius-lg bg-black transition-opacity duration-200', overlayClass) })),
+            isActive && (React.createElement("div", { className: "absolute right-0 ml-auto h-full w-1 rounded-l-radius-md bg-bia-white" }))),
+        !isMinimized && hasChildren && isChildExpanded && renderChildren(),
+        React.createElement("div", { className: "dropdown-anchor absolute left-[60px] top-0", ref: childDropdownRef }),
+        isMinimized && hasChildren && (React.createElement(DropdownContainer, { open: isChildExpanded, onClose: function () { return setIsChildExpanded(false); }, anchorRef: childDropdownRef }, renderDropdownItems()))));
+});
+SidebarItem.displayName = 'SidebarItem';
+
+var SidebarProfile = React.forwardRef(function (_a, ref) {
+    var id = _a.id, username = _a.username, role = _a.role, avatarImg = _a.avatarImg; _a.active; var onClick = _a.onClick, children = _a.children, _c = _a.isMinimized, isMinimized = _c === void 0 ? false : _c, _d = _a.isExpand, isExpand = _d === void 0 ? false : _d, notificationCount = _a.notificationCount, _e = _a.activeId, activeId = _e === void 0 ? null : _e, _f = _a.setActiveId, setActiveId = _f === void 0 ? function () { } : _f, _g = _a.className, className = _g === void 0 ? '' : _g, _h = _a.color, color = _h === void 0 ? 'blue' : _h, restProps = __rest(_a, ["id", "username", "role", "avatarImg", "active", "onClick", "children", "isMinimized", "isExpand", "notificationCount", "activeId", "setActiveId", "className", "color"]);
+    var childDropdownRef = React.useRef(null);
+    var _j = React.useState(isExpand), isChildExpanded = _j[0], setIsChildExpanded = _j[1];
+    var childrenArray = React.Children.toArray(children);
+    var hasChildren = childrenArray.length > 0;
+    var isActive = activeId === id;
+    var containerState = isMinimized ? 'minimized' : 'maximized';
+    var isSidebarProfileElement = function (node) {
+        return React.isValidElement(node) && typeof node.props === 'object';
+    };
+    var collectChildIds = function (nodes) {
+        return React.Children.toArray(nodes).reduce(function (result, node) {
+            if (!isSidebarProfileElement(node))
+                return result;
+            if (node.props.id)
+                result.push(String(node.props.id));
+            if (node.props.children)
+                result.push.apply(result, collectChildIds(node.props.children));
+            return result;
+        }, []);
+    };
+    var sumNotificationCounts = function (nodes) {
+        return React.Children.toArray(nodes).reduce(function (sum, node) {
+            var _a;
+            if (!isSidebarProfileElement(node))
+                return sum;
+            var childSum = sumNotificationCounts(node.props.children);
+            return sum + ((_a = node.props.notificationCount) !== null && _a !== void 0 ? _a : 0) + childSum;
+        }, 0);
+    };
+    var nestedIds = collectChildIds(children);
+    var isPathActive = nestedIds.some(function (nestedId) { return nestedId === activeId; });
+    var notificationLabel = notificationCount !== undefined
+        ? String(notificationCount)
+        : String(sumNotificationCounts(children));
+    var avatarImage = React.isValidElement(avatarImg)
+        ? React.cloneElement(avatarImg, {
+            className: 'text-bia-white',
+            size: 36,
+        })
+        : avatarImg;
+    var profileSizeConfig = {
+        maximized: 'p-2.5',
+        minimized: 'px-[6px] py-2.5',
+    };
+    var buttonClass = "".concat(buttonConfig[0], " ").concat(profileSizeConfig[containerState]);
+    var chevronClass = hasChildren ? 'inline-block' : 'hidden';
+    var profileClass = cn(profileConfig[containerState], 'transition-sidebar-item');
+    var overlayClass = cn(overlaySizeConfig[containerState], isActive ? 'opacity-15' : 'opacity-0 group-hover:opacity-[0.08]');
+    var colorClass = "bg-bia-".concat(color);
+    var renderChildren = function () {
+        return React.Children.map(children, function (child) {
+            return isSidebarProfileElement(child)
+                ? React.cloneElement(child, {
+                    activeId: activeId,
+                    setActiveId: setActiveId,
+                })
+                : child;
+        });
+    };
+    var renderDropdownItems = function () {
+        return childrenArray.filter(isSidebarProfileElement).map(function (child) {
+            var _a, _b, _c;
+            var grandChildren = React.Children.toArray(child.props.children).filter(isSidebarProfileElement);
+            var childNotificationCount = grandChildren.length > 0
+                ? sumNotificationCounts(child.props.children)
+                : ((_a = child.props.notificationCount) !== null && _a !== void 0 ? _a : 0);
+            return (React.createElement(DropdownItem, { key: (_b = child.props.id) !== null && _b !== void 0 ? _b : String((_c = child.key) !== null && _c !== void 0 ? _c : ''), content: React.createElement("div", { className: "relative" },
+                    child.props.title,
+                    isMinimized && childNotificationCount > 0 && (React.createElement("div", { className: "absolute -right-[8px] top-[2px] h-[6px] w-[6px] rounded-radius-full ".concat(colorClass) }))) }, grandChildren.map(function (grandChild) {
+                var _a, _b;
+                return (React.createElement(DropdownItem, { key: (_a = grandChild.props.id) !== null && _a !== void 0 ? _a : String((_b = grandChild.key) !== null && _b !== void 0 ? _b : ''), content: React.createElement("div", { className: "flex justify-between gap-x-[11px]" },
+                        grandChild.props.title,
+                        grandChild.props.notificationCount ? (React.createElement(TagLabel, { text: String(grandChild.props.notificationCount), color: "custom", bgColor: color, textColor: "white", size: "tn" })) : null) }));
+            })));
+        });
+    };
+    return (React.createElement("div", { className: "relative" },
+        React.createElement("div", { className: "absolute left-[33px] top-[3px] flex h-5 w-5 items-center justify-center" },
+            React.createElement("div", { className: cn('rounded-radius-full bg-white', isMinimized && notificationCount === undefined
+                    ? sumNotificationCounts(children) > 0
+                        ? 'h-[6px] w-[6px] delay-[600ms] duration-300 ease-[cubic-bezier(0.68,-0.1,0.32,2)]'
+                        : 'h-0 w-0 duration-500 ease-[cubic-bezier(0.32,-1,0.68,1)]'
+                    : 'h-0 w-0 duration-500 ease-[cubic-bezier(0.32,-1,0.68,1)]') })),
+        React.createElement("div", { className: cn('sidebar-item relative flex h-fit items-center group/profile', profileClass) },
+            React.createElement("div", { className: "group relative grow" },
+                React.createElement("button", __assign({ ref: ref }, restProps, { onClick: function () {
+                        if (hasChildren) {
+                            setIsChildExpanded(function (prev) { return !prev; });
+                        }
+                        else {
+                            onClick === null || onClick === void 0 ? void 0 : onClick();
+                            setActiveId(id);
+                        }
+                    }, className: cn('cubic-bezier(0.68, -0.1, 0.32, 1.2)  flex w-full items-center gap-x-2.5 delay-500 duration-300', buttonClass, className) }),
+                    avatarImage,
+                    React.createElement("div", { className: "flex flex-col" },
+                        React.createElement(Text, { variant: "normal-text", className: cn('truncate text-bia-white delay-[400ms]', isMinimized
+                                ? 'opacity-0 duration-300 ease-in-out'
+                                : 'opacity-100 delay-1000 duration-700 ease-in-out') }, username),
+                        React.createElement(Text, { variant: "small-text", className: cn('truncate text-left text-bia-white delay-[400ms]', isMinimized
+                                ? 'opacity-0 duration-300 ease-in-out'
+                                : 'opacity-50 delay-1000 duration-700 ease-in-out') }, role)),
+                    React.createElement("div", { className: cn('ml-auto flex items-center gap-x-[5px]', isMinimized
+                            ? 'opacity-0 delay-200 duration-300 ease-in-out'
+                            : 'opacity-100 delay-[550ms] duration-500 ease-in-out') },
+                        (notificationCount !== undefined ||
+                            (!isChildExpanded &&
+                                sumNotificationCounts(children) > 0)) && (React.createElement(TagLabel, { text: notificationLabel, className: isActive || isPathActive
+                                ? 'opacity-100'
+                                : 'opacity-75 group-hover/profile:opacity-100', color: "white", size: "tn" })),
+                        React.createElement("div", { className: cn(chevronClass) },
+                            React.createElement(TbChevronRight, { className: cn('text-bia-white transition-transform duration-300 ease-in-out', isChildExpanded ? 'rotate-90' : '', isActive || isPathActive
+                                    ? 'opacity-100'
+                                    : 'opacity-75 group-hover/profile:opacity-100'), size: 18 })))),
+                React.createElement("div", { className: cn('pointer-events-none absolute inset-0 rounded-radius-lg bg-black transition-opacity duration-200', overlayClass) })),
+            isActive && (React.createElement("div", { className: "absolute right-0 ml-auto h-full w-1 rounded-l-radius-md bg-bia-white" }))),
+        !isMinimized && hasChildren && isChildExpanded && renderChildren(),
+        React.createElement("div", { className: "dropdown-anchor absolute left-[60px] top-0", ref: childDropdownRef }),
+        isMinimized && hasChildren && (React.createElement(DropdownContainer, { open: isChildExpanded, onClose: function () { return setIsChildExpanded(false); }, anchorRef: childDropdownRef }, renderDropdownItems()))));
+});
+SidebarProfile.displayName = 'SidebarProfile';
+
 function Slider(_a) {
     var disabled = _a.disabled;
     var _b = React.useState(50), sliderValue = _b[0], setsliderValue = _b[1];
@@ -7908,7 +5110,17 @@ var TabMenu = React.forwardRef(function (props, ref) {
 });
 TabMenu.displayName = 'TabMenu';
 
-var sizeConfig$1 = {
+var Table = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return React.createElement("table", __assign({}, rest), children);
+};
+
+var TableBody = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return React.createElement("tbody", __assign({}, rest), children);
+};
+
+var sizeConfig = {
     md: 'px-2.5 py-[9px]',
     sm: 'px-2.5 py-[7px]',
     tn: 'px-2.5 py-[3px]',
@@ -7930,7 +5142,7 @@ function TableCell(_a) {
     var bgColorClass = "bg-bia-".concat(bgColor);
     var isHead = variant === 'head';
     var textConfig = isHead ? headTextConfig[size] : bodyTextConfig[size];
-    var columnClass = "p-0 ".concat(sizeConfig$1[size], " ").concat(bottomLined, " ").concat(bgColorClass, " ").concat(textConfig, " ").concat(className);
+    var columnClass = "p-0 ".concat(sizeConfig[size], " ").concat(bottomLined, " ").concat(bgColorClass, " ").concat(textConfig, " ").concat(className);
     if (variant === 'head') {
         return (React.createElement("th", __assign({ className: "bianic-table-cell table-head bg-bia-grey-light-80 ".concat(columnClass) }, props), children));
     }
@@ -7942,135 +5154,85 @@ TableCell.defaultProps = {
     variant: 'body',
 };
 
-var colorConfig = {
-    default: 'bg-bia-grey-light-50 text-primary-black',
-    blue: 'bg-bia-blue text-primary-white',
-    teal: 'bg-bia-teal text-primary-white',
-    green: 'bg-bia-green text-primary-white',
-    // yellow: 'bg-bia-yellow text-primary-black',
-    orange: 'bg-bia-orange text-primary-white',
-    red: 'bg-bia-red text-primary-white',
-    black: 'bg-primary-black text-primary-white',
-    white: 'bg-primary-white text-primary-black border border-primary-black',
-};
-var sizeConfig = {
-    md: 'px-[10px] py-[7px] h-[34px] text-size-base',
-    sm: 'px-[10px] py-[4px] h-[22px] text-size-sm',
-    tn: 'px-[8px] py-[2px] h-[18px] text-size-sm',
-};
-var iconOnlySizeConfig = {
-    md: 'p-[7px]',
-    sm: 'p-[4px]',
-    tn: 'p-[2px]',
-};
-var closeColorConfig = {
-    default: 'bg-bia-grey-dark-30 text-primary-white',
-    blue: 'bg-bia-white-transparent-50 text-bia-blue',
-    teal: 'bg-bia-white-transparent-50 text-bia-teal',
-    green: 'bg-bia-white-transparent-50 text-bia-green',
-    yellow: 'bg-bia-white-transparent-50 text-bia-yellow',
-    red: 'bg-bia-white-transparent-50 text-bia-red',
-    black: 'bg-bia-white-transparent-50 text-primary-black',
-    white: 'bg-bia-grey-dark-30 text-primary-white',
-};
-var closeSizeConfig = {
-    md: 'w-[18px] h-[18px] text-[14px]',
-    sm: 'w-[12px] h-[12px] text-[9.33px]',
-    tn: 'w-[12px] h-[12px] text-[9.33px]',
+var TableHead = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return React.createElement("thead", __assign({}, rest), children);
 };
-var rightPaddingConfig = {
-    md: 'pr-[8px]',
-    sm: 'pr-[5px]',
-    tn: 'pr-[3px]',
+
+var TableRow = function (_a) {
+    _a.variant; var children = _a.children, rest = __rest(_a, ["variant", "children"]);
+    return React.createElement("tr", __assign({}, rest), children);
 };
 
-var colorUnion = [
-    'default',
-    'blue',
-    'teal',
-    'green',
-    'orange',
-    'red',
-    'black',
-    'white',
-    'custom',
-];
-var sizeUnion = ['md', 'sm', 'tn'];
-var variantUnion = ['label', 'icon', 'closeable'];
-var TagLabel = function (_a) {
-    var color = _a.color, _b = _a.size, size = _b === void 0 ? 'md' : _b, variant = _a.variant, closeHandler = _a.closeHandler, open = _a.open, text = _a.text, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon; _a.left; _a.right; var _c = _a.bgColor, bgColor = _c === void 0 ? 'grey-light-50' : _c, _d = _a.textColor, textColor = _d === void 0 ? 'black' : _d, outlineColor = _a.outlineColor, isBlock = _a.isBlock, maxWidth = _a.maxWidth, isDark = _a.isDark; _a.style; var props = __rest(_a, ["color", "size", "variant", "closeHandler", "open", "text", "leftIcon", "rightIcon", "left", "right", "bgColor", "textColor", "outlineColor", "isBlock", "maxWidth", "isDark", "style"]);
-    var validatedColor = validUnion(color, colorUnion);
-    var validatedSize = validUnion(size, sizeUnion);
-    var validatedVariant = validUnion(variant, variantUnion);
-    var containerRef = React.useRef(null);
-    var _e = React.useState(null), sizeCount = _e[0], setSizeCount = _e[1];
-    React.useEffect(function () {
-        if (variant === 'icon') {
-            // Get the size of the icon
-            // and set the size of the container
-            // to the one with the biggest size (width or height icon)
-            // in order to make the container square
-            var rect = containerRef.current.getBoundingClientRect();
-            var width = rect.width;
-            var height = rect.height;
-            if (width > height)
-                setSizeCount(width);
-            else
-                setSizeCount(height);
-        }
-    }, []);
-    var isCloseable = validatedVariant === 'closeable';
-    var defaultIconSize = validatedSize === 'md' ? 'text-xl' : 'text-sm';
-    var borderColorRules = outlineColor || bgColor;
-    var roundedClass = validatedVariant === 'icon' ? 'rounded-full' : 'rounded-[50px]';
-    var sizeClass = validatedVariant === 'icon'
-        ? iconOnlySizeConfig[validatedSize]
-        : sizeConfig[validatedSize];
-    var isCloseableClass = isCloseable && rightPaddingConfig[validatedSize];
-    var colorClass = validatedColor === 'custom'
-        ? "bg-bia-".concat(bgColor, " text-bia-").concat(textColor, " border border-bia-").concat(borderColorRules)
-        : colorConfig[validatedColor];
-    var blockclass = isBlock && validatedVariant !== 'icon' ? 'w-full' : "w-fit";
-    var maxWidthStyle = !isBlock ? maxWidth + 'px' : '';
-    var textClass = isBlock ? 'text-center' : 'text-left';
-    var containerClass = "".concat(sizeClass, " ").concat(colorClass, " ").concat(roundedClass, " ").concat(isCloseableClass, " ").concat(blockclass);
-    var closeColor = validatedColor === 'custom'
-        ? isDark
-            ? "bg-bia-white-transparent-50 text-bia-".concat(bgColor)
-            : "bg-bia-grey-dark-30 text-bia-".concat(bgColor)
-        : closeColorConfig[validatedColor];
-    var closeClass = "".concat(closeColor, " ").concat(closeSizeConfig[validatedSize]);
-    var isOpen = isCloseable ? open : true;
-    return (isOpen && (React.createElement("div", __assign({ className: "tag-label flex items-center gap-x-[5px] text-size-base ".concat(containerClass), style: {
-            maxWidth: maxWidthStyle,
-        } }, props),
-        leftIcon && (React.createElement("div", { style: {
-                width: sizeCount + 'px',
-                height: sizeCount + 'px',
-            }, className: "flex items-center justify-center", ref: containerRef }, leftIcon ||
-            (validatedVariant === 'icon' && (React.createElement(TbCheck, { className: defaultIconSize }))))),
-        validatedVariant !== 'icon' && text && (React.createElement("span", { className: "w-full truncate pb-[1px] ".concat(textClass) }, text)),
-        validatedVariant === 'label' && rightIcon && (React.createElement("div", { className: "block" },
-            " ",
-            rightIcon,
-            " ")),
-        isCloseable && (React.createElement("button", { type: "button", onClick: closeHandler, className: "flex aspect-square items-center justify-center rounded-full pt-[1px] ".concat(closeClass) },
-            React.createElement(TbX, null))))));
+var BlockLoading = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'bg-bia-grey-light-80' : _c;
+    return (React.createElement("div", { className: "block-loading flex h-full w-full items-center justify-center ".concat(backgroundColor, " ").concat(className) },
+        React.createElement(Spinner, null)));
 };
-TagLabel.defaultProps = {
-    variant: 'default',
-    size: 'sm',
-    open: true,
-    closeHandler: function () { },
-    leftIcon: null,
-    rightIcon: null,
-    left: null,
-    right: null,
-    bgColor: 'grey-light-50',
-    textColor: 'black',
-    isBlock: false,
-    maxWidth: 300,
-    isDark: false,
+
+var EmptyIcon = "Empty.svg";
+
+var EmptyTable = function (_a) {
+    var content = _a.content, subContent = _a.subContent;
+    [
+        React.createElement(ContextualButton, { key: "refresh", icon: React.createElement(TbRefresh, { size: 18 }), disabled: true }),
+        React.createElement(ContextualButton, { key: "zoom", icon: React.createElement(TbZoom, { size: 18 }), disabled: true }),
+    ];
+    return (React.createElement("div", { className: "h-[368px] w-full rounded-b-radius-lg bg-bia-grey-light-80 pb-[63px]" },
+        React.createElement("div", { className: "mb-[63px] grid h-[30px] w-full grid-cols-7 items-center gap-20 border-b border-bia-grey px-[60px]" },
+            React.createElement("div", { className: "col-span-1 h-2 rounded-radius-sm bg-bia-grey-light-50" }),
+            React.createElement("div", { className: "col-span-2 h-2 rounded-radius-sm bg-bia-grey-light-50" }),
+            React.createElement("div", { className: "col-span-2 h-2 rounded-radius-sm bg-bia-grey-light-50" }),
+            React.createElement("div", { className: "col-span-2 h-2 rounded-radius-sm bg-bia-grey-light-50" })),
+        React.createElement("div", { className: "flex flex-col items-center justify-center rounded-md p-5" },
+            React.createElement("img", { src: EmptyIcon, alt: "Empty State", style: { height: 72, width: 72 } }),
+            React.createElement("div", { className: "mt-5 text-center" },
+                content && (React.createElement(Text, { variant: 'small-text-semibold', extended: "block text-bia-black" }, content)),
+                subContent && (React.createElement(Text, { variant: "small-text", extended: "mt-2 block text-bia-coolgrey'}" }, subContent))))));
+};
+
+var tableSizeOption = [10, 20, 50, 100, 999];
+var TableFooterController = function (_a) {
+    var currentPage = _a.currentPage, totalPages = _a.totalPages, pageSize = _a.pageSize, setCurrentPage = _a.setCurrentPage, setPageSize = _a.setPageSize, isLoading = _a.isLoading;
+    // Table Button
+    var tableSizeRef = React.useRef(null);
+    var _b = React.useState(false), isShownTableSizeDropdown = _b[0], setIsShownTableSizeDropdown = _b[1];
+    var handlePageSizeChange = function (size) {
+        setPageSize(size);
+        setCurrentPage(1);
+    };
+    var pageSizeDisplay = pageSize === 999 ? 'All' : pageSize;
+    var tableSizeDropdown = (React.createElement(DropdownContainer, { open: isShownTableSizeDropdown, anchorRef: tableSizeRef, onClose: function () { return setIsShownTableSizeDropdown(false); }, onClickItem: function (e, val) { return handlePageSizeChange(val); }, size: "sm" }, tableSizeOption.map(function (value) {
+        var displayValue = value === 999 ? 'All' : value;
+        return React.createElement(DropdownItem, { key: value, content: displayValue, value: value });
+    })));
+    return (React.createElement("div", { className: "table-controller-footer flex w-full justify-between gap-[5px] rounded-b-radius-lg border-t border-bia-grey bg-bia-grey-light-80 px-2.5 pb-[7px] pt-2" },
+        React.createElement("div", { className: "action-container flex gap-[5px]" }, totalPages > 0 && (React.createElement(PaginationBar, { size: "sm", currentPage: currentPage, totalPages: totalPages, onPageChange: setCurrentPage, position: 'center' }))),
+        React.createElement(Button, { ref: tableSizeRef, label: pageSizeDisplay, minWidth: 0, size: "sm", iconRight: React.createElement(TbChevronDown, { size: 14 }), onClick: function () { return setIsShownTableSizeDropdown(function (oldState) { return !oldState; }); }, disabled: isLoading, className: "w-fit" }),
+        tableSizeDropdown));
+};
+
+var TableHeaderController = function (_a) {
+    var buttonActions = _a.buttonActions, totalData = _a.totalData, firstIndex = _a.firstIndex, lastIndex = _a.lastIndex;
+    var isShowHelperText = totalData || firstIndex || lastIndex;
+    return (React.createElement("div", { className: "table-controller-header flex w-full justify-between rounded-t-radius-lg border-b border-bia-grey bg-bia-grey-light-80 px-2.5 pb-[7px] pt-2" },
+        React.createElement("div", { className: "action-container flex grow gap-[5px] pe-2.5" }, buttonActions && (buttonActions === null || buttonActions === void 0 ? void 0 : buttonActions.map(function (button) { return button; }))),
+        isShowHelperText && (React.createElement("div", { className: "flex max-h-[22px] items-center font-segoe" },
+            React.createElement(Text, { variant: "small-text", className: "text-bia-coolgrey" },
+                "View ",
+                lastIndex === 0 ? 0 : firstIndex,
+                " - ",
+                lastIndex,
+                ' ',
+                totalData ? "of ".concat(totalData) : '')))));
+};
+
+var TableSearchInput = function (_a) {
+    var isShow = _a.isShow, value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? 'Search Data' : _b;
+    if (!isShow)
+        return null;
+    return (React.createElement("div", { className: "flex max-h-[22px] w-full items-center gap-x-1 pb-1 ps-[5px] font-segoe " },
+        React.createElement(TextInput, { size: "sm", variant: "text-transparent", className: "w-full bg-transparent text-size-sm focus:border-bia-grey focus:outline-none focus:ring-0", placeholder: placeholder, value: value, onChange: onChange, autoFocus: true })));
 };
 
 var colorConfigs = {
@@ -8199,6 +5361,125 @@ function getRelativeTime(date) {
     return "".concat(Math.floor(diffMs / year), " years ago");
 }
 
+/**
+ * A custom hook to handle data processing for tables, managing internal states
+ * for client-side filtering (searching) and sorting. It can also safely yield control
+ * to server-side operations if configured.
+ *
+ * ### Key Features:
+ * - **Automatic Key Detection:** Automatically finds string fields to search if no `searchKeys` are provided.
+ * - **Smart Sorting:** Uses `localeCompare` for strings, standard operators for numbers, and gracefully handles `null`/`undefined` values by moving them to the bottom.
+ * - **Server-Side Ready:** Setting `isServerSide: true` disables internal processing while preserving handlers for external API synchronization.
+ *
+ * @param {any[]} initialData - The raw array of data/rows to be displayed in the table.
+ * @param {UseTableDataOptions} [options={}] - Optional configuration flags and initial states.
+ * * @returns {Object} Table state and control handlers.
+ * @returns {any[]} data - The processed array (filtered and sorted) ready for rendering.
+ * @returns {string} searchTerm - The current text being filtered against.
+ * @returns {string|undefined} sortKey - The current object key being used to sort.
+ * @returns {SortOrder} sortOrder - The current direction of the sort ('asc' or 'desc').
+ * @returns {(value: string) => void} handleSearchChange - Callback to update the search filter string.
+ * @returns {(key: string) => void} handleSortChange - Callback to trigger sorting on a specific column. Toggles direction if called on the same column consecutively.
+ *
+ * @example
+ * const { data, handleSearchChange, handleSortChange } = useTableDataHandler(users, {
+ * searchKeys: ['name', 'email'],
+ * initialSortKey: 'name'
+ * });
+ */
+var useTableDataHandler = function (initialData, options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.isFilterable, isFilterable = _a === void 0 ? true : _a, _b = options.isSortable, isSortable = _b === void 0 ? true : _b, _c = options.isServerSide, isServerSide = _c === void 0 ? false : _c, configSearchKeys = options.searchKeys, initialSortKey = options.initialSortKey, _d = options.initialSortOrder, initialSortOrder = _d === void 0 ? 'asc' : _d;
+    // ---- STATE ----
+    var _e = React.useState(''), searchTerm = _e[0], setSearchTerm = _e[1];
+    var _f = React.useState(initialSortKey), sortKey = _f[0], setSortKey = _f[1];
+    var _g = React.useState(initialSortOrder), sortOrder = _g[0], setSortOrder = _g[1];
+    var searchKeys = React.useMemo(function () {
+        if (isServerSide || !isFilterable)
+            return [];
+        if (configSearchKeys && configSearchKeys.length > 0)
+            return configSearchKeys;
+        if (initialData && initialData.length > 0) {
+            var allKeys = Object.keys(initialData[0]);
+            return allKeys.filter(function (key) { return typeof initialData[0][key] === 'string'; });
+        }
+        return [];
+    }, [initialData, configSearchKeys, isFilterable, isServerSide]);
+    var processedData = React.useMemo(function () {
+        if (!initialData)
+            return [];
+        if (isServerSide)
+            return initialData;
+        var result = __spreadArray([], initialData, true);
+        // Client-Side Filter
+        if (isFilterable && searchTerm && searchKeys.length > 0) {
+            var keyword_1 = searchTerm.toLowerCase();
+            result = result.filter(function (item) {
+                return searchKeys.some(function (key) {
+                    var itemValue = item[key];
+                    return (typeof itemValue === 'string' &&
+                        itemValue.toLowerCase().includes(keyword_1));
+                });
+            });
+        }
+        // Client-Side Sort
+        if (isSortable && sortKey) {
+            var direction_1 = sortOrder === 'asc' ? 1 : -1;
+            result.sort(function (a, b) {
+                var valueA = a[sortKey];
+                var valueB = b[sortKey];
+                var isNullA = valueA === null || valueA === undefined || valueA === '';
+                var isNullB = valueB === null || valueB === undefined || valueB === '';
+                if (isNullA && isNullB)
+                    return 0;
+                if (isNullA)
+                    return direction_1 === 1 ? 1 : -1;
+                if (isNullB)
+                    return direction_1 === 1 ? -1 : 1;
+                if (typeof valueA === 'string' && typeof valueB === 'string') {
+                    return (valueA.localeCompare(valueB, undefined, { sensitivity: 'base' }) *
+                        direction_1);
+                }
+                return valueA < valueB ? -1 * direction_1 : 1 * direction_1;
+            });
+        }
+        return result;
+    }, [
+        initialData,
+        searchTerm,
+        searchKeys,
+        sortKey,
+        sortOrder,
+        isFilterable,
+        isSortable,
+        isServerSide,
+    ]);
+    // HANDLERS
+    var handleSearchChange = function (value) {
+        if (isFilterable)
+            setSearchTerm(value);
+    };
+    var handleSortChange = function (key) {
+        if (!isSortable)
+            return;
+        if (sortKey === key) {
+            setSortOrder(function (prev) { return (prev === 'asc' ? 'desc' : 'asc'); });
+        }
+        else {
+            setSortKey(key);
+            setSortOrder('asc');
+        }
+    };
+    return {
+        data: processedData,
+        searchTerm: isFilterable ? searchTerm : '',
+        sortKey: isSortable ? sortKey : undefined,
+        sortOrder: isSortable ? sortOrder : 'asc',
+        handleSearchChange: handleSearchChange,
+        handleSortChange: handleSortChange,
+    };
+};
+
 exports.Accordions = Accordions;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
@@ -8227,6 +5508,7 @@ exports.BCStack = Stack;
 exports.BCVirtualPort = VirtualPort;
 exports.Badge = Badge;
 exports.Banner = Banner;
+exports.BlockLoading = BlockLoading;
 exports.Brand = Brand;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
@@ -8241,6 +5523,7 @@ exports.Display = Display;
 exports.Divider = Divider;
 exports.DropdownContainer = DropdownContainer;
 exports.DropdownItem = DropdownItem;
+exports.EmptyTable = EmptyTable;
 exports.FileTree = FileTree;
 exports.FormGroup = FormGroup;
 exports.FormGroupButton = FormGroupButton;
@@ -8253,6 +5536,7 @@ exports.LiveSearch = LiveSearch;
 exports.MenuContainer = MenuContainer;
 exports.MenuItem = MenuItem;
 exports.Modal = Modal;
+exports.MonospaceBadge = MonospaceBadge;
 exports.Notification = Notification;
 exports.P = P;
 exports.PaginationBar = PaginationBar;
@@ -8266,11 +5550,22 @@ exports.ResizeableDiv = ResizeableDiv;
 exports.SegmentButtonGroup = SegmentButtonGroup;
 exports.SegmentButtonItem = SegmentButtonItem;
 exports.SelectInput = SelectInput;
+exports.SidebarContainer = SidebarContainer;
+exports.SidebarItem = SidebarItem;
+exports.SidebarMenu = SidebarMenu;
+exports.SidebarProfile = SidebarProfile;
 exports.Slider = Slider;
 exports.Spinner = Spinner;
 exports.Tab = Tab;
 exports.TabMenu = TabMenu;
+exports.Table = Table;
+exports.TableBody = TableBody;
 exports.TableCell = TableCell;
+exports.TableFooterController = TableFooterController;
+exports.TableHead = TableHead;
+exports.TableHeaderController = TableHeaderController;
+exports.TableRow = TableRow;
+exports.TableSearchInput = TableSearchInput;
 exports.TagLabel = TagLabel;
 exports.Text = Text;
 exports.TextArea = TextArea;
@@ -8283,3 +5578,4 @@ exports.VerticalStepper = StepperItem;
 exports.Window = Window;
 exports.getRelativeTime = getRelativeTime;
 exports.useFileTree = useFileTree;
+exports.useTableDataHandler = useTableDataHandler;