@startlibs/components 1.0.0-alpha-8d4 → 1.0.0-alpha-8b.2

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 reactRouterDom = require('react-router-dom');
+var router = require('@reach/router');
 var _assign = _interopDefault(require('lodash/fp/assign'));
 var core = require('@startlibs/core');
 var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
@@ -30,20 +30,18 @@ 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 createEmotion = _interopDefault(require('create-emotion'));
+var _without = _interopDefault(require('lodash/fp/without'));
 
 var IconComponent =
 /*#__PURE__*/
@@ -113,14 +111,13 @@ var Icon = styled__default(styled.withTheme(IconComponent)).withConfig({
   displayName: "Icon",
   componentId: "wsq54u-0"
 })(["font-family:'", "' !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;", ""], function (props) {
-  var _props$theme;
-
-  return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.iconFont;
+  return props.theme.iconFont;
 }, function (props) {
   return props.clickable && "\n    cursor: pointer;\n    &:hover {\n      opacity: 0.85;\n    }\n  ";
 });
 
-var Link = reactRouterDom.Link;
+// import {Link as RouterLink} from 'react-router-dom'
+var Link = router.Link;
 
 var Loading = styled__default.div.withConfig({
   displayName: "Loading",
@@ -231,7 +228,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));
@@ -259,14 +256,6 @@ 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) {
@@ -698,8 +687,7 @@ 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,
-      smallJumpFix = _ref5.smallJumpFix;
+      skipTransform = _ref5.skipTransform;
 
   if (hasClientRectChanged(oldSnap, newSnap)) {
     var _oldSnap$parentStyle, _newSnap$parentStyle, _oldSnap$parentStyle2, _newSnap$parentStyle2;
@@ -724,17 +712,17 @@ var getClientRectAnimation = function getClientRectAnimation(oldSnap, newSnap) {
           paddingBottom = _window$getComputedSt4.paddingBottom;
 
       finalPadding = 'padding-bottom:' + paddingBottom + ';';
-      heightFix = "padding-bottom: ".concat(sumWithPx(deltaHeight, paddingBottom) + (smallJumpFix || 0), ";");
+      heightFix = "padding-bottom: ".concat(sumWithPx(deltaHeight, paddingBottom));
     }
 
-    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(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        "))];
+    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        "))];
   } else {
     return [];
   }
@@ -1923,17 +1911,15 @@ 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:14px;}"], function (props) {
+})(["outline:none;width:100%;position:relative;min-height:5rem;", " ", " p{font-size:13px;}.expired-date{font-size:12px;color:", ";}"], 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;", " ", ""], function (props) {
-  return props.fixTitleMargin && "\n      padding-bottom: 0;\n    ";
-}, utils.media.mobile(_templateObject4()));
+})(["margin-bottom:1rem;padding-bottom:1rem;", ""], utils.media.mobile(_templateObject4()));
 var DialogFooter = styled__default.div.withConfig({
   displayName: "Dialog__DialogFooter",
   componentId: "gai4ey-5"
@@ -1955,7 +1941,6 @@ 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,
@@ -1967,7 +1952,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", "fixTitleMargin", "skipCloseIcon", "isLoading", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions", "container"]);
+      props = _objectWithoutProperties(_ref, ["className", "skipWrap", "skipCloseIcon", "isLoading", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions", "container"]);
 
   var ref = core.useEnsureRef(outerRef);
 
@@ -1975,9 +1960,7 @@ 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, {
-      fixTitleMargin: true
-    }, utils.callIfFunction(title)));
+    }), title && React__default.createElement(DialogTitle, null, utils.callIfFunction(title)));
   };
 
   var content = React__default.createElement(React__default.Fragment, null, Content && React__default.createElement(DialogContent, {
@@ -2050,7 +2033,7 @@ var DialogErrorContent = function DialogErrorContent(_ref4) {
     return React__default.createElement(Dialog, {
       as: "div"
     }, closeDialog && React__default.createElement(CloseIcon, {
-      onClick: closeDialog
+      onClick: confirmCloseDialog
     }), title && React__default.createElement(DialogTitle, null, title), React__default.createElement(DialogContent, {
       icon: "warning"
     }, content), React__default.createElement(DialogFooter, null, React__default.createElement(Button, {
@@ -2091,10 +2074,6 @@ 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,
@@ -2104,33 +2083,17 @@ var WarningDialog = styled__default(function (_ref) {
     className: className
   }, React__default.createElement(MainIcon, {
     icon: icon
-  }), 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, {
+  }), React__default.createElement("p", null, content), React__default.createElement(Button, {
     highlight: true,
     onClick: closeDialog
-  }, confirmLabel), utils.callIfFunction(rightButton, closeDialog));
+  }, confirmLabel));
 }).withConfig({
   displayName: "WarningDialog",
   componentId: "sc-1jw779e-0"
-})(["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  ";
-});
+})(["text-align:center;max-width:36rem;padding:2.5rem;p{font-size:16px;font-weight:500;max-width:27rem;margin:0 auto 2rem;}"]);
 var MainIcon = styled__default(Icon).withConfig({
   displayName: "WarningDialog__MainIcon",
-  componentId: "sc-1jw779e-3"
+  componentId: "sc-1jw779e-1"
 })(["color:", ";font-size:46px;display:block;margin-bottom:1.25rem;"], function (props) {
   return props.icon === 'warning' ? utils.getColor('alert') : props.icon === 'success' ? utils.getColor('success') : utils.getColor('main');
 });
