@zendeskgarden/react-forms 9.0.0-next.6 → 9.0.0-next.8

package/dist/esm/elements/Checkbox.js

@@ -0,0 +1,97 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import useFieldContext from '../utils/useFieldContext.js';
+import { InputContext } from '../utils/useInputContext.js';
+import '../styled/common/StyledField.js';
+import '../styled/common/StyledFieldset.js';
+import '../styled/common/StyledLegend.js';
+import '../styled/common/StyledHint.js';
+import '../styled/common/StyledLabel.js';
+import '../styled/common/StyledMessage.js';
+import '../styled/common/StyledMessageIcon.js';
+import '../styled/text/StyledTextInput.js';
+import '../styled/text/StyledTextarea.js';
+import '../styled/text/StyledTextFauxInput.js';
+import '../styled/text/StyledTextMediaInput.js';
+import '../styled/text/StyledTextMediaFigure.js';
+import '../styled/input-group/StyledInputGroup.js';
+import '../styled/checkbox/StyledCheckLabel.js';
+import '../styled/checkbox/StyledCheckHint.js';
+import { StyledCheckInput } from '../styled/checkbox/StyledCheckInput.js';
+import '../styled/checkbox/StyledCheckMessage.js';
+import '../styled/checkbox/StyledCheckSvg.js';
+import '../styled/checkbox/StyledDashSvg.js';
+import '../styled/file-upload/StyledFileUpload.js';
+import '../styled/file-list/StyledFile.js';
+import '../styled/file-list/StyledFileClose.js';
+import '../styled/file-list/StyledFileDelete.js';
+import '../styled/file-list/StyledFileIcon.js';
+import '../styled/file-list/StyledFileList.js';
+import '../styled/file-list/StyledFileListItem.js';
+import '../styled/radio/StyledRadioLabel.js';
+import '../styled/radio/StyledRadioHint.js';
+import '../styled/radio/StyledRadioInput.js';
+import '../styled/radio/StyledRadioMessage.js';
+import '../styled/radio/StyledRadioSvg.js';
+import '../styled/toggle/StyledToggleLabel.js';
+import '../styled/toggle/StyledToggleHint.js';
+import '../styled/toggle/StyledToggleInput.js';
+import '../styled/toggle/StyledToggleMessage.js';
+import '../styled/toggle/StyledToggleSvg.js';
+import '../styled/select/StyledSelect.js';
+import '../styled/select/StyledSelectWrapper.js';
+import '../styled/range/StyledRangeInput.js';
+import '../styled/tiles/StyledTile.js';
+import '../styled/tiles/StyledTileDescription.js';
+import '../styled/tiles/StyledTileIcon.js';
+import '../styled/tiles/StyledTileInput.js';
+import '../styled/tiles/StyledTileLabel.js';
+import useFieldsetContext from '../utils/useFieldsetContext.js';
+
+const Checkbox = React__default.forwardRef((_ref, ref) => {
+  let {
+    indeterminate,
+    children,
+    ...props
+  } = _ref;
+  const fieldsetContext = useFieldsetContext();
+  const fieldContext = useFieldContext();
+  const inputRef = inputElement => {
+    inputElement && (inputElement.indeterminate = indeterminate);
+  };
+  const combinedRef = inputElement => {
+    [inputRef, ref].forEach(targetRef => {
+      if (targetRef) {
+        if (typeof targetRef === 'function') {
+          targetRef(inputElement);
+        } else {
+          targetRef.current = inputElement;
+        }
+      }
+    });
+  };
+  let combinedProps = {
+    ref: combinedRef,
+    ...props,
+    ...fieldsetContext
+  };
+  if (fieldContext) {
+    combinedProps = fieldContext.getInputProps(combinedProps);
+  }
+  return React__default.createElement(InputContext.Provider, {
+    value: "checkbox"
+  }, React__default.createElement(StyledCheckInput, combinedProps), children);
+});
+Checkbox.displayName = 'Checkbox';
+Checkbox.propTypes = {
+  isCompact: PropTypes.bool,
+  indeterminate: PropTypes.bool
+};
+
+export { Checkbox };

package/dist/esm/elements/FileUpload.js

