. In this case, it is up to you\n * to pass all the necessary props (see the list below).\n *\n * The given props will take precedence over context values.\n *\n * @typedef {Object} ListControllerProps\n * @prop {Object} data an id-based dictionary of the list data, e.g. { 123: { id: 123, title: 'hello world' }, 456: { ... } }\n * @prop {Array} ids an array listing the ids of the records in the list, e.g. [123, 456, ...]\n * @prop {integer} total the total number of results for the current filters, excluding pagination. Useful to build the pagination controls. e.g. 23\n * @prop {boolean} loaded boolean that is false until the data is available\n * @prop {boolean} loading boolean that is true on mount, and false once the data was fetched\n * @prop {integer} page the current page. Starts at 1\n * @prop {Function} setPage a callback to change the page, e.g. setPage(3)\n * @prop {integer} perPage the number of results per page. Defaults to 25\n * @prop {Function} setPerPage a callback to change the number of results per page, e.g. setPerPage(25)\n * @prop {Object} currentSort a sort object { field, order }, e.g. { field: 'date', order: 'DESC' }\n * @prop {Function} setSort a callback to change the sort, e.g. setSort('name', 'ASC')\n * @prop {Object} filterValues a dictionary of filter values, e.g. { title: 'lorem', nationality: 'fr' }\n * @prop {Function} setFilters a callback to update the filters, e.g. setFilters(filters, displayedFilters)\n * @prop {Object} displayedFilters a dictionary of the displayed filters, e.g. { title: true, nationality: true }\n * @prop {Function} showFilter a callback to show one of the filters, e.g. showFilter('title', defaultValue)\n * @prop {Function} hideFilter a callback to hide one of the filters, e.g. hideFilter('title')\n * @prop {Array} selectedIds an array listing the ids of the selected rows, e.g. [123, 456]\n * @prop {Function} onSelect callback to change the list of selected rows, e.g. onSelect([456, 789])\n * @prop {Function} onToggleItem callback to toggle the selection of a given record based on its id, e.g. onToggleItem(456)\n * @prop {Function} onUnselectItems callback to clear the selection, e.g. onUnselectItems();\n * @prop {string} basePath deduced from the location, useful for action buttons\n * @prop {string} defaultTitle the translated title based on the resource, e.g. 'Posts'\n * @prop {string} resource the resource name, deduced from the location. e.g. 'posts'\n *\n * @returns {ListControllerProps} list controller props\n *\n * @see useListController for how it is filled\n *\n * @example // custom list view\n *\n * import { useListContext } from 'react-admin';\n *\n * const MyList = () => {\n * const { data, ids, loaded } = useListContext();\n * if (!loaded) {\n * return <>Loading...>;\n * }\n * const records = ids.map(id => data[id]);\n * return (\n * \n * {records.map(record => (\n * - {record.name}
\n * ))}\n *
\n * );\n * }\n *\n * @example // custom pagination\n *\n * import { useListContext } from 'react-admin';\n * import { Button, Toolbar } from '@material-ui/core';\n * import ChevronLeft from '@material-ui/icons/ChevronLeft';\n * import ChevronRight from '@material-ui/icons/ChevronRight';\n *\n * const PrevNextPagination = () => {\n * const { page, perPage, total, setPage } = useListContext();\n * const nbPages = Math.ceil(total / perPage) || 1;\n * return (\n * nbPages > 1 &&\n * \n * {page > 1 &&\n * \n * }\n * {page !== nbPages &&\n * \n * }\n * \n * );\n * }\n */\nvar useListContext = function (props) {\n var context = useContext(ListContext);\n // Props take precedence over the context\n // @ts-ignore\n return useMemo(function () {\n return defaults({}, props != null ? extractListContextProps(props) : {}, context);\n }, [context, props]);\n};\nexport default useListContext;\n/**\n * Extract only the list controller props\n *\n * @param {Object} props Props passed to the useListContext hook\n *\n * @returns {ListControllerProps} List controller props\n */\nvar extractListContextProps = function (_a) {\n var basePath = _a.basePath, currentSort = _a.currentSort, data = _a.data, defaultTitle = _a.defaultTitle, displayedFilters = _a.displayedFilters, filterValues = _a.filterValues, hasCreate = _a.hasCreate, hideFilter = _a.hideFilter, ids = _a.ids, loaded = _a.loaded, loading = _a.loading, onSelect = _a.onSelect, onToggleItem = _a.onToggleItem, onUnselectItems = _a.onUnselectItems, page = _a.page, perPage = _a.perPage, refetch = _a.refetch, resource = _a.resource, selectedIds = _a.selectedIds, setFilters = _a.setFilters, setPage = _a.setPage, setPerPage = _a.setPerPage, setSort = _a.setSort, showFilter = _a.showFilter, total = _a.total;\n return ({\n basePath: basePath,\n currentSort: currentSort,\n data: data,\n defaultTitle: defaultTitle,\n displayedFilters: displayedFilters,\n filterValues: filterValues,\n hasCreate: hasCreate,\n hideFilter: hideFilter,\n ids: ids,\n loaded: loaded,\n loading: loading,\n onSelect: onSelect,\n onToggleItem: onToggleItem,\n onUnselectItems: onUnselectItems,\n page: page,\n perPage: perPage,\n refetch: refetch,\n resource: resource,\n selectedIds: selectedIds,\n setFilters: setFilters,\n setPage: setPage,\n setPerPage: setPerPage,\n setSort: setSort,\n showFilter: showFilter,\n total: total,\n });\n};\n","/**\n * Helper function for calling the dataProvider.getMany() method,\n * and getting a Promise for the records indexed by id in return.\n *\n * @example\n * fetchRelatedRecords(dataProvider)(records, 'post_id', 'posts').then(posts =>\n * posts.map(record => ({\n * ...record,\n * post_title: posts[record.post_id].title,\n * }))\n * );\n */\nvar fetchRelatedRecords = function (dataProvider) { return function (data, field, resource) {\n return dataProvider\n .getMany(resource, { ids: getRelatedIds(data, field) })\n .then(function (_a) {\n var data = _a.data;\n return data.reduce(function (acc, post) {\n acc[post.id] = post;\n return acc;\n }, {});\n });\n}; };\n/**\n * Extracts, aggregates and deduplicates the ids of related records\n *\n * @example\n * const books = [\n * { id: 1, author_id: 123, title: 'Pride and Prejudice' },\n * { id: 2, author_id: 123, title: 'Sense and Sensibility' },\n * { id: 3, author_id: 456, title: 'War and Peace' },\n * ];\n * getRelatedIds(books, 'author_id'); => [123, 456]\n *\n * @example\n * const books = [\n * { id: 1, tag_ids: [1, 2], title: 'Pride and Prejudice' },\n * { id: 2, tag_ids: [2, 3], title: 'Sense and Sensibility' },\n * { id: 3, tag_ids: [4], title: 'War and Peace' },\n * ];\n * getRelatedIds(records, 'tag_ids'); => [1, 2, 3, 4]\n *\n * @param {Object[]} records An array of records\n * @param {string} field the identifier of the record field to use\n */\nexport var getRelatedIds = function (records, field) {\n return Array.from(new Set(records\n .filter(function (record) { return record[field] != null; })\n .map(function (record) { return record[field]; })\n .reduce(function (ids, value) { return ids.concat(value); }, [])));\n};\nexport default fetchRelatedRecords;\n","var __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __rest = (this && this.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport * as React from 'react';\nimport { useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport DownloadIcon from '@material-ui/icons/GetApp';\nimport { fetchRelatedRecords, useDataProvider, useNotify, useListContext, useResourceContext, } from 'ra-core';\nimport Button from './Button';\nvar ExportButton = function (props) {\n var _a = props.maxResults, maxResults = _a === void 0 ? 1000 : _a, onClick = props.onClick, _b = props.label, label = _b === void 0 ? 'ra.action.export' : _b, _c = props.icon, icon = _c === void 0 ? defaultIcon : _c, customExporter = props.exporter, sort = props.sort, // deprecated, to be removed in v4\n rest = __rest(props, [\"maxResults\", \"onClick\", \"label\", \"icon\", \"exporter\", \"sort\"]);\n var _d = useListContext(props), filter = _d.filter, filterValues = _d.filterValues, currentSort = _d.currentSort, exporterFromContext = _d.exporter, total = _d.total;\n var resource = useResourceContext(props);\n var exporter = customExporter || exporterFromContext;\n var dataProvider = useDataProvider();\n var notify = useNotify();\n var handleClick = useCallback(function (event) {\n dataProvider\n .getList(resource, {\n sort: currentSort || sort,\n filter: filter\n ? __assign(__assign({}, filterValues), filter) : filterValues,\n pagination: { page: 1, perPage: maxResults },\n })\n .then(function (_a) {\n var data = _a.data;\n return exporter &&\n exporter(data, fetchRelatedRecords(dataProvider), dataProvider, resource);\n })\n .catch(function (error) {\n console.error(error);\n notify('ra.notification.http_error', { type: 'warning' });\n });\n if (typeof onClick === 'function') {\n onClick(event);\n }\n }, [\n currentSort,\n dataProvider,\n exporter,\n filter,\n filterValues,\n maxResults,\n notify,\n onClick,\n resource,\n sort,\n ]);\n return (React.createElement(Button, __assign({ onClick: handleClick, label: label, disabled: total === 0 }, sanitizeRestProps(rest)), icon));\n};\nvar defaultIcon = React.createElement(DownloadIcon, null);\nvar sanitizeRestProps = function (_a) {\n var basePath = _a.basePath, filterValues = _a.filterValues, resource = _a.resource, rest = __rest(_a, [\"basePath\", \"filterValues\", \"resource\"]);\n return rest;\n};\nExportButton.propTypes = {\n basePath: PropTypes.string,\n exporter: PropTypes.func,\n filterValues: PropTypes.object,\n label: PropTypes.string,\n maxResults: PropTypes.number,\n resource: PropTypes.string,\n sort: PropTypes.exact({\n field: PropTypes.string,\n order: PropTypes.string,\n }),\n icon: PropTypes.element,\n};\nexport default ExportButton;\n","import * as React from 'react';\n/**\n * @ignore - internal component.\n */\n\nvar TableContext = React.createContext();\n\nif (process.env.NODE_ENV !== 'production') {\n TableContext.displayName = 'TableContext';\n}\n\nexport default TableContext;","import * as React from 'react';\n/**\n * @ignore - internal component.\n */\n\nvar Tablelvl2Context = React.createContext();\n\nif (process.env.NODE_ENV !== 'production') {\n Tablelvl2Context.displayName = 'Tablelvl2Context';\n}\n\nexport default Tablelvl2Context;","import _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { chainPropTypes } from '@material-ui/utils';\nimport withStyles from '../styles/withStyles';\nimport capitalize from '../utils/capitalize';\nimport { darken, alpha, lighten } from '../styles/colorManipulator';\nimport TableContext from '../Table/TableContext';\nimport Tablelvl2Context from '../Table/Tablelvl2Context';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: _extends({}, theme.typography.body2, {\n display: 'table-cell',\n verticalAlign: 'inherit',\n // Workaround for a rendering bug with spanned columns in Chrome 62.0.\n // Removes the alpha (sets it to 1), and lightens or darkens the theme color.\n borderBottom: \"1px solid\\n \".concat(theme.palette.type === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68)),\n textAlign: 'left',\n padding: 16\n }),\n\n /* Styles applied to the root element if `variant=\"head\"` or `context.table.head`. */\n head: {\n color: theme.palette.text.primary,\n lineHeight: theme.typography.pxToRem(24),\n fontWeight: theme.typography.fontWeightMedium\n },\n\n /* Styles applied to the root element if `variant=\"body\"` or `context.table.body`. */\n body: {\n color: theme.palette.text.primary\n },\n\n /* Styles applied to the root element if `variant=\"footer\"` or `context.table.footer`. */\n footer: {\n color: theme.palette.text.secondary,\n lineHeight: theme.typography.pxToRem(21),\n fontSize: theme.typography.pxToRem(12)\n },\n\n /* Styles applied to the root element if `size=\"small\"`. */\n sizeSmall: {\n padding: '6px 24px 6px 16px',\n '&:last-child': {\n paddingRight: 16\n },\n '&$paddingCheckbox': {\n width: 24,\n // prevent the checkbox column from growing\n padding: '0 12px 0 16px',\n '&:last-child': {\n paddingLeft: 12,\n paddingRight: 16\n },\n '& > *': {\n padding: 0\n }\n }\n },\n\n /* Styles applied to the root element if `padding=\"checkbox\"`. */\n paddingCheckbox: {\n width: 48,\n // prevent the checkbox column from growing\n padding: '0 0 0 4px',\n '&:last-child': {\n paddingLeft: 0,\n paddingRight: 4\n }\n },\n\n /* Styles applied to the root element if `padding=\"none\"`. */\n paddingNone: {\n padding: 0,\n '&:last-child': {\n padding: 0\n }\n },\n\n /* Styles applied to the root element if `align=\"left\"`. */\n alignLeft: {\n textAlign: 'left'\n },\n\n /* Styles applied to the root element if `align=\"center\"`. */\n alignCenter: {\n textAlign: 'center'\n },\n\n /* Styles applied to the root element if `align=\"right\"`. */\n alignRight: {\n textAlign: 'right',\n flexDirection: 'row-reverse'\n },\n\n /* Styles applied to the root element if `align=\"justify\"`. */\n alignJustify: {\n textAlign: 'justify'\n },\n\n /* Styles applied to the root element if `context.table.stickyHeader={true}`. */\n stickyHeader: {\n position: 'sticky',\n top: 0,\n left: 0,\n zIndex: 2,\n backgroundColor: theme.palette.background.default\n }\n };\n};\n/**\n * The component renders a `` element when the parent context is a header\n * or otherwise a ` | ` element.\n */\n\nvar TableCell = /*#__PURE__*/React.forwardRef(function TableCell(props, ref) {\n var _props$align = props.align,\n align = _props$align === void 0 ? 'inherit' : _props$align,\n classes = props.classes,\n className = props.className,\n component = props.component,\n paddingProp = props.padding,\n scopeProp = props.scope,\n sizeProp = props.size,\n sortDirection = props.sortDirection,\n variantProp = props.variant,\n other = _objectWithoutProperties(props, [\"align\", \"classes\", \"className\", \"component\", \"padding\", \"scope\", \"size\", \"sortDirection\", \"variant\"]);\n\n var table = React.useContext(TableContext);\n var tablelvl2 = React.useContext(Tablelvl2Context);\n var isHeadCell = tablelvl2 && tablelvl2.variant === 'head';\n var role;\n var Component;\n\n if (component) {\n Component = component;\n role = isHeadCell ? 'columnheader' : 'cell';\n } else {\n Component = isHeadCell ? 'th' : 'td';\n }\n\n var scope = scopeProp;\n\n if (!scope && isHeadCell) {\n scope = 'col';\n }\n\n var padding = paddingProp || (table && table.padding ? table.padding : 'normal');\n var size = sizeProp || (table && table.size ? table.size : 'medium');\n var variant = variantProp || tablelvl2 && tablelvl2.variant;\n var ariaSort = null;\n\n if (sortDirection) {\n ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n }\n\n return /*#__PURE__*/React.createElement(Component, _extends({\n ref: ref,\n className: clsx(classes.root, classes[variant], className, align !== 'inherit' && classes[\"align\".concat(capitalize(align))], padding !== 'normal' && classes[\"padding\".concat(capitalize(padding))], size !== 'medium' && classes[\"size\".concat(capitalize(size))], variant === 'head' && table && table.stickyHeader && classes.stickyHeader),\n \"aria-sort\": ariaSort,\n role: role,\n scope: scope\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? TableCell.propTypes = {\n /**\n * Set the text-align on the table cell content.\n *\n * Monetary or generally number fields **should be right aligned** as that allows\n * you to add them up quickly in your head without having to worry about decimals.\n */\n align: PropTypes.oneOf(['center', 'inherit', 'justify', 'left', 'right']),\n\n /**\n * The table cell contents.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes\n /* @typescript-to-proptypes-ignore */\n .elementType,\n\n /**\n * Sets the padding applied to the cell.\n * By default, the Table parent component set the value (`normal`).\n * `default` is deprecated, use `normal` instead.\n */\n padding: chainPropTypes(PropTypes.oneOf(['normal', 'checkbox', 'none', 'default']), function (props) {\n if (props.padding === 'default') {\n return new Error('Material-UI: padding=\"default\" was renamed to padding=\"normal\" for consistency.');\n }\n\n return null;\n }),\n\n /**\n * Set scope attribute.\n */\n scope: PropTypes.string,\n\n /**\n * Specify the size of the cell.\n * By default, the Table parent component set the value (`medium`).\n */\n size: PropTypes.oneOf(['medium', 'small']),\n\n /**\n * Set aria-sort direction.\n */\n sortDirection: PropTypes.oneOf(['asc', 'desc', false]),\n\n /**\n * Specify the cell type.\n * By default, the TableHead, TableBody or TableFooter parent component set the value.\n */\n variant: PropTypes.oneOf(['body', 'footer', 'head'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiTableCell'\n})(TableCell);","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z\"\n}), 'KeyboardArrowLeft');","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z\"\n}), 'KeyboardArrowRight');","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';\nimport KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';\nimport useTheme from '../styles/useTheme';\nimport IconButton from '../IconButton';\n/**\n * @ignore - internal component.\n */\n\nvar _ref = /*#__PURE__*/React.createElement(KeyboardArrowRight, null);\n\nvar _ref2 = /*#__PURE__*/React.createElement(KeyboardArrowLeft, null);\n\nvar _ref3 = /*#__PURE__*/React.createElement(KeyboardArrowLeft, null);\n\nvar _ref4 = /*#__PURE__*/React.createElement(KeyboardArrowRight, null);\n\nvar TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {\n var backIconButtonProps = props.backIconButtonProps,\n count = props.count,\n nextIconButtonProps = props.nextIconButtonProps,\n _props$onChangePage = props.onChangePage,\n onChangePage = _props$onChangePage === void 0 ? function () {} : _props$onChangePage,\n _props$onPageChange = props.onPageChange,\n onPageChange = _props$onPageChange === void 0 ? function () {} : _props$onPageChange,\n page = props.page,\n rowsPerPage = props.rowsPerPage,\n other = _objectWithoutProperties(props, [\"backIconButtonProps\", \"count\", \"nextIconButtonProps\", \"onChangePage\", \"onPageChange\", \"page\", \"rowsPerPage\"]);\n\n var theme = useTheme();\n\n var handleBackButtonClick = function handleBackButtonClick(event) {\n onChangePage(event, page - 1);\n onPageChange(event, page - 1);\n };\n\n var handleNextButtonClick = function handleNextButtonClick(event) {\n onChangePage(event, page + 1);\n onPageChange(event, page + 1);\n };\n\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n ref: ref\n }, other), /*#__PURE__*/React.createElement(IconButton, _extends({\n onClick: handleBackButtonClick,\n disabled: page === 0,\n color: \"inherit\"\n }, backIconButtonProps), theme.direction === 'rtl' ? _ref : _ref2), /*#__PURE__*/React.createElement(IconButton, _extends({\n onClick: handleNextButtonClick,\n disabled: count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false,\n color: \"inherit\"\n }, nextIconButtonProps), theme.direction === 'rtl' ? _ref3 : _ref4));\n});\nprocess.env.NODE_ENV !== \"production\" ? TablePaginationActions.propTypes = {\n /**\n * Props applied to the back arrow [`IconButton`](/api/icon-button/) element.\n */\n backIconButtonProps: PropTypes.object,\n\n /**\n * The total number of rows.\n */\n count: PropTypes.number.isRequired,\n\n /**\n * Props applied to the next arrow [`IconButton`](/api/icon-button/) element.\n */\n nextIconButtonProps: PropTypes.object,\n\n /**\n * Callback fired when the page is changed.\n *\n * @param {object} event The event source of the callback.\n * @param {number} page The page selected.\n */\n onChangePage: PropTypes.func,\n\n /**\n * Callback fired when the page is changed.\n *\n * @param {object} event The event source of the callback.\n * @param {number} page The page selected.\n */\n onPageChange: PropTypes.func,\n\n /**\n * The zero-based index of the current page.\n */\n page: PropTypes.number.isRequired,\n\n /**\n * The number of rows per page.\n */\n rowsPerPage: PropTypes.number.isRequired\n} : void 0;\nexport default TablePaginationActions;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { chainPropTypes } from '@material-ui/utils';\nimport clsx from 'clsx';\nimport deprecatedPropType from '../utils/deprecatedPropType';\nimport withStyles from '../styles/withStyles';\nimport InputBase from '../InputBase';\nimport MenuItem from '../MenuItem';\nimport Select from '../Select';\nimport TableCell from '../TableCell';\nimport Toolbar from '../Toolbar';\nimport Typography from '../Typography';\nimport TablePaginationActions from './TablePaginationActions';\nimport useId from '../utils/unstable_useId';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n color: theme.palette.text.primary,\n fontSize: theme.typography.pxToRem(14),\n overflow: 'auto',\n // Increase the specificity to override TableCell.\n '&:last-child': {\n padding: 0\n }\n },\n\n /* Styles applied to the Toolbar component. */\n toolbar: {\n minHeight: 52,\n paddingRight: 2\n },\n\n /* Styles applied to the spacer element. */\n spacer: {\n flex: '1 1 100%'\n },\n\n /* Styles applied to the caption Typography components if `variant=\"caption\"`. */\n caption: {\n flexShrink: 0\n },\n // TODO v5: `.selectRoot` should be merged with `.input`\n\n /* Styles applied to the Select component root element. */\n selectRoot: {\n marginRight: 32,\n marginLeft: 8\n },\n\n /* Styles applied to the Select component `select` class. */\n select: {\n paddingLeft: 8,\n paddingRight: 24,\n textAlign: 'right',\n textAlignLast: 'right' // Align |