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

package/dist/esm/elements/Select.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 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/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,170 @@
+/**
+* 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/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,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 '../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/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,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, { useState, 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/tiles/StyledTile.js';
+import '../../styled/tiles/StyledTileDescription.js';
+import '../../styled/tiles/StyledTileIcon.js';
+import '../../styled/tiles/StyledTileInput.js';
+import '../../styled/tiles/StyledTileLabel.js';
+import { Hint } from './Hint.js';
+import { Message } from './Message.js';
+import { Label } from './Label.js';
+
+const FieldComponent = 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 {
+    getInputProps,
+    getMessageProps,
+    ...propGetters
+  } = useField({
+    idPrefix: props.id,
+    hasHint,
+    hasMessage
+  });
+  const fieldProps = useMemo(() => ({
+    ...propGetters,
+    getInputProps,
+    getMessageProps,
+    isLabelActive,
+    setIsLabelActive,
+    isLabelHovered,
+    setIsLabelHovered,
+    hasHint,
+    setHasHint,
+    hasMessage,
+    setHasMessage
+  }), [propGetters, getInputProps, getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]);
+  return React__default.createElement(FieldContext.Provider, {
+    value: fieldProps
+  }, React__default.createElement(StyledField, Object.assign({}, props, {
+    ref: ref
+  })));
+});
+FieldComponent.displayName = 'Field';
+const Field = FieldComponent;
+Field.Hint = Hint;
+Field.Label = Label;
+Field.Message = Message;
+
+export { Field, FieldComponent };

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

@@ -0,0 +1,73 @@
+/**
+* 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, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Legend } from './Legend.js';
+import '../../styled/common/StyledField.js';
+import { StyledFieldset } from '../../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/tiles/StyledTile.js';
+import '../../styled/tiles/StyledTileDescription.js';
+import '../../styled/tiles/StyledTileIcon.js';
+import '../../styled/tiles/StyledTileInput.js';
+import '../../styled/tiles/StyledTileLabel.js';
+import { FieldsetContext } from '../../utils/useFieldsetContext.js';
+
+const FieldsetComponent = forwardRef((props, ref) => {
+  const fieldsetContext = useMemo(() => ({
+    isCompact: props.isCompact
+  }), [props.isCompact]);
+  return React__default.createElement(FieldsetContext.Provider, {
+    value: fieldsetContext
+  }, React__default.createElement(StyledFieldset, Object.assign({}, props, {
+    ref: ref
+  })));
+});
+FieldsetComponent.displayName = 'Fieldset';
+FieldsetComponent.propTypes = {
+  isCompact: PropTypes.bool
+};
+const Fieldset = FieldsetComponent;
+Fieldset.Legend = Legend;
+
+export { Fieldset };

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

@@ -0,0 +1,92 @@
+/**
+* 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, { useEffect } from 'react';
+import useFieldContext from '../../utils/useFieldContext.js';
+import useInputContext from '../../utils/useInputContext.js';
+import '../../styled/common/StyledField.js';
+import '../../styled/common/StyledFieldset.js';
+import '../../styled/common/StyledLegend.js';
+import { StyledHint } from '../../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 { StyledCheckHint } from '../../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 { StyledRadioHint } from '../../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 { StyledToggleHint } from '../../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 Hint = React__default.forwardRef((props, ref) => {
+  const {
+    hasHint,
+    setHasHint,
+    getHintProps
+  } = useFieldContext() || {};
+  const type = useInputContext();
+  useEffect(() => {
+    if (!hasHint && setHasHint) {
+      setHasHint(true);
+    }
+    return () => {
+      if (hasHint && setHasHint) {
+        setHasHint(false);
+      }
+    };
+  }, [hasHint, setHasHint]);
+  let HintComponent;
+  if (type === 'checkbox') {
+    HintComponent = StyledCheckHint;
+  } else if (type === 'radio') {
+    HintComponent = StyledRadioHint;
+  } else if (type === 'toggle') {
+    HintComponent = StyledToggleHint;
+  } else {
+    HintComponent = StyledHint;
+  }
+  let combinedProps = props;
+  if (getHintProps) {
+    combinedProps = getHintProps(combinedProps);
+  }
+  return React__default.createElement(HintComponent, Object.assign({
+    ref: ref
+  }, combinedProps));
+});
+Hint.displayName = 'Hint';
+
+export { Hint };