@mw-kit/mw-ui 1.6.8 → 1.6.11

package/dist/index.modern.js

@@ -12597,7 +12597,7 @@ var getMask = function getMask(mask) {
   };
 };
 
-var _templateObject$c, _templateObject2$a, _templateObject3$a, _templateObject4$9, _templateObject5$8, _templateObject6$6, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1;
+var _templateObject$c, _templateObject2$a, _templateObject3$a, _templateObject4$9, _templateObject5$8, _templateObject6$6, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1;
 var IconContainer = styled.button(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 17px;\n\n  background-color: transparent;\n  border: none;\n  box-shadow: none;\n  padding: 0;\n\n  ", "\n"])), function (_ref) {
   var onClick = _ref.onClick,
       disabled = _ref.disabled;
@@ -12655,7 +12655,7 @@ var Input = styled.input(_templateObject3$a || (_templateObject3$a = _taggedTemp
   if (!readOnly) return;
   return css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n      cursor: ", ";\n    "])), !onClick || disabled ? 'unset' : 'pointer');
 });
-var Label = styled.label(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n\n  ", "\n\n  > div:first-child {\n    display: inline-block;\n    margin-bottom: ", ";\n\n    ", "\n  }\n\n  > ", " {\n    bottom: ", ";\n  }\n\n  ", "\n"])), function (_ref13) {
+var Label = styled.label(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n\n  ", "\n\n  > ", " {\n    bottom: ", ";\n  }\n\n  ", "\n"])), function (_ref13) {
   var theme = _ref13.theme;
   return theme.useTypography('p');
 }, function (_ref14) {
@@ -12668,31 +12668,32 @@ var Label = styled.label(_templateObject9$3 || (_templateObject9$3 = _taggedTemp
   var disabled = _ref16.disabled;
   if (!disabled) return;
   return css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
-}, function (_ref17) {
-  var theme = _ref17.theme;
-  return theme.spacings.s1;
-}, function (_ref18) {
-  var required = _ref18.required;
-  if (!required) return;
-  return css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n        :after {\n          content: ' *';\n        }\n      "])));
-}, IconContainer, function (_ref19) {
-  var theme = _ref19.theme,
-      paddingless = _ref19.paddingless;
+}, IconContainer, function (_ref17) {
+  var theme = _ref17.theme,
+      paddingless = _ref17.paddingless;
   return paddingless ? '2px' : "calc(" + theme.spacings.s2 + " + 1px)";
-}, function (_ref20) {
-  var theme = _ref20.theme,
-      icon = _ref20.icon,
-      paddingless = _ref20.paddingless;
+}, function (_ref18) {
+  var theme = _ref18.theme,
+      icon = _ref18.icon,
+      paddingless = _ref18.paddingless;
   if (!icon) return;
   var width = icon.width,
       position = icon.position;
   var padding = paddingless ? '0px' : theme.spacings.s3;
 
   if (position === 'right') {
-    return css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n        > ", " {\n          width: ", ";\n          right: calc(", " / 2);\n        }\n\n        > ", " {\n          padding-right: calc(", " + ", ");\n        }\n      "])), IconContainer, width, padding, Input, padding, width);
+    return css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n        > ", " {\n          width: ", ";\n          right: calc(", " / 2);\n        }\n\n        > ", " {\n          padding-right: calc(", " + ", ");\n        }\n      "])), IconContainer, width, padding, Input, padding, width);
   }
 
-  return css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n      > ", " {\n        width: ", ";\n        left: calc(", " / 2);\n      }\n\n      > ", " {\n        padding-left: calc(", " + ", ");\n      }\n    "])), IconContainer, width, padding, Input, padding, width);
+  return css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n      > ", " {\n        width: ", ";\n        left: calc(", " / 2);\n      }\n\n      > ", " {\n        padding-left: calc(", " + ", ");\n      }\n    "])), IconContainer, width, padding, Input, padding, width);
+});
+var LabelText = styled.div(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref19) {
+  var theme = _ref19.theme;
+  return theme.spacings.s1;
+}, function (_ref20) {
+  var required = _ref20.required;
+  if (!required) return;
+  return css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 
 var Input$1 = React__default.forwardRef(function (props, ref) {
@@ -12832,13 +12833,14 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
   } : undefined;
   if (htmlDisabled) inputProps.disabled = true;
   return React__default.createElement(Label, {
-    required: intRequired,
     disabled: intDisabled,
     invalid: intInvalid,
     paddingless: intPaddingless,
     icon: iconProps,
     width: width
-  }, React__default.createElement("div", null, label), React__default.createElement(Input, Object.assign({}, inputProps, {
+  }, label && React__default.createElement(LabelText, {
+    required: intRequired
+  }, label), React__default.createElement(Input, Object.assign({}, inputProps, {
     ref: ref
   })), icon && React__default.createElement(IconContainer, {
     type: iconSubmit ? 'submit' : 'button',
@@ -14675,7 +14677,7 @@ var Switch = function Switch(props) {
   })), React__default.createElement("span", null), label && React__default.createElement(LabelContainer$1, null, label));
 };
 
-var _templateObject$n, _templateObject2$j, _templateObject3$h, _templateObject4$e, _templateObject5$d, _templateObject6$b, _templateObject7$9, _templateObject8$6, _templateObject9$6, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$3, _templateObject14$1, _templateObject15, _templateObject16;
+var _templateObject$n, _templateObject2$j, _templateObject3$h, _templateObject4$e, _templateObject5$d, _templateObject6$b, _templateObject7$9, _templateObject8$6, _templateObject9$6, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$3, _templateObject14$2, _templateObject15, _templateObject16;
 var bullet = css(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  appearance: none;\n  width: ", ";\n  height: ", ";\n  border-radius: 100%;\n  border-width: 1px;\n  border-style: solid;\n  background-color: ", ";\n  box-shadow: 0px 1px 3px ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s4;
@@ -14735,7 +14737,7 @@ var SelectedArea = styled.div(_templateObject13$3 || (_templateObject13$3 = _tag
   var percent = _ref13.percent;
   return percent;
 });
-var MarkersContainer = styled.div(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n  height: 17px;\n"])));
+var MarkersContainer = styled.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n  height: 17px;\n"])));
 var Marker = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  width: 40px;\n  text-align: center;\n  left: ", ";\n  z-index: 2;\n\n  :first-child {\n    left: 0;\n    text-align: left;\n\n    :after {\n      left: 0;\n    }\n  }\n  :last-child {\n    right: 0;\n    left: unset;\n    text-align: right;\n\n    :after {\n      right: 0;\n      left: unset;\n    }\n  }\n\n  ", "\n"])), function (_ref14) {
   var left = _ref14.left;
   return left;
@@ -15249,41 +15251,45 @@ var parse = function parse(value) {
 };
 
 var _templateObject$q, _templateObject2$l, _templateObject3$j, _templateObject4$g, _templateObject5$f, _templateObject6$d, _templateObject7$b, _templateObject8$7, _templateObject9$7, _templateObject10$5;
-var RelativeContainer$5 = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  > :nth-child(1) input {\n    color: transparent;\n  }\n"])));
-var LabelContainer$3 = styled.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: ", ";\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.useTypography('p');
-}, function (_ref2) {
+var RelativeContainer$5 = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  position: relative;\n  user-select: none;\n  min-width: 220px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  border-radius: 4px;\n\n  > :nth-child(1) input {\n    color: transparent;\n  }\n"])), function (_ref) {
+  var theme = _ref.theme,
+      invalid = _ref.invalid;
+  return invalid ? theme.colors.warningRed : theme.colors.lightGrey;
+});
+var LabelContainer$3 = styled.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: ", ";\n"])), function (_ref2) {
   var theme = _ref2.theme;
+  return theme.useTypography('p');
+}, function (_ref3) {
+  var theme = _ref3.theme;
   return theme.spacings.s3;
 });
-var Container$a = styled.div(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-radius: 4px;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
-  var theme = _ref3.theme,
-      iconWidth = _ref3.iconWidth,
-      paddingless = _ref3.paddingless;
+var Container$a = styled.div(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-radius: 4px;\n  white-space: nowrap;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref4) {
+  var theme = _ref4.theme,
+      iconWidth = _ref4.iconWidth,
+      paddingless = _ref4.paddingless;
 
   if (paddingless) {
     return css(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n        width: calc(100% - 2px - ", ");\n        height: 19px;\n      "])), iconWidth);
   }
 
   return css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n      width: calc(100% - 2px - ", " - ", ");\n      height: 33px;\n      padding: ", " 0 ", " ", ";\n    "])), iconWidth, theme.spacings.s3, theme.spacings.s2, theme.spacings.s2, theme.spacings.s3);
-}, function (_ref4) {
-  var invalid = _ref4.invalid,
-      theme = _ref4.theme;
-  if (!invalid) return;
-  return css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), theme.colors.warningRed);
 }, function (_ref5) {
   var invalid = _ref5.invalid,
       theme = _ref5.theme;
   if (!invalid) return;
-  return css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), theme.colors.warningRed);
+  return css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), theme.colors.warningRed);
 }, function (_ref6) {
-  var disabled = _ref6.disabled;
+  var invalid = _ref6.invalid,
+      theme = _ref6.theme;
+  if (!invalid) return;
+  return css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), theme.colors.warningRed);
+}, function (_ref7) {
+  var disabled = _ref7.disabled;
   if (!disabled) return;
   return css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 });