@@ -0,0 +1,75 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import '../styled/common/StyledField.js';
+import '../styled/common/StyledFieldset.js';
+import '../styled/common/StyledLegend.js';
+import '../styled/common/StyledHint.js';
+import '../styled/common/StyledLabel.js';
+import '../styled/common/StyledMessage.js';
+import '../styled/common/StyledMessageIcon.js';
+import '../styled/text/StyledTextInput.js';
+import '../styled/text/StyledTextarea.js';
+import '../styled/text/StyledTextFauxInput.js';
+import '../styled/text/StyledTextMediaInput.js';
+import '../styled/text/StyledTextMediaFigure.js';
+import '../styled/input-group/StyledInputGroup.js';
+import '../styled/checkbox/StyledCheckLabel.js';
+import '../styled/checkbox/StyledCheckHint.js';
+import '../styled/checkbox/StyledCheckInput.js';
+import '../styled/checkbox/StyledCheckMessage.js';
+import '../styled/checkbox/StyledCheckSvg.js';
+import '../styled/checkbox/StyledDashSvg.js';
+import { StyledFileUpload } from '../styled/file-upload/StyledFileUpload.js';
+import '../styled/file-list/StyledFile.js';
+import '../styled/file-list/StyledFileClose.js';
+import '../styled/file-list/StyledFileDelete.js';
+import '../styled/file-list/StyledFileIcon.js';
+import '../styled/file-list/StyledFileList.js';
+import '../styled/file-list/StyledFileListItem.js';
+import '../styled/radio/StyledRadioLabel.js';
+import '../styled/radio/StyledRadioHint.js';
+import '../styled/radio/StyledRadioInput.js';
+import '../styled/radio/StyledRadioMessage.js';
+import '../styled/radio/StyledRadioSvg.js';
+import '../styled/toggle/StyledToggleLabel.js';
+import '../styled/toggle/StyledToggleHint.js';
+import '../styled/toggle/StyledToggleInput.js';
+import '../styled/toggle/StyledToggleMessage.js';
+import '../styled/toggle/StyledToggleSvg.js';
+import '../styled/select/StyledSelect.js';
+import '../styled/select/StyledSelectWrapper.js';
+import '../styled/range/StyledRangeInput.js';
+import '../styled/tiles/StyledTile.js';
+import '../styled/tiles/StyledTileDescription.js';
+import '../styled/tiles/StyledTileIcon.js';
+import '../styled/tiles/StyledTileInput.js';
+import '../styled/tiles/StyledTileLabel.js';
+
+const FileUpload = React__default.forwardRef((_ref, ref) => {
+  let {
+    disabled,
+    ...props
+  } = _ref;
+  return (
+    React__default.createElement(StyledFileUpload, Object.assign({
+      ref: ref,
+      "aria-disabled": disabled
+    }, props, {
+      role: "button"
+    }))
+  );
+});
+FileUpload.propTypes = {
+  isDragging: PropTypes.bool,
+  isCompact: PropTypes.bool,
+  disabled: PropTypes.bool
+};
+FileUpload.displayName = 'FileUpload';
+
+export { FileUpload };

package/dist/esm/elements/Input.js

