@popmenu/common-ui 0.126.1 → 0.126.2

package/build/{index.js → cjs/index.js}

@@ -1,55 +1,11 @@
 'use strict';
 
-var Alert = require('@material-ui/lab/Alert');
 var core = require('@material-ui/core');
-var AppBar = require('@material-ui/core/AppBar');
+var lab = require('@material-ui/lab');
 var tslib = require('tslib');
-var React = require('react');
-var MuiAvatar = require('@material-ui/core/Avatar');
 var webIcons = require('@popmenu/web-icons');
+var React = require('react');
 var classNames = require('classnames');
-var styles = require('@material-ui/core/styles');
-var Badge = require('@material-ui/core/Badge');
-var MuiButton = require('@material-ui/core/Button');
-var CircularProgress = require('@material-ui/core/CircularProgress');
-var ButtonGroup = require('@material-ui/core/ButtonGroup');
-var Card = require('@material-ui/core/Card');
-var CardActionArea = require('@material-ui/core/CardActionArea');
-var CardActions = require('@material-ui/core/CardActions');
-var CardContent = require('@material-ui/core/CardContent');
-var CardHeader = require('@material-ui/core/CardHeader');
-var CardMedia = require('@material-ui/core/CardMedia');
-var MuiCheckbox = require('@material-ui/core/Checkbox');
-var FormControlLabel = require('@material-ui/core/FormControlLabel');
-var MuiChip = require('@material-ui/core/Chip');
-var Collapse = require('@material-ui/core/Collapse');
-var Dialog = require('@material-ui/core/Dialog');
-var DialogActions = require('@material-ui/core/DialogActions');
-var DialogContent = require('@material-ui/core/DialogContent');
-var DialogTitle = require('@material-ui/core/DialogTitle');
-var Drawer = require('@material-ui/core/Drawer');
-var FormControl = require('@material-ui/core/FormControl');
-var Grid = require('@material-ui/core/Grid');
-var MuiIconButton = require('@material-ui/core/IconButton');
-var InputAdornment = require('@material-ui/core/InputAdornment');
-var LinearProgress = require('@material-ui/core/LinearProgress');
-var List = require('@material-ui/core/List');
-var ListItem = require('@material-ui/core/ListItem');
-var ListItemAvatar = require('@material-ui/core/ListItemAvatar');
-var ListItemIcon = require('@material-ui/core/ListItemIcon');
-var ListItemSecondaryAction = require('@material-ui/core/ListItemSecondaryAction');
-var ListItemText = require('@material-ui/core/ListItemText');
-var Menu = require('@material-ui/core/Menu');
-var MenuItem = require('@material-ui/core/MenuItem');
-var MenuList = require('@material-ui/core/MenuList');
-var MuiRadio = require('@material-ui/core/Radio');
-var TextField = require('@material-ui/core/TextField');
-var MuiSwitch = require('@material-ui/core/Switch');
-var Tab = require('@material-ui/core/Tab');
-var Tabs = require('@material-ui/core/Tabs');
-var MuiToggleButton = require('@material-ui/lab/ToggleButton');
-var MuiToggleButtonGroup = require('@material-ui/lab/ToggleButtonGroup');
-var MuiTooltip = require('@material-ui/core/Tooltip');
 
 var useIconStyles = core.makeStyles(function (_a) {
     var spacing = _a.spacing, palette = _a.palette;
@@ -83,6 +39,8 @@ var useIconStyles = core.makeStyles(function (_a) {
         root: {
             color: getColor,
             fontSize: getFontSize,
+            width: '1em',
+            height: '1em',
             strokeWidth: '1.3px',
         },
     };
@@ -147,7 +105,7 @@ var getAvatarFontSize = function (props) {
     };
     return fontSizes[props.size];
 };
-var useAvatarStyles = styles.makeStyles(function (theme) { return ({
+var useAvatarStyles = core.makeStyles(function (theme) { return ({
     root: function (props) { return ({
         width: getAvatarDimensions(theme, props),
         height: getAvatarDimensions(theme, props),
@@ -182,7 +140,7 @@ var Avatar = React.forwardRef(function (props, ref) {
     else {
         Fallback = React.createElement(Icon, { icon: webIcons.User, className: classes.fallback });
     }
-    return (React.createElement(MuiAvatar, tslib.__assign({ ref: ref, classes: { root: classes.root }, src: src, alt: alt }, muiProps, { imgProps: imgProps }), children || Fallback));
+    return (React.createElement(core.Avatar, tslib.__assign({ ref: ref, classes: { root: classes.root }, src: src, alt: alt }, muiProps, { imgProps: imgProps }), children || Fallback));
 });
 Avatar.defaultProps = {
     size: 'medium',
@@ -191,7 +149,7 @@ Avatar.defaultProps = {
 };
 Avatar.displayName = 'Avatar';
 
-var useBrowserSilhouetteStyles = styles.makeStyles(function (theme) { return ({
+var useBrowserSilhouetteStyles = core.makeStyles(function (theme) { return ({
     circle: {
         backgroundColor: theme.palette.grey[300],
         borderRadius: '50%',
@@ -224,7 +182,7 @@ var BrowserSilhouette = function (_a) {
             children)));
 };
 
-var useButtonStyles = styles.makeStyles(function () { return ({
+var useButtonStyles = core.makeStyles(function () { return ({
     root: {
         minWidth: 'unset',
     },
@@ -240,19 +198,19 @@ var Button = function (props) {
     props.textTransform; var loading = props.loading, classesOverride = props.classes, className = props.className, ButtonRef = props.ButtonRef, muiProps = tslib.__rest(props, ["textTransform", "loading", "classes", "className", "ButtonRef"]);
     props.classes; var styleProps = tslib.__rest(props, ["classes"]);
     var classes = useButtonStyles(styleProps);
-    var typography = styles.useTheme().typography;
+    var typography = core.useTheme().typography;
     var loadingIndicator = {
-        startIcon: React.createElement(CircularProgress, { color: "inherit", size: typography.button.fontSize }),
+        startIcon: React.createElement(core.CircularProgress, { color: "inherit", size: typography.button.fontSize }),
         disabled: true,
     };
-    return (React.createElement(MuiButton, tslib.__assign({ ref: ButtonRef, classes: tslib.__assign(tslib.__assign({}, classes), classesOverride), className: classNames([className, 'pm-button']) }, muiProps, (loading && loadingIndicator))));
+    return (React.createElement(core.Button, tslib.__assign({ ref: ButtonRef, classes: tslib.__assign(tslib.__assign({}, classes), classesOverride), className: classNames([className, 'pm-button']) }, muiProps, (loading && loadingIndicator))));
 };
 Button.displayName = 'Button';
 
 var Checkbox = React.forwardRef(function (props, ref) {
     var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = tslib.__rest(props, ["label", "disabled", "LabelProps"]);
-    var control = React.createElement(MuiCheckbox, tslib.__assign({ disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React.createElement(FormControlLabel, tslib.__assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
+    var control = React.createElement(core.Checkbox, tslib.__assign({ disabled: label ? undefined : disabled }, muiProps));
+    return label ? (React.createElement(core.FormControlLabel, tslib.__assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
 });
 Checkbox.displayName = 'Checkbox';
 
@@ -318,7 +276,7 @@ var getBorder = function (theme) { return function (props) {
 }; };
 // using `any` here is a bit of cheating but it doesn't matter since this doesn't depend on
 // any component-specific props
-var useChipStyles = styles.makeStyles(function (theme) { return ({
+var useChipStyles = core.makeStyles(function (theme) { return ({
     root: {
         background: getBackground(theme),
         color: getColor(theme),
@@ -346,7 +304,7 @@ var Chip = function (props) {
     var classes = useChipStyles(props);
     var icon = severity ? React.createElement(IconDictionary[severity]) : undefined;
     var deleteIcon = React.createElement(webIcons.XCircle);
-    return React.createElement(MuiChip, tslib.__assign({ classes: classes, icon: icon, deleteIcon: deleteIcon }, restProps));
+    return React.createElement(core.Chip, tslib.__assign({ classes: classes, icon: icon, deleteIcon: deleteIcon }, restProps));
 };
 Chip.displayName = 'Chip';
 
@@ -384,7 +342,7 @@ var getCustomColor = function (theme, color) {
             return undefined;
     }
 };
-var useTypographyStyles = styles.makeStyles(function (theme) {
+var useTypographyStyles = core.makeStyles(function (theme) {
     var _a;
     return ({
         root: (_a = {},
@@ -481,7 +439,7 @@ var CollapsibleText = function (props) {
         };
     }, []);
     return (React.createElement(core.Box, tslib.__assign({ position: "relative", overflow: "hidden" }, restProps),
-        React.createElement(Collapse, { in: open, collapsedSize: collapsedSizePx + 'px' },
+        React.createElement(core.Collapse, { in: open, collapsedSize: collapsedSizePx + 'px' },
             React.createElement(Typography, { TypographyRef: typographyRef, variant: typographyVariant }, text)),
         collapsible && !open && React.createElement(core.Box, { className: classes.overlay })));
 };
@@ -548,235 +506,7 @@ Divider.defaultProps = {
     textTransform: 'lowercase',
 };
 
-var IconButton = React.forwardRef(function (props, ref) {
-    return React.createElement(MuiIconButton, tslib.__assign({ ref: ref }, props));
-});
-IconButton.displayName = 'IconButton';
-IconButton.defaultProps = {
-    color: 'secondary',
-};
-
-var useLinkStyles = styles.makeStyles(function (theme) { return ({
-    root: function (props) {
-        var _a;
-        return (tslib.__assign(tslib.__assign({ display: 'flex' }, (props.color === undefined && { color: theme.palette.info.main })), (_a = {}, _a["& ." + iconStaticClassName] = {
-            alignSelf: 'center',
-        }, _a)));
-    },
-}); });
-
-// eslint-disable-next-line react/display-name -- false positive
-var Link = React.forwardRef(function (props, ref) {
-    var children = props.children, muiProps = tslib.__rest(props, ["children"]);
-    var classes = useLinkStyles(props);
-    return (React.createElement(core.Link, tslib.__assign({ ref: ref, classes: { root: classes.root } }, muiProps), children));
-});
-Link.defaultProps = {
-    variant: 'body1',
-};
-Link.displayName = 'Link';
-
-var useStyles$4 = core.makeStyles(function (_a) {
-    var spacing = _a.spacing;
-    return ({
-        root: {
-            '&:last-child': {
-                marginBottom: 0,
-            },
-            marginBottom: spacing(4),
-            padding: spacing(4),
-        },
-    });
-});
-var Paper = React.forwardRef(function (props, ref) {
-    var legacyStyles = props.legacyStyles, restProps = tslib.__rest(props, ["legacyStyles"]);
-    var classes = useStyles$4(props);
-    return React.createElement(core.Paper, tslib.__assign({}, ref, { classes: tslib.__assign({}, (legacyStyles && classes)) }, restProps));
-});
-Paper.displayName = 'Paper';
-Paper.defaultProps = {
-    legacyStyles: false,
-};
-
-var PaperContent = function (props) {
-    var children = props.children;
-    return React.createElement(core.Box, { padding: 4 }, children);
-};
-
-var Radio = React.forwardRef(function (props, ref) {
-    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = tslib.__rest(props, ["label", "disabled", "LabelProps"]);
-    var control = React.createElement(MuiRadio, tslib.__assign({ disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React.createElement(FormControlLabel, tslib.__assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
-});
-Radio.displayName = 'Radio';
-
-var useSplitInputStyles = styles.makeStyles(function () { return ({
-    textfield: {
-        background: function (props) { return (props.backgroundTransparency ? '#FFFFFF44' : 'none'); },
-        borderTopLeftRadius: 4,
-        borderBottomLeftRadius: 4,
-        '& fieldset': {
-            borderRight: 'none',
-            borderTopRightRadius: 0,
-            borderBottomRightRadius: 0,
-        },
-    },
-    button: {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0,
-        alignSelf: 'stretch',
-    },
-    input: {
-        color: function (props) { return props.inputTextColor || 'inherit'; },
-        '&$focused fieldset': {
-            top: -4,
-        },
-    },
-    focused: {},
-}); });
-
-var SplitInput = function (props) {
-    var buttonLabel = props.buttonLabel, TextFieldProps = props.TextFieldProps, ButtonProps = props.ButtonProps, color = props.color, onChange = props.onChange, onClick = props.onClick;
-    var classes = useSplitInputStyles(props);
-    return (React.createElement(core.Box, { display: "flex" },
-        React.createElement(TextField, tslib.__assign({ classes: { root: classes.textfield }, InputProps: { classes: { root: classes.input, focused: classes.focused } }, color: color, variant: "outlined", onChange: onChange }, TextFieldProps)),
-        React.createElement(Button, tslib.__assign({ classes: { root: classes.button }, disableElevation: true, color: color, variant: "contained", onClick: onClick }, ButtonProps), buttonLabel)));
-};
-SplitInput.displayName = 'SplitInput';
-SplitInput.defaultProps = {
-    backgroundTransparency: true,
-    color: 'primary',
-};
-
-var useSwitchStyles = styles.makeStyles(function (theme) { return ({
-    checked: {
-        '& $thumb': {
-            background: theme.palette.success.main,
-        },
-        '&& + $track': {
-            backgroundColor: theme.palette.success.main,
-        },
-    },
-    thumb: {},
-    track: {},
-}); });
-
-var Switch = React.forwardRef(function (props, ref) {
-    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = tslib.__rest(props, ["label", "disabled", "LabelProps"]);
-    var classes = useSwitchStyles(props);
-    var control = React.createElement(MuiSwitch, tslib.__assign({ classes: classes, disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React.createElement(FormControlLabel, tslib.__assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
-});
-Switch.displayName = 'Switch';
-
-var TabPanel = function (props) {
-    var children = props.children, show = props.show;
-    return show ? React.createElement(core.Box, null, children) : null;
-};
-
-var useToggleButtonStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        color: theme.palette.text.primary,
-    },
-    selected: {
-        '&&': {
-            '&:hover': {
-                backgroundColor: function (props) { return theme.palette[props.color || 'primary'].dark; },
-            },
-            backgroundColor: function (props) { return theme.palette[props.color || 'primary'].main; },
-            color: 'white',
-        },
-    },
-}); });
-
-var ToggleButton = React.forwardRef(function (props, ref) {
-    var children = props.children, muiProps = tslib.__rest(props, ["children"]);
-    var classes = useToggleButtonStyles(props);
-    return (React.createElement(MuiToggleButton, tslib.__assign({ ref: ref, classes: {
-            root: classes.root,
-            selected: classes.selected,
-        } }, muiProps), children));
-});
-ToggleButton.defaultProps = {
-    color: 'primary',
-};
-ToggleButton.displayName = 'ToggleButton';
-
-var useToggleButtonGroupStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        '&&': {
-            backgroundColor: theme.palette.grey[300],
-        },
-    },
-}); });
-
-var ToggleButtonGroup = React.forwardRef(function (props, ref) {
-    var children = props.children, _a = props.color, color = _a === void 0 ? 'primary' : _a, muiProps = tslib.__rest(props, ["children", "color"]);
-    var classes = useToggleButtonGroupStyles(props);
-    var childrenWithProps = React.Children.map(children, function (child) {
-        if (!React.isValidElement(child)) {
-            return null;
-        }
-        return React.cloneElement(child, { color: color });
-    });
-    return (React.createElement(MuiToggleButtonGroup, tslib.__assign({ ref: ref, classes: { root: classes.root } }, muiProps), childrenWithProps));
-});
-ToggleButtonGroup.displayName = 'ToggleButtonGroup';
-
-var useTooltipStyles = styles.makeStyles(function (_a) {
-    var typography = _a.typography;
-    return ({
-        tooltip: {
-            fontSize: typography.pxToRem(16),
-        },
-    });
-});
-
-var Tooltip = React.forwardRef(function (props, ref) {
-    var classes = useTooltipStyles(props);
-    return React.createElement(MuiTooltip, tslib.__assign({ ref: ref, classes: classes }, props));
-});
-Tooltip.displayName = 'Tooltip';
-
-var useNumberFieldStyles = core.makeStyles(function () { return ({
-    root: {
-        height: 56,
-    },
-}); });
-var useNumberInputStyles = core.makeStyles(function (theme) { return ({
-    root: {
-        height: '100%',
-        width: 'min-content',
-        borderRadius: theme.spacing(1),
-    },
-    input: {
-        '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-            display: 'none',
-        },
-        '-moz-appearance': 'textfield',
-        minWidth: 40,
-        padding: 0,
-        textAlign: 'center',
-    },
-    adornedStart: {
-        padding: 0,
-    },
-    adornedEnd: {
-        padding: 0,
-    },
-}); });
-
-var NumberField = function (props) {
-    var onIncrement = props.onIncrement, onDecrement = props.onDecrement, _a = props.endAdornmentButtonProps, endAdornmentButtonProps = _a === void 0 ? {} : _a, _b = props.startAdornmentButtonProps, startAdornmentButtonProps = _b === void 0 ? {} : _b, _c = props.InputProps, InputProps = _c === void 0 ? {} : _c, classes = props.classes, restProps = tslib.__rest(props, ["onIncrement", "onDecrement", "endAdornmentButtonProps", "startAdornmentButtonProps", "InputProps", "classes"]);
-    var _d = InputProps, inputClassesOverride = _d.classes, restInputProps = tslib.__rest(_d, ["classes"]);
-    var fieldClasses = useNumberFieldStyles(props);
-    var inputClasses = useNumberInputStyles(props);
-    return (React.createElement(core.TextField, tslib.__assign({ classes: tslib.__assign(tslib.__assign({}, fieldClasses), classes), variant: "filled", type: "number", defaultValue: 0, InputProps: tslib.__assign({ classes: tslib.__assign(tslib.__assign({}, inputClasses), inputClassesOverride), disableUnderline: true, endAdornment: (React.createElement(IconButton, tslib.__assign({ style: { fontSize: 20 }, onClick: onIncrement }, endAdornmentButtonProps),
-                React.createElement(Icon, { icon: webIcons.PlusCircle }))), startAdornment: (React.createElement(IconButton, tslib.__assign({ style: { fontSize: 20 }, onClick: onDecrement }, startAdornmentButtonProps),
-                React.createElement(Icon, { icon: webIcons.MinusCircle }))) }, restInputProps) }, restProps)));
-};
-
-var useStyles$3 = core.makeStyles(function () { return ({
+var useStyles$4 = core.makeStyles(function () { return ({
     root: {
         display: 'flex',
         flexDirection: 'column',
@@ -785,7 +515,7 @@ var useStyles$3 = core.makeStyles(function () { return ({
     },
 }); });
 var FollowerAuthenticationContent = function (props) {
-    var classes = useStyles$3();
+    var classes = useStyles$4();
     return React.createElement(core.DialogContent, { classes: classes }, props.children);
 };
 
@@ -808,7 +538,7 @@ var FollowerAuthenticationGraphic = function () {
         React.createElement("img", { src: graphic, alt: messages[state.value + "GraphicAlt"] })));
 };
 
-var useStyles$2 = core.makeStyles(function () { return ({
+var useStyles$3 = core.makeStyles(function () { return ({
     form: {
         display: 'flex',
         flexDirection: 'column',
@@ -826,7 +556,7 @@ var validatePhoneNumber = function (phone) {
 };
 var FollowerAuthenticationForm = function () {
     var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages, locationOptions = _a.locationOptions, onActionButtonClick = _a.onActionButtonClick, loading = _a.loading;
-    var classes = useStyles$2();
+    var classes = useStyles$3();
     // sign-up form state
     var formRef = React.useRef(null);
     var _b = React.useState(false), formValidity = _b[0], setFormValidity = _b[1];
@@ -950,7 +680,7 @@ var FollowerAuthenticationForm = function () {
     }
 };
 
-var useStyles$1 = core.makeStyles(function () { return ({
+var useStyles$2 = core.makeStyles(function () { return ({
     main: {
         width: '100%',
         display: 'flex',
@@ -960,7 +690,7 @@ var useStyles$1 = core.makeStyles(function () { return ({
 }); });
 var FollowerAuthenticationAltActions = function () {
     var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages, logos = _a.logos, loading = _a.loading, onActionButtonClick = _a.onActionButtonClick;
-    var classes = useStyles$1();
+    var classes = useStyles$2();
     switch (state.value) {
         case 'initial':
             return (React.createElement(core.Box, { className: classes.main },
@@ -1059,7 +789,7 @@ var FollowerAuthenticationInfo = function () {
         React.createElement(core.Typography, { align: "center" }, info)));
 };
 
-var useStyles = core.makeStyles(function () { return ({
+var useStyles$1 = core.makeStyles(function () { return ({
     root: {
         position: 'absolute',
         top: 0,
@@ -1068,7 +798,7 @@ var useStyles = core.makeStyles(function () { return ({
 }); });
 var FollowerAuthenticationCloseButton = function () {
     var _a = useFollowerAuthenticationDialogContext(), messages = _a.messages, onActionButtonClick = _a.onActionButtonClick;
-    var classes = useStyles();
+    var classes = useStyles$1();
     var handleClose = function () {
         onActionButtonClick('close');
     };
@@ -1132,6 +862,234 @@ var FollowerAuthenticationDialog = function (props) {
                     React.createElement(FollowerAuthenticationFooter, null))))));
 };
 
+var IconButton = React.forwardRef(function (props, ref) {
+    return React.createElement(core.IconButton, tslib.__assign({ ref: ref }, props));
+});
+IconButton.displayName = 'IconButton';
+IconButton.defaultProps = {
+    color: 'secondary',
+};
+
+var useLinkStyles = core.makeStyles(function (theme) { return ({
+    root: function (props) {
+        var _a;
+        return (tslib.__assign(tslib.__assign({ display: 'flex' }, (props.color === undefined && { color: theme.palette.info.main })), (_a = {}, _a["& ." + iconStaticClassName] = {
+            alignSelf: 'center',
+        }, _a)));
+    },
+}); });
+
+// eslint-disable-next-line react/display-name -- false positive
+var Link = React.forwardRef(function (props, ref) {
+    var children = props.children, muiProps = tslib.__rest(props, ["children"]);
+    var classes = useLinkStyles(props);
+    return (React.createElement(core.Link, tslib.__assign({ ref: ref, classes: { root: classes.root } }, muiProps), children));
+});
+Link.defaultProps = {
+    variant: 'body1',
+};
+Link.displayName = 'Link';
+
+var useNumberFieldStyles = core.makeStyles(function () { return ({
+    root: {
+        height: 56,
+    },
+}); });
+var useNumberInputStyles = core.makeStyles(function (theme) { return ({
+    root: {
+        height: '100%',
+        width: 'min-content',
+        borderRadius: theme.spacing(1),
+    },
+    input: {
+        '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+            display: 'none',
+        },
+        '-moz-appearance': 'textfield',
+        minWidth: 40,
+        padding: 0,
+        textAlign: 'center',
+    },
+    adornedStart: {
+        padding: 0,
+    },
+    adornedEnd: {
+        padding: 0,
+    },
+}); });
+
+var NumberField = function (props) {
+    var onIncrement = props.onIncrement, onDecrement = props.onDecrement, _a = props.endAdornmentButtonProps, endAdornmentButtonProps = _a === void 0 ? {} : _a, _b = props.startAdornmentButtonProps, startAdornmentButtonProps = _b === void 0 ? {} : _b, _c = props.InputProps, InputProps = _c === void 0 ? {} : _c, classes = props.classes, restProps = tslib.__rest(props, ["onIncrement", "onDecrement", "endAdornmentButtonProps", "startAdornmentButtonProps", "InputProps", "classes"]);
+    var _d = InputProps, inputClassesOverride = _d.classes, restInputProps = tslib.__rest(_d, ["classes"]);
+    var fieldClasses = useNumberFieldStyles(props);
+    var inputClasses = useNumberInputStyles(props);
+    return (React.createElement(core.TextField, tslib.__assign({ classes: tslib.__assign(tslib.__assign({}, fieldClasses), classes), variant: "filled", type: "number", defaultValue: 0, InputProps: tslib.__assign({ classes: tslib.__assign(tslib.__assign({}, inputClasses), inputClassesOverride), disableUnderline: true, endAdornment: (React.createElement(IconButton, tslib.__assign({ style: { fontSize: 20 }, onClick: onIncrement }, endAdornmentButtonProps),
+                React.createElement(Icon, { icon: webIcons.PlusCircle }))), startAdornment: (React.createElement(IconButton, tslib.__assign({ style: { fontSize: 20 }, onClick: onDecrement }, startAdornmentButtonProps),
+                React.createElement(Icon, { icon: webIcons.MinusCircle }))) }, restInputProps) }, restProps)));
+};
+
+var useStyles = core.makeStyles(function (_a) {
+    var spacing = _a.spacing;
+    return ({
+        root: {
+            '&:last-child': {
+                marginBottom: 0,
+            },
+            marginBottom: spacing(4),
+            padding: spacing(4),
+        },
+    });
+});
+var Paper = React.forwardRef(function (props, ref) {
+    var legacyStyles = props.legacyStyles, restProps = tslib.__rest(props, ["legacyStyles"]);
+    var classes = useStyles(props);
+    return React.createElement(core.Paper, tslib.__assign({}, ref, { classes: tslib.__assign({}, (legacyStyles && classes)) }, restProps));
+});
+Paper.displayName = 'Paper';
+Paper.defaultProps = {
+    legacyStyles: false,
+};
+
+var PaperContent = function (props) {
+    var children = props.children;
+    return React.createElement(core.Box, { padding: 4 }, children);
+};
+
+var Radio = React.forwardRef(function (props, ref) {
+    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = tslib.__rest(props, ["label", "disabled", "LabelProps"]);
+    var control = React.createElement(core.Radio, tslib.__assign({ disabled: label ? undefined : disabled }, muiProps));
+    return label ? (React.createElement(core.FormControlLabel, tslib.__assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
+});
+Radio.displayName = 'Radio';
+
+var useSplitInputStyles = core.makeStyles(function () { return ({
+    textfield: {
+        background: function (props) { return (props.backgroundTransparency ? '#FFFFFF44' : 'none'); },
+        borderTopLeftRadius: 4,
+        borderBottomLeftRadius: 4,
+        '& fieldset': {
+            borderRight: 'none',
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+        },
+    },
+    button: {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+        alignSelf: 'stretch',
+    },
+    input: {
+        color: function (props) { return props.inputTextColor || 'inherit'; },
+        '&$focused fieldset': {
+            top: -4,
+        },
+    },
+    focused: {},
+}); });
+
+var SplitInput = function (props) {
+    var buttonLabel = props.buttonLabel, TextFieldProps = props.TextFieldProps, ButtonProps = props.ButtonProps, color = props.color, onChange = props.onChange, onClick = props.onClick;
+    var classes = useSplitInputStyles(props);
+    return (React.createElement(core.Box, { display: "flex" },
+        React.createElement(core.TextField, tslib.__assign({ classes: { root: classes.textfield }, InputProps: { classes: { root: classes.input, focused: classes.focused } }, color: color, variant: "outlined", onChange: onChange }, TextFieldProps)),
+        React.createElement(Button, tslib.__assign({ classes: { root: classes.button }, disableElevation: true, color: color, variant: "contained", onClick: onClick }, ButtonProps), buttonLabel)));
+};
+SplitInput.displayName = 'SplitInput';
+SplitInput.defaultProps = {
+    backgroundTransparency: true,
+    color: 'primary',
+};
+
+var useSwitchStyles = core.makeStyles(function (theme) { return ({
+    checked: {
+        '& $thumb': {
+            background: theme.palette.success.main,
+        },
+        '&& + $track': {
+            backgroundColor: theme.palette.success.main,
+        },
+    },
+    thumb: {},
+    track: {},
+}); });
+
+var Switch = React.forwardRef(function (props, ref) {
+    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = tslib.__rest(props, ["label", "disabled", "LabelProps"]);
+    var classes = useSwitchStyles(props);
+    var control = React.createElement(core.Switch, tslib.__assign({ classes: classes, disabled: label ? undefined : disabled }, muiProps));
+    return label ? (React.createElement(core.FormControlLabel, tslib.__assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
+});
+Switch.displayName = 'Switch';
+
+var TabPanel = function (props) {
+    var children = props.children, show = props.show;
+    return show ? React.createElement(core.Box, null, children) : null;
+};
+
+var useToggleButtonStyles = core.makeStyles(function (theme) { return ({
+    root: {
+        color: theme.palette.text.primary,
+    },
+    selected: {
+        '&&': {
+            '&:hover': {
+                backgroundColor: function (props) { return theme.palette[props.color || 'primary'].dark; },
+            },
+            backgroundColor: function (props) { return theme.palette[props.color || 'primary'].main; },
+            color: 'white',
+        },
+    },
+}); });
+
+var ToggleButton = React.forwardRef(function (props, ref) {
+    var children = props.children, muiProps = tslib.__rest(props, ["children"]);
+    var classes = useToggleButtonStyles(props);
+    return (React.createElement(lab.ToggleButton, tslib.__assign({ ref: ref, classes: {
+            root: classes.root,
+            selected: classes.selected,
+        } }, muiProps), children));
+});
+ToggleButton.defaultProps = {
+    color: 'primary',
+};
+ToggleButton.displayName = 'ToggleButton';
+
+var useToggleButtonGroupStyles = core.makeStyles(function (theme) { return ({
+    root: {
+        '&&': {
+            backgroundColor: theme.palette.grey[300],
+        },
+    },
+}); });
+
+var ToggleButtonGroup = React.forwardRef(function (props, ref) {
+    var children = props.children, _a = props.color, color = _a === void 0 ? 'primary' : _a, muiProps = tslib.__rest(props, ["children", "color"]);
+    var classes = useToggleButtonGroupStyles(props);
+    var childrenWithProps = React.Children.map(children, function (child) {
+        if (!React.isValidElement(child)) {
+            return null;
+        }
+        return React.cloneElement(child, { color: color });
+    });
+    return (React.createElement(lab.ToggleButtonGroup, tslib.__assign({ ref: ref, classes: { root: classes.root } }, muiProps), childrenWithProps));
+});
+ToggleButtonGroup.displayName = 'ToggleButtonGroup';
+
+var useTooltipStyles = core.makeStyles(function (_a) {
+    var typography = _a.typography;
+    return ({
+        tooltip: {
+            fontSize: typography.pxToRem(16),
+        },
+    });
+});
+
+var Tooltip = React.forwardRef(function (props, ref) {
+    var classes = useTooltipStyles(props);
+    return React.createElement(core.Tooltip, tslib.__assign({ ref: ref, classes: classes }, props));
+});
+Tooltip.displayName = 'Tooltip';
+
 var useCollapsibleText = function () {
     var _a = React.useState(false), open = _a[0], setOpen = _a[1];
     var collapseState = React.useState(false);
@@ -1176,175 +1134,142 @@ var useTabs = function (options) {
     };
 };
 
-exports.Alert = Alert;
-Object.defineProperty(exports, "Accordion", {
+Object.defineProperty(exports, "ServerStyleSheets", {
     enumerable: true,
-    get: function () { return core.Accordion; }
+    get: function () { return core.ServerStyleSheets; }
 });
-Object.defineProperty(exports, "AccordionActions", {
+Object.defineProperty(exports, "alpha", {
     enumerable: true,
-    get: function () { return core.AccordionActions; }
+    get: function () { return core.alpha; }
 });
-Object.defineProperty(exports, "AccordionDetails", {
+Object.defineProperty(exports, "createTheme", {
     enumerable: true,
-    get: function () { return core.AccordionDetails; }
+    get: function () { return core.createTheme; }
 });
-Object.defineProperty(exports, "AccordionSummary", {
+Object.defineProperty(exports, "darken", {
     enumerable: true,
-    get: function () { return core.AccordionSummary; }
+    get: function () { return core.darken; }
 });
-Object.defineProperty(exports, "Box", {
+Object.defineProperty(exports, "decomposeColor", {
     enumerable: true,
-    get: function () { return core.Box; }
+    get: function () { return core.decomposeColor; }
 });
-Object.defineProperty(exports, "Breadcrumbs", {
+Object.defineProperty(exports, "getLuminance", {
     enumerable: true,
-    get: function () { return core.Breadcrumbs; }
+    get: function () { return core.getLuminance; }
 });
-Object.defineProperty(exports, "ButtonBase", {
+Object.defineProperty(exports, "hexToRgb", {
     enumerable: true,
-    get: function () { return core.ButtonBase; }
+    get: function () { return core.hexToRgb; }
 });
-Object.defineProperty(exports, "ClickAwayListener", {
+Object.defineProperty(exports, "lighten", {
     enumerable: true,
-    get: function () { return core.ClickAwayListener; }
+    get: function () { return core.lighten; }
 });
-Object.defineProperty(exports, "Fab", {
+Object.defineProperty(exports, "makeStyles", {
     enumerable: true,
-    get: function () { return core.Fab; }
+    get: function () { return core.makeStyles; }
 });
-Object.defineProperty(exports, "GridList", {
+Object.defineProperty(exports, "recomposeColor", {
     enumerable: true,
-    get: function () { return core.GridList; }
+    get: function () { return core.recomposeColor; }
 });
-Object.defineProperty(exports, "Hidden", {
+Object.defineProperty(exports, "rgbToHex", {
     enumerable: true,
-    get: function () { return core.Hidden; }
+    get: function () { return core.rgbToHex; }
 });
-Object.defineProperty(exports, "Modal", {
+Object.defineProperty(exports, "Alert", {
     enumerable: true,
-    get: function () { return core.Modal; }
+    get: function () { return lab.Alert; }
 });
-Object.defineProperty(exports, "Popover", {
+Object.defineProperty(exports, "AlertTitle", {
     enumerable: true,
-    get: function () { return core.Popover; }
+    get: function () { return lab.AlertTitle; }
 });
-Object.defineProperty(exports, "Popper", {
+Object.defineProperty(exports, "Autocomplete", {
     enumerable: true,
-    get: function () { return core.Popper; }
+    get: function () { return lab.Autocomplete; }
 });
-Object.defineProperty(exports, "Step", {
+Object.defineProperty(exports, "AvatarGroup", {
     enumerable: true,
-    get: function () { return core.Step; }
+    get: function () { return lab.AvatarGroup; }
 });
-Object.defineProperty(exports, "StepButton", {
+Object.defineProperty(exports, "Pagination", {
     enumerable: true,
-    get: function () { return core.StepButton; }
+    get: function () { return lab.Pagination; }
 });
-Object.defineProperty(exports, "StepConnector", {
+Object.defineProperty(exports, "PaginationItem", {
     enumerable: true,
-    get: function () { return core.StepConnector; }
+    get: function () { return lab.PaginationItem; }
 });
-Object.defineProperty(exports, "StepContent", {
+Object.defineProperty(exports, "Rating", {
     enumerable: true,
-    get: function () { return core.StepContent; }
+    get: function () { return lab.Rating; }
 });
-Object.defineProperty(exports, "StepIcon", {
+Object.defineProperty(exports, "Skeleton", {
     enumerable: true,
-    get: function () { return core.StepIcon; }
+    get: function () { return lab.Skeleton; }
 });
-Object.defineProperty(exports, "StepLabel", {
+Object.defineProperty(exports, "SpeedDial", {
     enumerable: true,
-    get: function () { return core.StepLabel; }
+    get: function () { return lab.SpeedDial; }
 });
-Object.defineProperty(exports, "Stepper", {
+Object.defineProperty(exports, "SpeedDialAction", {
     enumerable: true,
-    get: function () { return core.Stepper; }
+    get: function () { return lab.SpeedDialAction; }
 });
-Object.defineProperty(exports, "ThemeProvider", {
+Object.defineProperty(exports, "SpeedDialIcon", {
     enumerable: true,
-    get: function () { return core.ThemeProvider; }
+    get: function () { return lab.SpeedDialIcon; }
 });
-Object.defineProperty(exports, "Toolbar", {
+Object.defineProperty(exports, "TabContext", {
     enumerable: true,
-    get: function () { return core.Toolbar; }
+    get: function () { return lab.TabContext; }
 });
-Object.defineProperty(exports, "alpha", {
+Object.defineProperty(exports, "TabList", {
     enumerable: true,
-    get: function () { return core.alpha; }
+    get: function () { return lab.TabList; }
 });
-Object.defineProperty(exports, "createTheme", {
+Object.defineProperty(exports, "Timeline", {
     enumerable: true,
-    get: function () { return core.createTheme; }
+    get: function () { return lab.Timeline; }
 });
-Object.defineProperty(exports, "darken", {
+Object.defineProperty(exports, "TimelineConnector", {
     enumerable: true,
-    get: function () { return core.darken; }
+    get: function () { return lab.TimelineConnector; }
 });
-Object.defineProperty(exports, "decomposeColor", {
+Object.defineProperty(exports, "TimelineContent", {
     enumerable: true,
-    get: function () { return core.decomposeColor; }
+    get: function () { return lab.TimelineContent; }
 });
-Object.defineProperty(exports, "getLuminance", {
+Object.defineProperty(exports, "TimelineDot", {
     enumerable: true,
-    get: function () { return core.getLuminance; }
+    get: function () { return lab.TimelineDot; }
 });
-Object.defineProperty(exports, "hexToRgb", {
+Object.defineProperty(exports, "TimelineItem", {
     enumerable: true,
-    get: function () { return core.hexToRgb; }
+    get: function () { return lab.TimelineItem; }
 });
-Object.defineProperty(exports, "lighten", {
+Object.defineProperty(exports, "TimelineOppositeContent", {
     enumerable: true,
-    get: function () { return core.lighten; }
+    get: function () { return lab.TimelineOppositeContent; }
 });
-Object.defineProperty(exports, "makeStyles", {
+Object.defineProperty(exports, "TimelineSeparator", {
     enumerable: true,
-    get: function () { return core.makeStyles; }
+    get: function () { return lab.TimelineSeparator; }
 });
-Object.defineProperty(exports, "recomposeColor", {
+Object.defineProperty(exports, "TreeItem", {
     enumerable: true,
-    get: function () { return core.recomposeColor; }
+    get: function () { return lab.TreeItem; }
 });
-Object.defineProperty(exports, "rgbToHex", {
+Object.defineProperty(exports, "TreeView", {
     enumerable: true,
-    get: function () { return core.rgbToHex; }
+    get: function () { return lab.TreeView; }
 });
-exports.AppBar = AppBar;
-Object.defineProperty(exports, "ServerStyleSheets", {
+Object.defineProperty(exports, "useAutocomplete", {
     enumerable: true,
-    get: function () { return styles.ServerStyleSheets; }
+    get: function () { return lab.useAutocomplete; }
 });
-exports.Badge = Badge;
-exports.CircularProgress = CircularProgress;
-exports.ButtonGroup = ButtonGroup;
-exports.Card = Card;
-exports.CardActionArea = CardActionArea;
-exports.CardActions = CardActions;
-exports.CardContent = CardContent;
-exports.CardHeader = CardHeader;
-exports.CardMedia = CardMedia;
-exports.FormControlLabel = FormControlLabel;
-exports.Dialog = Dialog;
-exports.DialogActions = DialogActions;
-exports.DialogContent = DialogContent;
-exports.DialogTitle = DialogTitle;
-exports.Drawer = Drawer;
-exports.FormControl = FormControl;
-exports.Grid = Grid;
-exports.InputAdornment = InputAdornment;
-exports.LinearProgress = LinearProgress;
-exports.List = List;
-exports.ListItem = ListItem;
-exports.ListItemAvatar = ListItemAvatar;
-exports.ListItemIcon = ListItemIcon;
-exports.ListItemSecondaryAction = ListItemSecondaryAction;
-exports.ListItemText = ListItemText;
-exports.Menu = Menu;
-exports.MenuItem = MenuItem;
-exports.MenuList = MenuList;
-exports.TextField = TextField;
-exports.Tab = Tab;
-exports.Tabs = Tabs;
 exports.Avatar = Avatar;
 exports.BrowserSilhouette = BrowserSilhouette;
 exports.Button = Button;
@@ -1369,4 +1294,10 @@ exports.Tooltip = Tooltip;
 exports.Typography = Typography;
 exports.useCollapsibleText = useCollapsibleText;
 exports.useTabs = useTabs;
+Object.keys(core).forEach(function (k) {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+        enumerable: true,
+        get: function () { return core[k]; }
+    });
+});
 //# sourceMappingURL=index.js.map