@app-studio/web 0.3.34 → 0.3.35

package/dist/components/Form/Password/Password/Password.props.d.ts

@@ -22,3 +22,13 @@ export interface PasswordProps extends TextFieldProps {
      */
     [x: string]: any;
 }
+export interface PasswordViewProps extends PasswordProps {
+    /**
+     * Optional prop to determine if the password is visible
+     */
+    isVisible?: boolean;
+    /**
+     * Optional callback prop to update the visibility state
+     */
+    setIsVisible?: Function;
+}

package/dist/web.cjs.development.js

@@ -9,6 +9,7 @@ var React__default = _interopDefault(React);
 var appStudio = require('app-studio');
 var reactRouterDom = require('react-router-dom');
 var format = _interopDefault(require('date-fns/format'));
+require('formik');
 var zustand = require('zustand');
 
 var useButtonState = function useButtonState() {
@@ -3145,259 +3146,6 @@ var usePasswordState = function usePasswordState() {
   };
 };
 
-var useTextFieldState = function useTextFieldState(_ref) {
-  var label = _ref.label,
-    placeholder = _ref.placeholder,
-    value = _ref.value;
-  var _useState = React.useState(label != null ? label : placeholder),
-    hint = _useState[0],
-    setHint = _useState[1];
-  var _useState2 = React.useState(false),
-    isFocused = _useState2[0],
-    setIsFocused = _useState2[1];
-  var _useState3 = React.useState(false),
-    isHovered = _useState3[0],
-    setIsHovered = _useState3[1];
-  var _useState4 = React.useState(value || ''),
-    inputValue = _useState4[0],
-    setInputValue = _useState4[1];
-  return {
-    hint: hint,
-    setHint: setHint,
-    isFocused: isFocused,
-    setIsFocused: setIsFocused,
-    isHovered: isHovered,
-    setIsHovered: setIsHovered,
-    inputValue: inputValue,
-    setInputValue: setInputValue
-  };
-};
-
-var _excluded$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__default.createElement(appStudio.Input, Object.assign({
-    type: "text"
-  }, props));
-};
-var TextFieldView = function TextFieldView(_ref) {
-  var id = _ref.id,
-    name = _ref.name,
-    label = _ref.label,
-    hint = _ref.hint,
-    inputValue = _ref.inputValue,
-    onChange = _ref.onChange,
-    leftChild = _ref.leftChild,
-    rightChild = _ref.rightChild,
-    helperText = _ref.helperText,
-    placeholder = _ref.placeholder,
-    onChangeText = _ref.onChangeText,
-    _ref$shadow = _ref.shadow,
-    shadow = _ref$shadow === void 0 ? {} : _ref$shadow,
-    _ref$styles = _ref.styles,
-    styles = _ref$styles === void 0 ? {
-      box: {},
-      field: {},
-      label: {},
-      helperText: {},
-      text: {}
-    } : _ref$styles,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'md' : _ref$size,
-    _ref$shape = _ref.shape,
-    shape = _ref$shape === void 0 ? 'default' : _ref$shape,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-    _ref$colorScheme = _ref.colorScheme,
-    colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
-    _ref$error = _ref.error,
-    error = _ref$error === void 0 ? false : _ref$error,
-    _ref$isFocused = _ref.isFocused,
-    isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
-    _ref$isHovered = _ref.isHovered,
-    isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$isReadOnly = _ref.isReadOnly,
-    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
-    _ref$isClearable = _ref.isClearable,
-    isClearable = _ref$isClearable === void 0 ? true : _ref$isClearable,
-    _ref$isAutoFocus = _ref.isAutoFocus,
-    isAutoFocus = _ref$isAutoFocus === void 0 ? false : _ref$isAutoFocus,
-    _ref$setHint = _ref.setHint,
-    setHint = _ref$setHint === void 0 ? function () {} : _ref$setHint,
-    _ref$setIsFocused = _ref.setIsFocused,
-    setIsFocused = _ref$setIsFocused === void 0 ? function () {} : _ref$setIsFocused,
-    _ref$setIsHovered = _ref.setIsHovered,
-    setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
-    _ref$setInputValue = _ref.setInputValue,
-    setInputValue = _ref$setInputValue === void 0 ? function () {} : _ref$setInputValue,
-    onFocus = _ref.onFocus,
-    _ref$onBlur = _ref.onBlur,
-    onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
-  var _useTheme = appStudio.useTheme(),
-    getColor = _useTheme.getColor;
-  var IconColor = getColor('color.blueGray.700');
-  var isWithLabel = !!(isFocused && label);
-  React.useMemo(function () {
-    setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
-  }, [inputValue, isFocused, label, placeholder]);
-  var fieldStyles = _extends({
-    margin: 0,
-    paddingVertical: 8,
-    padddingHorizontal: 0,
-    width: '100%',
-    heigth: '100%',
-    border: 'none',
-    on: {
-      focus: {
-        outline: 'none'
-      }
-    },
-    fontSize: appStudio.Typography.fontSizes[size],
-    lineHeight: appStudio.Typography.fontSizes[size],
-    backgroundColor: 'transparent',
-    color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
-    cursor: isDisabled ? 'not-allowed' : 'auto'
-  }, styles['field']);
-  var handleFocus = function handleFocus() {
-    setIsFocused(true);
-    if (onFocus) onFocus();
-  };
-  var handleHover = function handleHover() {
-    return setIsHovered(!isHovered);
-  };
-  var handleBlur = function handleBlur(event) {
-    onBlur(event);
-    setIsFocused(false);
-  };
-  var handleChange = function handleChange(event) {
-    if (typeof event === 'string') {
-      //for ios and android
-      setInputValue(event);
-      if (onChangeText) onChangeText(event);
-    } else {
-      //Web
-      setInputValue(event.target.value);
-      if (onChange) onChange(event);
-    }
-  };
-  var handleClear = function handleClear() {
-    setInputValue('');
-    //Web
-    if (onChange) {
-      onBlur({
-        target: {
-          name: name
-        }
-      });
-      onChange({
-        target: {
-          name: name,
-          value: ''
-        }
-      });
-    }
-    //for ios and android
-    if (typeof document === 'undefined' && onChangeText) onChangeText('');
-  };
-  return React__default.createElement(FieldContainer, {
-    helperText: helperText,
-    error: error,
-    styles: styles
-  }, React__default.createElement(FieldContent, {
-    label: label,
-    size: size,
-    error: error,
-    shape: shape,
-    styles: styles,
-    shadow: shadow,
-    variant: variant,
-    value: inputValue,
-    color: colorScheme,
-    isHovered: isHovered,
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly,
-    isFocused: isFocused,
-    isWithLabel: isWithLabel,
-    colorScheme: colorScheme,
-    onMouseEnter: handleHover,
-    onMouseLeave: handleHover
-  }, leftChild, React__default.createElement(FieldWrapper, null, isWithLabel && React__default.createElement(FieldLabel, Object.assign({
-    htmlFor: id,
-    color: colorScheme,
-    error: error
-  }, styles), label), React__default.createElement(TextFieldInput, Object.assign({
-    id: id,
-    name: name,
-    value: inputValue,
-    readOnly: isReadOnly,
-    disabled: isDisabled,
-    autoFocus: isAutoFocus,
-    placeholder: hint,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    autoComplete: "off"
-  }, fieldStyles, props, {
-    onChange: handleChange
-  }, onChangeText && {
-    onChangeText: handleChange
-  }))), (rightChild || isClearable && inputValue) && React__default.createElement(FieldIcons, null, rightChild && React__default.createElement(React__default.Fragment, null, rightChild), isClearable && inputValue && !isReadOnly && !isDisabled && React__default.createElement(CloseSvg, {
-    size: appStudio.Typography.fontSizes[size],
-    color: IconColor,
-    onClick: handleClear
-  }))));
-};
-
-var TextFieldComponent = function TextFieldComponent(props) {
-  var textFieldStates = useTextFieldState(props);
-  return React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, props));
-};
-/**
- * TextField is used to capture text data from users.
- */
-var TextField = TextFieldComponent;
-
-var _excluded$p = ["name", "visibleIcon", "hiddenIcon", "isDisabled"];
-var PasswordView = function PasswordView(_ref) {
-  var name = _ref.name,
-    _ref$visibleIcon = _ref.visibleIcon,
-    visibleIcon = _ref$visibleIcon === void 0 ? React__default.createElement(OpenEyeSvg, {
-      size: 14
-    }) : _ref$visibleIcon,
-    _ref$hiddenIcon = _ref.hiddenIcon,
-    hiddenIcon = _ref$hiddenIcon === void 0 ? React__default.createElement(CloseEyeSvg, {
-      size: 14
-    }) : _ref$hiddenIcon,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
-  var _useState = React.useState(false),
-    visible = _useState[0],
-    setVisible = _useState[1];
-  return React__default.createElement(TextField, Object.assign({
-    name: name,
-    type: visible ? 'text' : 'password',
-    rightChild: React__default.createElement(View, {
-      onClick: function onClick() {
-        if (!isDisabled) {
-          setVisible(!visible);
-        }
-      }
-    }, visible ? visibleIcon : hiddenIcon),
-    isClearable: false
-  }, props));
-};
-
-var PasswordComponent = function PasswordComponent(props) {
-  var passwordState = usePasswordState();
-  return React__default.createElement(PasswordView, Object.assign({}, passwordState, props));
-};
-/**
- * To allow users to securely enter sensitive information
- */
-var Password = PasswordComponent;
-
 var useSelectState = function useSelectState(_ref) {
   var placeholder = _ref.placeholder,
     isMulti = _ref.isMulti,
@@ -3444,7 +3192,7 @@ var IconSizes$4 = {
   xl: 16
 };
 
-var _excluded$q = ["isHovered", "setIsHovered", "option", "size", "callback"],
+var _excluded$o = ["isHovered", "setIsHovered", "option", "size", "callback"],
   _excluded2 = ["id", "name", "selected", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
   _excluded3 = ["option", "size", "removeOption"],
   _excluded4 = ["id", "name", "label", "selected", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "colorScheme", "shape", "variant", "styles", "onChange", "setHide", "setSelected", "setIsHovered", "setIsFocused"];
@@ -3456,7 +3204,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$q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   var handleOptionClick = function handleOptionClick(option) {
     return callback(option);
   };
@@ -3926,7 +3674,7 @@ var SliderPadding = {
   }
 };
 
-var _excluded$r = ["id", "name", "inActiveChild", "activeChild", "shadow", "size", "colorScheme", "on", "isHovered", "isChecked", "isDisabled", "isReadOnly", "onChange", "onValueChange", "setOn", "setIsHovered", "styles"];
+var _excluded$p = ["id", "name", "inActiveChild", "activeChild", "shadow", "size", "colorScheme", "on", "isHovered", "isChecked", "isDisabled", "isReadOnly", "onChange", "onValueChange", "setOn", "setIsHovered", "styles"];
 var SwitchContent = function SwitchContent(props) {
   return React__default.createElement(appStudio.Input, Object.assign({
     type: "checkbox"
@@ -3962,7 +3710,7 @@ var SwitchView = function SwitchView(_ref) {
       slider: {},
       circle: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   var handleToggle = function handleToggle(event) {
     if (!isReadOnly) {
       setOn(!on);
@@ -4038,7 +3786,7 @@ var useTextAreaState = function useTextAreaState(_ref) {
   };
 };
 
-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 _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,
@@ -4096,7 +3844,7 @@ var TextAreaView = function TextAreaView(_ref) {
       helperText: {},
       field: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   var isWithLabel = !!(isFocused && label);
   React.useMemo(function () {
     setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
@@ -4195,6 +3943,244 @@ var TextAreaComponent = function TextAreaComponent(props) {
  */
 var TextArea = TextAreaComponent;
 
+var useTextFieldState = function useTextFieldState(_ref) {
+  var label = _ref.label,
+    placeholder = _ref.placeholder,
+    value = _ref.value;
+  var _useState = React.useState(label != null ? label : placeholder),
+    hint = _useState[0],
+    setHint = _useState[1];
+  var _useState2 = React.useState(false),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+  var _useState3 = React.useState(false),
+    isHovered = _useState3[0],
+    setIsHovered = _useState3[1];
+  var _useState4 = React.useState(value || ''),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
+  return {
+    hint: hint,
+    setHint: setHint,
+    isFocused: isFocused,
+    setIsFocused: setIsFocused,
+    isHovered: isHovered,
+    setIsHovered: setIsHovered,
+    inputValue: inputValue,
+    setInputValue: setInputValue
+  };
+};
+
+var _excluded$r = ["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__default.createElement(appStudio.Input, Object.assign({
+    type: "text"
+  }, props));
+};
+var TextFieldView = function TextFieldView(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    label = _ref.label,
+    hint = _ref.hint,
+    inputValue = _ref.inputValue,
+    onChange = _ref.onChange,
+    leftChild = _ref.leftChild,
+    rightChild = _ref.rightChild,
+    helperText = _ref.helperText,
+    placeholder = _ref.placeholder,
+    onChangeText = _ref.onChangeText,
+    _ref$shadow = _ref.shadow,
+    shadow = _ref$shadow === void 0 ? {} : _ref$shadow,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      box: {},
+      field: {},
+      label: {},
+      helperText: {},
+      text: {}
+    } : _ref$styles,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'default' : _ref$shape,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    _ref$colorScheme = _ref.colorScheme,
+    colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    _ref$isFocused = _ref.isFocused,
+    isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
+    _ref$isHovered = _ref.isHovered,
+    isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isReadOnly = _ref.isReadOnly,
+    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
+    _ref$isClearable = _ref.isClearable,
+    isClearable = _ref$isClearable === void 0 ? true : _ref$isClearable,
+    _ref$isAutoFocus = _ref.isAutoFocus,
+    isAutoFocus = _ref$isAutoFocus === void 0 ? false : _ref$isAutoFocus,
+    _ref$setHint = _ref.setHint,
+    setHint = _ref$setHint === void 0 ? function () {} : _ref$setHint,
+    _ref$setIsFocused = _ref.setIsFocused,
+    setIsFocused = _ref$setIsFocused === void 0 ? function () {} : _ref$setIsFocused,
+    _ref$setIsHovered = _ref.setIsHovered,
+    setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
+    _ref$setInputValue = _ref.setInputValue,
+    setInputValue = _ref$setInputValue === void 0 ? function () {} : _ref$setInputValue,
+    onFocus = _ref.onFocus,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+  var _useTheme = appStudio.useTheme(),
+    getColor = _useTheme.getColor;
+  var IconColor = getColor('color.blueGray.700');
+  var isWithLabel = !!(isFocused && label);
+  React.useMemo(function () {
+    setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
+  }, [inputValue, isFocused, label, placeholder]);
+  var fieldStyles = _extends({
+    margin: 0,
+    paddingVertical: 8,
+    padddingHorizontal: 0,
+    width: '100%',
+    heigth: '100%',
+    border: 'none',
+    on: {
+      focus: {
+        outline: 'none'
+      }
+    },
+    fontSize: appStudio.Typography.fontSizes[size],
+    lineHeight: appStudio.Typography.fontSizes[size],
+    backgroundColor: 'transparent',
+    color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
+    cursor: isDisabled ? 'not-allowed' : 'auto'
+  }, styles['field']);
+  var handleFocus = function handleFocus() {
+    setIsFocused(true);
+    if (onFocus) onFocus();
+  };
+  var handleHover = function handleHover() {
+    return setIsHovered(!isHovered);
+  };
+  var handleBlur = function handleBlur(event) {
+    onBlur(event);
+    setIsFocused(false);
+  };
+  var handleChange = function handleChange(event) {
+    if (typeof event === 'string') {
+      //for ios and android
+      setInputValue(event);
+      if (onChangeText) onChangeText(event);
+    } else {
+      //Web
+      setInputValue(event.target.value);
+      if (onChange) onChange(event);
+    }
+  };
+  var handleClear = function handleClear() {
+    setInputValue('');
+    //Web
+    if (onChange) {
+      onBlur({
+        target: {
+          name: name
+        }
+      });
+      onChange({
+        target: {
+          name: name,
+          value: ''
+        }
+      });
+    }
+    //for ios and android
+    if (typeof document === 'undefined' && onChangeText) onChangeText('');
+  };
+  return React__default.createElement(FieldContainer, {
+    helperText: helperText,
+    error: error,
+    styles: styles
+  }, React__default.createElement(FieldContent, {
+    label: label,
+    size: size,
+    error: error,
+    shape: shape,
+    styles: styles,
+    shadow: shadow,
+    variant: variant,
+    value: inputValue,
+    color: colorScheme,
+    isHovered: isHovered,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isFocused: isFocused,
+    isWithLabel: isWithLabel,
+    colorScheme: colorScheme,
+    onMouseEnter: handleHover,
+    onMouseLeave: handleHover
+  }, leftChild, React__default.createElement(FieldWrapper, null, isWithLabel && React__default.createElement(FieldLabel, Object.assign({
+    htmlFor: id,
+    color: colorScheme,
+    error: error
+  }, styles), label), React__default.createElement(TextFieldInput, Object.assign({
+    id: id,
+    name: name,
+    value: inputValue,
+    readOnly: isReadOnly,
+    disabled: isDisabled,
+    autoFocus: isAutoFocus,
+    placeholder: hint,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    autoComplete: "off"
+  }, fieldStyles, props, {
+    onChange: handleChange
+  }, onChangeText && {
+    onChangeText: handleChange
+  }))), (rightChild || isClearable && inputValue) && React__default.createElement(FieldIcons, null, rightChild && React__default.createElement(React__default.Fragment, null, rightChild), isClearable && inputValue && !isReadOnly && !isDisabled && React__default.createElement(CloseSvg, {
+    size: appStudio.Typography.fontSizes[size],
+    color: IconColor,
+    onClick: handleClear
+  }))));
+};
+
+var TextFieldComponent = function TextFieldComponent(props) {
+  var textFieldStates = useTextFieldState(props);
+  return React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, props));
+};
+/**
+ * TextField is used to capture text data from users.
+ */
+var TextField = TextFieldComponent;
+
+var PasswordComponent = function PasswordComponent(props) {
+  var passwordState = usePasswordState();
+  return React__default.createElement(TextField, Object.assign({
+    type: passwordState.isVisible ? 'text' : 'password',
+    isClearable: false,
+    visibleIcon: React__default.createElement(OpenEyeSvg, {
+      size: 14
+    }),
+    hiddenIcon: React__default.createElement(CloseEyeSvg, {
+      size: 14
+    }),
+    rightChild: React__default.createElement(appStudio.View, {
+      onClick: function onClick() {
+        if (!props.isDisabled) {
+          passwordState.setIsVisible(!props.isVisible);
+        }
+      }
+    }, passwordState.isVisible ? props.visibleIcon : props.hiddenIcon)
+  }, props));
+};
+/**
+ * To allow users to securely enter sensitive information
+ */
+var Password = PasswordComponent;
+
 var DefaultSizes = {
   xs: 14,
   sm: 18,
@@ -4213,7 +4199,7 @@ var DefaultSpeeds = {
   slow: 300
 };
 
-var _excluded$t = ["size", "speed", "color"],
+var _excluded$s = ["size", "speed", "color"],
   _excluded2$1 = ["size", "speed", "color"],
   _excluded3$1 = ["size", "speed", "color"],
   _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
@@ -4224,7 +4210,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$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var theme = appStudio.useTheme();
   var colorStyle = theme.getColor(color);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -4474,7 +4460,7 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$u = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+var _excluded$t = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
   _excluded2$2 = ["children", "shadow", "isFullScreen", "shape"],
   _excluded3$2 = ["children", "buttonColor", "iconSize", "buttonPosition"],
   _excluded4$2 = ["children"],
@@ -4490,7 +4476,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$u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var handleClick = function handleClick() {
     if (!isClosePrevented) onClose();
   };
@@ -4647,12 +4633,12 @@ Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.Layout = ModalLayout;
 
-var _excluded$v = ["src", "color"],
+var _excluded$u = ["src", "color"],
   _excluded2$3 = ["path"];
 var FileSVG = function FileSVG(_ref) {
   var src = _ref.src,
     color = _ref.color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   var _useTheme = appStudio.useTheme(),
     getColor = _useTheme.getColor;
   var Colorprops = color ? {