@react95/core 7.0.1 → 8.0.0-alpha.0

package/esm/Dropdown/Dropdown.css.js

@@ -0,0 +1,49 @@
+import { style } from '@vanilla-extract/css';
+import { contract } from '../themes/contract.css';
+import caret from './imgs/downcaret.png';
+export var wrapper = style({
+  position: 'relative',
+  width: '200px',
+  height: contract.space[20],
+  ':after': {
+    display: 'flex',
+    justifyContent: 'center',
+    width: contract.space[18],
+    height: contract.space[17],
+    fontSize: '14px',
+    lineHeight: 1.1,
+    content: "''",
+    pointerEvents: 'none',
+    position: 'absolute',
+    right: contract.space[1],
+    top: contract.space[2],
+    backgroundColor: contract.colors.material,
+    borderRightStyle: 'solid',
+    borderRightWidth: contract.space[1],
+    borderBottomStyle: 'solid',
+    borderBottomWidth: contract.space[1],
+    backgroundImage: "url('".concat(caret, "')"),
+    backgroundPosition: '60% 60%',
+    backgroundRepeat: 'no-repeat',
+    boxShadow: "inset 0.5px 0.7px 0px 0.7px ".concat(contract.colors.material, ",\n    inset -1px 0px 0 1px ").concat(contract.colors.borderDark, ",\n    inset 1.5px 1.5px 0px 1.5px ").concat(contract.colors.borderLightest)
+  }
+});
+export var select = style({
+  position: 'relative',
+  outline: 'none',
+  border: 'none',
+  borderRadius: '0',
+  width: '100%',
+  height: contract.space[20],
+  padding: contract.space[3],
+  color: contract.colors.materialText,
+  backgroundColor: contract.colors.inputBackground,
+  borderLeftStyle: 'solid',
+  borderLeftWidth: contract.space[1],
+  borderLeftColor: contract.colors.borderDark,
+  borderTopStyle: 'solid',
+  borderTopWidth: contract.space[1],
+  borderTopColor: contract.colors.borderDark,
+  appearance: 'none',
+  boxShadow: "inset -1px -1px 0 0 ".concat(contract.colors.material, ",\n    inset 1px 1px 0 0 ").concat(contract.colors.borderDarkest, ",\n    0.5px 0.5px 0 0.5px ").concat(contract.colors.borderLightest, ";")
+});

package/esm/Dropdown/Dropdown.js

@@ -3,20 +3,24 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef } from 'react';
-import styled, { th } from '@xstyled/styled-components';
-import caret from './imgs/downcaret.png';
-var Wrapper = styled.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"], th('colors.material'), th('colors.borderDark'), th('colors.borderLightest'), caret);
-var Select = styled.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"], th('colors.material'), th('colors.borderDarkest'), th('colors.borderLightest'));
-var Dropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var options = _ref.options,
+import cn from 'classnames';
+import { wrapper, select } from './Dropdown.css';
+import { Frame } from '../Frame/Frame';
+import { sprinkles } from '../Frame/sprinkles.css';
+var defaultOptions = ['', 'C:\\Documents and Settings', 'C:\\Documents and Settings\\Documents', 'iexplorer.exe'];
+export var Dropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$options = _ref.options,
+    options = _ref$options === void 0 ? defaultOptions : _ref$options,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Select, _extends({}, rest, {
+  var _sprinkles = sprinkles(rest),
+    style = _sprinkles.style,
+    otherProps = _sprinkles.otherProps,
+    className = _sprinkles.className;
+  return /*#__PURE__*/React.createElement(Frame, {
+    style: style,
+    className: cn(wrapper, className)
+  }, /*#__PURE__*/React.createElement("select", _extends({}, otherProps, {
+    className: cn(select),
     ref: ref
   }), options && options.map(function (option) {
     return /*#__PURE__*/React.createElement("option", {
@@ -24,8 +28,4 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
       value: option
     }, option);
   })));
-});
-Dropdown.defaultProps = {
-  options: ['', 'C:\\Documents and Settings', 'C:\\Documents and Settings\\Documents', 'iexplorer.exe']
-};
-export default Dropdown;
+});

