@flodesk/grain 2.20.1 → 2.20.4

package/es/icons/icon-mail.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconMail = function IconMail(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-minus.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconMinus = function IconMinus(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-monitor.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconMonitor = function IconMonitor(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-pencil.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconPencil = function IconPencil(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-phone.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconPhone = function IconPhone(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-plus.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconPlus = function IconPlus(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-redo.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconRedo = function IconRedo(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-search.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconSearch = function IconSearch(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-send.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconSend = function IconSend(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-share.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconShare = function IconShare(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-smile.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconSmile = function IconSmile(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-switch.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconSwitch = function IconSwitch(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-tablet.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconTablet = function IconTablet(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-text-align-center.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconTextAlignCenter = function IconTextAlignCenter(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-text-align-left.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconTextAlignLeft = function IconTextAlignLeft(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-text-align-right.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconTextAlignRight = function IconTextAlignRight(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-trash.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconTrash = function IconTrash(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-type.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconType = function IconType(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-undo.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconUndo = function IconUndo(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/icon-upload.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.object.assign.js";
-import * as React from "react";
+import * as React from 'react';
 
 var IconUpload = function IconUpload(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({

package/es/icons/index.js

@@ -1,51 +1,51 @@
-export { default as IconAlignCenter } from "./icon-align-center";
-export { default as IconAlignLeft } from "./icon-align-left";
-export { default as IconAlignRight } from "./icon-align-right";
-export { default as IconArrowDown } from "./icon-arrow-down";
-export { default as IconArrowLeft } from "./icon-arrow-left";
-export { default as IconArrowRight } from "./icon-arrow-right";
-export { default as IconArrowUp } from "./icon-arrow-up";
-export { default as IconBrowser } from "./icon-browser";
-export { default as IconChart } from "./icon-chart";
-export { default as IconCheck } from "./icon-check";
-export { default as IconChevronDown } from "./icon-chevron-down";
-export { default as IconChevronHorizontal } from "./icon-chevron-horizontal";
-export { default as IconChevronLeft } from "./icon-chevron-left";
-export { default as IconChevronRight } from "./icon-chevron-right";
-export { default as IconChevronUp } from "./icon-chevron-up";
-export { default as IconChevronVertical } from "./icon-chevron-vertical";
-export { default as IconClip } from "./icon-clip";
-export { default as IconClock } from "./icon-clock";
-export { default as IconCrop } from "./icon-crop";
-export { default as IconCross } from "./icon-cross";
-export { default as IconDuplicate } from "./icon-duplicate";
-export { default as IconEllipsis } from "./icon-ellipsis";
-export { default as IconFile } from "./icon-file";
-export { default as IconFolder } from "./icon-folder";
-export { default as IconFolderAdd } from "./icon-folder-add";
-export { default as IconGear } from "./icon-gear";
-export { default as IconGlobe } from "./icon-globe";
-export { default as IconHeart } from "./icon-heart";
-export { default as IconImage } from "./icon-image";
-export { default as IconLink } from "./icon-link";
-export { default as IconMail } from "./icon-mail";
-export { default as IconMinus } from "./icon-minus";
-export { default as IconMonitor } from "./icon-monitor";
-export { default as IconPencil } from "./icon-pencil";
-export { default as IconPhone } from "./icon-phone";
-export { default as IconPlus } from "./icon-plus";
-export { default as IconRedo } from "./icon-redo";
-export { default as IconSearch } from "./icon-search";
-export { default as IconSend } from "./icon-send";
-export { default as IconShare } from "./icon-share";
-export { default as IconSmile } from "./icon-smile";
-export { default as IconSwitch } from "./icon-switch";
-export { default as IconTablet } from "./icon-tablet";
-export { default as IconTextAlignCenter } from "./icon-text-align-center";
-export { default as IconTextAlignLeft } from "./icon-text-align-left";
-export { default as IconTextAlignRight } from "./icon-text-align-right";
-export { default as IconTrash } from "./icon-trash";
-export { default as IconType } from "./icon-type";
-export { default as IconUndo } from "./icon-undo";
-export { default as IconUpload } from "./icon-upload";
-export { default as IconDownload } from "./icon-download";
+export { default as IconAlignCenter } from './icon-align-center';
+export { default as IconAlignLeft } from './icon-align-left';
+export { default as IconAlignRight } from './icon-align-right';
+export { default as IconArrowDown } from './icon-arrow-down';
+export { default as IconArrowLeft } from './icon-arrow-left';
+export { default as IconArrowRight } from './icon-arrow-right';
+export { default as IconArrowUp } from './icon-arrow-up';
+export { default as IconBrowser } from './icon-browser';
+export { default as IconChart } from './icon-chart';
+export { default as IconCheck } from './icon-check';
+export { default as IconChevronDown } from './icon-chevron-down';
+export { default as IconChevronHorizontal } from './icon-chevron-horizontal';
+export { default as IconChevronLeft } from './icon-chevron-left';
+export { default as IconChevronRight } from './icon-chevron-right';
+export { default as IconChevronUp } from './icon-chevron-up';
+export { default as IconChevronVertical } from './icon-chevron-vertical';
+export { default as IconClip } from './icon-clip';
+export { default as IconClock } from './icon-clock';
+export { default as IconCrop } from './icon-crop';
+export { default as IconCross } from './icon-cross';
+export { default as IconDuplicate } from './icon-duplicate';
+export { default as IconEllipsis } from './icon-ellipsis';
+export { default as IconFile } from './icon-file';
+export { default as IconFolder } from './icon-folder';
+export { default as IconFolderAdd } from './icon-folder-add';
+export { default as IconGear } from './icon-gear';
+export { default as IconGlobe } from './icon-globe';
+export { default as IconHeart } from './icon-heart';
+export { default as IconImage } from './icon-image';
+export { default as IconLink } from './icon-link';
+export { default as IconMail } from './icon-mail';
+export { default as IconMinus } from './icon-minus';
+export { default as IconMonitor } from './icon-monitor';
+export { default as IconPencil } from './icon-pencil';
+export { default as IconPhone } from './icon-phone';
+export { default as IconPlus } from './icon-plus';
+export { default as IconRedo } from './icon-redo';
+export { default as IconSearch } from './icon-search';
+export { default as IconSend } from './icon-send';
+export { default as IconShare } from './icon-share';
+export { default as IconSmile } from './icon-smile';
+export { default as IconSwitch } from './icon-switch';
+export { default as IconTablet } from './icon-tablet';
+export { default as IconTextAlignCenter } from './icon-text-align-center';
+export { default as IconTextAlignLeft } from './icon-text-align-left';
+export { default as IconTextAlignRight } from './icon-text-align-right';
+export { default as IconTrash } from './icon-trash';
+export { default as IconType } from './icon-type';
+export { default as IconUndo } from './icon-undo';
+export { default as IconUpload } from './icon-upload';
+export { default as IconDownload } from './icon-download';

package/es/index.js

@@ -1,3 +1,3 @@
-export * from "./components";
-export * from "./icons";
-export { vars } from "./variables";
+export * from './components';
+export * from './icons';
+export * from './variables';

package/es/types.js

@@ -1,23 +1,23 @@
 import "core-js/modules/es.object.keys.js";
-import PropTypes from "prop-types";
-import { vars } from "./variables";
+import PropTypes from 'prop-types';
+import { vars } from './variables';
 export var types = {
   color: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.colors)), PropTypes.string]),
   space: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string, PropTypes.object]),
   dimension: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
-  side: PropTypes.oneOf(["all", "left", "right", "top", "bottom", "x", "y"]),
-  radius: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.radiuses)), PropTypes.string]),
+  side: PropTypes.oneOf(['all', 'left', 'right', 'top', 'bottom', 'x', 'y']),
+  radius: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.radii)), PropTypes.string]),
   shadow: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.shadows)), PropTypes.string]),
-  position: PropTypes.oneOf(["static", "relative", "fixed", "absolute", "sticky"]),
+  position: PropTypes.oneOf(['static', 'relative', 'fixed', 'absolute', 'sticky']),
   textSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.texts)), PropTypes.string, PropTypes.object]),
   iconSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.icons)), PropTypes.number, PropTypes.string]),
   weight: PropTypes.oneOf(Object.keys(vars.weights)),
