@flodesk/grain 11.22.6 → 11.23.1

package/es/utilities/style-config.js

@@ -1,26 +1,18 @@
-import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.string.includes.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.object.values.js";
 import { alignSelfs, autoFlows, axisAlignments, borderWidths, contentPositions, cursors, flexDirections, flexWraps, overflows, positions, sides, textAlignments, textDisplays, textTransforms } from '../types';
 import { vars } from '../variables';
 import { getDimension, getSpace, getTextSize, isSpaceVar } from './responsive';
 import { getColor, getRadius, getShadow, getTransition, getWeight, isColorVar, isRadiusVar, isShadowVar, isTrasitionVar } from './styles';
-var spaces = Object.keys(vars.spaces).concat(Object.keys(vars.spaceUtils));
-var colors = Object.keys(vars.colors).concat(Object.keys(vars.colorUtils));
-var shadows = Object.keys(vars.shadows);
-var radii = Object.keys(vars.radii);
-var transitions = Object.keys(vars.transitions).concat(Object.keys(vars.transitionUtils));
-var sizes = Object.keys(vars.texts);
-var weights = Object.keys(vars.weights);
+const spaces = Object.keys(vars.spaces).concat(Object.keys(vars.spaceUtils));
+const colors = Object.keys(vars.colors).concat(Object.keys(vars.colorUtils));
+const shadows = Object.keys(vars.shadows);
+const radii = Object.keys(vars.radii);
+const transitions = Object.keys(vars.transitions).concat(Object.keys(vars.transitionUtils));
+const sizes = Object.keys(vars.texts);
+const weights = Object.keys(vars.weights);
 
