@react95/core 6.0.0 → 6.0.3

package/cjs/GlobalStyle/GlobalStyle.js

@@ -27,12 +27,8 @@ var _Scrollbar = require("./Scrollbar");
 
 var _Cursor = _interopRequireDefault(require("../Cursor/Cursor"));
 
-var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  @font-face {\n    font-family: 'MS Sans Serif';\n    src: url('", "');\n    src: url('", "') format('woff2'),\n         url('", "') format('woff'),\n         url('", "') format('truetype'),\n         url('", "?#iefix') format('embedded-opentype');\n    font-weight: normal;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: 'React95Video-Numbers';\n    src: url('", "');\n    src: url('", "') format('woff2'),\n         url('", "') format('woff'),\n         url('", "') format('truetype'),\n         url('", "?#iefix') format('embedded-opentype');\n    font-weight: normal;\n    font-style: normal;\n  }\n\n  body {\n    background-color: #5aa;\n    margin: 0;\n    padding: 0;\n    font-size: 12px;\n    color: materialText;\n  }\n\n  a {\n    color: anchor;\n  }\n\n  a:visited {\n    color: anchorVisited;\n  }\n\n  * {\n    font-family: 'MS Sans Serif';\n    box-sizing: border-box;\n  }\n\n  // scrollbar\n  ", "\n\n  html, .auto, *       { ", " }\n  .default             { ", " }\n  .none                { ", " }\n  .help                { ", " }\n  .pointer, :any-link  { ", " }\n  .progress            { ", " }\n  .wait                { ", " }\n  .crosshair           { ", " }\n  .text                { ", " }\n  .vertical-text       { ", " }\n  .alias               { ", " }\n  .copy                { ", " }\n  .move                { ", " }\n  .no-drop             { ", " }\n  .not-allowed         { ", " }\n  .grab                { ", " }\n  .grabbing            { ", " }\n  .col-resize          { ", " }\n  .row-resize          { ", " }\n  .n-resize            { ", " }\n  .e-resize            { ", " }\n  .s-resize            { ", " }\n  .w-resize            { ", " }\n  .ns-resize           { ", " }\n  .ew-resize           { ", " }\n  .ne-resize           { ", " }\n  .nw-resize           { ", " }\n  .se-resize           { ", " }\n  .sw-resize           { ", " }\n  .nesw-resize         { ", " }\n  .nwse-resize         { ", " }\n  .zoom-in             { ", " }\n  .zoom-out            { ", " }\n"])), _MSSansSerif4["default"], _MSSansSerif["default"], _MSSansSerif2["default"], _MSSansSerif3["default"], _MSSansSerif4["default"], _React95VideoNumbers4["default"], _React95VideoNumbers["default"], _React95VideoNumbers2["default"], _React95VideoNumbers3["default"], _React95VideoNumbers4["default"], _Scrollbar.scrollbars, _Cursor["default"].Auto, _Cursor["default"].Auto, _Cursor["default"].None, _Cursor["default"].Help, _Cursor["default"].Pointer, _Cursor["default"].Progress, _Cursor["default"].Wait, _Cursor["default"].Crosshair, _Cursor["default"].Text, _Cursor["default"].VerticalText, _Cursor["default"].Alias, _Cursor["default"].Copy, _Cursor["default"].Move, _Cursor["default"].NoDrop, _Cursor["default"].NotAllowed, _Cursor["default"].Grab, _Cursor["default"].Grabbing, _Cursor["default"].ColResize, _Cursor["default"].RowResize, _Cursor["default"].NResize, _Cursor["default"].EResize, _Cursor["default"].SResize, _Cursor["default"].WResize, _Cursor["default"].NsResize, _Cursor["default"].EwResize, _Cursor["default"].NeResize, _Cursor["default"].NwResize, _Cursor["default"].SeResize, _Cursor["default"].SwResize, _Cursor["default"].NeswResize, _Cursor["default"].NwseResize, _Cursor["default"].ZoomIn, _Cursor["default"].ZoomOut);
+var GlobalStyle = (0, _styledComponents.createGlobalStyle)(["\n  @font-face {\n    font-family: 'MS Sans Serif';\n    src: url('", "');\n    src: url('", "') format('woff2'),\n         url('", "') format('woff'),\n         url('", "') format('truetype'),\n         url('", "?#iefix') format('embedded-opentype');\n    font-weight: normal;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: 'React95Video-Numbers';\n    src: url('", "');\n    src: url('", "') format('woff2'),\n         url('", "') format('woff'),\n         url('", "') format('truetype'),\n         url('", "?#iefix') format('embedded-opentype');\n    font-weight: normal;\n    font-style: normal;\n  }\n\n  body {\n    background-color: #5aa;\n    margin: 0;\n    padding: 0;\n    font-size: 12px;\n    color: materialText;\n  }\n\n  a {\n    color: anchor;\n  }\n\n  a:visited {\n    color: anchorVisited;\n  }\n\n  * {\n    font-family: 'MS Sans Serif';\n    box-sizing: border-box;\n  }\n\n  // scrollbar\n  ", "\n\n  html, .auto, *       { ", " }\n  .default             { ", " }\n  .none                { ", " }\n  .help                { ", " }\n  .pointer, :any-link  { ", " }\n  .progress            { ", " }\n  .wait                { ", " }\n  .crosshair           { ", " }\n  .text                { ", " }\n  .vertical-text       { ", " }\n  .alias               { ", " }\n  .copy                { ", " }\n  .move                { ", " }\n  .no-drop             { ", " }\n  .not-allowed         { ", " }\n  .grab                { ", " }\n  .grabbing            { ", " }\n  .col-resize          { ", " }\n  .row-resize          { ", " }\n  .n-resize            { ", " }\n  .e-resize            { ", " }\n  .s-resize            { ", " }\n  .w-resize            { ", " }\n  .ns-resize           { ", " }\n  .ew-resize           { ", " }\n  .ne-resize           { ", " }\n  .nw-resize           { ", " }\n  .se-resize           { ", " }\n  .sw-resize           { ", " }\n  .nesw-resize         { ", " }\n  .nwse-resize         { ", " }\n  .zoom-in             { ", " }\n  .zoom-out            { ", " }\n"], _MSSansSerif4["default"], _MSSansSerif["default"], _MSSansSerif2["default"], _MSSansSerif3["default"], _MSSansSerif4["default"], _React95VideoNumbers4["default"], _React95VideoNumbers["default"], _React95VideoNumbers2["default"], _React95VideoNumbers3["default"], _React95VideoNumbers4["default"], _Scrollbar.scrollbars, _Cursor["default"].Auto, _Cursor["default"].Auto, _Cursor["default"].None, _Cursor["default"].Help, _Cursor["default"].Pointer, _Cursor["default"].Progress, _Cursor["default"].Wait, _Cursor["default"].Crosshair, _Cursor["default"].Text, _Cursor["default"].VerticalText, _Cursor["default"].Alias, _Cursor["default"].Copy, _Cursor["default"].Move, _Cursor["default"].NoDrop, _Cursor["default"].NotAllowed, _Cursor["default"].Grab, _Cursor["default"].Grabbing, _Cursor["default"].ColResize, _Cursor["default"].RowResize, _Cursor["default"].NResize, _Cursor["default"].EResize, _Cursor["default"].SResize, _Cursor["default"].WResize, _Cursor["default"].NsResize, _Cursor["default"].EwResize, _Cursor["default"].NeResize, _Cursor["default"].NwResize, _Cursor["default"].SeResize, _Cursor["default"].SwResize, _Cursor["default"].NeswResize, _Cursor["default"].NwseResize, _Cursor["default"].ZoomIn, _Cursor["default"].ZoomOut);
 var _default = GlobalStyle;
 exports["default"] = _default;

package/cjs/GlobalStyle/Scrollbar.js

@@ -26,11 +26,11 @@ var createHatchedBackground = function createHatchedBackground(_ref) {
       secondaryColor = _ref$secondaryColor === void 0 ? 'transparent' : _ref$secondaryColor,
       _ref$pixelSize = _ref.pixelSize,
       pixelSize = _ref$pixelSize === void 0 ? 2 : _ref$pixelSize;
-  return (0, _styledComponents.css)(["background-image:", ";background-color:", ";background-size:", ";background-position:0 0,", ";"], ["linear-gradient(\n      45deg,\n      ".concat(mainColor, " 25%,\n      transparent 25%,\n      transparent 75%,\n      ").concat(mainColor, " 75%\n    )"), "linear-gradient(\n      45deg,\n      ".concat(mainColor, " 25%,\n      transparent 25%,\n      transparent 75%,\n      ").concat(mainColor, " 75%\n    )")].join(','), secondaryColor, "".concat(pixelSize * 2, "px ").concat(pixelSize * 2, "px"), "".concat(pixelSize, "px ").concat(pixelSize, "px"));
+  return (0, _styledComponents.css)(["\n  background-image: ", ";\n  background-color: ", ";\n  background-size: ", ";\n  background-position: 0 0, ", ";\n"], ["linear-gradient(\n      45deg,\n      ".concat(mainColor, " 25%,\n      transparent 25%,\n      transparent 75%,\n      ").concat(mainColor, " 75%\n    )"), "linear-gradient(\n      45deg,\n      ".concat(mainColor, " 25%,\n      transparent 25%,\n      transparent 75%,\n      ").concat(mainColor, " 75%\n    )")].join(','), secondaryColor, "".concat(pixelSize * 2, "px ").concat(pixelSize * 2, "px"), "".concat(pixelSize, "px ").concat(pixelSize, "px"));
 };
 
 exports.createHatchedBackground = createHatchedBackground;
-var scrollbars = (0, _styledComponents.css)(["::-webkit-scrollbar{width:17;height:17;}::-webkit-scrollbar-track{", "}::-webkit-scrollbar-thumb{box-sizing:border-box;display:inline-block;background:", ";color:", ";", "}::-webkit-scrollbar-corner{background-color:", ";}::-webkit-scrollbar-button{box-sizing:border-box;display:inline-block;background:", ";color:", ";", " display:block;outline-offset:-2px;height:17;width:17;background-repeat:no-repeat;background-size:80%;background-position:0 0;}::-webkit-scrollbar-button:active,::-webkit-scrollbar-button:active{background-position:0 1;", "}::-webkit-scrollbar-button:horizontal:increment:start,::-webkit-scrollbar-button:horizontal:decrement:end,::-webkit-scrollbar-button:vertical:increment:start,::-webkit-scrollbar-button:vertical:decrement:end{display:none;}::-webkit-scrollbar-button:horizontal:decrement{background-image:", ";}::-webkit-scrollbar-button:horizontal:increment{background-image:", ";}::-webkit-scrollbar-button:vertical:decrement{background-image:", ";}::-webkit-scrollbar-button:vertical:increment{background-image:", ";}"], function (_ref2) {
+var scrollbars = (0, _styledComponents.css)(["\n  ::-webkit-scrollbar {\n    width: 17;\n    height: 17;\n  }\n  ::-webkit-scrollbar-track {\n    ", "\n  }\n  ::-webkit-scrollbar-thumb {\n    box-sizing: border-box;\n    display: inline-block;\n    background: ", ";\n    color: ", ";\n    ", "\n  }\n\n  ::-webkit-scrollbar-corner {\n    background-color: ", ";\n  }\n  ::-webkit-scrollbar-button {\n    box-sizing: border-box;\n    display: inline-block;\n    background: ", ";\n    color: ", ";\n    ", "\n    display: block;\n    outline-offset: -2px;\n    height: 17;\n    width: 17;\n    background-repeat: no-repeat;\n    background-size: 80%;\n    background-position: 0 0;\n  }\n  ::-webkit-scrollbar-button:active,\n  ::-webkit-scrollbar-button:active {\n    background-position: 0 1;\n    ", "\n  }\n\n  ::-webkit-scrollbar-button:horizontal:increment:start,\n  ::-webkit-scrollbar-button:horizontal:decrement:end,\n  ::-webkit-scrollbar-button:vertical:increment:start,\n  ::-webkit-scrollbar-button:vertical:decrement:end {\n    display: none;\n  }\n\n  ::-webkit-scrollbar-button:horizontal:decrement {\n    background-image: ", ";\n  }\n\n  ::-webkit-scrollbar-button:horizontal:increment {\n    background-image: ", ";\n  }\n\n  ::-webkit-scrollbar-button:vertical:decrement {\n    background-image: ", ";\n  }\n\n  ::-webkit-scrollbar-button:vertical:increment {\n    background-image: ", ";\n  }\n"], function (_ref2) {
   var theme = _ref2.theme;
   return createHatchedBackground({
     mainColor: theme.colors.material,

package/cjs/Input/Input.js

@@ -9,13 +9,12 @@ var _styledComponents = _interopRequireDefault(require("@xstyled/styled-componen
 
 var _styledSystem = require("styled-system");
 
-var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Input = _styledComponents["default"].input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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-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  ", "\n  ", "\n  ", "\n"])), _styledSystem.padding, _styledSystem.borders, _styledSystem.shadow);
+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"], _styledSystem.padding, _styledSystem.borders, _styledSystem.shadow);
 
 var _default = Input;
 exports["default"] = _default;

package/cjs/List/List.js

@@ -1,25 +1,28 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-var _styledComponents = _interopRequireDefault(require("@xstyled/styled-components"));
-
-var _system = require("@xstyled/system");
+var _styledComponents = _interopRequireWildcard(require("@xstyled/styled-components"));
 
 var _ListItem = _interopRequireDefault(require("./ListItem"));
 
 var _ListDivider = _interopRequireDefault(require("./ListDivider"));
 
-var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var StyledList = _styledComponents["default"].ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, _system.th)('colors.borderLightest'), (0, _system.th)('colors.borderDark'), (0, _system.th)('colors.borderDarkest'), function (_ref) {
+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  ");
 });

package/cjs/List/ListDivider.js

@@ -7,15 +7,12 @@ exports["default"] = void 0;
 
 var _styledComponents = _interopRequireDefault(require("@xstyled/styled-components"));
 
-var _system = require("@xstyled/system");
-
-var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Divider = _styledComponents["default"].li(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 1px;\n  border-top: 1;\n  border-top-color: borderDark;\n  border-bottom: 1;\n  border-bottom-color: ", ";\n\n  width: 98%;\n  margin-left: 2;\n"])), (0, _system.th)('colors.borderLightest'));
+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 = Divider;

package/cjs/List/ListItem.js

@@ -11,14 +11,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("@xstyled/styled-components"));
 
-var _system = require("@xstyled/system");
-
 var _rightcaret = _interopRequireDefault(require("../GlobalStyle/imgs/rightcaret.svg"));
 
 var _excluded = ["icon", "children"];
 
-var _templateObject, _templateObject2;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -31,14 +27,15 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Item = _styledComponents["default"].li(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n\n  display: flex;\n  align-items: center;\n  margin: 0;\n  padding: 2 6;\n\n  color: materialText;\n\n  img {\n    margin-right: 10;\n  }\n\n  &:hover {\n    background: ", ";\n    color: ", ";\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    img {\n      width: 18px;\n      height: 20px;\n      margin-right: 6;\n    }\n  }\n\n  svg {\n    fill: ", ";\n  }\n\n  ", ";\n\n  ", ";\n"])), (0, _system.th)('colors.headerBackground'), (0, _system.th)('colors.materialTextInvert'), (0, _system.th)('colors.materialTextInvert'), function (_ref) {
+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  img {\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    img {\n      width: 18px;\n      height: 20px;\n      margin-right: 6;\n    }\n  }\n\n  svg {\n    fill: materialTextInvert;\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)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &:after {\n        position: absolute;\n        width: 5px;\n        height: 8px;\n        right: 8px;\n\n        content: '';\n        background-color: ", ";\n        mask-image: url('", "');\n        mask-position: center center;\n        mask-size: 5px 8px;\n        mask-repeat: no-repeat;\n      }\n\n      &:hover {\n        &:after {\n          background-color: ", ";\n        }\n\n        ul {\n          display: block;\n        }\n      }\n    "])), (0, _system.th)('colors.materialText'), _rightcaret["default"], (0, _system.th)('colors.materialTextInvert'));
+  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\n      &:hover {\n        &:after {\n          background-color: materialTextInvert;\n        }\n\n        ul {\n          display: block;\n        }\n      }\n    "], _rightcaret["default"]);
 });
 
 var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref) {

package/cjs/Modal/Modal.js

@@ -11,8 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("@xstyled/styled-components"));
 
-var _system = require("@xstyled/system");
-
 var _reactDraggable = _interopRequireDefault(require("react-draggable"));
 
 var _Button = _interopRequireDefault(require("../Button"));
@@ -23,8 +21,6 @@ var _ModalContext = _interopRequireDefault(require("./ModalContext"));
 
 var _excluded = ["hasWindowButton", "buttons", "buttonsAlignment", "children", "closeModal", "defaultPosition", "height", "icon", "menu", "title", "width"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -49,30 +45,43 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var ModalWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, _system.th)('colors.borderLightest'), (0, _system.th)('colors.borderDark'), (0, _system.th)('colors.borderDarkest'), function (_ref) {
+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)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          z-index: modal;\n        "]))) : '';
+  return active ? (0, _styledComponents.css)(["\n          z-index: modal;\n        "]) : '';
 });
 
-var Content = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n\n  padding: 6;\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(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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 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(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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, _system.th)('colors.borderLighter'));
+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(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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, _system.th)('colors.materialText'), function (_ref4) {
+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)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      background-color: primary;\n      color: ", ";\n    "])), (0, _system.th)('colors.materialTextInvert'));
+  return active && (0, _styledComponents.css)(["\n      background-color: primary;\n      color: materialTextInvert;\n    "]);
 });
 
 MenuItem.displayName = 'MenuItem';

package/cjs/ProgressBar/ProgressBar.js

@@ -11,12 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("@xstyled/styled-components"));
 
