@popmenu/admin-ui 0.32.0 → 0.33.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"
   })));
@@ -757,19 +757,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 +780,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 +796,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 +819,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 +837,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 +855,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 +873,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",
@@ -1607,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"]);
@@ -1621,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': {