@zendeskgarden/react-forms 8.75.0 → 8.76.0

package/dist/esm/elements/Checkbox.js

@@ -0,0 +1,101 @@
+/**
+* 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/range/StyledSlider.js';
+import '../styled/range/StyledSliderThumb.js';
+import '../styled/range/StyledSliderTrack.js';
+import '../styled/range/StyledSliderTrackRail.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,79 @@
+/**
+* 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/range/StyledSlider.js';
+import '../styled/range/StyledSliderThumb.js';
+import '../styled/range/StyledSliderTrack.js';
+import '../styled/range/StyledSliderTrackRail.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,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 { 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/range/StyledSlider.js';
+import '../styled/range/StyledSliderThumb.js';
+import '../styled/range/StyledSliderTrack.js';
+import '../styled/range/StyledSliderTrackRail.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,160 @@
+/**
+* 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/range/StyledSlider.js';
+import '../styled/range/StyledSliderThumb.js';
+import '../styled/range/StyledSliderTrack.js';
+import '../styled/range/StyledSliderTrackRail.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.node,
+  end: PropTypes.node,
+  wrapperProps: PropTypes.object,
+  wrapperRef: PropTypes.any
+};
+MediaInput.displayName = 'MediaInput';
+
+export { MediaInput };

package/dist/esm/elements/MultiThumbRange.js

@@ -0,0 +1,166 @@
+/**
+* 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, { forwardRef, useContext, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeContext } from 'styled-components';
+import { useSlider } from '@zendeskgarden/container-slider';
+import { useDocument } from '@zendeskgarden/react-theming';
+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 '../styled/range/StyledRangeInput.js';
+import { StyledSlider } from '../styled/range/StyledSlider.js';
+import { StyledSliderThumb } from '../styled/range/StyledSliderThumb.js';
+import { StyledSliderTrack } from '../styled/range/StyledSliderTrack.js';
+import { StyledSliderTrackRail } from '../styled/range/StyledSliderTrackRail.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 useFieldContext from '../utils/useFieldContext.js';
+
+const MIN = 0;
+const MAX = 100;
+const MultiThumbRange = forwardRef((_ref, ref) => {
+  let {
+    min = MIN,
+    max = MAX,
+    minValue,
+    maxValue,
+    disabled,
+    step,
+    jump,
+    onChange,
+    onMouseDown,
+    ...props
+  } = _ref;
+  const theme = useContext(ThemeContext);
+  const environment = useDocument(theme);
+  const trackRailRef = useRef(null);
+  const minThumbRef = useRef(null);
+  const maxThumbRef = useRef(null);
+  const {
+    getTrackProps,
+    getMinThumbProps,
+    getMaxThumbProps,
+    trackRect,
+    minValue: updatedMinValue,
+    maxValue: updatedMaxValue
+  } = useSlider({
+    trackRef: trackRailRef,
+    minThumbRef,
+    maxThumbRef,
+    min,
+    max,
+    minValue,
+    maxValue,
+    onChange,
+    step,
+    jump,
+    disabled,
+    rtl: theme.rtl,
+    environment
+  });
+  const {
+    onMouseDown: onSliderMouseDown,
+    ...trackProps
+  } = getTrackProps({
+    onMouseDown
+  });
+  const fieldContext = useFieldContext();
+  const {
+    isLabelHovered,
+    isLabelActive,
+    multiThumbRangeRef
+  } = fieldContext || {};
+  useEffect(() => {
+    if (multiThumbRangeRef) {
+      multiThumbRangeRef.current = minThumbRef.current;
+    }
+  }, [multiThumbRangeRef]);
+  const minPosition = (updatedMinValue - min) / (max - min) * trackRect.width;
+  const maxPosition = (updatedMaxValue - min) / (max - min) * trackRect.width;
+  const sliderBackgroundSize = Math.abs(maxPosition) - Math.abs(minPosition);
+  return React__default.createElement(StyledSlider, Object.assign({
+    ref: ref,
+    onMouseDown: onSliderMouseDown
+  }, props), React__default.createElement(StyledSliderTrack, {
+    backgroundSize: sliderBackgroundSize,
+    backgroundPosition: theme.rtl ? trackRect.width - maxPosition : minPosition,
+    isDisabled: disabled
+  }, React__default.createElement(StyledSliderTrackRail, Object.assign({}, trackProps, {
+    ref: trackRailRef
+  }), React__default.createElement(StyledSliderThumb, Object.assign({}, getMinThumbProps({
+    'aria-label': updatedMinValue
+  }), {
+    isDisabled: disabled,
+    position: minPosition,
+    ref: minThumbRef,
+    "data-garden-active": isLabelActive,
+    "data-garden-hover": isLabelHovered
+  })), React__default.createElement(StyledSliderThumb, Object.assign({}, getMaxThumbProps({
+    'aria-label': updatedMaxValue
+  }), {
+    isDisabled: disabled,
+    position: maxPosition,
+    ref: maxThumbRef
+  })))));
+});
+MultiThumbRange.displayName = 'MultiThumbRange';
+MultiThumbRange.propTypes = {
+  min: PropTypes.number,
+  max: PropTypes.number,
+  minValue: PropTypes.number,
+  maxValue: PropTypes.number,
+  step: PropTypes.number,
+  jump: PropTypes.number,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func
+};
+MultiThumbRange.defaultProps = {
+  min: MIN,
+  max: MAX,
+  step: 1
+};
+
+export { MultiThumbRange };