@@ -0,0 +1,93 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { composeEventHandlers } from '@zendeskgarden/container-utilities';
+import { VALIDATION } from '../types/index.js';
+import useFieldContext from '../utils/useFieldContext.js';
+import { useInputGroupContext } from '../utils/useInputGroupContext.js';
+import '../styled/common/StyledField.js';
+import '../styled/common/StyledFieldset.js';
+import '../styled/common/StyledLegend.js';
+import '../styled/common/StyledHint.js';
+import '../styled/common/StyledLabel.js';
+import '../styled/common/StyledMessage.js';
+import '../styled/common/StyledMessageIcon.js';
+import { StyledTextInput } from '../styled/text/StyledTextInput.js';
+import '../styled/text/StyledTextarea.js';
+import '../styled/text/StyledTextFauxInput.js';
+import '../styled/text/StyledTextMediaInput.js';
+import '../styled/text/StyledTextMediaFigure.js';
+import '../styled/input-group/StyledInputGroup.js';
+import '../styled/checkbox/StyledCheckLabel.js';
+import '../styled/checkbox/StyledCheckHint.js';
+import '../styled/checkbox/StyledCheckInput.js';
+import '../styled/checkbox/StyledCheckMessage.js';
+import '../styled/checkbox/StyledCheckSvg.js';
+import '../styled/checkbox/StyledDashSvg.js';
+import '../styled/file-upload/StyledFileUpload.js';
+import '../styled/file-list/StyledFile.js';
+import '../styled/file-list/StyledFileClose.js';
+import '../styled/file-list/StyledFileDelete.js';
+import '../styled/file-list/StyledFileIcon.js';
+import '../styled/file-list/StyledFileList.js';
+import '../styled/file-list/StyledFileListItem.js';
+import '../styled/radio/StyledRadioLabel.js';
+import '../styled/radio/StyledRadioHint.js';
+import '../styled/radio/StyledRadioInput.js';
+import '../styled/radio/StyledRadioMessage.js';
+import '../styled/radio/StyledRadioSvg.js';
+import '../styled/toggle/StyledToggleLabel.js';
+import '../styled/toggle/StyledToggleHint.js';
+import '../styled/toggle/StyledToggleInput.js';
+import '../styled/toggle/StyledToggleMessage.js';
+import '../styled/toggle/StyledToggleSvg.js';
+import '../styled/select/StyledSelect.js';
+import '../styled/select/StyledSelectWrapper.js';
+import '../styled/range/StyledRangeInput.js';
+import '../styled/tiles/StyledTile.js';
+import '../styled/tiles/StyledTileDescription.js';
+import '../styled/tiles/StyledTileIcon.js';
+import '../styled/tiles/StyledTileInput.js';
+import '../styled/tiles/StyledTileLabel.js';
+
+const Input = React__default.forwardRef((_ref, ref) => {
+  let {
+    onSelect,
+    ...props
+  } = _ref;
+  const fieldContext = useFieldContext();
+  const inputGroupContext = useInputGroupContext();
+  const onSelectHandler = props.readOnly ? composeEventHandlers(onSelect, event => {
+    event.currentTarget.select();
+  }) : onSelect;
+  let combinedProps = {
+    ref,
+    onSelect: onSelectHandler,
+    ...props
+  };
+  if (inputGroupContext) {
+    combinedProps = {
+      ...combinedProps,
+      isCompact: inputGroupContext.isCompact || combinedProps.isCompact,
+      focusInset: props.focusInset === undefined ? true : props.focusInset
+    };
+  }
+  if (fieldContext) {
+    combinedProps = fieldContext.getInputProps(combinedProps);
+  }
+  return React__default.createElement(StyledTextInput, combinedProps);
+});
+Input.propTypes = {
+  isCompact: PropTypes.bool,
+  isBare: PropTypes.bool,
+  focusInset: PropTypes.bool,
+  validation: PropTypes.oneOf(VALIDATION)
+};
+Input.displayName = 'Input';
+
+export { Input };

package/dist/esm/elements/MediaInput.js

