@react95/core 7.0.2 → 8.0.0-alpha.1

package/esm/GlobalStyle.js

@@ -0,0 +1,4 @@
+import * as GlobalStyle_css from "./GlobalStyle/GlobalStyle.css.js";
+export {
+  GlobalStyle_css as GlobalStyle
+};

package/esm/Input/Input.css.js

@@ -0,0 +1,5 @@
+import './Input.css.ts.vanilla.css';
+/* empty css                                   *//* empty css                          */var input = "r95_taf7or0 r95_22fi81";
+export {
+  input
+};

package/esm/Input/Input.css.ts.vanilla.css

@@ -0,0 +1,21 @@
+.r95_taf7or0 {
+  outline: none;
+  border: none;
+  padding-top: var(--r95-space-3);
+  padding-right: var(--r95-space-3);
+  padding-bottom: var(--r95-space-5);
+  padding-left: var(--r95-space-3);
+  color: var(--r95-color-materialText);
+  background-color: var(--r95-color-inputBackground);
+  border-radius: 0;
+  border-top-width: var(--r95-space-1);
+  border-top-style: solid;
+  border-top-color: var(--r95-color-borderDark);
+  border-right-width: 0;
+  border-bottom-width: 0;
+  border-left-width: var(--r95-space-1);
+  border-left-style: solid;
+  border-left-color: var(--r95-color-borderDark);
+  box-shadow: var(--r95-shadow-input);
+  -webkit-appearance: none;
+}

package/esm/Input/Input.js

@@ -1,8 +1,9 @@
-import styled from '@xstyled/styled-components';
-import { padding, borders, shadow } from 'styled-system';
-import Cursor from '../Cursor';
-var Input = styled.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.Text, padding, borders, shadow);
-export default Input;
+import * as React from "react";
+import { Frame } from "../Frame/Frame.js";
+import { input } from "./Input.css.js";
+const Input = React.forwardRef(
+  (rest, ref) => /* @__PURE__ */ React.createElement(Frame, { ...rest, ref, className: input, as: "input" })
+);
+export {
+  Input
+};

package/esm/List/List.css.js

@@ -0,0 +1,9 @@
+import './List.css.ts.vanilla.css';
+/* empty css                         */var divider = "r95_1lxkvz41";
+var list = "r95_1lxkvz42";
+var listItem = "r95_1lxkvz40";
+export {
+  divider,
+  list,
+  listItem
+};

package/esm/List/List.css.ts.vanilla.css

@@ -0,0 +1,66 @@
+.r95_1lxkvz40 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  margin: var(--r95-space-0);
+  padding-block: var(--r95-space-2);
+  padding-inline: var(--r95-space-6);
+  color: var(--r95-color-materialText);
+}
+.r95_1lxkvz40:hover {
+  background-color: var(--r95-color-headerBackground);
+  color: var(--r95-color-materialTextInvert);
+}
+.r95_1lxkvz40:not(:has(svg)) {
+  padding-inline-start: 26px;
+}
+.r95_1lxkvz40:has(ul):after {
+  content: '';
+  position: absolute;
+  width: var(--r95-space-5);
+  height: var(--r95-space-8);
+  right: var(--r95-space-8);
+  background-color: var(--r95-color-materialText);
+  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTS4wMDQgMTguMDA3bDMuMDE2LS4wMTMuMDEtMy4wMSAyLjE4Ni4wMXYtMi4wMjVsMi44MTYtLjAxLS4wMDktMi45NEgxMHYtMmMuMDEtLjAxLTEuOTktLjAzNi0yLS4wMjYuMDEtLjAxLjAzNS0zLjAxLjAyNi0zIC4wMS0uMDEtMi44NDUtLjAxMS0yLjg1NS0uMDAxdi0yTDMgMi45OWMuMDEtLjAxLjAzNS0zLjAxMS4wMjUtMy4wMDEuMDEtLjAxLTMuMDQuMDEzLTMuMDI1LjAyM2wuMDA0IDE3Ljk5NHoiIGZpbGwtb3BhY2l0eT0ibnVsbCIvPjwvc3ZnPg==');
+  mask-position: center center;
+  mask-size: var(--r95-space-5) var(--r95-space-8);
+  mask-repeat: no-repeat;
+}
+.r95_1lxkvz40:has(ul):hover:after {
+  background-color: var(--r95-color-materialTextInvert);
+}
+.r95_1lxkvz40 svg {
+  margin-right: var(--r95-space-10);
+  min-width: var(--r95-space-16);
+}
+.r95_1lxkvz40 ul {
+  display: none;
+  position: absolute;
+  top: calc(var(--r95-space-2) * -1);
+  left: 97%;
+  color: var(--r95-color-materialText);
+  z-index: var(--r95-zIndex-taskbar);
+}
+.r95_1lxkvz40:has(ul):hover > ul {
+  display: block;
+}
+.r95_1lxkvz41 {
+  height: var(--r95-space-1);
+  border-top-style: solid;
+  border-top-width: var(--r95-space-1);
+  border-top-color: var(--r95-color-borderDark);
+  border-bottom-width: var(--r95-space-1);
+  border-bottom-style: solid;
+  border-bottom-color: var(--r95-color-borderLightest);
+  width: 98%;
+  margin-left: var(--r95-space-2);
+}
+.r95_1lxkvz42 {
+  background-color: var(--r95-color-material);
+  padding: var(--r95-space-2);
+  border: none;
+  margin: 0;
+  list-style: none;
+  box-shadow: var(--r95-shadow-out);
+}

