import React from 'react';
import 'react-dom';
import { l as _asyncToGenerator, m as _regeneratorRuntime, f as _inherits, g as _createSuper, i as _classCallCheck, _ as _defineProperty, n as _assertThisInitialized, h as _createClass, j as _toConsumableArray, a as _objectSpread2 } from '../_rollupPluginBabelHelpers-b9ad31fa.js';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import '../key_codes-ff72266d.js';
import '../hooks/useActivify.js';
import '../index-6829ab1f.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import { I as Icon, P as PlaceholderIcon, b as PlaceholderIcon$1, c as PlusIcon, d as TrashIcon } from '../index-fc484d02.js';
import '../overlays/withTooltip.js';
import '../index-155df85b.js';
import Text from '../ui/text.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import Box from '../ui/box.js';
import { c as cc } from '../index-b65fa23c.js';
import { i as isValidURL } from '../generic-7099c3ed.js';
import LoadingComponent from '../ui/loader.js';
import { E as ENDPOINTS, I as IMAGE_EXTENSIONS } from '../index-923d986f.js';
import ToastMessage from '../decorators/toastMessage.js';
import '../overlays/toast.js';

function APIRequest(_x, _x2) {
  return _APIRequest.apply(this, arguments);
}
function _APIRequest() {
  _APIRequest = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(url, method) {
    var data,
      request,
      response,
      contentType,
      json,
      _args = arguments;
    return _regeneratorRuntime().wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            data = _args.length > 2 && _args[2] !== undefined ? _args[2] : undefined;
            request = new Request(url, {
              method: method || "GET",
              headers: new Headers({
                "Content-Type": "application/json"
              }),
              credentials: "same-origin",
              mode: "cors",
              cache: "default",
              body: JSON.stringify(data)
            });
            _context.prev = 2;
            _context.next = 5;
            return fetch(request);
          case 5:
            response = _context.sent;
            contentType = response.headers.get("content-type");
            if (!(contentType && contentType.indexOf("application/json") !== -1)) {
              _context.next = 12;
              break;
            }
            _context.next = 10;
            return response.json();
          case 10:
            json = _context.sent;
            return _context.abrupt("return", Promise.resolve(json));
          case 12:
            throw new Error("API request failed!");
          case 15:
            _context.prev = 15;
            _context.t0 = _context["catch"](2);
            return _context.abrupt("return", Promise.reject(_context.t0));
          case 18:
          case "end":
            return _context.stop();
        }
      }
    }, _callee, null, [[2, 15]]);
  }));
  return _APIRequest.apply(this, arguments);
}
function upload(_x3, _x4, _x5, _x6, _x7) {
  return _upload.apply(this, arguments);
}
function _upload() {
  _upload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(file, fileObject, onProgress, onComplete, onError) {
    var url, policy, fd, xhr;
    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
      while (1) {
        switch (_context2.prev = _context2.next) {
          case 0:
            url = ENDPOINTS.BASE_URL + ENDPOINTS.POLICY_ENDPOINT;
            _context2.next = 3;
            return APIRequest(url, "POST", fileObject);
          case 3:
            policy = _context2.sent.body;
            fd = new FormData();
            xhr = new XMLHttpRequest();
            Object.keys(policy.fields).map(function (key) {
              fd.append(key, policy.fields[key]);
            });
            fd.append("file", file);
            xhr.upload.onprogress = function (e) {
              if (e.lengthComputable) {
                var percentComplete = (e.loaded / e.total * 100).toFixed(2);
                var percentCompleteToNumber = +percentComplete;
                onProgress(percentCompleteToNumber);
              }
            };
            xhr.onload = function () {
              // Always 204 No Content
              if (xhr.status === 204) {
                var _url = "".concat(policy.url).concat(policy.fields.key);
                var _fileObject$file_obje = fileObject.file_object,
                  width = _fileObject$file_obje.width,
                  height = _fileObject$file_obje.height;
                if (width && height) {
                  _url += "?w=".concat(width, "&h=").concat(height);
                }
                var cdnUrl = _url.replace("haptikappimg.s3.amazonaws.com", "haptikappimg.haptikapi.com");
                onComplete(cdnUrl);
              }
            };
            xhr.onerror = function (e) {
              if (onError) onError(e);
            };
            xhr.open("POST", policy.url);
            xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
            xhr.send(fd);
          case 14:
          case "end":
            return _context2.stop();
        }
      }
    }, _callee2);
  }));
  return _upload.apply(this, arguments);
}

var uploadFile = /*#__PURE__*/function () {
  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(file, onProgress, onComplete, onError, businessId) {
    var img, extenstionRegex, extension, fileObject;
    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
      while (1) {
        switch (_context2.prev = _context2.next) {
          case 0:
            img = new Image();
            extenstionRegex = /(?:\.([^.]+))?$/;
            extension = extenstionRegex.exec(file.name)[1] && extenstionRegex.exec(file.name)[1].toLowerCase();
            fileObject = {
              file_object: {
                type: file.type,
                size: file.size,
                extension: [extension, extension]
              }
            };
            if (businessId) {
              fileObject.business_id = businessId;
            }
            if (IMAGE_EXTENSIONS.includes(extension)) {
              img.src = URL.createObjectURL(file);
              img.onload = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
                return _regeneratorRuntime().wrap(function _callee$(_context) {
                  while (1) {
                    switch (_context.prev = _context.next) {
                      case 0:
                        fileObject.file_object.width = img.width;
                        fileObject.file_object.height = img.height;
                        upload(file, fileObject, onProgress, onComplete, onError);
                      case 3:
                      case "end":
                        return _context.stop();
                    }
                  }
                }, _callee);
              }));
            } else {
              upload(file, fileObject, onProgress, onComplete, onError);
            }
          case 6:
          case "end":
            return _context2.stop();
        }
      }
    }, _callee2);
  }));
  return function uploadFile(_x, _x2, _x3, _x4, _x5) {
    return _ref.apply(this, arguments);
  };
}();

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var FileIconv2 = (({
  styles = {},
  ...props
}) => /*#__PURE__*/React.createElement("svg", _extends({
  width: "40",
  height: "34",
  viewBox: "0 0 40 34",
  fill: "none",
  xmlns: "http://www.w3.org/2000/svg"
}, props), /*#__PURE__*/React.createElement("path", {
  d: "M39.355 6.538h-1.936V3.27a.658.658 0 00-.189-.462.64.64 0 00-.456-.192H13.947L12.836.361A.651.651 0 0012.258 0H3.226a.64.64 0 00-.456.192.658.658 0 00-.19.462v5.884H.646a.64.64 0 00-.456.192.658.658 0 00-.189.462v26.154c0 .174.068.34.189.463A.64.64 0 00.645 34h38.71a.641.641 0 00.456-.191.658.658 0 00.189-.463V7.192a.658.658 0 00-.189-.462.64.64 0 00-.456-.192zM3.87 1.308h7.989l1.111 2.254a.651.651 0 00.577.361H36.13v2.615H3.871v-5.23zM38.71 32.692H1.29V7.846h37.42v24.846z",
  fill: "#0067DD"
}), /*#__PURE__*/React.createElement("path", {
  fill: "#0067DD",
  fillOpacity: ".3",
  d: "M1.048 7.601H38.79v25.337H1.048z"
})));

