@startlibs/components 1.0.0-alpha-8a → 1.0.0-alpha-8d

package/lib/index.js

@@ -18,7 +18,7 @@ var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass')
 var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
 var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
 var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
-var router = require('@reach/router');
+var reactRouterDom = require('react-router-dom');
 var _assign = _interopDefault(require('lodash/fp/assign'));
 var core = require('@startlibs/core');
 var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
@@ -30,18 +30,20 @@ var _identity = _interopDefault(require('lodash/fp/identity'));
 var _isString = _interopDefault(require('lodash/fp/isString'));
 var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
 var _isObject = _interopDefault(require('lodash/fp/isObject'));
+var _without = _interopDefault(require('lodash/fp/without'));
+require('@startlibs/components');
 var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
 var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
 var _set = _interopDefault(require('lodash/fp/set'));
 var _pullAt = _interopDefault(require('lodash/fp/pullAt'));
 var _map = _interopDefault(require('lodash/fp/map'));
 var ReactDOM = _interopDefault(require('react-dom'));
-var reactHotLoader = require('react-hot-loader');
 var _isFunction = _interopDefault(require('lodash/fp/isFunction'));
 var reactIs = require('react-is');
 var mitt = _interopDefault(require('mitt'));
+require('lodash/fp');
 var _typeof = _interopDefault(require('@babel/runtime/helpers/typeof'));
-var _without = _interopDefault(require('lodash/fp/without'));
+var createEmotion = _interopDefault(require('create-emotion'));
 
 var IconComponent =
 /*#__PURE__*/
@@ -116,8 +118,7 @@ var Icon = styled__default(styled.withTheme(IconComponent)).withConfig({
   return props.clickable && "\n    cursor: pointer;\n    &:hover {\n      opacity: 0.85;\n    }\n  ";
 });
 
