@pingux/astro 1.27.0-alpha.24 → 1.27.0-alpha.26

package/lib/cjs/components/Messages/Messages.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _list = require("@react-stately/list");
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _Message = _interopRequireDefault(require("./Message"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["items", "onClose"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ *Messages are intended to display non-critical alerts that
+ attract the users’ attention, but do not interfere or temporarily block their work.
+ */
+var Messages = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _context;
+
+  var items = props.items,
+      onClose = props.onClose,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var state = (0, _list.useListState)(props);
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    ref: ref,
+    variant: "messages.wrapper"
+  }, others), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
+    return (0, _react2.jsx)(_Message["default"], {
+      key: item.key,
+      item: item,
+      onClose: onClose
+    });
+  }));
+});
+Messages.propTypes = {
+  /* For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections). */
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    key: _propTypes["default"].string,
+    text: _propTypes["default"].string,
+    status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
+    node: _propTypes["default"].node
+  })),
+
+  /* Callback for clicking the message's close button */
+  onClose: _propTypes["default"].func
+};
+Messages.defaultProps = {
+  items: []
+};
+var _default = Messages;
+exports["default"] = _default;

package/lib/cjs/components/Messages/Messages.reducer.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.multiMessagesReducer = exports.messagesReducer = exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _utils = require("./utils");
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var messagesReducer = _utils.messagesReducer;
+exports.messagesReducer = messagesReducer;
+var multiMessagesReducer = _utils.multiMessagesReducer;
+exports.multiMessagesReducer = multiMessagesReducer;
+
+var makeShowMessage = function makeShowMessage(status, timeout) {
+  return function (text) {
+    return messagesReducer.actions.showMessage({
+      text: text,
+      status: status
+    }, timeout);
+  };
+};
+
+var makeMultiShowMessage = function makeMultiShowMessage(status, timeout) {
+  return function (container, text) {
+    return multiMessagesReducer.actions.showMessage(container, {
+      text: text,
+      status: status
+    }, timeout);
+  };
+};
+
+messagesReducer.actions = _objectSpread(_objectSpread({}, messagesReducer.actions), {}, {
+  showSuccessMessage: makeShowMessage('success', 3000),
+  showErrorMessage: makeShowMessage('error', -1),
+  showWarningMessage: makeShowMessage('warning', -1)
+});
+multiMessagesReducer.actions = _objectSpread(_objectSpread({}, multiMessagesReducer.actions), {}, {
+  showSuccessMessage: makeMultiShowMessage('success', 3000),
+  showCriticalMessage: makeMultiShowMessage('error', -1),
+  showWarningMessage: makeMultiShowMessage('warning', -1)
+});
+var _default = messagesReducer;
+exports["default"] = _default;

package/lib/cjs/components/Messages/Messages.stories.js

