@flodesk/grain 2.19.2 → 2.19.5

package/es/components/arrange.js

@@ -23,18 +23,16 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _types = require("../types");
 
-var _box = require("./box");
-
 var _excluded = ["children", "gap", "columns", "autoFlow", "justifyItems", "alignItems", "justifyContent", "alignContent", "placeItems", "placeContent"];
 
 var _templateObject;
 
 var __jsx = _react.default.createElement;
 
-var Wrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  ", ";\n  justify-content: start;\n  align-items: center;\n  gap: ", ";\n  grid-template-columns: ", ";\n  justify-items: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  align-content: ", ";\n  place-items: ", ";\n  place-content: ", ";\n"])), function (p) {
+var Wrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  ", ";\n  ", ";\n  grid-template-columns: ", ";\n  justify-items: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  align-content: ", ";\n  place-items: ", ";\n  place-content: ", ";\n"])), function (p) {
   return !p.columns && "grid-auto-flow: ".concat(p.autoFlow);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.gap);
+  return (0, _utilities.getSpace)('gap', p.gap);
 }, function (p) {
   return (0, _utilities.getGridColumns)(p.columns);
 }, function (p) {
@@ -60,7 +58,8 @@ var Arrange = function Arrange(_ref) {
       justifyItems = _ref.justifyItems,
       _ref$alignItems = _ref.alignItems,
       alignItems = _ref$alignItems === void 0 ? 'center' : _ref$alignItems,
-      justifyContent = _ref.justifyContent,
+      _ref$justifyContent = _ref.justifyContent,
+      justifyContent = _ref$justifyContent === void 0 ? 'start' : _ref$justifyContent,
       alignContent = _ref.alignContent,
       placeItems = _ref.placeItems,
       placeContent = _ref.placeContent,
@@ -126,6 +125,39 @@ Arrange.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "justifyContent": {
+      "defaultValue": {
+        "value": "'start'",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"start\"",
+          "computed": false
+        }, {
+          "value": "\"end\"",
+          "computed": false
+        }, {
+          "value": "\"center\"",
+          "computed": false
+        }, {
+          "value": "\"stretch\"",
+          "computed": false
+        }, {
+          "value": "\"space-around\"",
+          "computed": false
+        }, {
+          "value": "\"space-between\"",
+          "computed": false
+        }, {
+          "value": "\"space-evenly\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
     "gap": {
       "type": {
         "name": "union",
@@ -154,6 +186,8 @@ Arrange.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -191,35 +225,6 @@ Arrange.__docgenInfo = {
       "required": false,
       "description": ""
     },
-    "justifyContent": {
-      "type": {
-        "name": "enum",
-        "value": [{
-          "value": "\"start\"",
-          "computed": false
-        }, {
-          "value": "\"end\"",
-          "computed": false
-        }, {
-          "value": "\"center\"",
-          "computed": false
-        }, {
-          "value": "\"stretch\"",
-          "computed": false
-        }, {
-          "value": "\"space-around\"",
-          "computed": false
-        }, {
-          "value": "\"space-between\"",
-          "computed": false
-        }, {
-          "value": "\"space-evenly\"",
-          "computed": false
-        }]
-      },
-      "required": false,
-      "description": ""
-    },
     "alignContent": {
       "type": {
         "name": "enum",

package/es/components/box.js

@@ -23,54 +23,54 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _types = require("../types");
 
-var _excluded = ["children", "color", "backgroundColor", "borderSide", "borderWidth", "borderColor", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "overflow", "aspectRatio"];
+var _excluded = ["children", "color", "backgroundColor", "borderColor", "borderWidth", "borderSide", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "overflow", "aspectRatio"];
 
 var _templateObject;
 
 var __jsx = _react.default.createElement;
 
-var Wrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  \n  padding:", ";\n  padding-top:", ";\n  padding-bottom:", ";\n  padding-left:", ";\n  padding-right:", ";\n  \n  margin:", ";\n  margin-top:", ";\n  margin-bottom:", ";\n  margin-left:", ";\n  margin-right:", ";\n  \n  top:", ";\n  bottom:", ";\n  left:", ";\n  right:", ";\n  \n  width: ", ";\n  min-width: ", ";\n  max-width: ", ";\n  height: ", ";\n  min-height: ", ";\n  max-height: ", ";\n\n  color: ", ";\n  background-color: ", ";\n  \n  position: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  aspect-ratio: ", ";\n"])), function (p) {
+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  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  color: ", ";\n  background-color: ", ";\n  \n  position: ", ";\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 (0, _utilities.getSpace)(p.padding);
+  return (0, _utilities.getSpace)('padding', p.padding);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.paddingTop);
+  return (0, _utilities.getSpace)('padding-top', p.paddingTop);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.paddingBottom);
+  return (0, _utilities.getSpace)('padding-bottom', p.paddingBottom);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.paddingLeft);
+  return (0, _utilities.getSpace)('padding-left', p.paddingLeft);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.paddingRight);
+  return (0, _utilities.getSpace)('padding-right', p.paddingRight);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.margin);
+  return (0, _utilities.getSpace)('margin', p.margin);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.marginTop);
+  return (0, _utilities.getSpace)('margin-top', p.marginTop);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.marginBottom);
+  return (0, _utilities.getSpace)('margin-bottom', p.marginBottom);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.marginLeft);
+  return (0, _utilities.getSpace)('margin-left', p.marginLeft);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.marginRight);
+  return (0, _utilities.getSpace)('margin-right', p.marginRight);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.top);
+  return (0, _utilities.getSpace)('top', p.top);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.bottom);
+  return (0, _utilities.getSpace)('bottom', p.bottom);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.left);
+  return (0, _utilities.getSpace)('left', p.left);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.right);
+  return (0, _utilities.getSpace)('right', p.right);
 }, function (p) {
-  return (0, _utilities.getDimension)(p.width);
+  return (0, _utilities.getDimension)('width', p.width);
 }, function (p) {
-  return (0, _utilities.getDimension)(p.minWidth);
+  return (0, _utilities.getDimension)('min-width', p.minWidth);
 }, function (p) {
-  return (0, _utilities.getDimension)(p.maxWidth);
+  return (0, _utilities.getDimension)('max-width', p.maxWidth);
 }, function (p) {
-  return (0, _utilities.getDimension)(p.height);
+  return (0, _utilities.getDimension)('height', p.height);
 }, function (p) {
-  return (0, _utilities.getDimension)(p.minHeight);
+  return (0, _utilities.getDimension)('min-height', p.minHeight);
 }, function (p) {
-  return (0, _utilities.getDimension)(p.maxHeight);
+  return (0, _utilities.getDimension)('max-height', p.maxHeight);
 }, function (p) {
   return (0, _utilities.getColor)(p.color);
 }, function (p) {
@@ -91,9 +91,11 @@ var Box = function Box(_ref) {
   var children = _ref.children,
       color = _ref.color,
       backgroundColor = _ref.backgroundColor,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? 'border' : _ref$borderColor,
+      _ref$borderWidth = _ref.borderWidth,
+      borderWidth = _ref$borderWidth === void 0 ? '1px' : _ref$borderWidth,
       borderSide = _ref.borderSide,
-      borderWidth = _ref.borderWidth,
-      borderColor = _ref.borderColor,
       width = _ref.width,
       minWidth = _ref.minWidth,
       maxWidth = _ref.maxWidth,
@@ -164,6 +166,53 @@ Box.__docgenInfo = {
   "methods": [],
   "displayName": "Box",
   "props": {
+    "borderColor": {
+      "defaultValue": {
+        "value": "'border'",
+        "computed": false
+      },
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"greys\"",
+            "computed": false
+          }, {
+            "value": "\"fades\"",
+            "computed": false
+          }, {
+            "value": "\"baseColors\"",
+            "computed": false
+          }, {
+            "value": "\"semanticColors\"",
+            "computed": false
+          }]
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "borderWidth": {
+      "defaultValue": {
+        "value": "'1px'",
+        "computed": false
+      },
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "number"
+        }, {
+          "name": "string"
+        }, {
+          "name": "object"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
     "color": {
       "type": {
         "name": "union",
@@ -243,43 +292,6 @@ Box.__docgenInfo = {
       "required": false,
       "description": ""
     },
-    "borderWidth": {
-      "type": {
-        "name": "union",
-        "value": [{
-          "name": "number"
-        }, {
-          "name": "string"
-        }]
-      },
-      "required": false,
-      "description": ""
-    },
-    "borderColor": {
-      "type": {
-        "name": "union",
-        "value": [{
-          "name": "enum",
-          "value": [{
-            "value": "\"greys\"",
-            "computed": false
-          }, {
-            "value": "\"fades\"",
-            "computed": false
-          }, {
-            "value": "\"baseColors\"",
-            "computed": false
-          }, {
-            "value": "\"semanticColors\"",
-            "computed": false
-          }]
-        }, {
-          "name": "string"
-        }]
-      },
-      "required": false,
-      "description": ""
-    },
     "width": {
       "type": {
         "name": "union",
@@ -287,6 +299,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -299,6 +313,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -311,6 +327,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -323,6 +341,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -335,6 +355,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -347,6 +369,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -424,6 +448,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -457,6 +483,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -490,6 +518,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -523,6 +553,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -556,6 +588,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -589,6 +623,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -622,6 +658,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -655,6 +693,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -688,6 +728,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -721,6 +763,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -754,6 +798,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -787,6 +833,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -820,6 +868,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -853,6 +903,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -909,6 +961,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -942,6 +996,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -975,6 +1031,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -1008,6 +1066,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,

package/es/components/icon.js

@@ -31,14 +31,14 @@ var _templateObject;
 
 var __jsx = _react.default.createElement;
 
-var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  width: ", ";\n  color: ", ";\n  \n  svg {\n    display: block;\n    height: ", ";\n    ", ";\n  }\n"])), function (p) {
+var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  width: ", ";\n  color: ", ";\n  \n  svg {\n    display: block;\n    ", ";\n    ", ";\n  }\n"])), function (p) {
   return (0, _utilities.getColor)(p.color);
 }, function (p) {
   return (0, _utilities.getColor)(p.color);
 }, function (p) {
-  return (0, _utilities.getIconSize)(p.size);
+  return (0, _utilities.getIconSize)('height', p.size);
 }, function (p) {
-  return p.hasEvenBoundary && "width: ".concat((0, _utilities.getIconSize)(p.size));
+  return p.hasEvenBoundary && (0, _utilities.getIconSize)('width', p.size);
 });
 
 var Icon = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {

package/es/components/text.js

@@ -29,7 +29,7 @@ var _templateObject;
 
 var __jsx = _react.default.createElement;
 
-var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  text-align: ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
+var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  ", ";\n  font-weight: ", ";\n  color: ", ";\n  text-align: ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return (0, _utilities.getTextSize)(p.size);
 }, function (p) {
   return (0, _utilities.getWeight)(p.weight);
@@ -101,6 +101,8 @@ Text.__docgenInfo = {
           }]
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,

package/es/types.js

@@ -17,14 +17,14 @@ var _variables = require("./variables");
 
 var types = {
   color: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.colors)), _propTypes.default.string]),
-  space: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.spaces)), _propTypes.default.number, _propTypes.default.string]),
-  dimension: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  space: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.spaces)), _propTypes.default.number, _propTypes.default.string, _propTypes.default.object]),
+  dimension: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.object]),
   side: _propTypes.default.oneOf(["all", "left", "right", "top", "bottom", "x", "y"]),
   radius: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.radiuses)), _propTypes.default.string]),
   shadow: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.shadows)), _propTypes.default.string]),
   position: _propTypes.default.oneOf(["static", "relative", "fixed", "absolute", "sticky"]),
