@app-studio/web 0.3.28 → 0.3.30

package/dist/web.esm.js

@@ -2,7 +2,6 @@ import React, { useState, useRef, useEffect, useMemo, useCallback, Fragment } fr
 import { View as View$1, Element, Typography, useTheme, Input, Image } from 'app-studio';
 import { Link as Link$1 } from 'react-router-dom';
 import format from 'date-fns/format';
-import { OpenEyeSvg, CloseEyeSvg } from 'src/components/Svg';
 import { create } from 'zustand';
 
 var useButtonState = function useButtonState() {
@@ -277,12 +276,43 @@ var CloseSvg = function CloseSvg(_ref) {
 };
 
 var _excluded$6 = ["size", "color"];
+var CloseEyeSvg = function CloseEyeSvg(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 64 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#2F4858' : _ref$color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  return React.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, React.createElement("svg", Object.assign({
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), React.createElement("g", {
+    id: "SVGRepo_bgCarrier",
+    strokeWidth: "0"
+  }), React.createElement("g", {
+    id: "SVGRepo_tracerCarrier",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), React.createElement("g", {
+    id: "SVGRepo_iconCarrier"
+  }, React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L14.032 8.55382C13.4365 8.20193 12.7418 8 12 8C9.79086 8 8 9.79086 8 12C8 12.7418 8.20193 13.4365 8.55382 14.032L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L9.96803 15.4462C10.5635 15.7981 11.2582 16 12 16C14.2091 16 16 14.2091 16 12C16 11.2582 15.7981 10.5635 15.4462 9.96803L19.7071 5.70711ZM12.518 10.0677C12.3528 10.0236 12.1792 10 12 10C10.8954 10 10 10.8954 10 12C10 12.1792 10.0236 12.3528 10.0677 12.518L12.518 10.0677ZM11.482 13.9323L13.9323 11.482C13.9764 11.6472 14 11.8208 14 12C14 13.1046 13.1046 14 12 14C11.8208 14 11.6472 13.9764 11.482 13.9323ZM15.7651 4.8207C14.6287 4.32049 13.3675 4 12 4C9.14754 4 6.75717 5.39462 4.99812 6.90595C3.23268 8.42276 2.00757 10.1376 1.46387 10.9698C1.05306 11.5985 1.05306 12.4015 1.46387 13.0302C1.92276 13.7326 2.86706 15.0637 4.21194 16.3739L5.62626 14.9596C4.4555 13.8229 3.61144 12.6531 3.18002 12C3.6904 11.2274 4.77832 9.73158 6.30147 8.42294C7.87402 7.07185 9.81574 6 12 6C12.7719 6 13.5135 6.13385 14.2193 6.36658L15.7651 4.8207ZM12 18C11.2282 18 10.4866 17.8661 9.78083 17.6334L8.23496 19.1793C9.37136 19.6795 10.6326 20 12 20C14.8525 20 17.2429 18.6054 19.002 17.0941C20.7674 15.5772 21.9925 13.8624 22.5362 13.0302C22.947 12.4015 22.947 11.5985 22.5362 10.9698C22.0773 10.2674 21.133 8.93627 19.7881 7.62611L18.3738 9.04043C19.5446 10.1771 20.3887 11.3469 20.8201 12C20.3097 12.7726 19.2218 14.2684 17.6986 15.5771C16.1261 16.9282 14.1843 18 12 18Z",
+    fill: color
+  }))));
+};
+
+var _excluded$7 = ["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);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   return React.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -311,13 +341,13 @@ var ExternalLinkSvg = function ExternalLinkSvg(_ref) {
   }))));
 };
 
-var _excluded$7 = ["size", "color"];
+var _excluded$8 = ["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);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   return React.createElement(Center, {
     width: size + "px",
     height: size + "px"
@@ -343,6 +373,37 @@ var IndeterminateSvg = function IndeterminateSvg(_ref) {
   }), ' ')));
 };
 
