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

Card: p => {
          return css`
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: ${th.color('lighter')(p)};
            background-clip: border-box;
            border: 0.0625rem solid;
            border-color: ${th.color('highlightBorder')(p)};
            border-radius: ${th.radius('base')(p)};
            font-family: ${th.font('base')(p)};

            && {
              ${system(p)}
            }
          `
        },
      },

}

            &[aria-disabled] {
              opacity: 0.6;
            }

            &[aria-invalid='true'] {
              ${validationStyle(invalidColor)(p)};
            }

            &[aria-invalid='false'] {
              ${validationStyle(validColor)(p)};
            }

            && {
              ${system(p)}
            }
          `
        },
      },

FormCheck: p => {
        return css`
          display: flex;
          align-items: center;

          && {
            ${system(p)}
          }
        `
      },
    },

RadioGroup: p => {
        return css`
          padding: 0;
          border: 0;

          &[aria-orientation='horizontal'] > [data-form-check] {
            display: inline-flex;
            margin-right: 1em;
          }

          && {
            ${system(p)}
          }
        `
      },
    },

&:focus {
                  ${p.theme.mixins.controlFocus(baseColor)(p)};
                  border-color: ${baseColor};
                }

                &:not(:disabled):hover,
                &:not(:disabled):active {
                  color: ${darken(0.1, baseColor)};
                  border-color: ${darken(0.05, baseColor)};
                  background-color: ${transparentize(0.8, baseColor)};
                }
              `}

            && {
              ${system(p)}
            }
          `
        },
      },

}

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

            &[aria-invalid='true'] {
              ${validationStyle(invalidColor)(p)};
            }

            &[aria-invalid='false'] {
              ${validationStyle(validColor)(p)};
            }

            && {
              ${system(p)};
            }
          `
        },
      },

}

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

            &[aria-invalid='true'] {
              ${validationStyle(invalidColor)(p)};
            }

            &[aria-invalid='false'] {
              ${validationStyle(validColor)(p)};
            }

            && {
              ${system(p)}
            }
          `
        },
      },

position: relative;
            padding: 12rpx 20rpx;
            margin-bottom: 16rpx;
            border: 1rpx;
            border-color: transparent;
            border-radius: ${th.radius('base')(p)};
            color: ${color};
            background-color: ${backgroundColor};
            border-color: ${borderColor};

            hr {
              border-top-color: ${hrColor};
            }

            && {
              ${system(p)}
            }
          `
        },
      },

Text: p => {
          const variantConfig = p.variant ? p.theme.texts[p.variant] : null
          return css`
            font-family: ${th.font('base')(p)};
            ${ellipsis(p)}
            ${variantConfig ? variantConfig.style : null}

            && {
              ${system(p)}
            }
          `
        },
      },

[data-switch-content] {
                transform: translateX(calc(${width} - ${ballSize} - 12%));
              }

              [data-switch-ball] {
                background-color: ${th.color('primary')(p)};
              }
            }

            &[aria-disabled='true'] {
              opacity: 0.6;
            }

            && {
              ${system(p)}
            }
          `
        },
      },