'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var core = require('@material-ui/core');
var CloseIcon = _interopDefault(require('@material-ui/icons/Close'));
var styles = require('@material-ui/core/styles');
var lab = require('@material-ui/lab');

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */

var __assign = function() {
    __assign = Object.assign || function __assign(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};

function __rest(s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
}

function __read(o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
}

var NavDownIcon = function (props) { return (React__default.createElement(core.SvgIcon, __assign({}, props, { viewBox: "-4 -4 16 16" }),
    React__default.createElement("path", { d: "M3.99949 3.92152L1.43149 1.35352L0.0488281 2.73618L3.99949 6.68685L7.95016 2.73618L6.56749 1.35352L3.99949 3.92152Z" }))); };

var CheckboxIcon = function (props) { return (React__default.createElement(core.SvgIcon, __assign({}, props, { viewBox: "0 0 16 16" }),
    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 2H4C2.89543 2 2 2.89543 2 4V12C2 13.1046 2.89543 14 4 14H12C13.1046 14 14 13.1046 14 12V4C14 2.89543 13.1046 2 12 2ZM4 0C1.79086 0 0 1.79086 0 4V12C0 14.2091 1.79086 16 4 16H12C14.2091 16 16 14.2091 16 12V4C16 1.79086 14.2091 0 12 0H4Z" }))); };

var CheckboxCheckedIcon = function (props) { return (React__default.createElement(core.SvgIcon, __assign({}, props, { viewBox: "0 0 16 16" }),
    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 0C1.79086 0 0 1.79086 0 4V12C0 14.2091 1.79086 16 4 16H12C14.2091 16 16 14.2091 16 12V4C16 1.79086 14.2091 0 12 0H4ZM6.42998 12.5081L12.406 4.82456L10.8273 3.59668L6.2422 9.49187L4.33609 7.58576L2.92188 8.99997L6.42998 12.5081Z" }))); };

var RadioIcon = function (props) { return (React__default.createElement(core.SvgIcon, __assign({}, props, { viewBox: "0 0 20 20" }),
    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0Z" }))); };

var RadioCheckedIcon = function (props) { return (React__default.createElement(core.SvgIcon, __assign({}, props, { viewBox: "0 0 20 20" }),
    React__default.createElement("path", { d: "M5 10C5 7.23858 7.23858 5 10 5V5C12.7614 5 15 7.23858 15 10V10C15 12.7614 12.7614 15 10 15V15C7.23858 15 5 12.7614 5 10V10Z" }),
    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0Z" }))); };

var spacing = 8;
var borderRadius = 4;
var buttonBorderWidth = 2;
var containedButtonShadow = "0 2px 2px rgba(0, 23, 121, 0.08)";
var primary = {
    main: "#546FFE",
    light: "#8B9EFE",
    dark: "#3C52D6",
    contrastText: "#FFF",
};
var secondary = {
    main: "#FFC358",
    light: "#FFD78E",
    dark: "#ECB450",
    contrastText: "#FFF",
};
var error = {
    main: "#EF3561",
    light: "#FDE2E8",
    dark: "#A50A58",
    contrastText: "#FFF",
};
/**
 * Light theme color palette, the default
 */
var lightPalette = {
    type: "light",
    primary: primary,
    secondary: secondary,
    error: error,
    text: {
        primary: "#171830",
        secondary: "#677693",
        disabled: "#677693",
        hint: "#677693",
    },
    action: {
        active: "#677693",
        hover: "#E2E8FC",
        hoverOpacity: 0.08,
        selected: "#EEF2FA",
        disabled: "#DDE2EC",
        disabledBackground: "#E6EAF2",
    },
    divider: "#C6CEDC",
    background: {
        default: "#F4F7FC",
        paper: "#FFF",
    },
};
var makeShadows = function (color) {
    var count = 0;
    return new Array(25).fill(undefined).map(function () {
        if (!count) {
            count++;
            return "none";
        }
        var shadow = "0 " + count + "px " + (2 + count * 2) + "px " + core.fade(color, 0.2 + count * 0.01);
        count++;
        return shadow;
    });
};
/**
 * Tooltip function that checks for theme
 */
var getTooltipColor = function (palette) {
    if (palette.type === "light") {
        return palette.text.primary;
    }
    else {
        return palette.background.default;
    }
};
/**
 * Dark theme color palette
 */
var darkPalette = {
    type: "dark",
    primary: primary,
    secondary: secondary,
    error: error,
    text: {
        primary: "#FFF",
        secondary: "#BDBDBD",
        disabled: "#BDBDBD",
        hint: "#BDBDBD",
    },
    action: {
        active: "#FFF",
        hover: "rgba(255, 255, 255, 0.1)",
        hoverOpacity: 0.1,
        selected: "rgba(255, 255, 255, 0.2)",
        disabled: "rgba(255, 255, 255, 0.1)",
        disabledBackground: "rgba(255, 255, 255, 0.12)",
    },
    divider: "rgba(255, 255, 255, 0.12)",
    background: {
        default: "#3a3a3a",
        paper: "#424242",
    },
};
/**
 * Shared theme configuration
 */
var makeTheme = function (palette, shadows) {
    var _a;
    // Grab defaults to re-use in overrides
    var breakpoints = core.createMuiTheme().breakpoints;
    return core.createMuiTheme({
        palette: palette,
        shadows: shadows,
        typography: {
            fontFamily: "\"Aktiv Grotesk\", -apple-system, roboto, sans-serif",
            fontSize: 16,
            fontWeightLight: 300,
            fontWeightRegular: 400,
            fontWeightMedium: 500,
            body1: {
                fontSize: 16,
            },
            button: {
                fontSize: 14,
                fontWeight: 400,
                fontFamily: "\"Cartograph CF\", monospace",
                letterSpacing: 1.5,
            },
        },
        shape: {
            borderRadius: borderRadius,
        },
        props: {
            MuiButton: {
                variant: "contained",
            },
            MuiTextField: {
                margin: "dense",
                InputProps: {
                    labelWidth: 0,
                },
                variant: "outlined",
                spellCheck: false,
            },
            MuiSelect: {
                margin: "dense",
                input: React__default.createElement(core.OutlinedInput, { labelWidth: 0 }),
                IconComponent: NavDownIcon,
            },
            MuiInputLabel: {
                shrink: true,
            },
            MuiFormControl: {
                variant: "outlined",
                margin: "dense",
            },
            MuiInput: {
                spellCheck: false,
                autoCorrect: "off",
            },
            MuiOutlinedInput: {
                notched: false,
            },
            MuiTableSortLabel: {
                IconComponent: NavDownIcon,
            },
            MuiDialogTitle: {
                disableTypography: true,
            },
            MuiCheckbox: {
                color: "primary",
                icon: React__default.createElement(CheckboxIcon, null),
                checkedIcon: React__default.createElement(CheckboxCheckedIcon, null),
            },
            MuiRadio: {
                color: "primary",
                icon: React__default.createElement(RadioIcon, null),
                checkedIcon: React__default.createElement(RadioCheckedIcon, null),
            },
            MuiMenu: {
                anchorOrigin: {
                    vertical: "bottom",
                    horizontal: "right",
                },
                transformOrigin: {
                    vertical: "top",
                    horizontal: "right",
                },
                // Disable the behavior of placing the select at the selected option
                getContentAnchorEl: null,
            },
            MuiList: {
                disablePadding: true,
            },
            MuiTabs: {
                textColor: "primary",
                indicatorColor: "primary",
            },
            MuiTab: {
                disableTouchRipple: true,
            },
            // Labs components aren't typed properly, so cast the `props` object
            MuiAutocomplete: {
                popupIcon: React__default.createElement(NavDownIcon, null),
            },
        },
        overrides: {
            MuiAvatar: {
                root: {
                    width: 32,
                    height: 32,
                    fontSize: 24,
                },
            },
            MuiTable: {
                root: {
                    backgroundColor: palette.background.paper,
                    borderRadius: borderRadius * 2,
                    boxShadow: "0 0 0 1px " + palette.action.hover,
                    "&.is-inline": {
                        background: "none",
                        borderRadius: 0,
                        boxShadow: "none",
                    },
                },
            },
            MuiTableHead: {
                root: {
                    "& .MuiTableCell-root": {
                        paddingTop: spacing,
                        paddingBottom: spacing,
                        fontSize: 12,
                        fontWeight: 500,
                        letterSpacing: 1.5,
                        textTransform: "uppercase",
                        color: palette.text.secondary,
                        backgroundColor: palette.background.default,
                        ".MuiTable-root.is-inline &": {
                            background: "none",
                        },
                    },
                    "& .MuiTableRow-root:first-child .MuiTableCell-root:first-child": {
                        borderTopLeftRadius: borderRadius * 2,
                        ".MuiTable-root.is-inline &": {
                            borderRadius: 0,
                        },
                    },
                    "& .MuiTableRow-root:first-child .MuiTableCell-root:last-child": {
                        borderTopRightRadius: borderRadius * 2,
                        ".MuiTable-root.is-inline &": {
                            borderRadius: 0,
                        },
                    },
                },
            },
            MuiTableSortLabel: {
                root: {
                    lineHeight: "20px",
                    "&$active": {
                        "&& $icon": {
                            color: palette.text.primary,
                        },
                    },
                },
                icon: {
                    "&.MuiSvgIcon-root": {
                        width: 18,
                        height: 18,
                        marginLeft: 2,
                    },
                },
            },
            MuiTableCell: {
                root: {
                    "&:first-child": {
                        paddingLeft: spacing * 4,
                    },
                },
            },
            MuiTablePagination: {
                input: {
                    height: "auto",
                    marginTop: 0,
                    border: "1px solid " + palette.action.disabled,
                },
                select: {
                    paddingTop: 6,
                    fontSize: 14,
                },
                selectIcon: {
                    right: -4,
                },
            },
            MuiList: {
                root: {
                    boxSizing: "border-box",
                    "& .MuiDivider-root": {
                        opacity: 0.5,
                    },
                },
            },
            MuiListItem: {
                root: {
                    minHeight: 24,
                    position: "relative",
                    "&.active": {
                        color: "white",
                    },
                },
                gutters: {
                    padding: spacing / 2,
                    paddingLeft: spacing * 2,
                    paddingRight: spacing * 2,
                },
            },
            MuiListItemAvatar: {
                root: {
                    minWidth: 46,
                },
            },
            MuiListItemIcon: {
                root: {
                    minWidth: 36,
                    color: palette.text.primary,
                    "& .MuiSvgIcon-root": {
                        width: 20,
                        height: 20,
                    },
                },
            },
            MuiListSubheader: {
                root: {
                    fontSize: 12,
                    letterSpacing: 1.5,
                    lineHeight: 2.5,
                    textTransform: "uppercase",
                },
                sticky: {
                    backgroundColor: palette.background.paper,
                },
            },
            MuiMenu: {
                paper: {
                    marginTop: spacing,
                },
            },
            MuiMenuItem: {
                root: (_a = {
                        minHeight: 48,
                        fontSize: 16
                    },
                    _a[breakpoints.up("sm")] = {
                        minHeight: 48,
                    },
                    _a),
                gutters: {
                    padding: spacing,
                    paddingLeft: spacing * 2,
                    paddingRight: spacing * 2,
                },
            },
            MuiListItemText: {
                primary: {
                    fontWeight: 500,
                },
                secondary: {
                    fontSize: 12,
                },
            },
            MuiOutlinedInput: {
                root: {
                    fontSize: 14,
                    "&$focused $notchedOutline": {
                        borderWidth: 1,
                    },
                },
                notchedOutline: {
                    borderWidth: 1,
                    borderColor: palette.action.disabled,
                },
            },
            MuiButton: {
                root: {
                    minHeight: 40,
                    paddingLeft: 20,
                    paddingRight: 20,
                    fontWeight: 500,
                    "& .MuiSvgIcon-root": {
                        verticalAlign: "middle",
                    },
                },
                contained: {
                    backgroundColor: palette.text.secondary,
                    color: palette.primary.contrastText,
                    "&:hover": {
                        backgroundColor: core.darken(palette.text.secondary, 0.25),
                    },
                    "&$disabled": {
                        color: core.fade(palette.text.disabled, 0.5),
                    },
                },
                containedPrimary: {
                    boxShadow: containedButtonShadow,
                },
                containedSecondary: {
                    boxShadow: containedButtonShadow,
                },
                outlined: {
                    borderColor: palette.action.disabled,
                    borderWidth: buttonBorderWidth,
                    "&:hover": {
                        color: palette.primary.main,
                        borderColor: palette.primary.main,
                        borderWidth: buttonBorderWidth,
                    },
                    "&$disabled": {
                        color: core.fade(palette.text.disabled, 0.5),
                    },
                },
                outlinedPrimary: {
                    borderColor: palette.primary.main,
                    borderWidth: buttonBorderWidth,
                    "&:hover": {
                        borderWidth: buttonBorderWidth,
                    },
                },
                outlinedSecondary: {
                    borderColor: palette.secondary.main,
                    borderWidth: buttonBorderWidth,
                    "&:hover": {
                        color: palette.secondary.main,
                        borderWidth: buttonBorderWidth,
                    },
                },
                text: {
                    "&$disabled": {
                        color: core.fade(palette.text.disabled, 0.5),
                    },
                },
                sizeSmall: {
                    minHeight: 32,
                    paddingLeft: 10,
                    paddingRight: 10,
                    letterSpacing: 1.2,
                    fontSize: 13,
                    "&.MuiButton-outlined": {
                        borderWidth: 1,
                    },
                },
                sizeLarge: {
                    minHeight: 46,
                    paddingLeft: spacing * 3,
                    paddingRight: spacing * 3,
                },
            },
            MuiButtonGroup: {
                contained: {
                    boxShadow: containedButtonShadow,
                },
            },
            MuiInputBase: {
                root: {
                    minHeight: 40,
                    background: palette.background.paper,
                    marginTop: "12px",
                    borderRadius: borderRadius,
                    "&$disabled": {
                        background: palette.action.disabledBackground,
                    },
                    "&$focused .MuiSelect-icon": {
                        color: palette.primary.main,
                    },
                },
                input: {
                    fontSize: 16,
                    "&::placeholder": {
                        color: palette.text.secondary,
                        opacity: 1,
                    },
                },
            },
            MuiInputLabel: {
                shrink: {
                    fontSize: 14,
                    marginTop: "2px",
                    left: "-12px",
                    transform: "translate(16px, -6px) scale(0.8)",
                    color: palette.text.primary,
                },
                outlined: {
                    fontWeight: 500,
                    letterSpacing: "1.5px",
                    textTransform: "uppercase",
                    "&$shrink": {
                        transform: "translate(20px, -8px) scale(0.85)",
                    },
                },
            },
            MuiChip: {
                root: {
                    fontSize: 16,
                    fontWeight: 500,
                    borderRadius: borderRadius,
                    backgroundColor: core.fade(palette.text.secondary, 0.1),
                    color: palette.text.secondary,
                },
                sizeSmall: {
                    height: 20,
                },
                labelSmall: {
                    fontSize: 12,
                    paddingLeft: 6,
                    paddingRight: 6,
                    marginBottom: "-1px",
                },
                colorPrimary: {
                    backgroundColor: core.fade(palette.primary.main, 0.1),
                    color: palette.primary.main,
                },
                colorSecondary: {
                    backgroundColor: core.fade(palette.secondary.main, 0.15),
                    color: palette.secondary.main,
                },
            },
            MuiSelect: {
                root: {
                    // Matches MuiInputBase-input height
                    lineHeight: "1.1875em",
                    overflow: "hidden",
                },
                select: {
                    "&:focus": {
                        borderRadius: borderRadius,
                    },
                },
                icon: {
                    "&.MuiSvgIcon-root": {
                        fontSize: 20,
                        margin: "3px 6px 0 0",
                    },
                },
                iconOutlined: {
                    right: 0,
                },
                iconOpen: {
                    transform: "none",
                },
            },
            MuiTooltip: {
                tooltip: {
                    padding: "10px 20px",
                    fontSize: 12,
                    fontWeight: 400,
                    backgroundColor: getTooltipColor(palette),
                    boxShadow: shadows[16],
                },
            },
            MuiDialog: {
                paperWidthSm: {
                    maxWidth: "488px",
                },
            },
            MuiDialogTitle: {
                root: {
                    position: "relative",
                    background: palette.primary.main,
                    color: palette.primary.contrastText,
                    padding: spacing * 3 + "px " + spacing * 4 + "px",
                    fontSize: 36,
                    fontWeight: 600,
                },
            },
            MuiDialogContent: {
                root: {
                    background: palette.background.default,
                    padding: "20px 30px",
                },
            },
            MuiDialogActions: {
                root: {
                    padding: "25px 30px",
                },
                spacing: {
                    "& > * + *": {
                        marginLeft: 16,
                    },
                },
            },
            MuiFormHelperText: {
                root: {
                    fontSize: 12,
                },
                contained: {
                    marginTop: 6,
                    marginLeft: spacing,
                },
            },
            MuiBackdrop: {
                root: {
                    backgroundColor: core.fade("#0a082b", 0.75),
                },
            },
            MuiInputAdornment: {
                root: {
                    "& .MuiSvgIcon-root": {
                        color: palette.text.secondary,
                    },
                },
                positionStart: {
                    marginRight: 12,
                    marginLeft: 6,
                },
            },
            MuiCheckbox: {
                root: {
                    "& .MuiSvgIcon-root": {
                        width: 16,
                        height: 16,
                        margin: 1,
                    },
                },
                colorPrimary: {
                    "&.MuiCheckbox-root": {
                        color: palette.primary.main,
                        "&$disabled": {
                            color: palette.action.disabled,
                        },
                    },
                },
                colorSecondary: {
                    "&.MuiCheckbox-root": {
                        color: palette.secondary.main,
                        "&$disabled": {
                            color: palette.action.disabled,
                        },
                    },
                },
            },
            MuiRadio: {
                root: {
                    "& .MuiSvgIcon-root": {
                        width: 18,
                        height: 18,
                    },
                },
                colorPrimary: {
                    "&.MuiRadio-root": {
                        color: palette.primary.main,
                        "&$disabled": {
                            color: palette.action.disabled,
                        },
                    },
                },
                colorSecondary: {
                    "&.MuiRadio-root": {
                        color: palette.secondary.main,
                        "&$disabled": {
                            color: palette.action.disabled,
                        },
                    },
                },
            },
            MuiTabs: {
                root: {
                    minHeight: 40,
                },
                indicator: {
                    height: 3,
                },
            },
            MuiTab: {
                root: {
                    minHeight: 40,
                    marginRight: spacing * 3,
                    textTransform: "none",
                    letterSpacing: "normal",
                    fontWeight: 500,
                    "&:last-child": {
                        marginRight: 0,
                    },
                    "&.MuiButtonBase-root": {
                        minWidth: 0,
                        padding: 0,
                    },
                },
                wrapper: {},
                textColorPrimary: {
                    color: palette.text.primary,
                },
                textColorSecondary: {
                    color: palette.text.primary,
                },
            },
            // Labs components aren't typed properly, so cast overrides
            MuiAutocomplete: {
                endAdornment: {
                    "& .MuiSvgIcon-root": {
                        fontSize: 20,
                    },
                },
                inputRoot: {
                    '&[class*="MuiOutlinedInput-root"]': {
                        "& $endAdornment": {
                            right: 6,
                        },
                    },
                },
            },
        },
    });
};
var Theme = {
    light: makeTheme(lightPalette, makeShadows("#1D407E")),
    dark: makeTheme(darkPalette, makeShadows("#000")),
};

/**
 * Multi-purpose wrapper around the Material UI button that provides some
 * additional common use cases props.
 *
 * See original component's Material UI documentation here: https://material-ui.com/components/buttons/
 */
var Button = function (_a) {
    var _b = _a.loading, loading = _b === void 0 ? false : _b, Icon = _a.icon, className = _a.className, children = _a.children, _c = _a.color, color = _c === void 0 ? "default" : _c, rest = __rest(_a, ["loading", "icon", "className", "children", "color"]);
    var styles = useStyles();
    var hidden = loading ? { opacity: 0 } : undefined;
    // Custom color handlers
    var colorClass = "";
    if (color === "error") {
        colorClass = "CdrButton-error";
        color = "default";
    }
    return (React.createElement(core.Button, __assign({}, rest, { color: color, className: (className || "") + " " + styles.root + " " + colorClass, disabled: rest.disabled || loading }),
        Icon && React.createElement(Icon, { style: hidden, className: styles.icon }),
        React.createElement("span", { style: hidden }, children),
        loading && (React.createElement("div", { className: styles.loader },
            React.createElement(core.CircularProgress, { size: 18, className: styles.spinner })))));
};
var useStyles = core.makeStyles(function (theme) { return ({
    root: {
        position: "relative",
        "&.CdrButton-error": {
            "&.MuiButton-contained": {
                backgroundColor: theme.palette.error.main,
                color: theme.palette.error.contrastText,
                "&:hover": {
                    backgroundColor: theme.palette.error.dark,
                    "@media (hover: none)": {
                        backgroundColor: "transparent",
                    },
                    "&.Mui-disabled": {
                        backgroundColor: "transparent",
                    },
                },
                "&.Mui-disabled": {
                    backgroundColor: theme.palette.action.disabledBackground,
                    color: core.fade(theme.palette.text.disabled, 0.5),
                },
            },
            "&.MuiButton-outlined": {
                color: theme.palette.error.main,
                borderColor: theme.palette.error.main,
                "&:hover": {
                    backgroundColor: core.fade(theme.palette.error.main, theme.palette.action.hoverOpacity),
                    "@media (hover: none)": {
                        backgroundColor: "transparent",
                    },
                    "&.Mui-disabled": {
                        backgroundColor: "transparent",
                    },
                },
                "&.Mui-disabled": {
                    color: core.fade(theme.palette.text.disabled, 0.5),
                    borderColor: theme.palette.action.disabled,
                },
            },
            "&.MuiButton-text": {
                color: theme.palette.error.main,
                "&:hover": {
                    backgroundColor: core.fade(theme.palette.error.main, theme.palette.action.hoverOpacity),
                    "@media (hover: none)": {
                        backgroundColor: "transparent",
                    },
                },
                "&.Mui-disabled": {
                    color: core.fade(theme.palette.text.disabled, 0.5),
                },
            },
        },
    },
    icon: {
        width: 20,
        height: 20,
        marginRight: theme.spacing(1),
        ".MuiButton-sizeSmall &": {
            width: 18,
            height: 18,
        },
    },
    loader: {
        position: "absolute",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
        height: 18,
        width: 18,
    },
    spinner: {
        color: theme.palette.text.disabled,
    },
}); }, { name: "CdrButton" });

/**
 * Custom version of the Material UI Chip component that supports additional
 * colors.
 *
 * See original component's Material UI documentation here: https://material-ui.com/components/chips/
 */
var Chip = function (_a) {
    var _b = _a.color, color = _b === void 0 ? "default" : _b, rest = __rest(_a, ["color"]);
    var theme = core.useTheme();
    var style = __assign({}, (rest.style || {}));
    if (color === "success") {
        style.backgroundColor = core.fade("#30B1AD", 0.1);
        style.color = "#30B1AD";
        color = "default";
    }
    else if (color === "error") {
        style.backgroundColor = core.fade(theme.palette.error.main, 0.1);
        style.color = theme.palette.error.main;
        color = "default";
    }
    return React.createElement(core.Chip, __assign({ style: style, color: color }, rest));
};

var SearchIcon = function (props) { return (React__default.createElement(core.SvgIcon, __assign({}, props, { viewBox: "0 0 16 16" }),
    React__default.createElement("path", { d: "M15.707 13.293L13 10.586C13.63 9.536 14 8.311 14 7C14 3.14 10.859 0 7 0C3.141 0 0 3.14 0 7C0 10.86 3.141 14 7 14C8.312 14 9.536 13.631 10.586 13L13.293 15.707C13.488 15.902 13.744 16 14 16C14.256 16 14.512 15.902 14.707 15.707L15.707 14.707C16.098 14.316 16.098 13.684 15.707 13.293ZM7 12C4.239 12 2 9.761 2 7C2 4.239 4.239 2 7 2C9.761 2 12 4.239 12 7C12 9.761 9.761 12 7 12Z" }))); };

/**
 * Override of Material UI's DialogTitle that allows for a supertitle and background icon
 */
var DialogTitle = function (_a) {
    var title = _a.title, Icon = _a.icon, superTitle = _a.superTitle;
    var styles = useTitleStyles();
    return (React.createElement(core.DialogTitle, { disableTypography: true },
        superTitle && React.createElement("div", { className: styles.superTitle }, superTitle),
        React.createElement("div", { className: styles.title }, title),
        Icon && React.createElement(Icon, { className: styles.icon })));
};
var useTitleStyles = core.makeStyles(function (theme) { return ({
    title: {
        position: "relative",
        zIndex: 2,
        fontSize: 36,
        fontWeight: 600,
    },
    superTitle: {
        position: "relative",
        zIndex: 2,
        fontSize: 14,
        fontWeight: 500,
        letterSpacing: 1.5,
        textTransform: "uppercase",
    },
    icon: {
        position: "absolute",
        zIndex: 1,
        right: theme.spacing(6),
        top: "50%",
        transform: "translateY(-50%)",
        height: 76,
        width: 76,
        opacity: 0.1,
    },
}); }, { name: "CdrDialogTitle" });
/**
 * Quickly handels most modals actions, some combination of a cancel and confirm button
 */
var DialogActionButtons = function (_a) {
    var _b = _a.confirmText, confirmText = _b === void 0 ? "Confirm" : _b, _c = _a.cancelText, cancelText = _c === void 0 ? "Cancel" : _c, _d = _a.confirmLoading, confirmLoading = _d === void 0 ? false : _d, _e = _a.confirmColor, confirmColor = _e === void 0 ? "primary" : _e, onCancel = _a.onCancel, onConfirm = _a.onConfirm;
    return (React.createElement(React.Fragment, null,
        onCancel && (React.createElement(Button, { variant: "outlined", onClick: onCancel, disabled: confirmLoading }, cancelText)),
        onConfirm && (React.createElement(Button, { variant: "contained", onClick: onConfirm, color: confirmColor, loading: confirmLoading, type: "submit" }, confirmText))));
};
/**
 * Formats a search bar right below the title of a Dialog. Passes all props
 * through to the Material UI OutlinedInput component contained within.
 */
var DialogSearch = function (props) {
    var styles = useSearchStyles();
    return (React.createElement("div", { className: styles.root },
        React.createElement(core.OutlinedInput, __assign({}, props, { fullWidth: true, labelWidth: 0, className: styles.input, startAdornment: React.createElement(core.InputAdornment, { position: "start" },
                React.createElement(SearchIcon, { className: styles.icon })) }))));
};
var useSearchStyles = core.makeStyles(function (theme) { return ({
    root: {
        position: "relative",
        padding: theme.spacing(2) + "px " + theme.spacing(4) + "px",
        boxShadow: "0 2px 6px " + core.fade("#1D407E", 0.2),
        zIndex: 2,
    },
    input: {
        margin: 0,
    },
    icon: {
        width: 16,
        height: 16,
    },
}); }, { name: "CdrDialogSearch" });
/**
 * Wrapper around Material UI's Dialog component. Conveniently exports all of
 * Dialog's components in one import, so for example `<DialogContent />` becomes
 * `<Dialog.Content />` etc. Also contains some custom Dialog components listed below.
 *
 * See original component's Material UI documentation here: https://material-ui.com/components/dialogs/
 */
var Dialog = function (props) {
    // Wrapped so we can add custom attributes below
    return React.createElement(core.Dialog, __assign({}, props));
};
Dialog.Title = DialogTitle;
Dialog.Actions = core.DialogActions;
Dialog.ActionButtons = DialogActionButtons;
Dialog.Content = core.DialogContent;
Dialog.ContentText = core.DialogContentText;
Dialog.Search = DialogSearch;

var TrashIcon = function (props) { return (React__default.createElement(core.SvgIcon, __assign({}, props, { viewBox: "0 0 16 16" }),
    React__default.createElement("path", { d: "M2 6V14C2 15.1 2.9 16 4 16H12C13.1 16 14 15.1 14 14V6H2Z" }),
    React__default.createElement("path", { d: "M12 3V1C12 0.4 11.6 0 11 0H5C4.4 0 4 0.4 4 1V3H0V5H16V3H12ZM10 3H6V2H10V3Z" }))); };

var typeConfs = {
    delete: {
        color: "error",
        defaultIcon: TrashIcon,
        defaultHideCancel: false,
        defaultConfirmText: "Delete",
    },
    info: {
        color: "primary",
        defaultIcon: null,
        defaultHideCancel: true,
        defaultConfirmText: "OK",
    },
};
/**
 * Quick-use version of the Dialog component with slightly alternative styles,
 * great to use for dialogs that don't have any interaction beyond yes / no.
 */
var ConfirmDialog = function (_a) {
    var _b = _a.open, open = _b === void 0 ? false : _b, title = _a.title, description = _a.description, _c = _a.type, type = _c === void 0 ? "info" : _c, icon = _a.icon, hideCancel = _a.hideCancel, onClose = _a.onClose, confirmText = _a.confirmText, confirmLoading = _a.confirmLoading, onConfirm = _a.onConfirm, cancelText = _a.cancelText;
    var theme = core.useTheme();
    var classes = useStyles$1();
    var _d = __read(React.useState(Math.floor(Math.random() * 100000000)), 1), dialogTitleId = _d[0];
    var conf = typeConfs[type];
    var Icon = icon || conf.defaultIcon;
    var noCancel = hideCancel === undefined ? conf.defaultHideCancel : hideCancel;
    return (React.createElement(Dialog, { open: open, onClose: onClose, maxWidth: "xs", "aria-labelledby": "dialog-title-" + dialogTitleId },
        React.createElement(core.DialogTitle, { id: "dialog-title-" + dialogTitleId, className: classes.title },
            React.createElement(core.Box, { display: "flex", alignItems: "center" },
                Icon && (React.createElement("div", { className: classes.titleIcon, style: { background: core.fade(theme.palette[conf.color].main, 0.15) } },
                    React.createElement(Icon, { style: { width: 16, height: 16 }, htmlColor: theme.palette[conf.color].main }))),
                React.createElement(core.Typography, { className: classes.titleText }, title),
                React.createElement(core.IconButton, { onClick: onClose },
                    React.createElement(CloseIcon, { style: { width: 24, height: 24 } })))),
        description && (React.createElement(Dialog.Content, { className: classes.content },
            React.createElement(core.Typography, { color: "textSecondary" }, description))),
        React.createElement(Dialog.Actions, null,
            React.createElement(Dialog.ActionButtons, { confirmText: confirmText || conf.defaultConfirmText, confirmLoading: confirmLoading, confirmColor: conf.color, onConfirm: onConfirm || onClose, cancelText: cancelText, onCancel: noCancel ? undefined : onClose }))));
};
var useStyles$1 = core.makeStyles(function (theme) { return ({
    title: {
        paddingTop: 25,
        paddingBottom: 25,
        background: theme.palette.background.paper,
        color: theme.palette.text.primary,
    },
    titleIcon: {
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: 36,
        height: 36,
        marginRight: theme.spacing(2),
        borderRadius: "100%",
    },
    titleText: {
        flex: 1,
        fontSize: 24,
        fontWeight: 600,
        paddingRight: 20,
    },
    content: {
        paddingTop: 0,
        paddingBottom: 30,
        background: theme.palette.background.paper,
        borderBottom: "1px solid " + core.fade(theme.palette.divider, 0.5),
    },
}); }, { name: "CdrConfirmDialog" });

/**
 * Component to place on screens or in lists that have no content. Optionally
 * provide a button that would allow the user to return from where they were,
 * or to add an item that they currently have none of.
 *
 * EmptyState's props extend the [Material UI Box component](https://material-ui.com/components/box/)
 * that you can directly pass props through to to customize the shape and layout of it.
 */
var EmptyState = function (props) {
    var message = props.message, description = props.description, button = props.button, Icon = props.icon, _a = props.iconProps, iconProps = _a === void 0 ? {} : _a, _b = props.messageProps, messageProps = _b === void 0 ? {} : _b, _c = props.descriptionProps, descriptionProps = _c === void 0 ? {} : _c, boxProps = __rest(props, ["message", "description", "button", "icon", "iconProps", "messageProps", "descriptionProps"]);
    var styles = useStyles$2();
    var descClassName = styles.description + " " + (descriptionProps.className || "");
    var buttonClassName = styles.button + " " + (button && button.className ? button.className : "");
    return (React.createElement(core.Box, __assign({ className: styles.root }, boxProps),
        Icon && React.createElement(Icon, __assign({ className: styles.icon }, iconProps)),
        React.createElement(core.Typography, __assign({ variant: "h5", color: "textSecondary" }, messageProps), message),
        description && (React.createElement(core.Typography, __assign({ variant: "body2", color: "textSecondary" }, descriptionProps, { className: descClassName }), description)),
        button && React.createElement(Button, __assign({ variant: "contained", color: "primary" }, button, { className: buttonClassName }))));
};
var useStyles$2 = core.makeStyles(function (theme) { return ({
    root: {
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        textAlign: "center",
        minHeight: 120,
        padding: theme.spacing(3),
    },
    description: {
        marginTop: theme.spacing(2),
        marginBottom: theme.spacing(1),
    },
    button: {
        marginTop: theme.spacing(2),
    },
    icon: {
        fontSize: 64,
        color: theme.palette.text.secondary,
        marginBottom: theme.spacing(1),
        opacity: 0.5,
    },
}); }, { name: "CdrEmptyState" });

/**
 * EntityRow is a wrapper around ListItem and its subcomponents, to quickly
 * display entities in a list. Automatically provides image failure fallbacks,
 * and works with icons as well as image based avatars.
 *
 * See original component's Material UI documentation here: https://material-ui.com/components/lists/
 */
var EntityRow = function (_a) {
    var primary = _a.primary, secondary = _a.secondary, Icon = _a.icon, iconColor = _a.iconColor, iconBgcolor = _a.iconBgcolor, avatar = _a.avatar, avatarAlt = _a.avatarAlt, props = __rest(_a, ["primary", "secondary", "icon", "iconColor", "iconBgcolor", "avatar", "avatarAlt"]);
    var avatarEl = null;
    if (avatar) {
        avatarEl = React.createElement(core.Avatar, { src: avatar, alt: avatarAlt });
        if (!avatarAlt) {
            console.warn("EntityRow: Avatar provided without alt text");
        }
    }
    else if (Icon) {
        var style = { color: iconColor, backgroundColor: iconBgcolor };
        avatarEl = (React.createElement(core.Avatar, { style: style },
            React.createElement(Icon, null)));
    }
    return (React.createElement(core.ListItem, __assign({}, props),
        avatarEl && React.createElement(core.ListItemAvatar, null, avatarEl),
        React.createElement(core.ListItemText, { primary: primary, secondary: secondary })));
};

/**
 * Wrapper around Material UI's Snackbar component, provides pre-configured
 * themes and convenience props. Coder UI's Snackbars require a close handler,
 * since they always render a close button.
 *
 * Snackbars do _not_ automatically appear in the top-level position when
 * rendered, you'll need to use ReactDom portals or the Material UI Portal
 * component for that.
 *
 * See original component's Material UI documentation here: https://material-ui.com/components/snackbars/
 */
var Snackbar = function (_a) {
    var onClose = _a.onClose, _b = _a.type, type = _b === void 0 ? "default" : _b, _c = _a.ContentProps, ContentProps = _c === void 0 ? {} : _c, action = _a.action, rest = __rest(_a, ["onClose", "type", "ContentProps", "action"]);
    var theme = core.useTheme();
    var color;
    var backgroundColor;
    switch (type) {
        case "default":
            color = theme.palette.background.paper;
            backgroundColor = theme.palette.text.primary;
            break;
        case "primary":
            color = theme.palette.primary.contrastText;
            backgroundColor = theme.palette.primary.main;
            break;
        case "error":
            color = theme.palette.error.contrastText;
            backgroundColor = theme.palette.error.main;
            break;
    }
    var boxShadow = React.useMemo(function () {
        return backgroundColor ? makeShadows(backgroundColor)[6] : undefined;
    }, [backgroundColor]);
    return (React.createElement(core.Snackbar, __assign({ anchorOrigin: {
            vertical: "bottom",
            horizontal: "right",
        } }, rest, { action: React.createElement(core.Box, { display: "flex", alignItems: "center" },
            action,
            React.createElement(core.IconButton, { onClick: onClose },
                React.createElement(CloseIcon, { htmlColor: color }))), ContentProps: __assign(__assign({}, ContentProps), { elevation: 6, style: __assign(__assign({}, (ContentProps.style || {})), { color: color,
                backgroundColor: backgroundColor,
                boxShadow: boxShadow }) }), onClose: onClose })));
};

var PaginateLeftIcon = function (props) { return (React__default.createElement(core.SvgIcon, __assign({}, props, { viewBox: "0 0 10 16" }),
    React__default.createElement("path", { d: "M0.401562 7.9998L8.10156 0.299805L9.60156 1.6998L3.30156 7.9998L9.60156 14.2998L8.10156 15.6998L0.401562 7.9998Z" }))); };

var PaginateRightIcon = function (props) { return (React__default.createElement(core.SvgIcon, __assign({}, props, { viewBox: "0 0 10 16" }),
    React__default.createElement("path", { d: "M9.59844 8.0002L1.89844 15.7002L0.398438 14.3002L6.69844 8.0002L0.398438 1.7002L1.89844 0.300196L9.59844 8.0002Z" }))); };

var TableSortHead = function (props) {
    var handleChangeSort = React.useCallback(function (type) {
        var newOrderBy = type === props.orderType ? (props.orderBy === "asc" ? "desc" : "asc") : "asc";
        props.onChangeSort(type, newOrderBy);
    }, [props]);
    var columns = props.columns.filter(function (c) { return !!c; });
    return (React.createElement(Table.Head, null,
        (props.title || props.pagination || props.actions) && (React.createElement(Table.Header, { title: props.title, pagination: props.pagination, actions: props.actions })),
        React.createElement(Table.Row, null, columns.map(function (c, idx) { return (React.createElement(Table.Cell, { key: idx, size: "small", style: c.noPadding ? { padding: 0 } : undefined }, c.static ? (c.label) : (React.createElement(Table.SortLabel, { active: props.orderType === c.value, direction: props.orderBy, onClick: function () { return handleChangeSort(c.value); } }, c.label)))); }))));
};
/**
 * Hook for Table.SortHead, provides you orderType, orderBy, and a change handler.
 */
var useTableSort = function (defaultOrderType, defaultOrderBy) {
    if (defaultOrderBy === void 0) { defaultOrderBy = "asc"; }
    var _a = __read(React.useState(defaultOrderType), 2), orderType = _a[0], setOrderType = _a[1];
    var _b = __read(React.useState(defaultOrderBy), 2), orderBy = _b[0], setOrderBy = _b[1];
    var handleChangeSort = React.useCallback(function (orderType, orderBy) {
        if (orderType !== undefined) {
            setOrderType(orderType);
        }
        if (orderBy !== undefined) {
            setOrderBy(orderBy);
        }
    }, []);
    return [orderType, orderBy, handleChangeSort];
};
/**
 * Simplified take on table pagination, just page numbers and buttons.
 */
var TableSimplePagination = function (_a) {
    var page = _a.page, count = _a.count, rowsPerPage = _a.rowsPerPage, onChangePage = _a.onChangePage;
    var styles = usePaginationStyles();
    var lastPage = Math.ceil(count / rowsPerPage);
    var showFirstButton = page > 2;
    var showFirstEllipsis = page > 3;
    var showLastEllipsis = page < lastPage - 2;
    var showLastButton = page < lastPage - 1;
    return (React.createElement(core.Box, { display: "flex", alignItems: "center" },
        React.createElement(Button, { className: styles.button, size: "small", variant: "outlined", disabled: page === 1, onClick: function () { return onChangePage(page - 1); } },
            React.createElement(PaginateLeftIcon, { className: styles.buttonIcon })),
        showFirstButton && React.createElement(PageButton, { page: 1, onChangePage: onChangePage }),
        showFirstEllipsis && (React.createElement("span", { className: styles.ellipsis, "aria-hidden": true }, "...")),
        page - 1 > 0 && React.createElement(PageButton, { page: page - 1, onChangePage: onChangePage }),
        React.createElement(PageButton, { page: page, onChangePage: onChangePage, disabled: true }),
        page + 1 <= lastPage && React.createElement(PageButton, { page: page + 1, onChangePage: onChangePage }),
        showLastEllipsis && (React.createElement("span", { className: styles.ellipsis, "aria-hidden": true }, "...")),
        showLastButton && React.createElement(PageButton, { page: lastPage, onChangePage: onChangePage }),
        React.createElement(Button, { className: styles.button, size: "small", variant: "outlined", disabled: page === lastPage, onClick: function () { return onChangePage(page + 1); } },
            React.createElement(PaginateRightIcon, { className: styles.buttonIcon }))));
};
var usePaginationStyles = core.makeStyles(function (theme) { return ({
    button: {
        position: "relative",
        minWidth: 0,
        width: theme.spacing(6),
        marginLeft: theme.spacing(1),
        marginRight: theme.spacing(1),
    },
    buttonIcon: {
        position: "absolute",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
        color: theme.palette.primary.main,
        fontSize: 16,
    },
    ellipsis: {
        pointerEvents: "none",
    },
}); });
var PageButton = function (_a) {
    var page = _a.page, disabled = _a.disabled, onChangePage = _a.onChangePage;
    var styles = usePageButtonStyles();
    return (React.createElement("button", { className: styles.root, onClick: function () { return onChangePage(page); }, disabled: disabled }, page));
};
var usePageButtonStyles = core.makeStyles(function (theme) { return ({
    root: {
        minWidth: 28,
        height: 32,
        padding: theme.spacing(1) / 4,
        fontSize: 16,
        lineHeight: 1,
        marginLeft: theme.spacing(1) / 2,
        marginRight: theme.spacing(1) / 2,
        borderRadius: theme.shape.borderRadius,
        color: theme.palette.text.secondary,
        // Button resets
        background: "none",
        border: "none",
        boxShadow: "none",
        outline: "none",
        cursor: "pointer",
        "&:hover": {
            color: theme.palette.text.primary,
        },
        "&:disabled": {
            background: theme.palette.action.selected,
            pointerEvents: "none",
        },
    },
}); });
/**
 * Component that encapsulates all of the pieces that sit on the top of a table.
 */
var TableHeader = function (_a) {
    var title = _a.title, pagination = _a.pagination, actions = _a.actions;
    var styles = useTitleStyles$1();
    return (React.createElement(core.TableRow, { className: styles.root },
        React.createElement(core.TableCell, { colSpan: 9999 },
            React.createElement(core.Box, { display: "flex", alignItems: "center", justifyContent: "space-between" },
                title && (React.createElement(core.Typography, { variant: "h6", className: styles.title }, title)),
                pagination && React.createElement(TableSimplePagination, __assign({}, pagination)),
                actions && (React.createElement("div", { className: styles.actions }, actions.map(function (a, idx) { return (React.createElement(Button, __assign({ key: idx, color: "primary", size: "small" }, a))); })))))));
};
var useTitleStyles$1 = core.makeStyles(function (theme) { return ({
    root: {
        "& .MuiTableCell-root": {
            background: "none",
            paddingTop: theme.spacing(2),
            paddingBottom: theme.spacing(2),
        },
    },
    title: {
        fontSize: 20,
        fontWeight: 500,
        color: theme.palette.text.primary,
        textTransform: "none",
        letterSpacing: "normal",
    },
    actions: {
        display: "flex",
        alignItems: "center",
        justifyContent: "flex-end",
        "& .MuiButton-root": {
            marginRight: theme.spacing(1),
            "&:last-child": {
                marginRight: 0,
            },
        },
    },
}); });
/**
 * Wrapper around Material UI's Table component that fixes scroll behavior.
 * Conveniently exports all of Table's components in one import, so for example
 * `<TableCell />` becomes `<Table.Cell />` etc.
 *
 * Provides `<Table.SortHead />`, a convenient way to create sortable
 * tables. Pair that with the `useTableSort` hook to get convenient.
 *
 * Also provides `<Table.Title />`, a component that styles the title aboce
 * tables.
 *
 * See original component's Material UI documentation here: https://material-ui.com/components/tables/
 */
var Table = function (_a) {
    var className = _a.className, _b = _a.inline, inline = _b === void 0 ? false : _b, rest = __rest(_a, ["className", "inline"]);
    var styles = useTableStyles();
    return (React.createElement(core.Box, { width: "100%", margin: inline ? 0 : "-4px", padding: inline ? 0 : "4px", overflow: "auto" },
        React.createElement(core.Table, __assign({ className: (className || "") + " " + styles.table + " " + (inline ? "is-inline" : "") }, rest))));
};
var useTableStyles = core.makeStyles(function () { return ({
    table: {},
}); });
// Conveniently export all subcomponents as properties
Table.Body = core.TableBody;
Table.Cell = core.TableCell;
Table.Footer = core.TableFooter;
Table.Head = core.TableHead;
Table.Row = core.TableRow;
Table.Pagination = core.TablePagination;
Table.SimplePagination = TableSimplePagination;
Table.SortLabel = core.TableSortLabel;
Table.SortHead = TableSortHead;
Table.Header = TableHeader;

/**
 * Material UI theme provider with the Coder UI light theme as the default.
 */
var ThemeProvider = function (_a) {
    var children = _a.children, _b = _a.theme, theme = _b === void 0 ? Theme.light : _b;
    useStorybookStyles();
    return (React.createElement(styles.ThemeProvider, { theme: theme },
        React.createElement(core.CssBaseline, null),
        children));
};
// TODO: Only load these in storybook
var useStorybookStyles = core.makeStyles(function (theme) {
    if (process.env.NODE_ENV !== "development") {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        return {};
    }
    return {
        "@global": {
            ".sbdocs": {
                "&.sbdocs-wrapper": {
                    background: theme.palette.background.paper,
                },
                "& .docblock-propstable tbody tr td": {
                    background: theme.palette.background.paper,
                },
            },
        },
    };
});

/**
 * Wrapper around Material UI's Tooltip component, provides a custom arrow
 * style that required additional markup. Also allows passing a falsy title
 * to not render the tooltip for easy conditional tooltips.
 *
 * See original component's Material UI documentation here: https://material-ui.com/components/tooltips/
 */
var Tooltip = function (_a) {
    var title = _a.title, _b = _a.PopperProps, PopperProps = _b === void 0 ? {} : _b, props = __rest(_a, ["title", "PopperProps"]);
    var _c = useStyles$3(), arrow = _c.arrow, classes = __rest(_c, ["arrow"]);
    var _d = __read(React.useState(null), 2), arrowRef = _d[0], setArrowRef = _d[1];
    if (!title) {
        return props.children;
    }
    return (React.createElement(core.Tooltip, __assign({}, props, { classes: classes, PopperProps: __assign(__assign({}, PopperProps), { popperOptions: {
                modifiers: {
                    arrow: {
                        enabled: !!arrowRef,
                        element: arrowRef,
                    },
                },
            } }), title: React.createElement(React.Fragment, null,
            title,
            React.createElement("span", { className: arrow, ref: setArrowRef })) })));
};
var arrowSize = 6;
var useStyles$3 = core.makeStyles(function (theme) { return ({
    tooltip: {
        position: "relative",
    },
    arrow: {
        position: "absolute",
        fontSize: 6,
        "&::before": {
            content: '""',
            margin: "auto",
            display: "block",
            width: 0,
            height: 0,
            borderStyle: "solid",
        },
    },
    popper: {
        '&[x-placement*="bottom"] $arrow': {
            top: 0,
            left: 0,
            marginTop: -arrowSize + "px",
            width: arrowSize * 2 + "px",
            height: arrowSize + "px",
            "&::before": {
                borderWidth: "0 " + arrowSize + "px " + arrowSize + "px " + arrowSize + "px",
                borderColor: "transparent transparent " + getTooltipColor(theme.palette) + " transparent",
            },
        },
        '&[x-placement*="top"] $arrow': {
            bottom: 0,
            left: 0,
            marginBottom: -arrowSize + "px",
            width: arrowSize * 2 + "px",
            height: arrowSize + "px",
            "&::before": {
                borderWidth: arrowSize + "px " + arrowSize + "px 0 " + arrowSize + "px",
                borderColor: getTooltipColor(theme.palette) + " transparent transparent transparent",
            },
        },
        '&[x-placement*="right"] $arrow': {
            left: 0,
            marginLeft: -arrowSize + "px",
            height: arrowSize * 2 + "px",
            width: arrowSize + "px",
            "&::before": {
                borderWidth: arrowSize + "px " + arrowSize + "px " + arrowSize + "px 0",
                borderColor: "transparent " + getTooltipColor(theme.palette) + " transparent transparent",
            },
        },
        '&[x-placement*="left"] $arrow': {
            right: 0,
            marginRight: -arrowSize + "px",
            height: arrowSize * 2 + "px",
            width: arrowSize + "px",
            "&::before": {
                borderWidth: arrowSize + "px 0 " + arrowSize + "px " + arrowSize + "px",
                borderColor: "transparent transparent transparent " + getTooltipColor(theme.palette),
            },
        },
    },
}); });

/**
 * Wrapper around Material UI's Typography component to allow for future
 * custom typography types.
 *
 * See original component's Material UI documentation here: https://material-ui.com/components/typography/
 */
var Typography = function (props) {
    return React.createElement(core.Typography, __assign({}, props));
};

Object.defineProperty(exports, 'Avatar', {
    enumerable: true,
    get: function () {
        return core.Avatar;
    }
});
Object.defineProperty(exports, 'Backdrop', {
    enumerable: true,
    get: function () {
        return core.Backdrop;
    }
});
Object.defineProperty(exports, 'Badge', {
    enumerable: true,
    get: function () {
        return core.Badge;
    }
});
Object.defineProperty(exports, 'Box', {
    enumerable: true,
    get: function () {
        return core.Box;
    }
});
Object.defineProperty(exports, 'ButtonBase', {
    enumerable: true,
    get: function () {
        return core.ButtonBase;
    }
});
Object.defineProperty(exports, 'ButtonGroup', {
    enumerable: true,
    get: function () {
        return core.ButtonGroup;
    }
});
Object.defineProperty(exports, 'Checkbox', {
    enumerable: true,
    get: function () {
        return core.Checkbox;
    }
});
Object.defineProperty(exports, 'CircularProgress', {
    enumerable: true,
    get: function () {
        return core.CircularProgress;
    }
});
Object.defineProperty(exports, 'ClickAwayListener', {
    enumerable: true,
    get: function () {
        return core.ClickAwayListener;
    }
});
Object.defineProperty(exports, 'Collapse', {
    enumerable: true,
    get: function () {
        return core.Collapse;
    }
});
Object.defineProperty(exports, 'Container', {
    enumerable: true,
    get: function () {
        return core.Container;
    }
});
Object.defineProperty(exports, 'Divider', {
    enumerable: true,
    get: function () {
        return core.Divider;
    }
});
Object.defineProperty(exports, 'Drawer', {
    enumerable: true,
    get: function () {
        return core.Drawer;
    }
});
Object.defineProperty(exports, 'Fade', {
    enumerable: true,
    get: function () {
        return core.Fade;
    }
});
Object.defineProperty(exports, 'FormControl', {
    enumerable: true,
    get: function () {
        return core.FormControl;
    }
});
Object.defineProperty(exports, 'FormControlLabel', {
    enumerable: true,
    get: function () {
        return core.FormControlLabel;
    }
});
Object.defineProperty(exports, 'FormHelperText', {
    enumerable: true,
    get: function () {
        return core.FormHelperText;
    }
});
Object.defineProperty(exports, 'Grid', {
    enumerable: true,
    get: function () {
        return core.Grid;
    }
});
Object.defineProperty(exports, 'Grow', {
    enumerable: true,
    get: function () {
        return core.Grow;
    }
});
Object.defineProperty(exports, 'Hidden', {
    enumerable: true,
    get: function () {
        return core.Hidden;
    }
});
Object.defineProperty(exports, 'IconButton', {
    enumerable: true,
    get: function () {
        return core.IconButton;
    }
});
Object.defineProperty(exports, 'InputAdornment', {
    enumerable: true,
    get: function () {
        return core.InputAdornment;
    }
});
Object.defineProperty(exports, 'InputLabel', {
    enumerable: true,
    get: function () {
        return core.InputLabel;
    }
});
Object.defineProperty(exports, 'Link', {
    enumerable: true,
    get: function () {
        return core.Link;
    }
});
Object.defineProperty(exports, 'List', {
    enumerable: true,
    get: function () {
        return core.List;
    }
});
Object.defineProperty(exports, 'ListItem', {
    enumerable: true,
    get: function () {
        return core.ListItem;
    }
});
Object.defineProperty(exports, 'ListItemAvatar', {
    enumerable: true,
    get: function () {
        return core.ListItemAvatar;
    }
});
Object.defineProperty(exports, 'ListItemIcon', {
    enumerable: true,
    get: function () {
        return core.ListItemIcon;
    }
});
Object.defineProperty(exports, 'ListItemSecondaryAction', {
    enumerable: true,
    get: function () {
        return core.ListItemSecondaryAction;
    }
});
Object.defineProperty(exports, 'ListItemText', {
    enumerable: true,
    get: function () {
        return core.ListItemText;
    }
});
Object.defineProperty(exports, 'ListSubheader', {
    enumerable: true,
    get: function () {
        return core.ListSubheader;
    }
});
Object.defineProperty(exports, 'Menu', {
    enumerable: true,
    get: function () {
        return core.Menu;
    }
});
Object.defineProperty(exports, 'MenuItem', {
    enumerable: true,
    get: function () {
        return core.MenuItem;
    }
});
Object.defineProperty(exports, 'MenuList', {
    enumerable: true,
    get: function () {
        return core.MenuList;
    }
});
Object.defineProperty(exports, 'Paper', {
    enumerable: true,
    get: function () {
        return core.Paper;
    }
});
Object.defineProperty(exports, 'Portal', {
    enumerable: true,
    get: function () {
        return core.Portal;
    }
});
Object.defineProperty(exports, 'Radio', {
    enumerable: true,
    get: function () {
        return core.Radio;
    }
});
Object.defineProperty(exports, 'RadioGroup', {
    enumerable: true,
    get: function () {
        return core.RadioGroup;
    }
});
Object.defineProperty(exports, 'Select', {
    enumerable: true,
    get: function () {
        return core.Select;
    }
});
Object.defineProperty(exports, 'ServerStyleSheets', {
    enumerable: true,
    get: function () {
        return core.ServerStyleSheets;
    }
});
Object.defineProperty(exports, 'Slide', {
    enumerable: true,
    get: function () {
        return core.Slide;
    }
});
Object.defineProperty(exports, 'SvgIcon', {
    enumerable: true,
    get: function () {
        return core.SvgIcon;
    }
});
Object.defineProperty(exports, 'Switch', {
    enumerable: true,
    get: function () {
        return core.Switch;
    }
});
Object.defineProperty(exports, 'Tab', {
    enumerable: true,
    get: function () {
        return core.Tab;
    }
});
Object.defineProperty(exports, 'Tabs', {
    enumerable: true,
    get: function () {
        return core.Tabs;
    }
});
Object.defineProperty(exports, 'TextField', {
    enumerable: true,
    get: function () {
        return core.TextField;
    }
});
Object.defineProperty(exports, 'Zoom', {
    enumerable: true,
    get: function () {
        return core.Zoom;
    }
});
Object.defineProperty(exports, 'darken', {
    enumerable: true,
    get: function () {
        return core.darken;
    }
});
Object.defineProperty(exports, 'emphasize', {
    enumerable: true,
    get: function () {
        return core.emphasize;
    }
});
Object.defineProperty(exports, 'fade', {
    enumerable: true,
    get: function () {
        return core.fade;
    }
});
Object.defineProperty(exports, 'lighten', {
    enumerable: true,
    get: function () {
        return core.lighten;
    }
});
Object.defineProperty(exports, 'makeStyles', {
    enumerable: true,
    get: function () {
        return core.makeStyles;
    }
});
Object.defineProperty(exports, 'useMediaQuery', {
    enumerable: true,
    get: function () {
        return core.useMediaQuery;
    }
});
Object.defineProperty(exports, 'useScrollTrigger', {
    enumerable: true,
    get: function () {
        return core.useScrollTrigger;
    }
});
Object.defineProperty(exports, 'useTheme', {
    enumerable: true,
    get: function () {
        return core.useTheme;
    }
});
Object.defineProperty(exports, 'Alert', {
    enumerable: true,
    get: function () {
        return lab.Alert;
    }
});
Object.defineProperty(exports, 'AlertTitle', {
    enumerable: true,
    get: function () {
        return lab.AlertTitle;
    }
});
Object.defineProperty(exports, 'Autocomplete', {
    enumerable: true,
    get: function () {
        return lab.Autocomplete;
    }
});
exports.Button = Button;
exports.Chip = Chip;
exports.ConfirmDialog = ConfirmDialog;
exports.Dialog = Dialog;
exports.DialogActionButtons = DialogActionButtons;
exports.DialogSearch = DialogSearch;
exports.DialogTitle = DialogTitle;
exports.EmptyState = EmptyState;
exports.EntityRow = EntityRow;
exports.Snackbar = Snackbar;
exports.Table = Table;
exports.TableHeader = TableHeader;
exports.TableSimplePagination = TableSimplePagination;
exports.TableSortHead = TableSortHead;
exports.Theme = Theme;
exports.ThemeProvider = ThemeProvider;
exports.Tooltip = Tooltip;
exports.Typography = Typography;
exports.getTooltipColor = getTooltipColor;
exports.makeShadows = makeShadows;
exports.useTableSort = useTableSort;