@@ -0,0 +1,156 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { composeEventHandlers } from '@zendeskgarden/container-utilities';
+import { mergeRefs } from 'react-merge-refs';
+import { VALIDATION } from '../types/index.js';
+import '../styled/common/StyledField.js';
+import '../styled/common/StyledFieldset.js';
+import '../styled/common/StyledLegend.js';
+import '../styled/common/StyledHint.js';
+import '../styled/common/StyledLabel.js';
+import '../styled/common/StyledMessage.js';
+import '../styled/common/StyledMessageIcon.js';
+import '../styled/text/StyledTextInput.js';
+import '../styled/text/StyledTextarea.js';
+import '../styled/text/StyledTextFauxInput.js';
+import { StyledTextMediaInput } from '../styled/text/StyledTextMediaInput.js';
+import '../styled/text/StyledTextMediaFigure.js';
+import '../styled/input-group/StyledInputGroup.js';
+import '../styled/checkbox/StyledCheckLabel.js';
+import '../styled/checkbox/StyledCheckHint.js';
+import '../styled/checkbox/StyledCheckInput.js';
+import '../styled/checkbox/StyledCheckMessage.js';
+import '../styled/checkbox/StyledCheckSvg.js';
+import '../styled/checkbox/StyledDashSvg.js';
+import '../styled/file-upload/StyledFileUpload.js';
+import '../styled/file-list/StyledFile.js';
+import '../styled/file-list/StyledFileClose.js';
+import '../styled/file-list/StyledFileDelete.js';
+import '../styled/file-list/StyledFileIcon.js';
+import '../styled/file-list/StyledFileList.js';
+import '../styled/file-list/StyledFileListItem.js';
+import '../styled/radio/StyledRadioLabel.js';
+import '../styled/radio/StyledRadioHint.js';
+import '../styled/radio/StyledRadioInput.js';
+import '../styled/radio/StyledRadioMessage.js';
+import '../styled/radio/StyledRadioSvg.js';
+import '../styled/toggle/StyledToggleLabel.js';
+import '../styled/toggle/StyledToggleHint.js';
+import '../styled/toggle/StyledToggleInput.js';
+import '../styled/toggle/StyledToggleMessage.js';
+import '../styled/toggle/StyledToggleSvg.js';
+import '../styled/select/StyledSelect.js';
+import '../styled/select/StyledSelectWrapper.js';
+import '../styled/range/StyledRangeInput.js';
+import '../styled/tiles/StyledTile.js';
+import '../styled/tiles/StyledTileDescription.js';
+import '../styled/tiles/StyledTileIcon.js';
+import '../styled/tiles/StyledTileInput.js';
+import '../styled/tiles/StyledTileLabel.js';
+import { FauxInput } from './faux-input/FauxInput.js';
+import useFieldContext from '../utils/useFieldContext.js';
+
+const MediaInput = React__default.forwardRef((_ref, ref) => {
+  let {
+    start,
+    end,
+    disabled,
+    isCompact,
+    isBare,
+    focusInset,
+    readOnly,
+    validation,
+    wrapperProps = {},
+    wrapperRef,
+    onSelect,
+    ...props
+  } = _ref;
+  const fieldContext = useFieldContext();
+  const inputRef = useRef();
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const {
+    onClick,
+    onFocus,
+    onBlur,
+    onMouseOver,
+    onMouseOut,
+    ...otherWrapperProps
+  } = wrapperProps;
+  const onFauxInputClickHandler = composeEventHandlers(onClick, () => {
+    inputRef.current && inputRef.current.focus();
+  });
+  const onFauxInputFocusHandler = composeEventHandlers(onFocus, () => {
+    setIsFocused(true);
+  });
+  const onFauxInputBlurHandler = composeEventHandlers(onBlur, () => {
+    setIsFocused(false);
+  });
+  const onFauxInputMouseOverHandler = composeEventHandlers(onMouseOver, () => {
+    setIsHovered(true);
+  });
+  const onFauxInputMouseOutHandler = composeEventHandlers(onMouseOut, () => {
+    setIsHovered(false);
+  });
+  const onSelectHandler = readOnly ? composeEventHandlers(onSelect, event => {
+    event.currentTarget.select();
+  }) : onSelect;
+  let combinedProps = {
+    disabled,
+    readOnly,
+    ref: mergeRefs([inputRef, ref]),
+    onSelect: onSelectHandler,
+    ...props
+  };
+  let isLabelHovered;
+  if (fieldContext) {
+    combinedProps = fieldContext.getInputProps(combinedProps);
+    isLabelHovered = fieldContext.isLabelHovered;
+  }
+  return React__default.createElement(FauxInput, Object.assign({
+    tabIndex: null,
+    onClick: onFauxInputClickHandler,
+    onFocus: onFauxInputFocusHandler,
+    onBlur: onFauxInputBlurHandler,
+    onMouseOver: onFauxInputMouseOverHandler,
+    onMouseOut: onFauxInputMouseOutHandler,
+    disabled: disabled,
+    isFocused: isFocused,
+    isHovered: isHovered || isLabelHovered,
+    isCompact: isCompact,
+    isBare: isBare,
+    focusInset: focusInset,
+    readOnly: readOnly,
+    validation: validation,
+    mediaLayout: true
+  }, otherWrapperProps, {
+    ref: wrapperRef
+  }), start && React__default.createElement(FauxInput.StartIcon, {
+    isDisabled: disabled,
+    isFocused: isFocused,
+    isHovered: isHovered || isLabelHovered
+  }, start), React__default.createElement(StyledTextMediaInput, combinedProps), end && React__default.createElement(FauxInput.EndIcon, {
+    isDisabled: disabled,
+    isFocused: isFocused,
+    isHovered: isHovered || isLabelHovered
+  }, end));
+});
+MediaInput.propTypes = {
+  isCompact: PropTypes.bool,
+  isBare: PropTypes.bool,
+  focusInset: PropTypes.bool,
+  validation: PropTypes.oneOf(VALIDATION),
+  start: PropTypes.any,
+  end: PropTypes.any,
+  wrapperProps: PropTypes.object,
+  wrapperRef: PropTypes.any
+};
+MediaInput.displayName = 'MediaInput';
+
+export { MediaInput };

