@flodesk/grain 11.77.0 → 11.78.1

package/es/components/index.js

@@ -32,4 +32,5 @@ export { Badge } from './badge';
 export { Toast } from './toast';
 export { Radio } from './radio';
 export { Card } from './card';
-export { GhostInput } from './ghost-input';
+export { GhostInput } from './ghost-input';
+export { MessageBox } from './message-box';

package/es/components/message-box.js

@@ -0,0 +1,75 @@
+import _styled from "@emotion/styled/base";
+const _excluded = ["variant", "action", "description", "padding", "radius"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import "core-js/modules/es.symbol.description.js";
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from './text';
+import { Box } from './box';
+import { getColor } from '../utilities';
+import { types } from '../types';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+const variantStyles = {
+  info: {
+    background: 'backgroundInfoSubtleLarge',
+    color: 'onBackgroundInfoSubtle'
+  },
+  danger: {
+    background: 'backgroundDangerSubtleLarge',
+    color: 'onBackgroundDangerSubtle'
+  },
+  warning: {
+    background: 'backgroundWarningSubtleLarge',
+    color: 'onBackgroundWarningSubtle'
+  },
+  success: {
+    background: 'backgroundSuccessSubtleLarge',
+    color: 'onBackgroundSuccessSubtle'
+  }
+};
+const ActionSection = /*#__PURE__*/_styled(Box, process.env.NODE_ENV === "production" ? {
+  target: "e5z9c0h0"
+} : {
+  target: "e5z9c0h0",
+  label: "ActionSection"
+})(process.env.NODE_ENV === "production" ? {
+  name: "dd1uhd",
+  styles: "mix-blend-mode:luminosity"
+} : {
+  name: "dd1uhd",
+  styles: "mix-blend-mode:luminosity",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL21lc3NhZ2UtYm94LmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQmlDIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL21lc3NhZ2UtYm94LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4vdGV4dCc7XG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuL2JveCc7XG5pbXBvcnQgeyBnZXRDb2xvciB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcblxuY29uc3QgdmFyaWFudFN0eWxlcyA9IHtcbiAgaW5mbzoge1xuICAgIGJhY2tncm91bmQ6ICdiYWNrZ3JvdW5kSW5mb1N1YnRsZUxhcmdlJyxcbiAgICBjb2xvcjogJ29uQmFja2dyb3VuZEluZm9TdWJ0bGUnLFxuICB9LFxuICBkYW5nZXI6IHtcbiAgICBiYWNrZ3JvdW5kOiAnYmFja2dyb3VuZERhbmdlclN1YnRsZUxhcmdlJyxcbiAgICBjb2xvcjogJ29uQmFja2dyb3VuZERhbmdlclN1YnRsZScsXG4gIH0sXG4gIHdhcm5pbmc6IHtcbiAgICBiYWNrZ3JvdW5kOiAnYmFja2dyb3VuZFdhcm5pbmdTdWJ0bGVMYXJnZScsXG4gICAgY29sb3I6ICdvbkJhY2tncm91bmRXYXJuaW5nU3VidGxlJyxcbiAgfSxcbiAgc3VjY2Vzczoge1xuICAgIGJhY2tncm91bmQ6ICdiYWNrZ3JvdW5kU3VjY2Vzc1N1YnRsZUxhcmdlJyxcbiAgICBjb2xvcjogJ29uQmFja2dyb3VuZFN1Y2Nlc3NTdWJ0bGUnLFxuICB9LFxufTtcblxuY29uc3QgQWN0aW9uU2VjdGlvbiA9IHN0eWxlZChCb3gpYFxuICBtaXgtYmxlbmQtbW9kZTogbHVtaW5vc2l0eTtcbmA7XG5cbmV4cG9ydCBjb25zdCBNZXNzYWdlQm94ID0gKHtcbiAgdmFyaWFudCA9ICdpbmZvJyxcbiAgYWN0aW9uLFxuICBkZXNjcmlwdGlvbixcbiAgcGFkZGluZyA9ICdsJyxcbiAgcmFkaXVzID0gJ2wnLFxuICAuLi5wcm9wc1xufSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxCb3hcbiAgICAgIGNvbG9yPXtnZXRDb2xvcih2YXJpYW50U3R5bGVzW3ZhcmlhbnRdLmNvbG9yKX1cbiAgICAgIGJhY2tncm91bmRDb2xvcj17Z2V0Q29sb3IodmFyaWFudFN0eWxlc1t2YXJpYW50XS5iYWNrZ3JvdW5kKX1cbiAgICAgIHBhZGRpbmc9e3BhZGRpbmd9XG4gICAgICByYWRpdXM9e3JhZGl1c31cbiAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICB7Li4ucHJvcHN9XG4gICAgPlxuICAgICAge2Rlc2NyaXB0aW9uICYmIChcbiAgICAgICAgPFRleHQgdHJpbVRvcCB0cmltQm90dG9tPXshQm9vbGVhbihhY3Rpb24pfT5cbiAgICAgICAgICB7ZGVzY3JpcHRpb259XG4gICAgICAgIDwvVGV4dD5cbiAgICAgICl9XG4gICAgICB7YWN0aW9uICYmIDxBY3Rpb25TZWN0aW9uIG1hcmdpblRvcD1cIm1cIj57YWN0aW9ufTwvQWN0aW9uU2VjdGlvbj59XG4gICAgPC9Cb3g+XG4gICk7XG59O1xuXG5NZXNzYWdlQm94LnByb3BUeXBlcyA9IHtcbiAgdmFyaWFudDogUHJvcFR5cGVzLm9uZU9mKE9iamVjdC5rZXlzKHZhcmlhbnRTdHlsZXMpKSxcbiAgYWN0aW9uOiBQcm9wVHlwZXMubm9kZSxcbiAgZGVzY3JpcHRpb246IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5ub2RlLCBQcm9wVHlwZXMuc3RyaW5nXSksXG4gIHJhZGl1czogdHlwZXMucmFkaXVzLFxuICBwYWRkaW5nOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG59O1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const MessageBox = _ref => {
+  let {
+      variant = 'info',
+      action,
+      description,
+      padding = 'l',
+      radius = 'l'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX(Box, _extends({
+    color: getColor(variantStyles[variant].color),
+    backgroundColor: getColor(variantStyles[variant].background),
+    padding: padding,
+    radius: radius,
+    variant: variant
+  }, props), description && ___EmotionJSX(Text, {
+    trimTop: true,
+    trimBottom: !Boolean(action)
+  }, description), action && ___EmotionJSX(ActionSection, {
+    marginTop: "m"
+  }, action));
+};
+MessageBox.propTypes = {
+  variant: PropTypes.oneOf(Object.keys(variantStyles)),
+  action: PropTypes.node,
+  description: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  radius: types.radius,
+  padding: types.responsiveSpace
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "11.77.0",
+  "version": "11.78.1",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "types": "es/types/index.d.ts",