@mw-kit/mw-ui 1.7.62 → 1.7.64

package/dist/index.modern.js

@@ -15602,18 +15602,21 @@ var Switch = function Switch(props) {
 };
 
 var _templateObject$q, _templateObject2$m;
-var bullet = css(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  appearance: none;\n  width: ", ";\n  height: ", ";\n  border-radius: 100%;\n  border-width: 1px;\n  border-style: solid;\n  box-shadow: 0px 1px 3px ", ";\n\n  background-color: ", ";\n\n  transition: background-color 0.2s ease-in-out;\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.spacings.s4;
+var bullet = css(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  appearance: none;\n  width: ", "px;\n  height: ", "px;\n  border-radius: 100%;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n\n  box-shadow: 0px 1px 3px ", ";\n  box-sizing: border-box;\n\n  background-color: ", ";\n\n  transition: background-color 0.2s ease-in-out;\n"])), function (_ref) {
+  var bulletSize = _ref.$bulletSize;
+  return bulletSize;
 }, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.spacings.s4;
+  var bulletSize = _ref2.$bulletSize;
+  return bulletSize;
 }, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.getColor('black', 10);
+  return theme.colors.platinum;
 }, function (_ref4) {
-  var theme = _ref4.theme,
-      activeBullet = _ref4.$activeBullet;
+  var theme = _ref4.theme;
+  return theme.getColor('black', 10);
+}, function (_ref5) {
+  var theme = _ref5.theme,
+      activeBullet = _ref5.$activeBullet;
   return theme.colors[activeBullet ? 'blue' : 'white'];
 });
 var Input$2 = styled.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);
@@ -15646,47 +15649,26 @@ var LabelContainer$4 = styled.div(_templateObject$t || (_templateObject$t = _tag
 });
 
 var _templateObject$u, _templateObject2$o, _templateObject3$j;
-var NavBar = styled.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 2;\n\n  left: 0;\n  width: 100%;\n  height: calc(33px + ", ");\n  transition: height 0.25s ease-in-out;\n  overflow: hidden;\n\n  ", "\n\n  > div:nth-child(1) {\n    position: absolute;\n    z-index: 2;\n\n    width: 100px;\n    background-color: ", ";\n    color: ", ";\n    padding: ", ";\n    border-radius: 4px;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  > div:nth-child(2) {\n    position: absolute;\n\n    width: ", ";\n    height: ", ";\n    border-radius: 2px 0 0 0;\n\n    transform: rotate(45deg);\n\n    background-color: ", ";\n  }\n"])), function (_ref) {
+var NavBar = styled.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 2;\n\n  left: 0;\n  width: 100%;\n  height: calc(33px + ", ");\n  transition: height 0.25s ease-in-out;\n  overflow: hidden;\n\n  ", "\n\n  > div:nth-child(1) {\n    position: absolute;\n    z-index: 2;\n\n    width: 93px;\n    /* height: 30px; */\n    padding: 9px 7px;\n    font-size: 13px;\n    line-height: 16px;\n    border-radius: 1px;\n\n    background-color: ", ";\n    color: ", ";\n    padding: ", ";\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  > div:nth-child(2) {\n    position: absolute;\n    width: 0px;\n    height: 0px;\n    border-left: 7px solid transparent;\n    border-right: 7px solid transparent;\n    border-top: 5px solid ", ";\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s3;
 }, function (_ref2) {
-  var position = _ref2.position;
-  return position === 'bottom' ? css(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n          bottom: calc(100% + ", ");\n          > div:nth-child(1) {\n            bottom: ", ";\n          }\n\n          > div:nth-child(2) {\n            top: calc(\n              (100% - 19.8px / 2) - ", "\n            );\n          }\n        "])), function (_ref3) {
-    var theme = _ref3.theme;
-    return theme.spacings.s1;
-  }, function (_ref4) {
-    var theme = _ref4.theme;
-    return theme.spacings.s1;
-  }, function (_ref5) {
-    var theme = _ref5.theme;
-    return theme.spacings.s1;
-  }) : css(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n          top: calc(100% + ", ");\n          > div:nth-child(1) {\n            top: ", ";\n          }\n\n          > div:nth-child(2) {\n            bottom: calc(\n              (100% - 19.8px / 2) - ", "\n            );\n          }\n        "])), function (_ref6) {
-    var theme = _ref6.theme;
-    return theme.spacings.s1;
-  }, function (_ref7) {
-    var theme = _ref7.theme;
-    return theme.spacings.s1;
-  }, function (_ref8) {
-    var theme = _ref8.theme;
-    return theme.spacings.s1;
-  });
-}, function (_ref9) {
-  var theme = _ref9.theme;
+  var theme = _ref2.theme,
+      position = _ref2.$position,
+      strict = _ref2.$strict;
+  var distance = strict ? "calc(" + theme.spacings.s1 + " / 2)" : '0px';
+  return position === 'bottom' ? css(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n          bottom: calc(100% + ", ");\n          > div:nth-child(1) {\n            bottom: ", ";\n          }\n\n          > div:nth-child(2) {\n            top: calc(100% - 7px);\n          }\n        "])), distance, theme.spacings.s1) : css(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n          top: calc(100% + ", ");\n          > div:nth-child(1) {\n            top: ", ";\n          }\n\n          > div:nth-child(2) {\n            bottom: calc(100% - 7px);\n            transform: rotate(180deg);\n          }\n        "])), distance, theme.spacings.s1);
+}, function (_ref3) {
+  var theme = _ref3.theme;
   return theme.colors.blue;
-}, function (_ref10) {
-  var theme = _ref10.theme;
+}, function (_ref4) {
+  var theme = _ref4.theme;
   return theme.colors.white;
-}, function (_ref11) {
-  var theme = _ref11.theme;
+}, function (_ref5) {
+  var theme = _ref5.theme;
   return theme.spacings.s1;
-}, function (_ref12) {
-  var theme = _ref12.theme;
-  return theme.spacings.s3;
-}, function (_ref13) {
-  var theme = _ref13.theme;
-  return theme.spacings.s3;
-}, function (_ref14) {
-  var theme = _ref14.theme;
+}, function (_ref6) {
+  var theme = _ref6.theme;
   return theme.colors.blue;
 });
 
