@flodesk/grain 2.19.4 → 2.19.7

package/es/components/arrange.js

@@ -32,7 +32,7 @@ var __jsx = _react.default.createElement;
 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)('gap', p.gap);
+  return (0, _utilities.getResponsiveSpace)('gap', p.gap);
 }, function (p) {
   return (0, _utilities.getGridColumns)(p.columns);
 }, function (p) {
@@ -58,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,
@@ -124,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",
@@ -152,6 +186,8 @@ Arrange.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -189,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

@@ -32,45 +32,45 @@ var __jsx = _react.default.createElement;
 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)('padding', p.padding);
+  return (0, _utilities.getResponsiveSpace)('padding', p.padding);
 }, function (p) {
-  return (0, _utilities.getSpace)('padding-top', p.paddingTop);
+  return (0, _utilities.getResponsiveSpace)('padding-top', p.paddingTop);
 }, function (p) {
-  return (0, _utilities.getSpace)('padding-bottom', p.paddingBottom);
+  return (0, _utilities.getResponsiveSpace)('padding-bottom', p.paddingBottom);
 }, function (p) {
-  return (0, _utilities.getSpace)('padding-left', p.paddingLeft);
+  return (0, _utilities.getResponsiveSpace)('padding-left', p.paddingLeft);
 }, function (p) {
-  return (0, _utilities.getSpace)('padding-right', p.paddingRight);
+  return (0, _utilities.getResponsiveSpace)('padding-right', p.paddingRight);
 }, function (p) {
-  return (0, _utilities.getSpace)('margin', p.margin);
+  return (0, _utilities.getResponsiveSpace)('margin', p.margin);
 }, function (p) {
-  return (0, _utilities.getSpace)('margin-top', p.marginTop);
+  return (0, _utilities.getResponsiveSpace)('margin-top', p.marginTop);
 }, function (p) {
-  return (0, _utilities.getSpace)('margin-bottom', p.marginBottom);
+  return (0, _utilities.getResponsiveSpace)('margin-bottom', p.marginBottom);
 }, function (p) {
-  return (0, _utilities.getSpace)('margin-left', p.marginLeft);
+  return (0, _utilities.getResponsiveSpace)('margin-left', p.marginLeft);
 }, function (p) {
-  return (0, _utilities.getSpace)('margin-right', p.marginRight);
+  return (0, _utilities.getResponsiveSpace)('margin-right', p.marginRight);
 }, function (p) {
-  return (0, _utilities.getSpace)('top', p.top);
+  return (0, _utilities.getResponsiveSpace)('top', p.top);
 }, function (p) {
-  return (0, _utilities.getSpace)('bottom', p.bottom);
+  return (0, _utilities.getResponsiveSpace)('bottom', p.bottom);
 }, function (p) {
-  return (0, _utilities.getSpace)('left', p.left);
+  return (0, _utilities.getResponsiveSpace)('left', p.left);
 }, function (p) {
-  return (0, _utilities.getSpace)('right', p.right);
+  return (0, _utilities.getResponsiveSpace)('right', p.right);
 }, function (p) {
-  return (0, _utilities.getDimension)('width', p.width);
+  return (0, _utilities.getResponsiveDimension)('width', p.width);
 }, function (p) {
-  return (0, _utilities.getDimension)('min-width', p.minWidth);
+  return (0, _utilities.getResponsiveDimension)('min-width', p.minWidth);
 }, function (p) {
-  return (0, _utilities.getDimension)('max-width', p.maxWidth);
+  return (0, _utilities.getResponsiveDimension)('max-width', p.maxWidth);
 }, function (p) {
-  return (0, _utilities.getDimension)('height', p.height);
+  return (0, _utilities.getResponsiveDimension)('height', p.height);
 }, function (p) {
-  return (0, _utilities.getDimension)('min-height', p.minHeight);
+  return (0, _utilities.getResponsiveDimension)('min-height', p.minHeight);
 }, function (p) {
-  return (0, _utilities.getDimension)('max-height', p.maxHeight);
+  return (0, _utilities.getResponsiveDimension)('max-height', p.maxHeight);
 }, function (p) {
   return (0, _utilities.getColor)(p.color);
 }, function (p) {
@@ -206,6 +206,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -297,6 +299,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -309,6 +313,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -321,6 +327,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -333,6 +341,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -345,6 +355,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -357,6 +369,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -434,6 +448,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -467,6 +483,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -500,6 +518,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -533,6 +553,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -566,6 +588,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -599,6 +623,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -632,6 +658,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -665,6 +693,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -698,6 +728,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -731,6 +763,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -764,6 +798,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -797,6 +833,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -830,6 +868,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -863,6 +903,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -919,6 +961,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -952,6 +996,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -985,6 +1031,8 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
+        }, {
+          "name": "object"
         }]
       },
       "required": false,
