app-studio 0.0.6 → 0.0.10

package/README.md

@@ -79,9 +79,10 @@ function Example() {
 }
 ```
 
-### Responsive
 
+You can Use View is use <div> tag you can use  Div, Span, Form, Input, Image components if you need another tag.
 
+### Responsive
 
 ```jsx
 import React from 'react';
@@ -89,6 +90,8 @@ import { ResponsiveProvider } from 'app-studio';
 
 const Example = () => {
   const { screen, on } = useResponsive();
+  // "screen" provide you the screen size corresponding to you breakpoints
+  // "on" tell you is screen size is included corresponding to you devices
   const responsive = {
     xs: {
       backgroundColor: 'red',
@@ -168,7 +171,8 @@ const theme = {
   }
 	
 };
-
+//  color will be replaced by the value form the theme
+// all the colors props like backgroundColor will have the color from the theme
 function Example() {
 	return (
 		<ThemeProvider theme={theme}>

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

@@ -8,6 +8,7 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var Color = _interopDefault(require('color-convert'));
 var styled = _interopDefault(require('styled-components'));
+var unitlessKeys = _interopDefault(require('@emotion/unitless'));
 
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
@@ -403,8 +404,8 @@ var shadows = {
   0: {
     shadowColor: '#000',
     shadowOffset: {
-      width: 0,
-      height: 1
+      width: 1,
+      height: 2
     },
     shadowOpacity: 0.18,
     shadowRadius: 1.0
@@ -412,8 +413,8 @@ var shadows = {
   1: {
     shadowColor: '#000',
     shadowOffset: {
-      width: 0,
-      height: 1
+      width: 2,
+      height: 2
     },
     shadowOpacity: 0.2,
     shadowRadius: 1.41
@@ -421,8 +422,8 @@ var shadows = {
   2: {
     shadowColor: '#000',
     shadowOffset: {
-      width: 0,
-      height: 1
+      width: 3,
+      height: 3
     },
     shadowOpacity: 0.22,
     shadowRadius: 2.22
@@ -430,8 +431,8 @@ var shadows = {
   3: {
     shadowColor: '#000',
     shadowOffset: {
-      width: 0,
-      height: 2
+      width: 4,
+      height: 4
     },
     shadowOpacity: 0.23,
     shadowRadius: 2.62
@@ -439,8 +440,8 @@ var shadows = {
   4: {
     shadowColor: '#000',
     shadowOffset: {
-      width: 0,
-      height: 2
+      width: 5,
+      height: 5
     },
     shadowOpacity: 0.25,
     shadowRadius: 3.84
@@ -448,8 +449,8 @@ var shadows = {
   5: {
     shadowColor: '#000',
     shadowOffset: {
-      width: 0,
-      height: 3
+      width: 6,
+      height: 6
     },
     shadowOpacity: 0.27,
     shadowRadius: 4.65
@@ -457,8 +458,8 @@ var shadows = {
   6: {
     shadowColor: '#000',
     shadowOffset: {
-      width: 0,
-      height: 3
+      width: 7,
+      height: 7
     },
     shadowOpacity: 0.29,
     shadowRadius: 4.65
@@ -466,8 +467,8 @@ var shadows = {
   7: {
     shadowColor: '#000',
     shadowOffset: {
-      width: 0,
-      height: 4
+      width: 8,
+      height: 8
     },
     shadowOpacity: 0.3,
     shadowRadius: 4.65
@@ -475,8 +476,8 @@ var shadows = {
   8: {
     shadowColor: '#000',
     shadowOffset: {
-      width: 0,
-      height: 4
+      width: 9,
+      height: 9
     },
     shadowOpacity: 0.32,
     shadowRadius: 5.46
@@ -484,34 +485,59 @@ var shadows = {
   9: {
     shadowColor: '#000',
     shadowOffset: {
-      width: 0,
-      height: 5
+      width: 10,
+      height: 10
     },
     shadowOpacity: 0.34,
     shadowRadius: 6.27
   }
 };
 
-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 unitlessStyleProps = /*#__PURE__*/Object.keys(unitlessKeys);
+var validStyleProps = ['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'];
+/**
+ * @param {string} prefix vendor-specific prefix, eg: Webkit
+ * @param {string} key style name, eg: transitionDuration
+ * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
+ * WebkitTransitionDuration
+ */
+
+function prefixKey(prefix, key) {
+  return prefix + key.charAt(0).toUpperCase() + key.substring(1);
+}
+/**
+ * Support style names that may come passed in prefixed by adding permutations
+ * of vendor prefixes.
+ */
+
+
+var prefixes = ['webkit', 'ms', 'moz'];
+/**
+ * Add vendor prefixing to unitless style keys.
+ */
+
+unitlessStyleProps.forEach(function (prop) {
+  prefixes.forEach(function (prefix) {
+    unitlessStyleProps.push(prefixKey(prefix, prop));
+  });
+});
+/**
+ * Add all unitless style keys to valid style keys.
+ */
+
+unitlessStyleProps.forEach(function (prop) {
+  if (validStyleProps.includes(prop)) {
+    validStyleProps.push(prop);
+  }
+});
 var StyleProps = {};
-allStyleProps.map(function (property) {
+validStyleProps.map(function (property) {
   StyleProps[property] = true;
 });
+var isStyleProp = function isStyleProp(property) {
+  return StyleProps[property] !== undefined;
+};
+
 var NumberPropsStyle = {};
 var NumberProps = ['numberOfLines', 'fontWeight', 'timeStamp', 'flex', 'flexGrow', 'flexShrink', 'order', 'zIndex', 'aspectRatio', 'shadowOpacity', 'shadowRadius', 'scale', 'opacity', 'min', 'max', 'now'];
 NumberProps.map(function (property) {
@@ -526,7 +552,7 @@ var applyStyle = function applyStyle(props) {
 
   var newProps = {};
 
-  if (props.onClick) {
+  if (props.onClick && newProps.cursor == undefined) {
     newProps.cursor = 'pointer';
   }
 
@@ -572,7 +598,7 @@ var applyStyle = function applyStyle(props) {
   }
 
   Object.keys(props).map(function (property) {
-    if (StyleProps[property] !== undefined || property == 'on') {
+    if (isStyleProp(property) || property == 'on') {
       if (typeof props[property] === 'number' && NumberPropsStyle[property] === undefined) {
         newProps[property] = props[property] + 'px';
       } else if (property.toLowerCase().indexOf('color') !== -1) {
@@ -641,6 +667,15 @@ var StyledView = /*#__PURE__*/styled.div(function (props) {
 var StyledImage = /*#__PURE__*/styled.img(function (props) {
   return applyStyle(props);
 });
+var StyledSpan = /*#__PURE__*/styled.span(function (props) {
+  return applyStyle(props);
+});
+var StyledInput = /*#__PURE__*/styled.input(function (props) {
+  return applyStyle(props);
+});
+var StyledForm = /*#__PURE__*/styled.form(function (props) {
+  return applyStyle(props);
+});
 var ViewElement = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(ViewElement, _React$PureComponent);
 
@@ -688,121 +723,137 @@ var ImageElement = /*#__PURE__*/function (_React$PureComponent2) {
 
   return ImageElement;
 }(React__default.PureComponent);
+var SpanElement = /*#__PURE__*/function (_React$PureComponent3) {
+  _inheritsLoose(SpanElement, _React$PureComponent3);
+
+  function SpanElement() {
+    return _React$PureComponent3.apply(this, arguments) || this;
+  }
+
+  var _proto3 = SpanElement.prototype;
+
+  _proto3.render = function render() {
+    var onClick = this.props.onClick;
+
+    if (this.props.onPress !== undefined) {
+      onClick = this.props.onPress;
+    }
+
+    return React__default.createElement(StyledSpan, Object.assign({}, this.props, {
+      onClick: onClick
+    }));
+  };
+
+  return SpanElement;
+}(React__default.PureComponent);
+var InputElement = /*#__PURE__*/function (_React$PureComponent4) {
+  _inheritsLoose(InputElement, _React$PureComponent4);
+
+  function InputElement() {
+    return _React$PureComponent4.apply(this, arguments) || this;
+  }
+
+  var _proto4 = InputElement.prototype;
+
+  _proto4.render = function render() {
+    var onClick = this.props.onClick;
+
+    if (this.props.onPress !== undefined) {
+      onClick = this.props.onPress;
+    }
+
+    return React__default.createElement(StyledInput, Object.assign({}, this.props, {
+      onClick: onClick
+    }));
+  };
+
+  return InputElement;
+}(React__default.PureComponent);
+var FormElement = /*#__PURE__*/function (_React$PureComponent5) {
+  _inheritsLoose(FormElement, _React$PureComponent5);
+
+  function FormElement() {
+    return _React$PureComponent5.apply(this, arguments) || this;
+  }
+
+  var _proto5 = FormElement.prototype;
+
+  _proto5.render = function render() {
+    var onClick = this.props.onClick;
+
+    if (this.props.onPress !== undefined) {
+      onClick = this.props.onPress;
+    }
+
+    return React__default.createElement(StyledForm, Object.assign({}, this.props, {
+      onClick: onClick
+    }));
+  };
+
+  return FormElement;
+}(React__default.PureComponent);
 
 var View = function View(props) {
   return React__default.createElement(ViewElement, Object.assign({}, props));
 };
+var Div = View;
 var SafeArea = View;
 var Scroll = function Scroll(props) {
   return React__default.createElement(View, Object.assign({
     overflow: 'auto'
   }, props));
 };
+var Span = function Span(props) {
+  return React__default.createElement(SpanElement, Object.assign({}, props));
+};
 
-var _excluded = ["src", "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,
-        onClick = _this$props.onClick,
-        onPress = _this$props.onPress,
-        props = _objectWithoutPropertiesLoose(_this$props, _excluded);
-
-    return React__default.createElement(View, Object.assign({
-      style: {
-        backgroundSize: 'contain',
-        backgroundImage: "url(\"" + src + "\")",
-        backgroundPosition: 'center center',
-        backgroundRepeat: 'no-repeat'
-      },
-      onClick: onClick ? onClick : onPress
-    }, props));
-  };
-
-  return ImageBackground;
-}(React__default.PureComponent);
 var Image = function Image(props) {
   return React__default.createElement(ImageElement, Object.assign({}, props));
 };
-var RoundedImage = function RoundedImage(_ref) {
-  var size = _ref.size,
-      src = _ref.src,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded2);
-
-  return React__default.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__default.createElement(ImageBackground, Object.assign({}, props, {
-    size: size,
-    src: src
-  }));
-};
 
-var _excluded$1 = ["toUpperCase", "children", "toFormat"];
-var TextSpan = /*#__PURE__*/styled.div(function (props) {
-  props.display = 'inherit';
-  props.flexDirection = 'column';
+var _excluded = ["toUpperCase", "children"];
+var TextSpan = /*#__PURE__*/styled.span(function (props) {
   return applyStyle(props);
 });
-var Text = /*#__PURE__*/function (_React$PureComponent) {
-  _inheritsLoose(Text, _React$PureComponent);
-
-  function Text() {
-    return _React$PureComponent.apply(this, arguments) || this;
-  }
+var Text = function Text(props) {
+  var _props$toUpperCase = props.toUpperCase,
+      toUpperCase = _props$toUpperCase === void 0 ? false : _props$toUpperCase,
+      children = props.children,
+      textPops = _objectWithoutPropertiesLoose(props, _excluded);
 
-  var _proto = Text.prototype;
+  var content = children;
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        _this$props$toUpperCa = _this$props.toUpperCase,
-        toUpperCase = _this$props$toUpperCa === void 0 ? false : _this$props$toUpperCa,
-        children = _this$props.children,
-        _this$props$toFormat = _this$props.toFormat,
-        toFormat = _this$props$toFormat === void 0 ? false : _this$props$toFormat,
-        props = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
-
-    var content = children;
-
-    if (children && typeof children === 'string') {
-      content = children.toString().trim();
-    }
-
-    if (typeof content === 'string' && toUpperCase) {
-      content = content.toUpperCase();
-    }
-
-    if (typeof content === 'string' && toFormat) {
-      content = content.split('\n').map(function (item, key) {
-        return React__default.createElement("span", {
-          key: key.toString()
-        }, item, React__default.createElement("br", null));
-      });
-    }
+  if (children && typeof children === 'string') {
+    content = children.toString().trim();
+  }
 
-    return React__default.createElement(TextSpan, Object.assign({}, props), content);
-  };
+  if (typeof content === 'string' && toUpperCase) {
+    content = content.toUpperCase();
+  } // if (typeof content === 'string' && toFormat) {
+  //   const newtext: any = content
+  //     .split('\n')
+  //     .map((item: any, key: number): any => {
+  //       return (
+  //         <span key={key.toString()}>
+  //           {item}
+  //           <br />
+  //         </span>
+  //       );
+  //     });
+  // }
+
+
+  return React__default.createElement(TextSpan, Object.assign({}, textPops, {
+    children: content
+  }));
+};
 
-  return Text;
-}(React__default.PureComponent);
+var Form = function Form(props) {
+  return React__default.createElement(FormElement, Object.assign({}, props));
+};
+var Input = function Input(props) {
+  return React__default.createElement(InputElement, Object.assign({}, props));
+};
 
 var useMount = function useMount(callback) {
   React.useEffect(function () {
@@ -917,14 +968,15 @@ var useResponsive = function useResponsive() {
   };
 };
 
+exports.Div = Div;
+exports.Form = Form;
 exports.Image = Image;
-exports.ImageBackground = ImageBackground;
+exports.Input = Input;
 exports.ResponsiveContext = ResponsiveContext;
 exports.ResponsiveProvider = ResponsiveProvider;
-exports.RoundedImage = RoundedImage;
 exports.SafeArea = SafeArea;
 exports.Scroll = Scroll;
-exports.SquaredImage = SquaredImage;
+exports.Span = Span;
 exports.Text = Text;
 exports.TextSpan = TextSpan;
 exports.ThemeContext = ThemeContext;