-var _system = require("@xstyled/system");
-
 var _excluded = ["width", "percent"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -27,27 +23,37 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: 20px;\n\n  position: relative;\n\n  text-align: center;\n"])), function (_ref) {
+var Wrapper = _styledComponents["default"].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 = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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 WhiteBar = _styledComponents["default"].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;
-}, (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    box-shadow: inset -1px -1px 0 0 ", ",\n      inset 1px 1px 0 0 ", ",\n      0.5px 0.5px 0 0.5px ", ";\n  "])), (0, _system.th)('colors.material'), (0, _system.th)('colors.borderDarkest'), (0, _system.th)('colors.borderLightest')));
+}, (0, _styledComponents.css)(["\n    box-shadow: inset -1px -1px 0 0 ", ",\n      inset 1px 1px 0 0 ", ",\n      0.5px 0.5px 0 0.5px ", ";\n  "], (0, _styledComponents.th)('colors.material'), (0, _styledComponents.th)('colors.borderDarkest'), (0, _styledComponents.th)('colors.borderLightest')));
 
-var Container = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: ", "%;\n\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  overflow: hidden;\n"])), function (_ref3) {
+var Container = _styledComponents["default"].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 = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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 Progress = _styledComponents["default"].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;
-}, (0, _system.th)('colors.materialTextInvert'));
+}, (0, _styledComponents.th)('colors.materialTextInvert'));
 
 var ProgressBar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref5, ref) {
   var width = _ref5.width,

package/cjs/RadioButton/RadioButton.js

@@ -11,14 +11,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("@xstyled/styled-components"));
 
