@popmenu/common-ui 0.49.0 → 0.51.0

package/build/index.js

@@ -157,26 +157,26 @@ function __rest(s, e) {
     return t;
 }
 
-var _g$1d, _defs$I;
+var _g$1e, _defs$J;
 
-function _extends$28() { _extends$28 = 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$28.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__namespace.createElement("svg", _extends$28({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("g", {
+  }, props), _g$1e || (_g$1e = /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#check-circle_svg__clip0_8_5831)",
     stroke: "currentColor"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     d: "M14.667 7.387V8a6.667 6.667 0 11-3.954-6.093"
   }), /*#__PURE__*/React__namespace.createElement("path", {
     d: "M14.667 2.667L8 9.34l-2-2"
-  }))), _defs$I || (_defs$I = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+  }))), _defs$J || (_defs$J = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
     id: "check-circle_svg__clip0_8_5831"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
@@ -184,24 +184,24 @@ function SvgCheckCircle(props) {
   })))));
 }
 
-var _g$1b, _defs$G;
+var _g$1c, _defs$H;
 
-function _extends$25() { _extends$25 = 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$25.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__namespace.createElement("svg", _extends$25({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("g", {
+  }, props), _g$1c || (_g$1c = /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#x-circle_svg__clip0_8_6136)",
     stroke: "currentColor"
   }, /*#__PURE__*/React__namespace.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__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+  }))), _defs$H || (_defs$H = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
     id: "x-circle_svg__clip0_8_6136"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
@@ -209,24 +209,24 @@ function SvgXCircle(props) {
   })))));
 }
 
-var _g$13, _defs$A;
+var _g$14, _defs$B;
 
-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 _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__namespace.createElement("svg", _extends$1W({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("g", {
+  }, props), _g$14 || (_g$14 = /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#info_svg__clip0_8_5377)",
     stroke: "currentColor"
   }, /*#__PURE__*/React__namespace.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__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+  }))), _defs$B || (_defs$B = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
     id: "info_svg__clip0_8_5377"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
@@ -234,24 +234,24 @@ function SvgInfo(props) {
   })))));
 }
 
-var _g$$, _defs$z;
+var _g$10, _defs$A;
 
-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$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__namespace.createElement("svg", _extends$1M({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1N({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$$ || (_g$$ = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$10 || (_g$10 = /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#minus-circle_svg__clip0_8_5970)",
     stroke: "currentColor"
   }, /*#__PURE__*/React__namespace.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__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+  }))), _defs$A || (_defs$A = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
     id: "minus-circle_svg__clip0_8_5970"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
@@ -259,24 +259,24 @@ function SvgMinusCircle(props) {
   })))));
 }
 
-var _g$_, _defs$y;
+var _g$$, _defs$z;
 
-function _extends$1I() { _extends$1I = 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$1I.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__namespace.createElement("svg", _extends$1I({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1J({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$_ || (_g$_ = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$$ || (_g$$ = /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#plus-circle_svg__clip0_8_5870)",
     stroke: "currentColor"
   }, /*#__PURE__*/React__namespace.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__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+  }))), _defs$z || (_defs$z = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
     id: "plus-circle_svg__clip0_8_5870"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
@@ -286,10 +286,10 @@ function SvgPlusCircle(props) {
 
 var _path$E;
 
-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$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__namespace.createElement("svg", _extends$1v({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1w({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
@@ -302,24 +302,24 @@ function SvgUser(props) {
   })));
 }
 
-var _g$Q, _defs$r;
+var _g$R, _defs$s;
 
-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 _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__namespace.createElement("svg", _extends$1r({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("g", {
+  }, props), _g$R || (_g$R = /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#error_svg__clip0_8_5411)",
     stroke: "currentColor"
   }, /*#__PURE__*/React__namespace.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__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+  }))), _defs$s || (_defs$s = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
     id: "error_svg__clip0_8_5411"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
@@ -329,10 +329,10 @@ function SvgError(props) {
 
 var _path$B;
 
-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$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__namespace.createElement("svg", _extends$1q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1r({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
@@ -540,6 +540,39 @@ Avatar.defaultProps = {
 };
 Avatar.displayName = 'Avatar';
 
+var useBrowserSilhouetteStyles = styles.makeStyles(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['default'].createElement(core.Box, { display: "flex" },
+        React__default['default'].createElement("div", { className: classes.container },
+            React__default['default'].createElement("div", { className: classes.titleBar },
+                React__default['default'].createElement("div", { className: classes.circle }),
+                React__default['default'].createElement("div", { className: classes.circle }),
+                React__default['default'].createElement("div", { className: classes.circle })),
+            children)));
+};
+
 var useButtonStyles = styles.makeStyles(function () { return ({
     root: {
         minWidth: 'unset',
@@ -1526,6 +1559,7 @@ Object.defineProperty(exports, 'Tabs', {
     }
 });
 exports.Avatar = Avatar;
+exports.BrowserSilhouette = BrowserSilhouette;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;