@react95/core 7.0.1 → 8.0.0-alpha.0

package/cjs/GlobalStyle/utils.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createTriangleSVG = exports.createBorder = void 0;
+var createBorder = exports.createBorder = function createBorder(_ref) {
+  var direction = _ref.direction,
+    outerTopLeft = _ref.outerTopLeft,
+    innerTopLeft = _ref.innerTopLeft,
+    outerBottomRight = _ref.outerBottomRight,
+    innerBottomRight = _ref.innerBottomRight;
+  return {
+    border: 0,
+    boxShadow: "-1px -1px 0 0\n      ".concat(direction == 'extrude' ? outerBottomRight : innerTopLeft, " inset,\n    1px 1px 0 0\n      ").concat(direction == 'extrude' ? outerTopLeft : innerBottomRight, " inset ,\n    -2px -2px 0 0\n      ").concat(direction == 'extrude' ? innerBottomRight : outerTopLeft, " inset ,\n    2px 2px 0 0\n      ").concat(direction == 'extrude' ? innerTopLeft : outerBottomRight, " inset")
+  };
+};
+var createTriangleSVG = exports.createTriangleSVG = function createTriangleSVG(color) {
+  var angle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var svg = "<svg height=\"21\" width=\"21\" viewBox=\"0 0 21 21\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <g transform=\"rotate(".concat(angle, " 13 13)\">\n      <polygon fill=\"").concat(color, "\" points=\"6,10 20,10 13,17\"/>\n    </g>\n  </svg>");
+  var encoded = btoa(svg);
+  return "url(data:image/svg+xml;base64,".concat(encoded, ")");
+};

package/cjs/Input/Input.css.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.input = void 0;
+var _css = require("@vanilla-extract/css");
+var _Cursor = require("../Cursor/Cursor.css");
+var _contract = require("../themes/contract.css");
+var input = exports.input = (0, _css.style)([_Cursor.Cursor.Text, {
+  outline: 'none',
+  border: 'none',
+  paddingTop: _contract.contract.space[3],
+  paddingRight: _contract.contract.space[3],
+  paddingBottom: _contract.contract.space[5],
+  paddingLeft: _contract.contract.space[3],
+  color: _contract.contract.colors.materialText,
+  backgroundColor: _contract.contract.colors.inputBackground,
+  borderRadius: '0',
+  borderTopWidth: _contract.contract.space[1],
+  borderTopStyle: 'solid',
+  borderTopColor: _contract.contract.colors.borderDark,
+  borderRightWidth: '0',
+  borderBottomWidth: '0',
+  borderLeftWidth: _contract.contract.space[1],
+  borderLeftStyle: 'solid',
+  borderLeftColor: _contract.contract.colors.borderDark,
+  boxShadow: _contract.contract.shadows.input,
+  WebkitAppearance: 'none'
+}]);

package/cjs/Input/Input.js

