@app-studio/web 0.1.16 → 0.2.0

package/dist/web.cjs.development.js

@@ -12,11 +12,11 @@ var reactRouterDom = require('react-router-dom');
 require('core-js/modules/es6.array.map.js');
 require('core-js/modules/es6.array.filter.js');
 require('core-js/modules/es6.string.starts-with.js');
+require('core-js/modules/es6.array.slice.js');
 var format = _interopDefault(require('date-fns/format'));
 require('core-js/modules/es6.string.includes.js');
 require('core-js/modules/es7.array.includes.js');
 var useModalStore = require('./store/useModalStore');
-require('core-js/modules/es6.array.slice.js');
 
 var useButtonState = function useButtonState() {
   var _React$useState = React__default.useState(false),
@@ -51,11 +51,37 @@ var useLinkState = function useLinkState() {
   };
 };
 
-var _excluded = ["children", "wrap"];
+var _excluded = ["children", "wrap", "justify", "isReversed"];
+var HorizontalView = function HorizontalView(_ref) {
+  var children = _ref.children,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? 'wrap' : _ref$wrap,
+    _ref$justify = _ref.justify,
+    justify = _ref$justify === void 0 ? 'flex-start' : _ref$justify,
+    _ref$isReversed = _ref.isReversed,
+    isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    display: "flex",
+    flexWrap: wrap,
+    flexDirection: isReversed ? 'row-reverse' : 'row',
+    justifyContent: justify
+  }, props), children);
+};
+
+/**
+ * Horizontal layout aligns all the elements in a container on the horizontal axis.
+ */
+var HorizontalComponent = function HorizontalComponent(props) {
+  return /*#__PURE__*/React__default.createElement(HorizontalView, Object.assign({}, props));
+};
+var Horizontal = HorizontalComponent;
+
+var _excluded$1 = ["children", "wrap"];
 var CenterView = function CenterView(_ref) {
   var children = _ref.children,
     wrap = _ref.wrap,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     display: "flex",
     justifyContent: "center",
@@ -72,11 +98,11 @@ var CenterComponent = function CenterComponent(props) {
 };
 var Center = CenterComponent;
 
-var _excluded$1 = ["size", "color"];
+var _excluded$2 = ["size", "color"];
 var ArrowDownSvg = function ArrowDownSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   return /*#__PURE__*/React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -112,11 +138,11 @@ var ArrowDownSvg = function ArrowDownSvg(_ref) {
   })))))));
 };
 
-var _excluded$2 = ["size", "color"];
+var _excluded$3 = ["size", "color"];
 var ArrowUpSvg = function ArrowUpSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   return /*#__PURE__*/React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -154,13 +180,13 @@ var ArrowUpSvg = function ArrowUpSvg(_ref) {
   })))))));
 };
 
-var _excluded$3 = ["size", "color"];
+var _excluded$4 = ["size", "color"];
 var CheckSvg = function CheckSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'white' : _ref$color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   return /*#__PURE__*/React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -190,13 +216,13 @@ var CheckSvg = function CheckSvg(_ref) {
   }))));
 };
 
-var _excluded$4 = ["size", "color"];
+var _excluded$5 = ["size", "color"];
 var CloseSvg = function CloseSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'white' : _ref$color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   return /*#__PURE__*/React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -221,13 +247,13 @@ var CloseSvg = function CloseSvg(_ref) {
   }))));
 };
 
-var _excluded$5 = ["size", "color"];
+var _excluded$6 = ["size", "color"];
 var ExternalLinkSvg = function ExternalLinkSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'white' : _ref$color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   return /*#__PURE__*/React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -256,13 +282,13 @@ var ExternalLinkSvg = function ExternalLinkSvg(_ref) {
   }))));
 };
 
-var _excluded$6 = ["size", "color"];
+var _excluded$7 = ["size", "color"];
 var IndeterminateSvg = function IndeterminateSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'white' : _ref$color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   return /*#__PURE__*/React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -301,7 +327,7 @@ var IconSizes = {
   '6xl': 64
 };
 
-var _excluded$7 = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "colorScheme", "styles", "setIsHovered"];
+var _excluded$8 = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "colorScheme", "styles", "setIsHovered"];
 var LinkView = function LinkView(_ref) {
   var children = _ref.children,
     _ref$href = _ref.href,
@@ -323,7 +349,7 @@ var LinkView = function LinkView(_ref) {
     } : _ref$styles,
     _ref$setIsHovered = _ref.setIsHovered,
     setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var handleHover = function handleHover() {
     if (underline === 'hover') setIsHovered(true);
   };
@@ -445,7 +471,7 @@ var IconSizes$1 = {
   }
 };
 
