@popmenu/admin-ui 0.32.0 → 0.35.0

package/build/components/List/List.d.ts

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

package/build/components/List/ListProps.d.ts

@@ -0,0 +1,4 @@
+import { ListProps as CommonListProps } from '@popmenu/common-ui';
+export interface ListProps extends CommonListProps {
+    uncontained?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { List } from './List';
+export { ListProps } from './ListProps';

package/build/components/List/styles.d.ts

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

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

@@ -1,2 +1,3 @@
-import { HTMLAttributes, PropsWithChildren } from 'react';
-export declare const PageSection: (props: PropsWithChildren<HTMLAttributes<HTMLElement>>) => JSX.Element;
+import React from 'react';
+import { PageSectionProps } from './PageSectionProps';
+export declare const PageSection: React.ForwardRefExoticComponent<PageSectionProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,5 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export interface PageSectionProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+    /** Removes the background of the section. */
+    uncontained?: boolean;
+}

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

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

package/build/components/PageSectionHead/PageSectionHead.d.ts

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

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

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

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

@@ -1,2 +1,3 @@
-import { HTMLAttributes, PropsWithChildren } from 'react';
-export declare const PageSectionTitle: (props: PropsWithChildren<HTMLAttributes<HTMLElement>>) => JSX.Element;
+/// <reference types="react" />
+import { TypographyProps } from '@popmenu/common-ui';
+export declare const PageSectionTitle: (props: TypographyProps) => JSX.Element;

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

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

package/build/components/index.d.ts

@@ -17,6 +17,9 @@ 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';

package/build/hooks/index.d.ts

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

package/build/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/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, ButtonBase } from '@material-ui/core';
+import { makeStyles, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Box, ButtonBase, List as List$1, ListItem, ListItemAvatar, ListItemText, Chip, ListItemSecondaryAction, IconButton as IconButton$1 } 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';
@@ -32,6 +32,7 @@ import '@material-ui/core/InputAdornment';
 import '@material-ui/core/LinearProgress';
 import '@material-ui/core/List';
 import '@material-ui/core/ListItem';
+import '@material-ui/core/ListItemAvatar';
 import '@material-ui/core/ListItemIcon';
 import '@material-ui/core/ListItemSecondaryAction';
 import '@material-ui/core/ListItemText';
@@ -175,19 +176,19 @@ function __rest(s, e) {
     return t;
 }
 
-var _path$D;
+var _path$F;
 
