app-studio 0.4.7 → 0.5.0

package/dist/app-studio.cjs.development.js

@@ -818,10 +818,10 @@ class UtilityClassManager {
         processedValue = `${processedValue}px`;
       }
     }
-    let formatedValue = processedValue.toString().split(' ').join('-');
-    let key = `${property}:${formatedValue}`;
-    if (modifier) {
-      key = `${property}:${formatedValue}|${modifier}`;
+    let formattedValue = processedValue.toString().split(' ').join('-');
+    let key = `${property}:${formattedValue}`;
+    if (modifier && context !== 'base') {
+      key = `${property}:${formattedValue}|${context}:${modifier}`;
     }
     if (this.classCache.has(key)) {
       return [this.classCache.get(key)];
@@ -833,7 +833,7 @@ class UtilityClassManager {
     }
     // console.log({ shorthand, property, processedValue });
     // Normaliser la valeur pour le nom de classe
-    let normalizedValue = formatedValue.toString().replace(/\./g, 'p') // Replace dots with 'p'
+    let normalizedValue = formattedValue.toString().replace(/\./g, 'p') // Replace dots with 'p'
     .replace(/\s+/g, '-') // Replace spaces with '-'
     .replace(/[^a-zA-Z0-9\-]/g, '') // Remove other special characters
     .replace(/%/g, 'pct') // Replace % with 'pct'
@@ -843,7 +843,7 @@ class UtilityClassManager {
     .replace(/rem/g, 'rem'); // Keep 'rem' as is
     let baseClassName = `${shorthand}-${normalizedValue}`;
     // Préfixer les noms de classe pour les pseudo-classes et media queries
-    let classNames = [];
+    let classNames = [baseClassName]; // Utiliser le nom de classe de base
     if (context === 'pseudo' && modifier) {
       // Pseudo-class : ajouter '-modifier' suffix
       const pseudoClassName = `${baseClassName}-${modifier}`;
@@ -875,8 +875,8 @@ class UtilityClassManager {
           cssRules.push(`.${escapedClassName} { ${cssProperty}: ${valueForCss}; }`);
           break;
         case 'pseudo':
-          // Appliquer la pseudo-classe directement à la classe principale
-          cssRules.push(`.${escapedClassName} { ${cssProperty}: ${valueForCss}; }`);
+          // Appliquer le pseudo-sélecteur au sélecteur de classe
+          cssRules.push(`.${escapedClassName}:${modifier} { ${cssProperty}: ${valueForCss}; }`);
           break;
         case 'media':
           // Les media queries sont gérées séparément
@@ -1004,22 +1004,40 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
   }
   // Gestion des animations
   if (props.animate) {
-    const animation = props.animate;
-    const {
-      keyframesName,
-      keyframes
-    } = generateKeyframes(animation);
-    if (keyframes && typeof document !== 'undefined') {
-      utilityClassManager.injectRule(keyframes);
-    }
-    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;
+    const animations = Array.isArray(props.animate) ? props.animate : [props.animate];
+    const animationNames = [];
+    const animationDurations = [];
+    const animationTimingFunctions = [];
+    const animationDelays = [];
+    const animationIterationCounts = [];
+    const animationDirections = [];
+    const animationFillModes = [];
+    const animationPlayStates = [];
+    animations.forEach(animation => {
+      const {
+        keyframesName,
+        keyframes
+      } = generateKeyframes(animation);
+      if (keyframes && typeof document !== 'undefined') {
+        utilityClassManager.injectRule(keyframes);
+      }
+      animationNames.push(keyframesName);
+      animationDurations.push(animation.duration || '0s');
+      animationTimingFunctions.push(animation.timingFunction || 'ease');
+      animationDelays.push(animation.delay || '0s');
+      animationIterationCounts.push(animation.iterationCount !== undefined ? `${animation.iterationCount}` : '1');
+      animationDirections.push(animation.direction || 'normal');
+      animationFillModes.push(animation.fillMode || 'none');
+      animationPlayStates.push(animation.playState || 'running');
+    });
+    computedStyles.animationName = animationNames.join(', ');
+    computedStyles.animationDuration = animationDurations.join(', ');
+    computedStyles.animationTimingFunction = animationTimingFunctions.join(', ');
+    computedStyles.animationDelay = animationDelays.join(', ');
+    computedStyles.animationIterationCount = animationIterationCounts.join(', ');
+    computedStyles.animationDirection = animationDirections.join(', ');
+    computedStyles.animationFillMode = animationFillModes.join(', ');
+    computedStyles.animationPlayState = animationPlayStates.join(', ');
   }
   /**
    * Génère des classes utilitaires pour un ensemble de styles.
@@ -1070,24 +1088,58 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
           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');
+            // Extraire 'animate' des styles d'événement
+            const {
+              animate,
+              ...otherEventStyles
+            } = eventStyles;
+            // Gestion des animations dans les événements
+            if (animate) {
+              const animations = Array.isArray(animate) ? animate : [animate];
+              const animationNames = [];
+              const animationDurations = [];
+              const animationTimingFunctions = [];
+              const animationDelays = [];
+              const animationIterationCounts = [];
+              const animationDirections = [];
+              const animationFillModes = [];
+              const animationPlayStates = [];
+              animations.forEach(animation => {
+                const {
+                  keyframesName,
+                  keyframes
+                } = generateKeyframes(animation);
+                if (keyframes && typeof document !== 'undefined') {
+                  utilityClassManager.injectRule(keyframes);
+                }
+                animationNames.push(keyframesName);
+                animationDurations.push(animation.duration || '0s');
+                animationTimingFunctions.push(animation.timingFunction || 'ease');
+                animationDelays.push(animation.delay || '0s');
+                animationIterationCounts.push(animation.iterationCount !== undefined ? `${animation.iterationCount}` : '1');
+                animationDirections.push(animation.direction || 'normal');
+                animationFillModes.push(animation.fillMode || 'none');
+                animationPlayStates.push(animation.playState || 'running');
+              });
+              // Créer un objet avec les propriétés d'animation
+              const animationStyles = {
+                animationName: animationNames.join(', '),
+                animationDuration: animationDurations.join(', '),
+                animationTimingFunction: animationTimingFunctions.join(', '),
+                animationDelay: animationDelays.join(', '),
+                animationIterationCount: animationIterationCounts.join(', '),
+                animationDirection: animationDirections.join(', '),
+                animationFillMode: animationFillModes.join(', '),
+                animationPlayState: animationPlayStates.join(', ')
+              };
+              // Fusionner les styles d'animation avec les autres styles de l'événement
+              Object.assign(otherEventStyles, animationStyles);
             }
             // Générer les classes pour les pseudo-classes
-            if (Object.keys(nonTransitionStyles).length > 0) {
+            if (Object.keys(otherEventStyles).length > 0) {
               const pseudo = mapEventToPseudo(event);
               if (pseudo) {
-                generateUtilityClasses(nonTransitionStyles, 'pseudo', pseudo);
+                generateUtilityClasses(otherEventStyles, 'pseudo', pseudo);
               }
             }
           });
@@ -1208,7 +1260,7 @@ const fadeIn = function (duration, timingFunction) {
     from: {
       opacity: 0
     },
-    enter: {
+    to: {
       opacity: 1
     },
     duration,
@@ -1226,7 +1278,7 @@ const fadeOut = function (duration, timingFunction) {
     from: {
       opacity: 1
     },
-    enter: {
+    to: {
       opacity: 0
     },
     duration,
@@ -1244,7 +1296,7 @@ const slideInLeft = function (duration, timingFunction) {
     from: {
       transform: 'translateX(-100%)'
     },
-    enter: {
+    to: {
       transform: 'translateX(0)'
     },
     duration,
@@ -1262,7 +1314,7 @@ const slideInRight = function (duration, timingFunction) {
     from: {
       transform: 'translateX(100%)'
     },
-    enter: {
+    to: {
       transform: 'translateX(0)'
     },
     duration,
@@ -1280,7 +1332,7 @@ const slideInDown = function (duration, timingFunction) {
     from: {
       transform: 'translateY(-100%)'
     },
-    enter: {
+    to: {
       transform: 'translateY(0)'
     },
     duration,
@@ -1298,7 +1350,7 @@ const slideInUp = function (duration, timingFunction) {
     from: {
       transform: 'translateY(100%)'
     },
-    enter: {
+    to: {
       transform: 'translateY(0)'
     },
     duration,
@@ -1331,7 +1383,7 @@ const bounce = function (duration, timingFunction, iterationCount) {
     '80%': {
       transform: 'translateY(0)'
     },
-    enter: {
+    to: {
       transform: 'translateY(0)'
     },
     duration,
@@ -1353,7 +1405,7 @@ const rotate = function (duration, timingFunction, iterationCount) {
     from: {
       transform: 'rotate(0deg)'
     },
-    enter: {
+    to: {
       transform: 'rotate(360deg)'
     },
     duration,
@@ -1378,7 +1430,7 @@ const pulse = function (duration, timingFunction, iterationCount) {
     '50%': {
       transform: 'scale(1.05)'
     },
-    enter: {
+    to: {
       transform: 'scale(1)'
     },
     duration,
@@ -1397,7 +1449,7 @@ const zoomIn = function (duration, timingFunction) {
     from: {
       transform: 'scale(0)'
     },
-    enter: {
+    to: {
       transform: 'scale(1)'
     },
     duration,
@@ -1415,7 +1467,7 @@ const zoomOut = function (duration, timingFunction) {
     from: {
       transform: 'scale(1)'
     },
-    enter: {
+    to: {
       transform: 'scale(0)'
     },
     duration,
@@ -1436,7 +1488,7 @@ const flash = function (duration, iterationCount) {
     '50%': {
       opacity: 0
     },
-    enter: {
+    to: {
       opacity: 1
     },
     duration,
@@ -1481,7 +1533,7 @@ const shake = function (duration, iterationCount) {
     '90%': {
       transform: 'translateX(-10px)'
     },
-    enter: {
+    to: {
       transform: 'translateX(0)'
     },
     duration,
@@ -1511,7 +1563,7 @@ const swing = function (duration, iterationCount) {
     '80%': {
       transform: 'rotate(-5deg)'
     },
-    enter: {
+    to: {
       transform: 'rotate(0deg)'
     },
     duration,
@@ -1544,7 +1596,7 @@ const rubberBand = function (duration, timingFunction) {
     '75%': {
       transform: 'scale3d(1.05, 0.95, 1)'
     },
-    enter: {
+    to: {
       transform: 'scale3d(1, 1, 1)'
     },
     duration,
@@ -1574,7 +1626,7 @@ const wobble = function (duration) {
     '75%': {
       transform: 'translateX(-5%) rotate(-1deg)'
     },
-    enter: {
+    to: {
       transform: 'translateX(0%)'
     },
     duration
@@ -1591,7 +1643,7 @@ const flip = function (duration) {
     '40%': {
       transform: 'perspective(400px) rotateY(-180deg)'
     },
-    enter: {
+    to: {
       transform: 'perspective(400px) rotateY(-360deg)'
     },
     duration
@@ -1620,7 +1672,7 @@ const heartBeat = function (duration, iterationCount) {
     '70%': {
       transform: 'scale(1)'
     },
-    enter: {
+    to: {
       transform: 'scale(1)'
     },
     duration,
@@ -1636,7 +1688,7 @@ const rollIn = function (duration) {
       opacity: 0,
       transform: 'translateX(-100%) rotate(-120deg)'
     },
-    enter: {
+    to: {
       opacity: 1,
       transform: 'translateX(0px) rotate(0deg)'
     },
@@ -1652,7 +1704,7 @@ const rollOut = function (duration) {
       opacity: 1,
       transform: 'translateX(0px) rotate(0deg)'
     },
-    enter: {
+    to: {
       opacity: 0,
       transform: 'translateX(100%) rotate(120deg)'
     },
@@ -1678,7 +1730,7 @@ const lightSpeedIn = function (duration, timingFunction) {
     '80%': {
       transform: 'skewX(-5deg)'
     },
-    enter: {
+    to: {
       transform: 'translateX(0)',
       opacity: 1
     },
@@ -1701,7 +1753,7 @@ const lightSpeedOut = function (duration, timingFunction) {
       opacity: 1,
       transform: 'translateX(-20%) skewX(20deg)'
     },
-    enter: {
+    to: {
       opacity: 0,
       transform: 'translateX(-100%) skewX(30deg)'
     },
@@ -1738,7 +1790,7 @@ const hinge = function (duration, timingFunction) {
       transform: 'rotate(60deg)',
       opacity: 1
     },
-    enter: {
+    to: {
       transform: 'translateY(700px)',
       opacity: 0
     },
@@ -1765,7 +1817,7 @@ const jackInTheBox = function (duration, timingFunction) {
     '70%': {
       transform: 'rotate(3deg)'
     },
-    enter: {
+    to: {
       opacity: 1,
       transform: 'scale(1) rotate(0deg)'
     },
@@ -1789,7 +1841,7 @@ const flipInX = function (duration, timingFunction) {
       transform: 'perspective(400px) rotateX(-10deg)',
       opacity: 1
     },
-    enter: {
+    to: {
       transform: 'perspective(400px) rotateX(0deg)'
     },
     duration,
@@ -1812,7 +1864,7 @@ const flipInY = function (duration, timingFunction) {
       transform: 'perspective(400px) rotateY(-10deg)',
       opacity: 1
     },
-    enter: {
+    to: {
       transform: 'perspective(400px) rotateY(0deg)'
     },
     duration,
@@ -1870,7 +1922,7 @@ const tada = function (duration, iterationCount) {
     '40%, 60%, 80%': {
       transform: 'scale3d(1.1, 1.1, 1.1) rotate(-3deg)'
     },
-    enter: {
+    to: {
       transform: 'scale3d(1, 1, 1)',
       opacity: 1
     },
@@ -1913,7 +1965,7 @@ const jello = function (duration, iterationCount) {
     '88.8%': {
       transform: 'skewX(0.09765625deg) skewY(0.09765625deg)'
     },
-    enter: {
+    to: {
       transform: 'none'
     },
     duration,
@@ -1932,7 +1984,7 @@ const fadeInDown = function (duration, timingFunction) {
       opacity: 0,
       transform: 'translateY(-100%)'
     },
-    enter: {
+    to: {
       opacity: 1,
       transform: 'translateY(0)'
     },
@@ -1952,7 +2004,7 @@ const fadeInUp = function (duration, timingFunction) {
       opacity: 0,
       transform: 'translateY(100%)'
     },
-    enter: {
+    to: {
       opacity: 1,
       transform: 'translateY(0)'
     },
@@ -1979,7 +2031,7 @@ const bounceIn = function (duration, timingFunction) {
     '70%': {
       transform: 'scale(0.9)'
     },
-    enter: {
+    to: {
       transform: 'scale(1)'
     },
     duration,
@@ -2004,7 +2056,7 @@ const bounceOut = function (duration, timingFunction) {
       opacity: 1,
       transform: 'scale(1.1)'
     },
-    enter: {
+    to: {
       opacity: 0,
       transform: 'scale(0.3)'
     },
@@ -2023,7 +2075,7 @@ const slideOutLeft = function (duration, timingFunction) {
     from: {
       transform: 'translateX(0)'
     },
-    enter: {
+    to: {
       transform: 'translateX(-100%)'
     },
     duration,
@@ -2041,7 +2093,7 @@ const slideOutRight = function (duration, timingFunction) {
     from: {
       transform: 'translateX(0)'
     },
-    enter: {
+    to: {
       transform: 'translateX(100%)'
     },
     duration,
@@ -2064,7 +2116,7 @@ const zoomInDown = function (duration, timingFunction) {
       opacity: 1,
       transform: 'scale(0.475) translateY(60px)'
     },
-    enter: {
+    to: {
       transform: 'scale(1) translateY(0)'
     },
     duration,
@@ -2087,7 +2139,7 @@ const zoomOutUp = function (duration, timingFunction) {
       opacity: 1,
       transform: 'scale(0.475) translateY(-60px)'
     },
-    enter: {
+    to: {
       opacity: 0,
       transform: 'scale(0.1) translateY(-1000px)'
     },
@@ -2107,7 +2159,7 @@ const backInDown = function (duration, timingFunction) {
       opacity: 0.7,
       transform: 'translateY(-2000px) scaleY(2.5) scaleX(0.2)'
     },
-    enter: {
+    to: {
       opacity: 1,
       transform: 'translateY(0) scaleY(1) scaleX(1)'
     },
@@ -2131,7 +2183,7 @@ const backOutUp = function (duration, timingFunction) {
       opacity: 0.7,
       transform: 'translateY(-20px)'
     },
-    enter: {
+    to: {
       opacity: 0,
       transform: 'translateY(-2000px)'
     },
@@ -2156,7 +2208,7 @@ const shimmer = function (duration, timingFunction, iterationCount) {
     '50%': {
       transform: 'translateX(100%)'
     },
-    enter: {
+    to: {
       transform: 'translateX(100%)'
     },
     duration,

package/dist/app-studio.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-studio.cjs.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"app-studio.cjs.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}