-  textSize: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.textSizes)), _propTypes.default.string]),
-  iconSize: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.iconSizes)), _propTypes.default.number, _propTypes.default.string]),
+  textSize: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.texts)), _propTypes.default.string, _propTypes.default.object]),
+  iconSize: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.icons)), _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"]),

package/es/utilities/helpers.js

@@ -0,0 +1,61 @@
+"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.isObject = exports.isArray = exports.isString = exports.isNumber = exports.u = exports.getCssVar = exports.getCssVarCore = exports.isBrowser = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+require("core-js/modules/es.array.concat.js");
+
+var _variables = require("../variables");
+
+var isBrowser = typeof window !== "undefined";
+exports.isBrowser = isBrowser;
+
+var getCssVarCore = function getCssVarCore(type, value) {
+  return "".concat(_variables.grnPrefix).concat(type, "-").concat(value);
+};
+
+exports.getCssVarCore = getCssVarCore;
+
+var getCssVar = function getCssVar(type, value) {
+  return "var(".concat(getCssVarCore(type, value), ")");
+};
+
+exports.getCssVar = getCssVar;
+
+var u = function u(amount) {
+  return "calc(var(--grn-unit) * ".concat(amount, ")");
+};
+
+exports.u = u;
+
+var isNumber = function isNumber(value) {
+  return typeof value === "number";
+};
+
+exports.isNumber = isNumber;
+
+var isString = function isString(value) {
+  return typeof value === "string";
+};
+
+exports.isString = isString;
+
+var isArray = function isArray(value) {
+  return Array.isArray(value);
+};
+
+exports.isArray = isArray;
+
+var isObject = function isObject(value) {
+  return (0, _typeof2.default)(value) === "object";
+};
+
+exports.isObject = isObject;

