@react95/core 7.0.1 → 8.0.0-alpha.0

package/cjs/Dropdown/Dropdown.css.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapper = exports.select = void 0;
+var _css = require("@vanilla-extract/css");
+var _contract = require("../themes/contract.css");
+var _downcaret = _interopRequireDefault(require("./imgs/downcaret.png"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var wrapper = exports.wrapper = (0, _css.style)({
+  position: 'relative',
+  width: '200px',
+  height: _contract.contract.space[20],
+  ':after': {
+    display: 'flex',
+    justifyContent: 'center',
+    width: _contract.contract.space[18],
+    height: _contract.contract.space[17],
+    fontSize: '14px',
+    lineHeight: 1.1,
+    content: "''",
+    pointerEvents: 'none',
+    position: 'absolute',
+    right: _contract.contract.space[1],
+    top: _contract.contract.space[2],
+    backgroundColor: _contract.contract.colors.material,
+    borderRightStyle: 'solid',
+    borderRightWidth: _contract.contract.space[1],
+    borderBottomStyle: 'solid',
+    borderBottomWidth: _contract.contract.space[1],
+    backgroundImage: "url('".concat(_downcaret["default"], "')"),
+    backgroundPosition: '60% 60%',
+    backgroundRepeat: 'no-repeat',
+    boxShadow: "inset 0.5px 0.7px 0px 0.7px ".concat(_contract.contract.colors.material, ",\n    inset -1px 0px 0 1px ").concat(_contract.contract.colors.borderDark, ",\n    inset 1.5px 1.5px 0px 1.5px ").concat(_contract.contract.colors.borderLightest)
+  }
+});
+var select = exports.select = (0, _css.style)({
+  position: 'relative',
+  outline: 'none',
+  border: 'none',
+  borderRadius: '0',
+  width: '100%',
+  height: _contract.contract.space[20],
+  padding: _contract.contract.space[3],
+  color: _contract.contract.colors.materialText,
+  backgroundColor: _contract.contract.colors.inputBackground,
+  borderLeftStyle: 'solid',
+  borderLeftWidth: _contract.contract.space[1],
+  borderLeftColor: _contract.contract.colors.borderDark,
+  borderTopStyle: 'solid',
+  borderTopWidth: _contract.contract.space[1],
+  borderTopColor: _contract.contract.colors.borderDark,
+  appearance: 'none',
+  boxShadow: "inset -1px -1px 0 0 ".concat(_contract.contract.colors.material, ",\n    inset 1px 1px 0 0 ").concat(_contract.contract.colors.borderDarkest, ",\n    0.5px 0.5px 0 0.5px ").concat(_contract.contract.colors.borderLightest, ";")
+});

package/cjs/Dropdown/Dropdown.js

@@ -4,10 +4,12 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.Dropdown = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireWildcard(require("@xstyled/styled-components"));
-var _downcaret = _interopRequireDefault(require("./imgs/downcaret.png"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Dropdown = require("./Dropdown.css");
+var _Frame = require("../Frame/Frame");
+var _sprinkles2 = require("../Frame/sprinkles.css");
 var _excluded = ["options"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -15,18 +17,20 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var Wrapper = _styledComponents["default"].div.withConfig({
-  displayName: "Dropdown__Wrapper",
-  componentId: "sc-1rfrh0u-0"
-})(["\n  position: relative;\n  width: 200px;\n  height: 20px;\n\n  &:after {\n    display: flex;\n    justify-content: center;\n    width: 17px;\n    height: 16px;\n    font-size: 14px;\n    line-height: 1.1;\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    right: 1px;\n    top: 2px;\n\n    background-color: material;\n    box-shadow: inset 0.5px 0.7px 0px 0.7px ", ",\n      inset -1px 0px 0 1px ", ",\n      inset 1.5px 1.5px 0px 1.5px ", ";\n\n    border-right: 1;\n    border-bottom: 1;\n\n    background-image: url('", "');\n    background-position: 60% 60%;\n    background-repeat: no-repeat;\n  }\n"], (0, _styledComponents.th)('colors.material'), (0, _styledComponents.th)('colors.borderDark'), (0, _styledComponents.th)('colors.borderLightest'), _downcaret["default"]);
-var Select = _styledComponents["default"].select.withConfig({
-  displayName: "Dropdown__Select",
-  componentId: "sc-1rfrh0u-1"
-})(["\n  position: relative;\n  outline: none;\n  border: none;\n  border-radius: 0;\n  width: 100%;\n  height: 20px;\n\n  padding: 3;\n\n  color: materialText;\n  background-color: inputBackground;\n\n  border-left: 1;\n  border-left-color: borderDark;\n  border-top: 1;\n  border-top-color: borderDark;\n\n  box-shadow: inset -1px -1px 0 0 ", ",\n    inset 1px 1px 0 0 ", ",\n    0.5px 0.5px 0 0.5px ", ";\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n"], (0, _styledComponents.th)('colors.material'), (0, _styledComponents.th)('colors.borderDarkest'), (0, _styledComponents.th)('colors.borderLightest'));
-var Dropdown = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var options = _ref.options,
+var defaultOptions = ['', 'C:\\Documents and Settings', 'C:\\Documents and Settings\\Documents', 'iexplorer.exe'];
+var Dropdown = exports.Dropdown = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref$options = _ref.options,
+    options = _ref$options === void 0 ? defaultOptions : _ref$options,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(Select, _extends({}, rest, {
+  var _sprinkles = (0, _sprinkles2.sprinkles)(rest),
+    style = _sprinkles.style,
+    otherProps = _sprinkles.otherProps,
+    className = _sprinkles.className;
+  return /*#__PURE__*/_react["default"].createElement(_Frame.Frame, {
+    style: style,
+    className: (0, _classnames["default"])(_Dropdown.wrapper, className)
+  }, /*#__PURE__*/_react["default"].createElement("select", _extends({}, otherProps, {
+    className: (0, _classnames["default"])(_Dropdown.select),
     ref: ref
   }), options && options.map(function (option) {
     return /*#__PURE__*/_react["default"].createElement("option", {
@@ -34,8 +38,4 @@ var Dropdown = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       value: option
     }, option);
   })));
-});
-Dropdown.defaultProps = {
-  options: ['', 'C:\\Documents and Settings', 'C:\\Documents and Settings\\Documents', 'iexplorer.exe']
-};
-var _default = exports["default"] = Dropdown;
+});

package/cjs/Dropdown/index.js

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

package/cjs/Fieldset/Fieldset.css.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.legend = exports.field = void 0;
+var _css = require("@vanilla-extract/css");
+var _contract = require("../themes/contract.css");
+var field = exports.field = (0, _css.style)({
+  borderTopStyle: 'groove',
+  borderTopWidth: _contract.contract.space[2],
+  borderTopColor: _contract.contract.colors.borderLighter,
+  borderLeftStyle: 'groove',
+  borderLeftWidth: _contract.contract.space[2],
+  borderLeftColor: _contract.contract.colors.borderLighter,
+  borderBottomStyle: 'solid',
+  borderBottomWidth: _contract.contract.space[1],
+  borderBottomColor: _contract.contract.colors.borderDark,
+  borderRightStyle: 'solid',
+  borderRightWidth: _contract.contract.space[1],
+  borderRightColor: _contract.contract.colors.borderDark,
+  boxShadow: "1px 1px 0 0 ".concat(_contract.contract.colors.borderLighter)
+});
+var legend = exports.legend = (0, _css.style)({
+  paddingLeft: _contract.contract.space[4],
+  paddingRight: _contract.contract.space[1]
+});

package/cjs/Fieldset/Fieldset.js

@@ -4,29 +4,26 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.Fieldset = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireWildcard(require("@xstyled/styled-components"));
+var styles = _interopRequireWildcard(require("./Fieldset.css"));
+var _Frame = require("../Frame/Frame");
 var _excluded = ["legend", "children"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var Field = _styledComponents["default"].fieldset.withConfig({
-  displayName: "Fieldset__Field",
-  componentId: "sc-15a7lpx-0"
-})(["\n  border-top-style: groove;\n  border-top-width: 2;\n  border-top-color: borderLighter;\n\n  border-left-style: groove;\n  border-left-width: 2;\n  border-left-color: borderLighter;\n\n  border-bottom-style: solid;\n  border-bottom-width: 1;\n  border-bottom-color: borderDark;\n\n  border-right-style: solid;\n  border-right-width: 1;\n  border-right-color: borderDark;\n\n  box-shadow: 1px 1px 0 0 ", ";\n"], (0, _styledComponents.th)('colors.borderLighter'));
-var Legend = _styledComponents["default"].legend.withConfig({
-  displayName: "Fieldset__Legend",
-  componentId: "sc-15a7lpx-1"
-})(["\n  padding-left: 4px;\n  padding-right: 1px;\n"]);
-var Fieldset = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var Fieldset = exports.Fieldset = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var legend = _ref.legend,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(Field, _extends({}, rest, {
-    ref: ref
-  }), legend && /*#__PURE__*/_react["default"].createElement(Legend, null, legend), children);
-});
-var _default = exports["default"] = Fieldset;
+  return /*#__PURE__*/_react["default"].createElement(_Frame.Frame, _extends({
+    as: "fieldset"
+  }, rest, {
+    ref: ref,
+    className: styles.field
+  }), legend && /*#__PURE__*/_react["default"].createElement("legend", {
+    className: styles.legend
+  }, legend), children);
+});

package/cjs/Fieldset/index.js

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

package/cjs/Frame/Frame.js

@@ -4,18 +4,36 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _styledComponents = _interopRequireWildcard(require("@xstyled/styled-components"));
+exports.Frame = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _sprinkles2 = require("./sprinkles.css");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _excluded = ["as", "children"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var Frame = _styledComponents["default"].div.withConfig({
-  displayName: "Frame",
-  componentId: "sc-1g3ndsf-0"
-})(_styledComponents.system);
-Frame.defaultProps = {
-  w: 'auto',
-  h: 'auto',
-  bg: 'material',
-  boxShadow: 'out'
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var fixedForwardRef = _react.forwardRef;
+var FrameComponent = function FrameComponent(props, ref) {
+  var as = props.as,
+    children = props.children,
+    rest = _objectWithoutProperties(props, _excluded);
+  var Component = as || 'div';
+  var _sprinkles = (0, _sprinkles2.sprinkles)(rest),
+    className = _sprinkles.className,
+    style = _sprinkles.style,
+    otherProps = _sprinkles.otherProps;
+  return /*#__PURE__*/_react["default"].createElement(Component, _extends({}, otherProps, {
+    style: _objectSpread(_objectSpread({}, style), otherProps.style),
+    className: (0, _classnames["default"])(className, otherProps.className),
+    ref: ref
+  }), children);
 };
-var _default = exports["default"] = Frame;
+var Frame = exports.Frame = fixedForwardRef(FrameComponent);

package/cjs/Frame/index.js

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

package/cjs/Frame/props.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.zIndices = exports.text = exports.shadows = exports.positioning = exports.outline = exports.font = exports.displayAndBoxModel = exports.colors = exports.borders = exports.borderRadius = exports.background = void 0;
+var _contract = require("../themes/contract.css");
+var positioning = exports.positioning = {
+  position: true,
+  top: true,
+  right: true,
+  bottom: true,
+  left: true,
+  pointerEvents: true
+};
+var displayAndBoxModel = exports.displayAndBoxModel = {
+  display: true,
+  overflow: true,
+  boxSizing: true,
+  grid: true,
+  gridArea: true,
+  gridAutoColumns: true,
+  gridAutoFlow: true,
+  gridAutoRows: true,
+  gridColumn: true,
+  gridColumnEnd: true,
+  gridColumnStart: true,
+  gridRow: true,
+  gridRowEnd: true,
+  gridRowStart: true,
+  gridTemplate: true,
+  gridTemplateAreas: true,
+  gridTemplateColumns: true,
+  gridTemplateRows: true,
+  flex: true,
+  flexBasis: true,
+  flexDirection: true,
+  flexFlow: true,
+  flexGrow: true,
+  flexShrink: true,
+  flexWrap: true,
+  justifyContent: true,
+  justifyItems: true,
+  justifySelf: true,
+  alignContent: true,
+  alignItems: true,
+  alignSelf: true,
+  gap: _contract.contract.space,
+  width: _contract.contract.space,
+  maxWidth: _contract.contract.space,
+  minWidth: _contract.contract.space,
+  height: _contract.contract.space,
+  maxHeight: _contract.contract.space,
+  minHeight: _contract.contract.space,
+  margin: _contract.contract.space,
+  marginBlock: _contract.contract.space,
+  marginBlockEnd: _contract.contract.space,
+  marginBlockStart: _contract.contract.space,
+  marginBottom: _contract.contract.space,
+  marginInline: _contract.contract.space,
+  marginInlineEnd: _contract.contract.space,
+  marginInlineStart: _contract.contract.space,
+  marginLeft: _contract.contract.space,
+  marginRight: _contract.contract.space,
+  marginTop: _contract.contract.space,
+  padding: _contract.contract.space,
+  paddingBlock: _contract.contract.space,
+  paddingBlockEnd: _contract.contract.space,
+  paddingBlockStart: _contract.contract.space,
+  paddingBottom: _contract.contract.space,
+  paddingInline: _contract.contract.space,
+  paddingInlineEnd: _contract.contract.space,
+  paddingInlineStart: _contract.contract.space,
+  paddingLeft: _contract.contract.space,
+  paddingRight: _contract.contract.space,
+  paddingTop: _contract.contract.space
+};
+var colors = exports.colors = {
+  backgroundColor: _contract.contract.colors,
+  colors: _contract.contract.colors
+};
+var background = exports.background = {
+  background: true,
+  backgroundAttachment: true,
+  backgroundImage: true,
+  backgroundPosition: true,
+  backgroundRepeat: true,
+  backgroundSize: true,
+  backgroundOrigin: true,
+  backgroundClip: true
+};
+var borders = exports.borders = {
+  border: true,
+  borderStyle: true,
+  borderWidth: true,
+  borderColor: _contract.contract.colors,
+  borderTop: true,
+  borderTopColor: _contract.contract.colors,
+  borderTopStyle: true,
+  borderTopWidth: true,
+  borderRight: true,
+  borderRightColor: _contract.contract.colors,
+  borderRightStyle: true,
+  borderRightWidth: true,
+  borderBottom: true,
+  borderBottomColor: _contract.contract.colors,
+  borderBottomStyle: true,
+  borderBottomWidth: true,
+  borderLeft: true,
+  borderLeftColor: _contract.contract.colors,
+  borderLeftStyle: true,
+  borderLeftWidth: true
+};
+var borderRadius = exports.borderRadius = {
+  borderBottomLeftRadius: true,
+  borderBottomRightRadius: true,
+  borderImage: true,
+  borderImageOutset: true,
+  borderImageRepeat: true,
+  borderImageSlice: true,
+  borderImageSource: true,
+  borderImageWidth: true,
+  borderRadius: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true
+};
+var shadows = exports.shadows = {
+  boxShadow: _contract.contract.shadows
+};
+var outline = exports.outline = {
+  outline: true,
+  outlineColor: true,
+  outlineStyle: true,
+  outlineWidth: true
+};
+var font = exports.font = {
+  font: true,
+  fontFamily: true,
+  fontStyle: true,
+  fontSize: true,
+  fontWeight: true,
+  fontVariant: true,
+  fontSizeAdjust: true
+};
+var text = exports.text = {
+  color: _contract.contract.colors,
+  direction: true,
+  letterSpacing: true,
+  lineHeight: true,
+  textAlign: true,
+  textDecoration: true,
+  textIndent: true,
+  textShadow: true,
+  textTransform: true,
+  verticalAlign: true,
+  whiteSpace: true,
+  wordSpacing: true,
+  wordBreak: true
+};
+var zIndices = exports.zIndices = {
+  zIndex: _contract.contract.zIndices
+};

package/cjs/Frame/sprinkles.css.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sprinkles = void 0;
+var _rainbowSprinkles = require("rainbow-sprinkles");
+var _props = require("./props");
+var displayAndBoxModelAtomicProps = (0, _rainbowSprinkles.defineProperties)({
+  dynamicProperties: _props.displayAndBoxModel,
+  shorthands: {
+    size: ['height', 'width'],
+    h: ['height'],
+    w: ['width'],
+    minH: ['minHeight'],
+    minW: ['minWidth'],
+    m: ['margin'],
+    mr: ['marginRight'],
+    ml: ['marginLeft'],
+    mt: ['marginTop'],
+    mb: ['marginBottom'],
+    marginX: ['marginLeft', 'marginRight'],
+    marginY: ['marginTop', 'marginBottom'],
+    mx: ['marginLeft', 'marginRight'],
+    my: ['marginTop', 'marginBottom'],
+    p: ['padding'],
+    pr: ['paddingRight'],
+    pl: ['paddingLeft'],
+    pt: ['paddingTop'],
+    pb: ['paddingBottom'],
+    paddingX: ['paddingLeft', 'paddingRight'],
+    paddingY: ['paddingTop', 'paddingBottom'],
+    px: ['paddingLeft', 'paddingRight'],
+    py: ['paddingTop', 'paddingBottom']
+  }
+});
+var positioningAtomicProps = (0, _rainbowSprinkles.defineProperties)({
+  dynamicProperties: _props.positioning
+});
+var colorsAtomicProps = (0, _rainbowSprinkles.defineProperties)({
+  dynamicProperties: _props.colors,
+  shorthands: {
+    bgColor: ['backgroundColor']
+  }
+});
+var backgroundAtomicProps = (0, _rainbowSprinkles.defineProperties)({
+  dynamicProperties: _props.background,
+  shorthands: {
+    bg: ['background']
+  }
+});
+var bordersAtomicProps = (0, _rainbowSprinkles.defineProperties)({
+  dynamicProperties: _props.borders
+});
+var borderRadiusAtomicProps = (0, _rainbowSprinkles.defineProperties)({
+  dynamicProperties: _props.borderRadius
+});
+var shadowsAtomicProps = (0, _rainbowSprinkles.defineProperties)({
+  dynamicProperties: _props.shadows
+});
+var outlineAtomicProps = (0, _rainbowSprinkles.defineProperties)({
+  dynamicProperties: _props.outline
+});
+var fontAtomicProps = (0, _rainbowSprinkles.defineProperties)({
+  dynamicProperties: _props.font
+});
+var textAtomicProps = (0, _rainbowSprinkles.defineProperties)({
+  dynamicProperties: _props.text
+});
+var zIndicesAtomicProps = (0, _rainbowSprinkles.defineProperties)({
+  dynamicProperties: _props.zIndices
+});
+var sprinkles = exports.sprinkles = (0, _rainbowSprinkles.createRainbowSprinkles)(colorsAtomicProps, shadowsAtomicProps, zIndicesAtomicProps, displayAndBoxModelAtomicProps, positioningAtomicProps, backgroundAtomicProps, bordersAtomicProps, borderRadiusAtomicProps, outlineAtomicProps, fontAtomicProps, textAtomicProps);

package/cjs/GlobalStyle/GlobalStyle.css.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.R95VideoNumbers = exports.MSSansSerif = void 0;
+var _css = require("@vanilla-extract/css");
+var _cssUtils = require("@vanilla-extract/css-utils");
+var _contract = require("../themes/contract.css");
+var _utils = require("./utils");
+var _MSSansSerif8ptBold = _interopRequireDefault(require("./font/MS-Sans-Serif-8pt-bold.ttf"));
+var _MSSansSerif8pt = _interopRequireDefault(require("./font/MS-Sans-Serif-8pt.ttf"));
+var _React95VideoNumbers = _interopRequireDefault(require("./font/React95Video-Numbers.eot"));
+var _React95VideoNumbers2 = _interopRequireDefault(require("./font/React95Video-Numbers.ttf"));
+var _React95VideoNumbers3 = _interopRequireDefault(require("./font/React95Video-Numbers.woff"));
+var _React95VideoNumbers4 = _interopRequireDefault(require("./font/React95Video-Numbers.woff2"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var MSSansSerif = exports.MSSansSerif = 'MS Sans Serif';
+var R95VideoNumbers = exports.R95VideoNumbers = 'React95Video-Numbers';
+(0, _css.globalFontFace)(MSSansSerif, {
+  src: "url('".concat(_MSSansSerif8pt["default"], "') format('truetype')"),
+  fontStyle: 'normal',
+  fontWeight: 'normal'
+});
+(0, _css.globalFontFace)(MSSansSerif, {
+  src: "url('".concat(_MSSansSerif8ptBold["default"], "') format('truetype')"),
+  fontStyle: 'bold',
+  fontWeight: 'bold'
+});
+(0, _css.globalFontFace)(R95VideoNumbers, {
+  src: "url('".concat(_React95VideoNumbers4["default"], "') format('woff2'),\n  url('").concat(_React95VideoNumbers3["default"], "') format('woff'),\n  url('").concat(_React95VideoNumbers2["default"], "') format('truetype'),\n  url('").concat(_React95VideoNumbers["default"], "?#iefix') format('embedded-opentype')"),
+  fontStyle: 'normal',
+  fontWeight: 'normal'
+});
+(0, _css.globalStyle)('*', {
+  fontFamily: MSSansSerif
+});
+(0, _css.globalStyle)('*, *::before, *::after', {
+  boxSizing: 'border-box'
+});
+(0, _css.globalStyle)('html', {
+  fontSize: '100%'
+});
+(0, _css.globalStyle)('body', {
+  margin: 0,
+  padding: 0,
+  fontSize: 12,
+  color: _contract.contract.colors.materialText
+});
+(0, _css.globalStyle)('a', {
+  color: _contract.contract.colors.anchor
+});
+(0, _css.globalStyle)('a:visited', {
+  color: _contract.contract.colors.anchorVisited
+});
+
+/* Scrollbar */
+
+var triangles = {
+  horizontal: {
+    decrement: (0, _utils.createTriangleSVG)(_contract.contract.colors.materialText, 90),
+    increment: (0, _utils.createTriangleSVG)(_contract.contract.colors.materialText, 270)
+  },
+  vertical: {
+    decrement: (0, _utils.createTriangleSVG)(_contract.contract.colors.materialText, 180),
+    increment: (0, _utils.createTriangleSVG)(_contract.contract.colors.materialText, 0)
+  }
+};
+(0, _css.globalStyle)('::-webkit-scrollbar', {
+  width: _contract.contract.space[17],
+  height: _contract.contract.space[17]
+});
+(0, _css.globalStyle)('::-webkit-scrollbar-track', {
+  backgroundImage: ["linear-gradient(45deg, ".concat(_contract.contract.colors.material, " 25%, transparent 25%, transparent 75%, ").concat(_contract.contract.colors.material, " 75%)"), "linear-gradient(45deg, ".concat(_contract.contract.colors.material, " 25%, transparent 25%, transparent 75%, ").concat(_contract.contract.colors.material, " 75%)")].join(','),
+  backgroundColor: _contract.contract.colors.borderLightest,
+  backgroundSize: "".concat(_contract.contract.space[4], " ").concat(_contract.contract.space[4]),
+  backgroundPosition: "0 0, ".concat(_contract.contract.space[2], " ").concat(_contract.contract.space[2])
+});
+(0, _css.globalStyle)('::-webkit-scrollbar-corner', {
+  backgroundColor: _contract.contract.colors.material
+});
+(0, _css.globalStyle)("::-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", {
+  display: 'none'
+});
+(0, _css.globalStyle)('::-webkit-scrollbar-button:horizontal:decrement', {
+  backgroundImage: triangles.horizontal.decrement
+});
+(0, _css.globalStyle)('::-webkit-scrollbar-button:horizontal:increment', {
+  backgroundImage: triangles.horizontal.increment
+});
+(0, _css.globalStyle)('::-webkit-scrollbar-button:vertical:decrement', {
+  backgroundImage: triangles.vertical.decrement
+});
+(0, _css.globalStyle)('::-webkit-scrollbar-button:vertical:increment', {
+  backgroundImage: triangles.vertical.increment
+});
+var scrollbarBorderBase = (0, _utils.createBorder)({
+  direction: 'extrude',
+  outerBottomRight: _contract.contract.colors.borderDarkest,
+  innerBottomRight: _contract.contract.colors.borderDark,
+  outerTopLeft: _contract.contract.colors.borderLight,
+  innerTopLeft: _contract.contract.colors.borderLightest
+});
+(0, _css.globalStyle)('::-webkit-scrollbar-thumb', _objectSpread({
+  boxSizing: 'border-box',
+  display: 'inline-block',
+  background: _contract.contract.colors.material,
+  color: _contract.contract.colors.materialText
+}, scrollbarBorderBase));
+(0, _css.globalStyle)('::-webkit-scrollbar-button', _objectSpread({
+  boxSizing: 'border-box',
+  background: _contract.contract.colors.material,
+  color: _contract.contract.colors.materialText,
+  display: 'block',
+  outlineOffset: _cssUtils.calc.negate(_contract.contract.space[2]),
+  height: _contract.contract.space[17],
+  width: _contract.contract.space[17],
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: '80%',
+  backgroundPosition: '0 0'
+}, scrollbarBorderBase));
+(0, _css.globalStyle)("::-webkit-scrollbar-button:active,\n  ::-webkit-scrollbar-button:active", _objectSpread({
+  backgroundPosition: '0 1'
+}, scrollbarBorderBase));