app-studio 0.2.18 → 0.2.21

package/dist/appstudio.esm.js

@@ -2,6 +2,30 @@ import React, { createContext, useContext, useMemo, useEffect, useState } from '
 import Color from 'color-convert';
 
 const palette = {
+  whiteAlpha: {
+    50: 'rgba(255, 255, 255, 0.04)',
+    100: 'rgba(255, 255, 255, 0.06)',
+    200: 'rgba(255, 255, 255, 0.08)',
+    300: 'rgba(255, 255, 255, 0.16)',
+    400: 'rgba(255, 255, 255, 0.24)',
+    500: 'rgba(255, 255, 255, 0.36)',
+    600: 'rgba(255, 255, 255, 0.48)',
+    700: 'rgba(255, 255, 255, 0.64)',
+    800: 'rgba(255, 255, 255, 0.80)',
+    900: 'rgba(255, 255, 255, 0.92)'
+  },
+  blackAlpha: {
+    50: 'rgba(0, 0, 0, 0.04)',
+    100: 'rgba(0, 0, 0, 0.06)',
+    200: 'rgba(0, 0, 0, 0.08)',
+    300: 'rgba(0, 0, 0, 0.16)',
+    400: 'rgba(0, 0, 0, 0.24)',
+    500: 'rgba(0, 0, 0, 0.36)',
+    600: 'rgba(0, 0, 0, 0.48)',
+    700: 'rgba(0, 0, 0, 0.64)',
+    800: 'rgba(0, 0, 0, 0.80)',
+    900: 'rgba(0, 0, 0, 0.92)'
+  },
   white: {
     50: 'rgba(255, 255, 255, 0.04)',
     100: 'rgba(255, 255, 255, 0.08)',
@@ -464,6 +488,7 @@ const ThemeProvider = _ref => {
   }, children);
 };
 
