@popmenu/admin-ui 0.10.0 → 0.11.1

package/build/index.es.js

@@ -1,7 +1,8 @@
-import React, { forwardRef, useState, useRef, useEffect, createContext, useContext } from 'react';
-import { Link, IconButton as IconButton$1, Alert as Alert$1, Icon, Button as Button$1, Dialog, Card, CardContent, Box, CardActions, Typography, ButtonGroup as ButtonGroup$1, NewIcon, CardActionArea } from '@popmenu/common-ui';
+import * as React from 'react';
+import React__default, { forwardRef, createContext, useState, useContext } from 'react';
+import { Link, IconButton, Icon, Alert as Alert$1, Button as Button$1, Dialog, Card, CardContent, Box, CardActions, Typography, ButtonGroup as ButtonGroup$1, CardActionArea } from '@popmenu/common-ui';
 import { makeStyles, useTheme, lighten } from '@material-ui/core/styles';
-import { makeStyles as makeStyles$1, IconButton as IconButton$2 } from '@material-ui/core';
+import { makeStyles as makeStyles$1 } from '@material-ui/core';
 import MuiAlertTitle from '@material-ui/lab/AlertTitle';
 import Box$1 from '@material-ui/core/Box';
 import Dialog$1 from '@material-ui/core/Dialog';
@@ -94,8 +95,119 @@ function __spreadArray(to, from, pack) {
     return to.concat(ar || from);
 }
 
