@popmenu/admin-ui 0.126.4 → 0.127.1

package/build/cjs/index.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var tslib = require('tslib');
 var React = require('react');
 var commonUi = require('@popmenu/common-ui');
 var webIcons = require('@popmenu/web-icons');
@@ -8,60 +7,57 @@ var core = require('@material-ui/core');
 var lab = require('@material-ui/lab');
 var classNames = require('classnames');
 
-var useAlertStyles = core.makeStyles(function (theme) { return ({
+const useAlertStyles = core.makeStyles((theme) => ({
     root: {
         alignItems: 'center',
-        width: function (_a) {
-            var fullWidth = _a.fullWidth;
-            return (fullWidth ? '100%' : 'unset');
-        },
+        width: ({ fullWidth }) => (fullWidth ? '100%' : 'unset'),
         background: 'white',
-        borderColor: function (props) { return theme.palette[props.severity || 'error'].main; },
-        borderLeft: theme.spacing(1) + "px solid",
+        borderColor: (props) => theme.palette[props.severity || 'error'].main,
+        borderLeft: `${theme.spacing(1)}px solid`,
         color: theme.palette.text.primary,
     },
     icon: {
         alignSelf: 'start',
     },
-}); });
+}));
 
-var severityIcons$1 = {
+const severityIcons$1 = {
     info: webIcons.Info,
     error: webIcons.Error,
     warning: webIcons.Warning,
     success: webIcons.CheckCircle,
 };
-var getLinkProps = function (link) {
+const getLinkProps = (link) => {
     if (!link)
         return null;
-    var href = link.href, onClick = link.onClick, text = link.text;
+    const { href, onClick, text } = link;
     if (!text)
         return null;
-    var props = { children: text };
+    const props = { children: text };
     if (href)
-        return tslib.__assign(tslib.__assign({}, props), { href: href });
+        return { ...props, href };
     if (onClick)
-        return tslib.__assign(tslib.__assign({}, props), { onClick: onClick });
+        return { ...props, 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)),
+const Alert = React.forwardRef((props, ref) => {
+    const { children, link, severity = 'error', variant = 'outlined', onClose, ...muiProps } = props;
+    const classes = useAlertStyles(props);
+    const validLink = link && getLinkProps(link);
+    const Action = (React.createElement(React.Fragment, null,
+        validLink && React.createElement(commonUi.Link, { ...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, 
+    return (React.createElement(commonUi.Alert, { 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));
+        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';
+const borderWidth = 1;
+const getColor = (palette, props) => {
+    const variant = props.variant;
+    let color = 'inherit';
     if (['primary', 'info', 'success', 'warning', 'error'].includes(variant)) {
         // @ts-expect-error - todo.
         color = palette[variant].contrastText;
@@ -84,22 +80,22 @@ var getColor = function (palette, props) {
     }
     return color;
 };
-var getColorHover = function (palette, props) {
-    var color;
+const getColorHover = (palette, props) => {
+    let color;
     if (props.variant === 'secondary') {
         color = palette.secondary.contrastText;
     }
     return color;
 };
-var getBackground = function (palette, props) {
-    var backgroundColor = 'inherit';
+const getBackground = (palette, props) => {
+    let 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%)";
+        backgroundColor = `linear-gradient(97.36deg, ${palette.primary.gradientStart} 17.03%, ${palette.primary.gradientEnd} 72.96%)`;
     }
     if (props.variant === 'secondary') {
         backgroundColor = 'white';
@@ -109,8 +105,8 @@ var getBackground = function (palette, props) {
     }
     return backgroundColor;
 };
-var getBackgroundHover = function (palette, props) {
-    var backgroundHoverColor = 'inherit';
+const getBackgroundHover = (palette, props) => {
+    let backgroundHoverColor = 'inherit';
     if (['primary', 'info', 'success', 'warning', 'error'].includes(props.variant)) {
         // @ts-expect-error - todo.
         backgroundHoverColor = palette[props.variant].dark;
@@ -126,59 +122,59 @@ var getBackgroundHover = function (palette, props) {
     }
     return backgroundHoverColor;
 };
-var buttonTypography = {
+const 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)",
-            },
+const useButtonStyles = core.makeStyles(({ palette, spacing }) => ({
+    root: (props) => ({
+        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),
         },
-        text: {
-            padding: spacing(1, 2),
+    }),
+    disabled: {
+        '&$root': {
+            background: palette.action.disabled,
         },
-        label: tslib.__assign(tslib.__assign({}, buttonTypography), { textTransform: function (props) { return props.textTransform; } }),
-        sizeSmall: {
-            padding: spacing(0.5, 2),
+    },
+    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: spacing(1.5, 2),
+        '&$sizeLarge': {
+            padding: `calc(${spacing(1.5)}px - ${borderWidth}px) calc(${spacing(2)}px - ${borderWidth}px)`,
         },
-    });
-});
+    },
+    text: {
+        padding: spacing(1, 2),
+    },
+    label: {
+        ...buttonTypography,
+        textTransform: (props) => props.textTransform,
+    },
+    sizeSmall: {
+        padding: spacing(0.5, 2),
+    },
+    sizeLarge: {
+        padding: spacing(1.5, 2),
+    },
+}));
 
-var deriveButtonProps = function (buttonProps) {
-    var variant = buttonProps.variant;
-    var derived = {};
+const deriveButtonProps = (buttonProps) => {
+    const { variant } = buttonProps;
+    const derived = {};
     switch (variant) {
         case 'primary':
             derived.variant = 'contained';
@@ -217,12 +213,18 @@ var deriveButtonProps = function (buttonProps) {
 };
 
 // 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));
+const Button = React.forwardRef((props, ref) => {
+    const { children, variant: remove, classes: classesOverride, ...commonProps } = props;
+    const classes = useButtonStyles(props);
+    const derivedProps = deriveButtonProps(props);
+    const mergedProps = {
+        ...derivedProps,
+        ...commonProps,
+    };
+    return (React.createElement(commonUi.Button, { ref: ref, classes: {
+            ...classes,
+            ...classesOverride,
+        }, disableElevation: true, ...mergedProps }, children));
 });
 Button.defaultProps = {
     textTransform: 'uppercase',
@@ -230,7 +232,7 @@ Button.defaultProps = {
 };
 Button.displayName = 'Button';
 
-var useAlertDialogStyles = core.makeStyles(function (theme) { return ({
+const useAlertDialogStyles = core.makeStyles((theme) => ({
     cancelButton: {
         color: theme.palette.grey[700],
     },
@@ -241,7 +243,7 @@ var useAlertDialogStyles = core.makeStyles(function (theme) { return ({
     },
     card: {
         borderRadius: theme.spacing(0.75),
-        borderTop: function (props) { return theme.spacing(1.25) + "px solid " + theme.palette[props.severity || 'info'].main; },
+        borderTop: (props) => `${theme.spacing(1.25)}px solid ${theme.palette[props.severity || 'info'].main}`,
     },
     cardActions: {
         background: theme.palette.grey[100],
@@ -253,18 +255,18 @@ var useAlertDialogStyles = core.makeStyles(function (theme) { return ({
     root: {
         borderRadius: theme.spacing(0.75),
     },
-}); });
+}));
 
-var severityIcons = {
+const 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),
+const AlertDialog = React.forwardRef((props, ref) => {
+    const { cancelButtonText = 'cancel', hideCancelButton = false, children, labelId, descriptionId, severity = 'info', proceedButtonText = 'proceed', disabled = false, onClose, onCancel, onProceed, ...DialogProps } = props;
+    const classes = useAlertDialogStyles(props);
+    return (React.createElement(commonUi.Dialog, { 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 })),
@@ -278,16 +280,16 @@ var AlertDialog = React.forwardRef(function (props, ref) {
 });
 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),
+const AlertDialogHeader = (props) => {
+    const { children, ...muiProps } = props;
+    return (React.createElement(commonUi.Box, { 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),
+const AlertTitle = (props) => {
+    const { children, ...muiProps } = props;
+    return (React.createElement(lab.AlertTitle, { ...muiProps },
         React.createElement(commonUi.Typography, { variant: "h6" },
             " ",
             children,
@@ -295,21 +297,21 @@ var AlertTitle = function (props) {
 };
 AlertTitle.displayName = 'AlertTitle';
 
-var getBorderColor = function (palette, variant) {
-    var borderColor = 'inherit';
+const getBorderColor = (palette, variant) => {
+    let 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 ({
+const useButtonGroupStyles = core.makeStyles((theme) => ({
     root: {
         boxShadow: 'none',
     },
     groupedContained: {
         '&&': {
-            borderColor: function (props) { return getBorderColor(theme.palette, props.variant); },
+            borderColor: (props) => getBorderColor(theme.palette, props.variant),
         },
     },
     groupedText: {
@@ -317,84 +319,82 @@ var useButtonGroupStyles = core.makeStyles(function (theme) { return ({
             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) } };
+const ButtonGroup = React.forwardRef((props, ref) => {
+    const { children, variant = 'primary', ...muiProps } = props;
+    const classes = useButtonGroupStyles(props);
+    const derivedProps = deriveButtonProps({ variant });
+    const { spacing } = core.useTheme();
+    const childrenWithProps = React.Children.map(children, (child, i) => {
+        const isFirst = i === 0 && props.orientation === 'vertical';
+        const isLast = i === React.Children.toArray(children).length - 1 && props.orientation === 'vertical';
+        const firstStyles = { style: { borderTopLeftRadius: spacing(2), borderTopRightRadius: spacing(2) } };
+        const 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.cloneElement(child, {
+            variant,
+            ...(isFirst && firstStyles),
+            ...(isLast && lastStyles),
+        });
     });
-    return (React.createElement(commonUi.ButtonGroup, tslib.__assign({ ref: ref, classes: classes }, derivedProps, muiProps), childrenWithProps));
+    return (React.createElement(commonUi.ButtonGroup, { ref: ref, classes: classes, ...derivedProps, ...muiProps }, childrenWithProps));
 });
 ButtonGroup.displayName = 'ButtonGroup';
 
-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));
+const useStyles$4 = core.makeStyles(({ palette }) => ({
+    root: {
+        background: palette.grey['100'],
+    },
+}));
+const DialogActions = (props) => {
+    const classes = useStyles$4(props);
+    return React.createElement(commonUi.DialogActions, { classes: classes, ...props });
 };
 
-var useFeatureIntroStyles = core.makeStyles(function (_a) {
-    var spacing = _a.spacing;
-    return ({
-        root: {
-            gap: spacing(3),
-        },
-        actions: {
-            gap: spacing(3),
-        },
-        image: {
-            width: '100%',
-            objectFit: 'contain',
-        },
-    });
-});
+const useFeatureIntroStyles = core.makeStyles(({ spacing }) => ({
+    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);
+const FeatureIntro = (props) => {
+    const { title, body, primaryAction, secondaryAction, image } = props;
+    const { label: primaryActionLabel, ...primaryActionProps } = primaryAction;
+    const { label: secondaryActionLabel, ...secondaryActionProps } = secondaryAction || {};
+    const classes = useFeatureIntroStyles(props);
+    const validImage = image?.src && 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)))),
+                primaryAction && React.createElement(Button, { ...primaryActionProps }, primaryActionLabel),
+                secondaryAction && (React.createElement(Button, { 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 ({
+const useFullScreenStepperActionsStyles = core.makeStyles((theme) => ({
     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],
+        padding: `${theme.spacing(1.5)}px ${theme.spacing(3)}px`,
+        borderTop: `${theme.spacing(0.5)}px solid ${theme.palette.grey[100]}`,
         zIndex: 3,
     },
     inlineEndActions: {
@@ -409,83 +409,72 @@ var useFullScreenStepperActionsStyles = core.makeStyles(function (theme) { retur
             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*/];
-            }
-        });
-    }); };
+const augmentButtonProps = (internalProps, externalProps = {}, setStepCursor, stepCursor, incrementor) => {
+    const mergedProps = { ...internalProps, ...externalProps };
+    mergedProps.onClick = async () => {
+        if (typeof externalProps.onClick === 'function') {
+            await externalProps.onClick({});
+            setStepCursor(stepCursor + incrementor);
+        }
+        else if (typeof internalProps.onClick === 'function') {
+            internalProps.onClick();
+        }
+    };
     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;
+const StepperActionsCancelButton = (props) => {
+    const { setStepCursor, stepCursor, cancelButtonText, cancelButtonProps, handleCancelClick, displayCancelButton } = props;
+    const augmentedCancelButtonProps = augmentButtonProps({ onClick: handleCancelClick }, cancelButtonProps, setStepCursor, stepCursor, 0);
+    return displayCancelButton ? (React.createElement(Button, { variant: "ghost", ...augmentedCancelButtonProps }, cancelButtonText || 'cancel')) : null;
 };
 
-var useStyles$3 = core.makeStyles({
+const StepperActionsNextButton = (props) => {
+    const { handleNextClick, nextButtonProps, setStepCursor, stepCursor, stepCount, finishButtonText, nextButtonText } = props;
+    const augmentedNextButtonProps = augmentButtonProps({ onClick: handleNextClick }, nextButtonProps, setStepCursor, stepCursor, 1);
+    const finalStep = stepCursor / stepCount === 1;
+    const finishText = finishButtonText || 'finish';
+    const nextText = nextButtonText || 'next';
+    const buttonText = finalStep ? finishText : nextText;
+    return React.createElement(Button, { ...augmentedNextButtonProps }, buttonText);
+};
+
+const StepperActionsPreviousButton = (props) => {
+    const { previousButtonText, stepCursor, handlePreviousClick, previousButtonProps, setStepCursor, displayPreviousButton, } = props;
+    const augmentedPreviousButtonProps = augmentButtonProps({ onClick: handlePreviousClick }, previousButtonProps, setStepCursor, stepCursor, -1);
+    return displayPreviousButton ? (React.createElement(Button, { variant: "tertiary", disabled: stepCursor === 1, ...augmentedPreviousButtonProps }, previousButtonText || 'previous')) : null;
+};
+
+const useStyles$3 = core.makeStyles({
     root: {
         fontStyle: 'italic',
     },
 });
-var StepperActionsStatusText = function (props) {
-    var statusText = props.statusText;
-    var classes = useStyles$3(props);
+const StepperActionsStatusText = (props) => {
+    const { statusText } = props;
+    const classes = useStyles$3(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);
+const FullScreenStepperActions = (props) => {
+    const { stepCount, stepCursor, setStepCursor, handleNextClick, handlePreviousClick, handleCancelClick, actions, callbackArgs, cancelButtonText, nextButtonText, finishButtonText, nextButtonProps, previousButtonText, previousButtonProps, cancelButtonProps, statusText, displayPreviousButton, displayCancelButton, } = props;
+    const 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)); }),
+                actions.map((action, i) => (React.createElement(Button, { key: `custom-action-${stepCursor}-${i}`, variant: "ghost", onClick: (event) => 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;
+const getBorderRadius = (theme, props) => {
+    const { stepCursor, stepCount } = props;
+    const isFinalStep = stepCursor / stepCount === 1;
     if (isFinalStep) {
         return 0;
     }
@@ -493,15 +482,15 @@ var getBorderRadius = function (theme, props) {
         return theme.spacing(0.5);
     }
 };
-var useFullScreenStepperProgressStyles = core.makeStyles(function (theme) { return ({
+const useFullScreenStepperProgressStyles = core.makeStyles((theme) => ({
     progress: {
-        width: function (props) { return (props.stepCursor / props.stepCount) * 100 + "%"; },
+        width: (props) => `${(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); },
+        background: `linear-gradient(45deg, ${theme.palette.primary.gradientStart}, ${theme.palette.primary.gradientEnd})`,
+        borderEndEndRadius: (props) => getBorderRadius(theme, props),
+        borderStartEndRadius: (props) => getBorderRadius(theme, props),
     },
     track: {
         position: 'absolute',
@@ -513,39 +502,36 @@ var useFullScreenStepperProgressStyles = core.makeStyles(function (theme) { retu
         background: theme.palette.grey[100],
         zIndex: 2,
     },
-}); });
+}));
 
-var FullScreenStepperProgress = function (props) {
-    var classes = useFullScreenStepperProgressStyles(props);
+const FullScreenStepperProgress = (props) => {
+    const 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,
-        },
-    });
-});
+const useFullScreenStepperHeaderStyles = core.makeStyles(({ spacing }) => ({
+    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);
+const FullScreenStepperHeader = (props) => {
+    const { stepCount, stepCursor, step, onClose } = props;
+    const classes = useFullScreenStepperHeaderStyles(props);
     return (React.createElement(commonUi.Box, { className: classes.root },
         React.createElement(commonUi.Typography, { variant: "h6" }, step.title),
         React.createElement(commonUi.Typography, null,
@@ -557,25 +543,25 @@ var FullScreenStepperHeader = function (props) {
         React.createElement(FullScreenStepperProgress, { stepCount: stepCount, stepCursor: stepCursor })));
 };
 
-var FullScreenStepperContext = React.createContext({});
+const 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 () {
+const FullScreenStepper = (props) => {
+    const { children, context = {}, defaultStepCursor = 1, displayActionBar = true, displayCancelButton = true, displayPreviousButton = true, resetStepCursorOnCancel = true, resetStepCursorOnClose = true, steps, onClose, onFinish, onNext, onCancel, onPrevious, ...DialogProps } = props;
+    const [stepCursor, setStepCursor] = React.useState(defaultStepCursor);
+    const stepCount = steps.length;
+    const stepIndex = stepCursor - 1;
+    const step = steps[stepIndex];
+    const { displayActionBar: displayStepActionBar = true } = step;
+    const isFinalStep = stepCursor / stepCount === 1;
+    const callbackArgs = { setStepCursor, step, stepCount, stepIndex, steps };
+    const mergedContext = { ...context, ...callbackArgs };
+    const resetStepCursor = () => setTimeout(() => setStepCursor(1), 600);
+    const handleClose = () => {
         if (typeof onClose === 'function') {
             onClose(callbackArgs);
         }
@@ -583,90 +569,60 @@ var FullScreenStepper = function (props) {
             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*/];
+    const handleNextClick = async () => {
+        if (isFinalStep) {
+            if (typeof onFinish === 'function') {
+                await onFinish(callbackArgs);
             }
-        });
-    }); };
-    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*/];
+            if (typeof onClose === 'function') {
+                onClose(callbackArgs);
             }
-        });
-    }); };
-    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*/];
+            resetStepCursor();
+        }
+        else {
+            if (typeof onNext === 'function') {
+                await onNext(callbackArgs);
             }
-        });
-    }); };
-    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),
+            setStepCursor(stepCursor + 1);
+        }
+    };
+    const handlePreviousClick = async () => {
+        if (typeof onPrevious === 'function') {
+            await onPrevious(callbackArgs);
+        }
+        setStepCursor(stepCursor - 1);
+    };
+    const handleCancelClick = async () => {
+        if (typeof onCancel === 'function') {
+            await onCancel(callbackArgs);
+        }
+        if (resetStepCursorOnCancel) {
+            resetStepCursor();
+        }
+    };
+    const content = React.Children.toArray(children).find((child) => React.isValidElement(child) && child.props.name === step.name);
+    return (React.createElement(core.Dialog, { 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 })))))));
+                displayActionBar && displayStepActionBar && (React.createElement(FullScreenStepperActions, { ...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));
+const FullScreenStepperContent = (props) => {
+    const { name: remove, ...boxProps } = props;
+    return (React.createElement(commonUi.Box, { py: 8, ...boxProps }, props.children));
 };
 
-var useStyles$2 = core.makeStyles(function (theme) { return ({
+const useStyles$2 = core.makeStyles((theme) => ({
     root: {
         '&$uncontained > li > *:first-child': {
             background: theme.palette.background.paper,
             borderRadius: theme.spacing(1),
         },
         '& > li > *:first-child': {
-            borderBottom: "1px solid " + theme.palette.grey[300],
+            borderBottom: `1px solid ${theme.palette.grey[300]}`,
         },
         '& > li:last-child > *:first-child': {
             borderBottom: 'none',
@@ -677,90 +633,74 @@ var useStyles$2 = core.makeStyles(function (theme) { return ({
         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$2(props);
-    return (React.createElement(core.List, tslib.__assign({ classes: classes, className: classNames((_a = {}, _a[classes.uncontained] = uncontained, _a), className) }, restProps), children));
+const List = (props) => {
+    const { children, uncontained, className, ...restProps } = props;
+    const classes = useStyles$2(props);
+    return (React.createElement(core.List, { classes: classes, className: classNames({ [classes.uncontained]: uncontained }, className), ...restProps }, children));
 };
 
-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));
+const Page = (props) => {
+    const { children, ...restProps } = props;
+    return (React.createElement(commonUi.Box, { 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));
+const PageBody = (props) => {
+    const { children, ...restProps } = props;
+    return (React.createElement(commonUi.Box, { 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),
-        },
-    });
-});
+const usePageSectionStyles = core.makeStyles(({ spacing }) => ({
+    root: {
+        background: ({ uncontained }) => (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),
+const PageSection = React.forwardRef((props, ref) => {
+    const { children, uncontained, ...restProps } = props;
+    const classes = usePageSectionStyles(props);
+    return (React.createElement(commonUi.Card, { classes: { root: classes.root }, ref: ref, ...restProps },
         React.createElement(commonUi.CardContent, { classes: { root: classes.cardContent } }, children)));
 });
 PageSection.displayName = 'PageSection';
 
-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));
+const PageSectionHead = (props) => {
+    const { children, ...restProps } = props;
+    const theme = core.useTheme();
+    return (React.createElement(commonUi.Box, { fontSize: theme.typography.h5.fontSize, mb: "1em", display: "flex", justifyContent: "space-between", ...restProps }, children));
 };
 
-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));
+const PageSections = (props) => {
+    const { children, ...restProps } = props;
+    return (React.createElement(commonUi.Box, { display: "flex", flexDirection: "column", gridGap: 16, ...restProps }, children));
 };
 
-var useStyles$1 = core.makeStyles(function () { return ({
+const useStyles$1 = core.makeStyles(() => ({
     gutterBottom: {
         marginBottom: '1em',
     },
-}); });
+}));
 
-var PageSectionTitle = function (props) {
-    var children = props.children, restProps = tslib.__rest(props, ["children"]);
-    var classes = useStyles$1();
-    return (React.createElement(commonUi.Typography, tslib.__assign({ classes: classes, gutterBottom: true, variant: "h5" }, restProps), children));
+const PageSectionTitle = (props) => {
+    const { children, ...restProps } = props;
+    const classes = useStyles$1();
+    return (React.createElement(commonUi.Typography, { classes: classes, gutterBottom: true, variant: "h5", ...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;
+const useSelectableCardStyles = core.makeStyles((theme) => {
+    const { palette: { info, grey, getContrastText }, spacing, } = theme;
+    const selectedBackgroundColor = core.lighten(theme.palette.info.light, 0.9);
+    const 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));
-            },
+            border: ({ selected }) => (selected ? `1px solid ${info.light}` : `1px solid ${grey[700]}`),
+            backgroundColor: ({ selected }) => (selected ? selectedBackgroundColor : backgroundColor),
+            color: ({ selected }) => (selected ? getContrastText(selectedBackgroundColor) : getContrastText(backgroundColor)),
             transition: 'none',
         },
         cardContent: {
@@ -774,10 +714,7 @@ var useSelectableCardStyles = core.makeStyles(function (theme) {
             position: 'absolute',
             top: spacing(2),
             left: spacing(2),
-            color: function (_a) {
-                var selected = _a.selected;
-                return (selected ? info.main : grey[700]);
-            },
+            color: ({ selected }) => (selected ? info.main : grey[700]),
         },
         focusHighlight: {
             backgroundColor: 'inherit',
@@ -785,23 +722,23 @@ var useSelectableCardStyles = core.makeStyles(function (theme) {
     };
 });
 
-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 () {
+const SelectableCard = (props) => {
+    const { children, selected: selectedProp, selection = [], onClick, value, labelId, CardActionAreaProps, ...muiProps } = props;
+    const selected = typeof selectedProp === 'boolean' ? selectedProp : selection.includes(value);
+    const classes = useSelectableCardStyles({ ...props, selected });
+    const handleClick = () => {
         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),
+    return (React.createElement(commonUi.Card, { classes: { root: classes.root }, ...muiProps },
+        React.createElement(commonUi.CardActionArea, { 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 = core.makeStyles(function (theme) { return ({
+const useSettingsIndexCardStyles = core.makeStyles((theme) => ({
     cardRoot: {
-        border: "1px solid " + theme.palette.grey[300],
+        border: `1px solid ${theme.palette.grey[300]}`,
         alignSelf: 'stretch',
         flexGrow: 1,
         '&:hover': {
@@ -814,30 +751,30 @@ var useSettingsIndexCardStyles = core.makeStyles(function (theme) { return ({
             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),
+const SettingsIndexCard = React.forwardRef((props, ref) => {
+    const { title, description, Icon, onClick, statusLabel, ...restProps } = props;
+    const classes = useSettingsIndexCardStyles(props);
+    const showStatusLabel = statusLabel?.text && statusLabel?.color;
+    return (React.createElement(commonUi.ButtonBase, { 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))),
+                    showStatusLabel && (React.createElement(commonUi.Typography, { weight: "semi-bold", variant: "body2", color: statusLabel?.color }, 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 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));
+const SettingsIndexCardGroup = (props) => {
+    const { children, ...restProps } = props;
+    return (React.createElement(commonUi.Box, { display: "grid", gridGap: 16, gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", ...restProps }, children));
 };
 
-var useStyles = core.makeStyles(function (theme) { return ({
+const useStyles = core.makeStyles((theme) => ({
     chipRoot: {
         marginRight: theme.spacing(4),
         cursor: 'pointer',
@@ -848,16 +785,16 @@ var useStyles = core.makeStyles(function (theme) { return ({
     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),
+const StandardListItem = (props) => {
+    const { itemId, title, meta, body, image, status, secondaryAction, onClick, ...restProps } = props;
+    const classes = useStyles(props);
+    return (React.createElement(core.ListItem, { button: Boolean(onClick), onClick: (e) => 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 },
@@ -866,11 +803,11 @@ var StandardListItem = function (props) {
             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(core.IconButton, { style: { color: 'black' }, "aria-label": secondaryAction['aria-label'], onClick: (e) => secondaryAction.onClick(e, props) },
                 React.createElement(commonUi.Icon, { icon: secondaryAction.Icon }))))));
 };
 
-var useToastStyles = core.makeStyles(function (theme) { return ({
+const useToastStyles = core.makeStyles((theme) => ({
     root: {
         boxSizing: 'border-box',
         padding: theme.spacing(0, 1.5),
@@ -880,17 +817,16 @@ var useToastStyles = core.makeStyles(function (theme) { return ({
             alignItems: 'center',
         },
     },
-}); });
+}));
 
-var Toast = function (_a) {
-    var _b = _a.AlertProps, AlertProps = _b === void 0 ? {} : _b, _c = _a.autoHideDuration, autoHideDuration = _c === void 0 ? 5000 : _c, children = _a.children, severity = _a.severity, muiProps = tslib.__rest(_a, ["AlertProps", "autoHideDuration", "children", "severity"]);
-    var classes = useToastStyles();
-    return (React.createElement(core.Snackbar, tslib.__assign({ ClickAwayListenerProps: { mouseEvent: false }, autoHideDuration: autoHideDuration }, muiProps),
-        React.createElement(Alert, tslib.__assign({ className: classes.root, action: null, severity: severity }, AlertProps), children)));
+const Toast = ({ AlertProps = {}, autoHideDuration = 5000, children, severity, ...muiProps }) => {
+    const classes = useToastStyles();
+    return (React.createElement(core.Snackbar, { ClickAwayListenerProps: { mouseEvent: false }, autoHideDuration: autoHideDuration, ...muiProps },
+        React.createElement(Alert, { className: classes.root, action: null, severity: severity, ...AlertProps }, children)));
 };
 Toast.displayName = 'Toast';
 
-var useFullScreenStepperContext = function () { return React.useContext(FullScreenStepperContext); };
+const useFullScreenStepperContext = () => React.useContext(FullScreenStepperContext);
 
 /**
  * Manages state for SelectableCards.
@@ -901,26 +837,25 @@ var useFullScreenStepperContext = function () { return React.useContext(FullScre
  * @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) {
+const useSelectableCard = (config = {}) => {
+    const { defaultSelected = [], selectionMode = 'single', maxSelectionCount } = config;
+    const initialState = Array.isArray(defaultSelected) ? defaultSelected : [defaultSelected];
+    const [selection, setSelection] = React.useState(initialState);
+    let onClick;
+    const handleSingleSelectionMode = (value) => {
         setSelection([value]);
     };
-    var handleMultiSelectionMode = function (value) {
-        var newSelection = tslib.__spreadArray([], selection);
+    const handleMultiSelectionMode = (value) => {
+        let newSelection = [...selection];
         if (!selection.includes(value)) {
             if (selection.length === maxSelectionCount) {
                 newSelection.shift();
             }
-            newSelection = tslib.__spreadArray(tslib.__spreadArray([], newSelection), [value]);
+            newSelection = [...newSelection, value];
             setSelection(newSelection);
         }
         else {
-            newSelection = newSelection.filter(function (selected) { return selected !== value; });
+            newSelection = newSelection.filter((selected) => selected !== value);
             setSelection(newSelection);
         }
     };
@@ -934,19 +869,19 @@ var useSelectableCard = function (config) {
         default:
             onClick = handleSingleSelectionMode;
     }
-    return { card: { onClick: onClick, selection: selection }, selection: selection, setSelection: setSelection };
+    return { card: { onClick, selection }, selection, 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 }];
+const useDialog = () => {
+    const [open, setOpen] = React.useState(false);
+    const toggle = () => setOpen((current) => !current);
+    const close = () => setOpen(false);
+    const triggerProps = { onClick: toggle };
+    const dialogProps = { open, onClose: close };
+    return [triggerProps, dialogProps, { open, setOpen, toggle, close }];
 };
 
-var adminThemeBreakpoints = {
+const adminThemeBreakpoints = {
     values: {
         xs: 0,
         sm: 768,
@@ -956,7 +891,7 @@ var adminThemeBreakpoints = {
     },
 };
 
-var props = {
+const props = {
     MuiSwitch: {
         color: 'default',
     },
@@ -969,17 +904,17 @@ var props = {
  * 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 = {
+const adminLightPlaceholder = { placeholder: 'rgba(0, 0, 0, 1)' };
+const adminDarkPlaceholder = { placeholder: 'rgba(255, 255, 255, 0.37)' };
+const adminThemeStatus = {
     status: {
         disabled: {
             opacity: 0.55,
         },
     },
 };
-var BASE_Z_INDEX = 1100000;
-var adminThemeZIndex = {
+const BASE_Z_INDEX = 1100000;
+const adminThemeZIndex = {
     zIndex: {
         mobileStepper: BASE_Z_INDEX + 1000,
         appBar: BASE_Z_INDEX + 1100,
@@ -995,26 +930,33 @@ var adminThemeZIndex = {
  *
  * props as imported from './props' are part updated design system.
  */
-var adminThemeDefaultProps = {
-    props: tslib.__assign(tslib.__assign({}, props), { 
+const adminThemeDefaultProps = {
+    props: {
+        ...props,
         // Legacy below
         MuiCard: {
             elevation: 0,
-        }, MuiTooltip: {
+        },
+        MuiTooltip: {
             title: '',
             placement: 'right',
-        }, MuiPaper: {
+        },
+        MuiPaper: {
             elevation: 0,
-        }, MuiAppBar: {
+        },
+        MuiAppBar: {
             position: 'static',
-        }, MuiInputBase: {
+        },
+        MuiInputBase: {
             color: 'secondary',
-        }, MuiInputLabel: {
+        },
+        MuiInputLabel: {
             color: 'secondary',
-        } }),
+        },
+    },
 };
 
-var basePalette = {
+const basePalette = {
     /** Semantic Colors */
     primary: {
         light: '#DA777E',
@@ -1081,7 +1023,7 @@ var basePalette = {
         main: '#FFFFFF',
     },
 };
-var adminLightPalette = {
+const adminLightPalette = {
     type: 'light',
     /** Semantic Colors */
     secondary: {
@@ -1095,7 +1037,7 @@ var adminLightPalette = {
         dark: '#2E3042',
     },
 };
-var adminDarkPalette = {
+const adminDarkPalette = {
     type: 'dark',
     /** Semantic Colors */
     secondary: {
@@ -1108,7 +1050,7 @@ var adminDarkPalette = {
         dark: '#333333',
     },
 };
-var dataVizPalette = {
+const dataVizPalette = {
     data: {
         blue: {
             light: '#A5BBFF',
@@ -1143,7 +1085,7 @@ var dataVizPalette = {
     },
 };
 
-var overrides = {
+const overrides = {
     MuiCssBaseline: {
         '@global': {
             '*::-webkit-scrollbar': {
@@ -1174,8 +1116,8 @@ var overrides = {
     },
 };
 
-var fonts = ['"Poppins"', '"sans-serif"'];
-var adminThemeTypography = {
+const fonts = ['"Poppins"', '"sans-serif"'];
+const adminThemeTypography = {
     htmlFontSize: 16,
     fontFamily: fonts.join(', '),
     h1: {
@@ -1237,11 +1179,41 @@ var adminThemeTypography = {
     },
 };
 
-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);
+const adminLightOptions = {
+    themeName: 'Admin Light',
+    palette: {
+        ...basePalette,
+        ...adminLightPalette,
+        ...dataVizPalette,
+    },
+    breakpoints: adminThemeBreakpoints,
+    typography: adminThemeTypography,
+    overrides: overrides,
+    /** Legacy Properties. Avoid new usage. */
+    ...adminLightPlaceholder,
+    ...adminThemeZIndex,
+    ...adminThemeStatus,
+    ...adminThemeDefaultProps,
+};
+const 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);
+const adminDarkOptions = {
+    themeName: 'Admin Dark',
+    palette: {
+        ...basePalette,
+        ...adminDarkPalette,
+        ...dataVizPalette,
+    },
+    breakpoints: adminThemeBreakpoints,
+    typography: adminThemeTypography,
+    overrides: overrides,
+    /** Legacy Properties. Avoid new usage. */
+    ...adminDarkPlaceholder,
+    ...adminThemeZIndex,
+    ...adminThemeStatus,
+    ...adminThemeDefaultProps,
+};
+const adminDark = core.createTheme(adminDarkOptions);
 
 Object.defineProperty(exports, "Dialog", {
     enumerable: true,