app-studio 0.2.18 → 0.2.21

package/dist/appstudio.umd.development.js

@@ -8,6 +8,30 @@
   Color = Color && Object.prototype.hasOwnProperty.call(Color, 'default') ? Color['default'] : Color;
 
   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)',
@@ -470,6 +494,7 @@
     }, children);
   };
 
+  // ResponsiveContext.tsx
   const defaultBreakpointsConfig = {
     xs: 0,
     sm: 340,
@@ -477,37 +502,41 @@
     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__*/React.createContext({
     breakpoints: defaultBreakpointsConfig,
     devices: defaultDeviceConfig,
     mediaQueries: /*#__PURE__*/getMediaQueries(defaultBreakpointsConfig)
-  };
-  const ResponsiveContext = /*#__PURE__*/React.createContext(defaultScreenConfig);
+  });
   const useResponsiveContext = () => React.useContext(ResponsiveContext);
   const ResponsiveProvider = _ref => {
     let {
@@ -525,7 +554,6 @@
   };
 
   // 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
@@ -533,10 +561,6 @@
   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 => {
@@ -552,71 +576,17 @@
   //   // 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 = {
@@ -712,254 +682,314 @@
     }
   };
 
-  // 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 => {
-    React.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);
     });
-    // 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;
-      }
+    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')}
     }
-    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
@@ -969,119 +999,119 @@
         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__default.memo(props => {
     const {
       onPress,
       ...rest
@@ -1093,18 +1123,40 @@
       mediaQueries,
       devices
     } = useResponsiveContext();
-    const {
-      newProps,
-      cssRules
-    } = React.useMemo(() => getStyledProps(rest, getColor, mediaQueries, devices), [rest, getColor, mediaQueries, devices]);
+    console.log({
+      rest
+    });
+    // Extraire les classes utilitaires
+    const utilityClasses = React.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__default.createElement(Component, Object.assign({}, newProps), props.children);
-  };
+    return /*#__PURE__*/React__default.createElement(Component, Object.assign({}, newProps), children);
+  });
 
   const View = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props)));
   const Div = View;