package/esm/Dropdown/index.js

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

package/esm/Fieldset/Fieldset.css.js

@@ -0,0 +1,21 @@
+import { style } from '@vanilla-extract/css';
+import { contract } from '../themes/contract.css';
+export var field = style({
+  borderTopStyle: 'groove',
+  borderTopWidth: contract.space[2],
+  borderTopColor: contract.colors.borderLighter,
+  borderLeftStyle: 'groove',
+  borderLeftWidth: contract.space[2],
+  borderLeftColor: contract.colors.borderLighter,
+  borderBottomStyle: 'solid',
+  borderBottomWidth: contract.space[1],
+  borderBottomColor: contract.colors.borderDark,
+  borderRightStyle: 'solid',
+  borderRightWidth: contract.space[1],
+  borderRightColor: contract.colors.borderDark,
+  boxShadow: "1px 1px 0 0 ".concat(contract.colors.borderLighter)
+});
+export var legend = style({
+  paddingLeft: contract.space[4],
+  paddingRight: contract.space[1]
+});

package/esm/Fieldset/Fieldset.js

@@ -3,21 +3,18 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef } from 'react';
-import styled, { th } from '@xstyled/styled-components';
-var Field = styled.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"], th('colors.borderLighter'));
-var Legend = styled.legend.withConfig({
-  displayName: "Fieldset__Legend",
-  componentId: "sc-15a7lpx-1"
-})(["\n  padding-left: 4px;\n  padding-right: 1px;\n"]);
-var Fieldset = /*#__PURE__*/forwardRef(function (_ref, ref) {
+import * as styles from './Fieldset.css';
+import { Frame } from '../Frame/Frame';
+export var Fieldset = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var legend = _ref.legend,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Field, _extends({}, rest, {
-    ref: ref
-  }), legend && /*#__PURE__*/React.createElement(Legend, null, legend), children);
-});
-export default Fieldset;
+  return /*#__PURE__*/React.createElement(Frame, _extends({
+    as: "fieldset"
+  }, rest, {
+    ref: ref,
+    className: styles.field
+  }), legend && /*#__PURE__*/React.createElement("legend", {
+    className: styles.legend
+  }, legend), children);
+});

package/esm/Fieldset/index.js

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

package/esm/Frame/Frame.js

@@ -1,12 +1,30 @@
-import styled, { system } from '@xstyled/styled-components';
-var Frame = styled.div.withConfig({
-  displayName: "Frame",
-  componentId: "sc-1g3ndsf-0"
-})(system);
-Frame.defaultProps = {
-  w: 'auto',
-  h: 'auto',
-  bg: 'material',
-  boxShadow: 'out'
+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); }
+var _excluded = ["as", "children"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function 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; }
+import React, { forwardRef } from 'react';
+import { sprinkles } from './sprinkles.css';
+import cn from 'classnames';
+var fixedForwardRef = forwardRef;
+var FrameComponent = function FrameComponent(props, ref) {
+  var as = props.as,
+    children = props.children,
+    rest = _objectWithoutProperties(props, _excluded);
+  var Component = as || 'div';
+  var _sprinkles = sprinkles(rest),
+    className = _sprinkles.className,
+    style = _sprinkles.style,
+    otherProps = _sprinkles.otherProps;
+  return /*#__PURE__*/React.createElement(Component, _extends({}, otherProps, {
+    style: _objectSpread(_objectSpread({}, style), otherProps.style),
+    className: cn(className, otherProps.className),
+    ref: ref
+  }), children);
 };
-export default Frame;
+export var Frame = fixedForwardRef(FrameComponent);

package/esm/Frame/index.js

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

package/esm/Frame/props.js

