@flodesk/grain 2.7.2 → 2.7.5

package/es/components/box/index.js

@@ -1,34 +1,46 @@
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.object.freeze.js";
-import "core-js/modules/es.object.define-properties.js";
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.array.index-of.js";
-import "core-js/modules/es.symbol.js";
-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"];
+"use strict";
 
-var _templateObject;
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Box = 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"));
+
+require("core-js/modules/es.array.concat.js");
+
+var _utilities = require("../../utilities");
+
+var _react = _interopRequireDefault(require("react"));
 
-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; }
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-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 _types = require("../../types");
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+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"];
 
-import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.object.assign.js";
-import { getBorder, getColor, getRadius, getSpace, getShadow } from '../../utilities';
-import React from "react";
-import styled from "@emotion/styled";
-import { types } from '../../types';
+var _templateObject;
+
+var __jsx = _react.default.createElement;
 
 var getSpaceCss = function getSpaceCss(propertyName, propertyValue) {
   if (propertyValue || propertyValue === 0) {
-    return "".concat(propertyName, ": ").concat(getSpace(propertyValue));
+    return "".concat(propertyName, ": ").concat((0, _utilities.getSpace)(propertyValue));
   }
 };
 
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n    \n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n"])), function (p) {
-  return getBorder(p.borderSide, p.borderWidth, p.borderColor);
+var Wrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  position: ", ";\n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  aspect-ratio: ", ";\n"])), function (p) {
+  return (0, _utilities.getBorder)(p.borderSide, p.borderWidth, p.borderColor);
+}, function (p) {
+  return getSpaceCss('padding', p.padding);
 }, function (p) {
   return getSpaceCss('padding-top', p.paddingTop);
 }, function (p) {
@@ -37,6 +49,8 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
   return getSpaceCss('padding-left', p.paddingLeft);
 }, function (p) {
   return getSpaceCss('padding-right', p.paddingRight);
+}, function (p) {
+  return getSpaceCss('margin', p.margin);
 }, function (p) {
   return getSpaceCss('margin-top', p.marginTop);
 }, function (p) {
@@ -54,21 +68,26 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
 }, function (p) {
   return getSpaceCss('right', p.right);
 }, function (p) {
-  return p.position && "position: ".concat(p.position);
+  return p.position;
+}, function (p) {
+  return (0, _utilities.getColor)(p.color);
 }, function (p) {
-  return getColor(p.color);
+  return (0, _utilities.getColor)(p.backgroundColor);
 }, function (p) {
-  return getColor(p.backgroundColor);
+  return (0, _utilities.getSpace)(p.width);
 }, function (p) {
-  return getSpace(p.width);
+  return (0, _utilities.getSpace)(p.height);
 }, function (p) {
-  return getSpace(p.height);
+  return (0, _utilities.getRadius)(p.radius);
 }, function (p) {
-  return getRadius(p.radius);
+  return (0, _utilities.getShadow)(p.shadow);
 }, function (p) {
-  return getShadow(p.shadow);
+  return p.overflow;
+}, function (p) {
+  return p.aspectRatio;
 });
-export var Box = function Box(_ref) {
+
+var Box = function Box(_ref) {
   var children = _ref.children,
       color = _ref.color,
       backgroundColor = _ref.backgroundColor,
@@ -98,9 +117,10 @@ export var Box = function Box(_ref) {
       left = _ref.left,
       right = _ref.right,
       shadow = _ref.shadow,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
+      overflow = _ref.overflow,
+      aspectRatio = _ref.aspectRatio,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return __jsx(Wrapper, (0, _extends2.default)({
     backgroundColor: backgroundColor,
     color: color,
     borderSide: borderSide,
@@ -109,45 +129,773 @@ export var Box = function Box(_ref) {
     width: width,
     height: height,
     radius: radius,
-    paddingTop: padding || paddingY || paddingTop,
-    paddingBottom: padding || paddingY || paddingBottom,
-    paddingLeft: padding || paddingX || paddingLeft,
-    paddingRight: padding || paddingX || paddingRight,
-    marginTop: margin || marginY || marginTop,
-    marginBottom: margin || marginY || marginBottom,
-    marginLeft: margin || marginX || marginLeft,
-    marginRight: margin || marginX || marginRight,
+    padding: padding,
+    paddingTop: paddingY || paddingTop,
+    paddingBottom: paddingY || paddingBottom,
+    paddingLeft: paddingX || paddingLeft,
+    paddingRight: paddingX || paddingRight,
+    margin: margin,
+    marginTop: marginY || marginTop,
+    marginBottom: marginY || marginBottom,
+    marginLeft: marginX || marginLeft,
+    marginRight: marginX || marginRight,
     position: position,
     top: top,
     bottom: bottom,
     left: left,
     right: right,
-    shadow: shadow
+    shadow: shadow,
+    overflow: overflow,
+    aspectRatio: aspectRatio
   }, props), children);
 };
-Box.propTypes = {
-  color: types.color,
-  borderSide: types.side,
-  width: types.space,
-  height: types.space,
-  radius: types.radius,
-  padding: types.space,
-  paddingTop: types.space,
-  paddingBottom: types.space,
-  paddingLeft: types.space,
-  paddingRight: types.space,
-  paddingX: types.space,
-  paddingY: types.space,
-  margin: types.space,
-  marginTop: types.space,
-  marginBottom: types.space,
-  marginLeft: types.space,
-  marginRight: types.space,
-  marginX: types.space,
-  marginY: types.space,
-  position: types.position,
-  top: types.space,
-  bottom: types.space,
-  left: types.space,
-  right: types.space
+
+exports.Box = Box;
+Box.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Box",
+  "props": {
+    "color": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"greys\"",
+            "computed": false
+          }, {
+            "value": "\"baseColors\"",
+            "computed": false
+          }, {
+            "value": "\"semanticColors\"",
+            "computed": false
+          }]
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "borderSide": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"all\"",
+          "computed": false
+        }, {
+          "value": "\"left\"",
+          "computed": false
+        }, {
+          "value": "\"right\"",
+          "computed": false
+        }, {
+          "value": "\"top\"",
+          "computed": false
+        }, {
+          "value": "\"bottom\"",
+          "computed": false
+        }, {
+          "value": "\"x\"",
+          "computed": false
+        }, {
+          "value": "\"y\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "width": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "height": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "radius": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }]
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "padding": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "paddingTop": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "paddingBottom": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "paddingLeft": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "paddingRight": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "paddingX": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "paddingY": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "margin": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "marginTop": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "marginBottom": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "marginLeft": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "marginRight": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "marginX": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "marginY": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "position": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"static\"",
+          "computed": false
+        }, {
+          "value": "\"relative\"",
+          "computed": false
+        }, {
+          "value": "\"fixed\"",
+          "computed": false
+        }, {
+          "value": "\"absolute\"",
+          "computed": false
+        }, {
+          "value": "\"sticky\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "top": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "bottom": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "left": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "right": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "overflow": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"visible\"",
+          "computed": false
+        }, {
+          "value": "\"hidden\"",
+          "computed": false
+        }, {
+          "value": "\"scroll\"",
+          "computed": false
+        }, {
+          "value": "\"auto\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "aspectRatio": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
 };