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

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

@@ -0,0 +1,134 @@
+/**
+* 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 useFieldContext from '../../utils/useFieldContext.js';
+import useFieldsetContext from '../../utils/useFieldsetContext.js';
+import useInputContext 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 { StyledLabel } from '../../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 { StyledCheckLabel } from '../../styled/checkbox/StyledCheckLabel.js';
+import '../../styled/checkbox/StyledCheckHint.js';
+import '../../styled/checkbox/StyledCheckInput.js';
+import '../../styled/checkbox/StyledCheckMessage.js';
+import { StyledCheckSvg } from '../../styled/checkbox/StyledCheckSvg.js';
+import { StyledDashSvg } from '../../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 { StyledRadioLabel } from '../../styled/radio/StyledRadioLabel.js';
+import '../../styled/radio/StyledRadioHint.js';
+import '../../styled/radio/StyledRadioInput.js';
+import '../../styled/radio/StyledRadioMessage.js';
+import { StyledRadioSvg } from '../../styled/radio/StyledRadioSvg.js';
+import { StyledToggleLabel } from '../../styled/toggle/StyledToggleLabel.js';
+import '../../styled/toggle/StyledToggleHint.js';
+import '../../styled/toggle/StyledToggleInput.js';
+import '../../styled/toggle/StyledToggleMessage.js';
+import { StyledToggleSvg } from '../../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 Label = React__default.forwardRef((props, ref) => {
+  const fieldContext = useFieldContext();
+  const fieldsetContext = useFieldsetContext();
+  const type = useInputContext();
+  let combinedProps = props;
+  if (fieldContext) {
+    combinedProps = fieldContext.getLabelProps(combinedProps);
+    if (type === undefined) {
+      const {
+        setIsLabelActive,
+        setIsLabelHovered
+      } = fieldContext;
+      combinedProps = {
+        ...combinedProps,
+        onMouseUp: composeEventHandlers(props.onMouseUp, () => {
+          setIsLabelActive(false);
+        }),
+        onMouseDown: composeEventHandlers(props.onMouseDown, () => {
+          setIsLabelActive(true);
+        }),
+        onMouseEnter: composeEventHandlers(props.onMouseEnter, () => {
+          setIsLabelHovered(true);
+        }),
+        onMouseLeave: composeEventHandlers(props.onMouseLeave, () => {
+          setIsLabelHovered(false);
+        })
+      };
+    }
+  }
+  if (fieldsetContext) {
+    combinedProps = {
+      ...combinedProps,
+      isRegular: combinedProps.isRegular === undefined ? true : combinedProps.isRegular
+    };
+  }
+  if (type === 'radio') {
+    return React__default.createElement(StyledRadioLabel, Object.assign({
+      ref: ref
+    }, combinedProps), React__default.createElement(StyledRadioSvg, null), props.children);
+  } else if (type === 'checkbox') {
+    const onLabelSelect = e => {
+      const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+      if (fieldContext && isFirefox && e.target instanceof Element) {
+        const inputId = e.target.getAttribute('for');
+        if (!inputId) return;
+        const input = document.getElementById(inputId);
+        if (input && input.type === 'checkbox') {
+          if (e.shiftKey) {
+            input.click();
+            input.checked = true;
+          }
+          input.focus();
+        }
+      }
+    };
+    combinedProps = {
+      ...combinedProps,
+      onClick: composeEventHandlers(combinedProps.onClick, onLabelSelect)
+    };
+    return React__default.createElement(StyledCheckLabel, Object.assign({
+      ref: ref
+    }, combinedProps), React__default.createElement(StyledCheckSvg, null), React__default.createElement(StyledDashSvg, null), props.children);
+  } else if (type === 'toggle') {
+    return React__default.createElement(StyledToggleLabel, Object.assign({
+      ref: ref
+    }, combinedProps), React__default.createElement(StyledToggleSvg, null), props.children);
+  }
+  return React__default.createElement(StyledLabel, Object.assign({
+    ref: ref
+  }, combinedProps));
+});
+Label.displayName = 'Label';
+Label.propTypes = {
+  isRegular: PropTypes.bool
+};
+
+export { Label };

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

@@ -0,0 +1,63 @@
+/**
+* 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 } from 'react';
+import '../../styled/common/StyledField.js';
+import '../../styled/common/StyledFieldset.js';
+import { StyledLegend } from '../../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 useFieldsetContext from '../../utils/useFieldsetContext.js';
+
+const LegendComponent = forwardRef((props, ref) => {
+  const fieldsetContext = useFieldsetContext();
+  return React__default.createElement(StyledLegend, Object.assign({}, props, fieldsetContext, {
+    ref: ref
+  }));
+});
+LegendComponent.displayName = 'Fieldset.Legend';
+const Legend = LegendComponent;
+
+export { Legend };

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

@@ -0,0 +1,113 @@
+/**
+* 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 PropTypes from 'prop-types';
+import { useText } from '@zendeskgarden/react-theming';
+import { VALIDATION } from '../../types/index.js';
+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 '../../styled/common/StyledHint.js';
+import '../../styled/common/StyledLabel.js';
+import { StyledMessage } from '../../styled/common/StyledMessage.js';
+import { StyledMessageIcon } from '../../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 { StyledCheckMessage } from '../../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 { StyledRadioMessage } from '../../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 { StyledToggleMessage } from '../../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 Message = React__default.forwardRef((_ref, ref) => {
+  let {
+    validation,
+    validationLabel,
+    children,
+    ...props
+  } = _ref;
+  const {
+    hasMessage,
+    setHasMessage,
+    getMessageProps
+  } = useFieldContext() || {};
+  const type = useInputContext();
+  useEffect(() => {
+    if (!hasMessage && setHasMessage) {
+      setHasMessage(true);
+    }
+    return () => {
+      if (hasMessage && setHasMessage) {
+        setHasMessage(false);
+      }
+    };
+  }, [hasMessage, setHasMessage]);
+  let MessageComponent;
+  if (type === 'checkbox') {
+    MessageComponent = StyledCheckMessage;
+  } else if (type === 'radio') {
+    MessageComponent = StyledRadioMessage;
+  } else if (type === 'toggle') {
+    MessageComponent = StyledToggleMessage;
+  } else {
+    MessageComponent = StyledMessage;
+  }
+  let combinedProps = {
+    validation,
+    validationLabel,
+    ...props
+  };
+  if (getMessageProps) {
+    combinedProps = getMessageProps(combinedProps);
+  }
+  const ariaLabel = useText(Message, combinedProps, 'validationLabel', validation, validation !== undefined);
+  return React__default.createElement(MessageComponent, Object.assign({
+    ref: ref
+  }, combinedProps), validation && React__default.createElement(StyledMessageIcon, {
+    validation: validation,
+    "aria-label": ariaLabel
+  }), children);
+});
+Message.displayName = 'Message';
+Message.propTypes = {
+  validation: PropTypes.oneOf(VALIDATION),
+  validationLabel: PropTypes.string
+};
+
+export { Message };

package/dist/esm/elements/faux-input/FauxInput.js

@@ -0,0 +1,100 @@
+/**
+* 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, useState } from 'react';
+import PropTypes from 'prop-types';
+import { composeEventHandlers } from '@zendeskgarden/container-utilities';
+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 { StyledTextFauxInput } from '../../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 { StartIcon } from './components/StartIcon.js';
+import { EndIcon } from './components/EndIcon.js';
+
+const FauxInputComponent = forwardRef((_ref, ref) => {
+  let {
+    onFocus,
+    onBlur,
+    disabled,
+    readOnly,
+    isFocused: controlledIsFocused,
+    ...props
+  } = _ref;
+  const [isFocused, setIsFocused] = useState(false);
+  const onFocusHandler = composeEventHandlers(onFocus, () => {
+    setIsFocused(true);
+  });
+  const onBlurHandler = composeEventHandlers(onBlur, () => {
+    setIsFocused(false);
+  });
+  return React__default.createElement(StyledTextFauxInput, Object.assign({
+    onFocus: onFocusHandler,
+    onBlur: onBlurHandler,
+    isFocused: controlledIsFocused === undefined ? isFocused : controlledIsFocused,
+    isReadOnly: readOnly,
+    isDisabled: disabled,
+    tabIndex: disabled ? undefined : 0
+  }, props, {
+    ref: ref
+  }));
+});
+FauxInputComponent.displayName = 'FauxInput';
+FauxInputComponent.propTypes = {
+  isCompact: PropTypes.bool,
+  isBare: PropTypes.bool,
+  focusInset: PropTypes.bool,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  validation: PropTypes.oneOf(VALIDATION),
+  isFocused: PropTypes.bool,
+  isHovered: PropTypes.bool
+};
+const FauxInput = FauxInputComponent;
+FauxInput.EndIcon = EndIcon;
+FauxInput.StartIcon = StartIcon;
+
+export { FauxInput };

package/dist/esm/elements/faux-input/components/EndIcon.js

@@ -0,0 +1,59 @@
+/**
+* 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 '../../../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 { StyledTextMediaFigure } from '../../../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 EndIconComponent = props => React__default.createElement(StyledTextMediaFigure, Object.assign({
+  position: "end"
+}, props));
+EndIconComponent.displayName = 'FauxInput.EndIcon';
+const EndIcon = EndIconComponent;
+
+export { EndIcon };

package/dist/esm/elements/faux-input/components/StartIcon.js

@@ -0,0 +1,59 @@
+/**
+* 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 '../../../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 { StyledTextMediaFigure } from '../../../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 StartIconComponent = props => React__default.createElement(StyledTextMediaFigure, Object.assign({
+  position: "start"
+}, props));
+StartIconComponent.displayName = 'FauxInput.StartIcon';
+const StartIcon = StartIconComponent;
+
+export { StartIcon };

package/dist/esm/elements/file-list/FileList.js

@@ -0,0 +1,66 @@
+/**
+* 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 } from 'react';
+import { Item } from './components/Item.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 { StyledFileList } from '../../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 FileListComponent = forwardRef((_ref, ref) => {
+  let {
+    ...props
+  } = _ref;
+  return React__default.createElement(StyledFileList, Object.assign({}, props, {
+    ref: ref
+  }));
+});
+FileListComponent.displayName = 'FileList';
+const FileList = FileListComponent;
+FileList.Item = Item;
+
+export { FileList };