function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
var ImageIconv2 = (({
  styles = {},
  ...props
}) => /*#__PURE__*/React.createElement("svg", _extends$1({
  width: "34",
  height: "34",
  viewBox: "0 0 34 34",
  fill: "none",
  xmlns: "http://www.w3.org/2000/svg"
}, props), /*#__PURE__*/React.createElement("path", {
  d: "M23.071 9.714a3.642 3.642 0 11-7.284 0 3.642 3.642 0 017.284 0zM34 3.643v26.714A3.643 3.643 0 0130.357 34H3.643A3.643 3.643 0 010 30.357V3.643A3.643 3.643 0 013.643 0h26.714A3.643 3.643 0 0134 3.643zm-2.429 0a1.214 1.214 0 00-1.214-1.214H3.643a1.214 1.214 0 00-1.214 1.214v20.145l8.852-8.864a1.214 1.214 0 011.724 0l6.424 6.435 3.995-4.007a1.216 1.216 0 011.724 0l6.423 6.436V3.643z",
  fill: "#6FB2FF"
})));

function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
var VideoIconv2 = (({
  styles = {},
  ...props
}) => /*#__PURE__*/React.createElement("svg", _extends$2({
  width: "28",
  height: "28",
  viewBox: "0 0 28 28",
  fill: "none",
  xmlns: "http://www.w3.org/2000/svg"
}, props), /*#__PURE__*/React.createElement("path", {
  d: "M25.879 0H2.12C.951 0 0 .95 0 2.121V25.88C0 27.045.95 28 2.121 28H25.88c1.17 0 2.121-.954 2.121-2.121V2.12C28 .951 27.05 0 25.879 0zm-1.417 23.898H9.278a1.693 1.693 0 01-1.642 1.272c-.789 0-1.455-.539-1.641-1.272H3.538a.423.423 0 01-.424-.425c0-.233.19-.424.424-.424h2.457a1.698 1.698 0 011.641-1.273c.79 0 1.456.543 1.642 1.273h15.184c.233 0 .424.191.424.424 0 .238-.19.425-.424.425zm.428-4.243c0 .233-.19.424-.424.424H3.534a.425.425 0 01-.424-.424V3.36c0-.233.19-.424.424-.424h20.932c.233 0 .424.19.424.424v16.295z",
  fill: "#6FB2FF"
})));

var css_248z = ".FilePlaceholder_filePlaceholder__19af0 {\n  display: flex;\n  align-items: center; }\n\n.FilePlaceholder_filePlaceholderIcon__gz4-d {\n  width: 48px;\n  height: 48px;\n  border-radius: 24px;\n  margin-right: 24px; }\n\n.FilePlaceholder_filePlaceholderText__1d25L {\n  font-size: 14px; }\n  .FilePlaceholder_filePlaceholderText__1d25L > span {\n    display: block; }\n\n.FilePlaceholder_filePlaceholderTextTitle__10wpd {\n  margin-bottom: 8px;\n  font-weight: 600; }\n\n.FilePlaceholder_filePlaceholderTextSubtitle__3THM6 {\n  margin-bottom: 4px;\n  opacity: 0.5; }\n";
var styles = {"filePlaceholder":"FilePlaceholder_filePlaceholder__19af0","filePlaceholderIcon":"FilePlaceholder_filePlaceholderIcon__gz4-d","filePlaceholderText":"FilePlaceholder_filePlaceholderText__1d25L","filePlaceholderTextTitle":"FilePlaceholder_filePlaceholderTextTitle__10wpd","filePlaceholderTextSubtitle":"FilePlaceholder_filePlaceholderTextSubtitle__3THM6"};
styleInject(css_248z);

var FilePlaceholder = function FilePlaceholder(props) {
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles.filePlaceholder, " ").concat(props.prefixClassName, "-wrapper")
  }, /*#__PURE__*/React.createElement(Icon, {
    className: "".concat(styles.filePlaceholderIcon, " ").concat(props.prefixClassName, "-icon"),
    src: props.customIcon || PlaceholderIcon
  }), /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles.filePlaceholderText, " ").concat(props.prefixClassName, "-text-wrapper")
  }, /*#__PURE__*/React.createElement("span", {
    className: "".concat(styles.filePlaceholderTextTitle, " ").concat(props.prefixClassName, "-title")
  }, "Upload / Drag & Drop File"), /*#__PURE__*/React.createElement("span", {
    className: "".concat(styles.filePlaceholderTextSubtitle, " ").concat(props.prefixClassName, "-filesize")
  }, "Max File Size: ".concat(props.maxFileSize, "MB")), /*#__PURE__*/React.createElement("span", {
    className: "".concat(styles.filePlaceholderTextSubtitle, " ").concat(props.prefixClassName, "-format")
  }, "Supported Formats: ".concat(props.type))));
};
FilePlaceholder.propTypes = {
  prefixClassName: PropTypes.string,
  maxFileSize: PropTypes.number,
  type: PropTypes.string,
  customIcon: PropTypes.string
};
FilePlaceholder.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "FilePlaceholder",
  "props": {
    "prefixClassName": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "maxFileSize": {
      "type": {
        "name": "number"
      },
      "required": false,
      "description": ""
    },
    "type": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "customIcon": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    }
  }
};

var css_248z$1 = ".ImagePlaceholder_imagePlaceholder__2sc7R {\n  display: flex;\n  align-items: center; }\n\n.ImagePlaceholder_imagePlaceholderIcon__1UUe5 {\n  width: 48px;\n  height: 48px;\n  border-radius: 24px;\n  margin-right: 24px; }\n\n.ImagePlaceholder_imagePlaceholderText__24R2L {\n  font-size: 14px; }\n  .ImagePlaceholder_imagePlaceholderText__24R2L > span {\n    display: block; }\n\n.ImagePlaceholder_imagePlaceholderTextTitle__1nHrc {\n  margin-bottom: 8px;\n  font-weight: 600; }\n\n.ImagePlaceholder_imagePlaceholderTextSubtitle__3jEUc {\n  margin-bottom: 4px;\n  opacity: 0.5; }\n";
var styles$1 = {"imagePlaceholder":"ImagePlaceholder_imagePlaceholder__2sc7R","imagePlaceholderIcon":"ImagePlaceholder_imagePlaceholderIcon__1UUe5","imagePlaceholderText":"ImagePlaceholder_imagePlaceholderText__24R2L","imagePlaceholderTextTitle":"ImagePlaceholder_imagePlaceholderTextTitle__1nHrc","imagePlaceholderTextSubtitle":"ImagePlaceholder_imagePlaceholderTextSubtitle__3jEUc"};
styleInject(css_248z$1);

