@popmenu/admin-ui 0.126.2 → 0.126.4

package/build/cjs/components/FullScreenStepper/FullScreenStepperContext.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { FullScreenStepperTypes } from './types';
-export interface FullScreenStepperContextValue extends FullScreenStepperTypes.EventCallbackArgs {
+import { ActionBarActionCallbackArgs } from './FullScreenStepperProps';
+export interface FullScreenStepperContextValue extends ActionBarActionCallbackArgs {
     [key: string]: unknown;
 }
 export declare const FullScreenStepperContext: import("react").Context<FullScreenStepperContextValue>;

package/build/cjs/components/FullScreenStepper/FullScreenStepperProps.d.ts

@@ -1,46 +1,66 @@
 /// <reference types="react" />
 import { DialogProps } from '@material-ui/core';
 import { ButtonProps } from '../Button';
-import { FullScreenStepperTypes } from './types';
-export declare namespace FullScreenStepperSubProps {
-    interface ActionBar {
-        /** Custom actions for a given step. Will appear as additional Button components. */
-        actions?: Array<{
-            onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, callbackArgs: FullScreenStepperTypes.EventCallbackArgs) => void;
-            props: ButtonProps;
-            text: string;
-        }>;
-        /** Override for "Cancel" button. */
-        cancelButtonProps?: ButtonProps;
-        /** Custom text for "Cancel" button. */
-        cancelButtonText?: string;
-        /** Custom text for "Finish" button. */
-        finishButtonText?: string;
-        /** Override for "Next" button. */
-        nextButtonProps?: ButtonProps;
-        /** Custom text for "Next" button. */
-        nextButtonText?: string;
-        /** Override for "Previous" button. */
-        previousButtonProps?: ButtonProps;
-        /** Custom text for "Previous" button. */
-        previousButtonText?: string;
-        /** Text for the optional "Status Text" region. */
-        statusText?: string;
-    }
-    interface Step {
-        /** Group of props for modifying the ActionBar region of FullScreenStepper. */
-        actionBar?: ActionBar;
-        /** When false; disables the ActionBar of a step */
-        displayActionBar?: boolean;
-        /** The name of a given step. Used to match with a provided content component. */
-        name: string;
-        /** Text displayed as the title of a step. */
-        title: string;
-    }
-}
-export interface FullScreenStepperProps extends DialogProps {
+/** The current active step. Counts up from 1. */
+export declare type StepCursor = number;
+/** An updater function the state controlling which step is active. */
+export declare type SetStepCursor = (step: number) => void;
+/** The total number of steps. */
+export declare type StepCount = number;
+/** The index of the current step in the steps array. */
+export declare type StepIndex = number;
+/** Indicates that the FullScreenStepper is showing the last step in the steps array. */
+export declare type IsFinalStep = boolean;
+export declare type ActionBarActionCallbackArgs = {
+    /** The current step object. */
+    step: StepperStep;
+    /** The total number of steps. */
+    stepCount: number;
+    /** The index of the current step in the steps array. */
+    stepIndex: number;
+    /** An updater function the state controlling which step is active. */
+    setStepCursor: (cursor: number) => void;
+    /** The steps prop that is passed into the FullScreenStepper */
+    steps: Array<StepperStep>;
+};
+export declare type ActionBarAction = {
+    onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, callbackArgs: ActionBarActionCallbackArgs) => void;
+    props: ButtonProps;
+    text: string;
+};
+export declare type StepperActionBar = {
+    /** Custom actions for a given step. Will appear as additional Button components. */
+    actions?: Array<ActionBarAction>;
+    /** Override for "Cancel" button. */
+    cancelButtonProps?: ButtonProps;
+    /** Custom text for "Cancel" button. */
+    cancelButtonText?: string;
+    /** Custom text for "Finish" button. */
+    finishButtonText?: string;
+    /** Override for "Next" button. */
+    nextButtonProps?: ButtonProps;
+    /** Custom text for "Next" button. */
+    nextButtonText?: string;
+    /** Override for "Previous" button. */
+    previousButtonProps?: ButtonProps;
+    /** Custom text for "Previous" button. */
+    previousButtonText?: string;
+    /** Text for the optional "Status Text" region. */
+    statusText?: string;
+};
+export declare type StepperStep = {
+    /** Group of props for modifying the ActionBar region of FullScreenStepper. */
+    actionBar?: StepperActionBar;
+    /** When false; disables the ActionBar of a step */
+    displayActionBar?: boolean;
+    /** The name of a given step. Used to match with a provided content component. */
+    name: string;
+    /** Text displayed as the title of a step. */
+    title: string;
+};
+export declare type FullScreenStepperProps = DialogProps & {
     /** Configurations for each step. Modifies elements outside the FullScreenStepper content area. */
-    steps: Array<FullScreenStepperSubProps.Step>;
+    steps: Array<StepperStep>;
     /** Will be used to initialize a React context which can be accessed with the useFullScreenStepperHook. */
     context?: Record<string, unknown>;
     /** Specifies which step the dialog will initialize at. */
@@ -56,13 +76,13 @@ export interface FullScreenStepperProps extends DialogProps {
     /** When true; the stepper will update it's internal state to render the first step after a user closes the stepper. */
     resetStepCursorOnClose?: boolean;
     /** Callback triggered when the "Cancel" button is clicked. Called with `step`, `steps`, and `stepIndex`. */
-    onCancel?: (args: FullScreenStepperTypes.EventCallbackArgs) => void;
+    onCancel?: (args: ActionBarActionCallbackArgs) => void;
     /** Callback triggered when the close icon button is clicked. Called with `step`, `steps`, and `stepIndex`. */
-    onClose?: (args: FullScreenStepperTypes.EventCallbackArgs) => void;
+    onClose?: (args: ActionBarActionCallbackArgs) => void;
     /** Callback triggered when the "Finish" button is clicked. Called with `step`, `steps`, and `stepIndex`. */
-    onFinish?: (args: FullScreenStepperTypes.EventCallbackArgs) => void;
+    onFinish?: (args: ActionBarActionCallbackArgs) => void;
     /** Callback triggered when the "Next" button is clicked. Called with `step`, `steps`, and `stepIndex`. */
-    onNext?: (args: FullScreenStepperTypes.EventCallbackArgs) => void;
+    onNext?: (args: ActionBarActionCallbackArgs) => void;
     /** Callback triggered when the "Previous" button is clicked. Called with `step`, `steps`, and `stepIndex`. */
-    onPrevious?: (args: FullScreenStepperTypes.EventCallbackArgs) => void;
-}
+    onPrevious?: (args: ActionBarActionCallbackArgs) => void;
+};

package/build/cjs/components/FullScreenStepper/index.d.ts

@@ -1,3 +1,3 @@
-export { FullScreenStepper as default } from './FullScreenStepper';
+export { FullScreenStepper } from './FullScreenStepper';
 export { FullScreenStepperContext, FullScreenStepperContextValue } from './FullScreenStepperContext';
-export { FullScreenStepperProps } from './FullScreenStepperProps';
+export * from './FullScreenStepperProps';

package/build/cjs/components/FullScreenStepperActions/FullScreenStepperActionsProps.d.ts

@@ -1,18 +1,17 @@
-import { FullScreenStepperSubProps } from '../FullScreenStepper/FullScreenStepperProps';
-import { FullScreenStepperTypes } from '../FullScreenStepper/types';
-export interface FullScreenStepperActionsProps extends Partial<FullScreenStepperSubProps.ActionBar> {
+import { ActionBarActionCallbackArgs, SetStepCursor, StepCount, StepCursor, StepperActionBar } from '../FullScreenStepper/FullScreenStepperProps';
+export interface FullScreenStepperActionsProps extends Partial<StepperActionBar> {
     /** The callback args for custom actions */
-    callbackArgs: FullScreenStepperTypes.EventCallbackArgs;
+    callbackArgs: ActionBarActionCallbackArgs;
     /** When false; hides the "Cancel" button */
     displayCancelButton: boolean;
     /** When false; hides the "Previous" button */
     displayPreviousButton: boolean;
     /** The total number of steps */
-    stepCount: FullScreenStepperTypes.StepCount;
+    stepCount: StepCount;
     /** The current value of step cursor */
-    stepCursor: FullScreenStepperTypes.StepCursor;
+    stepCursor: StepCursor;
     /** The setter for value of step cursor */
-    setStepCursor: FullScreenStepperTypes.SetStepCursor;
+    setStepCursor: SetStepCursor;
     /** Callback triggered when the "Cancel" button is clicked. */
     handleCancelClick?: () => Promise<void>;
     /** Callback triggered when the "Next" button is clicked. */

package/build/cjs/components/FullScreenStepperActions/util/StepperActionsCancelButton.d.ts

@@ -1,9 +1,9 @@
-import { FullScreenStepperTypes } from '../../FullScreenStepper/types';
 import { FC } from 'react';
 import { ButtonProps } from '../../Button';
+import { SetStepCursor, StepCursor } from '../../FullScreenStepper/FullScreenStepperProps';
 export declare const StepperActionsCancelButton: FC<{
-    setStepCursor: FullScreenStepperTypes.SetStepCursor;
-    stepCursor: FullScreenStepperTypes.StepCursor;
+    setStepCursor: SetStepCursor;
+    stepCursor: StepCursor;
     cancelButtonText?: string;
     cancelButtonProps?: ButtonProps;
     handleCancelClick?: () => Promise<void>;

package/build/cjs/components/FullScreenStepperActions/util/StepperActionsNextButton.d.ts

@@ -1,12 +1,12 @@
-import { FullScreenStepperTypes } from '../../FullScreenStepper/types';
 import { FC } from 'react';
 import { ButtonProps } from '../../Button';
+import { SetStepCursor, StepCount, StepCursor } from '../../FullScreenStepper/FullScreenStepperProps';
 export declare const StepperActionsNextButton: FC<{
     handleNextClick: () => Promise<void>;
     nextButtonProps?: ButtonProps;
-    setStepCursor: FullScreenStepperTypes.SetStepCursor;
-    stepCursor: FullScreenStepperTypes.StepCursor;
-    stepCount: FullScreenStepperTypes.StepCount;
+    setStepCursor: SetStepCursor;
+    stepCursor: StepCursor;
+    stepCount: StepCount;
     finishButtonText?: string;
     nextButtonText?: string;
 }>;

package/build/cjs/components/FullScreenStepperActions/util/StepperActionsPreviousButton.d.ts

@@ -1,11 +1,11 @@
-import { FullScreenStepperTypes } from '../../FullScreenStepper/types';
 import { FC } from 'react';
 import { ButtonProps } from '../../Button';
+import { SetStepCursor, StepCursor } from '../../FullScreenStepper/FullScreenStepperProps';
 export declare const StepperActionsPreviousButton: FC<{
     previousButtonText?: string;
-    stepCursor: FullScreenStepperTypes.StepCursor;
+    stepCursor: StepCursor;
     handlePreviousClick: () => Promise<void>;
     previousButtonProps?: ButtonProps;
-    setStepCursor: FullScreenStepperTypes.SetStepCursor;
+    setStepCursor: SetStepCursor;
     displayPreviousButton: boolean;
 }>;

package/build/cjs/components/FullScreenStepperActions/util/augmentButtonProps.d.ts

@@ -1,5 +1,5 @@
-import { FullScreenStepperTypes } from '../../FullScreenStepper/types';
 import { ButtonProps } from '../../Button';
+import { SetStepCursor, StepCursor } from '../../FullScreenStepper/FullScreenStepperProps';
 export declare const augmentButtonProps: (internalProps: {
     onClick?: () => Promise<void>;
-}, externalProps: ButtonProps<"button"> | undefined, setStepCursor: FullScreenStepperTypes.SetStepCursor, stepCursor: FullScreenStepperTypes.StepCursor, incrementor: number) => ButtonProps;
+}, externalProps: ButtonProps<"button"> | undefined, setStepCursor: SetStepCursor, stepCursor: StepCursor, incrementor: number) => ButtonProps;

package/build/cjs/components/FullScreenStepperHeader/FullScreenStepperHeaderProps.d.ts

@@ -1,8 +1,7 @@
-import { FullScreenStepperTypes } from '../FullScreenStepper/types';
-import { FullScreenStepperSubProps } from '../FullScreenStepper/FullScreenStepperProps';
+import { StepCount, StepCursor, StepperStep } from '../FullScreenStepper/FullScreenStepperProps';
 export interface FullScreenStepperHeaderProps {
-    stepCursor: FullScreenStepperTypes.StepCursor;
-    stepCount: FullScreenStepperTypes.StepCount;
-    step: FullScreenStepperSubProps.Step;
+    stepCursor: StepCursor;
+    stepCount: StepCount;
+    step: StepperStep;
     onClose: () => void;
 }

package/build/cjs/components/FullScreenStepperProgress/FullScreenStepperProgressProps.d.ts

@@ -1,5 +1,5 @@
-import { FullScreenStepperTypes } from '../FullScreenStepper/types';
+import { StepCount, StepCursor } from '../FullScreenStepper/FullScreenStepperProps';
 export interface FullScreenStepperProgressProps {
-    stepCursor: FullScreenStepperTypes.StepCursor;
-    stepCount: FullScreenStepperTypes.StepCount;
+    stepCursor: StepCursor;
+    stepCount: StepCount;
 }

package/build/cjs/components/Toast/ToastStyles.d.ts

@@ -1,2 +1 @@
-import { ToastProps } from './ToastProps';
-export declare const useToastStyles: (props: ToastProps) => import("@material-ui/styles").ClassNameMap<string>;
+export declare const useToastStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<string>;

package/build/cjs/components/index.d.ts

@@ -4,24 +4,24 @@ export { default as AlertDialogHeader } from './AlertDialogHeader';
 export { default as AlertTitle, AlertTitleProps } from './AlertTitle';
 export { default as Button, ButtonProps } from './Button';
 export { default as ButtonGroup, ButtonGroupProps } from './ButtonGroup';
+export { Dialog, DialogProps } from './Dialog';
+export { DialogActions, DialogActionsProps } from './DialogActions';
+export { DialogContent, DialogContentProps } from './DialogContent';
+export { DialogTitle, DialogTitleProps } from './DialogTitle';
 export { default as FeatureIntro, FeatureIntroProps } from './FeatureIntro';
-export { default as FullScreenStepper, FullScreenStepperProps, FullScreenStepperContext } from './FullScreenStepper';
+export * from './FullScreenStepper';
 export { default as FullScreenStepperActions, FullScreenStepperActionsProps } from './FullScreenStepperActions';
 export { default as FullScreenStepperContent } from './FullScreenStepperContent';
-export { default as SelectableCard, SelectableCardProps } from './SelectableCard';
-export { default as Toast, ToastProps } from './Toast';
-export { DialogTitle, DialogTitleProps } from './DialogTitle';
-export { DialogActions, DialogActionsProps } from './DialogActions';
-export { Dialog, DialogProps } from './Dialog';
-export { DialogContent, DialogContentProps } from './DialogContent';
+export { List, ListProps } from './List';
 export { Page } from './Page';
 export { PageBody } from './PageBody';
 export { PageSection } from './PageSection';
-export { PageSections } from './PageSections';
 export { PageSectionHead } from './PageSectionHead';
+export { PageSections } from './PageSections';
 export { PageSectionTitle } from './PageSectionTitle';
-export { SettingsIndexCardGroup } from './SettingsIndexCardGroup';
+export { default as SelectableCard, SelectableCardProps } from './SelectableCard';
 export { SettingsIndexCard, SettingsIndexCardProps } from './SettingsIndexCard';
-export { List, ListProps } from './List';
+export { SettingsIndexCardGroup } from './SettingsIndexCardGroup';
 export { StandardListItem, StandardListItemProps } from './StandardListItem';
-export { Switch, SwitchProps, TextField, TextFieldProps, MenuItem, MenuItemProps, CircularProgress, CircularProgressProps, } from '@material-ui/core';
+export { default as Toast, ToastProps } from './Toast';
+export { CircularProgress, CircularProgressProps, MenuItem, MenuItemProps, Switch, SwitchProps, TextField, TextFieldProps, } from '@material-ui/core';

package/build/cjs/index.js

@@ -338,6 +338,19 @@ var ButtonGroup = React.forwardRef(function (props, ref) {
 });
 ButtonGroup.displayName = 'ButtonGroup';
 
+var useStyles$4 = core.makeStyles(function (_a) {
+    var palette = _a.palette;
+    return ({
+        root: {
+            background: palette.grey['100'],
+        },
+    });
+});
+var DialogActions = function (props) {
+    var classes = useStyles$4(props);
+    return React.createElement(commonUi.DialogActions, tslib.__assign({ classes: classes }, props));
+};
+
 var useFeatureIntroStyles = core.makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
@@ -429,14 +442,14 @@ var StepperActionsPreviousButton = function (props) {
     return displayPreviousButton ? (React.createElement(Button, tslib.__assign({ variant: "tertiary", disabled: stepCursor === 1 }, augmentedPreviousButtonProps), previousButtonText || 'previous')) : null;
 };
 
-var useStyles$4 = core.makeStyles({
+var useStyles$3 = core.makeStyles({
     root: {
         fontStyle: 'italic',
     },
 });
 var StepperActionsStatusText = function (props) {
     var statusText = props.statusText;
-    var classes = useStyles$4(props);
+    var classes = useStyles$3(props);
     return statusText ? (React.createElement(commonUi.Typography, { classes: { root: classes.root }, variant: "body2" }, statusText)) : null;
 };
 
@@ -646,98 +659,31 @@ var FullScreenStepperContent = function (props) {
     return (React.createElement(commonUi.Box, tslib.__assign({ py: 8 }, boxProps), props.children));
 };
 
-var useSelectableCardStyles = core.makeStyles(function (theme) {
-    var _a = theme.palette, info = _a.info, grey = _a.grey, getContrastText = _a.getContrastText, spacing = theme.spacing;
-    var selectedBackgroundColor = core.lighten(theme.palette.info.light, 0.9);
-    var backgroundColor = theme.palette.surface.light;
-    return {
-        root: {
-            position: 'relative',
-            border: function (_a) {
-                var selected = _a.selected;
-                return (selected ? "1px solid " + info.light : "1px solid " + grey[700]);
-            },
-            backgroundColor: function (_a) {
-                var selected = _a.selected;
-                return (selected ? selectedBackgroundColor : backgroundColor);
-            },
-            color: function (_a) {
-                var selected = _a.selected;
-                return (selected ? getContrastText(selectedBackgroundColor) : getContrastText(backgroundColor));
-            },
-            transition: 'none',
-        },
-        cardContent: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: spacing(2.5),
-        },
-        icon: {
-            position: 'absolute',
-            top: spacing(2),
-            left: spacing(2),
-            color: function (_a) {
-                var selected = _a.selected;
-                return (selected ? info.main : grey[700]);
-            },
+var useStyles$2 = core.makeStyles(function (theme) { return ({
+    root: {
+        '&$uncontained > li > *:first-child': {
+            background: theme.palette.background.paper,
+            borderRadius: theme.spacing(1),
         },
-        focusHighlight: {
-            backgroundColor: 'inherit',
+        '& > li > *:first-child': {
+            borderBottom: "1px solid " + theme.palette.grey[300],
         },
-    };
-});
-
-var SelectableCard = function (props) {
-    var children = props.children, selectedProp = props.selected, _a = props.selection, selection = _a === void 0 ? [] : _a, onClick = props.onClick, value = props.value, labelId = props.labelId, CardActionAreaProps = props.CardActionAreaProps, muiProps = tslib.__rest(props, ["children", "selected", "selection", "onClick", "value", "labelId", "CardActionAreaProps"]);
-    var selected = typeof selectedProp === 'boolean' ? selectedProp : selection.includes(value);
-    var classes = useSelectableCardStyles(tslib.__assign(tslib.__assign({}, props), { selected: selected }));
-    var handleClick = function () {
-        onClick(value);
-    };
-    return (React.createElement(commonUi.Card, tslib.__assign({ classes: { root: classes.root } }, muiProps),
-        React.createElement(commonUi.CardActionArea, tslib.__assign({ onClick: handleClick, classes: { focusHighlight: classes.focusHighlight }, role: "checkbox", "aria-checked": selected, "aria-labelledby": labelId }, CardActionAreaProps),
-            React.createElement(commonUi.Icon, { className: classes.icon, icon: selected ? webIcons.CheckCircle : webIcons.Circle, size: "medium" }),
-            React.createElement(commonUi.CardContent, { classes: { root: classes.cardContent } }, children))));
-};
-SelectableCard.displayName = 'SelectableCard';
-
-var useToastStyles = core.makeStyles(function (theme) { return ({
-    root: {
-        boxSizing: 'border-box',
-        padding: theme.spacing(0, 1.5),
-        /** TODO: design to define responsive width value. */
-        width: '350px',
-        '& > div:first-child': {
-            alignItems: 'center',
+        '& > li:last-child > *:first-child': {
+            borderBottom: 'none',
         },
     },
+    uncontained: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+    },
 }); });
 
-var Toast = function (props) {
-    var children = props.children, AlertProps = props.AlertProps, severity = props.severity, muiProps = tslib.__rest(props, ["children", "AlertProps", "severity"]);
-    var classes = useToastStyles(props);
-    return (React.createElement(core.Snackbar, tslib.__assign({ ClickAwayListenerProps: { mouseEvent: false } }, muiProps),
-        React.createElement(Alert, tslib.__assign({ className: classes.root, action: null, severity: severity }, AlertProps), children)));
-};
-Toast.defaultProps = {
-    AlertProps: {},
-    autoHideDuration: 5000,
-};
-Toast.displayName = 'Toast';
-
-var useStyles$3 = core.makeStyles(function (_a) {
-    var palette = _a.palette;
-    return ({
-        root: {
-            background: palette.grey['100'],
-        },
-    });
-});
-var DialogActions = function (props) {
-    var classes = useStyles$3(props);
-    return React.createElement(commonUi.DialogActions, tslib.__assign({ classes: classes }, props));
+var List = function (props) {
+    var _a;
+    var children = props.children, uncontained = props.uncontained, className = props.className, restProps = tslib.__rest(props, ["children", "uncontained", "className"]);
+    var classes = useStyles$2(props);
+    return (React.createElement(core.List, tslib.__assign({ classes: classes, className: classNames((_a = {}, _a[classes.uncontained] = uncontained, _a), className) }, restProps), children));
 };
 
 var Page = function (props) {
@@ -773,18 +719,18 @@ var PageSection = React.forwardRef(function (props, ref) {
 });
 PageSection.displayName = 'PageSection';
 
-var PageSections = function (props) {
-    var children = props.children, restProps = tslib.__rest(props, ["children"]);
-    return (React.createElement(commonUi.Box, tslib.__assign({ display: "flex", flexDirection: "column", gridGap: 16 }, restProps), children));
-};
-
 var PageSectionHead = function (props) {
     var children = props.children, restProps = tslib.__rest(props, ["children"]);
     var theme = core.useTheme();
     return (React.createElement(commonUi.Box, tslib.__assign({ fontSize: theme.typography.h5.fontSize, mb: "1em", display: "flex", justifyContent: "space-between" }, restProps), children));
 };
 
-var useStyles$2 = core.makeStyles(function () { return ({
+var PageSections = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    return (React.createElement(commonUi.Box, tslib.__assign({ display: "flex", flexDirection: "column", gridGap: 16 }, restProps), children));
+};
+
+var useStyles$1 = core.makeStyles(function () { return ({
     gutterBottom: {
         marginBottom: '1em',
     },
@@ -792,14 +738,66 @@ var useStyles$2 = core.makeStyles(function () { return ({
 
 var PageSectionTitle = function (props) {
     var children = props.children, restProps = tslib.__rest(props, ["children"]);
-    var classes = useStyles$2();
+    var classes = useStyles$1();
     return (React.createElement(commonUi.Typography, tslib.__assign({ classes: classes, gutterBottom: true, variant: "h5" }, restProps), children));
 };
 
-var SettingsIndexCardGroup = function (props) {
-    var children = props.children, restProps = tslib.__rest(props, ["children"]);
-    return (React.createElement(commonUi.Box, tslib.__assign({ display: "grid", gridGap: 16, gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))" }, restProps), children));
+var useSelectableCardStyles = core.makeStyles(function (theme) {
+    var _a = theme.palette, info = _a.info, grey = _a.grey, getContrastText = _a.getContrastText, spacing = theme.spacing;
+    var selectedBackgroundColor = core.lighten(theme.palette.info.light, 0.9);
+    var backgroundColor = theme.palette.surface.light;
+    return {
+        root: {
+            position: 'relative',
+            border: function (_a) {
+                var selected = _a.selected;
+                return (selected ? "1px solid " + info.light : "1px solid " + grey[700]);
+            },
+            backgroundColor: function (_a) {
+                var selected = _a.selected;
+                return (selected ? selectedBackgroundColor : backgroundColor);
+            },
+            color: function (_a) {
+                var selected = _a.selected;
+                return (selected ? getContrastText(selectedBackgroundColor) : getContrastText(backgroundColor));
+            },
+            transition: 'none',
+        },
+        cardContent: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginTop: spacing(2.5),
+        },
+        icon: {
+            position: 'absolute',
+            top: spacing(2),
+            left: spacing(2),
+            color: function (_a) {
+                var selected = _a.selected;
+                return (selected ? info.main : grey[700]);
+            },
+        },
+        focusHighlight: {
+            backgroundColor: 'inherit',
+        },
+    };
+});
+
+var SelectableCard = function (props) {
+    var children = props.children, selectedProp = props.selected, _a = props.selection, selection = _a === void 0 ? [] : _a, onClick = props.onClick, value = props.value, labelId = props.labelId, CardActionAreaProps = props.CardActionAreaProps, muiProps = tslib.__rest(props, ["children", "selected", "selection", "onClick", "value", "labelId", "CardActionAreaProps"]);
+    var selected = typeof selectedProp === 'boolean' ? selectedProp : selection.includes(value);
+    var classes = useSelectableCardStyles(tslib.__assign(tslib.__assign({}, props), { selected: selected }));
+    var handleClick = function () {
+        onClick(value);
+    };
+    return (React.createElement(commonUi.Card, tslib.__assign({ classes: { root: classes.root } }, muiProps),
+        React.createElement(commonUi.CardActionArea, tslib.__assign({ onClick: handleClick, classes: { focusHighlight: classes.focusHighlight }, role: "checkbox", "aria-checked": selected, "aria-labelledby": labelId }, CardActionAreaProps),
+            React.createElement(commonUi.Icon, { className: classes.icon, icon: selected ? webIcons.CheckCircle : webIcons.Circle, size: "medium" }),
+            React.createElement(commonUi.CardContent, { classes: { root: classes.cardContent } }, children))));
 };
+SelectableCard.displayName = 'SelectableCard';
 
 var useSettingsIndexCardStyles = core.makeStyles(function (theme) { return ({
     cardRoot: {
@@ -834,31 +832,9 @@ var SettingsIndexCard = React.forwardRef(function (props, ref) {
 });
 SettingsIndexCard.displayName = 'SettingsIndexCard';
 
-var useStyles$1 = core.makeStyles(function (theme) { return ({
-    root: {
-        '&$uncontained > li > *:first-child': {
-            background: theme.palette.background.paper,
-            borderRadius: theme.spacing(1),
-        },
-        '& > li > *:first-child': {
-            borderBottom: "1px solid " + theme.palette.grey[300],
-        },
-        '& > li:last-child > *:first-child': {
-            borderBottom: 'none',
-        },
-    },
-    uncontained: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 16,
-    },
-}); });
-
-var List = function (props) {
-    var _a;
-    var children = props.children, uncontained = props.uncontained, className = props.className, restProps = tslib.__rest(props, ["children", "uncontained", "className"]);
-    var classes = useStyles$1(props);
-    return (React.createElement(core.List, tslib.__assign({ classes: classes, className: classNames((_a = {}, _a[classes.uncontained] = uncontained, _a), className) }, restProps), children));
+var SettingsIndexCardGroup = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    return (React.createElement(commonUi.Box, tslib.__assign({ display: "grid", gridGap: 16, gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))" }, restProps), children));
 };
 
 var useStyles = core.makeStyles(function (theme) { return ({
@@ -894,6 +870,26 @@ var StandardListItem = function (props) {
                 React.createElement(commonUi.Icon, { icon: secondaryAction.Icon }))))));
 };
 
+var useToastStyles = core.makeStyles(function (theme) { return ({
+    root: {
+        boxSizing: 'border-box',
+        padding: theme.spacing(0, 1.5),
+        /** TODO: design to define responsive width value. */
+        width: '350px',
+        '& > div:first-child': {
+            alignItems: 'center',
+        },
+    },
+}); });
+
+var Toast = function (_a) {
+    var _b = _a.AlertProps, AlertProps = _b === void 0 ? {} : _b, _c = _a.autoHideDuration, autoHideDuration = _c === void 0 ? 5000 : _c, children = _a.children, severity = _a.severity, muiProps = tslib.__rest(_a, ["AlertProps", "autoHideDuration", "children", "severity"]);
+    var classes = useToastStyles();
+    return (React.createElement(core.Snackbar, tslib.__assign({ ClickAwayListenerProps: { mouseEvent: false }, autoHideDuration: autoHideDuration }, muiProps),
+        React.createElement(Alert, tslib.__assign({ className: classes.root, action: null, severity: severity }, AlertProps), children)));
+};
+Toast.displayName = 'Toast';
+
 var useFullScreenStepperContext = function () { return React.useContext(FullScreenStepperContext); };
 
 /**