package/es/utilities/index.js

@@ -0,0 +1,125 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getDimension", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getDimension;
+  }
+});
+Object.defineProperty(exports, "getColor", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getColor;
+  }
+});
+Object.defineProperty(exports, "getShadow", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getShadow;
+  }
+});
+Object.defineProperty(exports, "getTextSize", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getTextSize;
+  }
+});
+Object.defineProperty(exports, "getWeight", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getWeight;
+  }
+});
+Object.defineProperty(exports, "getRadius", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getRadius;
+  }
+});
+Object.defineProperty(exports, "getTransition", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getTransition;
+  }
+});
+Object.defineProperty(exports, "getSpace", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getSpace;
+  }
+});
+Object.defineProperty(exports, "getIconSize", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getIconSize;
+  }
+});
+Object.defineProperty(exports, "getGridColumns", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getGridColumns;
+  }
+});
+Object.defineProperty(exports, "getBorder", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getBorder;
+  }
+});
+Object.defineProperty(exports, "isBrowser", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.isBrowser;
+  }
+});
+Object.defineProperty(exports, "getCssVarCore", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.getCssVarCore;
+  }
+});
+Object.defineProperty(exports, "getCssVar", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.getCssVar;
+  }
+});
+Object.defineProperty(exports, "u", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.u;
+  }
+});
+Object.defineProperty(exports, "isNumber", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.isNumber;
+  }
+});
+Object.defineProperty(exports, "isString", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.isString;
+  }
+});
+Object.defineProperty(exports, "isArray", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.isArray;
+  }
+});
+Object.defineProperty(exports, "isObject", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.isObject;
+  }
+});
+
+var _styles = require("./styles");
+
+var _helpers = require("./helpers");

package/es/utilities/responsive.js

@@ -0,0 +1,52 @@
+"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.mapObjToMedia = exports.getMediaCss = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.object.entries.js");
+
+var _ = require(".");
+
+var _variables = require("../variables");
+
+var getMediaCss = function getMediaCss(breakpoint, property, value) {
+  var getValue = function getValue(val) {
+    if (val === 0) return val;
+    if ((0, _.isNumber)(val)) return (0, _.u)(val);
+    if ((0, _.isString)(val)) return val;
+  };
+
+  return "\n    @media (min-width: ".concat(breakpoint, ") {\n      ").concat(property, ": ").concat(getValue(value), ";\n    }\n  ");
+};
+
+exports.getMediaCss = getMediaCss;
+
+var mapObjToMedia = function mapObjToMedia(property, obj, varName) {
+  var varGroupName = _variables.varNames[varName].group;
+  var varPrefix = _variables.varNames[varName].prefix;
+  return Object.entries(obj).map(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+        breakpoint = _ref2[0],
+        value = _ref2[1];
+
+    if (value in _variables.vars[varGroupName]) {
+      return getMediaCss(breakpoint, property, (0, _.getCssVar)(varPrefix, value));
+    }
+
+    return getMediaCss(breakpoint, property, value);
+  }).join("");
+};
+
+exports.mapObjToMedia = mapObjToMedia;

