@popmenu/admin-ui 0.126.1 → 0.126.2

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

@@ -0,0 +1,2 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export declare const PageSections: (props: PropsWithChildren<HTMLAttributes<HTMLElement>>) => JSX.Element;

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

@@ -0,0 +1 @@
+export { PageSections } from './PageSections';

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { SelectableCardProps } from './SelectableCardProps';
+export declare const SelectableCard: FC<SelectableCardProps>;

package/build/cjs/components/SelectableCard/SelectableCardProps.d.ts

@@ -0,0 +1,17 @@
+import { CardActionAreaProps, CardProps as MuiCardProps } from '@material-ui/core';
+import { Ref } from 'react';
+export interface SelectableCardProps extends Omit<MuiCardProps, 'onClick'> {
+    /** Id of the DOM node serving as the label of the input. */
+    labelId: string;
+    /** Sets card selection state. */
+    selected?: boolean;
+    /** A reference to selection state managing a group of SelectableCards. */
+    selection?: Array<string>;
+    /** The value of a card in respects to selection state. */
+    value: string;
+    /** Callback for when the SelectableCard is clicked. */
+    onClick: (value: string) => void;
+    /** Props passed to the CardActionArea rendered by SelectableCard. */
+    CardActionAreaProps?: CardActionAreaProps;
+    ref?: (instance: HTMLDivElement) => void | Ref<HTMLDivElement> | null;
+}

package/build/cjs/components/SelectableCard/SelectableCardStyles.d.ts

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

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

@@ -0,0 +1,2 @@
+export { SelectableCard as default } from './SelectableCard';
+export { SelectableCardProps } from './SelectableCardProps';

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SettingsIndexCardProps } from './SettingsIndexCardProps';
+interface SettingsIndexCardType {
+    <C extends React.ElementType = 'a'>(props: SettingsIndexCardProps<C> & {
+        component?: C;
+    }): React.ReactElement;
+    defaultProps?: Partial<SettingsIndexCardProps>;
+    displayName?: string;
+}
+export declare const SettingsIndexCard: SettingsIndexCardType;
+export {};

package/build/cjs/components/SettingsIndexCard/SettingsIndexCardProps.d.ts

@@ -0,0 +1,20 @@
+import { ButtonBaseProps } from '@material-ui/core';
+import { ThemeColors } from '@popmenu/common-ui';
+import React from 'react';
+export declare type SettingsIndexCardProps<C extends React.ElementType = 'button'> = ButtonBaseProps<C, {
+    component?: C;
+}> & {
+    /** The icon from @popmenu/web-icons to be rendered */
+    Icon?: React.FC<React.SVGProps<SVGSVGElement>>;
+    /** Sets the title of the card */
+    title: string;
+    /** Displays the given card description */
+    description?: string;
+    /** Event callback for the Card click event  */
+    onClick?: (event: any) => void;
+    /** Sets the text and color of the label  */
+    statusLabel?: {
+        text: string;
+        color: ThemeColors;
+    };
+};

package/build/cjs/components/SettingsIndexCard/SettingsIndexCardStyles.d.ts

@@ -0,0 +1,2 @@
+import { SettingsIndexCardProps } from './SettingsIndexCardProps';
+export declare const useSettingsIndexCardStyles: (props: SettingsIndexCardProps<"button">) => import("@material-ui/styles").ClassNameMap<string>;

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

@@ -0,0 +1,2 @@
+export { SettingsIndexCard } from './SettingsIndexCard';
+export { SettingsIndexCardProps } from './SettingsIndexCardProps';

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BoxProps } from '@popmenu/common-ui';
+export declare const SettingsIndexCardGroup: (props: BoxProps) => JSX.Element;

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

@@ -0,0 +1 @@
+export { SettingsIndexCardGroup } from './SettingsIndexCardGroup';

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { StandardListItemProps } from './StandardListItemProps';
+/**
+ * TODO
+ * - clean props util
+ * - Avatar size and shape
+ */
+export declare const StandardListItem: (props: StandardListItemProps) => JSX.Element;
+export declare const Test: () => JSX.Element;

package/build/cjs/components/StandardListItem/StandardListItemProps.d.ts