@@ -0,0 +1,359 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.WithTextStyling = exports.WithCustomColorsAndIcons = exports.UseReducerWithMultipleContainers = exports.UseReducer = exports.DefaultDynamic = exports.Default = exports.ControlledWithButton = exports.Controlled = void 0;
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _collections = require("@react-stately/collections");
+
+var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _ = require("../..");
+
+var _index = require("./index");
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var _default = {
+  title: 'Messages',
+  component: _.Messages,
+  argTypes: {
+    items: {
+      control: {
+        type: 'none'
+      }
+    },
+    onClose: {
+      control: {
+        type: 'none'
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var messages = [{
+  key: 'message1',
+  text: 'Here\'s a very neutral thing'
+}, {
+  key: 'message2',
+  text: 'Form saved successfully',
+  status: 'success'
+}, {
+  key: 'message3',
+  text: 'Something unexpected happened.',
+  status: 'warning'
+}, {
+  key: 'message4',
+  text: 'Not saved! We could not validate one of the fields. Please see inline message below.',
+  status: 'error'
+}];
+var messageText = ['WINDMILLS DO NOT WORK THAT WAY! GOOD NIGHT! Oh yeah, good luck with that.', "Oh no! The professor will hit me! But if Zoidberg 'fixes' it… then perhaps gifts! You've killed me! Oh, you've killed me!", 'Does anybody else feel jealous and aroused and worried?', "Stop it, stop it. It's fine. I will 'destroy' you! Um, is this the boring, peaceful kind of taking to the streets?", "She also liked to shut up! Fry! Stay back! He's too powerful!", "This opera's as lousy as it is brilliant! Your lyrics lack subtlety. You can't just have your characters announce how they feel."];
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_.Messages, args, (0, _react2.jsx)(_collections.Item, {
+    key: "message1",
+    "data-id": "message1"
+  }, "Here is a very neutral thing"), (0, _react2.jsx)(_collections.Item, {
+    key: "message2",
+    "data-id": "message2",
+    status: "success"
+  }, "Form saved successfully"));
+};
+
+exports.Default = Default;
+
+var DefaultDynamic = function DefaultDynamic(args) {
+  return (// messages = [{...}]
+    (0, _react2.jsx)(_.Messages, (0, _extends2["default"])({}, args, {
+      items: messages
+    }), function (item) {
+      return (0, _react2.jsx)(_collections.Item, item, item.text);
+    })
+  );
+};
+
+exports.DefaultDynamic = DefaultDynamic;
+
+var Controlled = function Controlled(args) {
+  // messages = [{...}]
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      items = _useState2[0],
+      setItems = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setItems(messages);
+  }, []);
+
+  var removeMessage = function removeMessage(key) {
+    setItems((0, _map["default"])(items).call(items, function (item) {
+      return item.key === key ? _objectSpread(_objectSpread({}, item), {}, {
+        isHidden: true
+      }) : item;
+    }));
+    (0, _setTimeout2["default"])(function () {
+      return setItems((0, _filter["default"])(items).call(items, function (item) {
+        return item.key !== key;
+      }));
+    }, 200);
+  };
+
+  return (0, _react2.jsx)(_.Messages, (0, _extends2["default"])({}, args, {
+    items: items,
+    onClose: removeMessage
+  }), function (item) {
+    return (0, _react2.jsx)(_collections.Item, item, item.text);
+  });
+};
+
+exports.Controlled = Controlled;
+
+var ControlledWithButton = function ControlledWithButton(args) {
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      items = _useState4[0],
+      setItems = _useState4[1];
+
+  var addMessage = function addMessage() {
+    var _context;
+
+    setItems((0, _concat["default"])(_context = []).call(_context, items, [{
+      key: "message".concat(items.length + 1),
+      text: messageText[Math.floor(Math.random() * 6)],
+      status: (0, _values["default"])(_statuses["default"])[Math.floor(Math.random() * 4)]
+    }]));
+  };
+
+  var removeMessage = function removeMessage(key) {
+    setItems((0, _map["default"])(items).call(items, function (item) {
+      return item.key === key ? _objectSpread(_objectSpread({}, item), {}, {
+        isHidden: true
+      }) : item;
+    }));
+    (0, _setTimeout2["default"])(function () {
+      return setItems((0, _filter["default"])(items).call(items, function (item) {
+        return item.key !== key;
+      }));
+    }, 200);
+  };
+
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Button, {
+    onPress: addMessage
+  }, "Click me!"), (0, _react2.jsx)(_.Messages, (0, _extends2["default"])({}, args, {
+    items: items,
+    onClose: removeMessage
+  }), function (item) {
+    return (0, _react2.jsx)(_collections.Item, item, item.text);
+  }));
+};
+
+exports.ControlledWithButton = ControlledWithButton;
+
+var WithCustomColorsAndIcons = function WithCustomColorsAndIcons(args) {
+  return (0, _react2.jsx)(_.Messages, args, (0, _react2.jsx)(_collections.Item, {
+    bg: "accent.99",
+    color: "active",
+    icon: _AccountIcon["default"]
+  }, "We have to take a look with this camera."), (0, _react2.jsx)(_collections.Item, {
+    bg: "accent.99",
+    color: "active",
+    icon: _AccountIcon["default"]
+  }, "Who said that? SURE you can die! You want to die?! Oh yeah, good luck with that. Stop! Do not shoot fire stick in space canoe! Cause explosive decompression!"), (0, _react2.jsx)(_collections.Item, {
+    bg: "accent.99",
+    color: "active",
+    icon: _AccountIcon["default"]
+  }, "Oh God, what have I done?"));
+};
+
+exports.WithCustomColorsAndIcons = WithCustomColorsAndIcons;
+
+var UseReducer = function UseReducer() {
+  // import { messagesReducer as messagesReducerCore } from '@pingux/astro';
+  // const messagesReducer = messagesReducerCore;
+  // const makeShowMessage = (status, timeout) => text => messagesReducer.actions.showMessage(
+  //   { text, status },
+  //   timeout,
+  // );
+  // messagesReducer.actions = {
+  //   ...messagesReducer.actions,
+  //   showSuccessMessage: makeShowMessage('success', 3000),
+  //   showErrorMessage: makeShowMessage('error', -1),
+  //   showWarningMessage: makeShowMessage('warning', -1),
+  // };
+  var _useReducer = (0, _react.useReducer)(_index.messagesReducerStory),
+      _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
+      items = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  var showAMessage = function showAMessage() {
+    var actionFn = [_index.messagesReducerStory.actions.showSuccessMessage, _index.messagesReducerStory.actions.showErrorMessage, _index.messagesReducerStory.actions.showWarningMessage][Math.floor(Math.random() * 3)];
+    var message = messageText[Math.floor(Math.random() * 6)];
+    actionFn(message)(dispatch);
+  };
+
+  var removeMessage = function removeMessage(key) {
+    dispatch(_index.messagesReducerStory.actions.hideMessage(key));
+    (0, _setTimeout2["default"])(function () {
+      return dispatch(_index.messagesReducerStory.actions.removeMessage(key));
+    }, 200);
+  };
+
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Button, {
+    onPress: showAMessage
+  }, "Add Message"), (items === null || items === void 0 ? void 0 : items.length) > 0 && (0, _react2.jsx)(_.Button, {
+    mt: "md",
+    onPress: function onPress() {
+      return dispatch(_index.messagesReducerStory.actions.clearMessages());
+    }
+  }, "Clear messages"), (0, _react2.jsx)(_.Messages, {
+    items: items,
+    onClose: removeMessage
+  }, function (item) {
+    return (0, _react2.jsx)(_collections.Item, item, item.text);
+  }));
+};
+
+exports.UseReducer = UseReducer;
+
+var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers() {
+  var _useReducer3 = (0, _react.useReducer)(_index.multiMessagesReducerStory, {
+    'container-one': [],
+    'container-two': []
+  }),
+      _useReducer4 = (0, _slicedToArray2["default"])(_useReducer3, 2),
+      items = _useReducer4[0],
+      dispatch = _useReducer4[1];
+
+  var showAMessage = function showAMessage(container) {
+    var actionFn = [_index.multiMessagesReducerStory.actions.showSuccessMessage, _index.multiMessagesReducerStory.actions.showCriticalMessage, _index.multiMessagesReducerStory.actions.showWarningMessage][Math.floor(Math.random() * 3)];
+    var message = messageText[Math.floor(Math.random() * 6)];
+    actionFn(container, message)(dispatch);
+  };
+
+  var removeMessage = function removeMessage(key, container) {
+    dispatch(_index.multiMessagesReducerStory.actions.hideMessage(container, key));
+    (0, _setTimeout2["default"])(function () {
+      return dispatch(_index.multiMessagesReducerStory.actions.removeMessage(container, key));
+    }, 200);
+  };
+
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_.Button, {
+    onPress: function onPress() {
+      return showAMessage('container-one');
+    }
+  }, "Add message to the left"), (0, _react2.jsx)(_.Button, {
+    ml: "md",
+    onPress: function onPress() {
+      return showAMessage('container-two');
+    }
+  }, "Add message to the right")), (0, _react2.jsx)(_.Messages, {
+    items: items['container-one'],
+    onClose: function onClose(key) {
+      return removeMessage(key, 'container-one');
+    },
+    sx: {
+      width: '45%'
+    }
+  }, function (item) {
+    return (0, _react2.jsx)(_collections.Item, item, item.text);
+  }), (0, _react2.jsx)(_.Messages, {
+    items: items['container-two'],
+    onClose: function onClose(key) {
+      return removeMessage(key, 'container-two');
+    },
+    sx: {
+      left: '55%'
+    }
+  }, function (item) {
+    return (0, _react2.jsx)(_collections.Item, item, item.text);
+  }));
+};
+
+exports.UseReducerWithMultipleContainers = UseReducerWithMultipleContainers;
+
+var WithTextStyling = function WithTextStyling(args) {
+  var items = [{
+    key: 'message1',
+    node: (0, _react2.jsx)("strong", null, "Here is a very neutral thing")
+  }, {
+    key: 'message2',
+    text: 'Form saved successfully',
+    status: 'success'
+  }, {
+    key: 'message3',
+    text: 'Something unexpected happened.',
+    status: 'warning'
+  }, {
+    key: 'message4',
+    node: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)("b", null, "Not saved! "), "We could not validate one of the fields. Please see inline message below."),
+    status: 'error'
+  }];
+  return (0, _react2.jsx)(_.Messages, (0, _extends2["default"])({}, args, {
+    items: items
+  }), function (item) {
+    return (0, _react2.jsx)(_collections.Item, item, item.node || item.text);
+  });
+};
+
+exports.WithTextStyling = WithTextStyling;