@popmenu/common-ui 0.127.0 → 0.127.1

package/build/cjs/index.js

@@ -2,16 +2,13 @@
 
 var core = require('@material-ui/core');
 var lab = require('@material-ui/lab');
-var tslib = require('tslib');
 var webIcons = require('@popmenu/web-icons');
 var React = require('react');
 var classNames = require('classnames');
 
-var useIconStyles = core.makeStyles(function (_a) {
-    var spacing = _a.spacing, palette = _a.palette;
-    var getFontSize = function (_a) {
-        var size = _a.size;
-        var sizes = {
+const useIconStyles = core.makeStyles(({ spacing, palette }) => {
+    const getFontSize = ({ size }) => {
+        const sizes = {
             inherit: 'inherit',
             small: spacing(1.5),
             medium: spacing(2),
@@ -22,12 +19,12 @@ var useIconStyles = core.makeStyles(function (_a) {
             return 'inherit';
         return sizes[size];
     };
-    var getColor = function (props) {
-        var semanticColors = ['primary', 'secondary', 'info', 'success', 'warning', 'error'];
-        var value = 'inherit';
+    const getColor = (props) => {
+        const semanticColors = ['primary', 'secondary', 'info', 'success', 'warning', 'error'];
+        let value = 'inherit';
         if (props.color) {
             if (semanticColors.includes(props.color.split('.')[0])) {
-                var _a = props.color.split('.'), color = _a[0], _b = _a[1], variant = _b === void 0 ? 'main' : _b;
+                const [color, variant = 'main'] = props.color.split('.');
                 // @ts-expect-error - todo.
                 value = palette[color][variant];
             }
@@ -48,20 +45,25 @@ var useIconStyles = core.makeStyles(function (_a) {
     };
 });
 
-var iconStaticClassName = 'pop-icon';
-var Icon = function (_a) {
-    var className = _a.className, _b = _a.color, color = _b === void 0 ? 'inherit' : _b, icon = _a.icon, _c = _a.size, size = _c === void 0 ? 'inherit' : _c, restProps = tslib.__rest(_a, ["className", "color", "icon", "size"]);
-    var hasAccessibleAttr = Boolean(restProps['aria-describedby'] || restProps['aria-label']);
+const iconStaticClassName = 'pop-icon';
+const Icon = ({ className, color = 'inherit', icon, size = 'inherit', ...restProps }) => {
+    const hasAccessibleAttr = Boolean(restProps['aria-describedby'] || restProps['aria-label']);
     if (!hasAccessibleAttr && restProps['aria-hidden'] === undefined) {
         restProps['aria-hidden'] = true;
     }
-    var classes = useIconStyles({ color: color, size: size });
-    var isValid = true;
+    const classes = useIconStyles({ color, size });
+    let isValid = true;
     if (!icon || (typeof icon === 'function' && icon({}) === undefined)) {
         isValid = false;
     }
     return isValid
-        ? React.createElement(icon, tslib.__assign({ className: classNames([classes.root, iconStaticClassName, className]), color: color, width: undefined, height: undefined }, restProps))
+        ? React.createElement(icon, {
+            className: classNames([classes.root, iconStaticClassName, className]),
+            color,
+            width: undefined,
+            height: undefined,
+            ...restProps,
+        })
         : null;
 };
 Icon.displayName = 'Icon';
@@ -72,29 +74,31 @@ var LoadingStatus;
     LoadingStatus["LOADED"] = "LOADED";
     LoadingStatus["PENDING"] = "PENDING";
 })(LoadingStatus || (LoadingStatus = {}));
-var useImgProps = function (avatarProps) {
-    var _a = React.useState(LoadingStatus.PENDING), loaded = _a[0], setLoaded = _a[1];
-    var imgProps = tslib.__assign(tslib.__assign({}, avatarProps.imgProps), { onLoad: function (event) {
-            var _a, _b;
+const useImgProps = (avatarProps) => {
+    const [loaded, setLoaded] = React.useState(LoadingStatus.PENDING);
+    const imgProps = {
+        ...avatarProps.imgProps,
+        onLoad: (event) => {
             setLoaded(LoadingStatus.LOADED);
-            (_b = (_a = avatarProps.imgProps) === null || _a === void 0 ? void 0 : _a.onLoad) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-        } });
-    return { imgProps: imgProps, loaded: loaded };
+            avatarProps.imgProps?.onLoad?.(event);
+        },
+    };
+    return { imgProps, loaded };
 };
 
-var getAvatarDimensions = function (theme, props) {
-    var factors = {
+const getAvatarDimensions = (theme, props) => {
+    const factors = {
         'extra-small': 3,
         small: 4,
         medium: 5,
         large: 6,
         'extra-large': 12.5,
     };
-    var sizeFactor = factors[props.size || 'medium'];
+    const sizeFactor = factors[props.size || 'medium'];
     return theme.spacing(sizeFactor);
 };
-var getAvatarFontSize = function (props) {
-    var fontSizes = {
+const getAvatarFontSize = (props) => {
+    const fontSizes = {
         'extra-small': '0.75rem',
         small: '1rem',
         medium: '1rem',
@@ -103,29 +107,29 @@ var getAvatarFontSize = function (props) {
     };
     return fontSizes[props.size];
 };
-var useAvatarStyles = core.makeStyles(function (theme) { return ({
-    root: function (props) { return ({
+const useAvatarStyles = core.makeStyles((theme) => ({
+    root: (props) => ({
         width: getAvatarDimensions(theme, props),
         height: getAvatarDimensions(theme, props),
         fontSize: getAvatarFontSize(props),
         backgroundColor: props.loaded === LoadingStatus.LOADED ? 'transparent' : props.background,
         color: theme.palette.getContrastText(props.background),
         objectFit: props.fit,
-    }); },
-    fallback: function (props) { return ({
+    }),
+    fallback: (props) => ({
         fontSize: getAvatarDimensions(theme, props),
         strokeWidth: 1,
-    }); },
-}); });
+    }),
+}));
 
-var Avatar = React.forwardRef(function (props, ref) {
-    var children = props.children, src = props.src, alt = props.alt, fallback = props.fallback, muiProps = tslib.__rest(props, ["children", "src", "alt", "fallback"]);
-    var _a = useImgProps(props), imgProps = _a.imgProps, loaded = _a.loaded;
-    var classes = useAvatarStyles(tslib.__assign(tslib.__assign({}, props), { loaded: loaded }));
-    var displayAltTextFallback = src && alt;
-    var displayNoFallback = fallback === 'none';
-    var displayCustomFallback = fallback !== 'none' && typeof fallback !== 'undefined';
-    var Fallback;
+const Avatar = React.forwardRef((props, ref) => {
+    const { children, src, alt, fallback, ...muiProps } = props;
+    const { imgProps, loaded } = useImgProps(props);
+    const classes = useAvatarStyles({ ...props, loaded });
+    const displayAltTextFallback = src && alt;
+    const displayNoFallback = fallback === 'none';
+    const displayCustomFallback = fallback !== 'none' && typeof fallback !== 'undefined';
+    let Fallback;
     if (displayAltTextFallback) {
         Fallback = null;
     }
@@ -138,7 +142,7 @@ var Avatar = React.forwardRef(function (props, ref) {
     else {
         Fallback = React.createElement(Icon, { icon: webIcons.User, className: classes.fallback });
     }
-    return (React.createElement(core.Avatar, tslib.__assign({ ref: ref, classes: { root: classes.root }, src: src, alt: alt }, muiProps, { imgProps: imgProps }), children || Fallback));
+    return (React.createElement(core.Avatar, { ref: ref, classes: { root: classes.root }, src: src, alt: alt, ...muiProps, imgProps: imgProps }, children || Fallback));
 });
 Avatar.defaultProps = {
     size: 'medium',
@@ -147,30 +151,29 @@ Avatar.defaultProps = {
 };
 Avatar.displayName = 'Avatar';
 
-var useBrowserSilhouetteStyles = core.makeStyles(function (theme) { return ({
+const useBrowserSilhouetteStyles = core.makeStyles((theme) => ({
     circle: {
         backgroundColor: theme.palette.grey[300],
         borderRadius: '50%',
         height: theme.spacing(0.65),
         width: theme.spacing(0.65),
-        margin: theme.spacing(1) + "px 0 " + theme.spacing(1) + "px " + theme.spacing(1) + "px",
+        margin: `${theme.spacing(1)}px 0 ${theme.spacing(1)}px ${theme.spacing(1)}px`,
     },
     container: {
-        border: "1px solid " + theme.palette.secondary.light,
+        border: `1px solid ${theme.palette.secondary.light}`,
         borderRadius: theme.spacing(0.5),
         flexGrow: 1,
     },
     titleBar: {
         display: 'flex',
         flexDirection: 'row',
-        borderBottom: "1px solid " + theme.palette.secondary.light,
+        borderBottom: `1px solid ${theme.palette.secondary.light}`,
         width: '100%',
     },
-}); });
+}));
 
-var BrowserSilhouette = function (_a) {
-    var children = _a.children;
-    var classes = useBrowserSilhouetteStyles();
+const BrowserSilhouette = ({ children }) => {
+    const classes = useBrowserSilhouetteStyles();
     return (React.createElement(core.Box, { display: "flex" },
         React.createElement("div", { className: classes.container },
             React.createElement("div", { className: classes.titleBar },
@@ -180,42 +183,40 @@ var BrowserSilhouette = function (_a) {
             children)));
 };
 
-var useButtonStyles = core.makeStyles(function () { return ({
+const useButtonStyles = core.makeStyles(() => ({
     root: {
         minWidth: 'unset',
     },
     label: {
-        textTransform: function (_a) {
-            var textTransform = _a.textTransform;
-            return textTransform;
-        },
+        textTransform: ({ textTransform }) => textTransform,
     },
-}); });
+}));
 
-var Button = function (props) {
-    props.textTransform; var loading = props.loading, classesOverride = props.classes, className = props.className, ButtonRef = props.ButtonRef, muiProps = tslib.__rest(props, ["textTransform", "loading", "classes", "className", "ButtonRef"]);
-    props.classes; var styleProps = tslib.__rest(props, ["classes"]);
-    var classes = useButtonStyles(styleProps);
-    var typography = core.useTheme().typography;
-    var loadingIndicator = {
+const Button = (props) => {
+    const { textTransform, loading, classes: classesOverride, className, ButtonRef, ...muiProps } = props;
+    const { classes: remove, ...styleProps } = props;
+    const classes = useButtonStyles(styleProps);
+    const { typography } = core.useTheme();
+    const loadingIndicator = {
         startIcon: React.createElement(core.CircularProgress, { color: "inherit", size: typography.button.fontSize }),
         disabled: true,
     };
-    return (React.createElement(core.Button, tslib.__assign({ ref: ButtonRef, classes: tslib.__assign(tslib.__assign({}, classes), classesOverride), className: classNames([className, 'pm-button']) }, muiProps, (loading && loadingIndicator))));
+    return (React.createElement(core.Button, { ref: ButtonRef, classes: { ...classes, ...classesOverride }, className: classNames([className, 'pm-button']), ...muiProps, ...(loading && loadingIndicator) }));
 };
 Button.displayName = 'Button';
 
-var Checkbox = React.forwardRef(function (props, ref) {
-    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = tslib.__rest(props, ["label", "disabled", "LabelProps"]);
-    var control = React.createElement(core.Checkbox, tslib.__assign({ disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React.createElement(core.FormControlLabel, tslib.__assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
+const Checkbox = React.forwardRef((props, ref) => {
+    const { disabled, LabelProps, ...muiProps } = props;
+    const label = LabelProps?.label || props.label;
+    const control = React.createElement(core.Checkbox, { disabled: label ? undefined : disabled, ...muiProps });
+    return label ? (React.createElement(core.FormControlLabel, { disabled: disabled, inputRef: ref, control: control, ...LabelProps, label: label })) : (control);
 });
 Checkbox.displayName = 'Checkbox';
 
-var getBackground = function (theme) { return function (props) {
-    var variant = props.variant, severity = props.severity;
-    var background = theme.palette.grey[100];
-    var backgrounds = {
+const getBackground = (theme) => (props) => {
+    const { variant, severity } = props;
+    let background = theme.palette.grey[100];
+    const backgrounds = {
         outlined: 'none',
         error: 'error.main',
         warning: 'warning.main',
@@ -226,17 +227,17 @@ var getBackground = function (theme) { return function (props) {
         background = backgrounds[variant];
     }
     else if (severity) {
-        var _a = backgrounds[severity].split('.'), color = _a[0], colorVariant = _a[1];
+        const [color, colorVariant] = backgrounds[severity].split('.');
         // @ts-expect-error - todo.
         background = theme.palette[color][colorVariant];
     }
     return background;
-}; };
-var getColor = function (theme) { return function (props) {
-    var variant = props.variant, severity = props.severity;
-    var textColor;
+};
+const getColor = (theme) => (props) => {
+    const { variant, severity } = props;
+    let textColor;
     if (variant === 'outlined' && severity) {
-        var textColors = {
+        const textColors = {
             error: theme.palette.error.main,
             info: theme.palette.info.main,
             warning: theme.palette.warning.dark,
@@ -248,7 +249,7 @@ var getColor = function (theme) { return function (props) {
         textColor = theme.palette.grey[700];
     }
     else if ((variant === 'default' || variant === undefined) && severity) {
-        var textColors = {
+        const textColors = {
             error: theme.palette.common.white,
             info: theme.palette.secondary.main,
             warning: theme.palette.secondary.main,
@@ -257,12 +258,12 @@ var getColor = function (theme) { return function (props) {
         textColor = textColors[severity];
     }
     return textColor;
-}; };
-var getBorder = function (theme) { return function (props) {
-    var variant = props.variant, severity = props.severity;
-    var borderColor;
+};
+const getBorder = (theme) => (props) => {
+    const { variant, severity } = props;
+    let borderColor;
     if (variant === 'outlined' && severity) {
-        var borderColors = {
+        const borderColors = {
             error: theme.palette.error.main,
             info: theme.palette.info.main,
             warning: theme.palette.warning.dark,
@@ -271,10 +272,10 @@ var getBorder = function (theme) { return function (props) {
         borderColor = borderColors[severity];
     }
     return borderColor;
-}; };
+};
 // using `any` here is a bit of cheating but it doesn't matter since this doesn't depend on
 // any component-specific props
-var useChipStyles = core.makeStyles(function (theme) { return ({
+const useChipStyles = core.makeStyles((theme) => ({
     root: {
         background: getBackground(theme),
         color: getColor(theme),
@@ -289,44 +290,44 @@ var useChipStyles = core.makeStyles(function (theme) { return ({
     deleteIcon: {
         color: theme.palette.grey[500],
     },
-}); });
+}));
 
-var IconDictionary = {
+const IconDictionary = {
     error: webIcons.Error,
     info: webIcons.Info,
     success: webIcons.CheckCircle,
     warning: webIcons.Warning,
 };
-var Chip = function (props) {
-    var severity = props.severity, restProps = tslib.__rest(props, ["severity"]);
-    var classes = useChipStyles(props);
-    var icon = severity ? React.createElement(IconDictionary[severity]) : undefined;
-    var deleteIcon = React.createElement(webIcons.XCircle);
-    return React.createElement(core.Chip, tslib.__assign({ classes: classes, icon: icon, deleteIcon: deleteIcon }, restProps));
+const Chip = (props) => {
+    const { severity, ...restProps } = props;
+    const classes = useChipStyles(props);
+    const icon = severity ? React.createElement(IconDictionary[severity]) : undefined;
+    const deleteIcon = React.createElement(webIcons.XCircle);
+    return React.createElement(core.Chip, { classes: classes, icon: icon, deleteIcon: deleteIcon, ...restProps });
 };
 Chip.displayName = 'Chip';
 
-var weights = {
+const weights = {
     regular: 400,
     medium: 500,
     'semi-bold': 600,
     bold: 700,
 };
-var getCustomColor = function (theme, color) {
-    var isCommonColor = color && ['white', 'black'].includes(color);
-    var isGreyColor = color && color.match(/^grey\.\d{3}/);
-    var isSemanticColor = color && color.match(/(primary|secondary|info|success|error|warning).?(light|dark)?/);
-    var isTextColor = color && ['textPrimary', 'textSecondary'].includes(color);
+const getCustomColor = (theme, color) => {
+    const isCommonColor = color && ['white', 'black'].includes(color);
+    const isGreyColor = color && color.match(/^grey\.\d{3}/);
+    const isSemanticColor = color && color.match(/(primary|secondary|info|success|error|warning).?(light|dark)?/);
+    const isTextColor = color && ['textPrimary', 'textSecondary'].includes(color);
     switch (true) {
         case isCommonColor:
             // @ts-expect-error - todo.
             return theme.palette.common[color];
         case Boolean(isGreyColor):
-            var scale = color.split('.')[1];
+            const scale = color.split('.')[1];
             // @ts-expect-error - todo.
             return theme.palette.grey[scale] || theme.palette.grey[900];
         case Boolean(isSemanticColor):
-            var _a = color.split('.'), paletteKey = _a[0], _b = _a[1], variant = _b === void 0 ? 'main' : _b;
+            const [paletteKey, variant = 'main'] = color.split('.');
             // @ts-expect-error - todo.
             return theme.palette[paletteKey][variant];
         case isTextColor:
@@ -336,102 +337,82 @@ var getCustomColor = function (theme, color) {
             return undefined;
     }
 };
-var useTypographyStyles = core.makeStyles(function (theme) {
-    var _a;
-    return ({
-        root: (_a = {},
-            _a["& ." + iconStaticClassName] = {
-                position: 'relative',
-                top: '0.125em',
-                padding: '0 0.125em',
-                boxSizing: 'content-box',
-            },
-            _a.fontFamily = theme.typography.fontFamily,
-            _a.fontWeight = function (_a) {
-                var variant = _a.variant, weight = _a.weight;
-                return (weight ? weights[weight] : theme.typography[variant].fontWeight);
-            },
-            _a.fontSize = function (_a) {
-                var variant = _a.variant;
-                return theme.typography[variant].fontSize;
-            },
-            _a.lineHeight = function (_a) {
-                var variant = _a.variant;
-                return theme.typography[variant].lineHeight;
-            },
-            _a.textTransform = function (_a) {
-                var variant = _a.variant;
-                return theme.typography[variant].textTransform;
-            },
-            _a.color = function (_a) {
-                var color = _a.color, variant = _a.variant;
-                return (color && getCustomColor(theme, color)) || theme.typography[variant].color;
-            },
-            _a),
-        caption: {
-            display: 'inline',
-        },
-        overline: {
-            display: 'inline',
+const useTypographyStyles = core.makeStyles((theme) => ({
+    root: {
+        [`& .${iconStaticClassName}`]: {
+            position: 'relative',
+            top: '0.125em',
+            padding: '0 0.125em',
+            boxSizing: 'content-box',
         },
-    });
-});
+        fontFamily: theme.typography.fontFamily,
+        fontWeight: ({ variant, weight }) => (weight ? weights[weight] : theme.typography[variant].fontWeight),
+        fontSize: ({ variant }) => theme.typography[variant].fontSize,
+        lineHeight: ({ variant }) => theme.typography[variant].lineHeight,
+        textTransform: ({ variant }) => theme.typography[variant].textTransform,
+        color: ({ color, variant }) => (color && getCustomColor(theme, color)) || theme.typography[variant].color,
+    },
+    caption: {
+        display: 'inline',
+    },
+    overline: {
+        display: 'inline',
+    },
+}));
 
-var Typography = function (_a) {
-    var TypographyRef = _a.TypographyRef, color = _a.color, _b = _a.variant, variant = _b === void 0 ? 'body1' : _b, weight = _a.weight, restProps = tslib.__rest(_a, ["TypographyRef", "color", "variant", "weight"]);
-    var classes = useTypographyStyles({ color: color, variant: variant, weight: weight });
-    var variantMapping = { subtitle1: 'p' };
-    return (React.createElement(core.Typography, tslib.__assign({ classes: classes, variant: variant, variantMapping: variantMapping, ref: TypographyRef }, restProps)));
+const Typography = ({ TypographyRef, color, variant = 'body1', weight, ...restProps }) => {
+    const classes = useTypographyStyles({ color, variant, weight });
+    const variantMapping = { subtitle1: 'p' };
+    return (React.createElement(core.Typography, { classes: classes, variant: variant, variantMapping: variantMapping, ref: TypographyRef, ...restProps }));
 };
 Typography.displayName = 'Typography';
 
-var getFadeStop = function (_a, typographyVariant) {
-    var typography = _a.typography;
+const getFadeStop = ({ typography }, typographyVariant) => {
     // @ts-expect-error - todo.
     return !isNaN(Number(typography[typographyVariant].lineHeight))
         ? // @ts-expect-error - todo.
-            typography[typographyVariant].lineHeight + "rem"
+            `${typography[typographyVariant].lineHeight}rem`
         : // @ts-expect-error - todo.
             typography[typographyVariant].lineHeight;
 };
-var useCollapsibleTextStyles = core.makeStyles(function (theme) { return ({
+const useCollapsibleTextStyles = core.makeStyles((theme) => ({
     overlay: {
         position: 'absolute',
         top: 0,
         left: 0,
         height: '100%',
         width: '100%',
-        background: function (props) { return "linear-gradient(to top, white, #FFF0 " + getFadeStop(theme, props.typographyVariant) + ")"; },
+        background: (props) => `linear-gradient(to top, white, #FFF0 ${getFadeStop(theme, props.typographyVariant)})`,
     },
-}); });
+}));
 
-var CollapsibleText = function (props) {
-    var text = props.text, open = props.open, _a = props.previewLines, previewLines = _a === void 0 ? 2 : _a, _b = props.typographyVariant, typographyVariant = _b === void 0 ? 'body1' : _b; props.collapseState; var restProps = tslib.__rest(props, ["text", "open", "previewLines", "typographyVariant", "collapseState"]);
-    var collapseState = React.useState(false);
-    var typographyRef = React.useRef(null);
-    var classes = useCollapsibleTextStyles(tslib.__assign(tslib.__assign({}, props), { previewLines: previewLines, typographyVariant: typographyVariant }));
-    var theme = core.useTheme();
-    var _c = props.collapseState ? props.collapseState : collapseState, collapsible = _c[0], setCollapsible = _c[1];
-    var typographyEntryLineHeightRem = parseFloat(theme.typography[typographyVariant].lineHeight);
-    var collapsedSizeRem = previewLines * typographyEntryLineHeightRem;
-    var documentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-    var collapsedSizePx = collapsedSizeRem * documentFontSize;
-    React.useEffect(function () {
-        var typographyNode = typographyRef.current;
-        var observer = new ResizeObserver(function (entries) {
-            var typographyEntry = entries.find(function (entry) { return entry.target === typographyNode; });
+const CollapsibleText = (props) => {
+    const { text, open, previewLines = 2, typographyVariant = 'body1', collapseState: _exclude, ...restProps } = props;
+    const collapseState = React.useState(false);
+    const typographyRef = React.useRef(null);
+    const classes = useCollapsibleTextStyles({ ...props, previewLines, typographyVariant });
+    const theme = core.useTheme();
+    const [collapsible, setCollapsible] = props.collapseState ? props.collapseState : collapseState;
+    const typographyEntryLineHeightRem = parseFloat(theme.typography[typographyVariant].lineHeight);
+    const collapsedSizeRem = previewLines * typographyEntryLineHeightRem;
+    const documentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    const collapsedSizePx = collapsedSizeRem * documentFontSize;
+    React.useEffect(() => {
+        const typographyNode = typographyRef.current;
+        const observer = new ResizeObserver((entries) => {
+            const typographyEntry = entries.find((entry) => entry.target === typographyNode);
             if (typographyEntry) {
-                var typographyEntryHeight = typographyEntry.contentRect.height;
-                var isCollapsible = typographyEntryHeight > collapsedSizePx;
+                const typographyEntryHeight = typographyEntry.contentRect.height;
+                const isCollapsible = typographyEntryHeight > collapsedSizePx;
                 setCollapsible(isCollapsible);
             }
         });
         observer.observe(typographyNode);
-        return function () {
+        return () => {
             observer.unobserve(typographyNode);
         };
     }, []);
-    return (React.createElement(core.Box, tslib.__assign({ position: "relative", overflow: "hidden" }, restProps),
+    return (React.createElement(core.Box, { position: "relative", overflow: "hidden", ...restProps },
         React.createElement(core.Collapse, { in: open, collapsedSize: collapsedSizePx + 'px' },
             React.createElement(Typography, { TypographyRef: typographyRef, variant: typographyVariant }, text)),
         collapsible && !open && React.createElement(core.Box, { className: classes.overlay })));
@@ -446,15 +427,14 @@ var SemanticColors;
     SemanticColors["SECONDARY_DARK"] = "secondary.dark";
     SemanticColors["SECONDARY_LIGHT"] = "secondary.light";
 })(SemanticColors || (SemanticColors = {}));
-var useStyles$5 = core.makeStyles(function (theme) { return ({
+const useStyles$5 = core.makeStyles((theme) => ({
     dividerRoot: {
         gap: theme.spacing(2),
     },
     textRoot: {
-        color: function (_a) {
-            var textColor = _a.textColor;
+        color: ({ textColor }) => {
             if (textColor && Object.values(SemanticColors).includes(textColor)) {
-                var _b = textColor.split('.'), semanticColor = _b[0], shade = _b[1];
+                const [semanticColor, shade] = textColor.split('.');
                 // @ts-expect-error - todo.
                 return theme.palette[semanticColor][shade];
             }
@@ -465,13 +445,12 @@ var useStyles$5 = core.makeStyles(function (theme) { return ({
                 return 'black';
             }
         },
-        textTransform: function (props) { return props.textTransform; },
+        textTransform: (props) => props.textTransform,
     },
     dividerLine: {
-        backgroundColor: function (_a) {
-            var dividerColor = _a.dividerColor;
+        backgroundColor: ({ dividerColor }) => {
             if (dividerColor && Object.values(SemanticColors).includes(dividerColor)) {
-                var _b = dividerColor.split('.'), semanticColor = _b[0], shade = _b[1];
+                const [semanticColor, shade] = dividerColor.split('.');
                 // @ts-expect-error - todo.
                 return theme.palette[semanticColor][shade];
             }
@@ -483,52 +462,29 @@ var useStyles$5 = core.makeStyles(function (theme) { return ({
             }
         },
     },
-}); });
-var Divider = function (_a) {
-    var TypographyProps = _a.TypographyProps, className = _a.className, dividerColor = _a.dividerColor, text = _a.text, textColor = _a.textColor, _b = _a.textTransform, textTransform = _b === void 0 ? 'lowercase' : _b;
-    var classes = useStyles$5({ dividerColor: dividerColor, textColor: textColor, textTransform: textTransform });
-    var casingOffset = textTransform === 'lowercase' ? '.25rem' : 'unset';
+}));
+const Divider = ({ TypographyProps, className, dividerColor, text, textColor, textTransform = 'lowercase', }) => {
+    const classes = useStyles$5({ dividerColor, textColor, textTransform });
+    const casingOffset = textTransform === 'lowercase' ? '.25rem' : 'unset';
     return (React.createElement(core.Box, { className: classNames([classes.dividerRoot, className]), display: "flex", alignItems: "center" },
         React.createElement(core.Box, { className: classes.dividerLine, display: "flex", flexGrow: 1, height: "1px", marginTop: casingOffset }),
         text && (React.createElement(React.Fragment, null,
-            React.createElement(Typography, tslib.__assign({ className: classes.textRoot }, TypographyProps), text),
+            React.createElement(Typography, { className: classes.textRoot, ...TypographyProps }, text),
             React.createElement(core.Box, { className: classes.dividerLine, display: "flex", flexGrow: 1, height: "1px", marginTop: casingOffset })))));
 };
 Divider.displayName = 'Divider';
 
-var useStyles$4 = core.makeStyles(function () { return ({
-    root: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gridGap: 16,
-    },
-}); });
-var FollowerAuthenticationContent = function (props) {
-    var classes = useStyles$4();
-    return React.createElement(core.DialogContent, { classes: classes }, props.children);
-};
-
-var FollowerAuthenticationDialogContext = React.createContext(null);
-var FollowerAuthenticationDialogContextProvider = FollowerAuthenticationDialogContext.Provider;
-var useFollowerAuthenticationDialogContext = function () {
-    var context = React.useContext(FollowerAuthenticationDialogContext);
+const FollowerAuthenticationDialogContext = React.createContext(null);
+const FollowerAuthenticationDialogContextProvider = FollowerAuthenticationDialogContext.Provider;
+const useFollowerAuthenticationDialogContext = () => {
+    const context = React.useContext(FollowerAuthenticationDialogContext);
     if (!context) {
         throw new Error('useFollowerAuthenticationDialogContext must be called within FollowerAuthenticationDialogContextProvider');
     }
     return context;
 };
 
-var FollowerAuthenticationGraphic = function () {
-    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages, graphics = _a.graphics;
-    var graphic = graphics[state.value];
-    if (!graphic)
-        return null;
-    return (React.createElement(core.Box, null,
-        React.createElement("img", { src: graphic, alt: messages[state.value + "GraphicAlt"] })));
-};
-
-var useStyles$3 = core.makeStyles(function () { return ({
+const useStyles$4 = core.makeStyles(() => ({
     form: {
         display: 'flex',
         flexDirection: 'column',
@@ -536,38 +492,37 @@ var useStyles$3 = core.makeStyles(function () { return ({
         width: '100%',
         gridGap: 16,
     },
-}); });
-var northAmericanPhoneRegex = /^(\()?[2-9]{1}\d{2}(\))?[-\s.]?[2-9]{1}\d{2}[-\s.]?\d{4}$/;
-var ukPhoneRegex = /^((\+?44\s?|0044\s?)(\s?\d{3,5}|\(\d{3,5}\))(\s?\d{3,4})(\s?\d{3,4})$|^07\d{9}$)/;
-var validatePhoneNumber = function (phone) {
+}));
+const northAmericanPhoneRegex = /^(\()?[2-9]{1}\d{2}(\))?[-\s.]?[2-9]{1}\d{2}[-\s.]?\d{4}$/;
+const ukPhoneRegex = /^((\+?44\s?|0044\s?)(\s?\d{3,5}|\(\d{3,5}\))(\s?\d{3,4})(\s?\d{3,4})$|^07\d{9}$)/;
+const validatePhoneNumber = (phone) => {
     if (!phone)
         return false;
     return northAmericanPhoneRegex.test(phone) || ukPhoneRegex.test(phone);
 };
-var FollowerAuthenticationForm = function () {
-    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages, locationOptions = _a.locationOptions, onActionButtonClick = _a.onActionButtonClick, loading = _a.loading;
-    var classes = useStyles$3();
+const FollowerAuthenticationForm = () => {
+    const { state, messages, locationOptions, onActionButtonClick, loading } = useFollowerAuthenticationDialogContext();
+    const classes = useStyles$4();
     // sign-up form state
-    var formRef = React.useRef(null);
-    var _b = React.useState(false), formValidity = _b[0], setFormValidity = _b[1];
-    var _c = React.useState(), showPhoneErrorText = _c[0], setShowPhoneErrorText = _c[1];
-    var _d = React.useState(), showEmailErrorText = _d[0], setShowEmailErrorText = _d[1];
-    var _e = React.useState(), showLocationErrorText = _e[0], setShowLocationErrorText = _e[1];
-    var _f = React.useState(state.context.phone || ''), signUpPhoneValue = _f[0], setSignUpPhoneValue = _f[1];
-    var _g = React.useState(state.context.email || ''), signUpEmailValue = _g[0], setSignUpEmailValue = _g[1];
-    var checkFieldValidity = function (e) {
-        var _a, _b;
-        var fieldName = e.target.name;
-        var fieldValue = e.target.value;
+    const formRef = React.useRef(null);
+    const [formValidity, setFormValidity] = React.useState(false);
+    const [showPhoneErrorText, setShowPhoneErrorText] = React.useState();
+    const [showEmailErrorText, setShowEmailErrorText] = React.useState();
+    const [showLocationErrorText, setShowLocationErrorText] = React.useState();
+    const [signUpPhoneValue, setSignUpPhoneValue] = React.useState(state.context.phone || '');
+    const [signUpEmailValue, setSignUpEmailValue] = React.useState(state.context.email || '');
+    const checkFieldValidity = (e) => {
+        const fieldName = e.target.name;
+        const fieldValue = e.target.value;
         switch (fieldName) {
             case 'phone':
-                var isPhoneValid = validatePhoneNumber(fieldValue);
+                const isPhoneValid = validatePhoneNumber(fieldValue);
                 setSignUpPhoneValue(fieldValue);
                 setShowPhoneErrorText(!isPhoneValid && fieldValue.length > 0);
                 break;
             case 'email':
-                var emailField = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.elements.namedItem(fieldName);
-                var isEmailValid = (_b = emailField === null || emailField === void 0 ? void 0 : emailField.validity.valid) !== null && _b !== void 0 ? _b : false;
+                const emailField = formRef.current?.elements.namedItem(fieldName);
+                const isEmailValid = emailField?.validity.valid ?? false;
                 setSignUpEmailValue(fieldValue);
                 setShowEmailErrorText(!isEmailValid && fieldValue.length > 0);
                 break;
@@ -576,52 +531,51 @@ var FollowerAuthenticationForm = function () {
                 break;
         }
     };
-    React.useEffect(function () {
+    React.useEffect(() => {
         setSignUpPhoneValue(state.context.phone || '');
         setSignUpEmailValue(state.context.email || '');
     }, [state.context.phone, state.context.email]);
-    React.useEffect(function () {
-        var _a, _b, _c;
+    React.useEffect(() => {
         // Validate pre-filled values (only in signUp state)
         if (state.value === 'signUp') {
             if (signUpPhoneValue) {
-                var isPhoneValid = validatePhoneNumber(signUpPhoneValue);
+                const isPhoneValid = validatePhoneNumber(signUpPhoneValue);
                 setShowPhoneErrorText(!isPhoneValid);
             }
             if (signUpEmailValue) {
-                var emailField = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.elements.namedItem('email');
-                var isEmailValid = (_b = emailField === null || emailField === void 0 ? void 0 : emailField.validity.valid) !== null && _b !== void 0 ? _b : false;
+                const emailField = formRef.current?.elements.namedItem('email');
+                const isEmailValid = emailField?.validity.valid ?? false;
                 setShowEmailErrorText(!isEmailValid);
             }
         }
-        var hasValidPhone = Boolean(signUpPhoneValue) && !showPhoneErrorText;
-        var hasValidEmail = Boolean(signUpEmailValue) && !showEmailErrorText;
-        var locationField = (_c = formRef.current) === null || _c === void 0 ? void 0 : _c.elements.namedItem('location');
-        var hasValidLocation = locationField ? Boolean(locationField.value) : true;
-        var hasValidContact = hasValidPhone || hasValidEmail;
+        const hasValidPhone = Boolean(signUpPhoneValue) && !showPhoneErrorText;
+        const hasValidEmail = Boolean(signUpEmailValue) && !showEmailErrorText;
+        const locationField = formRef.current?.elements.namedItem('location');
+        const hasValidLocation = locationField ? Boolean(locationField.value) : true;
+        const hasValidContact = hasValidPhone || hasValidEmail;
         setFormValidity(hasValidContact && hasValidLocation);
     }, [state.value, signUpPhoneValue, signUpEmailValue, showPhoneErrorText, showEmailErrorText, showLocationErrorText]);
-    var handleSubmit = function (e) {
+    const handleSubmit = (e) => {
         e.preventDefault();
-        var form = e.target;
-        var formData = new FormData(form);
-        var values = Object.fromEntries(formData.entries());
+        const form = e.target;
+        const formData = new FormData(form);
+        const values = Object.fromEntries(formData.entries());
         onActionButtonClick('submit-form', values);
     };
-    var formProps = {
+    const formProps = {
         id: 'follower-authentication-form',
         className: classes.form,
         onSubmit: handleSubmit,
     };
     switch (state.value) {
         case 'initial':
-            return (React.createElement("form", tslib.__assign({}, formProps),
+            return (React.createElement("form", { ...formProps },
                 React.createElement(core.TextField, { disabled: loading, label: messages.initialInputLabel, key: "identifier-input", id: "identifier-input", name: "identifier" }),
                 React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.initialCtaButtonLabel)));
         case 'signUp':
-            return (React.createElement("form", tslib.__assign({ ref: formRef }, formProps, { onInvalid: function (e) {
+            return (React.createElement("form", { ref: formRef, ...formProps, onInvalid: (e) => {
                     e.preventDefault();
-                } }),
+                } },
                 React.createElement(core.TextField, { disabled: loading, label: messages.signUpPhoneInputLabel, key: "phone-input", id: "phone-input", name: "phone", onChange: checkFieldValidity, error: showPhoneErrorText, helperText: showPhoneErrorText && messages.signUpPhoneErrorText, inputProps: {
                         required: signUpEmailValue ? false : true,
                     }, defaultValue: state.context.phone }),
@@ -630,27 +584,27 @@ var FollowerAuthenticationForm = function () {
                         required: signUpPhoneValue ? false : true,
                         type: 'email',
                     }, defaultValue: state.context.email }),
-                React.createElement(core.TextField, { disabled: loading, select: true, onChange: checkFieldValidity, label: messages.signUpLocationInputLabel, error: showLocationErrorText, helperText: showLocationErrorText && messages.signUpLocationErrorText, key: "location-input", id: "location-input", inputProps: { required: true }, name: "location" }, locationOptions.map(function (locationOption) { return (React.createElement(core.MenuItem, { "data-cy": 'option', key: locationOption.value, value: locationOption.value }, locationOption.label)); })),
+                React.createElement(core.TextField, { disabled: loading, select: true, onChange: checkFieldValidity, label: messages.signUpLocationInputLabel, error: showLocationErrorText, helperText: showLocationErrorText && messages.signUpLocationErrorText, key: "location-input", id: "location-input", inputProps: { required: true }, name: "location" }, locationOptions.map((locationOption) => (React.createElement(core.MenuItem, { "data-cy": 'option', key: locationOption.value, value: locationOption.value }, locationOption.label)))),
                 React.createElement(core.Typography, { style: { alignSelf: 'start' } }, messages.signUpBirthdaySectionLabel),
                 React.createElement(core.TextField, { disabled: loading, label: messages.signUpMonthInputLabel, key: "birthday-month-input", id: "birthday-month-input", name: "birthdayMonth" }),
                 React.createElement(core.TextField, { disabled: loading, label: messages.signUpDayInputLabel, key: "birthday-date-input", id: "birthday-date-input", name: "birthdayDate" }),
                 React.createElement(core.Button, { disabled: loading || !formValidity, type: "submit" }, messages.signUp)));
         case 'emailFound':
-            return (React.createElement("form", tslib.__assign({}, formProps),
+            return (React.createElement("form", { ...formProps },
                 React.createElement(core.TextField, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.context.email }),
                 React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.emailFoundCtaButtonLabel)));
         case 'emailAuthCode':
-            return (React.createElement("form", tslib.__assign({}, formProps),
+            return (React.createElement("form", { ...formProps },
                 React.createElement(core.TextField, { disabled: loading, label: messages.emailAuthCodeInputLabel, key: "code-input", id: "code-input", name: "code" }),
                 React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.signIn)));
         case 'indirectUserFound': {
             if (state.context.email) {
-                return (React.createElement("form", tslib.__assign({}, formProps),
+                return (React.createElement("form", { ...formProps },
                     React.createElement(core.TextField, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.context.email }),
                     React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.indirectUserFoundCtaButtonLabel)));
             }
             else if (state.context.phone) {
-                return (React.createElement("form", tslib.__assign({}, formProps),
+                return (React.createElement("form", { ...formProps },
                     React.createElement(core.TextField, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.context.phone }),
                     React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.indirectUserFoundCtaButtonLabel)));
             }
@@ -658,25 +612,25 @@ var FollowerAuthenticationForm = function () {
                 return null;
         }
         case 'emailPasswordSignIn':
-            return (React.createElement("form", tslib.__assign({}, formProps),
+            return (React.createElement("form", { ...formProps },
                 React.createElement(core.TextField, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.context.email, InputLabelProps: { shrink: true } }),
                 React.createElement(core.TextField, { disabled: loading, label: messages.passwordInputLabel, key: "password-input", id: "password-input", name: "password", inputProps: { type: 'password' } }),
                 React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.signIn)));
         case 'phoneFound':
-            return (React.createElement("form", tslib.__assign({}, formProps),
+            return (React.createElement("form", { ...formProps },
                 React.createElement(core.TextField, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.context.phone }),
                 React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.phoneFoundCtaButtonLabel)));
         case 'phoneAuthCode':
-            return (React.createElement("form", tslib.__assign({}, formProps),
+            return (React.createElement("form", { ...formProps },
                 React.createElement(core.TextField, { disabled: loading, label: messages.phoneAuthCodeInputLabel, key: "code-input", id: "code-input", name: "code", autoComplete: "one-time-code" }),
                 React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.signIn)));
         case 'phonePasswordSignIn':
-            return (React.createElement("form", tslib.__assign({}, formProps),
+            return (React.createElement("form", { ...formProps },
                 React.createElement(core.TextField, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.context.phone, InputLabelProps: { shrink: true } }),
                 React.createElement(core.TextField, { disabled: loading, label: messages.passwordInputLabel, key: "password-input", id: "password-input", name: "password", inputProps: { type: 'password' } }),
                 React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.signIn)));
         case 'requirePhone':
-            return (React.createElement("form", tslib.__assign({}, formProps),
+            return (React.createElement("form", { ...formProps },
                 React.createElement(core.TextField, { disabled: loading, label: messages.requirePhoneInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.context.phone }),
                 React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.requirePhoneCtaButtonLabel)));
         case 'welcome':
@@ -686,25 +640,25 @@ var FollowerAuthenticationForm = function () {
     }
 };
 
-var useStyles$2 = core.makeStyles(function () { return ({
+const useStyles$3 = core.makeStyles(() => ({
     main: {
         width: '100%',
         display: 'flex',
         flexDirection: 'column',
         gridGap: 16,
     },
-}); });
-var FollowerAuthenticationAltActions = function () {
-    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages, logos = _a.logos, loading = _a.loading, onActionButtonClick = _a.onActionButtonClick;
-    var classes = useStyles$2();
+}));
+const FollowerAuthenticationAltActions = () => {
+    const { state, messages, logos, loading, onActionButtonClick } = useFollowerAuthenticationDialogContext();
+    const classes = useStyles$3();
     switch (state.value) {
         case 'initial':
             return (React.createElement(core.Box, { className: classes.main },
                 React.createElement(core.Divider, null),
-                React.createElement(core.Button, { variant: "outlined", startIcon: logos.facebook, onClick: function () {
+                React.createElement(core.Button, { variant: "outlined", startIcon: logos.facebook, onClick: () => {
                         onActionButtonClick('sign-in-with-facebook');
                     } }, messages.continueWithFacebookButtonLabel),
-                React.createElement(core.Button, { variant: "outlined", startIcon: logos.google, onClick: function () {
+                React.createElement(core.Button, { variant: "outlined", startIcon: logos.google, onClick: () => {
                         onActionButtonClick('sign-in-with-google');
                     } }, messages.continueWithGoogleButtonLabel)));
         case 'signUp':
@@ -712,53 +666,53 @@ var FollowerAuthenticationAltActions = function () {
         case 'emailFound':
             return (React.createElement(core.Box, { className: classes.main },
                 React.createElement(core.Divider, null),
-                React.createElement(core.Button, { variant: "outlined", onClick: function () {
+                React.createElement(core.Button, { variant: "outlined", onClick: () => {
                         onActionButtonClick('sign-in-with-password');
                     } }, messages.signInWithPassword)));
         case 'emailAuthCode':
             return (React.createElement(core.Box, { className: classes.main },
-                React.createElement(core.Button, { disabled: loading, variant: "outlined", onClick: function () {
-                        var form = document.querySelector('#follower-authentication-form');
-                        var formData = new FormData(form);
-                        var values = Object.fromEntries(formData.entries());
+                React.createElement(core.Button, { disabled: loading, variant: "outlined", onClick: () => {
+                        const form = document.querySelector('#follower-authentication-form');
+                        const formData = new FormData(form);
+                        const values = Object.fromEntries(formData.entries());
                         onActionButtonClick('request-auth-code-email', values);
                     } }, messages.resendAuthCode)));
         case 'indirectUserFound':
             return (React.createElement(core.Box, { className: classes.main },
                 React.createElement(core.Divider, null),
-                React.createElement(core.Button, { variant: "outlined", onClick: function () {
+                React.createElement(core.Button, { variant: "outlined", onClick: () => {
                         onActionButtonClick('use-different-account');
                     } }, messages.indirectUserFoundCtaButtonLabelAlt)));
         case 'emailPasswordSignIn':
             return (React.createElement(core.Box, { className: classes.main },
                 React.createElement(core.Divider, null),
-                React.createElement(core.Button, { variant: "outlined", onClick: function () {
-                        var form = document.querySelector('#follower-authentication-form');
-                        var formData = new FormData(form);
-                        var values = Object.fromEntries(formData.entries());
+                React.createElement(core.Button, { variant: "outlined", onClick: () => {
+                        const form = document.querySelector('#follower-authentication-form');
+                        const formData = new FormData(form);
+                        const values = Object.fromEntries(formData.entries());
                         onActionButtonClick('request-auth-code-email', values);
                     } }, messages.emailFoundCtaButtonLabel)));
         case 'phoneFound':
             return null;
         case 'phoneAuthCode':
             return (React.createElement(core.Box, { className: classes.main },
-                React.createElement(core.Button, { disabled: loading, variant: "outlined", onClick: function () {
-                        var form = document.querySelector('#follower-authentication-form');
-                        var formData = new FormData(form);
-                        var values = Object.fromEntries(formData.entries());
+                React.createElement(core.Button, { disabled: loading, variant: "outlined", onClick: () => {
+                        const form = document.querySelector('#follower-authentication-form');
+                        const formData = new FormData(form);
+                        const values = Object.fromEntries(formData.entries());
                         onActionButtonClick('request-auth-code-sms', values);
                     } }, messages.resendAuthCode)));
         case 'phonePasswordSignIn':
             return (React.createElement(core.Box, { className: classes.main },
                 React.createElement(core.Divider, null),
-                React.createElement(core.Button, { variant: "outlined", onClick: function () {
-                        var form = document.querySelector('#follower-authentication-form');
-                        var formData = new FormData(form);
-                        var values = Object.fromEntries(formData.entries());
+                React.createElement(core.Button, { variant: "outlined", onClick: () => {
+                        const form = document.querySelector('#follower-authentication-form');
+                        const formData = new FormData(form);
+                        const values = Object.fromEntries(formData.entries());
                         onActionButtonClick('request-auth-code-sms', values);
                     } }, messages.phoneFoundCtaButtonLabel)));
         case 'welcome':
-            return (React.createElement(core.Button, { onClick: function () {
+            return (React.createElement(core.Button, { onClick: () => {
                     onActionButtonClick('close');
                 } }, messages.done));
         default:
@@ -766,53 +720,75 @@ var FollowerAuthenticationAltActions = function () {
     }
 };
 
-var FollowerAuthenticationBody = function () {
+const FollowerAuthenticationBody = () => {
     return (React.createElement(React.Fragment, null,
         React.createElement(FollowerAuthenticationForm, null),
         React.createElement(FollowerAuthenticationAltActions, null)));
 };
 
-var FollowerAuthenticationFooter = function () {
-    var _a = useFollowerAuthenticationDialogContext(), messages = _a.messages, logos = _a.logos;
+const useStyles$2 = core.makeStyles(() => ({
+    root: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+    },
+}));
+const FollowerAuthenticationCloseButton = () => {
+    const { messages, onActionButtonClick } = useFollowerAuthenticationDialogContext();
+    const classes = useStyles$2();
+    const handleClose = () => {
+        onActionButtonClick('close');
+    };
+    return (React.createElement(core.IconButton, { classes: classes, "aria-label": messages.closeButtonLabel, onClick: handleClose },
+        React.createElement(webIcons.X, null)));
+};
+
+const useStyles$1 = core.makeStyles(() => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gridGap: 16,
+    },
+}));
+const FollowerAuthenticationContent = (props) => {
+    const classes = useStyles$1();
+    return React.createElement(core.DialogContent, { classes: classes }, props.children);
+};
+
+const FollowerAuthenticationFooter = () => {
+    const { messages, logos } = useFollowerAuthenticationDialogContext();
     return (React.createElement(core.Box, { display: "flex", gridGap: 8 },
         React.createElement(core.Typography, { variant: "body2" }, messages.poweredBy),
         logos.popmenu));
 };
 
-var FollowerAuthenticationTitle = function () {
-    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages;
-    var title = messages[state.value + "Title"];
+const FollowerAuthenticationGraphic = () => {
+    const { state, messages, graphics } = useFollowerAuthenticationDialogContext();
+    const graphic = graphics[state.value];
+    if (!graphic)
+        return null;
     return (React.createElement(core.Box, null,
-        React.createElement(core.Typography, { variant: "h1", align: "center" }, title)));
+        React.createElement("img", { src: graphic, alt: messages[`${state.value}GraphicAlt`] })));
 };
 
-var FollowerAuthenticationInfo = function () {
-    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages;
-    var info = messages[state.value + "Info"];
+const FollowerAuthenticationInfo = () => {
+    const { state, messages } = useFollowerAuthenticationDialogContext();
+    const info = messages[`${state.value}Info`];
     if (!info)
         return null;
     return (React.createElement(core.Box, null,
         React.createElement(core.Typography, { align: "center" }, info)));
 };
 
-var useStyles$1 = core.makeStyles(function () { return ({
-    root: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-    },
-}); });
-var FollowerAuthenticationCloseButton = function () {
-    var _a = useFollowerAuthenticationDialogContext(), messages = _a.messages, onActionButtonClick = _a.onActionButtonClick;
-    var classes = useStyles$1();
-    var handleClose = function () {
-        onActionButtonClick('close');
-    };
-    return (React.createElement(core.IconButton, { classes: classes, "aria-label": messages.closeButtonLabel, onClick: handleClose },
-        React.createElement(webIcons.X, null)));
+const FollowerAuthenticationTitle = () => {
+    const { state, messages } = useFollowerAuthenticationDialogContext();
+    const title = messages[`${state.value}Title`];
+    return (React.createElement(core.Box, null,
+        React.createElement(core.Typography, { variant: "h1", align: "center" }, title)));
 };
 
-var theme = {
+const theme = {
     palette: {
         primary: { main: '#2E3042' },
     },
@@ -846,14 +822,11 @@ var theme = {
     },
 };
 
-var FollowerAuthenticationDialog = function (props) {
-    var open = props.open, restProps = tslib.__rest(props, ["open"]);
-    var theme$1 = core.createTheme(theme);
-    var fullScreen = core.useMediaQuery(function (_a) {
-        var breakpoints = _a.breakpoints;
-        return breakpoints.down('sm');
-    });
-    var handleClose = function () {
+const FollowerAuthenticationDialog = (props) => {
+    const { open, ...restProps } = props;
+    const theme$1 = core.createTheme(theme);
+    const fullScreen = core.useMediaQuery((theme) => theme.breakpoints.down('sm'));
+    const handleClose = () => {
         restProps.onActionButtonClick('close');
     };
     return (React.createElement(core.ThemeProvider, { theme: theme$1 },
@@ -868,40 +841,41 @@ var FollowerAuthenticationDialog = function (props) {
                     React.createElement(FollowerAuthenticationFooter, null))))));
 };
 
-var IconButton = React.forwardRef(function (props, ref) {
-    return React.createElement(core.IconButton, tslib.__assign({ ref: ref }, props));
+const IconButton = React.forwardRef((props, ref) => {
+    return React.createElement(core.IconButton, { ref: ref, ...props });
 });
 IconButton.displayName = 'IconButton';
 IconButton.defaultProps = {
     color: 'secondary',
 };
 
-var useLinkStyles = core.makeStyles(function (theme) { return ({
-    root: function (props) {
-        var _a;
-        return (tslib.__assign(tslib.__assign({ display: 'flex' }, (props.color === undefined && { color: theme.palette.info.main })), (_a = {}, _a["& ." + iconStaticClassName] = {
+const useLinkStyles = core.makeStyles((theme) => ({
+    root: (props) => ({
+        display: 'flex',
+        ...(props.color === undefined && { color: theme.palette.info.main }),
+        [`& .${iconStaticClassName}`]: {
             alignSelf: 'center',
-        }, _a)));
-    },
-}); });
+        },
+    }),
+}));
 
 // eslint-disable-next-line react/display-name -- false positive
-var Link = React.forwardRef(function (props, ref) {
-    var children = props.children, muiProps = tslib.__rest(props, ["children"]);
-    var classes = useLinkStyles(props);
-    return (React.createElement(core.Link, tslib.__assign({ ref: ref, classes: { root: classes.root } }, muiProps), children));
+const Link = React.forwardRef((props, ref) => {
+    const { children, ...muiProps } = props;
+    const classes = useLinkStyles(props);
+    return (React.createElement(core.Link, { ref: ref, classes: { root: classes.root }, ...muiProps }, children));
 });
 Link.defaultProps = {
     variant: 'body1',
 };
 Link.displayName = 'Link';
 
-var useNumberFieldStyles = core.makeStyles(function () { return ({
+const useNumberFieldStyles = core.makeStyles(() => ({
     root: {
         height: 56,
     },
-}); });
-var useNumberInputStyles = core.makeStyles(function (theme) { return ({
+}));
+const useNumberInputStyles = core.makeStyles((theme) => ({
     root: {
         height: '100%',
         width: 'min-content',
@@ -922,55 +896,59 @@ var useNumberInputStyles = core.makeStyles(function (theme) { return ({
     adornedEnd: {
         padding: 0,
     },
-}); });
+}));
 
-var NumberField = function (props) {
-    var onIncrement = props.onIncrement, onDecrement = props.onDecrement, _a = props.endAdornmentButtonProps, endAdornmentButtonProps = _a === void 0 ? {} : _a, _b = props.startAdornmentButtonProps, startAdornmentButtonProps = _b === void 0 ? {} : _b, _c = props.InputProps, InputProps = _c === void 0 ? {} : _c, classes = props.classes, restProps = tslib.__rest(props, ["onIncrement", "onDecrement", "endAdornmentButtonProps", "startAdornmentButtonProps", "InputProps", "classes"]);
-    var _d = InputProps, inputClassesOverride = _d.classes, restInputProps = tslib.__rest(_d, ["classes"]);
-    var fieldClasses = useNumberFieldStyles(props);
-    var inputClasses = useNumberInputStyles(props);
-    return (React.createElement(core.TextField, tslib.__assign({ classes: tslib.__assign(tslib.__assign({}, fieldClasses), classes), variant: "filled", type: "number", defaultValue: 0, InputProps: tslib.__assign({ classes: tslib.__assign(tslib.__assign({}, inputClasses), inputClassesOverride), disableUnderline: true, endAdornment: (React.createElement(IconButton, tslib.__assign({ style: { fontSize: 20 }, onClick: onIncrement }, endAdornmentButtonProps),
-                React.createElement(Icon, { icon: webIcons.PlusCircle }))), startAdornment: (React.createElement(IconButton, tslib.__assign({ style: { fontSize: 20 }, onClick: onDecrement }, startAdornmentButtonProps),
-                React.createElement(Icon, { icon: webIcons.MinusCircle }))) }, restInputProps) }, restProps)));
+const NumberField = (props) => {
+    const { onIncrement, onDecrement, endAdornmentButtonProps = {}, startAdornmentButtonProps = {}, InputProps = {}, classes, ...restProps } = props;
+    const { classes: inputClassesOverride, ...restInputProps } = InputProps;
+    const fieldClasses = useNumberFieldStyles(props);
+    const inputClasses = useNumberInputStyles(props);
+    return (React.createElement(core.TextField, { classes: { ...fieldClasses, ...classes }, variant: "filled", type: "number", defaultValue: 0, InputProps: {
+            classes: { ...inputClasses, ...inputClassesOverride },
+            disableUnderline: true,
+            endAdornment: (React.createElement(IconButton, { style: { fontSize: 20 }, onClick: onIncrement, ...endAdornmentButtonProps },
+                React.createElement(Icon, { icon: webIcons.PlusCircle }))),
+            startAdornment: (React.createElement(IconButton, { style: { fontSize: 20 }, onClick: onDecrement, ...startAdornmentButtonProps },
+                React.createElement(Icon, { icon: webIcons.MinusCircle }))),
+            ...restInputProps,
+        }, ...restProps }));
 };
 
-var useStyles = core.makeStyles(function (_a) {
-    var spacing = _a.spacing;
-    return ({
-        root: {
-            '&:last-child': {
-                marginBottom: 0,
-            },
-            marginBottom: spacing(4),
-            padding: spacing(4),
+const useStyles = core.makeStyles(({ spacing }) => ({
+    root: {
+        '&:last-child': {
+            marginBottom: 0,
         },
-    });
-});
-var Paper = React.forwardRef(function (props, ref) {
-    var legacyStyles = props.legacyStyles, restProps = tslib.__rest(props, ["legacyStyles"]);
-    var classes = useStyles(props);
-    return React.createElement(core.Paper, tslib.__assign({}, ref, { classes: tslib.__assign({}, (legacyStyles && classes)) }, restProps));
+        marginBottom: spacing(4),
+        padding: spacing(4),
+    },
+}));
+const Paper = React.forwardRef((props, ref) => {
+    const { legacyStyles, ...restProps } = props;
+    const classes = useStyles(props);
+    return React.createElement(core.Paper, { ...ref, classes: { ...(legacyStyles && classes) }, ...restProps });
 });
 Paper.displayName = 'Paper';
 Paper.defaultProps = {
     legacyStyles: false,
 };
 
-var PaperContent = function (props) {
-    var children = props.children;
+const PaperContent = (props) => {
+    const { children } = props;
     return React.createElement(core.Box, { padding: 4 }, children);
 };
 
-var Radio = React.forwardRef(function (props, ref) {
-    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = tslib.__rest(props, ["label", "disabled", "LabelProps"]);
-    var control = React.createElement(core.Radio, tslib.__assign({ disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React.createElement(core.FormControlLabel, tslib.__assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
+const Radio = React.forwardRef((props, ref) => {
+    const { disabled, LabelProps, ...muiProps } = props;
+    const label = LabelProps?.label || props.label;
+    const control = React.createElement(core.Radio, { disabled: label ? undefined : disabled, ...muiProps });
+    return label ? (React.createElement(core.FormControlLabel, { disabled: disabled, inputRef: ref, control: control, ...LabelProps, label: label })) : (control);
 });
 Radio.displayName = 'Radio';
 
-var useSplitInputStyles = core.makeStyles(function () { return ({
+const useSplitInputStyles = core.makeStyles(() => ({
     textfield: {
-        background: function (props) { return (props.backgroundTransparency ? '#FFFFFF44' : 'none'); },
+        background: (props) => (props.backgroundTransparency ? '#FFFFFF44' : 'none'),
         borderTopLeftRadius: 4,
         borderBottomLeftRadius: 4,
         '& fieldset': {
@@ -985,24 +963,23 @@ var useSplitInputStyles = core.makeStyles(function () { return ({
         alignSelf: 'stretch',
     },
     input: {
-        color: function (props) { return props.inputTextColor || 'inherit'; },
+        color: (props) => props.inputTextColor || 'inherit',
         '&$focused fieldset': {
             top: -4,
         },
     },
     focused: {},
-}); });
+}));
 
-var SplitInput = function (_a) {
-    var ButtonProps = _a.ButtonProps, TextFieldProps = _a.TextFieldProps, _b = _a.backgroundTransparency, backgroundTransparency = _b === void 0 ? true : _b, buttonLabel = _a.buttonLabel, _c = _a.color, color = _c === void 0 ? 'primary' : _c, inputTextColor = _a.inputTextColor, onChange = _a.onChange, onClick = _a.onClick;
-    var classes = useSplitInputStyles({ backgroundTransparency: backgroundTransparency, inputTextColor: inputTextColor });
+const SplitInput = ({ ButtonProps, TextFieldProps, backgroundTransparency = true, buttonLabel, color = 'primary', inputTextColor, onChange, onClick, }) => {
+    const classes = useSplitInputStyles({ backgroundTransparency, inputTextColor });
     return (React.createElement(core.Box, { display: "flex" },
-        React.createElement(core.TextField, tslib.__assign({ classes: { root: classes.textfield }, InputProps: { classes: { root: classes.input, focused: classes.focused } }, color: color, variant: "outlined", onChange: onChange }, TextFieldProps)),
-        React.createElement(Button, tslib.__assign({ classes: { root: classes.button }, disableElevation: true, color: color, variant: "contained", onClick: onClick }, ButtonProps), buttonLabel)));
+        React.createElement(core.TextField, { classes: { root: classes.textfield }, InputProps: { classes: { root: classes.input, focused: classes.focused } }, color: color, variant: "outlined", onChange: onChange, ...TextFieldProps }),
+        React.createElement(Button, { classes: { root: classes.button }, disableElevation: true, color: color, variant: "contained", onClick: onClick, ...ButtonProps }, buttonLabel)));
 };
 SplitInput.displayName = 'SplitInput';
 
-var useSwitchStyles = core.makeStyles(function (theme) { return ({
+const useSwitchStyles = core.makeStyles((theme) => ({
     checked: {
         '& $thumb': {
             background: theme.palette.success.main,
@@ -1013,115 +990,113 @@ var useSwitchStyles = core.makeStyles(function (theme) { return ({
     },
     thumb: {},
     track: {},
-}); });
+}));
 
-var Switch = React.forwardRef(function (props, ref) {
-    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = tslib.__rest(props, ["label", "disabled", "LabelProps"]);
-    var classes = useSwitchStyles(props);
-    var control = React.createElement(core.Switch, tslib.__assign({ classes: classes, disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React.createElement(core.FormControlLabel, tslib.__assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
+const Switch = React.forwardRef((props, ref) => {
+    const { disabled, LabelProps, ...muiProps } = props;
+    const label = LabelProps?.label || props.label;
+    const classes = useSwitchStyles(props);
+    const control = React.createElement(core.Switch, { classes: classes, disabled: label ? undefined : disabled, ...muiProps });
+    return label ? (React.createElement(core.FormControlLabel, { disabled: disabled, inputRef: ref, control: control, ...LabelProps, label: label })) : (control);
 });
 Switch.displayName = 'Switch';
 
-var TabPanel = function (props) {
-    var children = props.children, show = props.show;
+const TabPanel = (props) => {
+    const { children, show } = props;
     return show ? React.createElement(core.Box, null, children) : null;
 };
 
-var useToggleButtonStyles = core.makeStyles(function (theme) { return ({
+const useToggleButtonStyles = core.makeStyles((theme) => ({
     root: {
         color: theme.palette.text.primary,
     },
     selected: {
         '&&': {
             '&:hover': {
-                backgroundColor: function (props) { return theme.palette[props.color || 'primary'].dark; },
+                backgroundColor: (props) => theme.palette[props.color || 'primary'].dark,
             },
-            backgroundColor: function (props) { return theme.palette[props.color || 'primary'].main; },
+            backgroundColor: (props) => theme.palette[props.color || 'primary'].main,
             color: 'white',
         },
     },
-}); });
+}));
 
-var ToggleButton = React.forwardRef(function (props, ref) {
-    var children = props.children, muiProps = tslib.__rest(props, ["children"]);
-    var classes = useToggleButtonStyles(props);
-    return (React.createElement(lab.ToggleButton, tslib.__assign({ ref: ref, classes: {
+const ToggleButton = React.forwardRef((props, ref) => {
+    const { children, ...muiProps } = props;
+    const classes = useToggleButtonStyles(props);
+    return (React.createElement(lab.ToggleButton, { ref: ref, classes: {
             root: classes.root,
             selected: classes.selected,
-        } }, muiProps), children));
+        }, ...muiProps }, children));
 });
 ToggleButton.defaultProps = {
     color: 'primary',
 };
 ToggleButton.displayName = 'ToggleButton';
 
-var useToggleButtonGroupStyles = core.makeStyles(function (theme) { return ({
+const useToggleButtonGroupStyles = core.makeStyles((theme) => ({
     root: {
         '&&': {
             backgroundColor: theme.palette.grey[300],
         },
     },
-}); });
+}));
 
-var ToggleButtonGroup = React.forwardRef(function (props, ref) {
-    var children = props.children, _a = props.color, color = _a === void 0 ? 'primary' : _a, muiProps = tslib.__rest(props, ["children", "color"]);
-    var classes = useToggleButtonGroupStyles(props);
-    var childrenWithProps = React.Children.map(children, function (child) {
+const ToggleButtonGroup = React.forwardRef((props, ref) => {
+    const { children, color = 'primary', ...muiProps } = props;
+    const classes = useToggleButtonGroupStyles(props);
+    const childrenWithProps = React.Children.map(children, (child) => {
         if (!React.isValidElement(child)) {
             return null;
         }
-        return React.cloneElement(child, { color: color });
+        return React.cloneElement(child, { color });
     });
-    return (React.createElement(lab.ToggleButtonGroup, tslib.__assign({ ref: ref, classes: { root: classes.root } }, muiProps), childrenWithProps));
+    return (React.createElement(lab.ToggleButtonGroup, { ref: ref, classes: { root: classes.root }, ...muiProps }, childrenWithProps));
 });
 ToggleButtonGroup.displayName = 'ToggleButtonGroup';
 
-var useTooltipStyles = core.makeStyles(function (_a) {
-    var typography = _a.typography;
-    return ({
-        tooltip: {
-            fontSize: typography.pxToRem(16),
-        },
-    });
-});
+const useTooltipStyles = core.makeStyles(({ typography }) => ({
+    tooltip: {
+        fontSize: typography.pxToRem(16),
+    },
+}));
 
-var Tooltip = React.forwardRef(function (props, ref) {
-    var classes = useTooltipStyles(props);
-    return React.createElement(core.Tooltip, tslib.__assign({ ref: ref, classes: classes }, props));
+const Tooltip = React.forwardRef((props, ref) => {
+    const classes = useTooltipStyles(props);
+    return React.createElement(core.Tooltip, { ref: ref, classes: classes, ...props });
 });
 Tooltip.displayName = 'Tooltip';
 
-var useCollapsibleText = function () {
-    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
-    var collapseState = React.useState(false);
-    var toggle = function () { return collapseState[0] && setOpen(!open); };
+const useCollapsibleText = () => {
+    const [open, setOpen] = React.useState(false);
+    const collapseState = React.useState(false);
+    const toggle = () => collapseState[0] && setOpen(!open);
     return {
         collapsibleText: {
-            open: open,
-            collapseState: collapseState,
+            open,
+            collapseState,
         },
-        toggle: toggle,
+        toggle,
     };
 };
 
-var useTabs = function (options) {
-    var initialTab = options.initialTab;
-    var genTabId = function (id) { return ("tab-" + id).toLowerCase().replace(/ /g, '-'); };
-    var genPanelId = function (id) { return ("tab-panel-" + id).toLowerCase().replace(/ /g, '-'); };
-    var _a = React.useState(genTabId(initialTab)), activeTab = _a[0], setActiveTab = _a[1];
-    var handleChange = function (_, nextTab) { return setActiveTab(nextTab); };
-    var TabsProps = { onChange: handleChange, value: activeTab };
-    var useTab = function (baseId) {
-        var tabId = genTabId(baseId);
-        var tabPanelId = genPanelId(baseId);
-        var tabProps = {
+const useTabs = (options) => {
+    const { initialTab } = options;
+    const genTabId = (id) => `tab-${id}`.toLowerCase().replace(/ /g, '-');
+    const genPanelId = (id) => `tab-panel-${id}`.toLowerCase().replace(/ /g, '-');
+    const [activeTab, setActiveTab] = React.useState(genTabId(initialTab));
+    const handleChange = (_, nextTab) => setActiveTab(nextTab);
+    const TabsProps = { onChange: handleChange, value: activeTab };
+    const useTab = (baseId) => {
+        const tabId = genTabId(baseId);
+        const tabPanelId = genPanelId(baseId);
+        const tabProps = {
             id: tabId,
             label: baseId,
             value: tabId,
             'aria-controls': tabPanelId,
         };
-        var panelProps = {
+        const panelProps = {
             id: tabPanelId,
             role: 'tabpanel',
             show: activeTab === tabId,
@@ -1130,9 +1105,9 @@ var useTabs = function (options) {
         return [tabProps, panelProps];
     };
     return {
-        TabsProps: TabsProps,
-        useTab: useTab,
-        setActiveTab: function (tabId) { return setActiveTab(tabId); },
+        TabsProps,
+        useTab,
+        setActiveTab: (tabId) => setActiveTab(tabId),
     };
 };