@@ -0,0 +1,25 @@
+import { FC, MouseEvent as ReactMouseEvent, SVGProps } from 'react';
+import { ListItemProps } from '@material-ui/core';
+export interface StandardListItemProps extends Omit<ListItemProps, 'onClick'> {
+    title: string;
+    itemId?: string | number;
+    meta?: string;
+    body?: string;
+    image?: {
+        src?: string;
+        alt?: string;
+        Icon?: FC<SVGProps<SVGSVGElement>>;
+        shape?: 'circle' | 'square';
+    };
+    status?: {
+        text: string;
+        severity?: string;
+        Icon?: FC<SVGProps<SVGSVGElement>>;
+    };
+    secondaryAction?: {
+        Icon: FC<SVGProps<SVGSVGElement>>;
+        'aria-label': string;
+        onClick: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>, listItem: StandardListItemProps) => void;
+    };
+    onClick?: (event: ReactMouseEvent<HTMLButtonElement | HTMLLIElement, MouseEvent>, listItem: StandardListItemProps) => void;
+}

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

@@ -0,0 +1,2 @@
+export { StandardListItem } from './StandardListItem';
+export { StandardListItemProps } from './StandardListItemProps';

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ToastProps } from './ToastProps';
+export declare const Toast: FC<ToastProps>;

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

@@ -0,0 +1,10 @@
+import { SnackbarProps } from '@material-ui/core';
+import { AlertProps as MuiAlertProps } from '@material-ui/lab';
+export interface ToastProps extends SnackbarProps {
+    /** Applied to the built in [Alert](?path=/docs/admin-ui-alert--props) Component. */
+    AlertProps?: Omit<MuiAlertProps, 'ref'>;
+    /** The severity of the Alert. */
+    severity: 'error' | 'warning' | 'info' | 'success';
+    /** @ignore */
+    ref?: SnackbarProps['ref'];
+}

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

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

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

@@ -0,0 +1,2 @@
+export { Toast as default } from './Toast';
+export { ToastProps } from './ToastProps';

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

@@ -0,0 +1,27 @@
+export { default as Alert, AlertProps } from './Alert';
+export { default as AlertDialog, AlertDialogProps } from './AlertDialog';
+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 { default as FeatureIntro, FeatureIntroProps } from './FeatureIntro';
+export { default as FullScreenStepper, FullScreenStepperProps, FullScreenStepperContext } 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 { Page } from './Page';
+export { PageBody } from './PageBody';
+export { PageSection } from './PageSection';
+export { PageSections } from './PageSections';
+export { PageSectionHead } from './PageSectionHead';
+export { PageSectionTitle } from './PageSectionTitle';
+export { SettingsIndexCardGroup } from './SettingsIndexCardGroup';
+export { SettingsIndexCard, SettingsIndexCardProps } from './SettingsIndexCard';
+export { List, ListProps } from './List';
+export { StandardListItem, StandardListItemProps } from './StandardListItem';
+export { Switch, SwitchProps, TextField, TextFieldProps, MenuItem, MenuItemProps, CircularProgress, CircularProgressProps, } from '@material-ui/core';

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

@@ -0,0 +1,3 @@
+export { useFullScreenStepperContext } from './useFullScreenStepperContext';
+export { useSelectableCard } from './useSelectableCard';
+export { useDialog } from './useDialog';

package/build/cjs/hooks/useDialog.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const useDialog: () => ({
+    onClick: () => void;
+} | {
+    open: boolean;
+    onClose: () => void;
+} | {
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    toggle: () => void;
+    close: () => void;
+})[];

package/build/cjs/hooks/useFullScreenStepperContext.d.ts

@@ -0,0 +1,2 @@
+import { FullScreenStepperContextValue } from '../components/FullScreenStepper';
+export declare const useFullScreenStepperContext: () => FullScreenStepperContextValue;

package/build/cjs/hooks/useSelectableCard.d.ts

@@ -0,0 +1,24 @@
+interface Config {
+    defaultSelected?: Array<string>;
+    selectionMode?: 'single' | 'multi';
+    maxSelectionCount?: number;
+}
+interface Result {
+    card: {
+        onClick: (value: string) => void;
+        selection: Array<string>;
+    };
+    selection: Array<string>;
+    setSelection: (selection: Array<string>) => void;
+}
+/**
+ * Manages state for SelectableCards.
+ * @param {Config} config - Configures the hook behavior.
+ * @param {string|string[]} [config.defaultSelected = []] - Initializes state with the provided value.
+ * @param {string} [config.selectionMode = 'single'] - Determines selection behavior. 'single' provides radio style
+ * selection. 'multi' provides checkbox style selection.
+ * @param {number} [config.maxSelectionCount] - A number to determine the maximum amount of cards to be selected.
+ * @returns {HookResult} An object with click handler and current state. Spread into a SelectableCard to use.
+ */
+export declare const useSelectableCard: (config?: Config) => Result;
+export {};

