@popmenu/admin-ui 0.27.0 → 0.30.0

package/build/components/Page/Page.d.ts

@@ -1,4 +1,2 @@
-import React from 'react';
-export declare const Page: (props: {
-    children?: React.ReactNode;
-}) => JSX.Element;
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export declare const Page: (props: PropsWithChildren<HTMLAttributes<HTMLElement>>) => JSX.Element;

package/build/components/PageBody/PageBody.d.ts

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

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

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

package/build/components/PageSection/PageSection.d.ts

@@ -1,4 +1,2 @@
-import React from 'react';
-export declare const PageSection: (props: {
-    children?: React.ReactNode;
-}) => JSX.Element;
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export declare const PageSection: (props: PropsWithChildren<HTMLAttributes<HTMLElement>>) => JSX.Element;

package/build/components/PageSectionTitle/PageSectionTitle.d.ts

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

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

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

package/build/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/components/PageSections/index.d.ts

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

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SettingsIndexCardProps } from './SettingsIndexCardProps';
+export declare const SettingsIndexCard: React.ForwardRefExoticComponent<SettingsIndexCardProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,17 @@
+import { ThemeColors } from '@popmenu/common-ui/build/components/Typography/TypographyProps';
+import { ReactNode } from 'react';
+export interface SettingsIndexCardProps {
+    /** The icon from @popmenu/web-icons to be rendered */
+    Icon?: ReactNode;
+    /** 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/components/SettingsIndexCard/SettingsIndexCardStyles.d.ts

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

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

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

package/build/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/components/SettingsIndexCardGroup/index.d.ts

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

package/build/components/index.d.ts

@@ -14,5 +14,9 @@ export { DialogActions, DialogActionsProps } from './DialogActions';
 export { Dialog, DialogProps } from './Dialog';
 export { DialogContent, DialogContentProps } from './DialogContent';
 export { Page } from './Page';
-export { PageContent } from './PageContent';
+export { PageBody } from './PageBody';
 export { PageSection } from './PageSection';
+export { SettingsIndexCardGroup } from './SettingsIndexCardGroup';
+export { SettingsIndexCard, SettingsIndexCardProps } from './SettingsIndexCard';
+export { PageSections } from './PageSections';
+export { PageSectionTitle } from './PageSectionTitle';

package/build/index.es.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { createElement, forwardRef, createContext, useState, useContext } from 'react';
 import CommonAlert from '@material-ui/lab/Alert';
-import { makeStyles, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Box } from '@material-ui/core';
+import { makeStyles, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Box, ButtonBase } from '@material-ui/core';
 import '@material-ui/core/AppBar';
 import MuiAvatar from '@material-ui/core/Avatar';
 import { makeStyles as makeStyles$1, useTheme, lighten } from '@material-ui/core/styles';
@@ -175,21 +175,21 @@ function __rest(s, e) {
     return t;
 }
 
-var _path$2P;
+var _path$23;
 
-function _extends$33() { _extends$33 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$33.apply(this, arguments); }
+function _extends$3g() { _extends$3g = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3g.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$33({
+  return /*#__PURE__*/React.createElement("svg", _extends$3g({
     viewBox: "0 0 16 16",
+    fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    stroke: "currentColor",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$2P || (_path$2P = /*#__PURE__*/React.createElement("path", {
-    d: "M13.333 14v-1.333A2.667 2.667 0 0010.667 10H5.333a2.667 2.667 0 00-2.666 2.667V14M8 7.333A2.667 2.667 0 108 2a2.667 2.667 0 000 5.333z"
+    height: "1em"
+  }, props), _path$23 || (_path$23 = /*#__PURE__*/React.createElement("path", {
+    d: "M13.333 14v-1.333A2.667 2.667 0 0010.667 10H5.333a2.667 2.667 0 00-2.666 2.667V14M8 7.333A2.667 2.667 0 108 2a2.667 2.667 0 000 5.333z",
+    stroke: "currentColor"
   })));
 }
 
@@ -420,29 +420,108 @@ var Checkbox = forwardRef(function (props, ref) {
 });
 Checkbox.displayName = 'Checkbox';
 
-var useTypographyStyles = makeStyles$1(function () { return ({
-    root: function (_a) {
-        var _b;
-        var weight = _a.weight;
-        return (__assign((_b = {}, _b["& ." + iconStaticClassName] = {
-            position: 'relative',
-            top: '0.125em',
-            padding: '0 0.125em',
-            boxSizing: 'content-box',
-        }, _b), (weight && { fontWeight: (weight === 'semi-bold' && 600) || (weight === 'bold' && 700) || 400 })));
-    },
-    caption: {
-        display: 'inline',
-    },
-    overline: {
-        display: 'inline',
-    },
-}); });
+var weights = {
+    regular: 400,
+    'semi-bold': 600,
+    bold: 700,
+};
+var getColor$1 = function (theme, props) {
+    var color = props.color;
+    if (color === undefined) {
+        return undefined;
+    }
+    if (['white', 'black'].includes(color)) {
+        return theme.palette.common[color];
+    }
+    if (color.match(/^grey\.\d{3}/)) {
+        var scale = color.split('.')[1];
+        return theme.palette.grey[scale] || theme.palette.grey[900];
+    }
+    if ([
+        'primary.light',
+        'primary.dark',
+        'secondary.light',
+        'secondary',
+        'secondary.dark',
+        'info.light',
+        'info.dark',
+        'success.light',
+        'success.dark',
+        'error.light',
+        'error.dark',
+        'warning.light',
+        'warning.dark',
+    ].includes(color)) {
+        var _a = color.split('.'), paletteKey = _a[0], variant = _a[1];
+        return theme.palette[paletteKey][variant];
+    }
+    if (['success', 'info', 'error', 'warning', 'primary', 'secondary'].includes(color)) {
+        return theme.palette[color].main;
+    }
+    if (['textPrimary', 'textSecondary'].includes(color)) {
+        return theme.palette.text[color.slice(4).toLowerCase()];
+    }
+    return undefined;
+};
+var useTypographyStyles = makeStyles$1(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 || 'body1'].fontWeight);
+            },
+            _a.fontSize = function (_a) {
+                var variant = _a.variant;
+                return theme.typography[variant || 'body1'].fontSize;
+            },
+            _a.lineHeight = function (_a) {
+                var variant = _a.variant;
+                return theme.typography[variant || 'body1'].lineHeight;
+            },
+            _a.textTransform = function (_a) {
+                var variant = _a.variant;
+                return theme.typography[variant || 'body1'].textTransform;
+            },
+            _a.color = function (props) { return getColor$1(theme, props); },
+            _a),
+        caption: {
+            display: 'inline',
+        },
+        overline: {
+            display: 'inline',
+        },
+    });
+});
+
+var variantMap = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    h7: 'h6',
+    body1: 'p',
+    body2: 'p',
+    subtitle1: 'h6',
+    subtitle2: 'h6',
+    caption: 'span',
+    overline: 'span',
+};
 
 var Typography = forwardRef(function (props, ref) {
-    props.weight; var restProps = __rest(props, ["weight"]);
+    props.weight; var _a = props.variant, variant = _a === void 0 ? 'body1' : _a; props.color; var restProps = __rest(props, ["weight", "variant", "color"]);
     var classes = useTypographyStyles(props);
-    return React__default.createElement(Typography$1, __assign({ ref: ref, classes: classes }, restProps));
+    var component = variantMap[variant];
+    return React__default.createElement(Typography$1, __assign({ component: component, ref: ref, classes: classes }, restProps));
 });
 Typography.displayName = 'Typography';
 
@@ -703,113 +782,135 @@ makeStyles(function (theme) { return ({
     },
 }); });
 
-var _path$3S, _path2$19;
+var _g$1y;
 
-function _extends$46() { _extends$46 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$46.apply(this, arguments); }
+function _extends$4l() { _extends$4l = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4l.apply(this, arguments); }
 
 function SvgCheckCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$46({
+  return /*#__PURE__*/React.createElement("svg", _extends$4l({
     viewBox: "0 0 16 16",
+    fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    stroke: "currentColor",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$3S || (_path$3S = /*#__PURE__*/React.createElement("path", {
+    height: "1em"
+  }, props), _g$1y || (_g$1y = /*#__PURE__*/React.createElement("g", {
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
     d: "M14.667 7.387V8a6.667 6.667 0 11-3.954-6.093"
-  })), _path2$19 || (_path2$19 = /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     d: "M14.667 2.667L8 9.34l-2-2"
-  })));
+  }))));
 }
 
-var _path$3P;
+var _path$2O;
 
-function _extends$43() { _extends$43 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$43.apply(this, arguments); }
+function _extends$4i() { _extends$4i = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4i.apply(this, arguments); }
 
 function SvgX(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$43({
+  return /*#__PURE__*/React.createElement("svg", _extends$4i({
     viewBox: "0 0 16 16",
+    fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    stroke: "currentColor",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$3P || (_path$3P = /*#__PURE__*/React.createElement("path", {
-    d: "M12 4l-8 8m0-8l8 8"
+    height: "1em"
+  }, props), _path$2O || (_path$2O = /*#__PURE__*/React.createElement("path", {
+    d: "M12 4l-8 8m0-8l8 8",
+    stroke: "currentColor"
   })));
 }
 
-var _path$3u;
+var _g$1p;
 
-function _extends$3K() { _extends$3K = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3K.apply(this, arguments); }
+function _extends$40() { _extends$40 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$40.apply(this, arguments); }
+
+function SvgHelp(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$40({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$1p || (_g$1p = /*#__PURE__*/React.createElement("g", {
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6.06 6a2 2 0 013.887.667c0 1.333-2 2-2 2M8 11.334h.007"
+  }))));
+}
+
+var _path$2C;
+
+function _extends$3Z() { _extends$3Z = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3Z.apply(this, arguments); }
 
 function SvgInfo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3K({
+  return /*#__PURE__*/React.createElement("svg", _extends$3Z({
     viewBox: "0 0 16 16",
+    fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    stroke: "currentColor",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$3u || (_path$3u = /*#__PURE__*/React.createElement("path", {
-    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zm0-4V8m0-2.667h.007"
+    height: "1em"
+  }, props), _path$2C || (_path$2C = /*#__PURE__*/React.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zm0-4V8m0-2.667h.007",
+    stroke: "currentColor"
   })));
 }
 
-var _path$2F;
+var _path$1W;
 
-function _extends$2U() { _extends$2U = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2U.apply(this, arguments); }
+function _extends$37() { _extends$37 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$37.apply(this, arguments); }
 
 function SvgError(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2U({
+  return /*#__PURE__*/React.createElement("svg", _extends$37({
     viewBox: "0 0 16 16",
+    fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    stroke: "currentColor",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$2F || (_path$2F = /*#__PURE__*/React.createElement("path", {
-    d: "M5.24 1.333h5.52l3.907 3.907v5.52l-3.907 3.907H5.24L1.333 10.76V5.24L5.24 1.333zm2.76 4V8m0 2.666h.008"
+    height: "1em"
+  }, props), _path$1W || (_path$1W = /*#__PURE__*/React.createElement("path", {
+    d: "M5.24 1.333h5.52l3.907 3.907v5.52l-3.907 3.907H5.24L1.333 10.76V5.24L5.24 1.333zm2.76 4V8m0 2.666h.008",
+    stroke: "currentColor"
   })));
 }
 
-var _path$2E;
+var _path$1V;
 
-function _extends$2T() { _extends$2T = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2T.apply(this, arguments); }
+function _extends$36() { _extends$36 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$36.apply(this, arguments); }
 
 function SvgWarning(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2T({
+  return /*#__PURE__*/React.createElement("svg", _extends$36({
     viewBox: "0 0 16 16",
+    fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    stroke: "currentColor",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$2E || (_path$2E = /*#__PURE__*/React.createElement("path", {
-    d: "M6.86 2.573L1.213 12a1.334 1.334 0 001.14 2h11.294a1.332 1.332 0 001.14-2L9.14 2.573a1.333 1.333 0 00-2.28 0v0zM8 6v2.667m0 2.667h.007"
+    height: "1em"
+  }, props), _path$1V || (_path$1V = /*#__PURE__*/React.createElement("path", {
+    d: "M6.86 2.573L1.213 12a1.334 1.334 0 001.14 2h11.294a1.332 1.332 0 001.14-2L9.14 2.573a1.333 1.333 0 00-2.28 0v0zM8 6v2.667m0 2.667h.007",
+    stroke: "currentColor"
   })));
 }
 
-var _path$S;
+var _path$M;
 
-function _extends$V() { _extends$V = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$V.apply(this, arguments); }
+function _extends$19() { _extends$19 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$19.apply(this, arguments); }
 
 function SvgCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$V({
+  return /*#__PURE__*/React.createElement("svg", _extends$19({
     viewBox: "0 0 16 16",
+    fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    stroke: "currentColor",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$S || (_path$S = /*#__PURE__*/React.createElement("path", {
-    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333z"
+    height: "1em"
+  }, props), _path$M || (_path$M = /*#__PURE__*/React.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333z",
+    stroke: "currentColor"
   })));
 }
 
@@ -1522,21 +1623,68 @@ var DialogActions = function (props) {
 };
 
 var Page = function (props) {
-    var children = props.children;
-    return React__default.createElement(Box, { marginTop: 8 }, children);
+    var children = props.children, restProps = __rest$1(props, ["children"]);
+    return (React__default.createElement(Box, __assign$1({ marginTop: 8, display: "flex", alignItems: "center", flexDirection: "column" }, restProps), children));
 };
 
-var PageContent = function (props) {
-    var children = props.children;
-    return (React__default.createElement(Box, { py: 2, px: 5.5 }, children));
+var PageBody = function (props) {
+    var children = props.children, restProps = __rest$1(props, ["children"]);
+    return (React__default.createElement(Box, __assign$1({ py: 2, px: 5.5, maxWidth: 1100, width: "100%" }, restProps), children));
 };
 
 var PageSection = function (props) {
-    var children = props.children;
-    return (React__default.createElement(Card, null,
+    var children = props.children, restProps = __rest$1(props, ["children"]);
+    return (React__default.createElement(Card, __assign$1({}, restProps),
         React__default.createElement(CardContent, null, children)));
 };
 
+var SettingsIndexCardGroup = function (props) {
+    var children = props.children, restProps = __rest$1(props, ["children"]);
+    return (React__default.createElement(Box, __assign$1({ display: "grid", gridGap: 16, gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))" }, restProps), children));
+};
+
+var useSettingsIndexCardStyles = makeStyles$1(function (theme) { return ({
+    cardRoot: {
+        alignSelf: 'stretch',
+        flexGrow: 1,
+        '&:hover': {
+            backgroundColor: '#52B7FF1A',
+        },
+    },
+    cardContentRoot: {
+        padding: theme.spacing(4),
+        '&:last-child': {
+            paddingBottom: theme.spacing(4),
+        },
+    },
+}); });
+
+var SettingsIndexCard = forwardRef(function (props, ref) {
+    var title = props.title, description = props.description, Icon$1 = props.Icon, onClick = props.onClick, statusLabel = props.statusLabel, restProps = __rest$1(props, ["title", "description", "Icon", "onClick", "statusLabel"]);
+    var classes = useSettingsIndexCardStyles(props);
+    var showStatusLabel = (statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.text) && (statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.color);
+    return (React__default.createElement(ButtonBase, __assign$1({ onClick: onClick, ref: ref }, restProps),
+        React__default.createElement(Card, { classes: { root: classes.cardRoot } },
+            React__default.createElement(CardContent, { classes: { root: classes.cardContentRoot } },
+                React__default.createElement(Box, { fontSize: "32px", display: "flex", justifyContent: 'space-between', alignItems: "center", paddingBottom: 2 },
+                    React__default.createElement(Icon, { icon: Icon$1 || SvgHelp, size: "inherit" }),
+                    showStatusLabel && (React__default.createElement(Typography, { weight: "semi-bold", variant: "body2", color: statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.color }, statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.text))),
+                React__default.createElement(Typography, { align: "left", variant: "h7", gutterBottom: true }, title),
+                description && (React__default.createElement(Typography, { align: "left", variant: "body2", color: "grey.700" }, description))))));
+});
+SettingsIndexCard.displayName = 'SettingsIndexCard';
+
+var PageSections = function (props) {
+    var children = props.children, restProps = __rest$1(props, ["children"]);
+    return (React__default.createElement(Box, __assign$1({ display: "flex", flexDirection: "column", gridGap: 16 }, restProps), children));
+};
+
+var PageSectionTitle = function (props) {
+    var children = props.children, restProps = __rest$1(props, ["children"]);
+    return (React__default.createElement(Box, __assign$1({}, restProps),
+        React__default.createElement(Typography, { gutterBottom: true, variant: "h4" }, children)));
+};
+
 var useFullScreenStepperContext = function () { return useContext(FullScreenStepperContext); };
 
 /**
@@ -1591,32 +1739,37 @@ var adminThemeTypography = {
     h1: {
         fontWeight: 400,
         fontSize: '6rem',
-        lineHeight: '7.75rem',
+        lineHeight: '9rem',
     },
     h2: {
         fontWeight: 400,
         fontSize: '3.75rem',
-        lineHeight: '4.875rem',
+        lineHeight: '5.625rem',
     },
     h3: {
         fontWeight: 400,
         fontSize: '3rem',
-        lineHeight: '3.875rem',
+        lineHeight: '4.5rem',
     },
     h4: {
         fontWeight: 400,
         fontSize: '2.125rem',
-        lineHeight: '2.75rem',
+        lineHeight: '3.25rem',
     },
     h5: {
-        fontWeight: 700,
+        fontWeight: 500,
         fontSize: '1.5rem',
-        lineHeight: '2rem',
+        lineHeight: '2.25rem',
     },
     h6: {
-        fontWeight: 700,
+        fontWeight: 500,
         fontSize: '1.25rem',
-        lineHeight: '1.625rem',
+        lineHeight: '1.875rem',
+    },
+    h7: {
+        fontWeight: 400,
+        fontSize: '1.125rem',
+        lineHeight: '1.75rem',
     },
     body1: {
         fontWeight: 400,
@@ -1797,5 +1950,5 @@ var adminLight = createTheme(adminLightOptions);
 var adminDarkOptions = __assign$1(__assign$1(__assign$1(__assign$1({ themeName: 'Admin Dark', palette: __assign$1(__assign$1({}, basePalette), adminDarkPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography }, adminDarkPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps);
 var adminDark = createTheme(adminDarkOptions);
 
-export { Alert, AlertDialog, AlertDialogHeader, AlertTitle, Button, ButtonGroup, DialogActions, FeatureIntro, FullScreenStepper, FullScreenStepperContent, FullScreenStepperContext, Page, PageContent, PageSection, SelectableCard, Toast, adminDark, adminDarkOptions, adminLight, adminLightOptions, useFullScreenStepperContext, useSelectableCard };
+export { Alert, AlertDialog, AlertDialogHeader, AlertTitle, Button, ButtonGroup, DialogActions, FeatureIntro, FullScreenStepper, FullScreenStepperContent, FullScreenStepperContext, Page, PageBody, PageSection, PageSectionTitle, PageSections, SelectableCard, SettingsIndexCard, SettingsIndexCardGroup, Toast, adminDark, adminDarkOptions, adminLight, adminLightOptions, useFullScreenStepperContext, useSelectableCard };
 //# sourceMappingURL=index.es.js.map