-  textAlign: PropTypes.oneOf(["left", "center", "right"]),
-  overflow: PropTypes.oneOf(["visible", "hidden", "scroll", "auto"]),
-  fieldSize: PropTypes.oneOf(["s", "m"]),
+  textAlign: PropTypes.oneOf(['left', 'center', 'right']),
+  overflow: PropTypes.oneOf(['visible', 'hidden', 'scroll', 'auto']),
+  fieldSize: PropTypes.oneOf(['s', 'm']),
   columns: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-  autoFlow: PropTypes.oneOf(["column", "row"]),
-  gridItemsAlignments: PropTypes.oneOf(["start", "end", "center", "stretch"]),
-  gridContentPositions: PropTypes.oneOf(["start", "end", "center", "stretch", "space-around", "space-between", "space-evenly"]),
+  autoFlow: PropTypes.oneOf(['column', 'row']),
+  gridItemsAlignments: PropTypes.oneOf(['start', 'end', 'center', 'stretch']),
+  gridContentPositions: PropTypes.oneOf(['start', 'end', 'center', 'stretch', 'space-around', 'space-between', 'space-evenly']),
   icon: PropTypes.node
 };

package/es/utilities/helpers.js

@@ -8,8 +8,8 @@ import "core-js/modules/es.symbol.iterator.js";
 import "core-js/modules/es.array.iterator.js";
 import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
