@pingux/astro 2.220.0-alpha.0 → 2.221.0-alpha.0

package/lib/cjs/components/AIComponents/PromptInput/PromptInput.js

@@ -93,6 +93,9 @@ var PromptInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return _file.id !== id;
     }));
   };
+  var handleFileRemoveFromField = function handleFileRemoveFromField(_e, id) {
+    handleFileRemove(id);
+  };
   var onEnterPress = function onEnterPress(e) {
     if (onSubmit && !isLoading) {
       onSubmit(e, value);
@@ -162,7 +165,7 @@ var PromptInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ml: ".75rem"
   }, (0, _react2.jsx)(_index.FileInputField, (0, _extends2["default"])({
     onFileSelect: handleFileSelect,
-    onRemove: handleFileRemove,
+    onRemove: handleFileRemoveFromField,
     fileList: [],
     isIconButton: true,
     buttonProps: {

package/lib/cjs/components/FileInputField/FileInputField.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FileInputFieldProps } from '../../types';
+export declare const filterFileTypes: ({ arrayWithNewFiles, fileTypes }: {
+    arrayWithNewFiles: File[];
+    fileTypes?: string[];
+}) => File[];
+declare const FileInputField: React.ForwardRefExoticComponent<FileInputFieldProps & React.RefAttributes<HTMLInputElement>>;
+export default FileInputField;

package/lib/cjs/components/FileInputField/FileInputField.js

@@ -31,7 +31,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactDropzone = require("react-dropzone");
 var _pluralize = _interopRequireDefault(require("pluralize"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
 var _useField2 = _interopRequireDefault(require("../../hooks/useField"));
@@ -39,8 +38,6 @@ var _useStatusClasses3 = _interopRequireDefault(require("../../hooks/useStatusCl
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
 var _FileItem = _interopRequireDefault(require("./FileItem"));
 var _FileSelect = _interopRequireDefault(require("./FileSelect"));
 var _FileSelectIcon = _interopRequireDefault(require("./FileSelectIcon"));
@@ -69,7 +66,8 @@ var filterFileTypes = exports.filterFileTypes = function filterFileTypes(_ref) {
 };
 var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var buttonProps = props.buttonProps,
-    defaultButtonText = props.defaultButtonText,
+    _props$defaultButtonT = props.defaultButtonText,
+    defaultButtonText = _props$defaultButtonT === void 0 ? 'Select a file' : _props$defaultButtonT,
     defaultFileList = props.defaultFileList,
     uploadedFilesImperative = props.fileList,
     helperText = props.helperText,
@@ -82,7 +80,8 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     label = props.label,
     onFileSelect = props.onFileSelect,
     onRemove = props.onRemove,
-    status = props.status,
+    _props$status = props.status,
+    status = _props$status === void 0 ? 'default' : _props$status,
     textProps = props.textProps,
     fileTypes = props.fileTypes,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
@@ -98,7 +97,7 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     fileChangeMessage = _useState6[0],
     setFileChangeMessage = _useState6[1];
-  var inputRef = (0, _react.useRef)();
+  var inputRef = (0, _react.useRef)(null);
   /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
     return inputRef.current;
@@ -115,11 +114,14 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     fieldControlInputProps = _useField.fieldControlInputProps,
     fieldControlWrapperProps = _useField.fieldControlWrapperProps,
     fieldLabelProps = _useField.fieldLabelProps;
-  var helperTextId = (0, _uuid.v4)();
+  var helperTextId = (0, _react.useMemo)(function () {
+    return (0, _uuid.v4)();
+  }, []);
   var _useVisuallyHidden = (0, _reactAria.useVisuallyHidden)(),
     visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
   var handleFileSelect = (0, _react.useCallback)(function () {
-    inputRef.current.value = null;
+    if (!inputRef.current) return;
+    inputRef.current.value = '';
     inputRef.current.click();
   }, [inputRef]);
   (0, _react.useEffect)(function () {
@@ -127,7 +129,7 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     // update/delete file status update on Safari
 
     if (status === _statuses["default"].ERROR) {
-      setFileChangeMessage(helperText);
+      setFileChangeMessage(typeof helperText === 'string' ? helperText : '');
     } else if (fileChangeStatus) {
       var _context;
       setFileChangeMessage((0, _concat["default"])(_context = "".concat((0, _pluralize["default"])('file', fileChangeStatus.fileCount, true), " ")).call(_context, fileChangeStatus.status, " successfully"));
@@ -185,6 +187,7 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var handleOnChange = function handleOnChange(event) {
     handleFileUpload(event, event.target.files);
   };
+  var mergedInputProps = (0, _reactAria.mergeProps)(visuallyHiddenProps, fieldControlInputProps, getInputProps());
   var filesListNode = (0, _react.useMemo)(function () {
     var handleFileDelete = function handleFileDelete(e, fileId) {
       setFileChangeMessage('');
@@ -239,7 +242,7 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, getRootProps(), {
     // to pass accessibility test, this removes focusable dependents
     role: "none"
-  }), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(visuallyHiddenProps, fieldControlInputProps, getInputProps()), {
+  }), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({}, mergedInputProps, {
     multiple: isMultiple,
     onChange: handleOnChange,
     ref: inputRef,
@@ -247,10 +250,11 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     accept: fileTypes ? fileTypes === null || fileTypes === void 0 ? void 0 : fileTypes.join(',') : '*'
   })), filesListNode, shouldFileSelectRender() && (isIconButton ? (0, _react2.jsx)(_FileSelectIcon["default"], (0, _extends2["default"])({
     handleFileSelect: handleFileSelect,
-    iconContainerProps: iconContainerProps,
-    buttonProps: buttonProps,
-    iconProps: iconProps,
-    isDisabled: isDisabled || isLoading
+    iconContainerProps: iconContainerProps !== null && iconContainerProps !== void 0 ? iconContainerProps : {},
+    buttonProps: _objectSpread(_objectSpread({}, buttonProps), {}, {
+      isDisabled: isDisabled || isLoading
+    }),
+    iconProps: iconProps !== null && iconProps !== void 0 ? iconProps : {}
   }, ariaProps)) : (0, _react2.jsx)(_FileSelect["default"], (0, _extends2["default"])({
     buttonText: defaultButtonText,
     handleFileSelect: handleFileSelect,
@@ -263,7 +267,7 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     },
     "data-testid": "file-input-field__loader"
   })), helperText && (0, _react2.jsx)(_.Box, {
-    "aria-label": helperText,
+    "aria-label": typeof helperText === 'string' ? helperText : undefined,
     role: "marquee"
   }, (0, _react2.jsx)(_.FieldHelperText, {
     status: status,
@@ -275,66 +279,4 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, (0, _react2.jsx)(_reactAria.VisuallyHidden, null, (0, _react2.jsx)("h1", null, fileChangeMessage))));
 });
 FileInputField.displayName = displayName;
-FileInputField.propTypes = _objectSpread(_objectSpread(_objectSpread({
-  /** The rendered label for the field. */
-  label: _propTypes["default"].node,
-  /** Text rendered below the input. */
-  helperText: _propTypes["default"].node,
-  /** Default button text that will be changed on the file name once file is uploaded */
-  defaultButtonText: _propTypes["default"].string,
-  /** Defines whether input can accept multiple files or not */
-  isMultiple: _propTypes["default"].bool,
-  /** Determines whether the loading indicator is shown. */
-  isLoading: _propTypes["default"].bool,
-  /** Whether the field is disabled. */
-  isDisabled: _propTypes["default"].bool,
-  /** Array of objects for uploaded files.
-   * Objects should have the following structure:
-   *
-   * {
-   *
-   *  fileObj: File object (optional),
-   *
-   *  id: file id (required - will be returned on delete),
-   *
-   *  name: file name that will be displayed (required - will be displayed),
-   *
-   *  downloadLink: link for the file download (optional),
-   *
-   *  status: file status (if error - icon of the
-   *  component will be red icon and warning sign)(optional),
-   *
-   * }
-   * */
-  fileList: _propTypes["default"].arrayOf(_propTypes["default"].shape(_objectSpread({
-    fileObj: _propTypes["default"].shape({}),
-    id: _propTypes["default"].string.isRequired,
-    name: _propTypes["default"].string.isRequired,
-    downloadLink: _propTypes["default"].string
-  }, _statusProp.statusPropTypes))),
-  /** Default array of objects for uploaded files. */
-  defaultFileList: _propTypes["default"].arrayOf(_propTypes["default"].shape(_objectSpread({
-    fileObj: _propTypes["default"].shape({}),
-    id: _propTypes["default"].string.isRequired,
-    name: _propTypes["default"].string.isRequired,
-    downloadLink: _propTypes["default"].string
-  }, _statusProp.statusPropTypes))),
-  /** The handler that is called when the input files is uploaded.
-   *
-   * `(event, files) => void`
-   * */
-  onFileSelect: _propTypes["default"].func,
-  /** The handler that is called when an uploaded file got removed.
-   *
-   * `(fileId) => void`
-   * */
-  onRemove: _propTypes["default"].func,
-  /** These props will be spread to the field text component. */
-  textProps: _propTypes["default"].shape({}),
-  /** Props object that is spread directly into the helphint element. */
-  helpHintProps: _propTypes["default"].shape({})
-}, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
-FileInputField.defaultProps = _objectSpread({
-  defaultButtonText: 'Select a file'
-}, _statusProp.statusDefaultProp);
 var _default = exports["default"] = FileInputField;

package/lib/cjs/components/FileInputField/FileInputField.stories.js

@@ -113,7 +113,6 @@ var ControlledState = exports.ControlledState = function ControlledState(args) {
     error = _useState4[0],
     setError = _useState4[1];
   var handleFileSelect = function handleFileSelect(event, files) {
-    // this is approximate conversion just for an example
     var uploadedFileSizeMb = files[0].size / 1e6;
     if (uploadedFileSizeMb > 2) {
       setError('Only files under 2 MB can be uploaded.');
@@ -123,14 +122,12 @@ var ControlledState = exports.ControlledState = function ControlledState(args) {
         name: files[0].name,
         downloadLink: 'link for testing purposes'
       }]);
-      setError(null);
+      setError(undefined);
     }
   };
-
-  // you would want to handle this differently in case you have multiple files
   var handleFileRemove = function handleFileRemove() {
     setUserFiles([]);
-    setError(null);
+    setError(undefined);
   };
   return (0, _react2.jsx)(_index.FileInputField, (0, _extends2["default"])({}, args, {
     label: "Controlled State With limit on file size upload below 2 mb",
@@ -138,7 +135,7 @@ var ControlledState = exports.ControlledState = function ControlledState(args) {
     onRemove: handleFileRemove,
     fileList: userFiles,
     sx: fitContentWidthSx,
-    status: error && _statuses["default"].ERROR,
+    status: error ? _statuses["default"].ERROR : undefined,
     helperText: error,
     isMultiple: true
   }));
@@ -223,13 +220,13 @@ var WithFileTypePdfAndImage = exports.WithFileTypePdfAndImage = function WithFil
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     error = _useState6[0],
     setError = _useState6[1];
-  var handleFileSelect = function handleFileSelect(event, files) {
+  var handleFileSelect = function handleFileSelect(_event, files) {
     var uploadedFileType = files[0].type;
     var isValidFileType = (0, _some["default"])(fileTypes).call(fileTypes, function (fileType) {
       return uploadedFileType.search(fileType) !== -1;
     });
     if (isValidFileType) {
-      setError(null);
+      setError(undefined);
     } else {
       setError('Not a valid File Type. Only PDF and Image files are allowed.');
     }
@@ -240,9 +237,9 @@ var WithFileTypePdfAndImage = exports.WithFileTypePdfAndImage = function WithFil
     fileTypes: fileTypes,
     onFileSelect: handleFileSelect,
     onRemove: function onRemove() {
-      return setError(null);
+      return setError(undefined);
     },
-    status: error && _statuses["default"].ERROR,
+    status: error ? _statuses["default"].ERROR : undefined,
     helperText: error
   });
 };

package/lib/cjs/components/FileInputField/FileInputField.styles.d.ts

@@ -0,0 +1,47 @@
+declare const _default: {
+    wrapper: {
+        display: string;
+        border: string;
+        borderColor: string;
+        padding: string;
+        '&.is-drag-active': {
+            backgroundColor: string;
+        };
+        '&.is-error': {
+            borderColor: string;
+        };
+        '&.is-success': {
+            borderColor: string;
+        };
+        '&.is-warning': {
+            borderColor: string;
+        };
+        '&.is-loading': {
+            justifyContent: string;
+            alignItems: string;
+        };
+    };
+    button: {
+        background: string;
+        cursor: string;
+        '& span': {
+            textAlign: string;
+        };
+        '&:focus-visible': {
+            outline: string;
+        };
+        '&.is-hovered, &.is-pressed': {
+            cursor: string;
+            '& span': {
+                textDecoration: string;
+            };
+        };
+        '&.is-focused': {
+            boxShadow: string;
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+    };
+};
+export default _default;

package/lib/cjs/components/FileInputField/FileInputField.test.js

@@ -84,7 +84,8 @@ beforeAll(function () {
 afterAll(function () {
   _url["default"].createObjectURL = originalValue;
 });
-var getComponent = function getComponent(props) {
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _react2.render)((0, _react3.jsx)(_FileInputField["default"], (0, _extends2["default"])({}, defaultProps, props)));
 };
 
@@ -316,7 +317,7 @@ test('File upload should allow only image', /*#__PURE__*/(0, _asyncToGenerator2[
   return _regeneratorRuntime().wrap(function _callee7$(_context7) {
     while (1) switch (_context7.prev = _context7.next) {
       case 0:
-        setStateMock = jest.fn();
+        setStateMock = jest.fn(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
         jest.spyOn(_react["default"], 'useState').mockImplementation(function (initialState) {
           return [initialState, setStateMock];
         });

package/lib/cjs/components/FileInputField/FileItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FileItemProps } from '../../types';
+declare const FileItem: React.FC<FileItemProps>;
+export default FileItem;

package/lib/cjs/components/FileInputField/FileItem.js

@@ -15,17 +15,15 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _AlertCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleIcon"));
 var _DeleteIcon = _interopRequireDefault(require("@pingux/mdi-react/DeleteIcon"));
 var _InsertDriveFileIcon = _interopRequireDefault(require("@pingux/mdi-react/InsertDriveFileIcon"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _index = require("../../index");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-var _statusProp = require("../../utils/docUtils/statusProp");
 var _react2 = require("@emotion/react");
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -43,7 +41,7 @@ var FileItem = function FileItem(props) {
   }, [id, handleFileDelete]);
   var _useVisuallyHidden = (0, _reactAria.useVisuallyHidden)(),
     visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
-  var downloadRef = (0, _react.useRef)();
+  var downloadRef = (0, _react.useRef)(null);
   var getFileIconProps = (0, _react.useCallback)(function () {
     switch (status) {
       case _statuses["default"].ERROR:
@@ -66,7 +64,9 @@ var FileItem = function FileItem(props) {
     }
   }, [status]);
   var handleDownloadPress = function handleDownloadPress() {
-    downloadRef.current.click();
+    if (downloadRef.current) {
+      downloadRef.current.click();
+    }
   };
   return (0, _react2.jsx)(_index.Box, {
     isRow: true,
@@ -76,9 +76,9 @@ var FileItem = function FileItem(props) {
   }, (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
     size: 15,
     "data-testid": "file-uploaded__file-icon"
-  }, getFileIconProps(), {
+  }, _objectSpread(_objectSpread({}, getFileIconProps()), {}, {
     isDisabled: isDisabled
-  })), (0, _react2.jsx)(_index.Button, {
+  }))), (0, _react2.jsx)(_index.Button, {
     variant: "forms.fileInputField.button",
     mx: 5,
     isDisabled: isDisabled,
@@ -115,12 +115,4 @@ var FileItem = function FileItem(props) {
     id: "file-uploaded__download-link-".concat(id)
   })));
 };
-var _default = exports["default"] = FileItem;
-FileItem.propTypes = _objectSpread({
-  downloadLink: _propTypes["default"].string,
-  handleFileDelete: _propTypes["default"].func,
-  id: _propTypes["default"].string,
-  isDisabled: _propTypes["default"].bool,
-  name: _propTypes["default"].string,
-  textProps: _propTypes["default"].shape({})
-}, _statusProp.statusPropTypes);
+var _default = exports["default"] = FileItem;

package/lib/cjs/components/FileInputField/FileSelect.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FileSelectProps } from '../../types';
+declare const FileSelect: React.FC<FileSelectProps>;
+export default FileSelect;

package/lib/cjs/components/FileInputField/FileSelect.js

@@ -1,29 +1,18 @@
 "use strict";
 
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _react2 = require("@emotion/react");
 var _excluded = ["buttonText", "handleFileSelect", "isDisabled", "textProps"];
-function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FileSelect = function FileSelect(_ref) {
   var buttonText = _ref.buttonText,
     handleFileSelect = _ref.handleFileSelect,
@@ -44,10 +33,4 @@ var FileSelect = function FileSelect(_ref) {
     color: "active"
   }, textProps), buttonText));
 };
-var _default = exports["default"] = FileSelect;
-FileSelect.propTypes = _objectSpread({
-  buttonText: _propTypes["default"].string,
-  handleFileSelect: _propTypes["default"].func,
-  isDisabled: _propTypes["default"].bool,
-  textProps: _propTypes["default"].shape({})
-}, _ariaAttributes.ariaAttributesBasePropTypes);
+var _default = exports["default"] = FileSelect;

package/lib/cjs/components/FileInputField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './FileInputField';

package/lib/cjs/components/PhoneNumberField/PhoneNumberField.js

@@ -78,6 +78,7 @@ var parsePaste = function parsePaste(raw) {
   };
 };
 var PhoneNumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _fieldControlInputPro;
   var countryValue = props.countryValue,
     defaultCountryValue = props.defaultCountryValue,
     helperText = props.helperText,
@@ -240,6 +241,14 @@ var PhoneNumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       borderBottomRightRadius: '0 !important'
     }
   });
+  var countryPickerScrollBoxSx = {
+    minWidth: 0,
+    '@media screen and (max-width: 500px)': {
+      width: '100%',
+      maxWidth: '100%',
+      overflowX: 'hidden'
+    }
+  };
   var countryLabel = function countryLabel(c) {
     var _context4, _context5;
     return (0, _concat["default"])(_context4 = (0, _concat["default"])(_context5 = "".concat(c.name)).call(_context5, c.name !== c["native"] ? " (".concat(c["native"], ")") : '', " +")).call(_context4, c.phone.split(',')[0]);
@@ -275,9 +284,7 @@ var PhoneNumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     },
     scrollBoxProps: {
       maxHeight: '215px',
-      sx: {
-        minWidth: '280px'
-      }
+      sx: countryPickerScrollBoxSx
     },
     items: fieldState.items,
     inputValue: currentCountryInputValue,
@@ -292,14 +299,17 @@ var PhoneNumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       textValue: "+".concat(item[1].phone.split(',')[0])
     }, countryLabel(item[1]));
   }), (0, _react2.jsx)(_.Box, {
+    className: (_fieldControlInputPro = fieldControlInputProps.className) !== null && _fieldControlInputPro !== void 0 && (0, _includes["default"])(_fieldControlInputPro).call(_fieldControlInputPro, 'is-focused') ? 'phone-number-field__input-focused' : undefined,
     sx: {
-      ml: '110px',
-      width: 'calc(100% - 110px)',
+      ml: '109px',
+      width: 'calc(100% - 109px)',
       visibility: fieldState.isOpen ? 'hidden' : undefined,
+      '&.phone-number-field__input-focused': {
+        ml: '111px'
+      },
       '& input': {
         borderTopLeftRadius: '0 !important',
-        borderBottomLeftRadius: '0 !important',
-        borderLeft: 0
+        borderBottomLeftRadius: '0 !important'
       }
     }
   }, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({