@react95/core 7.0.2 → 8.0.0-alpha.0

package/esm/List/List.css.js

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

package/esm/List/List.js

@@ -1,19 +1,18 @@
-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  ");
+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); }
+import { ListItem } from './ListItem';
+import { Divider } from './ListDivider';
+import { Frame } from '../Frame/Frame';
+import React from 'react';
+import { list } from './List.css';
+import cn from 'classnames';
+var ListRenderer = /*#__PURE__*/React.forwardRef(function (rest, ref) {
+  return /*#__PURE__*/React.createElement(Frame, _extends({}, rest, {
+    ref: ref,
+    className: cn(list, rest.className),
+    as: "ul"
+  }));
 });
-var List = Object.assign(StyledList, {
+export var List = Object.assign(ListRenderer, {
   Item: ListItem,
   Divider: Divider
-});
-List.displayName = 'List';
-List.defaultProps = {
-  width: 200
-};
-export default List;
+});

package/esm/List/ListDivider.js

@@ -1,7 +1,13 @@
-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;
+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); }
+import React from 'react';
+import { Frame } from '../Frame/Frame';
+import { divider } from './List.css';
+import cn from 'classnames';
+export var Divider = /*#__PURE__*/React.forwardRef(function (rest, ref) {
+  return /*#__PURE__*/React.createElement(Frame, _extends({}, rest, {
+    ref: ref,
+    className: cn(divider, rest.className),
+    as: "li"
+  }));
+});
+Divider.displayName = 'List.Divider';

package/esm/List/ListItem.js

@@ -1,35 +1,25 @@
 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; }
+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); }
 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);
+import cn from 'classnames';
+import { Frame } from '../Frame/Frame';
+import { listItem } from './List.css';
+var Item = /*#__PURE__*/React.forwardRef(function (rest, ref) {
+  return /*#__PURE__*/React.createElement(Frame, _extends({}, rest, {
+    ref: ref,
+    className: cn(listItem, rest.className),
+    as: "li"
+  }));
 });
-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);
+export var ListItem = /*#__PURE__*/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.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"
+    ref: ref
   }), icon, children);
 });
-ListItem.displayName = 'List.Item';
-export default ListItem;
+ListItem.displayName = 'List.Item';

package/esm/List/index.js

@@ -1,2 +1,2 @@
-import List from './List';
+import { List } from './List';
 export default List;

package/esm/Modal/Modal.css.js

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

package/esm/Modal/Modal.js

@@ -1,4 +1,4 @@
-var _excluded = ["hasWindowButton", "buttons", "buttonsAlignment", "children", "closeModal", "defaultPosition", "positionOffset", "height", "icon", "menu", "title", "width"];
+var _excluded = ["hasWindowButton", "buttons", "buttonsAlignment", "children", "onClose", "onHelp", "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."); }
@@ -8,62 +8,39 @@ 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; }
-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);
+import * as styles from './Modal.css';
+import { Frame } from '../Frame/Frame';
+import close from './close.svg';
+import help from './help.svg';
+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),
     addWindows = _React$useContext.addWindows,
     removeWindow = _React$useContext.removeWindow,
