@popmenu/admin-ui 0.31.0 → 0.34.0

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/index.es.js

@@ -175,19 +175,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"
   })));
@@ -494,18 +494,7 @@ var useTypographyStyles = makeStyles$1(function (theme) {
 var Typography = forwardRef(function (props, ref) {
     props.weight; props.color; var restProps = __rest(props, ["weight", "color"]);
     var classes = useTypographyStyles(__assign({}, props));
-    var variantMapping = {
-        h1: 'h1',
-        h2: 'h2',
-        h3: 'h3',
-        h4: 'h4',
-        h5: 'h5',
-        h6: 'h6',
-        subtitle1: 'p',
-        subtitle2: 'p',
-        body1: 'p',
-        body2: 'p',
-    };
+    var variantMapping = { subtitle1: 'p' };
     return React__default.createElement(Typography$1, __assign({ ref: ref, classes: classes, variantMapping: variantMapping }, restProps));
 });
 Typography.displayName = 'Typography';
@@ -768,19 +757,19 @@ makeStyles(function (theme) { return ({
     },
 }); });
 
-var _g$I;
+var _g$M;
 
-function _extends$1L() { _extends$1L = 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$1L.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$1L({
+  return /*#__PURE__*/React.createElement("svg", _extends$1R({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$I || (_g$I = /*#__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"
@@ -789,37 +778,37 @@ function SvgCheckCircle(props) {
   }))));
 }
 
-var _path$12;
+var _path$14;
 
-function _extends$1J() { _extends$1J = 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$1J.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$1J({
+  return /*#__PURE__*/React.createElement("svg", _extends$1P({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$12 || (_path$12 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$14 || (_path$14 = /*#__PURE__*/React.createElement("path", {
     d: "M12 4l-8 8m0-8l8 8",
     stroke: "currentColor"
   })));
 }
 
-var _g$D;
+var _g$H;
 
-function _extends$1z() { _extends$1z = 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$1z.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$1z({
+  return /*#__PURE__*/React.createElement("svg", _extends$1F({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$D || (_g$D = /*#__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"
@@ -828,73 +817,73 @@ function SvgHelp(props) {
   }))));
 }
 
-var _path$X;
+var _path$Z;
 
-function _extends$1x() { _extends$1x = 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$1x.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$1x({
+  return /*#__PURE__*/React.createElement("svg", _extends$1D({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$X || (_path$X = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$Z || (_path$Z = /*#__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$B;
+var _path$C;
 
-function _extends$13() { _extends$13 = 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$13.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$13({
+  return /*#__PURE__*/React.createElement("svg", _extends$18({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$B || (_path$B = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$C || (_path$C = /*#__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$A;
+var _path$B;
 
-function _extends$12() { _extends$12 = 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$12.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$12({
+  return /*#__PURE__*/React.createElement("svg", _extends$17({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$A || (_path$A = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$B || (_path$B = /*#__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$a;
+var _path$b;
 
-function _extends$o() { _extends$o = 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$o.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$o({
+  return /*#__PURE__*/React.createElement("svg", _extends$r({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
     d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333z",
     stroke: "currentColor"
   })));
@@ -1618,11 +1607,22 @@ 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"]);
@@ -1632,16 +1632,17 @@ var PageSections = function (props) {
 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)));
+        React__default.createElement(Typography, { gutterBottom: true, variant: "h5" }, 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': {