+var _excluded$9 = ["size", "color"];
+var OpenEyeSvg = function OpenEyeSvg(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 64 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#2F4858' : _ref$color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+  return React.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, React.createElement("svg", Object.assign({
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), React.createElement("g", {
+    id: "SVGRepo_bgCarrier",
+    strokeWidth: "0"
+  }), React.createElement("g", {
+    id: "SVGRepo_tracerCarrier",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), React.createElement("g", {
+    id: "SVGRepo_iconCarrier"
+  }, React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.30147 15.5771C4.77832 14.2684 3.6904 12.7726 3.18002 12C3.6904 11.2274 4.77832 9.73158 6.30147 8.42294C7.87402 7.07185 9.81574 6 12 6C14.1843 6 16.1261 7.07185 17.6986 8.42294C19.2218 9.73158 20.3097 11.2274 20.8201 12C20.3097 12.7726 19.2218 14.2684 17.6986 15.5771C16.1261 16.9282 14.1843 18 12 18C9.81574 18 7.87402 16.9282 6.30147 15.5771ZM12 4C9.14754 4 6.75717 5.39462 4.99812 6.90595C3.23268 8.42276 2.00757 10.1376 1.46387 10.9698C1.05306 11.5985 1.05306 12.4015 1.46387 13.0302C2.00757 13.8624 3.23268 15.5772 4.99812 17.0941C6.75717 18.6054 9.14754 20 12 20C14.8525 20 17.2429 18.6054 19.002 17.0941C20.7674 15.5772 21.9925 13.8624 22.5362 13.0302C22.947 12.4015 22.947 11.5985 22.5362 10.9698C21.9925 10.1376 20.7674 8.42276 19.002 6.90595C17.2429 5.39462 14.8525 4 12 4ZM10 12C10 10.8954 10.8955 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8955 14 10 13.1046 10 12ZM12 8C9.7909 8 8.00004 9.79086 8.00004 12C8.00004 14.2091 9.7909 16 12 16C14.2092 16 16 14.2091 16 12C16 9.79086 14.2092 8 12 8Z",
+    fill: color
+  }))));
+};
+
 var IconSizes = {
   xs: 12,
   sm: 14,
@@ -356,7 +417,7 @@ var IconSizes = {
   '6xl': 64
 };
 
-var _excluded$8 = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "colorScheme", "styles", "setIsHovered"];
+var _excluded$a = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "colorScheme", "styles", "setIsHovered"];
 var LinkView = function LinkView(_ref) {
   var children = _ref.children,
     _ref$href = _ref.href,
@@ -378,7 +439,7 @@ var LinkView = function LinkView(_ref) {
     } : _ref$styles,
     _ref$setIsHovered = _ref.setIsHovered,
     setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var handleHover = function handleHover() {
     if (underline === 'hover') setIsHovered(true);
   };
@@ -500,7 +561,7 @@ var IconSizes$1 = {
   }
 };
 