var ImagePlaceholder = function ImagePlaceholder(props) {
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles$1.imagePlaceholder, " ").concat(props.prefixClassName, "-wrapper")
  }, /*#__PURE__*/React.createElement(Icon, {
    className: "".concat(styles$1.imagePlaceholderIcon, " ").concat(props.prefixClassName, "-icon"),
    src: props.customIcon || PlaceholderIcon$1
  }), /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles$1.imagePlaceholderText, " ").concat(props.prefixClassName, "-text-wrapper")
  }, /*#__PURE__*/React.createElement("span", {
    className: "".concat(styles$1.imagePlaceholderTextTitle, " ").concat(props.prefixClassName, "-title")
  }, "Upload / Drag & Drop Image"), /*#__PURE__*/React.createElement("span", {
    className: "".concat(styles$1.imagePlaceholderTextSubtitle, " ").concat(props.prefixClassName, "-image-dimensions")
  }, "Dimensions: ".concat(props.dimensions)), /*#__PURE__*/React.createElement("span", {
    className: "".concat(styles$1.imagePlaceholderTextSubtitle, " ").concat(props.prefixClassName, "-filesize")
  }, "Max File Size: ".concat(props.maxFileSize, "MB")), /*#__PURE__*/React.createElement("span", {
    className: "".concat(styles$1.imagePlaceholderTextSubtitle, " ").concat(props.prefixClassName, "-format")
  }, "Supported Formats: ".concat(props.type))));
};
ImagePlaceholder.propTypes = {
  prefixClassName: PropTypes.string,
  maxFileSize: PropTypes.number,
  type: PropTypes.string,
  dimensions: PropTypes.string,
  customIcon: PropTypes.string
};
ImagePlaceholder.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ImagePlaceholder",
  "props": {
    "prefixClassName": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "maxFileSize": {
      "type": {
        "name": "number"
      },
      "required": false,
      "description": ""
    },
    "type": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "dimensions": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "customIcon": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    }
  }
};

var css_248z$2 = ".ImageProgressBar_progressBar__1pgzi {\n  position: absolute;\n  width: 100%;\n  top: 100%;\n  left: 0;\n  height: 8px;\n  background-color: #000;\n  opacity: 0;\n  transition: 0.2s ease-out; }\n  .ImageProgressBar_progressBar__1pgzi.ImageProgressBar_active__2AYEM {\n    opacity: 1;\n    transform: translateY(-100%); }\n\n.ImageProgressBar_progressBarInner__3sAaz {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background-color: #124fa0;\n  transition: 0.1s ease-out; }\n";
var styles$2 = {"progressBar":"ImageProgressBar_progressBar__1pgzi","active":"ImageProgressBar_active__2AYEM","progressBarInner":"ImageProgressBar_progressBarInner__3sAaz"};
styleInject(css_248z$2);

var ImageProgressBar = function ImageProgressBar(props) {
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles$2.progressBar, " ").concat(props.active ? styles$2.active : "", " ").concat(props.prefixClassName, "-wrapper")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles$2.progressBarInner, " ").concat(props.prefixClassName, "-bar"),
    style: {
      width: "".concat(props.complete, "%")
    }
  }));
};
ImageProgressBar.propTypes = {
  complete: PropTypes.number,
  active: PropTypes.bool,
  prefixClassName: PropTypes.string
};
ImageProgressBar.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ImageProgressBar",
  "props": {
    "complete": {
      "type": {
        "name": "number"
      },
      "required": false,
      "description": ""
    },
    "active": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    }
  }
};

