@popmenu/admin-ui 0.126.0 → 0.126.2

package/build/cjs/index.js

@@ -0,0 +1,1309 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var commonUi = require('@popmenu/common-ui');
+var webIcons = require('@popmenu/web-icons');
+var core = require('@material-ui/core');
+var lab = require('@material-ui/lab');
+var classNames = require('classnames');
+
+var useAlertStyles = core.makeStyles(function (theme) { return ({
+    root: {
+        alignItems: 'center',
+        width: function (_a) {
+            var fullWidth = _a.fullWidth;
+            return (fullWidth ? '100%' : 'unset');
+        },
+        background: 'white',
+        borderColor: function (props) { return theme.palette[props.severity || 'error'].main; },
+        borderLeft: theme.spacing(1) + "px solid",
+        color: theme.palette.text.primary,
+    },
+    icon: {
+        alignSelf: 'start',
+    },
+}); });
+
+var severityIcons$1 = {
+    info: webIcons.Info,
+    error: webIcons.Error,
+    warning: webIcons.Warning,
+    success: webIcons.CheckCircle,
+};
+var getLinkProps = function (link) {
+    if (!link)
+        return null;
+    var href = link.href, onClick = link.onClick, text = link.text;
+    if (!text)
+        return null;
+    var props = { children: text };
+    if (href)
+        return tslib.__assign(tslib.__assign({}, props), { href: href });
+    if (onClick)
+        return tslib.__assign(tslib.__assign({}, props), { onClick: onClick });
+    return null;
+};
+var Alert = React.forwardRef(function (props, ref) {
+    var children = props.children, link = props.link, _a = props.severity, severity = _a === void 0 ? 'error' : _a, _b = props.variant, variant = _b === void 0 ? 'outlined' : _b, onClose = props.onClose, muiProps = tslib.__rest(props, ["children", "link", "severity", "variant", "onClose"]);
+    var classes = useAlertStyles(props);
+    var validLink = link && getLinkProps(link);
+    var Action = (React.createElement(React.Fragment, null,
+        validLink && React.createElement(commonUi.Link, tslib.__assign({}, validLink)),
+        onClose && (React.createElement(commonUi.IconButton, { onClick: onClose },
+            React.createElement(commonUi.Icon, { icon: webIcons.X })))));
+    return (React.createElement(commonUi.Alert, tslib.__assign({ ref: ref, classes: classes, 
+        // @ts-expect-error - todo.
+        icon: React.createElement(commonUi.Icon, { icon: severityIcons$1[severity], size: "extra-large" }), action: Action, variant: variant, severity: severity }, muiProps), children));
+});
+Alert.displayName = 'Alert';
+
+var borderWidth = 1;
+var getColor = function (palette, props) {
+    var variant = props.variant;
+    var color = 'inherit';
+    if (['primary', 'info', 'success', 'warning', 'error'].includes(variant)) {
+        // @ts-expect-error - todo.
+        color = palette[variant].contrastText;
+    }
+    if (variant === 'secondary') {
+        color = palette[variant].main;
+        /**
+         * Temporary fix for dark theme buttons.
+         * Dark theme will be addressed in ch-11596 and the following if block should be removed
+         */
+        if (palette.type === 'dark') {
+            color = 'black';
+        }
+    }
+    if (variant === 'tertiary') {
+        color = palette.secondary.contrastText;
+    }
+    if (variant === 'text') {
+        color = palette.info.main;
+    }
+    return color;
+};
+var getColorHover = function (palette, props) {
+    var color;
+    if (props.variant === 'secondary') {
+        color = palette.secondary.contrastText;
+    }
+    return color;
+};
+var getBackground = function (palette, props) {
+    var backgroundColor = 'inherit';
+    if (['info', 'success', 'warning', 'error'].includes(props.variant)) {
+        // @ts-expect-error - todo.
+        backgroundColor = palette[props.variant].main;
+    }
+    if (props.variant === 'primary') {
+        // @ts-expect-error gradient colors are included in the extended palette.
+        backgroundColor = "linear-gradient(97.36deg, " + palette.primary.gradientStart + " 17.03%, " + palette.primary.gradientEnd + " 72.96%)";
+    }
+    if (props.variant === 'secondary') {
+        backgroundColor = 'white';
+    }
+    if (props.variant === 'tertiary') {
+        backgroundColor = palette.secondary.main;
+    }
+    return backgroundColor;
+};
+var getBackgroundHover = function (palette, props) {
+    var backgroundHoverColor = 'inherit';
+    if (['primary', 'info', 'success', 'warning', 'error'].includes(props.variant)) {
+        // @ts-expect-error - todo.
+        backgroundHoverColor = palette[props.variant].dark;
+    }
+    if (props.variant === 'secondary') {
+        backgroundHoverColor = palette.secondary.main;
+    }
+    if (props.variant === 'tertiary') {
+        backgroundHoverColor = palette.secondary.light;
+    }
+    if (props.variant === 'text' || props.variant === 'ghost') {
+        backgroundHoverColor = palette.action.hover;
+    }
+    return backgroundHoverColor;
+};
+var buttonTypography = {
+    fontWeight: 500,
+    fontSize: '0.875rem',
+    lineHeight: '1.25rem',
+};
+var useButtonStyles = core.makeStyles(function (_a) {
+    var palette = _a.palette, spacing = _a.spacing;
+    return ({
+        root: function (props) { return ({
+            minWidth: 'unset',
+            color: getColor(palette, props),
+            background: getBackground(palette, props),
+            backgroundColor: props.variant === 'primary' ? palette.primary.dark : getBackground(palette, props),
+            borderRadius: spacing(6),
+            transition: 'all 200ms ease-in-out',
+            '&:hover': {
+                color: getColorHover(palette, props),
+                background: getBackgroundHover(palette, props),
+            },
+        }); },
+        disabled: {
+            '&$root': {
+                background: palette.action.disabled,
+            },
+        },
+        contained: {
+            padding: spacing(1, 2),
+        },
+        outlined: {
+            padding: "calc(" + spacing(1) + "px - " + borderWidth + "px) calc(" + spacing(2) + "px - " + borderWidth + "px)",
+            '&$sizeSmall': {
+                padding: "calc(" + spacing(0.5) + "px - " + borderWidth + "px) calc(" + spacing(2) + "px - " + borderWidth + "px)",
+            },
+            '&$sizeLarge': {
+                padding: "calc(" + spacing(1.5) + "px - " + borderWidth + "px) calc(" + spacing(2) + "px - " + borderWidth + "px)",
+            },
+        },
+        text: {
+            padding: spacing(1, 2),
+        },
+        label: tslib.__assign(tslib.__assign({}, buttonTypography), { textTransform: function (props) { return props.textTransform; } }),
+        sizeSmall: {
+            padding: spacing(0.5, 2),
+        },
+        sizeLarge: {
+            padding: spacing(1.5, 2),
+        },
+    });
+});
+
+var deriveButtonProps = function (buttonProps) {
+    var variant = buttonProps.variant;
+    var derived = {};
+    switch (variant) {
+        case 'primary':
+            derived.variant = 'contained';
+            derived.color = 'primary';
+            break;
+        case 'secondary':
+            derived.variant = 'outlined';
+            derived.color = 'secondary';
+            break;
+        case 'tertiary':
+            derived.variant = 'contained';
+            derived.color = 'secondary';
+            break;
+        case 'text':
+            derived.variant = 'text';
+        case 'ghost':
+            derived.variant = 'text';
+            break;
+        case 'success':
+            derived.variant = 'contained';
+            break;
+        case 'info':
+            derived.variant = 'contained';
+            break;
+        case 'warning':
+            derived.variant = 'contained';
+            break;
+        case 'error':
+            derived.variant = 'contained';
+            break;
+        default:
+            derived.variant = variant;
+            break;
+    }
+    return derived;
+};
+
+// eslint-disable-next-line react/display-name -- false positive
+var Button = React.forwardRef(function (props, ref) {
+    var children = props.children; props.variant; var classesOverride = props.classes, commonProps = tslib.__rest(props, ["children", "variant", "classes"]);
+    var classes = useButtonStyles(props);
+    var derivedProps = deriveButtonProps(props);
+    var mergedProps = tslib.__assign(tslib.__assign({}, derivedProps), commonProps);
+    return (React.createElement(commonUi.Button, tslib.__assign({ ref: ref, classes: tslib.__assign(tslib.__assign({}, classes), classesOverride), disableElevation: true }, mergedProps), children));
+});
+Button.defaultProps = {
+    textTransform: 'uppercase',
+    variant: 'primary',
+};
+Button.displayName = 'Button';
+
+var useAlertDialogStyles = core.makeStyles(function (theme) { return ({
+    cancelButton: {
+        color: theme.palette.grey[700],
+    },
+    cancelIcon: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(2),
+    },
+    card: {
+        borderRadius: theme.spacing(0.75),
+        borderTop: function (props) { return theme.spacing(1.25) + "px solid " + theme.palette[props.severity || 'info'].main; },
+    },
+    cardActions: {
+        background: theme.palette.grey[100],
+        justifyContent: 'flex-end',
+    },
+    icon: {
+        fontSize: theme.spacing(5),
+    },
+    root: {
+        borderRadius: theme.spacing(0.75),
+    },
+}); });
+
+var severityIcons = {
+    info: webIcons.Info,
+    error: webIcons.Error,
+    warning: webIcons.Warning,
+    success: webIcons.CheckCircle,
+};
+var AlertDialog = React.forwardRef(function (props, ref) {
+    var _a = props.cancelButtonText, cancelButtonText = _a === void 0 ? 'cancel' : _a, _b = props.hideCancelButton, hideCancelButton = _b === void 0 ? false : _b, children = props.children, labelId = props.labelId, descriptionId = props.descriptionId, _c = props.severity, severity = _c === void 0 ? 'info' : _c, _d = props.proceedButtonText, proceedButtonText = _d === void 0 ? 'proceed' : _d, _e = props.disabled, disabled = _e === void 0 ? false : _e, onClose = props.onClose, onCancel = props.onCancel, onProceed = props.onProceed, DialogProps = tslib.__rest(props, ["cancelButtonText", "hideCancelButton", "children", "labelId", "descriptionId", "severity", "proceedButtonText", "disabled", "onClose", "onCancel", "onProceed"]);
+    var classes = useAlertDialogStyles(props);
+    return (React.createElement(commonUi.Dialog, tslib.__assign({ ref: ref, classes: { paper: classes.root }, maxWidth: "sm", fullWidth: true }, DialogProps),
+        React.createElement(commonUi.Card, { classes: { root: classes.card }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": labelId, "aria-describedby": descriptionId },
+            React.createElement(commonUi.IconButton, { className: classes.cancelIcon, onClick: onClose, disabled: disabled },
+                React.createElement(commonUi.Icon, { icon: webIcons.X })),
+            React.createElement(commonUi.CardContent, null,
+                React.createElement(commonUi.Box, { display: "flex" },
+                    React.createElement(commonUi.Icon, { className: classes.icon, color: severity, icon: severityIcons[severity] }),
+                    React.createElement(commonUi.Box, { pl: 2, pr: 3 }, children))),
+            React.createElement(commonUi.CardActions, { classes: { root: classes.cardActions } },
+                !hideCancelButton && (React.createElement(Button, { onClick: onCancel, disabled: disabled, variant: "ghost" }, cancelButtonText)),
+                React.createElement(Button, { onClick: onProceed, loading: disabled, variant: severity }, proceedButtonText)))));
+});
+AlertDialog.displayName = 'AlertDialog';
+
+var AlertDialogHeader = function (props) {
+    var children = props.children, muiProps = tslib.__rest(props, ["children"]);
+    return (React.createElement(commonUi.Box, tslib.__assign({ display: "flex", height: 40, alignItems: "center" }, muiProps),
+        React.createElement(commonUi.Typography, { variant: "h6" }, children)));
+};
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+var AlertTitle = function (props) {
+    var children = props.children, muiProps = tslib.__rest(props, ["children"]);
+    return (React.createElement(lab.AlertTitle, tslib.__assign({}, muiProps),
+        React.createElement(commonUi.Typography, { variant: "h6" },
+            " ",
+            children,
+            " ")));
+};
+AlertTitle.displayName = 'AlertTitle';
+
+var getBorderColor = function (palette, variant) {
+    var borderColor = 'inherit';
+    if (['primary', 'secondary', 'info', 'success', 'warning', 'error'].includes(variant)) {
+        // @ts-expect-error - todo.
+        borderColor = palette[variant].light;
+    }
+    return borderColor;
+};
+var useButtonGroupStyles = core.makeStyles(function (theme) { return ({
+    root: {
+        boxShadow: 'none',
+    },
+    groupedContained: {
+        '&&': {
+            borderColor: function (props) { return getBorderColor(theme.palette, props.variant); },
+        },
+    },
+    groupedText: {
+        '&&': {
+            borderColor: theme.palette.info.main,
+        },
+    },
+}); });
+
+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 = 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';
+        var firstStyles = { style: { borderTopLeftRadius: spacing(2), borderTopRightRadius: spacing(2) } };
+        var lastStyles = { style: { borderBottomLeftRadius: spacing(2), borderBottomRightRadius: spacing(2) } };
+        if (!React.isValidElement(child)) {
+            return null;
+        }
+        return React.cloneElement(child, tslib.__assign(tslib.__assign({ variant: variant }, (isFirst && firstStyles)), (isLast && lastStyles)));
+    });
+    return (React.createElement(commonUi.ButtonGroup, tslib.__assign({ ref: ref, classes: classes }, derivedProps, muiProps), childrenWithProps));
+});
+ButtonGroup.displayName = 'ButtonGroup';
+
+var useFeatureIntroStyles = core.makeStyles(function (_a) {
+    var spacing = _a.spacing;
+    return ({
+        root: {
+            gap: spacing(3),
+        },
+        actions: {
+            gap: spacing(3),
+        },
+        image: {
+            width: '100%',
+            objectFit: 'contain',
+        },
+    });
+});
+
+var FeatureIntro = function (props) {
+    var title = props.title, body = props.body, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, image = props.image;
+    var primaryActionLabel = primaryAction.label, primaryActionProps = tslib.__rest(primaryAction, ["label"]);
+    var _a = secondaryAction || {}, secondaryActionLabel = _a.label, secondaryActionProps = tslib.__rest(_a, ["label"]);
+    var classes = useFeatureIntroStyles(props);
+    var validImage = (image === null || image === void 0 ? void 0 : image.src) && (image === null || image === void 0 ? void 0 : image.alt);
+    return (React.createElement(commonUi.Box, { className: classes.root, padding: { xs: 4, sm: 8 }, flexDirection: { xs: 'column-reverse', sm: 'row' }, display: "flex", justifyContent: "center", alignItems: "center" },
+        React.createElement(commonUi.Box, { display: "flex", flexDirection: "column", width: { xs: '100%', sm: '50%' }, alignItems: { xs: 'center', sm: 'unset' } },
+            React.createElement(commonUi.Box, { textAlign: { xs: 'center', sm: 'start' }, marginBottom: 2 },
+                React.createElement(commonUi.Typography, { align: "inherit", variant: "h4" }, title)),
+            React.createElement(commonUi.Box, { textAlign: { xs: 'center', sm: 'start' }, marginBottom: 6 }, body),
+            React.createElement(commonUi.Box, { className: classes.actions, display: "flex", flexDirection: "column", width: "fit-content" },
+                primaryAction && React.createElement(Button, tslib.__assign({}, primaryActionProps), primaryActionLabel),
+                secondaryAction && (React.createElement(Button, tslib.__assign({ variant: "tertiary" }, secondaryActionProps), secondaryActionLabel)))),
+        React.createElement(commonUi.Box, { display: "flex", width: { xs: '100%', sm: '50%' }, alignItems: "center", justifyContent: "center" },
+            React.createElement(commonUi.Box, { display: "flex", maxWidth: 450, maxHeight: 450 }, validImage && React.createElement("img", { src: image.src, alt: image.alt, className: classes.image })))));
+};
+FeatureIntro.displayName = 'FeatureIntro';
+
+var useFullScreenStepperActionsStyles = core.makeStyles(function (theme) { return ({
+    root: {
+        position: 'sticky',
+        background: 'white',
+        bottom: 0,
+        display: 'flex',
+        justifyContent: 'space-between',
+        padding: theme.spacing(1.5) + "px " + theme.spacing(3) + "px",
+        borderTop: theme.spacing(0.5) + "px solid " + theme.palette.grey[100],
+        zIndex: 3,
+    },
+    inlineEndActions: {
+        '& > *': {
+            marginInlineStart: theme.spacing(2),
+        },
+    },
+    inlineStartActions: {
+        display: 'flex',
+        alignItems: 'center',
+        '& > *': {
+            marginInlineEnd: theme.spacing(2),
+        },
+    },
+}); });
+
+var augmentButtonProps = function (internalProps, externalProps, setStepCursor, stepCursor, incrementor) {
+    if (externalProps === void 0) { externalProps = {}; }
+    var mergedProps = tslib.__assign(tslib.__assign({}, internalProps), externalProps);
+    mergedProps.onClick = function () { return tslib.__awaiter(void 0, void 0, void 0, function () {
+        return tslib.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(typeof externalProps.onClick === 'function')) return [3 /*break*/, 2];
+                    return [4 /*yield*/, externalProps.onClick({})];
+                case 1:
+                    _a.sent();
+                    setStepCursor(stepCursor + incrementor);
+                    return [3 /*break*/, 3];
+                case 2:
+                    if (typeof internalProps.onClick === 'function') {
+                        internalProps.onClick();
+                    }
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    return mergedProps;
+};
+
+var StepperActionsPreviousButton = function (props) {
+    var previousButtonText = props.previousButtonText, stepCursor = props.stepCursor, handlePreviousClick = props.handlePreviousClick, previousButtonProps = props.previousButtonProps, setStepCursor = props.setStepCursor, displayPreviousButton = props.displayPreviousButton;
+    var augmentedPreviousButtonProps = augmentButtonProps({ onClick: handlePreviousClick }, previousButtonProps, setStepCursor, stepCursor, -1);
+    return displayPreviousButton ? (React.createElement(Button, tslib.__assign({ variant: "tertiary", disabled: stepCursor === 1 }, augmentedPreviousButtonProps), previousButtonText || 'previous')) : null;
+};
+
+var useStyles$4 = core.makeStyles({
+    root: {
+        fontStyle: 'italic',
+    },
+});
+var StepperActionsStatusText = function (props) {
+    var statusText = props.statusText;
+    var classes = useStyles$4(props);
+    return statusText ? (React.createElement(commonUi.Typography, { classes: { root: classes.root }, variant: "body2" }, statusText)) : null;
+};
+
+var StepperActionsNextButton = function (props) {
+    var handleNextClick = props.handleNextClick, nextButtonProps = props.nextButtonProps, setStepCursor = props.setStepCursor, stepCursor = props.stepCursor, stepCount = props.stepCount, finishButtonText = props.finishButtonText, nextButtonText = props.nextButtonText;
+    var augmentedNextButtonProps = augmentButtonProps({ onClick: handleNextClick }, nextButtonProps, setStepCursor, stepCursor, 1);
+    var finalStep = stepCursor / stepCount === 1;
+    var finishText = finishButtonText || 'finish';
+    var nextText = nextButtonText || 'next';
+    var buttonText = finalStep ? finishText : nextText;
+    return React.createElement(Button, tslib.__assign({}, augmentedNextButtonProps), buttonText);
+};
+
+var StepperActionsCancelButton = function (props) {
+    var setStepCursor = props.setStepCursor, stepCursor = props.stepCursor, cancelButtonText = props.cancelButtonText, cancelButtonProps = props.cancelButtonProps, handleCancelClick = props.handleCancelClick, displayCancelButton = props.displayCancelButton;
+    var augmentedCancelButtonProps = augmentButtonProps({ onClick: handleCancelClick }, cancelButtonProps, setStepCursor, stepCursor, 0);
+    return displayCancelButton ? (React.createElement(Button, tslib.__assign({ variant: "ghost" }, augmentedCancelButtonProps), cancelButtonText || 'cancel')) : null;
+};
+
+var FullScreenStepperActions = function (props) {
+    var stepCount = props.stepCount, stepCursor = props.stepCursor, setStepCursor = props.setStepCursor, handleNextClick = props.handleNextClick, handlePreviousClick = props.handlePreviousClick, handleCancelClick = props.handleCancelClick, actions = props.actions, callbackArgs = props.callbackArgs, cancelButtonText = props.cancelButtonText, nextButtonText = props.nextButtonText, finishButtonText = props.finishButtonText, nextButtonProps = props.nextButtonProps, previousButtonText = props.previousButtonText, previousButtonProps = props.previousButtonProps, cancelButtonProps = props.cancelButtonProps, statusText = props.statusText, displayPreviousButton = props.displayPreviousButton, displayCancelButton = props.displayCancelButton;
+    var classes = useFullScreenStepperActionsStyles(props);
+    return (React.createElement(commonUi.Box, { className: classes.root },
+        React.createElement(commonUi.Box, { className: classes.inlineStartActions },
+            React.createElement(StepperActionsPreviousButton, { displayPreviousButton: displayPreviousButton, previousButtonText: previousButtonText, handlePreviousClick: handlePreviousClick, previousButtonProps: previousButtonProps, stepCursor: stepCursor, setStepCursor: setStepCursor }),
+            React.createElement(StepperActionsStatusText, { statusText: statusText })),
+        React.createElement(commonUi.Box, { className: classes.inlineEndActions },
+            actions &&
+                actions.map(function (action, i) { return (React.createElement(Button, tslib.__assign({ key: "custom-action-" + stepCursor + "-" + i, variant: "ghost", onClick: function (event) { return action.onClick(event, callbackArgs); } }, action.props), action.text)); }),
+            React.createElement(StepperActionsCancelButton, { setStepCursor: setStepCursor, stepCursor: stepCursor, cancelButtonText: cancelButtonText, cancelButtonProps: cancelButtonProps, handleCancelClick: handleCancelClick, displayCancelButton: displayCancelButton }),
+            React.createElement(StepperActionsNextButton, { handleNextClick: handleNextClick, nextButtonProps: nextButtonProps, setStepCursor: setStepCursor, stepCursor: stepCursor, stepCount: stepCount, finishButtonText: finishButtonText, nextButtonText: nextButtonText }))));
+};
+
+var getBorderRadius = function (theme, props) {
+    var stepCursor = props.stepCursor, stepCount = props.stepCount;
+    var isFinalStep = stepCursor / stepCount === 1;
+    if (isFinalStep) {
+        return 0;
+    }
+    else {
+        return theme.spacing(0.5);
+    }
+};
+var useFullScreenStepperProgressStyles = core.makeStyles(function (theme) { return ({
+    progress: {
+        width: function (props) { return (props.stepCursor / props.stepCount) * 100 + "%"; },
+        transition: 'all 500ms',
+        height: theme.spacing(1),
+        // @ts-expect-error: Theme includes extended properties
+        background: "linear-gradient(45deg, " + theme.palette.primary.gradientStart + ", " + theme.palette.primary.gradientEnd + ")",
+        borderEndEndRadius: function (props) { return getBorderRadius(theme, props); },
+        borderStartEndRadius: function (props) { return getBorderRadius(theme, props); },
+    },
+    track: {
+        position: 'absolute',
+        bottom: 0,
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        height: theme.spacing(0.5),
+        background: theme.palette.grey[100],
+        zIndex: 2,
+    },
+}); });
+
+var FullScreenStepperProgress = function (props) {
+    var classes = useFullScreenStepperProgressStyles(props);
+    return (React.createElement(commonUi.Box, { className: classes.track },
+        React.createElement(commonUi.Box, { className: classes.progress })));
+};
+
+var useFullScreenStepperHeaderStyles = core.makeStyles(function (_a) {
+    var spacing = _a.spacing;
+    return ({
+        closeButton: {
+            position: 'absolute',
+            right: 0,
+            top: 0,
+        },
+        root: {
+            alignItems: 'center',
+            background: 'white',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            padding: spacing(1.5, 0),
+            position: 'sticky',
+            top: 0,
+            zIndex: 3,
+        },
+    });
+});
+
+var FullScreenStepperHeader = function (props) {
+    var stepCount = props.stepCount, stepCursor = props.stepCursor, step = props.step, onClose = props.onClose;
+    var classes = useFullScreenStepperHeaderStyles(props);
+    return (React.createElement(commonUi.Box, { className: classes.root },
+        React.createElement(commonUi.Typography, { variant: "h6" }, step.title),
+        React.createElement(commonUi.Typography, null,
+            stepCursor,
+            " of ",
+            stepCount),
+        React.createElement(commonUi.IconButton, { className: classes.closeButton, onClick: onClose },
+            React.createElement(commonUi.Icon, { icon: webIcons.X })),
+        React.createElement(FullScreenStepperProgress, { stepCount: stepCount, stepCursor: stepCursor })));
+};
+
+var FullScreenStepperContext = React.createContext({});
+
+/**
+ * TODO
+ * - i18n?
+ * - loading?
+ */
+var FullScreenStepper = function (props) {
+    var children = props.children, _a = props.context, context = _a === void 0 ? {} : _a, _b = props.defaultStepCursor, defaultStepCursor = _b === void 0 ? 1 : _b, _c = props.displayActionBar, displayActionBar = _c === void 0 ? true : _c, _d = props.displayCancelButton, displayCancelButton = _d === void 0 ? true : _d, _e = props.displayPreviousButton, displayPreviousButton = _e === void 0 ? true : _e, _f = props.resetStepCursorOnCancel, resetStepCursorOnCancel = _f === void 0 ? true : _f, _g = props.resetStepCursorOnClose, resetStepCursorOnClose = _g === void 0 ? true : _g, steps = props.steps, onClose = props.onClose, onFinish = props.onFinish, onNext = props.onNext, onCancel = props.onCancel, onPrevious = props.onPrevious, DialogProps = tslib.__rest(props, ["children", "context", "defaultStepCursor", "displayActionBar", "displayCancelButton", "displayPreviousButton", "resetStepCursorOnCancel", "resetStepCursorOnClose", "steps", "onClose", "onFinish", "onNext", "onCancel", "onPrevious"]);
+    var _h = React.useState(defaultStepCursor), stepCursor = _h[0], setStepCursor = _h[1];
+    var stepCount = steps.length;
+    var stepIndex = stepCursor - 1;
+    var step = steps[stepIndex];
+    var _j = step.displayActionBar, displayStepActionBar = _j === void 0 ? true : _j;
+    var isFinalStep = stepCursor / stepCount === 1;
+    var callbackArgs = { setStepCursor: setStepCursor, step: step, stepCount: stepCount, stepIndex: stepIndex, steps: steps };
+    var mergedContext = tslib.__assign(tslib.__assign({}, context), callbackArgs);
+    var resetStepCursor = function () { return setTimeout(function () { return setStepCursor(1); }, 600); };
+    var handleClose = function () {
+        if (typeof onClose === 'function') {
+            onClose(callbackArgs);
+        }
+        if (resetStepCursorOnClose) {
+            resetStepCursor();
+        }
+    };
+    var handleNextClick = function () { return tslib.__awaiter(void 0, void 0, void 0, function () {
+        return tslib.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!isFinalStep) return [3 /*break*/, 3];
+                    if (!(typeof onFinish === 'function')) return [3 /*break*/, 2];
+                    return [4 /*yield*/, onFinish(callbackArgs)];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2:
+                    if (typeof onClose === 'function') {
+                        onClose(callbackArgs);
+                    }
+                    resetStepCursor();
+                    return [3 /*break*/, 6];
+                case 3:
+                    if (!(typeof onNext === 'function')) return [3 /*break*/, 5];
+                    return [4 /*yield*/, onNext(callbackArgs)];
+                case 4:
+                    _a.sent();
+                    _a.label = 5;
+                case 5:
+                    setStepCursor(stepCursor + 1);
+                    _a.label = 6;
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handlePreviousClick = function () { return tslib.__awaiter(void 0, void 0, void 0, function () {
+        return tslib.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(typeof onPrevious === 'function')) return [3 /*break*/, 2];
+                    return [4 /*yield*/, onPrevious(callbackArgs)];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2:
+                    setStepCursor(stepCursor - 1);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleCancelClick = function () { return tslib.__awaiter(void 0, void 0, void 0, function () {
+        return tslib.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(typeof onCancel === 'function')) return [3 /*break*/, 2];
+                    return [4 /*yield*/, onCancel(callbackArgs)];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2:
+                    if (resetStepCursorOnCancel) {
+                        resetStepCursor();
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var content = React.Children.toArray(children).find(function (child) { return React.isValidElement(child) && child.props.name === step.name; });
+    return (React.createElement(core.Dialog, tslib.__assign({ fullScreen: true }, DialogProps),
+        React.createElement(FullScreenStepperContext.Provider, { value: mergedContext },
+            React.createElement(core.Box, { display: "flex", flexDirection: "column", flexGrow: 1 },
+                React.createElement(FullScreenStepperHeader, { stepCount: stepCount, stepCursor: stepCursor, onClose: handleClose, step: step }),
+                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';
+
+var FullScreenStepperContent = function (props) {
+    props.name; var boxProps = tslib.__rest(props, ["name"]);
+    return (React.createElement(commonUi.Box, tslib.__assign({ py: 8 }, boxProps), props.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 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 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 Page = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    return (React.createElement(commonUi.Box, tslib.__assign({ marginTop: 8, display: "flex", alignItems: "center", flexDirection: "column" }, restProps), children));
+};
+
+var PageBody = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    return (React.createElement(commonUi.Box, tslib.__assign({ py: 2, px: 5.5, maxWidth: 1100, width: "100%" }, restProps), children));
+};
+
+var usePageSectionStyles = core.makeStyles(function (_a) {
+    var spacing = _a.spacing;
+    return ({
+        root: {
+            background: function (_a) {
+                var uncontained = _a.uncontained;
+                return (uncontained ? 'transparent' : undefined);
+            },
+        },
+        cardContent: {
+            padding: spacing(4),
+        },
+    });
+});
+
+var PageSection = React.forwardRef(function (props, ref) {
+    var children = props.children; props.uncontained; var restProps = tslib.__rest(props, ["children", "uncontained"]);
+    var classes = usePageSectionStyles(props);
+    return (React.createElement(commonUi.Card, tslib.__assign({ classes: { root: classes.root }, ref: ref }, restProps),
+        React.createElement(commonUi.CardContent, { classes: { root: classes.cardContent } }, children)));
+});
+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 ({
+    gutterBottom: {
+        marginBottom: '1em',
+    },
+}); });
+
+var PageSectionTitle = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    var classes = useStyles$2();
+    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 useSettingsIndexCardStyles = core.makeStyles(function (theme) { return ({
+    cardRoot: {
+        border: "1px solid " + theme.palette.grey[300],
+        alignSelf: 'stretch',
+        flexGrow: 1,
+        '&:hover': {
+            backgroundColor: '#52B7FF1A',
+        },
+    },
+    cardContentRoot: {
+        padding: theme.spacing(4),
+        '&:last-child': {
+            paddingBottom: theme.spacing(4),
+        },
+    },
+}); });
+
+// eslint-disable-next-line react/display-name -- false positive
+var SettingsIndexCard = React.forwardRef(function (props, ref) {
+    var title = props.title, description = props.description, Icon = props.Icon, onClick = props.onClick, statusLabel = props.statusLabel, restProps = tslib.__rest(props, ["title", "description", "Icon", "onClick", "statusLabel"]);
+    var classes = useSettingsIndexCardStyles(props);
+    var showStatusLabel = (statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.text) && (statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.color);
+    return (React.createElement(commonUi.ButtonBase, tslib.__assign({ onClick: onClick, ref: ref }, restProps),
+        React.createElement(commonUi.Card, { classes: { root: classes.cardRoot } },
+            React.createElement(commonUi.CardContent, { classes: { root: classes.cardContentRoot } },
+                React.createElement(commonUi.Box, { fontSize: "32px", display: "flex", justifyContent: 'space-between', alignItems: "center", paddingBottom: 2 },
+                    React.createElement(commonUi.Icon, { icon: Icon || webIcons.Help, size: "inherit" }),
+                    showStatusLabel && (React.createElement(commonUi.Typography, { weight: "semi-bold", variant: "body2", color: statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.color }, statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.text))),
+                React.createElement(commonUi.Typography, { align: "left", variant: "h6", gutterBottom: true }, title),
+                description && (React.createElement(commonUi.Typography, { align: "left", variant: "body2", color: "grey.700" }, description))))));
+});
+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 useStyles = core.makeStyles(function (theme) { return ({
+    chipRoot: {
+        marginRight: theme.spacing(4),
+        cursor: 'pointer',
+    },
+    body: {
+        paddingTop: '4px',
+    },
+    listItemText: {
+        marginRight: '32px',
+    },
+}); });
+/**
+ * TODO
+ * - clean props util
+ * - Avatar size and shape
+ */
+var StandardListItem = function (props) {
+    props.itemId; var title = props.title, meta = props.meta, body = props.body, image = props.image, status = props.status, secondaryAction = props.secondaryAction, onClick = props.onClick, restProps = tslib.__rest(props, ["itemId", "title", "meta", "body", "image", "status", "secondaryAction", "onClick"]);
+    var classes = useStyles(props);
+    return (React.createElement(core.ListItem, tslib.__assign({ button: Boolean(onClick), onClick: function (e) { return onClick && onClick(e, props); } }, restProps),
+        image && (React.createElement(core.ListItemAvatar, null,
+            React.createElement(commonUi.Avatar, { src: image.src, alt: image.alt }, image.Icon && React.createElement(commonUi.Icon, { icon: image.Icon })))),
+        React.createElement(core.ListItemText, { disableTypography: true, className: classes.listItemText },
+            React.createElement(commonUi.Typography, { variant: "h6" }, title),
+            meta && (React.createElement(commonUi.Typography, { variant: "body2", color: "secondary.light" }, meta)),
+            body && (React.createElement(commonUi.Typography, { variant: "body2", color: "grey.700", className: classes.body }, body))),
+        status && (React.createElement(core.Chip, { classes: { root: classes.chipRoot }, icon: status.Icon && React.createElement(commonUi.Icon, { icon: status.Icon }), label: status.text })),
+        secondaryAction && (React.createElement(core.ListItemSecondaryAction, null,
+            React.createElement(core.IconButton, { style: { color: 'black' }, "aria-label": secondaryAction['aria-label'], onClick: function (e) { return secondaryAction.onClick(e, props); } },
+                React.createElement(commonUi.Icon, { icon: secondaryAction.Icon }))))));
+};
+
+var useFullScreenStepperContext = function () { return React.useContext(FullScreenStepperContext); };
+
+/**
+ * Manages state for SelectableCards.
+ * @param {Config} config - Configures the hook behavior.
+ * @param {string|string[]} [config.defaultSelected = []] - Initializes state with the provided value.
+ * @param {string} [config.selectionMode = 'single'] - Determines selection behavior. 'single' provides radio style
+ * selection. 'multi' provides checkbox style selection.
+ * @param {number} [config.maxSelectionCount] - A number to determine the maximum amount of cards to be selected.
+ * @returns {HookResult} An object with click handler and current state. Spread into a SelectableCard to use.
+ */
+var useSelectableCard = function (config) {
+    if (config === void 0) { config = {}; }
+    var _a = config.defaultSelected, defaultSelected = _a === void 0 ? [] : _a, _b = config.selectionMode, selectionMode = _b === void 0 ? 'single' : _b, maxSelectionCount = config.maxSelectionCount;
+    var initialState = Array.isArray(defaultSelected) ? defaultSelected : [defaultSelected];
+    var _c = React.useState(initialState), selection = _c[0], setSelection = _c[1];
+    var onClick;
+    var handleSingleSelectionMode = function (value) {
+        setSelection([value]);
+    };
+    var handleMultiSelectionMode = function (value) {
+        var newSelection = tslib.__spreadArray([], selection);
+        if (!selection.includes(value)) {
+            if (selection.length === maxSelectionCount) {
+                newSelection.shift();
+            }
+            newSelection = tslib.__spreadArray(tslib.__spreadArray([], newSelection), [value]);
+            setSelection(newSelection);
+        }
+        else {
+            newSelection = newSelection.filter(function (selected) { return selected !== value; });
+            setSelection(newSelection);
+        }
+    };
+    switch (selectionMode) {
+        case 'single':
+            onClick = handleSingleSelectionMode;
+            break;
+        case 'multi':
+            onClick = handleMultiSelectionMode;
+            break;
+        default:
+            onClick = handleSingleSelectionMode;
+    }
+    return { card: { onClick: onClick, selection: selection }, selection: selection, setSelection: setSelection };
+};
+
+var useDialog = function () {
+    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    var toggle = function () { return setOpen(function (current) { return !current; }); };
+    var close = function () { return setOpen(false); };
+    var triggerProps = { onClick: toggle };
+    var dialogProps = { open: open, onClose: close };
+    return [triggerProps, dialogProps, { open: open, setOpen: setOpen, toggle: toggle, close: close }];
+};
+
+var adminThemeBreakpoints = {
+    values: {
+        xs: 0,
+        sm: 768,
+        md: 992,
+        lg: 1200,
+        xl: 1900,
+    },
+};
+
+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: {
+        light: '#DA777E',
+        main: '#F04649',
+        dark: '#B3212B',
+        contrastText: '#FFFFFF',
+        gradientStart: '#ED4A67',
+        gradientEnd: '#F04649',
+    },
+    info: {
+        light: '#52B7FF',
+        main: '#0076CB',
+        dark: '#164B54',
+    },
+    success: {
+        light: '#48D3AB',
+        main: '#00B485',
+        dark: '#00663E',
+        contrastText: '#FFFFFF',
+    },
+    error: {
+        light: '#DA777E',
+        main: '#E52021',
+        dark: '#A80005',
+    },
+    warning: {
+        light: '#F0DFBA',
+        main: '#F5C364',
+        dark: '#E57E45',
+    },
+    /** Colors */
+    blue: {
+        light: '#52B7FF',
+        main: '#0076CB',
+        dark: '#164B54',
+        darker: '#002E6C',
+    },
+    green: {
+        light: '#48D3AB',
+        main: '#00B485',
+        dark: '#00663E',
+    },
+    purple: {
+        light: '#7B7FA3',
+        main: '#2E3042',
+        dark: '#1A1D20',
+    },
+    red: {
+        light: '#DA777E',
+        main: '#F04649',
+        dark: '#B3212B',
+    },
+    yellow: {
+        light: '#F0DFBA',
+        main: '#F5C364',
+        dark: '#E57E45',
+    },
+    gray: {
+        light: '#E9E9E9',
+        main: '#D9D9D9',
+        dark: '#9D9D9D',
+    },
+    white: {
+        main: '#FFFFFF',
+    },
+};
+var adminLightPalette = {
+    type: 'light',
+    /** Semantic Colors */
+    secondary: {
+        light: '#7B7FA3',
+        main: '#2E3042',
+        dark: '#1A1D20',
+    },
+    surface: {
+        light: '#FEFEFE',
+        main: '#ECF0F1',
+        dark: '#2E3042',
+    },
+};
+var adminDarkPalette = {
+    type: 'dark',
+    /** Semantic Colors */
+    secondary: {
+        light: '#7B7FA3',
+        main: '#FFFFFF',
+    },
+    surface: {
+        light: '#141414',
+        main: '#222222',
+        dark: '#333333',
+    },
+};
+var dataVizPalette = {
+    data: {
+        blue: {
+            light: '#A5BBFF',
+            main: '#6B82FE',
+            dark: '#5F6FE6',
+        },
+        peach: {
+            light: '#E69999',
+            main: '#FF7061',
+            dark: '#DC5D56',
+        },
+        pink: {
+            light: '#D08CB2',
+            main: '#BC5090',
+            dark: '#A04383',
+        },
+        purple: {
+            light: '#978CCE',
+            main: '#58508D',
+            dark: '#1B1B51',
+        },
+        marigold: {
+            light: '#ECBE70',
+            main: '#ECA33A',
+            dark: '#E28A30',
+        },
+        teal: {
+            light: '#5FCFD2',
+            main: '#1AB0AF',
+            dark: '#1E938F',
+        },
+    },
+};
+
+var overrides = {
+    MuiCssBaseline: {
+        '@global': {
+            '*::-webkit-scrollbar': {
+                width: '12px',
+            },
+            '*::-webkit-scrollbar-thumb': {
+                backgroundColor: 'rgba(167,167,167,1)',
+                border: '2px solid rgba(245, 245, 245, 1)',
+                borderRadius: '8px',
+            },
+            '*::-webkit-scrollbar-track': {
+                backgroundColor: 'rgba(245, 245, 245, 1)',
+                borderRadius: '0px',
+            },
+        },
+    },
+    MuiSwitch: {
+        checked: {},
+        track: {},
+        switchBase: {
+            '&$checked': {
+                color: basePalette.success.main,
+                '& + $track': {
+                    background: basePalette.success.light,
+                },
+            },
+        },
+    },
+};
+
+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 = 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 = core.createTheme(adminDarkOptions);
+
+Object.defineProperty(exports, "Dialog", {
+    enumerable: true,
+    get: function () { return commonUi.Dialog; }
+});
+Object.defineProperty(exports, "DialogContent", {
+    enumerable: true,
+    get: function () { return commonUi.DialogContent; }
+});
+Object.defineProperty(exports, "DialogTitle", {
+    enumerable: true,
+    get: function () { return commonUi.DialogTitle; }
+});
+Object.defineProperty(exports, "CircularProgress", {
+    enumerable: true,
+    get: function () { return core.CircularProgress; }
+});
+Object.defineProperty(exports, "MenuItem", {
+    enumerable: true,
+    get: function () { return core.MenuItem; }
+});
+Object.defineProperty(exports, "Switch", {
+    enumerable: true,
+    get: function () { return core.Switch; }
+});
+Object.defineProperty(exports, "TextField", {
+    enumerable: true,
+    get: function () { return core.TextField; }
+});
+exports.Alert = Alert;
+exports.AlertDialog = AlertDialog;
+exports.AlertDialogHeader = AlertDialogHeader;
+exports.AlertTitle = AlertTitle;
+exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
+exports.DialogActions = DialogActions;
+exports.FeatureIntro = FeatureIntro;
+exports.FullScreenStepper = FullScreenStepper;
+exports.FullScreenStepperActions = FullScreenStepperActions;
+exports.FullScreenStepperContent = FullScreenStepperContent;
+exports.FullScreenStepperContext = FullScreenStepperContext;
+exports.List = List;
+exports.Page = Page;
+exports.PageBody = PageBody;
+exports.PageSection = PageSection;
+exports.PageSectionHead = PageSectionHead;
+exports.PageSectionTitle = PageSectionTitle;
+exports.PageSections = PageSections;
+exports.SelectableCard = SelectableCard;
+exports.SettingsIndexCard = SettingsIndexCard;
+exports.SettingsIndexCardGroup = SettingsIndexCardGroup;
+exports.StandardListItem = StandardListItem;
+exports.Toast = Toast;
+exports.adminDark = adminDark;
+exports.adminDarkOptions = adminDarkOptions;
+exports.adminLight = adminLight;
+exports.adminLightOptions = adminLightOptions;
+exports.useDialog = useDialog;
+exports.useFullScreenStepperContext = useFullScreenStepperContext;
+exports.useSelectableCard = useSelectableCard;
+//# sourceMappingURL=index.js.map