-var Button$4 = styled.button(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-shadow: none;\n\n  ", ";\n"])), function (_ref7) {
-  var onClick = _ref7.onClick;
+var Button$4 = styled.button(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-shadow: none;\n\n  ", ";\n"])), function (_ref8) {
+  var onClick = _ref8.onClick;
   if (!onClick) return;
   return css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
@@ -15369,8 +15375,12 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
   return React__default.createElement(RelativeContainer$5, {
     ref: useOnClickOut(function () {
       return setOpen(null);
-    })
+    }),
+    invalid: invalid
   }, React__default.createElement(Input$1, Object.assign({}, inputProps, {
+    style: {
+      width: 0
+    },
     type: 'text',
     ref: ref,
     icon: {
@@ -15386,7 +15396,7 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
         });
       }
     },
-    invalid: invalid,
+    borderless: true,
     htmlDisabled: true
   })), React__default.createElement(Container$a, {
     iconWidth: '24px',
@@ -17029,7 +17039,7 @@ var useContext$2 = function useContext() {
   return React__default.useContext(Provider$2);
 };
 
-var _templateObject$M, _templateObject2$C, _templateObject3$A, _templateObject4$w, _templateObject5$u, _templateObject6$q, _templateObject7$n, _templateObject8$j, _templateObject9$h, _templateObject10$c, _templateObject11$6, _templateObject12$4, _templateObject13$4, _templateObject14$2, _templateObject15$1;
+var _templateObject$M, _templateObject2$C, _templateObject3$A, _templateObject4$w, _templateObject5$u, _templateObject6$q, _templateObject7$n, _templateObject8$j, _templateObject9$h, _templateObject10$c, _templateObject11$6, _templateObject12$4, _templateObject13$4, _templateObject14$3, _templateObject15$1;
 var aligns = {
   self: {
     horizontal: {
@@ -17139,7 +17149,7 @@ var Col = styled.div(_templateObject$M || (_templateObject$M = _taggedTemplateLi
   if (!hover) return;
   var h = hover === true ? ['lightGrey', 50] : hover;
   var c = Array.isArray(h) ? theme.getColor.apply(theme, h) : theme.colors[h];
-  return css(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
+  return css(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
 }, function (_ref9) {
   var pointer = _ref9.pointer;
   if (!pointer) return;