@popmenu/common-ui 0.48.0 → 0.50.0

package/build/components/BrowserSilhouette/BrowserSilhouette.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare const BrowserSilhouette: ({ children }: PropsWithChildren<Record<string, unknown>>) => JSX.Element;

package/build/components/BrowserSilhouette/browserSilhouette.styles.d.ts

@@ -0,0 +1 @@
+export declare const useBrowserSilhouetteStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<string>;

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

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

package/build/components/index.d.ts

@@ -7,6 +7,7 @@ export { default as AppBar, AppBarProps } from './AppBar';
 export { default as Avatar, AvatarProps } from './Avatar';
 export { default as Badge, BadgeProps } from './Badge';
 export { default as Box, BoxProps } from './Box';
+export { default as BrowserSilhouette } from './BrowserSilhouette';
 export { default as Breadcrumbs, BreadcrumbsProps } from './Breadcrumbs';
 export { default as Button, ButtonProps } from './Button';
 export { default as ButtonBase, ButtonBaseProps } from './ButtonBase';

package/build/index.es.js

@@ -1,5 +1,5 @@
 export { default as Alert } from '@material-ui/lab/Alert';
-import { makeStyles, Typography as Typography$1, useTheme as useTheme$1, Box, Link as Link$1, Paper as Paper$1, TextField as TextField$1 } from '@material-ui/core';
+import { makeStyles, Box, Typography as Typography$1, useTheme as useTheme$1, Link as Link$1, Paper as Paper$1, TextField as TextField$1 } from '@material-ui/core';
 export { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Box, Breadcrumbs, ButtonBase, ClickAwayListener, Fab, GridList, Hidden, Modal, Popover, Popper, Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper, ThemeProvider, Toolbar, alpha, createTheme, darken, decomposeColor, getLuminance, hexToRgb, lighten, makeStyles, recomposeColor, rgbToHex } from '@material-ui/core';
 export { default as AppBar } from '@material-ui/core/AppBar';
 import * as React from 'react';
@@ -90,26 +90,26 @@ function __rest(s, e) {
     return t;
 }
 
-var _g$1d, _defs$I;
+var _g$1e, _defs$J;
 
-function _extends$27() { _extends$27 = 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$27.apply(this, arguments); }
+function _extends$29() { _extends$29 = 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$29.apply(this, arguments); }
 
 function SvgCheckCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$27({
+  return /*#__PURE__*/React.createElement("svg", _extends$29({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$1d || (_g$1d = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$1e || (_g$1e = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#check-circle_svg__clip0_8_5831)",
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M14.667 7.387V8a6.667 6.667 0 11-3.954-6.093"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M14.667 2.667L8 9.34l-2-2"
-  }))), _defs$I || (_defs$I = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$J || (_defs$J = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "check-circle_svg__clip0_8_5831"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -117,24 +117,24 @@ function SvgCheckCircle(props) {
   })))));
 }
 
-var _g$1b, _defs$G;
+var _g$1c, _defs$H;
 
-function _extends$24() { _extends$24 = 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$24.apply(this, arguments); }
+function _extends$26() { _extends$26 = 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$26.apply(this, arguments); }
 
 function SvgXCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$24({
+  return /*#__PURE__*/React.createElement("svg", _extends$26({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$1b || (_g$1b = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$1c || (_g$1c = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#x-circle_svg__clip0_8_6136)",
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zM10 6l-4 4m0-4l4 4"
-  }))), _defs$G || (_defs$G = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$H || (_defs$H = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "x-circle_svg__clip0_8_6136"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -142,24 +142,24 @@ function SvgXCircle(props) {
   })))));
 }
 
-var _g$13, _defs$A;
+var _g$14, _defs$B;
 