@@ -0,0 +1,156 @@
+import { contract } from '../themes/contract.css';
+export var positioning = {
+  position: true,
+  top: true,
+  right: true,
+  bottom: true,
+  left: true,
+  pointerEvents: true
+};
+export var 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.space,
+  width: contract.space,
+  maxWidth: contract.space,
+  minWidth: contract.space,
+  height: contract.space,
+  maxHeight: contract.space,
+  minHeight: contract.space,
+  margin: contract.space,
+  marginBlock: contract.space,
+  marginBlockEnd: contract.space,
+  marginBlockStart: contract.space,
+  marginBottom: contract.space,
+  marginInline: contract.space,
+  marginInlineEnd: contract.space,
+  marginInlineStart: contract.space,
+  marginLeft: contract.space,
+  marginRight: contract.space,
+  marginTop: contract.space,
+  padding: contract.space,
+  paddingBlock: contract.space,
+  paddingBlockEnd: contract.space,
+  paddingBlockStart: contract.space,
+  paddingBottom: contract.space,
+  paddingInline: contract.space,
+  paddingInlineEnd: contract.space,
+  paddingInlineStart: contract.space,
+  paddingLeft: contract.space,
+  paddingRight: contract.space,
+  paddingTop: contract.space
+};
+export var colors = {
+  backgroundColor: contract.colors,
+  colors: contract.colors
+};
+export var background = {
+  background: true,
+  backgroundAttachment: true,
+  backgroundImage: true,
+  backgroundPosition: true,
+  backgroundRepeat: true,
+  backgroundSize: true,
+  backgroundOrigin: true,
+  backgroundClip: true
+};
+export var borders = {
+  border: true,
+  borderStyle: true,
+  borderWidth: true,
+  borderColor: contract.colors,
+  borderTop: true,
+  borderTopColor: contract.colors,
+  borderTopStyle: true,
+  borderTopWidth: true,
+  borderRight: true,
+  borderRightColor: contract.colors,
+  borderRightStyle: true,
+  borderRightWidth: true,
+  borderBottom: true,
+  borderBottomColor: contract.colors,
+  borderBottomStyle: true,
+  borderBottomWidth: true,
+  borderLeft: true,
+  borderLeftColor: contract.colors,
+  borderLeftStyle: true,
+  borderLeftWidth: true
+};
+export var borderRadius = {
+  borderBottomLeftRadius: true,
+  borderBottomRightRadius: true,
+  borderImage: true,
+  borderImageOutset: true,
+  borderImageRepeat: true,
+  borderImageSlice: true,
+  borderImageSource: true,
+  borderImageWidth: true,
+  borderRadius: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true
+};
+export var shadows = {
+  boxShadow: contract.shadows
+};
+export var outline = {
+  outline: true,
+  outlineColor: true,
+  outlineStyle: true,
+  outlineWidth: true
+};
+export var font = {
+  font: true,
+  fontFamily: true,
+  fontStyle: true,
+  fontSize: true,
+  fontWeight: true,
+  fontVariant: true,
+  fontSizeAdjust: true
+};
+export var text = {
+  color: 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
+};
+export var zIndices = {
+  zIndex: contract.zIndices
+};

package/esm/Frame/sprinkles.css.js