var css_248z$3 = ".File_files__1JQtB {\n  position: relative;\n  margin-bottom: 24px;\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  background-color: #fff;\n  padding: 8px;\n  max-width: 100%;\n  overflow: auto; }\n\n.File_filesList__3HdWc {\n  display: flex;\n  align-items: stretch; }\n\n.File_addNewFile__1SdjH {\n  position: relative;\n  width: 213.33333px;\n  min-width: 213.33333px;\n  margin-right: 16px;\n  border-radius: 8px;\n  overflow: hidden;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid #ddd;\n  cursor: pointer;\n  transition: 0.2s ease-out;\n  transform: translateY(10px);\n  animation: File_slide-up__1Y2ik 0.5s ease-out;\n  animation-fill-mode: both;\n  opacity: 0; }\n  .File_addNewFile__1SdjH:hover {\n    background-color: #ecf1f7; }\n\n.File_addNewFileIcon__2JZiX {\n  margin-bottom: 8px;\n  width: 32px;\n  height: 32px; }\n  .File_addNewFileIcon__2JZiX svg g {\n    stroke: #124fa0; }\n  .File_addNewFileIcon__2JZiX svg path {\n    fill: #124fa0; }\n\n.File_addNewFileText__3Wg6l {\n  text-align: center;\n  color: #124fa0; }\n\n.File_imageInputWrapper__g57LY {\n  position: relative;\n  width: 213.33333px;\n  height: 120px;\n  margin-right: 16px;\n  border-radius: 8px;\n  overflow: hidden;\n  background-color: #000;\n  border: 1px solid #fff;\n  transition: 0.2s ease-out;\n  overflow: hidden;\n  transform: translateY(10px);\n  animation: File_slide-up__1Y2ik 0.5s ease-out;\n  animation-fill-mode: both;\n  opacity: 0; }\n\n.File_fileInput__uQNlb {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer; }\n\n.File_imageInputPreviewWrapper__3nrD2 {\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  border-radius: 4px; }\n\n.File_imageInputPreview__8RvRC {\n  position: absolute;\n  top: -8px;\n  left: -8px;\n  width: calc(100% + 16px);\n  height: calc(100% + 16px);\n  filter: blur(0px);\n  object-fit: contain;\n  transition: 0.2s ease-out; }\n  .File_imageInputPreview__8RvRC.File_isUploading__UMYqr {\n    filter: blur(8px); }\n\n.File_loader__6FNV_ {\n  position: absolute;\n  top: 50% !important;\n  left: 50% !important;\n  transform: translate(-50%, -50%) !important;\n  margin-top: 0;\n  opacity: 0;\n  transition: 0.2s ease-out; }\n  .File_loader__6FNV_.File_isUploading__UMYqr {\n    opacity: 1; }\n\n.File_imageInputPreviewDelete__3mnjC {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  cursor: pointer;\n  transition: 0.1s ease-out;\n  font-size: 14px; }\n  .File_imageInputPreviewDelete__3mnjC:hover {\n    opacity: 1; }\n    .File_imageInputPreviewDelete__3mnjC:hover > div {\n      transform: translateY(0); }\n  .File_imageInputPreviewDelete__3mnjC:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: #000;\n    opacity: 0.6; }\n  .File_imageInputPreviewDelete__3mnjC .File_imageInputPreviewDeleteIcon__gxCId {\n    position: relative;\n    z-index: 2;\n    width: 40px;\n    height: 40px;\n    padding: 8px;\n    background-color: #fff;\n    border-radius: 100px;\n    transform: translateY(5px);\n    transition: 0.2s ease-out; }\n\n.File_customKeyImage__3SYaX {\n  width: 100%;\n  min-height: 150px;\n  height: 100%;\n  background-color: #eee;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column; }\n  .File_customKeyImage__3SYaX > div {\n    padding-bottom: 8px; }\n\n.File_onUploadPreviewWrapper__1Ejr6 {\n  display: flex;\n  align-items: center;\n  margin-right: 16px; }\n  .File_onUploadPreviewWrapper__1Ejr6 .File_filePreview__1A76G {\n    width: 100%; }\n\n.File_filePreviewWrapper__19Tns,\n.File_onUploadPreviewWrapper__1Ejr6 {\n  position: relative;\n  width: 100%;\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  padding: 8px;\n  overflow: hidden; }\n  .File_filePreviewWrapper__19Tns .File_filePreview__1A76G,\n  .File_onUploadPreviewWrapper__1Ejr6 .File_filePreview__1A76G {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    transition: 0.2s ease-out; }\n    .File_filePreviewWrapper__19Tns .File_filePreview__1A76G .File_onUploadFileName__5S-A-,\n    .File_onUploadPreviewWrapper__1Ejr6 .File_filePreview__1A76G .File_onUploadFileName__5S-A- {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis; }\n    .File_filePreviewWrapper__19Tns .File_filePreview__1A76G.File_onUploadDeleteWrapper__HeIHd,\n    .File_onUploadPreviewWrapper__1Ejr6 .File_filePreview__1A76G.File_onUploadDeleteWrapper__HeIHd {\n      width: auto;\n      padding-left: 10px; }\n    .File_filePreviewWrapper__19Tns .File_filePreviewTitle__22cp2,\n    .File_onUploadPreviewWrapper__1Ejr6 .File_filePreviewTitle__22cp2 {\n      font-size: 18px;\n      font-weight: 600;\n      transition: 0.2s ease-out;\n      color: #333; }\n    .File_filePreviewWrapper__19Tns .File_filePreview__1A76G.File_isUploading__UMYqr,\n    .File_onUploadPreviewWrapper__1Ejr6 .File_filePreview__1A76G.File_isUploading__UMYqr {\n      padding-bottom: 5px; }\n      .File_filePreviewWrapper__19Tns .File_filePreview__1A76G.File_isUploading__UMYqr .File_filePreviewTitle__22cp2,\n      .File_onUploadPreviewWrapper__1Ejr6 .File_filePreview__1A76G.File_isUploading__UMYqr .File_filePreviewTitle__22cp2 {\n        padding-left: 28px; }\n  .File_filePreviewWrapper__19Tns .File_loader__6FNV_,\n  .File_onUploadPreviewWrapper__1Ejr6 .File_loader__6FNV_ {\n    left: 0;\n    right: auto;\n    transform: scale3d(0.6, 0.6, 1);\n    margin: 2px; }\n\n@keyframes File_slide-up__1Y2ik {\n  0% {\n    opacity: 0;\n    transform: translateY(10px); }\n  100% {\n    opacity: 1;\n    transform: translateY(0px); } }\n";
var styles$3 = {"files":"File_files__1JQtB","filesList":"File_filesList__3HdWc","addNewFile":"File_addNewFile__1SdjH","slide-up":"File_slide-up__1Y2ik","addNewFileIcon":"File_addNewFileIcon__2JZiX","addNewFileText":"File_addNewFileText__3Wg6l","imageInputWrapper":"File_imageInputWrapper__g57LY","fileInput":"File_fileInput__uQNlb","imageInputPreviewWrapper":"File_imageInputPreviewWrapper__3nrD2","imageInputPreview":"File_imageInputPreview__8RvRC","isUploading":"File_isUploading__UMYqr","loader":"File_loader__6FNV_","imageInputPreviewDelete":"File_imageInputPreviewDelete__3mnjC","imageInputPreviewDeleteIcon":"File_imageInputPreviewDeleteIcon__gxCId","customKeyImage":"File_customKeyImage__3SYaX","onUploadPreviewWrapper":"File_onUploadPreviewWrapper__1Ejr6","filePreview":"File_filePreview__1A76G","filePreviewWrapper":"File_filePreviewWrapper__19Tns","onUploadFileName":"File_onUploadFileName__5S-A-","onUploadDeleteWrapper":"File_onUploadDeleteWrapper__HeIHd","filePreviewTitle":"File_filePreviewTitle__22cp2"};
styleInject(css_248z$3);

var FileV2InputWrapperStyle = function FileV2InputWrapperStyle(props) {
  return {
    position: 'relative',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: '24px 6px',
    textAlign: 'center',
    backgroundColor: '#CFE5FF1A',
    border: "".concat(props.theme.borderWidths.xs, "px dashed ").concat(props.theme.colors.blue.haptik),
    borderRadius: props.theme.radii.lg
  };
};
var FileV2InputWrapper = styled("div")(FileV2InputWrapperStyle);
var IconWrapperStyle = function IconWrapperStyle(props) {
  return {
    marginBottom: props.theme.space.sm
  };
};
var IconWrapper = styled("div")(IconWrapperStyle);
var HiddenFileInputStyle = function HiddenFileInputStyle() {
  return {
    position: 'absolute',
    top: '0',
    left: '0',
    width: '100%',
    height: '100%',
    opacity: '0',
    cursor: 'pointer'
  };
};
var HiddenFileInput = styled("input")(HiddenFileInputStyle);
var UploadInfoWrapperStyle = function UploadInfoWrapperStyle(props) {
  return {
    position: 'relative',
    width: '75%',
    alignSelf: 'flex-start',
    paddingLeft: props.theme.space.md * 2
  };
};
var UploadInfoWrapper = styled("div")(UploadInfoWrapperStyle);
var ProgressBarWrapperStyle = function ProgressBarWrapperStyle(props) {
  return {
    position: 'relative',
    width: '100%',
    height: '5px',
    backgroundColor: '#CFE5FF',
    borderRadius: '10px',
    overflow: 'hidden',
    marginTop: props.theme.space.sm
  };
};
var ProgressBarWrapper = styled("div")(ProgressBarWrapperStyle);
var ProgressBarStyle = function ProgressBarStyle(props) {
  return {
    position: 'absolute',
    top: 0,
    left: 0,
    height: '5px',
    backgroundColor: props.theme.colors.blue.haptik,
    borderRadius: '10px'
  };
};
var ProgressBar = styled("div")(ProgressBarStyle);
var CancelIconStyle = function CancelIconStyle() {
  return {
    position: 'absolute',
    bottom: '-3px',
    right: '-30px'
  };
};
var CancelIcon = styled(Icon)(CancelIconStyle);

