From f6f3b22a4840956e49bed897f251be2c31a012e4 Mon Sep 17 00:00:00 2001
From: hedgecox <luke.hedgecox@aol.com>
Date: Thu, 30 Jan 2020 17:35:17 +0000
Subject: [PATCH 1/5] Investigation

---
 src/CustomInput.js | 171 +++++++++++++++++++++++++--------------------
 1 file changed, 95 insertions(+), 76 deletions(-)

diff --git a/src/CustomInput.js b/src/CustomInput.js
index 705b78901..551bd1375 100644
--- a/src/CustomInput.js
+++ b/src/CustomInput.js
@@ -1,93 +1,112 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { mapToCssModules } from './utils';
-import CustomFileInput from './CustomFileInput';
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import { mapToCssModules } from "./utils";
+import CustomFileInput from "./CustomFileInput";
 
 const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  type: PropTypes.string.isRequired,
-  label: PropTypes.node,
-  inline: PropTypes.bool,
-  valid: PropTypes.bool,
-  invalid: PropTypes.bool,
-  bsSize: PropTypes.string,
-  htmlFor: PropTypes.string,
-  cssModule: PropTypes.object,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]),
-  innerRef: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.string,
-    PropTypes.func,
-  ])
+	className: PropTypes.string,
+	id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+	type: PropTypes.string.isRequired,
+	label: PropTypes.node,
+	inline: PropTypes.bool,
+	valid: PropTypes.bool,
+	invalid: PropTypes.bool,
+	bsSize: PropTypes.string,
+	htmlFor: PropTypes.string,
+	cssModule: PropTypes.object,
+	children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]),
+	innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func])
 };
 
 function CustomInput(props) {
-  const {
-    className,
-    label,
-    inline,
-    valid,
-    invalid,
-    cssModule,
-    children,
-    bsSize,
-    innerRef,
-    htmlFor,
-    ...attributes
-  } = props;
+	const {
+		className,
+		label,
+		inline,
+		valid,
+		invalid,
+		cssModule,
+		children,
+		bsSize,
+		innerRef,
+		htmlFor,
+		hidden,
+		...attributes
+	} = props;
 
-  const type = attributes.type;
+	console.log(hidden);
 
-  const customClass = mapToCssModules(classNames(
-    className,
-    `custom-${type}`,
-    bsSize ? `custom-${type}-${bsSize}` : false,
-  ), cssModule);
+	const type = attributes.type;
 
-  const validationClassNames = mapToCssModules(classNames(
-    invalid && 'is-invalid',
-    valid && 'is-valid',
-  ), cssModule);
+	const customClass = mapToCssModules(
+		classNames(className, `custom-${type}`, bsSize ? `custom-${type}-${bsSize}` : false),
+		cssModule
+	);
 
-  const labelHtmlFor = htmlFor || attributes.id;
+	const validationClassNames = mapToCssModules(
+		classNames(invalid && "is-invalid", valid && "is-valid"),
+		cssModule
+	);
 
-  if (type === 'select') {
-    const { type, ...rest } = attributes;
-    return <select {...rest} ref={innerRef} className={classNames(validationClassNames, customClass)}>{children}</select>;
-  }
+	const labelHtmlFor = htmlFor || attributes.id;
 
-  if (type === 'file') {
-    return (
-      <CustomFileInput {...props}/>
-    );
-  }
+	if (type === "select") {
+		const { type, ...rest } = attributes;
+		return (
+			<select
+				{...rest}
+				ref={innerRef}
+				className={classNames(validationClassNames, customClass)}
+			>
+				{children}
+			</select>
+		);
+	}
 
-  if (type !== 'checkbox' && type !== 'radio' && type !== 'switch') {
-    return <input {...attributes} ref={innerRef} className={classNames(validationClassNames, customClass)} />;
-  }
+	if (type === "file") {
+		return <CustomFileInput {...props} />;
+	}
 
-  const wrapperClasses = classNames(
-    customClass,
-    mapToCssModules(classNames(
-      'custom-control',
-      { 'custom-control-inline': inline }
-    ), cssModule)
-  );
+	if (type !== "checkbox" && type !== "radio" && type !== "switch") {
+		return (
+			<input
+				{...attributes}
+				ref={innerRef}
+				className={classNames(validationClassNames, customClass)}
+			/>
+		);
+	}
 
-  return (
-    <div className={wrapperClasses}>
-      <input
-        {...attributes}
-        type={type === 'switch' ? 'checkbox' : type}
-        ref={innerRef}
-        className={classNames(validationClassNames, mapToCssModules('custom-control-input', cssModule))}
-      />
-      <label className={mapToCssModules('custom-control-label', cssModule)} htmlFor={labelHtmlFor}>{label}</label>
-      {children}
-    </div>
-  );
+	const wrapperClasses = classNames(
+		customClass,
+		mapToCssModules(
+			classNames("custom-control", { "custom-control-inline": inline }),
+			cssModule
+		)
+	);
+
+	return (
+		<div className={wrapperClasses}>
+			<input
+				{...attributes}
+				hidden={true}
+				type={type === "switch" ? "checkbox" : type}
+				ref={innerRef}
+				className={classNames(
+					validationClassNames,
+					mapToCssModules("custom-control-input", cssModule)
+				)}
+			/>
+			<label
+				className={mapToCssModules("custom-control-label", cssModule)}
+				htmlFor={labelHtmlFor}
+			>
+				{label}
+			</label>
+			{children}
+		</div>
+	);
 }
 
 CustomInput.propTypes = propTypes;