@@ -0,0 +1,67 @@
+import { createRainbowSprinkles, defineProperties } from 'rainbow-sprinkles';
+import { background, borderRadius, borders, colors, displayAndBoxModel, font, outline, positioning, shadows, text, zIndices } from './props';
+var displayAndBoxModelAtomicProps = defineProperties({
+  dynamicProperties: 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 = defineProperties({
+  dynamicProperties: positioning
+});
+var colorsAtomicProps = defineProperties({
+  dynamicProperties: colors,
+  shorthands: {
+    bgColor: ['backgroundColor']
+  }
+});
+var backgroundAtomicProps = defineProperties({
+  dynamicProperties: background,
+  shorthands: {
+    bg: ['background']
+  }
+});
+var bordersAtomicProps = defineProperties({
+  dynamicProperties: borders
+});
+var borderRadiusAtomicProps = defineProperties({
+  dynamicProperties: borderRadius
+});
+var shadowsAtomicProps = defineProperties({
+  dynamicProperties: shadows
+});
+var outlineAtomicProps = defineProperties({
+  dynamicProperties: outline
+});
+var fontAtomicProps = defineProperties({
+  dynamicProperties: font
+});
+var textAtomicProps = defineProperties({
+  dynamicProperties: text
+});
+var zIndicesAtomicProps = defineProperties({
+  dynamicProperties: zIndices
+});
+export var sprinkles = createRainbowSprinkles(colorsAtomicProps, shadowsAtomicProps, zIndicesAtomicProps, displayAndBoxModelAtomicProps, positioningAtomicProps, backgroundAtomicProps, bordersAtomicProps, borderRadiusAtomicProps, outlineAtomicProps, fontAtomicProps, textAtomicProps);

package/esm/GlobalStyle/GlobalStyle.css.js

@@ -0,0 +1,123 @@
+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); }
+import { globalFontFace, globalStyle } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
+import { contract } from '../themes/contract.css';
+import { createBorder, createTriangleSVG } from './utils';
+import ttfBold from './font/MS-Sans-Serif-8pt-bold.ttf';
+import ttf from './font/MS-Sans-Serif-8pt.ttf';
+import videoeot from './font/React95Video-Numbers.eot';
+import videottf from './font/React95Video-Numbers.ttf';
+import videowoff from './font/React95Video-Numbers.woff';
+import videowoff2 from './font/React95Video-Numbers.woff2';
+export var MSSansSerif = 'MS Sans Serif';
+export var R95VideoNumbers = 'React95Video-Numbers';
+globalFontFace(MSSansSerif, {
+  src: "url('".concat(ttf, "') format('truetype')"),
+  fontStyle: 'normal',
+  fontWeight: 'normal'
+});
+globalFontFace(MSSansSerif, {
+  src: "url('".concat(ttfBold, "') format('truetype')"),
+  fontStyle: 'bold',
+  fontWeight: 'bold'
+});
+globalFontFace(R95VideoNumbers, {
+  src: "url('".concat(videowoff2, "') format('woff2'),\n  url('").concat(videowoff, "') format('woff'),\n  url('").concat(videottf, "') format('truetype'),\n  url('").concat(videoeot, "?#iefix') format('embedded-opentype')"),
+  fontStyle: 'normal',
+  fontWeight: 'normal'
+});
+globalStyle('*', {
+  fontFamily: MSSansSerif
+});
+globalStyle('*, *::before, *::after', {
+  boxSizing: 'border-box'
+});
+globalStyle('html', {
+  fontSize: '100%'
+});
+globalStyle('body', {
+  margin: 0,
+  padding: 0,
+  fontSize: 12,
+  color: contract.colors.materialText
+});
+globalStyle('a', {
+  color: contract.colors.anchor
+});
+globalStyle('a:visited', {
+  color: contract.colors.anchorVisited
+});
+
+/* Scrollbar */
+
+var triangles = {
+  horizontal: {
+    decrement: createTriangleSVG(contract.colors.materialText, 90),
+    increment: createTriangleSVG(contract.colors.materialText, 270)
+  },
+  vertical: {
+    decrement: createTriangleSVG(contract.colors.materialText, 180),
+    increment: createTriangleSVG(contract.colors.materialText, 0)
+  }
+};
+globalStyle('::-webkit-scrollbar', {
+  width: contract.space[17],
+  height: contract.space[17]
+});
+globalStyle('::-webkit-scrollbar-track', {
+  backgroundImage: ["linear-gradient(45deg, ".concat(contract.colors.material, " 25%, transparent 25%, transparent 75%, ").concat(contract.colors.material, " 75%)"), "linear-gradient(45deg, ".concat(contract.colors.material, " 25%, transparent 25%, transparent 75%, ").concat(contract.colors.material, " 75%)")].join(','),
+  backgroundColor: contract.colors.borderLightest,
+  backgroundSize: "".concat(contract.space[4], " ").concat(contract.space[4]),
+  backgroundPosition: "0 0, ".concat(contract.space[2], " ").concat(contract.space[2])
+});
+globalStyle('::-webkit-scrollbar-corner', {
+  backgroundColor: contract.colors.material
+});
+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'
+});
+globalStyle('::-webkit-scrollbar-button:horizontal:decrement', {
+  backgroundImage: triangles.horizontal.decrement
+});
+globalStyle('::-webkit-scrollbar-button:horizontal:increment', {
+  backgroundImage: triangles.horizontal.increment
+});
+globalStyle('::-webkit-scrollbar-button:vertical:decrement', {
+  backgroundImage: triangles.vertical.decrement
+});
+globalStyle('::-webkit-scrollbar-button:vertical:increment', {
+  backgroundImage: triangles.vertical.increment
+});
+var scrollbarBorderBase = createBorder({
+  direction: 'extrude',
+  outerBottomRight: contract.colors.borderDarkest,
+  innerBottomRight: contract.colors.borderDark,
+  outerTopLeft: contract.colors.borderLight,
+  innerTopLeft: contract.colors.borderLightest
+});
+globalStyle('::-webkit-scrollbar-thumb', _objectSpread({
+  boxSizing: 'border-box',
+  display: 'inline-block',
+  background: contract.colors.material,
+  color: contract.colors.materialText
+}, scrollbarBorderBase));
+globalStyle('::-webkit-scrollbar-button', _objectSpread({
+  boxSizing: 'border-box',
+  background: contract.colors.material,
+  color: contract.colors.materialText,
+  display: 'block',
+  outlineOffset: calc.negate(contract.space[2]),
+  height: contract.space[17],
+  width: contract.space[17],
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: '80%',
+  backgroundPosition: '0 0'
+}, scrollbarBorderBase));
+globalStyle("::-webkit-scrollbar-button:active,\n  ::-webkit-scrollbar-button:active", _objectSpread({
+  backgroundPosition: '0 1'
+}, scrollbarBorderBase));

