app-studio 0.5.21 → 0.5.28

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

@@ -742,33 +742,79 @@
       if (maxCacheSize === void 0) {
         maxCacheSize = 10000;
       }
-      this.styleSheet = null;
+      this.baseStyleSheet = null;
+      this.mediaStyleSheet = null;
+      this.modifierStyleSheet = null;
       this.classCache = new Map();
+      this.injectedRulesBase = new Set();
+      this.injectedRulesMedia = new Set();
+      this.injectedRulesModifier = new Set();
       this.propertyShorthand = propertyShorthand;
       this.maxCacheSize = maxCacheSize;
-      this.initStyleSheet();
+      this.initStyleSheets();
     }
-    initStyleSheet() {
+    initStyleSheets() {
       if (typeof document !== 'undefined') {
-        let styleTag = document.getElementById('utility-classes');
-        if (!styleTag) {
-          styleTag = document.createElement('style');
-          styleTag.id = 'utility-classes';
-          document.head.appendChild(styleTag);
+        // Feuille de style de base
+        let baseStyleTag = document.getElementById('utility-classes-base');
+        if (!baseStyleTag) {
+          baseStyleTag = document.createElement('style');
+          baseStyleTag.id = 'utility-classes-base';
+          document.head.appendChild(baseStyleTag);
         }
-        this.styleSheet = styleTag.sheet;
+        this.baseStyleSheet = baseStyleTag.sheet;
+        // Feuille de style pour les media queries
+        let mediaStyleTag = document.getElementById('utility-classes-media');
+        if (!mediaStyleTag) {
+          mediaStyleTag = document.createElement('style');
+          mediaStyleTag.id = 'utility-classes-media';
+          document.head.appendChild(mediaStyleTag);
+        }
+        this.mediaStyleSheet = mediaStyleTag.sheet;
+        // Feuille de style pour les modificateurs
+        let modifierStyleTag = document.getElementById('utility-classes-modifier');
+        if (!modifierStyleTag) {
+          modifierStyleTag = document.createElement('style');
+          modifierStyleTag.id = 'utility-classes-modifier';
+          document.head.appendChild(modifierStyleTag);
+        }
+        this.modifierStyleSheet = modifierStyleTag.sheet;
       }
     }
     escapeClassName(className) {
       return className.replace(/:/g, '\\:');
     }
-    injectRule(cssRule) {
-      if (this.styleSheet) {
+    injectRule(cssRule, context) {
+      if (context === void 0) {
+        context = 'base';
+      }
+      let styleSheet = null;
+      let injectedRules = new Set();
+      switch (context) {
+        case 'base':
+          styleSheet = this.baseStyleSheet;
+          injectedRules = this.injectedRulesBase;
+          break;
+        case 'pseudo':
+          styleSheet = this.baseStyleSheet; // Si les pseudo-classes sont dans la feuille de base
+          injectedRules = this.injectedRulesBase;
+          break;
+        case 'media':
+          styleSheet = this.mediaStyleSheet;
+          injectedRules = this.injectedRulesMedia;
+          break;
+        case 'modifier':
+          styleSheet = this.modifierStyleSheet;
+          injectedRules = this.injectedRulesModifier;
+          break;
+        default:
+          styleSheet = this.baseStyleSheet;
+          injectedRules = this.injectedRulesBase;
+      }
+      if (styleSheet && !injectedRules.has(cssRule)) {
         try {
-          const existingRules = Array.from(this.styleSheet.cssRules).map(rule => rule.cssText);
-          if (!existingRules.includes(cssRule)) {
-            this.styleSheet.insertRule(cssRule, this.styleSheet.cssRules.length);
-          }
+          styleSheet.insertRule(cssRule, styleSheet.cssRules.length);
+          injectedRules.add(cssRule);
         } catch (e) {
           console.error(`Erreur lors de l'insertion de la règle CSS: "${cssRule}"`, e);
         }
@@ -781,16 +827,6 @@
       }
       this.classCache.set(key, className);
     }
-    /**
-     * 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';
@@ -805,13 +841,12 @@
         mediaQueries = [];
       }
       let processedValue = value;
-      // If the property is a color, convert it to a hexadecimal or RGB value
+      // Si la propriété est une couleur, la convertir
       if (property.toLowerCase().includes('color')) {
         processedValue = getColor(value);
       }
-      // Handle compound values (like padding and margin)
+      // Gérer les valeurs numériques
       if (typeof processedValue === 'number') {
-        // Add 'px' to numeric values for properties that typically use length units
         if (numericCssProperties.has(property)) {
           processedValue = `${processedValue}px`;
         }
@@ -829,42 +864,27 @@
       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 = 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'
-      .replace(/vw/g, 'vw') // Keep 'vw' as is
-      .replace(/vh/g, 'vh') // Keep 'vh' as is
-      .replace(/em/g, 'em') // Keep 'em' as is
-      .replace(/rem/g, 'rem'); // Keep 'rem' as is
+      let normalizedValue = formattedValue.toString().replace(/\./g, 'p').replace(/\s+/g, '-').replace(/[^a-zA-Z0-9\-]/g, '').replace(/%/g, 'pct').replace(/vw/g, 'vw').replace(/vh/g, 'vh').replace(/em/g, 'em').replace(/rem/g, 'rem');
       let baseClassName = `${shorthand}-${normalizedValue}`;
-      // Préfixer les noms de classe pour les pseudo-classes et media queries
-      let classNames = [baseClassName]; // Utiliser le nom de classe de base
+      let classNames = [baseClassName];
       if (context === 'pseudo' && modifier) {
-        // Pseudo-class : ajouter '-modifier' suffix
-        const pseudoClassName = `${baseClassName}-${modifier}`;
+        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}`;
+          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') {
         if (numericCssProperties.has(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 = [];
@@ -873,11 +893,9 @@
             cssRules.push(`.${escapedClassName} { ${cssProperty}: ${valueForCss}; }`);
             break;
           case 'pseudo':
-            // 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
             mediaQueries.forEach(mq => {
               cssRules.push(`@media ${mq} { .${escapedClassName} { ${cssProperty}: ${valueForCss}; } }`);
               if (window.isResponsive === true) {
@@ -888,8 +906,12 @@
           default:
             cssRules.push(`.${escapedClassName} { ${cssProperty}: ${valueForCss}; }`);
         }
-        // Injecter les règles CSS
-        cssRules.forEach(rule => this.injectRule(rule));
+        // Déterminer si la classe est un modificateur
+        const isModifier = className.includes('--');
+        // Définir le contexte approprié
+        const ruleContext = isModifier ? 'modifier' : context;
+        // Injecter les règles CSS avec le contexte approprié
+        cssRules.forEach(rule => this.injectRule(rule, ruleContext));
         // Ajouter au cache
         this.addToCache(key, className);
       });
@@ -1239,6 +1261,52 @@
   const View = /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
     ref: ref
   })));
+  const Horizontal = /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(Element, Object.assign({
+    display: "flex",
+    flexDirection: "row"
+  }, props, {
+    ref: ref
+  })));
+  const Vertical = /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(Element, Object.assign({
+    display: "flex",
+    flexDirection: "column"
+  }, props, {
+    ref: ref
+  })));
+  const HorizontalResponsive = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+    let {
+      media = {},
+      ...props
+    } = _ref;
+    return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
+      media: {
+        ...media,
+        mobile: {
+          ...media.mobile,
+          flexDirection: 'column'
+        }
+      }
+    }, props, {
+      ref: ref
+    }));
+  });
+  const VerticalResponsive = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
+    let {
+      media = {},
+      ...props
+    } = _ref2;
+    return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
+      media: {
+        ...media,
+        mobile: {
+          ...media.mobile,
+          flexDirection: 'row'
+        }
+      }
+    }, props, {
+      ref: ref
+    }));
+  });
   const Scroll = /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
     ref: ref
   })));
@@ -2498,12 +2566,130 @@
     return navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i);
   }
 
+  function useActive() {
+    const [active, setActive] = React.useState(false);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+      const node = ref.current;
+      if (!node) return;
+      const handleMouseDown = () => setActive(true);
+      const handleMouseUp = () => setActive(false);
+      const handleTouchStart = () => setActive(true);
+      const handleTouchEnd = () => setActive(false);
+      node.addEventListener('mousedown', handleMouseDown);
+      node.addEventListener('mouseup', handleMouseUp);
+      node.addEventListener('mouseleave', handleMouseUp);
+      node.addEventListener('touchstart', handleTouchStart);
+      node.addEventListener('touchend', handleTouchEnd);
+      return () => {
+        node.removeEventListener('mousedown', handleMouseDown);
+        node.removeEventListener('mouseup', handleMouseUp);
+        node.removeEventListener('mouseleave', handleMouseUp);
+        node.removeEventListener('touchstart', handleTouchStart);
+        node.removeEventListener('touchend', handleTouchEnd);
+      };
+    }, []);
+    return [ref, active];
+  }
+
+  function useClickOutside() {
+    const [clickedOutside, setClickedOutside] = React.useState(false);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+      const handleClick = e => {
+        if (ref.current && !ref.current.contains(e.target)) {
+          setClickedOutside(true);
+        } else {
+          setClickedOutside(false);
+        }
+      };
+      document.addEventListener('mousedown', handleClick);
+      return () => {
+        document.removeEventListener('mousedown', handleClick);
+      };
+    }, []);
+    return [ref, clickedOutside];
+  }
+
+  function useFocus() {
+    const [focused, setFocused] = React.useState(false);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+      const node = ref.current;
+      if (!node) return;
+      const handleFocus = () => setFocused(true);
+      const handleBlur = () => setFocused(false);
+      node.addEventListener('focus', handleFocus);
+      node.addEventListener('blur', handleBlur);
+      return () => {
+        node.removeEventListener('focus', handleFocus);
+        node.removeEventListener('blur', handleBlur);
+      };
+    }, []);
+    return [ref, focused];
+  }
+
+  function useHover() {
+    const [hover, setHover] = React.useState(false);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+      const node = ref.current;
+      if (!node) return;
+      const handleMouseEnter = () => setHover(true);
+      const handleMouseLeave = () => setHover(false);
+      node.addEventListener('mouseenter', handleMouseEnter);
+      node.addEventListener('mouseleave', handleMouseLeave);
+      return () => {
+        node.removeEventListener('mouseenter', handleMouseEnter);
+        node.removeEventListener('mouseleave', handleMouseLeave);
+      };
+    }, []);
+    return [ref, hover];
+  }
+
+  function useKeyPress(targetKey) {
+    const [keyPressed, setKeyPressed] = React.useState(false);
+    React.useEffect(() => {
+      const downHandler = e => {
+        if (e.key === targetKey) setKeyPressed(true);
+      };
+      const upHandler = e => {
+        if (e.key === targetKey) setKeyPressed(false);
+      };
+      window.addEventListener('keydown', downHandler);
+      window.addEventListener('keyup', upHandler);
+      return () => {
+        window.removeEventListener('keydown', downHandler);
+        window.removeEventListener('keyup', upHandler);
+      };
+    }, [targetKey]);
+    return keyPressed;
+  }
+
   const useMount = callback => {
     React.useEffect(() => {
       callback();
     }, []);
   };
 
+  function useOnScreen(options) {
+    const ref = React.useRef(null);
+    const [isOnScreen, setOnScreen] = React.useState(false);
+    React.useEffect(() => {
+      const node = ref.current;
+      if (!node) return;
+      const observer = new IntersectionObserver(_ref => {
+        let [entry] = _ref;
+        setOnScreen(entry.isIntersecting);
+      }, options);
+      observer.observe(node);
+      return () => {
+        observer.unobserve(node);
+      };
+    }, [options]);
+    return [ref, isOnScreen];
+  }
+
   const createQuery = (keyScreen, query, set) => {
     const mql = window.matchMedia(query);
     const onChange = () => {
@@ -2550,11 +2736,190 @@
     };
   };
 
+  const getScrollDimensions = element => {
+    if (element instanceof Window) {
+      return {
+        scrollHeight: document.documentElement.scrollHeight,
+        scrollWidth: document.documentElement.scrollWidth,
+        clientHeight: window.innerHeight,
+        clientWidth: window.innerWidth,
+        scrollTop: window.scrollY,
+        scrollLeft: window.scrollX
+      };
+    }
+    return {
+      scrollHeight: element.scrollHeight,
+      scrollWidth: element.scrollWidth,
+      clientHeight: element.clientHeight,
+      clientWidth: element.clientWidth,
+      scrollTop: element.scrollTop,
+      scrollLeft: element.scrollLeft
+    };
+  };
+  const useScroll = function (_temp) {
+    let {
+      container,
+      offset = [0, 0]
+    } = _temp === void 0 ? {} : _temp;
+    const [scrollPosition, setScrollPosition] = React.useState({
+      x: 0,
+      y: 0,
+      xProgress: 0,
+      yProgress: 0
+    });
+    const handleScroll = React.useCallback(() => {
+      if (!container || !container.current) return;
+      const element = container.current;
+      const {
+        scrollHeight,
+        scrollWidth,
+        clientHeight,
+        clientWidth,
+        scrollTop,
+        scrollLeft
+      } = getScrollDimensions(element);
+      const x = scrollLeft + offset[0];
+      const y = scrollTop + offset[1];
+      const maxScrollX = scrollWidth - clientWidth;
+      const maxScrollY = scrollHeight - clientHeight;
+      const xProgress = maxScrollX > 0 ? x / maxScrollX : 1;
+      const yProgress = maxScrollY > 0 ? y / maxScrollY : 1;
+      setScrollPosition(prev => {
+        if (prev.x !== x || prev.y !== y || prev.xProgress !== xProgress || prev.yProgress !== yProgress) {
+          return {
+            x,
+            y,
+            xProgress,
+            yProgress
+          };
+        }
+        return prev;
+      });
+    }, [container, offset]);
+    React.useEffect(() => {
+      if (!container || container.current) return;
+      const element = container.current || window;
+      element.addEventListener('scroll', handleScroll, {
+        passive: true
+      });
+      window.addEventListener('resize', handleScroll, {
+        passive: true
+      });
+      handleScroll();
+      return () => {
+        element.removeEventListener('scroll', handleScroll);
+        window.removeEventListener('resize', handleScroll);
+      };
+    }, [handleScroll, container]);
+    return scrollPosition;
+  };
+  const useScrollAnimation = function (ref, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    const [isInView, setIsInView] = React.useState(false);
+    const [progress, setProgress] = React.useState(0);
+    React.useEffect(() => {
+      if (!ref.current) return;
+      const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          setIsInView(entry.isIntersecting);
+          setProgress(entry.intersectionRatio);
+        });
+      }, {
+        threshold: options.threshold || 0,
+        rootMargin: options.rootMargin || '0px'
+      });
+      observer.observe(ref.current);
+      return () => observer.disconnect();
+    }, [ref, options.threshold, options.rootMargin]);
+    return {
+      isInView,
+      progress
+    };
+  };
+  const useSmoothScroll = () => {
+    return React.useCallback(function (element, offset) {
+      if (offset === void 0) {
+        offset = 0;
+      }
+      if (!element) return;
+      const targetPosition = element.getBoundingClientRect().top + window.scrollY - offset;
+      window.scrollTo({
+        top: targetPosition,
+        behavior: 'smooth'
+      });
+    }, []);
+  };
+  const useInfiniteScroll = function (callback, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    const [sentinel, setSentinel] = React.useState(null);
+    React.useEffect(() => {
+      if (!sentinel || options.isLoading) return;
+      const observer = new IntersectionObserver(entries => {
+        if (entries[0].isIntersecting) callback();
+      }, {
+        threshold: options.threshold || 0
+      });
+      observer.observe(sentinel);
+      return () => observer.disconnect();
+    }, [sentinel, callback, options.threshold, options.isLoading]);
+    return {
+      sentinelRef: setSentinel
+    };
+  };
+  const useScrollDirection = function (threshold) {
+    if (threshold === void 0) {
+      threshold = 0;
+    }
+    const [scrollDirection, setScrollDirection] = React.useState('up');
+    const [lastScrollY, setLastScrollY] = React.useState(0);
+    const updateScrollDirection = React.useCallback(() => {
+      const scrollY = window.scrollY;
+      const direction = scrollY > lastScrollY ? 'down' : 'up';
+      if (Math.abs(scrollY - lastScrollY) > threshold && direction !== scrollDirection) {
+        setScrollDirection(direction);
+      }
+      setLastScrollY(scrollY > 0 ? scrollY : 0);
+    }, [scrollDirection, lastScrollY, threshold]);
+    React.useEffect(() => {
+      window.addEventListener('scroll', updateScrollDirection, {
+        passive: true
+      });
+      return () => {
+        window.removeEventListener('scroll', updateScrollDirection);
+      };
+    }, [updateScrollDirection]);
+    return scrollDirection;
+  };
+
+  function useWindowSize() {
+    const [size, setSize] = React.useState({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+    React.useEffect(() => {
+      const handleResize = () => {
+        setSize({
+          width: window.innerWidth,
+          height: window.innerHeight
+        });
+      };
+      window.addEventListener('resize', handleResize);
+      return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return size;
+  }
+
   exports.Animation = Animation;
   exports.Button = Button;
   exports.Div = Div;
   exports.Element = Element;
   exports.Form = Form;
+  exports.Horizontal = Horizontal;
+  exports.HorizontalResponsive = HorizontalResponsive;
   exports.Image = Image;
   exports.ImageBackground = ImageBackground;
   exports.Input = Input;
@@ -2569,6 +2934,8 @@
   exports.ThemeContext = ThemeContext;
   exports.ThemeProvider = ThemeProvider;
   exports.Typography = Typography;
+  exports.Vertical = Vertical;
+  exports.VerticalResponsive = VerticalResponsive;
   exports.View = View;
   exports.createQuery = createQuery;
   exports.defaultColors = defaultColors;
@@ -2580,10 +2947,22 @@
   exports.isProd = isProd;
   exports.isSSR = isSSR;
   exports.palette = palette;
+  exports.useActive = useActive;
+  exports.useClickOutside = useClickOutside;
+  exports.useFocus = useFocus;
+  exports.useHover = useHover;
+  exports.useInfiniteScroll = useInfiniteScroll;
+  exports.useKeyPress = useKeyPress;
   exports.useMount = useMount;
+  exports.useOnScreen = useOnScreen;
   exports.useResponsive = useResponsive;
   exports.useResponsiveContext = useResponsiveContext;
+  exports.useScroll = useScroll;
+  exports.useScrollAnimation = useScrollAnimation;
+  exports.useScrollDirection = useScrollDirection;
+  exports.useSmoothScroll = useSmoothScroll;
   exports.useTheme = useTheme;
+  exports.useWindowSize = useWindowSize;
 
   Object.defineProperty(exports, '__esModule', { value: true });
 

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

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