@app-studio/web 0.1.15 → 0.2.0

package/dist/web.esm.js

@@ -1,28 +1,16 @@
 import 'core-js/modules/es6.object.assign.js';
-import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react';
-import { Element, Typography, useTheme, Input, View as View$2 } from 'app-studio';
+import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { View, Element, Typography, useTheme, Input } from 'app-studio';
 export { View } from 'app-studio';
-import { Link as Link$1, Center as Center$1, TextField as TextField$1, View, Text as Text$1, Horizontal as Horizontal$1, Vertical as Vertical$1, Button as Button$1 } from './components';
-import { Label } from './components/Form/Label/Label';
-import { IndeterminateSvg, CheckSvg, ArrowDownSvg as ArrowDownSvg$1, ArrowUpSvg as ArrowUpSvg$1, CloseSvg, ExternalLinkSvg } from './components/Svg';
+import { Link as Link$1 } from 'react-router-dom';
 import 'core-js/modules/es6.array.map.js';
 import 'core-js/modules/es6.array.filter.js';
 import 'core-js/modules/es6.string.starts-with.js';
-import { FieldContainer, FieldContent, FieldWrapper, FieldLabel, FieldIcons } from './components/Layout/Input';
-import { ArrowDownSvg } from './components/Svg/ArrowDown';
-import { ArrowUpSvg } from './components/Svg/ArrowUp';
+import 'core-js/modules/es6.array.slice.js';
 import format from 'date-fns/format';
-import { FieldContainer as FieldContainer$1 } from './components/Layout/Input/FieldContainer/FieldContainer';
-import { FieldContent as FieldContent$1 } from './components/Layout/Input/FieldContent/FieldContent';
-import { FieldLabel as FieldLabel$1 } from './components/Layout/Input/FieldLabel/FieldLabel';
-import { FieldWrapper as FieldWrapper$1 } from './components/Layout/Input/FieldWrapper/FieldWrapper';
 import 'core-js/modules/es6.string.includes.js';
 import 'core-js/modules/es7.array.includes.js';
-import { FieldIcons as FieldIcons$1 } from './components/Layout/Input/FieldIcons/FieldIcons';
-import { View as View$1 } from './components/Layout/View/View';
-import { Link as Link$2 } from 'react-router-dom';
 import { useModalStore } from './store/useModalStore';