package/es/utilities/styles.js

@@ -0,0 +1,174 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+require("core-js/modules/es.object.define-properties.js");
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBorder = exports.getGridColumns = exports.getIconSize = exports.getSpace = exports.getTransition = exports.getRadius = exports.getWeight = exports.getTextSize = exports.getShadow = exports.getColor = exports.getDimension = void 0;
+
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.array.map.js");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _ = require(".");
+
+var _variables = require("../variables");
+
+var _responsive = require("./responsive");
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var allColors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _variables.vars.colors.baseColors), _variables.vars.colors.greys), _variables.vars.colors.semanticColors), _variables.vars.colors.fades);
+
+var getDimension = function getDimension(property, dimension) {
+  if ((0, _.isObject)(dimension)) {
+    return (0, _responsive.mapObjToMedia)(property, dimension, _variables.varNames.space.prefix);
+  }
+
+  if (dimension === 0) return "".concat(property, ": ").concat(dimension);
+  if ((0, _.isString)(dimension)) return "".concat(property, ": ").concat(dimension);
+  if ((0, _.isNumber)(dimension)) return "".concat(property, ": ").concat((0, _.u)(dimension));
+};
+
+exports.getDimension = getDimension;
+
+var getColor = function getColor(color) {
+  if (color in allColors) {
+    return (0, _.getCssVar)(_variables.varNames.color.prefix, color);
+  }
+
+  return color;
+};
+
+exports.getColor = getColor;
+
+var getShadow = function getShadow(shadow) {
+  if (shadow in _variables.vars.shadows) {
+    return (0, _.getCssVar)(_variables.varNames.shadow.prefix, shadow);
+  }
+
+  return shadow;
+};
+
+exports.getShadow = getShadow;
+
+var getTextSize = function getTextSize(size) {
+  var property = "font-size";
+
+  if (size in _variables.vars.texts) {
+    return "".concat(property, ": ").concat((0, _.getCssVar)(_variables.varNames.text.prefix, size));
+  }
+
+  if ((0, _.isObject)(size)) {
+    return (0, _responsive.mapObjToMedia)(property, size, _variables.varNames.text.prefix);
+  }
+
+  if ((0, _.isString)(size)) return "".concat(property, ": ").concat(size);
+};
+
+exports.getTextSize = getTextSize;
+
+var getWeight = function getWeight(weight) {
+  if (weight in _variables.vars.weights) {
+    return (0, _.getCssVar)(_variables.varNames.weight.prefix, weight);
+  }
+};
+
+exports.getWeight = getWeight;
+
+var getRadius = function getRadius(radius) {
+  if (radius in _variables.vars.radiuses) {
+    return (0, _.getCssVar)(_variables.varNames.radius.prefix, radius);
+  }
+
+  if (radius === 0) return radius;
+  if ((0, _.isString)(radius)) return radius;
+  if ((0, _.isNumber)(radius)) return (0, _.u)(radius);
+};
+
+exports.getRadius = getRadius;
+
+var getTransition = function getTransition(transition) {
+  if (transition in _variables.vars.transitions) {
+    return (0, _.getCssVar)(_variables.varNames.transition.prefix, transition);
+  }
+};
+
+exports.getTransition = getTransition;
+
+var getSpace = function getSpace(property, space) {
+  if (space in _variables.vars.spaces) {
+    return "".concat(property, ": ").concat((0, _.getCssVar)(_variables.varNames.space.prefix, space));
+  }
+
+  return getDimension(property, space);
+};
+
+exports.getSpace = getSpace;
+
+var getIconSize = function getIconSize(property, size) {
+  if (size in _variables.vars.icons) {
+    return "".concat(property, ": ").concat((0, _.getCssVar)(_variables.varNames.icon.prefix, size));
+  }
+
+  return getDimension(property, size);
+};
+
+exports.getIconSize = getIconSize;
+
+var getGridColumns = function getGridColumns(columns) {
+  if (columns) {
+    if (isArray(columns)) {
+      return columns.map(function (column) {
+        return getDimension(column);
+      }).join(" ");
+    }
+
+    if ((0, _.isString)(columns)) return columns;
+  }
+};
+
+exports.getGridColumns = getGridColumns;
+
+var getBorder = function getBorder(borderSide, borderWidth, borderColor) {
+  var borderSides = {
+    all: ["top", "right", "bottom", "left"],
+    x: ["right", "left"],
+    y: ["top", "bottom"],
+    top: ["top"],
+    right: ["right"],
+    bottom: ["bottom"],
+    left: ["left"]
+  };
+
+  if (borderSide in borderSides) {
+    return "\n      ".concat(borderSides[borderSide].map(function (side) {
+      return "border-".concat(side, "-style: solid");
+    }).join(";"), ";\n\n      border-color: ").concat(getColor(borderColor), ";\n      ").concat(getDimension("border-width", borderWidth), ";\n    ");
+  }
+};
+
+exports.getBorder = getBorder;