package/dist/esm/elements/Radio.js

@@ -0,0 +1,81 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import useFieldContext from '../utils/useFieldContext.js';
+import { InputContext } from '../utils/useInputContext.js';
+import '../styled/common/StyledField.js';
+import '../styled/common/StyledFieldset.js';
+import '../styled/common/StyledLegend.js';
+import '../styled/common/StyledHint.js';
+import '../styled/common/StyledLabel.js';
+import '../styled/common/StyledMessage.js';
+import '../styled/common/StyledMessageIcon.js';
+import '../styled/text/StyledTextInput.js';
+import '../styled/text/StyledTextarea.js';
+import '../styled/text/StyledTextFauxInput.js';
+import '../styled/text/StyledTextMediaInput.js';
+import '../styled/text/StyledTextMediaFigure.js';
+import '../styled/input-group/StyledInputGroup.js';
+import '../styled/checkbox/StyledCheckLabel.js';
+import '../styled/checkbox/StyledCheckHint.js';
+import '../styled/checkbox/StyledCheckInput.js';
+import '../styled/checkbox/StyledCheckMessage.js';
+import '../styled/checkbox/StyledCheckSvg.js';
+import '../styled/checkbox/StyledDashSvg.js';
+import '../styled/file-upload/StyledFileUpload.js';
+import '../styled/file-list/StyledFile.js';
+import '../styled/file-list/StyledFileClose.js';
+import '../styled/file-list/StyledFileDelete.js';
+import '../styled/file-list/StyledFileIcon.js';
+import '../styled/file-list/StyledFileList.js';
+import '../styled/file-list/StyledFileListItem.js';
+import '../styled/radio/StyledRadioLabel.js';
+import '../styled/radio/StyledRadioHint.js';
+import { StyledRadioInput } from '../styled/radio/StyledRadioInput.js';
+import '../styled/radio/StyledRadioMessage.js';
+import '../styled/radio/StyledRadioSvg.js';
+import '../styled/toggle/StyledToggleLabel.js';
+import '../styled/toggle/StyledToggleHint.js';
+import '../styled/toggle/StyledToggleInput.js';
+import '../styled/toggle/StyledToggleMessage.js';
+import '../styled/toggle/StyledToggleSvg.js';
+import '../styled/select/StyledSelect.js';
+import '../styled/select/StyledSelectWrapper.js';
+import '../styled/range/StyledRangeInput.js';
+import '../styled/tiles/StyledTile.js';
+import '../styled/tiles/StyledTileDescription.js';
+import '../styled/tiles/StyledTileIcon.js';
+import '../styled/tiles/StyledTileInput.js';
+import '../styled/tiles/StyledTileLabel.js';
+import useFieldsetContext from '../utils/useFieldsetContext.js';
+
+const Radio = React__default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const fieldsetContext = useFieldsetContext();
+  const fieldContext = useFieldContext();
+  let combinedProps = {
+    ref,
+    ...props,
+    ...fieldsetContext
+  };
+  if (fieldContext) {
+    combinedProps = fieldContext.getInputProps(combinedProps);
+  }
+  return React__default.createElement(InputContext.Provider, {
+    value: "radio"
+  }, React__default.createElement(StyledRadioInput, combinedProps), children);
+});
+Radio.displayName = 'Radio';
+Radio.propTypes = {
+  isCompact: PropTypes.bool
+};
+
+export { Radio };

package/dist/esm/elements/Range.js

