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

th.px(2)({});
th.px('2rpx')({});

th.percent(0.3)({});
th.percent('20em')({});

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.px('2rpx')({});

th.percent(0.3)({});
th.percent('20em')({});

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')({});

Radio: p => {
          const scale = p.scale || 'base'
          const validColor = th.color('form.valid')(p)
          const invalidColor = th.color('form.invalid')(p)
          const containerSize = th.size(`radio.container.${scale}`)(p)
          const checkmarkSize = th.size(`radio.checkmark.${scale}`)(p)
          return css`
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
            width: ${containerSize};
            height: ${containerSize};
            z-index: ${th.zIndex('control')(p)};
            background-color: ${th.color('formControl.background')(p)};
            border-radius: 50%;
            border-style: solid;
            border-width: ${th.borderWidth(`formControl.${scale}`)(p)};
            border-color: ${th.color('formControl.border')(p)};
            ${safeTransition('base')(p)};

            & > input {

Switch: p => {
          const scale = p.scale || 'base'
          const width = th.size(`switch.container.width.${scale}`)(p)
          const height = th.size(`switch.container.height.${scale}`)(p)
          const ballSize = th.size(`switch.container.ball.${scale}`)(p)
          return css`
            display: inline-block;
            position: relative;
            z-index: ${th.zIndex('control')(p)};
            font-family: ${th.font('base')(p)};
            border-radius: ${th.radius('34rpx')(p)};
            width: ${width};
            height: ${height};
            background-color: ${th.color('light300')(p)};
            overflow: hidden;
            cursor: pointer;
            border-width: ${th.borderWidth(`formControl.base`)(p)};
            border-color: ${th.color('formControl.border')(p)};
            border-style: solid;

Checkbox: p => {
          const scale = p.scale || 'base'
          const validColor = th.color('form.valid')(p)
          const invalidColor = th.color('form.invalid')(p)
          const containerSize = th.size(`checkbox.container.${scale}`)(p)
          const checkmarkSize = th.size(`checkbox.checkmark.${scale}`)(p)
          return css`
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
            width: ${containerSize};
            height: ${containerSize};
            z-index: ${th.zIndex('control')(p)};
            background-color: ${th.color('formControl.background')(p)};
            border-radius: ${th.radius(scale)(p)};
            border-style: solid;
            border-width: ${th.borderWidth(`formControl.${scale}`)(p)};
            border-color: ${th.color('formControl.border')(p)};
            ${safeTransition('base')(p)};