+// ResponsiveContext.tsx
 const defaultBreakpointsConfig = {
   xs: 0,
   sm: 340,
@@ -471,37 +496,41 @@ const defaultBreakpointsConfig = {
   lg: 1080,
   xl: 1300
 };
-const defaultDeviceConfig = {
-  mobile: ['xs', 'sm'],
-  tablet: ['md', 'lg'],
-  desktop: ['lg', 'xl']
-};
+// Inclure la fonction corrigée getMediaQueries ici
 const getMediaQueries = b => {
-  const defaultKeys = Object.keys(b);
-  const breakpointValue = defaultKeys.map(breakpoint => {
-    const value = {
-      breakpoint: breakpoint,
-      min: b[breakpoint],
-      max: 0
-    };
-    return value;
-  }).sort((a, b) => a.min - b.min);
-  breakpointValue.reduce((a, b) => {
-    if (b) a.max = b.min;
-    return b;
-  });
+  const sortedBreakpoints = Object.keys(b).map(key => ({
+    breakpoint: key,
+    min: b[key],
+    max: 0
+  })).sort((a, b) => a.min - b.min);
+  // Définir les valeurs max pour chaque breakpoint sauf le dernier
+  for (let i = 0; i < sortedBreakpoints.length - 1; i++) {
+    sortedBreakpoints[i].max = sortedBreakpoints[i + 1].min - 1;
+  }
+  // Le dernier breakpoint n'a pas de max
   const query = {};
-  breakpointValue.map(sizeScreen => {
-    query[sizeScreen.breakpoint] = `only screen ${sizeScreen.min && sizeScreen.min >= 0 ? 'and (min-width:' + sizeScreen.min + 'px)' : ''} ${sizeScreen.max && sizeScreen.max >= 0 ? 'and (max-width:' + sizeScreen.max + 'px)' : ''}`;
+  sortedBreakpoints.forEach(sizeScreen => {
+    let mediaQuery = 'only screen';
+    if (sizeScreen.min !== undefined && sizeScreen.min >= 0) {
+      mediaQuery += ` and (min-width: ${sizeScreen.min}px)`;
+    }
+    if (sizeScreen.max !== undefined && sizeScreen.max > 0) {
+      mediaQuery += ` and (max-width: ${sizeScreen.max}px)`;
+    }
+    query[sizeScreen.breakpoint] = mediaQuery.trim();
   });
   return query;
 };
-const defaultScreenConfig = {
+const defaultDeviceConfig = {
+  mobile: ['xs', 'sm'],
+  tablet: ['md', 'lg'],
+  desktop: ['lg', 'xl']
+};
+const ResponsiveContext = /*#__PURE__*/createContext({
   breakpoints: defaultBreakpointsConfig,
   devices: defaultDeviceConfig,
   mediaQueries: /*#__PURE__*/getMediaQueries(defaultBreakpointsConfig)
-};
-const ResponsiveContext = /*#__PURE__*/createContext(defaultScreenConfig);
+});
 const useResponsiveContext = () => useContext(ResponsiveContext);
 const ResponsiveProvider = _ref => {
   let {
@@ -519,7 +548,6 @@ const ResponsiveProvider = _ref => {
 };
 
 // List of numeric properties that don't need 'px' suffix
-const NumberProps = /*#__PURE__*/new Set(['numberOfLines', 'fontWeight', 'timeStamp', 'flex', 'flexGrow', 'flexShrink', 'order', 'zIndex', 'aspectRatio', 'shadowOpacity', 'shadowRadius', 'scale', 'opacity', 'min', 'max', 'now']);
 // Keys to exclude when passing props to the component
 const excludedKeys = /*#__PURE__*/new Set(['on', 'shadow', 'only', 'media', 'css', 'size', 'paddingHorizontal', 'paddingVertical', 'marginHorizontal', 'marginVertical', 'animate']);
 // Keys to exclude when passing props to the component
@@ -527,10 +555,6 @@ const extraKeys = /*#__PURE__*/new Set(['on', 'shadow', 'only', 'media', 'css'])
 const includeKeys = /*#__PURE__*/new Set(['src', 'alt', 'style', 'as']);
 
 // styleHelpers.ts
-// Excluded keys imported from constants.ts
-// import { excludedKeys } from './constants';
-const StyleProps = /*#__PURE__*/new Set(['alignContent', 'alignItems', 'alignSelf', 'alignmentBaseline', 'all', 'animation', 'animationDelay', 'animationDirection', 'animationDuration', 'animationFillMode', 'animationIterationCount', 'animationName', 'animationPlayState', 'animationTimingFunction', 'appearance', 'backdropFilter', 'backfaceVisibility', 'background', 'backgroundAttachment', 'backgroundBlendMode', 'backgroundClip', 'backgroundColor', 'backgroundImage', 'backgroundOrigin', 'backgroundPosition', 'backgroundPositionX', 'backgroundPositionY', 'backgroundRepeat', 'backgroundRepeatX', 'backgroundRepeatY', 'backgroundSize', 'baselineShift', 'blockSize', 'border', 'borderBlockEnd', 'borderBlockEndColor', 'borderBlockEndStyle', 'borderBlockEndWidth', 'borderBlockStart', 'borderBlockStartColor', 'borderBlockStartStyle', 'borderBlockStartWidth', 'borderBottom', 'borderBottomColor', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStyle', 'borderBottomWidth', 'borderCollapse', 'borderColor', 'borderImage', 'borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth', 'borderInlineEnd', 'borderInlineEndColor', 'borderInlineEndStyle', 'borderInlineEndWidth', 'borderInlineStart', 'borderInlineStartColor', 'borderInlineStartStyle', 'borderInlineStartWidth', 'borderLeft', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRadius', 'borderRight', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderSpacing', 'borderStyle', 'borderTop', 'borderTopColor', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStyle', 'borderTopWidth', 'borderWidth', 'bottom', 'boxShadow', 'boxSizing', 'breakAfter', 'breakBefore', 'breakInside', 'bufferedRendering', 'captionSide', 'caretColor', 'clear', 'clip', 'clipPath', 'clipRule', 'color', 'colorInterpolation', 'colorInterpolationFilters', 'colorRendering', 'columnCount', 'columnFill', 'columnGap', 'columnRule', 'columnRuleColor', 'columnRuleStyle', 'columnRuleWidth', 'columnSpan', 'columnWidth', 'columns', 'contain', 'content', 'counterIncrement', 'counterReset', 'cursor', 'cx', 'cy', 'd', 'direction', 'display', 'dominantBaseline', 'emptyCells', 'fill', 'fillOpacity', 'fillRule', 'filter', 'flex', 'flexBasis', 'flexDirection', 'flexFlow', 'flexGrow', 'flexShrink', 'flexWrap', 'float', 'floodColor', 'floodOpacity', 'font', 'fontDisplay', 'fontFamily', 'fontFeatureSettings', 'fontKerning', 'fontSize', 'fontStretch', 'fontStyle', 'fontVariant', 'fontVariantCaps', 'fontVariantEastAsian', 'fontVariantLigatures', 'fontVariantNumeric', 'fontVariationSettings', 'fontWeight', 'gap', 'grid', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridColumn', 'gridColumnEnd', 'gridColumnGap', 'gridColumnStart', 'gridGap', 'gridRow', 'gridRowEnd', 'gridRowGap', 'gridRowStart', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows', 'height', 'hyphens', 'imageRendering', 'inlineSize', 'isolation', 'justifyContent', 'justifyItems', 'justifySelf', 'left', 'letterSpacing', 'lightingColor', 'lineBreak', 'lineHeight', 'listStyle', 'listStyleImage', 'listStylePosition', 'listStyleType', 'margin', 'marginBlockEnd', 'marginBlockStart', 'marginBottom', 'marginInlineEnd', 'marginInlineStart', 'marginLeft', 'marginRight', 'marginTop', 'marker', 'markerEnd', 'markerMid', 'markerStart', 'mask', 'maskType', 'maxBlockSize', 'maxHeight', 'maxInlineSize', 'maxWidth', 'maxZoom', 'minBlockSize', 'minHeight', 'minInlineSize', 'minWidth', 'minZoom', 'mixBlendMode', 'objectFit', 'objectPosition', 'offset', 'offsetDistance', 'offsetPath', 'offsetRotate', 'opacity', 'order', 'orientation', 'orphans', 'outline', 'outlineColor', 'outlineOffset', 'outlineStyle', 'outlineWidth', 'overflow', 'overflowAnchor', 'overflowWrap', 'overflowX', 'overflowY', 'overscrollBehavior', 'overscrollBehaviorBlock', 'overscrollBehaviorInline', 'overscrollBehaviorX', 'overscrollBehaviorY', 'padding', 'paddingBlockEnd', 'paddingBlockStart', 'paddingBottom', 'paddingInlineEnd', 'paddingInlineStart', 'paddingLeft', 'paddingRight', 'paddingTop', 'page', 'pageBreakAfter', 'pageBreakBefore', 'pageBreakInside', 'paintOrder', 'perspective', 'perspectiveOrigin', 'placeContent', 'placeItems', 'placeSelf', 'pointerEvents', 'position', 'quotes', 'r', 'resize', 'right', 'rowGap', 'rx', 'ry', 'scrollBehavior', 'scrollMargin', 'scrollMarginBlock', 'scrollMarginBlockEnd', 'scrollMarginBlockStart', 'scrollMarginBottom', 'scrollMarginInline', 'scrollMarginInlineEnd', 'scrollMarginInlineStart', 'scrollMarginLeft', 'scrollMarginRight', 'scrollMarginTop', 'scrollPadding', 'scrollPaddingBlock', 'scrollPaddingBlockEnd', 'scrollPaddingBlockStart', 'scrollPaddingBottom', 'scrollPaddingInline', 'scrollPaddingInlineEnd', 'scrollPaddingInlineStart', 'scrollPaddingLeft', 'scrollPaddingRight', 'scrollPaddingTop', 'scrollSnapAlign', 'scrollSnapStop', 'scrollSnapType', 'shapeImageThreshold', 'shapeMargin', 'shapeOutside', 'shapeRendering', 'size', 'speak', 'src', 'stopColor', 'stopOpacity', 'stroke', 'strokeDasharray', 'strokeDashoffset', 'strokeLinecap', 'strokeLinejoin', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'tabSize', 'tableLayout', 'textAlign', 'textAlignLast', 'textAnchor', 'textCombineUpright', 'textDecoration', 'textDecorationColor', 'textDecorationLine', 'textDecorationSkipInk', 'textDecorationStyle', 'textDecorationThickness', 'textEmphasis', 'textIndent', 'textOrientation', 'textOverflow', 'textRendering', 'textShadow', 'textSizeAdjust', 'textTransform', 'textUnderlinePosition', 'textJustify', 'top', 'touchAction', 'transform', 'transformBox', 'transformOrigin', 'transformStyle', 'transition', 'transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction', 'unicodeBidi', 'unicodeRange', 'userSelect', 'userZoom', 'vectorEffect', 'verticalAlign', 'visibility', 'wrap', 'whiteSpace', 'widows', 'width', 'willChange', 'wordBreak', 'wordSpacing', 'wordWrap', 'writingMode', 'x', 'y', 'zIndex', 'zoom', 'alwaysBounceHorizontal', 'alwaysBounceVertical', 'automaticallyAdjustContentInsets', 'bounces', 'bouncesZoom', 'canCancelContentTouches', 'centerContent', 'contentLayoutStyle', 'contentInset', 'contentInsetAdjustmentBehavior', 'contentOffset', 'decelerationRate', 'directionalLockEnabled', 'disableIntervalMomentum', 'disableScrollViewPanResponder', 'endFillColor', 'fadingEdgeLength', 'horizontal', 'indicatorStyle', 'invertStickyHeaders', 'keyboardDismissMode', 'keyboardShouldPersistTaps', 'maintainVisibleContentPosition', 'maximumZoomScale', 'minimumZoomScale', 'nestedScrollEnabled', 'onContentSizeChange', 'onMomentumScrollBegin', 'onMomentumScrollEnd', 'onScroll', 'onScrollBeginDrag', 'onScrollEndDrag', 'onScrollToTop', 'overScrollMode', 'pagingEnabled', 'persistentScrollbar', 'pinchGestureEnabled', 'refreshControl', 'removeClippedSubviews', 'scrollBarThumbImage', 'scrollEnabled', 'scrollEventThrottle', 'scrollIndicatorInsets', 'scrollPerfTag', 'scrollToOverflowEnabled', 'scrollsToTop', 'DEPRECATED_sendUpdatedChildFrames', 'showsHorizontalScrollIndicator', 'showsVerticalScrollIndicator', 'snapToAlignment', 'snapToEnd', 'snapToInterval', 'snapToOffsets', 'snapToStart', 'stickyHeaderIndices', 'zoomScale', 'borderRightColor', 'backfaceVisibility', 'borderBottomColor', 'borderBottomEndRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStartRadius', 'borderBottomWidth', 'borderColor', 'borderEndColor', 'borderLeftColor', 'borderLeftWidth', 'borderRadius', 'backgroundColor', 'borderRightWidth', 'borderStartColor', 'borderStyle', 'borderTopColor', 'borderTopEndRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStartRadius', 'borderTopWidth', 'borderWidth', 'border', 'opacity', 'elevation', 'shadowColor', 'shadowOffset', 'shadowOpacity', 'shadowRadius', 'alignContent', 'alignItems', 'alignSelf', 'aspectRatio', 'borderBottomWidth', 'borderEndWidth', 'borderLeftWidth', 'borderRightWidth', 'borderStartWidth', 'borderTopWidth', 'borderWidth', 'bottom', 'direction', 'display', 'end', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'height', 'justifyContent', 'left', 'margin', 'marginBottom', 'marginEnd', 'marginHorizontal', 'marginLeft', 'marginRight', 'marginStart', 'marginTop', 'marginVertical', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'overflow', 'overflowX', 'overflowY', 'padding', 'paddingBottom', 'paddingEnd', 'paddingHorizontal', 'paddingLeft', 'paddingRight', 'paddingStart', 'paddingTop', 'paddingVertical', 'position', 'right', 'start', 'top', 'width', 'zIndex', 'borderTopRightRadius', 'backfaceVisibility', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderColor', 'borderRadius', 'borderTopLeftRadius', 'backgroundColor', 'borderWidth', 'opacity', 'overflow', 'overflowX', 'overflowY', 'resizeMode', 'tintColor', 'overlayColor', 'transform', 'transformMatrix', 'rotation', 'scaleX', 'scaleY', 'translateX', 'translateY', 'perspective', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'skewX', 'skewY', 'testID', 'decomposedMatrix', 'gridRowStart', 'gridRowEnd', 'gridColumnStart', 'gridColumnEnd', 'lineClamp', 'writingMode', 'objectFit', 'objectPosition', 'placeItems', 'placeSelf']);
-const nonStyleAttributes = /*#__PURE__*/new Set(['length', 'parentRule', 'src']);
 // Function to convert style object to CSS string
 const styleObjectToCss = styleObj => {
   return Object.entries(styleObj).map(_ref => {
@@ -546,71 +570,17 @@ const toKebabCase = str => str.replace(/([A-Z])/g, match => '-' + match.toLowerC
 //   // For simplicity, we assume all props not in excludedKeys are style props
 //   return !excludedKeys.has(prop);
 // };
-const isStyleProp = property => {
-  return StyleProps.has(property) || nonStyleAttributes.has(property);
-};
-// Function to process and normalize style properties
-const processStyleProperty = (property, value, getColor) => {
-  if (typeof value === 'number' && !NumberProps.has(property)) {
-    return `${value}px`;
-  } else if (property.toLowerCase().includes('color')) {
-    return getColor(value);
-  } else {
-    return value;
-  }
-};
-
-/* eslint-disable @typescript-eslint/no-unused-vars */
-let keyframesCounter = 0;
-const keyframesCache = /*#__PURE__*/new Map();
-const generateKeyframes = animation => {
-  // Exclure les propriétés qui ne font pas partie des keyframes
-  const {
-    duration,
-    timingFunction,
-    delay,
-    iterationCount,
-    direction,
-    fillMode,
-    playState,
-    ...keyframesDef
-  } = animation;
-  // Générer une clé pour le cache basée sur les keyframes
-  const animationConfigString = JSON.stringify(keyframesDef);
-  if (keyframesCache.has(animationConfigString)) {
-    const keyframesName = keyframesCache.get(animationConfigString);
-    return {
-      keyframesName,
-      keyframes: ''
-    }; // Les keyframes existent déjà
-  }
-
-  const keyframesName = `animation-${keyframesCounter++}`;
-  keyframesCache.set(animationConfigString, keyframesName);
-  const keyframesContent = [];
-  // Trier les clés pour assurer un ordre cohérent
-  const keyframeKeys = Object.keys(keyframesDef).sort((a, b) => {
-    const getPercentage = key => {
-      if (key === 'from') return 0;
-      if (key === 'to' || key === 'enter') return 100;
-      return parseInt(key.replace('%', ''), 10);
-    };
-    return getPercentage(a) - getPercentage(b);
-  });
-  keyframeKeys.forEach(key => {
-    const cssKey = key === 'enter' ? 'to' : key; // Remplacer 'enter' par 'to'
-    const styles = keyframesDef[key];
-    keyframesContent.push(`${cssKey} { ${styleObjectToCss(styles)} }`);
-  });
-  const keyframes = `
-    @keyframes ${keyframesName} {
-      ${keyframesContent.join('\n')}
-    }
-  `;
-  return {
-    keyframesName,
-    keyframes
-  };
+//const cssExtraProps: Array<keyof CSSProperties> = [
+const cssExtraProps = ['textJustify', 'lineClamp'];
+// Create a set of all valid CSS properties
+const StyleProps = [... /*#__PURE__*/Object.keys( /*#__PURE__*/document.createElement('div').style), ...cssExtraProps];
+// Create a set of all valid CSS properties
+const StyledProps = /*#__PURE__*/new Set(StyleProps);
+// console.log({
+//   props: JSON.stringify(StyleProps.filter((prop) => !cssProperties.has(prop))),
+// });
+const isStyleProp = prop => {
+  return (StyledProps.has(prop) || extraKeys.has(prop)) && !includeKeys.has(prop);
 };
 
 const Shadows = {
@@ -706,254 +676,314 @@ const Shadows = {
   }
 };
 
-// Element.tsx
-const styleSheet = /*#__PURE__*/(() => {
-  if (typeof document !== 'undefined') {
-    let styleTag = /*#__PURE__*/document.getElementById('dynamic-styles');
-    if (!styleTag) {
-      styleTag = /*#__PURE__*/document.createElement('style');
-      styleTag.id = 'dynamic-styles';
-      document.head.appendChild(styleTag);
-    }
-    return styleTag.sheet;
-  }
-  return null;
-})();
-/**
- * Fonction de hachage simple et rapide basée sur l'algorithme djb2.
- * @param {string} str - La chaîne de caractères à hacher.
- * @returns {number} - Le hachage sous forme d'entier non signé 32 bits.
- */
-const hashString = str => {
-  let hash = 5381;
-  for (let i = 0; i < str.length; i++) {
-    // hash * 33 + c
-    hash = (hash << 5) + hash + str.charCodeAt(i);
-    // Pour éviter les dépassements, on utilise l'opérateur >>> 0
-    hash = hash >>> 0;
-  }
-  return hash;
-};
-/**
- * Fonction pour hacher un objet en utilisant JSON.stringify et hashString.
- * @param {Object} obj - L'objet à hacher.
- * @returns {number} - Le hachage de l'objet.
- */
-const hashObject = obj => {
-  const str = JSON.stringify(obj);
-  return hashString(str).toString();
-};
-const classCache = /*#__PURE__*/new Map();
-const cssRulesCache = /*#__PURE__*/new Map();
-let classNameCounter = 0;
-const generateClassName = styleProps => {
-  // Extract only relevant, primitive style properties
-  // Generate a unique hash based on relevantProps
-  const hash = hashObject(styleProps);
-  if (classCache.has(hash)) {
-    return classCache.get(hash);
-  } else {
-    const className = 'clz-' + classNameCounter++;
-    classCache.set(hash, className);
-    return className;
+/* eslint-disable @typescript-eslint/no-unused-vars */
+let keyframesCounter = 0;
+const keyframesCache = /*#__PURE__*/new Map();
+const generateKeyframes = animation => {
+  // Exclure les propriétés qui ne font pas partie des keyframes
+  const {
+    duration,
+    timingFunction,
+    delay,
+    iterationCount,
+    direction,
+    fillMode,
+    playState,
+    ...keyframesDef
+  } = animation;
+  // Générer une clé pour le cache basée sur les keyframes
+  const animationConfigString = JSON.stringify(keyframesDef);
+  if (keyframesCache.has(animationConfigString)) {
+    const keyframesName = keyframesCache.get(animationConfigString);
+    return {
+      keyframesName,
+      keyframes: ''
+    }; // Les keyframes existent déjà
   }
-};
-const useDynamicStyles = cssRules => {
-  useEffect(() => {
-    if (!styleSheet) return;
-    cssRules.forEach(rule => {
-      try {
-        if (Array.from(styleSheet.cssRules).some(cssRule => cssRule.cssText === rule)) {
-          return;
-        }
-        styleSheet.insertRule(rule, styleSheet.cssRules.length);
-      } catch (error) {
-        console.error('Error inserting CSS rule:', rule, error);
-      }
-    });
-  }, [cssRules]);
-};
-const generateCssRules = (selector, styles, getColor, mediaQueries) => {
-  const rules = [];
-  const mainStyles = {};
-  const nestedMediaQueries = {};
-  Object.keys(styles).forEach(key => {
-    const value = styles[key];
-    if (key.startsWith('@media ')) {
-      const mediaQuery = key;
-      if (!nestedMediaQueries[mediaQuery]) {
-        nestedMediaQueries[mediaQuery] = {};
-      }
-      Object.assign(nestedMediaQueries[mediaQuery], value);
-    } else if (key.startsWith('&:')) {
-      const pseudoSelector = key.slice(1);
-      const nestedStyles = styles[key];
-      const nestedRules = generateCssRules(`${selector}${pseudoSelector}`, nestedStyles, getColor
-      // Ne pas passer mediaQueries ici
-      );
 
-      rules.push(...nestedRules);
-    } else {
-      mainStyles[key] = value;
-    }
+  const keyframesName = `animation-${keyframesCounter++}`;
+  keyframesCache.set(animationConfigString, keyframesName);
+  const keyframesContent = [];
+  // Trier les clés pour assurer un ordre cohérent
+  const keyframeKeys = Object.keys(keyframesDef).sort((a, b) => {
+    const getPercentage = key => {
+      if (key === 'from') return 0;
+      if (key === 'to' || key === 'enter') return 100;
+      return parseInt(key.replace('%', ''), 10);
+    };
+    return getPercentage(a) - getPercentage(b);
+  });
+  keyframeKeys.forEach(key => {
+    const cssKey = key === 'enter' ? 'to' : key; // Remplacer 'enter' par 'to'
+    const styles = keyframesDef[key];
+    keyframesContent.push(`${cssKey} { ${styleObjectToCss(styles)} }`);
   });
-  // Gestion des media queries
-  // eslint-disable-next-line prefer-const
-  let mediaBreakpoints = {};
-  if (mediaQueries) {
-    for (const query in mediaQueries) {
-      const queries = mediaQueries[query].trim();
-      mediaBreakpoints['@media ' + queries] = query;
+  const keyframes = `
+    @keyframes ${keyframesName} {
+      ${keyframesContent.join('\n')}
     }
-  }
-  if (Object.keys(mainStyles).length > 0 || Object.keys(nestedMediaQueries).length > 0) {
-    const processedStyles = {};
-    for (const property in mainStyles) {
-      processedStyles[property] = processStyleProperty(property, mainStyles[property], getColor);
+  `;
+  return {
+    keyframesName,
+    keyframes
+  };
+};
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+class UtilityClassManager {
+  constructor(propertyShorthand, maxCacheSize) {
+    if (maxCacheSize === void 0) {
+      maxCacheSize = 10000;
     }
-    const cssRule = `${selector} { ${styleObjectToCss(processedStyles)} }`;
-    rules.push(cssRule);
-    for (let mediaQuery in nestedMediaQueries) {
-      mediaQuery = mediaQuery.trim();
-      const mediaStyles = nestedMediaQueries[mediaQuery];
-      const processedMediaStyles = {};
-      for (const property in mediaStyles) {
-        processedMediaStyles[property] = processStyleProperty(property, mediaStyles[property], getColor);
-      }
-      const cssProperties = styleObjectToCss(processedMediaStyles);
-      const mediaRule = `${mediaQuery} { ${selector} { ${cssProperties} } }`;
-      rules.push(mediaRule);
-      if (mediaBreakpoints[mediaQuery]) {
-        const breakpoint = mediaBreakpoints[mediaQuery];
-        const bpRule = `.${breakpoint} ${selector} { ${cssProperties} }`;
-        rules.push(bpRule);
+    this.styleSheet = null;
+    this.classCache = new Map();
+    this.propertyShorthand = propertyShorthand;
+    this.maxCacheSize = maxCacheSize;
+    this.initStyleSheet();
+  }
+  initStyleSheet() {
+    if (typeof document !== 'undefined') {
+      let styleTag = document.getElementById('utility-classes');
+      if (!styleTag) {
+        styleTag = document.createElement('style');
+        styleTag.id = 'utility-classes';
+        document.head.appendChild(styleTag);
       }
+      this.styleSheet = styleTag.sheet;
     }
   }
-  return rules;
-};
-// Function to apply styles to a component
-const computeStyleProps = props => {
-  const styleProps = {};
-  const keyframesList = [];
-  // Gestion de la taille de l'élément
-  const size = props.height !== undefined && props.width !== undefined && props.height === props.width ? props.height : props.size ? props.size : null;
-  if (size) {
-    styleProps.height = styleProps.width = size;
-  }
-  // Gestion du padding et de la marge
-  if (props.paddingHorizontal) {
-    styleProps.paddingLeft = props.paddingHorizontal;
-    styleProps.paddingRight = props.paddingHorizontal;
-  }
-  if (props.marginHorizontal) {
-    styleProps.marginLeft = props.marginHorizontal;
-    styleProps.marginRight = props.marginHorizontal;
+  escapeClassName(className) {
+    return className.replace(/:/g, '\\:');
   }
-  if (props.paddingVertical) {
-    styleProps.paddingTop = props.paddingVertical;
-    styleProps.paddingBottom = props.paddingVertical;
-  }
-  if (props.marginVertical) {
-    styleProps.marginTop = props.marginVertical;
-    styleProps.marginBottom = props.marginVertical;
-  }
-  // Application des ombres si spécifié
-  if (props.shadow) {
-    if (typeof props.shadow === 'number' || typeof props.shadow === 'boolean') {
-      const shadowValue = typeof props.shadow === 'number' && Shadows[props.shadow] !== undefined ? props.shadow : 2;
-      if (Shadows[shadowValue]) {
-        const shadowColor = Color.hex.rgb(Shadows[shadowValue].shadowColor) || [];
-        styleProps['boxShadow'] = `${Shadows[shadowValue].shadowOffset.height}px ${Shadows[shadowValue].shadowOffset.width}px ${Shadows[shadowValue].shadowRadius}px rgba(${shadowColor.join(',')},${Shadows[shadowValue].shadowOpacity})`;
+  injectRule(cssRule) {
+    if (this.styleSheet) {
+      try {
+        const existingRules = Array.from(this.styleSheet.cssRules).map(rule => rule.cssText);
+        if (!existingRules.includes(cssRule)) {
+          this.styleSheet.insertRule(cssRule, this.styleSheet.cssRules.length);
+        }
+      } catch (e) {
+        console.error(`Erreur lors de l'insertion de la règle CSS: "${cssRule}"`, e);
       }
-    } else {
-      const shadowColor = Color.hex.rgb(props.shadow.shadowColor) || [];
-      styleProps['boxShadow'] = `${props.shadow.shadowOffset.height}px ${props.shadow.shadowOffset.width}px ${props.shadow.shadowRadius}px rgba(${shadowColor.join(',')},${props.shadow.shadowOpacity})`;
     }
   }
-  // Gestion des animations
-  if (props.animate) {
-    const animation = props.animate;
-    const {
-      keyframesName,
-      keyframes
-    } = generateKeyframes(animation);
-    if (keyframes) {
-      keyframesList.push(keyframes);
+  addToCache(key, className) {
+    if (this.classCache.size >= this.maxCacheSize) {
+      const firstKey = this.classCache.keys().next().value;
+      this.classCache.delete(firstKey);
     }
-    styleProps.animationName = keyframesName;
-    styleProps.animationDuration = animation.duration || '1s';
-    styleProps.animationTimingFunction = animation.timingFunction || 'ease';
-    styleProps.animationDelay = animation.delay || '0s';
-    styleProps.animationIterationCount = `${animation.iterationCount || '1'}`;
-    styleProps.animationDirection = animation.direction || 'normal';
-    styleProps.animationFillMode = animation.fillMode || 'both';
-    styleProps.animationPlayState = animation.playState || 'running';
+    this.classCache.set(key, className);
   }
-  Object.keys(props).forEach(property => {
-    if (property !== 'style' && (isStyleProp(property) || extraKeys.has(property))) {
-      // Simple style property
-      styleProps[property] = props[property];
+  /**
+   * Génère un ou plusieurs noms de classes pour une propriété et une valeur donnée.
+   * @param property La propriété CSS (ex: 'padding', 'color').
+   * @param value La valeur de la propriété (ex: '10px', '#fff').
+   * @param context Le contexte de la classe ('base', 'pseudo', 'media').
+   * @param modifier Le modificateur pour les pseudo-classes ou media queries (ex: 'hover', 'sm').
+   * @param getColor Fonction pour convertir les couleurs si nécessaire.
+   * @param mediaQueries Un tableau de media queries associées (utilisé uniquement pour le contexte 'media').
+   * @returns Un tableau de noms de classes générés.
+   */
+  getClassNames(property, value, context, modifier, getColor, mediaQueries) {
+    if (context === void 0) {
+      context = 'base';
     }
-  });
-  return {
-    styleProps,
-    keyframes: keyframesList
+    if (modifier === void 0) {
+      modifier = '';
+    }
+    if (getColor === void 0) {
+      getColor = color => color;
+    }
+    if (mediaQueries === void 0) {
+      mediaQueries = [];
+    }
+    let processedValue = value;
+    // Si la propriété est une couleur, la convertir en valeur hexadécimale ou RGB
+    if (property.toLowerCase().includes('color')) {
+      processedValue = getColor(value);
+    }
+    let key = `${property}:${processedValue}`;
+    if (modifier) {
+      key = `${property}:${processedValue}|${modifier}`;
+    }
+    if (this.classCache.has(key)) {
+      return [this.classCache.get(key)];
+    }
+    // Générer un nom de classe unique avec le modificateur
+    let shorthand = this.propertyShorthand[property];
+    if (!shorthand) {
+      shorthand = property.replace(/([A-Z])/g, '-$1').toLowerCase();
+    }
+    // console.log({ shorthand, property, processedValue });
+    // Normaliser la valeur pour le nom de classe
+    let normalizedValue = processedValue.toString().replace(/\./g, 'p') // Remplacer les points par 'p'
+    .replace(/\s+/g, '-') // Remplacer les espaces par '-'
+    .replace(/[^a-zA-Z0-9\-]/g, ''); // Supprimer les autres caractères spéciaux
+    let baseClassName = `${shorthand}-${normalizedValue}`;
+    // Préfixer les noms de classe pour les pseudo-classes et media queries
+    let classNames = [];
+    if (context === 'pseudo' && modifier) {
+      // Pseudo-class : ajouter '-modifier' suffix
+      const pseudoClassName = `${baseClassName}-${modifier}`;
+      classNames.push(pseudoClassName);
+    } else if (context === 'media' && modifier) {
+      // Media query : générer une classe pour chaque media query associée
+      mediaQueries.forEach(() => {
+        const mediaClassName = `${modifier}:${baseClassName}`;
+        classNames.push(mediaClassName);
+      });
+    } else {
+      classNames.push(baseClassName);
+    }
+    // Convertir camelCase en kebab-case
+    const cssProperty = property.replace(/([A-Z])/g, '-$1').toLowerCase();
+    let valueForCss = processedValue;
+    // Ajouter des unités si nécessaire
+    if (typeof valueForCss === 'number') {
+      const propertiesWithUnits = ['width', 'height', 'padding', 'margin', 'padding-left', 'padding-right', 'padding-top', 'padding-bottom', 'margin-left', 'margin-right', 'margin-top', 'margin-bottom', 'transform', 'transition'];
+      if (propertiesWithUnits.includes(cssProperty)) {
+        valueForCss = `${valueForCss}px`;
+      }
+    }
+    // Construire les règles CSS pour chaque classe générée
+    classNames.forEach(className => {
+      const escapedClassName = this.escapeClassName(className);
+      let cssRules = [];
+      switch (context) {
+        case 'base':
+          cssRules.push(`.${escapedClassName} { ${cssProperty}: ${valueForCss}; }`);
+          break;
+        case 'pseudo':
+          // Appliquer la pseudo-classe directement à la classe principale
+          cssRules.push(`.${escapedClassName} { ${cssProperty}: ${valueForCss}; }`);
+          break;
+        case 'media':
+          // Les media queries sont gérées séparément
+          mediaQueries.forEach(mq => {
+            cssRules.push(`@media ${mq} { .${escapedClassName} { ${cssProperty}: ${valueForCss}; } }`);
+            if (window.isResponsive === true) {
+              cssRules.push(`.${modifier} { .${escapedClassName} { ${cssProperty}: ${valueForCss}; } }`);
+            }
+          });
+          break;
+        default:
+          cssRules.push(`.${escapedClassName} { ${cssProperty}: ${valueForCss}; }`);
+      }
+      console.log({
+        mediaQueries,
+        cssRules,
+        modifier
+      });
+      // Injecter les règles CSS
+      cssRules.forEach(rule => this.injectRule(rule));
+      // Ajouter au cache
+      this.addToCache(key, className);
+    });
+    return classNames;
+  }
+}
+/**
+ * Mappe un événement React à une pseudo-classe CSS.
+ * @param event L'événement React (ex: 'hover', 'active')
+ * @returns La pseudo-classe CSS correspondante ou null si non supporté.
+ */
+const mapEventToPseudo = event => {
+  const eventMap = {
+    hover: 'hover',
+    active: 'active',
+    focus: 'focus',
+    visited: 'visited'
   };
+  return eventMap[event] || null;
 };
-// Function to apply styles to a component
-const applyStyle = function (props, mediaQueries, devices, depth,
-// Add a depth parameter
-maxDepth // Set a maximum depth
-) {
-  if (depth === void 0) {
-    depth = 0;
-  }
-  if (maxDepth === void 0) {
-    maxDepth = 10;
-  }
-  if (depth > maxDepth) {
-    console.error('Maximum recursion depth reached in applyStyle');
-    return {
-      styleProps: {},
-      keyframes: []
-    };
+/**
+ * Génère des abréviations pour les propriétés CSS.
+ * @param styledProps Tableau des propriétés CSS à abréger.
+ * @returns Un objet mappant chaque propriété CSS à son abréviation.
+ */
+function generatePropertyShorthand(styledProps) {
+  const propertyShorthand = {};
+  const usedAbbreviations = new Set();
+  /**
+   * Génère une abréviation unique pour une propriété CSS donnée.
+   * @param prop La propriété CSS à abréger.
+   * @returns L'abréviation unique générée.
+   */
+  function generateAbbreviation(prop) {
+    const first = prop[0].toLowerCase();
+    const last = prop[prop.length - 1].toLowerCase();
+    const middle = prop.slice(1, -1).replace(/[a-z]/g, '').toLowerCase();
+    let abbr = first + middle + last;
+    if (abbr.length < 2) {
+      abbr = prop.slice(0, 2).toLowerCase();
+    }
+    let i = 0;
+    let uniqueAbbr = abbr;
+    while (usedAbbreviations.has(uniqueAbbr)) {
+      i++;
+      uniqueAbbr = abbr + prop.slice(-i, prop.length).toLowerCase();
+    }
+    usedAbbreviations.add(uniqueAbbr);
+    return uniqueAbbr;
+  }
+  for (const prop of styledProps) {
+    propertyShorthand[prop] = generateAbbreviation(prop);
   }
-  const styleProps = {};
-  const keyframesList = [];
+  return propertyShorthand;
+}
+const propertyShorthand = /*#__PURE__*/generatePropertyShorthand(StyleProps);
+const utilityClassManager = /*#__PURE__*/new UtilityClassManager(propertyShorthand);
+const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
+  const classes = [];
+  // Styles calculés basés sur les props
+  const computedStyles = {};
   // Gestion de la taille de l'élément
   const size = props.height !== undefined && props.width !== undefined && props.height === props.width ? props.height : props.size ? props.size : null;
   if (size) {
-    styleProps.height = styleProps.width = size;
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    computedStyles.width = sizeValue;
+    computedStyles.height = sizeValue;
   }
   // Gestion du padding et de la marge
   if (props.paddingHorizontal) {
-    styleProps.paddingLeft = props.paddingHorizontal;
-    styleProps.paddingRight = props.paddingHorizontal;
+    const paddingH = typeof props.paddingHorizontal === 'number' ? `${props.paddingHorizontal}px` : props.paddingHorizontal;
+    computedStyles.paddingLeft = paddingH;
+    computedStyles.paddingRight = paddingH;
   }
   if (props.marginHorizontal) {
-    styleProps.marginLeft = props.marginHorizontal;
-    styleProps.marginRight = props.marginHorizontal;
+    const marginH = typeof props.marginHorizontal === 'number' ? `${props.marginHorizontal}px` : props.marginHorizontal;
+    computedStyles.marginLeft = marginH;
+    computedStyles.marginRight = marginH;
   }
   if (props.paddingVertical) {
-    styleProps.paddingTop = props.paddingVertical;
-    styleProps.paddingBottom = props.paddingVertical;
+    const paddingV = typeof props.paddingVertical === 'number' ? `${props.paddingVertical}px` : props.paddingVertical;
+    computedStyles.paddingTop = paddingV;
+    computedStyles.paddingBottom = paddingV;
   }
   if (props.marginVertical) {
-    styleProps.marginTop = props.marginVertical;
-    styleProps.marginBottom = props.marginVertical;
+    const marginV = typeof props.marginVertical === 'number' ? `${props.marginVertical}px` : props.marginVertical;
+    computedStyles.marginTop = marginV;
+    computedStyles.marginBottom = marginV;
   }
   // Application des ombres si spécifié
   if (props.shadow) {
-    if (typeof props.shadow === 'number' || typeof props.shadow === 'boolean') {
-      const shadowValue = typeof props.shadow === 'number' && Shadows[props.shadow] !== undefined ? props.shadow : 2;
-      if (Shadows[shadowValue]) {
-        const shadowColor = Color.hex.rgb(Shadows[shadowValue].shadowColor) || [];
-        styleProps['boxShadow'] = `${Shadows[shadowValue].shadowOffset.height}px ${Shadows[shadowValue].shadowOffset.width}px ${Shadows[shadowValue].shadowRadius}px rgba(${shadowColor.join(',')},${Shadows[shadowValue].shadowOpacity})`;
-      }
+    let shadowValue;
+    if (typeof props.shadow === 'number' && Shadows[props.shadow] !== undefined) {
+      shadowValue = props.shadow;
+    } else if (typeof props.shadow === 'boolean') {
+      shadowValue = props.shadow ? 2 : 0;
     } else {
-      const shadowColor = Color.hex.rgb(props.shadow.shadowColor) || [];
-      styleProps['boxShadow'] = `${props.shadow.shadowOffset.height}px ${props.shadow.shadowOffset.width}px ${props.shadow.shadowRadius}px rgba(${shadowColor.join(',')},${props.shadow.shadowOpacity})`;
+      shadowValue = 2;
+    }
+    if (Shadows[shadowValue]) {
+      const shadowColor = Shadows[shadowValue].shadowColor;
+      const shadowOpacity = Shadows[shadowValue].shadowOpacity;
+      const shadowOffset = Shadows[shadowValue].shadowOffset;
+      const shadowRadius = Shadows[shadowValue].shadowRadius;
+      // Convertir la couleur en rgba
+      const rgb = Color.hex.rgb(shadowColor);
+      const rgbaColor = `rgba(${rgb.join(',')}, ${shadowOpacity})`;
+      computedStyles.boxShadow = `${shadowOffset.height}px ${shadowOffset.width}px ${shadowRadius}px ${rgbaColor}`;
     }
   }
   // Gestion des animations
@@ -963,119 +993,119 @@ maxDepth // Set a maximum depth
       keyframesName,
       keyframes
     } = generateKeyframes(animation);
-    if (keyframes) {
-      keyframesList.push(keyframes);
+    if (keyframes && typeof document !== 'undefined') {
+      utilityClassManager.injectRule(keyframes);
     }
-    styleProps.animationName = keyframesName;
-    styleProps.animationDuration = animation.duration || '1s';
-    styleProps.animationTimingFunction = animation.timingFunction || 'ease';
-    styleProps.animationDelay = animation.delay || '0s';
-    styleProps.animationIterationCount = `${animation.iterationCount || '1'}`;
-    styleProps.animationDirection = animation.direction || 'normal';
-    styleProps.animationFillMode = animation.fillMode || 'both';
-    styleProps.animationPlayState = animation.playState || 'running';
+    computedStyles.animationName = keyframesName;
+    if (animation.duration) computedStyles.animationDuration = animation.duration;
+    if (animation.timingFunction) computedStyles.animationTimingFunction = animation.timingFunction;
+    if (animation.delay) computedStyles.animationDelay = animation.delay;
+    if (animation.iterationCount !== undefined) computedStyles.animationIterationCount = `${animation.iterationCount}`;
+    if (animation.direction) computedStyles.animationDirection = animation.direction;
+    if (animation.fillMode) computedStyles.animationFillMode = animation.fillMode;
+    if (animation.playState) computedStyles.animationPlayState = animation.playState;
   }
+  /**
+   * Génère des classes utilitaires pour un ensemble de styles.
+   * @param styles Les styles à transformer en classes utilitaires.
+   * @param context Le contexte des styles ('base', 'pseudo', 'media').
+   * @param modifier Le modificateur pour les pseudo-classes ou media queries.
+   */
+  const generateUtilityClasses = function (styles, context, modifier) {
+    if (context === void 0) {
+      context = 'base';
+    }
+    if (modifier === void 0) {
+      modifier = '';
+    }
+    console.log({
+      styles
+    });
+    Object.keys(styles).forEach(property => {
+      const value = styles[property];
+      let mediaQueriesForClass = [];
+      if (context === 'media') {
+        // 'modifier' peut être un breakpoint ou un dispositif
+        if (mediaQueries[modifier]) {
+          mediaQueriesForClass = [mediaQueries[modifier]];
+        } else if (devices[modifier]) {
+          mediaQueriesForClass = devices[modifier].map(mq => mediaQueries[mq]).filter(mq => mq); // Filtrer les media queries valides
+        }
+      }
+
+      if (value !== undefined) {
+        const classNames = utilityClassManager.getClassNames(property, value, context, modifier, getColor, mediaQueriesForClass);
+        classes.push(...classNames);
+      } else {
+        console.error({
+          styles,
+          value,
+          property
+        });
+        debugger;
+      }
+    });
+  };
+  // Générer des classes utilitaires pour les styles calculés
+  generateUtilityClasses(computedStyles, 'base');
+  // Parcourir toutes les propriétés de style et générer des classes utilitaires
   Object.keys(props).forEach(property => {
-    if (property !== 'style' && (isStyleProp(property) || extraKeys.has(property))) {
+    if (property !== 'style' && (isStyleProp(property) || ['on', 'media'].includes(property))) {
       const value = props[property];
       if (typeof value === 'object' && value !== null) {
         if (property === 'on') {
-          for (const event in value) {
-            if (!styleProps[`&:${event}`]) {
-              styleProps[`&:${event}`] = {};
+          // Styles liés aux événements (pseudo-classes)
+          Object.keys(value).forEach(event => {
+            const eventStyles = value[event];
+            // Séparer les propriétés de transition et les autres propriétés
+            const transitionStyles = {};
+            const nonTransitionStyles = {};
+            Object.keys(eventStyles).forEach(prop => {
+              if (prop === 'transition') {
+                transitionStyles[prop] = eventStyles[prop];
+              } else {
+                nonTransitionStyles[prop] = eventStyles[prop];
+              }
+            });
+            // Appliquer les transitions aux styles de base
+            if (Object.keys(transitionStyles).length > 0) {
+              generateUtilityClasses(transitionStyles, 'base');
             }
-            const nestedResult = computeStyleProps(value[event]);
-            Object.assign(styleProps[`&:${event}`], nestedResult.styleProps);
-            keyframesList.push(...(nestedResult.keyframes || []));
-          }
-        } else if (property === 'media') {
-          for (const screenOrDevices in value) {
-            const mediaValue = value[screenOrDevices];
-            if (mediaQueries[screenOrDevices]) {
-              const mediaQuery = '@media ' + mediaQueries[screenOrDevices];
-              if (!styleProps[mediaQuery]) {
-                styleProps[mediaQuery] = {};
+            // Générer les classes pour les pseudo-classes
+            if (Object.keys(nonTransitionStyles).length > 0) {
+              const pseudo = mapEventToPseudo(event);
+              if (pseudo) {
+                generateUtilityClasses(nonTransitionStyles, 'pseudo', pseudo);
               }
-              const nestedResult = computeStyleProps(mediaValue);
-              Object.assign(styleProps[mediaQuery], nestedResult.styleProps);
-              keyframesList.push(...(nestedResult.keyframes || []));
-            } else if (devices[screenOrDevices]) {
-              const deviceScreens = devices[screenOrDevices];
-              deviceScreens.forEach(screen => {
-                if (mediaQueries[screen]) {
-                  const mediaQuery = '@media ' + mediaQueries[screen];
-                  if (!styleProps[mediaQuery]) {
-                    styleProps[mediaQuery] = {};
-                  }
-                  const nestedResult = computeStyleProps(mediaValue);
-                  Object.assign(styleProps[mediaQuery], nestedResult.styleProps);
-                  keyframesList.push(...(nestedResult.keyframes || []));
-                }
-              });
             }
-          }
-        } else {
-          // For other nested styles, exclude 'on' and 'media'
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const {
-            on,
-            media,
-            ...nestedProps
-          } = value;
-          const nestedResult = computeStyleProps(nestedProps);
-          styleProps[property] = nestedResult.styleProps;
-          keyframesList.push(...(nestedResult.keyframes || []));
+          });
+        } else if (property === 'media') {
+          // Styles conditionnels basés sur les media queries ou devices
+          Object.keys(value).forEach(screenOrDevice => {
+            const mediaStyles = value[screenOrDevice];
+            generateUtilityClasses(mediaStyles, 'media', screenOrDevice);
+          });
         }
       } else {
-        // Simple style property
-        styleProps[property] = value;
+        // Générer une classe utilitaire pour cette propriété et valeur
+        if (value !== undefined) {
+          const classNames = utilityClassManager.getClassNames(property, value, 'base', '', getColor);
+          classes.push(...classNames);
+        } else {
+          console.error({
+            value,
+            property
+          });
+          debugger;
+        }
       }
     }
   });
-  return {
-    styleProps,
-    keyframes: keyframesList
-  };
-};
-const getStyledProps = (props, getColor, mediaQueries, devices) => {
-  const {
-    styleProps,
-    keyframes
-  } = applyStyle(props, mediaQueries, devices);
-  const className = generateClassName(styleProps);
-  let cssRules = [];
-  if (cssRulesCache.has(className)) {
-    cssRules = cssRulesCache.get(className);
-  } else {
-    cssRules = generateCssRules(`.${className}`, styleProps, getColor, mediaQueries);
-    if (keyframes && keyframes.length > 0) {
-      cssRules = keyframes.concat(cssRules);
-    }
-    cssRulesCache.set(className, cssRules);
-  }
-  const {
-    style,
-    ...restProps
-  } = props;
-  const newProps = Object.keys(restProps).reduce((acc, key) => {
-    if (!excludedKeys.has(key) && !isStyleProp(key) || includeKeys.has(key)) {
-      acc[key] = restProps[key];
-    }
-    return acc;
-  }, {});
-  if (className) {
-    newProps.className = className;
-  }
-  if (style) {
-    newProps.style = style;
-  }
-  return {
-    newProps,
-    className,
-    cssRules
-  };
+  return classes;
 };
-const Element = props => {
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const Element = /*#__PURE__*/React.memo(props => {
   const {
     onPress,
     ...rest
@@ -1087,18 +1117,40 @@ const Element = props => {
     mediaQueries,
     devices
   } = useResponsiveContext();
-  const {
-    newProps,
-    cssRules
-  } = useMemo(() => getStyledProps(rest, getColor, mediaQueries, devices), [rest, getColor, mediaQueries, devices]);
+  console.log({
+    rest
+  });
+  // Extraire les classes utilitaires
+  const utilityClasses = useMemo(() => extractUtilityClasses(rest, getColor, mediaQueries, devices), [rest, getColor, mediaQueries, devices]);
+  // Gérer les événements
+  const newProps = {};
   if (onPress) {
     newProps.onClick = onPress;
   }
-  useDynamicStyles(cssRules);
+  // Ajouter les classes utilitaires
+  if (utilityClasses.length > 0) {
+    newProps.className = utilityClasses.join(' ');
+  }
+  // Ajouter le reste des props qui ne sont pas des styles
+  const {
+    style,
+    children,
+    ...otherProps
+  } = rest;
+  Object.keys(otherProps).forEach(key => {
+    if (!excludedKeys.has(key) && !isStyleProp(key) || includeKeys.has(key)) {
+      newProps[key] = otherProps[key];
+    }
+  });
+  // Ajouter les styles inline s'il y en a
+  if (style) {
+    newProps.style = style;
+  }
+  // Définir le composant HTML
   const Component = newProps.as || 'div';
   delete newProps.as;
-  return /*#__PURE__*/React.createElement(Component, Object.assign({}, newProps), props.children);
-};
+  return /*#__PURE__*/React.createElement(Component, Object.assign({}, newProps), children);
+});
 
 const View = /*#__PURE__*/React.memo(props => /*#__PURE__*/React.createElement(Element, Object.assign({}, props)));
 const Div = View;