package/esm/List/List.js

@@ -1,19 +1,16 @@
-import styled, { th } from '@xstyled/styled-components';
-import ListItem from './ListItem';
-import Divider from './ListDivider';
-var StyledList = styled.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"], th('colors.borderLightest'), th('colors.borderDark'), th('colors.borderDarkest'), function (_ref) {
-  var width = _ref.width;
-  return "\n    width: ".concat(width, "px;\n  ");
-});
-var List = Object.assign(StyledList, {
+import { ListItem } from "./ListItem.js";
+import { Divider } from "./ListDivider.js";
+import { Frame } from "../Frame/Frame.js";
+import React__default from "react";
+import { list } from "./List.css.js";
+import cn from "classnames";
+const ListRenderer = React__default.forwardRef(
+  (rest, ref) => /* @__PURE__ */ React__default.createElement(Frame, { ...rest, ref, className: cn(list, rest.className), as: "ul" })
+);
+const List = Object.assign(ListRenderer, {
   Item: ListItem,
-  Divider: Divider
+  Divider
 });
-List.displayName = 'List';
-List.defaultProps = {
-  width: 200
+export {
+  List
 };
-export default List;

package/esm/List/ListDivider.js

@@ -1,7 +1,19 @@
-import styled from '@xstyled/styled-components';
-var Divider = styled.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';
-export default Divider;
+import React__default from "react";
+import { Frame } from "../Frame/Frame.js";
+import { divider } from "./List.css.js";
+import cn from "classnames";
+const Divider = React__default.forwardRef(
+  (rest, ref) => /* @__PURE__ */ React__default.createElement(
+    Frame,
+    {
+      ...rest,
+      ref,
+      className: cn(divider, rest.className),
+      as: "li"
+    }
+  )
+);
+Divider.displayName = "List.Divider";
+export {
+  Divider
+};

package/esm/List/ListItem.js

@@ -1,35 +1,12 @@
-var _excluded = ["icon", "children"];
-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; }
-import React, { forwardRef } from 'react';
-import styled, { css } from '@xstyled/styled-components';
-import rightcaret from '../GlobalStyle/imgs/rightcaret.svg';
-var Item = styled.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 && 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);
-});
-var ListItem = /*#__PURE__*/forwardRef(function (_ref3, ref) {
-  var icon = _ref3.icon,
-    _ref3$children = _ref3.children,
-    children = _ref3$children === void 0 ? [] : _ref3$children,
-    rest = _objectWithoutProperties(_ref3, _excluded);
-  return /*#__PURE__*/React.createElement(Item, _extends({}, rest, {
-    icon: !!icon,
-    ref: ref,
-    hasList: Boolean(children && React.Children.map(children, function (child) {
-      return /*#__PURE__*/React.isValidElement(child);
-    }).some(function (child) {
-      return child;
-    })),
-    className: "default"
-  }), icon, children);
-});
-ListItem.displayName = 'List.Item';
-export default ListItem;
+import React__default, { forwardRef } from "react";
+import cn from "classnames";
+import { Frame } from "../Frame/Frame.js";
+import { listItem } from "./List.css.js";
+const Item = React__default.forwardRef((rest, ref) => /* @__PURE__ */ React__default.createElement(Frame, { ...rest, ref, className: cn(listItem, rest.className), as: "li" }));
+const ListItem = forwardRef(
+  ({ icon, children = [], ...rest }, ref) => /* @__PURE__ */ React__default.createElement(Item, { ...rest, ref }, icon, children)
+);
+ListItem.displayName = "List.Item";
+export {
+  ListItem
+};

