Avoid hardcoded configuration values

Replace hardcoded values in configuration code with design tokens, parameters, or configurable constants to ensure consistency and maintainability across the codebase.

When writing configuration-related code, avoid embedding magic numbers or fixed values directly. Instead, use design tokens for spacing, colors, and sizes, or make values configurable through parameters.

Bad:

[`&-vertical`]: {
  display: 'flex',
  flexDirection: 'column',
  rowGap: 8,  // hardcoded value
  [`&${groupPrefixCls}-large`]: {
    rowGap: 12,  // hardcoded value
  },
}

// or
maxWidth: 'calc(100% - 4px)',  // hardcoded 4px

Good:

[`&-vertical`]: {
  display: 'flex',
  flexDirection: 'column',
  rowGap: token.marginXS,  // use design token
  [`&${groupPrefixCls}-large`]: {
    rowGap: token.marginSM,  // use design token
  },
}

// or make it configurable
const mergedConfig = {
  ...contextConfig,
  ...userConfig,  // proper configuration merging
};

This approach ensures that configuration values remain consistent across components, can be easily updated globally through design tokens, and reduces the risk of inconsistencies when modifications are needed.