-function _extends$16() { _extends$16 = 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$16.apply(this, arguments); }
+function _extends$1c() { _extends$1c = 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$1c.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$16({
+  return /*#__PURE__*/React.createElement("svg", _extends$1c({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$D || (_path$D = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$F || (_path$F = /*#__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"
   })));
@@ -229,7 +230,7 @@ var useIconStyles = makeStyles(function (_a) {
     };
 });
 
-var classnames = {exports: {}};
+var classnames$1 = {exports: {}};
 
 /*!
   Copyright (c) 2018 Jed Watson.
@@ -285,9 +286,9 @@ var classnames = {exports: {}};
 		window.classNames = classNames;
 	}
 }());
-}(classnames));
+}(classnames$1));
 
-var classNames = classnames.exports;
+var classNames$1 = classnames$1.exports;
 
 var iconStaticClassName = 'pop-icon';
 var Icon = function (props) {
@@ -298,7 +299,7 @@ var Icon = function (props) {
         isValid = false;
     }
     return isValid
-        ? createElement(icon, __assign({ className: classNames([classes.root, iconStaticClassName, className]) }, restProps))
+        ? createElement(icon, __assign({ className: classNames$1([classes.root, iconStaticClassName, className]) }, restProps))
         : null;
 };
 Icon.defaultProps = {
@@ -409,7 +410,7 @@ var Button$1 = forwardRef(function (props, ref) {
         startIcon: React__default.createElement(CircularProgress, { color: "inherit", size: typography.button.fontSize }),
         disabled: true,
     };
-    return (React__default.createElement(MuiButton, __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride), className: classNames([className, 'pm-button']) }, muiProps, (loading && loadingIndicator))));
+    return (React__default.createElement(MuiButton, __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride), className: classNames$1([className, 'pm-button']) }, muiProps, (loading && loadingIndicator))));
 });
 Button$1.displayName = 'Button';
 
@@ -590,7 +591,7 @@ Link.defaultProps = {
 };
 Link.displayName = 'Link';
 
-var useStyles$2 = makeStyles(function (_a) {
+var useStyles$4 = makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -604,7 +605,7 @@ var useStyles$2 = makeStyles(function (_a) {
 });
 var Paper = forwardRef(function (props, ref) {
     var legacyStyles = props.legacyStyles, restProps = __rest(props, ["legacyStyles"]);
-    var classes = useStyles$2(props);
+    var classes = useStyles$4(props);
     return React__default.createElement(Paper$1, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
 });
 Paper.displayName = 'Paper';
@@ -757,19 +758,19 @@ makeStyles(function (theme) { return ({
     },
 }); });
 
-var _g$J;
+var _g$M;
 
-function _extends$1O() { _extends$1O = 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$1O.apply(this, arguments); }
+function _extends$1R() { _extends$1R = 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$1R.apply(this, arguments); }
 
 function SvgCheckCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1O({
+  return /*#__PURE__*/React.createElement("svg", _extends$1R({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$J || (_g$J = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$M || (_g$M = /*#__PURE__*/React.createElement("g", {
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M14.667 7.387V8a6.667 6.667 0 11-3.954-6.093"
@@ -780,10 +781,10 @@ function SvgCheckCircle(props) {
 
 var _path$14;
 
-function _extends$1M() { _extends$1M = 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$1M.apply(this, arguments); }
+function _extends$1P() { _extends$1P = 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$1P.apply(this, arguments); }
 
 function SvgX(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1M({
+  return /*#__PURE__*/React.createElement("svg", _extends$1P({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
@@ -796,19 +797,19 @@ function SvgX(props) {
   })));
 }
 
-var _g$E;
+var _g$H;
 
-function _extends$1C() { _extends$1C = 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$1C.apply(this, arguments); }
+function _extends$1F() { _extends$1F = 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$1F.apply(this, arguments); }
 
 function SvgHelp(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1C({
+  return /*#__PURE__*/React.createElement("svg", _extends$1F({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$E || (_g$E = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$H || (_g$H = /*#__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"
@@ -819,10 +820,10 @@ function SvgHelp(props) {
 
 var _path$Z;
 
-function _extends$1A() { _extends$1A = 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$1A.apply(this, arguments); }
+function _extends$1D() { _extends$1D = 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$1D.apply(this, arguments); }
 
 function SvgInfo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1A({
+  return /*#__PURE__*/React.createElement("svg", _extends$1D({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
@@ -837,10 +838,10 @@ function SvgInfo(props) {
 
 var _path$C;
 
-function _extends$15() { _extends$15 = 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$15.apply(this, arguments); }
+function _extends$18() { _extends$18 = 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$18.apply(this, arguments); }
 
 function SvgError(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$15({
+  return /*#__PURE__*/React.createElement("svg", _extends$18({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
@@ -855,10 +856,10 @@ function SvgError(props) {
 
 var _path$B;
 
-function _extends$14() { _extends$14 = 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$14.apply(this, arguments); }
+function _extends$17() { _extends$17 = 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$17.apply(this, arguments); }
 
 function SvgWarning(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$14({
+  return /*#__PURE__*/React.createElement("svg", _extends$17({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
@@ -873,10 +874,10 @@ function SvgWarning(props) {
 
 var _path$b;
 
-function _extends$p() { _extends$p = 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$p.apply(this, arguments); }
+function _extends$r() { _extends$r = 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$r.apply(this, arguments); }
 
 function SvgCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$p({
+  return /*#__PURE__*/React.createElement("svg", _extends$r({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
@@ -1291,14 +1292,14 @@ var StepperActionsPreviousButton = function (props) {
     return displayPreviousButton ? (React__default.createElement(Button, __assign$1({ variant: "tertiary", disabled: stepCursor === 1 }, augmentedPreviousButtonProps), previousButtonText || 'previous')) : null;
 };
 
-var useStyles$1 = makeStyles$1({
+var useStyles$3 = makeStyles$1({
     root: {
         fontStyle: 'italic',
     },
 });
 var StepperActionsStatusText = function (props) {
     var statusText = props.statusText;
-    var classes = useStyles$1(props);
+    var classes = useStyles$3(props);
     return statusText ? (React__default.createElement(Typography, { classes: { root: classes.root }, variant: "body2" }, statusText)) : null;
 };
 
@@ -1584,7 +1585,7 @@ Toast.defaultProps = {
 };
 Toast.displayName = 'Toast';
 
-var useStyles = makeStyles(function (_a) {
+var useStyles$2 = makeStyles(function (_a) {
     var palette = _a.palette;
     return ({
         root: {
@@ -1593,7 +1594,7 @@ var useStyles = makeStyles(function (_a) {
     });
 });
 var DialogActions = function (props) {
-    var classes = useStyles(props);
+    var classes = useStyles$2(props);
     return React__default.createElement(CommonDialogActions, __assign$1({ classes: classes }, props));
 };
 
@@ -1607,30 +1608,46 @@ var PageBody = function (props) {
     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, restProps = __rest$1(props, ["children"]);
-    return (React__default.createElement(Card, __assign$1({}, restProps),
+var usePageSectionStyles = makeStyles(function () { return ({
+    root: {
+        background: function (_a) {
+            var uncontained = _a.uncontained;
+            return (uncontained ? 'transparent' : undefined);
+        },
+    },
+}); });
+
+var PageSection = forwardRef(function (props, ref) {
+    var children = props.children; props.uncontained; var restProps = __rest$1(props, ["children", "uncontained"]);
+    var classes = usePageSectionStyles(props);
+    return (React__default.createElement(Card, __assign$1({ classes: { root: classes.root }, ref: ref }, restProps),
         React__default.createElement(CardContent, null, children)));
-};
+});
+PageSection.displayName = 'PageSection';
 
 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 PageSectionHead = function (props) {
+    var children = props.children, restProps = __rest$1(props, ["children"]);
+    return (React__default.createElement(Box, __assign$1({ display: "flex", justifyContent: "space-between", mb: 1.5 }, 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)));
+    return (React__default.createElement(Typography, __assign$1({ gutterBottom: true, variant: "h5" }, restProps), 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));
+    return (React__default.createElement(Box, __assign$1({ display: "grid", gridGap: 16, gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))" }, restProps), children));
 };
 
 var useSettingsIndexCardStyles = makeStyles$1(function (theme) { return ({
     cardRoot: {
+        border: "1px solid " + theme.palette.grey[300],
         alignSelf: 'stretch',
         flexGrow: 1,
         '&:hover': {
@@ -1660,6 +1677,120 @@ var SettingsIndexCard = forwardRef(function (props, ref) {
 });
 SettingsIndexCard.displayName = 'SettingsIndexCard';
 
+var classnames = {exports: {}};
+
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString === Object.prototype.toString) {
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
+					}
+				} else {
+					classes.push(arg.toString());
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+}(classnames));
+
+var classNames = classnames.exports;
+
+var useStyles$1 = 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 = __rest$1(props, ["children", "uncontained", "className"]);
+    var classes = useStyles$1(props);
+    return (React__default.createElement(List$1, __assign$1({ classes: classes, className: classNames((_a = {}, _a[classes.uncontained] = uncontained, _a), className) }, restProps), children));
+};
+
+var useStyles = makeStyles(function (theme) { return ({
+    chipRoot: {
+        marginRight: theme.spacing(4),
+        cursor: 'pointer',
+    },
+}); });
+/**
+ * TODO
+ * - clean props util
+ * - Avatar size and shape
+ */
+var StandardListItem = function (props) {
+    props.itemId; var title = props.title, meta = props.meta, body = props.body, image = props.image, status = props.status, secondaryAction = props.secondaryAction, onClick = props.onClick, restProps = __rest$1(props, ["itemId", "title", "meta", "body", "image", "status", "secondaryAction", "onClick"]);
+    var classes = useStyles(props);
+    return (React__default.createElement(ListItem, __assign$1({ button: Boolean(onClick), onClick: function (e) { return onClick && onClick(e, props); } }, restProps),
+        image && (React__default.createElement(ListItemAvatar, null,
+            React__default.createElement(Avatar, { src: image.src, alt: image.alt }, image.Icon && React__default.createElement(Icon, { icon: image.Icon })))),
+        React__default.createElement(ListItemText, { disableTypography: true },
+            React__default.createElement(Typography, { variant: "h6" }, title),
+            meta && (React__default.createElement(Typography, { variant: "body2", color: "secondary.light" }, meta)),
+            body && (React__default.createElement(Typography, { variant: "body2", color: "grey.700" }, body))),
+        status && (React__default.createElement(Chip, { classes: { root: classes.chipRoot }, icon: status.Icon && React__default.createElement(Icon, { icon: status.Icon }), label: status.text })),
+        secondaryAction && (React__default.createElement(ListItemSecondaryAction, null,
+            React__default.createElement(IconButton$1, { style: { color: 'black' }, "aria-label": secondaryAction['aria-label'], onClick: function (e) { return secondaryAction.onClick(e, props); } },
+                React__default.createElement(Icon, { icon: secondaryAction.Icon }))))));
+};
+
 var useFullScreenStepperContext = function () { return useContext(FullScreenStepperContext); };
 
 /**
@@ -1707,6 +1838,15 @@ var useSelectableCard = function (config) {
     return { card: { onClick: onClick, selection: selection }, selection: selection, setSelection: setSelection };
 };
 
+var useDialog = function () {
+    var _a = useState(false), open = _a[0], setOpen = _a[1];
+    var toggle = function () { return setOpen(function (current) { return !current; }); };
+    var close = function () { return setOpen(false); };
+    var triggerProps = { onClick: toggle };
+    var dialogProps = { open: open, onClose: close };
+    return [triggerProps, dialogProps, { open: open, setOpen: setOpen, toggle: toggle, close: close }];
+};
+
 var fonts = ['"Poppins"', '"sans-serif"'];
 var adminThemeTypography = {
     htmlFontSize: 16,
@@ -1931,5 +2071,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, PageBody, PageSection, PageSectionTitle, PageSections, SelectableCard, SettingsIndexCard, SettingsIndexCardGroup, Toast, adminDark, adminDarkOptions, adminLight, adminLightOptions, useFullScreenStepperContext, useSelectableCard };
+export { Alert, AlertDialog, AlertDialogHeader, AlertTitle, Button, ButtonGroup, DialogActions, FeatureIntro, FullScreenStepper, FullScreenStepperContent, FullScreenStepperContext, List, Page, PageBody, PageSection, PageSectionHead, PageSectionTitle, PageSections, SelectableCard, SettingsIndexCard, SettingsIndexCardGroup, StandardListItem, Toast, adminDark, adminDarkOptions, adminLight, adminLightOptions, useDialog, useFullScreenStepperContext, useSelectableCard };
 //# sourceMappingURL=index.es.js.map