package/esm/Modal/Modal.css.js

@@ -0,0 +1,14 @@
+import './Modal.css.ts.vanilla.css';
+/* empty css                          */import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var buttonWrapper = "r95_1txblt62";
+var content = "r95_1txblt63";
+var menuItem = createRuntimeFn({ defaultClassName: "r95_1txblt65", variantClassNames: { active: { true: "r95_1txblt66" } }, defaultVariants: {}, compoundVariants: [] });
+var menuWrapper = "r95_1txblt64";
+var modalWrapper = createRuntimeFn({ defaultClassName: "r95_1txblt60", variantClassNames: { active: { true: "r95_1txblt61" } }, defaultVariants: {}, compoundVariants: [] });
+export {
+  buttonWrapper,
+  content,
+  menuItem,
+  menuWrapper,
+  modalWrapper
+};

package/esm/Modal/Modal.css.ts.vanilla.css

@@ -0,0 +1,55 @@
+.r95_1txblt60 {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  padding: 2px 2px 8px;
+  top: 50px;
+  background-color: var(--r95-color-material);
+  box-shadow: var(--r95-shadow-out);
+}
+.r95_1txblt61 {
+  z-index: var(--r95-zIndex-modal);
+}
+.r95_1txblt62 {
+  display: flex;
+  gap: 6px;
+  flex-direction: row;
+  padding: 0 6px 6px 6px;
+}
+.r95_1txblt62 button {
+  min-width: 70px;
+}
+.r95_1txblt63 {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 6px;
+}
+.r95_1txblt64 {
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  border-bottom-style: solid;
+  border-width: 1px;
+  border-bottom-color: var(--r95-color-borderDark);
+  box-shadow: 0 1px 0 0 var(--r95-color-borderLighter);
+}
+.r95_1txblt65 {
+  position: relative;
+  padding-left: 6px;
+  padding-right: 6px;
+  user-select: none;
+}
+.r95_1txblt66 {
+  background-color: var(--r95-color-material);
+  color: var(--r95-color-materialTextInvert);
+}
+.r95_1txblt65 ul {
+  position: absolute;
+  left: 0;
+  color: var(--r95-color-materialText);
+}

package/esm/Modal/Modal.js

