@popmenu/admin-ui 0.126.1 → 0.126.3

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

@@ -4,16 +4,11 @@ var tslib = require('tslib');
 var React = require('react');
 var commonUi = require('@popmenu/common-ui');
 var webIcons = require('@popmenu/web-icons');
-var styles = require('@material-ui/core/styles');
 var core = require('@material-ui/core');
-var MuiAlertTitle = require('@material-ui/lab/AlertTitle');
-var Box = require('@material-ui/core/Box');
-var Dialog = require('@material-ui/core/Dialog');
-var MuiSnackbar = require('@material-ui/core/Snackbar');
+var lab = require('@material-ui/lab');
 var classNames = require('classnames');
-var createTheme = require('@material-ui/core/styles/createTheme');
 
-var useAlertStyles = styles.makeStyles(function (theme) { return ({
+var useAlertStyles = core.makeStyles(function (theme) { return ({
     root: {
         alignItems: 'center',
         width: function (_a) {
@@ -235,7 +230,7 @@ Button.defaultProps = {
 };
 Button.displayName = 'Button';
 
-var useAlertDialogStyles = styles.makeStyles(function (theme) { return ({
+var useAlertDialogStyles = core.makeStyles(function (theme) { return ({
     cancelButton: {
         color: theme.palette.grey[700],
     },
@@ -292,7 +287,7 @@ AlertDialogHeader.displayName = 'AlertDialogHeader';
 
 var AlertTitle = function (props) {
     var children = props.children, muiProps = tslib.__rest(props, ["children"]);
-    return (React.createElement(MuiAlertTitle, tslib.__assign({}, muiProps),
+    return (React.createElement(lab.AlertTitle, tslib.__assign({}, muiProps),
         React.createElement(commonUi.Typography, { variant: "h6" },
             " ",
             children,
@@ -308,7 +303,7 @@ var getBorderColor = function (palette, variant) {
     }
     return borderColor;
 };
-var useButtonGroupStyles = styles.makeStyles(function (theme) { return ({
+var useButtonGroupStyles = core.makeStyles(function (theme) { return ({
     root: {
         boxShadow: 'none',
     },
@@ -328,7 +323,7 @@ var ButtonGroup = React.forwardRef(function (props, ref) {
     var children = props.children, _a = props.variant, variant = _a === void 0 ? 'primary' : _a, muiProps = tslib.__rest(props, ["children", "variant"]);
     var classes = useButtonGroupStyles(props);
     var derivedProps = deriveButtonProps({ variant: variant });
-    var spacing = styles.useTheme().spacing;
+    var spacing = core.useTheme().spacing;
     var childrenWithProps = React.Children.map(children, function (child, i) {
         var isFirst = i === 0 && props.orientation === 'vertical';
         var isLast = i === React.Children.toArray(children).length - 1 && props.orientation === 'vertical';
@@ -343,7 +338,20 @@ var ButtonGroup = React.forwardRef(function (props, ref) {
 });
 ButtonGroup.displayName = 'ButtonGroup';
 
-var useFeatureIntroStyles = styles.makeStyles(function (_a) {
+var useStyles$4 = core.makeStyles(function (_a) {
+    var palette = _a.palette;
+    return ({
+        root: {
+            background: palette.grey['100'],
+        },
+    });
+});
+var DialogActions = function (props) {
+    var classes = useStyles$4(props);
+    return React.createElement(commonUi.DialogActions, tslib.__assign({ classes: classes }, props));
+};
+
+var useFeatureIntroStyles = core.makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -378,7 +386,7 @@ var FeatureIntro = function (props) {
 };
 FeatureIntro.displayName = 'FeatureIntro';
 
-var useFullScreenStepperActionsStyles = styles.makeStyles(function (theme) { return ({
+var useFullScreenStepperActionsStyles = core.makeStyles(function (theme) { return ({
     root: {
         position: 'sticky',
         background: 'white',
@@ -434,14 +442,14 @@ var StepperActionsPreviousButton = function (props) {
     return displayPreviousButton ? (React.createElement(Button, tslib.__assign({ variant: "tertiary", disabled: stepCursor === 1 }, augmentedPreviousButtonProps), previousButtonText || 'previous')) : null;
 };
 
-var useStyles$4 = styles.makeStyles({
+var useStyles$3 = core.makeStyles({
     root: {
         fontStyle: 'italic',
     },
 });
 var StepperActionsStatusText = function (props) {
     var statusText = props.statusText;
-    var classes = useStyles$4(props);
+    var classes = useStyles$3(props);
     return statusText ? (React.createElement(commonUi.Typography, { classes: { root: classes.root }, variant: "body2" }, statusText)) : null;
 };
 
@@ -485,7 +493,7 @@ var getBorderRadius = function (theme, props) {
         return theme.spacing(0.5);
     }
 };
-var useFullScreenStepperProgressStyles = styles.makeStyles(function (theme) { return ({
+var useFullScreenStepperProgressStyles = core.makeStyles(function (theme) { return ({
     progress: {
         width: function (props) { return (props.stepCursor / props.stepCount) * 100 + "%"; },
         transition: 'all 500ms',
@@ -513,7 +521,7 @@ var FullScreenStepperProgress = function (props) {
         React.createElement(commonUi.Box, { className: classes.progress })));
 };
 
-var useFullScreenStepperHeaderStyles = styles.makeStyles(function (_a) {
+var useFullScreenStepperHeaderStyles = core.makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         closeButton: {
@@ -637,11 +645,11 @@ var FullScreenStepper = function (props) {
         });
     }); };
     var content = React.Children.toArray(children).find(function (child) { return React.isValidElement(child) && child.props.name === step.name; });
-    return (React.createElement(Dialog, tslib.__assign({ fullScreen: true }, DialogProps),
+    return (React.createElement(core.Dialog, tslib.__assign({ fullScreen: true }, DialogProps),
         React.createElement(FullScreenStepperContext.Provider, { value: mergedContext },
-            React.createElement(Box, { display: "flex", flexDirection: "column", flexGrow: 1 },
+            React.createElement(core.Box, { display: "flex", flexDirection: "column", flexGrow: 1 },
                 React.createElement(FullScreenStepperHeader, { stepCount: stepCount, stepCursor: stepCursor, onClose: handleClose, step: step }),
-                React.createElement(Box, { display: "flex", mx: 6, flexGrow: 1, alignItems: "center", flexDirection: "column" }, content),
+                React.createElement(core.Box, { display: "flex", mx: 6, flexGrow: 1, alignItems: "center", flexDirection: "column" }, content),
                 displayActionBar && displayStepActionBar && (React.createElement(FullScreenStepperActions, tslib.__assign({}, step.actionBar, { callbackArgs: callbackArgs, displayCancelButton: displayCancelButton, displayPreviousButton: displayPreviousButton, stepCount: stepCount, stepCursor: stepCursor, setStepCursor: setStepCursor, handleCancelClick: handleCancelClick, handleNextClick: handleNextClick, handlePreviousClick: handlePreviousClick })))))));
 };
 FullScreenStepper.displayName = 'FullScreenStepper';
@@ -651,98 +659,31 @@ var FullScreenStepperContent = function (props) {
     return (React.createElement(commonUi.Box, tslib.__assign({ py: 8 }, boxProps), props.children));
 };
 
-var useSelectableCardStyles = styles.makeStyles(function (theme) {
-    var _a = theme.palette, info = _a.info, grey = _a.grey, getContrastText = _a.getContrastText, spacing = theme.spacing;
-    var selectedBackgroundColor = styles.lighten(theme.palette.info.light, 0.9);
-    var backgroundColor = theme.palette.surface.light;
-    return {
-        root: {
-            position: 'relative',
-            border: function (_a) {
-                var selected = _a.selected;
-                return (selected ? "1px solid " + info.light : "1px solid " + grey[700]);
-            },
-            backgroundColor: function (_a) {
-                var selected = _a.selected;
-                return (selected ? selectedBackgroundColor : backgroundColor);
-            },
-            color: function (_a) {
-                var selected = _a.selected;
-                return (selected ? getContrastText(selectedBackgroundColor) : getContrastText(backgroundColor));
-            },
-            transition: 'none',
-        },
-        cardContent: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: spacing(2.5),
-        },
-        icon: {
-            position: 'absolute',
-            top: spacing(2),
-            left: spacing(2),
-            color: function (_a) {
-                var selected = _a.selected;
-                return (selected ? info.main : grey[700]);
-            },
+var useStyles$2 = core.makeStyles(function (theme) { return ({
+    root: {
+        '&$uncontained > li > *:first-child': {
+            background: theme.palette.background.paper,
+            borderRadius: theme.spacing(1),
         },
-        focusHighlight: {
-            backgroundColor: 'inherit',
+        '& > li > *:first-child': {
+            borderBottom: "1px solid " + theme.palette.grey[300],
         },
-    };
-});
-
-var SelectableCard = function (props) {
-    var children = props.children, selectedProp = props.selected, _a = props.selection, selection = _a === void 0 ? [] : _a, onClick = props.onClick, value = props.value, labelId = props.labelId, CardActionAreaProps = props.CardActionAreaProps, muiProps = tslib.__rest(props, ["children", "selected", "selection", "onClick", "value", "labelId", "CardActionAreaProps"]);
-    var selected = typeof selectedProp === 'boolean' ? selectedProp : selection.includes(value);
-    var classes = useSelectableCardStyles(tslib.__assign(tslib.__assign({}, props), { selected: selected }));
-    var handleClick = function () {
-        onClick(value);
-    };
-    return (React.createElement(commonUi.Card, tslib.__assign({ classes: { root: classes.root } }, muiProps),
-        React.createElement(commonUi.CardActionArea, tslib.__assign({ onClick: handleClick, classes: { focusHighlight: classes.focusHighlight }, role: "checkbox", "aria-checked": selected, "aria-labelledby": labelId }, CardActionAreaProps),
-            React.createElement(commonUi.Icon, { className: classes.icon, icon: selected ? webIcons.CheckCircle : webIcons.Circle, size: "medium" }),
-            React.createElement(commonUi.CardContent, { classes: { root: classes.cardContent } }, children))));
-};
-SelectableCard.displayName = 'SelectableCard';
-
-var useToastStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        boxSizing: 'border-box',
-        padding: theme.spacing(0, 1.5),
-        /** TODO: design to define responsive width value. */
-        width: '350px',
-        '& > div:first-child': {
-            alignItems: 'center',
+        '& > li:last-child > *:first-child': {
+            borderBottom: 'none',
         },
     },
+    uncontained: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+    },
 }); });
 
-var Toast = function (props) {
-    var children = props.children, AlertProps = props.AlertProps, severity = props.severity, muiProps = tslib.__rest(props, ["children", "AlertProps", "severity"]);
-    var classes = useToastStyles(props);
-    return (React.createElement(MuiSnackbar, tslib.__assign({ ClickAwayListenerProps: { mouseEvent: false } }, muiProps),
-        React.createElement(Alert, tslib.__assign({ className: classes.root, action: null, severity: severity }, AlertProps), children)));
-};
-Toast.defaultProps = {
-    AlertProps: {},
-    autoHideDuration: 5000,
-};
-Toast.displayName = 'Toast';
-
-var useStyles$3 = core.makeStyles(function (_a) {
-    var palette = _a.palette;
-    return ({
-        root: {
-            background: palette.grey['100'],
-        },
-    });
-});
-var DialogActions = function (props) {
-    var classes = useStyles$3(props);
-    return React.createElement(commonUi.DialogActions, tslib.__assign({ classes: classes }, props));
+var List = function (props) {
+    var _a;
+    var children = props.children, uncontained = props.uncontained, className = props.className, restProps = tslib.__rest(props, ["children", "uncontained", "className"]);
+    var classes = useStyles$2(props);
+    return (React.createElement(core.List, tslib.__assign({ classes: classes, className: classNames((_a = {}, _a[classes.uncontained] = uncontained, _a), className) }, restProps), children));
 };
 
 var Page = function (props) {
@@ -778,18 +719,18 @@ var PageSection = React.forwardRef(function (props, ref) {
 });
 PageSection.displayName = 'PageSection';
 
-var PageSections = function (props) {
-    var children = props.children, restProps = tslib.__rest(props, ["children"]);
-    return (React.createElement(commonUi.Box, tslib.__assign({ display: "flex", flexDirection: "column", gridGap: 16 }, restProps), children));
-};
-
 var PageSectionHead = function (props) {
     var children = props.children, restProps = tslib.__rest(props, ["children"]);
     var theme = core.useTheme();
     return (React.createElement(commonUi.Box, tslib.__assign({ fontSize: theme.typography.h5.fontSize, mb: "1em", display: "flex", justifyContent: "space-between" }, restProps), children));
 };
 
-var useStyles$2 = core.makeStyles(function () { return ({
+var PageSections = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    return (React.createElement(commonUi.Box, tslib.__assign({ display: "flex", flexDirection: "column", gridGap: 16 }, restProps), children));
+};
+
+var useStyles$1 = core.makeStyles(function () { return ({
     gutterBottom: {
         marginBottom: '1em',
     },
@@ -797,16 +738,68 @@ var useStyles$2 = core.makeStyles(function () { return ({
 
 var PageSectionTitle = function (props) {
     var children = props.children, restProps = tslib.__rest(props, ["children"]);
-    var classes = useStyles$2();
+    var classes = useStyles$1();
     return (React.createElement(commonUi.Typography, tslib.__assign({ classes: classes, gutterBottom: true, variant: "h5" }, restProps), children));
 };
 
-var SettingsIndexCardGroup = function (props) {
-    var children = props.children, restProps = tslib.__rest(props, ["children"]);
-    return (React.createElement(commonUi.Box, tslib.__assign({ display: "grid", gridGap: 16, gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))" }, restProps), children));
+var useSelectableCardStyles = core.makeStyles(function (theme) {
+    var _a = theme.palette, info = _a.info, grey = _a.grey, getContrastText = _a.getContrastText, spacing = theme.spacing;
+    var selectedBackgroundColor = core.lighten(theme.palette.info.light, 0.9);
+    var backgroundColor = theme.palette.surface.light;
+    return {
+        root: {
+            position: 'relative',
+            border: function (_a) {
+                var selected = _a.selected;
+                return (selected ? "1px solid " + info.light : "1px solid " + grey[700]);
+            },
+            backgroundColor: function (_a) {
+                var selected = _a.selected;
+                return (selected ? selectedBackgroundColor : backgroundColor);
+            },
+            color: function (_a) {
+                var selected = _a.selected;
+                return (selected ? getContrastText(selectedBackgroundColor) : getContrastText(backgroundColor));
+            },
+            transition: 'none',
+        },
+        cardContent: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginTop: spacing(2.5),
+        },
+        icon: {
+            position: 'absolute',
+            top: spacing(2),
+            left: spacing(2),
+            color: function (_a) {
+                var selected = _a.selected;
+                return (selected ? info.main : grey[700]);
+            },
+        },
+        focusHighlight: {
+            backgroundColor: 'inherit',
+        },
+    };
+});
+
+var SelectableCard = function (props) {
+    var children = props.children, selectedProp = props.selected, _a = props.selection, selection = _a === void 0 ? [] : _a, onClick = props.onClick, value = props.value, labelId = props.labelId, CardActionAreaProps = props.CardActionAreaProps, muiProps = tslib.__rest(props, ["children", "selected", "selection", "onClick", "value", "labelId", "CardActionAreaProps"]);
+    var selected = typeof selectedProp === 'boolean' ? selectedProp : selection.includes(value);
+    var classes = useSelectableCardStyles(tslib.__assign(tslib.__assign({}, props), { selected: selected }));
+    var handleClick = function () {
+        onClick(value);
+    };
+    return (React.createElement(commonUi.Card, tslib.__assign({ classes: { root: classes.root } }, muiProps),
+        React.createElement(commonUi.CardActionArea, tslib.__assign({ onClick: handleClick, classes: { focusHighlight: classes.focusHighlight }, role: "checkbox", "aria-checked": selected, "aria-labelledby": labelId }, CardActionAreaProps),
+            React.createElement(commonUi.Icon, { className: classes.icon, icon: selected ? webIcons.CheckCircle : webIcons.Circle, size: "medium" }),
+            React.createElement(commonUi.CardContent, { classes: { root: classes.cardContent } }, children))));
 };
+SelectableCard.displayName = 'SelectableCard';
 
-var useSettingsIndexCardStyles = styles.makeStyles(function (theme) { return ({
+var useSettingsIndexCardStyles = core.makeStyles(function (theme) { return ({
     cardRoot: {
         border: "1px solid " + theme.palette.grey[300],
         alignSelf: 'stretch',
@@ -839,31 +832,9 @@ var SettingsIndexCard = React.forwardRef(function (props, ref) {
 });
 SettingsIndexCard.displayName = 'SettingsIndexCard';
 
-var useStyles$1 = core.makeStyles(function (theme) { return ({
-    root: {
-        '&$uncontained > li > *:first-child': {
-            background: theme.palette.background.paper,
-            borderRadius: theme.spacing(1),
-        },
-        '& > li > *:first-child': {
-            borderBottom: "1px solid " + theme.palette.grey[300],
-        },
-        '& > li:last-child > *:first-child': {
-            borderBottom: 'none',
-        },
-    },
-    uncontained: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 16,
-    },
-}); });
-
-var List = function (props) {
-    var _a;
-    var children = props.children, uncontained = props.uncontained, className = props.className, restProps = tslib.__rest(props, ["children", "uncontained", "className"]);
-    var classes = useStyles$1(props);
-    return (React.createElement(core.List, tslib.__assign({ classes: classes, className: classNames((_a = {}, _a[classes.uncontained] = uncontained, _a), className) }, restProps), children));
+var SettingsIndexCardGroup = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    return (React.createElement(commonUi.Box, tslib.__assign({ display: "grid", gridGap: 16, gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))" }, restProps), children));
 };
 
 var useStyles = core.makeStyles(function (theme) { return ({
@@ -899,6 +870,30 @@ var StandardListItem = function (props) {
                 React.createElement(commonUi.Icon, { icon: secondaryAction.Icon }))))));
 };
 
+var useToastStyles = core.makeStyles(function (theme) { return ({
+    root: {
+        boxSizing: 'border-box',
+        padding: theme.spacing(0, 1.5),
+        /** TODO: design to define responsive width value. */
+        width: '350px',
+        '& > div:first-child': {
+            alignItems: 'center',
+        },
+    },
+}); });
+
+var Toast = function (props) {
+    var children = props.children, AlertProps = props.AlertProps, severity = props.severity, muiProps = tslib.__rest(props, ["children", "AlertProps", "severity"]);
+    var classes = useToastStyles(props);
+    return (React.createElement(core.Snackbar, tslib.__assign({ ClickAwayListenerProps: { mouseEvent: false } }, muiProps),
+        React.createElement(Alert, tslib.__assign({ className: classes.root, action: null, severity: severity }, AlertProps), children)));
+};
+Toast.defaultProps = {
+    AlertProps: {},
+    autoHideDuration: 5000,
+};
+Toast.displayName = 'Toast';
+
 var useFullScreenStepperContext = function () { return React.useContext(FullScreenStepperContext); };
 
 /**
@@ -955,69 +950,6 @@ var useDialog = function () {
     return [triggerProps, dialogProps, { open: open, setOpen: setOpen, toggle: toggle, close: close }];
 };
 
-var fonts = ['"Poppins"', '"sans-serif"'];
-var adminThemeTypography = {
-    htmlFontSize: 16,
-    fontFamily: fonts.join(', '),
-    h1: {
-        fontWeight: 400,
-        fontSize: '6rem',
-        lineHeight: '9rem',
-    },
-    h2: {
-        fontWeight: 400,
-        fontSize: '3.75rem',
-        lineHeight: '5.625rem',
-    },
-    h3: {
-        fontWeight: 400,
-        fontSize: '3rem',
-        lineHeight: '4.5rem',
-    },
-    h4: {
-        fontWeight: 400,
-        fontSize: '2.125rem',
-        lineHeight: '3.25rem',
-    },
-    h5: {
-        fontWeight: 500,
-        fontSize: '1.5rem',
-        lineHeight: '2.25rem',
-    },
-    h6: {
-        fontWeight: 500,
-        fontSize: '1.25rem',
-        lineHeight: '1.875rem',
-    },
-    h7: {
-        fontWeight: 400,
-        fontSize: '1.125rem',
-        lineHeight: '1.75rem',
-    },
-    body1: {
-        fontWeight: 400,
-        fontSize: '1rem',
-        lineHeight: '1.5rem',
-    },
-    body2: {
-        fontWeight: 400,
-        fontSize: '0.875rem',
-        lineHeight: '1.25rem',
-    },
-    subtitle1: {
-        fontWeight: 400,
-        fontSize: '0.75rem',
-        lineHeight: '1.125rem',
-        color: '#9E9E9E',
-    },
-    button: {
-        fontWeight: 500,
-        fontSize: '0.875rem',
-        lineHeight: '1.25rem',
-        textTransform: 'capitalize',
-    },
-};
-
 var adminThemeBreakpoints = {
     values: {
         xs: 0,
@@ -1028,6 +960,64 @@ var adminThemeBreakpoints = {
     },
 };
 
+var props = {
+    MuiSwitch: {
+        color: 'default',
+    },
+    MuiTextField: {
+        variant: 'outlined',
+    },
+};
+
+/**
+ * These theme properties should be considered legacy. Make efforts to avoid new usage as well as refactor out existing
+ * usage.
+ */
+var adminLightPlaceholder = { placeholder: 'rgba(0, 0, 0, 1)' };
+var adminDarkPlaceholder = { placeholder: 'rgba(255, 255, 255, 0.37)' };
+var adminThemeStatus = {
+    status: {
+        disabled: {
+            opacity: 0.55,
+        },
+    },
+};
+var BASE_Z_INDEX = 1100000;
+var adminThemeZIndex = {
+    zIndex: {
+        mobileStepper: BASE_Z_INDEX + 1000,
+        appBar: BASE_Z_INDEX + 1100,
+        drawer: BASE_Z_INDEX + 1200,
+        modal: BASE_Z_INDEX + 1300,
+        snackbar: BASE_Z_INDEX + 1400,
+        tooltip: BASE_Z_INDEX + 9100,
+    },
+};
+/** The defaults for MuiInputBase and MuiInputLabel can be removed once the BasicForm & 'shared' inputs have either:
+ * 1. been refactored to use secondary color.
+ * 2. been replaced with new common components.
+ *
+ * props as imported from './props' are part updated design system.
+ */
+var adminThemeDefaultProps = {
+    props: tslib.__assign(tslib.__assign({}, props), { 
+        // Legacy below
+        MuiCard: {
+            elevation: 0,
+        }, MuiTooltip: {
+            title: '',
+            placement: 'right',
+        }, MuiPaper: {
+            elevation: 0,
+        }, MuiAppBar: {
+            position: 'static',
+        }, MuiInputBase: {
+            color: 'secondary',
+        }, MuiInputLabel: {
+            color: 'secondary',
+        } }),
+};
+
 var basePalette = {
     /** Semantic Colors */
     primary: {
@@ -1157,64 +1147,6 @@ var dataVizPalette = {
     },
 };
 
-var props = {
-    MuiSwitch: {
-        color: 'default',
-    },
-    MuiTextField: {
-        variant: 'outlined',
-    },
-};
-
-/**
- * These theme properties should be considered legacy. Make efforts to avoid new usage as well as refactor out existing
- * usage.
- */
-var adminLightPlaceholder = { placeholder: 'rgba(0, 0, 0, 1)' };
-var adminDarkPlaceholder = { placeholder: 'rgba(255, 255, 255, 0.37)' };
-var adminThemeStatus = {
-    status: {
-        disabled: {
-            opacity: 0.55,
-        },
-    },
-};
-var BASE_Z_INDEX = 1100000;
-var adminThemeZIndex = {
-    zIndex: {
-        mobileStepper: BASE_Z_INDEX + 1000,
-        appBar: BASE_Z_INDEX + 1100,
-        drawer: BASE_Z_INDEX + 1200,
-        modal: BASE_Z_INDEX + 1300,
-        snackbar: BASE_Z_INDEX + 1400,
-        tooltip: BASE_Z_INDEX + 9100,
-    },
-};
-/** The defaults for MuiInputBase and MuiInputLabel can be removed once the BasicForm & 'shared' inputs have either:
- * 1. been refactored to use secondary color.
- * 2. been replaced with new common components.
- *
- * props as imported from './props' are part updated design system.
- */
-var adminThemeDefaultProps = {
-    props: tslib.__assign(tslib.__assign({}, props), { 
-        // Legacy below
-        MuiCard: {
-            elevation: 0,
-        }, MuiTooltip: {
-            title: '',
-            placement: 'right',
-        }, MuiPaper: {
-            elevation: 0,
-        }, MuiAppBar: {
-            position: 'static',
-        }, MuiInputBase: {
-            color: 'secondary',
-        }, MuiInputLabel: {
-            color: 'secondary',
-        } }),
-};
-
 var overrides = {
     MuiCssBaseline: {
         '@global': {
@@ -1246,11 +1178,74 @@ var overrides = {
     },
 };
 
+var fonts = ['"Poppins"', '"sans-serif"'];
+var adminThemeTypography = {
+    htmlFontSize: 16,
+    fontFamily: fonts.join(', '),
+    h1: {
+        fontWeight: 400,
+        fontSize: '6rem',
+        lineHeight: '9rem',
+    },
+    h2: {
+        fontWeight: 400,
+        fontSize: '3.75rem',
+        lineHeight: '5.625rem',
+    },
+    h3: {
+        fontWeight: 400,
+        fontSize: '3rem',
+        lineHeight: '4.5rem',
+    },
+    h4: {
+        fontWeight: 400,
+        fontSize: '2.125rem',
+        lineHeight: '3.25rem',
+    },
+    h5: {
+        fontWeight: 500,
+        fontSize: '1.5rem',
+        lineHeight: '2.25rem',
+    },
+    h6: {
+        fontWeight: 500,
+        fontSize: '1.25rem',
+        lineHeight: '1.875rem',
+    },
+    h7: {
+        fontWeight: 400,
+        fontSize: '1.125rem',
+        lineHeight: '1.75rem',
+    },
+    body1: {
+        fontWeight: 400,
+        fontSize: '1rem',
+        lineHeight: '1.5rem',
+    },
+    body2: {
+        fontWeight: 400,
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
+    },
+    subtitle1: {
+        fontWeight: 400,
+        fontSize: '0.75rem',
+        lineHeight: '1.125rem',
+        color: '#9E9E9E',
+    },
+    button: {
+        fontWeight: 500,
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
+        textTransform: 'capitalize',
+    },
+};
+
 var adminLightOptions = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({ themeName: 'Admin Light', palette: tslib.__assign(tslib.__assign(tslib.__assign({}, basePalette), adminLightPalette), dataVizPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography, overrides: overrides }, adminLightPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps);
-var adminLight = createTheme(adminLightOptions);
+var adminLight = core.createTheme(adminLightOptions);
 
 var adminDarkOptions = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({ themeName: 'Admin Dark', palette: tslib.__assign(tslib.__assign(tslib.__assign({}, basePalette), adminDarkPalette), dataVizPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography, overrides: overrides }, adminDarkPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps);
-var adminDark = createTheme(adminDarkOptions);
+var adminDark = core.createTheme(adminDarkOptions);
 
 Object.defineProperty(exports, "Dialog", {
     enumerable: true,