+var _path$4n, _path2$1p;
+
+function _extends$4E() { _extends$4E = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4E.apply(this, arguments); }
+
+function SvgCheckCircle(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$4E({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$4n || (_path$4n = /*#__PURE__*/React.createElement("path", {
+    d: "M14.667 7.387V8a6.666 6.666 0 11-3.954-6.093"
+  })), _path2$1p || (_path2$1p = /*#__PURE__*/React.createElement("path", {
+    d: "M14.667 2.667L8 9.34l-2-2"
+  })));
+}
+
+var _path$4k;
+
+function _extends$4B() { _extends$4B = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4B.apply(this, arguments); }
+
+function SvgX(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$4B({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$4k || (_path$4k = /*#__PURE__*/React.createElement("path", {
+    d: "M12 4l-8 8m0-8l8 8"
+  })));
+}
+
+var _path$3$;
+
+function _extends$4g() { _extends$4g = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4g.apply(this, arguments); }
+
+function SvgInfo(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$4g({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$3$ || (_path$3$ = /*#__PURE__*/React.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.333a6.667 6.667 0 000 13.334zm0-4V8m0-2.667h.007"
+  })));
+}
+
+var _path$3a;
+
+function _extends$3q() { _extends$3q = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3q.apply(this, arguments); }
+
+function SvgError(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3q({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$3a || (_path$3a = /*#__PURE__*/React.createElement("path", {
+    d: "M5.24 1.333h5.52l3.907 3.907v5.52l-3.907 3.907H5.24L1.333 10.76V5.24L5.24 1.333zm2.76 4V8m0 2.667h.008"
+  })));
+}
+
+var _path$39;
+
+function _extends$3p() { _extends$3p = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3p.apply(this, arguments); }
+
+function SvgWarning(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3p({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$39 || (_path$39 = /*#__PURE__*/React.createElement("path", {
+    d: "M6.86 2.573L1.213 12a1.333 1.333 0 001.14 2h11.294a1.334 1.334 0 001.14-2L9.14 2.573a1.333 1.333 0 00-2.28 0v0zM8 6v2.667m0 2.666h.007"
+  })));
+}
+
+var _path$S;
+
+function _extends$10() { _extends$10 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$10.apply(this, arguments); }
+
+function SvgCircle(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$10({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$S || (_path$S = /*#__PURE__*/React.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.333a6.667 6.667 0 000 13.334z"
+  })));
+}
+
 var useAlertStyles = makeStyles(function (theme) { return ({
     root: {
+        alignItems: 'center',
         width: function (_a) {
             var fullWidth = _a.fullWidth;
             return (fullWidth ? '100%' : 'unset');
@@ -107,14 +219,21 @@ var useAlertStyles = makeStyles(function (theme) { return ({
     },
 }); });
 
+var severityIcons$1 = {
+    info: SvgInfo,
+    error: SvgError,
+    warning: SvgWarning,
+    success: SvgCheckCircle,
+};
 var Alert = 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 = __rest(props, ["children", "link", "severity", "variant", "onClose"]);
     var classes = useAlertStyles(props);
     var validLink = link && link.href && link.text && { href: link.href, children: link.text };
-    var Action = (React.createElement(React.Fragment, null,
-        validLink && React.createElement(Link, __assign({}, validLink)),
-        React.createElement(IconButton$1, { onClick: onClose, icon: "cancel" })));
-    return (React.createElement(Alert$1, __assign({ ref: ref, classes: classes, icon: React.createElement(Icon, { size: "medium", name: severity }), action: Action, variant: variant, severity: severity }, muiProps), children));
+    var Action = (React__default.createElement(React__default.Fragment, null,
+        validLink && React__default.createElement(Link, __assign({}, validLink)),
+        React__default.createElement(IconButton, { onClick: onClose },
+            React__default.createElement(Icon, { icon: SvgX }))));
+    return (React__default.createElement(Alert$1, __assign({ ref: ref, classes: classes, icon: React__default.createElement(Icon, { icon: severityIcons$1[severity] }), action: Action, variant: variant, severity: severity }, muiProps), children));
 });
 Alert.displayName = 'Alert';
 
@@ -150,7 +269,7 @@ var getColorHover = function (palette, props) {
     }
     return color;
 };
-var getBackground$1 = function (palette, props) {
+var getBackground = function (palette, props) {
     var backgroundColor = 'inherit';
     if (['info', 'success', 'warning', 'error'].includes(props.variant)) {
         backgroundColor = palette[props.variant].main;
@@ -167,7 +286,7 @@ var getBackground$1 = function (palette, props) {
     }
     return backgroundColor;
 };
-var getBackgroundHover$1 = function (palette, props) {
+var getBackgroundHover = function (palette, props) {
     var backgroundHoverColor = 'inherit';
     if (['primary', 'info', 'success', 'warning', 'error'].includes(props.variant)) {
         backgroundHoverColor = palette[props.variant].dark;
@@ -194,13 +313,13 @@ var useButtonStyles = makeStyles$1(function (_a) {
         root: function (props) { return ({
             minWidth: 'unset',
             color: getColor(palette, props),
-            background: getBackground$1(palette, props),
-            backgroundColor: props.variant === 'primary' ? palette.primary.dark : getBackground$1(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$1(palette, props),
+                background: getBackgroundHover(palette, props),
             },
         }); },
         disabled: {
@@ -278,7 +397,7 @@ var Button = forwardRef(function (props, ref) {
     var classes = useButtonStyles(props);
     var derivedProps = deriveButtonProps(props);
     var mergedProps = __assign(__assign({}, derivedProps), commonProps);
-    return (React.createElement(Button$1, __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride), disableElevation: true }, mergedProps), children));
+    return (React__default.createElement(Button$1, __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride), disableElevation: true }, mergedProps), children));
 });
 Button.defaultProps = {
     textTransform: 'uppercase',
@@ -312,33 +431,40 @@ var useAlertDialogStyles = makeStyles(function (theme) { return ({
     },
 }); });
 
+var severityIcons = {
+    info: SvgInfo,
+    error: SvgError,
+    warning: SvgWarning,
+    success: SvgCheckCircle,
+};
 var AlertDialog = forwardRef(function (props, ref) {
     var children = props.children, labelId = props.labelId, descriptionId = props.descriptionId, _a = props.severity, severity = _a === void 0 ? 'info' : _a, _b = props.proceedButtonText, proceedButtonText = _b === void 0 ? 'proceed' : _b, onClose = props.onClose, onCancel = props.onCancel, onProceed = props.onProceed, DialogProps = __rest(props, ["children", "labelId", "descriptionId", "severity", "proceedButtonText", "onClose", "onCancel", "onProceed"]);
     var classes = useAlertDialogStyles(props);
-    return (React.createElement(Dialog, __assign({ ref: ref, classes: { paper: classes.root } }, DialogProps),
-        React.createElement(Card, { classes: { root: classes.card }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": labelId, "aria-describedby": descriptionId },
-            React.createElement(IconButton$1, { className: classes.cancelIcon, icon: "cancel", size: "small", onClick: onClose }),
-            React.createElement(CardContent, null,
-                React.createElement(Box, { display: "flex" },
-                    React.createElement(Icon, { className: classes.icon, color: severity, name: severity }),
-                    React.createElement(Box, { pl: 2, pr: 3 }, children))),
-            React.createElement(CardActions, { classes: { root: classes.cardActions } },
-                React.createElement(Button, { onClick: onCancel, variant: "ghost" }, "Cancel"),
-                React.createElement(Button, { onClick: onProceed, variant: severity }, proceedButtonText)))));
+    return (React__default.createElement(Dialog, __assign({ ref: ref, classes: { paper: classes.root } }, DialogProps),
+        React__default.createElement(Card, { classes: { root: classes.card }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": labelId, "aria-describedby": descriptionId },
+            React__default.createElement(IconButton, { className: classes.cancelIcon, onClick: onClose },
+                React__default.createElement(Icon, { icon: SvgX })),
+            React__default.createElement(CardContent, null,
+                React__default.createElement(Box, { display: "flex" },
+                    React__default.createElement(Icon, { className: classes.icon, color: severity, icon: severityIcons[severity] }),
+                    React__default.createElement(Box, { pl: 2, pr: 3 }, children))),
+            React__default.createElement(CardActions, { classes: { root: classes.cardActions } },
+                React__default.createElement(Button, { onClick: onCancel, variant: "ghost" }, "Cancel"),
+                React__default.createElement(Button, { onClick: onProceed, variant: "ghost" }, proceedButtonText)))));
 });
 AlertDialog.displayName = 'AlertDialog';
 
 var AlertDialogHeader = function (props) {
     var children = props.children, muiProps = __rest(props, ["children"]);
-    return (React.createElement(Box, __assign({ display: "flex", height: 40, alignItems: "center" }, muiProps),
-        React.createElement(Typography, { variant: "h6" }, children)));
+    return (React__default.createElement(Box, __assign({ display: "flex", height: 40, alignItems: "center" }, muiProps),
+        React__default.createElement(Typography, { variant: "h6" }, children)));
 };
 AlertDialogHeader.displayName = 'AlertDialogHeader';
 
 var AlertTitle = function (props) {
     var children = props.children, muiProps = __rest(props, ["children"]);
-    return (React.createElement(MuiAlertTitle, __assign({}, muiProps),
-        React.createElement(Typography, { variant: "h6" },
+    return (React__default.createElement(MuiAlertTitle, __assign({}, muiProps),
+        React__default.createElement(Typography, { variant: "h6" },
             " ",
             children,
             " ")));
@@ -373,140 +499,55 @@ var ButtonGroup = forwardRef(function (props, ref) {
     var classes = useButtonGroupStyles(props);
     var derivedProps = deriveButtonProps({ variant: variant });
     var spacing = useTheme().spacing;
-    var childrenWithProps = React.Children.map(children, function (child, i) {
+    var childrenWithProps = React__default.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 isLast = i === React__default.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)) {
+        if (!React__default.isValidElement(child)) {
             return null;
         }
-        return React.cloneElement(child, __assign(__assign({ variant: variant }, (isFirst && firstStyles)), (isLast && lastStyles)));
+        return React__default.cloneElement(child, __assign(__assign({ variant: variant }, (isFirst && firstStyles)), (isLast && lastStyles)));
     });
-    return (React.createElement(ButtonGroup$1, __assign({ ref: ref, classes: classes }, derivedProps, muiProps), childrenWithProps));
+    return (React__default.createElement(ButtonGroup$1, __assign({ ref: ref, classes: classes }, derivedProps, muiProps), childrenWithProps));
 });
 ButtonGroup.displayName = 'ButtonGroup';
 
-var useDimensions = function () {
-    var _a = useState(undefined), width = _a[0], setWidth = _a[1];
-    var _b = useState(undefined), height = _b[0], setHeight = _b[1];
-    var ref = useRef(null);
-    useEffect(function () {
-        var observer = new ResizeObserver(function (entries) {
-            setWidth(entries[0].borderBoxSize[0].inlineSize);
-            setHeight(entries[0].contentRect.height);
-        });
-        var node = ref.current;
-        observer.observe(node);
-        return function () {
-            observer.unobserve(node);
-        };
-    });
-    return { height: height, ref: ref, width: width };
-};
-
 var useFeatureIntroStyles = makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
-            display: 'grid',
-            gridTemplateColumns: function (_a) {
-                var columnWidth = _a.columnWidth;
-                return "repeat(auto-fit, minmax(" + columnWidth + "px, 1fr))";
-            },
-            rowGap: spacing(2),
-            columnGap: spacing(2),
-            padding: function (_a) {
-                var singleColumn = _a.singleColumn;
-                return (singleColumn ? spacing(0, 4) : spacing(8));
-            },
-            alignItems: 'center',
-            justifyItems: 'center',
-        },
-        info: {
-            gridColumn: 1,
-            display: 'grid',
-            alignContent: 'center',
-            justifyItems: function (_a) {
-                var singleColumn = _a.singleColumn;
-                return (singleColumn ? 'center' : 'start');
-            },
-            gridTemplateRows: "auto " + spacing(2) + "px auto " + spacing(6) + "px auto",
-        },
-        body: {
-            gridRowStart: 3,
-            textAlign: function (_a) {
-                var singleColumn = _a.singleColumn;
-                return (singleColumn ? 'center' : 'start');
-            },
+            gap: spacing(3),
         },
         actions: {
-            display: 'inline-grid',
-            width: 'fit-content',
-            paddingBlockEnd: function (_a) {
-                var singleColumn = _a.singleColumn;
-                return (singleColumn ? spacing(4) : 0);
-            },
-            gridTemplateColumns: 'auto',
-            gridTemplateRows: "auto " + spacing(3) + "px auto",
-            gridRowStart: 5,
-        },
-        secondaryAction: {
-            gridRowStart: 3,
+            gap: spacing(3),
         },
         image: {
-            gridRow: function (_a) {
-                var singleColumn = _a.singleColumn;
-                return (singleColumn ? 1 : 'unset');
-            },
-            paddingBlockStart: function (_a) {
-                var singleColumn = _a.singleColumn;
-                return (singleColumn ? spacing(4) : 0);
-            },
-            maxHeight: 450,
-            maxWidth: 450,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            overflow: 'hidden',
-            '& img': {
-                width: '100%',
-                height: function (_a) {
-                    var singleColumn = _a.singleColumn;
-                    return (singleColumn ? 300 : 450);
-                },
-                objectFit: 'contain',
-            },
+            width: '100%',
+            objectFit: 'contain',
         },
     });
 });
 
-var useStyleProps = function (props, width) {
-    var columnWidth = 250;
-    // column widths*2 + column gap + 2XL-spacing*2
-    var breakpoint = columnWidth * 2 + 16 + 64 * 2;
-    var singleColumn = width ? width < breakpoint : true;
-    return __assign(__assign({}, props), { columnWidth: columnWidth, singleColumn: singleColumn, width: width });
-};
 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 = __rest(primaryAction, ["label"]);
-    var secondaryActionLabel = secondaryAction.label, secondaryActionProps = __rest(secondaryAction, ["label"]);
-    var _a = useDimensions(), width = _a.width, ref = _a.ref;
-    var styleProps = useStyleProps(props, width);
-    var classes = useFeatureIntroStyles(styleProps);
+    var _a = secondaryAction || {}, secondaryActionLabel = _a.label, secondaryActionProps = __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 (
     /** Needed to use extra ts syntax to trick Box into accepting ref, issue to be fixed in MUI v5 */
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-    React.createElement(Box, __assign({}, { ref: ref }, { className: classes.root }),
-        React.createElement(Box, { className: classes.info },
-            React.createElement(Typography, { variant: "h4" }, title),
-            React.createElement(Box, { className: classes.body }, body),
-            React.createElement(Box, { className: classes.actions },
-                primaryAction && React.createElement(Button, __assign({}, primaryActionProps), primaryActionLabel),
-                secondaryAction && (React.createElement(Button, __assign({ className: classes.secondaryAction, variant: "tertiary" }, secondaryActionProps), secondaryActionLabel)))),
-        React.createElement(Box, { className: classes.image }, validImage && React.createElement("img", { src: image.src, alt: image.alt }))));
+    React__default.createElement(Box, { className: classes.root, padding: { xs: 4, sm: 8 }, flexDirection: { xs: 'column-reverse', sm: 'row' }, display: "flex", justifyContent: "center", alignItems: "center" },
+        React__default.createElement(Box, { display: "flex", flexDirection: "column", width: { xs: '100%', sm: '50%' }, alignItems: { xs: 'center', sm: 'unset' } },
+            React__default.createElement(Box, { textAlign: { xs: 'center', sm: 'start' }, marginBottom: 2 },
+                React__default.createElement(Typography, { align: "inherit", variant: "h4" }, title)),
+            React__default.createElement(Box, { textAlign: { xs: 'center', sm: 'start' }, marginBottom: 6 }, body),
+            React__default.createElement(Box, { className: classes.actions, display: "flex", flexDirection: "column", width: "fit-content" },
+                primaryAction && React__default.createElement(Button, __assign({}, primaryActionProps), primaryActionLabel),
+                secondaryAction && (React__default.createElement(Button, __assign({ variant: "tertiary" }, secondaryActionProps), secondaryActionLabel)))),
+        React__default.createElement(Box, { display: "flex", width: { xs: '100%', sm: '50%' }, alignItems: "center", justifyContent: "center" },
+            React__default.createElement(Box, { display: "flex", maxWidth: 450, maxHeight: 450 }, validImage && React__default.createElement("img", { src: image.src, alt: image.alt, className: classes.image })))));
 };
 FeatureIntro.displayName = 'FeatureIntro';
 
@@ -561,7 +602,7 @@ var augmentButtonProps = function (internalProps, externalProps, setStepCursor,
 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, __assign({ variant: "tertiary", disabled: stepCursor === 1 }, augmentedPreviousButtonProps), previousButtonText || 'previous')) : null;
+    return displayPreviousButton ? (React__default.createElement(Button, __assign({ variant: "tertiary", disabled: stepCursor === 1 }, augmentedPreviousButtonProps), previousButtonText || 'previous')) : null;
 };
 
 var useStyles = makeStyles({
@@ -572,7 +613,7 @@ var useStyles = makeStyles({
 var StepperActionsStatusText = function (props) {
     var statusText = props.statusText;
     var classes = useStyles(props);
-    return statusText ? (React.createElement(Typography, { classes: { root: classes.root }, variant: "body2" }, statusText)) : null;
+    return statusText ? (React__default.createElement(Typography, { classes: { root: classes.root }, variant: "body2" }, statusText)) : null;
 };
 
 var StepperActionsNextButton = function (props) {
@@ -582,27 +623,27 @@ var StepperActionsNextButton = function (props) {
     var finishText = finishButtonText || 'finish';
     var nextText = nextButtonText || 'next';
     var buttonText = finalStep ? finishText : nextText;
-    return React.createElement(Button, __assign({}, augmentedNextButtonProps), buttonText);
+    return React__default.createElement(Button, __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, __assign({ variant: "ghost" }, augmentedCancelButtonProps), cancelButtonText || 'cancel')) : null;
+    return displayCancelButton ? (React__default.createElement(Button, __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, 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(Box, { className: classes.root },
-        React.createElement(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(Box, { className: classes.inlineEndActions },
+    return (React__default.createElement(Box, { className: classes.root },
+        React__default.createElement(Box, { className: classes.inlineStartActions },
+            React__default.createElement(StepperActionsPreviousButton, { displayPreviousButton: displayPreviousButton, previousButtonText: previousButtonText, handlePreviousClick: handlePreviousClick, previousButtonProps: previousButtonProps, stepCursor: stepCursor, setStepCursor: setStepCursor }),
+            React__default.createElement(StepperActionsStatusText, { statusText: statusText })),
+        React__default.createElement(Box, { className: classes.inlineEndActions },
             actions &&
-                actions.map(function (action, i) { return (React.createElement(Button, { key: "custom-action-" + stepCursor + "-" + i, variant: "ghost", onClick: action.onClick }, 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 }))));
+                actions.map(function (action, i) { return (React__default.createElement(Button, __assign({ key: "custom-action-" + stepCursor + "-" + i, variant: "ghost", onClick: action.onClick }, action.props), action.text)); }),
+            React__default.createElement(StepperActionsCancelButton, { setStepCursor: setStepCursor, stepCursor: stepCursor, cancelButtonText: cancelButtonText, cancelButtonProps: cancelButtonProps, handleCancelClick: handleCancelClick, displayCancelButton: displayCancelButton }),
+            React__default.createElement(StepperActionsNextButton, { handleNextClick: handleNextClick, nextButtonProps: nextButtonProps, setStepCursor: setStepCursor, stepCursor: stepCursor, stepCount: stepCount, finishButtonText: finishButtonText, nextButtonText: nextButtonText }))));
 };
 
 var getBorderRadius = function (theme, props) {
@@ -639,8 +680,8 @@ var useFullScreenStepperProgressStyles = makeStyles(function (theme) { return ({
 
 var FullScreenStepperProgress = function (props) {
     var classes = useFullScreenStepperProgressStyles(props);
-    return (React.createElement(Box, { className: classes.track },
-        React.createElement(Box, { className: classes.progress })));
+    return (React__default.createElement(Box, { className: classes.track },
+        React__default.createElement(Box, { className: classes.progress })));
 };
 
 var useFullScreenStepperHeaderStyles = makeStyles(function (_a) {
@@ -668,14 +709,15 @@ var useFullScreenStepperHeaderStyles = makeStyles(function (_a) {
 var FullScreenStepperHeader = function (props) {
     var stepCount = props.stepCount, stepCursor = props.stepCursor, step = props.step, onClose = props.onClose;
     var classes = useFullScreenStepperHeaderStyles(props);
-    return (React.createElement(Box, { className: classes.root },
-        React.createElement(Typography, { variant: "h6" }, step.title),
-        React.createElement(Typography, null,
+    return (React__default.createElement(Box, { className: classes.root },
+        React__default.createElement(Typography, { variant: "h6" }, step.title),
+        React__default.createElement(Typography, null,
             stepCursor,
             " of ",
             stepCount),
-        React.createElement(IconButton$1, { className: classes.closeButton, icon: "cancel", onClick: onClose }),
-        React.createElement(FullScreenStepperProgress, { stepCount: stepCount, stepCursor: stepCursor })));
+        React__default.createElement(IconButton, { className: classes.closeButton, onClick: onClose },
+            React__default.createElement(Icon, { icon: SvgX })),
+        React__default.createElement(FullScreenStepperProgress, { stepCount: stepCount, stepCursor: stepCursor })));
 };
 
 var FullScreenStepperContext = createContext({});
@@ -760,71 +802,19 @@ var FullScreenStepper = function (props) {
             }
         });
     }); };
-    var content = React.Children.toArray(children).find(function (child) { return React.isValidElement(child) && child.props.name === step.name; });
-    return (React.createElement(Dialog$1, __assign({ fullScreen: true }, DialogProps),
-        React.createElement(FullScreenStepperContext.Provider, { value: mergedContext },
-            React.createElement(Box$1, { display: "flex", flexDirection: "column", flexGrow: 1 },
-                React.createElement(FullScreenStepperHeader, { stepCount: stepCount, stepCursor: stepCursor, onClose: handleClose, step: step }),
-                React.createElement(Box$1, { display: "flex", mx: 6, flexGrow: 1, alignItems: "center", flexDirection: "column" }, content),
-                React.createElement(FullScreenStepperActions, __assign({}, step.actionBar, { displayCancelButton: displayCancelButton, displayPreviousButton: displayPreviousButton, stepCount: stepCount, stepCursor: stepCursor, setStepCursor: setStepCursor, handleCancelClick: handleCancelClick, handleNextClick: handleNextClick, handlePreviousClick: handlePreviousClick }))))));
+    var content = React__default.Children.toArray(children).find(function (child) { return React__default.isValidElement(child) && child.props.name === step.name; });
+    return (React__default.createElement(Dialog$1, __assign({ fullScreen: true }, DialogProps),
+        React__default.createElement(FullScreenStepperContext.Provider, { value: mergedContext },
+            React__default.createElement(Box$1, { display: "flex", flexDirection: "column", flexGrow: 1 },
+                React__default.createElement(FullScreenStepperHeader, { stepCount: stepCount, stepCursor: stepCursor, onClose: handleClose, step: step }),
+                React__default.createElement(Box$1, { display: "flex", mx: 6, flexGrow: 1, alignItems: "center", flexDirection: "column" }, content),
+                React__default.createElement(FullScreenStepperActions, __assign({}, step.actionBar, { 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 = __rest(props, ["name"]);
-    return (React.createElement(Box, __assign({ py: 8 }, boxProps), props.children));
-};
-
-var getBackground = function (palette, props) {
-    var backgrounds = {
-        // @ts-expect-error gradient colors are included in the extended palette.
-        primary: "linear-gradient(97.36deg, " + palette.primary.gradientStart + " 17.03%, " + palette.primary.gradientEnd + " 72.96%)",
-        secondary: 'white',
-        tertiary: palette.secondary.main,
-    };
-    return backgrounds[props.variant || 'primary'];
-};
-var getBackgroundHover = function (palette, props) {
-    var backgrounds = {
-        primary: palette.primary.dark,
-        secondary: palette.secondary.main,
-        tertiary: palette.secondary.light,
-    };
-    return backgrounds[props.variant || 'primary'];
-};
-var useIconButtonStyles = makeStyles$1(function (_a) {
-    var palette = _a.palette, spacing = _a.spacing;
-    return ({
-        root: {
-            background: function (props) { return getBackground(palette, props); },
-            backgroundColor: function (props) { return (props.variant === 'primary' ? palette.primary.dark : getBackground(palette, props)); },
-            border: function (props) { return (props.variant === 'secondary' ? "1px solid " + palette.secondary.main : 'none'); },
-            color: function (props) { return (props.variant === 'secondary' ? palette.secondary.main : 'white'); },
-            transition: 'all 200ms ease-in-out',
-            '&:hover': {
-                background: function (props) { return getBackgroundHover(palette, props); },
-                color: 'white',
-            },
-            fontSize: spacing(2),
-        },
-        disabled: {
-            '&$root': {
-                background: palette.action.disabled,
-                border: 'none',
-            },
-        },
-    });
-});
-
-var IconButton = forwardRef(function (props, ref) {
-    props.children; var icon = props.icon, muiProps = __rest(props, ["children", "icon"]);
-    var classes = useIconButtonStyles(props);
-    return (React.createElement(IconButton$2, __assign({ ref: ref, classes: classes }, muiProps),
-        React.createElement(NewIcon, { icon: icon })));
-});
-IconButton.displayName = 'IconButton';
-IconButton.defaultProps = {
-    variant: 'primary',
+    return (React__default.createElement(Box, __assign({ py: 8 }, boxProps), props.children));
 };
 
 var useSelectableCardStyles = makeStyles(function (theme) {
@@ -877,10 +867,10 @@ var SelectableCard = function (props) {
     var handleClick = function () {
         onClick(value);
     };
-    return (React.createElement(Card, __assign({ classes: { root: classes.root } }, muiProps),
-        React.createElement(CardActionArea, { onClick: handleClick, classes: { focusHighlight: classes.focusHighlight }, role: "checkbox", "aria-checked": selected, "aria-labelledby": labelId },
-            React.createElement(Icon, { className: classes.icon, name: selected ? 'check-circle' : 'unchecked', size: "medium" }),
-            React.createElement(CardContent, { classes: { root: classes.cardContent } }, children))));
+    return (React__default.createElement(Card, __assign({ classes: { root: classes.root } }, muiProps),
+        React__default.createElement(CardActionArea, { onClick: handleClick, classes: { focusHighlight: classes.focusHighlight }, role: "checkbox", "aria-checked": selected, "aria-labelledby": labelId },
+            React__default.createElement(Icon, { className: classes.icon, icon: selected ? SvgCheckCircle : SvgCircle, size: "medium" }),
+            React__default.createElement(CardContent, { classes: { root: classes.cardContent } }, children))));
 };
 SelectableCard.displayName = 'SelectableCard';
 
@@ -899,8 +889,8 @@ var useToastStyles = makeStyles(function (theme) { return ({
 var Toast = function (props) {
     var children = props.children, AlertProps = props.AlertProps, severity = props.severity, muiProps = __rest(props, ["children", "AlertProps", "severity"]);
     var classes = useToastStyles(props);
-    return (React.createElement(MuiSnackbar, __assign({ ClickAwayListenerProps: { mouseEvent: false } }, muiProps),
-        React.createElement(Alert, __assign({ className: classes.root, action: null, severity: severity }, AlertProps), children)));
+    return (React__default.createElement(MuiSnackbar, __assign({ ClickAwayListenerProps: { mouseEvent: false } }, muiProps),
+        React__default.createElement(Alert, __assign({ className: classes.root, action: null, severity: severity }, AlertProps), children)));
 };
 Toast.defaultProps = {
     AlertProps: {},
@@ -955,43 +945,36 @@ var useSelectableCard = function (config) {
     return { card: { onClick: onClick, selection: selection }, selection: selection, setSelection: setSelection };
 };
 
-var baseFonts = ['"IBM Plex Sans"', '"sans-serif"'];
-var headingFonts = __spreadArray(['"IBM Plex Serif"'], baseFonts).join(', ');
+var fonts = ['"Poppins"', '"sans-serif"'];
 var adminThemeTypography = {
     htmlFontSize: 16,
-    fontFamily: baseFonts.join(', '),
+    fontFamily: fonts.join(', '),
     h1: {
-        fontFamily: headingFonts,
         fontWeight: 400,
         fontSize: '6rem',
         lineHeight: '7.75rem',
     },
     h2: {
-        fontFamily: headingFonts,
         fontWeight: 400,
         fontSize: '3.75rem',
         lineHeight: '4.875rem',
     },
     h3: {
-        fontFamily: headingFonts,
         fontWeight: 400,
         fontSize: '3rem',
         lineHeight: '3.875rem',
     },
     h4: {
-        fontFamily: headingFonts,
         fontWeight: 400,
         fontSize: '2.125rem',
         lineHeight: '2.75rem',
     },
     h5: {
-        fontFamily: headingFonts,
         fontWeight: 700,
         fontSize: '1.5rem',
         lineHeight: '2rem',
     },
     h6: {
-        fontFamily: headingFonts,
         fontWeight: 700,
         fontSize: '1.25rem',
         lineHeight: '1.625rem',
@@ -1006,6 +989,12 @@ var adminThemeTypography = {
         fontSize: '0.875rem',
         lineHeight: '1.25rem',
     },
+    button: {
+        fontWeight: 500,
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
+        textTransform: 'capitalize',
+    },
 };
 
 var adminThemeBreakpoints = {
@@ -1141,6 +1130,19 @@ var adminThemeZIndex = {
  */
 var adminThemeDefaultProps = {
     props: {
+        MuiCard: {
+            elevation: 0,
+        },
+        MuiTooltip: {
+            title: '',
+            placement: 'right',
+        },
+        MuiPaper: {
+            elevation: 0,
+        },
+        MuiAppBar: {
+            position: 'static',
+        },
         MuiInputBase: {
             color: 'secondary',
         },
@@ -1150,11 +1152,11 @@ var adminThemeDefaultProps = {
     },
 };
 
-var options$1 = __assign(__assign(__assign(__assign({ themeName: 'Admin Light', palette: __assign(__assign({}, basePalette), adminLightPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography }, adminLightPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps);
-var adminLight = createTheme(options$1);
+var adminLightOptions = __assign(__assign(__assign(__assign({ themeName: 'Admin Light', palette: __assign(__assign({}, basePalette), adminLightPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography }, adminLightPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps);
+var adminLight = createTheme(adminLightOptions);
 
-var options = __assign(__assign(__assign(__assign({ themeName: 'Admin Dark', palette: __assign(__assign({}, basePalette), adminDarkPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography }, adminDarkPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps);
-var adminDark = createTheme(options);
+var adminDarkOptions = __assign(__assign(__assign(__assign({ themeName: 'Admin Dark', palette: __assign(__assign({}, basePalette), adminDarkPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography }, adminDarkPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps);
+var adminDark = createTheme(adminDarkOptions);
 
-export { Alert, AlertDialog, AlertDialogHeader, AlertTitle, Button, ButtonGroup, FeatureIntro, FullScreenStepper, FullScreenStepperContent, FullScreenStepperContext, IconButton, SelectableCard, Toast, adminDark, adminLight, useFullScreenStepperContext, useSelectableCard };
+export { Alert, AlertDialog, AlertDialogHeader, AlertTitle, Button, ButtonGroup, FeatureIntro, FullScreenStepper, FullScreenStepperContent, FullScreenStepperContext, SelectableCard, Toast, adminDark, adminDarkOptions, adminLight, adminLightOptions, useFullScreenStepperContext, useSelectableCard };
 //# sourceMappingURL=index.es.js.map