-var _excluded$8 = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick"];
+var _excluded$9 = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoader", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick"];
 var ButtonView = function ButtonView(_ref) {
   var _props$onClick;
   var icon = _ref.icon,
@@ -459,8 +485,8 @@ var ButtonView = function ButtonView(_ref) {
     isFilled = _ref$isFilled === void 0 ? false : _ref$isFilled,
     _ref$isIconRounded = _ref.isIconRounded,
     isIconRounded = _ref$isIconRounded === void 0 ? false : _ref$isIconRounded,
-    _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$isLoader = _ref.isLoader,
+    isLoader = _ref$isLoader === void 0 ? false : _ref$isLoader,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$size = _ref.size,
@@ -475,8 +501,8 @@ var ButtonView = function ButtonView(_ref) {
     shape = _ref$shape === void 0 ? 'rounded' : _ref$shape,
     _ref$onClick = _ref.onClick,
     onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-  var isActive = !(isDisabled || isLoading);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+  var isActive = !(isDisabled || isLoader);
   var defaultNativeProps = {
     disabled: !isActive
   };
@@ -513,7 +539,7 @@ var ButtonView = function ButtonView(_ref) {
   var changePadding = {
     padding: isIconRounded ? IconSizes$1[size].padding : ButtonSizes[size].padding
   };
-  var content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon && iconPosition === 'left' && !isLoading && icon, children, icon && iconPosition === 'right' && !isLoading && icon);
+  var content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon && iconPosition === 'left' && !isLoader && icon, children, icon && iconPosition === 'right' && !isLoader && icon);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     gap: 8,
     as: "button",
@@ -604,7 +630,7 @@ var HeadingSizes = {
   }
 };
 
-var _excluded$9 = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
+var _excluded$a = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
 var LabelView = function LabelView(_ref) {
   var children = _ref.children,
     heading = _ref.heading,
@@ -618,7 +644,7 @@ var LabelView = function LabelView(_ref) {
     weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'sm' : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var headingStyles = heading ? HeadingSizes[heading] : {};
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "label",
@@ -690,7 +716,7 @@ var IconSizes$2 = {
   '6xl': 60
 };
 
-var _excluded$a = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles"];
+var _excluded$b = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles"];
 var CheckboxView = function CheckboxView(_ref) {
   var id = _ref.id,
     icon = _ref.icon,
@@ -725,7 +751,7 @@ var CheckboxView = function CheckboxView(_ref) {
       checkbox: {},
       label: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
@@ -2269,7 +2295,7 @@ var useCountryPickerState = function useCountryPickerState(_ref) {
   };
 };
 
-var _excluded$b = ["children", "wrap", "justify", "isReversed"];
+var _excluded$c = ["children", "wrap", "justify", "isReversed"];
 var VerticalView = function VerticalView(_ref) {
   var children = _ref.children,
     _ref$wrap = _ref.wrap,
@@ -2278,7 +2304,7 @@ var VerticalView = function VerticalView(_ref) {
     justify = _ref$justify === void 0 ? 'flex-start' : _ref$justify,
     _ref$isReversed = _ref.isReversed,
     isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     display: "flex",
     flexWrap: wrap,
@@ -2295,7 +2321,127 @@ var VerticalComponent = function VerticalComponent(props) {
 };
 var Vertical = VerticalComponent;
 
-var _excluded$c = ["children", "styles", "error"];
+var HeadingSizes$1 = {
+  h1: {
+    fontSize: 96,
+    lineHeight: 112,
+    letterSpacing: -1.5
+  },
+  h2: {
+    fontSize: 60,
+    lineHeight: 71,
+    letterSpacing: -0.5
+  },
+  h3: {
+    fontSize: 48,
+    lineHeight: 57,
+    letterSpacing: 0
+  },
+  h4: {
+    fontSize: 34,
+    lineHeight: 40,
+    letterSpacing: 0.25
+  },
+  h5: {
+    fontSize: 24,
+    lineHeight: 28,
+    letterSpacing: 0
+  },
+  h6: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15
+  }
+};
+
+var _excluded$d = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "isTruncated", "weight", "size"];
+var TextContent = function TextContent(_ref) {
+  var children = _ref.children,
+    isSub = _ref.isSub,
+    isSup = _ref.isSup;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof children === 'string' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isSub && /*#__PURE__*/React__default.createElement("sup", null, children), isSup && /*#__PURE__*/React__default.createElement("sup", null, children), !isSub && !isSup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children)) : children);
+};
+var TruncateText = function TruncateText(_ref2) {
+  var text = _ref2.text,
+    _ref2$maxLines = _ref2.maxLines,
+    maxLines = _ref2$maxLines === void 0 ? 1 : _ref2$maxLines;
+  var containerRef = React.useRef(null);
+  var _useState = React.useState(text),
+    content = _useState[0],
+    setContent = _useState[1];
+  React.useEffect(function () {
+    var textContent = content;
+    var textNode = containerRef.current;
+    if (textNode) {
+      var contentHeight = textNode.offsetHeight;
+      var comLineHeight = getComputedStyle(textNode).lineHeight;
+      var lineHeight = comLineHeight !== 'normal' ? parseFloat(comLineHeight) : 20;
+      var maxHeight = Math.ceil(lineHeight * maxLines);
+      if (contentHeight > maxHeight) {
+        textContent = textContent.slice(0, -1);
+      } else if (contentHeight === maxHeight) {
+        if (content.length !== text.length) {
+          textContent = textContent.slice(0, -3) + '...';
+        }
+      }
+      setContent(textContent);
+    }
+  }, [maxLines, text, containerRef, content]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: containerRef
+  }, content);
+};
+var TextView = function TextView(_ref3) {
+  var children = _ref3.children,
+    heading = _ref3.heading,
+    maxLines = _ref3.maxLines,
+    _ref3$isItalic = _ref3.isItalic,
+    isItalic = _ref3$isItalic === void 0 ? false : _ref3$isItalic,
+    _ref3$isUnderlined = _ref3.isUnderlined,
+    isUnderlined = _ref3$isUnderlined === void 0 ? false : _ref3$isUnderlined,
+    _ref3$isSub = _ref3.isSub,
+    isSub = _ref3$isSub === void 0 ? false : _ref3$isSub,
+    _ref3$isSup = _ref3.isSup,
+    isSup = _ref3$isSup === void 0 ? false : _ref3$isSup,
+    _ref3$isStriked = _ref3.isStriked,
+    isStriked = _ref3$isStriked === void 0 ? false : _ref3$isStriked,
+    _ref3$isTruncated = _ref3.isTruncated,
+    isTruncated = _ref3$isTruncated === void 0 ? false : _ref3$isTruncated,
+    _ref3$weight = _ref3.weight,
+    weight = _ref3$weight === void 0 ? 'normal' : _ref3$weight,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 'md' : _ref3$size,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$d);
+  var headingStyles = heading ? HeadingSizes$1[heading] : {};
+  var noLineBreak = isSub || isSup ? {
+    display: 'inline'
+  } : {};
+  var fontSize = appStudio.Typography.fontSizes[size];
+  return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+    role: "text",
+    fontSize: fontSize,
+    lineHeight: appStudio.Typography.lineHeights[size],
+    fontStyle: isItalic ? 'italic' : 'normal',
+    fontWeight: appStudio.Typography.fontWeights[weight],
+    textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
+  }, noLineBreak, headingStyles, props), isTruncated && maxLines && typeof children === 'string' ? /*#__PURE__*/React__default.createElement(TruncateText, {
+    text: children,
+    maxLines: maxLines
+  }) : /*#__PURE__*/React__default.createElement(TextContent, Object.assign({
+    isSub: isSub,
+    isSup: isSup
+  }, props), children));
+};
+
+var TextComponent = function TextComponent(props) {
+  return /*#__PURE__*/React__default.createElement(TextView, Object.assign({}, props));
+};
+/**
+ * The Text component is a simple component that renders a text string or paragraphs as a DOM element in the UI. It is a <p> tag by default.
+ */
+var Text = TextComponent;
+
+var _excluded$e = ["children", "styles", "error"];
 var HelperText = function HelperText(_ref) {
   var children = _ref.children,
     _ref$styles = _ref.styles,
@@ -2304,7 +2450,7 @@ var HelperText = function HelperText(_ref) {
     } : _ref$styles,
     _ref$error = _ref.error,
     error = _ref$error === void 0 ? false : _ref$error,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   return /*#__PURE__*/React__default.createElement(Text, Object.assign({
     size: "xs",
     marginVertical: 0,
@@ -2313,14 +2459,14 @@ var HelperText = function HelperText(_ref) {
   }, styles['helperText'], props), children);
 };
 
-var _excluded$d = ["children", "helperText", "error", "styles"];
+var _excluded$f = ["children", "helperText", "error", "styles"];
 var FieldContainer = function FieldContainer(_ref) {
   var children = _ref.children,
     helperText = _ref.helperText,
     _ref$error = _ref.error,
     error = _ref$error === void 0 ? false : _ref$error,
     styles = _ref.styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
     gap: 5,
     position: "relative"
@@ -2378,33 +2524,7 @@ var PaddingWithoutLabel = {
   paddingRight: 35
 };
 
-var _excluded$e = ["children", "wrap", "justify", "isReversed"];
-var HorizontalView = function HorizontalView(_ref) {
-  var children = _ref.children,
-    _ref$wrap = _ref.wrap,
-    wrap = _ref$wrap === void 0 ? 'wrap' : _ref$wrap,
-    _ref$justify = _ref.justify,
-    justify = _ref$justify === void 0 ? 'flex-start' : _ref$justify,
-    _ref$isReversed = _ref.isReversed,
-    isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
-  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-    display: "flex",
-    flexWrap: wrap,
-    flexDirection: isReversed ? 'row-reverse' : 'row',
-    justifyContent: justify
-  }, props), children);
-};
-
-/**
- * Horizontal layout aligns all the elements in a container on the horizontal axis.
- */
-var HorizontalComponent = function HorizontalComponent(props) {
-  return /*#__PURE__*/React__default.createElement(HorizontalView, Object.assign({}, props));
-};
-var Horizontal = HorizontalComponent;
-
-var _excluded$f = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
+var _excluded$g = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
 var FieldContent = function FieldContent(_ref) {
   var shadow = _ref.shadow,
     children = _ref.children,
@@ -2432,7 +2552,7 @@ var FieldContent = function FieldContent(_ref) {
     styles = _ref$styles === void 0 ? {
       pickerBox: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   var isInteractive = (isHovered || isFocused) && !isDisabled;
   var color = error ? 'error' : isInteractive ? colorScheme : 'midgray';
   return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
@@ -2452,10 +2572,10 @@ var FieldContent = function FieldContent(_ref) {
   }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], styles['box'], props), children);
 };
 
