app-studio 0.0.1

package/dist/app-studio.esm.js

@@ -0,0 +1,907 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+
+  _setPrototypeOf(subClass, superClass);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var 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)'
+  },
+  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'
+  }
+};
+
+var defaultColors = {
+  white: '#FFFFFF',
+  black: '#000000'
+};
+var ThemeContext = /*#__PURE__*/createContext({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  getColor: function getColor(name) {
+    return name;
+  },
+  colors: defaultColors,
+  palette: palette
+});
+var useTheme = function useTheme() {
+  return useContext(ThemeContext);
+};
+var ThemeProvider = function ThemeProvider(_ref) {
+  var _ref$palette = _ref.palette,
+      palette$1 = _ref$palette === void 0 ? palette : _ref$palette,
+      _ref$colors = _ref.colors,
+      colors = _ref$colors === void 0 ? defaultColors : _ref$colors,
+      children = _ref.children;
+
+  var getColor = function getColor(name) {
+    // console.log('getColor', name);
+    if (name === 'transparent') return name;
+
+    try {
+      if (name.indexOf('.') !== -1) {
+        var keys = name.split('.');
+
+        if (palette$1 && palette$1[keys[0]][keys[1]] !== undefined) {
+          return palette$1[keys[0]][keys[1]];
+        }
+
+        if (palette$1[keys[0]][parseInt(keys[1])] !== undefined) {
+          return palette$1[keys[0]][parseInt(keys[1])];
+        }
+      } else if (colors && colors[name] !== undefined) {
+        return colors[name];
+      }
+    } catch (e) {
+      console.log('Color ' + name + ' not found');
+    }
+
+    return name;
+  };
+
+  return React.createElement(ThemeContext.Provider, {
+    value: {
+      getColor: getColor,
+      colors: colors,
+      palette: palette$1
+    }
+  }, children);
+};
+
+var TransformStyleProps = ['transform', 'transformMatrix', 'rotation', 'scaleX', 'scaleY', 'translateX', 'translateY', // 'perspective',
+// 'rotate',
+// 'rotateX',
+// 'rotateY',
+// 'rotateZ',
+// 'scale',
+// 'skewX',
+// 'skewY',
+'testID', 'decomposedMatrix'];
+var ImageStyleProps = ['borderTopRightRadius', 'backfaceVisibility', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderColor', 'borderRadius', 'borderTopLeftRadius', 'backgroundColor', 'borderWidth', 'opacity', 'overflow', 'overflowX', 'overflowY', 'resizeMode', 'tintColor', 'overlayColor'];
+var LayoutStyleProps = ['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'];
+var ShadowStyleProps = ['shadowColor', 'shadowOffset', 'shadowOpacity', 'shadowRadius'];
+var TextStyleProps = ['textShadowOffset', 'color', 'fontSize', 'fontStyle', 'fontWeight', 'lineHeight', 'textAlign', 'textDecorationLine', 'textShadowColor', 'fontFamily', 'textShadowRadius', 'includeFontPadding', 'textAlignVertical', 'fontVariant', 'letterSpacing', 'textDecorationColor', 'textDecorationStyle', 'textTransform', 'writingDirection'];
+var ViewStyleProps = ['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', 'size'];
+var ScrollViewStyleProps = ['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'];
+var allStyleProps = /*#__PURE__*/LayoutStyleProps.concat(ShadowStyleProps, TransformStyleProps, ViewStyleProps, ScrollViewStyleProps, TextStyleProps, ImageStyleProps);
+var StyleProps = {};
+allStyleProps.map(function (property) {
+  StyleProps[property] = true;
+});
+var setSize = function setSize(newSize, newProps) {
+  newProps.height = newProps.width = newSize;
+};
+var applyStyle = function applyStyle(props) {
+  var _useTheme = useTheme(),
+      getColor = _useTheme.getColor;
+
+  var newProps = {};
+
+  if (props.onClick) {
+    newProps.cursor = 'pointer';
+  }
+
+  var size = props.height !== undefined && props.width !== undefined && props.height === props.width ? props.height : props.size ? props.size : null;
+
+  if (size) {
+    setSize(size, newProps);
+  }
+
+  if (props.paddingHorizontal) {
+    newProps.paddingLeft = props.paddingHorizontal;
+    newProps.paddingRight = props.paddingHorizontal;
+  }
+
+  if (props.marginHorizontal) {
+    newProps.marginLeft = props.marginHorizontal;
+    newProps.marginRight = props.marginHorizontal;
+  }
+
+  if (props.paddingVertical) {
+    newProps.paddingTop = props.paddingVertical;
+    newProps.paddingBottom = props.paddingVertical;
+  }
+
+  if (props.marginVertical) {
+    newProps.marginTop = props.marginVertical;
+    newProps.marginBottom = props.marginVertical;
+  }
+
+  Object.keys(props).filter(function (property) {
+    return StyleProps[property] !== undefined || property[0] == '&';
+  }).map(function (property) {
+    newProps[property] = props[property]; //  console.log(property, propertyType);
+
+    if (property.toLowerCase().indexOf('color') !== -1) {
+      newProps[property] = getColor(props[property]);
+    }
+  }); // return {newProps,responsive};
+
+  return newProps;
+}; // function convertToCSS(props: any) {
+//   return Object.entries(props).reduce((str, [key, val]) => {
+//     const casedKey = key.replace(
+//       /[A-Z]/g,
+//       (match) => `-${match.toLowerCase()}`
+//     );
+//     return `${str}${casedKey}:${typeof val === 'number' ? val + 'px' : val};\n`;
+//   }, '');
+// }
+// export const getResponsiveMediaQueries = (props: any) => {
+//   const { breakpointKeys, breakpoints } = useResponsive();
+//   console.log('mediaQueries', props);
+//   const mediaQueries = breakpointKeys
+//     .map((size) => {
+//       return props && props[size] !== undefined
+//         ? `
+//     @media ${
+//       breakpoints[size].min
+//         ? ' (min-width:' +
+//           (breakpoints[size].min > 0 ? breakpoints[size].min : 0) +
+//           'px)'
+//         : ''
+//     } ${
+//             breakpoints[size].min &&
+//             breakpoints[size].max &&
+//             breakpoints[size].max >= 0 &&
+//             breakpoints[size].max < Infinity
+//               ? ' and '
+//               : ''
+//           } ${
+//             breakpoints[size].max &&
+//             breakpoints[size].max >= 0 &&
+//             breakpoints[size].max < Infinity
+//               ? ' (max-width:' + breakpoints[size].max + 'px)'
+//               : ''
+//           } {
+//      ${convertToCSS(props[size])}
+//     }`
+//         : '';
+//     })
+//     .join('\n');
+//   return mediaQueries;
+// };
+
+var StyledView = /*#__PURE__*/styled.div(function (props) {
+  return applyStyle(props);
+});
+var StyledImage = /*#__PURE__*/styled.img(function (props) {
+  return applyStyle(props);
+});
+var ViewElement = /*#__PURE__*/function (_React$PureComponent) {
+  _inheritsLoose(ViewElement, _React$PureComponent);
+
+  function ViewElement() {
+    return _React$PureComponent.apply(this, arguments) || this;
+  }
+
+  var _proto = ViewElement.prototype;
+
+  _proto.render = function render() {
+    var onClick = this.props.onClick;
+
+    if (this.props.onPress !== undefined) {
+      onClick = this.props.onPress;
+    } //console.log(this.props);
+
+
+    return React.createElement(StyledView, Object.assign({}, this.props, {
+      onClick: onClick
+    }));
+  };
+
+  return ViewElement;
+}(React.PureComponent);
+var ImageElement = /*#__PURE__*/function (_React$PureComponent2) {
+  _inheritsLoose(ImageElement, _React$PureComponent2);
+
+  function ImageElement() {
+    return _React$PureComponent2.apply(this, arguments) || this;
+  }
+
+  var _proto2 = ImageElement.prototype;
+
+  _proto2.render = function render() {
+    var onClick = this.props.onClick;
+
+    if (this.props.onPress !== undefined) {
+      onClick = this.props.onPress;
+    }
+
+    return React.createElement(StyledImage, Object.assign({}, this.props, {
+      onClick: onClick
+    }));
+  };
+
+  return ImageElement;
+}(React.PureComponent);
+
+var View = function View(props) {
+  return React.createElement(ViewElement, Object.assign({}, props));
+};
+var SafeArea = View;
+var Scroll = function Scroll(props) {
+  return React.createElement(View, Object.assign({
+    overflow: 'auto'
+  }, props));
+};
+var Horizontal = function Horizontal(props) {
+  return React.createElement(View, Object.assign({
+    display: 'flex',
+    flexDirection: "row"
+  }, props));
+};
+var HorizontalScroll = function HorizontalScroll(props) {
+  return React.createElement(Horizontal, Object.assign({
+    overflowX: "auto"
+  }, props));
+};
+var Vertical = function Vertical(props) {
+  return React.createElement(View, Object.assign({
+    flexDirection: "column"
+  }, props));
+};
+var VerticalScroll = function VerticalScroll(props) {
+  return React.createElement(Vertical, Object.assign({
+    overflowY: "auto"
+  }, props));
+};
+var Inline = function Inline(props) {
+  return React.createElement(View, Object.assign({
+    display: 'flex',
+    flexDirection: "row",
+    wordBreak: "break-word"
+  }, props));
+};
+var Start = function Start(props) {
+  return React.createElement(View, Object.assign({
+    display: 'flex',
+    alignSelf: "flex-start"
+  }, props));
+};
+var End = function End(props) {
+  return React.createElement(View, Object.assign({
+    display: 'flex',
+    alignSelf: "flex-end"
+  }, props));
+};
+var Center = function Center(props) {
+  return React.createElement(View, Object.assign({
+    display: 'flex',
+    justifyContent: "center",
+    alignItems: 'center'
+  }, props));
+};
+var AlignStart = function AlignStart(props) {
+  return React.createElement(View, Object.assign({
+    display: 'flex',
+    justifyContent: "flex-start"
+  }, props));
+};
+var AlignCenter = function AlignCenter(props) {
+  return React.createElement(View, Object.assign({
+    display: 'flex',
+    justifyContent: "center",
+    width: '100%'
+  }, props));
+};
+var AlignEnd = function AlignEnd(props) {
+  return React.createElement(View, Object.assign({
+    display: 'flex',
+    justifyContent: "flex-end",
+    width: '100%'
+  }, props));
+};
+
+var _excluded = ["src", "style", "onClick", "onPress"],
+    _excluded2 = ["size", "src"],
+    _excluded3 = ["size", "src"];
+var ImageBackground = /*#__PURE__*/function (_React$PureComponent) {
+  _inheritsLoose(ImageBackground, _React$PureComponent);
+
+  function ImageBackground() {
+    return _React$PureComponent.apply(this, arguments) || this;
+  }
+
+  var _proto = ImageBackground.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        src = _this$props.src,
+        style = _this$props.style,
+        onClick = _this$props.onClick,
+        onPress = _this$props.onPress,
+        props = _objectWithoutPropertiesLoose(_this$props, _excluded);
+
+    return React.createElement(View, Object.assign({
+      style: _extends({
+        backgroundSize: 'contain',
+        backgroundImage: "url(\"" + src + "\")",
+        backgroundPosition: 'center center',
+        backgroundRepeat: 'no-repeat'
+      }, style),
+      onClick: onClick ? onClick : onPress
+    }, props));
+  };
+
+  return ImageBackground;
+}(React.PureComponent);
+var Image = function Image(props) {
+  return React.createElement(ImageElement, Object.assign({}, props));
+};
+var RoundedImage = function RoundedImage(_ref) {
+  var size = _ref.size,
+      src = _ref.src,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded2);
+
+  return React.createElement(ImageBackground, Object.assign({
+    borderRadius: size / 2,
+    size: size,
+    src: src
+  }, props));
+};
+var SquaredImage = function SquaredImage(_ref2) {
+  var size = _ref2.size,
+      src = _ref2.src,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+
+  return React.createElement(ImageBackground, Object.assign({}, props, {
+    size: size,
+    src: src
+  }));
+};
+
+var _excluded$1 = ["hint", "disabled", "opacity", "fontSize"],
+    _excluded2$1 = ["toUpperCase", "children", "textTypographyConfig"];
+var formatTextStyle = function formatTextStyle(_ref) {
+  var _ref$hint = _ref.hint,
+      hint = _ref$hint === void 0 ? false : _ref$hint,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      opacity = _ref.opacity,
+      fontSize = _ref.fontSize,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+
+  if (props) {
+    if (hint) {
+      opacity = hint;
+    }
+
+    if (disabled) {
+      opacity = disabled;
+    }
+
+    return _extends({}, props, {
+      opacity: opacity,
+      fontSize: fontSize
+    });
+  }
+
+  return props;
+};
+var TextSpan = /*#__PURE__*/styled.div(function (props) {
+  props.display = 'inherit';
+  props.flexDirection = 'column';
+  return applyStyle(props);
+});
+var TextComponent = function TextComponent(textProps) {
+  var _useTheme = useTheme(),
+      getColor = _useTheme.getColor;
+
+  var styledProps = applyStyle(textProps);
+
+  var _styledProps$toUpperC = styledProps.toUpperCase,
+      toUpperCase = _styledProps$toUpperC === void 0 ? false : _styledProps$toUpperC,
+      children = styledProps.children,
+      textTypographyConfig = styledProps.textTypographyConfig,
+      props = _objectWithoutPropertiesLoose(styledProps, _excluded2$1);
+
+  var content = children;
+
+  if (children && typeof children === 'string') {
+    content = children.toString().trim();
+  }
+
+  if (typeof content === 'string' && toUpperCase) {
+    content = content.toUpperCase();
+  }
+
+  var style = props.style || {};
+
+  if (textTypographyConfig) {
+    style = formatTextStyle(_extends({}, textTypographyConfig, style));
+  }
+
+  if (typeof content === 'string') {
+    content = content.split('\n').map(function (item, key) {
+      return React.createElement("span", {
+        key: key.toString()
+      }, item, React.createElement("br", null));
+    });
+  }
+
+  Object.values(style).map(function (val) {
+    if (typeof val === 'string' && val.toLowerCase().indexOf('color') !== -1) {
+      val = getColor(val);
+    }
+  });
+  return React.createElement(TextSpan, Object.assign({}, style, props), content);
+};
+var Text = TextComponent;
+
+var useMount = function useMount(callback) {
+  useEffect(function () {
+    callback();
+  }, []);
+};
+
+var defaultBreakpointsConfig = {
+  xs: 0,
+  sm: 340,
+  md: 560,
+  lg: 1080,
+  xl: 1300
+};
+var defaultDeviceConfig = {
+  mobile: ['xs', 'sm'],
+  tablet: ['md', 'lg'],
+  desktop: ['lg', 'xl']
+};
+var defaultScreenConfig = {
+  breakpoints: defaultBreakpointsConfig,
+  devices: defaultDeviceConfig
+};
+var ResponsiveContext = /*#__PURE__*/createContext(defaultScreenConfig);
+var useResponsiveContext = function useResponsiveContext() {
+  return useContext(ResponsiveContext);
+};
+var ResponsiveProvider = function ResponsiveProvider(_ref) {
+  var _ref$breakpoints = _ref.breakpoints,
+      breakpoints = _ref$breakpoints === void 0 ? defaultBreakpointsConfig : _ref$breakpoints,
+      _ref$devices = _ref.devices,
+      devices = _ref$devices === void 0 ? defaultDeviceConfig : _ref$devices,
+      children = _ref.children;
+  return React.createElement(ResponsiveContext.Provider, {
+    value: {
+      breakpoints: breakpoints,
+      devices: devices
+    }
+  }, children);
+};
+
+var createQuery = function createQuery(keyScreen, query, set) {
+  var mql = window.matchMedia(query);
+
+  var onChange = function onChange() {
+    if (!!mql.matches) {
+      set(keyScreen);
+    }
+  };
+
+  mql.addListener(onChange);
+
+  if (!!mql.matches) {
+    set(keyScreen);
+  }
+
+  return function () {
+    mql.removeListener(onChange);
+  };
+};
+var useResponsive = function useResponsive() {
+  var _useResponsiveContext = useResponsiveContext(),
+      breakpoints = _useResponsiveContext.breakpoints,
+      devices = _useResponsiveContext.devices;
+
+  var _useState = useState('xs'),
+      screen = _useState[0],
+      setScreen = _useState[1];
+
+  var _useState2 = useState('landscape'),
+      orientation = _useState2[0],
+      setOrientation = _useState2[1];
+
+  var keys = Object.keys(breakpoints);
+  useMount(function () {
+    var breakpointValue = keys.map(function (breakpoint) {
+      var value = {
+        breakpoint: breakpoint,
+        min: breakpoints[breakpoint],
+        max: 0
+      };
+      return value;
+    }).sort(function (a, b) {
+      return a.min - b.min;
+    });
+    breakpointValue.reduce(function (a, b) {
+      if (b) a.max = b.min;
+      return b;
+    });
+    breakpointValue.map(function (sizeScreen) {
+      createQuery(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)' : ''), setScreen); // if (
+      //   window.innerWidth >= sizeScreen.min &&
+      //   window.innerWidth <= sizeScreen.max
+      // ) {
+      //   setScreen(key as ScreenResponsiveConfig);
+      // }
+    });
+    createQuery('landscape', 'only screen and (orientation: landscape)', setOrientation);
+    createQuery('portrait', 'only screen and (orientation: portrait)', setOrientation);
+  });
+
+  var on = function on(device) {
+    return devices[device].includes(screen);
+  };
+
+  return {
+    breakpoints: breakpoints,
+    devices: devices,
+    orientation: orientation,
+    screen: screen,
+    on: on
+  };
+};
+
+export { AlignCenter, AlignEnd, AlignStart, Center, End, Horizontal, HorizontalScroll, Image, ImageBackground, Inline, ResponsiveContext, ResponsiveProvider, RoundedImage, SafeArea, Scroll, SquaredImage, Start, Text, TextComponent, TextSpan, ThemeContext, ThemeProvider, Vertical, VerticalScroll, View, createQuery, formatTextStyle, useMount, useResponsive, useResponsiveContext, useTheme };
+//# sourceMappingURL=app-studio.esm.js.map