@@ -118,36 +95,50 @@ var ModalRenderer = function ModalRenderer(_ref5, ref) {
     onMouseDown: id ? function () {
       return setActiveWindow(id);
     } : undefined
-  }, /*#__PURE__*/React.createElement(ModalWrapper, _extends({
+  }, /*#__PURE__*/React.createElement(Frame, _extends({}, rest, {
     width: width,
-    height: height
-  }, rest, {
-    active: isActive,
+    height: height,
+    className: styles.modalWrapper({
+      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;
+  }, /*#__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: 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, {
+    className: styles.buttonWrapper,
+    justifyContent: buttonsAlignment
   }, buttons.map(function (button) {
     return /*#__PURE__*/React.createElement(Button, {
       key: button.value,
@@ -156,12 +147,11 @@ var ModalRenderer = function ModalRenderer(_ref5, ref) {
     }, button.value);
   }))));
 };
-var Modal = /*#__PURE__*/React.forwardRef(ModalRenderer);
+export var Modal = /*#__PURE__*/React.forwardRef(ModalRenderer);
 Modal.displayName = 'Modal';
 Modal.defaultProps = {
   icon: undefined,
   title: 'Modal',
-  buttonsAlignment: 'flex-end',
   children: null,
   defaultPosition: {
     x: 0,
@@ -171,6 +161,5 @@ Modal.defaultProps = {
   menu: [],
   width: undefined,
   height: undefined,
-  closeModal: function closeModal() {}
-};
-export default Modal;
+  onClose: function onClose() {}
+};

package/esm/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/esm/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/esm/Modal/index.js

@@ -1,4 +1,4 @@
-import Modal from './Modal';
+import { Modal } from './Modal';
 import ModalContext from './ModalContext';
 import ModalProvider from './ModalProvider';
 export { Modal, ModalContext, ModalProvider };

package/esm/Modal/maximize.svg

@@ -0,0 +1 @@
+<svg width='9' height='9' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' /></svg>

package/esm/Modal/minimize.svg

@@ -0,0 +1 @@
+<svg width='6' height='2' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h6v2H0z'/></svg>

package/esm/Modal/restore.svg

@@ -0,0 +1 @@
+<svg width='8' height='9' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M2 0h6v2H2zM7 2h1v4H7zM2 2h1v1H2zM6 5h1v1H6zM0 3h6v2H0zM5 5h1v4H5zM0 5h1v4H0zM1 8h4v1H1z'/></svg>

package/esm/ProgressBar/ProgressBar.css.js

@@ -0,0 +1,34 @@
+import { style } from '@vanilla-extract/css';
+import { contract } from '../themes/contract.css';
+export var wrapper = style({
+  height: contract.space[20],
+  position: 'relative',
+  textAlign: 'center'
+});
+export var whiteBar = style({
+  height: contract.space[20],
+  lineHeight: contract.space[20],
+  borderLeft: contract.space[1],
+  borderLeftStyle: 'solid',
+  borderLeftColor: contract.colors.borderDark,
+  borderTop: contract.space[1],
+  borderTopStyle: 'solid',
+  borderTopColor: contract.colors.borderDark,
+  backgroundColor: contract.colors.inputBackground,
+  color: contract.colors.materialText,
+  boxShadow: contract.shadows.input
+});
+export var container = style({
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  overflow: 'hidden'
+});
+export var progress = style({
+  height: contract.space[17],
+  lineHeight: contract.space[18],
+  marginLeft: contract.space[2],
+  marginTop: contract.space[2],
+  backgroundColor: contract.colors.progress,
+  color: contract.colors.materialTextInvert
+});

package/esm/ProgressBar/ProgressBar.js

@@ -3,53 +3,27 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 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, th } from '@xstyled/styled-components';
-var Wrapper = styled.div.withConfig({
-  displayName: "ProgressBar__Wrapper",
-  componentId: "sc-1xpcki1-0"
-})(["\n  width: ", "px;\n  height: 20px;\n\n  position: relative;\n\n  text-align: center;\n"], function (_ref) {
-  var width = _ref.width;
-  return width;
-});
-var WhiteBar = styled.div.withConfig({
-  displayName: "ProgressBar__WhiteBar",
-  componentId: "sc-1xpcki1-1"
-})(["\n  width: ", "px;\n  height: 20px;\n  line-height: 20px;\n\n  border-left: 1;\n  border-left-color: borderDark;\n\n  border-top: 1;\n  border-top-color: borderDark;\n\n  background-color: inputBackground;\n  color: materialText;\n\n  ", "\n"], function (_ref2) {
-  var width = _ref2.width;
-  return width;
-}, css(["\n    box-shadow: inset -1px -1px 0 0 ", ",\n      inset 1px 1px 0 0 ", ",\n      0.5px 0.5px 0 0.5px ", ";\n  "], th('colors.material'), th('colors.borderDarkest'), th('colors.borderLightest')));
-var Container = styled.div.withConfig({
-  displayName: "ProgressBar__Container",
-  componentId: "sc-1xpcki1-2"
-})(["\n  width: ", "%;\n\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  overflow: hidden;\n"], function (_ref3) {
-  var percent = _ref3.percent;
-  return percent;
-});
-var Progress = styled.div.withConfig({
-  displayName: "ProgressBar__Progress",
-  componentId: "sc-1xpcki1-3"
-})(["\n  width: ", "px;\n  height: 17px;\n  line-height: 18px;\n\n  margin-left: 2;\n  margin-top: 2;\n\n  background-color: progress;\n  color: ", ";\n"], function (_ref4) {
-  var width = _ref4.width;
-  return width;
-}, th('colors.materialTextInvert'));
-var ProgressBar = /*#__PURE__*/forwardRef(function (_ref5, ref) {
-  var width = _ref5.width,
-    percent = _ref5.percent,
-    rest = _objectWithoutProperties(_ref5, _excluded);
-  return /*#__PURE__*/React.createElement(Wrapper, _extends({
-    width: width
-  }, rest, {
+import cn from 'classnames';
+import { Frame } from '../Frame/Frame';
+import * as styles from './ProgressBar.css';
+export var ProgressBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '150px' : _ref$width,
+    _ref$percent = _ref.percent,
+    percent = _ref$percent === void 0 ? 0 : _ref$percent,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Frame, _extends({}, rest, {
+    width: width,
+    className: cn(styles.wrapper, rest.className),
     ref: ref
-  }), /*#__PURE__*/React.createElement(WhiteBar, {
+  }), /*#__PURE__*/React.createElement(Frame, {
+    className: styles.whiteBar,
     width: width
-  }, "".concat(percent, "%")), /*#__PURE__*/React.createElement(Container, {
-    percent: percent
-  }, /*#__PURE__*/React.createElement(Progress, {
+  }, "".concat(percent, "%")), /*#__PURE__*/React.createElement(Frame, {
+    className: styles.container,
+    width: "".concat(percent, "%")
+  }, /*#__PURE__*/React.createElement(Frame, {
+    className: styles.progress,
     width: width
   }, "".concat(percent, "%"))));
-});
-ProgressBar.defaultProps = {
-  width: 150,
-  percent: 0
-};
-export default ProgressBar;
+});

package/esm/ProgressBar/index.js

@@ -1,2 +1,2 @@
-import ProgressBar from './ProgressBar';
+import { ProgressBar } from './ProgressBar';
 export default ProgressBar;

package/esm/RadioButton/RadioButton.css.js

@@ -0,0 +1,49 @@
+import { radioChecked, radioCheckedDisabled, radioUnchecked, radioUncheckedDisabled } from './radioButtonStates';
+import { globalStyle, style } from '@vanilla-extract/css';
+import { contract } from '../themes/contract.css';
+export var icon = style({
+  width: contract.space[12],
+  height: contract.space[12],
+  display: 'inline-block',
+  position: 'absolute',
+  left: contract.space[0],
+  top: contract.space[0],
+  backgroundImage: "url('".concat(radioUnchecked, "')"),
+  imageRendering: 'pixelated'
+});
+export var text = style({
+  padding: contract.space[1],
+  userSelect: 'none',
+  position: 'absolute',
+  top: '0',
+  left: contract.space[18]
+});
+export var label = style({
+  position: 'relative',
+  marginBottom: contract.space[10],
+  display: 'block',
+  selectors: {
+    '&:has(:disabled)': {
+      color: contract.colors.materialTextDisabled,
+      textShadow: "0.5px 0.5px ".concat(contract.colors.materialTextDisabledShadow)
+    }
+  }
+});
+export var field = style({
+  margin: 0,
+  opacity: 0
+});
+globalStyle("".concat(field, ":focus ~ ").concat(text, ", &:active + ").concat(text), {
+  borderWidth: contract.space[1],
+  borderStyle: 'dotted',
+  padding: 0
+});
+globalStyle("".concat(field, ":checked + ").concat(icon), {
+  backgroundImage: "url('".concat(radioChecked, "')")
+});
+globalStyle("".concat(field, ":disabled + ").concat(icon), {
+  backgroundImage: "url('".concat(radioUncheckedDisabled, "')")
+});
+globalStyle("".concat(field, ":checked:disabled + ").concat(icon), {
+  backgroundImage: "url('".concat(radioCheckedDisabled, "')")
+});