@app-studio/web 0.3.35 → 0.3.36

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

@@ -1,5 +1,14 @@
 /// <reference types="react" />
-export declare const usePasswordState: () => {
+import { PasswordProps } from './Password.props';
+export declare const usePasswordState: (props: PasswordProps) => {
+    hint: string | undefined;
+    setHint: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    isFocused: boolean;
+    setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    isHovered: boolean;
+    setIsHovered: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    inputValue: string;
+    setInputValue: import("react").Dispatch<import("react").SetStateAction<string>>;
     isVisible: boolean;
     setIsVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };

package/dist/web.cjs.development.js

@@ -9,7 +9,6 @@ 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() {
@@ -3136,15 +3135,253 @@ var DatePickerComponent = function DatePickerComponent(props) {
  */
 var DatePicker = DatePickerComponent;
 
-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 usePasswordState = function usePasswordState(props) {
+  var textFieldStates = useTextFieldState(props);
   var _useState = React.useState(false),
     isVisible = _useState[0],
     setIsVisible = _useState[1];
-  return {
+  return _extends({
     isVisible: isVisible,
     setIsVisible: setIsVisible
+  }, textFieldStates);
+};
+
+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 _excluded$p = ["visibleIcon", "hiddenIcon"],
+  _excluded2 = ["isVisible", "setIsVisible"];
+var PasswordComponent = function PasswordComponent(_ref) {
+  var _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,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+  var _usePasswordState = usePasswordState(props),
+    isVisible = _usePasswordState.isVisible,
+    setIsVisible = _usePasswordState.setIsVisible,
+    passwordState = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2);
+  return React__default.createElement(TextFieldView, Object.assign({
+    type: isVisible ? 'text' : 'password',
+    isClearable: false,
+    rightChild: React__default.createElement(appStudio.View, {
+      onClick: function onClick() {
+        if (!props.isDisabled) {
+          setIsVisible(!isVisible);
+        }
+      }
+    }, isVisible ? visibleIcon : hiddenIcon)
+  }, passwordState, props));
 };
+/**
+ * To allow users to securely enter sensitive information
+ */
+var Password = PasswordComponent;
 
 var useSelectState = function useSelectState(_ref) {
   var placeholder = _ref.placeholder,
@@ -3192,8 +3429,8 @@ var IconSizes$4 = {
   xl: 16
 };
 
-var _excluded$o = ["isHovered", "setIsHovered", "option", "size", "callback"],
-  _excluded2 = ["id", "name", "selected", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
+var _excluded$q = ["isHovered", "setIsHovered", "option", "size", "callback"],
+  _excluded2$1 = ["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) {
@@ -3204,7 +3441,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);
   };
@@ -3274,7 +3511,7 @@ var HiddenSelect = function HiddenSelect(_ref3) {
     isReadOnly = _ref3$isReadOnly === void 0 ? false : _ref3$isReadOnly,
     _ref3$options = _ref3.options,
     options = _ref3$options === void 0 ? [] : _ref3$options,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
   var handleChange = function handleChange(event) {
     if (onChange) onChange(event);
   };
@@ -3674,7 +3911,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__default.createElement(appStudio.Input, Object.assign({
     type: "checkbox"
@@ -3710,7 +3947,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);
@@ -3786,7 +4023,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,
@@ -3844,7 +4081,7 @@ var TextAreaView = function TextAreaView(_ref) {
       helperText: {},
       field: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var isWithLabel = !!(isFocused && label);
   React.useMemo(function () {
     setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
@@ -3943,210 +4180,6 @@ var TextAreaComponent = function TextAreaComponent(props) {
  */
 var TextArea = TextAreaComponent;
 
-var useTextFieldState = function useTextFieldState(_ref) {
-  var label = _ref.label,
-    placeholder = _ref.placeholder,
-    value = _ref.value;
-  var _useState = React.useState(label != null ? label : placeholder),
-    hint = _useState[0],
-    setHint = _useState[1];
-  var _useState2 = React.useState(false),
-    isFocused = _useState2[0],
-    setIsFocused = _useState2[1];
-  var _useState3 = React.useState(false),
-    isHovered = _useState3[0],
-    setIsHovered = _useState3[1];
-  var _useState4 = React.useState(value || ''),
-    inputValue = _useState4[0],
-    setInputValue = _useState4[1];
-  return {
-    hint: hint,
-    setHint: setHint,
-    isFocused: isFocused,
-    setIsFocused: setIsFocused,
-    isHovered: isHovered,
-    setIsHovered: setIsHovered,
-    inputValue: inputValue,
-    setInputValue: setInputValue
-  };
-};
-
-var _excluded$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));
@@ -4156,31 +4189,6 @@ var TextFieldComponent = function TextFieldComponent(props) {
  */
 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,
@@ -4199,8 +4207,8 @@ var DefaultSpeeds = {
   slow: 300
 };
 
-var _excluded$s = ["size", "speed", "color"],
-  _excluded2$1 = ["size", "speed", "color"],
+var _excluded$t = ["size", "speed", "color"],
+  _excluded2$2 = ["size", "speed", "color"],
   _excluded3$1 = ["size", "speed", "color"],
   _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
 var DefaultSpinner = function DefaultSpinner(_ref) {
@@ -4210,7 +4218,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$s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var theme = appStudio.useTheme();
   var colorStyle = theme.getColor(color);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -4260,7 +4268,7 @@ var Dotted = function Dotted(_ref2) {
     speed = _ref2$speed === void 0 ? 'normal' : _ref2$speed,
     _ref2$color = _ref2.color,
     color = _ref2$color === void 0 ? 'theme.loading' : _ref2$color,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
   var theme = appStudio.useTheme();
   var colorStyle = theme.getColor(color);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -4460,8 +4468,8 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$t = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
-  _excluded2$2 = ["children", "shadow", "isFullScreen", "shape"],
+var _excluded$u = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+  _excluded2$3 = ["children", "shadow", "isFullScreen", "shape"],
   _excluded3$2 = ["children", "buttonColor", "iconSize", "buttonPosition"],
   _excluded4$2 = ["children"],
   _excluded5 = ["children"];
@@ -4476,7 +4484,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$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   var handleClick = function handleClick() {
     if (!isClosePrevented) onClose();
   };
@@ -4510,7 +4518,7 @@ var ModalContainer = function ModalContainer(_ref2) {
     isFullScreen = _ref2$isFullScreen === void 0 ? false : _ref2$isFullScreen,
     _ref2$shape = _ref2.shape,
     shape = _ref2$shape === void 0 ? 'rounded' : _ref2$shape,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
   var defaultShadow = typeof document !== undefined ? {
     boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.3)'
   } : {
@@ -4633,12 +4641,12 @@ Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.Layout = ModalLayout;
 
-var _excluded$u = ["src", "color"],
-  _excluded2$3 = ["path"];
+var _excluded$v = ["src", "color"],
+  _excluded2$4 = ["path"];
 var FileSVG = function FileSVG(_ref) {
   var src = _ref.src,
     color = _ref.color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var _useTheme = appStudio.useTheme(),
     getColor = _useTheme.getColor;
   var Colorprops = color ? {
@@ -4653,7 +4661,7 @@ var FileSVG = function FileSVG(_ref) {
 };
 var FileImage = function FileImage(_ref2) {
   var path = _ref2.path,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
   return React__default.createElement(appStudio.Image, Object.assign({
     src: path
   }, props));