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

package/dist/esm/elements/file-list/components/Close.js

@@ -0,0 +1,75 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import { composeEventHandlers } from '@zendeskgarden/container-utilities';
+import SvgXStroke from '../../../node_modules/@zendeskgarden/svg-icons/src/12/x-stroke.svg.js';
+import SvgXStroke$1 from '../../../node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js';
+import useFileContext from '../../../utils/useFileContext.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 { StyledFileClose } from '../../../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 { useText } from '@zendeskgarden/react-theming';
+
+const CloseComponent = React__default.forwardRef((props, ref) => {
+  const fileContext = useFileContext();
+  const onMouseDown = composeEventHandlers(props.onMouseDown, event => event.preventDefault()
+  );
+  const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Close');
+  return React__default.createElement(StyledFileClose, Object.assign({
+    ref: ref,
+    "aria-label": ariaLabel
+  }, props, {
+    type: "button",
+    tabIndex: -1,
+    onMouseDown: onMouseDown
+  }), fileContext && fileContext.isCompact ? React__default.createElement(SvgXStroke, null) : React__default.createElement(SvgXStroke$1, null));
+});
+CloseComponent.displayName = 'File.Close';
+const Close = CloseComponent;
+
+export { Close };

package/dist/esm/elements/file-list/components/Delete.js

@@ -0,0 +1,75 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import { composeEventHandlers } from '@zendeskgarden/container-utilities';
+import SvgTrashStroke from '../../../node_modules/@zendeskgarden/svg-icons/src/12/trash-stroke.svg.js';
+import SvgTrashStroke$1 from '../../../node_modules/@zendeskgarden/svg-icons/src/16/trash-stroke.svg.js';
+import useFileContext from '../../../utils/useFileContext.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 { StyledFileDelete } from '../../../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 { useText } from '@zendeskgarden/react-theming';
+
+const DeleteComponent = React__default.forwardRef((props, ref) => {
+  const fileContext = useFileContext();
+  const onMouseDown = composeEventHandlers(props.onMouseDown, event => event.preventDefault()
+  );
+  const ariaLabel = useText(DeleteComponent, props, 'aria-label', 'Delete');
+  return React__default.createElement(StyledFileDelete, Object.assign({
+    ref: ref,
+    "aria-label": ariaLabel
+  }, props, {
+    type: "button",
+    tabIndex: -1,
+    onMouseDown: onMouseDown
+  }), fileContext && fileContext.isCompact ? React__default.createElement(SvgTrashStroke, null) : React__default.createElement(SvgTrashStroke$1, null));
+});
+DeleteComponent.displayName = 'File.Delete';
+const Delete = DeleteComponent;
+
+export { Delete };

package/dist/esm/elements/file-list/components/File.js