-var _excluded$g = ["children"];
+var _excluded$h = ["children"];
 var FieldIcons = function FieldIcons(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   return /*#__PURE__*/React__default.createElement(Center, Object.assign({
     gap: 10,
     top: "50%",
@@ -2467,7 +2587,7 @@ var FieldIcons = function FieldIcons(_ref) {
   }, props), children);
 };
 
-var _excluded$h = ["children", "size", "error", "color", "styles"];
+var _excluded$i = ["children", "size", "error", "color", "styles"];
 var FieldLabel = function FieldLabel(_ref) {
   var children = _ref.children,
     _ref$size = _ref.size,
@@ -2480,7 +2600,7 @@ var FieldLabel = function FieldLabel(_ref) {
     styles = _ref$styles === void 0 ? {
       label: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return /*#__PURE__*/React__default.createElement(Label, Object.assign({
     top: 4,
     zIndex: 1000,
@@ -2493,10 +2613,10 @@ var FieldLabel = function FieldLabel(_ref) {
   }, styles['label'], props), children);
 };
 
-var _excluded$i = ["children"];
+var _excluded$j = ["children"];
 var FieldWrapper = function FieldWrapper(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
     width: "100%"
   }, props), children);
@@ -2510,7 +2630,7 @@ var IconSizes$3 = {
   xl: 16
 };
 
-var _excluded$j = ["id", "name", "label", "selected", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setSelected", "styles"];
+var _excluded$k = ["id", "name", "label", "selected", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setSelected", "styles"];
 var CountryList = function CountryList(props) {
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "ul"
@@ -2650,7 +2770,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
       helperText: {},
       box: {}
     } : _ref3$styles,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$k);
   var _useTheme = appStudio.useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -2788,7 +2908,7 @@ var useDatePickerState = function useDatePickerState() {
   };
 };
 
-var _excluded$k = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "colorScheme", "styles", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
+var _excluded$l = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "colorScheme", "styles", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
 var DatePickerContent = function DatePickerContent(props) {
   return /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
     type: "date"
@@ -2836,7 +2956,7 @@ var DatePickerView = function DatePickerView(_ref) {
     setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
     onChange = _ref.onChange,
     onChangeText = _ref.onChangeText,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   var isWithLabel = !!(isFocused && label);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
@@ -2929,48 +3049,260 @@ var usePasswordState = function usePasswordState() {
   };
 };
 
-var _excluded$l = ["name", "visibleIcon", "hiddenIcon", "isDisabled", "isVisible", "setIsVisible"];
-var PasswordView = function PasswordView(_ref) {
-  var name = _ref.name,
-    visibleIcon = _ref.visibleIcon,
-    hiddenIcon = _ref.hiddenIcon,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$isVisible = _ref.isVisible,
-    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
-    _ref$setIsVisible = _ref.setIsVisible,
-    setIsVisible = _ref$setIsVisible === void 0 ? function () {} : _ref$setIsVisible,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
-  return /*#__PURE__*/React__default.createElement(TextField, Object.assign({
-    name: name,
-    type: isVisible ? 'text' : 'password',
-    rightChild: /*#__PURE__*/React__default.createElement(appStudio.View, {
-      onClick: function onClick() {
-        if (!isDisabled) setIsVisible(!isVisible);
-      }
-    }, isVisible ? visibleIcon : hiddenIcon),
-    isClearable: false
-  }, props));
-};
-
-var PasswordComponent = function PasswordComponent(props) {
-  var passwordState = usePasswordState();
-  return /*#__PURE__*/React__default.createElement(PasswordView, Object.assign({}, passwordState, props));
-};
-/**
- * To allow users to securely enter sensitive information
- */
-var Password = PasswordComponent;
-
-var useSelectState = function useSelectState(_ref) {
-  var placeholder = _ref.placeholder,
-    isMulti = _ref.isMulti,
-    options = _ref.options;
-  var defaultSelected = placeholder ? isMulti ? [] : '' : options[0];
-  var _React$useState = React__default.useState(true),
-    hide = _React$useState[0],
-    setHide = _React$useState[1];
-  var _React$useState2 = React__default.useState(false),
+var useTextFieldState = function useTextFieldState(_ref) {
+  var label = _ref.label,
+    placeholder = _ref.placeholder,
+    value = _ref.value;
+  var _useState = React.useState(label != null ? label : placeholder),
+    hint = _useState[0],
+    setHint = _useState[1];
+  var _useState2 = React.useState(false),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+  var _useState3 = React.useState(false),
+    isHovered = _useState3[0],
+    setIsHovered = _useState3[1];
+  var _useState4 = React.useState(value || ''),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
+  return {
+    hint: hint,
+    setHint: setHint,
+    isFocused: isFocused,
+    setIsFocused: setIsFocused,
+    isHovered: isHovered,
+    setIsHovered: setIsHovered,
+    inputValue: inputValue,
+    setInputValue: setInputValue
+  };
+};
+
+var _excluded$m = ["id", "name", "label", "value", "hint", "inputValue", "onChange", "leftChild", "rightChild", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setInputValue", "onClick", "onFocus", "onBlur"];
+var TextFieldInput = function TextFieldInput(props) {
+  return /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
+    type: "text"
+  }, props));
+};
+var TextFieldView = function TextFieldView(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    label = _ref.label,
+    hint = _ref.hint,
+    inputValue = _ref.inputValue,
+    onChange = _ref.onChange,
+    leftChild = _ref.leftChild,
+    rightChild = _ref.rightChild,
+    helperText = _ref.helperText,
+    placeholder = _ref.placeholder,
+    onChangeText = _ref.onChangeText,
+    _ref$shadow = _ref.shadow,
+    shadow = _ref$shadow === void 0 ? {} : _ref$shadow,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      box: {},
+      field: {},
+      label: {},
+      helperText: {},
+      text: {}
+    } : _ref$styles,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'default' : _ref$shape,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    _ref$colorScheme = _ref.colorScheme,
+    colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    _ref$isFocused = _ref.isFocused,
+    isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
+    _ref$isHovered = _ref.isHovered,
+    isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isReadOnly = _ref.isReadOnly,
+    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
+    _ref$isClearable = _ref.isClearable,
+    isClearable = _ref$isClearable === void 0 ? true : _ref$isClearable,
+    _ref$isAutoFocus = _ref.isAutoFocus,
+    isAutoFocus = _ref$isAutoFocus === void 0 ? false : _ref$isAutoFocus,
+    _ref$setHint = _ref.setHint,
+    setHint = _ref$setHint === void 0 ? function () {} : _ref$setHint,
+    _ref$setIsFocused = _ref.setIsFocused,
+    setIsFocused = _ref$setIsFocused === void 0 ? function () {} : _ref$setIsFocused,
+    _ref$setIsHovered = _ref.setIsHovered,
+    setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
+    _ref$setInputValue = _ref.setInputValue,
+    setInputValue = _ref$setInputValue === void 0 ? function () {} : _ref$setInputValue,
+    onFocus = _ref.onFocus,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+  var _useTheme = appStudio.useTheme(),
+    getColor = _useTheme.getColor;
+  var IconColor = getColor('color.blueGray.700');
+  var isWithLabel = !!(isFocused && label);
+  React.useMemo(function () {
+    setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
+  }, [inputValue, isFocused, label, placeholder]);
+  var fieldStyles = Object.assign({
+    margin: 0,
+    paddingVertical: 8,
+    padddingHorizontal: 0,
+    width: '100%',
+    heigth: '100%',
+    border: 'none',
+    on: {
+      focus: {
+        outline: 'none'
+      }
+    },
+    fontSize: appStudio.Typography.fontSizes[size],
+    backgroundColor: 'transparent',
+    color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
+    cursor: isDisabled ? 'not-allowed' : 'auto'
+  }, styles['field']);
+  var handleFocus = function handleFocus() {
+    setIsFocused(true);
+    if (onFocus) onFocus();
+  };
+  var handleHover = function handleHover() {
+    return setIsHovered(!isHovered);
+  };
+  var handleBlur = function handleBlur(event) {
+    onBlur(event);
+    setIsFocused(false);
+  };
+  var handleChange = function handleChange(event) {
+    if (typeof event === 'string') {
+      //for ios and android
+      setInputValue(event);
+      if (onChangeText) onChangeText(event);
+    } else {
+      //Web
+      setInputValue(event.target.value);
+      if (onChange) onChange(event);
+    }
+  };
+  var handleClear = function handleClear() {
+    setInputValue('');
+    //Web
+    if (onChange) {
+      onBlur({
+        target: {
+          name: name
+        }
+      });
+      onChange({
+        target: {
+          name: name,
+          value: ''
+        }
+      });
+    }
+    //for ios and android
+    if (typeof document === 'undefined' && onChangeText) onChangeText('');
+  };
+  return /*#__PURE__*/React__default.createElement(FieldContainer, {
+    helperText: helperText,
+    error: error,
+    styles: styles
+  }, /*#__PURE__*/React__default.createElement(FieldContent, {
+    label: label,
+    size: size,
+    error: error,
+    shape: shape,
+    styles: styles,
+    shadow: shadow,
+    variant: variant,
+    value: inputValue,
+    color: colorScheme,
+    isHovered: isHovered,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isFocused: isFocused,
+    isWithLabel: isWithLabel,
+    colorScheme: colorScheme,
+    onMouseEnter: handleHover,
+    onMouseLeave: handleHover
+  }, leftChild, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && /*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
+    htmlFor: id,
+    color: colorScheme,
+    error: error
+  }, styles), label), /*#__PURE__*/React__default.createElement(TextFieldInput, Object.assign({
+    id: id,
+    name: name,
+    value: inputValue,
+    readOnly: isReadOnly,
+    disabled: isDisabled,
+    autoFocus: isAutoFocus,
+    placeholder: hint,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    autoComplete: "off"
+  }, fieldStyles, props, {
+    onChange: handleChange
+  }, onChangeText && {
+    onChangeText: handleChange
+  }))), (rightChild || isClearable && inputValue) && /*#__PURE__*/React__default.createElement(FieldIcons, null, rightChild && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, rightChild), isClearable && inputValue && !isReadOnly && !isDisabled && /*#__PURE__*/React__default.createElement(CloseSvg, {
+    size: appStudio.Typography.fontSizes[size],
+    color: IconColor,
+    onClick: handleClear
+  }))));
+};
+
+var TextFieldComponent = function TextFieldComponent(props) {
+  var textFieldStates = useTextFieldState(props);
+  return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, props));
+};
+/**
+ * TextField is used to capture text data from users.
+ */
+var TextField = TextFieldComponent;
+
+var _excluded$n = ["name", "visibleIcon", "hiddenIcon", "isDisabled", "isVisible", "setIsVisible"];
+var PasswordView = function PasswordView(_ref) {
+  var name = _ref.name,
+    visibleIcon = _ref.visibleIcon,
+    hiddenIcon = _ref.hiddenIcon,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
+    _ref$setIsVisible = _ref.setIsVisible,
+    setIsVisible = _ref$setIsVisible === void 0 ? function () {} : _ref$setIsVisible,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+  return /*#__PURE__*/React__default.createElement(TextField, Object.assign({
+    name: name,
+    type: isVisible ? 'text' : 'password',
+    rightChild: /*#__PURE__*/React__default.createElement(appStudio.View, {
+      onClick: function onClick() {
+        if (!isDisabled) setIsVisible(!isVisible);
+      }
+    }, isVisible ? visibleIcon : hiddenIcon),
+    isClearable: false
+  }, props));
+};
+
+var PasswordComponent = function PasswordComponent(props) {
+  var passwordState = usePasswordState();
+  return /*#__PURE__*/React__default.createElement(PasswordView, Object.assign({}, passwordState, props));
+};
+/**
+ * To allow users to securely enter sensitive information
+ */
+var Password = PasswordComponent;
+
+var useSelectState = function useSelectState(_ref) {
+  var placeholder = _ref.placeholder,
+    isMulti = _ref.isMulti,
+    options = _ref.options;
+  var defaultSelected = placeholder ? isMulti ? [] : '' : options[0];
+  var _React$useState = React__default.useState(true),
+    hide = _React$useState[0],
+    setHide = _React$useState[1];
+  var _React$useState2 = React__default.useState(false),
     isHovered = _React$useState2[0],
     setIsHovered = _React$useState2[1];
   var _React$useState3 = React__default.useState(false),
@@ -3008,7 +3340,7 @@ var IconSizes$4 = {
   xl: 16
 };
 
-var _excluded$m = ["isHovered", "setIsHovered", "option", "size", "callback"],
+var _excluded$o = ["isHovered", "setIsHovered", "option", "size", "callback"],
   _excluded2 = ["id", "name", "selected", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
   _excluded3 = ["option", "size", "removeOption"],
   _excluded4 = ["id", "name", "label", "selected", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "colorScheme", "shape", "variant", "styles", "onChange", "setHide", "setSelected", "setIsHovered", "setIsFocused"];
@@ -3020,7 +3352,7 @@ var Item = function Item(_ref) {
     size = _ref$size === void 0 ? 'md' : _ref$size,
     _ref$callback = _ref.callback,
     callback = _ref$callback === void 0 ? function () {} : _ref$callback,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   var handleOptionClick = function handleOptionClick(option) {
     return callback(option);
   };
@@ -3490,7 +3822,7 @@ var SliderPadding = {
   }
 };
 
-var _excluded$n = ["id", "name", "inActiveChild", "activeChild", "shadow", "size", "colorScheme", "on", "isHovered", "isChecked", "isDisabled", "isReadOnly", "onChange", "onValueChange", "setOn", "setIsHovered", "styles"];
+var _excluded$p = ["id", "name", "inActiveChild", "activeChild", "shadow", "size", "colorScheme", "on", "isHovered", "isChecked", "isDisabled", "isReadOnly", "onChange", "onValueChange", "setOn", "setIsHovered", "styles"];
 var SwitchContent = function SwitchContent(props) {
   return /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
     type: "checkbox"
@@ -3526,7 +3858,7 @@ var SwitchView = function SwitchView(_ref) {
       slider: {},
       circle: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   var handleToggle = function handleToggle(event) {
     if (!isReadOnly) {
       setOn(!on);
@@ -3602,7 +3934,7 @@ var useTextAreaState = function useTextAreaState(_ref) {
   };
 };
 
-var _excluded$o = ["id", "name", "hint", "error", "value", "label", "shadow", "inputValue", "helperText", "placeholder", "defaultValue", "size", "shape", "variant", "colorScheme", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setInputValue", "setIsFocused", "setIsHovered", "styles"];
+var _excluded$q = ["id", "name", "hint", "error", "value", "label", "shadow", "inputValue", "helperText", "placeholder", "defaultValue", "size", "shape", "variant", "colorScheme", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setInputValue", "setIsFocused", "setIsHovered", "styles"];
 var TextAreaView = function TextAreaView(_ref) {
   var id = _ref.id,
     name = _ref.name,
@@ -3660,7 +3992,7 @@ var TextAreaView = function TextAreaView(_ref) {
       helperText: {},
       field: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   var isWithLabel = !!(isFocused && label);
   React.useMemo(function () {
     setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
@@ -3759,218 +4091,6 @@ var TextAreaComponent = function TextAreaComponent(props) {
  */
 var TextArea = TextAreaComponent;
 
-var useTextFieldState = function useTextFieldState(_ref) {
-  var label = _ref.label,
-    placeholder = _ref.placeholder,
-    value = _ref.value;
-  var _useState = React.useState(label != null ? label : placeholder),
-    hint = _useState[0],
-    setHint = _useState[1];
-  var _useState2 = React.useState(false),
-    isFocused = _useState2[0],
-    setIsFocused = _useState2[1];
-  var _useState3 = React.useState(false),
-    isHovered = _useState3[0],
-    setIsHovered = _useState3[1];
-  var _useState4 = React.useState(value || ''),
-    inputValue = _useState4[0],
-    setInputValue = _useState4[1];
-  return {
-    hint: hint,
-    setHint: setHint,
-    isFocused: isFocused,
-    setIsFocused: setIsFocused,
-    isHovered: isHovered,
-    setIsHovered: setIsHovered,
-    inputValue: inputValue,
-    setInputValue: setInputValue
-  };
-};
-
-var _excluded$p = ["id", "name", "label", "value", "hint", "inputValue", "onChange", "leftChild", "rightChild", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setInputValue", "onClick", "onFocus", "onBlur"];
-var TextFieldInput = function TextFieldInput(props) {
-  return /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
-    type: "text"
-  }, props));
-};
-var TextFieldView = function TextFieldView(_ref) {
-  var id = _ref.id,
-    name = _ref.name,
-    label = _ref.label,
-    hint = _ref.hint,
-    inputValue = _ref.inputValue,
-    onChange = _ref.onChange,
-    leftChild = _ref.leftChild,
-    rightChild = _ref.rightChild,
-    helperText = _ref.helperText,
-    placeholder = _ref.placeholder,
-    onChangeText = _ref.onChangeText,
-    _ref$shadow = _ref.shadow,
-    shadow = _ref$shadow === void 0 ? {} : _ref$shadow,
-    _ref$styles = _ref.styles,
-    styles = _ref$styles === void 0 ? {
-      box: {},
-      field: {},
-      label: {},
-      helperText: {},
-      text: {}
-    } : _ref$styles,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'md' : _ref$size,
-    _ref$shape = _ref.shape,
-    shape = _ref$shape === void 0 ? 'default' : _ref$shape,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-    _ref$colorScheme = _ref.colorScheme,
-    colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
-    _ref$error = _ref.error,
-    error = _ref$error === void 0 ? false : _ref$error,
-    _ref$isFocused = _ref.isFocused,
-    isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
-    _ref$isHovered = _ref.isHovered,
-    isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$isReadOnly = _ref.isReadOnly,
-    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
-    _ref$isClearable = _ref.isClearable,
-    isClearable = _ref$isClearable === void 0 ? true : _ref$isClearable,
-    _ref$isAutoFocus = _ref.isAutoFocus,
-    isAutoFocus = _ref$isAutoFocus === void 0 ? false : _ref$isAutoFocus,
-    _ref$setHint = _ref.setHint,
-    setHint = _ref$setHint === void 0 ? function () {} : _ref$setHint,
-    _ref$setIsFocused = _ref.setIsFocused,
-    setIsFocused = _ref$setIsFocused === void 0 ? function () {} : _ref$setIsFocused,
-    _ref$setIsHovered = _ref.setIsHovered,
-    setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
-    _ref$setInputValue = _ref.setInputValue,
-    setInputValue = _ref$setInputValue === void 0 ? function () {} : _ref$setInputValue,
-    onFocus = _ref.onFocus,
-    _ref$onBlur = _ref.onBlur,
-    onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
-  var _useTheme = appStudio.useTheme(),
-    getColor = _useTheme.getColor;
-  var IconColor = getColor('color.blueGray.700');
-  var isWithLabel = !!(isFocused && label);
-  React.useMemo(function () {
-    setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
-  }, [inputValue, isFocused, label, placeholder]);
-  var fieldStyles = Object.assign({
-    margin: 0,
-    paddingVertical: 8,
-    padddingHorizontal: 0,
-    width: '100%',
-    heigth: '100%',
-    border: 'none',
-    on: {
-      focus: {
-        outline: 'none'
-      }
-    },
-    fontSize: appStudio.Typography.fontSizes[size],
-    backgroundColor: 'transparent',
-    color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
-    cursor: isDisabled ? 'not-allowed' : 'auto'
-  }, styles['field']);
-  var handleFocus = function handleFocus() {
-    setIsFocused(true);
-    if (onFocus) onFocus();
-  };
-  var handleHover = function handleHover() {
-    return setIsHovered(!isHovered);
-  };
-  var handleBlur = function handleBlur(event) {
-    onBlur(event);
-    setIsFocused(false);
-  };
-  var handleChange = function handleChange(event) {
-    if (typeof event === 'string') {
-      //for ios and android
-      setInputValue(event);
-      if (onChangeText) onChangeText(event);
-    } else {
-      //Web
-      setInputValue(event.target.value);
-      if (onChange) onChange(event);
-    }
-  };
-  var handleClear = function handleClear() {
-    setInputValue('');
-    //Web
-    if (onChange) {
-      onBlur({
-        target: {
-          name: name
-        }
-      });
-      onChange({
-        target: {
-          name: name,
-          value: ''
-        }
-      });
-    }
-    //for ios and android
-    if (typeof document === 'undefined' && onChangeText) onChangeText('');
-  };
-  return /*#__PURE__*/React__default.createElement(FieldContainer, {
-    helperText: helperText,
-    error: error,
-    styles: styles
-  }, /*#__PURE__*/React__default.createElement(FieldContent, {
-    label: label,
-    size: size,
-    error: error,
-    shape: shape,
-    styles: styles,
-    shadow: shadow,
-    variant: variant,
-    value: inputValue,
-    color: colorScheme,
-    isHovered: isHovered,
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly,
-    isFocused: isFocused,
-    isWithLabel: isWithLabel,
-    colorScheme: colorScheme,
-    onMouseEnter: handleHover,
-    onMouseLeave: handleHover
-  }, leftChild, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && /*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
-    htmlFor: id,
-    color: colorScheme,
-    error: error
-  }, styles), label), /*#__PURE__*/React__default.createElement(TextFieldInput, Object.assign({
-    id: id,
-    name: name,
-    value: inputValue,
-    readOnly: isReadOnly,
-    disabled: isDisabled,
-    autoFocus: isAutoFocus,
-    placeholder: hint,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    autoComplete: "off"
-  }, fieldStyles, props, {
-    onChange: handleChange
-  }, onChangeText && {
-    onChangeText: handleChange
-  }))), (rightChild || isClearable && inputValue) && /*#__PURE__*/React__default.createElement(FieldIcons, null, rightChild && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, rightChild), isClearable && inputValue && !isReadOnly && !isDisabled && /*#__PURE__*/React__default.createElement(CloseSvg, {
-    size: appStudio.Typography.fontSizes[size],
-    color: IconColor,
-    onClick: handleClear
-  }))));
-};
-
-var TextFieldComponent = function TextFieldComponent(props) {
-  var textFieldStates = useTextFieldState(props);
-  return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, props));
-};
-/**
- * TextField is used to capture text data from users.
- */
-var TextField = TextFieldComponent;
-
 var DefaultSizes = {
   xs: 14,
   sm: 18,
@@ -3989,7 +4109,7 @@ var DefaultSpeeds = {
   slow: 300
 };
 
-var _excluded$q = ["size", "speed", "color"],
+var _excluded$r = ["size", "speed", "color"],
   _excluded2$1 = ["size", "speed", "color"],
   _excluded3$1 = ["size", "speed", "color"],
   _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
@@ -4000,7 +4120,7 @@ var DefaultSpinner = function DefaultSpinner(_ref) {
     speed = _ref$speed === void 0 ? 'normal' : _ref$speed,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'theme.loading' : _ref$color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var theme = appStudio.useTheme();
   var colorStyle = theme.getColor(color);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -4166,13 +4286,13 @@ var LoaderView = function LoaderView(_ref4) {
   }, children));
 };
 
-var LoadingComponent = function LoadingComponent(props) {
+var LoaderComponent = function LoaderComponent(props) {
   return /*#__PURE__*/React__default.createElement(LoaderView, Object.assign({}, props));
 };
 /**
  * It  gives the user an insight about an action being processed. It may have an undefined waiting time or display the process length.
  */
-var Loading = LoadingComponent;
+var Loader = LoaderComponent;
 
 var ContainerShapes = {
   sharp: {
@@ -4210,7 +4330,7 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$r = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+var _excluded$s = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
   _excluded2$2 = ["children", "shadow", "isFullScreen", "shape"],
   _excluded3$2 = ["children", "buttonColor", "iconSize", "buttonPosition"],
   _excluded4$2 = ["children"],
@@ -4226,7 +4346,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
     onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'center' : _ref$position,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var setOpen = useModalStore.useModalStore(function (state) {
     return state.setOpen;
   });
@@ -4368,126 +4488,6 @@ Modal.Header = ModalHeader;
 Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 
-var HeadingSizes$1 = {
-  h1: {
-    fontSize: 96,
-    lineHeight: 112,
-    letterSpacing: -1.5
-  },
-  h2: {
-    fontSize: 60,
-    lineHeight: 71,
-    letterSpacing: -0.5
-  },
-  h3: {
-    fontSize: 48,
-    lineHeight: 57,
-    letterSpacing: 0
-  },
-  h4: {
-    fontSize: 34,
-    lineHeight: 40,
-    letterSpacing: 0.25
-  },
-  h5: {
-    fontSize: 24,
-    lineHeight: 28,
-    letterSpacing: 0
-  },
-  h6: {
-    fontSize: 20,
-    lineHeight: 24,
-    letterSpacing: 0.15
-  }
-};
-
-var _excluded$s = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "isTruncated", "weight", "size"];
-var TextContent = function TextContent(_ref) {
-  var children = _ref.children,
-    isSub = _ref.isSub,
-    isSup = _ref.isSup;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof children === 'string' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isSub && /*#__PURE__*/React__default.createElement("sup", null, children), isSup && /*#__PURE__*/React__default.createElement("sup", null, children), !isSub && !isSup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children)) : children);
-};
-var TruncateText = function TruncateText(_ref2) {
-  var text = _ref2.text,
-    _ref2$maxLines = _ref2.maxLines,
-    maxLines = _ref2$maxLines === void 0 ? 1 : _ref2$maxLines;
-  var containerRef = React.useRef(null);
-  var _useState = React.useState(text),
-    content = _useState[0],
-    setContent = _useState[1];
-  React.useEffect(function () {
-    var textContent = content;
-    var textNode = containerRef.current;
-    if (textNode) {
-      var contentHeight = textNode.offsetHeight;
-      var comLineHeight = getComputedStyle(textNode).lineHeight;
-      var lineHeight = comLineHeight !== 'normal' ? parseFloat(comLineHeight) : 20;
-      var maxHeight = Math.ceil(lineHeight * maxLines);
-      if (contentHeight > maxHeight) {
-        textContent = textContent.slice(0, -1);
-      } else if (contentHeight === maxHeight) {
-        if (content.length !== text.length) {
-          textContent = textContent.slice(0, -3) + '...';
-        }
-      }
-      setContent(textContent);
-    }
-  }, [maxLines, text, containerRef, content]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    ref: containerRef
-  }, content);
-};
-var TextView = function TextView(_ref3) {
-  var children = _ref3.children,
-    heading = _ref3.heading,
-    maxLines = _ref3.maxLines,
-    _ref3$isItalic = _ref3.isItalic,
-    isItalic = _ref3$isItalic === void 0 ? false : _ref3$isItalic,
-    _ref3$isUnderlined = _ref3.isUnderlined,
-    isUnderlined = _ref3$isUnderlined === void 0 ? false : _ref3$isUnderlined,
-    _ref3$isSub = _ref3.isSub,
-    isSub = _ref3$isSub === void 0 ? false : _ref3$isSub,
-    _ref3$isSup = _ref3.isSup,
-    isSup = _ref3$isSup === void 0 ? false : _ref3$isSup,
-    _ref3$isStriked = _ref3.isStriked,
-    isStriked = _ref3$isStriked === void 0 ? false : _ref3$isStriked,
-    _ref3$isTruncated = _ref3.isTruncated,
-    isTruncated = _ref3$isTruncated === void 0 ? false : _ref3$isTruncated,
-    _ref3$weight = _ref3.weight,
-    weight = _ref3$weight === void 0 ? 'normal' : _ref3$weight,
-    _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? 'md' : _ref3$size,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$s);
-  var headingStyles = heading ? HeadingSizes$1[heading] : {};
-  var noLineBreak = isSub || isSup ? {
-    display: 'inline'
-  } : {};
-  var fontSize = appStudio.Typography.fontSizes[size];
-  return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
-    role: "text",
-    fontSize: fontSize,
-    lineHeight: appStudio.Typography.lineHeights[size],
-    fontStyle: isItalic ? 'italic' : 'normal',
-    fontWeight: appStudio.Typography.fontWeights[weight],
-    textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
-  }, noLineBreak, headingStyles, props), isTruncated && maxLines && typeof children === 'string' ? /*#__PURE__*/React__default.createElement(TruncateText, {
-    text: children,
-    maxLines: maxLines
-  }) : /*#__PURE__*/React__default.createElement(TextContent, Object.assign({
-    isSub: isSub,
-    isSup: isSup
-  }, props), children));
-};
-
-var TextComponent = function TextComponent(props) {
-  return /*#__PURE__*/React__default.createElement(TextView, Object.assign({}, props));
-};
-/**
- * The Text component is a simple component that renders a text string or paragraphs as a DOM element in the UI. It is a <p> tag by default.
- */
-var Text = TextComponent;
-
 Object.defineProperty(exports, 'View', {
   enumerable: true,
   get: function () {
@@ -4501,7 +4501,7 @@ exports.CountryPicker = CountryPicker;
 exports.DatePicker = DatePicker;
 exports.Horizontal = Horizontal;
 exports.Link = Link;
-exports.Loading = Loading;
+exports.Loader = Loader;
 exports.Modal = Modal;
 exports.Password = Password;
 exports.Select = Select;