@@ -1018,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    ", ";\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    height: ", ";\n    ", "\n"])), function (p) {
   return (0, _utilities.getColor)(p.color);
 }, function (p) {
   return (0, _utilities.getColor)(p.color);
 }, function (p) {
-  return (0, _utilities.getIconSize)('height', p.size);
+  return (0, _utilities.getIconSize)(p.size);
 }, function (p) {
-  return p.hasEvenBoundary && (0, _utilities.getIconSize)('width', p.size);
+  return p.hasEvenBoundary && "width: ".concat((0, _utilities.getIconSize)(p.size), "}");
 });
 
 var Icon = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {

package/es/components/text-input.js

@@ -42,13 +42,11 @@ var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _tagg
 var inputSizesStyles = {
   s: {
     height: 'var(--grn-textBoxHeight-s)',
-    padding: '0 var(--grn-fieldTextBoxPaddingX-s)',
-    borderRadius: (0, _utilities.getRadius)('xs')
+    padding: '0 var(--grn-fieldTextBoxPaddingX-s)'
   },
   m: {
     height: 'var(--grn-textBoxHeight-m)',
-    padding: '0 var(--grn-fieldTextBoxPaddingX-m)',
-    borderRadius: (0, _utilities.getRadius)('s')
+    padding: '0 var(--grn-fieldTextBoxPaddingX-m)'
   }
 };
 var sizesStyles = {
@@ -72,7 +70,9 @@ var Label = _styled.default.label(_templateObject3 || (_templateObject3 = (0, _t
   return sizesStyles[p.size].labelGap;
 });
 
-var InputField = _styled.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  transition-property: border-color;  \n  border: 1px solid var(--grn-color-fieldBorder);\n  width: 100%;\n  ", ";\n  ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    border-color: var(--grn-color-fieldBorder-hover);\n  }\n  \n  &:focus {\n    transition: 0s;\n    border-color: var(--grn-color-grey6);\n  }\n"])), _foundational.transitions, function (p) {
+var InputField = _styled.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  transition-property: border-color;  \n  border: 1px solid var(--grn-color-fieldBorder);\n  width: 100%;\n  border-radius: ", ";\n  ", ";\n  ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    border-color: var(--grn-color-fieldBorder-hover);\n  }\n  \n  &:focus {\n    transition: 0s;\n    border-color: var(--grn-color-grey6);\n  }\n"])), _foundational.transitions, function (p) {
+  return (0, _utilities.getRadius)('s');
+}, function (p) {
   return inputSizesStyles[p.size];
 }, function (p) {
   return p.paddingLeft && "padding-left: ".concat(p.paddingLeft, "px");

package/es/components/text.js

@@ -30,7 +30,7 @@ var _templateObject;
 var __jsx = _react.default.createElement;
 
 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);