From 8e56e4cc6258c78321fddc73577fa88b2935fecc Mon Sep 17 00:00:00 2001
From: Luke Hedgecox <luke@emotion-robotics.com>
Date: Thu, 30 Jan 2020 19:00:10 +0000
Subject: [PATCH 2/5] Fix for custom input hidden attr

---
 src/CustomInput.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/CustomInput.js b/src/CustomInput.js
index 551bd1375..dec86a5ab 100644
--- a/src/CustomInput.js
+++ b/src/CustomInput.js
@@ -31,12 +31,9 @@ function CustomInput(props) {
 		bsSize,
 		innerRef,
 		htmlFor,
-		hidden,
 		...attributes
 	} = props;
 
-	console.log(hidden);
-
 	const type = attributes.type;
 
 	const customClass = mapToCssModules(
@@ -86,11 +83,11 @@ function CustomInput(props) {
 		)
 	);
 
+	const { hidden, ...rest } = attributes;
 	return (
-		<div className={wrapperClasses}>
+		<div className={wrapperClasses} hidden={hidden || false}>
 			<input
-				{...attributes}
-				hidden={true}
+				{...rest}
 				type={type === "switch" ? "checkbox" : type}
 				ref={innerRef}
 				className={classNames(

From 87250eed33ac2b4c3669421243fec52de26d5783 Mon Sep 17 00:00:00 2001
From: Luke Hedgecox <luke@emotion-robotics.com>
Date: Thu, 30 Jan 2020 19:03:10 +0000
Subject: [PATCH 3/5] Updated CustomFileInput to output hidden attr

---
 src/CustomFileInput.js | 49 +++++++++++++++++++++---------------------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/CustomFileInput.js b/src/CustomFileInput.js
index 0cbf54b82..237cd42a0 100644
--- a/src/CustomFileInput.js
+++ b/src/CustomFileInput.js
@@ -4,21 +4,21 @@ import classNames from 'classnames';
 import { mapToCssModules } from './utils';
 
 const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  label: PropTypes.node,
-  valid: PropTypes.bool,
-  invalid: PropTypes.bool,
-  bsSize: PropTypes.string,
-  htmlFor: PropTypes.string,
-  cssModule: PropTypes.object,
-  onChange: PropTypes.func,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]),
-  innerRef: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.string,
-    PropTypes.func,
-  ])
+    className: PropTypes.string,
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    label: PropTypes.node,
+    valid: PropTypes.bool,
+    invalid: PropTypes.bool,
+    bsSize: PropTypes.string,
+    htmlFor: PropTypes.string,
+    cssModule: PropTypes.object,
+    onChange: PropTypes.func,
+    children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]),
+    innerRef: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.string,
+        PropTypes.func,
+    ])
 };
 
 class CustomFileInput extends React.Component {
@@ -26,7 +26,7 @@ class CustomFileInput extends React.Component {
         super(props);
 
         this.state = {
-            files:null,
+            files: null,
         };
 
         this.onChange = this.onChange.bind(this);
@@ -34,18 +34,18 @@ class CustomFileInput extends React.Component {
 
     onChange(e) {
         let input = e.target;
-        let {onChange} = this.props;
+        let { onChange } = this.props;
         let files = this.getSelectedFiles(input);
 
-        if (typeof(onChange) === 'function') {
+        if (typeof (onChange) === 'function') {
             onChange(...arguments);
         }
 
-        this.setState({files})
+        this.setState({ files })
     }
 
     getSelectedFiles(input) {
-        let {multiple} = this.props;
+        let { multiple } = this.props;
 
         if (multiple && input.files) {
             let files = [].slice.call(input.files);
@@ -76,6 +76,7 @@ class CustomFileInput extends React.Component {
             type,
             onChange,
             dataBrowse,
+            hidden,
             ...attributes
         } = this.props;
 
@@ -96,12 +97,12 @@ class CustomFileInput extends React.Component {
         );
 
         const labelHtmlFor = htmlFor || attributes.id;
-        const {files} = this.state;
+        const { files } = this.state;
 
         return (
-            <div className={customClass}>
-                <input type="file" {...attributes} ref={innerRef} className={classNames(validationClassNames, mapToCssModules('custom-file-input', cssModule))} onChange={this.onChange}/>
-                <label className={mapToCssModules('custom-file-label', cssModule)} htmlFor={labelHtmlFor} data-browse={ dataBrowse }>{files || label || 'Choose file'}</label>
+            <div className={customClass} hidden={hidden || false}>
+                <input type="file" {...attributes} ref={innerRef} className={classNames(validationClassNames, mapToCssModules('custom-file-input', cssModule))} onChange={this.onChange} />
+                <label className={mapToCssModules('custom-file-label', cssModule)} htmlFor={labelHtmlFor} data-browse={dataBrowse}>{files || label || 'Choose file'}</label>
                 {children}
             </div>
         );

From 85ae13ce0dfc67fc98f0d45f68cc379c79750357 Mon Sep 17 00:00:00 2001
From: Luke Hedgecox <luke@emotion-robotics.com>
Date: Thu, 30 Jan 2020 23:23:22 +0000
Subject: [PATCH 4/5] fix(CustomInput): Input hidden whitespace

---
 src/CustomFileInput.js | 195 ++++++++++++++++++++++-------------------
 src/CustomInput.js     | 174 ++++++++++++++++++------------------
 2 files changed, 191 insertions(+), 178 deletions(-)

diff --git a/src/CustomFileInput.js b/src/CustomFileInput.js
index 237cd42a0..e0424057a 100644
--- a/src/CustomFileInput.js
+++ b/src/CustomFileInput.js
@@ -1,112 +1,125 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { mapToCssModules } from './utils';
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import { mapToCssModules } from "./utils";
 
 const propTypes = {
-    className: PropTypes.string,
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    label: PropTypes.node,
-    valid: PropTypes.bool,
-    invalid: PropTypes.bool,
-    bsSize: PropTypes.string,
-    htmlFor: PropTypes.string,
-    cssModule: PropTypes.object,
-    onChange: PropTypes.func,
-    children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]),
-    innerRef: PropTypes.oneOfType([
-        PropTypes.object,
-        PropTypes.string,
-        PropTypes.func,
-    ])
+  className: PropTypes.string,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  label: PropTypes.node,
+  valid: PropTypes.bool,
+  invalid: PropTypes.bool,
+  bsSize: PropTypes.string,
+  htmlFor: PropTypes.string,
+  cssModule: PropTypes.object,
+  onChange: PropTypes.func,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.array,
+    PropTypes.func
+  ]),
+  innerRef: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string,
+    PropTypes.func
+  ])
 };
 
 class CustomFileInput extends React.Component {
-    constructor(props) {
-        super(props);
+  constructor(props) {
+    super(props);
 
-        this.state = {
-            files: null,
-        };
+    this.state = {
+      files: null
+    };
 
-        this.onChange = this.onChange.bind(this);
-    }
-
-    onChange(e) {
-        let input = e.target;
-        let { onChange } = this.props;
-        let files = this.getSelectedFiles(input);
+    this.onChange = this.onChange.bind(this);
+  }
 
-        if (typeof (onChange) === 'function') {
-            onChange(...arguments);
-        }
+  onChange(e) {
+    let input = e.target;
+    let { onChange } = this.props;
+    let files = this.getSelectedFiles(input);
 
-        this.setState({ files })
+    if (typeof onChange === "function") {
+      onChange(...arguments);
     }
 
-    getSelectedFiles(input) {
-        let { multiple } = this.props;
+    this.setState({ files });
+  }
 
-        if (multiple && input.files) {
-            let files = [].slice.call(input.files);
+  getSelectedFiles(input) {
+    let { multiple } = this.props;
 
-            return files.map(file => file.name).join(', ');
-        }
+    if (multiple && input.files) {
+      let files = [].slice.call(input.files);
 
-        if (input.value.indexOf('fakepath') !== -1) {
-            let parts = input.value.split('\\');
+      return files.map(file => file.name).join(", ");
+    }
 
-            return parts[parts.length - 1];
-        }
+    if (input.value.indexOf("fakepath") !== -1) {
+      let parts = input.value.split("\\");
 
-        return input.value;
+      return parts[parts.length - 1];
     }
 
-    render() {
-        const {
-            className,
-            label,
-            valid,
-            invalid,
-            cssModule,
-            children,
-            bsSize,
-            innerRef,
-            htmlFor,
-            type,
-            onChange,
-            dataBrowse,
-            hidden,
-            ...attributes
-        } = this.props;
-
-        const customClass = mapToCssModules(
-            classNames(
-                className,
-                `custom-file`,
-            ),
-            cssModule
-        );
-
-        const validationClassNames = mapToCssModules(
-            classNames(
-                invalid && 'is-invalid',
-                valid && 'is-valid',
-            ),
-            cssModule
-        );
-
-        const labelHtmlFor = htmlFor || attributes.id;
-        const { files } = this.state;
-
-        return (
-            <div className={customClass} hidden={hidden || false}>
-                <input type="file" {...attributes} ref={innerRef} className={classNames(validationClassNames, mapToCssModules('custom-file-input', cssModule))} onChange={this.onChange} />
-                <label className={mapToCssModules('custom-file-label', cssModule)} htmlFor={labelHtmlFor} data-browse={dataBrowse}>{files || label || 'Choose file'}</label>
-                {children}
-            </div>
-        );
-    }
+    return input.value;
+  }
+
+  render() {
+    const {
+      className,
+      label,
+      valid,
+      invalid,
+      cssModule,
+      children,
+      bsSize,
+      innerRef,
+      htmlFor,
+      type,
+      onChange,
+      dataBrowse,
+      hidden,
+      ...attributes
+    } = this.props;
+
+    const customClass = mapToCssModules(
+      classNames(className, `custom-file`),
+      cssModule
+    );
+
+    const validationClassNames = mapToCssModules(
+      classNames(invalid && "is-invalid", valid && "is-valid"),
+      cssModule
+    );
+
+    const labelHtmlFor = htmlFor || attributes.id;
+    const { files } = this.state;
+
+    return (
+      <div className={customClass} hidden={hidden || false}>
+        <input
+          type="file"
+          {...attributes}
+          ref={innerRef}
+          className={classNames(
+            validationClassNames,
+            mapToCssModules("custom-file-input", cssModule)
+          )}
+          onChange={this.onChange}
+        />
+        <label
+          className={mapToCssModules("custom-file-label", cssModule)}
+          htmlFor={labelHtmlFor}
+          data-browse={dataBrowse}
+        >
+          {files || label || "Choose file"}
+        </label>
+        {children}
+      </div>
+    );
+  }
 }
 
 CustomFileInput.propTypes = propTypes;
diff --git a/src/CustomInput.js b/src/CustomInput.js
index dec86a5ab..ecda4ece2 100644
--- a/src/CustomInput.js
+++ b/src/CustomInput.js
@@ -5,105 +5,105 @@ import { mapToCssModules } from "./utils";
 import CustomFileInput from "./CustomFileInput";
 
 const propTypes = {
-	className: PropTypes.string,
-	id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-	type: PropTypes.string.isRequired,
-	label: PropTypes.node,
-	inline: PropTypes.bool,
-	valid: PropTypes.bool,
-	invalid: PropTypes.bool,
-	bsSize: PropTypes.string,
-	htmlFor: PropTypes.string,
-	cssModule: PropTypes.object,
-	children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]),
-	innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func])
+  className: PropTypes.string,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  type: PropTypes.string.isRequired,
+  label: PropTypes.node,
+  inline: PropTypes.bool,
+  valid: PropTypes.bool,
+  invalid: PropTypes.bool,
+  bsSize: PropTypes.string,
+  htmlFor: PropTypes.string,
+  cssModule: PropTypes.object,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]),
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func])
 };
 
 function CustomInput(props) {
-	const {
-		className,
-		label,
-		inline,
-		valid,
-		invalid,
-		cssModule,
-		children,
-		bsSize,
-		innerRef,
-		htmlFor,
-		...attributes
-	} = props;
+  const {
+    className,
+    label,
+    inline,
+    valid,
+    invalid,
+    cssModule,
+    children,
+    bsSize,
+    innerRef,
+    htmlFor,
+    ...attributes
+  } = props;
 
-	const type = attributes.type;
+  const type = attributes.type;
 
-	const customClass = mapToCssModules(
-		classNames(className, `custom-${type}`, bsSize ? `custom-${type}-${bsSize}` : false),
-		cssModule
-	);
+  const customClass = mapToCssModules(
+    classNames(className, `custom-${type}`, bsSize ? `custom-${type}-${bsSize}` : false),
+    cssModule
+  );
 
-	const validationClassNames = mapToCssModules(
-		classNames(invalid && "is-invalid", valid && "is-valid"),
-		cssModule
-	);
+  const validationClassNames = mapToCssModules(
+    classNames(invalid && "is-invalid", valid && "is-valid"),
+    cssModule
+  );
 
-	const labelHtmlFor = htmlFor || attributes.id;
+  const labelHtmlFor = htmlFor || attributes.id;
 
-	if (type === "select") {
-		const { type, ...rest } = attributes;
-		return (
-			<select
-				{...rest}
-				ref={innerRef}
-				className={classNames(validationClassNames, customClass)}
-			>
-				{children}
-			</select>
-		);
-	}
+  if (type === "select") {
+    const { type, ...rest } = attributes;
+    return (
+      <select
+        {...rest}
+        ref={innerRef}
+        className={classNames(validationClassNames, customClass)}
+      >
+        {children}
+      </select>
+    );
+  }
 
-	if (type === "file") {
-		return <CustomFileInput {...props} />;
-	}
+  if (type === "file") {
+    return <CustomFileInput {...props} />;
+  }
 
-	if (type !== "checkbox" && type !== "radio" && type !== "switch") {
-		return (
-			<input
-				{...attributes}
-				ref={innerRef}
-				className={classNames(validationClassNames, customClass)}
-			/>
-		);
-	}
+  if (type !== "checkbox" && type !== "radio" && type !== "switch") {
+    return (
+      <input
+        {...attributes}
+        ref={innerRef}
+        className={classNames(validationClassNames, customClass)}
+      />
+    );
+  }
 
-	const wrapperClasses = classNames(
-		customClass,
-		mapToCssModules(
-			classNames("custom-control", { "custom-control-inline": inline }),
-			cssModule
-		)
-	);
+  const wrapperClasses = classNames(
+    customClass,
+    mapToCssModules(
+      classNames("custom-control", { "custom-control-inline": inline }),
+      cssModule
+    )
+  );
 
-	const { hidden, ...rest } = attributes;
-	return (
-		<div className={wrapperClasses} hidden={hidden || false}>
-			<input
-				{...rest}
-				type={type === "switch" ? "checkbox" : type}
-				ref={innerRef}
-				className={classNames(
-					validationClassNames,
-					mapToCssModules("custom-control-input", cssModule)
-				)}
-			/>
-			<label
-				className={mapToCssModules("custom-control-label", cssModule)}
-				htmlFor={labelHtmlFor}
-			>
-				{label}
-			</label>
-			{children}
-		</div>
-	);
+  const { hidden, ...rest } = attributes;
+  return (
+    <div className={wrapperClasses} hidden={hidden || false}>
+      <input
+        {...rest}
+        type={type === "switch" ? "checkbox" : type}
+        ref={innerRef}
+        className={classNames(
+          validationClassNames,
+          mapToCssModules("custom-control-input", cssModule)
+        )}
+      />
+      <label
+        className={mapToCssModules("custom-control-label", cssModule)}
+        htmlFor={labelHtmlFor}
+      >
+        {label}
+      </label>
+      {children}
+    </div>
+  );
 }
 
 CustomInput.propTypes = propTypes;

From a9e9e0e375709f35a890915b82daac7923d54122 Mon Sep 17 00:00:00 2001
From: Luke Hedgecox <luke@emotion-robotics.com>
Date: Thu, 30 Jan 2020 23:28:07 +0000
Subject: [PATCH 5/5] fix(CustomInput): Hidden attr import quotes

---
 src/CustomFileInput.js |  8 ++++----
 src/CustomInput.js     | 10 +++++-----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/CustomFileInput.js b/src/CustomFileInput.js
index e0424057a..9ac4bc3f8 100644
--- a/src/CustomFileInput.js
+++ b/src/CustomFileInput.js
@@ -1,7 +1,7 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-import { mapToCssModules } from "./utils";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { mapToCssModules } from './utils';
 
 const propTypes = {
   className: PropTypes.string,
diff --git a/src/CustomInput.js b/src/CustomInput.js
index ecda4ece2..a1d58789c 100644
--- a/src/CustomInput.js
+++ b/src/CustomInput.js
@@ -1,8 +1,8 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-import { mapToCssModules } from "./utils";
-import CustomFileInput from "./CustomFileInput";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { mapToCssModules } from './utils';
+import CustomFileInput from './CustomFileInput';
 
 const propTypes = {
   className: PropTypes.string,