@mw-kit/mw-ui 1.7.57 → 1.7.59

package/dist/components/Input/components/Range/styles/Input/index.d.ts

@@ -1,2 +1,4 @@
-declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
+    $activeBullet: boolean;
+}, never>;
 export default Input;

package/dist/index.js

@@ -62,6 +62,7 @@ var colors = {
   darkGrey: '#949494',
   darkSilver: '#525A6A',
   floralWhite: '#FFFAF3',
+  ghostWhite: '#F9FAFB',
   green: '#76B100',
   grey: '#ADADAD',
   greyishBlue: '#263046',
@@ -73,6 +74,7 @@ var colors = {
   milkWhite: '#FCFFF5',
   orange: '#FB8702',
   pink: '#E23851',
+  platinum: '#E2E2E3',
   purple: '#8E66BB',
   red: '#C31717',
   silver: '#B2B2B2',
@@ -200,20 +202,9 @@ var keys = function keys(value) {
 var notEmptyString = function notEmptyString(value) {
   return typeof value === 'string' && value.trim() !== '';
 };
-var isNumber = function isNumber(value) {
-  return typeof value === 'number' && isFinite(value);
-};
-var isNumeric = function isNumeric(value) {
-  if (isNumber(value)) return true;
-  if (!isString(value)) return false;
-  return !isNaN(parseFloat(value));
-};
 var isBoolean = function isBoolean(value) {
   return typeof value === 'boolean';
 };
-var isNumericString = function isNumericString(value) {
-  return notEmptyString(value) && isNumeric(value);
-};
 var isString = function isString(value) {
   return typeof value === 'string';
 };
@@ -335,11 +326,6 @@ var filterObject = function filterObject(object, remove, inital) {
   }, inital);
   return r;
 };
-var numberOrDefault = function numberOrDefault(value, defaultValue) {
-  if (isNumber(value)) return value;
-  if (isNumericString(value)) return parseFloat(value);
-  return defaultValue;
-};
 var isoStringToDate = function isoStringToDate(value) {
   var _value$split = value.split(' '),
       d = _value$split[0],
@@ -13745,8 +13731,8 @@ var getTimeProps = function getTimeProps(time, value) {
   });
 };
 