@@ -1,15 +1,20 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _styledComponents = _interopRequireDefault(require("@xstyled/styled-components"));
-var _styledSystem = require("styled-system");
-var _Cursor = _interopRequireDefault(require("../Cursor"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var Input = _styledComponents["default"].input.withConfig({
-  displayName: "Input",
-  componentId: "sc-1thk6g5-0"
-})(["\n  outline: none;\n  border: none;\n  cursor: text;\n\n  padding: 3 3 5 3;\n\n  color: materialText;\n  background-color: inputBackground;\n\n  border-radius: 0;\n\n  border-top-width: 1;\n  border-top-style: 1;\n  border-top-color: borderDark;\n\n  border-right-width: 0;\n  border-bottom-width: 0;\n\n  border-left-width: 1;\n  border-left-style: 1;\n  border-left-color: borderDark;\n\n  box-shadow: input;\n\n  -webkit-appearance: none;\n\n  ", ";\n\n  ", "\n  ", "\n  ", "\n"], _Cursor["default"].Text, _styledSystem.padding, _styledSystem.borders, _styledSystem.shadow);
-var _default = exports["default"] = Input;
+exports.Input = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Frame = require("../Frame/Frame");
+var _Input = require("./Input.css");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
+var Input = exports.Input = /*#__PURE__*/React.forwardRef(function (rest, ref) {
+  return /*#__PURE__*/React.createElement(_Frame.Frame, _extends({}, rest, {
+    ref: ref,
+    className: _Input.input,
+    as: "input"
+  }));
+});

package/cjs/Input/index.js

@@ -4,6 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _Input = _interopRequireDefault(require("./Input"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var _default = exports["default"] = _Input["default"];
+var _Input = require("./Input");
+var _default = exports["default"] = _Input.Input;

package/cjs/List/List.css.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.listItem = exports.list = exports.divider = void 0;
+var _css = require("@vanilla-extract/css");
+var _cssUtils = require("@vanilla-extract/css-utils");
+var _contract = require("../themes/contract.css");
+var _rightcaret = _interopRequireDefault(require("../GlobalStyle/imgs/rightcaret.svg"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var listItem = exports.listItem = (0, _css.style)({
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  userSelect: 'none',
+  margin: _contract.contract.space[0],
+  paddingBlock: _contract.contract.space[2],
+  paddingInline: _contract.contract.space[6],
+  color: _contract.contract.colors.materialText,
+  selectors: {
+    '&:hover': {
+      backgroundColor: _contract.contract.colors.headerBackground,
+      color: _contract.contract.colors.materialTextInvert
+    },
+    '&:not(:has(svg))': {
+      paddingInlineStart: '26px'
+    },
+    '&:has(ul):after': {
+      position: 'absolute',
+      width: _contract.contract.space[5],
+      height: _contract.contract.space[8],
+      right: _contract.contract.space[8],
+      content: "''",
+      backgroundColor: _contract.contract.colors.materialText,
+      maskImage: "url('".concat(_rightcaret["default"], "')"),
+      maskPosition: 'center center',
+      maskSize: "".concat(_contract.contract.space[5], " ").concat(_contract.contract.space[8]),
+      maskRepeat: 'no-repeat'
+    },
+    '&:has(ul):hover:after': {
+      backgroundColor: _contract.contract.colors.materialTextInvert
+    }
+  }
+});
+(0, _css.globalStyle)("".concat(listItem, " svg"), {
+  marginRight: _contract.contract.space[10],
+  minWidth: _contract.contract.space[16]
+});
+(0, _css.globalStyle)("".concat(listItem, " ul"), {
+  display: 'none',
+  position: 'absolute',
+  top: _cssUtils.calc.negate(_contract.contract.space[2]),
+  left: '97%',
+  color: _contract.contract.colors.materialText,
+  zIndex: _contract.contract.zIndices.taskbar
+});
+(0, _css.globalStyle)("".concat(listItem, ":has(ul):hover > ul"), {
+  display: 'block'
+});
+var divider = exports.divider = (0, _css.style)({
+  height: _contract.contract.space[1],
+  borderTopStyle: 'solid',
+  borderTopWidth: _contract.contract.space[1],
+  borderTopColor: _contract.contract.colors.borderDark,
+  borderBottomWidth: _contract.contract.space[1],
+  borderBottomStyle: 'solid',
+  borderBottomColor: _contract.contract.colors.borderLightest,
+  width: '98%',
+  marginLeft: _contract.contract.space[2]
+});
+var list = exports.list = (0, _css.style)({
+  backgroundColor: _contract.contract.colors.material,
+  padding: _contract.contract.space[2],
+  border: 'none',
+  margin: 0,
+  listStyle: 'none',
+  boxShadow: _contract.contract.shadows.out
+});

package/cjs/List/List.js

@@ -1,29 +1,25 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _styledComponents = _interopRequireWildcard(require("@xstyled/styled-components"));
-var _ListItem = _interopRequireDefault(require("./ListItem"));
-var _ListDivider = _interopRequireDefault(require("./ListDivider"));
+exports.List = void 0;
+var _ListItem = require("./ListItem");
+var _ListDivider = require("./ListDivider");
+var _Frame = require("../Frame/Frame");
+var _react = _interopRequireDefault(require("react"));
+var _List = require("./List.css");
+var _classnames = _interopRequireDefault(require("classnames"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var StyledList = _styledComponents["default"].ul.withConfig({
-  displayName: "List__StyledList",
-  componentId: "sc-11tpq62-0"
-})(["\n  background-color: material;\n  padding: 5 20 6;\n  border: none;\n\n  margin: 0;\n  padding: 2;\n  list-style: none;\n\n  box-shadow: inset 1px 1px 0px 1px ", ",\n    inset 0 0 0 1px ", ",\n    1px 1px 0 1px ", ";\n\n  ", ";\n"], (0, _styledComponents.th)('colors.borderLightest'), (0, _styledComponents.th)('colors.borderDark'), (0, _styledComponents.th)('colors.borderDarkest'), function (_ref) {
-  var width = _ref.width;
-  return "\n    width: ".concat(width, "px;\n  ");
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
+var ListRenderer = /*#__PURE__*/_react["default"].forwardRef(function (rest, ref) {
+  return /*#__PURE__*/_react["default"].createElement(_Frame.Frame, _extends({}, rest, {
+    ref: ref,
+    className: (0, _classnames["default"])(_List.list, rest.className),
+    as: "ul"
+  }));
 });
-var List = Object.assign(StyledList, {
-  Item: _ListItem["default"],
-  Divider: _ListDivider["default"]
-});
-List.displayName = 'List';
-List.defaultProps = {
-  width: 200
-};
-var _default = exports["default"] = List;
+var List = exports.List = Object.assign(ListRenderer, {
+  Item: _ListItem.ListItem,
+  Divider: _ListDivider.Divider
+});

package/cjs/List/ListDivider.js

@@ -3,12 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _styledComponents = _interopRequireDefault(require("@xstyled/styled-components"));
+exports.Divider = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Frame = require("../Frame/Frame");
+var _List = require("./List.css");
+var _classnames = _interopRequireDefault(require("classnames"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var Divider = _styledComponents["default"].li.withConfig({
-  displayName: "ListDivider__Divider",
-  componentId: "sc-mgbvoj-0"
-})(["\n  height: 1px;\n  border-top: 1;\n  border-top-color: borderDark;\n  border-bottom: 1;\n  border-bottom-color: borderLightest;\n\n  width: 98%;\n  margin-left: 2;\n"]);
-Divider.displayName = 'List.Divider';
-var _default = exports["default"] = Divider;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
+var Divider = exports.Divider = /*#__PURE__*/_react["default"].forwardRef(function (rest, ref) {
+  return /*#__PURE__*/_react["default"].createElement(_Frame.Frame, _extends({}, rest, {
+    ref: ref,
+    className: (0, _classnames["default"])(_List.divider, rest.className),
+    as: "li"
+  }));
+});
+Divider.displayName = 'List.Divider';

package/cjs/List/ListItem.js

@@ -4,42 +4,32 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.ListItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireWildcard(require("@xstyled/styled-components"));
-var _rightcaret = _interopRequireDefault(require("../GlobalStyle/imgs/rightcaret.svg"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Frame = require("../Frame/Frame");
+var _List = require("./List.css");
 var _excluded = ["icon", "children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var Item = _styledComponents["default"].li.withConfig({
-  displayName: "ListItem__Item",
-  componentId: "sc-1k1qq02-0"
-})(["\n  position: relative;\n\n  display: flex;\n  align-items: center;\n  margin: 0;\n  padding: 2 6;\n\n  color: materialText;\n\n  svg {\n    margin-right: 10;\n  }\n\n  &:hover {\n    background-color: headerBackground;\n    color: materialTextInvert;\n  }\n\n  ul {\n    display: none;\n    position: absolute;\n    top: -2px;\n    left: 97%;\n    color: materialText;\n    z-index: taskbar;\n\n    svg {\n      width: 16px;\n      height: 16px;\n      margin-right: 6;\n    }\n  }\n\n  ", ";\n\n  ", ";\n"], function (_ref) {
-  var icon = _ref.icon;
-  return !icon && 'padding-left: 26px;';
-}, function (_ref2) {
-  var hasList = _ref2.hasList;
-  return hasList && (0, _styledComponents.css)(["\n      &:after {\n        position: absolute;\n        width: 5px;\n        height: 8px;\n        right: 8px;\n\n        content: '';\n        background-color: materialText;\n        mask-image: url('", "');\n        mask-position: center center;\n        mask-size: 5px 8px;\n        mask-repeat: no-repeat;\n\n        svg {\n          fill: materialTextInvert;\n        }\n      }\n\n      &:hover {\n        &:after {\n          background-color: materialTextInvert;\n        }\n\n        ul {\n          display: block;\n        }\n      }\n    "], _rightcaret["default"]);
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments); }
+var Item = /*#__PURE__*/_react["default"].forwardRef(function (rest, ref) {
+  return /*#__PURE__*/_react["default"].createElement(_Frame.Frame, _extends({}, rest, {
+    ref: ref,
+    className: (0, _classnames["default"])(_List.listItem, rest.className),
+    as: "li"
+  }));
 });
-var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref) {
-  var icon = _ref3.icon,
-    _ref3$children = _ref3.children,
-    children = _ref3$children === void 0 ? [] : _ref3$children,
-    rest = _objectWithoutProperties(_ref3, _excluded);
+var ListItem = exports.ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var icon = _ref.icon,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? [] : _ref$children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(Item, _extends({}, rest, {
-    icon: !!icon,
-    ref: ref,
-    hasList: Boolean(children && _react["default"].Children.map(children, function (child) {
-      return /*#__PURE__*/_react["default"].isValidElement(child);
-    }).some(function (child) {
-      return child;
-    })),
-    className: "default"
+    ref: ref
   }), icon, children);
 });
-ListItem.displayName = 'List.Item';
-var _default = exports["default"] = ListItem;
+ListItem.displayName = 'List.Item';

package/cjs/List/index.js

@@ -4,6 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _List = _interopRequireDefault(require("./List"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var _default = exports["default"] = _List["default"];
+var _List = require("./List");
+var _default = exports["default"] = _List.List;

package/cjs/Modal/Modal.css.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.modalWrapper = exports.menuWrapper = exports.menuItem = exports.content = exports.buttonWrapper = void 0;
+var _css = require("@vanilla-extract/css");
+var _contract = require("../themes/contract.css");
+var _recipes = require("@vanilla-extract/recipes");
+var modalWrapper = exports.modalWrapper = (0, _recipes.recipe)({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'fixed',
+    padding: '2px 2px 8px',
+    top: '50px',
+    backgroundColor: _contract.contract.colors.material,
+    boxShadow: _contract.contract.shadows.out
+  },
+  variants: {
+    active: {
+      "true": {
+        zIndex: _contract.contract.zIndices.modal
+      }
+    }
+  }
+});
+var buttonWrapper = exports.buttonWrapper = (0, _css.style)({
+  display: 'flex',
+  gap: '6px',
+  flexDirection: 'row',
+  padding: '0 6px 6px 6px'
+});
+(0, _css.globalStyle)("".concat(buttonWrapper, " button"), {
+  minWidth: '70px'
+});
+var content = exports.content = (0, _css.style)({
+  flexGrow: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '6px'
+});
+var menuWrapper = exports.menuWrapper = (0, _css.style)({
+  display: 'flex',
+  flexDirection: 'row',
+  listStyle: 'none',
+  margin: '0',
+  paddingLeft: '0',
+  paddingTop: '1px',
+  paddingBottom: '1px',
+  borderBottomStyle: 'solid',
+  borderWidth: '1px',
+  borderBottomColor: _contract.contract.colors.borderDark,
+  boxShadow: "0 1px 0 0 ".concat(_contract.contract.colors.borderLighter)
+});
+var menuItem = exports.menuItem = (0, _recipes.recipe)({
+  base: {
+    position: 'relative',
+    paddingLeft: '6px',
+    paddingRight: '6px',
+    userSelect: 'none'
+  },
+  variants: {
+    active: {
+      "true": {
+        backgroundColor: _contract.contract.colors.material,
+        color: _contract.contract.colors.materialTextInvert
+      }
+    }
+  }
+});
+(0, _css.globalStyle)("".concat(menuItem.classNames.base, " ul"), {
+  position: 'absolute',
+  left: '0',
+  color: _contract.contract.colors.materialText
+});

package/cjs/Modal/Modal.js

@@ -4,14 +4,17 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _styledComponents = _interopRequireWildcard(require("@xstyled/styled-components"));
+exports.Modal = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _reactDraggable = _interopRequireDefault(require("react-draggable"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _TitleBar = _interopRequireDefault(require("../TitleBar"));
 var _ModalContext = _interopRequireDefault(require("./ModalContext"));
-var _excluded = ["hasWindowButton", "buttons", "buttonsAlignment", "children", "closeModal", "defaultPosition", "positionOffset", "height", "icon", "menu", "title", "width"];
+var styles = _interopRequireWildcard(require("./Modal.css"));
+var _Frame = require("../Frame/Frame");
+var _close = _interopRequireDefault(require("./close.svg"));
+var _help = _interopRequireDefault(require("./help.svg"));
+var _excluded = ["hasWindowButton", "buttons", "buttonsAlignment", "children", "onClose", "onHelp", "defaultPosition", "positionOffset", "height", "icon", "menu", "title", "width"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -24,56 +27,30 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var ModalWrapper = _styledComponents["default"].div.withConfig({
-  displayName: "Modal__ModalWrapper",
-  componentId: "sc-4ouk59-0"
-})(["\n  display: flex;\n  flex-direction: column;\n\n  position: fixed;\n\n  padding: 2 2 8;\n\n  top: 50px;\n\n  background-color: material;\n\n  box-shadow: inset 1px 1px 0px 1px ", ",\n    inset 0 0 0 1px ", ",\n    1px 1px 0 1px ", ";\n\n  ", "\n  ", "\n"], (0, _styledComponents.th)('colors.borderLightest'), (0, _styledComponents.th)('colors.borderDark'), (0, _styledComponents.th)('colors.borderDarkest'), function (_ref) {
-  var width = _ref.width,
-    height = _ref.height;
-  return "\n    width: ".concat(width ? "".concat(width, "px") : 'auto', ";\n    height: ").concat(height ? "".concat(height, "px") : 'auto', ";\n  ");
-}, function (_ref2) {
-  var active = _ref2.active;
-  return active ? (0, _styledComponents.css)(["\n          z-index: modal;\n        "]) : '';
-});
-var Content = _styledComponents["default"].div.withConfig({
-  displayName: "Modal__Content",
-  componentId: "sc-4ouk59-1"
-})(["\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n\n  padding: 6;\n"]);
-var ButtonWrapper = _styledComponents["default"].div.withConfig({
-  displayName: "Modal__ButtonWrapper",
-  componentId: "sc-4ouk59-2"
-})(["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n\n  padding: 0 6 6 6;\n\n  & ", " {\n    margin-right: 6;\n    min-width: 70px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n"], function (_ref3) {
-  var _ref3$buttonsAlignmen = _ref3.buttonsAlignment,
-    buttonsAlignment = _ref3$buttonsAlignmen === void 0 ? 'center' : _ref3$buttonsAlignmen;
-  return buttonsAlignment;
-}, _Button["default"]);
-var MenuWrapper = _styledComponents["default"].ul.withConfig({
-  displayName: "Modal__MenuWrapper",
-  componentId: "sc-4ouk59-3"
-})(["\n  display: flex;\n  flex-direction: row;\n\n  list-style: none;\n  margin: 0;\n  padding-left: 0;\n  padding-bottom: 3;\n\n  border-bottom-style: solid;\n  border-width: 1;\n  border-bottom-color: borderDark;\n\n  box-shadow: 0 1px 0 0 ", ";\n"], (0, _styledComponents.th)('colors.borderLighter'));
-var MenuItem = _styledComponents["default"].li.withConfig({
-  displayName: "Modal__MenuItem",
-  componentId: "sc-4ouk59-4"
-})(["\n  position: relative;\n  padding-left: 6;\n  padding-right: 6;\n\n  user-select: none;\n\n  ul {\n    position: absolute;\n    left: 0;\n    color: ", ";\n  }\n\n  ", ";\n"], (0, _styledComponents.th)('colors.materialText'), function (_ref4) {
-  var active = _ref4.active;
-  return active && (0, _styledComponents.css)(["\n      background-color: primary;\n      color: materialTextInvert;\n    "]);
-});
-MenuItem.displayName = 'MenuItem';
-var ModalRenderer = function ModalRenderer(_ref5, ref) {
-  var _ref5$hasWindowButton = _ref5.hasWindowButton,
-    hasButton = _ref5$hasWindowButton === void 0 ? true : _ref5$hasWindowButton,
-    buttons = _ref5.buttons,
-    buttonsAlignment = _ref5.buttonsAlignment,
-    children = _ref5.children,
-    closeModal = _ref5.closeModal,
-    defaultPosition = _ref5.defaultPosition,
-    positionOffset = _ref5.positionOffset,
-    height = _ref5.height,
-    icon = _ref5.icon,
-    menu = _ref5.menu,
-    title = _ref5.title,
-    width = _ref5.width,
-    rest = _objectWithoutProperties(_ref5, _excluded);
+var ModalRenderer = function ModalRenderer(_ref, ref) {
+  var _ref$hasWindowButton = _ref.hasWindowButton,
+    hasButton = _ref$hasWindowButton === void 0 ? true : _ref$hasWindowButton,
+    _ref$buttons = _ref.buttons,
+    buttons = _ref$buttons === void 0 ? [] : _ref$buttons,
+    _ref$buttonsAlignment = _ref.buttonsAlignment,
+    buttonsAlignment = _ref$buttonsAlignment === void 0 ? 'flex-end' : _ref$buttonsAlignment,
+    children = _ref.children,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+    onHelp = _ref.onHelp,
+    _ref$defaultPosition = _ref.defaultPosition,
+    defaultPosition = _ref$defaultPosition === void 0 ? {
+      x: 0,
+      y: 0
+    } : _ref$defaultPosition,
+    positionOffset = _ref.positionOffset,
+    height = _ref.height,
+    icon = _ref.icon,
+    _ref$menu = _ref.menu,
+    menu = _ref$menu === void 0 ? [] : _ref$menu,
+    title = _ref.title,
+    width = _ref.width,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _React$useContext = React.useContext(_ModalContext["default"]),
     addWindows = _React$useContext.addWindows,
     removeWindow = _React$useContext.removeWindow,
@@ -128,36 +105,50 @@ var ModalRenderer = function ModalRenderer(_ref5, ref) {
     onMouseDown: id ? function () {
       return setActiveWindow(id);
     } : undefined
-  }, /*#__PURE__*/React.createElement(ModalWrapper, _extends({
+  }, /*#__PURE__*/React.createElement(_Frame.Frame, _extends({}, rest, {
     width: width,
-    height: height
-  }, rest, {
-    active: isActive,
+    height: height,
+    className: styles.modalWrapper({
+      active: isActive
+    }),
     ref: ref
   }), /*#__PURE__*/React.createElement(_TitleBar["default"], {
     active: isActive,
     icon: icon,
     title: title,
     className: "draggable"
-  }, /*#__PURE__*/React.createElement(_TitleBar["default"].OptionsBox, null, /*#__PURE__*/React.createElement(_TitleBar["default"].Option, null, "?"), /*#__PURE__*/React.createElement(_TitleBar["default"].Option, {
-    onClick: closeModal
-  }, "X"))), menu && menu.length > 0 && /*#__PURE__*/React.createElement(MenuWrapper, null, menu.map(function (_ref6) {
-    var name = _ref6.name,
-      list = _ref6.list;
+  }, /*#__PURE__*/React.createElement(_TitleBar["default"].OptionsBox, null, onHelp && /*#__PURE__*/React.createElement(_TitleBar["default"].Option, null, /*#__PURE__*/React.createElement("img", {
+    src: _help["default"],
+    alt: "help",
+    onClick: onHelp
+  })), /*#__PURE__*/React.createElement(_TitleBar["default"].Option, {
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _close["default"],
+    alt: "close"
+  })))), menu && menu.length > 0 && /*#__PURE__*/React.createElement("ul", {
+    className: styles.menuWrapper
+  }, menu.map(function (_ref2) {
+    var name = _ref2.name,
+      list = _ref2.list;
     var active = menuOpened === name;
-    return /*#__PURE__*/React.createElement(MenuItem, {
+    return /*#__PURE__*/React.createElement("li", {
       key: name,
       onMouseDown: function onMouseDown() {
         return setMenuOpened(name);
       },
-      active: active
+      className: styles.menuItem({
+        active: active
+      })
     }, name, active && list);
-  })), /*#__PURE__*/React.createElement(Content, {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.content,
     onClick: function onClick() {
       return setMenuOpened('');
     }
-  }, children), buttons && buttons.length > 0 && /*#__PURE__*/React.createElement(ButtonWrapper, {
-    buttonsAlignment: buttonsAlignment
+  }, children), buttons && buttons.length > 0 && /*#__PURE__*/React.createElement(_Frame.Frame, {
+    className: styles.buttonWrapper,
+    justifyContent: buttonsAlignment
   }, buttons.map(function (button) {
     return /*#__PURE__*/React.createElement(_Button["default"], {
       key: button.value,
@@ -166,12 +157,11 @@ var ModalRenderer = function ModalRenderer(_ref5, ref) {
     }, button.value);
   }))));
 };
-var Modal = /*#__PURE__*/React.forwardRef(ModalRenderer);
+var Modal = exports.Modal = /*#__PURE__*/React.forwardRef(ModalRenderer);
 Modal.displayName = 'Modal';
 Modal.defaultProps = {
   icon: undefined,
   title: 'Modal',
-  buttonsAlignment: 'flex-end',
   children: null,
   defaultPosition: {
     x: 0,
@@ -181,6 +171,5 @@ Modal.defaultProps = {
   menu: [],
   width: undefined,
   height: undefined,
-  closeModal: function closeModal() {}
-};
-var _default = exports["default"] = Modal;
+  onClose: function onClose() {}
+};

package/cjs/Modal/close.svg

@@ -0,0 +1 @@
+<svg width='8' height='7' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' /></svg>

package/cjs/Modal/help.svg

@@ -0,0 +1 @@
+<svg width='6' height='9' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M0 1h2v2H0zM1 0h4v1H1zM4 1h2v2H4zM3 3h2v1H3zM2 4h2v2H2zM2 7h2v2H2z'/></svg>

package/cjs/Modal/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function get() {
-    return _Modal["default"];
+    return _Modal.Modal;
   }
 });
 Object.defineProperty(exports, "ModalContext", {
@@ -21,7 +21,7 @@ Object.defineProperty(exports, "ModalProvider", {
     return _ModalProvider["default"];
   }
 });
-var _Modal = _interopRequireDefault(require("./Modal"));
+var _Modal = require("./Modal");
 var _ModalContext = _interopRequireDefault(require("./ModalContext"));
 var _ModalProvider = _interopRequireDefault(require("./ModalProvider"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }