@mw-kit/mw-ui 1.6.10 → 1.6.11

package/dist/index.modern.js

@@ -15251,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  user-select: none;\n  min-width: 220px;\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  white-space: nowrap;\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    "])));
 });
@@ -15371,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: {
@@ -15388,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',