@startlibs/components 1.0.0-alpha-7w → 1.0.0-alpha-7x

package/lib/index.js

@@ -27,11 +27,9 @@ var _objectSpread = _interopDefault(require('@babel/runtime/helpers/objectSpread
 var _uniqueId = _interopDefault(require('lodash/fp/uniqueId'));
 var _max = _interopDefault(require('lodash/fp/max'));
 var _identity = _interopDefault(require('lodash/fp/identity'));
-var _ = _interopDefault(require('lodash/fp'));
-var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
-var _typeof = _interopDefault(require('@babel/runtime/helpers/typeof'));
-var emotion = require('emotion');
 var _isString = _interopDefault(require('lodash/fp/isString'));
+var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
+var _isObject = _interopDefault(require('lodash/fp/isObject'));
 var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
 var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
 var _set = _interopDefault(require('lodash/fp/set'));
@@ -42,6 +40,7 @@ var reactHotLoader = require('react-hot-loader');
 var _isFunction = _interopDefault(require('lodash/fp/isFunction'));
 var reactIs = require('react-is');
 var mitt = _interopDefault(require('mitt'));
+var _typeof = _interopDefault(require('@babel/runtime/helpers/typeof'));
 var _without = _interopDefault(require('lodash/fp/without'));
 
 var IconComponent =
@@ -146,7 +145,7 @@ function _templateObject3() {
 }
 
 function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n    ", "\n  "]);
+  var data = _taggedTemplateLiteral(["\n    ", "\n    ", "\n    ", "\n  "]);
 
   _templateObject2 = function _templateObject2() {
     return data;
@@ -229,12 +228,14 @@ 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;: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));
 }, function (props) {
   return polished.darken(0.08, utils.getColor(props, true));
+}, function (props) {
+  return props.nowrap && "\n    white-space: nowrap;\n  ";
 }, function (props) {
   return !props.noFocus && !props.isLoading && styled.css([":focus{", "}", ""], focus, function (props) {
     return props.focused && focus;
@@ -264,7 +265,11 @@ var Button = styled__default(React__default.forwardRef(function (_ref, ref) {
 }, function (props) {
   return props.isLoading && styled.css(["color:transparent !important;pointer-events:none;", "{visibility:hidden;}"], Icon);
 }, utils.media.mobile(_templateObject2(), function (props) {
-  return !props.small && styled.css(["padding:13px 1.5rem;font-size:13px;"]);
+  return !props.small && !props.onlyIcon && styled.css(["padding:13px 1.5rem;font-size:13px;"]);
+}, function (props) {
+  return !props.small && props.onlyIcon && styled.css(["min-width:3.5rem;min-height:3.5rem;"]);
+}, function (props) {
+  return props.withDropdown && styled.css(["padding-right:2.5rem;", "{right:14px;}"], DropdownIcon);
 }), utils.media.max(359)(_templateObject3(), function (props) {
   return !props.small && !props.onlyIcon && !props.onlyDropdown && styled.css(["min-width:0;"]);
 }), function (props) {
@@ -322,6 +327,10 @@ function (_React$Component) {
     value: function componentDidCatch(e, info) {
       var error = e && e.stack;
 
+      if (e === null || e === void 0 ? void 0 : e.notFound) {
+        return;
+      }
+
       try {
         if (!e || !e.stack) {
           JSON.stringify(e);
@@ -378,190 +387,10 @@ function (_React$Component) {
   return ErrorBoundary;
 }(React__default.Component); // StartlibsProvider.registerInternal('ErrorBoundary',ErrorBoundary)
 
-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;
-};
-var ifUndefined = function ifUndefined(v) {
-  for (var _len10 = arguments.length, or = new Array(_len10 > 1 ? _len10 - 1 : 0), _key10 = 1; _key10 < _len10; _key10++) {
-    or[_key10 - 1] = arguments[_key10];
-  }
-
-  return v !== undefined ? v : or.length === 1 ? or[0] : ifUndefined.apply(void 0, [or[0]].concat(_toConsumableArray(or.slice(1))));
-};
-function isMobile() {
-  var check = false;
-
-  if (typeof navigator === 'undefined') {
-    return false;
-  }
-
-  (function (a) {
-    if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series([46])0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br([ev])w|bumb|bw-([nu])|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do([cp])o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly([-_])|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-([mpt])|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c([- _agpst])|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac([ -/])|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja([tv])a|jbro|jemu|jigs|kddi|keji|kgt([ /])|klon|kpt |kwc-|kyo([ck])|le(no|xi)|lg( g|\/([klu])|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t([- ov])|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30([02])|n50([025])|n7(0([01])|10)|ne(([cm])-|on|tf|wf|wg|wt)|nok([6i])|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan([adt])|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c([-01])|47|mc|nd|ri)|sgh-|shar|sie([-m])|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c([- ])|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0, 4))) check = true;
-  })(navigator.userAgent || navigator.vendor || window['opera']);
-
-  return check;
-}
-var normalizeTouch = function normalizeTouch(fn, endFn) {
-  return function (e) {
-    var touch = e.touches[0];
-
-    if (e.touches.length > 1 && e.type !== 'touchend') {
-      callIfFunction(endFn, e, touch);
-    } else {
-      callIfFunction(fn, e, touch);
-    }
-  };
-};
-var normalizeMouse = function normalizeMouse(fn, endFn) {
-  return function (e) {
-    if (e.buttons > 1 && e.type !== 'mouseup') {
-      callIfFunction(endFn, e, e);
-    } else {
-      callIfFunction(fn, e, e);
-    }
-  };
-};
-var normalizePress = function normalizePress(fn, endFn) {
-  return function (e) {
-    if (e.touches) {
-      normalizeTouch(fn, endFn)(e);
-    } else {
-      normalizeMouse(fn, endFn)(e);
-    }
-  };
-};
-
 function _templateObject$1() {
-  var data = _taggedTemplateLiteral(["\n  ", ""]);
-
-  _templateObject$1 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var media = function media() {
-  for (var _len = arguments.length, sizePairs = new Array(_len), _key = 0; _key < _len; _key++) {
-    sizePairs[_key] = arguments[_key];
-  }
-
-  return function () {
-    return styled.css(["@media ", "{", "}"], sizePairs.map(function (_ref4) {
-      var _ref5 = _slicedToArray(_ref4, 2),
-          size = _ref5[0],
-          type = _ref5[1];
-
-      return "(".concat(type, ": ").concat(size + scrollWidth, "px)");
-    }).join(' and '), styled.css.apply(void 0, arguments));
-  };
-};
-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 oneWayAnimation = function oneWayAnimation() {
-  for (var _len2 = arguments.length, frames = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    frames[_key2] = arguments[_key2];
-  }
-
-  return emotion.keyframes(_templateObject$1(), frames.map(function (frame, i) {
-    return !frame ? '' : "".concat(getFrameOffset(i, frames.length), "% {\n      ").concat(frame, "\n    }");
-  }));
-};
-var twoWayAnimation = function twoWayAnimation() {
-  for (var _len3 = arguments.length, frames = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-    frames[_key3] = arguments[_key3];
-  }
-
-  return [frames, _.reverse(frames)].map(function (frames) {
-    return oneWayAnimation.apply(void 0, _toConsumableArray(frames));
-  });
-};
-var identityTranslateFrames = oneWayAnimation('transform: translateY(0);', 'transform: translateY(0);');
-var identityOpacityFrames = oneWayAnimation('opacity: 1;', 'opacity:1;');
-
-var disableSelect = function disableSelect(e) {
-  e.preventDefault();
-};
-
-var createPressEvent = function createPressEvent(onStart) {
-  return normalizePress(function (startEvent, info) {
-    var onEnd = onStart(startEvent, info);
-    var finish = normalizePress(function (e, info) {
-      callIfFunction(onEnd, e, info);
-      window.removeEventListener('selectstart', disableSelect);
-      window.removeEventListener('touchend', finish);
-      window.removeEventListener('mouseup', finish);
-    });
-    window.addEventListener('selectstart', disableSelect);
-
-    if (startEvent.touches) {
-      window.addEventListener('touchend', finish);
-    } else {
-      window.addEventListener("mouseup", finish);
-    }
-  });
-};
-var createPressAndMoveEvent = function createPressAndMoveEvent(onStart) {
-  return createPressEvent(function (startEvent, info) {
-    var _concat3 = [].concat(onStart(startEvent, info)),
-        _concat4 = _slicedToArray(_concat3, 2),
-        onMove = _concat4[0],
-        onEnd = _concat4[1];
-
-    var finish = normalizePress(function (e, info) {
-      callIfFunction(onEnd, e, info);
-      window.removeEventListener('touchmove', move);
-      window.removeEventListener('mousemove', move);
-    });
-    var move = normalizePress(onMove, finish);
-
-    if (startEvent.touches) {
-      window.addEventListener('touchmove', move, {
-        passive: false
-      });
-    } else {
-      window.addEventListener("mousemove", move);
-    }
-
-    return finish;
-  });
-};
-
-function _templateObject$2() {
   var data = _taggedTemplateLiteral(["test"]);
 
-  _templateObject$2 = function _templateObject() {
+  _templateObject$1 = function _templateObject() {
     return data;
   };
 
@@ -682,7 +511,7 @@ var defaultSwitchAnimation = utils.oneWayAnimation("opacity: 1;", "opacity: 0;",
 var SHORT_ANIMATIONS = {
   fadeIn: defaultEnterAnimation
 };
-var b = styled.createGlobalStyle(_templateObject$2());
+var b = styled.createGlobalStyle(_templateObject$1());
 
 var applyDefault = function applyDefault(k) {
   return SHORT_ANIMATIONS[k] || k;
@@ -1322,8 +1151,8 @@ var _willUseFlip = willUseFlip(),
 var useFlipAnimation = function useFlipAnimation(ref, onEnterOrBoth) {
   var onLeaveOrIgnore = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   var config = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-  var onEnter = ifUndefined(onEnterOrBoth && onEnterOrBoth.onEnter, onEnterOrBoth);
-  var onLeave = ifUndefined(onEnterOrBoth && onEnterOrBoth.onLeave, onLeaveOrIgnore);
+  var onEnter = utils.ifUndefined(onEnterOrBoth && onEnterOrBoth.onEnter, onEnterOrBoth);
+  var onLeave = utils.ifUndefined(onEnterOrBoth && onEnterOrBoth.onLeave, onLeaveOrIgnore);
   useFlipEnter(ref, onEnter, config);
   useFlipLeave(ref, onLeave === true ? onEnter : onLeave, _objectSpread({}, config, {
     reverse: onLeave === true
@@ -1340,10 +1169,10 @@ function _templateObject2$1() {
   return data;
 }
 
-function _templateObject$3() {
+function _templateObject$2() {
   var data = _taggedTemplateLiteral(["\n    padding: ", ";\n  "]);
 
-  _templateObject$3 = function _templateObject() {
+  _templateObject$2 = function _templateObject() {
     return data;
   };
 
@@ -1368,7 +1197,7 @@ var DialogCenter = styled__default.div.withConfig({
   componentId: "wendlg-2"
 })(["@supports (position:sticky){will-change:transform,opacity;&.JS-wc-off{will-change:auto;}}display:-webkit-box;display:-ms-flexbox;display:flex;overflow-y:", ";overflow-x:hidden;position:fixed;top:0;bottom:0;left:0;right:0;align-items:center;", " ", ""], function (props) {
   return props.withScroll ? "scroll" : "hidden";
-}, utils.media.desktop(_templateObject$3(), function (props) {
+}, utils.media.desktop(_templateObject$2(), function (props) {
   return props.fullscreen ? '1rem' : '3rem 0.5rem;';
 }), utils.media.mobile(_templateObject2$1(), function (props) {
   return props.fullscreenOnMobile ? '0' : '0.5rem';
@@ -1789,10 +1618,10 @@ function _templateObject2$2() {
   return data;
 }
 
-function _templateObject$4() {
+function _templateObject$3() {
   var data = _taggedTemplateLiteral(["\n      display: flex;\n      flex-wrap: nowrap;\n      margin-left: -", "rem;\n      margin-right: -", "rem;\n      margin-top: -", "rem;\n      > * {\n        flex-basis: 0;\n        flex-grow: 1;\n        margin-left: ", "rem;\n        margin-right: ", "rem;\n        margin-top: ", "rem;\n      }\n    "]);
 
-  _templateObject$4 = function _templateObject() {
+  _templateObject$3 = function _templateObject() {
     return data;
   };
 
@@ -1818,7 +1647,7 @@ var SplitColumnsContainer = styled__default.div.withConfig({
   displayName: "SplitColumnsContainer",
   componentId: "sc-1h4sw88-0"
 })(["margin-bottom:", "rem;", " ", ""], getMarginFromFieldChild, function (props) {
-  return styled.css(["", ""], utils.media.min(props.viewportMinWidth || 0)(_templateObject$4(), function (props) {
+  return styled.css(["", ""], utils.media.min(props.viewportMinWidth || 0)(_templateObject$3(), function (props) {
     return utils.getMargin(splitColumnMargins)(props) / 2;
   }, function (props) {
     return utils.getMargin(splitColumnMargins)(props) / 2;
@@ -2013,10 +1842,10 @@ function _templateObject2$3() {
   return data;
 }
 
-function _templateObject$5() {
+function _templateObject$4() {
   var data = _taggedTemplateLiteral(["\n    top: 0\n  "]);
 
-  _templateObject$5 = function _templateObject() {
+  _templateObject$4 = function _templateObject() {
     return data;
   };
 
@@ -2025,7 +1854,7 @@ function _templateObject$5() {
 var DialogIcon = styled__default(Icon).withConfig({
   displayName: "Dialog__DialogIcon",
   componentId: "gai4ey-0"
-})(["font-size:60px;width:8rem;text-align:center;color:#d2d2d2;right:0;top:1rem;position:absolute;", ""], utils.media.desktop(_templateObject$5()));
+})(["font-size:60px;width:8rem;text-align:center;color:#d2d2d2;right:0;top:1rem;position:absolute;", ""], utils.media.desktop(_templateObject$4()));
 var CloseIcon = styled__default(Icon).attrs(_assign({
   icon: 'x'
 })).withConfig({
@@ -2075,6 +1904,7 @@ var DialogAlwaysVisibleDiv = styled__default.div.withConfig({
 var Dialog = styled__default(React__default.forwardRef(function (_ref, outerRef) {
   var className = _ref.className,
       skipWrap = _ref.skipWrap,
+      skipCloseIcon = _ref.skipCloseIcon,
       isLoading = _ref.isLoading,
       footer = _ref.footer,
       Content = _ref.Content,
@@ -2085,12 +1915,12 @@ 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", "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);
 
   var alwaysVisible = function alwaysVisible(confirmCloseDialog) {
-    return React__default.createElement(React__default.Fragment, null, props.closeDialog && React__default.createElement(CloseIcon, {
+    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)));
@@ -2190,6 +2020,78 @@ var DialogError = function DialogError(_ref6) {
   });
 };
 
+var useDialog = function useDialog(dialog) {
+  var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var toggleCallback = arguments.length > 2 ? arguments[2] : undefined;
+  var toggle = core.useToggle(false, toggleCallback);
+  core.useFill("Dialog", toggle.isOpen !== false && dialog(toggle.close), [toggle.isOpen].concat(_toConsumableArray(args)));
+  return toggle.open;
+};
+var useDialogWithToggle = function useDialogWithToggle(dialog) {
+  var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var toggle = core.useToggle();
+  core.useFill("Dialog", toggle.isOpen !== false && dialog(toggle), [toggle.isOpen].concat(_toConsumableArray(args)));
+  return toggle;
+};
+
+var WarningDialog = styled__default(function (_ref) {
+  var content = _ref.content,
+      closeDialog = _ref.closeDialog,
+      className = _ref.className,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? "warning" : _ref$icon,
+      _ref$confirmLabel = _ref.confirmLabel,
+      confirmLabel = _ref$confirmLabel === void 0 ? "Entendi" : _ref$confirmLabel;
+  return React__default.createElement(Dialog, {
+    className: className
+  }, React__default.createElement(MainIcon, {
+    icon: icon
+  }), React__default.createElement("p", null, content), React__default.createElement(Button, {
+    highlight: true,
+    onClick: closeDialog
+  }, confirmLabel));
+}).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;}"]);
+var MainIcon = styled__default(Icon).withConfig({
+  displayName: "WarningDialog__MainIcon",
+  componentId: "sc-1jw779e-1"
+})(["color:", ";font-size:46px;display:block;margin-bottom:1.25rem;"], function (props) {
+  return props.icon === 'warning' ? utils.getColor('alert') : utils.getColor('main');
+});
+var useWarningDialog = function useWarningDialog() {
+  return useDialogWithToggle(function (toggle) {
+    return React__default.createElement(WarningDialog, _extends({}, toggle.isOpen, {
+      closeDialog: toggle.close
+    }));
+  });
+};
+
+var _willUseSharedState = core.willUseSharedState(),
+    _willUseSharedState2 = _slicedToArray(_willUseSharedState, 3),
+    useRenderDefaultWarningDialog = _willUseSharedState2[0],
+    _setWarningDialog = _willUseSharedState2[2];
+
+var setWarningDialog = function setWarningDialog(props) {
+  return _setWarningDialog(React__default.createElement(WarningDialog, _extends({}, props, {
+    closeDialog: function closeDialog() {
+      return _setWarningDialog(null);
+    }
+  })));
+};
+var DefaultWarningDialog = function DefaultWarningDialog() {
+  var _useRenderDefaultWarn = useRenderDefaultWarningDialog(),
+      _useRenderDefaultWarn2 = _slicedToArray(_useRenderDefaultWarn, 1),
+      warningDialog = _useRenderDefaultWarn2[0];
+
+  if (warningDialog) {
+    return warningDialog;
+  }
+
+  return null;
+};
+
 var NotificationContainer = styled__default.div.withConfig({
   displayName: "Notifications__NotificationContainer",
   componentId: "naxsn6-0"
@@ -2197,13 +2099,15 @@ var NotificationContainer = styled__default.div.withConfig({
 var Notification = styled__default.div.withConfig({
   displayName: "Notifications__Notification",
   componentId: "naxsn6-1"
-})(["padding:1rem 3.5rem 1rem 1rem;border-radius:5px;color:white;text-align:left;line-height:20px;background:", ";box-shadow:0 2px 0px 0px rgba(0,0,0,0.25);min-width:12rem;min-height:44px;display:inline-block;position:relative;top:1rem;", "{color:white;display:inline-block;background-color:rgba(0,0,0,0.2);font-size:14px;width:20px;height:20px;text-align:center;line-height:20px;border-radius:50%;cursor:pointer;position:absolute;top:1rem;right:1rem;&:hover{background-color:rgba(0,0,0,0.3);}}"], utils.getColor('success'), Icon);
+})(["padding:1rem 3.5rem 1rem 1rem;border-radius:5px;color:white;text-align:left;line-height:20px;background:", ";box-shadow:0 2px 0px 0px rgba(0,0,0,0.25);min-width:12rem;min-height:44px;display:inline-block;position:relative;top:1rem;", "{color:white;display:inline-block;background-color:rgba(0,0,0,0.2);font-size:14px;width:20px;height:20px;text-align:center;line-height:20px;border-radius:50%;cursor:pointer;position:absolute;top:1rem;right:1rem;&:hover{background-color:rgba(0,0,0,0.3);}}"], function (props) {
+  return utils.getColor(props.type)(props);
+}, Icon);
 
-var _willUseSharedState = core.willUseSharedState(),
-    _willUseSharedState2 = _slicedToArray(_willUseSharedState, 3),
-    useNotification = _willUseSharedState2[0],
-    useNotificationRef = _willUseSharedState2[1],
-    setNotification = _willUseSharedState2[2];
+var _willUseSharedState$1 = core.willUseSharedState(),
+    _willUseSharedState2$1 = _slicedToArray(_willUseSharedState$1, 3),
+    useNotification = _willUseSharedState2$1[0],
+    useNotificationRef = _willUseSharedState2$1[1],
+    setNotification = _willUseSharedState2$1[2];
 var willSetNotification = function willSetNotification(str) {
   return function () {
     return setNotification(str);
@@ -2215,15 +2119,24 @@ var Notifications = function Notifications() {
 
   var _useNotification = useNotification(),
       _useNotification2 = _slicedToArray(_useNotification, 2),
-      notification = _useNotification2[0],
+      rawNotification = _useNotification2[0],
       setNotification = _useNotification2[1];
 
+  var _ref = _isObject(rawNotification) ? rawNotification : {
+    type: "success",
+    msg: rawNotification
+  },
+      msg = _ref.msg,
+      type = _ref.type,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 5000 : _ref$timeout;
+
   React.useEffect(function () {
-    if (notification) {
+    if (msg) {
       toggle.open();
-      setTimeout(toggle.willCloseAfter(5000), 100);
+      setTimeout(toggle.willCloseAfter(timeout), 100);
     }
-  }, [notification]);
+  }, [msg]);
   React.useEffect(function () {
     if (!toggle.isOpen) {
       setNotification(null);
@@ -2231,7 +2144,9 @@ var Notifications = function Notifications() {
   }, [toggle.isOpen]);
   return toggle.isOpen && React__default.createElement(core.Fill, {
     name: "Notifications"
-  }, React__default.createElement(FlipNotification, null, notification, React__default.createElement(Icon, {
+  }, React__default.createElement(FlipNotification, {
+    type: type
+  }, utils.callIfFunction(msg, toggle.close), React__default.createElement(Icon, {
     icon: "x",
     onClick: toggle.close
   })));
@@ -2666,11 +2581,11 @@ function (_React$Component) {
       var rectAnimation = getClientRectAnimation(oldSnap.parent, newSnap.parent, {
         skipTransform: true
       });
-      var endEffect = callIfFunction(effect, newSnap.parent.domNode, {
+      var endEffect = utils.callIfFunction(effect, newSnap.parent.domNode, {
         newSnap: newSnap,
         oldSnap: oldSnap
       });
-      callIfFunction(onStartAnimation);
+      utils.callIfFunction(onStartAnimation);
       morph(newSnap.parent.domNode, formatAnimation(rectAnimation, timing), endEffect || onEndAnimation);
     };
 
@@ -3991,10 +3906,10 @@ function _templateObject2$4() {
   return data;
 }
 
-function _templateObject$6() {
+function _templateObject$5() {
   var data = _taggedTemplateLiteral(["\n    font-size: 14px;\n    & > * {\n      padding-top: 15px;\n      padding-bottom: 15px;\n    }\n    ", ", .icon {\n      font-size: 25px;\n    }\n  "]);
 
-  _templateObject$6 = function _templateObject() {
+  _templateObject$5 = function _templateObject() {
     return data;
   };
 
@@ -4009,7 +3924,7 @@ var popupAnimation = utils.animationTiming('0.2s ease-out');
 var ListItem = styled__default.li.withConfig({
   displayName: "ContextMenu__ListItem",
   componentId: "sc-13y1vvt-0"
-})(["position:relative;font-size:12px;& > *{padding:11px 1.5rem 11px 3.5rem;display:block;}", ",.icon{font-size:23px;position:absolute;padding-left:0.25rem;left:0;top:50%;transform:translateY(-50%);width:3.5rem;text-align:center;}", " & > a{color:inherit;font-weight:inherit;text-decoration:inherit;}& > a,& > label{cursor:pointer;}", " ", " input[type=\"radio\"]{display:none;}", " ", " ", " ", ""], Icon, utils.media.mobile(_templateObject$6(), Icon), utils.ifProp('hover', styled.css(["& > a,& > label{background:", ";color:", ";color:", ";}"], function (props) {
+})(["position:relative;font-size:13px;& > *{padding:11px 1.5rem 11px 3.5rem;display:block;}", ",.icon{font-size:23px;position:absolute;padding-left:0.25rem;left:0;top:50%;transform:translateY(-50%);width:3.5rem;text-align:center;}", " & > a{color:inherit;font-weight:inherit;text-decoration:inherit;}& > a,& > label{cursor:pointer;}", " ", " input[type=\"radio\"]{display:none;}", " ", " ", " ", ""], Icon, utils.media.mobile(_templateObject$5(), Icon), utils.ifProp('hover', styled.css(["& > a,& > label{background:", ";color:", ";color:", ";}"], function (props) {
   return polished.lighten(0.53, utils.getColor("main")(props));
 }, utils.getColor('main'), function (props) {
   return polished.darken(0.03, utils.getColor("main")(props));
@@ -4245,7 +4160,7 @@ var Li = function Li(_ref) {
     };
   }, []);
   React.useEffect(function () {
-    if (children && !isMobile()) {
+    if (children && !utils.isMobile()) {
       if (hover) {
         if (!subMenu.isOpen || subMenu.closing || !subPrevented.get()) {
           subMenu.open();
@@ -4333,9 +4248,9 @@ var _willUseLayers$1 = core.willUseLayers(),
 
 var contextMenuLayersQuantity = contextMenuLayersSize;
 
-var _willUseSharedState$1 = core.willUseSharedState(),
-    _willUseSharedState2$1 = _slicedToArray(_willUseSharedState$1, 1),
-    useContextMenuSharedState = _willUseSharedState2$1[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,
@@ -4452,7 +4367,7 @@ var ContextMenuComponent = React.forwardRef(function (_ref2, unesuredRef) {
     });
   };
 
-  var touchStart = createPressAndMoveEvent(function (e, prevPos) {
+  var touchStart = utils.createPressAndMoveEvent(function (e, prevPos) {
     // e.preventDefault()
     e.stopPropagation();
     e.target.dispatchEvent(new MouseEvent('mousemove', {
@@ -4896,7 +4811,7 @@ var BlockContainer$2 = styled__default.div.withConfig({
   componentId: "htfwpl-0"
 })(["position:relative;"]);
 
-var _twoWayAnimation$4 = twoWayAnimation('opacity: 0;', 'opacity: 0;', 'opacity: 1;'),
+var _twoWayAnimation$4 = utils.twoWayAnimation('opacity: 0;', 'opacity: 0;', 'opacity: 1;'),
     _twoWayAnimation2$4 = _slicedToArray(_twoWayAnimation$4, 2),
     fadeIn$3 = _twoWayAnimation2$4[0],
     relativeFadeout = _twoWayAnimation2$4[1];
@@ -4941,7 +4856,7 @@ var SwitchContainer = function SwitchContainer(_ref2) {
   return React__default.createElement(BlockContainer$2, {
     ref: contentRef,
     className: className
-  }, callIfFunction(children));
+  }, utils.callIfFunction(children));
 };
 
 var TOP_TRIGGER = function TOP_TRIGGER(posInfo, refInfo) {
@@ -5070,14 +4985,14 @@ var willUseIsSticky = function willUseIsSticky() {
 
         if (value !== undefined) {
           setIsSticky(value);
-          callIfFunction(onChange, value);
+          utils.callIfFunction(onChange, value);
           setSharedIsSticky(value);
         }
       }
     });
     React.useEffect(function () {
       setIsSticky(false);
-      getObserver(callIfFunction(root)).observe(ensuredRef.current);
+      getObserver(utils.callIfFunction(root)).observe(ensuredRef.current);
       activeObserved = activeObserved.concat(ensuredRef.current);
       return function () {
         // observer.unobserve(ref.current)
@@ -5152,10 +5067,10 @@ var Image = React.forwardRef(function (_ref, ref) {
   }));
 });
 
-function _templateObject$7() {
-  var data = _taggedTemplateLiteral(["\n      @supports (position: sticky) {\n        top: 0;\n        margin: -0.75rem;\n      }\n    "]);
+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;
   };
 
@@ -5164,7 +5079,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:-1.25rem;}", "}"], 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  "]);
@@ -5176,10 +5091,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;
   };
 
@@ -5190,7 +5105,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({
@@ -5329,6 +5244,7 @@ exports.ContextMenu = ContextMenu;
 exports.ContextMenuComponent = ContextMenuComponent;
 exports.DefaultArrow = DefaultArrow;
 exports.DefaultConfirmDialog = DefaultConfirmDialog;
+exports.DefaultWarningDialog = DefaultWarningDialog;
 exports.Dialog = Dialog;
 exports.DialogContainer = DialogContainer;
 exports.DialogContent = DialogContent;
@@ -5376,6 +5292,7 @@ exports.StickyContainer = StickyContainer;
 exports.SwitchDiv = SwitchDiv;
 exports.Tooltip = Tooltip;
 exports.TransitionDiv = TransitionDiv;
+exports.WarningDialog = WarningDialog;
 exports.addPositioningBound = addPositioningBound;
 exports.contextMenuLayersQuantity = contextMenuLayersQuantity;
 exports.defaultAnimationMaker = defaultAnimationMaker;
@@ -5390,8 +5307,11 @@ exports.morph = morph;
 exports.preventDialogPop = preventDialogPop;
 exports.removeWindowScroll = removeWindowScroll;
 exports.setNotification = setNotification;
+exports.setWarningDialog = setWarningDialog;
 exports.toPosition = toPosition;
+exports.useDialog = useDialog;
 exports.useDialogLayers = useDialogLayers;
+exports.useDialogWithToggle = useDialogWithToggle;
 exports.useFlip = useFlip;
 exports.useFlipAnimation = useFlipAnimation;
 exports.useFlipEnter = useFlipEnter;
@@ -5399,6 +5319,7 @@ exports.useFlipLeave = useFlipLeave;
 exports.useNotification = useNotification;
 exports.useNotificationRef = useNotificationRef;
 exports.usePositioning = usePositioning;
+exports.useWarningDialog = useWarningDialog;
 exports.waitForPop = waitForPop;
 exports.willSetNotification = willSetNotification;
 exports.willUseFlip = willUseFlip;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@startlibs/components",
-  "version": "1.0.0-alpha-7w",
+  "version": "1.0.0-alpha-7x",
   "description": "Startlibs Components",
-  "main": "lib/index.js",
+  "main": "src/index.js",
   "sideEffects": false,
   "source": true,
   "peerDependencies": {

package/src/index.js

@@ -0,0 +1,30 @@
+export * from './Button'
+export * from './Dialog'
+export * from './useDialogWithToggle'
+export * from './WarningDialog'
+export * from './Notifications'
+export * from './containers/usePositioning'
+export * from './containers/Reposition'
+export * from './containers/DialogContainer'
+export * from './Draggable'
+export * from './Icon'
+export * from './Tooltip'
+export * from './Loading'
+export * from './SplitColumnsContainer'
+export * from './ContextMenu'
+export * from './ErrorBoundary'
+export * from './Popup'
+export * from './PageLoader'
+export * from './FillLastLineResizer'
+export * from './Flip'
+export * from './FlipList'
+export * from './TransitionDiv'
+export * from './LoadingDiv'
+export * from './SwitchDiv'
+export * from './willUseIsSticky'
+export * from './FormatDate'
+export * from './Image'
+export * from './alt/dialogs/DialogWithImageHeader'
+export * from './alt/dialogs/DialogWithSidebar'
+export * from './alt/dialogs/MobileBubbleDialog'
+export * from './Link'