-var _system = require("@xstyled/system");
-
 var _radioButtonStates = require("./radioButtonStates");
 
 var _excluded = ["children", "disabled"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -29,19 +25,29 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var Icon = _styledComponents["default"].span.withConfig({
+  displayName: "RadioButton__Icon",
+  componentId: "sc-1nrg9a4-0"
+})(["\n  width: 12px;\n  height: 12px;\n\n  content: '';\n  display: inline-block;\n\n  position: absolute;\n  left: 0;\n  top: 0;\n\n  background-image: url(", ");\n"], _radioButtonStates.radioUnchecked);
 
-var Icon = _styledComponents["default"].span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n\n  content: '';\n  display: inline-block;\n\n  position: absolute;\n  left: 0;\n  top: 0;\n\n  background-image: url(", ");\n"])), _radioButtonStates.radioUnchecked);
-
-var Text = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 1;\n  user-select: none;\n\n  position: absolute;\n  top: 0;\n  left: 18px;\n"])));
+var Text = _styledComponents["default"].span.withConfig({
+  displayName: "RadioButton__Text",
+  componentId: "sc-1nrg9a4-1"
+})(["\n  padding: 1;\n  user-select: none;\n\n  position: absolute;\n  top: 0;\n  left: 18px;\n"]);
 
 var Field = _styledComponents["default"].input.attrs({
   type: 'radio'
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0;\n  opacity: 0;\n\n  &:focus ~ ", ", &:active + ", " {\n    border-width: 1;\n    border-style: dotted;\n    padding: 0;\n  }\n\n  &:checked + ", " {\n    background-image: url(", ");\n  }\n\n  &:disabled + ", " {\n    background-image: url(", ");\n  }\n\n  &:checked:disabled + ", " {\n    background-image: url(", ");\n  }\n"])), Text, Text, Icon, _radioButtonStates.radioChecked, Icon, _radioButtonStates.radioUncheckedDisabled, Icon, _radioButtonStates.radioCheckedDisabled);
-
-var Label = _styledComponents["default"].label(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  margin-bottom: 10;\n  display: block;\n\n  ", "\n"])), function (_ref) {
+}).withConfig({
+  displayName: "RadioButton__Field",
+  componentId: "sc-1nrg9a4-2"
+})(["\n  margin: 0;\n  opacity: 0;\n\n  &:focus ~ ", ", &:active + ", " {\n    border-width: 1;\n    border-style: dotted;\n    padding: 0;\n  }\n\n  &:checked + ", " {\n    background-image: url(", ");\n  }\n\n  &:disabled + ", " {\n    background-image: url(", ");\n  }\n\n  &:checked:disabled + ", " {\n    background-image: url(", ");\n  }\n"], Text, Text, Icon, _radioButtonStates.radioChecked, Icon, _radioButtonStates.radioUncheckedDisabled, Icon, _radioButtonStates.radioCheckedDisabled);
+
+var Label = _styledComponents["default"].label.withConfig({
+  displayName: "RadioButton__Label",
+  componentId: "sc-1nrg9a4-3"
+})(["\n  position: relative;\n  margin-bottom: 10;\n  display: block;\n\n  ", "\n"], function (_ref) {
   var disabled = _ref.disabled;
-  return disabled && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      color: ", ";\n      text-shadow: 0.5px 0.5px ", ";\n    "])), (0, _system.th)('colors.materialTextDisabled'), (0, _system.th)('colors.materialTextDisabledShadow'));
+  return disabled && (0, _styledComponents.css)(["\n      color: materialTextDisabled;\n      text-shadow: 0.5px 0.5px ", ";\n    "], (0, _styledComponents.th)('colors.materialTextDisabledShadow'));
 });
 
 var RadioButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {

package/cjs/Range/Range.js

@@ -9,22 +9,19 @@ exports["default"] = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("@xstyled/styled-components"));
 
-var _system = require("@xstyled/system");
-
-var _templateObject, _templateObject2, _templateObject3;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var trackStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 4px;\n\n  background: ", ";\n\n  cursor: pointer;\n\n  border-top: 1;\n  border-top-color: borderLight;\n  border-right: 2;\n  border-right-color: ", ";\n  border-bottom: 1;\n  border-bottom-color: borderLighter;\n  border-left: 2;\n  border-left-color: ", ";\n\n  box-shadow: 0px 1px 0px 0px ", ";\n"])), (0, _system.th)('colors.borderDarkest'), (0, _system.th)('colors.borderLightest'), (0, _system.th)('colors.borderLightest'), (0, _system.th)('colors.borderLightest'));
-var thumbStyle = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 20px;\n\n  background-color: material;\n\n  cursor: pointer;\n\n  margin-top: -", "px;\n\n  border-top: 1;\n  border-top-color: ", ";\n  border-right: 1;\n  border-right-color: ", ";\n  border-bottom: 1;\n  border-bottom-color: ", ";\n  border-left: 1;\n  border-left-color: ", ";\n\n  box-shadow: inset 0px -1px 0px ", ",\n    inset -1px 0px 0px ", ",\n    inset 0px 1px 0px ", ",\n    inset 1px 0px 0px ", ";\n\n  -webkit-appearance: none;\n"])), (0, _system.th)('space.8'), (0, _system.th)('colors.borderLightest'), (0, _system.th)('colors.borderDarkest'), (0, _system.th)('colors.borderDarkest'), (0, _system.th)('colors.borderLightest'), (0, _system.th)('colors.borderDark'), (0, _system.th)('colors.borderDark'), (0, _system.th)('colors.borderLighter'), (0, _system.th)('colors.borderLighter'));
+var trackStyle = (0, _styledComponents.css)(["\n  width: 100%;\n  height: 4px;\n\n  background-color: borderDarkest;\n\n  cursor: pointer;\n\n  border-top: 1;\n  border-top-color: borderLight;\n  border-right: 2;\n  border-right-color: borderLightest;\n  border-bottom: 1;\n  border-bottom-color: borderLighter;\n  border-left: 2;\n  border-left-color: borderLightest;\n\n  box-shadow: 0px 1px 0px 0px ", ";\n"], (0, _styledComponents.th)('colors.borderLightest'));
+var thumbStyle = (0, _styledComponents.css)(["\n  width: 12px;\n  height: 20px;\n\n  background-color: material;\n\n  cursor: pointer;\n\n  margin-top: -8;\n\n  border-top: 1;\n  border-top-color: borderLightest;\n  border-right: 1;\n  border-right-color: borderDarkest;\n  border-bottom: 1;\n  border-bottom-color: borderDarkest;\n  border-left: 1;\n  border-left-color: borderLightest;\n\n  box-shadow: inset 0px -1px 0px ", ",\n    inset -1px 0px 0px ", ",\n    inset 0px 1px 0px ", ",\n    inset 1px 0px 0px ", ";\n\n  -webkit-appearance: none;\n"], (0, _styledComponents.th)('colors.borderDark'), (0, _styledComponents.th)('colors.borderDark'), (0, _styledComponents.th)('colors.borderLighter'), (0, _styledComponents.th)('colors.borderLighter'));
 
 var Range = _styledComponents["default"].input.attrs({
   type: 'range'
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  -webkit-appearance: none;\n  width: 100%;\n\n  &:hover,\n  &:focus,\n  &:active {\n    outline: none;\n  }\n\n  &::-webkit-slider-runnable-track {\n    ", "\n  }\n\n  &::-webkit-slider-thumb {\n    ", "\n  }\n\n  &:focus::-webkit-slider-runnable-track {\n    background: ", ";\n  }\n\n  &::-moz-range-track {\n    ", "\n  }\n\n  &::-moz-range-thumb {\n    ", "\n  }\n"])), trackStyle, thumbStyle, (0, _system.th)('colors.borderDarkest'), trackStyle, thumbStyle);
+}).withConfig({
+  displayName: "Range",
+  componentId: "sc-1p4whtx-0"
+})(["\n  -webkit-appearance: none;\n  width: 100%;\n\n  &:hover,\n  &:focus,\n  &:active {\n    outline: none;\n  }\n\n  &::-webkit-slider-runnable-track {\n    ", "\n  }\n\n  &::-webkit-slider-thumb {\n    ", "\n  }\n\n  &:focus::-webkit-slider-runnable-track {\n    background-color: borderDarkest;\n  }\n\n  &::-moz-range-track {\n    ", "\n  }\n\n  &::-moz-range-thumb {\n    ", "\n  }\n"], trackStyle, thumbStyle, trackStyle, thumbStyle);
 
 var _default = Range;
 exports["default"] = _default;

package/cjs/Tabs/Tab.js

@@ -11,12 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("@xstyled/styled-components"));
 
-var _system = require("@xstyled/system");
-
 var _excluded = ["activeTab", "title"];
 
-var _templateObject, _templateObject2;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -27,11 +23,12 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var NavItem = _styledComponents["default"].li(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  padding: 3 6;\n  background-color: material;\n  box-shadow: inset 0 1px 0 0 ", ",\n    -2px 1px 0 -1px ", ",\n    -3px 1px 0 -1px ", ",\n    -2px 0 0 -1px ", ",\n    2px 1px 0 -1px ", ",\n    2px 0 0 -1px ", ",\n    3px 1px 0 -1px ", ";\n  margin-right: 2;\n  margin-left: 2;\n\n  &:first-child {\n    margin-left: 4;\n  }\n\n  ", "\n"])), (0, _system.th)('colors.borderLightest'), (0, _system.th)('colors.material'), (0, _system.th)('colors.borderLightest'), (0, _system.th)('colors.borderLightest'), (0, _system.th)('colors.borderDark'), (0, _system.th)('colors.borderDarkest'), (0, _system.th)('colors.borderDarkest'), function (_ref) {
+var NavItem = _styledComponents["default"].li.withConfig({
+  displayName: "Tab__NavItem",
+  componentId: "sc-vz441a-0"
+})(["\n  list-style: none;\n  padding: 3 6;\n  background-color: material;\n  box-shadow: inset 0 1px 0 0 ", ",\n    -2px 1px 0 -1px ", ",\n    -3px 1px 0 -1px ", ",\n    -2px 0 0 -1px ", ",\n    2px 1px 0 -1px ", ",\n    2px 0 0 -1px ", ",\n    3px 1px 0 -1px ", ";\n  margin-right: 2;\n  margin-left: 2;\n\n  &:first-child {\n    margin-left: 4;\n  }\n\n  ", "\n"], (0, _styledComponents.th)('colors.borderLightest'), (0, _styledComponents.th)('colors.material'), (0, _styledComponents.th)('colors.borderLightest'), (0, _styledComponents.th)('colors.borderLightest'), (0, _styledComponents.th)('colors.borderDark'), (0, _styledComponents.th)('colors.borderDarkest'), (0, _styledComponents.th)('colors.borderDarkest'), function (_ref) {
   var active = _ref.active;
-  return active && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      margin-top: -", "px;\n      margin-left: -", "px;\n      margin-bottom: 1;\n\n      &:first-child {\n        margin-left: 2;\n      }\n\n      box-shadow: inset 0 1px 0 0 ", ",\n        -2px 1px 0 -1px ", ",\n        -0.5px 3px 0 0.5px ", ",\n        -2px 2px 0 0 ", ",\n        -2px 0 0 -1px ", ",\n        1px 2px 0 0 ", ",\n        2px 0 0 -1px ", ",\n        2px 2px 0 0 ", ";\n\n      & + li {\n        margin-left: 0;\n        box-shadow: inset 0 1px 0 0 ", ",\n          2px 1px 0 -1px ", ",\n          2px 0 0 -1px ", ",\n          3px 1px 0 -1px ", ";\n      }\n    "])), (0, _system.th)('space.2'), (0, _system.th)('space.2'), (0, _system.th)('colors.borderLightest'), (0, _system.th)('colors.material'), (0, _system.th)('colors.material'), (0, _system.th)('colors.borderLightest'), (0, _system.th)('colors.borderLightest'), (0, _system.th)('colors.borderDark'), (0, _system.th)('colors.borderDarkest'), (0, _system.th)('colors.borderDarkest'), (0, _system.th)('colors.borderLightest'), (0, _system.th)('colors.borderDark'), (0, _system.th)('colors.borderDarkest'), (0, _system.th)('colors.borderDarkest'));
+  return active && (0, _styledComponents.css)(["\n      margin-top: -2;\n      margin-left: -2;\n      margin-bottom: 1;\n\n      &:first-child {\n        margin-left: 2;\n      }\n\n      box-shadow: inset 0 1px 0 0 ", ",\n        -2px 1px 0 -1px ", ",\n        -0.5px 3px 0 0.5px ", ",\n        -2px 2px 0 0 ", ",\n        -2px 0 0 -1px ", ",\n        1px 2px 0 0 ", ",\n        2px 0 0 -1px ", ",\n        2px 2px 0 0 ", ";\n\n      & + li {\n        margin-left: 0;\n        box-shadow: inset 0 1px 0 0 ", ",\n          2px 1px 0 -1px ", ",\n          2px 0 0 -1px ", ",\n          3px 1px 0 -1px ", ";\n      }\n    "], (0, _styledComponents.th)('colors.borderLightest'), (0, _styledComponents.th)('colors.material'), (0, _styledComponents.th)('colors.material'), (0, _styledComponents.th)('colors.borderLightest'), (0, _styledComponents.th)('colors.borderLightest'), (0, _styledComponents.th)('colors.borderDark'), (0, _styledComponents.th)('colors.borderDarkest'), (0, _styledComponents.th)('colors.borderDarkest'), (0, _styledComponents.th)('colors.borderLightest'), (0, _styledComponents.th)('colors.borderDark'), (0, _styledComponents.th)('colors.borderDarkest'), (0, _styledComponents.th)('colors.borderDarkest'));
 });
 
 var Tab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {

package/cjs/Tabs/Tabs.js

@@ -17,8 +17,6 @@ var _Frame = _interopRequireDefault(require("../Frame"));
 
 var _excluded = ["children", "style", "defaultActiveTab", "onChange"];
 
-var _templateObject, _templateObject2;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -43,10 +41,14 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Navbar = (0, _styledComponents["default"])(_Frame["default"])(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 0;\n  margin: 0;\n  border: none;\n  box-shadow: none;\n  background-color: unset;\n"])));
-var NavContainer = (0, _styledComponents["default"])(_Frame["default"])(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 12;\n  box-shadow: out;\n"])));
+var Navbar = (0, _styledComponents["default"])(_Frame["default"]).withConfig({
+  displayName: "Tabs__Navbar",
+  componentId: "sc-1r3cxnf-0"
+})(["\n  display: flex;\n  padding: 0;\n  margin: 0;\n  border: none;\n  box-shadow: none;\n  background-color: unset;\n"]);
+var NavContainer = (0, _styledComponents["default"])(_Frame["default"]).withConfig({
+  displayName: "Tabs__NavContainer",
+  componentId: "sc-1r3cxnf-1"
+})(["\n  padding: 12;\n  box-shadow: out;\n"]);
 NavContainer.displayName = 'NavContainer';
 var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,

package/cjs/TaskBar/Clock.js

@@ -15,8 +15,6 @@ var _Frame = _interopRequireDefault(require("../Frame"));
 
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 
-var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -35,9 +33,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var StyledTooltip = (0, _styledComponents["default"])(_Tooltip["default"])(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  div:first-child {\n    right: 0;\n  }\n"])));
+var StyledTooltip = (0, _styledComponents["default"])(_Tooltip["default"]).withConfig({
+  displayName: "Clock__StyledTooltip",
+  componentId: "sc-1tq15w4-0"
+})(["\n  div:first-child {\n    right: 0;\n  }\n"]);
 
 var Clock = function Clock() {
   var _useState = (0, _react.useState)(''),
@@ -59,7 +58,7 @@ var Clock = function Clock() {
     return function () {
       return clearInterval(interval);
     };
-  });
+  }, []);
   return /*#__PURE__*/_react["default"].createElement(_Frame["default"], {
     boxShadow: "in",
     bg: "transparent",

package/cjs/TaskBar/TaskBar.js

@@ -21,8 +21,6 @@ var _WindowButton = _interopRequireDefault(require("./WindowButton"));
 
 var _icons = require("@react95/icons");
 
-var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -41,9 +39,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Truncate = _styledComponents["default"].span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  text-align: left;\n"])));
+var Truncate = _styledComponents["default"].span.withConfig({
+  displayName: "TaskBar__Truncate",
+  componentId: "sc-2weywn-0"
+})(["\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  text-align: left;\n"]);
 
 var TaskBar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var list = _ref.list;

package/cjs/TaskBar/WindowButton.js

@@ -11,16 +11,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("@xstyled/styled-components"));
 
-var _system = require("@xstyled/system");
+var _icons = require("@react95/icons");
 
 var _Frame = _interopRequireDefault(require("../Frame/Frame"));
 
-var _icons = require("@react95/icons");
-
 var _excluded = ["children", "small", "icon", "active"];
 
-var _templateObject, _templateObject2, _templateObject3;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -33,18 +29,22 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Button = (0, _styledComponents["default"])(_Frame["default"])(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 2 3;\n  margin-right: 2;\n  max-width: 150px;\n  border: none;\n  outline: none;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var Button = (0, _styledComponents["default"])(_Frame["default"]).withConfig({
+  displayName: "WindowButton__Button",
+  componentId: "sc-1vv5l1a-0"
+})(["\n  display: inline-flex;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 2 3;\n  margin-right: 2;\n  max-width: 150px;\n  border: none;\n  outline: none;\n\n  ", "\n\n  ", "\n"], function (_ref) {
   var small = _ref.small;
   return !small ? "\n    width: 100%;\n  " : '';
 }, function (_ref2) {
   var active = _ref2.active,
       small = _ref2.small;
-  return active && small ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          outline: ", "px dotted ", ";\n          outline-offset: -", "px;\n          padding-top: 4;\n          padding-right: 2;\n          padding-bottom: 0;\n          padding-left: 4;\n        "])), (0, _system.th)('space.1'), (0, _system.th)('colors.borderDarkest'), (0, _system.th)('space.4')) : '';
+  return active && small ? (0, _styledComponents.css)(["\n          outline: ", "px dotted ", ";\n          outline-offset: -", "px;\n          padding-top: 4;\n          padding-right: 2;\n          padding-bottom: 0;\n          padding-left: 4;\n        "], (0, _styledComponents.th)('space.1'), (0, _styledComponents.th)('colors.borderDarkest'), (0, _styledComponents.th)('space.4')) : '';
 });
 
-var IconWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  img {\n    margin-right: 4;\n    min-width: 20;\n    width: 20;\n    height: 20;\n  }\n"])));
+var IconWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "WindowButton__IconWrapper",
+  componentId: "sc-1vv5l1a-1"
+})(["\n  img {\n    margin-right: 4;\n    min-width: 20;\n    width: 20;\n    height: 20;\n  }\n"]);
 
 var WindowButton = function WindowButton(_ref3) {
   var _ref3$children = _ref3.children,