@@ -0,0 +1,108 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import { composeEventHandlers } from '@zendeskgarden/container-utilities';
+import { mergeRefs } from 'react-merge-refs';
+import useFieldContext from '../utils/useFieldContext.js';
+import '../styled/common/StyledField.js';
+import '../styled/common/StyledFieldset.js';
+import '../styled/common/StyledLegend.js';
+import '../styled/common/StyledHint.js';
+import '../styled/common/StyledLabel.js';
+import '../styled/common/StyledMessage.js';
+import '../styled/common/StyledMessageIcon.js';
+import '../styled/text/StyledTextInput.js';
+import '../styled/text/StyledTextarea.js';
+import '../styled/text/StyledTextFauxInput.js';
+import '../styled/text/StyledTextMediaInput.js';
+import '../styled/text/StyledTextMediaFigure.js';
+import '../styled/input-group/StyledInputGroup.js';
+import '../styled/checkbox/StyledCheckLabel.js';
+import '../styled/checkbox/StyledCheckHint.js';
+import '../styled/checkbox/StyledCheckInput.js';
+import '../styled/checkbox/StyledCheckMessage.js';
+import '../styled/checkbox/StyledCheckSvg.js';
+import '../styled/checkbox/StyledDashSvg.js';
+import '../styled/file-upload/StyledFileUpload.js';
+import '../styled/file-list/StyledFile.js';
+import '../styled/file-list/StyledFileClose.js';
+import '../styled/file-list/StyledFileDelete.js';
+import '../styled/file-list/StyledFileIcon.js';
+import '../styled/file-list/StyledFileList.js';
+import '../styled/file-list/StyledFileListItem.js';
+import '../styled/radio/StyledRadioLabel.js';
+import '../styled/radio/StyledRadioHint.js';
+import '../styled/radio/StyledRadioInput.js';
+import '../styled/radio/StyledRadioMessage.js';
+import '../styled/radio/StyledRadioSvg.js';
+import '../styled/toggle/StyledToggleLabel.js';
+import '../styled/toggle/StyledToggleHint.js';
+import '../styled/toggle/StyledToggleInput.js';
+import '../styled/toggle/StyledToggleMessage.js';
+import '../styled/toggle/StyledToggleSvg.js';
+import '../styled/select/StyledSelect.js';
+import '../styled/select/StyledSelectWrapper.js';
+import { StyledRangeInput } from '../styled/range/StyledRangeInput.js';
+import '../styled/tiles/StyledTile.js';
+import '../styled/tiles/StyledTileDescription.js';
+import '../styled/tiles/StyledTileIcon.js';
+import '../styled/tiles/StyledTileInput.js';
+import '../styled/tiles/StyledTileLabel.js';
+
+const Range = React__default.forwardRef((_ref, ref) => {
+  let {
+    hasLowerTrack,
+    min,
+    max,
+    step,
+    ...props
+  } = _ref;
+  const [backgroundSize, setBackgroundSize] = useState('0');
+  const rangeRef = useRef();
+  const fieldContext = useFieldContext();
+  const updateBackgroundWidthFromInput = useCallback(rangeTarget => {
+    let relativeMax = max;
+    const {
+      value
+    } = rangeTarget;
+    if (parseFloat(relativeMax) < parseFloat(min)) {
+      relativeMax = 100;
+    }
+    const percentage = 100 * (value - min) / (relativeMax - min);
+    setBackgroundSize(`${percentage}%`);
+  },
+  [max, min, step]);
+  useEffect(() => {
+    updateBackgroundWidthFromInput(rangeRef.current);
+  }, [rangeRef, updateBackgroundWidthFromInput, props.value]);
+  const onChange = hasLowerTrack ? composeEventHandlers(props.onChange, event => {
+    updateBackgroundWidthFromInput(event.target);
+  }) : props.onChange;
+  let combinedProps = {
+    ref: mergeRefs([rangeRef, ref]),
+    hasLowerTrack,
+    min,
+    max,
+    step,
+    backgroundSize,
+    ...props,
+    onChange
+  };
+  if (fieldContext) {
+    combinedProps = fieldContext.getInputProps(combinedProps);
+  }
+  return React__default.createElement(StyledRangeInput, combinedProps);
+});
+Range.defaultProps = {
+  hasLowerTrack: true,
+  min: 0,
+  max: 100,
+  step: 1
+};
+Range.displayName = 'Range';
+
+export { Range };