package/esm/GlobalStyle/utils.js

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

package/esm/Input/Input.css.js

@@ -0,0 +1,24 @@
+import { style } from '@vanilla-extract/css';
+import { Cursor } from '../Cursor/Cursor.css';
+import { contract } from '../themes/contract.css';
+export var input = style([Cursor.Text, {
+  outline: 'none',
+  border: 'none',
+  paddingTop: contract.space[3],
+  paddingRight: contract.space[3],
+  paddingBottom: contract.space[5],
+  paddingLeft: contract.space[3],
+  color: contract.colors.materialText,
+  backgroundColor: contract.colors.inputBackground,
+  borderRadius: '0',
+  borderTopWidth: contract.space[1],
+  borderTopStyle: 'solid',
+  borderTopColor: contract.colors.borderDark,
+  borderRightWidth: '0',
+  borderBottomWidth: '0',
+  borderLeftWidth: contract.space[1],
+  borderLeftStyle: 'solid',
+  borderLeftColor: contract.colors.borderDark,
+  boxShadow: contract.shadows.input,
+  WebkitAppearance: 'none'
+}]);

package/esm/Input/Input.js

@@ -1,8 +1,11 @@
-import styled from '@xstyled/styled-components';
-import { padding, borders, shadow } from 'styled-system';
-import Cursor from '../Cursor';
-var Input = styled.input.withConfig({
-  displayName: "Input",
-  componentId: "sc-1thk6g5-0"
-})(["\n  outline: none;\n  border: none;\n  cursor: text;\n\n  padding: 3 3 5 3;\n\n  color: materialText;\n  background-color: inputBackground;\n\n  border-radius: 0;\n\n  border-top-width: 1;\n  border-top-style: 1;\n  border-top-color: borderDark;\n\n  border-right-width: 0;\n  border-bottom-width: 0;\n\n  border-left-width: 1;\n  border-left-style: 1;\n  border-left-color: borderDark;\n\n  box-shadow: input;\n\n  -webkit-appearance: none;\n\n  ", ";\n\n  ", "\n  ", "\n  ", "\n"], Cursor.Text, padding, borders, shadow);
-export default Input;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as React from 'react';
+import { Frame } from '../Frame/Frame';
+import { input } from './Input.css';
+export var Input = /*#__PURE__*/React.forwardRef(function (rest, ref) {
+  return /*#__PURE__*/React.createElement(Frame, _extends({}, rest, {
+    ref: ref,
+    className: input,
+    as: "input"
+  }));
+});

package/esm/Input/index.js

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