package/es/variables.js

@@ -16,12 +16,12 @@ var _vars;
 var grnPrefix = "--grn-";
 exports.grnPrefix = grnPrefix;
 var varNames = {
-  textSize: {
-    group: "textSizes",
+  text: {
+    group: "texts",
     prefix: "text"
   },
-  iconSize: {
-    group: "iconSizes",
+  icon: {
+    group: "icons",
     prefix: "icon"
   },
   space: {
@@ -50,13 +50,13 @@ var varNames = {
   }
 };
 exports.varNames = varNames;
-var vars = (_vars = {}, (0, _defineProperty2.default)(_vars, varNames.textSize.group, {
+var vars = (_vars = {}, (0, _defineProperty2.default)(_vars, varNames.text.group, {
   s: "s",
   m: "m",
   l: "l",
   xl: "xl",
   xxl: "xxl"
-}), (0, _defineProperty2.default)(_vars, varNames.iconSize.group, {
+}), (0, _defineProperty2.default)(_vars, varNames.icon.group, {
   s: "s",
   m: "m",
   l: "l",

package/package.json

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

package/es/utilities.js

@@ -1,212 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.keys.js");
-
-require("core-js/modules/es.symbol.js");
-
-require("core-js/modules/es.array.filter.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
-require("core-js/modules/web.dom-collections.for-each.js");
-
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-
-require("core-js/modules/es.object.define-properties.js");
-
-require("core-js/modules/es.object.define-property.js");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getBorder = exports.getGridColumns = exports.getIconSize = exports.getDimension = 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");
-
-require("core-js/modules/es.array.map.js");
-
-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; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var isBrowser = typeof window !== "undefined";
-exports.isBrowser = isBrowser;
-
-var getCssVarCore = function getCssVarCore(type, value) {
-  return "".concat(_variables.grnPrefix).concat(type, "-").concat(value);
-};
-
-exports.getCssVarCore = getCssVarCore;
-
-var getCssVar = function getCssVar(type, value) {
-  return "var(".concat(getCssVarCore(type, value), ")");
-};
-
-exports.getCssVar = getCssVar;
-
-var u = function u(amount) {
-  return "calc(var(--grn-unit) * ".concat(amount, ")");
-};
-
-var isNumber = function isNumber(value) {
-  return typeof value === "number";
-};
-
-var isString = function isString(value) {
-  return typeof value === "string";
-};
-
-var isArray = function isArray(value) {
-  return Array.isArray(value);
-};
-
-var getColor = function getColor(color) {
-  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(_variables.varNames.color.prefix, color);
-  }
-
-  return color;
-};
-
-exports.getColor = getColor;
-
-var getShadow = function getShadow(shadow) {
-  if (shadow in _variables.vars.shadows) {
-    return getCssVar(_variables.varNames.shadow.prefix, shadow);
-  }
-
-  return shadow;
-};
-
-exports.getShadow = getShadow;
-
-var getTextSize = function getTextSize(size) {
-  if (size in _variables.vars.textSizes) {
-    return getCssVar(_variables.varNames.textSize.prefix, size);
-  }
-
-  if (isString(size)) {
-    return size;
-  }
-};
-
-exports.getTextSize = getTextSize;
-
-var getWeight = function getWeight(weight) {
-  if (weight in _variables.vars.weights) {
-    return getCssVar(_variables.varNames.weight.prefix, weight);
-  }
-};
-
-exports.getWeight = getWeight;
-
-var getRadius = function getRadius(radius) {
-  if (radius in _variables.vars.radiuses) {
-    return getCssVar(_variables.varNames.radius.prefix, radius);
-  }
-
-  if (isString(radius)) {
-    return radius;
-  }
-};
-
-exports.getRadius = getRadius;
-
-var getTransition = function getTransition(transition) {
-  if (transition in _variables.vars.transitions) {
-    return getCssVar(_variables.varNames.transition.prefix, transition);
-  }
-};
-
-exports.getTransition = getTransition;
-
-var getSpace = function getSpace(space) {
-  if (space === 0) return space;
-
-  if (isNumber(space)) {
-    return u(space);
-  }
-
-  if (space in _variables.vars.spaces) {
-    return getCssVar(_variables.varNames.space.prefix, space);
-  }
-
-  if (isString(space)) {
-    return space;
-  }
-};
-
-exports.getSpace = getSpace;
-
-var getDimension = function getDimension(dimension) {
-  if (dimension === 0) return dimension;
-
-  if (isNumber(dimension)) {
-    return u(dimension);
-  }
-
-  if (isString(dimension)) {
-    return dimension;
-  }
-};
-
-exports.getDimension = getDimension;
-
-var getIconSize = function getIconSize(size) {
-  if (size === 0) return size;
-
-  if (size in _variables.vars.iconSizes) {
-    return getCssVar(_variables.varNames.iconSize.prefix, size);
-  }
-
-  if (isNumber(size) || isString(size)) {
-    return getDimension(size);
-  }
-};
-
-exports.getIconSize = getIconSize;
-
-var getGridColumns = function getGridColumns(columns) {
-  if (columns) {
-    if (isArray(columns)) {
-      return columns.map(function (column) {
-        return getDimension(column);
-      }).join(" ");
-    }
-
-    if (isString(columns)) {
-      return columns;
-    }
-  }
-};
-
-exports.getGridColumns = getGridColumns;
-
-var getBorder = function getBorder(borderSide) {
-  var borderWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "1px";
-  var borderColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "border";
-  var w = getSpace(borderWidth);
-  var borderSideStyles = {
-    x: "0 ".concat(w),
-    y: "".concat(w, " 0"),
-    all: "".concat(w),
-    top: "".concat(w, " 0 0 0"),
-    right: "0 ".concat(w, " 0 0"),
-    bottom: "0 0 ".concat(w, " 0"),
-    left: "0 0 0 ".concat(w)
-  };
-
-  if (borderSide in borderSideStyles) {
-    return "\n      border-style: solid;\n      border-width: ".concat(borderSideStyles[borderSide], ";\n      border-color: ").concat(getColor(borderColor), ";\n    ");
-  }
-};
-
-exports.getBorder = getBorder;