-function _extends$1V() { _extends$1V = 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$1V.apply(this, arguments); }
+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 SvgInfo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1V({
+  return /*#__PURE__*/React.createElement("svg", _extends$1X({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$13 || (_g$13 = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$14 || (_g$14 = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#info_svg__clip0_8_5377)",
     stroke: "currentColor"
   }, /*#__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"
-  }))), _defs$A || (_defs$A = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$B || (_defs$B = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "info_svg__clip0_8_5377"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -167,24 +167,24 @@ function SvgInfo(props) {
   })))));
 }
 
-var _g$$, _defs$z;
+var _g$10, _defs$A;
 
-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$1N() { _extends$1N = 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$1N.apply(this, arguments); }
 
 function SvgMinusCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1L({
+  return /*#__PURE__*/React.createElement("svg", _extends$1N({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$$ || (_g$$ = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$10 || (_g$10 = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#minus-circle_svg__clip0_8_5970)",
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zM5.333 8h5.334"
-  }))), _defs$z || (_defs$z = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$A || (_defs$A = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "minus-circle_svg__clip0_8_5970"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -192,24 +192,24 @@ function SvgMinusCircle(props) {
   })))));
 }
 
-var _g$_, _defs$y;
+var _g$$, _defs$z;
 
-function _extends$1H() { _extends$1H = 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$1H.apply(this, arguments); }
+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 SvgPlusCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1H({
+  return /*#__PURE__*/React.createElement("svg", _extends$1J({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$_ || (_g$_ = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$$ || (_g$$ = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#plus-circle_svg__clip0_8_5870)",
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zm0-9.334v5.334M5.333 8h5.334"
-  }))), _defs$y || (_defs$y = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$z || (_defs$z = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "plus-circle_svg__clip0_8_5870"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -217,42 +217,42 @@ function SvgPlusCircle(props) {
   })))));
 }
 
-var _path$D;
+var _path$E;
 
-function _extends$1u() { _extends$1u = 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$1u.apply(this, arguments); }
+function _extends$1w() { _extends$1w = 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$1w.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1u({
+  return /*#__PURE__*/React.createElement("svg", _extends$1w({
     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$E || (_path$E = /*#__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"
   })));
 }
 
-var _g$Q, _defs$r;
+var _g$R, _defs$s;
 
-function _extends$1q() { _extends$1q = 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$1q.apply(this, arguments); }
+function _extends$1s() { _extends$1s = 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$1s.apply(this, arguments); }
 
 function SvgError(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1q({
+  return /*#__PURE__*/React.createElement("svg", _extends$1s({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$Q || (_g$Q = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$R || (_g$R = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#error_svg__clip0_8_5411)",
     stroke: "currentColor"
   }, /*#__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"
-  }))), _defs$r || (_defs$r = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$s || (_defs$s = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "error_svg__clip0_8_5411"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -260,19 +260,19 @@ function SvgError(props) {
   })))));
 }
 
-var _path$A;
+var _path$B;
 
-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 _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 SvgWarning(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1p({
+  return /*#__PURE__*/React.createElement("svg", _extends$1r({
     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"
   })));
@@ -473,6 +473,39 @@ Avatar.defaultProps = {
 };
 Avatar.displayName = 'Avatar';
 
+var useBrowserSilhouetteStyles = makeStyles$1(function (theme) { return ({
+    circle: {
+        backgroundColor: theme.palette.grey[300],
+        borderRadius: '50%',
+        height: theme.spacing(0.65),
+        width: theme.spacing(0.65),
+        margin: theme.spacing(1) + "px 0 " + theme.spacing(1) + "px " + theme.spacing(1) + "px",
+    },
+    container: {
+        border: "1px solid " + theme.palette.secondary.light,
+        borderRadius: theme.spacing(0.5),
+        flexGrow: 1,
+    },
+    titleBar: {
+        display: 'flex',
+        flexDirection: 'row',
+        borderBottom: "1px solid " + theme.palette.secondary.light,
+        width: '100%',
+    },
+}); });
+
+var BrowserSilhouette = function (_a) {
+    var children = _a.children;
+    var classes = useBrowserSilhouetteStyles();
+    return (React__default.createElement(Box, { display: "flex" },
+        React__default.createElement("div", { className: classes.container },
+            React__default.createElement("div", { className: classes.titleBar },
+                React__default.createElement("div", { className: classes.circle }),
+                React__default.createElement("div", { className: classes.circle }),
+                React__default.createElement("div", { className: classes.circle })),
+            children)));
+};
+
 var useButtonStyles = makeStyles$1(function () { return ({
     root: {
         minWidth: 'unset',
@@ -1056,5 +1089,5 @@ var useTabs = function (options) {
     };
 };
 
-export { Avatar, Button, Checkbox, Chip, CollapsibleText, Divider, Icon, IconButton, Link, NumberField, Paper, PaperContent, Radio, SplitInput, Switch, TabPanel, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useCollapsibleText, useTabs };
+export { Avatar, BrowserSilhouette, Button, Checkbox, Chip, CollapsibleText, Divider, Icon, IconButton, Link, NumberField, Paper, PaperContent, Radio, SplitInput, Switch, TabPanel, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useCollapsibleText, useTabs };
 //# sourceMappingURL=index.es.js.map