-import { grnPrefix } from "../variables";
-export var isBrowser = typeof window !== "undefined";
+import { grnPrefix } from '../variables';
+export var isBrowser = typeof window !== 'undefined';
 export var getCssVarCore = function getCssVarCore(type, value) {
   return "".concat(grnPrefix).concat(type, "-").concat(value);
 };
@@ -20,14 +20,14 @@ export var u = function u(amount) {
   return "calc(var(--grn-unit) * ".concat(amount, ")");
 };
 export var isNumber = function isNumber(value) {
-  return typeof value === "number";
+  return typeof value === 'number';
 };
 export var isString = function isString(value) {
-  return typeof value === "string";
+  return typeof value === 'string';
 };
 export var isArray = function isArray(value) {
   return Array.isArray(value);
 };
 export var isObject = function isObject(value) {
-  return _typeof(value) === "object";
+  return _typeof(value) === 'object';
 };

package/es/utilities/index.js

@@ -1,22 +1,21 @@
-export { getDimension } from "./responsive";
-export { getResponsiveDimension } from "./responsive";
-export { breakpoints } from "./responsive";
-export { getColor } from "./styles";
-export { getShadow } from "./styles";
-export { getTextSize } from "./responsive";
-export { getResponsiveTextSize } from "./responsive";
-export { getWeight } from "./styles";
-export { getRadius } from "./styles";
-export { getTransition } from "./styles";
-export { getResponsiveSpace } from "./responsive";
-export { getIconSize } from "./styles";
-export { getGridColumns } from "./styles";
-export { getBorder } from "./styles";
-export { isBrowser } from "./helpers";
-export { getCssVarCore } from "./helpers";
-export { getCssVar } from "./helpers";
-export { u } from "./helpers";
-export { isNumber } from "./helpers";
-export { isString } from "./helpers";
-export { isArray } from "./helpers";
-export { isObject } from "./helpers";
+export { getDimension } from './responsive';
+export { getResponsiveDimension } from './responsive';
+export { getColor } from './styles';
+export { getShadow } from './styles';
+export { getTextSize } from './responsive';
+export { getResponsiveTextSize } from './responsive';
+export { getWeight } from './styles';
+export { getRadius } from './styles';
+export { getTransition } from './styles';
+export { getResponsiveSpace } from './responsive';
+export { getIconSize } from './styles';
+export { getGridColumns } from './styles';
+export { getBorder } from './styles';
+export { isBrowser } from './helpers';
+export { getCssVarCore } from './helpers';
+export { getCssVar } from './helpers';
+export { u } from './helpers';
+export { isNumber } from './helpers';
+export { isString } from './helpers';
+export { isArray } from './helpers';
+export { isObject } from './helpers';

package/es/utilities/responsive.js