-var _templateObject$e, _templateObject2$c, _templateObject3$b, _templateObject4$9, _templateObject5$8, _templateObject6$7, _templateObject7$7, _templateObject8$6, _templateObject9$6, _templateObject10$6, _templateObject11$3, _templateObject12$2;
-var Button = styled__default.button(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  padding: 0\n    ", ";\n  font-family: 'Lato', sans-serif;\n  font-weight: ", ";\n  border-radius: 4px;\n  position: relative;\n  user-select: none;\n\n  ", ";\n\n  ", ";\n\n  color: ", ";\n\n  :disabled {\n    ", "\n  }\n\n  :hover {\n    cursor: ", ";\n\n    ", "\n  }\n\n  :active {\n    ", ";\n  }\n\n  ", "\n"])), function (_ref) {
+var _templateObject$e, _templateObject2$c, _templateObject3$b, _templateObject4$9, _templateObject5$8, _templateObject6$7, _templateObject7$7, _templateObject8$6, _templateObject9$6, _templateObject10$6;
+var Button = styled__default.button(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  padding: 0\n    ", ";\n  font-family: 'Lato', sans-serif;\n  font-weight: ", ";\n  border-radius: 4px;\n  position: relative;\n  user-select: none;\n\n  ", ";\n\n  ", ";\n\n  color: ", ";\n\n  :disabled {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n\n  :hover {\n    cursor: ", ";\n\n    ", "\n  }\n\n  :active {\n    ", ";\n  }\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme,
       appearance = _ref.appearance;
   return appearance === 'link' ? 0 : theme.spacings.s3;
@@ -13782,49 +13768,39 @@ var Button = styled__default.button(_templateObject$e || (_templateObject$e = _t
 
   return theme.getColor('white');
 }, function (_ref6) {
-  var appearance = _ref6.appearance,
-      loading = _ref6.loading,
-      theme = _ref6.theme;
+  var loading = _ref6.loading,
+      disabled = _ref6.disabled;
+  return loading || disabled ? 'default' : 'pointer';
+}, function (_ref7) {
+  var appearance = _ref7.appearance,
+      color = _ref7.color,
+      theme = _ref7.theme;
 
-  if (['bordered', 'link', 'borderless'].includes(appearance)) {
-    return styled.css(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n          opacity: 0.3;\n          pointer-events: none;\n        "])));
+  if (appearance === 'bordered') {
+    return styled.css(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n          border: 1px solid ", ";\n        "])), theme.getColor(color || 'blue', 70), theme.getColor(color || 'blue', 70));
+  } else if (['link', 'borderless'].includes(appearance)) {
+    return styled.css(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n        "])), theme.colors.blue);
   }
 
-  return styled.css(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        border-color: ", ";\n        color: ", ";\n        pointer-events: none;\n      "])), theme.getColor('greyishBlue', 10), theme.getColor('greyishBlue', 10), loading ? 'transparent' : theme.getColor('greyishBlue', 30));
-}, function (_ref7) {
-  var loading = _ref7.loading,
-      disabled = _ref7.disabled;
-  return loading || disabled ? 'default' : 'pointer';
+  return styled.css(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        border-color: ", ";\n      "])), theme.getColor(color || 'blue', 70), theme.getColor(color || 'blue', 70));
 }, function (_ref8) {
   var appearance = _ref8.appearance,
       color = _ref8.color,
       theme = _ref8.theme;
 
   if (appearance === 'bordered') {
-    return styled.css(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n          border: 1px solid ", ";\n        "])), theme.getColor(color || 'blue', 70), theme.getColor(color || 'blue', 70));
-  } else if (['link', 'borderless'].includes(appearance)) {
-    return styled.css(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n        "])), theme.colors.blue);
-  }
-
-  return styled.css(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        border-color: ", ";\n      "])), theme.getColor(color || 'blue', 70), theme.getColor(color || 'blue', 70));
-}, function (_ref9) {
-  var appearance = _ref9.appearance,
-      color = _ref9.color,
-      theme = _ref9.theme;
-
-  if (appearance === 'bordered') {
-    return styled.css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n          background-color: ", ";\n        "])), theme.getColor('iceWhite'));
+    return styled.css(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteralLoose(["\n          background-color: ", ";\n        "])), theme.getColor('iceWhite'));
   }
 
   if (['link', 'borderless'].includes(appearance)) {
-    return styled.css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n        "])), theme.getColor('blue', 50));
+    return styled.css(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n        "])), theme.getColor('blue', 50));
   }
 
-  return styled.css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), theme.getColor(color || 'blue'));
-}, function (_ref10) {
-  var loading = _ref10.loading;
+  return styled.css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), theme.getColor(color || 'blue'));
+}, function (_ref9) {
+  var loading = _ref9.loading;
   if (!loading) return;
-  return styled.css(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n    "])));
+  return styled.css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n    "])));
 });
 
 var _excluded = ["children", "content"];
@@ -15640,11 +15616,10 @@ var bullet = styled.css(_templateObject$q || (_templateObject$q = _taggedTemplat
 }, function (_ref3) {
   var theme = _ref3.theme;
   return theme.getColor('black', 10);
-}, function (props) {
-  var theme = props.theme;
-  var min = numberOrDefault(props.min, 0);
-  var value = numberOrDefault(props.value, 0);
-  return theme.colors[min > 0 || value > min ? 'blue' : 'white'];
+}, function (_ref4) {
+  var theme = _ref4.theme,
+      activeBullet = _ref4.$activeBullet;
+  return theme.colors[activeBullet ? 'blue' : 'white'];
 });
 var Input$2 = styled__default.input(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n  appearance: none;\n  width: 100%;\n  height: 10px;\n  background-color: transparent;\n  outline: none;\n  position: relative;\n  z-index: 3;\n  margin: 0;\n\n  :not(:disabled) {\n    cursor: pointer;\n  }\n\n  /** firefox */\n  ::-moz-range-thumb {\n    ", "\n  }\n  /** ie */\n  ::-ms-thumb {\n    ", "\n  }\n  /** chrome */\n  ::-webkit-slider-thumb {\n    ", "\n  }\n"])), bullet, bullet, bullet);
 
@@ -15887,6 +15862,7 @@ var Range = React__default.forwardRef(function (props, ref) {
     var value = typeof v === 'number' ? v : parseFloat(v);
     return value;
   };
+  var currentValue = getValue(value);
 
   var _onChange = props.onChange || function (_event, value) {
     return setValue(value);
@@ -15961,15 +15937,17 @@ var Range = React__default.forwardRef(function (props, ref) {
     invalid: invalid ? 1 : 0
   }, markers.length > 0 && React__default.createElement(MarkersContainer, null, markers.map(function (marker, index) {
     var left = getMarkerLeft(markers.length, range, index, marker.value, min, strict);
-    var bullet = marker.value > value ? 1 : 0;
+    var bullet = marker.value > currentValue ? 1 : 0;
     return React__default.createElement(Marker, {
-      key: marker.value,
+      key: index,
       left: left,
       bullet: bullet
     }, marker.label);
   })), React__default.createElement("div", null, React__default.createElement(Input$2, Object.assign({
     ref: ref
-  }, inputProps)), React__default.createElement(NavBar, {
+  }, inputProps, {
+    "$activeBullet": (strict === true ? markers[value].value : value) !== 0
+  })), React__default.createElement(NavBar, {
     position: position
   }, React__default.createElement("div", {
     style: {
@@ -15980,7 +15958,7 @@ var Range = React__default.forwardRef(function (props, ref) {
     icon: 'minus_circle',
     color: 'white',
     onClick: canDecrement ? decrement : undefined
-  }), getValue(value), React__default.createElement(Icon, {
+  }), currentValue, React__default.createElement(Icon, {
     type: 'feather',
     icon: 'plus_circle',
     color: 'white',
@@ -16242,7 +16220,7 @@ var parse = function parse(value) {
   });
 };
 
-var _templateObject$B, _templateObject2$t, _templateObject3$n, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$b, _templateObject8$8, _templateObject9$8, _templateObject10$7, _templateObject11$4, _templateObject12$3;
+var _templateObject$B, _templateObject2$t, _templateObject3$n, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$b, _templateObject8$8, _templateObject9$8, _templateObject10$7, _templateObject11$3, _templateObject12$2;
 var RelativeContainer$5 = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  position: relative;\n  user-select: none;\n  min-width: 220px;\n\n  > input,\n  > label > input {\n    color: transparent;\n    background-color: transparent;\n    width: 1px;\n    height: 1px;\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    border: 0;\n    padding: 0;\n    overflow: hidden;\n    outline: none;\n    box-shadow: none;\n  }\n"])));
 var LabelContainer$6 = styled__default.div(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 17px;\n  flex: 1;\n\n  :first-child {\n    text-align: left;\n  }\n  :not(:first-child) {\n    text-align: center;\n  }\n\n  ", "\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -16292,13 +16270,13 @@ var Button$4 = styled__default.button(_templateObject9$8 || (_templateObject9$8
   if (!onClick) return;
   return styled.css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
-var LabelText$1 = styled__default.label(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref12) {
+var LabelText$1 = styled__default.label(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref12) {
   var theme = _ref12.theme;
   return theme.spacings.s1;
 }, function (_ref13) {
   var required = _ref13.required;
   if (!required) return;
-  return styled.css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
+  return styled.css(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 
 var Component$1 = React__default.forwardRef(function (props, ref) {
@@ -17787,7 +17765,7 @@ var useContext$2 = function useContext() {
   return React__default.useContext(Provider$2);
 };
 
-var _templateObject$M, _templateObject2$z, _templateObject3$s, _templateObject4$h, _templateObject5$e, _templateObject6$d, _templateObject7$d, _templateObject8$a, _templateObject9$a, _templateObject10$9, _templateObject11$5, _templateObject12$4, _templateObject13$2, _templateObject14$2, _templateObject15$2;
+var _templateObject$M, _templateObject2$z, _templateObject3$s, _templateObject4$h, _templateObject5$e, _templateObject6$d, _templateObject7$d, _templateObject8$a, _templateObject9$a, _templateObject10$9, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$2, _templateObject15$2;
 var aligns = {
   self: {
     horizontal: {
@@ -17878,13 +17856,13 @@ var Col = styled__default.div(_templateObject$M || (_templateObject$M = _taggedT
   var bordered = _ref5.bordered,
       lightestGrey = _ref5.theme.colors.lightestGrey;
   if (!bordered) return;
-  return styled.css(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-right: 1px solid ", ";\n      }\n    "])), lightestGrey);
+  return styled.css(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-right: 1px solid ", ";\n      }\n    "])), lightestGrey);
 }, function (_ref6) {
   var fontColor = _ref6.fontColor,
       theme = _ref6.theme;
   if (fontColor === undefined) return;
   var c = Array.isArray(fontColor) ? theme.getColor.apply(theme, fontColor) : theme.colors[fontColor];
-  return styled.css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), c);
+  return styled.css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), c);
 }, function (_ref7) {
   var backgroundColor = _ref7.backgroundColor,
       theme = _ref7.theme;
@@ -18304,7 +18282,7 @@ var Modal$1 = Object.assign(Modal, {
   Audit: Audit
 });
 
-var _templateObject$T, _templateObject2$D, _templateObject3$w, _templateObject4$k, _templateObject5$h, _templateObject6$g, _templateObject7$g, _templateObject8$d, _templateObject9$d, _templateObject10$c, _templateObject11$6;
+var _templateObject$T, _templateObject2$D, _templateObject3$w, _templateObject4$k, _templateObject5$h, _templateObject6$g, _templateObject7$g, _templateObject8$d, _templateObject9$d, _templateObject10$c, _templateObject11$5;
 var Container$c = styled__default.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
 var Header$6 = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var HeaderImage = styled__default.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
@@ -18321,7 +18299,7 @@ var HeaderLine = styled__default.div(_templateObject6$g || (_templateObject6$g =
 }, function (props) {
   return props.size === 'large' && styled.css(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var MainLine = styled__default(HeaderLine)(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
+var MainLine = styled__default(HeaderLine)(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
 
 var Template1 = function Template1(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -18706,7 +18684,7 @@ var Template8$1 = function Template8(props) {
   })), React__default.createElement(Main$4, null, React__default.createElement(Circle$2, null)));
 };
 
-var _templateObject$11, _templateObject2$N, _templateObject3$G, _templateObject4$t, _templateObject5$q, _templateObject6$o, _templateObject7$o, _templateObject8$l, _templateObject9$j, _templateObject10$f, _templateObject11$7;
+var _templateObject$11, _templateObject2$N, _templateObject3$G, _templateObject4$t, _templateObject5$q, _templateObject6$o, _templateObject7$o, _templateObject8$l, _templateObject9$j, _templateObject10$f, _templateObject11$6;
 var Container$l = styled__default.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$c = styled__default.div(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$9 = styled__default.div(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 7px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
@@ -18729,7 +18707,7 @@ var CustomLine$6 = styled__default(HeaderLine$9)(_templateObject8$l || (_templat
 });
 var GraphLine = styled__default(CustomLine$6)(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
 var Main$5 = styled__default.div(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  padding: 0 7px 72px 7px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  justify-content: center;\n"])));
-var Circle$3 = styled__default.div(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
+var Circle$3 = styled__default.div(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
 
 var Template10 = function Template10(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);