@@ -0,0 +1,94 @@
+/**
+* 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, Children } from 'react';
+import PropTypes from 'prop-types';
+import { FILE_TYPE, FILE_VALIDATION } from '../../../types/index.js';
+import { Close } from './Close.js';
+import { Delete } from './Delete.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 { StyledFile } from '../../../styled/file-list/StyledFile.js';
+import '../../../styled/file-list/StyledFileClose.js';
+import '../../../styled/file-list/StyledFileDelete.js';
+import { StyledFileIcon } from '../../../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 { FileContext } from '../../../utils/useFileContext.js';
+import { fileIconsCompact, fileIconsDefault } from '../utils.js';
+
+const FileComponent = forwardRef((_ref, ref) => {
+  let {
+    children,
+    type,
+    isCompact,
+    focusInset,
+    validation,
+    ...props
+  } = _ref;
+  const fileContextValue = useMemo(() => ({
+    isCompact
+  }), [isCompact]);
+  const validationType = validation || type;
+  return React__default.createElement(FileContext.Provider, {
+    value: fileContextValue
+  }, React__default.createElement(StyledFile, Object.assign({}, props, {
+    isCompact: isCompact,
+    focusInset: focusInset,
+    validation: validation,
+    ref: ref
+  }), validationType && React__default.createElement(StyledFileIcon, {
+    isCompact: isCompact
+  }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), Children.map(children, child => typeof child === 'string' ? React__default.createElement("span", null, child) : child)));
+});
+FileComponent.displayName = 'File';
+FileComponent.propTypes = {
+  focusInset: PropTypes.bool,
+  isCompact: PropTypes.bool,
+  type: PropTypes.oneOf(FILE_TYPE),
+  validation: PropTypes.oneOf(FILE_VALIDATION)
+};
+const File = FileComponent;
+File.Close = Close;
+File.Delete = Delete;
+
+export { File };

package/dist/esm/elements/file-list/components/Item.js

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

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

@@ -0,0 +1,50 @@
+/**
+* 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 SvgFilePdfStroke$1 from '../../node_modules/@zendeskgarden/svg-icons/src/12/file-pdf-stroke.svg.js';
+import SvgFileZipStroke$1 from '../../node_modules/@zendeskgarden/svg-icons/src/12/file-zip-stroke.svg.js';
+import SvgFileImageStroke$1 from '../../node_modules/@zendeskgarden/svg-icons/src/12/file-image-stroke.svg.js';
+import SvgFileDocumentStroke$1 from '../../node_modules/@zendeskgarden/svg-icons/src/12/file-document-stroke.svg.js';
+import SvgFileSpreadsheetStroke$1 from '../../node_modules/@zendeskgarden/svg-icons/src/12/file-spreadsheet-stroke.svg.js';
+import SvgFilePresentationStroke$1 from '../../node_modules/@zendeskgarden/svg-icons/src/12/file-presentation-stroke.svg.js';
+import SvgFileGenericStroke$1 from '../../node_modules/@zendeskgarden/svg-icons/src/12/file-generic-stroke.svg.js';
+import SvgCheckCircleStroke$1 from '../../node_modules/@zendeskgarden/svg-icons/src/12/check-circle-stroke.svg.js';
+import SvgFileErrorStroke$1 from '../../node_modules/@zendeskgarden/svg-icons/src/12/file-error-stroke.svg.js';
+import SvgFilePdfStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/file-pdf-stroke.svg.js';
+import SvgFileZipStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/file-zip-stroke.svg.js';
+import SvgFileImageStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/file-image-stroke.svg.js';
+import SvgFileDocumentStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/file-document-stroke.svg.js';
+import SvgFileSpreadsheetStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/file-spreadsheet-stroke.svg.js';
+import SvgFilePresentationStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/file-presentation-stroke.svg.js';
+import SvgFileGenericStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/file-generic-stroke.svg.js';
+import SvgCheckCircleStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/check-circle-stroke.svg.js';
+import SvgFileErrorStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/file-error-stroke.svg.js';
+
+const fileIconsDefault = {
+  pdf: React__default.createElement(SvgFilePdfStroke, null),
+  zip: React__default.createElement(SvgFileZipStroke, null),
+  image: React__default.createElement(SvgFileImageStroke, null),
+  document: React__default.createElement(SvgFileDocumentStroke, null),
+  spreadsheet: React__default.createElement(SvgFileSpreadsheetStroke, null),
+  presentation: React__default.createElement(SvgFilePresentationStroke, null),
+  generic: React__default.createElement(SvgFileGenericStroke, null),
+  success: React__default.createElement(SvgCheckCircleStroke, null),
+  error: React__default.createElement(SvgFileErrorStroke, null)
+};
+const fileIconsCompact = {
+  pdf: React__default.createElement(SvgFilePdfStroke$1, null),
+  zip: React__default.createElement(SvgFileZipStroke$1, null),
+  image: React__default.createElement(SvgFileImageStroke$1, null),
+  document: React__default.createElement(SvgFileDocumentStroke$1, null),
+  spreadsheet: React__default.createElement(SvgFileSpreadsheetStroke$1, null),
+  presentation: React__default.createElement(SvgFilePresentationStroke$1, null),
+  generic: React__default.createElement(SvgFileGenericStroke$1, null),
+  success: React__default.createElement(SvgCheckCircleStroke$1, null),
+  error: React__default.createElement(SvgFileErrorStroke$1, null)
+};
+
+export { fileIconsCompact, fileIconsDefault };

package/dist/esm/elements/input-group/InputGroup.js

@@ -0,0 +1,75 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { InputGroupContext } 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 '../../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 { StyledInputGroup } from '../../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 InputGroup = React__default.forwardRef((_ref, ref) => {
+  let {
+    isCompact,
+    ...props
+  } = _ref;
+  const contextValue = useMemo(() => ({
+    isCompact
+  }), [isCompact]);
+  return React__default.createElement(InputGroupContext.Provider, {
+    value: contextValue
+  }, React__default.createElement(StyledInputGroup, Object.assign({
+    ref: ref,
+    isCompact: isCompact
+  }, props)));
+});
+InputGroup.displayName = 'InputGroup';
+InputGroup.propTypes = {
+  isCompact: PropTypes.bool
+};
+
+export { InputGroup };

package/dist/esm/elements/tiles/Tiles.js

@@ -0,0 +1,64 @@
+/**
+* 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, useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { getControlledValue } from '@zendeskgarden/container-utilities';
+import { TilesContext } from '../../utils/useTilesContext.js';
+import { Tile } from './components/Tile.js';
+import { Description } from './components/Description.js';
+import { Icon } from './components/Icon.js';
+import { Label } from './components/Label.js';
+
+const TilesComponent = forwardRef((_ref, ref) => {
+  let {
+    onChange,
+    value: controlledValue,
+    name,
+    isCentered,
+    ...props
+  } = _ref;
+  const [value, setValue] = useState(controlledValue);
+  const handleOnChange = useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    setValue(args[0].target.value);
+    if (onChange) {
+      onChange(...args);
+    }
+  }, [onChange]);
+  const selectedValue = getControlledValue(controlledValue, value);
+  const tileContext = useMemo(() => ({
+    onChange: handleOnChange,
+    value: selectedValue,
+    name,
+    isCentered
+  }), [handleOnChange, selectedValue, name, isCentered]);
+  return React__default.createElement(TilesContext.Provider, {
+    value: tileContext
+  }, React__default.createElement("div", Object.assign({
+    ref: ref,
+    role: "radiogroup"
+  }, props)));
+});
+TilesComponent.displayName = 'Tiles';
+TilesComponent.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  name: PropTypes.string.isRequired,
+  isCentered: PropTypes.bool
+};
+TilesComponent.defaultProps = {
+  isCentered: true
+};
+const Tiles = TilesComponent;
+Tiles.Description = Description;
+Tiles.Icon = Icon;
+Tiles.Label = Label;
+Tiles.Tile = Tile;
+
+export { Tiles };

package/dist/esm/elements/tiles/components/Description.js

@@ -0,0 +1,64 @@
+/**
+* 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 '../../../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 { StyledTileDescription } from '../../../styled/tiles/StyledTileDescription.js';
+import '../../../styled/tiles/StyledTileIcon.js';
+import '../../../styled/tiles/StyledTileInput.js';
+import '../../../styled/tiles/StyledTileLabel.js';
+import { useTilesContext } from '../../../utils/useTilesContext.js';
+
+const DescriptionComponent = forwardRef((props, ref) => {
+  const tilesContext = useTilesContext();
+  return React__default.createElement(StyledTileDescription, Object.assign({
+    ref: ref,
+    isCentered: tilesContext && tilesContext.isCentered
+  }, props));
+});
+DescriptionComponent.displayName = 'Tiles.Description';
+const Description = DescriptionComponent;
+
+export { Description };

package/dist/esm/elements/tiles/components/Icon.js

@@ -0,0 +1,64 @@
+/**
+* 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 { useTilesContext } from '../../../utils/useTilesContext.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 '../../../styled/range/StyledRangeInput.js';
+import '../../../styled/tiles/StyledTile.js';
+import '../../../styled/tiles/StyledTileDescription.js';
+import { StyledTileIcon } from '../../../styled/tiles/StyledTileIcon.js';
+import '../../../styled/tiles/StyledTileInput.js';
+import '../../../styled/tiles/StyledTileLabel.js';
+
+const IconComponent = forwardRef((props, ref) => {
+  const tileContext = useTilesContext();
+  return React__default.createElement(StyledTileIcon, Object.assign({
+    ref: ref,
+    isCentered: tileContext && tileContext.isCentered
+  }, props));
+});
+IconComponent.displayName = 'Tiles.Icon';
+const Icon = IconComponent;
+
+export { Icon };