-var _excluded$9 = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoader", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick"];
+var _excluded$b = ["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,
@@ -530,7 +591,7 @@ 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$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var isActive = !(isDisabled || isLoader);
   var defaultNativeProps = {
     disabled: !isActive
@@ -659,7 +720,7 @@ var HeadingSizes = {
   }
 };
 
-var _excluded$a = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
+var _excluded$c = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
 var LabelView = function LabelView(_ref) {
   var children = _ref.children,
     heading = _ref.heading,
@@ -673,7 +734,7 @@ var LabelView = function LabelView(_ref) {
     weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'sm' : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var headingStyles = heading ? HeadingSizes[heading] : {};
   return React.createElement(Element, Object.assign({
     as: "label",
@@ -745,7 +806,7 @@ var IconSizes$2 = {
   '6xl': 60
 };
 
-var _excluded$b = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles"];
+var _excluded$d = ["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,
@@ -780,7 +841,7 @@ var CheckboxView = function CheckboxView(_ref) {
       checkbox: {},
       label: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
@@ -2324,7 +2385,7 @@ var useCountryPickerState = function useCountryPickerState(_ref) {
   };
 };
 
-var _excluded$c = ["children", "wrap", "justify", "isReversed"];
+var _excluded$e = ["children", "wrap", "justify", "isReversed"];
 var VerticalView = function VerticalView(_ref) {
   var children = _ref.children,
     _ref$wrap = _ref.wrap,
@@ -2333,7 +2394,7 @@ var VerticalView = function VerticalView(_ref) {
     justify = _ref$justify === void 0 ? 'flex-start' : _ref$justify,
     _ref$isReversed = _ref.isReversed,
     isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   return React.createElement(View$1, Object.assign({
     display: "flex",
     flexWrap: wrap,
@@ -2383,7 +2444,7 @@ var HeadingSizes$1 = {
   }
 };
 
-var _excluded$d = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "isTruncated", "weight", "size"];
+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,
@@ -2440,7 +2501,7 @@ var TextView = function TextView(_ref3) {
     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);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$f);
   var headingStyles = heading ? HeadingSizes$1[heading] : {};
   var noLineBreak = isSub || isSup ? {
     display: 'inline'
@@ -2470,14 +2531,14 @@ var TextComponent = function TextComponent(props) {
  */
 var Text = TextComponent;
 
-var _excluded$e = ["children", "styles"];
+var _excluded$g = ["children", "styles"];
 var HelperText = function HelperText(_ref) {
   var children = _ref.children,
     _ref$styles = _ref.styles,
     styles = _ref$styles === void 0 ? {
       helperText: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   return React.createElement(Text, Object.assign({
     size: "xs",
     marginVertical: 0,
@@ -2486,14 +2547,14 @@ var HelperText = function HelperText(_ref) {
   }, styles['helperText'], props), children);
 };
 
-var _excluded$f = ["children", "helperText", "error", "styles"];
+var _excluded$h = ["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);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   return React.createElement(Vertical, Object.assign({
     gap: 5,
     position: "relative"
@@ -2552,7 +2613,7 @@ var PaddingWithoutLabel = {
   paddingRight: 36
 };
 
-var _excluded$g = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
+var _excluded$i = ["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,
@@ -2580,7 +2641,7 @@ var FieldContent = function FieldContent(_ref) {
     styles = _ref$styles === void 0 ? {
       pickerBox: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   var isInteractive = (isHovered || isFocused) && !isDisabled;
   var color = error ? 'error' : isInteractive ? colorScheme : 'midgray';
   return React.createElement(Horizontal, Object.assign({
@@ -2600,10 +2661,10 @@ var FieldContent = function FieldContent(_ref) {
   }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], styles['box'], props), children);
 };
 
-var _excluded$h = ["children"];
+var _excluded$j = ["children"];
 var FieldIcons = function FieldIcons(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   return React.createElement(Center, Object.assign({
     gap: 10,
     top: "50%",
@@ -2615,7 +2676,7 @@ var FieldIcons = function FieldIcons(_ref) {
   }, props), children);
 };
 
-var _excluded$i = ["children", "size", "error", "color", "styles"];
+var _excluded$k = ["children", "size", "error", "color", "styles"];
 var FieldLabel = function FieldLabel(_ref) {
   var children = _ref.children,
     _ref$size = _ref.size,
@@ -2628,7 +2689,7 @@ var FieldLabel = function FieldLabel(_ref) {
     styles = _ref$styles === void 0 ? {
       label: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   return React.createElement(Label, Object.assign({
     top: 6,
     zIndex: 1000,
@@ -2641,10 +2702,10 @@ var FieldLabel = function FieldLabel(_ref) {
   }, styles['label'], props), children);
 };
 
-var _excluded$j = ["children"];
+var _excluded$l = ["children"];
 var FieldWrapper = function FieldWrapper(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   return React.createElement(Vertical, Object.assign({
     width: "100%"
   }, props), children);
@@ -2658,7 +2719,7 @@ var IconSizes$3 = {
   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 _excluded$m = ["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 React.createElement(Element, Object.assign({
     as: "ul"
@@ -2798,7 +2859,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
       helperText: {},
       box: {}
     } : _ref3$styles,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$m);
   var _useTheme = useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -2936,7 +2997,7 @@ var useDatePickerState = function useDatePickerState() {
   };
 };
 
-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 _excluded$n = ["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 React.createElement(Input, Object.assign({
     type: "date"
@@ -2984,7 +3045,7 @@ var DatePickerView = function DatePickerView(_ref) {
     setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
     onChange = _ref.onChange,
     onChangeText = _ref.onChangeText,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   var isWithLabel = !!(isFocused && label);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
@@ -3105,7 +3166,7 @@ var useTextFieldState = function useTextFieldState(_ref) {
   };
 };
 
-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 _excluded$o = ["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 React.createElement(Input, Object.assign({
     type: "text"
@@ -3166,7 +3227,7 @@ var TextFieldView = function TextFieldView(_ref) {
     onFocus = _ref.onFocus,
     _ref$onBlur = _ref.onBlur,
     onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   var _useTheme = useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -3290,7 +3351,7 @@ var TextFieldComponent = function TextFieldComponent(props) {
  */
 var TextField = TextFieldComponent;
 
-var _excluded$n = ["name", "visibleIcon", "hiddenIcon", "isDisabled", "isVisible", "setIsVisible"];
+var _excluded$p = ["name", "visibleIcon", "hiddenIcon", "isDisabled", "isVisible"];
 var PasswordView = function PasswordView(_ref) {
   var name = _ref.name,
     _ref$visibleIcon = _ref.visibleIcon,
@@ -3304,16 +3365,19 @@ var PasswordView = function PasswordView(_ref) {
     _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);
+    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+  var _useState = useState(isVisible),
+    visible = _useState[0],
+    setVisible = _useState[1];
   return React.createElement(TextField, Object.assign({
     name: name,
     type: isVisible ? 'text' : 'password',
     rightChild: React.createElement(View, {
       onClick: function onClick() {
-        if (!isDisabled) setIsVisible(!isVisible);
+        if (!isDisabled) {
+          setVisible(!visible);
+        }
       }
     }, isVisible ? visibleIcon : hiddenIcon),
     isClearable: false
@@ -3375,7 +3439,7 @@ var IconSizes$4 = {
   xl: 16
 };
 
-var _excluded$o = ["isHovered", "setIsHovered", "option", "size", "callback"],
+var _excluded$q = ["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"];
@@ -3387,7 +3451,7 @@ var Item = function Item(_ref) {
     size = _ref$size === void 0 ? 'md' : _ref$size,
     _ref$callback = _ref.callback,
     callback = _ref$callback === void 0 ? function () {} : _ref$callback,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   var handleOptionClick = function handleOptionClick(option) {
     return callback(option);
   };
@@ -3857,7 +3921,7 @@ var SliderPadding = {
   }
 };
 
-var _excluded$p = ["id", "name", "inActiveChild", "activeChild", "shadow", "size", "colorScheme", "on", "isHovered", "isChecked", "isDisabled", "isReadOnly", "onChange", "onValueChange", "setOn", "setIsHovered", "styles"];
+var _excluded$r = ["id", "name", "inActiveChild", "activeChild", "shadow", "size", "colorScheme", "on", "isHovered", "isChecked", "isDisabled", "isReadOnly", "onChange", "onValueChange", "setOn", "setIsHovered", "styles"];
 var SwitchContent = function SwitchContent(props) {
   return React.createElement(Input, Object.assign({
     type: "checkbox"
@@ -3893,7 +3957,7 @@ var SwitchView = function SwitchView(_ref) {
       slider: {},
       circle: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var handleToggle = function handleToggle(event) {
     if (!isReadOnly) {
       setOn(!on);
@@ -3969,7 +4033,7 @@ var useTextAreaState = function useTextAreaState(_ref) {
   };
 };
 
-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 _excluded$s = ["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,
@@ -4027,7 +4091,7 @@ var TextAreaView = function TextAreaView(_ref) {
       helperText: {},
       field: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var isWithLabel = !!(isFocused && label);
   useMemo(function () {
     setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
@@ -4144,7 +4208,7 @@ var DefaultSpeeds = {
   slow: 300
 };
 
-var _excluded$r = ["size", "speed", "color"],
+var _excluded$t = ["size", "speed", "color"],
   _excluded2$1 = ["size", "speed", "color"],
   _excluded3$1 = ["size", "speed", "color"],
   _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
@@ -4155,7 +4219,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$r);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var theme = useTheme();
   var colorStyle = theme.getColor(color);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -4405,7 +4469,7 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$s = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+var _excluded$u = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
   _excluded2$2 = ["children", "shadow", "isFullScreen", "shape"],
   _excluded3$2 = ["children", "buttonColor", "iconSize", "buttonPosition"],
   _excluded4$2 = ["children"],
@@ -4421,7 +4485,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$s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   var handleClick = function handleClick() {
     if (!isClosePrevented) onClose();
   };
@@ -4578,12 +4642,12 @@ Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.Layout = ModalLayout;
 
-var _excluded$t = ["src", "color"],
+var _excluded$v = ["src", "color"],
   _excluded2$3 = ["path"];
 var FileSVG = function FileSVG(_ref) {
   var src = _ref.src,
     color = _ref.color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var _useTheme = useTheme(),
     getColor = _useTheme.getColor;
   var Colorprops = color ? {