-var borderSideToStyle = function borderSideToStyle(side) {
+const borderSideToStyle = side => {
   if (side === 'all') return 'solid';
-  var borderConfig = {
+  const borderConfig = {
     top: ['top'],
     right: ['right'],
     bottom: ['bottom'],
@@ -28,13 +20,11 @@ var borderSideToStyle = function borderSideToStyle(side) {
     y: ['top', 'bottom'],
     x: ['right', 'left']
   };
-  var borderStyles = ['top', 'right', 'bottom', 'left'].map(function (s) {
-    return borderConfig[side].includes(s) ? 'solid' : 'none';
-  });
+  const borderStyles = ['top', 'right', 'bottom', 'left'].map(s => borderConfig[side].includes(s) ? 'solid' : 'none');
   return borderStyles.join(' ');
 };
 
-export var styleConfig = {
+export const styleConfig = {
   spaceProps: {
     props: [{
       propName: 'padding',
@@ -230,9 +220,7 @@ export var styleConfig = {
       property: 'position',
       short: 'pos'
     }],
-    variableChecker: function variableChecker(value) {
-      return positions.includes(value);
-    },
+    variableChecker: value => positions.includes(value),
     variables: positions
   },
   overflowProps: {
@@ -249,9 +237,7 @@ export var styleConfig = {
       property: 'overflow-y',
       short: 'of-y'
     }],
-    variableChecker: function variableChecker(value) {
-      return overflows.includes(value);
-    },
+    variableChecker: value => overflows.includes(value),
     variables: overflows
   },
   transitionProps: {
@@ -274,9 +260,7 @@ export var styleConfig = {
       property: 'cursor',
       short: 'cur'
     }],
-    variableChecker: function variableChecker(value) {
-      return cursors.includes(value);
-    },
+    variableChecker: value => cursors.includes(value),
     variables: cursors
   },
   aspectRatioProps: {
@@ -295,9 +279,7 @@ export var styleConfig = {
     isResponsive: true,
     variables: sizes,
     valueTransformer: getTextSize,
-    variableChecker: function variableChecker(value) {
-      return sizes.includes(value);
-    }
+    variableChecker: value => sizes.includes(value)
   },
   opacityProps: {
     props: [{
@@ -317,9 +299,7 @@ export var styleConfig = {
       short: 'als'
     }],
     variables: alignSelfs,
-    variableChecker: function variableChecker(value) {
-      return alignSelfs.includes(value);
-    },
+    variableChecker: value => alignSelfs.includes(value),
     isResponsive: true
   },
   borderColorProps: {
@@ -342,13 +322,9 @@ export var styleConfig = {
       property: 'border-width',
       short: 'bdw'
     }],
-    valueTransformer: function valueTransformer(borderWidth) {
-      return borderWidth;
-    },
+    valueTransformer: borderWidth => borderWidth,
     variables: borderWidths,
-    variableChecker: function variableChecker(value) {
-      return borderWidths.includes(value);
-    }
+    variableChecker: value => borderWidths.includes(value)
   },
   borderSideProps: {
     props: [{
@@ -358,9 +334,7 @@ export var styleConfig = {
     }],
     valueTransformer: borderSideToStyle,
     variables: sides,
-    variableChecker: function variableChecker(value) {
-      return sides.includes(value);
-    }
+    variableChecker: value => sides.includes(value)
   },
   alignProps: {
     props: [{
@@ -369,9 +343,7 @@ export var styleConfig = {
       short: 'al'
     }],
     variables: textAlignments,
-    variableChecker: function variableChecker(value) {
-      return textAlignments.includes(value);
-    },
+    variableChecker: value => textAlignments.includes(value),
     isResponsive: true
   },
   weightProps: {
@@ -381,9 +353,7 @@ export var styleConfig = {
       short: 'w'
     }],
     variables: weights,
-    variableChecker: function variableChecker(value) {
-      return weights.includes(value);
-    },
+    variableChecker: value => weights.includes(value),
     valueTransformer: getWeight
   },
   textDisplayProps: {
@@ -394,9 +364,7 @@ export var styleConfig = {
 
     }],
     variables: textDisplays,
-    variableChecker: function variableChecker(value) {
-      return textDisplays.includes(value);
-    }
+    variableChecker: value => textDisplays.includes(value)
   },
   letterSpacingProps: {
     props: [{
@@ -412,9 +380,7 @@ export var styleConfig = {
       short: 'tt'
     }],
     variables: textTransforms,
-    variableChecker: function variableChecker(value) {
-      return textTransforms.includes(value);
-    }
+    variableChecker: value => textTransforms.includes(value)
   },
   autoFlowProps: {
     props: [{
@@ -423,9 +389,7 @@ export var styleConfig = {
       short: 'af'
     }],
     variables: autoFlows,
-    variableChecker: function variableChecker(value) {
-      return autoFlows.includes(value);
-    },
+    variableChecker: value => autoFlows.includes(value),
     isResponsive: true
   },
   gridTemplateProps: {
@@ -451,9 +415,7 @@ export var styleConfig = {
       short: 'ji'
     }],
     variables: axisAlignments,
-    variableChecker: function variableChecker(value) {
-      return axisAlignments.includes(value);
-    },
+    variableChecker: value => axisAlignments.includes(value),
     isResponsive: true
   },
   contentPositionProps: {
@@ -467,9 +429,7 @@ export var styleConfig = {
       short: 'jc'
     }],
     variables: contentPositions,
-    variableChecker: function variableChecker(value) {
-      return contentPositions.includes(value);
-    },
+    variableChecker: value => contentPositions.includes(value),
     isResponsive: true
   },
   flexDirectionProps: {
@@ -479,9 +439,7 @@ export var styleConfig = {
       short: 'fd'
     }],
     variables: flexDirections,
-    variableChecker: function variableChecker(value) {
-      return flexDirections.includes(value);
-    }
+    variableChecker: value => flexDirections.includes(value)
   },
   flexWrapProps: {
     props: [{
@@ -490,18 +448,16 @@ export var styleConfig = {
       short: 'fw'
     }],
     variables: flexWraps,
-    variableChecker: function variableChecker(value) {
-      return flexWraps.includes(value);
-    },
+    variableChecker: value => flexWraps.includes(value),
     isResponsive: true
   }
 };
-var propNameToShortMap = {};
-Object.values(styleConfig).forEach(function (config) {
-  config.props.forEach(function (prop) {
+let propNameToShortMap = {};
+Object.values(styleConfig).forEach(config => {
+  config.props.forEach(prop => {
     propNameToShortMap[prop.propName] = prop.short;
   });
 });
-export var propNameToShort = function propNameToShort(propName) {
+export const propNameToShort = propName => {
   return propNameToShortMap[propName] || null;
 };

package/es/utilities/styles.js

@@ -1,12 +1,8 @@
-import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.array.map.js";
 import { getCssVar, isNumber, isString, u } from '.';
 import { vars, varInfo } from '../variables';
 import { getDimension } from './responsive';
-export var isColorVar = function isColorVar(color) {
-  return color in vars.colorUtils || color in vars.colors;
-};
-export var getColor = function getColor(color) {
+export const isColorVar = color => color in vars.colorUtils || color in vars.colors;
+export const getColor = color => {
   if (color in vars.colorUtils) {
     return getCssVar(varInfo.colorUtils.name, color);
   }
@@ -17,25 +13,21 @@ export var getColor = function getColor(color) {
 
   return color;
 };
-export var isShadowVar = function isShadowVar(shadow) {
-  return shadow in vars.shadows;
-};
-export var getShadow = function getShadow(shadow) {
+export const isShadowVar = shadow => shadow in vars.shadows;
+export const getShadow = shadow => {
   if (isShadowVar(shadow)) {
     return getCssVar(varInfo.shadows.name, shadow);
   }
 
   return shadow;
 };
-export var getWeight = function getWeight(weight) {
+export const getWeight = weight => {
   if (weight in vars.weights) {
     return getCssVar(varInfo.weights.name, weight);
   }
 };
-export var isRadiusVar = function isRadiusVar(radius) {
-  return radius in vars.radii;
-};
-export var getRadius = function getRadius(radius) {
+export const isRadiusVar = radius => radius in vars.radii;
+export const getRadius = radius => {
   if (isRadiusVar(radius)) {
     return getCssVar(varInfo.radii.name, radius);
   }
@@ -44,10 +36,8 @@ export var getRadius = function getRadius(radius) {
   if (isString(radius)) return radius;
   if (isNumber(radius)) return u(radius);
 };
-export var isTrasitionVar = function isTrasitionVar(transition) {
-  return transition in vars.transitionUtils || transition in vars.transitions;
-};
-export var getTransition = function getTransition(transition) {
+export const isTrasitionVar = transition => transition in vars.transitionUtils || transition in vars.transitions;
+export const getTransition = transition => {
   if (transition in vars.transitionUtils) {
     return getCssVar(varInfo.transitionUtils.name, transition);
   }
@@ -58,17 +48,17 @@ export var getTransition = function getTransition(transition) {
 
   return transition;
 };
-export var getIconSize = function getIconSize(size) {
+export const getIconSize = size => {
   if (size in vars.icons) {
     return getCssVar(varInfo.icons.name, size);
   }
 
   return getDimension(size);
 };
-export 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 sidesObj = {
+export const getBorder = function (borderSide) {
+  let borderWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1px';
+  let borderColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'border';
+  const sidesObj = {
     all: [""],
     x: ["right", "left"],
     y: ["top", "bottom"],
@@ -77,15 +67,13 @@ export var getBorder = function getBorder(borderSide) {
     left: ["left"],
     right: ["right"]
   };
-  var value = "".concat(getDimension(borderWidth), " solid ").concat(getColor(borderColor));
+  const value = "".concat(getDimension(borderWidth), " solid ").concat(getColor(borderColor));
 
-  var getSide = function getSide(side) {
+  const getSide = side => {
     return side ? "border-".concat(side) : "border";
   };
 
   if (borderSide in sidesObj) {
-    return sidesObj[borderSide].map(function (side) {
-      return "".concat(getSide(side), ": ").concat(value);
-    }).join(';');
+    return sidesObj[borderSide].map(side => "".concat(getSide(side), ": ").concat(value)).join(';');
   }
 };

package/es/variables/breakpoints.js

@@ -1,4 +1,4 @@
-export var breakpoints = {
+export const breakpoints = {
   tablet: 1169,
   mobile: 767
 };

package/es/variables/colors.js

@@ -1,4 +1,4 @@
-export var colors = {
+export const colors = {
   lightFades: {
     lightFade10: 'lightFade10',
     lightFade9: 'lightFade9',

package/es/variables/vars.js

@@ -1,13 +1,3 @@
-import "core-js/modules/es.object.define-property.js";
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.object.get-own-property-descriptor.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.object.get-own-property-descriptors.js";
-import "core-js/modules/es.object.define-properties.js";
-
 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) { _defineProperty(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; }
@@ -15,8 +5,8 @@ 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 { colors } from './colors';
-export var grnPrefix = '--grn-';
-export var vars = {
+export const grnPrefix = '--grn-';
+export const vars = {
   texts: {
     s: 's',
     m: 'm',
@@ -84,7 +74,7 @@ export var vars = {
     active: 'active'
   }
 };
-export var varInfo = {
+export const varInfo = {
   texts: {
     name: 'texts',
     prefix: 'text'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "11.22.6",
+  "version": "11.23.1",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",
@@ -43,7 +43,7 @@
     "@emotion/babel-preset-css-prop": "^11.10.0",
     "@mdx-js/loader": "^2.1.1",
     "@mdx-js/react": "^2.2.1",
-    "@next/mdx": "^12.1.6",
+    "@next/mdx": "^12.3.4",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/gitlab": "^9.3.1",
     "@semantic-release/npm": "^9.0.1",
@@ -51,15 +51,15 @@
     "cross-env": "^7.0.3",
     "del-cli": "^4.0.1",
     "eslint": "^8.16.0",
-    "eslint-config-next": "12.1.6",
+    "eslint-config-next": "^13.5.6",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-mdx": "^2.0.2",
     "eslint-plugin-prettier": "^4.2.1",
-    "next": "12.1.6",
+    "next": "^13.5.6",
     "prettier": "^2.8.8",
     "react-docgen": "^6.0.0-alpha.3",
-    "react-live": "^3.1.0",
+    "react-live": "^4.1.7",
     "semantic-release": "^19.0.2",
     "vercel": "^25.1.0"
   }

package/es/styles/component-variables.js

@@ -1,2 +0,0 @@
-var componentVariables = "\n  :root {\n    --grn-strokeSize: 1px;\n    --grn-dividerStrokeSize: 1px;\n    --grn-activeBorderColor: var(--grn-color-shade9);\n    --grn-textBoxHeight: 40px;\n    --grn-clearButtonHeight: 36px;\n    --grn-clearButtonDangerBackgroundHover: hsl(var(--redHS) var(--redL) / 12%);\n    --grn-clearButtonDangerBackgroundActive: hsl(var(--redHS) var(--redL) / 19%);\n    --grn-dangerIconColor: hsl(var(--redHS) var(--redL) / 70%);\n  }\n\n  [data-experiment-compact-textbox=\"true\"] {\n    --grn-textBoxHeight: 36px;\n  }\n";
-export default componentVariables;