package/build/cjs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './hooks';
+export * from './theme';

package/build/{index.js → cjs/index.js}

@@ -4,16 +4,11 @@ var tslib = require('tslib');
 var React = require('react');
 var commonUi = require('@popmenu/common-ui');
 var webIcons = require('@popmenu/web-icons');
-var styles = require('@material-ui/core/styles');
 var core = require('@material-ui/core');
-var MuiAlertTitle = require('@material-ui/lab/AlertTitle');
-var Box = require('@material-ui/core/Box');
-var Dialog = require('@material-ui/core/Dialog');
-var MuiSnackbar = require('@material-ui/core/Snackbar');
+var lab = require('@material-ui/lab');
 var classNames = require('classnames');
-var createTheme = require('@material-ui/core/styles/createTheme');
 
-var useAlertStyles = styles.makeStyles(function (theme) { return ({
+var useAlertStyles = core.makeStyles(function (theme) { return ({
     root: {
         alignItems: 'center',
         width: function (_a) {
@@ -235,7 +230,7 @@ Button.defaultProps = {
 };
 Button.displayName = 'Button';
 
-var useAlertDialogStyles = styles.makeStyles(function (theme) { return ({
+var useAlertDialogStyles = core.makeStyles(function (theme) { return ({
     cancelButton: {
         color: theme.palette.grey[700],
     },
@@ -292,7 +287,7 @@ AlertDialogHeader.displayName = 'AlertDialogHeader';
 
 var AlertTitle = function (props) {
     var children = props.children, muiProps = tslib.__rest(props, ["children"]);
-    return (React.createElement(MuiAlertTitle, tslib.__assign({}, muiProps),
+    return (React.createElement(lab.AlertTitle, tslib.__assign({}, muiProps),
         React.createElement(commonUi.Typography, { variant: "h6" },
             " ",
             children,
@@ -308,7 +303,7 @@ var getBorderColor = function (palette, variant) {
     }
     return borderColor;
 };
-var useButtonGroupStyles = styles.makeStyles(function (theme) { return ({
+var useButtonGroupStyles = core.makeStyles(function (theme) { return ({
     root: {
         boxShadow: 'none',
     },
@@ -328,7 +323,7 @@ var ButtonGroup = React.forwardRef(function (props, ref) {
     var children = props.children, _a = props.variant, variant = _a === void 0 ? 'primary' : _a, muiProps = tslib.__rest(props, ["children", "variant"]);
     var classes = useButtonGroupStyles(props);
     var derivedProps = deriveButtonProps({ variant: variant });
-    var spacing = styles.useTheme().spacing;
+    var spacing = core.useTheme().spacing;
     var childrenWithProps = React.Children.map(children, function (child, i) {
         var isFirst = i === 0 && props.orientation === 'vertical';
         var isLast = i === React.Children.toArray(children).length - 1 && props.orientation === 'vertical';
@@ -343,7 +338,7 @@ var ButtonGroup = React.forwardRef(function (props, ref) {
 });
 ButtonGroup.displayName = 'ButtonGroup';
 
-var useFeatureIntroStyles = styles.makeStyles(function (_a) {
+var useFeatureIntroStyles = core.makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -378,7 +373,7 @@ var FeatureIntro = function (props) {
 };
 FeatureIntro.displayName = 'FeatureIntro';
 
-var useFullScreenStepperActionsStyles = styles.makeStyles(function (theme) { return ({
+var useFullScreenStepperActionsStyles = core.makeStyles(function (theme) { return ({
     root: {
         position: 'sticky',
         background: 'white',
@@ -434,7 +429,7 @@ var StepperActionsPreviousButton = function (props) {
     return displayPreviousButton ? (React.createElement(Button, tslib.__assign({ variant: "tertiary", disabled: stepCursor === 1 }, augmentedPreviousButtonProps), previousButtonText || 'previous')) : null;
 };
 
-var useStyles$4 = styles.makeStyles({
+var useStyles$4 = core.makeStyles({
     root: {
         fontStyle: 'italic',
     },
@@ -485,7 +480,7 @@ var getBorderRadius = function (theme, props) {
         return theme.spacing(0.5);
     }
 };
-var useFullScreenStepperProgressStyles = styles.makeStyles(function (theme) { return ({
+var useFullScreenStepperProgressStyles = core.makeStyles(function (theme) { return ({
     progress: {
         width: function (props) { return (props.stepCursor / props.stepCount) * 100 + "%"; },
         transition: 'all 500ms',
@@ -513,7 +508,7 @@ var FullScreenStepperProgress = function (props) {
         React.createElement(commonUi.Box, { className: classes.progress })));
 };
 
-var useFullScreenStepperHeaderStyles = styles.makeStyles(function (_a) {
+var useFullScreenStepperHeaderStyles = core.makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         closeButton: {
@@ -637,11 +632,11 @@ var FullScreenStepper = function (props) {
         });
     }); };
     var content = React.Children.toArray(children).find(function (child) { return React.isValidElement(child) && child.props.name === step.name; });
-    return (React.createElement(Dialog, tslib.__assign({ fullScreen: true }, DialogProps),
+    return (React.createElement(core.Dialog, tslib.__assign({ fullScreen: true }, DialogProps),
         React.createElement(FullScreenStepperContext.Provider, { value: mergedContext },
-            React.createElement(Box, { display: "flex", flexDirection: "column", flexGrow: 1 },
+            React.createElement(core.Box, { display: "flex", flexDirection: "column", flexGrow: 1 },
                 React.createElement(FullScreenStepperHeader, { stepCount: stepCount, stepCursor: stepCursor, onClose: handleClose, step: step }),
-                React.createElement(Box, { display: "flex", mx: 6, flexGrow: 1, alignItems: "center", flexDirection: "column" }, content),
+                React.createElement(core.Box, { display: "flex", mx: 6, flexGrow: 1, alignItems: "center", flexDirection: "column" }, content),
                 displayActionBar && displayStepActionBar && (React.createElement(FullScreenStepperActions, tslib.__assign({}, step.actionBar, { callbackArgs: callbackArgs, displayCancelButton: displayCancelButton, displayPreviousButton: displayPreviousButton, stepCount: stepCount, stepCursor: stepCursor, setStepCursor: setStepCursor, handleCancelClick: handleCancelClick, handleNextClick: handleNextClick, handlePreviousClick: handlePreviousClick })))))));
 };
 FullScreenStepper.displayName = 'FullScreenStepper';
@@ -651,9 +646,9 @@ var FullScreenStepperContent = function (props) {
     return (React.createElement(commonUi.Box, tslib.__assign({ py: 8 }, boxProps), props.children));
 };
 
-var useSelectableCardStyles = styles.makeStyles(function (theme) {
+var useSelectableCardStyles = core.makeStyles(function (theme) {
     var _a = theme.palette, info = _a.info, grey = _a.grey, getContrastText = _a.getContrastText, spacing = theme.spacing;
-    var selectedBackgroundColor = styles.lighten(theme.palette.info.light, 0.9);
+    var selectedBackgroundColor = core.lighten(theme.palette.info.light, 0.9);
     var backgroundColor = theme.palette.surface.light;
     return {
         root: {
@@ -708,7 +703,7 @@ var SelectableCard = function (props) {
 };
 SelectableCard.displayName = 'SelectableCard';
 
-var useToastStyles = styles.makeStyles(function (theme) { return ({
+var useToastStyles = core.makeStyles(function (theme) { return ({
     root: {
         boxSizing: 'border-box',
         padding: theme.spacing(0, 1.5),
@@ -723,7 +718,7 @@ var useToastStyles = styles.makeStyles(function (theme) { return ({
 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(MuiSnackbar, tslib.__assign({ ClickAwayListenerProps: { mouseEvent: false } }, muiProps),
+    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 = {
@@ -806,7 +801,7 @@ var SettingsIndexCardGroup = function (props) {
     return (React.createElement(commonUi.Box, tslib.__assign({ display: "grid", gridGap: 16, gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))" }, restProps), children));
 };
 
-var useSettingsIndexCardStyles = styles.makeStyles(function (theme) { return ({
+var useSettingsIndexCardStyles = core.makeStyles(function (theme) { return ({
     cardRoot: {
         border: "1px solid " + theme.palette.grey[300],
         alignSelf: 'stretch',
@@ -955,69 +950,6 @@ var useDialog = function () {
     return [triggerProps, dialogProps, { open: open, setOpen: setOpen, toggle: toggle, close: close }];
 };
 
-var fonts = ['"Poppins"', '"sans-serif"'];
-var adminThemeTypography = {
-    htmlFontSize: 16,
-    fontFamily: fonts.join(', '),
-    h1: {
-        fontWeight: 400,
-        fontSize: '6rem',
-        lineHeight: '9rem',
-    },
-    h2: {
-        fontWeight: 400,
-        fontSize: '3.75rem',
-        lineHeight: '5.625rem',
-    },
-    h3: {
-        fontWeight: 400,
-        fontSize: '3rem',
-        lineHeight: '4.5rem',
-    },
-    h4: {
-        fontWeight: 400,
-        fontSize: '2.125rem',
-        lineHeight: '3.25rem',
-    },
-    h5: {
-        fontWeight: 500,
-        fontSize: '1.5rem',
-        lineHeight: '2.25rem',
-    },
-    h6: {
-        fontWeight: 500,
-        fontSize: '1.25rem',
-        lineHeight: '1.875rem',
-    },
-    h7: {
-        fontWeight: 400,
-        fontSize: '1.125rem',
-        lineHeight: '1.75rem',
-    },
-    body1: {
-        fontWeight: 400,
-        fontSize: '1rem',
-        lineHeight: '1.5rem',
-    },
-    body2: {
-        fontWeight: 400,
-        fontSize: '0.875rem',
-        lineHeight: '1.25rem',
-    },
-    subtitle1: {
-        fontWeight: 400,
-        fontSize: '0.75rem',
-        lineHeight: '1.125rem',
-        color: '#9E9E9E',
-    },
-    button: {
-        fontWeight: 500,
-        fontSize: '0.875rem',
-        lineHeight: '1.25rem',
-        textTransform: 'capitalize',
-    },
-};
-
 var adminThemeBreakpoints = {
     values: {
         xs: 0,
@@ -1028,6 +960,64 @@ var adminThemeBreakpoints = {
     },
 };
 
+var props = {
+    MuiSwitch: {
+        color: 'default',
+    },
+    MuiTextField: {
+        variant: 'outlined',
+    },
+};
+
+/**
+ * These theme properties should be considered legacy. Make efforts to avoid new usage as well as refactor out existing
+ * usage.
+ */
+var adminLightPlaceholder = { placeholder: 'rgba(0, 0, 0, 1)' };
+var adminDarkPlaceholder = { placeholder: 'rgba(255, 255, 255, 0.37)' };
+var adminThemeStatus = {
+    status: {
+        disabled: {
+            opacity: 0.55,
+        },
+    },
+};
+var BASE_Z_INDEX = 1100000;
+var adminThemeZIndex = {
+    zIndex: {
+        mobileStepper: BASE_Z_INDEX + 1000,
+        appBar: BASE_Z_INDEX + 1100,
+        drawer: BASE_Z_INDEX + 1200,
+        modal: BASE_Z_INDEX + 1300,
+        snackbar: BASE_Z_INDEX + 1400,
+        tooltip: BASE_Z_INDEX + 9100,
+    },
+};
+/** The defaults for MuiInputBase and MuiInputLabel can be removed once the BasicForm & 'shared' inputs have either:
+ * 1. been refactored to use secondary color.
+ * 2. been replaced with new common components.
+ *
+ * props as imported from './props' are part updated design system.
+ */
+var adminThemeDefaultProps = {
+    props: tslib.__assign(tslib.__assign({}, props), { 
+        // Legacy below
+        MuiCard: {
+            elevation: 0,
+        }, MuiTooltip: {
+            title: '',
+            placement: 'right',
+        }, MuiPaper: {
+            elevation: 0,
+        }, MuiAppBar: {
+            position: 'static',
+        }, MuiInputBase: {
+            color: 'secondary',
+        }, MuiInputLabel: {
+            color: 'secondary',
+        } }),
+};
+
 var basePalette = {
     /** Semantic Colors */
     primary: {
@@ -1157,64 +1147,6 @@ var dataVizPalette = {
     },
 };
 
-var props = {
-    MuiSwitch: {
-        color: 'default',
-    },
-    MuiTextField: {
-        variant: 'outlined',
-    },
-};
-
-/**
- * These theme properties should be considered legacy. Make efforts to avoid new usage as well as refactor out existing
- * usage.
- */
-var adminLightPlaceholder = { placeholder: 'rgba(0, 0, 0, 1)' };
-var adminDarkPlaceholder = { placeholder: 'rgba(255, 255, 255, 0.37)' };
-var adminThemeStatus = {
-    status: {
-        disabled: {
-            opacity: 0.55,
-        },
-    },
-};
-var BASE_Z_INDEX = 1100000;
-var adminThemeZIndex = {
-    zIndex: {
-        mobileStepper: BASE_Z_INDEX + 1000,
-        appBar: BASE_Z_INDEX + 1100,
-        drawer: BASE_Z_INDEX + 1200,
-        modal: BASE_Z_INDEX + 1300,
-        snackbar: BASE_Z_INDEX + 1400,
-        tooltip: BASE_Z_INDEX + 9100,
-    },
-};
-/** The defaults for MuiInputBase and MuiInputLabel can be removed once the BasicForm & 'shared' inputs have either:
- * 1. been refactored to use secondary color.
- * 2. been replaced with new common components.
- *
- * props as imported from './props' are part updated design system.
- */
-var adminThemeDefaultProps = {
-    props: tslib.__assign(tslib.__assign({}, props), { 
-        // Legacy below
-        MuiCard: {
-            elevation: 0,
-        }, MuiTooltip: {
-            title: '',
-            placement: 'right',
-        }, MuiPaper: {
-            elevation: 0,
-        }, MuiAppBar: {
-            position: 'static',
-        }, MuiInputBase: {
-            color: 'secondary',
-        }, MuiInputLabel: {
-            color: 'secondary',
-        } }),
-};
-
 var overrides = {
     MuiCssBaseline: {
         '@global': {
@@ -1246,11 +1178,74 @@ var overrides = {
     },
 };
 
+var fonts = ['"Poppins"', '"sans-serif"'];
+var adminThemeTypography = {
+    htmlFontSize: 16,
+    fontFamily: fonts.join(', '),
+    h1: {
+        fontWeight: 400,
+        fontSize: '6rem',
+        lineHeight: '9rem',
+    },
+    h2: {
+        fontWeight: 400,
+        fontSize: '3.75rem',
+        lineHeight: '5.625rem',
+    },
+    h3: {
+        fontWeight: 400,
+        fontSize: '3rem',
+        lineHeight: '4.5rem',
+    },
+    h4: {
+        fontWeight: 400,
+        fontSize: '2.125rem',
+        lineHeight: '3.25rem',
+    },
+    h5: {
+        fontWeight: 500,
+        fontSize: '1.5rem',
+        lineHeight: '2.25rem',
+    },
+    h6: {
+        fontWeight: 500,
+        fontSize: '1.25rem',
+        lineHeight: '1.875rem',
+    },
+    h7: {
+        fontWeight: 400,
+        fontSize: '1.125rem',
+        lineHeight: '1.75rem',
+    },
+    body1: {
+        fontWeight: 400,
+        fontSize: '1rem',
+        lineHeight: '1.5rem',
+    },
+    body2: {
+        fontWeight: 400,
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
+    },
+    subtitle1: {
+        fontWeight: 400,
+        fontSize: '0.75rem',
+        lineHeight: '1.125rem',
+        color: '#9E9E9E',
+    },
+    button: {
+        fontWeight: 500,
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
+        textTransform: 'capitalize',
+    },
+};
+
 var adminLightOptions = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({ themeName: 'Admin Light', palette: tslib.__assign(tslib.__assign(tslib.__assign({}, basePalette), adminLightPalette), dataVizPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography, overrides: overrides }, adminLightPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps);
-var adminLight = createTheme(adminLightOptions);
+var adminLight = core.createTheme(adminLightOptions);
 
 var adminDarkOptions = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({ themeName: 'Admin Dark', palette: tslib.__assign(tslib.__assign(tslib.__assign({}, basePalette), adminDarkPalette), dataVizPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography, overrides: overrides }, adminDarkPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps);
-var adminDark = createTheme(adminDarkOptions);
+var adminDark = core.createTheme(adminDarkOptions);
 
 Object.defineProperty(exports, "Dialog", {
     enumerable: true,