@antsoo-lib/components 0.1.11 → 0.1.12

package/src/input/style/index.ts

@@ -1,971 +0,0 @@
-import type { CSSObject } from '../../_util/cssinjs'
-import { clearFix, resetComponent } from '../../style'
-import { genCompactItemStyle } from '../../style/compact-item'
-import type { GlobalToken } from '../../theme/interface'
-import type { FullToken, GenerateStyle } from '../../theme/internal'
-import { genComponentStyleHook, mergeToken } from '../../theme/internal'
-
-export type InputToken<T extends GlobalToken = FullToken<'Input'>> = T & {
-  inputAffixPadding: number
-  inputPaddingVertical: number
-  inputPaddingVerticalLG: number
-  inputPaddingVerticalSM: number
-  inputPaddingHorizontal: number
-  inputPaddingHorizontalLG: number
-  inputPaddingHorizontalSM: number
-  inputBorderHoverColor: string
-  inputBorderActiveColor: string
-}
-
-export const genPlaceholderStyle = (color: string): CSSObject => ({
-  // Firefox
-  '&::-moz-placeholder': {
-    opacity: 1,
-  },
-  '&::placeholder': {
-    color,
-    userSelect: 'none', // https://github.com/ant-design/ant-design/pull/32639
-  },
-  '&:placeholder-shown': {
-    textOverflow: 'ellipsis',
-  },
-})
-
-export const genHoverStyle = (token: InputToken): CSSObject => ({
-  borderColor: token.inputBorderHoverColor,
-  borderInlineEndWidth: token.lineWidth,
-})
-
-export const genActiveStyle = (token: InputToken) => ({
-  borderColor: token.inputBorderHoverColor,
-  boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`,
-  borderInlineEndWidth: token.lineWidth,
-  outline: 0,
-})
-
-export const genDisabledStyle = (token: InputToken): CSSObject => ({
-  color: token.colorTextDisabled,
-  backgroundColor: token.colorBgContainerDisabled,
-  borderColor: token.colorBorder,
-  boxShadow: 'none',
-  cursor: 'not-allowed',
-  opacity: 1,
-
-  '&:hover': {
-    ...genHoverStyle(mergeToken<InputToken>(token, { inputBorderHoverColor: token.colorBorder })),
-  },
-})
-
-const genInputLargeStyle = (token: InputToken): CSSObject => {
-  const {
-    inputPaddingVerticalLG,
-    fontSizeLG,
-    lineHeightLG,
-    borderRadiusLG,
-    inputPaddingHorizontalLG,
-  } = token
-
-  return {
-    padding: `${inputPaddingVerticalLG}px ${inputPaddingHorizontalLG}px`,
-    fontSize: fontSizeLG,
-    lineHeight: lineHeightLG,
-    borderRadius: borderRadiusLG,
-  }
-}
-
-export const genInputSmallStyle = (token: InputToken): CSSObject => ({
-  padding: `${token.inputPaddingVerticalSM}px ${token.controlPaddingHorizontalSM - 1}px`,
-  borderRadius: token.borderRadiusSM,
-})
-
-export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject => {
-  const {
-    componentCls,
-    colorError,
-    colorWarning,
-    colorErrorOutline,
-    colorWarningOutline,
-    colorErrorBorderHover,
-    colorWarningBorderHover,
-  } = token
-
-  return {
-    [`&-status-error:not(${parentCls}-disabled):not(${parentCls}-borderless)${parentCls}`]: {
-      borderColor: colorError,
-
-      '&:hover': {
-        borderColor: colorErrorBorderHover,
-      },
-
-      '&:focus, &-focused': {
-        ...genActiveStyle(
-          mergeToken<InputToken>(token, {
-            inputBorderActiveColor: colorError,
-            inputBorderHoverColor: colorError,
-            controlOutline: colorErrorOutline,
-          }),
-        ),
-      },
-
-      [`${componentCls}-prefix`]: {
-        color: colorError,
-      },
-    },
-    [`&-status-warning:not(${parentCls}-disabled):not(${parentCls}-borderless)${parentCls}`]: {
-      borderColor: colorWarning,
-
-      '&:hover': {
-        borderColor: colorWarningBorderHover,
-      },
-
-      '&:focus, &-focused': {
-        ...genActiveStyle(
-          mergeToken<InputToken>(token, {
-            inputBorderActiveColor: colorWarning,
-            inputBorderHoverColor: colorWarning,
-            controlOutline: colorWarningOutline,
-          }),
-        ),
-      },
-
-      [`${componentCls}-prefix`]: {
-        color: colorWarning,
-      },
-    },
-  }
-}
-
-export const genBasicInputStyle = (token: InputToken): CSSObject => ({
-  position: 'relative',
-  display: 'inline-block',
-  width: '100%',
-  minWidth: 0,
-  padding: `${token.inputPaddingVertical}px ${token.inputPaddingHorizontal}px`,
-  color: token.colorText,
-  fontSize: token.fontSize,
-  lineHeight: token.lineHeight,
-  backgroundColor: token.colorBgContainer,
-  backgroundImage: 'none',
-  borderWidth: token.lineWidth,
-  borderStyle: token.lineType,
-  borderColor: token.colorBorder,
-  borderRadius: token.borderRadius,
-  transition: `all ${token.motionDurationMid}`,
-  ...genPlaceholderStyle(token.colorTextPlaceholder),
-
-  '&:hover': {
-    ...genHoverStyle(token),
-  },
-
-  '&:focus, &-focused': {
-    ...genActiveStyle(token),
-  },
-
-  '&-disabled, &[disabled]': {
-    ...genDisabledStyle(token),
-  },
-
-  '&-borderless': {
-    '&, &:hover, &:focus, &-focused, &-disabled, &[disabled]': {
-      backgroundColor: 'transparent',
-      border: 'none',
-      boxShadow: 'none',
-    },
-  },
-
-  // Reset height for `textarea`s
-  'textarea&': {
-    maxWidth: '100%', // prevent textearea resize from coming out of its container
-    height: 'auto',
-    minHeight: token.controlHeight,
-    lineHeight: token.lineHeight,
-    verticalAlign: 'bottom',
-    transition: `all ${token.motionDurationSlow}, height 0s`,
-    resize: 'vertical',
-  },
-
-  // Size
-  '&-lg': {
-    ...genInputLargeStyle(token),
-  },
-  '&-sm': {
-    ...genInputSmallStyle(token),
-  },
-
-  // RTL
-  '&-rtl': {
-    direction: 'rtl',
-  },
-
-  '&-textarea-rtl': {
-    direction: 'rtl',
-  },
-})
-
-export const genInputGroupStyle = (token: InputToken): CSSObject => {
-  const { componentCls, antCls } = token
-
-  return {
-    position: 'relative',
-    display: 'table',
-    width: '100%',
-    borderCollapse: 'separate',
-    borderSpacing: 0,
-
-    // Undo padding and float of grid classes
-    [`&[class*='col-']`]: {
-      paddingInlineEnd: token.paddingXS,
-
-      '&:last-child': {
-        paddingInlineEnd: 0,
-      },
-    },
-
-    // Sizing options
-    [`&-lg ${componentCls}, &-lg > ${componentCls}-group-addon`]: {
-      ...genInputLargeStyle(token),
-    },
-
-    [`&-sm ${componentCls}, &-sm > ${componentCls}-group-addon`]: {
-      ...genInputSmallStyle(token),
-    },
-
-    [`> ${componentCls}`]: {
-      display: 'table-cell',
-
-      '&:not(:first-child):not(:last-child)': {
-        borderRadius: 0,
-      },
-    },
-
-    [`${componentCls}-group`]: {
-      [`&-addon, &-wrap`]: {
-        display: 'table-cell',
-        width: 1,
-        whiteSpace: 'nowrap',
-        verticalAlign: 'middle',
-
-        '&:not(:first-child):not(:last-child)': {
-          borderRadius: 0,
-        },
-      },
-
-      '&-wrap > *': {
-        display: 'block !important',
-      },
-
-      '&-addon': {
-        position: 'relative',
-        padding: `0 ${token.inputPaddingHorizontal}px`,
-        color: token.colorText,
-        fontWeight: 'normal',
-        fontSize: token.fontSize,
-        textAlign: 'center',
-        backgroundColor: token.colorFillAlter,
-        border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
-        borderRadius: token.borderRadius,
-        transition: `all ${token.motionDurationSlow}`,
-        lineHeight: 1,
-
-        // Reset Select's style in addon
-        [`${antCls}-select`]: {
-          margin: `-${token.inputPaddingVertical + 1}px -${token.inputPaddingHorizontal}px`,
-
-          [`&${antCls}-select-single:not(${antCls}-select-customize-input)`]: {
-            [`${antCls}-select-selector`]: {
-              backgroundColor: 'inherit',
-              border: `${token.lineWidth}px ${token.lineType} transparent`,
-              boxShadow: 'none',
-            },
-          },
-
-          '&-open, &-focused': {
-            [`${antCls}-select-selector`]: {
-              color: token.colorPrimary,
-            },
-          },
-        },
-
-        // https://github.com/ant-design/ant-design/issues/31333
-        [`${antCls}-cascader-picker`]: {
-          margin: `-9px -${token.inputPaddingHorizontal}px`,
-          backgroundColor: 'transparent',
-          [`${antCls}-cascader-input`]: {
-            textAlign: 'start',
-            border: 0,
-            boxShadow: 'none',
-          },
-        },
-      },
-
-      '&-addon:first-child': {
-        borderInlineEnd: 0,
-      },
-
-      '&-addon:last-child': {
-        borderInlineStart: 0,
-      },
-    },
-
-    [`${componentCls}`]: {
-      float: 'inline-start',
-      width: '100%',
-      marginBottom: 0,
-      textAlign: 'inherit',
-
-      '&:focus': {
-        zIndex: 1, // Fix https://gw.alipayobjects.com/zos/rmsportal/DHNpoqfMXSfrSnlZvhsJ.png
-        borderInlineEndWidth: 1,
-      },
-
-      '&:hover': {
-        zIndex: 1,
-        borderInlineEndWidth: 1,
-
-        [`${componentCls}-search-with-button &`]: {
-          zIndex: 0,
-        },
-      },
-    },
-
-    // Reset rounded corners
-    [`> ${componentCls}:first-child, ${componentCls}-group-addon:first-child`]: {
-      borderStartEndRadius: 0,
-      borderEndEndRadius: 0,
-
-      // Reset Select's style in addon
-      [`${antCls}-select ${antCls}-select-selector`]: {
-        borderStartEndRadius: 0,
-        borderEndEndRadius: 0,
-      },
-    },
-
-    [`> ${componentCls}-affix-wrapper`]: {
-      [`&:not(:first-child) ${componentCls}`]: {
-        borderStartStartRadius: 0,
-        borderEndStartRadius: 0,
-      },
-
-      [`&:not(:last-child) ${componentCls}`]: {
-        borderStartEndRadius: 0,
-        borderEndEndRadius: 0,
-      },
-    },
-
-    [`> ${componentCls}:last-child, ${componentCls}-group-addon:last-child`]: {
-      borderStartStartRadius: 0,
-      borderEndStartRadius: 0,
-
-      // Reset Select's style in addon
-      [`${antCls}-select ${antCls}-select-selector`]: {
-        borderStartStartRadius: 0,
-        borderEndStartRadius: 0,
-      },
-    },
-
-    [`${componentCls}-affix-wrapper`]: {
-      '&:not(:last-child)': {
-        borderStartEndRadius: 0,
-        borderEndEndRadius: 0,
-        [`${componentCls}-search &`]: {
-          borderStartStartRadius: token.borderRadius,
-          borderEndStartRadius: token.borderRadius,
-        },
-      },
-
-      [`&:not(:first-child), ${componentCls}-search &:not(:first-child)`]: {
-        borderStartStartRadius: 0,
-        borderEndStartRadius: 0,
-      },
-    },
-
-    [`&${componentCls}-group-compact`]: {
-      display: 'block',
-      ...clearFix(),
-
-      [`${componentCls}-group-addon, ${componentCls}-group-wrap, > ${componentCls}`]: {
-        '&:not(:first-child):not(:last-child)': {
-          borderInlineEndWidth: token.lineWidth,
-
-          '&:hover': {
-            zIndex: 1,
-          },
-
-          '&:focus': {
-            zIndex: 1,
-          },
-        },
-      },
-
-      '& > *': {
-        display: 'inline-block',
-        float: 'none',
-        verticalAlign: 'top', // https://github.com/ant-design/ant-design-pro/issues/139
-        borderRadius: 0,
-      },
-
-      [`& > ${componentCls}-affix-wrapper`]: {
-        display: 'inline-flex',
-      },
-
-      [`& > ${antCls}-picker-range`]: {
-        display: 'inline-flex',
-      },
-
-      '& > *:not(:last-child)': {
-        marginInlineEnd: -token.lineWidth,
-        borderInlineEndWidth: token.lineWidth,
-      },
-
-      // Undo float for .ant-input-group .ant-input
-      [`${componentCls}`]: {
-        float: 'none',
-      },
-
-      // reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker, Input
-      [`& > ${antCls}-select > ${antCls}-select-selector,
-      & > ${antCls}-select-auto-complete ${componentCls},
-      & > ${antCls}-cascader-picker ${componentCls},
-      & > ${componentCls}-group-wrapper ${componentCls}`]: {
-        borderInlineEndWidth: token.lineWidth,
-        borderRadius: 0,
-
-        '&:hover': {
-          zIndex: 1,
-        },
-
-        '&:focus': {
-          zIndex: 1,
-        },
-      },
-
-      [`& > ${antCls}-select-focused`]: {
-        zIndex: 1,
-      },
-
-      // update z-index for arrow icon
-      [`& > ${antCls}-select > ${antCls}-select-arrow`]: {
-        zIndex: 1, // https://github.com/ant-design/ant-design/issues/20371
-      },
-
-      [`& > *:first-child,
-      & > ${antCls}-select:first-child > ${antCls}-select-selector,
-      & > ${antCls}-select-auto-complete:first-child ${componentCls},
-      & > ${antCls}-cascader-picker:first-child ${componentCls}`]: {
-        borderStartStartRadius: token.borderRadius,
-        borderEndStartRadius: token.borderRadius,
-      },
-
-      [`& > *:last-child,
-      & > ${antCls}-select:last-child > ${antCls}-select-selector,
-      & > ${antCls}-cascader-picker:last-child ${componentCls},
-      & > ${antCls}-cascader-picker-focused:last-child ${componentCls}`]: {
-        borderInlineEndWidth: token.lineWidth,
-        borderStartEndRadius: token.borderRadius,
-        borderEndEndRadius: token.borderRadius,
-      },
-
-      // https://github.com/ant-design/ant-design/issues/12493
-      [`& > ${antCls}-select-auto-complete ${componentCls}`]: {
-        verticalAlign: 'top',
-      },
-
-      [`${componentCls}-group-wrapper + ${componentCls}-group-wrapper`]: {
-        marginInlineStart: -token.lineWidth,
-        [`${componentCls}-affix-wrapper`]: {
-          borderRadius: 0,
-        },
-      },
-
-      [`${componentCls}-group-wrapper:not(:last-child)`]: {
-        [`&${componentCls}-search > ${componentCls}-group`]: {
-          [`& > ${componentCls}-group-addon > ${componentCls}-search-button`]: {
-            borderRadius: 0,
-          },
-
-          [`& > ${componentCls}`]: {
-            borderStartStartRadius: token.borderRadius,
-            borderStartEndRadius: 0,
-            borderEndEndRadius: 0,
-            borderEndStartRadius: token.borderRadius,
-          },
-        },
-      },
-    },
-
-    [`&&-sm ${antCls}-btn`]: {
-      fontSize: token.fontSizeSM,
-      height: token.controlHeightSM,
-      lineHeight: 'normal',
-    },
-
-    [`&&-lg ${antCls}-btn`]: {
-      fontSize: token.fontSizeLG,
-      height: token.controlHeightLG,
-      lineHeight: 'normal',
-    },
-
-    // Fix https://github.com/ant-design/ant-design/issues/5754
-    [`&&-lg ${antCls}-select-single ${antCls}-select-selector`]: {
-      height: `${token.controlHeightLG}px`,
-
-      [`${antCls}-select-selection-item, ${antCls}-select-selection-placeholder`]: {
-        // -2 is for the border size & override default
-        lineHeight: `${token.controlHeightLG - 2}px`,
-      },
-
-      [`${antCls}-select-selection-search-input`]: {
-        height: `${token.controlHeightLG}px`,
-      },
-    },
-
-    [`&&-sm ${antCls}-select-single ${antCls}-select-selector`]: {
-      height: `${token.controlHeightSM}px`,
-
-      [`${antCls}-select-selection-item, ${antCls}-select-selection-placeholder`]: {
-        // -2 is for the border size & override default
-        lineHeight: `${token.controlHeightSM - 2}px`,
-      },
-
-      [`${antCls}-select-selection-search-input`]: {
-        height: `${token.controlHeightSM}px`,
-      },
-    },
-  }
-}
-
-const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
-  const { componentCls, controlHeightSM, lineWidth } = token
-
-  const FIXED_CHROME_COLOR_HEIGHT = 16
-  const colorSmallPadding = (controlHeightSM - lineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2
-
-  return {
-    [componentCls]: {
-      ...resetComponent(token),
-      ...genBasicInputStyle(token),
-      ...genStatusStyle(token, componentCls),
-
-      '&[type="color"]': {
-        height: token.controlHeight,
-
-        [`&${componentCls}-lg`]: {
-          height: token.controlHeightLG,
-        },
-        [`&${componentCls}-sm`]: {
-          height: controlHeightSM,
-          paddingTop: colorSmallPadding,
-          paddingBottom: colorSmallPadding,
-        },
-      },
-    },
-  }
-}
-
-const genAllowClearStyle = (token: InputToken): CSSObject => {
-  const { componentCls } = token
-  return {
-    // ========================= Input =========================
-    [`${componentCls}-clear-icon`]: {
-      margin: 0,
-      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}`,
-
-      '&:hover': {
-        color: token.colorTextTertiary,
-      },
-
-      '&:active': {
-        color: token.colorText,
-      },
-
-      '&-hidden': {
-        visibility: 'hidden',
-      },
-
-      '&-has-suffix': {
-        margin: `0 ${token.inputAffixPadding}px`,
-      },
-    },
-
-    // ======================= TextArea ========================
-    '&-textarea-with-clear-btn': {
-      padding: '0 !important',
-      border: '0 !important',
-
-      [`${componentCls}-clear-icon`]: {
-        position: 'absolute',
-        insetBlockStart: token.paddingXS,
-        insetInlineEnd: token.paddingXS,
-        zIndex: 1,
-      },
-    },
-  }
-}
-
-const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
-  const {
-    componentCls,
-    inputAffixPadding,
-    colorTextDescription,
-    motionDurationSlow,
-    colorIcon,
-    colorIconHover,
-    iconCls,
-  } = token
-
-  return {
-    [`${componentCls}-affix-wrapper`]: {
-      ...genBasicInputStyle(token),
-      display: 'inline-flex',
-
-      [`&:not(${componentCls}-affix-wrapper-disabled):hover`]: {
-        ...genHoverStyle(token),
-        zIndex: 1,
-        [`${componentCls}-search-with-button &`]: {
-          zIndex: 0,
-        },
-      },
-
-      '&-focused, &:focus': {
-        zIndex: 1,
-      },
-
-      '&-disabled': {
-        [`${componentCls}[disabled]`]: {
-          background: 'transparent',
-        },
-      },
-
-      [`> input${componentCls}`]: {
-        padding: 0,
-        fontSize: 'inherit',
-        border: 'none',
-        borderRadius: 0,
-        outline: 'none',
-
-        '&:focus': {
-          boxShadow: 'none !important',
-        },
-      },
-
-      '&::before': {
-        width: 0,
-        visibility: 'hidden',
-        content: '"\\a0"',
-      },
-
-      [`${componentCls}`]: {
-        '&-prefix, &-suffix': {
-          display: 'flex',
-          flex: 'none',
-          alignItems: 'center',
-
-          '> *:not(:last-child)': {
-            marginInlineEnd: token.paddingXS,
-          },
-        },
-
-        '&-show-count-suffix': {
-          color: colorTextDescription,
-        },
-
-        '&-show-count-has-suffix': {
-          marginInlineEnd: token.paddingXXS,
-        },
-
-        '&-prefix': {
-          marginInlineEnd: inputAffixPadding,
-        },
-
-        '&-suffix': {
-          marginInlineStart: inputAffixPadding,
-        },
-      },
-
-      ...genAllowClearStyle(token),
-
-      // password
-      [`${iconCls}${componentCls}-password-icon`]: {
-        color: colorIcon,
-        cursor: 'pointer',
-        transition: `all ${motionDurationSlow}`,
-
-        '&:hover': {
-          color: colorIconHover,
-        },
-      },
-
-      // status
-      ...genStatusStyle(token, `${componentCls}-affix-wrapper`),
-    },
-  }
-}
-
-const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
-  const { componentCls, colorError, colorSuccess, borderRadiusLG, borderRadiusSM } = token
-
-  return {
-    [`${componentCls}-group`]: {
-      // Style for input-group: input with label, with button or dropdown...
-      ...resetComponent(token),
-      ...genInputGroupStyle(token),
-
-      '&-rtl': {
-        direction: 'rtl',
-      },
-
-      '&-wrapper': {
-        display: 'inline-block',
-        width: '100%',
-        textAlign: 'start',
-        verticalAlign: 'top', // https://github.com/ant-design/ant-design/issues/6403
-
-        '&-rtl': {
-          direction: 'rtl',
-        },
-
-        // Size
-        '&-lg': {
-          [`${componentCls}-group-addon`]: {
-            borderRadius: borderRadiusLG,
-          },
-        },
-        '&-sm': {
-          [`${componentCls}-group-addon`]: {
-            borderRadius: borderRadiusSM,
-          },
-        },
-
-        // Status
-        '&-status-error': {
-          [`${componentCls}-group-addon`]: {
-            color: colorError,
-            borderColor: colorError,
-          },
-        },
-        '&-status-warning': {
-          [`${componentCls}-group-addon:last-child`]: {
-            color: colorSuccess,
-            borderColor: colorSuccess,
-          },
-        },
-      },
-    },
-  }
-}
-
-const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
-  const { componentCls, antCls } = token
-  const searchPrefixCls = `${componentCls}-search`
-  return {
-    [searchPrefixCls]: {
-      [`${componentCls}`]: {
-        '&:hover, &:focus': {
-          borderColor: token.colorPrimaryHover,
-
-          [`+ ${componentCls}-group-addon ${searchPrefixCls}-button:not(${antCls}-btn-primary)`]: {
-            borderInlineStartColor: token.colorPrimaryHover,
-          },
-        },
-      },
-
-      [`${componentCls}-affix-wrapper`]: {
-        borderRadius: 0,
-      },
-
-      // fix slight height diff in Firefox:
-      // https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category
-      [`${componentCls}-lg`]: {
-        lineHeight: token.lineHeightLG - 0.0002,
-      },
-
-      [`> ${componentCls}-group`]: {
-        [`> ${componentCls}-group-addon:last-child`]: {
-          insetInlineStart: -1,
-          padding: 0,
-          border: 0,
-
-          [`${searchPrefixCls}-button`]: {
-            paddingTop: 0,
-            paddingBottom: 0,
-            borderStartStartRadius: 0,
-            borderStartEndRadius: token.borderRadius,
-            borderEndEndRadius: token.borderRadius,
-            borderEndStartRadius: 0,
-          },
-
-          [`${searchPrefixCls}-button:not(${antCls}-btn-primary)`]: {
-            color: token.colorTextDescription,
-
-            '&:hover': {
-              color: token.colorPrimaryHover,
-            },
-
-            '&:active': {
-              color: token.colorPrimaryActive,
-            },
-
-            [`&${antCls}-btn-loading::before`]: {
-              insetInlineStart: 0,
-              insetInlineEnd: 0,
-              insetBlockStart: 0,
-              insetBlockEnd: 0,
-            },
-          },
-        },
-      },
-
-      [`${searchPrefixCls}-button`]: {
-        height: token.controlHeight,
-
-        '&:hover, &:focus': {
-          zIndex: 1,
-        },
-      },
-
-      [`&-large ${searchPrefixCls}-button`]: {
-        height: token.controlHeightLG,
-      },
-
-      [`&-small ${searchPrefixCls}-button`]: {
-        height: token.controlHeightSM,
-      },
-
-      '&-rtl': {
-        direction: 'rtl',
-      },
-
-      // ===================== Compact Item Customized Styles =====================
-      [`&${componentCls}-compact-item`]: {
-        [`&:not(${componentCls}-compact-last-item)`]: {
-          [`${componentCls}-group-addon`]: {
-            [`${componentCls}-search-button`]: {
-              marginInlineEnd: -token.lineWidth,
-              borderRadius: 0,
-            },
-          },
-        },
-
-        [`&:not(${componentCls}-compact-first-item)`]: {
-          [`${componentCls},${componentCls}-affix-wrapper`]: {
-            borderRadius: 0,
-          },
-        },
-
-        [`> ${componentCls}-group-addon ${componentCls}-search-button,
-        > ${componentCls},
-        ${componentCls}-affix-wrapper`]: {
-          '&:hover,&:focus,&:active': {
-            zIndex: 2,
-          },
-        },
-
-        [`> ${componentCls}-affix-wrapper-focused`]: {
-          zIndex: 2,
-        },
-      },
-    },
-  }
-}
-
-export function initInputToken<T extends GlobalToken = GlobalToken>(token: T): InputToken<T> {
-  // @ts-ignore
-  return mergeToken<InputToken<T>>(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.paddingSM - token.lineWidth,
-    inputPaddingHorizontalSM: token.paddingXS - token.lineWidth,
-    inputPaddingHorizontalLG: token.controlPaddingHorizontal - token.lineWidth,
-    inputBorderHoverColor: token.colorPrimaryHover,
-    inputBorderActiveColor: token.colorPrimaryHover,
-  })
-}
-
-const genTextAreaStyle: GenerateStyle<InputToken> = (token) => {
-  const { componentCls, inputPaddingHorizontal, paddingLG } = token
-  const textareaPrefixCls = `${componentCls}-textarea`
-
-  return {
-    [textareaPrefixCls]: {
-      position: 'relative',
-
-      [`${textareaPrefixCls}-suffix`]: {
-        position: 'absolute',
-        top: 0,
-        insetInlineEnd: inputPaddingHorizontal,
-        bottom: 0,
-        zIndex: 1,
-        display: 'inline-flex',
-        alignItems: 'center',
-        margin: 'auto',
-      },
-
-      [`&-status-error,
-        &-status-warning,
-        &-status-success,
-        &-status-validating`]: {
-        [`&${textareaPrefixCls}-has-feedback`]: {
-          [`${componentCls}`]: {
-            paddingInlineEnd: paddingLG,
-          },
-        },
-      },
-
-      '&-show-count': {
-        // https://github.com/ant-design/ant-design/issues/33049
-        [`> ${componentCls}`]: {
-          height: '100%',
-        },
-
-        '&::after': {
-          color: token.colorTextDescription,
-          whiteSpace: 'nowrap',
-          content: 'attr(data-count)',
-          pointerEvents: 'none',
-          float: 'right',
-        },
-      },
-
-      '&-rtl': {
-        '&::after': {
-          float: 'left',
-        },
-      },
-    },
-  }
-}
-
-// ============================== Export ==============================
-export default genComponentStyleHook('Input', (token) => {
-  const inputToken = initInputToken<FullToken<'Input'>>(token)
-
-  return [
-    genInputStyle(inputToken),
-    genTextAreaStyle(inputToken),
-    genAffixStyle(inputToken),
-    genGroupStyle(inputToken),
-    genSearchInputStyle(inputToken),
-    // =====================================================
-    // ==             Space Compact                       ==
-    // =====================================================
-    genCompactItemStyle(inputToken),
-  ]
-})