-// import {Link as RouterLink} from 'react-router-dom'
-var Link = router.Link;
+var Link = reactRouterDom.Link;
 
 var Loading = styled__default.div.withConfig({
   displayName: "Loading",
@@ -228,7 +229,7 @@ var Button = styled__default(React__default.forwardRef(function (_ref, ref) {
 })).withConfig({
   displayName: "Button",
   componentId: "qe54pl-1"
-})(["vertical-align:top;border:0;font-size:12px;border-radius:", ";background:", ";color:white;min-width:8rem;font-weight:500;display:inline-block;line-height:16px;text-align:center;padding:10px 1.25rem;outline:none;cursor:pointer;position:relative;text-decoration:none;user-select:none;flex-shrink:0;:hover{background:", ";}:active{background:", ";}", " ", " + .styled-button{margin-left:1rem;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (props) {
+})(["vertical-align:top;border:0;font-size:12px;border-radius:", ";background:", ";color:white;min-width:8rem;font-weight:500;display:inline-block;line-height:16px;text-align:center;padding:10px 1.25rem;outline:none;cursor:pointer;position:relative;text-decoration:none;user-select:none;flex-shrink:0;:hover{background:", ";}:active{background:", ";}", " ", " + .styled-button{margin-left:1rem;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (props) {
   return props.rounded ? '100px' : '6px';
 }, utils.getColor, function (props) {
   return polished.darken(0.05, utils.getColor(props, true));
@@ -256,6 +257,14 @@ var Button = styled__default(React__default.forwardRef(function (_ref, ref) {
   }, function (props) {
     return polished.darken(0.08, utils.getColor('bluishGray')(props));
   });
+}, function (props) {
+  return props.lightAlert && styled.css(["background:", ";color:", ";:hover{background:", ";}:active{background:", ";}"], function (props) {
+    return polished.transparentize(0.88, utils.getColor("alert")(props));
+  }, utils.getColor('alert'), function (props) {
+    return polished.transparentize(0.85, utils.getColor("alert")(props));
+  }, function (props) {
+    return polished.transparentize(0.82, utils.getColor("alert")(props));
+  });
 }, function (props) {
   return (props.outline || props.dashed || props.textOnly) && styled.css(["color:", ";background:none;", ",", "{color:", ";}:before{content:'';border:1px ", " ", ";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:", ";pointer-events:none;}:hover{background-color:rgba(0,0,0,0.05);}:active{background-color:rgba(0,0,0,0.08);}:focus{:before{box-shadow:0 0 0 2px rgba(0,0,0,0.1);", "}:after{content:none;}}"], props.white ? 'white' : props.highlight ? utils.getColor('main') : 'rgba(0,0,0,0.6)', Icon, DropdownIcon, props.white ? 'white' : props.highlight ? utils.getColor('main') : 'rgba(0,0,0,0.5)', props.outline ? 'solid' : props.dashed ? 'dashed' : '', props.white ? 'white' : props.highlight ? utils.getColor('main') : 'rgba(0,0,0,0.35)', props.rounded ? '100px' : '6px', props.textOnly && 'content: none;');
 }, function (props) {
@@ -290,6 +299,43 @@ Button.Link = function (props) {
   }));
 };
 
+var TextButton = styled__default(function (_ref) {
+  var className = _ref.className,
+      isLoading = _ref.isLoading,
+      children = _ref.children,
+      _ref$innerAs = _ref.innerAs,
+      Wrapper = _ref$innerAs === void 0 ? 'div' : _ref$innerAs,
+      props = _objectWithoutProperties(_ref, ["className", "isLoading", "children", "innerAs"]);
+
+  return React__default.createElement(Wrapper, _extends({
+    className: className
+  }, props), children, " ", isLoading && React__default.createElement(Loading, {
+    size: 14,
+    borderWidth: 3
+  }));
+}).withConfig({
+  displayName: "TextButton",
+  componentId: "sc-1eydmhc-0"
+})(["display:inline-block;font-weight:500;font-size:13px;color:", ";cursor:pointer;text-decoration:none;:hover,:active{color:", ";}", "{display:inline-block;margin-left:0.25rem;vertical-align:-3px;}", ""], utils.getColor('main'), function (props) {
+  return polished.darken(0.1, utils.getColor("main")(props));
+}, Loading, function (props) {
+  return props.nowrap && "\n    white-space: nowrap;\n  ";
+});
+
+TextButton.a = function (props) {
+  return React__default.createElement(TextButton, _extends({}, props, {
+    className: props.className,
+    innerAs: "a"
+  }));
+};
+
+TextButton.Link = function (props) {
+  return React__default.createElement(TextButton, _extends({}, props, {
+    className: props.className,
+    innerAs: Link
+  }));
+};
+
 var ErrorBoundary =
 /*#__PURE__*/
 function (_React$Component) {
@@ -650,7 +696,8 @@ var hasClientRectChanged = function hasClientRectChanged(oldSnap, newSnap) {
 
 var getClientRectAnimation = function getClientRectAnimation(oldSnap, newSnap) {
   var _ref5 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-      skipTransform = _ref5.skipTransform;
+      skipTransform = _ref5.skipTransform,
+      smallJumpFix = _ref5.smallJumpFix;
 
   if (hasClientRectChanged(oldSnap, newSnap)) {
     var _oldSnap$parentStyle, _newSnap$parentStyle, _oldSnap$parentStyle2, _newSnap$parentStyle2;
@@ -675,17 +722,17 @@ var getClientRectAnimation = function getClientRectAnimation(oldSnap, newSnap) {
           paddingBottom = _window$getComputedSt4.paddingBottom;
 
       finalPadding = 'padding-bottom:' + paddingBottom + ';';
-      heightFix = "padding-bottom: ".concat(sumWithPx(deltaHeight, paddingBottom));
+      heightFix = "padding-bottom: ".concat(sumWithPx(deltaHeight, paddingBottom) + (smallJumpFix || 0), ";");
     }
 
-    var overflowFix = scrollHeight > clientHeight || scrollWidth > clientWidth ? "overflow: hidden" : "";
+    var overflowFix = scrollHeight > clientHeight || scrollWidth > clientWidth ? "overflow: hidden;" : "";
     var transform = (left !== 0 || top !== 0) && !skipTransform ? "transform: translate(".concat(left, "px,").concat(top, "px);") : '';
     var parentPaddingTopDelta = (parseInt((_oldSnap$parentStyle = oldSnap.parentStyle) === null || _oldSnap$parentStyle === void 0 ? void 0 : _oldSnap$parentStyle.paddingTop) || 0) - (parseInt((_newSnap$parentStyle = newSnap.parentStyle) === null || _newSnap$parentStyle === void 0 ? void 0 : _newSnap$parentStyle.paddingTop) || 0);
     var parentPaddingBottomDelta = (parseInt((_oldSnap$parentStyle2 = oldSnap.parentStyle) === null || _oldSnap$parentStyle2 === void 0 ? void 0 : _oldSnap$parentStyle2.paddingBottom) || 0) - (parseInt((_newSnap$parentStyle2 = newSnap.parentStyle) === null || _newSnap$parentStyle2 === void 0 ? void 0 : _newSnap$parentStyle2.paddingBottom) || 0);
     var oldMarginTop = (parseInt(oldSnap.marginTop) || 0) + parentPaddingTopDelta;
     var oldMarginBottom = (parseInt(oldSnap.marginBottom) || 0) + parentPaddingBottomDelta;
     var oldTransform = node.style.transform;
-    return [utils.oneWayAnimation("\n        ".concat(transform, "\n        ").concat(heightFix, "\n        ").concat(overflowFix, "\n        margin-top: ").concat(oldMarginTop, "px;\n        margin-bottom: ").concat(oldMarginBottom, "px;\n        width: ").concat(oldSnap.width, "px;\n        height: ").concat(oldSnap.height, "px;\n        "), "\n        ".concat(finalPadding, "\n        ").concat(oldTransform ? "transform:".concat(oldTransform) : '', "\n        ").concat(overflowFix, "\n        margin-top:").concat(newSnap.marginTop || 0, "px;\n        margin-bottom:").concat(newSnap.marginBottom || 0, "px;\n        width: ").concat(newSnap.width, "px;\n        height: ").concat(newSnap.height, "px;\n        "))];
+    return [utils.oneWayAnimation("\n        ".concat(transform, "\n        ").concat(heightFix, "\n        ").concat(overflowFix, "\n        margin-top: ").concat(oldMarginTop, "px;\n        margin-bottom: ").concat(oldMarginBottom, "px;\n        width: ").concat(oldSnap.width, "px;\n        height: ").concat(Math.max(0, oldSnap.height + (smallJumpFix || 0)), "px;\n        "), "\n        ".concat(finalPadding, "\n        ").concat(oldTransform ? "transform:".concat(oldTransform, ";") : '', "\n        ").concat(overflowFix, "\n        margin-top:").concat(parseInt(newSnap.marginTop) || 0, "px;\n        margin-bottom:").concat(parseInt(newSnap.marginBottom) || 0, "px;\n        width: ").concat(newSnap.width, "px;\n        height: ").concat(Math.max(0, newSnap.height + (smallJumpFix || 0)), "px;\n        "))];
   } else {
     return [];
   }
@@ -1874,15 +1921,17 @@ var DialogContent = styled__default(function (props) {
 }).withConfig({
   displayName: "Dialog__DialogContent",
   componentId: "gai4ey-3"
-})(["outline:none;width:100%;position:relative;min-height:5rem;", " ", " p{font-size:13px;}.expired-date{font-size:12px;color:", ";}"], function (props) {
+})(["outline:none;width:100%;position:relative;min-height:5rem;", " ", " p{font-size:14px;}"], function (props) {
   return props.icon && styled.css(["padding-right:8rem;min-height:6rem;"]);
 }, function (props) {
   return props.illustration && styled.css(["padding-right:15rem;", ""], utils.media.mobile(_templateObject3$1()));
-}, utils.getColor('alert'));
+});
 var DialogTitle = styled__default.h2.withConfig({
   displayName: "Dialog__DialogTitle",
   componentId: "gai4ey-4"
-})(["margin-bottom:1rem;padding-bottom:1rem;", ""], utils.media.mobile(_templateObject4()));
+})(["margin-bottom:1rem;padding-bottom:1rem;", " ", ""], function (props) {
+  return props.fixTitleMargin && "\n      padding-bottom: 0;\n    ";
+}, utils.media.mobile(_templateObject4()));
 var DialogFooter = styled__default.div.withConfig({
   displayName: "Dialog__DialogFooter",
   componentId: "gai4ey-5"
@@ -1904,6 +1953,7 @@ var DialogAlwaysVisibleDiv = styled__default.div.withConfig({
 var Dialog = styled__default(React__default.forwardRef(function (_ref, outerRef) {
   var className = _ref.className,
       skipWrap = _ref.skipWrap,
+      fixTitleMargin = _ref.fixTitleMargin,
       skipCloseIcon = _ref.skipCloseIcon,
       isLoading = _ref.isLoading,
       footer = _ref.footer,
@@ -1915,7 +1965,7 @@ var Dialog = styled__default(React__default.forwardRef(function (_ref, outerRef)
       auxiliarActions = _ref.auxiliarActions,
       _ref$container = _ref.container,
       container = _ref$container === void 0 ? true : _ref$container,
-      props = _objectWithoutProperties(_ref, ["className", "skipWrap", "skipCloseIcon", "isLoading", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions", "container"]);
+      props = _objectWithoutProperties(_ref, ["className", "skipWrap", "fixTitleMargin", "skipCloseIcon", "isLoading", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions", "container"]);
 
   var ref = core.useEnsureRef(outerRef);
 
@@ -1923,7 +1973,9 @@ var Dialog = styled__default(React__default.forwardRef(function (_ref, outerRef)
     return React__default.createElement(React__default.Fragment, null, props.closeDialog && !skipCloseIcon && React__default.createElement(CloseIcon, {
       className: "JS-dialog-close",
       onClick: confirmCloseDialog
-    }), title && React__default.createElement(DialogTitle, null, utils.callIfFunction(title)));
+    }), title && React__default.createElement(DialogTitle, {
+      fixTitleMargin: true
+    }, utils.callIfFunction(title)));
   };
 
   var content = React__default.createElement(React__default.Fragment, null, Content && React__default.createElement(DialogContent, {
@@ -1996,7 +2048,7 @@ var DialogErrorContent = function DialogErrorContent(_ref4) {
     return React__default.createElement(Dialog, {
       as: "div"
     }, closeDialog && React__default.createElement(CloseIcon, {
-      onClick: confirmCloseDialog
+      onClick: closeDialog
     }), title && React__default.createElement(DialogTitle, null, title), React__default.createElement(DialogContent, {
       icon: "warning"
     }, content), React__default.createElement(DialogFooter, null, React__default.createElement(Button, {
@@ -2037,6 +2089,10 @@ var useDialogWithToggle = function useDialogWithToggle(dialog) {
 var WarningDialog = styled__default(function (_ref) {
   var content = _ref.content,
       closeDialog = _ref.closeDialog,
+      leftButton = _ref.leftButton,
+      additionalContent = _ref.additionalContent,
+      title = _ref.title,
+      rightButton = _ref.rightButton,
       className = _ref.className,
       _ref$icon = _ref.icon,
       icon = _ref$icon === void 0 ? "warning" : _ref$icon,
@@ -2046,19 +2102,35 @@ var WarningDialog = styled__default(function (_ref) {
     className: className
   }, React__default.createElement(MainIcon, {
     icon: icon
-  }), React__default.createElement("p", null, content), React__default.createElement(Button, {
+  }), title && React__default.createElement(Title, {
+    color: icon
+  }, title), content && React__default.createElement(Content, {
+    noTitle: !title
+  }, content), additionalContent, utils.callIfFunction(leftButton, closeDialog), confirmLabel !== false && React__default.createElement(Button, {
     highlight: true,
     onClick: closeDialog
-  }, confirmLabel));
+  }, confirmLabel), utils.callIfFunction(rightButton, closeDialog));
 }).withConfig({
   displayName: "WarningDialog",
   componentId: "sc-1jw779e-0"
-})(["text-align:center;max-width:36rem;padding:2.5rem;p{font-size:16px;font-weight:500;max-width:27rem;margin:0 auto 2rem;}"]);
+})(["text-align:center;max-width:36rem;padding:2.5rem;", "{margin:0.5rem !important;}"], Button);
+var Title = styled__default.h3.withConfig({
+  displayName: "WarningDialog__Title",
+  componentId: "sc-1jw779e-1"
+})(["color:", ";font-weight:500;font-size:20px;"], function (props) {
+  return props.color === 'warning' ? utils.getColor('alert') : props.color === 'success' ? utils.getColor('success') : utils.getColor('main');
+});
+var Content = styled__default.div.withConfig({
+  displayName: "WarningDialog__Content",
+  componentId: "sc-1jw779e-2"
+})(["font-size:15px;max-width:27rem;margin:0 auto 1.5rem;line-height:130%;", ""], function (props) {
+  return props.noTitle && "\n    font-weight: 500;\n    font-size: 16px;\n  ";
+});
 var MainIcon = styled__default(Icon).withConfig({
   displayName: "WarningDialog__MainIcon",
-  componentId: "sc-1jw779e-1"
+  componentId: "sc-1jw779e-3"
 })(["color:", ";font-size:46px;display:block;margin-bottom:1.25rem;"], function (props) {
-  return props.icon === 'warning' ? utils.getColor('alert') : utils.getColor('main');
+  return props.icon === 'warning' ? utils.getColor('alert') : props.icon === 'success' ? utils.getColor('success') : utils.getColor('main');
 });
 var useWarningDialog = function useWarningDialog() {
   return useDialogWithToggle(function (toggle) {
@@ -2073,8 +2145,12 @@ var _willUseSharedState = core.willUseSharedState(),
     useRenderDefaultWarningDialog = _willUseSharedState2[0],
     _setWarningDialog = _willUseSharedState2[2];
 
-var setWarningDialog = function setWarningDialog(props) {
-  return _setWarningDialog(React__default.createElement(WarningDialog, _extends({}, props, {
+var setWarningDialog = function setWarningDialog(_ref2) {
+  var _ref2$as = _ref2.as,
+      Dialog = _ref2$as === void 0 ? WarningDialog : _ref2$as,
+      props = _objectWithoutProperties(_ref2, ["as"]);
+
+  return _setWarningDialog(React__default.createElement(Dialog, _extends({}, props, {
     closeDialog: function closeDialog() {
       return _setWarningDialog(null);
     }
@@ -2162,6 +2238,81 @@ var FlipNotification = function FlipNotification(props) {
   }, props)));
 };
 
+var _willUseSharedState$2 = core.willUseSharedState([]),
+    _willUseSharedState2$2 = _slicedToArray(_willUseSharedState$2, 3),
+    useNotifications = _willUseSharedState2$2[0],
+    setNotifications = _willUseSharedState2$2[2];
+
+var openPersistentNotification = function openPersistentNotification(notification) {
+  var newNotification = _objectSpread({
+    priority: 0,
+    type: "success"
+  }, _isObject(notification) ? notification : {
+    content: notification
+  });
+
+  setNotifications(function (list) {
+    var nextIndex = list.findIndex(function (n) {
+      return n.priority < newNotification.priority;
+    });
+    return nextIndex < 0 ? _toConsumableArray(list).concat([newNotification]) : _toConsumableArray(list.slice(0, nextIndex)).concat([newNotification], _toConsumableArray(list.slice(nextIndex)));
+  });
+  return function () {
+    return setNotifications(_without([newNotification]));
+  };
+};
+var animation$1 = utils.oneWayAnimation('opacity:0; transform:translateY(-20px)', 'opacity:1;transform:translate(0)');
+var NotificationContainer$1 = styled__default.div.withConfig({
+  displayName: "PersistentNotifications__NotificationContainer",
+  componentId: "sc-1t7i0dh-0"
+})(["position:fixed;top:0;height:0;right:0;z-index:20;"]);
+var Notification$1 = styled__default.div.withConfig({
+  displayName: "PersistentNotifications__Notification",
+  componentId: "sc-1t7i0dh-1"
+})(["background:", ";position:relative;border-radius:7px;"], function (props) {
+  return polished.transparentize(0.9, utils.getColor(props.type)(props));
+});
+var NotificationWrapper = styled__default.div.withConfig({
+  displayName: "PersistentNotifications__NotificationWrapper",
+  componentId: "sc-1t7i0dh-2"
+})(["background:white;margin-top:4rem;margin-right:0.75rem;margin-left:0.75rem;padding:5px;border-radius:10px;box-shadow:0 0 10px 0 rgba(0,0,0,0.1),0 1px 2px 1px rgba(0,0,0,0.15);max-width:360px;"]);
+var PersistentNotifications = function PersistentNotifications() {
+  var _useNotifications = useNotifications(),
+      _useNotifications2 = _slicedToArray(_useNotifications, 2),
+      notifications = _useNotifications2[0],
+      setNotifications = _useNotifications2[1];
+
+  if (!notifications.length) {
+    return null;
+  }
+
+  var closeMessage = function closeMessage() {
+    return setNotifications(function (list) {
+      return list.slice(1);
+    });
+  };
+
+  var _notifications$ = notifications[0],
+      content = _notifications$.content,
+      type = _notifications$.type;
+  return React__default.createElement(core.Fill, {
+    name: "PersistentNotifications"
+  }, React__default.createElement(FlipNotification$1, {
+    type: type
+  }, utils.callIfFunction(content, closeMessage)));
+};
+
+var FlipNotification$1 = function FlipNotification(props) {
+  var ref = React.useRef();
+  useFlipAnimation(ref, animation$1);
+  return React__default.createElement(NotificationContainer$1, {
+    className: "JS-fix-dialog-scroll",
+    ref: ref
+  }, React__default.createElement(NotificationWrapper, null, React__default.createElement(Notification$1, _extends({
+    id: "js-share-notification"
+  }, props))));
+};
+
 var Placeholder = styled__default.span.withConfig({
   displayName: "usePositioning__Placeholder",
   componentId: "sc-1m4912o-0"
@@ -2572,14 +2723,18 @@ function (_React$Component) {
             return;
           }
 
-          morph(oldItem.domNode, formatAnimation(removeAnimation || animation, timing), function () {
+          new Promise(function (res) {
+            morph(oldItem.domNode, formatAnimation(removeAnimation || animation, timing), res);
+            setTimeout(res, 1500);
+          }).then(function () {
             oldItem.domNode.remove();
           });
         });
       }
 
       var rectAnimation = getClientRectAnimation(oldSnap.parent, newSnap.parent, {
-        skipTransform: true
+        skipTransform: true,
+        smallJumpFix: _this.props.smallJumpFix
       });
       var endEffect = utils.callIfFunction(effect, newSnap.parent.domNode, {
         newSnap: newSnap,
@@ -2872,7 +3027,7 @@ function (_React$Component2) {
 
     _this2.addProps = function (children, eventHandlers, activeIndex, extraProps) {
       return children.map(function (c, index) {
-        return reactHotLoader.areComponentsEqual(c.type, DraggableItem) ? React__default.cloneElement(c, {
+        return c.type === DraggableItem ? React__default.cloneElement(c, {
           isDragging: activeIndex === index,
           dragIndex: index,
           droppable: _assertThisInitialized(_assertThisInitialized(_this2)),
@@ -4248,9 +4403,9 @@ var _willUseLayers$1 = core.willUseLayers(),
 
 var contextMenuLayersQuantity = contextMenuLayersSize;
 
-var _willUseSharedState$2 = core.willUseSharedState(),
-    _willUseSharedState2$2 = _slicedToArray(_willUseSharedState$2, 1),
-    useContextMenuSharedState = _willUseSharedState2$2[0];
+var _willUseSharedState$3 = core.willUseSharedState(),
+    _willUseSharedState2$3 = _slicedToArray(_willUseSharedState$3, 1),
+    useContextMenuSharedState = _willUseSharedState2$3[0];
 
 var ContextMenuComponent = React.forwardRef(function (_ref2, unesuredRef) {
   var children = _ref2.children,
@@ -4339,7 +4494,7 @@ var ContextMenuComponent = React.forwardRef(function (_ref2, unesuredRef) {
   var getTotalKeyboardItems = function getTotalKeyboardItems(children) {
     var max = 0;
     React__default.Children.forEach(children, function (e) {
-      return max += e && (!styled.isStyledComponent(e.type) && reactHotLoader.areComponentsEqual(e.type, Li) || e.type.isKeyboardNavigable || (reactHotLoader.areComponentsEqual(e.type, StickyContainer) ? getTotalKeyboardItems(e.props.children) : 0));
+      return max += e && (!styled.isStyledComponent(e.type) && e.type === Li || e.type.isKeyboardNavigable || (areComponentsEqual(e.type, StickyContainer) ? getTotalKeyboardItems(e.props.children) : 0));
     });
     return max;
   };
@@ -4354,14 +4509,14 @@ var ContextMenuComponent = React.forwardRef(function (_ref2, unesuredRef) {
     var indexOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     var i = 0;
     return React__default.Children.map(children, function (child, j) {
-      return child ? !styled.isStyledComponent(child.type) && !reactIs.isMemo(child.type) && reactHotLoader.areComponentsEqual(child.type, Li) || child.type.isKeyboardNavigable ? React__default.cloneElement(child, {
+      return child ? !styled.isStyledComponent(child.type) && !reactIs.isMemo(child.type) && areComponentsEqual(child.type, Li) || child.type.isKeyboardNavigable ? React__default.cloneElement(child, {
         hover: hoverCursor === i + indexOffset && layerIndex === layerCursor,
         hoverCursor: hoverCursor,
         index: indexOffset + i++,
         setCursorOnHover: setCursorOnHover,
         emitter: itemsEmitter,
         layerIndex: layerIndex
-      }) : reactHotLoader.areComponentsEqual(child.type, StickyContainer) ? React__default.cloneElement(child, _objectSpread({}, child.props, {
+      }) : areComponentsEqual(child.type, StickyContainer) ? React__default.cloneElement(child, _objectSpread({}, child.props, {
         children: formatChildren(child.props.children, i + indexOffset)
       })) : child : child;
     });
@@ -4373,19 +4528,13 @@ var ContextMenuComponent = React.forwardRef(function (_ref2, unesuredRef) {
     e.target.dispatchEvent(new MouseEvent('mousemove', {
       bubbles: true
     }));
-    var passedResistance = false;
-    return [function (e, nextPos) {
+    return function (e, nextPos) {
       var delta = prevPos.clientY - nextPos.clientY;
 
       if (Math.abs(delta) > 10) {
-        passedResistance = true;
         setCursorOnHover(-1);
       }
-    }, function (e, finalPos) {
-      if (!passedResistance) {
-        e.target.click();
-      }
-    }];
+    };
   });
   return React__default.createElement(ContextListMenu, _extends({
     "data-drag": false,
@@ -4442,10 +4591,126 @@ var ContextMenu = React.forwardRef(function (_ref3, ref) {
 });
 ContextMenu.ListItem = ListItem;
 
+var scrollWidth = function () {
+  if (!window.document) return 0;
+  var html = document.documentElement;
+  var oldOverflow = html.style.overflowY;
+  html.style.overflowY = 'scroll';
+  var width = window.innerWidth - html.clientWidth;
+  html.style.overflowY = oldOverflow;
+  return width;
+}();
+
+var callIfFunction = function callIfFunction(prop) {
+  for (var _len6 = arguments.length, args = new Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
+    args[_key6 - 1] = arguments[_key6];
+  }
+
+  return typeof prop === "function" ? prop.apply(void 0, args) : prop;
+};
+
+function _templateObject$6() {
+  var data = _taggedTemplateLiteral(["\n  ", ""]);
+
+  _templateObject$6 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+var checkCustomScreenWidth = function checkCustomScreenWidth(sizeParis, customWidth) {
+  var currentWidth = callIfFunction(customWidth);
+  return !sizeParis.find(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+        size = _ref5[0],
+        type = _ref5[1];
+
+    if (type === "min-width") {
+      return currentWidth < size;
+    }
+
+    if (type === "max-width") {
+      return currentWidth > size;
+    }
+  });
+};
+
+var media = function media() {
+  for (var _len3 = arguments.length, sizePairs = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+    sizePairs[_key3] = arguments[_key3];
+  }
+
+  return function () {
+    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      args[_key4] = arguments[_key4];
+    }
+
+    return styled.css(["", ""], function (props) {
+      var _props$theme, _props$theme2;
+
+      return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.overrideMediaWidth) ? checkCustomScreenWidth(sizePairs, (_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.overrideMediaWidth) ? styled.css.apply(void 0, args) : "" : styled.css(["@media ", "{", "}"], sizePairs.map(function (_ref6) {
+        var _ref7 = _slicedToArray(_ref6, 2),
+            size = _ref7[0],
+            type = _ref7[1];
+
+        return "(".concat(type, ": ").concat(size + scrollWidth, "px)");
+      }).join(' and '), styled.css.apply(void 0, args));
+    });
+  };
+};
+media.mobile = media([600, 'max-width']);
+
+media.between = function (min, max) {
+  return media([min, 'min-width'], [max, 'max-width']);
+};
+
+media.max = function (n) {
+  return media([n, 'max-width']);
+};
+
+media.min = function (n) {
+  return media([n, 'min-width']);
+};
+
+media.desktop = media([601, 'min-width']);
+
+var getFrameOffset = function getFrameOffset(i, total) {
+  return Math.round(i * 100 / (total - 1));
+};
+
+var emotion = createEmotion({
+  nonce: __webpack_nonce__
+});
+var oneWayAnimation = function oneWayAnimation() {
+  for (var _len5 = arguments.length, frames = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+    frames[_key5] = arguments[_key5];
+  }
+
+  return emotion.keyframes(_templateObject$6(), frames.map(function (frame, i) {
+    return !frame ? '' : "".concat(getFrameOffset(i, frames.length), "% {\n      ").concat(frame, "\n    }");
+  }));
+};
+var animationTiming = function animationTiming(props) {
+  return function () {
+    for (var _len7 = arguments.length, animations = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+      animations[_key7] = arguments[_key7];
+    }
+
+    return animations.filter(function (_) {
+      return _;
+    }).map(function (_) {
+      return _ + ' ' + props;
+    }).join(',');
+  };
+};
+var identityTranslateFrames = oneWayAnimation('transform: translateY(0);', 'transform: translateY(0);');
+var identityOpacityFrames = oneWayAnimation('opacity: 1;', 'opacity:1;');
+
 var LoadingBar = styled__default.div.withConfig({
   displayName: "PageLoader__LoadingBar",
   componentId: "sc-96jeob-0"
-})(["width:0%;height:3px;position:fixed;background:#84D359;top:0;left:0;z-index:99999;box-shadow:0 0 6px 0 rgba(0,0,0,0.5);", "  ", " "], function (props) {
+})(["width:0%;height:3px;position:fixed;background:#84D359;top:0;left:0;z-index:99999;box-shadow:0 0 6px 0 rgba(0,0,0,0.5);", " ", ""], function (props) {
   return props.loading && "\n    width: 70%;\n    transition: 1.5s width linear;\n  ";
 }, function (props) {
   return props.closing && "\n    width: 100%;\n    transition: 0.3s ease-in;\n  ";
@@ -4465,6 +4730,18 @@ var PageLoader = function PageLoader(_ref) {
     closing: loader.closing
   });
 };
+var animation$2 = utils.oneWayAnimation('width: 70%;', 'width: 100%');
+var SuspenseLoadingBar = function SuspenseLoadingBar() {
+  var ref = React__default.useRef();
+  useFlipLeave(ref, animation$2, {
+    reverse: false,
+    timing: animationTiming('0.3s ease-in')
+  });
+  return React__default.createElement(LoadingBar, {
+    ref: ref,
+    loading: true
+  });
+};
 
 var isNodeJunction = function isNodeJunction(nextNode) {
   return nextNode && !nextNode.hasChangedLine && nextNode.words[0] !== '';
@@ -4767,14 +5044,17 @@ var DEFAULT_ANIMATION = utils.oneWayAnimation("opacity: 1;", "opacity: 0;");
 var BlockContainer$1 = styled__default.div.withConfig({
   displayName: "TransitionDiv__BlockContainer",
   componentId: "sc-1sh2xah-0"
-})(["position:relative;"]);
+})(["", " position:relative;"], function (props) {
+  return props.inline ? 'display: inline-block; ' : '';
+});
 var TransitionDiv = function TransitionDiv(_ref) {
   var children = _ref.children,
       animation = _ref.animation,
       skipChromeFix = _ref.skipChromeFix,
       className = _ref.className,
       block = _ref.block,
-      rest = _objectWithoutProperties(_ref, ["children", "animation", "skipChromeFix", "className", "block"]);
+      inline = _ref.inline,
+      rest = _objectWithoutProperties(_ref, ["children", "animation", "skipChromeFix", "className", "block", "inline"]);
 
   var blockRef = React.useRef();
 
@@ -4789,18 +5069,21 @@ var TransitionDiv = function TransitionDiv(_ref) {
   };
 
   var content = children ? React__default.createElement(FlipList, _extends({
+    smallJumpFix: inline && -3,
     effect: overflowEffect,
     skipChromeFix: skipChromeFix,
     animation: animation || DEFAULT_ANIMATION
   }, rest), [React__default.createElement("div", {
-    className: block ? "" : className,
+    className: block || inline ? "" : className,
     key: "first"
   }, children)]) : React__default.createElement(FlipList, _extends({
+    smallJumpFix: inline && -3,
     effect: overflowEffect,
     skipChromeFix: skipChromeFix,
     animation: animation || DEFAULT_ANIMATION
   }, rest), []);
-  return block ? React__default.createElement(BlockContainer$1, {
+  return block || inline ? React__default.createElement(BlockContainer$1, {
+    inline: inline,
     ref: blockRef,
     className: className
   }, content) : content;
@@ -5067,10 +5350,10 @@ var Image = React.forwardRef(function (_ref, ref) {
   }));
 });
 
-function _templateObject$6() {
+function _templateObject$7() {
   var data = _taggedTemplateLiteral(["\n      @supports (position: sticky) {\n        top: 0;\n        margin-right: -0.75rem;\n      }\n    "]);
 
-  _templateObject$6 = function _templateObject() {
+  _templateObject$7 = function _templateObject() {
     return data;
   };
 
@@ -5079,7 +5362,7 @@ function _templateObject$6() {
 var DialogWithImageHeader = styled__default(Dialog).withConfig({
   displayName: "DialogWithImageHeader",
   componentId: "sc-1f1ry4g-0"
-})(["max-width:51rem;", "{background:", ";text-shadow:none;color:rgba(120,120,120,1);font-size:20px;box-shadow:rgba(0,0,0,0.2) 0px 1px 3px 0px,rgba(0,0,0,0.05) 0px 0px 0px 1px;width:36px;height:36px;line-height:36px;transition:0.1s ease-out;:hover{background-color:rgb(230,230,230);}:active{background-color:rgb(220,220,220);transition:0s ease-out;}@supports (position:sticky){position:sticky;top:-2.5rem;right:0rem;float:right;margin-right:-1.25rem;margin-top:0.75rem;}", "}"], CloseIcon, utils.getColor('gray240'), utils.media.mobile(_templateObject$6()));
+})(["max-width:51rem;", "{background:", ";text-shadow:none;color:rgba(120,120,120,1);font-size:20px;box-shadow:rgba(0,0,0,0.2) 0px 1px 3px 0px,rgba(0,0,0,0.05) 0px 0px 0px 1px;width:36px;height:36px;line-height:36px;transition:0.1s ease-out;:hover{background-color:rgb(230,230,230);}:active{background-color:rgb(220,220,220);transition:0s ease-out;}@supports (position:sticky){position:sticky;top:-2.5rem;right:0rem;float:right;margin-right:-1.25rem;margin-top:0.75rem;}", "}"], CloseIcon, utils.getColor('gray240'), utils.media.mobile(_templateObject$7()));
 
 function _templateObject2$5() {
   var data = _taggedTemplateLiteral(["\n    min-height: 100%;\n    overflow: hidden;\n  "]);
@@ -5091,10 +5374,10 @@ function _templateObject2$5() {
   return data;
 }
 
-function _templateObject$7() {
+function _templateObject$8() {
   var data = _taggedTemplateLiteral(["\n    display:block;\n    position:fixed;\n    top:0;\n    left:0;\n    bottom:0;\n    z-index:1000;\n    transition: 0.25s transform ease-out;\n    background-color: ", ";\n    box-shadow: -5px 0 20px 5px rgba(0,0,0,0.4);\n    border-radius: 0;\n    ", "\n  "]);
 
-  _templateObject$7 = function _templateObject() {
+  _templateObject$8 = function _templateObject() {
     return data;
   };
 
@@ -5105,7 +5388,7 @@ var SideMenu = styled__default.div.withConfig({
   componentId: "suvg9r-0"
 })(["background-color:", ";border-top-left-radius:10px;border-bottom-left-radius:10px;width:19rem;flex-shrink:0;padding:1.25rem 0;", " ", ""], utils.getColor('gray240'), function (props) {
   return !props.visibleOnDesktop && 'display:none;';
-}, utils.media.mobile(_templateObject$7(), utils.getColor('gray240'), function (props) {
+}, utils.media.mobile(_templateObject$8(), utils.getColor('gray240'), function (props) {
   return !props.isOpen && "\n      transform: translateX(-100%);\n      box-shadow: none;\n    ";
 }));
 var DialogTabMenu = styled__default.ul.withConfig({
@@ -5276,6 +5559,7 @@ exports.ListItem = ListItem;
 exports.ListMenu = ListMenu;
 exports.ListSeparator = ListSeparator;
 exports.Loading = Loading;
+exports.LoadingBar = LoadingBar;
 exports.LoadingDiv = LoadingDiv;
 exports.MENU_TAB = MENU_TAB;
 exports.MobileBubbleDialog = MobileBubbleDialog;
@@ -5283,13 +5567,16 @@ exports.Modal = Modal;
 exports.ModalContainer = ModalContainer;
 exports.Notifications = Notifications;
 exports.PageLoader = PageLoader;
+exports.PersistentNotifications = PersistentNotifications;
 exports.Popup = Popup;
 exports.Reposition = Reposition;
 exports.SideMenu = SideMenu;
 exports.SimpleLi = SimpleLi;
 exports.SplitColumnsContainer = SplitColumnsContainer;
 exports.StickyContainer = StickyContainer;
+exports.SuspenseLoadingBar = SuspenseLoadingBar;
 exports.SwitchDiv = SwitchDiv;
+exports.TextButton = TextButton;
 exports.Tooltip = Tooltip;
 exports.TransitionDiv = TransitionDiv;
 exports.WarningDialog = WarningDialog;
@@ -5304,6 +5591,7 @@ exports.formatAnimation = formatAnimation;
 exports.getClientRectAnimation = getClientRectAnimation;
 exports.getDialogLayersSize = getDialogLayersSize;
 exports.morph = morph;
+exports.openPersistentNotification = openPersistentNotification;
 exports.preventDialogPop = preventDialogPop;
 exports.removeWindowScroll = removeWindowScroll;
 exports.setNotification = setNotification;

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@startlibs/components",
-  "version": "1.0.0-alpha-8a",
+  "version": "1.0.0-alpha-8d",
   "description": "Startlibs Components",
   "main": "lib/index.js",
   "sideEffects": false,
   "source": true,
   "peerDependencies": {
     "lodash": "^4.17.11",
-    "react": "^16.8",
-    "react-dom": "^16.8",
-    "react-hot-loader": "^4.3.5",
+    "react": "^18.0",
+    "react-dom": "^18.0",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {