@fle-ui/next 3.0.0-alpha.3 → 3.0.0-beta.2

package/es/input/style/index.js

@@ -1,8 +1,11 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { genComponentStyleHook, mergeToken } from "../../theme/internal";
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { unit } from '@ant-design/cssinjs';
 import { clearFix, resetComponent } from "../../style";
 import { genCompactItemStyle } from "../../style/compact-item";
+import { genStyleHooks, mergeToken } from "../../theme/internal";
 export var genPlaceholderStyle = function genPlaceholderStyle(color) {
   return {
     // Firefox
@@ -12,8 +15,8 @@ export var genPlaceholderStyle = function genPlaceholderStyle(color) {
     '&::placeholder': {
       color: color,
       userSelect: 'none' // https://github.com/ant-design/ant-design/pull/32639
-
     },
+
     '&:placeholder-shown': {
       textOverflow: 'ellipsis'
     }
@@ -21,16 +24,16 @@ export var genPlaceholderStyle = function genPlaceholderStyle(color) {
 };
 export var genHoverStyle = function genHoverStyle(token) {
   return {
-    borderColor: token.inputBorderHoverColor,
-    borderInlineEndWidth: token.lineWidth
+    borderColor: token.hoverBorderColor,
+    backgroundColor: token.hoverBg
   };
 };
 export var genActiveStyle = function genActiveStyle(token) {
   return {
-    borderColor: token.inputBorderHoverColor,
-    boxShadow: "0 0 0 " + token.controlOutlineWidth + "px " + token.controlOutline,
-    borderInlineEndWidth: token.lineWidth,
-    outline: 0
+    borderColor: token.activeBorderColor,
+    boxShadow: token.activeShadow,
+    outline: 0,
+    backgroundColor: token.activeBg
   };
 };
 export var genDisabledStyle = function genDisabledStyle(token) {
@@ -41,76 +44,71 @@ export var genDisabledStyle = function genDisabledStyle(token) {
     boxShadow: 'none',
     cursor: 'not-allowed',
     opacity: 1,
-    '&:hover': _extends({}, genHoverStyle(mergeToken(token, {
-      inputBorderHoverColor: token.colorBorder
+    '&:hover:not([disabled])': Object.assign({}, genHoverStyle(mergeToken(token, {
+      hoverBorderColor: token.colorBorder,
+      hoverBg: token.colorBgContainerDisabled
     })))
   };
 };
-
 var genInputLargeStyle = function genInputLargeStyle(token) {
-  var inputPaddingVerticalLG = token.inputPaddingVerticalLG,
-      inputPaddingHorizontal = token.inputPaddingHorizontal,
-      fontSizeLG = token.fontSizeLG,
-      lineHeightLG = token.lineHeightLG,
-      borderRadiusLG = token.borderRadiusLG;
+  var paddingBlockLG = token.paddingBlockLG,
+    fontSizeLG = token.fontSizeLG,
+    lineHeightLG = token.lineHeightLG,
+    borderRadiusLG = token.borderRadiusLG,
+    paddingInlineLG = token.paddingInlineLG;
   return {
-    padding: inputPaddingVerticalLG + "px " + inputPaddingHorizontal + "px",
+    padding: "".concat(unit(paddingBlockLG), " ").concat(unit(paddingInlineLG)),
     fontSize: fontSizeLG,
     lineHeight: lineHeightLG,
     borderRadius: borderRadiusLG
   };
 };
-
 export var genInputSmallStyle = function genInputSmallStyle(token) {
   return {
-    padding: token.inputPaddingVerticalSM + "px " + (token.controlPaddingHorizontalSM - 1) + "px",
+    padding: "".concat(unit(token.paddingBlockSM), " ").concat(unit(token.paddingInlineSM)),
     borderRadius: token.borderRadiusSM
   };
 };
-export var genStatusStyle = function genStatusStyle(token) {
+export var genStatusStyle = function genStatusStyle(token, parentCls) {
+  var _ref;
   var componentCls = token.componentCls,
-      colorError = token.colorError,
-      colorWarning = token.colorWarning,
-      colorErrorOutline = token.colorErrorOutline,
-      colorWarningOutline = token.colorWarningOutline,
-      colorErrorBorderHover = token.colorErrorBorderHover,
-      colorWarningBorderHover = token.colorWarningBorderHover;
-  return {
-    '&-status-error:not(&-disabled):not(&-borderless)&': _defineProperty({
-      borderColor: colorError,
-      '&:hover': {
-        borderColor: colorErrorBorderHover
-      },
-      '&:focus, &-focused': _extends({}, genActiveStyle(mergeToken(token, {
-        inputBorderActiveColor: colorError,
-        inputBorderHoverColor: colorError,
-        controlOutline: colorErrorOutline
-      })))
-    }, componentCls + "-prefix", {
-      color: colorError
-    }),
-    '&-status-warning:not(&-disabled):not(&-borderless)&': _defineProperty({
-      borderColor: colorWarning,
-      '&:hover': {
-        borderColor: colorWarningBorderHover
-      },
-      '&:focus, &-focused': _extends({}, genActiveStyle(mergeToken(token, {
-        inputBorderActiveColor: colorWarning,
-        inputBorderHoverColor: colorWarning,
-        controlOutline: colorWarningOutline
-      })))
-    }, componentCls + "-prefix", {
-      color: colorWarning
-    })
-  };
+    colorError = token.colorError,
+    colorWarning = token.colorWarning,
+    errorActiveShadow = token.errorActiveShadow,
+    warningActiveShadow = token.warningActiveShadow,
+    colorErrorBorderHover = token.colorErrorBorderHover,
+    colorWarningBorderHover = token.colorWarningBorderHover;
+  return _ref = {}, _defineProperty(_ref, "&-status-error:not(".concat(parentCls, "-disabled):not(").concat(parentCls, "-borderless)").concat(parentCls), _defineProperty({
+    borderColor: colorError,
+    '&:hover': {
+      borderColor: colorErrorBorderHover
+    },
+    '&:focus, &:focus-within': Object.assign({}, genActiveStyle(mergeToken(token, {
+      activeBorderColor: colorError,
+      activeShadow: errorActiveShadow
+    })))
+  }, "".concat(componentCls, "-prefix, ").concat(componentCls, "-suffix"), {
+    color: colorError
+  })), _defineProperty(_ref, "&-status-warning:not(".concat(parentCls, "-disabled):not(").concat(parentCls, "-borderless)").concat(parentCls), _defineProperty({
+    borderColor: colorWarning,
+    '&:hover': {
+      borderColor: colorWarningBorderHover
+    },
+    '&:focus, &:focus-within': Object.assign({}, genActiveStyle(mergeToken(token, {
+      activeBorderColor: colorWarning,
+      activeShadow: warningActiveShadow
+    })))
+  }, "".concat(componentCls, "-prefix, ").concat(componentCls, "-suffix"), {
+    color: colorWarning
+  })), _ref;
 };
 export var genBasicInputStyle = function genBasicInputStyle(token) {
-  return _extends(_extends({
+  return Object.assign(Object.assign({
     position: 'relative',
     display: 'inline-block',
     width: '100%',
     minWidth: 0,
-    padding: token.inputPaddingVertical + "px " + token.inputPaddingHorizontal + "px",
+    padding: "".concat(unit(token.paddingBlock), " ").concat(unit(token.paddingInline)),
     color: token.colorText,
     fontSize: token.fontSize,
     lineHeight: token.lineHeight,
@@ -120,11 +118,11 @@ export var genBasicInputStyle = function genBasicInputStyle(token) {
     borderStyle: token.lineType,
     borderColor: token.colorBorder,
     borderRadius: token.borderRadius,
-    transition: "all " + token.motionDurationMid
+    transition: "all ".concat(token.motionDurationMid)
   }, genPlaceholderStyle(token.colorTextPlaceholder)), {
-    '&:hover': _extends({}, genHoverStyle(token)),
-    '&:focus, &-focused': _extends({}, genActiveStyle(token)),
-    '&-disabled, &[disabled]': _extends({}, genDisabledStyle(token)),
+    '&:hover': Object.assign({}, genHoverStyle(token)),
+    '&:focus, &:focus-within': Object.assign({}, genActiveStyle(token)),
+    '&-disabled, &[disabled]': Object.assign({}, genDisabledStyle(token)),
     '&-borderless': {
       '&, &:hover, &:focus, &-focused, &-disabled, &[disabled]': {
         backgroundColor: 'transparent',
@@ -135,16 +133,17 @@ export var genBasicInputStyle = function genBasicInputStyle(token) {
     // Reset height for `textarea`s
     'textarea&': {
       maxWidth: '100%',
+      // prevent textarea resize from coming out of its container
       height: 'auto',
       minHeight: token.controlHeight,
       lineHeight: token.lineHeight,
       verticalAlign: 'bottom',
-      transition: "all " + token.motionDurationSlow + ", height 0s",
+      transition: "all ".concat(token.motionDurationSlow, ", height 0s"),
       resize: 'vertical'
     },
     // Size
-    '&-lg': _extends({}, genInputLargeStyle(token)),
-    '&-sm': _extends({}, genInputSmallStyle(token)),
+    '&-lg': Object.assign({}, genInputLargeStyle(token)),
+    '&-sm': Object.assign({}, genInputSmallStyle(token)),
     // RTL
     '&-rtl': {
       direction: 'rtl'
@@ -155,31 +154,30 @@ export var genBasicInputStyle = function genBasicInputStyle(token) {
   });
 };
 export var genInputGroupStyle = function genInputGroupStyle(token) {
-  var _ref2, _addon, _ref4, _ref6, _ref10, _extends2, _ref12;
-
+  var _$concat, _addon, _$concat3, _$concat4, _$concat$concat4, _Object$assign, _ref2;
   var componentCls = token.componentCls,
-      antCls = token.antCls;
-  return _ref12 = {
+    antCls = token.antCls;
+  return _ref2 = {
     position: 'relative',
     display: 'table',
     width: '100%',
     borderCollapse: 'separate',
     borderSpacing: 0
-  }, _defineProperty(_ref12, "&[class*='col-']", {
+  }, _defineProperty(_ref2, "&[class*='col-']", {
     paddingInlineEnd: token.paddingXS,
     '&:last-child': {
       paddingInlineEnd: 0
     }
-  }), _defineProperty(_ref12, "&-lg " + componentCls + ", &-lg > " + componentCls + "-group-addon", _extends({}, genInputLargeStyle(token))), _defineProperty(_ref12, "&-sm " + componentCls + ", &-sm > " + componentCls + "-group-addon", _extends({}, genInputSmallStyle(token))), _defineProperty(_ref12, "&-lg " + antCls + "-select-single " + antCls + "-select-selector", {
+  }), _defineProperty(_ref2, "&-lg ".concat(componentCls, ", &-lg > ").concat(componentCls, "-group-addon"), Object.assign({}, genInputLargeStyle(token))), _defineProperty(_ref2, "&-sm ".concat(componentCls, ", &-sm > ").concat(componentCls, "-group-addon"), Object.assign({}, genInputSmallStyle(token))), _defineProperty(_ref2, "&-lg ".concat(antCls, "-select-single ").concat(antCls, "-select-selector"), {
     height: token.controlHeightLG
-  }), _defineProperty(_ref12, "&-sm " + antCls + "-select-single " + antCls + "-select-selector", {
+  }), _defineProperty(_ref2, "&-sm ".concat(antCls, "-select-single ").concat(antCls, "-select-selector"), {
     height: token.controlHeightSM
-  }), _defineProperty(_ref12, "> " + componentCls, {
+  }), _defineProperty(_ref2, "> ".concat(componentCls), {
     display: 'table-cell',
     '&:not(:first-child):not(:last-child)': {
       borderRadius: 0
     }
-  }), _defineProperty(_ref12, componentCls + "-group", (_ref4 = {}, _defineProperty(_ref4, "&-addon, &-wrap", {
+  }), _defineProperty(_ref2, "".concat(componentCls, "-group"), (_$concat3 = {}, _defineProperty(_$concat3, "&-addon, &-wrap", {
     display: 'table-cell',
     width: 1,
     whiteSpace: 'nowrap',
@@ -187,85 +185,86 @@ export var genInputGroupStyle = function genInputGroupStyle(token) {
     '&:not(:first-child):not(:last-child)': {
       borderRadius: 0
     }
-  }), _defineProperty(_ref4, '&-wrap > *', {
+  }), _defineProperty(_$concat3, '&-wrap > *', {
     display: 'block !important'
-  }), _defineProperty(_ref4, '&-addon', (_addon = {
+  }), _defineProperty(_$concat3, '&-addon', (_addon = {
     position: 'relative',
-    padding: "0 " + token.inputPaddingHorizontal + "px",
+    padding: "0 ".concat(unit(token.paddingInline)),
     color: token.colorText,
     fontWeight: 'normal',
     fontSize: token.fontSize,
     textAlign: 'center',
-    backgroundColor: token.colorFillAlter,
-    border: token.lineWidth + "px " + token.lineType + " " + token.colorBorder,
+    backgroundColor: token.addonBg,
+    border: "".concat(unit(token.lineWidth), " ").concat(token.lineType, " ").concat(token.colorBorder),
     borderRadius: token.borderRadius,
-    transition: "all " + token.motionDurationSlow
-  }, _defineProperty(_addon, antCls + "-select", (_ref2 = {
-    margin: "-" + (token.inputPaddingVertical + 1) + "px -" + token.inputPaddingHorizontal + "px"
-  }, _defineProperty(_ref2, "&" + antCls + "-select-single:not(" + antCls + "-select-customize-input)", _defineProperty({}, antCls + "-select-selector", {
+    transition: "all ".concat(token.motionDurationSlow),
+    lineHeight: 1
+  }, _defineProperty(_addon, "".concat(antCls, "-select"), (_$concat = {
+    margin: "".concat(unit(token.calc(token.paddingBlock).add(1).mul(-1).equal()), " ").concat(unit(token.calc(token.paddingInline).mul(-1).equal()))
+  }, _defineProperty(_$concat, "&".concat(antCls, "-select-single:not(").concat(antCls, "-select-customize-input):not(").concat(antCls, "-pagination-size-changer)"), _defineProperty({}, "".concat(antCls, "-select-selector"), {
     backgroundColor: 'inherit',
-    border: token.lineWidth + "px " + token.lineType + " transparent",
+    border: "".concat(unit(token.lineWidth), " ").concat(token.lineType, " transparent"),
     boxShadow: 'none'
-  })), _defineProperty(_ref2, '&-open, &-focused', _defineProperty({}, antCls + "-select-selector", {
+  })), _defineProperty(_$concat, '&-open, &-focused', _defineProperty({}, "".concat(antCls, "-select-selector"), {
     color: token.colorPrimary
-  })), _ref2)), _defineProperty(_addon, antCls + "-cascader-picker", _defineProperty({
-    margin: "-9px -" + token.inputPaddingHorizontal + "px",
+  })), _$concat)), _defineProperty(_addon, "".concat(antCls, "-cascader-picker"), _defineProperty({
+    margin: "-9px ".concat(unit(token.calc(token.paddingInline).mul(-1).equal())),
     backgroundColor: 'transparent'
-  }, antCls + "-cascader-input", {
+  }, "".concat(antCls, "-cascader-input"), {
     textAlign: 'start',
     border: 0,
     boxShadow: 'none'
-  })), _addon)), _defineProperty(_ref4, '&-addon:first-child', {
+  })), _addon)), _defineProperty(_$concat3, '&-addon:first-child', {
     borderInlineEnd: 0
-  }), _defineProperty(_ref4, '&-addon:last-child', {
+  }), _defineProperty(_$concat3, '&-addon:last-child', {
     borderInlineStart: 0
-  }), _ref4)), _defineProperty(_ref12, "" + componentCls, {
-    "float": 'inline-start',
+  }), _$concat3)), _defineProperty(_ref2, "".concat(componentCls), {
     width: '100%',
     marginBottom: 0,
     textAlign: 'inherit',
     '&:focus': {
       zIndex: 1,
+      // Fix https://gw.alipayobjects.com/zos/rmsportal/DHNpoqfMXSfrSnlZvhsJ.png
       borderInlineEndWidth: 1
     },
     '&:hover': _defineProperty({
       zIndex: 1,
       borderInlineEndWidth: 1
-    }, componentCls + "-search-with-button &", {
+    }, "".concat(componentCls, "-search-with-button &"), {
       zIndex: 0
     })
-  }), _defineProperty(_ref12, "> " + componentCls + ":first-child, " + componentCls + "-group-addon:first-child", _defineProperty({
+  }), _defineProperty(_ref2, "> ".concat(componentCls, ":first-child, ").concat(componentCls, "-group-addon:first-child"), _defineProperty({
     borderStartEndRadius: 0,
     borderEndEndRadius: 0
-  }, antCls + "-select " + antCls + "-select-selector", {
+  }, "".concat(antCls, "-select ").concat(antCls, "-select-selector"), {
     borderStartEndRadius: 0,
     borderEndEndRadius: 0
-  })), _defineProperty(_ref12, "> " + componentCls + "-affix-wrapper", (_ref6 = {}, _defineProperty(_ref6, "&:not(:first-child) " + componentCls, {
+  })), _defineProperty(_ref2, "> ".concat(componentCls, "-affix-wrapper"), (_$concat4 = {}, _defineProperty(_$concat4, "&:not(:first-child) ".concat(componentCls), {
     borderStartStartRadius: 0,
     borderEndStartRadius: 0
-  }), _defineProperty(_ref6, "&:not(:last-child) " + componentCls, {
+  }), _defineProperty(_$concat4, "&:not(:last-child) ".concat(componentCls), {
     borderStartEndRadius: 0,
     borderEndEndRadius: 0
-  }), _ref6)), _defineProperty(_ref12, "> " + componentCls + ":last-child, " + componentCls + "-group-addon:last-child", _defineProperty({
+  }), _$concat4)), _defineProperty(_ref2, "> ".concat(componentCls, ":last-child, ").concat(componentCls, "-group-addon:last-child"), _defineProperty({
     borderStartStartRadius: 0,
     borderEndStartRadius: 0
-  }, antCls + "-select " + antCls + "-select-selector", {
+  }, "".concat(antCls, "-select ").concat(antCls, "-select-selector"), {
     borderStartStartRadius: 0,
     borderEndStartRadius: 0
-  })), _defineProperty(_ref12, componentCls + "-affix-wrapper", _defineProperty({
+  })), _defineProperty(_ref2, "".concat(componentCls, "-affix-wrapper"), _defineProperty({
     '&:not(:last-child)': _defineProperty({
       borderStartEndRadius: 0,
       borderEndEndRadius: 0
-    }, componentCls + "-search &", {
+    }, "".concat(componentCls, "-search &"), {
       borderStartStartRadius: token.borderRadius,
       borderEndStartRadius: token.borderRadius
     })
-  }, "&:not(:first-child), " + componentCls + "-search &:not(:first-child)", {
+  }, "&:not(:first-child), ".concat(componentCls, "-search &:not(:first-child)"), {
     borderStartStartRadius: 0,
     borderEndStartRadius: 0
-  })), _defineProperty(_ref12, '&&-compact', _extends(_extends({
+  })), _defineProperty(_ref2, "&".concat(componentCls, "-group-compact"), Object.assign(Object.assign({
     display: 'block'
-  }, clearFix()), (_extends2 = {}, _defineProperty(_extends2, componentCls + "-group-addon, " + componentCls + "-group-wrap, > " + componentCls, {
+  }, clearFix()), (_Object$assign = {}, _defineProperty(_Object$assign, "".concat(componentCls, "-group-addon, ").concat(componentCls, "-group-wrap, > ").concat(componentCls), {
     '&:not(:first-child):not(:last-child)': {
       borderInlineEndWidth: token.lineWidth,
       '&:hover': {
@@ -275,21 +274,20 @@ export var genInputGroupStyle = function genInputGroupStyle(token) {
         zIndex: 1
       }
     }
-  }), _defineProperty(_extends2, '& > *', {
+  }), _defineProperty(_Object$assign, '& > *', {
     display: 'inline-block',
-    "float": 'none',
+    float: 'none',
     verticalAlign: 'top',
+    // https://github.com/ant-design/ant-design-pro/issues/139
     borderRadius: 0
-  }), _defineProperty(_extends2, "& > " + componentCls + "-affix-wrapper", {
-    display: 'inline-flex'
-  }), _defineProperty(_extends2, "& > " + antCls + "-picker-range", {
+  }), _defineProperty(_Object$assign, "\n        & > ".concat(componentCls, "-affix-wrapper,\n        & > ").concat(componentCls, "-number-affix-wrapper,\n        & > ").concat(antCls, "-picker-range\n      "), {
     display: 'inline-flex'
-  }), _defineProperty(_extends2, '& > *:not(:last-child)', {
-    marginInlineEnd: -token.lineWidth,
+  }), _defineProperty(_Object$assign, '& > *:not(:last-child)', {
+    marginInlineEnd: token.calc(token.lineWidth).mul(-1).equal(),
     borderInlineEndWidth: token.lineWidth
-  }), _defineProperty(_extends2, "" + componentCls, {
-    "float": 'none'
-  }), _defineProperty(_extends2, "& > " + antCls + "-select > " + antCls + "-select-selector,\n      & > " + antCls + "-select-auto-complete " + componentCls + ",\n      & > " + antCls + "-cascader-picker " + componentCls + ",\n      & > " + componentCls + "-group-wrapper " + componentCls, {
+  }), _defineProperty(_Object$assign, "".concat(componentCls), {
+    float: 'none'
+  }), _defineProperty(_Object$assign, "& > ".concat(antCls, "-select > ").concat(antCls, "-select-selector,\n      & > ").concat(antCls, "-select-auto-complete ").concat(componentCls, ",\n      & > ").concat(antCls, "-cascader-picker ").concat(componentCls, ",\n      & > ").concat(componentCls, "-group-wrapper ").concat(componentCls), {
     borderInlineEndWidth: token.lineWidth,
     borderRadius: 0,
     '&:hover': {
@@ -298,71 +296,68 @@ export var genInputGroupStyle = function genInputGroupStyle(token) {
     '&:focus': {
       zIndex: 1
     }
-  }), _defineProperty(_extends2, "& > " + antCls + "-select-focused", {
+  }), _defineProperty(_Object$assign, "& > ".concat(antCls, "-select-focused"), {
     zIndex: 1
-  }), _defineProperty(_extends2, "& > " + antCls + "-select > " + antCls + "-select-arrow", {
+  }), _defineProperty(_Object$assign, "& > ".concat(antCls, "-select > ").concat(antCls, "-select-arrow"), {
     zIndex: 1 // https://github.com/ant-design/ant-design/issues/20371
-
-  }), _defineProperty(_extends2, "& > *:first-child,\n      & > " + antCls + "-select:first-child > " + antCls + "-select-selector,\n      & > " + antCls + "-select-auto-complete:first-child " + componentCls + ",\n      & > " + antCls + "-cascader-picker:first-child " + componentCls, {
+  }), _defineProperty(_Object$assign, "& > *:first-child,\n      & > ".concat(antCls, "-select:first-child > ").concat(antCls, "-select-selector,\n      & > ").concat(antCls, "-select-auto-complete:first-child ").concat(componentCls, ",\n      & > ").concat(antCls, "-cascader-picker:first-child ").concat(componentCls), {
     borderStartStartRadius: token.borderRadius,
     borderEndStartRadius: token.borderRadius
-  }), _defineProperty(_extends2, "& > *:last-child,\n      & > " + antCls + "-select:last-child > " + antCls + "-select-selector,\n      & > " + antCls + "-cascader-picker:last-child " + componentCls + ",\n      & > " + antCls + "-cascader-picker-focused:last-child " + componentCls, {
+  }), _defineProperty(_Object$assign, "& > *:last-child,\n      & > ".concat(antCls, "-select:last-child > ").concat(antCls, "-select-selector,\n      & > ").concat(antCls, "-cascader-picker:last-child ").concat(componentCls, ",\n      & > ").concat(antCls, "-cascader-picker-focused:last-child ").concat(componentCls), {
     borderInlineEndWidth: token.lineWidth,
     borderStartEndRadius: token.borderRadius,
     borderEndEndRadius: token.borderRadius
-  }), _defineProperty(_extends2, "& > " + antCls + "-select-auto-complete " + componentCls, {
+  }), _defineProperty(_Object$assign, "& > ".concat(antCls, "-select-auto-complete ").concat(componentCls), {
     verticalAlign: 'top'
-  }), _defineProperty(_extends2, componentCls + "-group-wrapper + " + componentCls + "-group-wrapper", _defineProperty({
-    marginInlineStart: -token.lineWidth
-  }, componentCls + "-affix-wrapper", {
+  }), _defineProperty(_Object$assign, "".concat(componentCls, "-group-wrapper + ").concat(componentCls, "-group-wrapper"), _defineProperty({
+    marginInlineStart: token.calc(token.lineWidth).mul(-1).equal()
+  }, "".concat(componentCls, "-affix-wrapper"), {
     borderRadius: 0
-  })), _defineProperty(_extends2, componentCls + "-group-wrapper:not(:last-child)", _defineProperty({}, "&" + componentCls + "-search > " + componentCls + "-group", (_ref10 = {}, _defineProperty(_ref10, "& > " + componentCls + "-group-addon > " + componentCls + "-search-button", {
+  })), _defineProperty(_Object$assign, "".concat(componentCls, "-group-wrapper:not(:last-child)"), _defineProperty({}, "&".concat(componentCls, "-search > ").concat(componentCls, "-group"), (_$concat$concat4 = {}, _defineProperty(_$concat$concat4, "& > ".concat(componentCls, "-group-addon > ").concat(componentCls, "-search-button"), {
     borderRadius: 0
-  }), _defineProperty(_ref10, "& > " + componentCls, {
+  }), _defineProperty(_$concat$concat4, "& > ".concat(componentCls), {
     borderStartStartRadius: token.borderRadius,
     borderStartEndRadius: 0,
     borderEndEndRadius: 0,
     borderEndStartRadius: token.borderRadius
-  }), _ref10))), _extends2))), _ref12;
+  }), _$concat$concat4))), _Object$assign))), _ref2;
 };
-
 var genInputStyle = function genInputStyle(token) {
   var _typeColor;
-
-  var prefixCls = token.prefixCls,
-      componentCls = token.componentCls,
-      controlHeightSM = token.controlHeightSM,
-      lineWidth = token.lineWidth;
+  var componentCls = token.componentCls,
+    controlHeightSM = token.controlHeightSM,
+    lineWidth = token.lineWidth,
+    calc = token.calc;
   var FIXED_CHROME_COLOR_HEIGHT = 16;
-  var colorSmallPadding = (controlHeightSM - lineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2;
-  return _defineProperty({}, "" + componentCls, _extends(_extends(_extends(_extends(_extends({}, resetComponent(token)), genBasicInputStyle(token)), genStatusStyle(token)), genCompactItemStyle(token, prefixCls)), {
+  var colorSmallPadding = calc(controlHeightSM).sub(calc(lineWidth).mul(2)).sub(FIXED_CHROME_COLOR_HEIGHT).div(2).equal();
+  return _defineProperty({}, componentCls, Object.assign(Object.assign(Object.assign(Object.assign({}, resetComponent(token)), genBasicInputStyle(token)), genStatusStyle(token, componentCls)), {
     '&[type="color"]': (_typeColor = {
       height: token.controlHeight
-    }, _defineProperty(_typeColor, "&" + componentCls + "-lg", {
+    }, _defineProperty(_typeColor, "&".concat(componentCls, "-lg"), {
       height: token.controlHeightLG
-    }), _defineProperty(_typeColor, "&" + componentCls + "-sm", {
+    }), _defineProperty(_typeColor, "&".concat(componentCls, "-sm"), {
       height: controlHeightSM,
       paddingTop: colorSmallPadding,
       paddingBottom: colorSmallPadding
-    }), _typeColor)
+    }), _typeColor),
+    '&[type="search"]::-webkit-search-cancel-button, &[type="search"]::-webkit-search-decoration': {
+      '-webkit-appearance': 'none'
+    }
   }));
 };
-
 var genAllowClearStyle = function genAllowClearStyle(token) {
-  var _ref14;
-
   var componentCls = token.componentCls;
-  return _ref14 = {}, _defineProperty(_ref14, componentCls + "-clear-icon", {
+  return _defineProperty({}, "".concat(componentCls, "-clear-icon"), {
     margin: 0,
-    color: token.colorIcon,
+    color: token.colorTextQuaternary,
     fontSize: token.fontSizeIcon,
     verticalAlign: -1,
     // https://github.com/ant-design/ant-design/pull/18151
     // https://codesandbox.io/s/wizardly-sun-u10br
     cursor: 'pointer',
-    transition: "color " + token.motionDurationSlow,
+    transition: "color ".concat(token.motionDurationSlow),
     '&:hover': {
-      color: token.colorTextDescription
+      color: token.colorTextTertiary
     },
     '&:active': {
       color: token.colorText
@@ -371,56 +366,47 @@ var genAllowClearStyle = function genAllowClearStyle(token) {
       visibility: 'hidden'
     },
     '&-has-suffix': {
-      margin: "0 " + token.inputAffixPadding + "px"
+      margin: "0 ".concat(unit(token.inputAffixPadding))
     }
-  }), _defineProperty(_ref14, '&-textarea-with-clear-btn', _defineProperty({
-    padding: '0 !important',
-    border: '0 !important'
-  }, componentCls + "-clear-icon", {
-    position: 'absolute',
-    insetBlockStart: token.paddingXS,
-    insetInlineEnd: token.paddingXS,
-    zIndex: 1
-  })), _ref14;
+  });
 };
-
 var genAffixStyle = function genAffixStyle(token) {
-  var _extends4;
-
+  var _Object$assign2;
   var componentCls = token.componentCls,
-      inputAffixPadding = token.inputAffixPadding,
-      colorTextDescription = token.colorTextDescription,
-      motionDurationSlow = token.motionDurationSlow,
-      colorIcon = token.colorIcon,
-      colorIconHover = token.colorIconHover,
-      iconCls = token.iconCls;
-  return _defineProperty({}, componentCls + "-affix-wrapper", _extends(_extends(_extends(_extends(_extends({}, genBasicInputStyle(token)), (_extends4 = {
-    display: 'inline-flex',
-    '&:not(&-disabled):hover': _extends(_extends({}, genHoverStyle(token)), _defineProperty({
-      zIndex: 1
-    }, componentCls + "-search-with-button &", {
-      zIndex: 0
-    })),
-    '&-focused, &:focus': {
-      zIndex: 1
-    },
-    '&-disabled': _defineProperty({}, componentCls + "[disabled]", {
-      background: 'transparent'
-    })
-  }, _defineProperty(_extends4, "> input" + componentCls, {
+    inputAffixPadding = token.inputAffixPadding,
+    colorTextDescription = token.colorTextDescription,
+    motionDurationSlow = token.motionDurationSlow,
+    colorIcon = token.colorIcon,
+    colorIconHover = token.colorIconHover,
+    iconCls = token.iconCls;
+  return _defineProperty({}, "".concat(componentCls, "-affix-wrapper"), Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, genBasicInputStyle(token)), (_Object$assign2 = {
+    display: 'inline-flex'
+  }, _defineProperty(_Object$assign2, "&:not(".concat(componentCls, "-affix-wrapper-disabled):hover"), _defineProperty({
+    zIndex: 1
+  }, "".concat(componentCls, "-search-with-button &"), {
+    zIndex: 0
+  })), _defineProperty(_Object$assign2, '&-focused, &:focus', {
+    zIndex: 1
+  }), _defineProperty(_Object$assign2, '&-disabled', _defineProperty({}, "".concat(componentCls, "[disabled]"), {
+    background: 'transparent'
+  })), _defineProperty(_Object$assign2, "> input".concat(componentCls), {
     padding: 0,
     fontSize: 'inherit',
     border: 'none',
     borderRadius: 0,
     outline: 'none',
+    '&::-ms-reveal': {
+      display: 'none'
+    },
     '&:focus': {
       boxShadow: 'none !important'
     }
-  }), _defineProperty(_extends4, '&::before', {
+  }), _defineProperty(_Object$assign2, '&::before', {
+    display: 'inline-block',
     width: 0,
     visibility: 'hidden',
     content: '"\\a0"'
-  }), _defineProperty(_extends4, "" + componentCls, {
+  }), _defineProperty(_Object$assign2, "".concat(componentCls), {
     '&-prefix, &-suffix': {
       display: 'flex',
       flex: 'none',
@@ -441,82 +427,94 @@ var genAffixStyle = function genAffixStyle(token) {
     '&-suffix': {
       marginInlineStart: inputAffixPadding
     }
-  }), _extends4)), genAllowClearStyle(token)), _defineProperty({}, "" + iconCls + componentCls + "-password-icon", {
+  }), _Object$assign2)), genAllowClearStyle(token)), _defineProperty({}, "".concat(iconCls).concat(componentCls, "-password-icon"), {
     color: colorIcon,
     cursor: 'pointer',
-    transition: "all " + motionDurationSlow,
+    transition: "all ".concat(motionDurationSlow),
     '&:hover': {
       color: colorIconHover
     }
-  })), genStatusStyle(token)));
+  })), genStatusStyle(token, "".concat(componentCls, "-affix-wrapper"))));
 };
-
 var genGroupStyle = function genGroupStyle(token) {
+  var _wrapper;
   var componentCls = token.componentCls,
-      colorError = token.colorError,
-      colorSuccess = token.colorSuccess,
-      borderRadiusLG = token.borderRadiusLG,
-      borderRadiusSM = token.borderRadiusSM;
-  return _defineProperty({}, componentCls + "-group", _extends(_extends(_extends({}, resetComponent(token)), genInputGroupStyle(token)), {
+    colorError = token.colorError,
+    colorWarning = token.colorWarning,
+    borderRadiusLG = token.borderRadiusLG,
+    borderRadiusSM = token.borderRadiusSM;
+  return _defineProperty({}, "".concat(componentCls, "-group"), Object.assign(Object.assign(Object.assign({}, resetComponent(token)), genInputGroupStyle(token)), {
     '&-rtl': {
       direction: 'rtl'
     },
-    '&-wrapper': {
+    '&-wrapper': (_wrapper = {
       display: 'inline-block',
       width: '100%',
       textAlign: 'start',
       verticalAlign: 'top',
+      // https://github.com/ant-design/ant-design/issues/6403
       '&-rtl': {
         direction: 'rtl'
       },
       // Size
-      '&-lg': _defineProperty({}, componentCls + "-group-addon", {
-        borderRadius: borderRadiusLG
+      '&-lg': _defineProperty({}, "".concat(componentCls, "-group-addon"), {
+        borderRadius: borderRadiusLG,
+        fontSize: token.fontSizeLG
       }),
-      '&-sm': _defineProperty({}, componentCls + "-group-addon", {
+      '&-sm': _defineProperty({}, "".concat(componentCls, "-group-addon"), {
         borderRadius: borderRadiusSM
       }),
       // Status
-      '&-status-error': _defineProperty({}, componentCls + "-group-addon", {
+      '&-status-error': _defineProperty({}, "".concat(componentCls, "-group-addon"), {
         color: colorError,
         borderColor: colorError
       }),
-      '&-status-warning': _defineProperty({}, componentCls + "-group-addon:last-child", {
-        color: colorSuccess,
-        borderColor: colorSuccess
-      })
-    }
+      '&-status-warning': _defineProperty({}, "".concat(componentCls, "-group-addon"), {
+        color: colorWarning,
+        borderColor: colorWarning
+      }),
+      '&-disabled': _defineProperty({}, "".concat(componentCls, "-group-addon"), Object.assign({}, genDisabledStyle(token)))
+    }, _defineProperty(_wrapper, "&:not(".concat(componentCls, "-compact-first-item):not(").concat(componentCls, "-compact-last-item)").concat(componentCls, "-compact-item"), _defineProperty({}, "".concat(componentCls, ", ").concat(componentCls, "-group-addon"), {
+      borderRadius: 0
+    })), _defineProperty(_wrapper, "&:not(".concat(componentCls, "-compact-last-item)").concat(componentCls, "-compact-first-item"), _defineProperty({}, "".concat(componentCls, ", ").concat(componentCls, "-group-addon"), {
+      borderStartEndRadius: 0,
+      borderEndEndRadius: 0
+    })), _defineProperty(_wrapper, "&:not(".concat(componentCls, "-compact-first-item)").concat(componentCls, "-compact-last-item"), _defineProperty({}, "".concat(componentCls, ", ").concat(componentCls, "-group-addon"), {
+      borderStartStartRadius: 0,
+      borderEndStartRadius: 0
+    })), _wrapper)
   }));
 };
-
 var genSearchInputStyle = function genSearchInputStyle(token) {
-  var _ref18, _ref23, _searchPrefixCls;
-
+  var _$concat7, _$concat10, _searchPrefixCls;
   var componentCls = token.componentCls,
-      antCls = token.antCls;
-  var searchPrefixCls = componentCls + "-search";
-  return _defineProperty({}, searchPrefixCls, (_searchPrefixCls = {}, _defineProperty(_searchPrefixCls, "" + componentCls, {
+    antCls = token.antCls;
+  var searchPrefixCls = "".concat(componentCls, "-search");
+  return _defineProperty({}, searchPrefixCls, (_searchPrefixCls = {}, _defineProperty(_searchPrefixCls, "".concat(componentCls), {
     '&:hover, &:focus': _defineProperty({
       borderColor: token.colorPrimaryHover
-    }, "+ " + componentCls + "-group-addon " + searchPrefixCls + "-button:not(" + antCls + "-btn-primary)", {
+    }, "+ ".concat(componentCls, "-group-addon ").concat(searchPrefixCls, "-button:not(").concat(antCls, "-btn-primary)"), {
       borderInlineStartColor: token.colorPrimaryHover
     })
-  }), _defineProperty(_searchPrefixCls, componentCls + "-affix-wrapper", {
+  }), _defineProperty(_searchPrefixCls, "".concat(componentCls, "-affix-wrapper"), {
     borderRadius: 0
-  }), _defineProperty(_searchPrefixCls, componentCls + "-lg", {
-    lineHeight: token.lineHeightLG - 0.0002
-  }), _defineProperty(_searchPrefixCls, "> " + componentCls + "-group", _defineProperty({}, "> " + componentCls + "-group-addon:last-child", (_ref18 = {
+  }), _defineProperty(_searchPrefixCls, "".concat(componentCls, "-lg"), {
+    lineHeight: token.calc(token.lineHeightLG).sub(0.0002).equal({
+      unit: false
+    })
+  }), _defineProperty(_searchPrefixCls, "> ".concat(componentCls, "-group"), _defineProperty({}, "> ".concat(componentCls, "-group-addon:last-child"), (_$concat7 = {
     insetInlineStart: -1,
     padding: 0,
     border: 0
-  }, _defineProperty(_ref18, searchPrefixCls + "-button", {
+  }, _defineProperty(_$concat7, "".concat(searchPrefixCls, "-button"), {
     paddingTop: 0,
     paddingBottom: 0,
     borderStartStartRadius: 0,
     borderStartEndRadius: token.borderRadius,
     borderEndEndRadius: token.borderRadius,
-    borderEndStartRadius: 0
-  }), _defineProperty(_ref18, searchPrefixCls + "-button:not(" + antCls + "-btn-primary)", _defineProperty({
+    borderEndStartRadius: 0,
+    boxShadow: 'none'
+  }), _defineProperty(_$concat7, "".concat(searchPrefixCls, "-button:not(").concat(antCls, "-btn-primary)"), _defineProperty({
     color: token.colorTextDescription,
     '&:hover': {
       color: token.colorPrimaryHover
@@ -524,87 +522,142 @@ var genSearchInputStyle = function genSearchInputStyle(token) {
     '&:active': {
       color: token.colorPrimaryActive
     }
-  }, "&" + antCls + "-btn-loading::before", {
+  }, "&".concat(antCls, "-btn-loading::before"), {
     insetInlineStart: 0,
     insetInlineEnd: 0,
     insetBlockStart: 0,
     insetBlockEnd: 0
-  })), _ref18))), _defineProperty(_searchPrefixCls, searchPrefixCls + "-button", {
+  })), _$concat7))), _defineProperty(_searchPrefixCls, "".concat(searchPrefixCls, "-button"), {
     height: token.controlHeight,
     '&:hover, &:focus': {
       zIndex: 1
     }
-  }), _defineProperty(_searchPrefixCls, "&-large " + searchPrefixCls + "-button", {
+  }), _defineProperty(_searchPrefixCls, "&-large ".concat(searchPrefixCls, "-button"), {
     height: token.controlHeightLG
-  }), _defineProperty(_searchPrefixCls, "&-small " + searchPrefixCls + "-button", {
+  }), _defineProperty(_searchPrefixCls, "&-small ".concat(searchPrefixCls, "-button"), {
     height: token.controlHeightSM
   }), _defineProperty(_searchPrefixCls, '&-rtl', {
     direction: 'rtl'
-  }), _defineProperty(_searchPrefixCls, "&" + componentCls + "-compact-item", (_ref23 = {}, _defineProperty(_ref23, "&:not(" + componentCls + "-compact-last-item)", _defineProperty({}, componentCls + "-group-addon", _defineProperty({}, componentCls + "-search-button", {
-    marginInlineEnd: -token.lineWidth,
+  }), _defineProperty(_searchPrefixCls, "&".concat(componentCls, "-compact-item"), (_$concat10 = {}, _defineProperty(_$concat10, "&:not(".concat(componentCls, "-compact-last-item)"), _defineProperty({}, "".concat(componentCls, "-group-addon"), _defineProperty({}, "".concat(componentCls, "-search-button"), {
+    marginInlineEnd: token.calc(token.lineWidth).mul(-1).equal(),
     borderRadius: 0
-  }))), _defineProperty(_ref23, "&:not(" + componentCls + "-compact-first-item)", _defineProperty({}, componentCls + "," + componentCls + "-affix-wrapper", {
+  }))), _defineProperty(_$concat10, "&:not(".concat(componentCls, "-compact-first-item)"), _defineProperty({}, "".concat(componentCls, ",").concat(componentCls, "-affix-wrapper"), {
     borderRadius: 0
-  })), _defineProperty(_ref23, "> " + componentCls + "-group-addon " + componentCls + "-search-button,\n        > " + componentCls + ",\n        " + componentCls + "-affix-wrapper", {
+  })), _defineProperty(_$concat10, "> ".concat(componentCls, "-group-addon ").concat(componentCls, "-search-button,\n        > ").concat(componentCls, ",\n        ").concat(componentCls, "-affix-wrapper"), {
     '&:hover,&:focus,&:active': {
       zIndex: 2
     }
-  }), _defineProperty(_ref23, "> " + componentCls + "-affix-wrapper-focused", {
+  }), _defineProperty(_$concat10, "> ".concat(componentCls, "-affix-wrapper-focused"), {
     zIndex: 2
-  }), _ref23)), _searchPrefixCls));
+  }), _$concat10)), _searchPrefixCls));
 };
-
-export function initInputToken(token) {
-  // @ts-ignore
-  return mergeToken(token, {
-    inputAffixPadding: token.paddingXXS,
-    inputPaddingVertical: Math.max(Math.round((token.controlHeight - token.fontSize * token.lineHeight) / 2 * 10) / 10 - token.lineWidth, 3),
-    inputPaddingVerticalLG: Math.ceil((token.controlHeightLG - token.fontSizeLG * token.lineHeightLG) / 2 * 10) / 10 - token.lineWidth,
-    inputPaddingVerticalSM: Math.max(Math.round((token.controlHeightSM - token.fontSize * token.lineHeight) / 2 * 10) / 10 - token.lineWidth, 0),
-    inputPaddingHorizontal: token.controlPaddingHorizontal - token.lineWidth,
-    inputPaddingHorizontalSM: token.controlPaddingHorizontalSM - token.lineWidth,
-    inputBorderHoverColor: token.colorPrimaryHover,
-    inputBorderActiveColor: token.colorPrimaryHover
-  });
-}
-
 var genTextAreaStyle = function genTextAreaStyle(token) {
-  var _showCount, _textareaPrefixCls;
-
+  var _showCount, _$concat11, _affixWrapper$conc2, _textareaPrefixCls;
   var componentCls = token.componentCls,
-      inputPaddingHorizontal = token.inputPaddingHorizontal,
-      paddingLG = token.paddingLG;
-  var textareaPrefixCls = componentCls + "-textarea";
+    paddingLG = token.paddingLG;
+  var textareaPrefixCls = "".concat(componentCls, "-textarea");
   return _defineProperty({}, textareaPrefixCls, (_textareaPrefixCls = {
-    position: 'relative'
-  }, _defineProperty(_textareaPrefixCls, textareaPrefixCls + "-suffix", {
+    position: 'relative',
+    '&-show-count': (_showCount = {}, _defineProperty(_showCount, "> ".concat(componentCls), {
+      height: '100%'
+    }), _defineProperty(_showCount, "".concat(componentCls, "-data-count"), {
+      position: 'absolute',
+      bottom: token.calc(token.fontSize).mul(token.lineHeight).mul(-1).equal(),
+      insetInlineEnd: 0,
+      color: token.colorTextDescription,
+      whiteSpace: 'nowrap',
+      pointerEvents: 'none'
+    }), _showCount),
+    '&-allow-clear': _defineProperty({}, "> ".concat(componentCls), {
+      paddingInlineEnd: paddingLG
+    })
+  }, _defineProperty(_textareaPrefixCls, "&-affix-wrapper".concat(textareaPrefixCls, "-has-feedback"), _defineProperty({}, "".concat(componentCls), {
+    paddingInlineEnd: paddingLG
+  })), _defineProperty(_textareaPrefixCls, "&-affix-wrapper".concat(componentCls, "-affix-wrapper"), (_affixWrapper$conc2 = {
+    padding: 0
+  }, _defineProperty(_affixWrapper$conc2, "> textarea".concat(componentCls), {
+    fontSize: 'inherit',
+    border: 'none',
+    outline: 'none',
+    '&:focus': {
+      boxShadow: 'none !important'
+    }
+  }), _defineProperty(_affixWrapper$conc2, "".concat(componentCls, "-suffix"), (_$concat11 = {
+    margin: 0,
+    '> *:not(:last-child)': {
+      marginInline: 0
+    }
+  }, _defineProperty(_$concat11, "".concat(componentCls, "-clear-icon"), {
+    position: 'absolute',
+    insetInlineEnd: token.paddingXS,
+    insetBlockStart: token.paddingXS
+  }), _defineProperty(_$concat11, "".concat(textareaPrefixCls, "-suffix"), {
     position: 'absolute',
     top: 0,
-    insetInlineEnd: inputPaddingHorizontal,
+    insetInlineEnd: token.paddingInline,
     bottom: 0,
     zIndex: 1,
     display: 'inline-flex',
     alignItems: 'center',
-    margin: 'auto'
-  }), _defineProperty(_textareaPrefixCls, "&-status-error,\n        &-status-warning,\n        &-status-success,\n        &-status-validating", _defineProperty({}, "&" + textareaPrefixCls + "-has-feedback", _defineProperty({}, "" + componentCls, {
-    paddingInlineEnd: paddingLG
-  }))), _defineProperty(_textareaPrefixCls, '&-show-count', (_showCount = {}, _defineProperty(_showCount, "> " + componentCls, {
-    height: '100%'
-  }), _defineProperty(_showCount, '&::after', {
-    color: token.colorTextDescription,
-    whiteSpace: 'nowrap',
-    content: 'attr(data-count)',
-    pointerEvents: 'none',
-    "float": 'right'
-  }), _showCount)), _defineProperty(_textareaPrefixCls, '&-rtl', {
-    '&::after': {
-      "float": 'left'
-    }
-  }), _textareaPrefixCls));
-}; // ============================== Export ==============================
-
-
-export default genComponentStyleHook('Input', function (token) {
-  var inputToken = initInputToken(token);
-  return [genInputStyle(inputToken), genTextAreaStyle(inputToken), genAffixStyle(inputToken), genGroupStyle(inputToken), genSearchInputStyle(inputToken)];
-});
+    margin: 'auto',
+    pointerEvents: 'none'
+  }), _$concat11)), _affixWrapper$conc2)), _textareaPrefixCls));
+};
+// ============================== Range ===============================
+var genRangeStyle = function genRangeStyle(token) {
+  var componentCls = token.componentCls;
+  return _defineProperty({}, "".concat(componentCls, "-out-of-range"), _defineProperty({}, "&, & input, & textarea, ".concat(componentCls, "-show-count-suffix, ").concat(componentCls, "-data-count"), {
+    color: token.colorError
+  }));
+};
+// ============================== Tokens ==============================
+export function initInputToken(token) {
+  return mergeToken(token, {
+    inputAffixPadding: token.paddingXXS
+  });
+}
+export var initComponentToken = function initComponentToken(token) {
+  var controlHeight = token.controlHeight,
+    fontSize = token.fontSize,
+    lineHeight = token.lineHeight,
+    lineWidth = token.lineWidth,
+    controlHeightSM = token.controlHeightSM,
+    controlHeightLG = token.controlHeightLG,
+    fontSizeLG = token.fontSizeLG,
+    lineHeightLG = token.lineHeightLG,
+    paddingSM = token.paddingSM,
+    controlPaddingHorizontalSM = token.controlPaddingHorizontalSM,
+    controlPaddingHorizontal = token.controlPaddingHorizontal,
+    colorFillAlter = token.colorFillAlter,
+    colorPrimaryHover = token.colorPrimaryHover,
+    colorPrimary = token.colorPrimary,
+    controlOutlineWidth = token.controlOutlineWidth,
+    controlOutline = token.controlOutline,
+    colorErrorOutline = token.colorErrorOutline,
+    colorWarningOutline = token.colorWarningOutline;
+  return {
+    paddingBlock: Math.max(Math.round((controlHeight - fontSize * lineHeight) / 2 * 10) / 10 - lineWidth, 0),
+    paddingBlockSM: Math.max(Math.round((controlHeightSM - fontSize * lineHeight) / 2 * 10) / 10 - lineWidth, 0),
+    paddingBlockLG: Math.ceil((controlHeightLG - fontSizeLG * lineHeightLG) / 2 * 10) / 10 - lineWidth,
+    paddingInline: paddingSM - lineWidth,
+    paddingInlineSM: controlPaddingHorizontalSM - lineWidth,
+    paddingInlineLG: controlPaddingHorizontal - lineWidth,
+    addonBg: colorFillAlter,
+    activeBorderColor: colorPrimary,
+    hoverBorderColor: colorPrimaryHover,
+    activeShadow: "0 0 0 ".concat(controlOutlineWidth, "px ").concat(controlOutline),
+    errorActiveShadow: "0 0 0 ".concat(controlOutlineWidth, "px ").concat(colorErrorOutline),
+    warningActiveShadow: "0 0 0 ".concat(controlOutlineWidth, "px ").concat(colorWarningOutline),
+    hoverBg: '',
+    activeBg: ''
+  };
+};
+// ============================== Export ==============================
+export default genStyleHooks('Input', function (token) {
+  var inputToken = mergeToken(token, initInputToken(token));
+  return [genInputStyle(inputToken), genTextAreaStyle(inputToken), genAffixStyle(inputToken), genGroupStyle(inputToken), genSearchInputStyle(inputToken), genRangeStyle(inputToken),
+  // =====================================================
+  // ==             Space Compact                       ==
+  // =====================================================
+  genCompactItemStyle(inputToken)];
+}, initComponentToken);