@flodesk/grain 2.7.6 → 2.9.0

package/es/components/{box/index.js → box.js}

@@ -17,13 +17,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 require("core-js/modules/es.array.concat.js");
 
-var _utilities = require("../../utilities");
+var _utilities = require("../utilities");
 
 var _react = _interopRequireDefault(require("react"));
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _types = require("../../types");
+var _types = require("../types");
 
 var _excluded = ["children", "color", "backgroundColor", "borderSide", "borderWidth", "borderColor", "width", "height", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "overflow", "aspectRatio"];
 
@@ -164,6 +164,9 @@ Box.__docgenInfo = {
           "value": [{
             "value": "\"greys\"",
             "computed": false
+          }, {
+            "value": "\"fades\"",
+            "computed": false
           }, {
             "value": "\"baseColors\"",
             "computed": false
@@ -186,6 +189,9 @@ Box.__docgenInfo = {
           "value": [{
             "value": "\"greys\"",
             "computed": false
+          }, {
+            "value": "\"fades\"",
+            "computed": false
           }, {
             "value": "\"baseColors\"",
             "computed": false
@@ -249,6 +255,9 @@ Box.__docgenInfo = {
           "value": [{
             "value": "\"greys\"",
             "computed": false
+          }, {
+            "value": "\"fades\"",
+            "computed": false
           }, {
             "value": "\"baseColors\"",
             "computed": false
@@ -293,6 +302,9 @@ Box.__docgenInfo = {
         "value": [{
           "name": "enum",
           "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
             "value": "\"s\"",
             "computed": false
           }, {

package/es/components/button.js

@@ -0,0 +1,107 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+require("core-js/modules/es.array.concat.js");
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _utilities = require("../utilities");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children", "tag", "variant", "isDisabled"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+var __jsx = _react.default.createElement;
+var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --grn-buttonTextBoxPaddingX-m: 20px;\n  --grn-color-buttonBorder: var(--grn-color-fade4);\n  --grn-color-buttonBorder-hover: var(--grn-color-fade6);\n  --grn-color-buttonBorder-active: var(--grn-color-grey8);\n"])));
+var variants = {
+  neutral: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    color: inherit;\n    background-color: transparent;\n    border-color: var(--grn-color-buttonBorder);\n\n    &:hover {\n      border-color: var(--grn-color-buttonBorder-hover);\n    }\n    &:active {\n      border-color: var(--grn-color-buttonBorder-active);\n    }\n  "]))),
+  primary: (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    color: white;\n    background-color: ", ";\n    border-color: transparent;\n\n    &:hover {\n      background-color: ", ";\n    }\n    &:active {\n      color: ", ";\n      background-color: black;\n    }\n  "])), (0, _utilities.getColor)('accent'), (0, _utilities.getColor)('grey7'), (0, _utilities.getColor)('grey2'))
+};
+
+var Wrapper = _styled.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: ", ";\n  border-radius: ", ";\n  transition: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-buttonTextBoxPaddingX-m);\n  background-color: transparent;\n\n  ", ";\n\n  ", ";\n\n  &:hover {\n    transition: ", ";\n  }\n\n  &:active {\n    transition: 0s;\n  }\n"])), variables, (0, _utilities.getWeight)('medium'), (0, _utilities.getRadius)('s'), (0, _utilities.getTransition)('slow'), function (p) {
+  return !p.isDisabled && variants[p.variant];
+}, function (p) {
+  return p.isDisabled && "\n    color: ".concat((0, _utilities.getColor)('disabledContent'), ";\n    background-color: ").concat((0, _utilities.getColor)('disabledBackground'), ";\n    border-color: transparent;\n    cursor: default;\n  ");
+}, (0, _utilities.getTransition)('fast'));
+
+var ButtonText = _styled.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  --opticalCompensation: -0.3px;\n\n  position: relative;\n  top: var(--opticalCompensation);\n"])));
+
+var Button = function Button(_ref) {
+  var children = _ref.children,
+      tag = _ref.tag,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'neutral' : _ref$variant,
+      isDisabled = _ref.isDisabled,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return __jsx(Wrapper, (0, _extends2.default)({
+    as: tag,
+    variant: variant,
+    isDisabled: isDisabled
+  }, props), __jsx(ButtonText, null, children));
+};
+
+exports.Button = Button;
+Button.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Button",
+  "props": {
+    "variant": {
+      "defaultValue": {
+        "value": "'neutral'",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"neutral\"",
+          "computed": false
+        }, {
+          "value": "\"primary\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "isDisabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};

package/es/components/index.js

@@ -23,10 +23,10 @@ Object.defineProperty(exports, "Button", {
     return _button.Button;
   }
 });
-Object.defineProperty(exports, "Input", {
+Object.defineProperty(exports, "TextInput", {
   enumerable: true,
   get: function get() {
-    return _input.Input;
+    return _textInput.TextInput;
   }
 });
 
@@ -36,4 +36,4 @@ var _box = require("./box");
 
 var _button = require("./button");
 
-var _input = require("./input");
+var _textInput = require("./text-input");

package/es/components/text-input.js

@@ -0,0 +1,124 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextInput = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _utilities = require("../utilities");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _types = require("../types");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["value", "placeholder", "size", "label", "id"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var __jsx = _react.default.createElement;
+var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --grn-fieldTextBoxPaddingX-s: 8px;\n  --grn-fieldTextBoxPaddingX-m: 12px;\n  --grn-color-fieldBorder: var(--grn-color-fade3);\n  --grn-color-fieldBorder-hover: var(--grn-color-fade6);\n"])));
+var inputSizes = {
+  s: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    height: var(--grn-textBoxHeight-s);\n    padding: 0 var(--grn-fieldTextBoxPaddingX-s);\n    border-radius: ", ";\n  "])), (0, _utilities.getRadius)('xs')),
+  m: (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    height: var(--grn-textBoxHeight-m);\n    padding: 0 var(--grn-fieldTextBoxPaddingX-m);\n    border-radius: ", ";\n  "])), (0, _utilities.getRadius)('s'))
+};
+var labelSizes = {
+  s: '2px',
+  m: 'xs'
+};
+
+var Wrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  font-size: ", ";\n"])), variables, function (p) {
+  return (0, _utilities.getTextSize)(p.size);
+});
+
+var Label = _styled.default.label(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  margin-bottom: ", ";\n"])), function (p) {
+  return (0, _utilities.getSpace)(labelSizes[p.size]);
+});
+
+var InputField = _styled.default.input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  transition: ", ";\n  border: 1px solid var(--grn-color-fieldBorder);\n  width: 100%;\n  ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    transition: ", ";\n    border-color: var(--grn-color-fieldBorder-hover);\n  }\n  \n  &:focus {\n    transition: 0s;\n    border-color: var(--grn-color-selection);\n  }\n"])), (0, _utilities.getTransition)('slow'), function (p) {
+  return inputSizes[p.size];
+}, (0, _utilities.getColor)('grey5'), (0, _utilities.getTransition)('fast'));
+
+var TextInput = function TextInput(_ref) {
+  var value = _ref.value,
+      placeholder = _ref.placeholder,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'm' : _ref$size,
+      label = _ref.label,
+      id = _ref.id,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return __jsx(Wrapper, {
+    size: size,
+    type: "text"
+  }, label && __jsx(Label, {
+    htmlFor: id,
+    size: size
+  }, label), __jsx(InputField, (0, _extends2.default)({
+    value: value,
+    placeholder: placeholder,
+    size: size,
+    label: label,
+    id: id
+  }, props)));
+};
+
+exports.TextInput = TextInput;
+TextInput.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "TextInput",
+  "props": {
+    "size": {
+      "defaultValue": {
+        "value": "'m'",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"s\"",
+          "computed": false
+        }, {
+          "value": "\"m\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": true,
+      "description": ""
+    },
+    "value": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "label": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};

package/es/components/{text/index.js → text.js}

@@ -15,13 +15,13 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _utilities = require("../../utilities");
+var _utilities = require("../utilities");
 
 var _react = _interopRequireDefault(require("react"));
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _types = require("../../types");
+var _types = require("../types");
 
 var _excluded = ["children", "size", "weight", "color", "tag", "hasEllipsis", "ellipsisLines", "align"];
 
@@ -137,6 +137,9 @@ Text.__docgenInfo = {
           "value": [{
             "value": "\"greys\"",
             "computed": false
+          }, {
+            "value": "\"fades\"",
+            "computed": false
           }, {
             "value": "\"baseColors\"",
             "computed": false

package/es/styles/base.css

@@ -16,6 +16,7 @@
 .grn-context, .grn-context * {
   letter-spacing: var(--grn-letterSpacing-global);
   line-height: var(--grn-lineHeight-global);
+  outline-color: var(--grn-color-selection);
 }
 
 .grn-context {

package/es/styles/components-variables.css

@@ -1,9 +1,4 @@
 :root {
-  --grn-textBoxHeight-s: calc(var(--grn-unit) * 3.5);
-  --grn-textBoxHeight-m: calc(var(--grn-unit) * 5);
-  
-  --grn-fieldTextBoxPaddingX-s: calc(var(--grn-unit) * 1);
-  --grn-fieldTextBoxPaddingX-m: calc(var(--grn-unit) * 1.5);
-  
-  --grn-buttonTextBoxPaddingX-m: calc(var(--grn-unit) * 2.5);
+  --grn-textBoxHeight-s: 28px;
+  --grn-textBoxHeight-m: 40px;
 }

package/es/styles/variables.css

@@ -26,35 +26,58 @@
 }
 
 :root {
+  --grn-radius-xs: 3.5px;
   --grn-radius-s: 5px;
   --grn-radius-m: 10px;
   --grn-radius-l: 15px;
 }
 
 :root {
-  --grn-color-grey8-HSL: 0 0% 7%;
+  --grn-transition-slow: 400ms;
+  --grn-transition-fast: 200ms;
+}
+
+:root {
+  --grn-color-grey8-HS: 0 0%;
+  --grn-color-grey8-HSL: var(--grn-color-grey8-HS) 7%;
 
   --grn-color-grey8: hsl(var(--grn-color-grey8-HSL));
-  --grn-color-grey7: hsl(0 0% 20%);
-  --grn-color-grey6: hsl(0 0% 32%);
-  --grn-color-grey5: hsl(0 0% 50%);
-  --grn-color-grey4: hsl(0 0% 66%);
-  --grn-color-grey3: hsl(0 0% 83%);
-  --grn-color-grey2: hsl(0 0% 93%);
-  --grn-color-grey1: hsl(0 0% 98%);
+  --grn-color-grey7: hsl(var(--grn-color-grey8-HS) 20%);
+  --grn-color-grey6: hsl(var(--grn-color-grey8-HS) 32%);
+  --grn-color-grey5: hsl(var(--grn-color-grey8-HS) 50%);
+  --grn-color-grey4: hsl(var(--grn-color-grey8-HS) 66%);
+  --grn-color-grey3: hsl(var(--grn-color-grey8-HS) 83%);
+  --grn-color-grey2: hsl(var(--grn-color-grey8-HS) 93%);
+  --grn-color-grey1: hsl(var(--grn-color-grey8-HS) 98%);
+}
+
+:root {
+  --grn-color-fade7: hsl(var(--grn-color-grey8-HS) 0% / 49%);
+  --grn-color-fade6: hsl(var(--grn-color-grey8-HS) 0% / 42%);
+  --grn-color-fade5: hsl(var(--grn-color-grey8-HS) 0% / 35%);
+  --grn-color-fade4: hsl(var(--grn-color-grey8-HS) 0% / 28%);
+  --grn-color-fade3: hsl(var(--grn-color-grey8-HS) 0% / 21%);
+  --grn-color-fade2: hsl(var(--grn-color-grey8-HS) 0% / 14%);
+  --grn-color-fade1: hsl(var(--grn-color-grey8-HS) 0% / 7%);
+}
 
+:root {
   --grn-color-blue: hsl(218 74% 54%);
   --grn-color-red: hsl(6 66% 65%);
+}
 
+:root {
   --grn-color-body: var(--grn-color-grey8);
-  --grn-color-bodyDimmed: hsl(var(--grn-color-grey8-HSL) / 50%);
+  --grn-color-bodyDimmed: var(--grn-color-fade7);
   --grn-color-accent: var(--grn-color-grey8);
-  --grn-color-backgroundSecondary: hsl(0 0% 100%);
+  --grn-color-backgroundSecondary: white;
   --grn-color-background: var(--grn-color-grey1);
-  --grn-color-overlay: hsl(var(--grn-color-grey8-HSL) / 7%);
-  --grn-color-border: hsl(var(--grn-color-grey8-HSL) / 15%);
+  --grn-color-overlay: var(--grn-color-fade1);
+  --grn-color-border: var(--grn-color-fade2);
   --grn-color-selection: var(--grn-color-blue);
   --grn-color-danger: var(--grn-color-red);
+  --grn-color-disabledContent: var(--grn-color-grey5);
+  --grn-color-disabledBackground: var(--grn-color-fade1);
 }
 
 :root {

package/es/{types/index.js → types.js}

@@ -13,7 +13,7 @@ require("core-js/modules/es.object.keys.js");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _variables = require("../variables");
+var _variables = require("./variables");
 
 var types = {
   color: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.colors)), _propTypes.default.string]),
@@ -26,6 +26,7 @@ var types = {
   textSize: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.textSizes)), _propTypes.default.number, _propTypes.default.string]),
   weight: _propTypes.default.oneOf(Object.keys(_variables.vars.weights)),
   textAlign: _propTypes.default.oneOf(["left", "center", "right"]),
-  overflow: _propTypes.default.oneOf(["visible", "hidden", "scroll", "auto"])
+  overflow: _propTypes.default.oneOf(["visible", "hidden", "scroll", "auto"]),
+  fieldSize: _propTypes.default.oneOf(["s", "m"])
 };
 exports.types = types;

package/es/{utilities/index.js → utilities.js}

@@ -23,13 +23,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getBorder = exports.getSpace = exports.getRadius = exports.getWeight = exports.getTextSize = exports.getShadow = exports.getColor = exports.getCssVar = exports.getCssVarCore = exports.isBrowser = void 0;
+exports.getBorder = exports.getSpace = exports.getTransition = exports.getRadius = exports.getWeight = exports.getTextSize = exports.getShadow = exports.getColor = exports.getCssVar = exports.getCssVarCore = exports.isBrowser = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 require("core-js/modules/es.array.concat.js");
 
-var _variables = require("../variables");
+var _variables = require("./variables");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -55,7 +55,7 @@ var u = function u(amount) {
 };
 
 var getColor = function getColor(color) {
-  if (color in _objectSpread(_objectSpread(_objectSpread({}, _variables.vars.colors.baseColors), _variables.vars.colors.greys), _variables.vars.colors.semanticColors)) {
+  if (color in _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _variables.vars.colors.baseColors), _variables.vars.colors.greys), _variables.vars.colors.semanticColors), _variables.vars.colors.fades)) {
     return getCssVar("color", color);
   }
 
@@ -104,6 +104,14 @@ var getRadius = function getRadius(radius) {
 
 exports.getRadius = getRadius;
 
+var getTransition = function getTransition(transition) {
+  if (transition in _variables.vars.transitions) {
+    return getCssVar("transition", transition);
+  }
+};
+
+exports.getTransition = getTransition;
+
 var getSpace = function getSpace(space) {
   if (isNaN(space)) {
     if (space in _variables.vars.spaces) {

package/es/{variables/index.js → variables.js}

@@ -30,6 +30,7 @@ var vars = {
     semiBold: "semiBold"
   },
   radiuses: {
+    xs: "xs",
     s: "s",
     m: "m",
     l: "l"
@@ -39,6 +40,10 @@ var vars = {
     m: "m",
     l: "l"
   },
+  transitions: {
+    slow: "slow",
+    fast: "fast"
+  },
   colors: {
     greys: {
       grey8: "grey8",
@@ -50,6 +55,15 @@ var vars = {
       grey2: "grey2",
       grey1: "grey1"
     },
+    fades: {
+      fade7: "fade7",
+      fade6: "fade6",
+      fade5: "fade5",
+      fade4: "fade4",
+      fade3: "fade3",
+      fade2: "fade2",
+      fade1: "fade1"
+    },
     baseColors: {
       blue: "blue",
       red: "red"
@@ -63,7 +77,9 @@ var vars = {
       overlay: "overlay",
       border: "border",
       selection: "selection",
-      danger: "danger"
+      danger: "danger",
+      disabledContent: "disabledContent",
+      disabledBackground: "disabledBackground"
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "2.7.6",
+  "version": "2.9.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",

package/es/components/button/index.js

@@ -1,72 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Button = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _utilities = require("../../utilities");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _excluded = ["children", "size", "weight", "color", "tag"];
-
-var _templateObject, _templateObject2;
-
-var __jsx = _react.default.createElement;
-
-var Wrapper = _styled.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  font-size: ", ";\n  font-weight: ", ";\n  cursor: pointer;\n  background-color: ", ";\n  color: ", ";\n  border-radius: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-buttonTextBoxPaddingX-m);\n"])), (0, _utilities.getTextSize)('m'), (0, _utilities.getWeight)('medium'), (0, _utilities.getColor)('body'), (0, _utilities.getColor)('white'), (0, _utilities.getRadius)('m'));
-
-var ButtonText = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  --opticalCompensation: -0.3px;\n\n  position: relative;\n  top: var(--opticalCompensation);\n"])));
-
-var Button = function Button(_ref) {
-  var children = _ref.children,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'm' : _ref$size,
-      _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
-      color = _ref.color,
-      tag = _ref.tag,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return __jsx(Wrapper, (0, _extends2.default)({
-    size: size,
-    weight: weight,
-    color: color,
-    as: tag
-  }, props), __jsx(ButtonText, null, children));
-};
-
-exports.Button = Button;
-Button.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "Button",
-  "props": {
-    "size": {
-      "defaultValue": {
-        "value": "'m'",
-        "computed": false
-      },
-      "required": false
-    },
-    "weight": {
-      "defaultValue": {
-        "value": "'normal'",
-        "computed": false
-      },
-      "required": false
-    }
-  }
-};

package/es/components/input/index.js

@@ -1,75 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Input = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _utilities = require("../../utilities");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _types = require("../../types");
-
-var _excluded = ["value", "placeholder", "size"];
-
-var _templateObject;
-
-var __jsx = _react.default.createElement;
-
-var Wrapper = _styled.default.input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  height: ", ";\n  padding: 0 ", ";\n  width: 100%;\n"])), function (p) {
-  return (0, _utilities.getTextSize)(p.size);
-}, (0, _utilities.getRadius)('m'), (0, _utilities.getColor)('grey3'), function (p) {
-  return "var(--grn-textBoxHeight-".concat(p.size, ")");
-}, function (p) {
-  return "var(--grn-fieldTextBoxPaddingX-".concat(p.size, ")");
-});
-
-var Input = function Input(_ref) {
-  var value = _ref.value,
-      _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? 'Placeholder' : _ref$placeholder,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'm' : _ref$size,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return __jsx(Wrapper, (0, _extends2.default)({
-    value: value,
-    placeholder: placeholder,
-    size: size
-  }, props));
-};
-
-exports.Input = Input;
-Input.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "Input",
-  "props": {
-    "placeholder": {
-      "defaultValue": {
-        "value": "'Placeholder'",
-        "computed": false
-      },
-      "required": false
-    },
-    "size": {
-      "defaultValue": {
-        "value": "'m'",
-        "computed": false
-      },
-      "required": false
-    }
-  }
-};