@lukso/web-components 1.51.5 → 1.52.0

package/dist/{index-b83c7efa.js → cn-1594f5ba.js}

@@ -1,11 +1,4 @@
-import { T as TailwindStyledElement, x } from './index-04d11436.js';
-import { n, e } from './query-assigned-elements-5d94572f.js';
-import { o } from './style-map-5be28c06.js';
-import './components/lukso-profile/index.js';
-import './color-palette.js';
-import { c as customStyleMap } from './index-ee4182e6.js';
-
-const style = ":host {\n  display: inline-flex;\n  width: 100%;\n}\n\n:host([width]) {\n  width: inherit;\n}";
+import { boxShadows, fontSizes, fontWeights, lineHeights, scales, heights, borderRadius, colorPalette } from './tailwind-config.js';
 
 import.meta.url.replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");
 
@@ -13,55 +6,15 @@ import.meta.url.replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z
 
 import.meta.url.replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");
 
-/**
- * The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better.
- *
- * Specifically:
- * - Runtime code from https://github.com/lukeed/clsx/blob/v1.2.1/src/index.js
- * - TypeScript types from https://github.com/lukeed/clsx/blob/v1.2.1/clsx.d.ts
- *
- * Original code has MIT license: Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
- */
-function twJoin() {
-  var index = 0;
-  var argument;
-  var resolvedValue;
-  var string = '';
-  while (index < arguments.length) {
-    if (argument = arguments[index++]) {
-      if (resolvedValue = toValue(argument)) {
-        string && (string += ' ');
-        string += resolvedValue;
-      }
-    }
-  }
-  return string;
-}
-function toValue(mix) {
-  if (typeof mix === 'string') {
-    return mix;
-  }
-  var resolvedValue;
-  var string = '';
-  for (var k = 0; k < mix.length; k++) {
-    if (mix[k]) {
-      if (resolvedValue = toValue(mix[k])) {
-        string && (string += ' ');
-        string += resolvedValue;
-      }
-    }
-  }
-  return string;
-}
-
-var CLASS_PART_SEPARATOR = '-';
+const CLASS_PART_SEPARATOR = '-';
 function createClassUtils(config) {
-  var classMap = createClassMap(config);
-  var conflictingClassGroups = config.conflictingClassGroups,
-    _config$conflictingCl = config.conflictingClassGroupModifiers,
-    conflictingClassGroupModifiers = _config$conflictingCl === void 0 ? {} : _config$conflictingCl;
+  const classMap = createClassMap(config);
+  const {
+    conflictingClassGroups,
+    conflictingClassGroupModifiers
+  } = config;
   function getClassGroupId(className) {
-    var classParts = className.split(CLASS_PART_SEPARATOR);
+    const classParts = className.split(CLASS_PART_SEPARATOR);
     // Classes like `-inset-1` produce an empty string as first classPart. We assume that classes for negative values are used correctly and remove it from classParts.
     if (classParts[0] === '' && classParts.length !== 1) {
       classParts.shift();
@@ -69,41 +22,40 @@ function createClassUtils(config) {
     return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
   }
   function getConflictingClassGroupIds(classGroupId, hasPostfixModifier) {
-    var conflicts = conflictingClassGroups[classGroupId] || [];
+    const conflicts = conflictingClassGroups[classGroupId] || [];
     if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
-      return [].concat(conflicts, conflictingClassGroupModifiers[classGroupId]);
+      return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
     }
     return conflicts;
   }
   return {
-    getClassGroupId: getClassGroupId,
-    getConflictingClassGroupIds: getConflictingClassGroupIds
+    getClassGroupId,
+    getConflictingClassGroupIds
   };
 }
 function getGroupRecursive(classParts, classPartObject) {
   if (classParts.length === 0) {
     return classPartObject.classGroupId;
   }
-  var currentClassPart = classParts[0];
-  var nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
-  var classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : undefined;
+  const currentClassPart = classParts[0];
+  const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
+  const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : undefined;
   if (classGroupFromNextClassPart) {
     return classGroupFromNextClassPart;
   }
   if (classPartObject.validators.length === 0) {
     return undefined;
   }
-  var classRest = classParts.join(CLASS_PART_SEPARATOR);
-  return classPartObject.validators.find(function (_ref) {
-    var validator = _ref.validator;
-    return validator(classRest);
-  })?.classGroupId;
+  const classRest = classParts.join(CLASS_PART_SEPARATOR);
+  return classPartObject.validators.find(({
+    validator
+  }) => validator(classRest))?.classGroupId;
 }
-var arbitraryPropertyRegex = /^\[(.+)\]$/;
+const arbitraryPropertyRegex = /^\[(.+)\]$/;
 function getGroupIdForArbitraryProperty(className) {
   if (arbitraryPropertyRegex.test(className)) {
-    var arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
-    var property = arbitraryPropertyClassName?.substring(0, arbitraryPropertyClassName.indexOf(':'));
+    const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
+    const property = arbitraryPropertyClassName?.substring(0, arbitraryPropertyClassName.indexOf(':'));
     if (property) {
       // I use two dots here because one dot is used as prefix for class groups in plugins
       return 'arbitrary..' + property;
@@ -114,24 +66,24 @@ function getGroupIdForArbitraryProperty(className) {
  * Exported for testing only
  */
 function createClassMap(config) {
-  var theme = config.theme,
-    prefix = config.prefix;
-  var classMap = {
+  const {
+    theme,
+    prefix
+  } = config;
+  const classMap = {
     nextPart: new Map(),
     validators: []
   };
-  var prefixedClassGroupEntries = getPrefixedClassGroupEntries(Object.entries(config.classGroups), prefix);
-  prefixedClassGroupEntries.forEach(function (_ref2) {
-    var classGroupId = _ref2[0],
-      classGroup = _ref2[1];
+  const prefixedClassGroupEntries = getPrefixedClassGroupEntries(Object.entries(config.classGroups), prefix);
+  prefixedClassGroupEntries.forEach(([classGroupId, classGroup]) => {
     processClassesRecursively(classGroup, classMap, classGroupId, theme);
   });
   return classMap;
 }
 function processClassesRecursively(classGroup, classPartObject, classGroupId, theme) {
-  classGroup.forEach(function (classDefinition) {
+  classGroup.forEach(classDefinition => {
     if (typeof classDefinition === 'string') {
-      var classPartObjectToEdit = classDefinition === '' ? classPartObject : getPart(classPartObject, classDefinition);
+      const classPartObjectToEdit = classDefinition === '' ? classPartObject : getPart(classPartObject, classDefinition);
       classPartObjectToEdit.classGroupId = classGroupId;
       return;
     }
@@ -142,20 +94,18 @@ function processClassesRecursively(classGroup, classPartObject, classGroupId, th
       }
       classPartObject.validators.push({
         validator: classDefinition,
-        classGroupId: classGroupId
+        classGroupId
       });
       return;
     }
-    Object.entries(classDefinition).forEach(function (_ref3) {
-      var key = _ref3[0],
-        classGroup = _ref3[1];
+    Object.entries(classDefinition).forEach(([key, classGroup]) => {
       processClassesRecursively(classGroup, getPart(classPartObject, key), classGroupId, theme);
     });
   });
 }
 function getPart(classPartObject, path) {
-  var currentClassPartObject = classPartObject;
-  path.split(CLASS_PART_SEPARATOR).forEach(function (pathPart) {
+  let currentClassPartObject = classPartObject;
+  path.split(CLASS_PART_SEPARATOR).forEach(pathPart => {
     if (!currentClassPartObject.nextPart.has(pathPart)) {
       currentClassPartObject.nextPart.set(pathPart, {
         nextPart: new Map(),
@@ -173,19 +123,13 @@ function getPrefixedClassGroupEntries(classGroupEntries, prefix) {
   if (!prefix) {
     return classGroupEntries;
   }
-  return classGroupEntries.map(function (_ref4) {
-    var classGroupId = _ref4[0],
-      classGroup = _ref4[1];
-    var prefixedClassGroup = classGroup.map(function (classDefinition) {
+  return classGroupEntries.map(([classGroupId, classGroup]) => {
+    const prefixedClassGroup = classGroup.map(classDefinition => {
       if (typeof classDefinition === 'string') {
         return prefix + classDefinition;
       }
       if (typeof classDefinition === 'object') {
-        return Object.fromEntries(Object.entries(classDefinition).map(function (_ref5) {
-          var key = _ref5[0],
-            value = _ref5[1];
-          return [prefix + key, value];
-        }));
+        return Object.fromEntries(Object.entries(classDefinition).map(([key, value]) => [prefix + key, value]));
       }
       return classDefinition;
     });
@@ -197,15 +141,13 @@ function getPrefixedClassGroupEntries(classGroupEntries, prefix) {
 function createLruCache(maxCacheSize) {
   if (maxCacheSize < 1) {
     return {
-      get: function get() {
-        return undefined;
-      },
-      set: function set() {}
+      get: () => undefined,
+      set: () => {}
     };
   }
-  var cacheSize = 0;
-  var cache = new Map();
-  var previousCache = new Map();
+  let cacheSize = 0;
+  let cache = new Map();
+  let previousCache = new Map();
   function update(key, value) {
     cache.set(key, value);
     cacheSize++;
@@ -216,8 +158,8 @@ function createLruCache(maxCacheSize) {
     }
   }
   return {
-    get: function get(key) {
-      var value = cache.get(key);
+    get(key) {
+      let value = cache.get(key);
       if (value !== undefined) {
         return value;
       }
@@ -226,7 +168,7 @@ function createLruCache(maxCacheSize) {
         return value;
       }
     },
-    set: function set(key, value) {
+    set(key, value) {
       if (cache.has(key)) {
         cache.set(key, value);
       } else {
@@ -235,21 +177,20 @@ function createLruCache(maxCacheSize) {
     }
   };
 }
-
-var IMPORTANT_MODIFIER = '!';
+const IMPORTANT_MODIFIER = '!';
 function createSplitModifiers(config) {
-  var separator = config.separator || ':';
-  var isSeparatorSingleCharacter = separator.length === 1;
-  var firstSeparatorCharacter = separator[0];
-  var separatorLength = separator.length;
+  const separator = config.separator;
+  const isSeparatorSingleCharacter = separator.length === 1;
+  const firstSeparatorCharacter = separator[0];
+  const separatorLength = separator.length;
   // splitModifiers inspired by https://github.com/tailwindlabs/tailwindcss/blob/v3.2.2/src/util/splitAtTopLevelOnly.js
   return function splitModifiers(className) {
-    var modifiers = [];
-    var bracketDepth = 0;
-    var modifierStart = 0;
-    var postfixModifierPosition;
-    for (var index = 0; index < className.length; index++) {
-      var currentCharacter = className[index];
+    const modifiers = [];
+    let bracketDepth = 0;
+    let modifierStart = 0;
+    let postfixModifierPosition;
+    for (let index = 0; index < className.length; index++) {
+      let currentCharacter = className[index];
       if (bracketDepth === 0) {
         if (currentCharacter === firstSeparatorCharacter && (isSeparatorSingleCharacter || className.slice(index, index + separatorLength) === separator)) {
           modifiers.push(className.slice(modifierStart, index));
@@ -267,15 +208,15 @@ function createSplitModifiers(config) {
         bracketDepth--;
       }
     }
-    var baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.substring(modifierStart);
-    var hasImportantModifier = baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER);
-    var baseClassName = hasImportantModifier ? baseClassNameWithImportantModifier.substring(1) : baseClassNameWithImportantModifier;
-    var maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : undefined;
+    const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.substring(modifierStart);
+    const hasImportantModifier = baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER);
+    const baseClassName = hasImportantModifier ? baseClassNameWithImportantModifier.substring(1) : baseClassNameWithImportantModifier;
+    const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : undefined;
     return {
-      modifiers: modifiers,
-      hasImportantModifier: hasImportantModifier,
-      baseClassName: baseClassName,
-      maybePostfixModifierPosition: maybePostfixModifierPosition
+      modifiers,
+      hasImportantModifier,
+      baseClassName,
+      maybePostfixModifierPosition
     };
   };
 }
@@ -288,21 +229,20 @@ function sortModifiers(modifiers) {
   if (modifiers.length <= 1) {
     return modifiers;
   }
-  var sortedModifiers = [];
-  var unsortedModifiers = [];
-  modifiers.forEach(function (modifier) {
-    var isArbitraryVariant = modifier[0] === '[';
+  const sortedModifiers = [];
+  let unsortedModifiers = [];
+  modifiers.forEach(modifier => {
+    const isArbitraryVariant = modifier[0] === '[';
     if (isArbitraryVariant) {
-      sortedModifiers.push.apply(sortedModifiers, unsortedModifiers.sort().concat([modifier]));
+      sortedModifiers.push(...unsortedModifiers.sort(), modifier);
       unsortedModifiers = [];
     } else {
       unsortedModifiers.push(modifier);
     }
   });
-  sortedModifiers.push.apply(sortedModifiers, unsortedModifiers.sort());
+  sortedModifiers.push(...unsortedModifiers.sort());
   return sortedModifiers;
 }
-
 function createConfigUtils(config) {
   return {
     cache: createLruCache(config.cacheSize),
@@ -310,12 +250,13 @@ function createConfigUtils(config) {
     ...createClassUtils(config)
   };
 }
-
-var SPLIT_CLASSES_REGEX = /\s+/;
+const SPLIT_CLASSES_REGEX = /\s+/;
 function mergeClassList(classList, configUtils) {
-  var splitModifiers = configUtils.splitModifiers,
-    getClassGroupId = configUtils.getClassGroupId,
-    getConflictingClassGroupIds = configUtils.getConflictingClassGroupIds;
+  const {
+    splitModifiers,
+    getClassGroupId,
+    getConflictingClassGroupIds
+  } = configUtils;
   /**
    * Set of classGroupIds in following format:
    * `{importantModifier}{variantModifiers}{classGroupId}`
@@ -323,77 +264,109 @@ function mergeClassList(classList, configUtils) {
    * @example 'hover:focus:bg-color'
    * @example 'md:!pr'
    */
-  var classGroupsInConflict = new Set();
-  return classList.trim().split(SPLIT_CLASSES_REGEX).map(function (originalClassName) {
-    var _splitModifiers = splitModifiers(originalClassName),
-      modifiers = _splitModifiers.modifiers,
-      hasImportantModifier = _splitModifiers.hasImportantModifier,
-      baseClassName = _splitModifiers.baseClassName,
-      maybePostfixModifierPosition = _splitModifiers.maybePostfixModifierPosition;
-    var classGroupId = getClassGroupId(maybePostfixModifierPosition ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
-    var hasPostfixModifier = Boolean(maybePostfixModifierPosition);
+  const classGroupsInConflict = new Set();
+  return classList.trim().split(SPLIT_CLASSES_REGEX).map(originalClassName => {
+    const {
+      modifiers,
+      hasImportantModifier,
+      baseClassName,
+      maybePostfixModifierPosition
+    } = splitModifiers(originalClassName);
+    let classGroupId = getClassGroupId(maybePostfixModifierPosition ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
+    let hasPostfixModifier = Boolean(maybePostfixModifierPosition);
     if (!classGroupId) {
       if (!maybePostfixModifierPosition) {
         return {
           isTailwindClass: false,
-          originalClassName: originalClassName
+          originalClassName
         };
       }
       classGroupId = getClassGroupId(baseClassName);
       if (!classGroupId) {
         return {
           isTailwindClass: false,
-          originalClassName: originalClassName
+          originalClassName
         };
       }
       hasPostfixModifier = false;
     }
-    var variantModifier = sortModifiers(modifiers).join(':');
-    var modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
+    const variantModifier = sortModifiers(modifiers).join(':');
+    const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
     return {
       isTailwindClass: true,
-      modifierId: modifierId,
-      classGroupId: classGroupId,
-      originalClassName: originalClassName,
-      hasPostfixModifier: hasPostfixModifier
+      modifierId,
+      classGroupId,
+      originalClassName,
+      hasPostfixModifier
     };
   }).reverse()
   // Last class in conflict wins, so we need to filter conflicting classes in reverse order.
-  .filter(function (parsed) {
+  .filter(parsed => {
     if (!parsed.isTailwindClass) {
       return true;
     }
-    var modifierId = parsed.modifierId,
-      classGroupId = parsed.classGroupId,
-      hasPostfixModifier = parsed.hasPostfixModifier;
-    var classId = modifierId + classGroupId;
+    const {
+      modifierId,
+      classGroupId,
+      hasPostfixModifier
+    } = parsed;
+    const classId = modifierId + classGroupId;
     if (classGroupsInConflict.has(classId)) {
       return false;
     }
     classGroupsInConflict.add(classId);
-    getConflictingClassGroupIds(classGroupId, hasPostfixModifier).forEach(function (group) {
-      return classGroupsInConflict.add(modifierId + group);
-    });
+    getConflictingClassGroupIds(classGroupId, hasPostfixModifier).forEach(group => classGroupsInConflict.add(modifierId + group));
     return true;
-  }).reverse().map(function (parsed) {
-    return parsed.originalClassName;
-  }).join(' ');
+  }).reverse().map(parsed => parsed.originalClassName).join(' ');
 }
 
-function createTailwindMerge() {
-  for (var _len = arguments.length, createConfig = new Array(_len), _key = 0; _key < _len; _key++) {
-    createConfig[_key] = arguments[_key];
+/**
+ * The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better.
+ *
+ * Specifically:
+ * - Runtime code from https://github.com/lukeed/clsx/blob/v1.2.1/src/index.js
+ * - TypeScript types from https://github.com/lukeed/clsx/blob/v1.2.1/clsx.d.ts
+ *
+ * Original code has MIT license: Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
+ */
+function twJoin() {
+  let index = 0;
+  let argument;
+  let resolvedValue;
+  let string = '';
+  while (index < arguments.length) {
+    if (argument = arguments[index++]) {
+      if (resolvedValue = toValue(argument)) {
+        string && (string += ' ');
+        string += resolvedValue;
+      }
+    }
+  }
+  return string;
+}
+function toValue(mix) {
+  if (typeof mix === 'string') {
+    return mix;
   }
-  var configUtils;
-  var cacheGet;
-  var cacheSet;
-  var functionToCall = initTailwindMerge;
+  let resolvedValue;
+  let string = '';
+  for (let k = 0; k < mix.length; k++) {
+    if (mix[k]) {
+      if (resolvedValue = toValue(mix[k])) {
+        string && (string += ' ');
+        string += resolvedValue;
+      }
+    }
+  }
+  return string;
+}
+function createTailwindMerge(createConfigFirst, ...createConfigRest) {
+  let configUtils;
+  let cacheGet;
+  let cacheSet;
+  let functionToCall = initTailwindMerge;
   function initTailwindMerge(classList) {
-    var firstCreateConfig = createConfig[0],
-      restCreateConfig = createConfig.slice(1);
-    var config = restCreateConfig.reduce(function (previousConfig, createConfigCurrent) {
-      return createConfigCurrent(previousConfig);
-    }, firstCreateConfig());
+    const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
     configUtils = createConfigUtils(config);
     cacheGet = configUtils.cache.get;
     cacheSet = configUtils.cache.set;
@@ -401,11 +374,11 @@ function createTailwindMerge() {
     return tailwindMerge(classList);
   }
   function tailwindMerge(classList) {
-    var cachedResult = cacheGet(classList);
+    const cachedResult = cacheGet(classList);
     if (cachedResult) {
       return cachedResult;
     }
-    var result = mergeClassList(classList, configUtils);
+    const result = mergeClassList(classList, configUtils);
     cacheSet(classList, result);
     return result;
   }
@@ -413,66 +386,65 @@ function createTailwindMerge() {
     return functionToCall(twJoin.apply(null, arguments));
   };
 }
-
 function fromTheme(key) {
-  var themeGetter = function themeGetter(theme) {
-    return theme[key] || [];
-  };
+  const themeGetter = theme => theme[key] || [];
   themeGetter.isThemeGetter = true;
   return themeGetter;
 }
-
-var arbitraryValueRegex = /^\[(?:([a-z-]+):)?(.+)\]$/i;
-var fractionRegex = /^\d+\/\d+$/;
-var stringLengths = /*#__PURE__*/new Set(['px', 'full', 'screen']);
-var tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
-var 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 arbitraryValueRegex = /^\[(?:([a-z-]+):)?(.+)\]$/i;
+const fractionRegex = /^\d+\/\d+$/;
+const stringLengths = /*#__PURE__*/new Set(['px', 'full', 'screen']);
+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$/;
 // Shadow always begins with x and y offset separated by underscore
-var shadowRegex = /^-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
+const shadowRegex = /^-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
+const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
 function isLength(value) {
-  return isNumber(value) || stringLengths.has(value) || fractionRegex.test(value) || isArbitraryLength(value);
+  return isNumber(value) || stringLengths.has(value) || fractionRegex.test(value);
 }
 function isArbitraryLength(value) {
   return getIsArbitraryValue(value, 'length', isLengthOnly);
 }
-function isArbitrarySize(value) {
-  return getIsArbitraryValue(value, 'size', isNever);
-}
-function isArbitraryPosition(value) {
-  return getIsArbitraryValue(value, 'position', isNever);
-}
-function isArbitraryUrl(value) {
-  return getIsArbitraryValue(value, 'url', isUrl);
+function isNumber(value) {
+  return Boolean(value) && !Number.isNaN(Number(value));
 }
 function isArbitraryNumber(value) {
   return getIsArbitraryValue(value, 'number', isNumber);
 }
-function isNumber(value) {
-  return !Number.isNaN(Number(value));
+function isInteger(value) {
+  return Boolean(value) && Number.isInteger(Number(value));
 }
 function isPercent(value) {
   return value.endsWith('%') && isNumber(value.slice(0, -1));
 }
-function isInteger(value) {
-  return isIntegerOnly(value) || getIsArbitraryValue(value, 'number', isIntegerOnly);
-}
 function isArbitraryValue(value) {
   return arbitraryValueRegex.test(value);
 }
-function isAny() {
-  return true;
-}
 function isTshirtSize(value) {
   return tshirtUnitRegex.test(value);
 }
+const sizeLabels = /*#__PURE__*/new Set(['length', 'size', 'percentage']);
+function isArbitrarySize(value) {
+  return getIsArbitraryValue(value, sizeLabels, isNever);
+}
+function isArbitraryPosition(value) {
+  return getIsArbitraryValue(value, 'position', isNever);
+}
+const imageLabels = /*#__PURE__*/new Set(['image', 'url']);
+function isArbitraryImage(value) {
+  return getIsArbitraryValue(value, imageLabels, isImage);
+}
 function isArbitraryShadow(value) {
   return getIsArbitraryValue(value, '', isShadow);
 }
+function isAny() {
+  return true;
+}
 function getIsArbitraryValue(value, label, testValue) {
-  var result = arbitraryValueRegex.exec(value);
+  const result = arbitraryValueRegex.exec(value);
   if (result) {
     if (result[1]) {
-      return result[1] === label;
+      return typeof label === 'string' ? result[1] === label : label.has(result[1]);
     }
     return testValue(result[2]);
   }
@@ -484,95 +456,64 @@ function isLengthOnly(value) {
 function isNever() {
   return false;
 }
-function isUrl(value) {
-  return value.startsWith('url(');
-}
-function isIntegerOnly(value) {
-  return Number.isInteger(Number(value));
-}
 function isShadow(value) {
   return shadowRegex.test(value);
 }
-
+function isImage(value) {
+  return imageRegex.test(value);
+}
 function getDefaultConfig() {
-  var colors = fromTheme('colors');
-  var spacing = fromTheme('spacing');
-  var blur = fromTheme('blur');
-  var brightness = fromTheme('brightness');
-  var borderColor = fromTheme('borderColor');
-  var borderRadius = fromTheme('borderRadius');
-  var borderSpacing = fromTheme('borderSpacing');
-  var borderWidth = fromTheme('borderWidth');
-  var contrast = fromTheme('contrast');
-  var grayscale = fromTheme('grayscale');
-  var hueRotate = fromTheme('hueRotate');
-  var invert = fromTheme('invert');
-  var gap = fromTheme('gap');
-  var gradientColorStops = fromTheme('gradientColorStops');
-  var gradientColorStopPositions = fromTheme('gradientColorStopPositions');
-  var inset = fromTheme('inset');
-  var margin = fromTheme('margin');
-  var opacity = fromTheme('opacity');
-  var padding = fromTheme('padding');
-  var saturate = fromTheme('saturate');
-  var scale = fromTheme('scale');
-  var sepia = fromTheme('sepia');
-  var skew = fromTheme('skew');
-  var space = fromTheme('space');
-  var translate = fromTheme('translate');
-  var getOverscroll = function getOverscroll() {
-    return ['auto', 'contain', 'none'];
-  };
-  var getOverflow = function getOverflow() {
-    return ['auto', 'hidden', 'clip', 'visible', 'scroll'];
-  };
-  var getSpacingWithAutoAndArbitrary = function getSpacingWithAutoAndArbitrary() {
-    return ['auto', isArbitraryValue, spacing];
-  };
-  var getSpacingWithArbitrary = function getSpacingWithArbitrary() {
-    return [isArbitraryValue, spacing];
-  };
-  var getLengthWithEmpty = function getLengthWithEmpty() {
-    return ['', isLength];
-  };
-  var getNumberWithAutoAndArbitrary = function getNumberWithAutoAndArbitrary() {
-    return ['auto', isNumber, isArbitraryValue];
-  };
-  var getPositions = function getPositions() {
-    return ['bottom', 'center', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top'];
-  };
-  var getLineStyles = function getLineStyles() {
-    return ['solid', 'dashed', 'dotted', 'double', 'none'];
-  };
-  var getBlendModes = function getBlendModes() {
-    return ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-lighter'];
-  };
-  var getAlign = function getAlign() {
-    return ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch'];
-  };
-  var getZeroAndEmpty = function getZeroAndEmpty() {
-    return ['', '0', isArbitraryValue];
-  };
-  var getBreaks = function getBreaks() {
-    return ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'];
-  };
-  var getNumber = function getNumber() {
-    return [isNumber, isArbitraryNumber];
-  };
-  var getNumberAndArbitrary = function getNumberAndArbitrary() {
-    return [isNumber, isArbitraryValue];
-  };
+  const colors = fromTheme('colors');
+  const spacing = fromTheme('spacing');
+  const blur = fromTheme('blur');
+  const brightness = fromTheme('brightness');
+  const borderColor = fromTheme('borderColor');
+  const borderRadius = fromTheme('borderRadius');
+  const borderSpacing = fromTheme('borderSpacing');
+  const borderWidth = fromTheme('borderWidth');
+  const contrast = fromTheme('contrast');
+  const grayscale = fromTheme('grayscale');
+  const hueRotate = fromTheme('hueRotate');
+  const invert = fromTheme('invert');
+  const gap = fromTheme('gap');
+  const gradientColorStops = fromTheme('gradientColorStops');
+  const gradientColorStopPositions = fromTheme('gradientColorStopPositions');
+  const inset = fromTheme('inset');
+  const margin = fromTheme('margin');
+  const opacity = fromTheme('opacity');
+  const padding = fromTheme('padding');
+  const saturate = fromTheme('saturate');
+  const scale = fromTheme('scale');
+  const sepia = fromTheme('sepia');
+  const skew = fromTheme('skew');
+  const space = fromTheme('space');
+  const translate = fromTheme('translate');
+  const getOverscroll = () => ['auto', 'contain', 'none'];
+  const getOverflow = () => ['auto', 'hidden', 'clip', 'visible', 'scroll'];
+  const getSpacingWithAutoAndArbitrary = () => ['auto', isArbitraryValue, spacing];
+  const getSpacingWithArbitrary = () => [isArbitraryValue, spacing];
+  const getLengthWithEmptyAndArbitrary = () => ['', isLength, isArbitraryLength];
+  const getNumberWithAutoAndArbitrary = () => ['auto', isNumber, isArbitraryValue];
+  const getPositions = () => ['bottom', 'center', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top'];
+  const getLineStyles = () => ['solid', 'dashed', 'dotted', 'double', 'none'];
+  const getBlendModes = () => ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-lighter'];
+  const getAlign = () => ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch'];
+  const getZeroAndEmpty = () => ['', '0', isArbitraryValue];
+  const getBreaks = () => ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'];
+  const getNumber = () => [isNumber, isArbitraryNumber];
+  const getNumberAndArbitrary = () => [isNumber, isArbitraryValue];
   return {
     cacheSize: 500,
+    separator: ':',
     theme: {
       colors: [isAny],
-      spacing: [isLength],
+      spacing: [isLength, isArbitraryLength],
       blur: ['none', '', isTshirtSize, isArbitraryValue],
       brightness: getNumber(),
       borderColor: [colors],
       borderRadius: ['none', '', 'full', isTshirtSize, isArbitraryValue],
       borderSpacing: getSpacingWithArbitrary(),
-      borderWidth: getLengthWithEmpty(),
+      borderWidth: getLengthWithEmptyAndArbitrary(),
       contrast: getNumber(),
       grayscale: getZeroAndEmpty(),
       hueRotate: getNumberAndArbitrary(),
@@ -656,8 +597,8 @@ function getDefaultConfig() {
        * Floats
        * @see https://tailwindcss.com/docs/float
        */
-      "float": [{
-        "float": ['right', 'left', 'none']
+      float: [{
+        float: ['right', 'left', 'none']
       }],
       /**
        * Clear
@@ -683,7 +624,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/object-position
        */
       'object-position': [{
-        object: [].concat(getPositions(), [isArbitraryValue])
+        object: [...getPositions(), isArbitraryValue]
       }],
       /**
        * Overflow
@@ -805,7 +746,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/z-index
        */
       z: [{
-        z: ['auto', isInteger]
+        z: ['auto', isInteger, isArbitraryValue]
       }],
       // Flexbox and Grid
       /**
@@ -855,7 +796,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/order
        */
       order: [{
-        order: ['first', 'last', 'none', isInteger]
+        order: ['first', 'last', 'none', isInteger, isArbitraryValue]
       }],
       /**
        * Grid Template Columns
@@ -870,7 +811,7 @@ function getDefaultConfig() {
        */
       'col-start-end': [{
         col: ['auto', {
-          span: ['full', isInteger]
+          span: ['full', isInteger, isArbitraryValue]
         }, isArbitraryValue]
       }],
       /**
@@ -900,7 +841,7 @@ function getDefaultConfig() {
        */
       'row-start-end': [{
         row: ['auto', {
-          span: [isInteger]
+          span: [isInteger, isArbitraryValue]
         }, isArbitraryValue]
       }],
       /**
@@ -964,7 +905,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/justify-content
        */
       'justify-content': [{
-        justify: ['normal'].concat(getAlign())
+        justify: ['normal', ...getAlign()]
       }],
       /**
        * Justify Items
@@ -985,7 +926,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/align-content
        */
       'align-content': [{
-        content: ['normal'].concat(getAlign(), ['baseline'])
+        content: ['normal', ...getAlign(), 'baseline']
       }],
       /**
        * Align Items
@@ -1006,7 +947,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/place-content
        */
       'place-content': [{
-        'place-content': [].concat(getAlign(), ['baseline'])
+        'place-content': [...getAlign(), 'baseline']
       }],
       /**
        * Place Items
@@ -1209,7 +1150,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/min-height
        */
       'min-h': [{
-        'min-h': ['min', 'max', 'fit', isArbitraryValue, isLength]
+        'min-h': ['min', 'max', 'fit', isLength, isArbitraryValue]
       }],
       /**
        * Max-Height
@@ -1299,7 +1240,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/line-height
        */
       leading: [{
-        leading: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose', isArbitraryValue, isLength]
+        leading: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose', isLength, isArbitraryValue]
       }],
       /**
        * List Style Image
@@ -1368,21 +1309,21 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/text-decoration-style
        */
       'text-decoration-style': [{
-        decoration: [].concat(getLineStyles(), ['wavy'])
+        decoration: [...getLineStyles(), 'wavy']
       }],
       /**
        * Text Decoration Thickness
        * @see https://tailwindcss.com/docs/text-decoration-thickness
        */
       'text-decoration-thickness': [{
-        decoration: ['auto', 'from-font', isLength]
+        decoration: ['auto', 'from-font', isLength, isArbitraryLength]
       }],
       /**
        * Text Underline Offset
        * @see https://tailwindcss.com/docs/text-underline-offset
        */
       'underline-offset': [{
-        'underline-offset': ['auto', isArbitraryValue, isLength]
+        'underline-offset': ['auto', isLength, isArbitraryValue]
       }],
       /**
        * Text Decoration Color
@@ -1426,8 +1367,8 @@ function getDefaultConfig() {
        * Word Break
        * @see https://tailwindcss.com/docs/word-break
        */
-      "break": [{
-        "break": ['normal', 'words', 'all', 'keep']
+      break: [{
+        break: ['normal', 'words', 'all', 'keep']
       }],
       /**
        * Hyphens
@@ -1478,7 +1419,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/background-position
        */
       'bg-position': [{
-        bg: [].concat(getPositions(), [isArbitraryPosition])
+        bg: [...getPositions(), isArbitraryPosition]
       }],
       /**
        * Background Repeat
@@ -1503,7 +1444,7 @@ function getDefaultConfig() {
       'bg-image': [{
         bg: ['none', {
           'gradient-to': ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl']
-        }, isArbitraryUrl]
+        }, isArbitraryImage]
       }],
       /**
        * Background Color
@@ -1735,7 +1676,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/border-style
        */
       'border-style': [{
-        border: [].concat(getLineStyles(), ['hidden'])
+        border: [...getLineStyles(), 'hidden']
       }],
       /**
        * Divide Width X
@@ -1836,21 +1777,21 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/outline-style
        */
       'outline-style': [{
-        outline: [''].concat(getLineStyles())
+        outline: ['', ...getLineStyles()]
       }],
       /**
        * Outline Offset
        * @see https://tailwindcss.com/docs/outline-offset
        */
       'outline-offset': [{
-        'outline-offset': [isArbitraryValue, isLength]
+        'outline-offset': [isLength, isArbitraryValue]
       }],
       /**
        * Outline Width
        * @see https://tailwindcss.com/docs/outline-width
        */
       'outline-w': [{
-        outline: [isLength]
+        outline: [isLength, isArbitraryLength]
       }],
       /**
        * Outline Color
@@ -1864,7 +1805,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/ring-width
        */
       'ring-w': [{
-        ring: getLengthWithEmpty()
+        ring: getLengthWithEmptyAndArbitrary()
       }],
       /**
        * Ring Width Inset
@@ -1890,7 +1831,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/ring-offset-width
        */
       'ring-offset-w': [{
-        'ring-offset': [isLength]
+        'ring-offset': [isLength, isArbitraryLength]
       }],
       /**
        * Ring Offset Color
@@ -2435,10 +2376,27 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/touch-action
        */
       touch: [{
-        touch: ['auto', 'none', 'pinch-zoom', 'manipulation', {
-          pan: ['x', 'left', 'right', 'y', 'up', 'down']
-        }]
+        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
@@ -2466,7 +2424,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/stroke-width
        */
       'stroke-w': [{
-        stroke: [isLength, isArbitraryNumber]
+        stroke: [isLength, isArbitraryLength, isArbitraryNumber]
       }],
       /**
        * Stroke
@@ -2522,7 +2480,11 @@ function getDefaultConfig() {
       'scroll-my': ['scroll-mt', 'scroll-mb'],
       'scroll-p': ['scroll-px', 'scroll-py', 'scroll-ps', 'scroll-pe', 'scroll-pt', 'scroll-pr', 'scroll-pb', 'scroll-pl'],
       'scroll-px': ['scroll-pr', 'scroll-pl'],
-      'scroll-py': ['scroll-pt', 'scroll-pb']
+      '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']
@@ -2530,332 +2492,75 @@ function getDefaultConfig() {
   };
 }
 
-var twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
-
-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))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
-
-const cn = (...inputs) => {
-  return twMerge(clsx(inputs));
-};
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
-  return result;
-};
-let LuksoCard = class extends TailwindStyledElement(style) {
-  constructor() {
-    super(...arguments);
-    this.variant = "basic";
-    this.backgroundUrl = "";
-    this.profileUrl = "";
-    this.profileAddress = "";
-    this.width = void 0;
-    this.height = void 0;
-    this.customClass = "";
-    this.headerClass = "";
-    this.size = "medium";
-    this.isHoverable = false;
-    this.mediumStyles = `rounded-24 shadow-neutral-drop-shadow-2xl`;
-    this.smallStyles = `rounded-12 shadow-neutral-drop-shadow`;
-    this.smallHoverStyles = `hover:shadow-neutral-drop-shadow-1xl cursor-pointer transition`;
-  }
-  backgroundImageOrGradient() {
-    const opacity = "80";
-    const gradientStart = `#${this.profileAddress.slice(2, 8)}${opacity}`;
-    const gradientEnd = `#${this.profileAddress.slice(36, 42)}${opacity}`;
-    if (this.backgroundUrl) {
-      return `url(${this.backgroundUrl})`;
-    }
-    return `linear-gradient(90deg, ${gradientStart}, ${gradientEnd})`;
-  }
-  basicTemplate() {
-    return x`
-      <div
-        data-testid="card"
-        style=${customStyleMap({
-      [`min-height: ${this.height}px`]: !!this.height,
-      [`width: ${this.width}px`]: !!this.width
-    })}
-        class=${cn("bg-neutral-100", {
-      [this.mediumStyles]: !this.customClass && this.size === "medium",
-      [this.smallStyles]: !this.customClass && this.size === "small",
-      [this.smallHoverStyles]: this.isHoverable && this.size === "small",
-      [this.customClass]: !!this.customClass,
-      "w-full": !this.width
-    })}
-      >
-        <slot name="content"></slot>
-      </div>
-    `;
-  }
-  withHeaderTemplate() {
-    return x`
-      <div
-        data-testid="card"
-        style=${o({
-      minHeight: `${this.height}px`,
-      width: `${this.width}px`
-    })}
-        class=${cn("bg-neutral-100 grid grid-rows-[auto,1fr] overflow-hidden", {
-      [this.mediumStyles]: !this.customClass && this.size === "medium",
-      [this.smallStyles]: !this.customClass && this.size === "small",
-      [this.smallHoverStyles]: this.isHoverable && this.size === "small",
-      [this.customClass]: !!this.customClass,
-      "w-full": !this.width
-    })}
-      >
-        <div class=${this.headerClass}>
-          <slot name="header"></slot>
-        </div>
-        <div class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-24">
-          <slot name="content"></slot>
-        </div>
-      </div>
-    `;
-  }
-  profileTemplate() {
-    return x`
-      <div
-        data-testid="card"
-        style=${customStyleMap({
-      [`min-height: ${this.height}px`]: !!this.height,
-      [`width: ${this.width}px`]: !!this.width
-    })}
-        class=${cn("bg-neutral-100 grid", {
-      [this.mediumStyles]: !this.customClass && this.size === "medium",
-      [this.smallStyles]: !this.customClass && this.size === "small",
-      [this.smallHoverStyles]: this.isHoverable && this.size === "small",
-      [this.customClass]: !!this.customClass,
-      "w-full": !this.width
-    })}
-      >
-        <div
-          style=${o({
-      backgroundImage: this.backgroundImageOrGradient()
-    })}
-          class=${cn(
-      "row-end-1 col-span-1 col-end-1 row-span-1 h-full w-full bg-center bg-cover rounded-24 relative",
-      this.headerClass
-    )}
-        >
-          ${this.backgroundUrl && x` <div
-            class="h-full full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
-          ></div>`}
-          <div>
-            <slot name="header"></slot>
-          </div>
-        </div>
-        <div
-          class="grid grid-rows-[1fr,auto] row-end-1 col-span-1 col-end-1 row-span-1"
-        >
-          <div></div>
-          <div class="bg-neutral-100 rounded-24 relative">
-            <lukso-profile
-              profile-url=${this.profileUrl}
-              size="large"
-              profile-address=${this.profileAddress}
-              has-identicon
-              class="absolute -top-[40px] left-[calc(50%_-_40px)] z-10"
-            ></lukso-profile>
-            <div
-              class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-3"
-            >
-              <div
-                class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
-              ></div>
-            </div>
-            <slot name="content"></slot>
-          </div>
-        </div>
-      </div>
-    `;
+/**
+ * @param baseConfig Config where other config will be merged into. This object will be mutated.
+ * @param configExtension Partial config to merge into the `baseConfig`.
+ */
+function mergeConfigs(baseConfig, {
+  cacheSize,
+  prefix,
+  separator,
+  extend = {},
+  override = {}
+}) {
+  overrideProperty(baseConfig, 'cacheSize', cacheSize);
+  overrideProperty(baseConfig, 'prefix', prefix);
+  overrideProperty(baseConfig, 'separator', separator);
+  for (const configKey in override) {
+    overrideConfigProperties(baseConfig[configKey], override[configKey]);
   }
-  profile2Template() {
-    return x`
-      <div
-        data-testid="card"
-        style=${customStyleMap({
-      [`min-height: ${this.height}px`]: !!this.height,
-      [`width: ${this.width}px`]: !!this.width
-    })}
-        class=${cn("bg-neutral-100 grid grid-rows-[auto,1fr]", {
-      [this.mediumStyles]: !this.customClass && this.size === "medium",
-      [this.smallStyles]: !this.customClass && this.size === "small",
-      [this.smallHoverStyles]: this.isHoverable && this.size === "small",
-      [this.customClass]: !!this.customClass,
-      ["w-full"]: !this.width
-    })}
-      >
-        <div
-          style=${o({
-      backgroundImage: this.backgroundImageOrGradient()
-    })}
-          class=${cn(
-      "min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-100",
-      this.headerClass
-    )}
-        >
-          ${this.backgroundUrl && x`<div
-            class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10/10 absolute"
-          ></div>`}
-          <div>
-            <slot name="header"></slot>
-          </div>
-        </div>
-        <div class="grid grid-rows-[max-content,auto]">
-          <div class="bg-neutral-100 relative">
-            <lukso-profile
-              profile-url=${this.profileUrl}
-              size="large"
-              profile-address=${this.profileAddress}
-              has-identicon
-              class="absolute -top-[40px] left-[calc(50%_-_40px)] z-10"
-            ></lukso-profile>
-            <div
-              class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-2"
-            >
-              <div
-                class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
-              ></div>
-            </div>
-            <slot name="content"></slot>
-          </div>
-          <div
-            class="bg-neutral-97 rounded-b-24 shadow-neutral-inner-shadow-top"
-          >
-            <slot name="bottom"></slot>
-          </div>
-        </div>
-      </div>
-    `;
+  for (const key in extend) {
+    mergeConfigProperties(baseConfig[key], extend[key]);
   }
-  heroTemplate() {
-    return x`
-      <div
-        data-testid="card"
-        style=${customStyleMap({
-      [`min-height: ${this.height}px`]: !!this.height,
-      [`width: ${this.width}px`]: !!this.width
-    })}
-        class=${cn("h-[240px] flex bg-neutral-100", {
-      [this.mediumStyles]: !this.customClass && this.size === "medium",
-      [this.smallStyles]: !this.customClass && this.size === "small",
-      [this.smallHoverStyles]: this.isHoverable && this.size === "small",
-      [this.customClass]: !!this.customClass,
-      ["w-full"]: !this.width
-    })}
-      >
-        <div
-          style=${o({
-      backgroundImage: `url(${this.backgroundUrl})`
-    })}
-          class="h-full w-full -mb-6 bg-center bg-cover rounded-24 relative"
-        >
-          ${this.backgroundUrl && x`<div
-            class="h-full w-full rounded-24 bg-neutral-20/10 absolute"
-          ></div>`}
-          <div
-            class="h-full w-full flex flex-col items-center justify-center  absolute"
-          >
-            <slot name="content"></slot>
-          </div>
-        </div>
-      </div>
-    `;
+  return baseConfig;
+}
+function overrideProperty(baseObject, overrideKey, overrideValue) {
+  if (overrideValue !== undefined) {
+    baseObject[overrideKey] = overrideValue;
   }
-  dappTemplate() {
-    return x`
-      <div
-        data-testid="card"
-        style=${customStyleMap({
-      [`min-height: ${this.height}px`]: !!this.height,
-      [`width: ${this.width}px`]: !!this.width
-    })}
-        class=${cn("bg-neutral-100 grid grid-rows-[auto,1fr]", {
-      [this.mediumStyles]: !this.customClass && this.size === "medium",
-      [this.smallStyles]: !this.customClass && this.size === "small",
-      [this.smallHoverStyles]: this.isHoverable && this.size === "small",
-      [this.customClass]: !!this.customClass,
-      ["w-full"]: !this.width
-    })}
-      >
-        <div
-          style=${o({
-      backgroundImage: this.backgroundImageOrGradient()
-    })}
-          class=${cn(
-      "min-h-[240px] bg-center bg-cover rounded-[24px_24px_0_0] relative",
-      this.headerClass
-    )}
-        >
-          <div>
-            <slot name="header"></slot>
-          </div>
-        </div>
-        <div
-          class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-[0_0_24px_24px] relative"
-        >
-          <slot name="content"></slot>
-        </div>
-      </div>
-    `;
+}
+function overrideConfigProperties(baseObject, overrideObject) {
+  if (overrideObject) {
+    for (const key in overrideObject) {
+      overrideProperty(baseObject, key, overrideObject[key]);
+    }
   }
-  render() {
-    switch (this.variant) {
-      case "with-header":
-        return this.withHeaderTemplate();
-      case "profile":
-        return this.profileTemplate();
-      case "profile-2":
-        return this.profile2Template();
-      case "hero":
-        return this.heroTemplate();
-      case "dapp":
-        return this.dappTemplate();
-      default:
-        return this.basicTemplate();
+}
+function mergeConfigProperties(baseObject, mergeObject) {
+  if (mergeObject) {
+    for (const key in mergeObject) {
+      const mergeValue = mergeObject[key];
+      if (mergeValue !== undefined) {
+        baseObject[key] = (baseObject[key] || []).concat(mergeValue);
+      }
     }
   }
+}
+function extendTailwindMerge(configExtension, ...createConfig) {
+  return typeof configExtension === 'function' ? createTailwindMerge(getDefaultConfig, configExtension, ...createConfig) : createTailwindMerge(() => mergeConfigs(getDefaultConfig(), configExtension), ...createConfig);
+}
+
+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))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+const customTwMerge = extendTailwindMerge({
+  classGroups: {
+    shadow: Object.keys(boxShadows).map((s) => `shadow-${s}`),
+    "font-size": Object.keys(fontSizes).map((s) => `text-${s}`),
+    "font-weight": Object.keys(fontWeights).map((s) => `font-${s}`),
+    "line-height": Object.keys(lineHeights).map((s) => `leading-${s}`),
+    scale: Object.keys(scales).map((s) => `scale-${s}`),
+    height: Object.keys(heights).map((s) => `h-${s}`),
+    borderRadius: Object.keys(borderRadius).map((s) => `rounded-${s}`),
+    colors: Object.entries(colorPalette).reduce((acc, currentVal) => {
+      const colors = Object.keys(currentVal[1]).map(
+        (c) => `text-${currentVal[0]}-${c}`
+      );
+      return [...acc, ...colors];
+    }, [])
+  }
+});
+const cn = (...inputs) => {
+  return customTwMerge(clsx(inputs));
 };
-__decorateClass([
-  n({ type: String })
-], LuksoCard.prototype, "variant", 2);
-__decorateClass([
-  n({ type: String, attribute: "background-url" })
-], LuksoCard.prototype, "backgroundUrl", 2);
-__decorateClass([
-  n({ type: String, attribute: "profile-url" })
-], LuksoCard.prototype, "profileUrl", 2);
-__decorateClass([
-  n({ type: String, attribute: "profile-address" })
-], LuksoCard.prototype, "profileAddress", 2);
-__decorateClass([
-  n({ type: Number })
-], LuksoCard.prototype, "width", 2);
-__decorateClass([
-  n({ type: Number })
-], LuksoCard.prototype, "height", 2);
-__decorateClass([
-  n({ type: String, attribute: "custom-class" })
-], LuksoCard.prototype, "customClass", 2);
-__decorateClass([
-  n({ type: String, attribute: "header-class" })
-], LuksoCard.prototype, "headerClass", 2);
-__decorateClass([
-  n({ type: String })
-], LuksoCard.prototype, "size", 2);
-__decorateClass([
-  n({ type: Boolean, attribute: "is-hoverable" })
-], LuksoCard.prototype, "isHoverable", 2);
-LuksoCard = __decorateClass([
-  e("lukso-card")
-], LuksoCard);
 
-export { LuksoCard as L, cn as c };
+export { cn as c };