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

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.borderWidth(2)({});
th.borderWidth('sm')({});

th.borderStyle(2)({});
th.borderStyle('selected')({});

th.shadow(2)({});
th.shadow('xl')({});

// Style

const size = style({

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.borderWidth(2)({});
th.borderWidth('sm')({});

th.borderStyle(2)({});
th.borderStyle('selected')({});

th.shadow(2)({});
th.shadow('xl')({});

// Style

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;
            }

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)};

            input {
              top: 0;
              left: 0;
              width: 100%;
              cursor: inherit;
              height: 100%;
              margin: 0;
              opacity: 0;
              padding: 0;

Select: p => {
          const scale = p.scale || 'base'
          const px = th.space(`textFormControl.x.${scale}`)(p)
          const py = th.space(`textFormControl.y.${scale}`)(p)
          const validColor = th.color('form.valid')(p)
          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)};
            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 {

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;
            font-size: ${th.fontSize(`switch.${scale}`)(p)};
            font-weight: ${th.fontWeight('extraBold')(p)};
            ${safeTransition('base')(p)};

            input {
              top: 0;

Input: p => {
          const scale = p.scale || 'base'
          const px = th.space(`textFormControl.x.${scale}`)(p)
          const py = th.space(`textFormControl.y.${scale}`)(p)
          const validColor = th.color('form.valid')(p)
          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;
            }

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 {
              top: 0;
              left: 0;
              width: 100%;
              cursor: inherit;
              height: 100%;
              margin: 0;
              opacity: 0;
              padding: 0;