+  return (0, _utilities.getResponsiveTextSize)(p.size);
 }, function (p) {
   return (0, _utilities.getWeight)(p.weight);
 }, function (p) {
@@ -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

@@ -1,214 +1,139 @@
 "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.getDimension = exports.getTransition = exports.getRadius = exports.getWeight = exports.getTextSize = exports.getShadow = exports.getColor = exports.isObject = exports.isArray = exports.isString = exports.isNumber = exports.u = exports.getCssVar = exports.getCssVarCore = exports.isBrowser = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-require("core-js/modules/es.array.concat.js");
-
-require("core-js/modules/es.array.map.js");
-
-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 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;
-
-var allColors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _variables.vars.colors.baseColors), _variables.vars.colors.greys), _variables.vars.colors.semanticColors), _variables.vars.colors.fades);
-
-var getColor = function getColor(color) {
-  if (color in allColors) {
-    return getCssVar(_variables.varNames.color.prefix, color);
+Object.defineProperty(exports, "getDimension", {
+  enumerable: true,
+  get: function get() {
+    return _responsive.getDimension;
   }
-
-  return color;
-};
-
-exports.getColor = getColor;
-
-var getShadow = function getShadow(shadow) {
-  if (shadow in _variables.vars.shadows) {
-    return getCssVar(_variables.varNames.shadow.prefix, shadow);
+});
+Object.defineProperty(exports, "getResponsiveDimension", {
+  enumerable: true,
+  get: function get() {
+    return _responsive.getResponsiveDimension;
   }
-
-  return shadow;
-};
-
-exports.getShadow = getShadow;
-
-var getTextSize = function getTextSize(size) {
-  var property = "font-size: ";
-
-  if (size in _variables.vars.textSizes) {
-    return property + getCssVar(_variables.varNames.textSize.prefix, size);
+});
+Object.defineProperty(exports, "getTextSize", {
+  enumerable: true,
+  get: function get() {
+    return _responsive.getTextSize;
   }
-
-  if (isString(size)) return property + size;
-  if (isObject(size)) return (0, _responsive.getMediaStyles)(property, size);
-};
-
-exports.getTextSize = getTextSize;
-
-var getWeight = function getWeight(weight) {
-  if (weight in _variables.vars.weights) {
-    return getCssVar(_variables.varNames.weight.prefix, weight);
+});
+Object.defineProperty(exports, "getResponsiveTextSize", {
+  enumerable: true,
+  get: function get() {
+    return _responsive.getResponsiveTextSize;
   }
-};
-
-exports.getWeight = getWeight;
-
-var getRadius = function getRadius(radius) {
-  if (radius in _variables.vars.radiuses) {
-    return getCssVar(_variables.varNames.radius.prefix, radius);
+});
+Object.defineProperty(exports, "getResponsiveSpace", {
+  enumerable: true,
+  get: function get() {
+    return _responsive.getResponsiveSpace;
   }
-
-  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);
+});
+Object.defineProperty(exports, "getColor", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getColor;
   }
-};
-
-exports.getTransition = getTransition;
-
-var getDimension = function getDimension(property, dimension) {
-  var propertyName = property + ":";
-  if (dimension === 0) return propertyName + dimension;
-  if (isNumber(dimension)) return propertyName + u(dimension);
-  if (isString(dimension)) return propertyName + dimension;
-  if (isObject(dimension)) return (0, _responsive.getMediaStyles)(propertyName, dimension);
-};
-
-exports.getDimension = getDimension;
-
-var getSpace = function getSpace(property, space) {
-  if (space in _variables.vars.spaces) {
-    return "".concat(property, ": ").concat(getCssVar(_variables.varNames.space.prefix, space));
+});
+Object.defineProperty(exports, "getShadow", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getShadow;
   }
-
-  return getDimension(property, space);
-};
-
-exports.getSpace = getSpace;
-
-var getIconSize = function getIconSize(property, size) {
-  if (size in _variables.vars.iconSizes) {
-    return "".concat(property, ": ").concat(getCssVar(_variables.varNames.iconSize.prefix, size));
+});
+Object.defineProperty(exports, "getWeight", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getWeight;
   }
-
-  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 (isString(columns)) return columns;
+});
+Object.defineProperty(exports, "getRadius", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getRadius;
   }
-};
-
-exports.getGridColumns = getGridColumns;
+});
+Object.defineProperty(exports, "getTransition", {
+  enumerable: true,
+  get: function get() {
+    return _styles.getTransition;
+  }
+});
+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 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 borderSides = {
-    all: ["top", "right", "bottom", "left"],
-    x: ["right", "left"],
-    y: ["top", "bottom"],
-    top: ["top"],
-    right: ["right"],
-    bottom: ["bottom"],
-    left: ["left"]
-  };
+var _responsive = require("./responsive");
 