-import 'core-js/modules/es6.array.slice.js';
 
 var useButtonState = function useButtonState() {
   var _React$useState = React.useState(false),
@@ -47,6 +35,346 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var useLinkState = function useLinkState() {
+  var _useState = useState(false),
+    isHovered = _useState[0],
+    setIsHovered = _useState[1];
+  return {
+    isHovered: isHovered,
+    setIsHovered: setIsHovered
+  };
+};
+
+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.createElement(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.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$1);
+  return /*#__PURE__*/React.createElement(View, Object.assign({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexWrap: wrap
+  }, props), children);
+};
+
+/**
+ * The Center component is a React functional component that provides a centered layout for its children using flexbox.
+ */
+var CenterComponent = function CenterComponent(props) {
+  return /*#__PURE__*/React.createElement(CenterView, Object.assign({}, props));
+};
+var Center = CenterComponent;
+
+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$2);
+  return /*#__PURE__*/React.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 -4.5 20 20",
+    version: "1.1",
+    fill: "#000000"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_bgCarrier",
+    strokeWidth: "0"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_tracerCarrier",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_iconCarrier"
+  }, /*#__PURE__*/React.createElement("title", null, "arrow_down [#338]"), " ", /*#__PURE__*/React.createElement("desc", null, "Created with Sketch."), /*#__PURE__*/React.createElement("defs", null, " "), /*#__PURE__*/React.createElement("g", {
+    id: "Page-1",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Dribbble-Light-Preview",
+    transform: "translate(-220.000000, -6684.000000)",
+    fill: "#000000"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "icons",
+    transform: "translate(56.000000, 160.000000)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M164.292308,6524.36583 L164.292308,6524.36583 C163.902564,6524.77071 163.902564,6525.42619 164.292308,6525.83004 L172.555873,6534.39267 C173.33636,6535.20244 174.602528,6535.20244 175.383014,6534.39267 L183.70754,6525.76791 C184.093286,6525.36716 184.098283,6524.71997 183.717533,6524.31405 C183.328789,6523.89985 182.68821,6523.89467 182.29347,6524.30266 L174.676479,6532.19636 C174.285736,6532.60124 173.653152,6532.60124 173.262409,6532.19636 L165.705379,6524.36583 C165.315635,6523.96094 164.683051,6523.96094 164.292308,6524.36583",
+    id: "arrow_down-[#338]"
+  })))))));
+};
+
+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$3);
+  return /*#__PURE__*/React.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, /*#__PURE__*/React.createElement("svg", Object.assign({
+    width: size + "px",
+    height: size + "px",
+    viewBox: "0 -4.5 20 20",
+    version: "1.1",
+    fill: "#000000"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_bgCarrier",
+    strokeWidth: "0"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_tracerCarrier",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_iconCarrier"
+  }, /*#__PURE__*/React.createElement("title", null, "arrow_up [#337]"), " ", /*#__PURE__*/React.createElement("desc", null, "Created with Sketch."), /*#__PURE__*/React.createElement("defs", null, " "), /*#__PURE__*/React.createElement("g", {
+    id: "Page-1",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Dribbble-Light-Preview",
+    transform: "translate(-260.000000, -6684.000000)",
+    fill: "#000000"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "icons",
+    transform: "translate(56.000000, 160.000000)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M223.707692,6534.63378 L223.707692,6534.63378 C224.097436,6534.22888 224.097436,6533.57338 223.707692,6533.16951 L215.444127,6524.60657 C214.66364,6523.79781 213.397472,6523.79781 212.616986,6524.60657 L204.29246,6533.23165 C203.906714,6533.6324 203.901717,6534.27962 204.282467,6534.68555 C204.671211,6535.10081 205.31179,6535.10495 205.70653,6534.69695 L213.323521,6526.80297 C213.714264,6526.39807 214.346848,6526.39807 214.737591,6526.80297 L222.294621,6534.63378 C222.684365,6535.03868 223.317949,6535.03868 223.707692,6534.63378",
+    id: "arrow_up-[#337]"
+  })))))));
+};
+
+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$4);
+  return /*#__PURE__*/React.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, /*#__PURE__*/React.createElement("svg", Object.assign({
+    width: size + "px",
+    height: size + "px",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_bgCarrier",
+    strokeWidth: "0"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_tracerCarrier",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "#CCCCCC",
+    strokeWidth: "0.048"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_iconCarrier"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M17.0001 9L10 16L7 13",
+    stroke: color,
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }))));
+};
+
+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$5);
+  return /*#__PURE__*/React.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, /*#__PURE__*/React.createElement("svg", Object.assign({
+    width: size + "px",
+    height: size + "px",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "#000000"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_bgCarrier",
+    strokeWidth: "0"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_tracerCarrier",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_iconCarrier"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    d: "M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
+  }))));
+};
+
+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$6);
+  return /*#__PURE__*/React.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: color,
+    width: size + "px",
+    height: size + "px",
+    viewBox: "0 0 50 50",
+    xmlns: "http://www.w3.org/2000/svg",
+    stroke: color
+  }, props), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_bgCarrier",
+    strokeWidth: "0"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_tracerCarrier",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_iconCarrier"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M38.288 10.297l1.414 1.415-14.99 14.99-1.414-1.414z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M40 20h-2v-8h-8v-2h10z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M35 38H15c-1.7 0-3-1.3-3-3V15c0-1.7 1.3-3 3-3h11v2H15c-.6 0-1 .4-1 1v20c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V24h2v11c0 1.7-1.3 3-3 3z"
+  }))));
+};
+
+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$7);
+  return /*#__PURE__*/React.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_bgCarrier",
+    strokeWidth: "0"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_tracerCarrier",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_iconCarrier"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M7 12L17 12",
+    stroke: color,
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), ' ')));
+};
+
+var IconSizes = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20,
+  '2xl': 24,
+  '3xl': 30,
+  '4xl': 36,
+  '5xl': 48,
+  '6xl': 64
+};
+
+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,
+    href = _ref$href === void 0 ? '/' : _ref$href,
+    _ref$iconSize = _ref.iconSize,
+    iconSize = _ref$iconSize === void 0 ? 'sm' : _ref$iconSize,
+    _ref$underline = _ref.underline,
+    underline = _ref$underline === void 0 ? 'default' : _ref$underline,
+    _ref$isHovered = _ref.isHovered,
+    isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
+    _ref$isExternal = _ref.isExternal,
+    isExternal = _ref$isExternal === void 0 ? false : _ref$isExternal,
+    _ref$colorScheme = _ref.colorScheme,
+    colorScheme = _ref$colorScheme === void 0 ? '#0072F5' : _ref$colorScheme,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      icon: {},
+      text: {}
+    } : _ref$styles,
+    _ref$setIsHovered = _ref.setIsHovered,
+    setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+  var handleHover = function handleHover() {
+    if (underline === 'hover') setIsHovered(true);
+  };
+  return /*#__PURE__*/React.createElement(Link$1, {
+    to: href,
+    target: isExternal ? '_blank' : '_self'
+  }, /*#__PURE__*/React.createElement(Element, Object.assign({
+    color: colorScheme,
+    onMouseEnter: handleHover,
+    onMouseLeave: handleHover,
+    textDecoration: isHovered || underline === 'underline' ? 'underline !important' : 'none'
+  }, styles.text, props), /*#__PURE__*/React.createElement(Horizontal, {
+    gap: 3,
+    alignItems: "center",
+    wrap: "nowrap"
+  }, children, isExternal && /*#__PURE__*/React.createElement(ExternalLinkSvg, {
+    color: colorScheme,
+    size: IconSizes[iconSize],
+    style: styles.icon
+  }))));
+};
+
+var LinkComponent = function LinkComponent(props) {
+  var linkStates = useLinkState();
+  return /*#__PURE__*/React.createElement(LinkView, Object.assign({}, linkStates, props));
+};
+/**
+ * Link allows users to navigate from page to page. It have a similar appearance as the hyperlink.
+ */
+var Link = LinkComponent;
+
 var ButtonSizes = {
   xs: {
     width: 79,
@@ -109,7 +437,7 @@ var ButtonShapes = {
   rounded: 4,
   pillShaped: 24
 };
-var IconSizes = {
+var IconSizes$1 = {
   xs: {
     width: 24,
     height: 24,
@@ -137,7 +465,7 @@ var IconSizes = {
   }
 };
 
-var _excluded = ["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,
@@ -151,8 +479,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,
@@ -167,8 +495,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);
-  var isActive = !(isDisabled || isLoading);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+  var isActive = !(isDisabled || isLoader);
   var defaultNativeProps = {
     disabled: !isActive
   };
@@ -203,9 +531,9 @@ var ButtonView = function ButtonView(_ref) {
     width: isAuto ? 'fit-content' : isFilled ? '100%' : buttonSizeStyles.width
   };
   var changePadding = {
-    padding: isIconRounded ? IconSizes[size].padding : ButtonSizes[size].padding
+    padding: isIconRounded ? IconSizes$1[size].padding : ButtonSizes[size].padding
   };
-  var content = /*#__PURE__*/React.createElement(React.Fragment, null, icon && iconPosition === 'left' && !isLoading && icon, children, icon && iconPosition === 'right' && !isLoading && icon);
+  var content = /*#__PURE__*/React.createElement(React.Fragment, null, icon && iconPosition === 'left' && !isLoader && icon, children, icon && iconPosition === 'right' && !isLoader && icon);
   return /*#__PURE__*/React.createElement(Element, Object.assign({
     gap: 8,
     as: "button",
@@ -220,7 +548,7 @@ var ButtonView = function ButtonView(_ref) {
     borderRadius: ButtonShapes[shape],
     onClick: (_props$onClick = props.onClick) != null ? _props$onClick : onClick,
     cursor: isActive ? 'pointer' : 'default'
-  }, defaultNativeProps, buttonSizeStyles, buttonVariant, scaleWidth, changePadding, shadow, props), variant === 'link' && externalHref ? /*#__PURE__*/React.createElement(Link$1, {
+  }, defaultNativeProps, buttonSizeStyles, buttonVariant, scaleWidth, changePadding, shadow, props), variant === 'link' && externalHref ? /*#__PURE__*/React.createElement(Link, {
     href: externalHref,
     textDecorationColor: colorScheme,
     colorScheme: colorScheme,
@@ -263,25 +591,89 @@ var useCheckboxState = function useCheckboxState(_ref) {
   };
 };
 
-var Sizes = {
-  xs: {
-    height: 8,
-    width: 8
-  },
-  sm: {
-    height: 12,
-    width: 12
+var HeadingSizes = {
+  h1: {
+    fontSize: 96,
+    lineHeight: 112,
+    letterSpacing: -1.5
   },
-  md: {
-    height: 18,
-    width: 18
+  h2: {
+    fontSize: 60,
+    lineHeight: 71,
+    letterSpacing: -0.5
   },
-  lg: {
-    height: 24,
-    width: 24
+  h3: {
+    fontSize: 48,
+    lineHeight: 57,
+    letterSpacing: 0
   },
-  xl: {
-    height: 30,
+  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$a = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
+var LabelView = function LabelView(_ref) {
+  var children = _ref.children,
+    heading = _ref.heading,
+    _ref$isItalic = _ref.isItalic,
+    isItalic = _ref$isItalic === void 0 ? false : _ref$isItalic,
+    _ref$isUnderlined = _ref.isUnderlined,
+    isUnderlined = _ref$isUnderlined === void 0 ? false : _ref$isUnderlined,
+    _ref$isStriked = _ref.isStriked,
+    isStriked = _ref$isStriked === void 0 ? false : _ref$isStriked,
+    _ref$weight = _ref.weight,
+    weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'sm' : _ref$size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+  var headingStyles = heading ? HeadingSizes[heading] : {};
+  return /*#__PURE__*/React.createElement(Element, Object.assign({
+    as: "label",
+    width: "100%",
+    fontSize: size,
+    fontStyle: isItalic ? 'italic' : 'normal',
+    fontWeight: Typography.fontWeights[weight],
+    textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
+  }, headingStyles, props), children);
+};
+
+var LabelComponent = function LabelComponent(props) {
+  return /*#__PURE__*/React.createElement(LabelView, Object.assign({}, props));
+};
+var Label = LabelComponent;
+
+var Sizes = {
+  xs: {
+    height: 8,
+    width: 8
+  },
+  sm: {
+    height: 12,
+    width: 12
+  },
+  md: {
+    height: 18,
+    width: 18
+  },
+  lg: {
+    height: 24,
+    width: 24
+  },
+  xl: {
+    height: 30,
     width: 30
   },
   '2xl': {
@@ -305,7 +697,7 @@ var Sizes = {
     width: 60
   }
 };
-var IconSizes$1 = {
+var IconSizes$2 = {
   xs: 6,
   sm: 12,
   md: 18,
@@ -318,7 +710,7 @@ var IconSizes$1 = {
   '6xl': 60
 };
 
-var _excluded$1 = ["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,
@@ -353,7 +745,7 @@ var CheckboxView = function CheckboxView(_ref) {
       checkbox: {},
       label: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
@@ -397,8 +789,8 @@ var CheckboxView = function CheckboxView(_ref) {
     onMouseEnter: handleHover,
     onMouseLeave: handleHover,
     size: Typography.fontSizes[size]
-  }, checkboxStyle.container, props), /*#__PURE__*/React.createElement(Center$1, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? /*#__PURE__*/React.createElement(IndeterminateSvg, null) : (isChecked || isSelected) && (icon != null ? icon : /*#__PURE__*/React.createElement(CheckSvg, {
-    size: IconSizes$1[size]
+  }, checkboxStyle.container, props), /*#__PURE__*/React.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? /*#__PURE__*/React.createElement(IndeterminateSvg, null) : (isChecked || isSelected) && (icon != null ? icon : /*#__PURE__*/React.createElement(CheckSvg, {
+    size: IconSizes$2[size]
   }))), label);
 };
 
@@ -1897,47 +2289,374 @@ var useCountryPickerState = function useCountryPickerState(_ref) {
   };
 };
 
-var IconSizes$2 = {
+var _excluded$c = ["children", "wrap", "justify", "isReversed"];
+var VerticalView = function VerticalView(_ref) {
+  var children = _ref.children,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? 'nowrap' : _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$c);
+  return /*#__PURE__*/React.createElement(View, Object.assign({
+    display: "flex",
+    flexWrap: wrap,
+    flexDirection: isReversed ? 'column-reverse' : 'column',
+    justifyContent: justify
+  }, props), children);
+};
+
+/**
+ * Vertical layout aligns all the elements in a container on the vertical axis.
+ */
+var VerticalComponent = function VerticalComponent(props) {
+  return /*#__PURE__*/React.createElement(VerticalView, Object.assign({}, props));
+};
+var Vertical = VerticalComponent;
+
+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.createElement(React.Fragment, null, typeof children === 'string' ? /*#__PURE__*/React.createElement(React.Fragment, null, isSub && /*#__PURE__*/React.createElement("sup", null, children), isSup && /*#__PURE__*/React.createElement("sup", null, children), !isSub && !isSup && /*#__PURE__*/React.createElement(React.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 = useRef(null);
+  var _useState = useState(text),
+    content = _useState[0],
+    setContent = _useState[1];
+  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.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 = Typography.fontSizes[size];
+  return /*#__PURE__*/React.createElement(Element, Object.assign({
+    role: "text",
+    fontSize: fontSize,
+    lineHeight: Typography.lineHeights[size],
+    fontStyle: isItalic ? 'italic' : 'normal',
+    fontWeight: Typography.fontWeights[weight],
+    textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
+  }, noLineBreak, headingStyles, props), isTruncated && maxLines && typeof children === 'string' ? /*#__PURE__*/React.createElement(TruncateText, {
+    text: children,
+    maxLines: maxLines
+  }) : /*#__PURE__*/React.createElement(TextContent, Object.assign({
+    isSub: isSub,
+    isSup: isSup
+  }, props), children));
+};
+
+var TextComponent = function TextComponent(props) {
+  return /*#__PURE__*/React.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,
+    styles = _ref$styles === void 0 ? {
+      helperText: {}
+    } : _ref$styles,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+  return /*#__PURE__*/React.createElement(Text, Object.assign({
+    size: "xs",
+    marginVertical: 0,
+    marginHorizontal: 0,
+    color: error ? 'theme.error' : 'theme.text.dark'
+  }, styles['helperText'], props), children);
+};
+
+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$f);
+  return /*#__PURE__*/React.createElement(Vertical, Object.assign({
+    gap: 5,
+    position: "relative"
+  }, props), children, helperText && /*#__PURE__*/React.createElement(HelperText, Object.assign({
+    error: error
+  }, styles), helperText));
+};
+
+var Shapes = {
+  default: {
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  sharp: {
+    borderRadius: 0
+  },
+  rounded: {
+    borderRadius: 4
+  },
+  pillShaped: {
+    borderRadius: 24
+  }
+};
+var LabelSizes = {
   xs: 8,
   sm: 10,
   md: 12,
   lg: 14,
   xl: 16
 };
-
-var _excluded$2 = ["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.createElement(Element, Object.assign({
-    as: "ul"
-  }, props));
+var InputVariants = {
+  outline: {
+    borderWidth: 1
+  },
+  default: {
+    borderWidth: 0,
+    borderBottomWidth: 2
+  },
+  unStyled: {
+    border: 'none',
+    backgroundColor: 'transparent'
+  }
 };
-var CountrySelector = function CountrySelector(props) {
-  return /*#__PURE__*/React.createElement(Input, Object.assign({
-    type: "country"
-  }, props));
+var PadddingWithLabel = {
+  paddingTop: 16,
+  paddingBottom: 0,
+  paddingLeft: 16,
+  paddingRight: 35
 };
-var CountryItem = function CountryItem(props) {
-  return /*#__PURE__*/React.createElement(Element, Object.assign({
-    as: "li"
-  }, props));
+var PaddingWithoutLabel = {
+  paddingVertical: 8,
+  paddingLeft: 16,
+  paddingRight: 35
 };
-var DropDownItem = function DropDownItem(_ref) {
-  var option = _ref.option,
+
+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,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
-    _ref$callback = _ref.callback,
-    callback = _ref$callback === void 0 ? function () {} : _ref$callback,
-    _ref$styles = _ref.styles,
-    styles = _ref$styles === void 0 ? {
-      text: {}
-    } : _ref$styles;
-  var _useState = useState(false),
-    isHovered = _useState[0],
-    setIsHovered = _useState[1];
-  var handleOptionClick = function handleOptionClick(event) {
-    event.stopPropagation();
-    callback(option);
-  };
+    _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$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    _ref$isWithLabel = _ref.isWithLabel,
+    isWithLabel = _ref$isWithLabel === void 0 ? false : _ref$isWithLabel,
+    _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$colorScheme = _ref.colorScheme,
+    colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      pickerBox: {}
+    } : _ref$styles,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+  var isInteractive = (isHovered || isFocused) && !isDisabled;
+  var color = error ? 'error' : isInteractive ? colorScheme : 'midgray';
+  return /*#__PURE__*/React.createElement(Horizontal, Object.assign({
+    gap: 10,
+    width: "100%",
+    display: "flex",
+    wrap: "nowrap",
+    borderStyle: "solid",
+    alignItems: "center",
+    borderColor: color,
+    backgroundColor: "trueGray.50",
+    transition: "padding 0.2s ease",
+    justifyContent: "space-between",
+    fontSize: Typography.fontSizes[size],
+    filter: isHovered ? 'brightness(0.97)' : 'brightness(1)',
+    cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
+  }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], styles['box'], props), children);
+};
+
+var _excluded$h = ["children"];
+var FieldIcons = function FieldIcons(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+  return /*#__PURE__*/React.createElement(Center, Object.assign({
+    gap: 10,
+    top: "50%",
+    right: 16,
+    zIndex: 500,
+    wrap: "nowrap",
+    position: "absolute",
+    transform: "translateY(-50%)"
+  }, props), children);
+};
+
+var _excluded$i = ["children", "size", "error", "color", "styles"];
+var FieldLabel = function FieldLabel(_ref) {
+  var children = _ref.children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'theme.primary' : _ref$color,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      label: {}
+    } : _ref$styles,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+  return /*#__PURE__*/React.createElement(Label, Object.assign({
+    top: 4,
+    zIndex: 1000,
+    lineHeight: 15,
+    letterSpacing: 0.25,
+    whiteSpace: "noWrap",
+    position: "absolute",
+    color: error ? 'error' : color,
+    fontSize: LabelSizes[size]
+  }, styles['label'], props), children);
+};
+
+var _excluded$j = ["children"];
+var FieldWrapper = function FieldWrapper(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+  return /*#__PURE__*/React.createElement(Vertical, Object.assign({
+    width: "100%"
+  }, props), children);
+};
+
+var IconSizes$3 = {
+  xs: 8,
+  sm: 10,
+  md: 12,
+  lg: 14,
+  xl: 16
+};
+
+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.createElement(Element, Object.assign({
+    as: "ul"
+  }, props));
+};
+var CountrySelector = function CountrySelector(props) {
+  return /*#__PURE__*/React.createElement(Input, Object.assign({
+    type: "country"
+  }, props));
+};
+var CountryItem = function CountryItem(props) {
+  return /*#__PURE__*/React.createElement(Element, Object.assign({
+    as: "li"
+  }, props));
+};
+var DropDownItem = function DropDownItem(_ref) {
+  var option = _ref.option,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$callback = _ref.callback,
+    callback = _ref$callback === void 0 ? function () {} : _ref$callback,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      text: {}
+    } : _ref$styles;
+  var _useState = useState(false),
+    isHovered = _useState[0],
+    setIsHovered = _useState[1];
+  var handleOptionClick = function handleOptionClick(event) {
+    event.stopPropagation();
+    callback(option);
+  };
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
@@ -2045,7 +2764,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
       helperText: {},
       box: {}
     } : _ref3$styles,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$k);
   var _useTheme = useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -2139,11 +2858,11 @@ var CountryPickerView = function CountryPickerView(_ref3) {
     value: selected,
     onChange: handleChange
   }))), /*#__PURE__*/React.createElement(FieldIcons, null, hide ? /*#__PURE__*/React.createElement(ArrowDownSvg, {
-    size: IconSizes$2[size],
+    size: IconSizes$3[size],
     color: IconColor,
     style: styles['icon']
   }) : /*#__PURE__*/React.createElement(ArrowUpSvg, {
-    size: IconSizes$2[size],
+    size: IconSizes$3[size],
     color: IconColor,
     style: styles['icon']
   }))), !hide && /*#__PURE__*/React.createElement(DropDown, {
@@ -2183,7 +2902,7 @@ var useDatePickerState = function useDatePickerState() {
   };
 };
 
-var _excluded$3 = ["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.createElement(Input, Object.assign({
     type: "date"
@@ -2231,7 +2950,7 @@ var DatePickerView = function DatePickerView(_ref) {
     setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
     onChange = _ref.onChange,
     onChangeText = _ref.onChangeText,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   var isWithLabel = !!(isFocused && label);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
@@ -2266,11 +2985,11 @@ var DatePickerView = function DatePickerView(_ref) {
     color: isDisabled ? 'trueGray.600' : 'blueGray.700',
     cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
   }, styles['field']);
-  return /*#__PURE__*/React.createElement(FieldContainer$1, {
+  return /*#__PURE__*/React.createElement(FieldContainer, {
     helperText: helperText,
     error: error,
     styles: styles
-  }, /*#__PURE__*/React.createElement(FieldContent$1, {
+  }, /*#__PURE__*/React.createElement(FieldContent, {
     label: label,
     size: size,
     error: error,
@@ -2288,7 +3007,7 @@ var DatePickerView = function DatePickerView(_ref) {
     colorScheme: colorScheme,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, /*#__PURE__*/React.createElement(FieldWrapper$1, null, isWithLabel && /*#__PURE__*/React.createElement(FieldLabel$1, Object.assign({
+  }, /*#__PURE__*/React.createElement(FieldWrapper, null, isWithLabel && /*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
     color: colorScheme,
     error: error
@@ -2324,360 +3043,166 @@ var usePasswordState = function usePasswordState() {
   };
 };
 
-var _excluded$4 = ["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$4);
-  return /*#__PURE__*/React.createElement(TextField$1, Object.assign({
-    name: name,
-    type: isVisible ? 'text' : 'password',
-    rightChild: /*#__PURE__*/React.createElement(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.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.useState(true),
-    hide = _React$useState[0],
-    setHide = _React$useState[1];
-  var _React$useState2 = React.useState(false),
-    isHovered = _React$useState2[0],
-    setIsHovered = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    isFocused = _React$useState3[0],
-    setIsFocused = _React$useState3[1];
-  var _React$useState4 = React.useState(defaultSelected),
-    selected = _React$useState4[0],
-    setSelected = _React$useState4[1];
+var useTextFieldState = function useTextFieldState(_ref) {
+  var label = _ref.label,
+    placeholder = _ref.placeholder,
+    value = _ref.value;
+  var _useState = useState(label != null ? label : placeholder),
+    hint = _useState[0],
+    setHint = _useState[1];
+  var _useState2 = useState(false),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+  var _useState3 = useState(false),
+    isHovered = _useState3[0],
+    setIsHovered = _useState3[1];
+  var _useState4 = useState(value || ''),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
   return {
-    selected: selected,
-    setSelected: setSelected,
-    hide: hide,
-    setHide: setHide,
-    isHovered: isHovered,
-    setIsHovered: setIsHovered,
+    hint: hint,
+    setHint: setHint,
     isFocused: isFocused,
-    setIsFocused: setIsFocused
-  };
-};
-var useItemState = function useItemState() {
-  var _React$useState5 = React.useState(false),
-    isHovered = _React$useState5[0],
-    setIsHovered = _React$useState5[1];
-  return {
+    setIsFocused: setIsFocused,
     isHovered: isHovered,
-    setIsHovered: setIsHovered
+    setIsHovered: setIsHovered,
+    inputValue: inputValue,
+    setInputValue: setInputValue
   };
 };
 
-var IconSizes$3 = {
-  xs: 8,
-  sm: 10,
-  md: 12,
-  lg: 14,
-  xl: 16
-};
-
-var _excluded$5 = ["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"];
-var Item = function Item(_ref) {
-  var isHovered = _ref.isHovered,
-    setIsHovered = _ref.setIsHovered,
-    option = _ref.option,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'md' : _ref$size,
-    _ref$callback = _ref.callback,
-    callback = _ref$callback === void 0 ? function () {} : _ref$callback,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  var handleOptionClick = function handleOptionClick(option) {
-    return callback(option);
-  };
-  var handleHover = function handleHover() {
-    return setIsHovered(!isHovered);
-  };
-  return /*#__PURE__*/React.createElement(Element, Object.assign({
-    as: "li",
-    margin: 0,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    listStyleType: "none",
-    onMouseEnter: handleHover,
-    onMouseLeave: handleHover,
-    fontSize: Typography.fontSizes[size],
-    onClick: function onClick() {
-      return handleOptionClick(option);
-    },
-    backgroundColor: isHovered ? 'trueGray.100' : 'transparent'
-  }, props), option);
+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.createElement(Input, Object.assign({
+    type: "text"
+  }, props));
 };
-var SelectBox = function SelectBox(_ref2) {
-  var _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 'md' : _ref2$size,
-    _ref2$styles = _ref2.styles,
-    styles = _ref2$styles === void 0 ? {
+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: {}
-    } : _ref2$styles,
-    selected = _ref2.selected,
-    isDisabled = _ref2.isDisabled,
-    placeholder = _ref2.placeholder,
-    _ref2$removeOption = _ref2.removeOption,
-    removeOption = _ref2$removeOption === void 0 ? function () {} : _ref2$removeOption;
+    } : _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 = useTheme(),
+    getColor = _useTheme.getColor;
+  var IconColor = getColor('color.blueGray.700');
+  var isWithLabel = !!(isFocused && label);
+  useMemo(function () {
+    setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
+  }, [inputValue, isFocused, label, placeholder]);
   var fieldStyles = Object.assign({
     margin: 0,
-    width: '95%',
+    paddingVertical: 8,
+    padddingHorizontal: 0,
+    width: '100%',
     heigth: '100%',
     border: 'none',
-    paddingVertical: 8,
-    paddingHorizontal: 0,
+    on: {
+      focus: {
+        outline: 'none'
+      }
+    },
     fontSize: Typography.fontSizes[size],
     backgroundColor: 'transparent',
-    color: isDisabled ? 'trueGray.600' : 'blueGray.700',
+    color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
     cursor: isDisabled ? 'not-allowed' : 'auto'
-  }, styles['field'], styles['text']);
-  return /*#__PURE__*/React.createElement(Text$1, Object.assign({}, fieldStyles), (selected === '' || selected && selected.length === 0) && !!placeholder ? placeholder : /*#__PURE__*/React.createElement(React.Fragment, null, typeof selected === 'string' ? selected : selected && selected.length > 0 && /*#__PURE__*/React.createElement(Horizontal$1, {
-    gap: 6
-  }, selected.map(function (option) {
-    return /*#__PURE__*/React.createElement(MultiSelect, {
-      key: option,
-      option: option,
-      removeOption: removeOption
-    });
-  }))));
-};
-var HiddenSelect = function HiddenSelect(_ref3) {
-  var id = _ref3.id,
-    name = _ref3.name,
-    selected = _ref3.selected,
-    onChange = _ref3.onChange,
-    _ref3$isMulti = _ref3.isMulti,
-    isMulti = _ref3$isMulti === void 0 ? false : _ref3$isMulti,
-    _ref3$isDisabled = _ref3.isDisabled,
-    isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled,
-    _ref3$isReadOnly = _ref3.isReadOnly,
-    isReadOnly = _ref3$isReadOnly === void 0 ? false : _ref3$isReadOnly,
-    _ref3$options = _ref3.options,
-    options = _ref3$options === void 0 ? [] : _ref3$options,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
-  var handleChange = function handleChange(event) {
-    if (onChange) onChange(event);
-  };
-  return /*#__PURE__*/React.createElement(Element, Object.assign({
-    id: id,
-    name: name,
-    as: "select",
-    opacity: 0,
-    width: 0,
-    height: 0,
-    position: "absolute",
-    value: selected,
-    disabled: isDisabled,
-    readOnly: isReadOnly,
-    onChange: handleChange,
-    multiple: isMulti
-  }, props), options.map(function (option) {
-    return /*#__PURE__*/React.createElement("option", {
-      key: option,
-      value: option
-    }, option);
-  }));
-};
-var DropDown$1 = function DropDown(_ref4) {
-  var size = _ref4.size,
-    _ref4$styles = _ref4.styles,
-    styles = _ref4$styles === void 0 ? {
-      dropDown: {}
-    } : _ref4$styles,
-    options = _ref4.options,
-    _ref4$callback = _ref4.callback,
-    callback = _ref4$callback === void 0 ? function () {} : _ref4$callback;
-  var itemStates = useItemState();
-  var handleCallback = function handleCallback(option) {
-    return callback(option);
-  };
-  var shadow = typeof document !== undefined ? {
-    boxShadow: 'rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px'
-  } : {
-    elevation: 2,
-    shadowColor: 'rgba(0, 0, 0, 0.07)',
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 1,
-    shadowRadius: 1
-  };
-  return /*#__PURE__*/React.createElement(Element, Object.assign({
-    as: "ul",
-    role: "dropdown",
-    top: "100%",
-    width: "100%",
-    display: "flex",
-    zIndex: 1000,
-    overflowY: "auto",
-    marginTop: 5,
-    marginLeft: 0,
-    marginRight: 0,
-    marginBottom: 0,
-    padding: 0,
-    borderRadius: 4,
-    position: "absolute",
-    flexDirection: "column",
-    backgroundColor: "white",
-    justifyContent: "space-evenly"
-  }, shadow, styles['dropDown']), options.map(function (option) {
-    return /*#__PURE__*/React.createElement(Item, Object.assign({
-      key: option,
-      size: size,
-      option: option,
-      callback: handleCallback
-    }, itemStates, styles['text']));
-  }));
-};
-var MultiSelect = function MultiSelect(_ref5) {
-  var option = _ref5.option,
-    _ref5$size = _ref5.size,
-    size = _ref5$size === void 0 ? 'md' : _ref5$size,
-    _ref5$removeOption = _ref5.removeOption,
-    removeOption = _ref5$removeOption === void 0 ? function () {} : _ref5$removeOption,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded3);
-  var handleClick = function handleClick() {
-    return removeOption(option);
+  }, styles['field']);
+  var handleFocus = function handleFocus() {
+    setIsFocused(true);
+    if (onFocus) onFocus();
   };
-  return /*#__PURE__*/React.createElement(Horizontal$1, Object.assign({
-    gap: 10,
-    padding: 6,
-    borderRadius: 4,
-    alignItems: "center",
-    fontSize: Typography.fontSizes[size],
-    backgroundColor: "trueGray.300",
-    onClick: function onClick(event) {
-      return event.stopPropagation();
-    }
-  }, props), /*#__PURE__*/React.createElement(Text$1, {
-    size: size
-  }, option), /*#__PURE__*/React.createElement(CloseSvg, {
-    role: "close-button",
-    color: "inherit",
-    size: IconSizes$3[size],
-    onClick: handleClick
-  }));
-};
-var SelectView = function SelectView(_ref6) {
-  var id = _ref6.id,
-    name = _ref6.name,
-    label = _ref6.label,
-    selected = _ref6.selected,
-    placeholder = _ref6.placeholder,
-    helperText = _ref6.helperText,
-    _ref6$hide = _ref6.hide,
-    hide = _ref6$hide === void 0 ? false : _ref6$hide,
-    _ref6$error = _ref6.error,
-    error = _ref6$error === void 0 ? false : _ref6$error,
-    _ref6$isMulti = _ref6.isMulti,
-    isMulti = _ref6$isMulti === void 0 ? false : _ref6$isMulti,
-    _ref6$isFocused = _ref6.isFocused,
-    isFocused = _ref6$isFocused === void 0 ? false : _ref6$isFocused,
-    _ref6$isHovered = _ref6.isHovered,
-    isHovered = _ref6$isHovered === void 0 ? false : _ref6$isHovered,
-    _ref6$isDisabled = _ref6.isDisabled,
-    isDisabled = _ref6$isDisabled === void 0 ? false : _ref6$isDisabled,
-    _ref6$isReadOnly = _ref6.isReadOnly,
-    isReadOnly = _ref6$isReadOnly === void 0 ? false : _ref6$isReadOnly,
-    _ref6$options = _ref6.options,
-    options = _ref6$options === void 0 ? [] : _ref6$options,
-    _ref6$shadow = _ref6.shadow,
-    shadow = _ref6$shadow === void 0 ? {} : _ref6$shadow,
-    _ref6$size = _ref6.size,
-    size = _ref6$size === void 0 ? 'md' : _ref6$size,
-    _ref6$colorScheme = _ref6.colorScheme,
-    colorScheme = _ref6$colorScheme === void 0 ? 'theme.primary' : _ref6$colorScheme,
-    _ref6$shape = _ref6.shape,
-    shape = _ref6$shape === void 0 ? 'default' : _ref6$shape,
-    _ref6$variant = _ref6.variant,
-    variant = _ref6$variant === void 0 ? 'default' : _ref6$variant,
-    _ref6$styles = _ref6.styles,
-    styles = _ref6$styles === void 0 ? {
-      text: {},
-      icon: {},
-      dropDown: {},
-      selectBox: {},
-      label: {},
-      helperText: {}
-    } : _ref6$styles,
-    _ref6$onChange = _ref6.onChange,
-    onChange = _ref6$onChange === void 0 ? function () {} : _ref6$onChange,
-    _ref6$setHide = _ref6.setHide,
-    setHide = _ref6$setHide === void 0 ? function () {} : _ref6$setHide,
-    _ref6$setSelected = _ref6.setSelected,
-    setSelected = _ref6$setSelected === void 0 ? function () {} : _ref6$setSelected,
-    _ref6$setIsHovered = _ref6.setIsHovered,
-    setIsHovered = _ref6$setIsHovered === void 0 ? function () {} : _ref6$setIsHovered,
-    _ref6$setIsFocused = _ref6.setIsFocused,
-    setIsFocused = _ref6$setIsFocused === void 0 ? function () {} : _ref6$setIsFocused,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded4);
-  var isWithLabel = !!(isFocused && label);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
-  var handleFocus = function handleFocus() {
-    return setIsFocused(true);
-  };
-  var handleClick = function handleClick(event) {
-    event.stopPropagation();
-    setHide(!hide);
-    setIsFocused(!isFocused);
+  var handleBlur = function handleBlur(event) {
+    onBlur(event);
+    setIsFocused(false);
   };
-  var handleCallback = useCallback(function (option) {
-    setHide(!hide);
-    if (isMulti && Array.isArray(selected)) {
-      !selected.includes(option) && setSelected([].concat(selected, [option]));
+  var handleChange = function handleChange(event) {
+    if (typeof event === 'string') {
+      //for ios and android
+      setInputValue(event);
+      if (onChangeText) onChangeText(event);
     } else {
-      setSelected(option);
+      //Web
+      setInputValue(event.target.value);
+      if (onChange) onChange(event);
     }
-  }, [hide, isMulti, selected]);
-  var handleRemoveOption = function handleRemoveOption(selectedOption) {
-    if (Array.isArray(selected) && selected.includes(selectedOption)) {
-      var newSelected = selected.filter(function (option) {
-        return option !== selectedOption;
+  };
+  var handleClear = function handleClear() {
+    setInputValue('');
+    //Web
+    if (onChange) {
+      onBlur({
+        target: {
+          name: name
+        }
+      });
+      onChange({
+        target: {
+          name: name,
+          value: ''
+        }
       });
-      setSelected(newSelected.length === 0 ? [] : newSelected);
     }
+    //for ios and android
+    if (typeof document === 'undefined' && onChangeText) onChangeText('');
   };
-  return /*#__PURE__*/React.createElement(FieldContainer$1, {
-    role: "SelectBox",
+  return /*#__PURE__*/React.createElement(FieldContainer, {
     helperText: helperText,
     error: error,
-    styles: styles,
-    onClick: isDisabled || isReadOnly ? function () {} : handleClick
-  }, /*#__PURE__*/React.createElement(FieldContent$1, {
+    styles: styles
+  }, /*#__PURE__*/React.createElement(FieldContent, {
     label: label,
     size: size,
     error: error,
@@ -2685,7 +3210,7 @@ var SelectView = function SelectView(_ref6) {
     styles: styles,
     shadow: shadow,
     variant: variant,
-    value: selected,
+    value: inputValue,
     color: colorScheme,
     isHovered: isHovered,
     isDisabled: isDisabled,
@@ -2695,413 +3220,394 @@ var SelectView = function SelectView(_ref6) {
     colorScheme: colorScheme,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, /*#__PURE__*/React.createElement(FieldWrapper$1, null, isWithLabel && /*#__PURE__*/React.createElement(FieldLabel$1, Object.assign({
+  }, leftChild, /*#__PURE__*/React.createElement(FieldWrapper, null, isWithLabel && /*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
     color: colorScheme,
     error: error
-  }, styles), label), /*#__PURE__*/React.createElement(HiddenSelect, Object.assign({
+  }, styles), label), /*#__PURE__*/React.createElement(TextFieldInput, Object.assign({
     id: id,
     name: name,
-    options: options,
-    onChange: onChange,
-    selected: selected,
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly,
-    isMulti: isMulti,
-    onFocus: handleFocus
-  }, props)), /*#__PURE__*/React.createElement(SelectBox, {
-    size: size,
-    styles: styles,
-    selected: selected,
-    isDisabled: isDisabled,
-    placeholder: placeholder,
-    removeOption: handleRemoveOption
-  })), /*#__PURE__*/React.createElement(FieldIcons$1, null, !isReadOnly && !isDisabled && /*#__PURE__*/React.createElement(React.Fragment, null, hide ? /*#__PURE__*/React.createElement(ArrowDownSvg$1, {
-    color: "inherit",
-    size: IconSizes$3[size],
-    style: styles.icon
-  }) : /*#__PURE__*/React.createElement(ArrowUpSvg$1, {
-    color: "inherit",
-    size: IconSizes$3[size],
-    style: styles.icon
-  })))), !hide && /*#__PURE__*/React.createElement(DropDown$1, {
-    size: size,
-    styles: styles,
-    options: options,
-    callback: handleCallback
-  }));
+    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.createElement(FieldIcons, null, rightChild && /*#__PURE__*/React.createElement(React.Fragment, null, rightChild), isClearable && inputValue && !isReadOnly && !isDisabled && /*#__PURE__*/React.createElement(CloseSvg, {
+    size: Typography.fontSizes[size],
+    color: IconColor,
+    onClick: handleClear
+  }))));
 };
 
-var SelectComponent = function SelectComponent(props) {
-  var selectStates = useSelectState(props);
-  return /*#__PURE__*/React.createElement(SelectView, Object.assign({}, selectStates, props));
+var TextFieldComponent = function TextFieldComponent(props) {
+  var textFieldStates = useTextFieldState(props);
+  return /*#__PURE__*/React.createElement(TextFieldView, Object.assign({}, textFieldStates, props));
 };
 /**
- * Select provides a dropdown list of options for the user to choose from.
+ * TextField is used to capture text data from users.
  */
-var Select = SelectComponent;
+var TextField = TextFieldComponent;
 
-var useSwitchState = function useSwitchState(_ref) {
-  var isDisabled = _ref.isDisabled,
-    isChecked = _ref.isChecked;
-  var _React$useState = React.useState(false),
-    isHovered = _React$useState[0],
-    setIsHovered = _React$useState[1];
-  var _React$useState2 = React.useState(isDisabled ? !isDisabled : isChecked),
-    on = _React$useState2[0],
-    setOn = _React$useState2[1];
-  return {
-    isHovered: isHovered,
-    setIsHovered: setIsHovered,
-    on: on,
-    setOn: setOn
-  };
+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.createElement(TextField, Object.assign({
+    name: name,
+    type: isVisible ? 'text' : 'password',
+    rightChild: /*#__PURE__*/React.createElement(View, {
+      onClick: function onClick() {
+        if (!isDisabled) setIsVisible(!isVisible);
+      }
+    }, isVisible ? visibleIcon : hiddenIcon),
+    isClearable: false
+  }, props));
 };
 
-var KnobSizes = {
-  xs: {
-    height: 6,
-    width: 6
-  },
-  sm: {
-    height: 9,
-    width: 9
-  },
-  md: {
-    height: 12,
-    width: 12
-  },
-  lg: {
-    height: 15,
-    width: 15
-  },
-  xl: {
-    height: 18,
-    width: 18
-  },
-  '2xl': {
-    height: 21,
-    width: 21
-  },
-  '3xl': {
-    height: 24,
-    width: 24
-  },
-  '4xl': {
-    height: 27,
-    width: 27
-  },
-  '5xl': {
-    height: 30,
-    width: 30
-  },
-  '6xl': {
-    height: 33,
-    width: 33
-  }
-};
-var SliderSizes = {
-  xs: {
-    height: 16,
-    width: 28
-  },
-  sm: {
-    height: 20,
-    width: 36
-  },
-  md: {
-    height: 24,
-    width: 44
-  },
-  lg: {
-    height: 28,
-    width: 52
-  },
-  xl: {
-    height: 32,
-    width: 60
-  },
-  '2xl': {
-    height: 36,
-    width: 68
-  },
-  '3xl': {
-    height: 40,
-    width: 76
-  },
-  '4xl': {
-    height: 44,
-    width: 84
-  },
-  '5xl': {
-    height: 48,
-    width: 92
-  },
-  '6xl': {
-    height: 52,
-    width: 100
-  }
+var PasswordComponent = function PasswordComponent(props) {
+  var passwordState = usePasswordState();
+  return /*#__PURE__*/React.createElement(PasswordView, Object.assign({}, passwordState, props));
 };
-var SliderPadding = {
-  xs: {
-    paddingVertical: 0,
-    paddingHorizontal: 2
-  },
-  sm: {
-    paddingVertical: 0,
-    paddingHorizontal: 3
-  },
-  md: {
-    paddingVertical: 0,
-    paddingHorizontal: 5
-  },
-  lg: {
-    paddingVertical: 0,
-    paddingHorizontal: 6
-  },
-  xl: {
-    paddingVertical: 0,
-    paddingHorizontal: 8
-  },
-  '2xl': {
-    paddingVertical: 0,
-    paddingHorizontal: 9
-  },
-  '3xl': {
-    paddingVertical: 0,
-    paddingHorizontal: 10
-  },
-  '4xl': {
-    paddingVertical: 0,
-    paddingHorizontal: 13
-  },
-  '5xl': {
-    paddingVertical: 0,
-    paddingHorizontal: 15
-  },
-  '6xl': {
-    paddingVertical: 0,
-    paddingHorizontal: 16
-  }
+/**
+ * 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.useState(true),
+    hide = _React$useState[0],
+    setHide = _React$useState[1];
+  var _React$useState2 = React.useState(false),
+    isHovered = _React$useState2[0],
+    setIsHovered = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    isFocused = _React$useState3[0],
+    setIsFocused = _React$useState3[1];
+  var _React$useState4 = React.useState(defaultSelected),
+    selected = _React$useState4[0],
+    setSelected = _React$useState4[1];
+  return {
+    selected: selected,
+    setSelected: setSelected,
+    hide: hide,
+    setHide: setHide,
+    isHovered: isHovered,
+    setIsHovered: setIsHovered,
+    isFocused: isFocused,
+    setIsFocused: setIsFocused
+  };
+};
+var useItemState = function useItemState() {
+  var _React$useState5 = React.useState(false),
+    isHovered = _React$useState5[0],
+    setIsHovered = _React$useState5[1];
+  return {
+    isHovered: isHovered,
+    setIsHovered: setIsHovered
+  };
 };
 
-var _excluded$6 = ["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.createElement(Input, Object.assign({
-    type: "checkbox"
-  }, props));
+var IconSizes$4 = {
+  xs: 8,
+  sm: 10,
+  md: 12,
+  lg: 14,
+  xl: 16
 };
-var SwitchView = function SwitchView(_ref) {
-  var id = _ref.id,
-    name = _ref.name,
-    inActiveChild = _ref.inActiveChild,
-    activeChild = _ref.activeChild,
-    _ref$shadow = _ref.shadow,
-    shadow = _ref$shadow === void 0 ? {} : _ref$shadow,
+
+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"];
+var Item = function Item(_ref) {
+  var isHovered = _ref.isHovered,
+    setIsHovered = _ref.setIsHovered,
+    option = _ref.option,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'sm' : _ref$size,
-    _ref$colorScheme = _ref.colorScheme,
-    colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
-    _ref$on = _ref.on,
-    on = _ref$on === void 0 ? false : _ref$on,
-    _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,
-    onChange = _ref.onChange,
-    onValueChange = _ref.onValueChange,
-    _ref$setOn = _ref.setOn,
-    setOn = _ref$setOn === void 0 ? function () {} : _ref$setOn,
-    _ref$setIsHovered = _ref.setIsHovered,
-    setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
-    _ref$styles = _ref.styles,
-    styles = _ref$styles === void 0 ? {
-      slider: {},
-      circle: {}
-    } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  var handleToggle = function handleToggle(event) {
-    if (!isReadOnly) {
-      setOn(!on);
-      if (onChange) onChange(event);
-    }
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$callback = _ref.callback,
+    callback = _ref$callback === void 0 ? function () {} : _ref$callback,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+  var handleOptionClick = function handleOptionClick(option) {
+    return callback(option);
   };
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
-  return /*#__PURE__*/React.createElement(Label, {
-    htmlFor: id,
+  return /*#__PURE__*/React.createElement(Element, Object.assign({
+    as: "li",
+    margin: 0,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    listStyleType: "none",
     onMouseEnter: handleHover,
-    onMouseLeave: handleHover
-  }, /*#__PURE__*/React.createElement(SwitchContent, Object.assign({
+    onMouseLeave: handleHover,
+    fontSize: Typography.fontSizes[size],
+    onClick: function onClick() {
+      return handleOptionClick(option);
+    },
+    backgroundColor: isHovered ? 'trueGray.100' : 'transparent'
+  }, props), option);
+};
+var SelectBox = function SelectBox(_ref2) {
+  var _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'md' : _ref2$size,
+    _ref2$styles = _ref2.styles,
+    styles = _ref2$styles === void 0 ? {
+      field: {},
+      text: {}
+    } : _ref2$styles,
+    selected = _ref2.selected,
+    isDisabled = _ref2.isDisabled,
+    placeholder = _ref2.placeholder,
+    _ref2$removeOption = _ref2.removeOption,
+    removeOption = _ref2$removeOption === void 0 ? function () {} : _ref2$removeOption;
+  var fieldStyles = Object.assign({
+    margin: 0,
+    width: '95%',
+    heigth: '100%',
+    border: 'none',
+    paddingVertical: 8,
+    paddingHorizontal: 0,
+    fontSize: Typography.fontSizes[size],
+    backgroundColor: 'transparent',
+    color: isDisabled ? 'trueGray.600' : 'blueGray.700',
+    cursor: isDisabled ? 'not-allowed' : 'auto'
+  }, styles['field'], styles['text']);
+  return /*#__PURE__*/React.createElement(Text, Object.assign({}, fieldStyles), (selected === '' || selected && selected.length === 0) && !!placeholder ? placeholder : /*#__PURE__*/React.createElement(React.Fragment, null, typeof selected === 'string' ? selected : selected && selected.length > 0 && /*#__PURE__*/React.createElement(Horizontal, {
+    gap: 6
+  }, selected.map(function (option) {
+    return /*#__PURE__*/React.createElement(MultiSelect, {
+      key: option,
+      option: option,
+      removeOption: removeOption
+    });
+  }))));
+};
+var HiddenSelect = function HiddenSelect(_ref3) {
+  var id = _ref3.id,
+    name = _ref3.name,
+    selected = _ref3.selected,
+    onChange = _ref3.onChange,
+    _ref3$isMulti = _ref3.isMulti,
+    isMulti = _ref3$isMulti === void 0 ? false : _ref3$isMulti,
+    _ref3$isDisabled = _ref3.isDisabled,
+    isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled,
+    _ref3$isReadOnly = _ref3.isReadOnly,
+    isReadOnly = _ref3$isReadOnly === void 0 ? false : _ref3$isReadOnly,
+    _ref3$options = _ref3.options,
+    options = _ref3$options === void 0 ? [] : _ref3$options,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  var handleChange = function handleChange(event) {
+    if (onChange) onChange(event);
+  };
+  return /*#__PURE__*/React.createElement(Element, Object.assign({
     id: id,
     name: name,
+    as: "select",
     opacity: 0,
     width: 0,
     height: 0,
-    checked: on,
-    onChange: handleToggle,
+    position: "absolute",
+    value: selected,
     disabled: isDisabled,
-    readOnly: isReadOnly
-  }, onValueChange && {
-    onValueChange: handleToggle
-  }, props)), /*#__PURE__*/React.createElement(View$1, Object.assign({
-    display: "flex",
-    cursor: "pointer",
-    alignItems: "center",
-    borderRadius: 24,
-    filter: isHovered && on ? 'brightness(0.9)' : 'brightness(1)',
-    transition: "justify-content 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-    backgroundColor: isDisabled ? 'disabled' : on ? colorScheme : 'lightgray',
-    justifyContent: activeChild ? 'space-between' : on ? 'flex-end' : 'flex-start'
-  }, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && on && /*#__PURE__*/React.createElement(View$1, null, activeChild), /*#__PURE__*/React.createElement(View$1, Object.assign({
-    borderRadius: "50%",
-    backgroundColor: "white"
-  }, KnobSizes[size], styles['circle'])), inActiveChild && !on && /*#__PURE__*/React.createElement(View$1, null, inActiveChild)));
+    readOnly: isReadOnly,
+    onChange: handleChange,
+    multiple: isMulti
+  }, props), options.map(function (option) {
+    return /*#__PURE__*/React.createElement("option", {
+      key: option,
+      value: option
+    }, option);
+  }));
 };
-
-var SwitchComponent = function SwitchComponent(props) {
-  var switchStates = useSwitchState(props);
-  return /*#__PURE__*/React.createElement(SwitchView, Object.assign({}, switchStates, props));
+var DropDown$1 = function DropDown(_ref4) {
+  var size = _ref4.size,
+    _ref4$styles = _ref4.styles,
+    styles = _ref4$styles === void 0 ? {
+      dropDown: {}
+    } : _ref4$styles,
+    options = _ref4.options,
+    _ref4$callback = _ref4.callback,
+    callback = _ref4$callback === void 0 ? function () {} : _ref4$callback;
+  var itemStates = useItemState();
+  var handleCallback = function handleCallback(option) {
+    return callback(option);
+  };
+  var shadow = typeof document !== undefined ? {
+    boxShadow: 'rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px'
+  } : {
+    elevation: 2,
+    shadowColor: 'rgba(0, 0, 0, 0.07)',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 1,
+    shadowRadius: 1
+  };
+  return /*#__PURE__*/React.createElement(Element, Object.assign({
+    as: "ul",
+    role: "dropdown",
+    top: "100%",
+    width: "100%",
+    display: "flex",
+    zIndex: 1000,
+    overflowY: "auto",
+    marginTop: 5,
+    marginLeft: 0,
+    marginRight: 0,
+    marginBottom: 0,
+    padding: 0,
+    borderRadius: 4,
+    position: "absolute",
+    flexDirection: "column",
+    backgroundColor: "white",
+    justifyContent: "space-evenly"
+  }, shadow, styles['dropDown']), options.map(function (option) {
+    return /*#__PURE__*/React.createElement(Item, Object.assign({
+      key: option,
+      size: size,
+      option: option,
+      callback: handleCallback
+    }, itemStates, styles['text']));
+  }));
 };
-var Switch = SwitchComponent;
-
-var useTextAreaState = function useTextAreaState(_ref) {
-  var label = _ref.label,
-    placeholder = _ref.placeholder,
-    defaultValue = _ref.defaultValue,
-    value = _ref.value;
-  var _useState = useState(label != null ? label : placeholder),
-    hint = _useState[0],
-    setHint = _useState[1];
-  var _useState2 = useState(false),
-    isHovered = _useState2[0],
-    setIsHovered = _useState2[1];
-  var _useState3 = useState(value || defaultValue || ''),
-    inputValue = _useState3[0],
-    setInputValue = _useState3[1];
-  var _useState4 = useState(false),
-    isFocused = _useState4[0],
-    setIsFocused = _useState4[1];
-  return {
-    hint: hint,
-    setHint: setHint,
-    isHovered: isHovered,
-    setIsHovered: setIsHovered,
-    inputValue: inputValue,
-    setInputValue: setInputValue,
-    isFocused: isFocused,
-    setIsFocused: setIsFocused
+var MultiSelect = function MultiSelect(_ref5) {
+  var option = _ref5.option,
+    _ref5$size = _ref5.size,
+    size = _ref5$size === void 0 ? 'md' : _ref5$size,
+    _ref5$removeOption = _ref5.removeOption,
+    removeOption = _ref5$removeOption === void 0 ? function () {} : _ref5$removeOption,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded3);
+  var handleClick = function handleClick() {
+    return removeOption(option);
   };
+  return /*#__PURE__*/React.createElement(Horizontal, Object.assign({
+    gap: 10,
+    padding: 6,
+    borderRadius: 4,
+    alignItems: "center",
+    fontSize: Typography.fontSizes[size],
+    backgroundColor: "trueGray.300",
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    }
+  }, props), /*#__PURE__*/React.createElement(Text, {
+    size: size
+  }, option), /*#__PURE__*/React.createElement(CloseSvg, {
+    role: "close-button",
+    color: "inherit",
+    size: IconSizes$4[size],
+    onClick: handleClick
+  }));
 };
-
-var _excluded$7 = ["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,
-    hint = _ref.hint,
-    error = _ref.error,
-    label = _ref.label,
-    shadow = _ref.shadow,
-    inputValue = _ref.inputValue,
-    helperText = _ref.helperText,
-    placeholder = _ref.placeholder,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'sm' : _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$isHovered = _ref.isHovered,
-    isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
-    _ref$isFocused = _ref.isFocused,
-    isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
-    _ref$isEditable = _ref.isEditable,
-    isEditable = _ref$isEditable === void 0 ? false : _ref$isEditable,
-    _ref$isReadOnly = _ref.isReadOnly,
-    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$isAutoFocus = _ref.isAutoFocus,
-    isAutoFocus = _ref$isAutoFocus === void 0 ? false : _ref$isAutoFocus,
-    _ref$isMultiline = _ref.isMultiline,
-    isMultiline = _ref$isMultiline === void 0 ? false : _ref$isMultiline,
-    _ref$maxRows = _ref.maxRows,
-    maxRows = _ref$maxRows === void 0 ? 3 : _ref$maxRows,
-    _ref$maxCols = _ref.maxCols,
-    maxCols = _ref$maxCols === void 0 ? 30 : _ref$maxCols,
-    _ref$onBlur = _ref.onBlur,
-    onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
-    onChange = _ref.onChange,
-    onFocus = _ref.onFocus,
-    onChangeText = _ref.onChangeText,
-    _ref$setHint = _ref.setHint,
-    setHint = _ref$setHint === void 0 ? function () {} : _ref$setHint,
-    _ref$setInputValue = _ref.setInputValue,
-    setInputValue = _ref$setInputValue === void 0 ? function () {} : _ref$setInputValue,
-    _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$styles = _ref.styles,
-    styles = _ref$styles === void 0 ? {
-      box: {},
+var SelectView = function SelectView(_ref6) {
+  var id = _ref6.id,
+    name = _ref6.name,
+    label = _ref6.label,
+    selected = _ref6.selected,
+    placeholder = _ref6.placeholder,
+    helperText = _ref6.helperText,
+    _ref6$hide = _ref6.hide,
+    hide = _ref6$hide === void 0 ? false : _ref6$hide,
+    _ref6$error = _ref6.error,
+    error = _ref6$error === void 0 ? false : _ref6$error,
+    _ref6$isMulti = _ref6.isMulti,
+    isMulti = _ref6$isMulti === void 0 ? false : _ref6$isMulti,
+    _ref6$isFocused = _ref6.isFocused,
+    isFocused = _ref6$isFocused === void 0 ? false : _ref6$isFocused,
+    _ref6$isHovered = _ref6.isHovered,
+    isHovered = _ref6$isHovered === void 0 ? false : _ref6$isHovered,
+    _ref6$isDisabled = _ref6.isDisabled,
+    isDisabled = _ref6$isDisabled === void 0 ? false : _ref6$isDisabled,
+    _ref6$isReadOnly = _ref6.isReadOnly,
+    isReadOnly = _ref6$isReadOnly === void 0 ? false : _ref6$isReadOnly,
+    _ref6$options = _ref6.options,
+    options = _ref6$options === void 0 ? [] : _ref6$options,
+    _ref6$shadow = _ref6.shadow,
+    shadow = _ref6$shadow === void 0 ? {} : _ref6$shadow,
+    _ref6$size = _ref6.size,
+    size = _ref6$size === void 0 ? 'md' : _ref6$size,
+    _ref6$colorScheme = _ref6.colorScheme,
+    colorScheme = _ref6$colorScheme === void 0 ? 'theme.primary' : _ref6$colorScheme,
+    _ref6$shape = _ref6.shape,
+    shape = _ref6$shape === void 0 ? 'default' : _ref6$shape,
+    _ref6$variant = _ref6.variant,
+    variant = _ref6$variant === void 0 ? 'default' : _ref6$variant,
+    _ref6$styles = _ref6.styles,
+    styles = _ref6$styles === void 0 ? {
       text: {},
+      icon: {},
+      dropDown: {},
+      selectBox: {},
       label: {},
-      helperText: {},
-      field: {}
-    } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      helperText: {}
+    } : _ref6$styles,
+    _ref6$onChange = _ref6.onChange,
+    onChange = _ref6$onChange === void 0 ? function () {} : _ref6$onChange,
+    _ref6$setHide = _ref6.setHide,
+    setHide = _ref6$setHide === void 0 ? function () {} : _ref6$setHide,
+    _ref6$setSelected = _ref6.setSelected,
+    setSelected = _ref6$setSelected === void 0 ? function () {} : _ref6$setSelected,
+    _ref6$setIsHovered = _ref6.setIsHovered,
+    setIsHovered = _ref6$setIsHovered === void 0 ? function () {} : _ref6$setIsHovered,
+    _ref6$setIsFocused = _ref6.setIsFocused,
+    setIsFocused = _ref6$setIsFocused === void 0 ? function () {} : _ref6$setIsFocused,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded4);
   var isWithLabel = !!(isFocused && label);
-  useMemo(function () {
-    setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
-  }, [inputValue, isFocused, label, placeholder]);
-  var fieldStyles = Object.assign({
-    margin: 0,
-    paddingVertical: 8,
-    paddingHorizontal: 0,
-    width: '100%',
-    heigth: '100%',
-    border: 'none',
-    on: {
-      focus: {
-        outline: 'none'
-      }
-    },
-    fontSize: Typography.fontSizes[size],
-    backgroundColor: 'transparent',
-    color: isDisabled ? 'trueGray.600' : 'blueGray.700',
-    cursor: isDisabled ? 'not-allowed' : 'auto'
-  }, styles['field']);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
   var handleFocus = function handleFocus() {
-    setIsFocused(true);
-    if (onFocus) onFocus();
+    return setIsFocused(true);
   };
-  var handleBlur = function handleBlur(event) {
-    onBlur(event);
-    setIsFocused(false);
+  var handleClick = function handleClick(event) {
+    event.stopPropagation();
+    setHide(!hide);
+    setIsFocused(!isFocused);
   };
-  var handleChange = function handleChange(event) {
-    if (typeof event === 'string') {
-      //for ios and android
-      setInputValue(event);
-      if (onChangeText) onChangeText(event);
+  var handleCallback = useCallback(function (option) {
+    setHide(!hide);
+    if (isMulti && Array.isArray(selected)) {
+      !selected.includes(option) && setSelected([].concat(selected, [option]));
     } else {
-      setInputValue(event.target.value);
-      if (onChange) onChange(event);
+      setSelected(option);
+    }
+  }, [hide, isMulti, selected]);
+  var handleRemoveOption = function handleRemoveOption(selectedOption) {
+    if (Array.isArray(selected) && selected.includes(selectedOption)) {
+      var newSelected = selected.filter(function (option) {
+        return option !== selectedOption;
+      });
+      setSelected(newSelected.length === 0 ? [] : newSelected);
     }
   };
   return /*#__PURE__*/React.createElement(FieldContainer, {
+    role: "SelectBox",
     helperText: helperText,
     error: error,
-    styles: styles
+    styles: styles,
+    onClick: isDisabled || isReadOnly ? function () {} : handleClick
   }, /*#__PURE__*/React.createElement(FieldContent, {
     label: label,
     size: size,
@@ -3110,7 +3616,7 @@ var TextAreaView = function TextAreaView(_ref) {
     styles: styles,
     shadow: shadow,
     variant: variant,
-    value: inputValue,
+    value: selected,
     color: colorScheme,
     isHovered: isHovered,
     isDisabled: isDisabled,
@@ -3124,397 +3630,460 @@ var TextAreaView = function TextAreaView(_ref) {
     htmlFor: id,
     color: colorScheme,
     error: error
-  }, styles), label), /*#__PURE__*/React.createElement(Element, Object.assign({
-    as: "textarea",
+  }, styles), label), /*#__PURE__*/React.createElement(HiddenSelect, Object.assign({
     id: id,
     name: name,
-    rows: maxRows,
-    cols: maxCols,
-    value: inputValue,
-    readOnly: isReadOnly,
-    disabled: isDisabled,
-    autoFocus: isAutoFocus,
-    editable: isEditable,
-    placeholder: hint,
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    onChange: handleChange,
-    multiline: isMultiline
-  }, fieldStyles, props, onChangeText && {
-    onChangeText: handleChange
-  })))));
-};
-
-var TextAreaComponent = function TextAreaComponent(props) {
-  var textAreaState = useTextAreaState(props);
-  return /*#__PURE__*/React.createElement(TextAreaView, Object.assign({}, textAreaState, props));
+    options: options,
+    onChange: onChange,
+    selected: selected,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isMulti: isMulti,
+    onFocus: handleFocus
+  }, props)), /*#__PURE__*/React.createElement(SelectBox, {
+    size: size,
+    styles: styles,
+    selected: selected,
+    isDisabled: isDisabled,
+    placeholder: placeholder,
+    removeOption: handleRemoveOption
+  })), /*#__PURE__*/React.createElement(FieldIcons, null, !isReadOnly && !isDisabled && /*#__PURE__*/React.createElement(React.Fragment, null, hide ? /*#__PURE__*/React.createElement(ArrowDownSvg, {
+    color: "inherit",
+    size: IconSizes$4[size],
+    style: styles.icon
+  }) : /*#__PURE__*/React.createElement(ArrowUpSvg, {
+    color: "inherit",
+    size: IconSizes$4[size],
+    style: styles.icon
+  })))), !hide && /*#__PURE__*/React.createElement(DropDown$1, {
+    size: size,
+    styles: styles,
+    options: options,
+    callback: handleCallback
+  }));
 };
-/**
- * Text Area is an component used to create a multi-line input field.
- */
-var TextArea = TextAreaComponent;
-
-var useTextFieldState = function useTextFieldState(_ref) {
-  var label = _ref.label,
-    placeholder = _ref.placeholder,
-    value = _ref.value;
-  var _useState = useState(label != null ? label : placeholder),
-    hint = _useState[0],
-    setHint = _useState[1];
-  var _useState2 = useState(false),
-    isFocused = _useState2[0],
-    setIsFocused = _useState2[1];
-  var _useState3 = useState(false),
-    isHovered = _useState3[0],
-    setIsHovered = _useState3[1];
-  var _useState4 = useState(value || ''),
-    inputValue = _useState4[0],
-    setInputValue = _useState4[1];
+
+var SelectComponent = function SelectComponent(props) {
+  var selectStates = useSelectState(props);
+  return /*#__PURE__*/React.createElement(SelectView, Object.assign({}, selectStates, props));
+};
+/**
+ * Select provides a dropdown list of options for the user to choose from.
+ */
+var Select = SelectComponent;
+
+var useSwitchState = function useSwitchState(_ref) {
+  var isDisabled = _ref.isDisabled,
+    isChecked = _ref.isChecked;
+  var _React$useState = React.useState(false),
+    isHovered = _React$useState[0],
+    setIsHovered = _React$useState[1];
+  var _React$useState2 = React.useState(isDisabled ? !isDisabled : isChecked),
+    on = _React$useState2[0],
+    setOn = _React$useState2[1];
   return {
-    hint: hint,
-    setHint: setHint,
-    isFocused: isFocused,
-    setIsFocused: setIsFocused,
     isHovered: isHovered,
     setIsHovered: setIsHovered,
-    inputValue: inputValue,
-    setInputValue: setInputValue
+    on: on,
+    setOn: setOn
   };
 };
 
-var _excluded$8 = ["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) {
+var KnobSizes = {
+  xs: {
+    height: 6,
+    width: 6
+  },
+  sm: {
+    height: 9,
+    width: 9
+  },
+  md: {
+    height: 12,
+    width: 12
+  },
+  lg: {
+    height: 15,
+    width: 15
+  },
+  xl: {
+    height: 18,
+    width: 18
+  },
+  '2xl': {
+    height: 21,
+    width: 21
+  },
+  '3xl': {
+    height: 24,
+    width: 24
+  },
+  '4xl': {
+    height: 27,
+    width: 27
+  },
+  '5xl': {
+    height: 30,
+    width: 30
+  },
+  '6xl': {
+    height: 33,
+    width: 33
+  }
+};
+var SliderSizes = {
+  xs: {
+    height: 16,
+    width: 28
+  },
+  sm: {
+    height: 20,
+    width: 36
+  },
+  md: {
+    height: 24,
+    width: 44
+  },
+  lg: {
+    height: 28,
+    width: 52
+  },
+  xl: {
+    height: 32,
+    width: 60
+  },
+  '2xl': {
+    height: 36,
+    width: 68
+  },
+  '3xl': {
+    height: 40,
+    width: 76
+  },
+  '4xl': {
+    height: 44,
+    width: 84
+  },
+  '5xl': {
+    height: 48,
+    width: 92
+  },
+  '6xl': {
+    height: 52,
+    width: 100
+  }
+};
+var SliderPadding = {
+  xs: {
+    paddingVertical: 0,
+    paddingHorizontal: 2
+  },
+  sm: {
+    paddingVertical: 0,
+    paddingHorizontal: 3
+  },
+  md: {
+    paddingVertical: 0,
+    paddingHorizontal: 5
+  },
+  lg: {
+    paddingVertical: 0,
+    paddingHorizontal: 6
+  },
+  xl: {
+    paddingVertical: 0,
+    paddingHorizontal: 8
+  },
+  '2xl': {
+    paddingVertical: 0,
+    paddingHorizontal: 9
+  },
+  '3xl': {
+    paddingVertical: 0,
+    paddingHorizontal: 10
+  },
+  '4xl': {
+    paddingVertical: 0,
+    paddingHorizontal: 13
+  },
+  '5xl': {
+    paddingVertical: 0,
+    paddingHorizontal: 15
+  },
+  '6xl': {
+    paddingVertical: 0,
+    paddingHorizontal: 16
+  }
+};
+
+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.createElement(Input, Object.assign({
-    type: "text"
+    type: "checkbox"
   }, props));
 };
-var TextFieldView = function TextFieldView(_ref) {
+var SwitchView = function SwitchView(_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,
+    inActiveChild = _ref.inActiveChild,
+    activeChild = _ref.activeChild,
     _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$8);
-  var _useTheme = useTheme(),
-    getColor = _useTheme.getColor;
-  var IconColor = getColor('color.blueGray.700');
-  var isWithLabel = !!(isFocused && label);
-  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: 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);
+    size = _ref$size === void 0 ? 'sm' : _ref$size,
+    _ref$colorScheme = _ref.colorScheme,
+    colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
+    _ref$on = _ref.on,
+    on = _ref$on === void 0 ? false : _ref$on,
+    _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,
+    onChange = _ref.onChange,
+    onValueChange = _ref.onValueChange,
+    _ref$setOn = _ref.setOn,
+    setOn = _ref$setOn === void 0 ? function () {} : _ref$setOn,
+    _ref$setIsHovered = _ref.setIsHovered,
+    setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      slider: {},
+      circle: {}
+    } : _ref$styles,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+  var handleToggle = function handleToggle(event) {
+    if (!isReadOnly) {
+      setOn(!on);
       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('');
+  var handleHover = function handleHover() {
+    return setIsHovered(!isHovered);
   };
-  return /*#__PURE__*/React.createElement(FieldContainer$1, {
-    helperText: helperText,
-    error: error,
-    styles: styles
-  }, /*#__PURE__*/React.createElement(FieldContent$1, {
-    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,
+  return /*#__PURE__*/React.createElement(Label, {
+    htmlFor: id,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, leftChild, /*#__PURE__*/React.createElement(FieldWrapper$1, null, isWithLabel && /*#__PURE__*/React.createElement(FieldLabel$1, Object.assign({
-    htmlFor: id,
-    color: colorScheme,
-    error: error
-  }, styles), label), /*#__PURE__*/React.createElement(TextFieldInput, Object.assign({
+  }, /*#__PURE__*/React.createElement(SwitchContent, Object.assign({
     id: id,
     name: name,
-    value: inputValue,
-    readOnly: isReadOnly,
+    opacity: 0,
+    width: 0,
+    height: 0,
+    checked: on,
+    onChange: handleToggle,
     disabled: isDisabled,
-    autoFocus: isAutoFocus,
-    placeholder: hint,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    autoComplete: "off"
-  }, fieldStyles, props, {
-    onChange: handleChange
-  }, onChangeText && {
-    onChangeText: handleChange
-  }))), (rightChild || isClearable && inputValue) && /*#__PURE__*/React.createElement(FieldIcons$1, null, rightChild && /*#__PURE__*/React.createElement(React.Fragment, null, rightChild), isClearable && inputValue && !isReadOnly && !isDisabled && /*#__PURE__*/React.createElement(CloseSvg, {
-    size: Typography.fontSizes[size],
-    color: IconColor,
-    onClick: handleClear
-  }))));
-};
-
-var TextFieldComponent = function TextFieldComponent(props) {
-  var textFieldStates = useTextFieldState(props);
-  return /*#__PURE__*/React.createElement(TextFieldView, Object.assign({}, textFieldStates, props));
-};
-/**
- * TextField is used to capture text data from users.
- */
-var TextField = TextFieldComponent;
-
-var _excluded$9 = ["children", "wrap"];
-var CenterView = function CenterView(_ref) {
-  var children = _ref.children,
-    wrap = _ref.wrap,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
-  return /*#__PURE__*/React.createElement(View$1, Object.assign({
+    readOnly: isReadOnly
+  }, onValueChange && {
+    onValueChange: handleToggle
+  }, props)), /*#__PURE__*/React.createElement(View, Object.assign({
     display: "flex",
-    justifyContent: "center",
+    cursor: "pointer",
     alignItems: "center",
-    flexWrap: wrap
-  }, props), children);
-};
-
-/**
- * The Center component is a React functional component that provides a centered layout for its children using flexbox.
- */
-var CenterComponent = function CenterComponent(props) {
-  return /*#__PURE__*/React.createElement(CenterView, Object.assign({}, props));
-};
-var Center = CenterComponent;
-
-var _excluded$a = ["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$a);
-  return /*#__PURE__*/React.createElement(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.createElement(HorizontalView, Object.assign({}, props));
-};
-var Horizontal = HorizontalComponent;
-
-var _excluded$b = ["children", "wrap", "justify", "isReversed"];
-var VerticalView = function VerticalView(_ref) {
-  var children = _ref.children,
-    _ref$wrap = _ref.wrap,
-    wrap = _ref$wrap === void 0 ? 'nowrap' : _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$b);
-  return /*#__PURE__*/React.createElement(View$2, Object.assign({
-    display: "flex",
-    flexWrap: wrap,
-    flexDirection: isReversed ? 'column-reverse' : 'column',
-    justifyContent: justify
-  }, props), children);
+    borderRadius: 24,
+    filter: isHovered && on ? 'brightness(0.9)' : 'brightness(1)',
+    transition: "justify-content 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    backgroundColor: isDisabled ? 'disabled' : on ? colorScheme : 'lightgray',
+    justifyContent: activeChild ? 'space-between' : on ? 'flex-end' : 'flex-start'
+  }, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && on && /*#__PURE__*/React.createElement(View, null, activeChild), /*#__PURE__*/React.createElement(View, Object.assign({
+    borderRadius: "50%",
+    backgroundColor: "white"
+  }, KnobSizes[size], styles['circle'])), inActiveChild && !on && /*#__PURE__*/React.createElement(View, null, inActiveChild)));
 };
 
-/**
- * Vertical layout aligns all the elements in a container on the vertical axis.
- */
-var VerticalComponent = function VerticalComponent(props) {
-  return /*#__PURE__*/React.createElement(VerticalView, Object.assign({}, props));
+var SwitchComponent = function SwitchComponent(props) {
+  var switchStates = useSwitchState(props);
+  return /*#__PURE__*/React.createElement(SwitchView, Object.assign({}, switchStates, props));
 };
-var Vertical = VerticalComponent;
+var Switch = SwitchComponent;
 
-var useLinkState = function useLinkState() {
-  var _useState = useState(false),
-    isHovered = _useState[0],
-    setIsHovered = _useState[1];
+var useTextAreaState = function useTextAreaState(_ref) {
+  var label = _ref.label,
+    placeholder = _ref.placeholder,
+    defaultValue = _ref.defaultValue,
+    value = _ref.value;
+  var _useState = useState(label != null ? label : placeholder),
+    hint = _useState[0],
+    setHint = _useState[1];
+  var _useState2 = useState(false),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  var _useState3 = useState(value || defaultValue || ''),
+    inputValue = _useState3[0],
+    setInputValue = _useState3[1];
+  var _useState4 = useState(false),
+    isFocused = _useState4[0],
+    setIsFocused = _useState4[1];
   return {
+    hint: hint,
+    setHint: setHint,
     isHovered: isHovered,
-    setIsHovered: setIsHovered
+    setIsHovered: setIsHovered,
+    inputValue: inputValue,
+    setInputValue: setInputValue,
+    isFocused: isFocused,
+    setIsFocused: setIsFocused
   };
 };
 
-var IconSizes$4 = {
-  xs: 12,
-  sm: 14,
-  md: 16,
-  lg: 18,
-  xl: 20,
-  '2xl': 24,
-  '3xl': 30,
-  '4xl': 36,
-  '5xl': 48,
-  '6xl': 64
-};
-
-var _excluded$c = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "colorScheme", "styles", "setIsHovered"];
-var LinkView = function LinkView(_ref) {
-  var children = _ref.children,
-    _ref$href = _ref.href,
-    href = _ref$href === void 0 ? '/' : _ref$href,
-    _ref$iconSize = _ref.iconSize,
-    iconSize = _ref$iconSize === void 0 ? 'sm' : _ref$iconSize,
-    _ref$underline = _ref.underline,
-    underline = _ref$underline === void 0 ? 'default' : _ref$underline,
+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,
+    hint = _ref.hint,
+    error = _ref.error,
+    label = _ref.label,
+    shadow = _ref.shadow,
+    inputValue = _ref.inputValue,
+    helperText = _ref.helperText,
+    placeholder = _ref.placeholder,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'sm' : _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$isHovered = _ref.isHovered,
     isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
-    _ref$isExternal = _ref.isExternal,
-    isExternal = _ref$isExternal === void 0 ? false : _ref$isExternal,
-    _ref$colorScheme = _ref.colorScheme,
-    colorScheme = _ref$colorScheme === void 0 ? '#0072F5' : _ref$colorScheme,
+    _ref$isFocused = _ref.isFocused,
+    isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
+    _ref$isEditable = _ref.isEditable,
+    isEditable = _ref$isEditable === void 0 ? false : _ref$isEditable,
+    _ref$isReadOnly = _ref.isReadOnly,
+    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isAutoFocus = _ref.isAutoFocus,
+    isAutoFocus = _ref$isAutoFocus === void 0 ? false : _ref$isAutoFocus,
+    _ref$isMultiline = _ref.isMultiline,
+    isMultiline = _ref$isMultiline === void 0 ? false : _ref$isMultiline,
+    _ref$maxRows = _ref.maxRows,
+    maxRows = _ref$maxRows === void 0 ? 3 : _ref$maxRows,
+    _ref$maxCols = _ref.maxCols,
+    maxCols = _ref$maxCols === void 0 ? 30 : _ref$maxCols,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
+    onChange = _ref.onChange,
+    onFocus = _ref.onFocus,
+    onChangeText = _ref.onChangeText,
+    _ref$setHint = _ref.setHint,
+    setHint = _ref$setHint === void 0 ? function () {} : _ref$setHint,
+    _ref$setInputValue = _ref.setInputValue,
+    setInputValue = _ref$setInputValue === void 0 ? function () {} : _ref$setInputValue,
+    _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$styles = _ref.styles,
     styles = _ref$styles === void 0 ? {
-      icon: {},
-      text: {}
+      box: {},
+      text: {},
+      label: {},
+      helperText: {},
+      field: {}
     } : _ref$styles,
-    _ref$setIsHovered = _ref.setIsHovered,
-    setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+  var isWithLabel = !!(isFocused && label);
+  useMemo(function () {
+    setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
+  }, [inputValue, isFocused, label, placeholder]);
+  var fieldStyles = Object.assign({
+    margin: 0,
+    paddingVertical: 8,
+    paddingHorizontal: 0,
+    width: '100%',
+    heigth: '100%',
+    border: 'none',
+    on: {
+      focus: {
+        outline: 'none'
+      }
+    },
+    fontSize: Typography.fontSizes[size],
+    backgroundColor: 'transparent',
+    color: isDisabled ? 'trueGray.600' : 'blueGray.700',
+    cursor: isDisabled ? 'not-allowed' : 'auto'
+  }, styles['field']);
   var handleHover = function handleHover() {
-    if (underline === 'hover') setIsHovered(true);
+    return setIsHovered(!isHovered);
   };
-  return /*#__PURE__*/React.createElement(Link$2, {
-    to: href,
-    target: isExternal ? '_blank' : '_self'
-  }, /*#__PURE__*/React.createElement(Element, Object.assign({
+  var handleFocus = function handleFocus() {
+    setIsFocused(true);
+    if (onFocus) onFocus();
+  };
+  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 {
+      setInputValue(event.target.value);
+      if (onChange) onChange(event);
+    }
+  };
+  return /*#__PURE__*/React.createElement(FieldContainer, {
+    helperText: helperText,
+    error: error,
+    styles: styles
+  }, /*#__PURE__*/React.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,
-    textDecoration: isHovered || underline === 'underline' ? 'underline !important' : 'none'
-  }, styles.text, props), /*#__PURE__*/React.createElement(Horizontal$1, {
-    gap: 3,
-    alignItems: "center",
-    wrap: "nowrap"
-  }, children, isExternal && /*#__PURE__*/React.createElement(ExternalLinkSvg, {
+    onMouseLeave: handleHover
+  }, /*#__PURE__*/React.createElement(FieldWrapper, null, isWithLabel && /*#__PURE__*/React.createElement(FieldLabel, Object.assign({
+    htmlFor: id,
     color: colorScheme,
-    size: IconSizes$4[iconSize],
-    style: styles.icon
-  }))));
+    error: error
+  }, styles), label), /*#__PURE__*/React.createElement(Element, Object.assign({
+    as: "textarea",
+    id: id,
+    name: name,
+    rows: maxRows,
+    cols: maxCols,
+    value: inputValue,
+    readOnly: isReadOnly,
+    disabled: isDisabled,
+    autoFocus: isAutoFocus,
+    editable: isEditable,
+    placeholder: hint,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onChange: handleChange,
+    multiline: isMultiline
+  }, fieldStyles, props, onChangeText && {
+    onChangeText: handleChange
+  })))));
 };
 
-var LinkComponent = function LinkComponent(props) {
-  var linkStates = useLinkState();
-  return /*#__PURE__*/React.createElement(LinkView, Object.assign({}, linkStates, props));
+var TextAreaComponent = function TextAreaComponent(props) {
+  var textAreaState = useTextAreaState(props);
+  return /*#__PURE__*/React.createElement(TextAreaView, Object.assign({}, textAreaState, props));
 };
 /**
- * Link allows users to navigate from page to page. It have a similar appearance as the hyperlink.
+ * Text Area is an component used to create a multi-line input field.
  */
-var Link = LinkComponent;
+var TextArea = TextAreaComponent;
 
 var DefaultSizes = {
   xs: 14,
@@ -3534,7 +4103,7 @@ var DefaultSpeeds = {
   slow: 300
 };
 
-var _excluded$d = ["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"];
@@ -3545,7 +4114,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$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var theme = useTheme();
   var colorStyle = theme.getColor(color);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -3701,7 +4270,7 @@ var LoaderView = function LoaderView(_ref4) {
     dotted: /*#__PURE__*/React.createElement(Dotted, Object.assign({}, style)),
     quarter: /*#__PURE__*/React.createElement(Quarter, Object.assign({}, style))
   };
-  return /*#__PURE__*/React.createElement(Center$1, Object.assign({
+  return /*#__PURE__*/React.createElement(Center, Object.assign({
     gap: 10,
     flexDirection: textPosition === 'top' || textPosition === 'bottom' ? 'column' : 'row'
   }, props), (textPosition === 'left' || textPosition === 'top') && children && /*#__PURE__*/React.createElement(View, {
@@ -3711,13 +4280,13 @@ var LoaderView = function LoaderView(_ref4) {
   }, children));
 };
 
-var LoadingComponent = function LoadingComponent(props) {
+var LoaderComponent = function LoaderComponent(props) {
   return /*#__PURE__*/React.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: {
@@ -3755,7 +4324,7 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$e = ["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"],
@@ -3771,7 +4340,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$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var setOpen = useModalStore(function (state) {
     return state.setOpen;
   });
@@ -3786,7 +4355,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
   var handleClick = function handleClick() {
     if (!isClosePrevented) onClose();
   };
-  return /*#__PURE__*/React.createElement(Center$1, {
+  return /*#__PURE__*/React.createElement(Center, {
     position: "fixed",
     top: 0,
     left: 0,
@@ -3795,7 +4364,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
     zIndex: 1000,
     onClick: handleClick,
     visibility: isOpen ? 'visible' : 'hidden'
-  }, /*#__PURE__*/React.createElement(View$1, Object.assign({
+  }, /*#__PURE__*/React.createElement(View, Object.assign({
     cursor: "pointer",
     position: "absolute",
     top: 0,
@@ -3832,7 +4401,7 @@ var ModalContainer = function ModalContainer(_ref2) {
   var handleClick = function handleClick(event) {
     return event.stopPropagation();
   };
-  return /*#__PURE__*/React.createElement(Vertical$1, Object.assign({
+  return /*#__PURE__*/React.createElement(Vertical, Object.assign({
     cursor: "default",
     overflow: "hidden",
     backgroundColor: "white",
@@ -3853,7 +4422,7 @@ var ModalHeader = function ModalHeader(_ref3) {
   var onClose = useModalStore(function (state) {
     return state.onClose;
   });
-  var buttonIcon = /*#__PURE__*/React.createElement(Button$1, {
+  var buttonIcon = /*#__PURE__*/React.createElement(Button, {
     onClick: onClose,
     colorScheme: "transparent",
     icon: /*#__PURE__*/React.createElement(CloseSvg, {
@@ -3865,7 +4434,7 @@ var ModalHeader = function ModalHeader(_ref3) {
     filter: "none",
     isAuto: true
   });
-  return /*#__PURE__*/React.createElement(Horizontal$1, Object.assign({
+  return /*#__PURE__*/React.createElement(Horizontal, Object.assign({
     justifyContent: buttonPosition === 'none' ? 'center' : 'space-between',
     alignItems: "center",
     paddingVertical: 15,
@@ -3881,7 +4450,7 @@ var ModalBody = function ModalBody(_ref4) {
     borderColor: 'rgba(250, 250, 250, 1)',
     borderStyle: 'solid'
   };
-  return /*#__PURE__*/React.createElement(View$1, Object.assign({
+  return /*#__PURE__*/React.createElement(View, Object.assign({
     overflowY: "auto",
     paddingVertical: 15,
     paddingHorizontal: 20
@@ -3890,7 +4459,7 @@ var ModalBody = function ModalBody(_ref4) {
 var ModalFooter = function ModalFooter(_ref5) {
   var children = _ref5.children,
     props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
-  return /*#__PURE__*/React.createElement(Horizontal$1, Object.assign({
+  return /*#__PURE__*/React.createElement(Horizontal, Object.assign({
     marginTop: "auto",
     alignItems: "center",
     justifyContent: "flex-end",
@@ -3913,125 +4482,5 @@ Modal.Header = ModalHeader;
 Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 
-var HeadingSizes = {
-  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$f = ["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.createElement(React.Fragment, null, typeof children === 'string' ? /*#__PURE__*/React.createElement(React.Fragment, null, isSub && /*#__PURE__*/React.createElement("sup", null, children), isSup && /*#__PURE__*/React.createElement("sup", null, children), !isSub && !isSup && /*#__PURE__*/React.createElement(React.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 = useRef(null);
-  var _useState = useState(text),
-    content = _useState[0],
-    setContent = _useState[1];
-  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.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$f);
-  var headingStyles = heading ? HeadingSizes[heading] : {};
-  var noLineBreak = isSub || isSup ? {
-    display: 'inline'
-  } : {};
-  var fontSize = Typography.fontSizes[size];
-  return /*#__PURE__*/React.createElement(Element, Object.assign({
-    role: "text",
-    fontSize: fontSize,
-    lineHeight: Typography.lineHeights[size],
-    fontStyle: isItalic ? 'italic' : 'normal',
-    fontWeight: Typography.fontWeights[weight],
-    textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
-  }, noLineBreak, headingStyles, props), isTruncated && maxLines && typeof children === 'string' ? /*#__PURE__*/React.createElement(TruncateText, {
-    text: children,
-    maxLines: maxLines
-  }) : /*#__PURE__*/React.createElement(TextContent, Object.assign({
-    isSub: isSub,
-    isSup: isSup
-  }, props), children));
-};
-
-var TextComponent = function TextComponent(props) {
-  return /*#__PURE__*/React.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;
-
-export { Button, Center, Checkbox, CountryPicker, DatePicker, Horizontal, Link, Loading, Modal, Password, Select, Switch, Text, TextArea, TextField, Vertical };
+export { Button, Center, Checkbox, CountryPicker, DatePicker, Horizontal, Link, Loader, Modal, Password, Select, Switch, Text, TextArea, TextField, Vertical };
 //# sourceMappingURL=web.esm.js.map