How to use the @xstyled/system.th.lineHeight function in @xstyled/system

Button: p => {
          const { outline } = p
          const scale = p.scale || 'base'
          const baseColor =
            p.variant === null ? null : th.color(p.variant || 'primary')(p)
          const px = th.space(`textFormControl.x.${scale}`)(p)
          const py = th.space(`textFormControl.y.${scale}`)(p)
          return css`
            display: inline-block;
            z-index: ${th.zIndex('control')(p)};
            font-family: ${th.font('base')(p)};
            font-size: ${th.fontSize(scale)(p)};
            padding: ${py} ${px};
            border-radius: ${th.radius(scale)(p)};
            line-height: ${th.lineHeight(`formControl.${scale}`)(p)};
            border-width: ${th.borderWidth(`button.${scale}`)(p)};
            cursor: ${p.disabled ? 'initial' : 'pointer'};
            ${safeTransition('base')(p)};

            /* When used as link */
            text-decoration: none;

            &[type='button'] {
              appearance: none;
            }

            &:disabled {
              opacity: 0.8;
            }

            ${baseColor &&

th.radius(2)({});
th.radius('sm')({});

th.transition(2)({});
th.transition('fade')({});

th.space(2)({});
th.space('sm')({});

th.size(2)({});
th.size('sm')({});

th.font(2)({});
th.font('body')({});

th.lineHeight(2)({});
th.lineHeight('sm')({});

th.fontWeight(2)({});
th.fontWeight('heavy')({});

th.letterSpacing(2)({});
th.letterSpacing('sm')({});

th.fontSize(2)({});
th.fontSize('sm')({});

th.zIndex(2)({});
th.zIndex('modal')({});

th.border(2)({});
th.border('main')({});

th.radius('sm')({});

th.transition(2)({});
th.transition('fade')({});

th.space(2)({});
th.space('sm')({});

th.size(2)({});
th.size('sm')({});

th.font(2)({});
th.font('body')({});

th.lineHeight(2)({});
th.lineHeight('sm')({});

th.fontWeight(2)({});
th.fontWeight('heavy')({});

th.letterSpacing(2)({});
th.letterSpacing('sm')({});

th.fontSize(2)({});
th.fontSize('sm')({});

th.zIndex(2)({});
th.zIndex('modal')({});

th.border(2)({});
th.border('main')({});

const invalidColor = th.color('form.invalid')(p)
          return css`
            display: block;
            appearance: none;
            width: 100%;
            z-index: ${th.zIndex('control')(p)};
            font-family: ${th.font('base')(p)};
            font-size: ${th.fontSize(scale)(p)};
            border-width: ${th.borderWidth(`formControl.${scale}`)(p)};
            border-color: ${th.color('formControl.border')(p)};
            border-style: solid;
            line-height: ${th.lineHeight(`formControl.${scale}`)(p)};
            color: ${th.color('formControl.text')(p)};
            background-color: ${th.color('formControl.background')(p)};
            padding: ${py} ${px};
            line-height: ${th.lineHeight(`button.${scale}`)(p)};
            border-radius: ${th.radius(scale)(p)};
            ${safeTransition('base')(p)};

            &[type='number'] {
              padding-right: 6rpx;
            }

            &::placeholder {
              color: ${th.color('formControl.placeholder')(p)};
            }

            &:disabled {
              background-color: ${th.color('formControl.disabled.background')(
                p,
              )};
              color: ${th.color('formControl.disabled.text')(p)};

formControl: SCALES.reduce((obj, scale) => {
    obj[scale] = th.lineHeight(scale)
    return obj
  }, {}),
}

display: block;
            appearance: none;
            width: 100%;
            z-index: ${th.zIndex('control')(p)};
            font-family: ${th.font('base')(p)};
            font-size: ${th.fontSize(scale)(p)};
            border-width: ${th.borderWidth(`formControl.${scale}`)(p)};
            border-color: ${th.color('formControl.border')(p)};
            border-style: solid;
            line-height: ${th.lineHeight(`formControl.${scale}`)(p)};
            color: ${th.color('formControl.text')(p)};
            background-color: ${th.color('formControl.background')(p)};
            background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
              no-repeat right 0.75rem center/8px 10px;
            padding: ${py} ${px};
            line-height: ${th.lineHeight(`formControl.${scale}`)(p)};
            border-radius: ${th.radius(scale)(p)};
            ${safeTransition('base')(p)};

            &::placeholder {
              color: ${th.color('formControl.placeholder')(p)};
            }

            &:disabled {
              background-color: ${th.color('formControl.disabled.background')(
                p,
              )};
              color: ${th.color('formControl.disabled.text')(p)};
            }

            &:focus {
              ${p.theme.mixins.controlFocus(th.color('primary')(p))(p)}