-  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    ");
-  }
-};
+var _styles = require("./styles");
 
-exports.getBorder = getBorder;
+var _helpers = require("./helpers");

package/es/utilities/responsive.js

@@ -7,25 +7,102 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMediaStyles = void 0;
+exports.getResponsiveTextSize = exports.getTextSize = exports.getResponsiveSpace = exports.getResponsiveDimension = exports.getDimension = 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");
 
-require("core-js/modules/es.array.concat.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 getMediaStyles = function getMediaStyles(property, obj) {
-  var declarations = Object.entries(obj).map(function (_ref) {
+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),
-        key = _ref2[0],
+        breakpoint = _ref2[0],
         value = _ref2[1];
 
-    return "\n      @media (min-width: ".concat(key, ") {\n        ").concat(property, " ").concat(value, ";\n      }\n    ");
-  });
-  return declarations.join("");
+    if (value in _variables.vars[varGroupName]) {
+      return getMediaCss(breakpoint, property, (0, _.getCssVar)(varPrefix, value));
+    }
+
+    return getMediaCss(breakpoint, property, value);
+  }).join("");
+};
+
+exports.mapObjToMedia = mapObjToMedia;
+
+var getDimension = function getDimension(dimension) {
+  if (dimension === 0) return dimension;
+  if ((0, _.isString)(dimension)) return dimension;
+  if ((0, _.isNumber)(dimension)) return (0, _.u)(dimension);
+};
+
+exports.getDimension = getDimension;
+
+var getResponsiveDimension = function getResponsiveDimension(property, dimension) {
+  if ((0, _.isObject)(dimension)) {
+    return 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.getResponsiveDimension = getResponsiveDimension;
+
+var getResponsiveSpace = function getResponsiveSpace(property, space) {
+  if (space in _variables.vars.spaces) {
+    return "".concat(property, ": ").concat((0, _.getCssVar)(_variables.varNames.space.prefix, space));
+  }
+
+  return getResponsiveDimension(property, space);
+};
+
+exports.getResponsiveSpace = getResponsiveSpace;
+
+var getTextSize = function getTextSize(size) {
+  if (size in _variables.vars.texts) {
+    return (0, _.getCssVar)(_variables.varNames.text.prefix, size);
+  }
+
+  if ((0, _.isString)(size)) return size;
+};
+
+exports.getTextSize = getTextSize;
+
+var getResponsiveTextSize = function getResponsiveTextSize(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 mapObjToMedia(property, size, _variables.varNames.text.prefix);
+  }
+
+  if ((0, _.isString)(size)) return "".concat(property, ": ").concat(size);
 };
 
-exports.getMediaStyles = getMediaStyles;
+exports.getResponsiveTextSize = getResponsiveTextSize;

package/es/utilities/styles.js

@@ -0,0 +1,136 @@
+"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.getTransition = exports.getRadius = exports.getWeight = exports.getShadow = exports.getColor = void 0;
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.array.concat.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 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 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 getIconSize = function getIconSize(size) {
+  if (size in _variables.vars.icons) {
+    return (0, _.getCssVar)(_variables.varNames.icon.prefix, size);
+  }
+
+  return (0, _responsive.getDimension)(size);
+};
+
+exports.getIconSize = getIconSize;
+
+var getGridColumns = function getGridColumns(columns) {
+  if (columns) {
+    if ((0, _.isArray)(columns)) {
+      return columns.map(function (column) {
+        return (0, _responsive.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((0, _responsive.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.4",
+  "version": "2.19.7",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",