@@ -24,8 +24,8 @@ import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.regexp.exec.js";
-import { getCssVar, isNumber, isString, u, isObject } from ".";
-import { varNames, vars } from "../variables";
+import { getCssVar, isNumber, isString, u, isObject } from '.';
+import { vars, varInfo } from '../variables';
 export var getMediaCss = function getMediaCss(breakpoint, property, value) {
   var getValue = function getValue(val) {
     if (val === 0) return val;
@@ -33,28 +33,27 @@ export var getMediaCss = function getMediaCss(breakpoint, property, value) {
     if (isString(val)) return val;
   };
 
-  if (breakpoint === "default") {
+  if (breakpoint === 'default') {
     return "".concat(property, ": ").concat(getValue(value), ";");
   }
 
   return "\n    @media ".concat(breakpoint, " {\n      ").concat(property, ": ").concat(getValue(value), ";\n    }\n  ");
 };
-export var mapObjToMedia = function mapObjToMedia(property, obj, varName) {
-  var varGroupName = varNames[varName].group;
-  var varPrefix = varNames[varName].prefix;
+export var mapObjToMedia = function mapObjToMedia(property, obj, type) {
+  var varPrefix = varInfo[type].prefix;
   var declarations = Object.entries(obj).map(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
         breakpoint = _ref2[0],
         value = _ref2[1];
 
-    if (value in vars[varGroupName]) {
+    if (value in vars[type]) {
       return getMediaCss(breakpoint, property, getCssVar(varPrefix, value));
     }
 
     return getMediaCss(breakpoint, property, value);
   }); // reverse array to make sure max-widths correctly override
 
-  declarations.reverse().join("");
+  declarations.reverse().join('');
   return declarations;
 };
 export var getDimension = function getDimension(dimension) {
@@ -64,7 +63,7 @@ export var getDimension = function getDimension(dimension) {
 };
 export var getSpace = function getSpace(value) {
   if (value in vars.spaces) {
-    return getCssVar(varNames.space.prefix, value);
+    return getCssVar(varInfo.spaces.prefix, value);
   }
 
   if (value === 0) return value;
@@ -75,7 +74,7 @@ export var getResponsiveDimension = function getResponsiveDimension(property, di
   if (!dimension) return;
 
   if (isObject(dimension)) {
-    return mapObjToMedia(property, dimension, varNames.space.prefix);
+    return mapObjToMedia(property, dimension, varInfo.spaces.name);
   }
 
   return "".concat(property, ": ").concat(getDimension(dimension));
@@ -84,24 +83,24 @@ export var getResponsiveSpace = function getResponsiveSpace(property, space) {
   if (!space) return;
 
   if (isObject(space)) {
-    return mapObjToMedia(property, space, varNames.space.prefix);
+    return mapObjToMedia(property, space, varInfo.spaces.name);
   }
 
   return "".concat(property, ": ").concat(getSpace(space));
 };
 export var getTextSize = function getTextSize(size) {
   if (size in vars.texts) {
-    return getCssVar(varNames.text.prefix, size);
+    return getCssVar(varInfo.texts.prefix, size);
   }
 
   if (isString(size)) return size;
 };
 export var getResponsiveTextSize = function getResponsiveTextSize(size) {
   if (!size) return;
-  var property = "font-size";
+  var property = 'font-size';
 
   if (isObject(size)) {
-    return mapObjToMedia(property, size, varNames.text.prefix);
+    return mapObjToMedia(property, size, varInfo.texts.name);
   }
 
   return "".concat(property, ": ").concat(getTextSize(size));

package/es/utilities/styles.js

@@ -16,34 +16,34 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import { getCssVar, isNumber, isString, u, isArray } from ".";
-import { varNames, vars } from "../variables";
-import { getDimension } from "./responsive";
+import { getCssVar, isNumber, isString, u, isArray } from '.';
+import { vars, varInfo } from '../variables';
+import { getDimension } from './responsive';
 
-var allColors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, vars.colors.baseColors), vars.colors.greys), vars.colors.semanticColors), vars.colors.fades);
+var allColors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, vars.colors.bases), vars.colors.greys), vars.colors.semantics), vars.colors.fades);
 
 export var getColor = function getColor(color) {
   if (color in allColors) {
-    return getCssVar(varNames.color.prefix, color);
+    return getCssVar(varInfo.colors.prefix, color);
   }
 
   return color;
 };
 export var getShadow = function getShadow(shadow) {
   if (shadow in vars.shadows) {
-    return getCssVar(varNames.shadow.prefix, shadow);
+    return getCssVar(varInfo.shadows.prefix, shadow);
   }
 
   return shadow;
 };
 export var getWeight = function getWeight(weight) {
   if (weight in vars.weights) {
-    return getCssVar(varNames.weight.prefix, weight);
+    return getCssVar(varInfo.weights.prefix, weight);
   }
 };
 export var getRadius = function getRadius(radius) {
-  if (radius in vars.radiuses) {
-    return getCssVar(varNames.radius.prefix, radius);
+  if (radius in vars.radii) {
+    return getCssVar(varInfo.radii.prefix, radius);
   }
 
   if (radius === 0) return radius;
@@ -52,12 +52,12 @@ export var getRadius = function getRadius(radius) {
 };
 export var getTransition = function getTransition(transition) {
   if (transition in vars.transitions) {
-    return getCssVar(varNames.transition.prefix, transition);
+    return getCssVar(varInfo.transitions.prefix, transition);
   }
 };
 export var getIconSize = function getIconSize(size) {
   if (size in vars.icons) {
-    return getCssVar(varNames.icon.prefix, size);
+    return getCssVar(varInfo.icons.prefix, size);
   }
 
   return getDimension(size);
@@ -67,7 +67,7 @@ export var getGridColumns = function getGridColumns(columns) {
     if (isArray(columns)) {
       return columns.map(function (column) {
         return getDimension(column);
-      }).join(" ");
+      }).join(' ');
     }
 
     if (isString(columns)) return columns;
@@ -87,6 +87,6 @@ export var getBorder = function getBorder(borderSide, borderWidth, borderColor)
   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      border-width: ").concat(getDimension(borderWidth), ";\n    ");
+    }).join(';'), ";\n\n      border-color: ").concat(getColor(borderColor), ";\n      border-width: ").concat(getDimension(borderWidth), ";\n    ");
   }
 };