app-studio 0.1.44 → 0.2.2

package/dist/app-studio.esm.js

@@ -1,915 +0,0 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
-import Color from 'color-convert';
-import styled from 'styled-components';
-
-const palette = {
-  white: {
-    50: 'rgba(255, 255, 255, 0.04)',
-    100: 'rgba(255, 255, 255, 0.08)',
-    200: 'rgba(255, 255, 255, 0.16)',
-    300: 'rgba(255, 255, 255, 0.24)',
-    400: 'rgba(255, 255, 255, 0.36)',
-    500: 'rgba(255, 255, 255, 0.48)',
-    600: 'rgba(255, 255, 255, 0.64)',
-    700: 'rgba(255, 255, 255, 0.80)',
-    800: 'rgba(255, 255, 255, 0.92)',
-    900: 'rgba(255, 255, 255, 1)'
-  },
-  black: {
-    50: 'rgba(0, 0, 0, 0.04)',
-    100: 'rgba(0, 0, 0, 0.08)',
-    200: 'rgba(0, 0, 0, 0.16)',
-    300: 'rgba(0, 0, 0, 0.24)',
-    400: 'rgba(0, 0, 0, 0.36)',
-    500: 'rgba(0, 0, 0, 0.48)',
-    600: 'rgba(0, 0, 0, 0.64)',
-    700: 'rgba(0, 0, 0, 0.80)',
-    800: 'rgba(0, 0, 0, 0.92)',
-    900: 'rgba(0, 0, 0, 1)'
-  },
-  rose: {
-    50: '#fff1f2',
-    100: '#ffe4e6',
-    200: '#fecdd3',
-    300: '#fda4af',
-    400: '#fb7185',
-    500: '#f43f5e',
-    600: '#e11d48',
-    700: '#be123c',
-    800: '#9f1239',
-    900: '#881337'
-  },
-  pink: {
-    50: '#fdf2f8',
-    100: '#fce7f3',
-    200: '#fbcfe8',
-    300: '#f9a8d4',
-    400: '#f472b6',
-    500: '#ec4899',
-    600: '#db2777',
-    700: '#be185d',
-    800: '#9d174d',
-    900: '#831843'
-  },
-  fuchsia: {
-    50: '#fdf4ff',
-    100: '#fae8ff',
-    200: '#f5d0fe',
-    300: '#f0abfc',
-    400: '#e879f9',
-    500: '#d946ef',
-    600: '#c026d3',
-    700: '#a21caf',
-    800: '#86198f',
-    900: '#701a75'
-  },
-  purple: {
-    50: '#faf5ff',
-    100: '#f3e8ff',
-    200: '#e9d5ff',
-    300: '#d8b4fe',
-    400: '#c084fc',
-    500: '#a855f7',
-    600: '#9333ea',
-    700: '#7e22ce',
-    800: '#6b21a8',
-    900: '#581c87'
-  },
-  violet: {
-    50: '#f5f3ff',
-    100: '#ede9fe',
-    200: '#ddd6fe',
-    300: '#c4b5fd',
-    400: '#a78bfa',
-    500: '#8b5cf6',
-    600: '#7c3aed',
-    700: '#6d28d9',
-    800: '#5b21b6',
-    900: '#4c1d95'
-  },
-  indigo: {
-    50: '#eef2ff',
-    100: '#e0e7ff',
-    200: '#c7d2fe',
-    300: '#a5b4fc',
-    400: '#818cf8',
-    500: '#6366f1',
-    600: '#4f46e5',
-    700: '#4338ca',
-    800: '#3730a3',
-    900: '#312e81'
-  },
-  blue: {
-    50: '#eff6ff',
-    100: '#dbeafe',
-    200: '#bfdbfe',
-    300: '#93c5fd',
-    400: '#60a5fa',
-    500: '#3b82f6',
-    600: '#2563eb',
-    700: '#1d4ed8',
-    800: '#1e40af',
-    900: '#1e3a8a'
-  },
-  lightBlue: {
-    50: '#f0f9ff',
-    100: '#e0f2fe',
-    200: '#bae6fd',
-    300: '#7dd3fc',
-    400: '#38bdf8',
-    500: '#0ea5e9',
-    600: '#0284c7',
-    700: '#0369a1',
-    800: '#075985',
-    900: '#0c4a6e'
-  },
-  cyan: {
-    50: '#ecfeff',
-    100: '#cffafe',
-    200: '#a5f3fc',
-    300: '#67e8f9',
-    400: '#22d3ee',
-    500: '#06b6d4',
-    600: '#0891b2',
-    700: '#0e7490',
-    800: '#155e75',
-    900: '#164e63'
-  },
-  teal: {
-    50: '#f0fdfa',
-    100: '#ccfbf1',
-    200: '#99f6e4',
-    300: '#5eead4',
-    400: '#2dd4bf',
-    500: '#14b8a6',
-    600: '#0d9488',
-    700: '#0f766e',
-    800: '#115e59',
-    900: '#134e4a'
-  },
-  emerald: {
-    50: '#ecfdf5',
-    100: '#d1fae5',
-    200: '#a7f3d0',
-    300: '#6ee7b7',
-    400: '#34d399',
-    500: '#10b981',
-    600: '#059669',
-    700: '#047857',
-    800: '#065f46',
-    900: '#064e3b'
-  },
-  green: {
-    50: '#f0fdf4',
-    100: '#dcfce7',
-    200: '#bbf7d0',
-    300: '#86efac',
-    400: '#4ade80',
-    500: '#22c55e',
-    600: '#16a34a',
-    700: '#15803d',
-    800: '#166534',
-    900: '#14532d'
-  },
-  lime: {
-    50: '#f7fee7',
-    100: '#ecfccb',
-    200: '#d9f99d',
-    300: '#bef264',
-    400: '#a3e635',
-    500: '#84cc16',
-    600: '#65a30d',
-    700: '#4d7c0f',
-    800: '#3f6212',
-    900: '#365314'
-  },
-  yellow: {
-    50: '#fefce8',
-    100: '#fef9c3',
-    200: '#fef08a',
-    300: '#fde047',
-    400: '#facc15',
-    500: '#eab308',
-    600: '#ca8a04',
-    700: '#a16207',
-    800: '#854d0e',
-    900: '#713f12'
-  },
-  amber: {
-    50: '#fffbeb',
-    100: '#fef3c7',
-    200: '#fde68a',
-    300: '#fcd34d',
-    400: '#fbbf24',
-    500: '#f59e0b',
-    600: '#d97706',
-    700: '#b45309',
-    800: '#92400e',
-    900: '#78350f'
-  },
-  orange: {
-    50: '#fff7ed',
-    100: '#ffedd5',
-    200: '#fed7aa',
-    300: '#fdba74',
-    400: '#fb923c',
-    500: '#f97316',
-    600: '#ea580c',
-    700: '#c2410c',
-    800: '#9a3412',
-    900: '#7c2d12'
-  },
-  red: {
-    50: '#fef2f2',
-    100: '#fee2e2',
-    200: '#fecaca',
-    300: '#fca5a5',
-    400: '#f87171',
-    500: '#ef4444',
-    600: '#dc2626',
-    700: '#b91c1c',
-    800: '#991b1b',
-    900: '#7f1d1d'
-  },
-  warmGray: {
-    50: '#fafaf9',
-    100: '#f5f5f4',
-    200: '#e7e5e4',
-    300: '#d6d3d1',
-    400: '#a8a29e',
-    500: '#78716c',
-    600: '#57534e',
-    700: '#44403c',
-    800: '#292524',
-    900: '#1c1917'
-  },
-  trueGray: {
-    50: '#fafafa',
-    100: '#f5f5f5',
-    200: '#e5e5e5',
-    300: '#d4d4d4',
-    400: '#a3a3a3',
-    500: '#737373',
-    600: '#525252',
-    700: '#404040',
-    800: '#262626',
-    900: '#171717'
-  },
-  gray: {
-    50: '#fafafa',
-    100: '#f4f4f5',
-    200: '#e4e4e7',
-    300: '#d4d4d8',
-    400: '#a1a1aa',
-    500: '#71717a',
-    600: '#52525b',
-    700: '#3f3f46',
-    800: '#27272a',
-    900: '#18181b'
-  },
-  dark: {
-    50: '#18181b',
-    100: '#27272a',
-    200: '#3f3f46',
-    300: '#52525b',
-    400: '#71717a',
-    500: '#a1a1aa',
-    600: '#d4d4d8',
-    700: '#e4e4e7',
-    800: '#f4f4f5',
-    900: '#fafafa'
-  },
-  coolGray: {
-    50: '#f9fafb',
-    100: '#f3f4f6',
-    200: '#e5e7eb',
-    300: '#d1d5db',
-    400: '#9ca3af',
-    500: '#6b7280',
-    600: '#4b5563',
-    700: '#374151',
-    800: '#1f2937',
-    900: '#111827'
-  },
-  blueGray: {
-    50: '#f8fafc',
-    100: '#f1f5f9',
-    200: '#e2e8f0',
-    300: '#cbd5e1',
-    400: '#94a3b8',
-    500: '#64748b',
-    600: '#475569',
-    700: '#334155',
-    800: '#1e293b',
-    900: '#0f172a'
-  }
-};
-
-const defaultThemeMain = {
-  primary: 'color.black',
-  secondary: 'color.blue',
-  success: 'color.green.500',
-  error: 'color.red.500',
-  warning: 'color.orange.500',
-  disabled: 'color.gray.500',
-  loading: 'color.dark.500'
-};
-const defaultColors = {
-  white: '#FFFFFF',
-  black: '#000000',
-  red: '#FF0000',
-  green: '#00FF00',
-  blue: '#0000FF',
-  yellow: '#FFFF00',
-  cyan: '#00FFFF',
-  magenta: '#FF00FF',
-  grey: '#808080',
-  orange: '#FFA500',
-  brown: '#A52A2A',
-  purple: '#800080',
-  pink: '#FFC0CB',
-  lime: '#00FF00',
-  teal: '#008080',
-  navy: '#000080',
-  olive: '#808000',
-  maroon: '#800000',
-  gold: '#FFD700',
-  silver: '#C0C0C0',
-  indigo: '#4B0082',
-  violet: '#EE82EE',
-  beige: '#F5F5DC',
-  turquoise: '#40E0D0',
-  coral: '#FF7F50',
-  chocolate: '#D2691E',
-  skyBlue: '#87CEEB',
-  plum: '#DDA0DD',
-  darkGreen: '#006400',
-  salmon: '#FA8072'
-};
-const ThemeContext = /*#__PURE__*/createContext({
-  getColor: name => {
-    return name;
-  },
-  colors: {
-    main: defaultColors,
-    palette: palette
-  },
-  theme: {
-    main: defaultThemeMain,
-    components: {}
-  }
-});
-const useTheme = () => useContext(ThemeContext);
-const ThemeProvider = _ref => {
-  let {
-    theme = {
-      main: defaultThemeMain,
-      components: {}
-    },
-    colors = {
-      main: defaultColors,
-      palette: palette
-    },
-    children
-  } = _ref;
-  const getColor = name => {
-    if (name === 'transparent') return name;
-    try {
-      // Si le nom commence par "theme.", nous recherchons dans les couleurs du thème
-      if (name.startsWith('theme.')) {
-        const keys = name.split('.');
-        if (keys[1] !== undefined && typeof theme.components[keys[1]] == 'object' && theme.components[keys[1]][keys[2]] !== undefined) {
-          return getColor(theme.components[keys[1]][keys[2]]);
-        } else if (theme.main[keys[1]] && theme.main[keys[1]] !== undefined) {
-          return getColor(theme.main[keys[1]]);
-        } else {
-          console.log('Color ' + name + ' not found');
-        }
-      }
-      // Si le nom commence par "color.", nous recherchons dans la palette
-      else if (name.startsWith('color.')) {
-        const keys = name.split('.'); // Retirer le préfixe "color."
-        if (colors.palette && colors.palette[keys[1]][keys[2]] !== undefined) {
-          return colors.palette[keys[1]][keys[2]];
-        } else if (colors.palette && colors.palette[keys[1]][parseInt(keys[2])] !== undefined) {
-          return colors.palette[keys[1]][parseInt(keys[2])];
-        } else if (colors.main && colors.main[keys[1]] !== undefined) {
-          return colors.main[keys[1]];
-        } else {
-          console.log('Color ' + name + ' not found');
-        }
-      }
-    } catch (e) {}
-    return name;
-  };
-  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-    value: {
-      getColor,
-      theme: {
-        main: {
-          ...defaultThemeMain,
-          ...theme.main
-        },
-        components: {
-          ...theme.components
-        }
-      },
-      colors: {
-        main: {
-          ...defaultColors,
-          ...colors.main
-        },
-        palette: {
-          ...palette,
-          ...colors.palette
-        }
-      }
-    }
-  }, children);
-};
-
-const Shadows = {
-  0: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 1,
-      height: 2
-    },
-    shadowOpacity: 0.18,
-    shadowRadius: 1.0
-  },
-  1: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 2,
-      height: 2
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 1.41
-  },
-  2: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 3,
-      height: 3
-    },
-    shadowOpacity: 0.22,
-    shadowRadius: 2.22
-  },
-  3: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 4,
-      height: 4
-    },
-    shadowOpacity: 0.23,
-    shadowRadius: 2.62
-  },
-  4: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 5,
-      height: 5
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84
-  },
-  5: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 6,
-      height: 6
-    },
-    shadowOpacity: 0.27,
-    shadowRadius: 4.65
-  },
-  6: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 7,
-      height: 7
-    },
-    shadowOpacity: 0.29,
-    shadowRadius: 4.65
-  },
-  7: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 8,
-      height: 8
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 4.65
-  },
-  8: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 9,
-      height: 9
-    },
-    shadowOpacity: 0.32,
-    shadowRadius: 5.46
-  },
-  9: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 10,
-      height: 10
-    },
-    shadowOpacity: 0.34,
-    shadowRadius: 6.27
-  }
-};
-
-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', 'textIndent', 'textOrientation', 'textOverflow', 'textRendering', 'textShadow', 'textSizeAdjust', 'textTransform', 'textUnderlinePosition', 'top', 'touchAction', 'transform', 'transformBox', 'transformOrigin', 'transformStyle', 'transition', 'transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction', 'unicodeBidi', 'unicodeRange', 'userSelect', 'userZoom', 'vectorEffect', 'verticalAlign', 'visibility', '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']);
-const nonStyleAttributes = /*#__PURE__*/new Set(['length', 'parentRule', 'src']);
-const isStyleProp = property => {
-  return StyleProps.has(property) || nonStyleAttributes.has(property);
-};
-
-const defaultBreakpointsConfig = {
-  xs: 0,
-  sm: 340,
-  md: 560,
-  lg: 1080,
-  xl: 1300
-};
-const defaultDeviceConfig = {
-  mobile: ['xs', 'sm'],
-  tablet: ['md', 'lg'],
-  desktop: ['lg', 'xl']
-};
-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 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)' : ''}`;
-  });
-  return query;
-};
-const defaultScreenConfig = {
-  breakpoints: defaultBreakpointsConfig,
-  devices: defaultDeviceConfig,
-  mediaQueries: /*#__PURE__*/getMediaQueries(defaultBreakpointsConfig)
-};
-const ResponsiveContext = /*#__PURE__*/createContext(defaultScreenConfig);
-const useResponsiveContext = () => useContext(ResponsiveContext);
-const ResponsiveProvider = _ref => {
-  let {
-    breakpoints = defaultBreakpointsConfig,
-    devices = defaultDeviceConfig,
-    children
-  } = _ref;
-  return /*#__PURE__*/React.createElement(ResponsiveContext.Provider, {
-    value: {
-      breakpoints,
-      devices,
-      mediaQueries: getMediaQueries(breakpoints)
-    }
-  }, children);
-};
-
-// Liste des propriétés numériques
-const NumberProps = ['numberOfLines', 'fontWeight', 'timeStamp', 'flex', 'flexGrow', 'flexShrink', 'order', 'zIndex', 'aspectRatio', 'shadowOpacity', 'shadowRadius', 'scale', 'opacity', 'min', 'max', 'now'];
-// Stocke si une propriété est numérique
-const NumberPropsStyle = {};
-NumberProps.forEach(property => {
-  NumberPropsStyle[property] = true;
-});
-// Fonction pour définir la taille de l'élément
-const setSize = (newSize, styleProps) => {
-  styleProps.height = styleProps.width = newSize; // Définit la hauteur et la largeur
-};
-// Fonction pour appliquer les styles à un composant
-const applyStyle = props => {
-  const {
-    getColor
-  } = useTheme(); // Utilise le hook pour obtenir les couleurs du thème
-  const {
-    mediaQueries,
-    devices
-  } = useResponsiveContext(); // Utilise le contexte responsive
-  // eslint-disable-next-line prefer-const
-  let styleProps = {}; // Stocke les styles
-  // Applique un curseur pointeur si un gestionnaire de clic est présent
-  if (props.onClick && styleProps.cursor == undefined) {
-    styleProps.cursor = 'pointer';
-  }
-  // Gère 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) {
-    setSize(size, styleProps); // Applique la taille
-  }
-  // Gère le padding et la marge
-  if (props.paddingHorizontal) {
-    styleProps.paddingLeft = props.paddingHorizontal;
-    styleProps.paddingRight = props.paddingHorizontal;
-  }
-  if (props.marginHorizontal) {
-    styleProps.marginLeft = props.marginHorizontal;
-    styleProps.marginRight = props.marginHorizontal;
-  }
-  if (props.paddingVertical) {
-    styleProps.paddingTop = props.paddingVertical;
-    styleProps.paddingBottom = props.paddingVertical;
-  }
-  if (props.marginVertical) {
-    styleProps.marginTop = props.marginVertical;
-    styleProps.marginBottom = props.marginVertical;
-  }
-  // Applique les 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).join(',');
-        styleProps['boxShadow'] = `${Shadows[shadowValue].shadowOffset.height}px ${Shadows[shadowValue].shadowOffset.width}px ${Shadows[shadowValue].shadowRadius}px rgba(${shadowColor},${Shadows[shadowValue].shadowOpacity})`;
-      }
-    } else {
-      const shadowColor = Color.hex.rgb(props.shadow.shadowColor).join(',');
-      styleProps['boxShadow'] = `${props.shadow.shadowOffset.height}px ${props.shadow.shadowOffset.width}px ${props.shadow.shadowRadius}px rgba(${shadowColor},${props.shadow.shadowOpacity})`;
-    }
-    delete props['shadow'];
-  }
-  // Gère les styles pour des médias spécifiques
-  if (props.only) {
-    const {
-      only,
-      ...newProps
-    } = props;
-    only.map(o => {
-    });
-    const styleKeys = Object.keys(newProps).filter(key => isStyleProp(key));
-    styleKeys.map(key => {
-      only.map(o => {
-        props.media[o][key] = newProps[key];
-      });
-      delete props[key];
-    });
-    delete props['only'];
-  }
-  // Gère les styles CSS personnalisés
-  if (props.css) {
-    const {
-      css
-    } = props;
-    props = {
-      ...css,
-      props
-    };
-    delete props['css'];
-  }
-  // Applique les styles
-  Object.keys(props).map(property => {
-    if (property !== 'shadow' && property !== 'size') {
-      if (isStyleProp(property) || property == 'on' || property == 'media') {
-        if (typeof props[property] === 'object') {
-          if (property === 'on') {
-            for (const event in props[property]) {
-              styleProps['&:' + event] = applyStyle(props[property][event]);
-            }
-          } else if (property === 'media') {
-            for (const screenOrDevices in props[property]) {
-              if (mediaQueries[screenOrDevices] !== undefined && props[property][screenOrDevices] !== undefined) {
-                styleProps['@media ' + mediaQueries[screenOrDevices]] = applyStyle(props[property][screenOrDevices]);
-              } else if (devices[screenOrDevices] !== undefined) {
-                for (const deviceScreen in devices[screenOrDevices]) {
-                  if (mediaQueries[devices[screenOrDevices][deviceScreen]] !== undefined && props[property][screenOrDevices] !== undefined) {
-                    styleProps['@media ' + mediaQueries[devices[screenOrDevices][deviceScreen]]] = applyStyle(props[property][screenOrDevices]);
-                  }
-                }
-              }
-            }
-          } else {
-            styleProps[property] = applyStyle(props[property]);
-          }
-        } else if (typeof props[property] === 'number' && NumberPropsStyle[property] === undefined) {
-          styleProps[property] = props[property] + 'px';
-        } else if (property.toLowerCase().indexOf('color') !== -1) {
-          styleProps[property] = getColor(props[property]);
-        } else {
-          styleProps[property] = props[property];
-        }
-      }
-    }
-  });
-  return styleProps;
-};
-// Clés à exclure lors de la création du composant stylisé
-const excludedKeys = /*#__PURE__*/new Set(['on', 'shadow', 'only', 'media', 'css', 'paddingHorizontal', 'paddingVertical', 'marginHorizontal', 'marginVertical']);
-const includeKeys = /*#__PURE__*/new Set(['src', 'alt', 'style']);
-// Crée un composant div stylisé, en excluant certaines props
-const ElementComponent = /*#__PURE__*/styled.div.withConfig({
-  shouldForwardProp: key => {
-    return !excludedKeys.has(key) && !isStyleProp(key) || includeKeys.has(key);
-  }
-})`
-  // Applique les styles dynamiques en utilisant la fonction applyStyle
-  ${props => props.css}
-`;
-const useStyledProps = props => {
-  const styledProps = applyStyle(props);
-  // Filtrer les props pour exclure celles qui sont utilisées pour le style
-  const newProps = Object.keys(props).reduce((acc, key) => {
-    if (!excludedKeys.has(key) && !isStyleProp(key) || includeKeys.has(key)) {
-      acc[key] = props[key];
-    }
-    return acc;
-  }, {});
-  return {
-    newProps,
-    styledProps
-  };
-};
-const Element = props => {
-  // eslint-disable-next-line prefer-const
-  let {
-    onPress,
-    ...rest
-  } = props;
-  // eslint-disable-next-line prefer-const
-  let {
-    newProps,
-    styledProps
-  } = useStyledProps(rest);
-  if (onPress) {
-    newProps.onClick = onPress;
-  }
-  // Rendu du composant avec les props
-  return /*#__PURE__*/React.createElement(ElementComponent, Object.assign({}, rest, {
-    css: styledProps
-  }));
-};
-
-const View = /*#__PURE__*/React.memo(props => /*#__PURE__*/React.createElement(Element, Object.assign({}, props)));
-const Div = View;
-const SafeArea = View;
-const Scroll = /*#__PURE__*/React.memo(props => /*#__PURE__*/React.createElement(View, Object.assign({
-  overflow: 'auto'
-}, props)));
-const Span = /*#__PURE__*/React.memo(props => /*#__PURE__*/React.createElement(Element, Object.assign({}, props, {
-  as: "span"
-})));
-
-const Image = /*#__PURE__*/React.memo(props => /*#__PURE__*/React.createElement(Element, Object.assign({}, props, {
-  as: "img"
-})));
-
-const Text = /*#__PURE__*/React.memo(props => {
-  return /*#__PURE__*/React.createElement(Element, Object.assign({}, props));
-});
-
-// Utilisation de React.memo pour une meilleure performance
-const Form = /*#__PURE__*/React.memo(props => /*#__PURE__*/React.createElement(Element, Object.assign({}, props, {
-  as: "form"
-})));
-const Input = /*#__PURE__*/React.memo(props => /*#__PURE__*/React.createElement(Element, Object.assign({}, props, {
-  as: "input"
-})));
-const Button = /*#__PURE__*/React.memo(props => /*#__PURE__*/React.createElement(Element, Object.assign({}, props, {
-  as: "button"
-})));
-
-const Typography = {
-  letterSpacings: {
-    tighter: -0.08,
-    tight: -0.4,
-    normal: 0,
-    wide: 0.4,
-    wider: 0.8,
-    widest: 1.6
-  },
-  lineHeights: {
-    xs: 10,
-    sm: 12,
-    md: 14,
-    lg: 16,
-    xl: 20,
-    '2xl': 24,
-    '3xl': 30,
-    '4xl': 36,
-    '5xl': 48,
-    '6xl': 64
-  },
-  fontWeights: {
-    hairline: 100,
-    thin: 200,
-    light: 300,
-    normal: 400,
-    medium: 500,
-    semiBold: 600,
-    bold: 700,
-    extraBold: 800,
-    black: 900
-  },
-  fontSizes: {
-    xs: 10,
-    sm: 12,
-    md: 14,
-    lg: 16,
-    xl: 20,
-    '2xl': 24,
-    '3xl': 30,
-    '4xl': 36,
-    '5xl': 48,
-    '6xl': 64
-  }
-};
-
-/**
- * whether in browser env
- */
-const isBrowser = () => typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
-/**
- * get window.g_initialProps
- */
-const getWindowInitialProps = () => isBrowser() ? window.g_initialProps : undefined;
-/**
- * whether SSR success in client
- */
-const isSSR = ! /*#__PURE__*/isBrowser();
-function isDev() {
-  let dev = false;
-  if (isBrowser()) {
-    dev = !(window.location.hostname.indexOf('localhost') === -1);
-  }
-  return dev;
-}
-function isProd() {
-  if (isBrowser()) {
-    if (window && window.location && window.location.hostname) {
-      return window.location.hostname.includes('localhost') || window.location.hostname.includes('develop');
-    }
-  }
-  return false;
-}
-function isMobile() {
-  return navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i);
-}
-
-const useMount = callback => {
-  useEffect(() => {
-    callback();
-  }, []);
-};
-
-const createQuery = (keyScreen, query, set) => {
-  const mql = window.matchMedia(query);
-  const onChange = () => {
-    if (!!mql.matches) {
-      set(keyScreen);
-    }
-  };
-  mql.addListener(onChange);
-  if (!!mql.matches) {
-    set(keyScreen);
-  }
-  return () => {
-    mql.removeListener(onChange);
-  };
-};
-const useResponsive = () => {
-  const {
-    breakpoints,
-    devices,
-    mediaQueries
-  } = useResponsiveContext();
-  const [screen, setScreen] = useState('xs');
-  const [orientation, setOrientation] = useState('landscape');
-  useMount(() => {
-    for (const screenSize in mediaQueries) {
-      createQuery(screenSize, mediaQueries[screenSize], setScreen);
-    }
-    createQuery('landscape', 'only screen and (orientation: landscape)', setOrientation);
-    createQuery('portrait', 'only screen and (orientation: portrait)', setOrientation);
-  });
-  const on = device => {
-    return devices[device].includes(screen);
-  };
-  const is = s => {
-    return s == screen;
-  };
-  return {
-    breakpoints,
-    devices,
-    orientation,
-    screen,
-    on,
-    is
-  };
-};
-
-export { Button, Div, Element, Form, Image, Input, ResponsiveContext, ResponsiveProvider, SafeArea, Scroll, Shadows, Span, Text, ThemeContext, ThemeProvider, Typography, View, applyStyle, createQuery, defaultColors, defaultThemeMain, getWindowInitialProps, isBrowser, isDev, isMobile, isProd, isSSR, palette, setSize, useMount, useResponsive, useResponsiveContext, useTheme };
-//# sourceMappingURL=app-studio.esm.js.map