@@ -1,176 +1,134 @@
-var _excluded = ["hasWindowButton", "buttons", "buttonsAlignment", "children", "closeModal", "defaultPosition", "positionOffset", "height", "icon", "menu", "title", "width"];
-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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-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; }
-import styled, { css, th } from '@xstyled/styled-components';
-import * as React from 'react';
-import Draggable from 'react-draggable';
-import Button from '../Button';
-import TitleBar from '../TitleBar';
-import ModalContext from './ModalContext';
-var ModalWrapper = styled.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"], th('colors.borderLightest'), th('colors.borderDark'), 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 ? css(["\n          z-index: modal;\n        "]) : '';
-});
-var Content = styled.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 = styled.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);
-var MenuWrapper = styled.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"], th('colors.borderLighter'));
-var MenuItem = styled.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"], th('colors.materialText'), function (_ref4) {
-  var active = _ref4.active;
-  return active && 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 _React$useContext = React.useContext(ModalContext),
-    addWindows = _React$useContext.addWindows,
-    removeWindow = _React$useContext.removeWindow,
-    updateWindow = _React$useContext.updateWindow,
-    setActiveWindow = _React$useContext.setActiveWindow,
-    activeWindow = _React$useContext.activeWindow;
-  var _React$useState = React.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    id = _React$useState2[0],
-    setId = _React$useState2[1];
-  var _React$useState3 = React.useState(''),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    menuOpened = _React$useState4[0],
-    setMenuOpened = _React$useState4[1];
-  var _React$useState5 = React.useState(false),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    isActive = _React$useState6[0],
-    setIsActive = _React$useState6[1];
-  React.useEffect(function () {
+import * as React from "react";
+import Draggable from "react-draggable";
+import { Button } from "../Button/Button.js";
+import { TitleBar } from "../TitleBar/TitleBar.js";
+import { ModalContext } from "./ModalContext.js";
+import { modalWrapper, menuWrapper, menuItem, content, buttonWrapper } from "./Modal.css.js";
+import { Frame } from "../Frame/Frame.js";
+import close from "./close.svg.js";
+import help from "./help.svg.js";
+const ModalRenderer = ({
+  hasWindowButton: hasButton = true,
+  buttons = [],
+  buttonsAlignment = "flex-end",
+  children,
+  onClose = () => {
+  },
+  onHelp,
+  defaultPosition = { x: 0, y: 0 },
+  positionOffset,
+  height,
+  icon,
+  menu = [],
+  title,
+  width,
+  ...rest
+}, ref) => {
+  const {
+    addWindows,
+    removeWindow,
+    updateWindow,
+    setActiveWindow,
+    activeWindow
+  } = React.useContext(ModalContext);
+  const [id, setId] = React.useState(null);
+  const [menuOpened, setMenuOpened] = React.useState("");
+  const [isActive, setIsActive] = React.useState(false);
+  React.useEffect(() => {
     if (!id) {
-      var newId = addWindows({
-        icon: icon,
-        title: title,
-        hasButton: hasButton
-      });
+      const newId = addWindows({ icon, title, hasButton });
       if (newId) {
         setId(newId);
         setActiveWindow(newId);
       }
     } else {
-      updateWindow(id, {
-        icon: icon,
-        title: title,
-        hasButton: hasButton
-      });
+      updateWindow(id, { icon, title, hasButton });
     }
   }, [id, icon, title, hasButton]);
-  React.useEffect(function () {
-    return function () {
+  React.useEffect(() => {
+    return () => {
       if (id) {
         removeWindow(id);
       }
     };
   }, [id]);
-  React.useEffect(function () {
-    return setIsActive(id === activeWindow);
-  }, [id, activeWindow]);
-  return /*#__PURE__*/React.createElement(Draggable, {
-    handle: ".draggable",
-    defaultPosition: defaultPosition,
-    positionOffset: positionOffset,
-    onMouseDown: id ? function () {
-      return setActiveWindow(id);
-    } : undefined
-  }, /*#__PURE__*/React.createElement(ModalWrapper, _extends({
-    width: width,
-    height: height
-  }, rest, {
-    active: isActive,
-    ref: ref
-  }), /*#__PURE__*/React.createElement(TitleBar, {
-    active: isActive,
-    icon: icon,
-    title: title,
-    className: "draggable"
-  }, /*#__PURE__*/React.createElement(TitleBar.OptionsBox, null, /*#__PURE__*/React.createElement(TitleBar.Option, null, "?"), /*#__PURE__*/React.createElement(TitleBar.Option, {
-    onClick: closeModal
-  }, "X"))), menu && menu.length > 0 && /*#__PURE__*/React.createElement(MenuWrapper, null, menu.map(function (_ref6) {
-    var name = _ref6.name,
-      list = _ref6.list;
-    var active = menuOpened === name;
-    return /*#__PURE__*/React.createElement(MenuItem, {
-      key: name,
-      onMouseDown: function onMouseDown() {
-        return setMenuOpened(name);
+  React.useEffect(() => setIsActive(id === activeWindow), [id, activeWindow]);
+  return /* @__PURE__ */ React.createElement(
+    Draggable,
+    {
+      handle: ".draggable",
+      defaultPosition,
+      positionOffset,
+      onMouseDown: id ? () => setActiveWindow(id) : void 0
+    },
+    /* @__PURE__ */ React.createElement(
+      Frame,
+      {
+        ...rest,
+        width,
+        height,
+        className: modalWrapper({ active: isActive }),
+        ref
       },
-      active: active
-    }, name, active && list);
-  })), /*#__PURE__*/React.createElement(Content, {
-    onClick: function onClick() {
-      return setMenuOpened('');
-    }
-  }, children), buttons && buttons.length > 0 && /*#__PURE__*/React.createElement(ButtonWrapper, {
-    buttonsAlignment: buttonsAlignment
-  }, buttons.map(function (button) {
-    return /*#__PURE__*/React.createElement(Button, {
-      key: button.value,
-      onClick: button.onClick,
-      value: button.value
-    }, button.value);
-  }))));
+      /* @__PURE__ */ React.createElement(
+        TitleBar,
+        {
+          active: isActive,
+          icon,
+          title,
+          className: "draggable"
+        },
+        /* @__PURE__ */ React.createElement(TitleBar.OptionsBox, null, onHelp && /* @__PURE__ */ React.createElement(TitleBar.Option, null, /* @__PURE__ */ React.createElement("img", { src: help, alt: "help", onClick: onHelp })), /* @__PURE__ */ React.createElement(TitleBar.Option, { onClick: onClose }, /* @__PURE__ */ React.createElement("img", { src: close, alt: "close" })))
+      ),
+      menu && menu.length > 0 && /* @__PURE__ */ React.createElement("ul", { className: menuWrapper }, menu.map(({ name, list }) => {
+        const active = menuOpened === name;
+        return /* @__PURE__ */ React.createElement(
+          "li",
+          {
+            key: name,
+            onMouseDown: () => setMenuOpened(name),
+            className: menuItem({ active })
+          },
+          name,
+          active && list
+        );
+      })),
+      /* @__PURE__ */ React.createElement("div", { className: content, onClick: () => setMenuOpened("") }, children),
+      buttons && buttons.length > 0 && /* @__PURE__ */ React.createElement(
+        Frame,
+        {
+          className: buttonWrapper,
+          justifyContent: buttonsAlignment
+        },
+        buttons.map((button) => /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            key: button.value,
+            onClick: button.onClick,
+            value: button.value
+          },
+          button.value
+        ))
+      )
+    )
+  );
 };
-var Modal = /*#__PURE__*/React.forwardRef(ModalRenderer);
-Modal.displayName = 'Modal';
+const Modal = React.forwardRef(
+  ModalRenderer
+);
+Modal.displayName = "Modal";
 Modal.defaultProps = {
-  icon: undefined,
-  title: 'Modal',
-  buttonsAlignment: 'flex-end',
+  icon: void 0,
+  title: "Modal",
   children: null,
-  defaultPosition: {
-    x: 0,
-    y: 0
-  },
+  defaultPosition: { x: 0, y: 0 },
   buttons: [],
   menu: [],
-  width: undefined,
-  height: undefined,
-  closeModal: function closeModal() {}
+  width: void 0,
+  height: void 0,
+  onClose: () => {
+  }
+};
+export {
+  Modal
 };
-export default Modal;

package/esm/Modal/ModalContext.js

@@ -1,11 +1,16 @@
-/* eslint-disable no-unused-vars */
-import { createContext } from 'react';
-var ModalContext = /*#__PURE__*/createContext({
+import { createContext } from "react";
+const ModalContext = createContext({
   windows: {},
-  addWindows: function addWindows() {},
-  removeWindow: function removeWindow() {},
-  updateWindow: function updateWindow() {},
-  setActiveWindow: function setActiveWindow() {},
-  activeWindow: ''
+  addWindows: () => {
+  },
+  removeWindow: () => {
+  },
+  updateWindow: () => {
+  },
+  setActiveWindow: () => {
+  },
+  activeWindow: ""
 });
-export default ModalContext;
+export {
+  ModalContext
+};