New: Many UI Updates and Performance Tweaks

frontend/src/Components/Form/AutoCompleteInput.css

@@ -1,13 +1,13 @@
 .input {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .inputWrapper {

frontend/src/Components/Form/CaptchaInput.css

@@ -3,19 +3,19 @@
 }
 
 .input {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .hasButton {
-  composes: hasButton from 'Components/Form/Input.css';
+  composes: hasButton from '~Components/Form/Input.css';
 }
 
 .recaptchaWrapper {

frontend/src/Components/Form/CheckInput.css

@@ -94,7 +94,7 @@
 }
 
 .helpText {
-  composes: helpText from 'Components/Form/FormInputHelpText.css';
+  composes: helpText from '~Components/Form/FormInputHelpText.css';
 
   margin-top: 8px;
   margin-left: 5px;

frontend/src/Components/Form/DeviceInput.css

@@ -3,6 +3,6 @@
 }
 
 .inputContainer {
-  composes: inputContainer from './TagInput.css';
-  composes: hasButton from 'Components/Form/Input.css';
+  composes: inputContainer from '~./TagInput.css';
+  composes: hasButton from '~Components/Form/Input.css';
 }

frontend/src/Components/Form/DeviceInput.js

@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { icons } from 'Helpers/Props';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
 import Icon from 'Components/Icon';
 import FormInputButton from './FormInputButton';
-import TagInput, { tagShape } from './TagInput';
+import TagInput from './TagInput';
 import styles from './DeviceInput.css';
 
 class DeviceInput extends Component {

frontend/src/Components/Form/EnhancedSelectInput.css

@@ -3,8 +3,8 @@
 }
 
 .enhancedSelect {
-  composes: input from 'Components/Form/Input.css';
-  composes: link from 'Components/Link/Link.css';
+  composes: input from '~Components/Form/Input.css';
+  composes: link from '~Components/Link/Link.css';
 
   position: relative;
   display: flex;
@@ -21,11 +21,11 @@
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .isDisabled {
@@ -62,7 +62,7 @@
 }
 
 .optionsModalBody {
-  composes: modalBody from 'Components/Modal/ModalBody.css';
+  composes: modalBody from '~Components/Modal/ModalBody.css';
 
   display: flex;
   justify-content: center;
@@ -71,7 +71,7 @@
 }
 
 .optionsModalScroller {
-  composes: scroller from 'Components/Scroller/Scroller.css';
+  composes: scroller from '~Components/Scroller/Scroller.css';
 
   border: 1px solid $inputBorderColor;
   border-radius: 4px;

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -87,6 +87,9 @@ class EnhancedSelectInput extends Component {
   constructor(props, context) {
     super(props, context);
 
+    this._buttonRef = {};
+    this._optionsRef = {};
+
     this.state = {
       isOpen: false,
       selectedIndex: getSelectedIndex(props),
@@ -106,14 +109,6 @@ class EnhancedSelectInput extends Component {
   //
   // Control
 
-  _setButtonRef = (ref) => {
-    this._buttonRef = ref;
-  }
-
-  _setOptionsRef = (ref) => {
-    this._optionsRef = ref;
-  }
-
   _addListener() {
     window.addEventListener('click', this.onWindowClick);
   }
@@ -126,8 +121,8 @@ class EnhancedSelectInput extends Component {
   // Listeners
 
   onWindowClick = (event) => {
-    const button = ReactDOM.findDOMNode(this._buttonRef);
-    const options = ReactDOM.findDOMNode(this._optionsRef);
+    const button = ReactDOM.findDOMNode(this._buttonRef.current);
+    const options = ReactDOM.findDOMNode(this._optionsRef.current);
 
     if (!button || this.state.isMobile) {
       return;
@@ -276,75 +271,91 @@ class EnhancedSelectInput extends Component {
             element: styles.tether
           }}
           {...tetherOptions}
-        >
-          <Measure
-            whitelist={['width']}
-            onMeasure={this.onMeasure}
-          >
-            <Link
-              ref={this._setButtonRef}
-              className={classNames(
-                className,
-                hasError && styles.hasError,
-                hasWarning && styles.hasWarning,
-                isDisabled && disabledClassName
-              )}
-              isDisabled={isDisabled}
-              onBlur={this.onBlur}
-              onKeyDown={this.onKeyDown}
-              onPress={this.onPress}
-            >
-              <SelectedValueComponent
-                {...selectedValueOptions}
-                {...selectedOption}
-                isDisabled={isDisabled}
-              >
-                {selectedOption ? selectedOption.value : null}
-              </SelectedValueComponent>
+          renderTarget={
+            (ref) => {
+              this._buttonRef = ref;
 
-              <div
-                className={isDisabled ?
-                  styles.dropdownArrowContainerDisabled :
-                  styles.dropdownArrowContainer
-                }
-              >
-                <Icon
-                  name={icons.CARET_DOWN}
-                />
-              </div>
-            </Link>
-          </Measure>
+              return (
+                <Measure
+                  whitelist={['width']}
+                  onMeasure={this.onMeasure}
+                >
+                  <div ref={ref}>
+                    <Link
+                      className={classNames(
+                        className,
+                        hasError && styles.hasError,
+                        hasWarning && styles.hasWarning,
+                        isDisabled && disabledClassName
+                      )}
+                      isDisabled={isDisabled}
+                      onBlur={this.onBlur}
+                      onKeyDown={this.onKeyDown}
+                      onPress={this.onPress}
+                    >
+                      <SelectedValueComponent
+                        {...selectedValueOptions}
+                        {...selectedOption}
+                        isDisabled={isDisabled}
+                      >
+                        {selectedOption ? selectedOption.value : null}
+                      </SelectedValueComponent>
 
-          {
-            isOpen && !isMobile &&
-              <div
-                ref={this._setOptionsRef}
-                className={styles.optionsContainer}
-                style={{
-                  minWidth: width
-                }}
-              >
-                <div className={styles.options}>
-                  {
-                    values.map((v, index) => {
-                      return (
-                        <OptionComponent
-                          key={v.key}
-                          id={v.key}
-                          isSelected={index === selectedIndex}
-                          {...v}
-                          isMobile={false}
-                          onSelect={this.onSelect}
-                        >
-                          {v.value}
-                        </OptionComponent>
-                      );
-                    })
-                  }
-                </div>
-              </div>
+                      <div
+                        className={isDisabled ?
+                          styles.dropdownArrowContainerDisabled :
+                          styles.dropdownArrowContainer
+                        }
+                      >
+                        <Icon
+                          name={icons.CARET_DOWN}
+                        />
+                      </div>
+                    </Link>
+                  </div>
+                </Measure>
+              );
+            }
           }
-        </TetherComponent>
+          renderElement={
+            (ref) => {
+              this._optionsRef = ref;
+
+              if (!isOpen || isMobile) {
+                return;
+              }
+
+              return (
+                <div
+                  ref={ref}
+                  className={styles.optionsContainer}
+                  style={{
+                    minWidth: width
+                  }}
+                >
+                  <div className={styles.options}>
+                    {
+                      values.map((v, index) => {
+                        return (
+                          <OptionComponent
+                            key={v.key}
+                            id={v.key}
+                            isSelected={index === selectedIndex}
+                            {...v}
+                            isMobile={false}
+                            onSelect={this.onSelect}
+                          >
+                            {v.value}
+                          </OptionComponent>
+                        );
+                      })
+                    }
+                  </div>
+                </div>
+              );
+            }
+          }
+        />
 
         {
           isMobile &&

frontend/src/Components/Form/FormInputButton.css

@@ -1,5 +1,5 @@
 .button {
-  composes: button from 'Components/Link/Button.css';
+  composes: button from '~Components/Link/Button.css';
 
   border-left: none;
   border-top-left-radius: 0;

frontend/src/Components/Form/FormInputGroup.js

@@ -6,6 +6,7 @@ import AutoCompleteInput from './AutoCompleteInput';
 import CaptchaInputConnector from './CaptchaInputConnector';
 import CheckInput from './CheckInput';
 import DeviceInputConnector from './DeviceInputConnector';
+import KeyValueListInput from './KeyValueListInput';
 import NumberInput from './NumberInput';
 import OAuthInputConnector from './OAuthInputConnector';
 import PasswordInput from './PasswordInput';
@@ -34,6 +35,9 @@ function getComponent(type) {
     case inputTypes.DEVICE:
       return DeviceInputConnector;
 
+    case inputTypes.KEY_VALUE_LIST:
+      return KeyValueListInput;
+
     case inputTypes.NUMBER:
       return NumberInput;
 

frontend/src/Components/Form/FormInputHelpText.css

@@ -33,7 +33,7 @@
 }
 
 .link {
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   margin-left: 5px;
 }

frontend/src/Components/Form/KeyValueListInput.css

@@ -0,0 +1,21 @@
+.inputContainer {
+  composes: input from '~Components/Form/Input.css';
+
+  position: relative;
+  min-height: 35px;
+  height: auto;
+
+  &.isFocused {
+    outline: 0;
+    border-color: $inputFocusBorderColor;
+    box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor;
+  }
+}
+
+.hasError {
+  composes: hasError from '~Components/Form/Input.css';
+}
+
+.hasWarning {
+  composes: hasWarning from '~Components/Form/Input.css';
+}

frontend/src/Components/Form/KeyValueListInput.js

@@ -0,0 +1,152 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import KeyValueListInputItem from './KeyValueListInputItem';
+import styles from './KeyValueListInput.css';
+
+class KeyValueListInput extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isFocused: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onItemChange = (index, itemValue) => {
+    const {
+      name,
+      value,
+      onChange
+    } = this.props;
+
+    const newValue = [...value];
+
+    if (index == null) {
+      newValue.push(itemValue);
+    } else {
+      newValue.splice(index, 1, itemValue);
+    }
+
+    onChange({
+      name,
+      value: newValue
+    });
+  }
+
+  onRemoveItem = (index) => {
+    const {
+      name,
+      value,
+      onChange
+    } = this.props;
+
+    const newValue = [...value];
+    newValue.splice(index, 1);
+
+    onChange({
+      name,
+      value: newValue
+    });
+  }
+
+  onFocus = () => {
+    this.setState({
+      isFocused: true
+    });
+  }
+
+  onBlur = () => {
+    this.setState({
+      isFocused: false
+    });
+
+    const {
+      name,
+      value,
+      onChange
+    } = this.props;
+
+    const newValue = value.reduce((acc, v) => {
+      if (v.key || v.value) {
+        acc.push(v);
+      }
+
+      return acc;
+    }, []);
+
+    if (newValue.length !== value.length) {
+      onChange({
+        name,
+        value: newValue
+      });
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      className,
+      value,
+      keyPlaceholder,
+      valuePlaceholder
+    } = this.props;
+
+    const { isFocused } = this.state;
+
+    return (
+      <div className={classNames(
+        className,
+        isFocused && styles.isFocused
+      )}
+      >
+        {
+          [...value, { key: '', value: '' }].map((v, index) => {
+            return (
+              <KeyValueListInputItem
+                key={index}
+                index={index}
+                keyValue={v.key}
+                value={v.value}
+                keyPlaceholder={keyPlaceholder}
+                valuePlaceholder={valuePlaceholder}
+                isNew={index === value.length}
+                onChange={this.onItemChange}
+                onRemove={this.onRemoveItem}
+                onFocus={this.onFocus}
+                onBlur={this.onBlur}
+              />
+            );
+          })
+        }
+      </div>
+    );
+  }
+}
+
+KeyValueListInput.propTypes = {
+  className: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.arrayOf(PropTypes.object).isRequired,
+  hasError: PropTypes.bool,
+  hasWarning: PropTypes.bool,
+  keyPlaceholder: PropTypes.string,
+  valuePlaceholder: PropTypes.string,
+  onChange: PropTypes.func.isRequired
+};
+
+KeyValueListInput.defaultProps = {
+  className: styles.inputContainer,
+  value: []
+};
+
+export default KeyValueListInput;

frontend/src/Components/Form/KeyValueListInputItem.css

@@ -0,0 +1,14 @@
+.itemContainer {
+  display: flex;
+  margin-bottom: 3px;
+  border-bottom: 1px solid $inputBorderColor;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.keyInput,
+.valueInput {
+  border: none;
+}

frontend/src/Components/Form/KeyValueListInputItem.js

@@ -0,0 +1,117 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons } from 'Helpers/Props';
+import IconButton from 'Components/Link/IconButton';
+import TextInput from './TextInput';
+import styles from './KeyValueListInputItem.css';
+
+class KeyValueListInputItem extends Component {
+
+  //
+  // Listeners
+
+  onKeyChange = ({ value: keyValue }) => {
+    const {
+      index,
+      value,
+      onChange
+    } = this.props;
+
+    onChange(index, { key: keyValue, value });
+  }
+
+  onValueChange = ({ value }) => {
+    // TODO: Validate here or validate at a lower level component
+
+    const {
+      index,
+      keyValue,
+      onChange
+    } = this.props;
+
+    onChange(index, { key: keyValue, value });
+  }
+
+  onRemovePress = () => {
+    const {
+      index,
+      onRemove
+    } = this.props;
+
+    onRemove(index);
+  }
+
+  onFocus = () => {
+    this.props.onFocus();
+  }
+
+  onBlur = () => {
+    this.props.onBlur();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      keyValue,
+      value,
+      keyPlaceholder,
+      valuePlaceholder,
+      isNew
+    } = this.props;
+
+    return (
+      <div className={styles.itemContainer}>
+        <TextInput
+          className={styles.keyInput}
+          name="key"
+          value={keyValue}
+          placeholder={keyPlaceholder}
+          onChange={this.onKeyChange}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+        />
+
+        <TextInput
+          className={styles.valueInput}
+          name="value"
+          value={value}
+          placeholder={valuePlaceholder}
+          onChange={this.onValueChange}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+        />
+
+        {
+          !isNew &&
+            <IconButton
+              name={icons.REMOVE}
+              tabIndex={-1}
+              onPress={this.onRemovePress}
+            />
+        }
+      </div>
+    );
+  }
+}
+
+KeyValueListInputItem.propTypes = {
+  index: PropTypes.number,
+  keyValue: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  keyPlaceholder: PropTypes.string.isRequired,
+  valuePlaceholder: PropTypes.string.isRequired,
+  isNew: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+  onFocus: PropTypes.func.isRequired,
+  onBlur: PropTypes.func.isRequired
+};
+
+KeyValueListInputItem.defaultProps = {
+  keyPlaceholder: 'Key',
+  valuePlaceholder: 'Value'
+};
+
+export default KeyValueListInputItem;

frontend/src/Components/Form/PasswordInput.css

@@ -1,5 +1,5 @@
 .input {
-  composes: input from 'Components/Form/TextInput.css';
+  composes: input from '~Components/Form/TextInput.css';
 
   font-family: $passwordFamily;
 }

frontend/src/Components/Form/PathInput.css

@@ -1,17 +1,17 @@
 .path {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .hasFileBrowser {
-  composes: hasButton from 'Components/Form/Input.css';
+  composes: hasButton from '~Components/Form/Input.css';
 }
 
 .pathInputWrapper {
@@ -62,7 +62,7 @@
 }
 
 .fileBrowserButton {
-  composes: button from './FormInputButton.css';
+  composes: button from '~./FormInputButton.css';
 
   height: 35px;
 }

frontend/src/Components/Form/PathInput.js

@@ -111,6 +111,7 @@ class PathInput extends Component {
       value,
       placeholder,
       paths,
+      includeFiles,
       hasError,
       hasWarning,
       hasFileBrowser,
@@ -171,6 +172,7 @@ class PathInput extends Component {
                 isOpen={this.state.isFileBrowserModalOpen}
                 name={name}
                 value={value}
+                includeFiles={includeFiles}
                 onChange={onChange}
                 onModalClose={this.onFileBrowserModalClose}
               />
@@ -188,6 +190,7 @@ PathInput.propTypes = {
   value: PropTypes.string,
   placeholder: PropTypes.string,
   paths: PropTypes.array.isRequired,
+  includeFiles: PropTypes.bool.isRequired,
   hasError: PropTypes.bool,
   hasWarning: PropTypes.bool,
   hasFileBrowser: PropTypes.bool,

frontend/src/Components/Form/PathInputConnector.js

@@ -28,8 +28,8 @@ function createMapStateToProps() {
 }
 
 const mapDispatchToProps = {
-  fetchPaths,
-  clearPaths
+  dispatchFetchPaths: fetchPaths,
+  dispatchClearPaths: clearPaths
 };
 
 class PathInputConnector extends Component {
@@ -38,11 +38,19 @@ class PathInputConnector extends Component {
   // Listeners
 
   onFetchPaths = (path) => {
-    this.props.fetchPaths({ path });
+    const {
+      includeFiles,
+      dispatchFetchPaths
+    } = this.props;
+
+    dispatchFetchPaths({
+      path,
+      includeFiles
+    });
   }
 
   onClearPaths = () => {
-    this.props.clearPaths();
+    this.props.dispatchClearPaths();
   }
 
   //
@@ -60,8 +68,13 @@ class PathInputConnector extends Component {
 }
 
 PathInputConnector.propTypes = {
-  fetchPaths: PropTypes.func.isRequired,
-  clearPaths: PropTypes.func.isRequired
+  includeFiles: PropTypes.bool.isRequired,
+  dispatchFetchPaths: PropTypes.func.isRequired,
+  dispatchClearPaths: PropTypes.func.isRequired
+};
+
+PathInputConnector.defaultProps = {
+  includeFiles: false
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps)(PathInputConnector);

frontend/src/Components/Form/ProviderFieldFormGroup.js

@@ -20,6 +20,8 @@ function getType(type) {
       return inputTypes.NUMBER;
     case 'path':
       return inputTypes.PATH;
+    case 'filepath':
+      return inputTypes.PATH;
     case 'select':
       return inputTypes.SELECT;
     case 'tag':
@@ -84,7 +86,7 @@ function ProviderFieldFormGroup(props) {
         errors={errors}
         warnings={warnings}
         pending={pending}
-        hasFileBrowser={false}
+        includeFiles={type === 'filepath' ? true : undefined}
         onChange={onChange}
         {...otherProps}
       />

frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css

@@ -1,5 +1,5 @@
 .selectedValue {
-  composes: selectedValue from './EnhancedSelectInputSelectedValue.css';
+  composes: selectedValue from '~./EnhancedSelectInputSelectedValue.css';
 
   display: flex;
   align-items: center;

frontend/src/Components/Form/SelectInput.css

@@ -1,15 +1,15 @@
 .select {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 
   padding: 0 11px;
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .isDisabled {

frontend/src/Components/Form/TagInput.css

@@ -1,5 +1,5 @@
 .inputContainer {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 
   position: relative;
   padding: 0;
@@ -14,11 +14,11 @@
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .tags {

frontend/src/Components/Form/TagInput.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import Autosuggest from 'react-autosuggest';
 import classNames from 'classnames';
 import { kinds } from 'Helpers/Props';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
 import TagInputInput from './TagInputInput';
 import TagInputTag from './TagInputTag';
 import styles from './TagInput.css';
@@ -266,11 +267,6 @@ class TagInput extends Component {
   }
 }
 
-export const tagShape = {
-  id: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]).isRequired,
-  name: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
-};
-
 TagInput.propTypes = {
   className: PropTypes.string.isRequired,
   inputClassName: PropTypes.string.isRequired,

frontend/src/Components/Form/TagInputInput.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { kinds } from 'Helpers/Props';
-import { tagShape } from './TagInput';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
 import styles from './TagInputInput.css';
 
 class TagInputInput extends Component {

frontend/src/Components/Form/TagInputTag.js

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { kinds } from 'Helpers/Props';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
 import Label from 'Components/Label';
 import Link from 'Components/Link/Link';
-import { tagShape } from './TagInput';
 
 class TagInputTag extends Component {
 

frontend/src/Components/Form/TextInput.css

@@ -1,5 +1,5 @@
 .input {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 }
 
 .readOnly {
@@ -7,13 +7,13 @@
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .hasButton {
-  composes: hasButton from 'Components/Form/Input.css';
+  composes: hasButton from '~Components/Form/Input.css';
 }