@flodesk/grain 8.13.3 → 8.14.0

package/es/components/box.js

@@ -2,7 +2,7 @@ import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.object.assign.js";
-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", "overflowX", "overflowY", "aspectRatio", "zIndex", "tag", "opacity", "order", "alignSelf", "flex"];
+var _excluded = ["children", "color", "colorHover", "backgroundColor", "backgroundColorHover", "borderColor", "borderColorHover", "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", "shadowHover", "overflow", "overflowX", "overflowY", "aspectRatio", "zIndex", "tag", "opacity", "opacityHover", "order", "alignSelf", "flex", "transition", "transitionHover", "cursor"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -10,7 +10,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import { getBorder, getColor, getRadius, getResponsiveSpace, getShadow, getResponsiveDimension, getResponsiveOneOf } from '../utilities';
+import { getBorder, getColor, getRadius, getResponsiveSpace, getShadow, getResponsiveDimension, getResponsiveOneOf, getTransition } from '../utilities';
 import React, { forwardRef } from 'react';
 import { css } from '@emotion/react';
 import { types } from '../types';
@@ -19,9 +19,12 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
       color = _ref.color,
+      colorHover = _ref.colorHover,
       backgroundColor = _ref.backgroundColor,
+      backgroundColorHover = _ref.backgroundColorHover,
       _ref$borderColor = _ref.borderColor,
       borderColor = _ref$borderColor === void 0 ? 'border' : _ref$borderColor,
+      borderColorHover = _ref.borderColorHover,
       _ref$borderWidth = _ref.borderWidth,
       borderWidth = _ref$borderWidth === void 0 ? '1px' : _ref$borderWidth,
       borderSide = _ref.borderSide,
@@ -52,6 +55,7 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
       left = _ref.left,
       right = _ref.right,
       shadow = _ref.shadow,
+      shadowHover = _ref.shadowHover,
       overflow = _ref.overflow,
       overflowX = _ref.overflowX,
       overflowY = _ref.overflowY,
@@ -60,23 +64,30 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
       _ref$tag = _ref.tag,
       tag = _ref$tag === void 0 ? 'div' : _ref$tag,
       opacity = _ref.opacity,
+      opacityHover = _ref.opacityHover,
       order = _ref.order,
       alignSelf = _ref.alignSelf,
       flex = _ref.flex,
+      transition = _ref.transition,
+      transitionHover = _ref.transitionHover,
+      cursor = _ref.cursor,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var Tag = tag;
   return ___EmotionJSX(Tag, _extends({
     ref: ref,
-    css: /*#__PURE__*/css(getBorder(borderSide, borderWidth, borderColor), ";", getResponsiveSpace('padding', padding), ";", getResponsiveSpace('padding-top', paddingTop || paddingY), ";", getResponsiveSpace('padding-bottom', paddingBottom || paddingY), ";", getResponsiveSpace('padding-left', paddingLeft || paddingX), ";", getResponsiveSpace('padding-right', paddingRight || paddingX), ";", getResponsiveSpace('margin', margin), ";", getResponsiveSpace('margin-top', marginTop || marginY), ";", getResponsiveSpace('margin-bottom', marginBottom || marginY), ";", getResponsiveSpace('margin-left', marginLeft || marginX), ";", getResponsiveSpace('margin-right', marginRight || marginX), ";", getResponsiveSpace('top', top), ";", getResponsiveSpace('bottom', bottom), ";", getResponsiveSpace('left', left), ";", getResponsiveSpace('right', right), ";", getResponsiveDimension('width', width), ";", getResponsiveDimension('min-width', minWidth), ";", getResponsiveDimension('max-width', maxWidth), ";", getResponsiveDimension('height', height), ";", getResponsiveDimension('min-height', minHeight), ";", getResponsiveDimension('max-height', maxHeight), ";", getResponsiveOneOf('order', order), ";", getResponsiveOneOf('flex', flex), ";", getResponsiveOneOf('align-self', alignSelf), ";", overflow && "overflow: ".concat(overflow), ";", overflowX && "overflow-x: ".concat(overflowX), ";", overflowY && "overflow-y: ".concat(overflowY), ";color:", getColor(color), ";background-color:", getColor(backgroundColor), ";position:", position, ";border-radius:", getRadius(radius), ";box-shadow:", getShadow(shadow), ";aspect-ratio:", aspectRatio, ";z-index:", zIndex, ";", Boolean(opacity) && "opacity: ".concat(opacity), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Box;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2JveC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUVnQiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9ib3guanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgZ2V0Qm9yZGVyLFxuICBnZXRDb2xvcixcbiAgZ2V0UmFkaXVzLFxuICBnZXRSZXNwb25zaXZlU3BhY2UsXG4gIGdldFNoYWRvdyxcbiAgZ2V0UmVzcG9uc2l2ZURpbWVuc2lvbixcbiAgZ2V0UmVzcG9uc2l2ZU9uZU9mLFxufSBmcm9tICcuLi91dGlsaXRpZXMnO1xuXG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcblxuZXhwb3J0IGNvbnN0IEJveCA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBjaGlsZHJlbixcbiAgICAgIGNvbG9yLFxuICAgICAgYmFja2dyb3VuZENvbG9yLFxuICAgICAgYm9yZGVyQ29sb3IgPSAnYm9yZGVyJyxcbiAgICAgIGJvcmRlcldpZHRoID0gJzFweCcsXG4gICAgICBib3JkZXJTaWRlLFxuICAgICAgd2lkdGgsXG4gICAgICBtaW5XaWR0aCxcbiAgICAgIG1heFdpZHRoLFxuICAgICAgaGVpZ2h0LFxuICAgICAgbWluSGVpZ2h0LFxuICAgICAgbWF4SGVpZ2h0LFxuICAgICAgcmFkaXVzLFxuICAgICAgcGFkZGluZyxcbiAgICAgIHBhZGRpbmdUb3AsXG4gICAgICBwYWRkaW5nQm90dG9tLFxuICAgICAgcGFkZGluZ0xlZnQsXG4gICAgICBwYWRkaW5nUmlnaHQsXG4gICAgICBwYWRkaW5nWCxcbiAgICAgIHBhZGRpbmdZLFxuICAgICAgbWFyZ2luLFxuICAgICAgbWFyZ2luVG9wLFxuICAgICAgbWFyZ2luQm90dG9tLFxuICAgICAgbWFyZ2luTGVmdCxcbiAgICAgIG1hcmdpblJpZ2h0LFxuICAgICAgbWFyZ2luWCxcbiAgICAgIG1hcmdpblksXG4gICAgICBwb3NpdGlvbixcbiAgICAgIHRvcCxcbiAgICAgIGJvdHRvbSxcbiAgICAgIGxlZnQsXG4gICAgICByaWdodCxcbiAgICAgIHNoYWRvdyxcbiAgICAgIG92ZXJmbG93LFxuICAgICAgb3ZlcmZsb3dYLFxuICAgICAgb3ZlcmZsb3dZLFxuICAgICAgYXNwZWN0UmF0aW8sXG4gICAgICB6SW5kZXgsXG4gICAgICB0YWcgPSAnZGl2JyxcbiAgICAgIG9wYWNpdHksXG4gICAgICBvcmRlcixcbiAgICAgIGFsaWduU2VsZixcbiAgICAgIGZsZXgsXG4gICAgICAuLi5wcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IHtcbiAgICBjb25zdCBUYWcgPSB0YWc7XG4gICAgcmV0dXJuIChcbiAgICAgIDxUYWdcbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICR7Z2V0Qm9yZGVyKGJvcmRlclNpZGUsIGJvcmRlcldpZHRoLCBib3JkZXJDb2xvcil9O1xuXG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ3BhZGRpbmcnLCBwYWRkaW5nKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ3BhZGRpbmctdG9wJywgcGFkZGluZ1RvcCB8fCBwYWRkaW5nWSl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdwYWRkaW5nLWJvdHRvbScsIHBhZGRpbmdCb3R0b20gfHwgcGFkZGluZ1kpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgncGFkZGluZy1sZWZ0JywgcGFkZGluZ0xlZnQgfHwgcGFkZGluZ1gpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgncGFkZGluZy1yaWdodCcsIHBhZGRpbmdSaWdodCB8fCBwYWRkaW5nWCl9O1xuXG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ21hcmdpbicsIG1hcmdpbil9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdtYXJnaW4tdG9wJywgbWFyZ2luVG9wIHx8IG1hcmdpblkpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgnbWFyZ2luLWJvdHRvbScsIG1hcmdpbkJvdHRvbSB8fCBtYXJnaW5ZKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ21hcmdpbi1sZWZ0JywgbWFyZ2luTGVmdCB8fCBtYXJnaW5YKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ21hcmdpbi1yaWdodCcsIG1hcmdpblJpZ2h0IHx8IG1hcmdpblgpfTtcblxuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCd0b3AnLCB0b3ApfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgnYm90dG9tJywgYm90dG9tKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ2xlZnQnLCBsZWZ0KX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ3JpZ2h0JywgcmlnaHQpfTtcblxuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZURpbWVuc2lvbignd2lkdGgnLCB3aWR0aCl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZURpbWVuc2lvbignbWluLXdpZHRoJywgbWluV2lkdGgpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ21heC13aWR0aCcsIG1heFdpZHRoKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlRGltZW5zaW9uKCdoZWlnaHQnLCBoZWlnaHQpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ21pbi1oZWlnaHQnLCBtaW5IZWlnaHQpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ21heC1oZWlnaHQnLCBtYXhIZWlnaHQpfTtcblxuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdvcmRlcicsIG9yZGVyKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlT25lT2YoJ2ZsZXgnLCBmbGV4KX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlT25lT2YoJ2FsaWduLXNlbGYnLCBhbGlnblNlbGYpfTtcblxuICAgICAgICAgICR7b3ZlcmZsb3cgJiYgYG92ZXJmbG93OiAke292ZXJmbG93fWB9O1xuICAgICAgICAgICR7b3ZlcmZsb3dYICYmIGBvdmVyZmxvdy14OiAke292ZXJmbG93WH1gfTtcbiAgICAgICAgICAke292ZXJmbG93WSAmJiBgb3ZlcmZsb3cteTogJHtvdmVyZmxvd1l9YH07XG5cbiAgICAgICAgICBjb2xvcjogJHtnZXRDb2xvcihjb2xvcil9O1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0Q29sb3IoYmFja2dyb3VuZENvbG9yKX07XG4gICAgICAgICAgcG9zaXRpb246ICR7cG9zaXRpb259O1xuICAgICAgICAgIGJvcmRlci1yYWRpdXM6ICR7Z2V0UmFkaXVzKHJhZGl1cyl9O1xuICAgICAgICAgIGJveC1zaGFkb3c6ICR7Z2V0U2hhZG93KHNoYWRvdyl9O1xuICAgICAgICAgIGFzcGVjdC1yYXRpbzogJHthc3BlY3RSYXRpb307XG4gICAgICAgICAgei1pbmRleDogJHt6SW5kZXh9O1xuICAgICAgICAgICR7Qm9vbGVhbihvcGFjaXR5KSAmJiBgb3BhY2l0eTogJHtvcGFjaXR5fWB9O1xuICAgICAgICBgfVxuICAgICAgICB7Li4ucHJvcHN9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvVGFnPlxuICAgICk7XG4gIH0sXG4pO1xuXG5Cb3gucHJvcFR5cGVzID0ge1xuICBjb2xvcjogdHlwZXMuY29sb3IsXG4gIGJhY2tncm91bmRDb2xvcjogdHlwZXMuY29sb3IsXG4gIGJvcmRlclNpZGU6IHR5cGVzLnNpZGUsXG4gIGJvcmRlcldpZHRoOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMubnVtYmVyLCBQcm9wVHlwZXMuc3RyaW5nXSksXG4gIGJvcmRlckNvbG9yOiB0eXBlcy5jb2xvcixcbiAgd2lkdGg6IHR5cGVzLnJlc3BvbnNpdmVEaW1lbnNpb24sXG4gIG1pbldpZHRoOiB0eXBlcy5yZXNwb25zaXZlRGltZW5zaW9uLFxuICBtYXhXaWR0aDogdHlwZXMucmVzcG9uc2l2ZURpbWVuc2lvbixcbiAgaGVpZ2h0OiB0eXBlcy5yZXNwb25zaXZlRGltZW5zaW9uLFxuICBtaW5IZWlnaHQ6IHR5cGVzLnJlc3BvbnNpdmVEaW1lbnNpb24sXG4gIG1heEhlaWdodDogdHlwZXMucmVzcG9uc2l2ZURpbWVuc2lvbixcbiAgcmFkaXVzOiB0eXBlcy5yYWRpdXMsXG4gIHNoYWRvdzogdHlwZXMuc2hhZG93LFxuICBwYWRkaW5nOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIHBhZGRpbmdUb3A6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcGFkZGluZ0JvdHRvbTogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBwYWRkaW5nTGVmdDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBwYWRkaW5nUmlnaHQ6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcGFkZGluZ1g6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcGFkZGluZ1k6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgbWFyZ2luOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIG1hcmdpblRvcDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBtYXJnaW5Cb3R0b206IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgbWFyZ2luTGVmdDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBtYXJnaW5SaWdodDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBtYXJnaW5YOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIG1hcmdpblk6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcG9zaXRpb246IHR5cGVzLnBvc2l0aW9uLFxuICB0b3A6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgYm90dG9tOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIGxlZnQ6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcmlnaHQ6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgb3ZlcmZsb3c6IHR5cGVzLm92ZXJmbG93LFxuICBvdmVyZmxvd1g6IHR5cGVzLm92ZXJmbG93LFxuICBvdmVyZmxvd1k6IHR5cGVzLm92ZXJmbG93LFxuICBhc3BlY3RSYXRpbzogUHJvcFR5cGVzLnN0cmluZyxcbiAgekluZGV4OiB0eXBlcy56SW5kZXgsXG4gIHRhZzogUHJvcFR5cGVzLnN0cmluZyxcbiAgb3BhY2l0eTogUHJvcFR5cGVzLnN0cmluZyxcbiAgb3JkZXI6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5vYmplY3RdKSxcbiAgYWxpZ25TZWxmOiB0eXBlcy5hbGlnblNlbGYsXG4gIGZsZXg6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5vYmplY3RdKSxcbn07XG4iXX0= */")
+    css: /*#__PURE__*/css(getBorder(borderSide, borderWidth, borderColor), ";", getResponsiveSpace('padding', padding), ";", getResponsiveSpace('padding-top', paddingTop || paddingY), ";", getResponsiveSpace('padding-bottom', paddingBottom || paddingY), ";", getResponsiveSpace('padding-left', paddingLeft || paddingX), ";", getResponsiveSpace('padding-right', paddingRight || paddingX), ";", getResponsiveSpace('margin', margin), ";", getResponsiveSpace('margin-top', marginTop || marginY), ";", getResponsiveSpace('margin-bottom', marginBottom || marginY), ";", getResponsiveSpace('margin-left', marginLeft || marginX), ";", getResponsiveSpace('margin-right', marginRight || marginX), ";", getResponsiveSpace('top', top), ";", getResponsiveSpace('bottom', bottom), ";", getResponsiveSpace('left', left), ";", getResponsiveSpace('right', right), ";", getResponsiveDimension('width', width), ";", getResponsiveDimension('min-width', minWidth), ";", getResponsiveDimension('max-width', maxWidth), ";", getResponsiveDimension('height', height), ";", getResponsiveDimension('min-height', minHeight), ";", getResponsiveDimension('max-height', maxHeight), ";", getResponsiveOneOf('order', order), ";", getResponsiveOneOf('flex', flex), ";", getResponsiveOneOf('align-self', alignSelf), ";", overflow && "overflow: ".concat(overflow), ";", overflowX && "overflow-x: ".concat(overflowX), ";", overflowY && "overflow-y: ".concat(overflowY), ";color:", getColor(color), ";background-color:", getColor(backgroundColor), ";position:", position, ";border-radius:", getRadius(radius), ";box-shadow:", getShadow(shadow), ";aspect-ratio:", aspectRatio, ";z-index:", zIndex, ";", Boolean(opacity) && "opacity: ".concat(opacity), ";transition:", getTransition(transition), ";cursor:", cursor, ";&:hover{color:", getColor(colorHover), ";background-color:", getColor(backgroundColorHover), ";box-shadow:", getShadow(shadowHover), ";transition:", getTransition(transitionHover), ";", Boolean(opacityHover) && "opacity: ".concat(opacityHover), ";", getBorder(borderSide, borderWidth, borderColorHover), ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:Box;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2JveC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEVnQiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9ib3guanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgZ2V0Qm9yZGVyLFxuICBnZXRDb2xvcixcbiAgZ2V0UmFkaXVzLFxuICBnZXRSZXNwb25zaXZlU3BhY2UsXG4gIGdldFNoYWRvdyxcbiAgZ2V0UmVzcG9uc2l2ZURpbWVuc2lvbixcbiAgZ2V0UmVzcG9uc2l2ZU9uZU9mLFxuICBnZXRUcmFuc2l0aW9uLFxufSBmcm9tICcuLi91dGlsaXRpZXMnO1xuXG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcblxuZXhwb3J0IGNvbnN0IEJveCA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBjaGlsZHJlbixcbiAgICAgIGNvbG9yLFxuICAgICAgY29sb3JIb3ZlcixcbiAgICAgIGJhY2tncm91bmRDb2xvcixcbiAgICAgIGJhY2tncm91bmRDb2xvckhvdmVyLFxuICAgICAgYm9yZGVyQ29sb3IgPSAnYm9yZGVyJyxcbiAgICAgIGJvcmRlckNvbG9ySG92ZXIsXG4gICAgICBib3JkZXJXaWR0aCA9ICcxcHgnLFxuICAgICAgYm9yZGVyU2lkZSxcbiAgICAgIHdpZHRoLFxuICAgICAgbWluV2lkdGgsXG4gICAgICBtYXhXaWR0aCxcbiAgICAgIGhlaWdodCxcbiAgICAgIG1pbkhlaWdodCxcbiAgICAgIG1heEhlaWdodCxcbiAgICAgIHJhZGl1cyxcbiAgICAgIHBhZGRpbmcsXG4gICAgICBwYWRkaW5nVG9wLFxuICAgICAgcGFkZGluZ0JvdHRvbSxcbiAgICAgIHBhZGRpbmdMZWZ0LFxuICAgICAgcGFkZGluZ1JpZ2h0LFxuICAgICAgcGFkZGluZ1gsXG4gICAgICBwYWRkaW5nWSxcbiAgICAgIG1hcmdpbixcbiAgICAgIG1hcmdpblRvcCxcbiAgICAgIG1hcmdpbkJvdHRvbSxcbiAgICAgIG1hcmdpbkxlZnQsXG4gICAgICBtYXJnaW5SaWdodCxcbiAgICAgIG1hcmdpblgsXG4gICAgICBtYXJnaW5ZLFxuICAgICAgcG9zaXRpb24sXG4gICAgICB0b3AsXG4gICAgICBib3R0b20sXG4gICAgICBsZWZ0LFxuICAgICAgcmlnaHQsXG4gICAgICBzaGFkb3csXG4gICAgICBzaGFkb3dIb3ZlcixcbiAgICAgIG92ZXJmbG93LFxuICAgICAgb3ZlcmZsb3dYLFxuICAgICAgb3ZlcmZsb3dZLFxuICAgICAgYXNwZWN0UmF0aW8sXG4gICAgICB6SW5kZXgsXG4gICAgICB0YWcgPSAnZGl2JyxcbiAgICAgIG9wYWNpdHksXG4gICAgICBvcGFjaXR5SG92ZXIsXG4gICAgICBvcmRlcixcbiAgICAgIGFsaWduU2VsZixcbiAgICAgIGZsZXgsXG4gICAgICB0cmFuc2l0aW9uLFxuICAgICAgdHJhbnNpdGlvbkhvdmVyLFxuICAgICAgY3Vyc29yLFxuICAgICAgLi4ucHJvcHNcbiAgICB9LFxuICAgIHJlZixcbiAgKSA9PiB7XG4gICAgY29uc3QgVGFnID0gdGFnO1xuICAgIHJldHVybiAoXG4gICAgICA8VGFnXG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAke2dldEJvcmRlcihib3JkZXJTaWRlLCBib3JkZXJXaWR0aCwgYm9yZGVyQ29sb3IpfTtcblxuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdwYWRkaW5nJywgcGFkZGluZyl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdwYWRkaW5nLXRvcCcsIHBhZGRpbmdUb3AgfHwgcGFkZGluZ1kpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgncGFkZGluZy1ib3R0b20nLCBwYWRkaW5nQm90dG9tIHx8IHBhZGRpbmdZKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ3BhZGRpbmctbGVmdCcsIHBhZGRpbmdMZWZ0IHx8IHBhZGRpbmdYKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ3BhZGRpbmctcmlnaHQnLCBwYWRkaW5nUmlnaHQgfHwgcGFkZGluZ1gpfTtcblxuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdtYXJnaW4nLCBtYXJnaW4pfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgnbWFyZ2luLXRvcCcsIG1hcmdpblRvcCB8fCBtYXJnaW5ZKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ21hcmdpbi1ib3R0b20nLCBtYXJnaW5Cb3R0b20gfHwgbWFyZ2luWSl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdtYXJnaW4tbGVmdCcsIG1hcmdpbkxlZnQgfHwgbWFyZ2luWCl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdtYXJnaW4tcmlnaHQnLCBtYXJnaW5SaWdodCB8fCBtYXJnaW5YKX07XG5cbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgndG9wJywgdG9wKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ2JvdHRvbScsIGJvdHRvbSl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdsZWZ0JywgbGVmdCl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdyaWdodCcsIHJpZ2h0KX07XG5cbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ3dpZHRoJywgd2lkdGgpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ21pbi13aWR0aCcsIG1pbldpZHRoKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlRGltZW5zaW9uKCdtYXgtd2lkdGgnLCBtYXhXaWR0aCl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZURpbWVuc2lvbignaGVpZ2h0JywgaGVpZ2h0KX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlRGltZW5zaW9uKCdtaW4taGVpZ2h0JywgbWluSGVpZ2h0KX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlRGltZW5zaW9uKCdtYXgtaGVpZ2h0JywgbWF4SGVpZ2h0KX07XG5cbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVPbmVPZignb3JkZXInLCBvcmRlcil9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdmbGV4JywgZmxleCl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdhbGlnbi1zZWxmJywgYWxpZ25TZWxmKX07XG5cbiAgICAgICAgICAke292ZXJmbG93ICYmIGBvdmVyZmxvdzogJHtvdmVyZmxvd31gfTtcbiAgICAgICAgICAke292ZXJmbG93WCAmJiBgb3ZlcmZsb3cteDogJHtvdmVyZmxvd1h9YH07XG4gICAgICAgICAgJHtvdmVyZmxvd1kgJiYgYG92ZXJmbG93LXk6ICR7b3ZlcmZsb3dZfWB9O1xuXG4gICAgICAgICAgY29sb3I6ICR7Z2V0Q29sb3IoY29sb3IpfTtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yKGJhY2tncm91bmRDb2xvcil9O1xuICAgICAgICAgIHBvc2l0aW9uOiAke3Bvc2l0aW9ufTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cyhyYWRpdXMpfTtcbiAgICAgICAgICBib3gtc2hhZG93OiAke2dldFNoYWRvdyhzaGFkb3cpfTtcbiAgICAgICAgICBhc3BlY3QtcmF0aW86ICR7YXNwZWN0UmF0aW99O1xuICAgICAgICAgIHotaW5kZXg6ICR7ekluZGV4fTtcbiAgICAgICAgICAke0Jvb2xlYW4ob3BhY2l0eSkgJiYgYG9wYWNpdHk6ICR7b3BhY2l0eX1gfTtcbiAgICAgICAgICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24odHJhbnNpdGlvbil9O1xuICAgICAgICAgIGN1cnNvcjogJHtjdXJzb3J9O1xuXG4gICAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICBjb2xvcjogJHtnZXRDb2xvcihjb2xvckhvdmVyKX07XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yKGJhY2tncm91bmRDb2xvckhvdmVyKX07XG4gICAgICAgICAgICBib3gtc2hhZG93OiAke2dldFNoYWRvdyhzaGFkb3dIb3Zlcil9O1xuICAgICAgICAgICAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKHRyYW5zaXRpb25Ib3Zlcil9O1xuICAgICAgICAgICAgJHtCb29sZWFuKG9wYWNpdHlIb3ZlcikgJiYgYG9wYWNpdHk6ICR7b3BhY2l0eUhvdmVyfWB9O1xuICAgICAgICAgICAgJHtnZXRCb3JkZXIoYm9yZGVyU2lkZSwgYm9yZGVyV2lkdGgsIGJvcmRlckNvbG9ySG92ZXIpfTtcbiAgICAgICAgICB9XG4gICAgICAgIGB9XG4gICAgICAgIHsuLi5wcm9wc31cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9UYWc+XG4gICAgKTtcbiAgfSxcbik7XG5cbkJveC5wcm9wVHlwZXMgPSB7XG4gIGNvbG9yOiB0eXBlcy5jb2xvcixcbiAgY29sb3JIb3ZlcjogdHlwZXMuY29sb3IsXG4gIGJhY2tncm91bmRDb2xvcjogdHlwZXMuY29sb3IsXG4gIGJhY2tncm91bmRDb2xvckhvdmVyOiB0eXBlcy5jb2xvcixcbiAgYm9yZGVyU2lkZTogdHlwZXMuc2lkZSxcbiAgYm9yZGVyV2lkdGg6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5udW1iZXIsIFByb3BUeXBlcy5zdHJpbmddKSxcbiAgYm9yZGVyQ29sb3I6IHR5cGVzLmNvbG9yLFxuICBib3JkZXJDb2xvckhvdmVyOiB0eXBlcy5jb2xvcixcbiAgd2lkdGg6IHR5cGVzLnJlc3BvbnNpdmVEaW1lbnNpb24sXG4gIG1pbldpZHRoOiB0eXBlcy5yZXNwb25zaXZlRGltZW5zaW9uLFxuICBtYXhXaWR0aDogdHlwZXMucmVzcG9uc2l2ZURpbWVuc2lvbixcbiAgaGVpZ2h0OiB0eXBlcy5yZXNwb25zaXZlRGltZW5zaW9uLFxuICBtaW5IZWlnaHQ6IHR5cGVzLnJlc3BvbnNpdmVEaW1lbnNpb24sXG4gIG1heEhlaWdodDogdHlwZXMucmVzcG9uc2l2ZURpbWVuc2lvbixcbiAgcmFkaXVzOiB0eXBlcy5yYWRpdXMsXG4gIHNoYWRvdzogdHlwZXMuc2hhZG93LFxuICBzaGFkb3dIb3ZlcjogdHlwZXMuc2hhZG93LFxuICBwYWRkaW5nOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIHBhZGRpbmdUb3A6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcGFkZGluZ0JvdHRvbTogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBwYWRkaW5nTGVmdDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBwYWRkaW5nUmlnaHQ6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcGFkZGluZ1g6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcGFkZGluZ1k6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgbWFyZ2luOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIG1hcmdpblRvcDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBtYXJnaW5Cb3R0b206IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgbWFyZ2luTGVmdDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBtYXJnaW5SaWdodDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBtYXJnaW5YOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIG1hcmdpblk6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcG9zaXRpb246IHR5cGVzLnBvc2l0aW9uLFxuICB0b3A6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgYm90dG9tOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIGxlZnQ6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcmlnaHQ6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgb3ZlcmZsb3c6IHR5cGVzLm92ZXJmbG93LFxuICBvdmVyZmxvd1g6IHR5cGVzLm92ZXJmbG93LFxuICBvdmVyZmxvd1k6IHR5cGVzLm92ZXJmbG93LFxuICBhc3BlY3RSYXRpbzogUHJvcFR5cGVzLnN0cmluZyxcbiAgekluZGV4OiB0eXBlcy56SW5kZXgsXG4gIHRhZzogUHJvcFR5cGVzLnN0cmluZyxcbiAgb3BhY2l0eTogUHJvcFR5cGVzLnN0cmluZyxcbiAgb3BhY2l0eUhvdmVyOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBvcmRlcjogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLnN0cmluZywgUHJvcFR5cGVzLm9iamVjdF0pLFxuICBhbGlnblNlbGY6IHR5cGVzLmFsaWduU2VsZixcbiAgZmxleDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLnN0cmluZywgUHJvcFR5cGVzLm9iamVjdF0pLFxuICB0cmFuc2l0aW9uOiB0eXBlcy50cmFuc2l0aW9uLFxuICB0cmFuc2l0aW9uSG92ZXI6IHR5cGVzLnRyYW5zaXRpb24sXG4gIGN1cnNvcjogdHlwZXMuY3Vyc29yLFxufTtcbiJdfQ== */")
   }, props), children);
 });
 Box.propTypes = {
   color: types.color,
+  colorHover: types.color,
   backgroundColor: types.color,
+  backgroundColorHover: types.color,
   borderSide: types.side,
   borderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   borderColor: types.color,
+  borderColorHover: types.color,
   width: types.responsiveDimension,
   minWidth: types.responsiveDimension,
   maxWidth: types.responsiveDimension,
@@ -85,6 +96,7 @@ Box.propTypes = {
   maxHeight: types.responsiveDimension,
   radius: types.radius,
   shadow: types.shadow,
+  shadowHover: types.shadow,
   padding: types.responsiveSpace,
   paddingTop: types.responsiveSpace,
   paddingBottom: types.responsiveSpace,
@@ -111,7 +123,11 @@ Box.propTypes = {
   zIndex: types.zIndex,
   tag: PropTypes.string,
   opacity: PropTypes.string,
+  opacityHover: PropTypes.string,
   order: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   alignSelf: types.alignSelf,
-  flex: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+  flex: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  transition: types.transition,
+  transitionHover: types.transition,
+  cursor: types.cursor
 };

package/es/types.js

@@ -54,7 +54,9 @@ export var types = {
   placement: PropTypes.oneOf(placements),
   textInput: PropTypes.oneOf(['text', 'password', 'email', 'date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'time', 'url', 'week']),
   buttonType: PropTypes.oneOf(['button', 'submit', 'reset']),
-  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  transition: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.transitions)), PropTypes.string]),
+  cursor: PropTypes.oneOf(['default', 'pointer'])
 };
 export var defaultProps = {
   menuMaxHeight: '468px',

package/es/utilities/styles.js

@@ -43,6 +43,8 @@ export var getTransition = function getTransition(transition) {
   if (transition in vars.transitions) {
     return getCssVar(varInfo.transitions.name, transition);
   }
+
+  return transition;
 };
 export var getIconSize = function getIconSize(size) {
   if (size in vars.icons) {

package/package.json

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