@zendeskgarden/react-forms 8.75.1 → 8.76.1

package/dist/esm/elements/Radio.js

@@ -0,0 +1,85 @@
+/**
+* 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/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 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,112 @@
+/**
+* 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/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 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 };

package/dist/esm/elements/Select.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 SvgChevronDownStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
+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 '../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 { StyledSelect } from '../styled/select/StyledSelect.js';
+import { StyledSelectWrapper } from '../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 Select = React__default.forwardRef((_ref, ref) => {
+  let {
+    disabled,
+    isCompact,
+    validation,
+    focusInset,
+    isBare,
+    ...props
+  } = _ref;
+  const fieldContext = useFieldContext();
+  let combinedProps = {
+    disabled,
+    isBare,
+    isCompact,
+    validation,
+    focusInset,
+    ref,
+    ...props
+  };
+  if (fieldContext) {
+    combinedProps = fieldContext.getInputProps(combinedProps);
+  }
+  return React__default.createElement(StyledSelectWrapper, {
+    isCompact: isCompact,
+    isBare: isBare,
+    validation: validation,
+    focusInset: focusInset
+  }, React__default.createElement(StyledSelect, combinedProps), !isBare && React__default.createElement(FauxInput.EndIcon, {
+    isDisabled: disabled
+  }, React__default.createElement(SvgChevronDownStroke, null)));
+});
+Select.propTypes = {
+  isCompact: PropTypes.bool,
+  isBare: PropTypes.bool,
+  focusInset: PropTypes.bool,
+  validation: PropTypes.oneOf(VALIDATION)
+};
+Select.displayName = 'Select';
+
+export { Select };

package/dist/esm/elements/Textarea.js

@@ -0,0 +1,174 @@
+/**
+* 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, useCallback, useLayoutEffect } 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 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 { StyledTextarea } from '../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 parseStyleValue = value => {
+  return parseInt(value, 10) || 0;
+};
+const Textarea = React__default.forwardRef((_ref, ref) => {
+  let {
+    minRows,
+    maxRows,
+    style,
+    onChange,
+    onSelect,
+    ...props
+  } = _ref;
+  const fieldContext = useFieldContext();
+  const textAreaRef = useRef();
+  const shadowTextAreaRef = useRef(null);
+  const [state, setState] = useState({
+    overflow: false,
+    height: 0
+  });
+  const isControlled = props.value !== null && props.value !== undefined;
+  const isAutoResizable = (minRows !== undefined || maxRows !== undefined) && !props.isResizable;
+  const calculateHeight = useCallback(() => {
+    if (!isAutoResizable) {
+      return;
+    }
+    const textarea = textAreaRef.current;
+    const computedStyle = window.getComputedStyle(textarea);
+    const shadowTextArea = shadowTextAreaRef.current;
+    shadowTextArea.style.width = computedStyle.width;
+    shadowTextArea.value = textarea.value || textarea.placeholder || ' ';
+    const boxSizing = computedStyle.boxSizing;
+    const padding = parseStyleValue(computedStyle.paddingBottom) + parseStyleValue(computedStyle.paddingTop);
+    const border = parseStyleValue(computedStyle.borderTopWidth) + parseStyleValue(computedStyle.borderBottomWidth);
+    const innerHeight = shadowTextArea.scrollHeight - padding;
+    shadowTextArea.value = 'x';
+    const singleRowHeight = shadowTextArea.scrollHeight - padding;
+    let outerHeight = innerHeight;
+    if (minRows) {
+      outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
+    }
+    if (maxRows) {
+      outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
+    }
+    outerHeight = Math.max(outerHeight, singleRowHeight);
+    const updatedHeight = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
+    const overflow = Math.abs(outerHeight - innerHeight) <= 1;
+    setState(prevState => {
+      if (updatedHeight > 0 && Math.abs((prevState.height || 0) - updatedHeight) > 1 || prevState.overflow !== overflow) {
+        return {
+          overflow,
+          height: updatedHeight
+        };
+      }
+      return prevState;
+    });
+  }, [maxRows, minRows, textAreaRef, isAutoResizable]);
+  const onChangeHandler = useCallback(e => {
+    if (!isControlled) {
+      calculateHeight();
+    }
+    if (onChange) {
+      onChange(e);
+    }
+  }, [calculateHeight, isControlled, onChange]);
+  useLayoutEffect(() => {
+    calculateHeight();
+  });
+  const computedStyle = {};
+  if (isAutoResizable) {
+    computedStyle.height = state.height;
+    computedStyle.overflow = state.overflow ? 'hidden' : undefined;
+  }
+  const onSelectHandler = props.readOnly ? composeEventHandlers(onSelect, event => {
+    event.currentTarget.select();
+  }) : onSelect;
+  let combinedProps = {
+    ref: mergeRefs([textAreaRef, ref]),
+    rows: minRows,
+    onChange: onChangeHandler,
+    onSelect: onSelectHandler,
+    style: {
+      ...computedStyle,
+      ...style
+    },
+    ...props
+  };
+  if (fieldContext) {
+    combinedProps = fieldContext.getInputProps(combinedProps);
+  }
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTextarea, combinedProps), isAutoResizable && React__default.createElement(StyledTextarea, {
+    "aria-hidden": true,
+    readOnly: true,
+    isHidden: true,
+    className: props.className,
+    ref: shadowTextAreaRef,
+    tabIndex: -1,
+    isBare: props.isBare,
+    isCompact: props.isCompact,
+    style: style
+  }));
+});
+Textarea.propTypes = {
+  isCompact: PropTypes.bool,
+  isBare: PropTypes.bool,
+  focusInset: PropTypes.bool,
+  isResizable: PropTypes.bool,
+  minRows: PropTypes.number,
+  maxRows: PropTypes.number,
+  validation: PropTypes.oneOf(VALIDATION)
+};
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/dist/esm/elements/Toggle.js

@@ -0,0 +1,85 @@
+/**
+* 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 '../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 { StyledToggleInput } from '../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 Toggle = 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: "toggle"
+  }, React__default.createElement(StyledToggleInput, combinedProps), children);
+});
+Toggle.displayName = 'Toggle';
+Toggle.propTypes = {
+  isCompact: PropTypes.bool
+};
+
+export { Toggle };

package/dist/esm/elements/common/Field.js

@@ -0,0 +1,96 @@
+/**
+* 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, useMemo } from 'react';
+import { useField } from '@zendeskgarden/container-field';
+import { FieldContext } from '../../utils/useFieldContext.js';
+import { StyledField } from '../../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 '../../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 Field = React__default.forwardRef((props, ref) => {
+  const [hasHint, setHasHint] = useState(false);
+  const [hasMessage, setHasMessage] = useState(false);
+  const [isLabelActive, setIsLabelActive] = useState(false);
+  const [isLabelHovered, setIsLabelHovered] = useState(false);
+  const multiThumbRangeRef = useRef(null);
+  const {
+    getInputProps,
+    getMessageProps,
+    ...propGetters
+  } = useField({
+    idPrefix: props.id,
+    hasHint,
+    hasMessage
+  });
+  const fieldProps = useMemo(() => ({
+    ...propGetters,
+    getInputProps,
+    getMessageProps,
+    isLabelActive,
+    setIsLabelActive,
+    isLabelHovered,
+    setIsLabelHovered,
+    hasHint,
+    setHasHint,
+    hasMessage,
+    setHasMessage,
+    multiThumbRangeRef
+  }), [propGetters, getInputProps, getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]);
+  return React__default.createElement(FieldContext.Provider, {
+    value: fieldProps
+  }, React__default.createElement(StyledField, Object.assign({}, props, {
+    ref: ref
+  })));
+});
+Field.displayName = 'Field';
+
+export { Field };