@@ -15725,10 +15707,10 @@ var LabelsContainer = styled.div(_templateObject$y || (_templateObject$y = _tagg
   var position = _ref.position;
 
   if (position === 'bottom') {
-    return css(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n        ", " {\n          flex-direction: column-reverse;\n        }\n\n        ", " {\n          :after {\n            bottom: calc(100% + 10.5px);\n          }\n        }\n\n        ", " {\n          align-items: start;\n        }\n      "])), InputContainer$1, Marker, MinMaxLabelContainer);
+    return css(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n        ", " {\n          flex-direction: column-reverse;\n        }\n\n        ", " {\n          :after {\n            bottom: calc(100% + 10px);\n          }\n        }\n\n        ", " {\n          align-items: start;\n        }\n      "])), InputContainer$1, Marker, MinMaxLabelContainer);
   }
 
-  return css(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n      ", " {\n        flex-direction: column;\n      }\n\n      ", " {\n        :after {\n          top: calc(100% + 8px);\n        }\n      }\n\n      ", " {\n        align-items: end;\n      }\n    "])), InputContainer$1, Marker, MinMaxLabelContainer);
+  return css(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n      ", " {\n        flex-direction: column;\n      }\n\n      ", " {\n        :after {\n          top: calc(100% + 9px);\n        }\n      }\n\n      ", " {\n        align-items: end;\n      }\n    "])), InputContainer$1, Marker, MinMaxLabelContainer);
 });
 
 var _templateObject$z;
@@ -15814,12 +15796,18 @@ var getMarkerLeft = function getMarkerLeft(markers, range, index, value, min, st
   return left;
 };
 
-var getBarLeft = function getBarLeft(size, percent) {
-  return "min(max(calc(" + percent + "% - " + size / 2 + "px + 22px * " + (size / 2 - percent) / 100 + "), 0%), calc(100% - " + size + "px))";
+var getLeftCalc = function getLeftCalc(size, bullet, value, min, max) {
+  var percent = (value - min) * 100 / (max - min);
+  var calc = "calc(" + percent + "% - " + bullet * percent / 100 + "px + " + (bullet - size) / 2 + "px)";
+  return calc;
+};
+
+var getBarLeft = function getBarLeft(size, calc) {
+  return "min(max(" + calc + ", 0%), calc(100% - " + size + "px))";
 };
 
-var getIndicatorLeft = function getIndicatorLeft(size, percent) {
-  return "min(max(calc(((" + percent + "% - " + size / 2 + "px + 22px * " + (size / 2 - percent) / 100 + ")) + (" + size / 2 + "px + 2px)), 0%), calc(100% - " + size + "px))";
+var getIndicatorLeft = function getIndicatorLeft(size, calc) {
+  return "min(max(" + calc + ", calc(0% - " + size + "px)), calc(100% - " + size + "px))";
 };
 
 var Range = React__default.forwardRef(function (props, ref) {
@@ -15920,6 +15908,7 @@ var Range = React__default.forwardRef(function (props, ref) {
     onChange: onChange,
     value: value
   });
+  var bulletSize = strict === true ? 22 : 14;
   return React__default.createElement(Label$5, {
     required: required ? 1 : 0,
     disabled: disabled ? 1 : 0,
@@ -15932,7 +15921,7 @@ 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 > currentValue ? 1 : 0;
+    var bullet = strict || marker.value > currentValue && marker.value < max ? 1 : 0;
     return React__default.createElement(Marker, {
       key: index,
       left: left,
@@ -15941,26 +15930,34 @@ var Range = React__default.forwardRef(function (props, ref) {
   })), React__default.createElement("div", null, React__default.createElement(Input$2, Object.assign({
     ref: ref
   }, inputProps, {
-    "$activeBullet": (strict === true ? markers[value].value : value) !== 0
+    "$activeBullet": (strict === true ? markers[value].value : value) !== 0,
+    "$bulletSize": bulletSize
   })), React__default.createElement(NavBar, {
-    position: position
+    "$position": position,
+    "$strict": strict
   }, React__default.createElement("div", {
     style: {
-      left: getBarLeft(100, (value - min) * 100 / (max - min))
+      left: getBarLeft(93, getLeftCalc(93, bulletSize, value, min, max))
     }
   }, React__default.createElement(Icon, {
     type: 'feather',
     icon: 'minus_circle',
     color: 'white',
-    onClick: canDecrement ? decrement : undefined
+    onClick: canDecrement ? decrement : undefined,
+    width: '12px',
+    height: '12px',
+    strokeWidth: '2.5px'
   }), currentValue, React__default.createElement(Icon, {
     type: 'feather',
     icon: 'plus_circle',
     color: 'white',
-    onClick: canIncrement ? increment : undefined
+    onClick: canIncrement ? increment : undefined,
+    width: '12px',
+    height: '12px',
+    strokeWidth: '2.5px'
   })), React__default.createElement("div", {
     style: {
-      left: getIndicatorLeft(14, (value - min) * 100 / (max - min))
+      left: getIndicatorLeft(14, getLeftCalc(14, bulletSize, value, min, max))
     }
   })), React__default.createElement(SelectedArea, {
     percent: percent
@@ -18867,56 +18864,42 @@ var ProgressBar = function ProgressBar(props) {
   return React__default.createElement(Container$m, null, React__default.createElement(Progress, Object.assign({}, props), React__default.createElement("div", null)), React__default.createElement("span", null, " ", props.value || '0', "%"));
 };
 
-var _path$4n;
-
-function _extends$4w() {
-  _extends$4w = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+var _templateObject$13, _templateObject2$P, _templateObject3$I, _templateObject4$v, _templateObject5$s, _templateObject6$q, _templateObject7$q;
+var Container$n = styled.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n  display: block;\n"])));
+var delimiters = {
+  blue: ['blue'],
+  grey: ['warningGray']
+};
+var Tabs = styled.ul(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n  user-select: none;\n  list-style: none;\n  display: inline-flex;\n  padding: 0;\n  margin: 0;\n  width: 100%;\n\n  ", ";\n\n  gap: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme,
+      internal = _ref.$internal,
+      delimiter = _ref.$delimiter;
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  var border = function () {
+    if (delimiter === 'none') {
+      return 'none';
     }
 
-    return target;
-  };
-  return _extends$4w.apply(this, arguments);
-}
-
-function SvgClose(props) {
-  return /*#__PURE__*/createElement("svg", _extends$4w({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "close_svg__feather close_svg__feather-x"
-  }, props), _path$4n || (_path$4n = /*#__PURE__*/createElement("path", {
-    d: "M18 6L6 18M6 6l12 12"
-  })));
-}
+    return internal ? "1px solid " + theme.getColor.apply(theme, delimiters[delimiter || 'grey']) : "2px solid " + theme.getColor.apply(theme, delimiters[delimiter || 'blue']);
+  }();
 
-var _templateObject$13, _templateObject2$P, _templateObject3$I, _templateObject4$v, _templateObject5$s, _templateObject6$q;
-var Container$n = styled.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n  display: block;\n  border-bottom-style: solid;\n\n  ", "\n"])), function (_ref) {
-  var theme = _ref.theme,
-      internal = _ref.internal;
-  return css(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n    margin-bottom: ", ";\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "])), theme.spacings.s2, internal ? '1px' : '2px', internal ? theme.getColor('lightestGrey', 50) : theme.colors.blue);
-});
-var Tabs = styled.ul(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n  user-select: none;\n  list-style: none;\n  display: inline-flex;\n  gap: 1px;\n  padding: 0;\n  margin: 0;\n\n  ", "\n"])), function (_ref2) {
+  return css(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n\n      + div {\n        border: 1px solid ", ";\n        border-top-width: 0px;\n        border-radius: 0px 0px 2px 2px;\n        padding: ", ";\n      }\n    "])), border, theme.getColor.apply(theme, delimiters.grey), theme.spacings.s3);
+}, function (_ref2) {
   var theme = _ref2.theme,
-      internal = _ref2.internal;
-  return css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n    height: ", ";\n    box-shadow: 0 0 10px 0 ", ";\n  "])), internal ? '41px' : '49px', theme.getColor('black', 10));
+      internal = _ref2.$internal;
+  return internal ? theme.spacings.s6 : 0;
 });
-var Tab = styled.li(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: 4px 4px 0 0;\n\n  svg {\n    transform: scale(calc(18 / 24));\n    stroke-width: 2px;\n  }\n\n  ", "\n"])), function (_ref3) {
+var Tab = styled.li(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  ", "\n"])), function (_ref3) {
   var theme = _ref3.theme,
-      active = _ref3.active;
-  return css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    padding: 0 ", ";\n    gap: ", ";\n\n    span {\n      font-family: ", ";\n      font-size: ", ";\n      font-weight: ", ";\n\n      color: ", ";\n    }\n\n    svg {\n      stroke: ", ";\n\n      &:hover {\n        stroke: ", ";\n      }\n    }\n  "])), theme.colors[active ? 'blue' : 'white'], theme.spacings.s2, theme.spacings.s2, theme.typographies.h2.fontFamily, theme.typographies.h2.fontSize, theme.typographies.h2.fontWeight, theme.colors[active ? 'white' : 'darkBlue'], theme.colors[active ? 'white' : 'darkBlue'], theme.colors.red);
+      active = _ref3.$active,
+      internal = _ref3.$internal;
+  return css(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    padding: ", ";\n    gap: ", ";\n\n    ", "\n\n    span {\n      color: ", ";\n    }\n  "])), theme.colors[active ? 'blue' : 'white'], theme.spacings.s3, theme.spacings.s3, internal ? css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n          border-radius: 4px 4px 0 0;\n\n          > span {\n            ", "\n            line-height: 17px;\n          }\n        "])), function (_ref4) {
+    var theme = _ref4.theme;
+    return theme.useTypography('h4');
+  }) : css(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n          box-shadow: 0px 3px 6px ", ";\n\n          > span {\n            ", "\n            line-height: 19px;\n          }\n        "])), theme.getColor('black', 15), function (_ref5) {
+    var theme = _ref5.theme;
+    return theme.useTypography('h2');
+  }), theme.colors[active ? 'white' : 'darkBlue']);
 });
 
 var initialStatus = function initialStatus(active, length) {
@@ -18927,8 +18910,7 @@ var initialStatus = function initialStatus(active, length) {
 
 var Tabs$1 = function Tabs$1(props) {
   var options = props.options,
-      activeState = props.activeState,
-      internal = props.internal;
+      activeState = props.activeState;
   var active = activeState[0],
       setActive = activeState[1];
 
@@ -19014,25 +18996,32 @@ var Tabs$1 = function Tabs$1(props) {
     });
   };
 
-  var Close = props.alwaysOpen ? function () {
-    return null;
-  } : SvgClose;
   return React__default.createElement(Container$n, null, React__default.createElement(Tabs, {
-    internal: +(internal || false)
+    "$internal": props.internal,
+    "$delimiter": props.delimiter
   }, options.reduce(function (elements, tab, index) {
     if (status[index] === 'closed') return elements;
     return [].concat(elements, [React__default.createElement(Tab, {
       key: index,
-      active: +(status[index] === 'active'),
+      "$active": status[index] === 'active',
+      "$internal": props.internal,
       onClick: function onClick(event) {
         return onClickActivate(index, event);
       }
-    }, React__default.createElement("span", null, tab.label), React__default.createElement(Close, {
+    }, React__default.createElement("span", null, tab.label), !props.alwaysOpen && React__default.createElement(Icon, {
+      type: 'feather',
+      icon: 'x',
       onClick: function onClick() {
         return onClickClose(index);
-      }
+      },
+      width: '14px',
+      height: '14px',
+      strokeWidth: '3px',
+      color: status[index] === 'active' ? 'white' : 'darkBlue'
     }))]);
-  }, [])));
+  }, [])), props.children && React__default.createElement("div", {
+    children: props.children
+  }));
 };
 
 var _templateObject$14;