var _dec, _class;
var FILE_ACCEPT_TYPES =
// eslint-disable-next-line max-len
"image/png, image/jpeg, application/pdf, application/ vnd.openxmlformats-officedocument.wordprocessingml.document, application/msword, text/csv, application/vnd.ms-excel, image/gif";
var IMAGE_ACCEPT_TYPES = "image/png, image/jpeg, image/gif";
var VIDEO_ACCEPT_TYPES = "video/mp4, video/x-m4v, video/*";
var File = (_dec = ToastMessage(), _dec(_class = /*#__PURE__*/function (_React$Component) {
  _inherits(File, _React$Component);
  var _super = _createSuper(File);
  function File() {
    var _this;
    _classCallCheck(this, File);
    _this = _super.call(this);
    _defineProperty(_assertThisInitialized(_this), "_newUploadItem", {
      isUploading: true,
      uploadedPercent: 25,
      previewURL: undefined
    });
    _defineProperty(_assertThisInitialized(_this), "_renderPlaceholder", function () {
      var _this$props = _this.props,
        type = _this$props.type,
        maxFileSize = _this$props.maxFileSize,
        prefixClassName = _this$props.prefixClassName,
        customIcon = _this$props.customIcon,
        dimensions = _this$props.dimensions;
      if (type !== "image") {
        var extensionTypes = type === "file" ? FILE_ACCEPT_TYPES : type;
        return /*#__PURE__*/React.createElement(FilePlaceholder, {
          prefixClassName: "".concat(prefixClassName, "-placeholder"),
          maxFileSize: maxFileSize,
          type: extensionTypes,
          customIcon: customIcon
        });
      }
      return /*#__PURE__*/React.createElement(ImagePlaceholder, {
        prefixClassName: "".concat(prefixClassName, "-placeholder"),
        maxFileSize: maxFileSize,
        type: IMAGE_ACCEPT_TYPES,
        dimensions: dimensions,
        customIcon: customIcon
      });
    });
    _defineProperty(_assertThisInitialized(_this), "_renderFiles", function (uploads) {
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(styles$3.filesList, " ").concat(_this.props.prefixClassName, "-wrapper")
      }, uploads.map(_this._renderPreview), _this.props.multiple ? _this._renderAddMoreButton() : null);
    });
    _defineProperty(_assertThisInitialized(_this), "_renderAddMoreButton", function (type) {
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(styles$3.addNewFile, " ").concat(_this.props.prefixClassName, "-addmore-wrapper")
      }, /*#__PURE__*/React.createElement(Icon, {
        src: PlusIcon,
        className: "".concat(styles$3.addNewFileIcon, " ").concat(_this.props.prefixClassName, "-addmore-icon")
      }), /*#__PURE__*/React.createElement("span", {
        className: "".concat(styles$3.addNewFileText, " ").concat(_this.props.prefixClassName, "-addmore-text")
      }, "Add more images"), _this._renderInput(type));
    });
    _defineProperty(_assertThisInitialized(_this), "_renderInput", function () {
      var type = _this.props.type;
      if (type === "file") {
        type = FILE_ACCEPT_TYPES;
      } else if (type === "image") {
        type = IMAGE_ACCEPT_TYPES;
      }
      return /*#__PURE__*/React.createElement("input", {
        className: "".concat(styles$3.fileInput, " ").concat(_this.props.prefixClassName, "-input"),
        onChange: _this._handleFile,
        type: "file",
        accept: type,
        multiple: _this.props.multiple
      });
    });
    _defineProperty(_assertThisInitialized(_this), "_renderPreview", function (upload, i) {
      if (_this.props.onUpload) return _this._renderOnUploadPreview(i);
      if (upload.fileType === "file") return _this._renderFilePreview(upload, i);
      return _this._renderImagePreview(upload, i);
    });
    _defineProperty(_assertThisInitialized(_this), "_renderImagePreview", function (upload, i) {
      var isUploading = upload.isUploading,
        uploadedPercent = upload.uploadedPercent,
        previewURL = upload.previewURL,
        value = upload.value;
      var imageRatio = _this.props.ratio || 1.77;
      var width = _this.props.baseWidth || 290;
      var minWidth = width;
      var height = width / imageRatio;
      var URL = value || previewURL;
      return /*#__PURE__*/React.createElement("div", {
        key: i,
        className: "".concat(styles$3.imageInputWrapper, " ").concat(_this.props.prefixClassName, "-image-wrapper"),
        style: {
          width: width,
          height: height,
          minWidth: minWidth
        }
      }, _this._renderImage(URL, isUploading, i), _this._renderLoader(isUploading), /*#__PURE__*/React.createElement(ImageProgressBar, {
        prefixClassName: "".concat(_this.props.prefixClassName, "-progressbar"),
        complete: uploadedPercent,
        active: isUploading,
        maxFileSize: _this.props.maxFileSize
      }));
    });
    _defineProperty(_assertThisInitialized(_this), "_renderFilePreview", function (upload, i) {
      var isUploading = upload.isUploading,
        uploadedPercent = upload.uploadedPercent,
        previewURL = upload.previewURL,
        value = upload.value;
      var URL = value || previewURL;
      return /*#__PURE__*/React.createElement("div", {
        key: i,
        className: "".concat(styles$3.filePreviewWrapper, " ").concat(_this.props.prefixClassName, "-file-wrapper")
      }, _this._renderFile(URL, value, isUploading, i), _this._renderLoader(isUploading), /*#__PURE__*/React.createElement(ImageProgressBar, {
        prefixClassName: "".concat(_this.props.prefixClassName, "-progressbar"),
        complete: uploadedPercent,
        active: isUploading,
        maxFileSize: _this.props.maxFileSize
      }));
    });
    _defineProperty(_assertThisInitialized(_this), "_renderOnUploadPreview", function (index) {
      return /*#__PURE__*/React.createElement("div", {
        key: index,
        className: "".concat(styles$3.onUploadPreviewWrapper, " ").concat(_this.props.prefixClassName, "-on-upload-wrapper")
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(styles$3.filePreview, " ").concat(_this.props.prefixClassName, "-on-upload-preview")
      }, /*#__PURE__*/React.createElement("span", {
        className: styles$3.onUploadFileName
      }, _this.state.filenames[index] || "Attachment"), /*#__PURE__*/React.createElement("div", {
        onClick: function onClick() {
          return _this._deleteFile(index);
        },
        className: "".concat(styles$3.filePreview, " ").concat(styles$3.onUploadDeleteWrapper, " \n          ").concat(_this.props.prefixClassName, "-on-upload-preview-delete-wrapper")
      }, /*#__PURE__*/React.createElement(Icon, {
        src: TrashIcon,
        className: "".concat(styles$3.filePreviewDeleteIcon, " \n            ").concat(_this.props.prefixClassName, "-on-upload-preview-delete-icon")
      }))));
    });
    _defineProperty(_assertThisInitialized(_this), "_renderImage", function (previewURL, isUploading, index) {
      var isUploadingClassName = isUploading ? styles$3.isUploading : "";
      if (!isValidURL(previewURL)) {
        return /*#__PURE__*/React.createElement("div", {
          className: "".concat(styles$3.customKeyImage, " ").concat(_this.props.prefixClassName, "-image-preview")
        }, /*#__PURE__*/React.createElement(Icon, {
          className: "".concat(styles$3.carouselImagePlaceholderIcon, " ").concat(_this.props.prefixClassName, "-image-preview-icon"),
          src: PlaceholderIcon$1
        }), previewURL);
      }
      var classNames = {
        main: cc([styles$3.imageInputPreview, isUploadingClassName])
      };
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(styles$3.imageInputPreviewWrapper, " ").concat(_this.props.prefixClassName, "-image-preview")
      }, /*#__PURE__*/React.createElement("img", {
        src: previewURL,
        className: "".concat(classNames.main, " ").concat(_this.props.prefixClassName, "-image-preview-image")
      }), /*#__PURE__*/React.createElement("div", {
        onClick: function onClick() {
          return _this._deleteFile(index);
        },
        className: "".concat(styles$3.imageInputPreviewDelete, " ").concat(_this.props.prefixClassName, "-image-preview-delete")
      }, /*#__PURE__*/React.createElement(Icon, {
        src: TrashIcon,
        className: "".concat(styles$3.imageInputPreviewDeleteIcon, " ").concat(_this.props.prefixClassName, "-image-preview-delete-icon")
      })));
    });
    _defineProperty(_assertThisInitialized(_this), "_renderFile", function (previewURL, value, isUploading, index) {
      var isUploadingClassName = isUploading ? styles$3.isUploading : "";
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(styles$3.filePreview, " ").concat(isUploadingClassName, " ").concat(_this.props.prefixClassName, "-file-preview")
      }, /*#__PURE__*/React.createElement("a", {
        href: value,
        target: "_blank",
        rel: "noopener noreferrer",
        className: "".concat(styles$3.filePreviewTitle, " ").concat(_this.props.prefixClassName, "-file-preview-title")
      }, _this.state.filenames[index] || "Attachment"), /*#__PURE__*/React.createElement("div", {
        onClick: function onClick() {
          return _this._deleteFile(index);
        },
        className: "".concat(styles$3.filePreview, " ").concat(_this.props.prefixClassName, "-file-preview-delete-wrapper")
      }, /*#__PURE__*/React.createElement(Icon, {
        src: TrashIcon,
        className: "".concat(styles$3.filePreviewDeleteIcon, " ").concat(_this.props.prefixClassName, "-file-preview-delete-icon")
      })));
    });
    _defineProperty(_assertThisInitialized(_this), "_renderLoader", function (isUploading) {
      var isUploadingClassName = isUploading ? styles$3.isUploading : "";
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(styles$3.loader, " ").concat(isUploadingClassName, " ").concat(_this.props.prefixClassName, "-loader")
      }, /*#__PURE__*/React.createElement(LoadingComponent, null));
    });
    _defineProperty(_assertThisInitialized(_this), "_transform", function (values) {
      return values.map(function (value) {
        var extenstionRegex = /(?:\.([^.]+))?$/;
        var fileExtension = extenstionRegex.exec(value.split("?")[0])[1];
        var isImage = IMAGE_EXTENSIONS.includes(fileExtension);
        return {
          isUploading: false,
          uploadedPercent: 0,
          fileType: isImage ? "image" : "file",
          previewURL: value,
          value: value
        };
      });
    });
    _defineProperty(_assertThisInitialized(_this), "_deleteFile", function (index) {
      var value = "";
      var onUpload = _this.props.onUpload;
      if (onUpload) {
        _this.setState(function (prevState) {
          var uploads = prevState.uploads.filter(function (_, i) {
            return i !== index;
          });
          var filenames = prevState.filenames.filter(function (_, i) {
            return i !== index;
          });
          return {
            uploads: uploads,
            filenames: filenames
          };
        });
      } else if (_this.props.multiple) {
        value = _this.props.value.filter(function (_, i) {
          return i !== index;
        });
      }
      _this.props.onChange(value);
    });
    _defineProperty(_assertThisInitialized(_this), "_handleFile", function () {
      var onUpload = _this.props.onUpload;
      var selectedFiles = e.target.files;
      // Only upload valid files
      var files = _this._getValidFiles(selectedFiles);
      var filenames = [];
      var uploads = _toConsumableArray(files).map(function (file, i) {
        if (onUpload) {
          onUpload(file, i, files.length);
        } else {
          _this._uploadFile(file, i, files.length);
        }
        filenames[i] = file.name;
        var extenstionRegex = /(?:\.([^.]+))?$/;
        var fileExtension = extenstionRegex.exec(file.name)[1];
        var isImage = IMAGE_EXTENSIONS.includes(fileExtension);
        return _objectSpread2(_objectSpread2({}, _this._newUploadItem), {}, {
          previewURL: URL.createObjectURL(file),
          fileType: isImage ? "image" : "file"
        });
      });
      _this.setState({
        uploads: uploads,
        filenames: filenames
      });
    });
    _defineProperty(_assertThisInitialized(_this), "_uploadFile", function (file, index, numFiles) {
      uploadFile(file, function (uploadedPercent) {
        return _this._onUploadProgress(uploadedPercent, index);
      }, function (fileURL) {
        return _this._onUploadComplete(fileURL, index, numFiles);
      }, _this.props.businessId);
    });
    _defineProperty(_assertThisInitialized(_this), "_onUploadProgress", function (uploadedPercent, index) {
      _this.setState(function (prevState) {
        var uploads = prevState.uploads;
        uploads[index].uploadedPercent = uploadedPercent;
        return {
          uploads: uploads
        };
      });
    });
    _defineProperty(_assertThisInitialized(_this), "_onUploadComplete", function (fileURL, index, numFiles) {
      var value = _this.props.value || [];
      var uploadsCompleted;
      var uploads;
      _this.setState(function (prevState) {
        uploadsCompleted = prevState.uploadsCompleted + 1;
        uploads = prevState.uploads;
        uploads[index].isUploading = false;
        uploads[index].uploadedPercent = 0;
        uploads[index].value = fileURL;
        return {
          uploads: uploads,
          uploadsCompleted: uploadsCompleted
        };
      }, function () {
        if (_this.props.onChange && uploadsCompleted >= numFiles) {
          if (_this.props.multiple) {
            _this.props.onChange(value.concat(uploads.map(function (upload) {
              return upload.value;
            })));
          } else {
            _this.props.onChange(uploads[0].value);
          }
          setTimeout(function () {
            return _this.setState({
              uploads: [],
              uploadsCompleted: 0
            });
          }, 0);
        }
      });
    });
    _defineProperty(_assertThisInitialized(_this), "_getValidFiles", function (files) {
      // Validate the file and add them to the below arrays accordingly
      var validFiles = [];
      var errorMessages = [];
      var _this$props2 = _this.props,
        type = _this$props2.type,
        maxFileSize = _this$props2.maxFileSize,
        customValidate = _this$props2.customValidate;

      // Accepts the file extenstions and the selected file's type to validate
      var fileValidation = function fileValidation(allowedFileTypes, file, fileType) {
        var errorMsg = files.length > 1 ? "Some of the files selected are invalid." : "Invalid File selected.";
        if (customValidate) {
          if (!customValidate(allowedFileTypes, file, fileType)) {
            errorMessages.push(errorMsg);
          }
        } else if (!allowedFileTypes.includes(fileType)) {
          errorMessages.push("".concat(errorMsg, " Supported formats: ").concat(allowedFileTypes));
        }
        if (file.size > 1024 * 1024 * maxFileSize) {
          errorMessages.push("File: ".concat(file.name, " must be less than ").concat(maxFileSize, "MB"));
        }
        if (errorMessages.length === 0) {
          validFiles.push(file);
        }
      };
      _toConsumableArray(files).map(function (file) {
        // Image Extension Check
        if (type === "image") {
          var allowedImageTypes = IMAGE_ACCEPT_TYPES.split(", ");
          fileValidation(allowedImageTypes, file, file.type);
        }

        // File Extenstions Check
        else if (type === "file") {
          var allowedFileTypes = FILE_ACCEPT_TYPES.split(", ");
          fileValidation(allowedFileTypes, file, file.type);
        }

        // Custom Extenstions Check
        else {
          // Removed all the dots from the extensions to match the types with filetypes
          var allowedTypes = type.replace(/\./g, "").split(", ");
          var formattedFileType = file.type.split("/");
          var fileType = formattedFileType[formattedFileType.length - 1];
          fileValidation(allowedTypes, file, fileType);
        }
      });
      if (errorMessages.length > 0) {
        _this.props.onError();
        // Show the toast message
        _this.props.activateToastMessage({
          title: errorMessages.join("\n"),
          type: "NEGATIVE"
        });
      }
      return validFiles;
    });
    _this.state = {
      uploads: [],
      filenames: [],
      uploadsCompleted: 0
    };
    return _this;
  }
  _createClass(File, [{
    key: "render",
    value: function render() {
      var _this2 = this;
      var _this$props3 = this.props,
        value = _this$props3.value,
        multiple = _this$props3.multiple,
        className = _this$props3.className,
        prefixClassName = _this$props3.prefixClassName;
      var values = [];
      if (value) {
        values = multiple ? this._transform(value) : this._transform([value]);
      }
      var uploads = values.concat(this.state.uploads);
      if (this.props.children) return this.props.children(uploads, this._renderInput);
      if (this.props.themed) {
        var type = this.props.type;
        var acceptType = '';
        if (type === "file") {
          acceptType = FILE_ACCEPT_TYPES;
        } else if (type === "image") {
          acceptType = IMAGE_ACCEPT_TYPES;
        } else if (type === "video") {
          acceptType = VIDEO_ACCEPT_TYPES;
        }
        return /*#__PURE__*/React.createElement(FileV2InputWrapper, {
          "data-testid": "file",
          className: "".concat(className, " ").concat(prefixClassName)
        }, /*#__PURE__*/React.createElement(HiddenFileInput, {
          className: "".concat(prefixClassName, "-input"),
          onChange: this._handleFile,
          type: "file",
          accept: acceptType,
          multiple: this.props.multiple
        }), /*#__PURE__*/React.createElement(IconWrapper, null, type === 'document' && /*#__PURE__*/React.createElement(FileIconv2, null), type === 'image' && /*#__PURE__*/React.createElement(ImageIconv2, null), type === 'video' && /*#__PURE__*/React.createElement(VideoIconv2, null)), uploads && uploads.length ? /*#__PURE__*/React.createElement(React.Fragment, null, uploads.map(function (upload, i) {
          return /*#__PURE__*/React.createElement(UploadInfoWrapper, {
            key: i
          }, /*#__PURE__*/React.createElement(Box, {
            backgroundColor: "transparent",
            justifyContent: "space-between",
            padding: "zero"
          }, /*#__PURE__*/React.createElement(Text, {
            variant: "body.md",
            color: "black.haptik"
          }, _this2.state.filenames[i].substring(0, 24)), /*#__PURE__*/React.createElement(Text, {
            variant: "body.md",
            color: "black.haptik"
          }, upload.uploadedPercent, "%")), /*#__PURE__*/React.createElement(ProgressBarWrapper, null, /*#__PURE__*/React.createElement(ProgressBar, {
            style: {
              width: "".concat(upload.uploadedPercent, "%")
            }
          })), /*#__PURE__*/React.createElement(CancelIcon, {
            onClick: function onClick() {
              return _this2._deleteFile(i);
            },
            size: Icon.SIZES.MEDIUM,
            src: "closeV2",
            tooltip: "Cancel Upload"
          }));
        })) : /*#__PURE__*/React.createElement(Box, {
          backgroundColor: "transparent",
          flexDirection: "column"
        }, /*#__PURE__*/React.createElement(Text, {
          variant: "body.md",
          color: "blue.haptik",
          className: "mt-1"
        }, "Click here to upload your ", this.props.type), /*#__PURE__*/React.createElement(Text, {
          variant: "body.sm",
          color: "grey.deep",
          className: "mt-1"
        }, "Maximum ", this.props.type, " size ", this.props.maxFileSize, " MB")));
      }
      return /*#__PURE__*/React.createElement("div", {
        "data-testid": "file",
        className: "".concat(styles$3.files, " ").concat(className, " ").concat(prefixClassName)
      }, uploads.length === 0 ? this._renderPlaceholder() : this._renderFiles(uploads), uploads.length === 0 ? this._renderInput() : null);
    }
  }]);
  return File;
}(React.Component)) || _class);
File.propTypes = {
  /** Names of already choosen file/files, could be a string (if single file), could be an array(if multiple files) */
  value: PropTypes.oneOf([PropTypes.string, PropTypes.array]),
  /** on change function for input */
  onChange: PropTypes.func,
  /** Custom Icon for File upload */
  customIcon: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
  /** Provides a custom validate callback. Returns 'allowedFileTypes, file, fileType' in parameters
   * (Should always return 'true' or 'false' if validation passes/fails respectively)   */
  customValidate: PropTypes.func,
  /** Overrides default upload, a function can be passed to override. Returns 'file, index and numFiles' in
   * parameters. */
  onUpload: PropTypes.func,
  /** Boolean value to allow multiple files */
  multiple: PropTypes.bool,
  /** ratio of the preview image to be generated */
  ratio: PropTypes.string,
  /** Base width for the preview image */
  baseWidth: PropTypes.number,
  /** The classname to be appended to the outermost element */
  className: PropTypes.string,
  /** Prefix to be appended before classname to the outermost element and
   *  variation of prefix gets appended to child elements */
  prefixClassName: PropTypes.string,
  /** Type of file to accept (file or image) or you can pass your own custom formats as a string */
  type: PropTypes.string,
  /** Size of the file allowed in MBs */
  maxFileSize: PropTypes.number,
  /** Dimensions of the file to upload (Doesn't work with type 'file') */
  dimensions: PropTypes.string,
  /** When a custom ui is needed. This render func calls with uploads and the renderInput function */
  children: PropTypes.func,
  activateToastMessage: PropTypes.func,
  /** Gets called whenever file validation returns an error */
  onError: PropTypes.func,
  /** Flag to determine if file input is themed */
  themed: PropTypes.bool
};
File.defaultProps = {
  value: "",
  onChange: function onChange() {},
  customIcon: "",
  onUpload: null,
  customValidate: null,
  multiple: false,
  ratio: "",
  baseWidth: 290,
  className: "",
  prefixClassName: "",
  type: ".png, .jpeg",
  dimensions: "450px X 450px",
  maxFileSize: 5,
  onError: function onError() {},
  themed: false
};
File.classNames = {
  $prefix: "Outermost element",
  "$prefix-placeholder-wrapper": "Outermost element of placeholder",
  "$prefix-placeholder-icon": "Icon element of placeholder",
  "$prefix-placeholder-text-wrapper": "Wraps all the elements containing text inside placeholder",
  "$prefix-placeholder-title": "Title of placeholder",
  "$prefix-placeholder-filesize": "Filesize warning inside placeholder",
  "$prefix-placeholder-format": "Filesize warning inside placeholder",
  "$prefix-placeholder-image-dimensions": "Dimensions text inside placeholder",
  "$prefix-wrapper": "Wrapper of the files",
  "$prefix-file-wrapper": "Wrapper of individual file divs",
  "$prefix-file-preview": "Preview individual file wrapper",
  "$prefix-file-preview-title": "Title of the file in the preview",
  "$prefix-file-preview-delete-wrapper": "Delete icon wrapper over the preview",
  "$prefix-file-preview-delete-icon": "File delete icon",
  "$prefix-on-upload-wrapper": "Wrapper of individual file divs",
  "$prefix-on-upload-preview": "Preview individual custom file wrapper",
  "$prefix-on-upload-preview-delete-wrapper": "Delete icon wrapper over the preview",
  "$prefix-on-upload-preview-delete-icon": "File delete icon",
  "$prefix-loader": "Loader for the file component",
  "$prefix-progressbar-wrapper": "Wrapper for the progress bar",
  "$prefix-progressbar-bar": "Progress bar inside the wrapper",
  "$prefix-image-wrapper": "Wrapper of individual image divs",
  "$prefix-image-preview": "Wrapper of individual image divs",
  "$prefix-image-preview-icon": "Preview icon for image wrapper",
  "$prefix-image-preview-image": "Image inside wrapper",
  "$prefix-image-preview-delete": "Delete wrapper inside image preview",
  "$prefix-image-preview-delete-icon": "Delete icon inside a wrapper image preview",
  "$prefix-input": "Input field",
  "$prefix-addmore-wrapper": "Wrapper for add more button",
  "$prefix-addmore-icon": "Add more button icon",
  "$prefix-addmore-text": "Add more button text"
};
File.__docgenInfo = {
  "description": "",
  "methods": [{
    "name": "_renderPlaceholder",
    "docblock": null,
    "modifiers": [],
    "params": [],
    "returns": null
  }, {
    "name": "_renderFiles",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "uploads",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_renderAddMoreButton",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "type",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_renderInput",
    "docblock": null,
    "modifiers": [],
    "params": [],
    "returns": null
  }, {
    "name": "_renderPreview",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "upload",
      "type": null
    }, {
      "name": "i",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_renderImagePreview",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "upload",
      "type": null
    }, {
      "name": "i",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_renderFilePreview",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "upload",
      "type": null
    }, {
      "name": "i",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_renderOnUploadPreview",
    "docblock": "Renders the preview of the file which has been selected via onUpload prop\n@param {Number} index index of the file selected",
    "modifiers": [],
    "params": [{
      "name": "index",
      "description": "index of the file selected",
      "type": {
        "name": "Number"
      },
      "optional": false
    }],
    "returns": null,
    "description": "Renders the preview of the file which has been selected via onUpload prop"
  }, {
    "name": "_renderImage",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "previewURL",
      "type": null
    }, {
      "name": "isUploading",
      "type": null
    }, {
      "name": "index",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_renderFile",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "previewURL",
      "type": null
    }, {
      "name": "value",
      "type": null
    }, {
      "name": "isUploading",
      "type": null
    }, {
      "name": "index",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_renderLoader",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "isUploading",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_transform",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "values",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_deleteFile",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "index",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_handleFile",
    "docblock": null,
    "modifiers": [],
    "params": [],
    "returns": null
  }, {
    "name": "_uploadFile",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "file",
      "type": null
    }, {
      "name": "index",
      "type": null
    }, {
      "name": "numFiles",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_onUploadProgress",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "uploadedPercent",
      "type": null
    }, {
      "name": "index",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_onUploadComplete",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "fileURL",
      "type": null
    }, {
      "name": "index",
      "type": null
    }, {
      "name": "numFiles",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_getValidFiles",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "files",
      "type": null
    }],
    "returns": null
  }],
  "displayName": "File",
  "props": {
    "value": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "enum",
        "value": [{
          "value": "PropTypes.string",
          "computed": true
        }, {
          "value": "PropTypes.array",
          "computed": true
        }]
      },
      "required": false,
      "description": "Names of already choosen file/files, could be a string (if single file), could be an array(if multiple files)"
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "on change function for input"
    },
    "customIcon": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "union",
        "value": [{
          "name": "object"
        }, {
          "name": "string"
        }]
      },
      "required": false,
      "description": "Custom Icon for File upload"
    },
    "onUpload": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "Overrides default upload, a function can be passed to override. Returns 'file, index and numFiles' in\nparameters."
    },
    "customValidate": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "Provides a custom validate callback. Returns 'allowedFileTypes, file, fileType' in parameters\n(Should always return 'true' or 'false' if validation passes/fails respectively)"
    },
    "multiple": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Boolean value to allow multiple files"
    },
    "ratio": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "ratio of the preview image to be generated"
    },
    "baseWidth": {
      "defaultValue": {
        "value": "290",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "Base width for the preview image"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The classname to be appended to the outermost element"
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Prefix to be appended before classname to the outermost element and\n variation of prefix gets appended to child elements"
    },
    "type": {
      "defaultValue": {
        "value": "\".png, .jpeg\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Type of file to accept (file or image) or you can pass your own custom formats as a string"
    },
    "dimensions": {
      "defaultValue": {
        "value": "\"450px X 450px\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Dimensions of the file to upload (Doesn't work with type 'file')"
    },
    "maxFileSize": {
      "defaultValue": {
        "value": "5",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "Size of the file allowed in MBs"
    },
    "onError": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "Gets called whenever file validation returns an error"
    },
    "themed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Flag to determine if file input is themed"
    },
    "children": {
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "When a custom ui is needed. This render func calls with uploads and the renderInput function"
    },
    "activateToastMessage": {
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    }
  }
};

export default File;