@@ -2240,87 +2203,6 @@ 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:", ";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;"], function (props) {
-  return props.marginTop || "4rem";
-});
-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,
-      marginTop = _notifications$.marginTop;
-  return React__default.createElement(core.Fill, {
-    name: "PersistentNotifications"
-  }, React__default.createElement(FlipNotification$1, {
-    type: type,
-    marginTop: marginTop
-  }, 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, {
-    marginTop: props.marginTop
-  }, React__default.createElement(Notification$1, _extends({
-    id: "js-share-notification"
-  }, props))));
-};
-
 var Placeholder = styled__default.span.withConfig({
   displayName: "usePositioning__Placeholder",
   componentId: "sc-1m4912o-0"
@@ -2426,8 +2308,7 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
       keepWidth = _ref$keepWidth === void 0 ? true : _ref$keepWidth,
       _ref$boundMargin = _ref.boundMargin,
       boundMargin = _ref$boundMargin === void 0 ? 6 : _ref$boundMargin,
-      respectBounds = _ref.respectBounds,
-      respectOffsetScroll = _ref.respectOffsetScroll;
+      respectBounds = _ref.respectBounds;
   var placeholder = React.useRef();
   var arrowRef = core.useEnsureRef(arrowRefOpt);
 
@@ -2452,7 +2333,13 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
       return;
     }
 
-    var usingLayer = respectOffsetScroll || useLayers && getDialogLayersSize() > 0;
+    if (keepWidth) {
+      element.current.style.width = '';
+    } else {
+      element.current.style.maxWidth = '';
+    }
+
+    var usingLayer = useLayers && getDialogLayersSize() > 0;
     var scrollOwner = usingLayer ? utils.getClosestOffsetScroll(element.current.offsetParent) : {
       scrollTop: window.pageYOffset,
       scrollLeft: window.pageXOffset // console.log({scrollOwner,scrollTop:scrollOwner.scrollTop,pageYOffset:window.pageYOffset})
@@ -2461,12 +2348,9 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
     var scrollY = !isNaN(scrollOwner.scrollTop) ? scrollOwner.scrollTop : window.pageYOffset;
     var scrollX = !isNaN(scrollOwner.scrollLeft) ? scrollOwner.scrollLeft : window.pageXOffset;
 
-    var _ref2 = respectOffsetScroll ? {
-      top: placeholder.current.offsetParent.offsetTop,
-      left: placeholder.current.offsetParent.offsetLeft
-    } : placeholder.current.getBoundingClientRect(),
-        leftPlusBorder = _ref2.left,
-        topPlusBorder = _ref2.top;
+    var _placeholder$current$ = placeholder.current.getBoundingClientRect(),
+        leftPlusBorder = _placeholder$current$.left,
+        topPlusBorder = _placeholder$current$.top;
 
     var _window$getComputedSt = window.getComputedStyle(placeholder.current.offsetParent),
         borderLeftWidth = _window$getComputedSt.borderLeftWidth,
@@ -2474,9 +2358,9 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
 
     var left = leftPlusBorder - parseInt(borderLeftWidth, 10);
     var top = topPlusBorder - parseInt(borderTopWidth, 10);
-    var _placeholder$current$ = placeholder.current.offsetParent,
-        parentOffsetWidth = _placeholder$current$.offsetWidth,
-        parentOffsetHeight = _placeholder$current$.offsetHeight;
+    var _placeholder$current$2 = placeholder.current.offsetParent,
+        parentOffsetWidth = _placeholder$current$2.offsetWidth,
+        parentOffsetHeight = _placeholder$current$2.offsetHeight;
     var _element$current = element.current,
         popupOffsetWidth = _element$current.offsetWidth,
         popupOffsetHeight = _element$current.offsetHeight;
@@ -2533,10 +2417,10 @@ var usePositioning = function usePositioning(element, _ref, arrowRefOpt) {
     var arrowOnVerticalSide = arrowSide === 'left' || arrowSide === 'right';
     var arrowSize = arrowElement ? arrowElement.getBoundingClientRect()[arrowOnVerticalSide ? 'height' : 'width'] : ARROW_DEFAULT_SIZE * Math.sqrt(2);
 
-    var _ref3 = arrowOnVerticalSide ? processArrow(ARROW_KEY_POSITIONS[arrow] || arrow, arrowSize, arrowOnVerticalSide, parentOffsetHeight, popupOffsetHeight, processedTop - top, flippedV) : processArrow(ARROW_KEY_POSITIONS[arrow] || arrow, arrowSize, arrowOnVerticalSide, parentOffsetWidth, popupOffsetWidth, processedLeft - left, flippedV),
-        _ref4 = _slicedToArray(_ref3, 2),
-        arrowOffset = _ref4[0],
-        popupArrowOffset = _ref4[1];
+    var _ref2 = arrowOnVerticalSide ? processArrow(ARROW_KEY_POSITIONS[arrow] || arrow, arrowSize, arrowOnVerticalSide, parentOffsetHeight, popupOffsetHeight, processedTop - top, flippedV) : processArrow(ARROW_KEY_POSITIONS[arrow] || arrow, arrowSize, arrowOnVerticalSide, parentOffsetWidth, popupOffsetWidth, processedLeft - left, flippedV),
+        _ref3 = _slicedToArray(_ref2, 2),
+        arrowOffset = _ref3[0],
+        popupArrowOffset = _ref3[1];
 
     var maxHeight = window.innerHeight - (POSITIONING_BOUNDS.top + POSITIONING_BOUNDS.bottom) - (respectBounds ? boundMargin * 2 : 0);
     var maxWidth = window.innerWidth - (POSITIONING_BOUNDS.left + POSITIONING_BOUNDS.right) - (respectBounds ? boundMargin * 2 : 0);
@@ -2745,8 +2629,7 @@ function (_React$Component) {
       }
 
       var rectAnimation = getClientRectAnimation(oldSnap.parent, newSnap.parent, {
-        skipTransform: true,
-        smallJumpFix: _this.props.smallJumpFix
+        skipTransform: true
       });
       var endEffect = utils.callIfFunction(effect, newSnap.parent.domNode, {
         newSnap: newSnap,
@@ -3039,7 +2922,7 @@ function (_React$Component2) {
 
     _this2.addProps = function (children, eventHandlers, activeIndex, extraProps) {
       return children.map(function (c, index) {
-        return c.type === DraggableItem ? React__default.cloneElement(c, {
+        return reactHotLoader.areComponentsEqual(c.type, DraggableItem) ? React__default.cloneElement(c, {
           isDragging: activeIndex === index,
           dragIndex: index,
           droppable: _assertThisInitialized(_assertThisInitialized(_this2)),
@@ -3982,7 +3865,7 @@ var recentlyClosed = false;
 var openRef = {
   current: null
 };
-var Tooltip = function Tooltip(_ref) {
+var Tooltip = React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       _ref$delay = _ref.delay,
       delay = _ref$delay === void 0 ? 400 : _ref$delay,
@@ -3991,6 +3874,7 @@ var Tooltip = function Tooltip(_ref) {
       content = _ref.content,
       rest = _objectWithoutProperties(_ref, ["children", "delay", "instant", "whenEllipsis", "content"]);
 
+  var ensuredRef = useEnsureRef(ref);
   var tooltip = core.useToggle();
   var timeout = core.useRefState(-1);
 
@@ -4039,9 +3923,10 @@ var Tooltip = function Tooltip(_ref) {
     animationOptions: {
       ref: openRef
     },
+    ref: ensuredRef,
     top: !(rest.bottom || rest.left || rest.right || rest.at || rest.my)
   }, rest), content), children);
-};
+});
 
 function _templateObject4$1() {
   var data = _taggedTemplateLiteral(["\n  font-size: 13px;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 3rem;\n  text-align: center;\n"]);
@@ -4088,11 +3973,6 @@ var slideUpOnTop = utils.oneWayAnimation('transform: translateY(10px); pointer-e
 var slideRight = utils.oneWayAnimation('transform: translateX(-10px)', 'transform: none;');
 var slideLeftOnLeft = utils.oneWayAnimation('transform: translateX(10px); pointer-events: none', 'transform: translateX(0px); pointer-events: none');
 var popupAnimation = utils.animationTiming('0.2s ease-out');
-
-var areComponentsEqual = function areComponentsEqual(a, b) {
-  return a === b;
-};
-
 var ListItem = styled__default.li.withConfig({
   displayName: "ContextMenu__ListItem",
   componentId: "sc-13y1vvt-0"
@@ -4420,9 +4300,9 @@ var _willUseLayers$1 = core.willUseLayers(),
 
 var contextMenuLayersQuantity = contextMenuLayersSize;
 
-var _willUseSharedState$3 = core.willUseSharedState(),
-    _willUseSharedState2$3 = _slicedToArray(_willUseSharedState$3, 1),
-    useContextMenuSharedState = _willUseSharedState2$3[0];
+var _willUseSharedState$2 = core.willUseSharedState(),
+    _willUseSharedState2$2 = _slicedToArray(_willUseSharedState$2, 1),
+    useContextMenuSharedState = _willUseSharedState2$2[0];
 
 var ContextMenuComponent = React.forwardRef(function (_ref2, unesuredRef) {
   var children = _ref2.children,
@@ -4511,7 +4391,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) && e.type === Li || e.type.isKeyboardNavigable || (areComponentsEqual(e.type, StickyContainer) ? getTotalKeyboardItems(e.props.children) : 0));
+      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;
   };
@@ -4526,14 +4406,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) && areComponentsEqual(child.type, Li) || child.type.isKeyboardNavigable ? React__default.cloneElement(child, {
+      return child ? !styled.isStyledComponent(child.type) && !reactIs.isMemo(child.type) && reactHotLoader.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
-      }) : areComponentsEqual(child.type, StickyContainer) ? React__default.cloneElement(child, _objectSpread({}, child.props, {
+      }) : reactHotLoader.areComponentsEqual(child.type, StickyContainer) ? React__default.cloneElement(child, _objectSpread({}, child.props, {
         children: formatChildren(child.props.children, i + indexOffset)
       })) : child : child;
     });
@@ -4608,126 +4488,10 @@ 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  ";
@@ -4747,18 +4511,6 @@ 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] !== '';
@@ -5061,17 +4813,14 @@ 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;"], function (props) {
-  return props.inline ? 'display: inline-block; ' : '';
-});
+})(["position:relative;"]);
 var TransitionDiv = function TransitionDiv(_ref) {
   var children = _ref.children,
       animation = _ref.animation,
       skipChromeFix = _ref.skipChromeFix,
       className = _ref.className,
       block = _ref.block,
-      inline = _ref.inline,
-      rest = _objectWithoutProperties(_ref, ["children", "animation", "skipChromeFix", "className", "block", "inline"]);
+      rest = _objectWithoutProperties(_ref, ["children", "animation", "skipChromeFix", "className", "block"]);
 
   var blockRef = React.useRef();
 
@@ -5086,21 +4835,18 @@ 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 || inline ? "" : className,
+    className: block ? "" : className,
     key: "first"
   }, children)]) : React__default.createElement(FlipList, _extends({
-    smallJumpFix: inline && -3,
     effect: overflowEffect,
     skipChromeFix: skipChromeFix,
     animation: animation || DEFAULT_ANIMATION
   }, rest), []);
-  return block || inline ? React__default.createElement(BlockContainer$1, {
-    inline: inline,
+  return block ? React__default.createElement(BlockContainer$1, {
     ref: blockRef,
     className: className
   }, content) : content;
@@ -5367,10 +5113,10 @@ var Image = React.forwardRef(function (_ref, ref) {
   }));
 });
 
-function _templateObject$7() {
+function _templateObject$6() {
   var data = _taggedTemplateLiteral(["\n      @supports (position: sticky) {\n        top: 0;\n        margin-right: -0.75rem;\n      }\n    "]);
 
-  _templateObject$7 = function _templateObject() {
+  _templateObject$6 = function _templateObject() {
     return data;
   };
 
@@ -5379,7 +5125,7 @@ function _templateObject$7() {
 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$7()));
+})(["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()));
 
 function _templateObject2$5() {
   var data = _taggedTemplateLiteral(["\n    min-height: 100%;\n    overflow: hidden;\n  "]);
@@ -5391,10 +5137,10 @@ function _templateObject2$5() {
   return data;
 }
 
-function _templateObject$8() {
+function _templateObject$7() {
   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$8 = function _templateObject() {
+  _templateObject$7 = function _templateObject() {
     return data;
   };
 
@@ -5405,7 +5151,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$8(), utils.getColor('gray240'), function (props) {
+}, utils.media.mobile(_templateObject$7(), utils.getColor('gray240'), function (props) {
   return !props.isOpen && "\n      transform: translateX(-100%);\n      box-shadow: none;\n    ";
 }));
 var DialogTabMenu = styled__default.ul.withConfig({
@@ -5576,7 +5322,6 @@ 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;
@@ -5584,14 +5329,12 @@ 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;
@@ -5608,7 +5351,6 @@ 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,14 +1,15 @@
 {
   "name": "@startlibs/components",
-  "version": "1.0.0-alpha-8d4",
+  "version": "1.0.0-alpha-8b.2",
   "description": "Startlibs Components",
   "main": "lib/index.js",
   "sideEffects": false,
   "source": true,
   "peerDependencies": {
     "lodash": "^4.17.11",
-    "react": "^18.2",
-    "react-dom": "^18.2",
+    "react": "^16.8",
+    "react-dom": "^16.8",
+    "react-hot-loader": "^4.3.5",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {